@deepnoid/ui 0.0.112 → 0.1.0

package/dist/{chunk-PO3ADNA5.mjs → chunk-PFYYYUJW.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   checkbox_default
-} from "./chunk-ANYPMQH4.mjs";
+} from "./chunk-XTGRSVYO.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";

package/dist/chunk-PKVQXVCS.mjs

@@ -0,0 +1,170 @@
+"use client";
+import {
+  tv
+} from "./chunk-IE2BRM7Z.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+
+// src/components/radio/radio.tsx
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Radio = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, radioStyle.variantKeys);
+  const { children, classNames, labelPosition = "end", ...inputProps } = props;
+  const slots = useMemo(() => radioStyle({ ...variantProps }), [variantProps]);
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: clsx(
+        slots.base({ class: classNames == null ? void 0 : classNames.base }),
+        labelPosition === "start" && slots.labelReverse({ class: classNames == null ? void 0 : classNames.labelReverse })
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "hidden", children: /* @__PURE__ */ jsx("input", { ...inputProps, type: "radio", ref }) }),
+        /* @__PURE__ */ jsx("span", { className: slots.outerDot({ class: classNames == null ? void 0 : classNames.outerDot }), children: /* @__PURE__ */ jsx("span", { className: slots.innerDot({ class: classNames == null ? void 0 : classNames.innerDot }) }) }),
+        /* @__PURE__ */ jsx("div", { className: slots.labelWrapper({ class: classNames == null ? void 0 : classNames.labelWrapper }), children: children && /* @__PURE__ */ jsx("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children }) })
+      ]
+    }
+  );
+});
+Radio.displayName = "Radio";
+var radio_default = Radio;
+var radioStyle = tv({
+  slots: {
+    base: [
+      "group/radio",
+      "relative",
+      "max-w-fit",
+      "inline-flex",
+      "items-center",
+      "justify-start",
+      "cursor-pointer",
+      "tap-highlight-transparent"
+    ],
+    outerDot: [
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "relative",
+      "flex-shrink-0",
+      "w-[15px]",
+      "h-[15px]",
+      "rounded-full",
+      "border",
+      "border-default",
+      "before:content-['']",
+      "before:absolute",
+      "before:inset-0",
+      "before:rounded-full"
+    ],
+    innerDot: [
+      "inline-block",
+      "w-[8px]",
+      "h-[8px]",
+      "rounded-full",
+      "bg-primary-main",
+      "opacity-0",
+      "transition-opacity",
+      "group-has-[:checked]/radio:opacity-100"
+    ],
+    labelWrapper: ["flex", "flex-col"],
+    labelReverse: ["flex-row-reverse"],
+    label: ["text-foreground", "select-none"]
+  },
+  variants: {
+    color: {
+      primary: {
+        outerDot: [
+          "group-has-[:checked]/radio:border-primary-main",
+          "group-has-[:checked]/radio:border-primary-main",
+          "group-hover/radio:border-primary-light",
+          "group-hover/radio:bg-primary-soft"
+        ],
+        innerDot: ["bg-primary-main"]
+      },
+      secondary: {
+        outerDot: [
+          "group-has-[:checked]/radio:border-secondary-main",
+          "group-hover/radio:border-secondary-light",
+          "group-hover/radio:bg-secondary-soft"
+        ],
+        innerDot: ["bg-secondary-main"]
+      },
+      neutral: {
+        outerDot: [
+          "group-has-[:checked]/radio:border-neutral-main",
+          "group-hover/radio:border-neutral-light",
+          "group-hover/radio:bg-neutral-soft"
+        ],
+        innerDot: ["bg-neutral-main"]
+      }
+    },
+    size: {
+      sm: {
+        base: ["gap-[8px]"],
+        outerDot: ["w-[12px]", "h-[12px]", "border-sm"],
+        innerDot: ["w-[6px]", "h-[6px]"],
+        label: ["text-sm"]
+      },
+      md: {
+        base: ["gap-[8px]"],
+        outerDot: ["w-[15px]", "h-[15px]", "border-md"],
+        innerDot: ["w-[8px]", "h-[8px]"],
+        label: ["text-md"]
+      },
+      lg: {
+        base: ["gap-[10px]"],
+        outerDot: ["w-[18px]", "h-[18px]", "border-lg"],
+        innerDot: ["w-[10px]", "h-[10px]"],
+        label: ["text-lg"]
+      },
+      xl: {
+        base: ["gap-[10px]"],
+        outerDot: ["w-[21px]", "h-[21px]", "border-xl"],
+        innerDot: ["w-[12px]", "h-[12px]"],
+        label: ["text-xl"]
+      }
+    },
+    isInvalid: {
+      true: {
+        outerDot: [
+          "border-danger-main",
+          "group-has-[:checked]/radio:border-danger-main",
+          "group-hover/radio:border-danger-light",
+          "group-hover/radio:bg-danger-soft"
+        ],
+        innerDot: ["bg-danger-main"],
+        label: ["text-danger-main"]
+      }
+    },
+    isDisabled: {
+      true: {
+        base: ["opacity-disabled", "cursor-not-allowed", "pointer-events-auto", "text-neutral-light"],
+        outerDot: [
+          "cursor-not-allowed",
+          "border-neutral-light",
+          "bg-neutral-soft",
+          "group-has-[:checked]/radio:bg-neutral-soft",
+          "group-has-[:checked]/radio:border-neutral-light",
+          "group-hover/radio:border-neutral-light",
+          "group-hover/radio:bg-neutral-soft"
+        ],
+        innerDot: ["bg-neutral-soft"],
+        label: ["text-neutral-light"]
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    isDisabled: false
+  }
+});
+
+export {
+  radio_default
+};

package/dist/{chunk-NGQ3MK2J.mjs → chunk-Q5WACGVP.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   tv
-} from "./chunk-J725QONZ.mjs";
+} from "./chunk-IE2BRM7Z.mjs";
 
 // src/components/button/button-group.tsx
 import React, { forwardRef } from "react";

package/dist/{chunk-FDKT4IBP.mjs → chunk-QJHZJRSQ.mjs}

@@ -5,13 +5,13 @@ import {
 } from "./chunk-P732YGHO.mjs";
 import {
   Icon_default
-} from "./chunk-LCI6RPWE.mjs";
+} from "./chunk-24NQEB73.mjs";
+import {
+  tv
+} from "./chunk-IE2BRM7Z.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
-import {
-  tv
-} from "./chunk-J725QONZ.mjs";
 
 // src/components/dateTimePicker/calendar.tsx
 import React, {

package/dist/{chunk-7HHFRKJU.mjs → chunk-QNA2GDTN.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-ZOTHPHXA.mjs";
 import {
   toast_default
-} from "./chunk-PXUBPWKU.mjs";
+} from "./chunk-FYJZ7Q5L.mjs";
 
 // src/components/toast/use-toast.tsx
 import { createContext, useContext, useState, useCallback, useEffect, useRef } from "react";
@@ -23,7 +23,7 @@ var ToastProvider = ({
 }) => {
   const [toasts, setToasts] = useState([]);
   const [containerStyle, setContainerStyle] = useState({});
-  const toastRef = useRef();
+  const toastRef = useRef(null);
   const addToast = useCallback((content, options) => {
     const id = Date.now() + Math.floor(Math.random() * 1e5);
     const newToast = {

package/dist/{chunk-YRMFIXXC.mjs → chunk-RQ76IOYC.mjs}

@@ -4,13 +4,13 @@ import {
 } from "./chunk-F3HENRVM.mjs";
 import {
   input_default
-} from "./chunk-ZNEEYSIK.mjs";
+} from "./chunk-SK2A72R2.mjs";
+import {
+  tv
+} from "./chunk-IE2BRM7Z.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
-import {
-  tv
-} from "./chunk-J725QONZ.mjs";
 
 // src/components/pagination/pagination.tsx
 import { forwardRef, useCallback, useMemo } from "react";
@@ -76,6 +76,7 @@ var Pagination = forwardRef((originalProps, ref) => {
     [currentPage, totalPage]
   );
   return /* @__PURE__ */ jsxs("div", { ...getBaseProps(), children: [
+    showPageLabel && /* @__PURE__ */ jsx("span", { ...getLabelProps(), children: `${currentPage} of ${totalPage}` }),
     /* @__PURE__ */ jsxs("form", { ...getLabelWrapperProps(), children: [
       showPageInput && /* @__PURE__ */ jsx(input_default, { ...getInputProps() }, `${currentPage}+pagination-input`),
       showPageLabel && /* @__PURE__ */ jsxs("span", { ...getLabelProps(), children: [
@@ -133,7 +134,14 @@ var Pagination = forwardRef((originalProps, ref) => {
           onClick: currentPage < totalPage ? handleClickMovePage(totalPage) : void 0,
           children: ">>"
         }
-      )
+      ),
+      /* @__PURE__ */ jsxs("form", { ...getLabelWrapperProps(), children: [
+        showPageInput && /* @__PURE__ */ jsx(input_default, { ...getInputProps() }, `${currentPage}+pagination-input`),
+        showPageLabel && /* @__PURE__ */ jsxs("span", { ...getLabelProps(), children: [
+          !showPageInput && currentPage,
+          ` of ${totalPage}`
+        ] })
+      ] })
     ] })
   ] });
 });
@@ -144,7 +152,7 @@ var pagination = tv(
     slots: {
       base: "flex items-center select-none",
       label: "text-primary-main text-right whitespace-nowrap",
-      wrapper: "flex overflow-hidden",
+      wrapper: "flex overflow-hidden flex items-center",
       icon: "flex items-center justify-center cursor-pointer",
       button: "flex items-center justify-center cursor-pointer data-[selected=true]:font-[600] transition duration-200"
     },
@@ -178,6 +186,12 @@ var pagination = tv(
           label: "min-w-[105px] text-lg mr-[14px]",
           icon: ["h-[20px] text-lg"],
           button: ["min-w-[37px] h-[20px] text-lg"]
+        },
+        xl: {
+          wrapper: "gap-[10px]",
+          label: "min-w-[105px] text-lg mr-[14px]",
+          icon: ["h-[20px] text-lg"],
+          button: ["min-w-[37px] h-[20px] text-lg"]
         }
       },
       color: {
@@ -245,6 +259,15 @@ var pagination = tv(
           icon: "min-w-[50px] h-[24px] border-l"
         }
       },
+      {
+        variant: "line",
+        size: "xl",
+        class: {
+          wrapper: "border rounded-lg gap-0",
+          button: "!min-w-[50px] h-[24px] border-l",
+          icon: "min-w-[50px] h-[24px] border-l"
+        }
+      },
       {
         variant: "line",
         color: "primary",

package/dist/chunk-RRL6KBU4.mjs

@@ -0,0 +1,145 @@
+"use client";
+import {
+  useTooltip
+} from "./chunk-ZMOAFSYE.mjs";
+import {
+  getTailClassName,
+  getTailStyles
+} from "./chunk-WSIADHVC.mjs";
+import {
+  tv
+} from "./chunk-IE2BRM7Z.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+
+// src/components/tooltip/tooltip.tsx
+import { forwardRef, useCallback, useMemo, useRef, useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Tooltip = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, tooltipStyle.variantKeys);
+  const { placement = "top", offset = 5, delay = 100, persistent = false, classNames } = props;
+  const slots = useMemo(() => tooltipStyle({ ...variantProps }), [variantProps]);
+  const [targetRect, setTargetRect] = useState(null);
+  const { tooltipPosition, tooltipRef } = useTooltip({
+    placement,
+    offset,
+    delay,
+    targetRect
+  });
+  const childrenRef = useRef(null);
+  const delayTimeoutRef = useRef(null);
+  const getProps = useCallback(
+    (slotKey, classNameKey) => ({
+      className: slots[slotKey]({ class: classNames == null ? void 0 : classNames[classNameKey] })
+    }),
+    [slots, classNames]
+  );
+  const getBaseProps = useCallback(() => getProps("base", "base"), [getProps]);
+  const getContentProps = useCallback(() => getProps("content", "content"), [getProps]);
+  const showTooltip = useCallback(() => {
+    if (childrenRef.current) {
+      const rect = childrenRef.current.getBoundingClientRect();
+      setTargetRect({
+        width: rect.width,
+        height: rect.height,
+        left: rect.left,
+        top: rect.top,
+        right: rect.right,
+        bottom: rect.bottom
+      });
+    }
+  }, []);
+  const hideTooltip = useCallback(() => {
+    if (!persistent) {
+      delayTimeoutRef.current = window.setTimeout(() => setTargetRect(null), delay);
+    }
+  }, [persistent, delay]);
+  useEffect(() => {
+    if (persistent) showTooltip();
+  }, [persistent, showTooltip]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: (node) => {
+          if (ref) {
+            if (typeof ref === "function") ref(node);
+            else ref.current = node;
+          }
+          childrenRef.current = node;
+        },
+        ...getBaseProps(),
+        onPointerEnter: !persistent ? showTooltip : void 0,
+        onPointerLeave: !persistent ? hideTooltip : void 0,
+        children: props.children
+      }
+    ),
+    targetRect && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: tooltipRef,
+          ...getContentProps(),
+          onPointerEnter: !persistent ? () => delayTimeoutRef.current && clearTimeout(delayTimeoutRef.current) : void 0,
+          onPointerLeave: !persistent ? hideTooltip : void 0,
+          style: {
+            visibility: "visible",
+            transform: `translate3d(${tooltipPosition.x}px, ${tooltipPosition.y}px, 0)`
+          },
+          children: [
+            props.content,
+            variantProps.tail && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `absolute h-2 w-2 rotate-45 bg-inherit ${getTailClassName(placement)}`,
+                style: getTailStyles(placement)
+              }
+            )
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+Tooltip.displayName = "Tooltip";
+var tooltip_default = Tooltip;
+var tooltipStyle = tv({
+  slots: {
+    base: ["z-0", "relative", "bg-transparent"],
+    content: [
+      "absolute",
+      "top-0",
+      "left-0",
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "font-[500]",
+      "text-common-white",
+      "bg-common-black"
+    ]
+  },
+  variants: {
+    size: {
+      sm: { content: ["text-sm", "rounded-[5px]", "px-[10px]", "py-[6px]"] },
+      md: { content: ["text-md", "rounded-[5px]", "px-[10px]", "py-[6px]"] },
+      lg: { content: ["text-lg", "rounded-[5px]", "px-[10px]", "py-[6px]"] },
+      xl: { content: ["text-xl", "rounded-[5px]", "px-[10px]", "py-[6px]"] }
+    },
+    tail: {
+      true: { content: [] },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    placement: "top",
+    tail: false
+  }
+});
+
+export {
+  tooltip_default
+};

package/dist/chunk-SE5TU755.mjs

@@ -0,0 +1 @@
+"use client";

package/dist/{chunk-ZNEEYSIK.mjs → chunk-SK2A72R2.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-LCI6RPWE.mjs";
+} from "./chunk-24NQEB73.mjs";
+import {
+  tv
+} from "./chunk-IE2BRM7Z.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
-import {
-  tv
-} from "./chunk-J725QONZ.mjs";
 
 // src/components/input/input.tsx
 import React, { forwardRef, useRef, useCallback, useMemo } from "react";
@@ -199,6 +199,12 @@ var inputStyle = tv({
         innerWrapper: ["group-has-[p]/input:gap-[10px]"],
         inputWrapper: ["w-[240px]", "h-[36px]", "rounded-lg", "px-[10px]", "py-[8px]", "gap-[10px]"],
         errorMessage: ["text-lg"]
+      },
+      xl: {
+        base: ["text-xl", "gap-[10px]"],
+        innerWrapper: ["group-has-[p]/input:gap-[10px]"],
+        inputWrapper: ["w-[240px]", "h-[36px]", "rounded-xl", "px-[10px]", "py-[8px]", "gap-[10px]"],
+        errorMessage: ["text-xl"]
       }
     },
     radius: {

package/dist/{chunk-PRLGHYFO.mjs → chunk-UAMIPCUD.mjs}

@@ -1,16 +1,16 @@
 "use client";
 import {
   button_default
-} from "./chunk-UR64ZUAU.mjs";
+} from "./chunk-X2MQCISM.mjs";
 import {
   Icon_default
-} from "./chunk-LCI6RPWE.mjs";
+} from "./chunk-24NQEB73.mjs";
+import {
+  tv
+} from "./chunk-IE2BRM7Z.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
-import {
-  tv
-} from "./chunk-J725QONZ.mjs";
 
 // src/components/modal/modal.tsx
 import { forwardRef, useCallback, useMemo, useEffect } from "react";
@@ -126,7 +126,7 @@ var Modal = forwardRef((originalProps, ref) => {
   }, [isOpen, isKeyboardDismissDisabled, onCancel]);
   return /* @__PURE__ */ jsx(Fragment, { children: isOpen && createPortal(
     /* @__PURE__ */ jsx("div", { ...getBackdropProps(), children: /* @__PURE__ */ jsxs("div", { ref, ...getModalWrapperProps(), children: [
-      typeof icon === "string" ? /* @__PURE__ */ jsx("div", { ...getIconProps(), children: /* @__PURE__ */ jsx(Icon_default, { name: icon, className: "w-[80px] h-[80px]" }) }) : /* @__PURE__ */ jsx("div", { ...getIconProps(), children: icon }),
+      typeof icon === "string" ? /* @__PURE__ */ jsx("div", { ...getIconProps(), children: /* @__PURE__ */ jsx(Icon_default, { name: icon, className: "h-[80px] w-[80px]" }) }) : /* @__PURE__ */ jsx("div", { ...getIconProps(), children: icon }),
       /* @__PURE__ */ jsxs("div", { ...getBodyWrapperProps(), children: [
         showCloseButton && /* @__PURE__ */ jsx(Icon_default, { name: "close", ...getCloseIconProps(), onClick: onCancel }),
         /* @__PURE__ */ jsxs("div", { ...getBodyProps(), children: [
@@ -136,7 +136,7 @@ var Modal = forwardRef((originalProps, ref) => {
           ] }),
           content && typeof content === "string" ? /* @__PURE__ */ jsx("div", { ...getContentProps(), children: content }) : content,
           (cancelButtonText || confirmButtonText) && /* @__PURE__ */ jsxs("div", { ...getFooterWrapperProps(), children: [
-            cancelButtonText && /* @__PURE__ */ jsx(button_default, { variant: "line", size: "md", color: originalProps.color, fullWidth: true, onClick: onCancel, children: cancelButtonText }),
+            cancelButtonText && /* @__PURE__ */ jsx(button_default, { variant: "outline", color: originalProps.color, fullWidth: true, onClick: onCancel, children: cancelButtonText }),
             confirmButtonText && /* @__PURE__ */ jsx(button_default, { size: "md", color: originalProps.color, fullWidth: true, onClick: onConfirm, children: confirmButtonText })
           ] })
         ] })

package/dist/{chunk-JN7EGKJL.mjs → chunk-VBFXKJTI.mjs}

@@ -1,19 +1,19 @@
 "use client";
 import {
   option_default
-} from "./chunk-RZZWHI6O.mjs";
+} from "./chunk-2HSK6XGZ.mjs";
 import {
   useSelect
 } from "./chunk-S3QS5B7F.mjs";
 import {
   Icon_default
-} from "./chunk-LCI6RPWE.mjs";
+} from "./chunk-24NQEB73.mjs";
+import {
+  tv
+} from "./chunk-IE2BRM7Z.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
-import {
-  tv
-} from "./chunk-J725QONZ.mjs";
 
 // src/components/select/select.tsx
 import { forwardRef, useMemo, useCallback } from "react";
@@ -193,6 +193,12 @@ var select = tv({
         selectWrapper: "w-[240px] h-[36px] px-[10px] py-[8px] gap-[10px] rounded-lg",
         optionsWrapper: "max-h-[144px] rounded-lg",
         errorMessage: "text-lg"
+      },
+      xl: {
+        base: "text-lg gap-[10px]",
+        selectWrapper: "w-[240px] h-[36px] px-[10px] py-[8px] gap-[10px] rounded-xl",
+        optionsWrapper: "max-h-[144px] rounded-xl",
+        errorMessage: "text-xl"
       }
     },
     radius: {

package/dist/chunk-VWMXZUR2.mjs

@@ -0,0 +1,82 @@
+"use client";
+import {
+  Icon_default
+} from "./chunk-24NQEB73.mjs";
+import {
+  tv
+} from "./chunk-IE2BRM7Z.mjs";
+
+// src/components/breadcrumb/breadcrumb.tsx
+import { forwardRef, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var BreadcrumbMenu = forwardRef(({ label, onClick, isCurrent, size }, ref) => {
+  const slots = useMemo(() => breadcrumbStyle({ size }), [size]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      onClick,
+      className: `${slots.content()} ${isCurrent ? "text-primary-main underline" : ""}`,
+      "aria-current": isCurrent ? "page" : void 0,
+      children: label
+    }
+  );
+});
+var Breadcrumb = forwardRef(({ startIconName, size, menus, classNames }, ref) => {
+  const slots = useMemo(() => breadcrumbStyle({ size }), [size]);
+  const renderMenus = (menus2) => menus2.map((menu, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-[5px]", children: [
+    /* @__PURE__ */ jsx(BreadcrumbMenu, { label: menu.label, onClick: menu.onClick, isCurrent: !menu.children, size }),
+    menu.children ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Icon_default, { name: "right", className: slots.separator() }),
+      renderMenus(menu.children)
+    ] }) : index !== menus2.length - 1 && /* @__PURE__ */ jsx(Icon_default, { name: "right", className: slots.separator() })
+  ] }, `${menu.label}-${index}`));
+  return /* @__PURE__ */ jsx("nav", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsxs("ul", { className: "flex items-center gap-1", children: [
+    startIconName && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Icon_default, { name: startIconName, fill: true, size, className: `${slots.icon()}` }) }),
+    renderMenus(menus)
+  ] }) });
+});
+Breadcrumb.displayName = "Breadcrumb";
+var breadcrumb_default = Breadcrumb;
+var breadcrumbStyle = tv({
+  slots: {
+    base: ["flex", "items-center"],
+    content: [
+      "text-neutral-main",
+      "flex",
+      "items-center",
+      "hover:underline",
+      "cursor-pointer",
+      "[line-height:initial]"
+    ],
+    icon: ["fill-primary-main", "text-primary-main", "stroke-primary-main"],
+    separator: ["stroke-neutral-main"]
+  },
+  variants: {
+    size: {
+      sm: {
+        base: "text-sm",
+        separator: "w-[18px] h-[18px]"
+      },
+      md: {
+        base: "text-md",
+        separator: "w-[21px] h-[21px]"
+      },
+      lg: {
+        base: "text-lg",
+        separator: "w-[24px] h-[24px]"
+      },
+      xl: {
+        base: "text-xl",
+        separator: "w-[27px] h-[27px]"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+export {
+  breadcrumb_default
+};

package/dist/chunk-WQBOPCH6.mjs

@@ -0,0 +1,29 @@
+"use client";
+import {
+  tv
+} from "./chunk-IE2BRM7Z.mjs";
+
+// src/components/backdrop/backdrop.tsx
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var Backdrop = ({ open }) => {
+  const [isVisible, setIsVisible] = useState(open);
+  useEffect(() => {
+    setIsVisible(open);
+  }, [open]);
+  if (!isVisible) return null;
+  const slots = backdropStyle();
+  return /* @__PURE__ */ jsx("div", { className: slots.base() });
+};
+Backdrop.displayName = "Backdrop";
+var backdrop_default = Backdrop;
+var backdropStyle = tv({
+  slots: {
+    base: ["fixed", "inset-0", "z-50", "bg-trans-strong"]
+  },
+  defaultVariants: {}
+});
+
+export {
+  backdrop_default
+};