@kloudlite/design-system
Version:
A design system for building ambitious products.
1,336 lines (1,322 loc) • 61.6 kB
JavaScript
"use strict";
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/organisms/headerV2.tsx
var headerV2_exports = {};
__export(headerV2_exports, {
default: () => headerV2_default
});
module.exports = __toCommonJS(headerV2_exports);
// components/icons.tsx
var import_react = require("@jengaicons/react");
var import_jsx_runtime = require("react/jsx-runtime");
// components/organisms/headerV2.tsx
var import_react7 = require("react");
// components/atoms/button.tsx
var import_framer_motion = require("framer-motion");
var import_react3 = __toESM(require("react"), 1);
// 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/button.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var ButtonBase = import_react3.default.forwardRef((props, ref) => {
const {
onClick = () => {
},
to = "",
linkComponent = import_framer_motion.motion.button,
disabled = false,
suffix,
prefix,
block = false,
type = "button",
variant = "primary",
// noRing,
noRounded = false,
noBorder = false,
sharpLeft = false,
sharpRight = false,
selected = false,
iconOnly = false,
className = "",
content,
size = "md",
loading = false,
tabIndex,
toLabel = "to",
target,
iconSize,
...mprops
} = props;
let Component = linkComponent;
let tempToLabel = toLabel;
let extraProps = {};
if (to) {
if (linkComponent === import_framer_motion.motion.button) {
Component = import_framer_motion.motion.a;
tempToLabel = "href";
} else {
Component = linkComponent;
}
}
if (Component === import_framer_motion.motion.button || Component === import_framer_motion.motion.a) {
extraProps = {
initial: { scale: 1 },
whileTap: { scale: 0.99 }
};
}
const noRing = false;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
Component,
{
...mprops,
...{ [tempToLabel]: to },
disabled,
onClick,
...extraProps,
ref,
type,
tabIndex,
target,
className: cn(
"pulsable kl-flex-nowrap",
{
"kl-w-full": !!block,
"kl-w-fit": !block,
selected
},
{
"kl-pointer-events-none": loading
},
{
"kl-bodyMd-medium": !variant?.includes("plain"),
"kl-bodyMd": variant?.includes("plain")
},
{
"kl-pointer-events-none !kl-text-text-disabled kl-bg-surface-basic-disabled": disabled,
"!kl-border-border-disabled": disabled && ![
"plain",
"primary-plain",
"critical-plain",
"secondary-plain"
].includes(variant)
},
"kl-relative kl-ring-offset-1",
"kl-outline-none",
"kl-flex kl-flex-row kl-gap-lg kl-items-center kl-justify-center",
"disabled:kl-text-text-disabled disabled:kl-bg-surface-basic-disabled",
{
// noRing
"focus-visible:kl-ring-2 focus:kl-ring-border-focus focus:kl-z-10": !noRing
},
{
...!noRounded && {
"kl-rounded-none": sharpLeft && sharpRight,
"kl-rounded-r": sharpLeft && !sharpRight,
"kl-rounded-l": !sharpLeft && sharpRight,
"kl-rounded": !sharpLeft && !sharpRight
}
},
"disabled:kl-pointer-events-none",
{
"kl-border-none": noBorder,
...!noBorder && {
"kl-border-border-default disabled:kl-border-border-disabled": variant === "basic" || variant === "outline" || variant === "secondary-outline",
"kl-border-border-primary disabled:kl-border-border-disabled": variant === "primary" || variant === "primary-outline",
"kl-border-border-secondary disabled:kl-border-border-disabled": variant === "secondary",
"kl-border-border-critical disabled:kl-border-border-disabled": variant === "critical-outline" || variant === "critical",
"kl-border-border-purple": variant === "purple",
"kl-border-border-warning": variant === "warning",
"kl-border-border-tertiary": variant === "tertiary",
"kl-border-none": variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain",
"kl-border": !(variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain")
}
},
!disabled ? {
"kl-bg-surface-basic-default hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed disabled:kl-bg-surface-basic-default": variant === "basic" && !selected,
"kl-bg-surface-basic-pressed hover:kl-bg-surface-basic-pressed active:kl-bg-surface-basic-pressed disabled:kl-bg-surface-basic-default": variant === "basic" && selected,
"kl-bg-surface-primary-default hover:kl-bg-surface-primary-hovered active:kl-bg-surface-primary-pressed disabled:kl-bg-surface-basic-default": variant === "primary",
"kl-bg-surface-secondary-default hover:kl-bg-surface-secondary-hovered active:kl-bg-surface-secondary-pressed disabled:kl-bg-surface-basic-default": variant === "secondary",
"kl-bg-surface-critical-default hover:kl-bg-surface-critical-hovered active:kl-bg-surface-critical-pressed disabled:kl-bg-surface-basic-default": variant === "critical",
"kl-bg-none hover:kl-bg-surface-critical-subdued active:kl-bg-surface-critical-subdued": variant === "critical-outline",
"kl-bg-none hover:kl-bg-surface-primary-subdued active:kl-bg-surface-primary-subdued": variant === "primary-outline",
"kl-bg-none hover:kl-bg-surface-secondary-subdued active:kl-bg-surface-secondary-subdued": variant === "secondary-outline",
"kl-bg-none hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed": variant === "outline",
"kl-bg-surface-basic-pressed kl-shadow-none hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed hover:kl-shadow-button": variant === "outline" && selected,
"kl-bg-none kl-shadow-none": (variant === "plain" || variant === "primary-plain" || variant === "secondary-plain" || variant === "critical-plain") && !iconOnly,
"kl-shadow-none active:kl-shadow-button kl-bg-surface-basic-pressed": variant === "plain" && !iconOnly && selected,
"kl-bg-none kl-shadow-none hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed active:kl-shadow-button active:kl-shadow-button": variant === "plain" && iconOnly,
"kl-bg-surface-basic-pressed kl-shadow-none hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed active:kl-shadow-button": variant === "plain" && iconOnly && selected,
"kl-bg-surface-purple-default hover:kl-bg-surface-purple-hovered active:kl-bg-surface-purple-pressed": variant === "purple",
"kl-bg-surface-tertiary-default hover:kl-bg-surface-tertiary-hovered active:kl-bg-surface-tertiary-pressed": variant === "tertiary",
"kl-bg-surface-warning-default hover:kl-bg-surface-warning-hovered active:kl-bg-surface-warning-pressed": variant === "warning"
} : {},
{
"kl-text-text-default": variant === "basic" || variant === "plain" || variant === "outline",
"kl-text-text-on-primary": variant === "primary" || variant === "critical" || variant === "secondary" || variant === "secondary-outline" || variant === "purple" || variant === "warning",
"kl-text-text-critical": variant === "critical-outline" || variant === "critical-plain",
"kl-text-text-primary": variant === "primary-outline" || variant === "primary-plain",
"kl-text-text-secondary": variant === "secondary-plain",
"kl-text-text-on-secondary": variant === "tertiary"
},
{
"focus:kl-underline": noRing
},
{
"hover:kl-underline": variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain"
},
{
// icon
...!iconOnly && !(variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain") && {
"kl-py-md kl-px-lg": size === "sm",
"kl-py-lg kl-px-2xl": size === "md",
"kl-py-xl kl-px-4xl": size === "lg",
"kl-py-2xl kl-px-6xl": size === "xl",
"kl-py-2xl kl-px-9xl": size === "2xl"
}
},
{
...!iconOnly && (variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain") && {
"kl-px-md kl-py-sm": size === "sm",
"kl-py-sm kl-px-md": size === "md",
"kl-py-md kl-px-lg": size === "lg"
}
},
{
"kl-p-lg !kl-h-[36px] !kl-w-[36px]": iconOnly && (size === "md" || size === "lg"),
"kl-p-md": iconOnly && size === "sm",
"kl-p-sm": iconOnly && size === "xs"
},
className
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_framer_motion.AnimatePresence, { children: loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_framer_motion.motion.span,
{
initial: { width: 0 },
animate: { width: "auto", paddingRight: 0 },
exit: { width: 0 },
className: cn(
"kl-flex kl-items-center kl-justify-center kl-aspect-square kl-overflow-hidden"
),
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cn("kl-animate-spin"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Spinner, { color: "currentColor", weight: 2, size: 18 }) })
}
) }),
!!prefix && import_react3.default.cloneElement(prefix, {
size: iconSize || (iconOnly && size === "lg" ? 20 : 16),
color: "currentColor"
}),
!iconOnly && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cn("kl-block kl-truncate"), children: content }),
!!suffix && import_react3.default.cloneElement(suffix, {
size: iconSize || 16,
color: "currentColor"
})
]
}
);
});
var IconButton = import_react3.default.forwardRef(
(props, ref) => {
const { icon, block } = props;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
ButtonBase,
{
...props,
ref,
iconOnly: true,
content: null,
prefix: icon,
block: !!block
}
);
}
);
var Button = import_react3.default.forwardRef(
(props, ref) => {
const { block } = props;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonBase, { ...props, iconOnly: false, ref, block: !!block });
}
);
// components/atoms/option-list.tsx
var import_framer_motion4 = require("framer-motion");
var import_react6 = require("react");
// components/atoms/_dropdown-primitive.tsx
var React2 = __toESM(require("react"), 1);
var import_primitive = require("@radix-ui/primitive");
var import_react_compose_refs = require("@radix-ui/react-compose-refs");
var import_react_context = require("@radix-ui/react-context");
var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
var import_react_primitive = require("@radix-ui/react-primitive");
var MenuPrimitive = __toESM(require("@radix-ui/react-menu"), 1);
var import_react_menu = require("@radix-ui/react-menu");
var import_react_id = require("@radix-ui/react-id");
var import_jsx_runtime3 = require("react/jsx-runtime");
var DROPDOWN_MENU_NAME = "DropdownMenu";
var [createDropdownMenuContext, createDropdownMenuScope] = (0, import_react_context.createContextScope)(
DROPDOWN_MENU_NAME,
[import_react_menu.createMenuScope]
);
var useMenuScope = (0, import_react_menu.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 = React2.useRef(null);
const [open = false, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
prop: openProp,
defaultProp: defaultOpen,
onChange: onOpenChange
});
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
DropdownMenuProvider,
{
scope: __scopeDropdownMenu,
triggerId: (0, import_react_id.useId)(),
triggerRef,
contentId: (0, import_react_id.useId)(),
open,
onOpenChange: setOpen,
onOpenToggle: React2.useCallback(
() => setOpen((prevOpen) => !prevOpen),
[setOpen]
),
modal,
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
MenuPrimitive.Root,
{
...menuScope,
open,
onOpenChange: setOpen,
dir,
modal,
children
}
)
}
);
};
DropdownMenu.displayName = DROPDOWN_MENU_NAME;
var TRIGGER_NAME = "DropdownMenuTrigger";
var DropdownMenuTrigger = React2.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuPrimitive.Anchor, { asChild: true, ...menuScope, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_react_primitive.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: (0, import_react_compose_refs.composeRefs)(forwardedRef, context.triggerRef),
onPointerDown: (0, import_primitive.composeEventHandlers)(props.onPointerDown, (event) => {
if (!disabled && event.button === 0 && event.ctrlKey === false) {
context.onOpenToggle();
if (!context.open)
event.preventDefault();
}
}),
onKeyDown: (0, import_primitive.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__ */ (0, import_jsx_runtime3.jsx)(MenuPrimitive.Portal, { ...menuScope, ...portalProps });
};
DropdownMenuPortal.displayName = PORTAL_NAME;
var CONTENT_NAME = "DropdownMenuContent";
var DropdownMenuContent = React2.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...contentProps } = props;
const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
const menuScope = useMenuScope(__scopeDropdownMenu);
const hasInteractedOutsideRef = React2.useRef(false);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
MenuPrimitive.Content,
{
id: context.contentId,
"aria-labelledby": context.triggerId,
...menuScope,
...contentProps,
ref: forwardedRef,
onCloseAutoFocus: (0, import_primitive.composeEventHandlers)(
props.onCloseAutoFocus,
(event) => {
if (!hasInteractedOutsideRef.current)
context.triggerRef.current?.focus();
hasInteractedOutsideRef.current = false;
event.preventDefault();
}
),
onInteractOutside: (0, import_primitive.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 = React2.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...groupProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuPrimitive.Group, { ...menuScope, ...groupProps, ref: forwardedRef });
});
DropdownMenuGroup.displayName = GROUP_NAME;
var LABEL_NAME = "DropdownMenuLabel";
var DropdownMenuLabel = React2.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...labelProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuPrimitive.Label, { ...menuScope, ...labelProps, ref: forwardedRef });
});
DropdownMenuLabel.displayName = LABEL_NAME;
var ITEM_NAME = "DropdownMenuItem";
var DropdownMenuItem = React2.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...itemProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuPrimitive.Item, { ...menuScope, ...itemProps, ref: forwardedRef });
});
DropdownMenuItem.displayName = ITEM_NAME;
var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
var DropdownMenuCheckboxItem = React2.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...checkboxItemProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
MenuPrimitive.CheckboxItem,
{
...menuScope,
...checkboxItemProps,
ref: forwardedRef
}
);
});
DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
var DropdownMenuRadioGroup = React2.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...radioGroupProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
MenuPrimitive.RadioGroup,
{
...menuScope,
...radioGroupProps,
ref: forwardedRef
}
);
});
DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
var DropdownMenuRadioItem = React2.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...radioItemProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
MenuPrimitive.RadioItem,
{
...menuScope,
...radioItemProps,
ref: forwardedRef
}
);
});
DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
var INDICATOR_NAME = "DropdownMenuItemIndicator";
var DropdownMenuItemIndicator = React2.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
MenuPrimitive.ItemIndicator,
{
...menuScope,
...itemIndicatorProps,
ref: forwardedRef
}
);
});
DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
var SEPARATOR_NAME = "DropdownMenuSeparator";
var DropdownMenuSeparator = React2.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...separatorProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
MenuPrimitive.Separator,
{
...menuScope,
...separatorProps,
ref: forwardedRef
}
);
});
DropdownMenuSeparator.displayName = SEPARATOR_NAME;
var ARROW_NAME = "DropdownMenuArrow";
var DropdownMenuArrow = React2.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...arrowProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuPrimitive.Arrow, { ...menuScope, ...arrowProps, ref: forwardedRef });
});
DropdownMenuArrow.displayName = ARROW_NAME;
var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
var DropdownMenuSubTrigger = React2.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...subTriggerProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
MenuPrimitive.SubTrigger,
{
...menuScope,
...subTriggerProps,
ref: forwardedRef
}
);
});
DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
var SUB_CONTENT_NAME = "DropdownMenuSubContent";
var DropdownMenuSubContent = React2.forwardRef((props, forwardedRef) => {
const { __scopeDropdownMenu, ...subContentProps } = props;
const menuScope = useMenuScope(__scopeDropdownMenu);
return /* @__PURE__ */ (0, import_jsx_runtime3.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
var import_react4 = require("react");
// components/atoms/animate-hide.tsx
var import_framer_motion2 = require("framer-motion");
var import_jsx_runtime4 = require("react/jsx-runtime");
var AnimateHide = ({
children,
show,
initial = false,
className,
onClick
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_framer_motion2.AnimatePresence, { initial, children: show && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_framer_motion2.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
var import_jsx_runtime5 = require("react/jsx-runtime");
var TextInputBase = (0, import_react4.forwardRef)(
(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] = (0, import_react4.useState)(type || "text");
const Component = component;
const containerRef = (0, import_react4.useRef)(null);
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("kl-flex kl-flex-col", containerClassName), children: [
(label || extra) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
"div",
{
className: cn(
"kl-flex kl-items-center kl-justify-between kl-gap-md",
{
"kl-pb-md": !!label || !!extra
}
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"label",
{
className: "kl-select-none kl-bodyMd-medium pulsable kl-min-w-[33%] kl-text-text-default",
htmlFor: id,
children: label
}
),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"div",
{
className: cn({
"kl-h-4xl pulsable": !!label || !!extra
}),
children: extra && (0, import_react4.cloneElement)(extra)
}
)
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime5.jsx)(
"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: (0, import_react4.cloneElement)(prefixIcon, {
size: 16,
color: "currentColor"
})
}
),
!!prefix && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "kl-cursor-default", children: prefix }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
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__ */ (0, import_jsx_runtime5.jsx)("div", { className: "kl-cursor-default", children: suffix }),
!!suffixIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"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: (0, import_react4.cloneElement)(suffixIcon, {
color: "currentColor",
size: 16
})
}
),
showclear && !disabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"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__ */ (0, import_jsx_runtime5.jsx)(import_react.X, { size: 16, color: "currentColor" })
}
),
type === "password" && !disabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"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__ */ (0, import_jsx_runtime5.jsx)(import_react.EyeSlash, { size: 16, color: "currentColor" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react.Eye, { size: 16, color: "currentColor" })
}
)
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(animate_hide_default, { show: !!message, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"div",
{
className: cn(
"kl-bodySm pulsable",
{
"kl-text-text-critical": error,
"kl-text-text-default": !error
},
"kl-pt-md"
),
children: message
}
) })
] });
}
);
var TextInput = (0, import_react4.forwardRef)(
(props, ref) => {
const id = (0, import_react4.useId)();
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
TextInputBase,
{
...{ ...props, id, component: "input", type: "text", ref }
}
);
}
);
var TextArea = (0, import_react4.forwardRef)(
({
autoComplete = "off",
onChange = (_) => {
},
resize = false,
rows = "3",
...etc
}, ref) => {
const id = (0, import_react4.useId)();
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
TextInputBase,
{
...{
...etc,
id,
rows,
autoComplete,
onChange,
resize,
component: "textarea",
ref,
type: "text"
}
}
);
}
);
// components/atoms/tabs.tsx
var RovingFocusGroup = __toESM(require("@radix-ui/react-roving-focus"), 1);
var import_framer_motion3 = require("framer-motion");
var import_react5 = __toESM(require("react"), 1);
var import_jsx_runtime6 = require("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 = import_framer_motion3.motion.a;
tempToLabel = "href";
} else {
Component = LinkComponent;
}
} else {
extraProps = {
role: "button"
};
}
const [hoverd, setHoverd] = (0, import_react5.useState)(false);
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
"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__ */ (0, import_jsx_runtime6.jsx)(
RovingFocusGroup.Item,
{
asChild: true,
focusable: true,
onKeyDown: (e) => {
if (["Enter", " "].includes(e.key)) {
onClick(e);
}
},
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
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__ */ (0, import_jsx_runtime6.jsx)("div", { className: "kl-h-md kl-bg-none kl-w-full kl-z-0" }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "kl-flex kl-flex-row kl-items-center kl-gap-lg", children: [
!!prefix && import_react5.default.cloneElement(prefix, { size: 16, color: "currentColor" }),
typeof label === "function" ? label(active) : label
] }),
active && variant === "plain" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
import_framer_motion3.motion.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__ */ (0, import_jsx_runtime6.jsx)(
import_framer_motion3.motion.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__ */ (0, import_jsx_runtime6.jsx)("div", { className: "kl-h-md kl-bg-none kl-w-full kl-z-0" })
]
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_framer_motion3.AnimatePresence, { children: variant === "filled" && active && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
import_framer_motion3.motion.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__ */ (0, import_jsx_runtime6.jsx)(TabBase, { to, label, prefix, layoutId: "" });
var Root4 = (0, import_react5.forwardRef)(
({
variant = "plain",
size = "md",
fitted = false,
onChange = () => {
},
value,
LinkComponent,
className = "",
basePath = "",
children,
toLabel
}, ref) => {
const id = (0, import_react5.useId)();
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
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__ */ (0, import_jsx_runtime6.jsx)(import_framer_motion3.motion.div, { layout: true, layoutRoot: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_framer_motion3.LayoutGroup, { id, children: import_react5.default.Children.map(children, (child) => {
if (!child) {
throw Error("Tab child is required");
}
const tabChild = child;
const tabChildProps = tabChild.props;
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"div",
{
className: cn("kl-snap-start", {
"kl-px-xl md:kl-px-0": variant === "plain"
}),
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
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
var import_jsx_runtime7 = require("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 = (0, import_react6.forwardRef)(
({ children, ...props }, ref) => {
const { open } = props;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(OptionMenuTriggerBase, { ref, ...props, asChild: true, "is-menu-button": "true", children: (0, import_react6.cloneElement)(children, {
selected: open
}) });
}
);
OptionMenuTrigger.displayName = "OptionMenuTrigger";
var OptionMenuContent = (0, import_react6.forwardRef)(
({
className,
sideOffset = 4,
children,
open,
align = "end",
alignOffset,
side,
...props
}, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Portal2, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
Content2,
{
ref,
sideOffset,
align,
side,
alignOffset,
loop: true,
asChild: true,
...props,
onClick: (e) => e.stopPropagation(),
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"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 = (0, import_react6.forwardRef)(
({
children,
active,
className
}, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"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 = (0, import_react6.forwardRef)(
({ className, ...props }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
Item2,
{
ref,
...preventDefaultEvents,
onSelect: props.onClick,
asChild: true,
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"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 = (0, import_react6.forwardRef)(
({
className,
LinkComponent = "a",
to = "",
toLabel = "to",
target,
rel,
children
}, ref) => {
let tempToLabel = toLabel;
let Component = LinkComponent;
if (to) {
if (LinkComponent === import_framer_motion4.motion.button) {
Component = "a";
tempToLabel = "href";
} else {
Component = LinkComponent;
}
}
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
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__ */ (0, import_jsx_runtime7.jsx)(Component, { ...{ [tempToLabel]: to }, target, rel, children })
}
);
}
);
OptionMenuLink.displayName = "OptionMenuLink";
var OptionMenuTextInputItem = (0, import_react6.forwardRef)(({ onChange, compact = false, ...props }, ref) => {
const searchRef = (0, import_react6.useRef)(null);
const setSearchFocus = (e) => {
e?.preventDefault();
searchRef.current?.focus();
};
(0, import_react6.useEffect)(() => {
if (searchRef.current) {
searchRef.current.focus();
}
}, []);
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"div",
{
className: cn({
"kl-py-lg kl-px-xl": !compact
}),
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
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__ */ (0, import_jsx_runtime7.jsx)(
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 = (0, import_react6.forwardRef)(
({
className,
showIndicator = true,
children,
checked,
onValueChange,
...props
}, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
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
),