@deepnoid/ui 0.1.82 → 0.1.85

package/dist/{chunk-UE5Z7QUS.mjs → chunk-5IKVOP4M.mjs}

@@ -1,13 +1,13 @@
 "use client";
+import {
+  calendar_default
+} from "./chunk-6SWMJLOD.mjs";
 import {
   timePicker_default
-} from "./chunk-6PI7MYEV.mjs";
+} from "./chunk-FB6LBMGN.mjs";
 import {
   useDatePicker
 } from "./chunk-FWJ2ZKH6.mjs";
-import {
-  calendar_default
-} from "./chunk-6SWMJLOD.mjs";
 import {
   Icon_default
 } from "./chunk-JP4TEWP7.mjs";

package/dist/{chunk-KAKSKYMD.mjs → chunk-D6OJWEZM.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-AF4I7ZQS.mjs";
 import {
   button_default
-} from "./chunk-PKUJTOVJ.mjs";
+} from "./chunk-V5OCV42N.mjs";
 import {
   Icon_default
 } from "./chunk-JP4TEWP7.mjs";

package/dist/chunk-EKLA6ZR4.mjs

@@ -0,0 +1,77 @@
+"use client";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-CDXBML6O.mjs";
+
+// src/components/accordion/accordion.tsx
+import React, { forwardRef, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var Accordion = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, accordion.variantKeys);
+  const { children, classNames, selectionMode = "single", selectionIndex } = props;
+  const slots = useMemo(() => accordion({ ...variantProps }), [...Object.values(variantProps)]);
+  const [selections, setSelections] = useState(typeof selectionIndex === "number" ? [selectionIndex] : []);
+  const toggleItem = (index) => {
+    setSelections((prevIndices) => {
+      if (selectionMode === "single") {
+        return prevIndices.includes(index) ? [] : [index];
+      } else {
+        return prevIndices.includes(index) ? prevIndices.filter((i) => i !== index) : [...prevIndices, index];
+      }
+    });
+  };
+  return /* @__PURE__ */ jsx("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: React.Children.map(children, (child, index) => {
+    return React.cloneElement(child, {
+      ...variantProps,
+      ...child.props,
+      isInGroup: true,
+      isOpen: selections.includes(index),
+      onToggle: () => toggleItem(index)
+    });
+  }) });
+});
+Accordion.displayName = "Accordion";
+var accordion_default = Accordion;
+var accordion = tv({
+  slots: {
+    base: ["flex", "flex-col"]
+  },
+  variants: {
+    variant: {
+      outline: {
+        base: "gap-[20px]"
+      },
+      underline: {
+        base: "gap-[20px]"
+      }
+    },
+    size: {
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {}
+    },
+    color: {
+      primary: {},
+      secondary: {},
+      neutral: {}
+    },
+    disableAnimation: {
+      true: {},
+      false: {}
+    }
+  },
+  defaultVariants: {
+    variant: "outline",
+    color: "primary",
+    size: "md",
+    disableAnimation: false
+  }
+});
+
+export {
+  accordion_default
+};

package/dist/{chunk-6PI7MYEV.mjs → chunk-FB6LBMGN.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-3IILPVRA.mjs";
 import {
   listItem_default
-} from "./chunk-JW2TIJVH.mjs";
+} from "./chunk-I3ORSDFO.mjs";
 
 // src/components/dateTimePicker/timePicker.tsx
 import { useState, useRef, useEffect } from "react";

package/dist/chunk-FKHKYVZH.mjs

@@ -0,0 +1,212 @@
+"use client";
+import {
+  Icon_default
+} from "./chunk-JP4TEWP7.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-CDXBML6O.mjs";
+
+// src/components/accordion/accordionItem.tsx
+import { forwardRef, useCallback, useMemo, useRef, useState, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AccordionItem = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, accordionItem.variantKeys);
+  const { title, children, startIconName, endIconName, classNames, isOpen, onToggle, size, disableAnimation } = {
+    ...props,
+    ...variantProps
+  };
+  const slots = useMemo(
+    () => accordionItem({ ...variantProps }),
+    [...Object.values(variantProps)]
+  );
+  const contentRef = useRef(null);
+  const [contentHeight, setContentHeight] = useState("0px");
+  useEffect(() => {
+    if (contentRef.current) {
+      setContentHeight(isOpen ? `${contentRef.current.scrollHeight}px` : "0px");
+    }
+  }, [isOpen]);
+  const renderIcon = (name) => name ? /* @__PURE__ */ jsx(Icon_default, { name, fill: true, size, className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }) }) : null;
+  const getContentProps = useCallback(() => {
+    if (disableAnimation) {
+      return {
+        className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
+        style: {
+          maxHeight: isOpen ? "none" : "0px",
+          opacity: isOpen ? 1 : 0,
+          overflow: isOpen ? "visible" : "hidden"
+        }
+      };
+    }
+    return {
+      className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
+      style: {
+        maxHeight: contentHeight,
+        opacity: isOpen ? 1 : 0
+      }
+    };
+  }, [slots, classNames == null ? void 0 : classNames.content, contentHeight, isOpen, disableAnimation]);
+  return /* @__PURE__ */ jsxs("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ jsxs("div", { "data-isOpen": isOpen, className: slots.header({ class: classNames == null ? void 0 : classNames.header }), onClick: onToggle, children: [
+      renderIcon(startIconName),
+      /* @__PURE__ */ jsx("span", { className: slots.headerTitle({ class: classNames == null ? void 0 : classNames.headerTitle }), children: title }),
+      renderIcon(endIconName)
+    ] }),
+    isOpen && /* @__PURE__ */ jsx("div", { ref: contentRef, ...getContentProps(), children })
+  ] });
+});
+AccordionItem.displayName = "AccordionItem";
+var accordionItem_default = AccordionItem;
+var accordionItem = tv({
+  slots: {
+    base: ["group/accordion", "w-full", "flex", "flex-col", "gap-[12px]", "p-[12px]"],
+    header: [
+      "flex",
+      "justify-between",
+      "items-center",
+      "text-foreground",
+      "cursor-pointer",
+      "select-none",
+      "gap-[8px]"
+    ],
+    headerTitle: ["truncate", "w-full", "font-bold", "text-body-foreground"],
+    content: [
+      "overflow-hidden",
+      "transition-all",
+      "duration-300",
+      "ease-in-out",
+      "max-h-0",
+      "opacity-0",
+      "font-bold",
+      "text-body-foreground"
+    ],
+    icon: []
+  },
+  variants: {
+    variant: {
+      outline: {
+        header: []
+      },
+      underline: {
+        base: ["border-b", "last:border-b-0"]
+      }
+    },
+    size: {
+      sm: {
+        base: ["gap-[12px]", "p-[12px]"],
+        header: "text-sm",
+        content: "p-[12px] text-sm rounded-sm"
+      },
+      md: {
+        base: ["gap-[12px]", "p-[12px]"],
+        header: "text-md",
+        content: "p-[12px] text-md rounded-md"
+      },
+      lg: {
+        base: ["gap-[20px]", "p-[20px]"],
+        header: "text-lg",
+        content: "p-[20px] text-lg rounded-lg"
+      },
+      xl: {
+        base: ["gap-[20px]", "p-[20px]"],
+        header: "text-xl",
+        content: "p-[20px] text-xl rounded-xl"
+      }
+    },
+    color: {
+      primary: {
+        content: ["bg-primary-soft"],
+        icon: ["text-primary-main"]
+      },
+      secondary: {
+        content: ["bg-secondary-soft"],
+        icon: ["text-secondary-main"]
+      },
+      neutral: {
+        content: ["bg-neutral-soft"],
+        icon: ["text-neutral-main"]
+      }
+    },
+    isInGroup: {
+      true: ""
+    },
+    disableAnimation: {
+      true: {
+        content: ["transition-none"]
+      },
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "outline",
+      size: "sm",
+      class: {
+        base: ["rounded-sm", "border-sm"]
+      }
+    },
+    {
+      variant: "outline",
+      size: "md",
+      class: {
+        base: ["rounded-md", "border-md"]
+      }
+    },
+    {
+      variant: "outline",
+      size: "lg",
+      class: {
+        base: ["rounded-lg", "border-lg"]
+      }
+    },
+    {
+      variant: "outline",
+      size: "xl",
+      class: {
+        base: ["rounded-xl", "border-xl"]
+      }
+    },
+    {
+      variant: "underline",
+      size: "sm",
+      class: {
+        base: ["border-b-sm"]
+      }
+    },
+    {
+      variant: "underline",
+      size: "md",
+      class: {
+        base: ["border-b-md"]
+      }
+    },
+    {
+      variant: "underline",
+      size: "lg",
+      class: {
+        base: ["border-b-lg"]
+      }
+    },
+    {
+      variant: "underline",
+      size: "xl",
+      class: {
+        base: ["border-b-xl"]
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "outline",
+    color: "primary",
+    size: "md",
+    isInGroup: false,
+    disableAnimation: false
+  }
+});
+
+export {
+  accordionItem_default
+};

package/dist/chunk-NMSDSEBD.mjs

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

package/dist/{chunk-SDRGT5I7.mjs → chunk-Q3JMHIW5.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-MVL7HJSH.mjs";
 import {
   button_default
-} from "./chunk-PKUJTOVJ.mjs";
+} from "./chunk-V5OCV42N.mjs";
 import {
   icon_button_default
 } from "./chunk-P6CRHHI3.mjs";

package/dist/{chunk-PKUJTOVJ.mjs → chunk-V5OCV42N.mjs}

@@ -16,11 +16,17 @@ import {
 } from "./chunk-CDXBML6O.mjs";
 
 // src/components/button/button.tsx
-import React, { forwardRef, useMemo, useCallback } from "react";
+import {
+  forwardRef,
+  useMemo,
+  useCallback,
+  isValidElement,
+  cloneElement
+} from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Button = forwardRef((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, buttonStyle.variantKeys);
-  const { classNames, startContent, endContent, disableRipple, children, ...buttonProps } = props;
+  const { classNames, startContent, endContent, disableRipple, asChild, children, ...buttonProps } = props;
   const slots = useMemo(() => buttonStyle({ ...variantProps }), [variantProps]);
   const { onPress: onRipplePressHandler, onClear: onClearRipple, ripples } = useRipple();
   const handlePress = useCallback(
@@ -62,25 +68,46 @@ var Button = forwardRef((originalProps, ref) => {
     [slots, classNames, originalProps.size]
   );
   const renderContent = (content) => {
-    if (React.isValidElement(content)) {
+    if (isValidElement(content)) {
       const _content = content;
       const existingProps = _content.props;
       const mergedProps = {
         ...getContentProps(),
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
-      return React.cloneElement(content, mergedProps);
+      return cloneElement(content, mergedProps);
     } else {
       const contentProps = getContentProps();
       return /* @__PURE__ */ jsx("div", { ...contentProps, children: content });
     }
   };
-  return /* @__PURE__ */ jsx("button", { ...getBaseProps(), children: originalProps.isLoading ? renderContent(/* @__PURE__ */ jsx(Icon_default, { name: "loading", className: "animate-spin" })) : /* @__PURE__ */ jsxs(Fragment, { children: [
+  const buttonContent = /* @__PURE__ */ jsx(Fragment, { children: originalProps.isLoading ? renderContent(/* @__PURE__ */ jsx(Icon_default, { name: "loading", className: "animate-spin" })) : /* @__PURE__ */ jsxs(Fragment, { children: [
     startContent && renderContent(startContent),
     children,
     endContent && renderContent(endContent),
     !disableRipple && /* @__PURE__ */ jsx(ripple_default, { ...getRippleProps() })
   ] }) });
+  if (asChild && isValidElement(children)) {
+    const childElement = children;
+    const baseProps = getBaseProps();
+    const mergedProps = {
+      ...childElement.props,
+      ...baseProps,
+      className: `${baseProps.className || ""} ${childElement.props.className || ""}`.trim(),
+      onClick: (e) => {
+        var _a, _b, _c;
+        (_b = (_a = childElement.props).onClick) == null ? void 0 : _b.call(_a, e);
+        (_c = baseProps.onClick) == null ? void 0 : _c.call(baseProps, e);
+      },
+      onMouseDown: (e) => {
+        var _a, _b, _c;
+        (_b = (_a = childElement.props).onMouseDown) == null ? void 0 : _b.call(_a, e);
+        (_c = baseProps.onMouseDown) == null ? void 0 : _c.call(baseProps, e);
+      }
+    };
+    return cloneElement(childElement, mergedProps);
+  }
+  return /* @__PURE__ */ jsx("button", { ...getBaseProps(), children: buttonContent });
 });
 Button.displayName = "Button";
 var button_default = Button;

package/dist/components/accordion/accordion.d.mts

@@ -0,0 +1,98 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import react__default, { ReactNode } from 'react';
+import { SlotsToClasses } from '../../utils/types.mjs';
+
+interface Props {
+    children?: ReactNode;
+    classNames?: SlotsToClasses<AccordionSlots>;
+    selectionMode?: "single" | "multiple";
+    selectionIndex?: number;
+}
+type AccordionProps = Props & AccordionVariantProps;
+declare const Accordion: react__default.ForwardRefExoticComponent<Props & AccordionVariantProps & react__default.RefAttributes<HTMLDivElement>>;
+
+declare const accordion: tailwind_variants.TVReturnType<{
+    variant: {
+        outline: {
+            base: string;
+        };
+        underline: {
+            base: string;
+        };
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        neutral: {};
+    };
+    disableAnimation: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string[];
+}, undefined, {
+    variant: {
+        outline: {
+            base: string;
+        };
+        underline: {
+            base: string;
+        };
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        neutral: {};
+    };
+    disableAnimation: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string[];
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        outline: {
+            base: string;
+        };
+        underline: {
+            base: string;
+        };
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        neutral: {};
+    };
+    disableAnimation: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>;
+type AccordionVariantProps = VariantProps<typeof accordion>;
+type AccordionSlots = keyof ReturnType<typeof accordion>;
+type AccordionReturnType = ReturnType<typeof accordion>;
+
+export { type AccordionProps, type AccordionReturnType, type AccordionSlots, type AccordionVariantProps, type Props, Accordion as default };

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,98 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import react__default, { ReactNode } from 'react';
+import { SlotsToClasses } from '../../utils/types.js';
+
+interface Props {
+    children?: ReactNode;
+    classNames?: SlotsToClasses<AccordionSlots>;
+    selectionMode?: "single" | "multiple";
+    selectionIndex?: number;
+}
+type AccordionProps = Props & AccordionVariantProps;
+declare const Accordion: react__default.ForwardRefExoticComponent<Props & AccordionVariantProps & react__default.RefAttributes<HTMLDivElement>>;
+
+declare const accordion: tailwind_variants.TVReturnType<{
+    variant: {
+        outline: {
+            base: string;
+        };
+        underline: {
+            base: string;
+        };
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        neutral: {};
+    };
+    disableAnimation: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string[];
+}, undefined, {
+    variant: {
+        outline: {
+            base: string;
+        };
+        underline: {
+            base: string;
+        };
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        neutral: {};
+    };
+    disableAnimation: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string[];
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        outline: {
+            base: string;
+        };
+        underline: {
+            base: string;
+        };
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        neutral: {};
+    };
+    disableAnimation: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>;
+type AccordionVariantProps = VariantProps<typeof accordion>;
+type AccordionSlots = keyof ReturnType<typeof accordion>;
+type AccordionReturnType = ReturnType<typeof accordion>;
+
+export { type AccordionProps, type AccordionReturnType, type AccordionSlots, type AccordionVariantProps, type Props, Accordion as default };