@mdigital_ui/ui 0.4.2 → 0.4.4

package/dist/{chunk-764UKE6X.js → chunk-OGB5QPNZ.js}

@@ -1,5 +1,5 @@
-import { focusRingColorClasses } from './chunk-POXI7JJ4.js';
-import { cn } from './chunk-NGYLRX6F.js';
+import { colorVars } from './chunk-G6QIIWKU.js';
+import { cn } from './chunk-RAS6HUEI.js';
 import { cva } from 'class-variance-authority';
 import React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -11,23 +11,14 @@ function useCardContext() {
 var cardVariants = cva("rounded-lg transition-[shadow,transform]", {
   variants: {
     variant: {
-      default: "bg-card text-card-foreground border",
-      solid: "border",
-      outline: "bg-transparent border",
-      soft: "border-transparent",
-      ghost: "border-transparent bg-transparent",
+      default: "bg-card text-card-foreground border border-slot",
+      solid: "border border-slot bg-slot text-slot-fg",
+      outline: "bg-transparent border border-slot text-text-primary",
+      soft: "border-transparent bg-slot-10 text-slot",
+      ghost: "border-transparent bg-transparent text-slot",
       elevated: "bg-card text-card-foreground border-transparent shadow-md"
     },
-    color: {
-      default: "border-border",
-      primary: "border-primary",
-      secondary: "border-secondary",
-      accent: "border-accent",
-      success: "border-success",
-      error: "border-error",
-      warning: "border-warning",
-      info: "border-info"
-    },
+    color: colorVars,
     shadow: {
       none: "",
       sm: "shadow-sm",
@@ -39,81 +30,10 @@ var cardVariants = cva("rounded-lg transition-[shadow,transform]", {
       false: ""
     },
     clickable: {
-      true: "cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 active:translate-y-0 active:shadow-md",
+      true: "cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-slot focus-visible:ring-offset-2 focus-visible:ring-offset-background active:translate-y-0 active:shadow-md",
       false: ""
     }
   },
-  compoundVariants: (() => {
-    const styles = {
-      default: {
-        default: "bg-card text-card-foreground border-border",
-        primary: "bg-card text-card-foreground border-primary",
-        secondary: "bg-card text-card-foreground border-secondary",
-        accent: "bg-card text-card-foreground border-accent",
-        success: "bg-card text-card-foreground border-success",
-        error: "bg-card text-card-foreground border-error",
-        warning: "bg-card text-card-foreground border-warning",
-        info: "bg-card text-card-foreground border-info"
-      },
-      solid: {
-        default: "bg-surface border-border text-text-primary",
-        primary: "bg-primary border-primary text-background",
-        secondary: "bg-secondary border-secondary text-background",
-        accent: "bg-accent border-accent text-background",
-        success: "bg-success border-success text-background",
-        error: "bg-error border-error text-background",
-        warning: "bg-warning border-warning text-background",
-        info: "bg-info border-info text-background"
-      },
-      outline: {
-        default: "border-border text-text-primary",
-        primary: "border-primary text-text-primary",
-        secondary: "border-secondary text-text-primary",
-        accent: "border-accent text-text-primary",
-        success: "border-success text-text-primary",
-        error: "border-error text-text-primary",
-        warning: "border-warning text-text-primary",
-        info: "border-info text-text-primary"
-      },
-      soft: {
-        default: "bg-surface text-text-primary",
-        primary: "bg-primary/10 text-primary",
-        secondary: "bg-secondary/10 text-secondary",
-        accent: "bg-accent/10 text-accent",
-        success: "bg-success/10 text-success",
-        error: "bg-error/10 text-error",
-        warning: "bg-warning/10 text-warning",
-        info: "bg-info/10 text-info"
-      },
-      ghost: {
-        default: "text-text-primary",
-        primary: "text-primary",
-        secondary: "text-secondary",
-        accent: "text-accent",
-        success: "text-success",
-        error: "text-error",
-        warning: "text-warning",
-        info: "text-info"
-      },
-      elevated: {
-        default: "bg-card text-card-foreground",
-        primary: "bg-card text-card-foreground ring-1 ring-primary/20",
-        secondary: "bg-card text-card-foreground ring-1 ring-secondary/20",
-        accent: "bg-card text-card-foreground ring-1 ring-accent/20",
-        success: "bg-card text-card-foreground ring-1 ring-success/20",
-        error: "bg-card text-card-foreground ring-1 ring-error/20",
-        warning: "bg-card text-card-foreground ring-1 ring-warning/20",
-        info: "bg-card text-card-foreground ring-1 ring-info/20"
-      }
-    };
-    return Object.entries(styles).flatMap(
-      ([variant, colorMap]) => Object.entries(colorMap).map(([color, cls]) => ({
-        variant,
-        color,
-        class: cls
-      }))
-    );
-  })(),
   defaultVariants: {
     variant: "default",
     color: "default",
@@ -166,7 +86,6 @@ var Card = React.memo(
         clickable
       }),
       !bordered && "border-transparent",
-      clickable && focusRingColorClasses[color],
       sizeClasses[size],
       classNames?.root,
       className
@@ -355,5 +274,5 @@ var CardWithSubComponents = Object.assign(Card, {
 var card_default = CardWithSubComponents;
 
 export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardImage, CardTitle, cardVariants, card_default };
-//# sourceMappingURL=chunk-764UKE6X.js.map
-//# sourceMappingURL=chunk-764UKE6X.js.map
+//# sourceMappingURL=chunk-OGB5QPNZ.js.map
+//# sourceMappingURL=chunk-OGB5QPNZ.js.map

package/dist/chunk-OGB5QPNZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/card/index.tsx"],"names":[],"mappings":"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","file":"chunk-OGB5QPNZ.js","sourcesContent":["'use client'\n\nimport { cva } from \"class-variance-authority\";\nimport React from \"react\";\n\nimport { cn } from \"../utils\";\nimport { colorVars } from \"../variants\";\nimport type {\n  CardActionProps,\n  CardClassNames,\n  CardColor,\n  CardContentProps,\n  CardDescriptionProps,\n  CardFooterProps,\n  CardHeaderProps,\n  CardImageProps,\n  CardProps,\n  CardSize,\n  CardTitleProps,\n  CardVariant,\n} from \"./types\";\n\ninterface CardContextValue {\n  variant: CardVariant;\n  color: CardColor;\n  classNames?: CardClassNames;\n}\n\nconst CardContext = React.createContext<CardContextValue | null>(null);\n\nfunction useCardContext() {\n  return React.useContext(CardContext);\n}\n\nconst cardVariants = cva(\"rounded-lg transition-[shadow,transform]\", {\n  variants: {\n    variant: {\n      default: \"bg-card text-card-foreground border border-slot\",\n      solid: \"border border-slot bg-slot text-slot-fg\",\n      outline: \"bg-transparent border border-slot text-text-primary\",\n      soft: \"border-transparent bg-slot-10 text-slot\",\n      ghost: \"border-transparent bg-transparent text-slot\",\n      elevated: \"bg-card text-card-foreground border-transparent shadow-md\",\n    },\n    color: colorVars,\n    shadow: {\n      none: \"\",\n      sm: \"shadow-sm\",\n      md: \"shadow-md\",\n      lg: \"shadow-lg\",\n    },\n    hoverable: {\n      true: \"hover:shadow-lg hover:-translate-y-0.5 cursor-pointer\",\n      false: \"\",\n    },\n    clickable: {\n      true: \"cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-slot focus-visible:ring-offset-2 focus-visible:ring-offset-background active:translate-y-0 active:shadow-md\",\n      false: \"\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    color: \"default\",\n    shadow: \"none\",\n    hoverable: false,\n    clickable: false,\n  },\n});\n\nconst sizeClasses: Record<CardSize, string> = {\n  xs: \"[--card-padding:0.5rem] [--card-content-padding:0.5rem] [--card-footer-padding:0.5rem]\",\n  sm: \"[--card-padding:1rem] [--card-content-padding:1rem] [--card-footer-padding:1rem]\",\n  md: \"[--card-padding:1.5rem] [--card-content-padding:1.5rem] [--card-footer-padding:1.5rem]\",\n  lg: \"[--card-padding:2rem] [--card-content-padding:2rem] [--card-footer-padding:2rem]\",\n};\n\nconst Card = React.memo<CardProps>(\n  ({\n    className,\n    variant = \"default\",\n    color = \"default\",\n    size = \"md\",\n    shadow = \"none\",\n    hoverable = false,\n    clickable = false,\n    bordered = true,\n    loading = false,\n    classNames,\n    onClick,\n    ref,\n    children,\n    ...props\n  }) => {\n    const cardContent = loading ? (\n      <div className=\"animate-pulse\">\n        <div className=\"p-(--card-padding)\">\n          <div className=\"h-4 bg-surface rounded w-3/4 mb-2\" />\n          <div className=\"h-3 bg-surface rounded w-1/2\" />\n        </div>\n        <div className=\"p-(--card-content-padding) pt-0\">\n          <div className=\"h-3 bg-surface rounded w-full mb-2\" />\n          <div className=\"h-3 bg-surface rounded w-full mb-2\" />\n          <div className=\"h-3 bg-surface rounded w-2/3\" />\n        </div>\n      </div>\n    ) : (\n      children\n    );\n\n    const cardClassName = cn(\n      \"card_root\",\n      cardVariants({\n        variant,\n        color,\n        shadow,\n        hoverable,\n        clickable,\n      }),\n      !bordered && \"border-transparent\",\n      sizeClasses[size],\n      classNames?.root,\n      className,\n    );\n\n    const contextValue = React.useMemo(\n      () => ({ variant, color, classNames }),\n      [variant, color, classNames],\n    );\n\n    if (clickable) {\n      return (\n        <CardContext.Provider value={contextValue}>\n          <div\n            ref={ref}\n            role=\"button\"\n            tabIndex={0}\n            className={cardClassName}\n            onClick={onClick}\n            onKeyDown={(e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);\n              }\n            }}\n            data-slot=\"root\"\n            {...props}\n          >\n            {cardContent}\n          </div>\n        </CardContext.Provider>\n      );\n    }\n\n    return (\n      <CardContext.Provider value={contextValue}>\n        <div ref={ref} className={cardClassName} onClick={onClick} data-slot=\"root\" {...props}>\n          {cardContent}\n        </div>\n      </CardContext.Provider>\n    );\n  },\n);\nCard.displayName = \"Card\";\n\nconst CardHeader: React.FC<CardHeaderProps> = ({ className, ref, ...props }) => {\n  const ctx = useCardContext();\n  return (\n    <div\n      ref={ref}\n      className={cn(\"card_header\", \"flex flex-col gap-1.5 p-(--card-padding)\", ctx?.classNames?.header, className)}\n      data-slot=\"header\"\n      {...props}\n    />\n  );\n};\nCardHeader.displayName = \"CardHeader\";\n\nconst CardTitle: React.FC<CardTitleProps> = ({ className, as: Tag = \"h3\", ref, ...props }) => {\n  const ctx = useCardContext();\n  return (\n    <Tag\n      ref={ref}\n      className={cn(\n        \"card_title\",\n        \"text-lg font-semibold leading-none tracking-tight\",\n        ctx?.classNames?.title,\n        className,\n      )}\n      data-slot=\"title\"\n      {...props}\n    />\n  );\n};\nCardTitle.displayName = \"CardTitle\";\n\nconst CardDescription: React.FC<CardDescriptionProps> = ({ className, ref, ...props }) => {\n  const ctx = useCardContext();\n  const isSolidColored = ctx?.variant === \"solid\" && ctx?.color !== \"default\";\n  return (\n    <p\n      ref={ref}\n      className={cn(\n        \"card_description\",\n        \"text-sm\",\n        isSolidColored ? \"text-inherit opacity-80\" : \"text-text-secondary\",\n        ctx?.classNames?.description,\n        className,\n      )}\n      data-slot=\"description\"\n      {...props}\n    />\n  );\n};\nCardDescription.displayName = \"CardDescription\";\n\nconst CardContent: React.FC<CardContentProps> = ({ className, ref, ...props }) => {\n  const ctx = useCardContext();\n  return (\n    <div\n      ref={ref}\n      className={cn(\"card_content\", \"p-(--card-content-padding) pt-0\", ctx?.classNames?.content, className)}\n      data-slot=\"content\"\n      {...props}\n    />\n  );\n};\nCardContent.displayName = \"CardContent\";\n\nconst CardFooter: React.FC<CardFooterProps> = ({ className, ref, ...props }) => {\n  const ctx = useCardContext();\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"card_footer\",\n        \"flex items-center p-(--card-footer-padding) pt-0\",\n        ctx?.classNames?.footer,\n        className,\n      )}\n      data-slot=\"footer\"\n      {...props}\n    />\n  );\n};\nCardFooter.displayName = \"CardFooter\";\n\nconst CardAction: React.FC<CardActionProps> = ({ className, ref, ...props }) => {\n  const ctx = useCardContext();\n  return (\n    <div\n      ref={ref}\n      className={cn(\"card_action\", \"ml-auto flex items-center gap-2\", ctx?.classNames?.action, className)}\n      data-slot=\"action\"\n      {...props}\n    />\n  );\n};\nCardAction.displayName = \"CardAction\";\n\nconst aspectRatioClasses = {\n  square: \"aspect-square\",\n  video: \"aspect-video\",\n  wide: \"aspect-[21/9]\",\n  auto: \"\",\n};\n\nconst objectFitClasses = {\n  cover: \"object-cover\",\n  contain: \"object-contain\",\n  fill: \"object-fill\",\n  none: \"object-none\",\n};\n\nconst CardImage: React.FC<CardImageProps> = ({\n  src,\n  alt,\n  position = \"top\",\n  aspectRatio = \"video\",\n  objectFit = \"cover\",\n  className,\n  ref,\n  ...props\n}) => {\n  const ctx = useCardContext();\n  return (\n    <div\n      className={cn(\n        \"overflow-hidden\",\n        position === \"top\" && \"rounded-t-lg\",\n        position === \"bottom\" && \"rounded-b-lg\",\n        aspectRatio !== \"auto\" && aspectRatioClasses[aspectRatio],\n      )}\n    >\n      <img\n        ref={ref}\n        src={src}\n        alt={alt}\n        className={cn(\"card_image\", \"w-full h-full\", objectFitClasses[objectFit], ctx?.classNames?.image, className)}\n        data-slot=\"image\"\n        loading=\"lazy\"\n        {...props}\n      />\n    </div>\n  );\n};\nCardImage.displayName = \"CardImage\";\n\nconst CardWithSubComponents = Object.assign(Card, {\n  Header: CardHeader,\n  Footer: CardFooter,\n  Title: CardTitle,\n  Description: CardDescription,\n  Content: CardContent,\n  Action: CardAction,\n  Image: CardImage,\n});\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  CardAction,\n  CardImage,\n  cardVariants,\n};\n\nexport type { CardClassNames } from \"./types\";\nexport type * from \"./types\";\nexport default CardWithSubComponents;\n"]}

package/dist/chunk-OJAHIPPP.js

@@ -0,0 +1,198 @@
+import { useControllable } from './chunk-PQOIW5CM.js';
+import { colorVars } from './chunk-G6QIIWKU.js';
+import { cn, iconSizes } from './chunk-RAS6HUEI.js';
+import { cva } from 'class-variance-authority';
+import React, { useRef, useCallback, useLayoutEffect } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var collapseVariants = "w-full border rounded-md overflow-hidden";
+var collapseHeaderVariants = cva(
+  "w-full flex items-center justify-between cursor-pointer touch-manipulation font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm",
+  {
+    variants: {
+      size: {
+        xs: "px-2 py-1.5 text-xs",
+        sm: "px-3 py-2 text-sm",
+        md: "px-4 py-3 text-base",
+        lg: "px-5 py-4 text-lg"
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: "hover:bg-surface/50"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      disabled: false
+    }
+  }
+);
+var collapseContentVariants = cva("", {
+  variants: {
+    size: {
+      xs: "px-2 pb-2 text-xs",
+      sm: "px-3 pb-3 text-sm",
+      md: "px-4 pb-4 text-base",
+      lg: "px-5 pb-5 text-lg"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var variantStyles = {
+  default: "border-slot bg-background text-text-primary",
+  solid: "border-slot bg-slot text-slot-fg",
+  soft: "border-slot-30 bg-slot-10 text-text-primary"
+};
+var headerVariantStyles = {
+  default: "text-slot hover:bg-slot-10",
+  solid: "hover:bg-slot-90",
+  soft: "text-slot hover:bg-slot-20"
+};
+var Collapse = React.memo(
+  ({
+    title,
+    children,
+    color = "default",
+    size = "md",
+    variant = "default",
+    defaultOpen = false,
+    open: controlledOpen,
+    onChange,
+    disabled = false,
+    className,
+    classNames,
+    ref
+  }) => {
+    const [isOpen, setOpen] = useControllable({ value: controlledOpen, defaultValue: defaultOpen, onChange });
+    const uniqueId = React.useId();
+    const headerId = `collapse-header-${uniqueId}`;
+    const contentId = `collapse-content-${uniqueId}`;
+    const panelRef = useRef(null);
+    const contentRef = useRef(null);
+    const prevOpenRef = useRef(isOpen);
+    const cachedHeightRef = useRef(0);
+    const animRef = useRef(null);
+    const handlePointerEnter = useCallback(() => {
+      if (contentRef.current) {
+        cachedHeightRef.current = contentRef.current.scrollHeight;
+      }
+    }, []);
+    useLayoutEffect(() => {
+      if (panelRef.current) {
+        panelRef.current.style.height = isOpen ? "auto" : "0";
+      }
+    }, []);
+    useLayoutEffect(() => {
+      const panel = panelRef.current;
+      const content = contentRef.current;
+      if (!panel || !content) return;
+      const wasOpen = prevOpenRef.current;
+      prevOpenRef.current = isOpen;
+      if (isOpen === wasOpen) return;
+      if (animRef.current) animRef.current.cancel();
+      const height = cachedHeightRef.current || content.scrollHeight;
+      cachedHeightRef.current = 0;
+      const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+      const duration = prefersReducedMotion ? 0 : 200;
+      const anim = panel.animate(
+        isOpen ? [{ height: "0px" }, { height: `${height}px` }] : [{ height: `${height}px` }, { height: "0px" }],
+        { duration, easing: "ease-out", fill: "forwards" }
+      );
+      anim.onfinish = () => {
+        panel.style.height = isOpen ? "auto" : "0";
+        anim.cancel();
+      };
+      animRef.current = anim;
+    }, [isOpen]);
+    const handleToggle = useCallback(() => {
+      if (disabled) return;
+      setOpen(!isOpen);
+    }, [disabled, isOpen, setOpen]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "collapse_root",
+          collapseVariants,
+          colorVars[color],
+          variantStyles[variant],
+          classNames?.root,
+          className
+        ),
+        "data-slot": "root",
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              id: headerId,
+              type: "button",
+              onClick: handleToggle,
+              onPointerEnter: handlePointerEnter,
+              disabled,
+              "aria-expanded": isOpen,
+              "aria-controls": contentId,
+              className: cn(
+                "collapse_header",
+                collapseHeaderVariants({ size, disabled }),
+                headerVariantStyles[variant],
+                "focus-visible:ring-slot",
+                classNames?.header
+              ),
+              "data-slot": "header",
+              children: [
+                /* @__PURE__ */ jsx("span", { children: title }),
+                /* @__PURE__ */ jsx(
+                  ChevronDown,
+                  {
+                    className: cn(
+                      "collapse_icon",
+                      iconSizes[size],
+                      "transition-transform duration-300 ease-out flex-shrink-0",
+                      isOpen && "rotate-180",
+                      classNames?.icon
+                    ),
+                    "data-slot": "icon"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: panelRef,
+              id: contentId,
+              role: "region",
+              "aria-labelledby": headerId,
+              "aria-hidden": !isOpen,
+              className: "overflow-hidden",
+              style: { contain: "content" },
+              children: /* @__PURE__ */ jsx("div", { ref: contentRef, children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "collapse_content",
+                    collapseContentVariants({ size }),
+                    classNames?.content
+                  ),
+                  "data-slot": "content",
+                  children
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Collapse.displayName = "Collapse";
+var collapse_default = Collapse;
+
+export { collapse_default };
+//# sourceMappingURL=chunk-OJAHIPPP.js.map
+//# sourceMappingURL=chunk-OJAHIPPP.js.map

package/dist/chunk-OJAHIPPP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/collapse/index.tsx"],"names":[],"mappings":";;;;;;;;AAaA,IAAM,gBAAA,GAAmB,0CAAA;AAEzB,IAAM,sBAAA,GAAyB,GAAA;AAAA,EAC7B,4MAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,qBAAA;AAAA,QACJ,EAAA,EAAI,mBAAA;AAAA,QACJ,EAAA,EAAI,qBAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,QAAA,EAAU;AAAA,QACR,IAAA,EAAM,+BAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,IAAA;AAAA,MACN,QAAA,EAAU;AAAA;AACZ;AAEJ,CAAA;AAEA,IAAM,uBAAA,GAA0B,IAAI,EAAA,EAAI;AAAA,EACtC,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,mBAAA;AAAA,MACJ,EAAA,EAAI,mBAAA;AAAA,MACJ,EAAA,EAAI,qBAAA;AAAA,MACJ,EAAA,EAAI;AAAA;AACN,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAGD,IAAM,aAAA,GAAgB;AAAA,EACpB,OAAA,EAAS,6CAAA;AAAA,EACT,KAAA,EAAO,kCAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAEA,IAAM,mBAAA,GAAsB;AAAA,EAC1B,OAAA,EAAS,4BAAA;AAAA,EACT,KAAA,EAAO,kBAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAEA,IAAM,WAAW,KAAA,CAAM,IAAA;AAAA,EACrB,CAAC;AAAA,IACC,KAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA,GAAQ,SAAA;AAAA,IACR,IAAA,GAAO,IAAA;AAAA,IACP,OAAA,GAAU,SAAA;AAAA,IACV,WAAA,GAAc,KAAA;AAAA,IACd,IAAA,EAAM,cAAA;AAAA,IACN,QAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,SAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,KAAM;AACJ,IAAA,MAAM,CAAC,MAAA,EAAQ,OAAO,CAAA,GAAI,eAAA,CAAgB,EAAE,KAAA,EAAO,cAAA,EAAgB,YAAA,EAAc,WAAA,EAAa,QAAA,EAAU,CAAA;AACxG,IAAA,MAAM,QAAA,GAAW,MAAM,KAAA,EAAM;AAC7B,IAAA,MAAM,QAAA,GAAW,mBAAmB,QAAQ,CAAA,CAAA;AAC5C,IAAA,MAAM,SAAA,GAAY,oBAAoB,QAAQ,CAAA,CAAA;AAC9C,IAAA,MAAM,QAAA,GAAW,OAAuB,IAAI,CAAA;AAC5C,IAAA,MAAM,UAAA,GAAa,OAAuB,IAAI,CAAA;AAC9C,IAAA,MAAM,WAAA,GAAc,OAAO,MAAM,CAAA;AACjC,IAAA,MAAM,eAAA,GAAkB,OAAe,CAAC,CAAA;AACxC,IAAA,MAAM,OAAA,GAAU,OAAyB,IAAI,CAAA;AAE7C,IAAA,MAAM,kBAAA,GAAqB,YAAY,MAAM;AAC3C,MAAA,IAAI,WAAW,OAAA,EAAS;AACtB,QAAA,eAAA,CAAgB,OAAA,GAAU,WAAW,OAAA,CAAQ,YAAA;AAAA,MAC/C;AAAA,IACF,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,eAAA,CAAgB,MAAM;AACpB,MAAA,IAAI,SAAS,OAAA,EAAS;AACpB,QAAA,QAAA,CAAS,OAAA,CAAQ,KAAA,CAAM,MAAA,GAAS,MAAA,GAAS,MAAA,GAAS,GAAA;AAAA,MACpD;AAAA,IAEF,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,eAAA,CAAgB,MAAM;AACpB,MAAA,MAAM,QAAQ,QAAA,CAAS,OAAA;AACvB,MAAA,MAAM,UAAU,UAAA,CAAW,OAAA;AAC3B,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,OAAA,EAAS;AAExB,MAAA,MAAM,UAAU,WAAA,CAAY,OAAA;AAC5B,MAAA,WAAA,CAAY,OAAA,GAAU,MAAA;AACtB,MAAA,IAAI,WAAW,OAAA,EAAS;AAExB,MAAA,IAAI,OAAA,CAAQ,OAAA,EAAS,OAAA,CAAQ,OAAA,CAAQ,MAAA,EAAO;AAE5C,MAAA,MAAM,MAAA,GAAS,eAAA,CAAgB,OAAA,IAAW,OAAA,CAAQ,YAAA;AAClD,MAAA,eAAA,CAAgB,OAAA,GAAU,CAAA;AAG1B,MAAA,MAAM,uBAAuB,OAAO,MAAA,KAAW,eAAe,MAAA,CAAO,UAAA,GAAa,kCAAkC,CAAA,CAAE,OAAA;AACtH,MAAA,MAAM,QAAA,GAAW,uBAAuB,CAAA,GAAI,GAAA;AAE5C,MAAA,MAAM,OAAO,KAAA,CAAM,OAAA;AAAA,QACjB,MAAA,GACI,CAAC,EAAE,MAAA,EAAQ,OAAM,EAAG,EAAE,MAAA,EAAQ,CAAA,EAAG,MAAM,CAAA,EAAA,CAAA,EAAM,CAAA,GAC7C,CAAC,EAAE,MAAA,EAAQ,CAAA,EAAG,MAAM,MAAK,EAAG,EAAE,MAAA,EAAQ,KAAA,EAAO,CAAA;AAAA,QACjD,EAAE,QAAA,EAAU,MAAA,EAAQ,UAAA,EAAY,MAAM,UAAA;AAAW,OACnD;AAEA,MAAA,IAAA,CAAK,WAAW,MAAM;AACpB,QAAA,KAAA,CAAM,KAAA,CAAM,MAAA,GAAS,MAAA,GAAS,MAAA,GAAS,GAAA;AACvC,QAAA,IAAA,CAAK,MAAA,EAAO;AAAA,MACd,CAAA;AAEA,MAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAAA,IACpB,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,IAAA,MAAM,YAAA,GAAe,YAAY,MAAM;AACrC,MAAA,IAAI,QAAA,EAAU;AACd,MAAA,OAAA,CAAQ,CAAC,MAAM,CAAA;AAAA,IACjB,CAAA,EAAG,CAAC,QAAA,EAAU,MAAA,EAAQ,OAAO,CAAC,CAAA;AAE9B,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,eAAA;AAAA,UACA,gBAAA;AAAA,UACA,UAAU,KAAK,CAAA;AAAA,UACf,cAAc,OAAO,CAAA;AAAA,UACrB,UAAA,EAAY,IAAA;AAAA,UACZ;AAAA,SACF;AAAA,QACA,WAAA,EAAU,MAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,EAAA,EAAI,QAAA;AAAA,cACJ,IAAA,EAAK,QAAA;AAAA,cACL,OAAA,EAAS,YAAA;AAAA,cACT,cAAA,EAAgB,kBAAA;AAAA,cAChB,QAAA;AAAA,cACA,eAAA,EAAe,MAAA;AAAA,cACf,eAAA,EAAe,SAAA;AAAA,cACf,SAAA,EAAW,EAAA;AAAA,gBACT,iBAAA;AAAA,gBACA,sBAAA,CAAuB,EAAE,IAAA,EAAM,QAAA,EAAU,CAAA;AAAA,gBACzC,oBAAoB,OAAO,CAAA;AAAA,gBAC3B,yBAAA;AAAA,gBACA,UAAA,EAAY;AAAA,eACd;AAAA,cACA,WAAA,EAAU,QAAA;AAAA,cAEV,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,UAAM,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,gCACb,GAAA;AAAA,kBAAC,WAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,EAAA;AAAA,sBACT,eAAA;AAAA,sBACA,UAAU,IAAI,CAAA;AAAA,sBACd,0DAAA;AAAA,sBACA,MAAA,IAAU,YAAA;AAAA,sBACV,UAAA,EAAY;AAAA,qBACd;AAAA,oBACA,WAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,QAAA;AAAA,cACL,EAAA,EAAI,SAAA;AAAA,cACJ,IAAA,EAAK,QAAA;AAAA,cACL,iBAAA,EAAiB,QAAA;AAAA,cACjB,eAAa,CAAC,MAAA;AAAA,cACd,SAAA,EAAU,iBAAA;AAAA,cACV,KAAA,EAAO,EAAE,OAAA,EAAS,SAAA,EAAU;AAAA,cAE5B,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,UAAA,EACR,QAAA,kBAAA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,EAAA;AAAA,oBACT,kBAAA;AAAA,oBACA,uBAAA,CAAwB,EAAE,IAAA,EAAM,CAAA;AAAA,oBAChC,UAAA,EAAY;AAAA,mBACd;AAAA,kBACA,WAAA,EAAU,SAAA;AAAA,kBAET;AAAA;AAAA,eACH,EACF;AAAA;AAAA;AACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF,CAAA;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;AAGvB,IAAO,gBAAA,GAAQ","file":"chunk-OJAHIPPP.js","sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport React, { useCallback, useLayoutEffect, useRef } from 'react'\n\nimport { useControllable } from '../hooks/useControllable'\n\nimport { ChevronDown } from 'lucide-react'\n\nimport { cn, iconSizes } from '../utils'\nimport { colorVars } from '../variants'\nimport type { CollapseProps } from './types'\n\nconst collapseVariants = 'w-full border rounded-md overflow-hidden'\n\nconst collapseHeaderVariants = cva(\n  'w-full flex items-center justify-between cursor-pointer touch-manipulation font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm',\n  {\n    variants: {\n      size: {\n        xs: 'px-2 py-1.5 text-xs',\n        sm: 'px-3 py-2 text-sm',\n        md: 'px-4 py-3 text-base',\n        lg: 'px-5 py-4 text-lg',\n      },\n      disabled: {\n        true: 'opacity-50 cursor-not-allowed',\n        false: 'hover:bg-surface/50',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      disabled: false,\n    },\n  },\n)\n\nconst collapseContentVariants = cva('', {\n  variants: {\n    size: {\n      xs: 'px-2 pb-2 text-xs',\n      sm: 'px-3 pb-3 text-sm',\n      md: 'px-4 pb-4 text-base',\n      lg: 'px-5 pb-5 text-lg',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n// Variant × color: slot-based — colorVars[color] sets --_c on root\nconst variantStyles = {\n  default: 'border-slot bg-background text-text-primary',\n  solid: 'border-slot bg-slot text-slot-fg',\n  soft: 'border-slot-30 bg-slot-10 text-text-primary',\n}\n\nconst headerVariantStyles = {\n  default: 'text-slot hover:bg-slot-10',\n  solid: 'hover:bg-slot-90',\n  soft: 'text-slot hover:bg-slot-20',\n}\n\nconst Collapse = React.memo<CollapseProps>(\n  ({\n    title,\n    children,\n    color = 'default',\n    size = 'md',\n    variant = 'default',\n    defaultOpen = false,\n    open: controlledOpen,\n    onChange,\n    disabled = false,\n    className,\n    classNames,\n    ref,\n  }) => {\n    const [isOpen, setOpen] = useControllable({ value: controlledOpen, defaultValue: defaultOpen, onChange })\n    const uniqueId = React.useId()\n    const headerId = `collapse-header-${uniqueId}`\n    const contentId = `collapse-content-${uniqueId}`\n    const panelRef = useRef<HTMLDivElement>(null)\n    const contentRef = useRef<HTMLDivElement>(null)\n    const prevOpenRef = useRef(isOpen)\n    const cachedHeightRef = useRef<number>(0)\n    const animRef = useRef<Animation | null>(null)\n\n    const handlePointerEnter = useCallback(() => {\n      if (contentRef.current) {\n        cachedHeightRef.current = contentRef.current.scrollHeight\n      }\n    }, [])\n\n    useLayoutEffect(() => {\n      if (panelRef.current) {\n        panelRef.current.style.height = isOpen ? 'auto' : '0'\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [])\n\n    useLayoutEffect(() => {\n      const panel = panelRef.current\n      const content = contentRef.current\n      if (!panel || !content) return\n\n      const wasOpen = prevOpenRef.current\n      prevOpenRef.current = isOpen\n      if (isOpen === wasOpen) return\n\n      if (animRef.current) animRef.current.cancel()\n\n      const height = cachedHeightRef.current || content.scrollHeight\n      cachedHeightRef.current = 0\n\n      // Check for prefers-reduced-motion\n      const prefersReducedMotion = typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches\n      const duration = prefersReducedMotion ? 0 : 200\n\n      const anim = panel.animate(\n        isOpen\n          ? [{ height: '0px' }, { height: `${height}px` }]\n          : [{ height: `${height}px` }, { height: '0px' }],\n        { duration, easing: 'ease-out', fill: 'forwards' },\n      )\n\n      anim.onfinish = () => {\n        panel.style.height = isOpen ? 'auto' : '0'\n        anim.cancel()\n      }\n\n      animRef.current = anim\n    }, [isOpen])\n\n    const handleToggle = useCallback(() => {\n      if (disabled) return\n      setOpen(!isOpen)\n    }, [disabled, isOpen, setOpen])\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'collapse_root',\n          collapseVariants,\n          colorVars[color],\n          variantStyles[variant],\n          classNames?.root,\n          className,\n        )}\n        data-slot=\"root\"\n      >\n        <button\n          id={headerId}\n          type=\"button\"\n          onClick={handleToggle}\n          onPointerEnter={handlePointerEnter}\n          disabled={disabled}\n          aria-expanded={isOpen}\n          aria-controls={contentId}\n          className={cn(\n            'collapse_header',\n            collapseHeaderVariants({ size, disabled }),\n            headerVariantStyles[variant],\n            'focus-visible:ring-slot',\n            classNames?.header,\n          )}\n          data-slot=\"header\"\n        >\n          <span>{title}</span>\n          <ChevronDown\n            className={cn(\n              'collapse_icon',\n              iconSizes[size],\n              'transition-transform duration-300 ease-out flex-shrink-0',\n              isOpen && 'rotate-180',\n              classNames?.icon,\n            )}\n            data-slot=\"icon\"\n          />\n        </button>\n        <div\n          ref={panelRef}\n          id={contentId}\n          role=\"region\"\n          aria-labelledby={headerId}\n          aria-hidden={!isOpen}\n          className=\"overflow-hidden\"\n          style={{ contain: 'content' }}\n        >\n          <div ref={contentRef}>\n            <div\n              className={cn(\n                'collapse_content',\n                collapseContentVariants({ size }),\n                classNames?.content,\n              )}\n              data-slot=\"content\"\n            >\n              {children}\n            </div>\n          </div>\n        </div>\n      </div>\n    )\n  },\n)\n\nCollapse.displayName = 'Collapse'\n\nexport type * from './types'\nexport default Collapse\n"]}

package/dist/{chunk-2PNLIQYM.js → chunk-ON76IMMI.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-NGYLRX6F.js';
+import { cn } from './chunk-RAS6HUEI.js';
 import React, { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -72,5 +72,5 @@ CheckboxGroup.displayName = "CheckboxGroup";
 var checkbox_group_default = CheckboxGroup;
 
 export { checkbox_group_default };
-//# sourceMappingURL=chunk-2PNLIQYM.js.map
-//# sourceMappingURL=chunk-2PNLIQYM.js.map
+//# sourceMappingURL=chunk-ON76IMMI.js.map
+//# sourceMappingURL=chunk-ON76IMMI.js.map

package/dist/chunk-ON76IMMI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/checkbox-group/index.tsx"],"names":[],"mappings":";;;;AAOA,IAAM,gBAAgB,KAAA,CAAM,IAAA;AAAA,EAC1B,CAAC;AAAA,IACC,KAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA,GAAc,UAAA;AAAA,IACd,SAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,GACL,KAAM;AACJ,IAAA,MAAM,WAAW,KAAA,EAAM;AACvB,IAAA,MAAM,OAAA,GAAU,KAAA,GAAQ,CAAA,oBAAA,EAAuB,QAAQ,CAAA,CAAA,GAAK,MAAA;AAC5D,IAAA,MAAM,SAAA,GAAa,UAAA,IAAc,KAAA,GAAS,CAAA,sBAAA,EAAyB,QAAQ,CAAA,CAAA,GAAK,MAAA;AAEhF,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACL,iBAAA,EAAiB,OAAA;AAAA,QACjB,kBAAA,EAAkB,SAAA;AAAA,QAClB,WAAW,EAAA,CAAG,oBAAA,EAAsB,QAAA,EAAU,SAAA,EAAW,YAAY,IAAI,CAAA;AAAA,QACzE,WAAA,EAAU,MAAA;AAAA,QACT,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,KAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EAAO,aAAU,OAAA,EAC9B,QAAA,kBAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,EAAA,EAAI,OAAA;AAAA,cACJ,SAAA,EAAW,EAAA,CAAG,qBAAA,EAAuB,yCAAA,EAA2C,YAAY,KAAK,CAAA;AAAA,cAEhG,QAAA,EAAA;AAAA;AAAA,WACH,EACF,CAAA;AAAA,0BAEF,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,qBAAA;AAAA,gBACA,MAAA;AAAA,gBACA,WAAA,KAAgB,aACZ,gBAAA,GACA,0BAAA;AAAA,gBACJ,UAAA,EAAY;AAAA,eACd;AAAA,cACA,WAAA,EAAU,OAAA;AAAA,cAET;AAAA;AAAA,WACH;AAAA,UAAA,CACE,cAAc,KAAA,qBACd,GAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,EAAA,EAAI,SAAA;AAAA,cACJ,SAAA,EAAW,EAAA;AAAA,gBACT,QAAQ,qBAAA,GAAwB,sBAAA;AAAA,gBAChC,cAAA;AAAA,gBACA,QAAQ,YAAA,GAAe,qBAAA;AAAA,gBACvB,KAAA,GAAQ,UAAA,EAAY,KAAA,GAAQ,UAAA,EAAY;AAAA,eAC1C;AAAA,cACA,WAAA,EAAW,QAAQ,OAAA,GAAU,QAAA;AAAA,cAE5B,QAAA,EAAA,KAAA,IAAS;AAAA;AAAA;AACZ;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF,CAAA;AAEA,aAAA,CAAc,WAAA,GAAc,eAAA;AAG5B,IAAO,sBAAA,GAAQ","file":"chunk-ON76IMMI.js","sourcesContent":["'use client'\n\nimport React, { useId } from 'react'\n\nimport { cn } from '../utils'\nimport type { CheckboxGroupProps } from './types'\n\nconst CheckboxGroup = React.memo<CheckboxGroupProps>(\n  ({\n    label,\n    helperText,\n    error,\n    orientation = 'vertical',\n    className,\n    classNames,\n    children,\n    ref,\n    ...props\n  }) => {\n    const uniqueId = useId()\n    const labelId = label ? `checkboxgroup-label-${uniqueId}` : undefined\n    const messageId = (helperText || error) ? `checkboxgroup-message-${uniqueId}` : undefined\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-labelledby={labelId}\n        aria-describedby={messageId}\n        className={cn('checkboxGroup_root', 'w-full', className, classNames?.root)}\n        data-slot=\"root\"\n        {...props}\n      >\n        {label && (\n          <div className=\"mb-2\" data-slot=\"label\">\n            <span\n              id={labelId}\n              className={cn('checkboxGroup_label', 'text-sm font-medium text-text-secondary', classNames?.label)}\n            >\n              {label}\n            </span>\n          </div>\n        )}\n        <div\n          className={cn(\n            'checkboxGroup_group',\n            'flex',\n            orientation === 'vertical'\n              ? 'flex-col gap-2'\n              : 'flex-row flex-wrap gap-4',\n            classNames?.group,\n          )}\n          data-slot=\"group\"\n        >\n          {children}\n        </div>\n        {(helperText || error) && (\n          <p\n            id={messageId}\n            className={cn(\n              error ? 'checkboxGroup_error' : 'checkboxGroup_helper',\n              'mt-2 text-xs',\n              error ? 'text-error' : 'text-text-secondary',\n              error ? classNames?.error : classNames?.helper,\n            )}\n            data-slot={error ? 'error' : 'helper'}\n          >\n            {error || helperText}\n          </p>\n        )}\n      </div>\n    )\n  },\n)\n\nCheckboxGroup.displayName = 'CheckboxGroup'\n\nexport type * from './types'\nexport default CheckboxGroup\n"]}