@kloudlite/design-system
Version:
A design system for building ambitious products.
1,404 lines (1,394 loc) • 44.3 kB
JavaScript
"use client";
// components/atoms/option-list.tsx
import { motion as motion3 } from "framer-motion";
import {
Children,
cloneElement as cloneElement2,
forwardRef as forwardRef4,
useEffect,
useRef as useRef3,
useState as useState3
} from "react";
// components/utils.tsx
import classNames from "classnames";
import { useMemo } from "react";
import { v4 } from "uuid";
var cn = (...props) => {
return classNames(...props);
};
// components/atoms/_dropdown-primitive.tsx
import * as React from "react";
import { composeEventHandlers } from "@radix-ui/primitive";
import { composeRefs } from "@radix-ui/react-compose-refs";
import { createContextScope } from "@radix-ui/react-context";
import { useControllableState } from "@radix-ui/react-use-controllable-state";
import { Primitive } from "@radix-ui/react-primitive";
import * as MenuPrimitive from "@radix-ui/react-menu";
import { createMenuScope } from "@radix-ui/react-menu";
import { useId } from "@radix-ui/react-id";
import { jsx } from "react/jsx-runtime";
var DROPDOWN_MENU_NAME = "DropdownMenu";
var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(
DROPDOWN_MENU_NAME,
[createMenuScope]
);
var useMenuScope = createMenuScope();
var [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME);
var DropdownMenu = (props) => {
const {
__scopeDropdownMenu,
children,
dir,
open: openProp,
defaultOpen,
onOpenChange,
modal = true
} = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
const triggerRef = React.useRef(null);
const [open = false, setOpen] = useControllableState({
prop: openProp,
defaultProp: defaultOpen,
onChange: onOpenChange
});
return /* @__PURE__ */ jsx(
DropdownMenuProvider,
{
scope: __scopeDropdownMenu,
triggerId: useId(),
triggerRef,
contentId: useId(),
open,
onOpenChange: setOpen,
onOpenToggle: React.useCallback(
() => setOpen((prevOpen) => !prevOpen),
[setOpen]
),
modal,
children: /* @__PURE__ */ jsx(
MenuPrimitive.Root,
{
...menuScope,
open,
onOpenChange: setOpen,
dir,
modal,
children
}
)
}
);
};
DropdownMenu.displayName = DROPDOWN_MENU_NAME;
var TRIGGER_NAME = "DropdownMenuTrigger";
var DropdownMenuTrigger = React.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ jsx(MenuPrimitive.Anchor, { asChild: true, ...menuScope, children: /* @__PURE__ */ jsx(
Primitive.button,
{
type: "button",
id: context.triggerId,
"aria-haspopup": "menu",
"aria-expanded": context.open,
"aria-controls": context.open ? context.contentId : void 0,
"data-state": context.open ? "open" : "closed",
"data-disabled": disabled ? "" : void 0,
disabled,
...triggerProps,
ref: composeRefs(forwardedRef, context.triggerRef),
onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
if (!disabled && event.button === 0 && event.ctrlKey === false) {
context.onOpenToggle();
if (!context.open)
event.preventDefault();
}
}),
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
if (disabled)
return;
if (["Enter", " "].includes(event.key))
context.onOpenToggle();
if (event.key === "ArrowDown")
context.onOpenChange(true);
if (["Enter", " ", "ArrowDown"].includes(event.key))
event.preventDefault();
})
}
) });
});
DropdownMenuTrigger.displayName = TRIGGER_NAME;
var PORTAL_NAME = "DropdownMenuPortal";
var DropdownMenuPortal = (props) => {
const { __scopeDropdownMenu, ...portalProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ jsx(MenuPrimitive.Portal, { ...menuScope, ...portalProps });
};
DropdownMenuPortal.displayName = PORTAL_NAME;
var CONTENT_NAME = "DropdownMenuContent";
var DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...contentProps } = props;
const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
const menuScope = useMenuScope(__scopeDropdownMenu);
const hasInteractedOutsideRef = React.useRef(false);
return /* @__PURE__ */ jsx(
MenuPrimitive.Content,
{
id: context.contentId,
"aria-labelledby": context.triggerId,
...menuScope,
...contentProps,
ref: forwardedRef,
onCloseAutoFocus: composeEventHandlers(
props.onCloseAutoFocus,
(event) => {
if (!hasInteractedOutsideRef.current)
context.triggerRef.current?.focus();
hasInteractedOutsideRef.current = false;
event.preventDefault();
}
),
onInteractOutside: composeEventHandlers(
props.onInteractOutside,
(event) => {
const originalEvent = event.detail.originalEvent;
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
if (!context.modal || isRightClick)
hasInteractedOutsideRef.current = true;
}
),
style: {
...props.style,
// re-namespace exposed content custom properties
...{
"--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
"--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
"--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
"--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
"--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
}
}
}
);
});
DropdownMenuContent.displayName = CONTENT_NAME;
var GROUP_NAME = "DropdownMenuGroup";
var DropdownMenuGroup = React.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...groupProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ jsx(MenuPrimitive.Group, { ...menuScope, ...groupProps, ref: forwardedRef });
});
DropdownMenuGroup.displayName = GROUP_NAME;
var LABEL_NAME = "DropdownMenuLabel";
var DropdownMenuLabel = React.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...labelProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ jsx(MenuPrimitive.Label, { ...menuScope, ...labelProps, ref: forwardedRef });
});
DropdownMenuLabel.displayName = LABEL_NAME;
var ITEM_NAME = "DropdownMenuItem";
var DropdownMenuItem = React.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...itemProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ jsx(MenuPrimitive.Item, { ...menuScope, ...itemProps, ref: forwardedRef });
});
DropdownMenuItem.displayName = ITEM_NAME;
var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
var DropdownMenuCheckboxItem = React.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...checkboxItemProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ jsx(
MenuPrimitive.CheckboxItem,
{
...menuScope,
...checkboxItemProps,
ref: forwardedRef
}
);
});
DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
var DropdownMenuRadioGroup = React.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...radioGroupProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ jsx(
MenuPrimitive.RadioGroup,
{
...menuScope,
...radioGroupProps,
ref: forwardedRef
}
);
});
DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
var DropdownMenuRadioItem = React.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...radioItemProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ jsx(
MenuPrimitive.RadioItem,
{
...menuScope,
...radioItemProps,
ref: forwardedRef
}
);
});
DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
var INDICATOR_NAME = "DropdownMenuItemIndicator";
var DropdownMenuItemIndicator = React.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ jsx(
MenuPrimitive.ItemIndicator,
{
...menuScope,
...itemIndicatorProps,
ref: forwardedRef
}
);
});
DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
var SEPARATOR_NAME = "DropdownMenuSeparator";
var DropdownMenuSeparator = React.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...separatorProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ jsx(
MenuPrimitive.Separator,
{
...menuScope,
...separatorProps,
ref: forwardedRef
}
);
});
DropdownMenuSeparator.displayName = SEPARATOR_NAME;
var ARROW_NAME = "DropdownMenuArrow";
var DropdownMenuArrow = React.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...arrowProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ jsx(MenuPrimitive.Arrow, { ...menuScope, ...arrowProps, ref: forwardedRef });
});
DropdownMenuArrow.displayName = ARROW_NAME;
var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
var DropdownMenuSubTrigger = React.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...subTriggerProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ jsx(
MenuPrimitive.SubTrigger,
{
...menuScope,
...subTriggerProps,
ref: forwardedRef
}
);
});
DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
var SUB_CONTENT_NAME = "DropdownMenuSubContent";
var DropdownMenuSubContent = React.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...subContentProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ jsx(
MenuPrimitive.SubContent,
{
...menuScope,
...subContentProps,
ref: forwardedRef,
style: {
...props.style,
// re-namespace exposed content custom properties
...{
"--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
"--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
"--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
"--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
"--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
}
}
}
);
});
DropdownMenuSubContent.displayName = SUB_CONTENT_NAME;
var Root2 = DropdownMenu;
var Trigger = DropdownMenuTrigger;
var Portal2 = DropdownMenuPortal;
var Content2 = DropdownMenuContent;
var Item2 = DropdownMenuItem;
var CheckboxItem2 = DropdownMenuCheckboxItem;
var RadioGroup2 = DropdownMenuRadioGroup;
var RadioItem2 = DropdownMenuRadioItem;
var ItemIndicator2 = DropdownMenuItemIndicator;
var Separator2 = DropdownMenuSeparator;
// components/atoms/input.tsx
import {
cloneElement,
forwardRef as forwardRef2,
useId as useId2,
useRef as useRef2,
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 as jsx2 } from "react/jsx-runtime";
// components/atoms/animate-hide.tsx
import { AnimatePresence, motion } from "framer-motion";
import { jsx as jsx3 } from "react/jsx-runtime";
var AnimateHide = ({
children,
show,
initial = false,
className,
onClick
}) => {
return /* @__PURE__ */ jsx3(AnimatePresence, { initial, children: show && /* @__PURE__ */ jsx3(
motion.div,
{
onClick,
initial: {
height: 0,
opacity: 0,
y: -5
},
animate: {
height: "auto",
opacity: 1,
y: 0
},
exit: {
opacity: 0,
height: 0,
y: -5
},
className: cn(className, "kl-overflow-hidden"),
children
}
) });
};
var animate_hide_default = AnimateHide;
// components/atoms/input.tsx
import { jsx as jsx4, jsxs } from "react/jsx-runtime";
var TextInputBase = forwardRef2(
(props, ref) => {
const {
name,
value,
type,
component = "input",
extra,
className = "",
containerClassName = "",
error = false,
disabled = false,
label,
onKeyDown,
autoComplete = "off",
onBlur = () => {
},
onFocus = () => {
},
onChange = () => {
},
message = "",
showclear,
placeholder,
size = "md",
resize = true,
prefix,
suffix,
prefixIcon,
suffixIcon,
id,
tabIndex,
shimmerLoading,
autoFocus,
focusRing = true,
textFieldClassName,
...extraProps
} = props;
const [t, setT] = useState(type || "text");
const Component = component;
const containerRef = useRef2(null);
return /* @__PURE__ */ jsxs("div", { className: cn("kl-flex kl-flex-col", containerClassName), children: [
(label || extra) && /* @__PURE__ */ jsxs(
"div",
{
className: cn(
"kl-flex kl-items-center kl-justify-between kl-gap-md",
{
"kl-pb-md": !!label || !!extra
}
),
children: [
/* @__PURE__ */ jsx4(
"label",
{
className: "kl-select-none kl-bodyMd-medium pulsable kl-min-w-[33%] kl-text-text-default",
htmlFor: id,
children: label
}
),
/* @__PURE__ */ jsx4(
"div",
{
className: cn({
"kl-h-4xl pulsable": !!label || !!extra
}),
children: extra && cloneElement(extra)
}
)
]
}
),
/* @__PURE__ */ jsxs(
"div",
{
ref: containerRef,
className: cn(
"kl-transition-all kl-rounded kl-border kl-flex kl-flex-row kl-items-center kl-relative kl-ring-offset-1 group-data-[theme=dark]/html:kl-ring-offset-0",
{
"kl-text-text-critical kl-bg-surface-critical-subdued kl-border-border-critical": error,
"kl-text-text-default kl-border-border-default kl-bg-surface-basic-input": !error,
"kl-text-text-disabled kl-border-border-disabled kl-bg-surface-basic-input": disabled,
"kl-pr-0": component !== "input"
},
{
"kl-h-[38px]": size === "md" && component === "input",
"kl-h-[48px]": size === "lg" && component === "input",
"kl-h-[60px]": size === "xl" && component === "input"
},
size === "xl" ? "!kl-px-2xl" : "kl-px-lg",
className
),
children: [
!!prefixIcon && /* @__PURE__ */ jsx4(
"div",
{
className: cn("kl-pr-lg kl-bodyMd", {
"kl-text-text-strong": !error && !disabled,
"kl-text-text-critical": error,
"kl-text-text-disabled": disabled
}),
children: cloneElement(prefixIcon, {
size: 16,
color: "currentColor"
})
}
),
!!prefix && /* @__PURE__ */ jsx4("div", { className: "kl-cursor-default", children: prefix }),
/* @__PURE__ */ jsx4(
Component,
{
...type === "number" ? {
pattern: "[0-9]"
} : {},
name,
autoFocus,
type: t,
placeholder,
id,
tabIndex,
className: cn(
"kl-outline-none focus-within:kl-outline-none focus:kl-outline-none focus-visible:kl-outline-none kl-flex-1 kl-w-full kl-h-full",
"kl-rounded kl-bg-transparent",
{
"kl-text-text-critical placeholder:kl-text-text-critical/70": error && !disabled,
"kl-text-text-default": !error && !disabled,
"kl-text-text-disabled": disabled
},
{
"kl-py-xl": size === "lg",
"kl-py-lg": size === "md"
},
{
"kl-resize-none": !resize
},
{
"kl-no-spinner": type === "number"
},
size === "xl" ? "" : "kl-bodyMd",
textFieldClassName
),
value,
onChange: (e) => {
if (onChange) {
onChange(e);
}
},
onFocus: (e) => {
if (focusRing) {
containerRef.current?.classList.add("kl-ring-2");
}
onFocus(e);
},
disabled,
ref,
onKeyDown,
autoComplete,
onBlur: (e) => {
containerRef.current?.classList.remove("kl-ring-2");
onBlur(e);
},
...extraProps
}
),
!!suffix && /* @__PURE__ */ jsx4("div", { className: "kl-cursor-default", children: suffix }),
!!suffixIcon && /* @__PURE__ */ jsx4(
"div",
{
className: cn("kl-pl-lg kl-bodyMd", {
"kl-text-text-critical": error,
"kl-text-text-strong": !error && !disabled,
"kl-text-text-disabled": disabled
}),
children: cloneElement(suffixIcon, {
color: "currentColor",
size: 16
})
}
),
showclear && !disabled && /* @__PURE__ */ jsx4(
"button",
{
"aria-label": "Clear",
type: "button",
tabIndex: -1,
onClick: (e) => {
if (onChange)
onChange({ ...e, target: { value: "" } });
},
className: cn(
"kl-outline-none kl-flex kl-items-center kl-rounded kl-justify-center",
{
"kl-cursor-default": disabled
}
),
children: /* @__PURE__ */ jsx4(X, { size: 16, color: "currentColor" })
}
),
type === "password" && !disabled && /* @__PURE__ */ jsx4(
"button",
{
type: "button",
tabIndex: -1,
onClick: () => {
setT((prev) => prev === "text" ? "password" : "text");
},
className: cn(
"kl-outline-none kl-flex kl-items-center kl-rounded kl-justify-center",
{
"kl-cursor-default": disabled
}
),
children: t === "password" ? /* @__PURE__ */ jsx4(EyeSlash, { size: 16, color: "currentColor" }) : /* @__PURE__ */ jsx4(Eye, { size: 16, color: "currentColor" })
}
)
]
}
),
/* @__PURE__ */ jsx4(animate_hide_default, { show: !!message, children: /* @__PURE__ */ jsx4(
"div",
{
className: cn(
"kl-bodySm pulsable",
{
"kl-text-text-critical": error,
"kl-text-text-default": !error
},
"kl-pt-md"
),
children: message
}
) })
] });
}
);
var TextInput = forwardRef2(
(props, ref) => {
const id = useId2();
return /* @__PURE__ */ jsx4(
TextInputBase,
{
...{ ...props, id, component: "input", type: "text", ref }
}
);
}
);
var TextArea = forwardRef2(
({
autoComplete = "off",
onChange = (_) => {
},
resize = false,
rows = "3",
...etc
}, ref) => {
const id = useId2();
return /* @__PURE__ */ jsx4(
TextInputBase,
{
...{
...etc,
id,
rows,
autoComplete,
onChange,
resize,
component: "textarea",
ref,
type: "text"
}
}
);
}
);
// components/atoms/tabs.tsx
import * as RovingFocusGroup from "@radix-ui/react-roving-focus";
import { AnimatePresence as AnimatePresence2, LayoutGroup, motion as motion2 } from "framer-motion";
import React2, {
forwardRef as forwardRef3,
useId as useId3,
useState as useState2
} from "react";
import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
var TabBase = ({
to = "",
label,
active = false,
fitted = false,
onClick = () => {
},
LinkComponent = "div",
variant = "plain",
size = "md",
prefix,
layoutId,
toLabel = "to"
}) => {
let Component = LinkComponent;
let tempToLabel = toLabel;
let extraProps = {};
if (to) {
if (LinkComponent === "div") {
Component = motion2.a;
tempToLabel = "href";
} else {
Component = LinkComponent;
}
} else {
extraProps = {
role: "button"
};
}
const [hoverd, setHoverd] = useState2(false);
return /* @__PURE__ */ jsxs2(
"div",
{
onMouseEnter: () => {
setHoverd(true);
},
onMouseLeave: () => {
setHoverd(false);
},
className: cn(
"kl-outline-none kl-flex kl-flex-col kl-relative kl-group kl-bodyMd-medium kl-transition-all kl-cursor-pointer hover:kl-text-text-default active:kl-text-text-default",
{
"kl-text-text-default": active,
"kl-text-text-soft": !active,
"kl-rounded-lg hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed": variant === "filled"
// 'border border-transparent': variant === 'filled' && !active,
}
),
children: [
/* @__PURE__ */ jsx5(
RovingFocusGroup.Item,
{
asChild: true,
focusable: true,
onKeyDown: (e) => {
if (["Enter", " "].includes(e.key)) {
onClick(e);
}
},
children: /* @__PURE__ */ jsxs2(
Component,
{
...{ [tempToLabel]: to },
...extraProps,
onClick,
className: cn(
"kl-relative kl-z-10 kl-tab-item kl-outline-none",
"kl-ring-offset-0 focus-visible:kl-ring-border-focus focus-visible:kl-ring-2",
// 'focus-visible:shadow-focus',
{
...(!fitted || variant === "filled") && {
"kl-px-2xl kl-py-lg": size === "md",
"kl-px-lg kl-py-md": size === "sm",
"kl-rounded-lg": true
},
...fitted && {
"kl-py-md": variant !== "filled"
}
}
),
children: [
variant === "plain" && /* @__PURE__ */ jsx5("div", { className: "kl-h-md kl-bg-none kl-w-full kl-z-0" }),
/* @__PURE__ */ jsxs2("div", { className: "kl-flex kl-flex-row kl-items-center kl-gap-lg", children: [
!!prefix && React2.cloneElement(prefix, { size: 16, color: "currentColor" }),
typeof label === "function" ? label(active) : label
] }),
active && variant === "plain" && /* @__PURE__ */ jsx5(
motion2.div,
{
layoutId: "underline",
className: cn(
"kl-h-md kl-z-10 kl-absolute kl-left-0 kl-bottom-0 kl-w-full kl-bg-border-primary"
)
}
),
variant === "plain" && hoverd && /* @__PURE__ */ jsx5(
motion2.div,
{
layoutId: "hoverd-underline",
className: "kl-h-md kl-bg-none kl-absolute kl-bottom-0 kl-w-full kl-z-0 kl-left-0 kl-bg-border-default group-active:kl-bg-border-tertiary"
}
),
variant === "plain" && /* @__PURE__ */ jsx5("div", { className: "kl-h-md kl-bg-none kl-w-full kl-z-0" })
]
}
)
}
),
/* @__PURE__ */ jsx5(AnimatePresence2, { children: variant === "filled" && active && /* @__PURE__ */ jsx5(
motion2.div,
{
layoutId,
className: "kl-absolute kl-inset-0 kl-rounded-lg kl-shadow-button kl-border kl-border-border-default kl-bg-surface-basic-default",
transition: { type: "spring", bounce: 0.1, duration: 0.3 }
}
) })
]
}
);
};
var Tab = ({ to, label, prefix, value: _ }) => /* @__PURE__ */ jsx5(TabBase, { to, label, prefix, layoutId: "" });
var Root4 = forwardRef3(
({
variant = "plain",
size = "md",
fitted = false,
onChange = () => {
},
value,
LinkComponent,
className = "",
basePath = "",
children,
toLabel
}, ref) => {
const id = useId3();
return /* @__PURE__ */ jsx5(
RovingFocusGroup.Root,
{
orientation: "horizontal",
loop: true,
className: cn(
"kl-flex kl-flex-row kl-items-center kl-transition-all",
"kl-snap-x",
{
"md:kl-gap-4xl": size === "md" && variant !== "filled",
"kl-gap-lg": size === "sm" || variant === "filled"
},
className
),
ref,
asChild: true,
children: /* @__PURE__ */ jsx5(motion2.div, { layout: true, layoutRoot: true, children: /* @__PURE__ */ jsx5(LayoutGroup, { id, children: React2.Children.map(children, (child) => {
if (!child) {
throw Error("Tab child is required");
}
const tabChild = child;
const tabChildProps = tabChild.props;
return /* @__PURE__ */ jsx5(
"div",
{
className: cn("kl-snap-start", {
"kl-px-xl md:kl-px-0": variant === "plain"
}),
children: /* @__PURE__ */ jsx5(
TabBase,
{
...tabChildProps,
onClick: () => {
onChange?.(tabChildProps.value);
},
layoutId: id,
fitted,
to: basePath + (tabChildProps.to || ""),
active: value === tabChildProps.value,
LinkComponent,
variant,
size,
toLabel
}
)
}
);
}) }) })
}
);
}
);
var Tabs = {
Tab,
Root: Root4
};
var tabs_default = Tabs;
// components/atoms/option-list.tsx
import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
var OptionMenu = Root2;
var OptionMenuTriggerBase = Trigger;
var OptionMenuRadioGroup = RadioGroup2;
var blurElement = (e) => {
e.preventDefault();
const element = e.target;
element.blur();
};
var preventDefaultEvents = {
onMouseMove: (e) => e.preventDefault(),
onMouseEnter: (e) => e.preventDefault(),
onMouseLeave: (e) => blurElement(e),
onPointerLeave: (e) => e.preventDefault(),
onPointerEnter: (e) => e.preventDefault(),
onPointerMove: (e) => e.preventDefault()
// onClick: (e: any) => e.preventDefault(),
};
var OptionMenuTrigger = forwardRef4(
({ children, ...props }, ref) => {
const { open } = props;
return /* @__PURE__ */ jsx6(OptionMenuTriggerBase, { ref, ...props, asChild: true, "is-menu-button": "true", children: cloneElement2(children, {
selected: open
}) });
}
);
OptionMenuTrigger.displayName = "OptionMenuTrigger";
var OptionMenuContent = forwardRef4(
({
className,
sideOffset = 4,
children,
open,
align = "end",
alignOffset,
side,
...props
}, ref) => /* @__PURE__ */ jsx6(Portal2, { children: /* @__PURE__ */ jsx6(
Content2,
{
ref,
sideOffset,
align,
side,
alignOffset,
loop: true,
asChild: true,
...props,
onClick: (e) => e.stopPropagation(),
children: /* @__PURE__ */ jsx6(
"div",
{
className: cn(
"kl-z-50 kl-border kl-border-border-default kl-shadow-popover kl-bg-surface-basic-default kl-rounded kl-min-w-[160px] kl-overflow-hidden kl-origin-top kl-py-lg kl-will-change-[opacity,transform] data-[side=bottom]:kl-animate-slideUpAndFade data-[side=left]:kl-animate-slideRightAndFade data-[side=right]:kl-animate-slideLeftAndFade data-[side=top]:kl-animate-slideDownAndFade",
className
),
children
}
)
}
) })
);
OptionMenuContent.displayName = Content2.displayName;
var OptionItemRaw = forwardRef4(
({
children,
active,
className
}, ref) => {
return /* @__PURE__ */ jsx6(
"div",
{
ref,
className: cn(
"kl-group kl-relative kl-flex kl-flex-row kl-gap-xl kl-items-center kl-bodyMd kl-gap kl-cursor-pointer kl-select-none kl-py-lg kl-px-xl kl-text-text-default kl-outline-none kl-transition-colors focus:kl-bg-surface-basic-hovered hover:kl-bg-surface-basic-hovered data-[disabled]:kl-pointer-events-none data-[disabled]:kl-text-text-disabled",
{
"kl-bg-surface-basic-active": !!active
},
className
),
children
}
);
}
);
var OptionMenuItem = forwardRef4(
({ className, ...props }, ref) => {
return /* @__PURE__ */ jsx6(
Item2,
{
ref,
...preventDefaultEvents,
onSelect: props.onClick,
asChild: true,
children: /* @__PURE__ */ jsx6(
"div",
{
className: cn(
"kl-group kl-relative kl-flex kl-flex-row kl-gap-xl kl-items-center kl-bodyMd kl-gap kl-cursor-pointer kl-select-none kl-py-lg kl-px-xl kl-text-text-default kl-outline-none kl-transition-colors focus:kl-bg-surface-basic-hovered hover:kl-bg-surface-basic-hovered data-[disabled]:kl-pointer-events-none data-[disabled]:kl-text-text-disabled",
{
"kl-bg-surface-basic-active": !!props.active
},
className
),
children: props.children
}
)
}
);
}
);
OptionMenuItem.displayName = Item2.displayName;
var OptionMenuLink = forwardRef4(
({
className,
LinkComponent = "a",
to = "",
toLabel = "to",
target,
rel,
children
}, ref) => {
let tempToLabel = toLabel;
let Component = LinkComponent;
if (to) {
if (LinkComponent === motion3.button) {
Component = "a";
tempToLabel = "href";
} else {
Component = LinkComponent;
}
}
return /* @__PURE__ */ jsx6(
Item2,
{
ref,
className: cn(
"kl-group kl-relative kl-flex kl-flex-row kl-gap-xl kl-items-center kl-bodyMd kl-gap kl-cursor-pointer kl-select-none kl-py-lg kl-px-xl kl-text-text-default kl-outline-none kl-transition-colors focus:kl-bg-surface-basic-hovered hover:kl-bg-surface-basic-hovered data-[disabled]:kl-pointer-events-none data-[disabled]:kl-text-text-disabled",
className
),
asChild: true,
children: /* @__PURE__ */ jsx6(Component, { ...{ [tempToLabel]: to }, target, rel, children })
}
);
}
);
OptionMenuLink.displayName = "OptionMenuLink";
var OptionMenuTextInputItem = forwardRef4(({ onChange, compact = false, ...props }, ref) => {
const searchRef = useRef3(null);
const setSearchFocus = (e) => {
e?.preventDefault();
searchRef.current?.focus();
};
useEffect(() => {
if (searchRef.current) {
searchRef.current.focus();
}
}, []);
return /* @__PURE__ */ jsx6(
"div",
{
className: cn({
"kl-py-lg kl-px-xl": !compact
}),
children: /* @__PURE__ */ jsx6(
Item2,
{
ref,
onSelect: setSearchFocus,
onClick: () => setSearchFocus(),
onPointerUp: setSearchFocus,
onPointerDown: () => setSearchFocus(),
onMouseMove: (e) => e.preventDefault(),
onMouseEnter: (e) => e.preventDefault(),
onMouseLeave: (e) => e.preventDefault(),
onPointerMove: (e) => e.preventDefault(),
onPointerLeave: (e) => e.preventDefault(),
onFocus: () => {
searchRef.current?.focus();
},
asChild: true,
children: /* @__PURE__ */ jsx6(
TextInput,
{
...props,
ref: searchRef,
autoComplete: "off",
onChange,
onFocus: (event) => {
if (props.focusRing) {
event.target?.parentElement?.classList?.add(
"kl-ring-2",
"kl-ring-border-focus"
);
}
},
onBlur: (e) => {
e.target?.parentElement?.classList?.remove(
"kl-ring-2",
"kl-ring-border-focus"
);
},
onKeyDown: (e) => {
if (e.key !== "Escape")
e.stopPropagation();
}
}
)
}
)
}
);
});
OptionMenuTextInputItem.displayName = Item2.displayName;
var OptionMenuCheckboxItem = forwardRef4(
({
className,
showIndicator = true,
children,
checked,
onValueChange,
...props
}, ref) => /* @__PURE__ */ jsxs3(
CheckboxItem2,
{
ref,
className: cn(
"kl-group kl-relative kl-flex kl-flex-row kl-gap-xl kl-items-center kl-bodyMd kl-gap kl-cursor-pointer kl-select-none kl-py-lg kl-px-xl kl-text-text-default kl-outline-none kl-transition-colors focus:kl-bg-surface-basic-hovered hover:kl-bg-surface-basic-hovered data-[disabled]:kl-pointer-events-none data-[disabled]:kl-text-text-disabled",
{
"data-[state=checked]:kl-bg-surface-primary-subdued data-[state=checked]:kl-text-text-primary data-[state=checked]:kl-text-text-darktheme-primary": !showIndicator
},
className
),
checked,
...preventDefaultEvents,
onCheckedChange: onValueChange,
onSelect: props.onClick,
children: [
showIndicator && /* @__PURE__ */ jsx6("span", { className: "kl-w-2xl kl-h-2xl kl-rounded kl-border kl-transition-all kl-flex kl-items-center kl-justify-center kl-border-border-default group-data-[state=checked]:kl-border-border-primary group-data-[state=checked]:kl-bg-surface-primary-default group-data-[disabled]:kl-border-border-disabled group-data-[disabled]:kl-bg-surface-basic-default", children: /* @__PURE__ */ jsx6(ItemIndicator2, { children: /* @__PURE__ */ jsx6(
"svg",
{
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ jsx6(
"path",
{
d: "M12.25 3.50017L5.25 10.4999L1.75 7.00017",
strokeLinecap: "round",
strokeLinejoin: "round",
className: cn(
"kl-stroke-text-on-primary group-data-[disabled]:kl-stroke-text-disabled"
)
}
)
}
) }) }),
children
]
}
)
);
OptionMenuCheckboxItem.displayName = CheckboxItem2.displayName;
var OptionMenuRadioItem = forwardRef4(
({ className, showIndicator = true, children, value, ...props }, ref) => /* @__PURE__ */ jsxs3(
RadioItem2,
{
ref,
className: cn(
"kl-group kl-relative kl-flex kl-flex-row kl-gap-xl kl-items-center kl-bodyMd kl-gap kl-cursor-pointer kl-select-none kl-py-lg kl-px-xl kl-text-text-default kl-outline-none kl-transition-colors focus:kl-bg-surface-basic-hovered hover:kl-bg-surface-basic-hovered data-[disabled]:kl-pointer-events-none data-[disabled]:kl-text-text-disabled",
{
"data-[state=checked]:kl-bg-surface-primary-subdued data-[state=checked]:kl-text-text-primary": !showIndicator
},
className
),
onSelect: props.onClick,
value,
...preventDefaultEvents,
children: [
showIndicator && /* @__PURE__ */ jsx6(
"span",
{
className: cn(
"kl-w-2xl kl-h-2xl kl-rounded-full kl-border kl-transition-all kl-flex kl-items-center kl-justify-center kl-border-border-default group-data-[state=checked]:kl-border-border-primary group-data-[disabled]:kl-border-border-disabled"
),
children: /* @__PURE__ */ jsx6(ItemIndicator2, { children: /* @__PURE__ */ jsx6(
"div",
{
className: cn(
"kl-block kl-w-lg kl-h-lg kl-rounded-full kl-bg-surface-primary-default group-data-[disabled]:kl-bg-icon-disabled group-data-[disabled]:kl-bg-icon-darktheme-disabled"
)
}
) })
}
),
children
]
}
)
);
OptionMenuRadioItem.displayName = RadioItem2.displayName;
var OptionMenuSeparator = forwardRef4(
({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
Separator2,
{
ref,
className: cn("kl-h-xs kl-bg-border-disabled kl-my-md", className),
...props
}
)
);
OptionMenuSeparator.displayName = Separator2.displayName;
var focusElement = (element) => {
element?.querySelector("[data-radix-collection-item]")?.focus();
};
var handleKeyNavigation = (e, tabElement) => {
if (!(tabElement && tabElement.parentNode)) {
return;
}
const tab = tabElement.parentNode.children;
if (["ArrowDown", "ArrowUp"].includes(e.key)) {
e.preventDefault();
e.stopPropagation();
if (e.key === "ArrowUp") {
const childs = Array.from(tab).filter(
(c) => c.hasAttribute("data-radix-collection-item") || c.querySelector("[data-radix-collection-item]")
);
const currentIndex = childs.indexOf(tabElement);
if (currentIndex > 0) {
if (childs[currentIndex - 1].hasAttribute("data-radix-collection-item")) {
childs[currentIndex - 1].focus();
} else {
focusElement(childs[currentIndex - 1]);
}
} else if (childs[childs.length - 1].hasAttribute("data-radix-collection-item")) {
childs[childs.length - 1].focus();
} else {
focusElement(childs[childs.length - 1]);
}
}
if (e.key === "ArrowDown") {
const childs = Array.from(tab).filter(
(c) => c.hasAttribute("data-radix-collection-item") || c.querySelector("[data-radix-collection-item]")
);
const currentIndex = childs.indexOf(tabElement);
if (currentIndex < childs.length - 1) {
if (childs[currentIndex + 1].hasAttribute("data-radix-collection-item")) {
childs[currentIndex + 1].focus();
} else {
focusElement(childs[currentIndex + 1]);
}
} else if (childs[0].hasAttribute("data-radix-collection-item")) {
childs[0].focus();
} else {
focusElement(childs[0]);
}
}
}
};
var OptionMenuTabs = forwardRef4(
({
onChange,
value,
size,
children,
LinkComponent = "div",
className,
compact,
...props
}, ref) => {
const tabRef = useRef3(null);
return /* @__PURE__ */ jsx6(
"div",
{
className: cn({
"kl-py-lg kl-px-xl": !compact
}),
ref: tabRef,
onFocus: (e) => {
e.target.querySelector(`.tab-item`)?.focus();
},
children: /* @__PURE__ */ jsx6(
Item2,
{
onSelect: (e) => e.preventDefault(),
onPointerUp: (e) => e.preventDefault(),
onPointerDown: (e) => e.preventDefault(),
onMouseMove: (e) => e.preventDefault(),
onMouseEnter: (e) => e.preventDefault(),
onMouseLeave: (e) => e.preventDefault(),
onPointerMove: (e) => e.preventDefault(),
onPointerLeave: (e) => e.preventDefault(),
children: /* @__PURE__ */ jsx6(
tabs_default.Root,
{
ref,
variant: "filled",
value,
size,
className,
onChange,
LinkComponent,
...props,
children: Children.map(children, (child) => {
const childElement = child;
return cloneElement2(childElement, {
onKeyDown: (e) => handleKeyNavigation(e, tabRef.current)
});
})
}
)
}
)
}
);
}
);
OptionMenuTextInputItem.displayName = Item2.displayName;
var Root5 = ({ ...props }) => {
const { onOpenChange, open: openExt, children, modal = true } = props;
const [open, setOpen] = useState3(openExt);
useEffect(() => {
setOpen(openExt);
}, [openExt]);
return /* @__PURE__ */ jsx6(
OptionMenu,
{
open: openExt,
onOpenChange: (e) => {
setOpen(e);
onOpenChange?.(e);
},
modal,
children: Children.map(
children,
(child) => cloneElement2(child, {
open
})
)
}
);
};
var OptionList = {
Root: Root5,
RadioGroup: OptionMenuRadioGroup,
RadioGroupItem: OptionMenuRadioItem,
CheckboxItem: OptionMenuCheckboxItem,
Separator: OptionMenuSeparator,
Content: OptionMenuContent,
Trigger: OptionMenuTrigger,
TextInput: OptionMenuTextInputItem,
Item: OptionMenuItem,
Tabs: {
Root: OptionMenuTabs,
Tab: tabs_default.Tab
},
Link: OptionMenuLink,
OptionItemRaw
};
var option_list_default = OptionList;
export {
option_list_default as default
};