@kloudlite/design-system
Version:
A design system for building ambitious products.
328 lines (323 loc) • 8.03 kB
JavaScript
"use client";
// components/atoms/chips.tsx
import * as RovingFocusGroup from "@radix-ui/react-roving-focus";
import { motion } from "framer-motion";
import React, {
cloneElement,
forwardRef,
useEffect,
useRef,
useState
} from "react";
// components/icons.tsx
import {
BellSimple,
Warning,
WarningCircleFill,
Domain,
ArrowLeftLg,
ArrowRightLg,
ArrowUpLg,
ArrowDownLg,
ArrowsDownUp,
Plus,
Trash,
PencilLine,
PencilSimple,
GithubLogoFill,
GitlabLogoFill,
GitBranchFill,
Users,
Check,
ChevronLeft,
ChevronRight,
X,
SmileySad,
InfoFill,
CheckCircleFill,
WarningFill,
WarningOctagonFill,
LockSimple,
XCircleFill,
LockSimpleOpen,
MinusCircle,
Search,
ArrowsCounterClockwise,
ArrowClockwise,
Copy,
GearSix,
QrCode,
WireGuardlogo,
ChevronUpDown,
ChevronDown,
Buildings,
Project,
InfraAsCode,
Container,
File,
TreeStructure,
CirclesFour,
BackingServices,
VirtualMachine,
Database,
ArrowsClockwise,
Info,
Fan,
WarningCircle,
ChecksFill,
CircleNotch,
Circle,
CircleFill,
Spinner,
Globe,
ShieldCheck,
NoOps,
Nodeless,
GitMerge,
PencilLine as PencilLine2,
AWSlogoFill,
GoogleCloudlogo,
ArrowCounterClockwise,
CopySimple,
RecordFill,
CheckCircle,
ArrowLeftLg as ArrowLeftLg2,
EyeSlash,
Eye,
CaretUpFill,
CaretDownFill,
XFill,
HamburgerFill,
CalendarCheckFill,
GearFill,
EnvelopeSimple
} from "@jengaicons/react";
import { jsx } from "react/jsx-runtime";
// components/utils.tsx
import classNames from "classnames";
import { useMemo } from "react";
import { v4 } from "uuid";
var cn = (...props) => {
return classNames(...props);
};
// components/atoms/chips.tsx
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
var ChipBase = React.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__ */ 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__ */ jsx2("span", { className: cn("kl-bodySm kl-text-text-soft"), children: prefix }) : React.cloneElement(prefix, {
size: 12,
color: "currentColor"
})),
loading && /* @__PURE__ */ jsx2("span", { className: cn("kl-animate-spin"), children: /* @__PURE__ */ jsx2(Spinner, { size: 12, color: "currentColor" }) }),
/* @__PURE__ */ jsx2(
"span",
{
className: compType === "SM" ? "kl-flex kl-items-center kl-text-text-default" : "kl-flex kl-items-center",
children: label
}
),
compType === "REMOVABLE" && /* @__PURE__ */ jsx2(RovingFocusGroup.Item, { asChild: true, focusable: true, children: /* @__PURE__ */ jsx2(
"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__ */ jsx2(XFill, { size: 12, color: "currentColor" })
}
) })
]
}
);
}
);
var Chip = forwardRef(
({
item,
label,
disabled = false,
type = "BASIC",
prefix = null,
onClick = (_) => _,
onRemove = (_) => _,
isInGroup = false,
loading = false,
...props
}, ref) => {
let Component = "div";
if (type === "CLICKABLE") {
Component = motion.button;
}
if (type === "CLICKABLE" && isInGroup)
return /* @__PURE__ */ jsx2(RovingFocusGroup.Item, { asChild: true, focusable: true, ref, children: /* @__PURE__ */ jsx2(
ChipBase,
{
item,
label,
disabled,
compType: type,
prefix,
Component,
onClick,
onRemove,
loading,
...props
}
) });
return /* @__PURE__ */ jsx2(
ChipBase,
{
item,
label,
disabled,
compType: type,
prefix,
Component,
onClick,
onRemove,
loading,
ref,
...props
}
);
}
);
var ChipGroup = ({
onClick = (_) => {
},
onRemove = (_) => {
},
children,
className = ""
}) => {
const [keyRemovable, setKeyRemovable] = useState(false);
const [lastRemovedIndex, setLastRemovedIndex] = useState(null);
const ref = useRef(null);
useEffect(() => {
if (lastRemovedIndex === null) {
return;
}
const length = React.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__ */ jsx2(RovingFocusGroup.Root, { loop: true, asChild: true, children: /* @__PURE__ */ jsx2("div", { className: cn("kl-flex kl-flex-row kl-gap-lg", className), ref, children: React.Children.map(children, (child, index) => {
if (!child) {
return null;
}
return cloneElement(child, {
onClick,
isInGroup: true,
onRemove: (e, iskey) => {
setKeyRemovable(iskey);
setLastRemovedIndex(index);
if (onRemove) {
onRemove(e);
}
}
});
}) }) });
};
var Chips = {
ChipGroup,
Chip
};
var chips_default = Chips;
export {
Chip,
ChipGroup,
chips_default as default
};