@kloudlite/design-system
Version:
A design system for building ambitious products.
271 lines (266 loc) • 8.98 kB
JavaScript
;
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// components/atoms/chips.tsx
var chips_exports = {};
__export(chips_exports, {
Chip: () => Chip,
ChipGroup: () => ChipGroup,
default: () => chips_default
});
module.exports = __toCommonJS(chips_exports);
var RovingFocusGroup = __toESM(require("@radix-ui/react-roving-focus"), 1);
var import_framer_motion = require("framer-motion");
var import_react3 = __toESM(require("react"), 1);
// components/icons.tsx
var import_react = require("@jengaicons/react");
var import_jsx_runtime = require("react/jsx-runtime");
// components/utils.tsx
var import_classnames = __toESM(require("classnames"), 1);
var import_react2 = require("react");
var import_uuid = require("uuid");
var cn = (...props) => {
return (0, import_classnames.default)(...props);
};
// components/atoms/chips.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var ChipBase = import_react3.default.forwardRef(
(props, ref) => {
const {
item,
label,
disabled = false,
compType = "BASIC",
onRemove = (_) => {
},
prefix = null,
onClick = (_) => {
},
Component,
loading = false,
...mprops
} = props;
let extraProps = {};
if (compType === "CLICKABLE") {
extraProps = {
initial: { scale: 1 },
whileTap: { scale: 0.99 }
};
}
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
Component,
{
type: "button",
...extraProps,
...mprops,
className: cn(
"kl-rounded kl-border kl-bodySm-medium kl-py-px kl-flex kl-items-center kl-transition-all kl-outline-none kl-flex-row kl-gap-md kl-ring-offset-1 kl-h-fit",
"focus-within:kl-ring-2 focus-within:kl-ring-border-focus",
"kl-w-fit kl-flex-shrink-0",
{
"kl-text-text-default": !disabled,
"kl-text-text-disabled": disabled
},
{
"kl-pointer-events-none": disabled
},
{
"kl-border-border-default": !disabled,
"kl-border-border-disabled": disabled
},
{
"kl-bg-surface-basic-default": !disabled
},
{
"kl-pr-md kl-pl-lg kl-py-md": compType === "REMOVABLE",
"kl-px-lg kl-py-md": compType !== "REMOVABLE"
},
{
"kl-pr-md kl-pl-md kl-py-sm": compType === "SM"
// 'px-lg py-md': compType !== 'SM',
},
{
"hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed focus-visible:kl-ring-2 focus-visible:kl-ring-border-focus": compType === "CLICKABLE"
}
),
onClick: () => {
if (onClick)
onClick(item);
},
ref,
children: [
prefix && !loading && (typeof prefix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cn("kl-bodySm kl-text-text-soft"), children: prefix }) : import_react3.default.cloneElement(prefix, {
size: 12,
color: "currentColor"
})),
loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cn("kl-animate-spin"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Spinner, { size: 12, color: "currentColor" }) }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"span",
{
className: compType === "SM" ? "kl-flex kl-items-center kl-text-text-default" : "kl-flex kl-items-center",
children: label
}
),
compType === "REMOVABLE" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RovingFocusGroup.Item, { asChild: true, focusable: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"button",
{
"aria-label": "close",
type: "button",
disabled,
onClick: (_e) => {
if (onRemove)
onRemove(item, false);
},
onKeyDown: (e) => {
if (e.key === "Enter" || e.key === " ") {
e.stopPropagation();
e.preventDefault();
}
if (e.key === "Backspace" || e.key === "Delete") {
if (onRemove)
onRemove(item, true);
}
},
className: cn(
"kl-outline-none kl-flex kl-items-center kl-rounded-sm kl-ring-offset-0 kl-justify-center hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed",
{
"kl-cursor-default": disabled
}
),
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.XFill, { size: 12, color: "currentColor" })
}
) })
]
}
);
}
);
var Chip = (0, import_react3.forwardRef)(
({
item,
label,
disabled = false,
type = "BASIC",
prefix = null,
onClick = (_) => _,
onRemove = (_) => _,
isInGroup = false,
loading = false,
...props
}, ref) => {
let Component = "div";
if (type === "CLICKABLE") {
Component = import_framer_motion.motion.button;
}
if (type === "CLICKABLE" && isInGroup)
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RovingFocusGroup.Item, { asChild: true, focusable: true, ref, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
ChipBase,
{
item,
label,
disabled,
compType: type,
prefix,
Component,
onClick,
onRemove,
loading,
...props
}
) });
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
ChipBase,
{
item,
label,
disabled,
compType: type,
prefix,
Component,
onClick,
onRemove,
loading,
ref,
...props
}
);
}
);
var ChipGroup = ({
onClick = (_) => {
},
onRemove = (_) => {
},
children,
className = ""
}) => {
const [keyRemovable, setKeyRemovable] = (0, import_react3.useState)(false);
const [lastRemovedIndex, setLastRemovedIndex] = (0, import_react3.useState)(null);
const ref = (0, import_react3.useRef)(null);
(0, import_react3.useEffect)(() => {
if (lastRemovedIndex === null) {
return;
}
const length = import_react3.default.Children.count(children);
if (keyRemovable && length > 0) {
if (lastRemovedIndex === length) {
const buttonElement = ref.current?.children.item(
lastRemovedIndex - 1
)?.lastChild;
buttonElement.focus();
} else {
const buttonElement = ref.current?.children.item(
lastRemovedIndex
)?.lastChild;
buttonElement.focus();
}
}
}, [children]);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RovingFocusGroup.Root, { loop: true, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("kl-flex kl-flex-row kl-gap-lg", className), ref, children: import_react3.default.Children.map(children, (child, index) => {
if (!child) {
return null;
}
return (0, import_react3.cloneElement)(child, {
onClick,
isInGroup: true,
onRemove: (e, iskey) => {
setKeyRemovable(iskey);
setLastRemovedIndex(index);
if (onRemove) {
onRemove(e);
}
}
});
}) }) });
};
var Chips = {
ChipGroup,
Chip
};
var chips_default = Chips;