@deepnoid/ui 0.1.82 → 0.1.83

package/dist/{chunk-KAKSKYMD.mjs → chunk-4ORPRDPL.mjs}

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

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-SDRGT5I7.mjs → chunk-7GFYCPP3.mjs}

@@ -4,10 +4,10 @@ import {
 } from "./chunk-MVL7HJSH.mjs";
 import {
   button_default
-} from "./chunk-PKUJTOVJ.mjs";
+} from "./chunk-B6YYZVT6.mjs";
 import {
   icon_button_default
-} from "./chunk-P6CRHHI3.mjs";
+} from "./chunk-Z6IOS3S6.mjs";
 
 // src/components/fileUpload/fileUpload.tsx
 import { useRef, useState, useEffect } from "react";

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/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 };