@mieweb/ui 0.7.3 → 0.8.0-dev.0

package/dist/{chunk-AFGADE3B.js → chunk-H3YO5GBM.js}

@@ -1,7 +1,8 @@
+import { RequiredMark } from './chunk-3IMM2PM4.js';
 import { cn } from './chunk-TQONQSJO.js';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var textareaVariants = cva(
   [
@@ -30,12 +31,71 @@ var textareaVariants = cva(
         vertical: "resize-y",
         horizontal: "resize-x",
         both: "resize"
+      },
+      labelVariant: {
+        stacked: "",
+        floating: "peer placeholder:text-transparent"
       }
     },
+    compoundVariants: [
+      // Floating labels reserve top padding so entered text always starts
+      // below the floated label, plus a little extra min-height.
+      {
+        labelVariant: "floating",
+        size: "sm",
+        className: "pt-5 min-h-[76px]"
+      },
+      {
+        labelVariant: "floating",
+        size: "md",
+        className: "pt-6 min-h-[96px]"
+      },
+      {
+        labelVariant: "floating",
+        size: "lg",
+        className: "pt-7 min-h-[120px]"
+      }
+    ],
     defaultVariants: {
       size: "md",
       hasError: false,
-      resize: "vertical"
+      resize: "vertical",
+      labelVariant: "stacked"
+    }
+  }
+);
+var floatingLabelVariants = cva(
+  [
+    "absolute start-3 pointer-events-none select-none",
+    "transition-all duration-200 ease-out"
+  ],
+  {
+    variants: {
+      size: {
+        sm: [
+          "text-sm top-3",
+          "peer-focus:top-1 peer-[:not(:placeholder-shown)]:top-1 peer-autofill:top-1",
+          "peer-focus:text-[0.65rem] peer-[:not(:placeholder-shown)]:text-[0.65rem] peer-autofill:text-[0.65rem]"
+        ],
+        md: [
+          "text-base top-4",
+          "peer-focus:top-1.5 peer-[:not(:placeholder-shown)]:top-1.5 peer-autofill:top-1.5",
+          "peer-focus:text-xs peer-[:not(:placeholder-shown)]:text-xs peer-autofill:text-xs"
+        ],
+        lg: [
+          "text-lg top-5",
+          "peer-focus:top-2 peer-[:not(:placeholder-shown)]:top-2 peer-autofill:top-2",
+          "peer-focus:text-sm peer-[:not(:placeholder-shown)]:text-sm peer-autofill:text-sm"
+        ]
+      },
+      hasError: {
+        true: "text-destructive",
+        false: "text-muted-foreground"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      hasError: false
     }
   }
 );
@@ -46,16 +106,20 @@ var Textarea = React.forwardRef(
     hasError,
     resize,
     label,
+    labelVariant = "stacked",
     hideLabel,
     error,
     helperText,
     maxLength,
     showCount = false,
     autoResize = false,
+    required = false,
+    requiredVariant,
     id,
     value,
     defaultValue,
     onChange,
+    placeholder,
     "aria-describedby": ariaDescribedBy,
     ...props
   }, ref) => {
@@ -97,8 +161,36 @@ var Textarea = React.forwardRef(
       showCount ? countId : null,
       ariaDescribedBy
     ].filter(Boolean).join(" ");
+    const isFloating = labelVariant === "floating" && !!label && !hideLabel;
+    const requiredMark = required && /* @__PURE__ */ jsx(RequiredMark, { variant: requiredVariant });
+    const textareaElement = /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        "data-slot": "textarea",
+        ref: internalRef,
+        id: textareaId,
+        value,
+        defaultValue: value === void 0 ? defaultValue : void 0,
+        onChange: handleChange,
+        maxLength,
+        "aria-invalid": hasError || !!error,
+        "aria-describedby": describedByIds || void 0,
+        required,
+        placeholder: isFloating ? " " : placeholder,
+        className: cn(
+          textareaVariants({
+            size,
+            hasError: hasError || !!error,
+            resize: autoResize ? "none" : resize,
+            labelVariant: isFloating ? "floating" : "stacked"
+          }),
+          className
+        ),
+        ...props
+      }
+    );
     return /* @__PURE__ */ jsxs("div", { "data-slot": "textarea-wrapper", className: "flex flex-col gap-1.5", children: [
-      label && /* @__PURE__ */ jsx(
+      label && !isFloating && /* @__PURE__ */ jsxs(
         "label",
         {
           "data-slot": "textarea-label",
@@ -107,32 +199,30 @@ var Textarea = React.forwardRef(
             "text-foreground text-sm font-medium",
             hideLabel && "sr-only"
           ),
-          children: label
+          children: [
+            label,
+            requiredMark
+          ]
         }
       ),
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          "data-slot": "textarea",
-          ref: internalRef,
-          id: textareaId,
-          value,
-          defaultValue: value === void 0 ? defaultValue : void 0,
-          onChange: handleChange,
-          maxLength,
-          "aria-invalid": hasError || !!error,
-          "aria-describedby": describedByIds || void 0,
-          className: cn(
-            textareaVariants({
+      isFloating ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        textareaElement,
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            "data-slot": "textarea-label",
+            htmlFor: textareaId,
+            className: floatingLabelVariants({
               size,
-              hasError: hasError || !!error,
-              resize: autoResize ? "none" : resize
+              hasError: hasError || !!error
             }),
-            className
-          ),
-          ...props
-        }
-      ),
+            children: [
+              label,
+              requiredMark
+            ]
+          }
+        )
+      ] }) : textareaElement,
       /* @__PURE__ */ jsxs(
         "div",
         {
@@ -184,5 +274,5 @@ var Textarea = React.forwardRef(
 Textarea.displayName = "Textarea";
 
 export { Textarea, textareaVariants };
-//# sourceMappingURL=chunk-AFGADE3B.js.map
-//# sourceMappingURL=chunk-AFGADE3B.js.map
+//# sourceMappingURL=chunk-H3YO5GBM.js.map
+//# sourceMappingURL=chunk-H3YO5GBM.js.map

package/dist/chunk-H3YO5GBM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"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","file":"chunk-H3YO5GBM.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { RequiredMark, type RequiredMarkVariant } from '../Input';\n\nconst textareaVariants = cva(\n  [\n    'w-full px-3 py-2',\n    'border border-input rounded-lg',\n    'bg-background text-foreground',\n    'placeholder:text-muted-foreground',\n    'transition-colors duration-200',\n    'focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent',\n    'disabled:cursor-not-allowed disabled:opacity-50',\n    'resize-y',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'text-sm min-h-[60px]',\n        md: 'text-base min-h-[80px]',\n        lg: 'text-lg min-h-[100px]',\n      },\n      hasError: {\n        true: 'border-destructive focus:ring-destructive',\n        false: '',\n      },\n      resize: {\n        none: 'resize-none',\n        vertical: 'resize-y',\n        horizontal: 'resize-x',\n        both: 'resize',\n      },\n      labelVariant: {\n        stacked: '',\n        floating: 'peer placeholder:text-transparent',\n      },\n    },\n    compoundVariants: [\n      // Floating labels reserve top padding so entered text always starts\n      // below the floated label, plus a little extra min-height.\n      {\n        labelVariant: 'floating',\n        size: 'sm',\n        className: 'pt-5 min-h-[76px]',\n      },\n      {\n        labelVariant: 'floating',\n        size: 'md',\n        className: 'pt-6 min-h-[96px]',\n      },\n      {\n        labelVariant: 'floating',\n        size: 'lg',\n        className: 'pt-7 min-h-[120px]',\n      },\n    ],\n    defaultVariants: {\n      size: 'md',\n      hasError: false,\n      resize: 'vertical',\n      labelVariant: 'stacked',\n    },\n  }\n);\n\nconst floatingLabelVariants = cva(\n  [\n    'absolute start-3 pointer-events-none select-none',\n    'transition-all duration-200 ease-out',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          'text-sm top-3',\n          'peer-focus:top-1 peer-[:not(:placeholder-shown)]:top-1 peer-autofill:top-1',\n          'peer-focus:text-[0.65rem] peer-[:not(:placeholder-shown)]:text-[0.65rem] peer-autofill:text-[0.65rem]',\n        ],\n        md: [\n          'text-base top-4',\n          'peer-focus:top-1.5 peer-[:not(:placeholder-shown)]:top-1.5 peer-autofill:top-1.5',\n          'peer-focus:text-xs peer-[:not(:placeholder-shown)]:text-xs peer-autofill:text-xs',\n        ],\n        lg: [\n          'text-lg top-5',\n          'peer-focus:top-2 peer-[:not(:placeholder-shown)]:top-2 peer-autofill:top-2',\n          'peer-focus:text-sm peer-[:not(:placeholder-shown)]:text-sm peer-autofill:text-sm',\n        ],\n      },\n      hasError: {\n        true: 'text-destructive',\n        false: 'text-muted-foreground',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      hasError: false,\n    },\n  }\n);\n\nexport interface TextareaProps\n  extends\n    Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>,\n    Omit<VariantProps<typeof textareaVariants>, 'labelVariant'> {\n  /** Label for the textarea */\n  label?: string;\n  /**\n   * How the label is rendered.\n   * - `stacked` (default): label above the textarea.\n   * - `floating`: label rests inside the textarea like a placeholder and\n   *   floats to the top (staying inside it) when focused or filled.\n   *   Ignores `placeholder`; when `hideLabel` is set, falls back to a\n   *   visually-hidden stacked label.\n   */\n  labelVariant?: 'stacked' | 'floating';\n  /** Whether the label should be visually hidden */\n  hideLabel?: boolean;\n  /** Error message to display */\n  error?: string;\n  /** Helper text to display */\n  helperText?: string;\n  /** Maximum character count */\n  maxLength?: number;\n  /** Show character count */\n  showCount?: boolean;\n  /** Auto-resize based on content */\n  autoResize?: boolean;\n  /**\n   * Color of the required asterisk.\n   * - `default`: destructive (hard requirement).\n   * - `warning`: warning color (soft requirement / recommended).\n   */\n  requiredVariant?: RequiredMarkVariant;\n}\n\n/**\n * A multi-line text input component with character count and auto-resize.\n *\n * @example\n * ```tsx\n * <Textarea label=\"Description\" placeholder=\"Enter a description...\" />\n * <Textarea\n *   label=\"Bio\"\n *   maxLength={280}\n *   showCount\n *   helperText=\"Tell us about yourself\"\n * />\n * ```\n */\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (\n    {\n      className,\n      size,\n      hasError,\n      resize,\n      label,\n      labelVariant = 'stacked',\n      hideLabel,\n      error,\n      helperText,\n      maxLength,\n      showCount = false,\n      autoResize = false,\n      required = false,\n      requiredVariant,\n      id,\n      value,\n      defaultValue,\n      onChange,\n      placeholder,\n      'aria-describedby': ariaDescribedBy,\n      ...props\n    },\n    ref\n  ) => {\n    const internalRef = React.useRef<HTMLTextAreaElement>(null);\n    const [internalValue, setInternalValue] = React.useState(\n      (defaultValue as string) || ''\n    );\n\n    const generatedId = React.useId();\n    const textareaId = id || generatedId;\n    const errorId = `${textareaId}-error`;\n    const helperId = `${textareaId}-helper`;\n    const countId = `${textareaId}-count`;\n\n    // Combine refs\n    React.useImperativeHandle(ref, () => internalRef.current!);\n\n    // Get current value\n    const currentValue = value !== undefined ? String(value) : internalValue;\n    const characterCount = currentValue.length;\n\n    // Auto-resize logic\n    const adjustHeight = React.useCallback(() => {\n      const textarea = internalRef.current;\n      if (textarea && autoResize) {\n        textarea.style.height = 'auto';\n        textarea.style.height = `${textarea.scrollHeight}px`;\n      }\n    }, [autoResize]);\n\n    React.useEffect(() => {\n      adjustHeight();\n    }, [currentValue, adjustHeight]);\n\n    // Handle change\n    const handleChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n        if (value === undefined) {\n          setInternalValue(e.target.value);\n        }\n        onChange?.(e);\n        adjustHeight();\n      },\n      [value, onChange, adjustHeight]\n    );\n\n    // Build aria-describedby\n    const describedByIds = [\n      error ? errorId : null,\n      helperText && !error ? helperId : null,\n      showCount ? countId : null,\n      ariaDescribedBy,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const isFloating = labelVariant === 'floating' && !!label && !hideLabel;\n\n    const requiredMark = required && <RequiredMark variant={requiredVariant} />;\n\n    const textareaElement = (\n      <textarea\n        data-slot=\"textarea\"\n        ref={internalRef}\n        id={textareaId}\n        value={value}\n        defaultValue={value === undefined ? defaultValue : undefined}\n        onChange={handleChange}\n        maxLength={maxLength}\n        aria-invalid={hasError || !!error}\n        aria-describedby={describedByIds || undefined}\n        required={required}\n        // A single-space placeholder keeps :placeholder-shown reliable so the\n        // label can float via CSS alone.\n        placeholder={isFloating ? ' ' : placeholder}\n        className={cn(\n          textareaVariants({\n            size,\n            hasError: hasError || !!error,\n            resize: autoResize ? 'none' : resize,\n            labelVariant: isFloating ? 'floating' : 'stacked',\n          }),\n          className\n        )}\n        {...props}\n      />\n    );\n\n    return (\n      <div data-slot=\"textarea-wrapper\" className=\"flex flex-col gap-1.5\">\n        {label && !isFloating && (\n          <label\n            data-slot=\"textarea-label\"\n            htmlFor={textareaId}\n            className={cn(\n              'text-foreground text-sm font-medium',\n              hideLabel && 'sr-only'\n            )}\n          >\n            {label}\n            {requiredMark}\n          </label>\n        )}\n        {isFloating ? (\n          <div className=\"relative\">\n            {textareaElement}\n            <label\n              data-slot=\"textarea-label\"\n              htmlFor={textareaId}\n              className={floatingLabelVariants({\n                size,\n                hasError: hasError || !!error,\n              })}\n            >\n              {label}\n              {requiredMark}\n            </label>\n          </div>\n        ) : (\n          textareaElement\n        )}\n        <div\n          data-slot=\"textarea-footer\"\n          className=\"flex items-center justify-between gap-2\"\n        >\n          <div className=\"flex-1\">\n            {error && (\n              <p\n                id={errorId}\n                data-slot=\"textarea-error\"\n                className=\"text-destructive-700 dark:text-destructive-400 text-sm\"\n                role=\"alert\"\n              >\n                {error}\n              </p>\n            )}\n            {helperText && !error && (\n              <p\n                id={helperId}\n                data-slot=\"textarea-helper\"\n                className=\"text-muted-foreground text-sm\"\n              >\n                {helperText}\n              </p>\n            )}\n          </div>\n          {showCount && (\n            <p\n              id={countId}\n              data-slot=\"textarea-count\"\n              className={cn(\n                'text-muted-foreground shrink-0 text-xs',\n                maxLength && characterCount >= maxLength && 'text-destructive'\n              )}\n            >\n              {characterCount}\n              {maxLength && `/${maxLength}`}\n            </p>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nTextarea.displayName = 'Textarea';\n\nexport { Textarea, textareaVariants };\n"]}

package/dist/chunk-HK3AMH3Q.cjs

@@ -0,0 +1,151 @@
+'use strict';
+
+var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
+var React = require('react');
+var lucideReact = require('lucide-react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var accordionVariants = classVarianceAuthority.cva("", {
+  variants: {
+    variant: {
+      // Each item is its own card with spacing between
+      separated: "flex flex-col gap-3",
+      // One bordered list with dividers
+      joined: "border-border divide-border divide-y rounded-lg border"
+    }
+  },
+  defaultVariants: {
+    variant: "separated"
+  }
+});
+var itemVariants = classVarianceAuthority.cva("overflow-hidden", {
+  variants: {
+    variant: {
+      separated: "border-border bg-card rounded-lg border",
+      joined: "bg-card first:rounded-t-lg last:rounded-b-lg"
+    }
+  },
+  defaultVariants: {
+    variant: "separated"
+  }
+});
+var Accordion = React__namespace.forwardRef(
+  function Accordion2({
+    items,
+    type = "single",
+    defaultOpenIds,
+    openIds: controlledOpen,
+    onOpenChange,
+    collapsible = true,
+    headingLevel: Heading = "h3",
+    variant,
+    className,
+    ...props
+  }, ref) {
+    const baseId = React__namespace.useId();
+    const [internalOpen, setInternalOpen] = React__namespace.useState(
+      () => defaultOpenIds ?? []
+    );
+    const rawOpen = controlledOpen ?? internalOpen;
+    const open = React__namespace.useMemo(
+      () => type === "single" ? rawOpen.slice(0, 1) : rawOpen,
+      [type, rawOpen]
+    );
+    const openSet = React__namespace.useMemo(() => new Set(open), [open]);
+    const toggle = (id) => {
+      let next;
+      if (openSet.has(id)) {
+        if (type === "single" && !collapsible) return;
+        next = open.filter((o) => o !== id);
+      } else {
+        next = type === "single" ? [id] : [...open, id];
+      }
+      if (controlledOpen === void 0) setInternalOpen(next);
+      onOpenChange?.(next);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: chunkS5RVSXDV_cjs.cn(accordionVariants({ variant }), className),
+        ...props,
+        children: items.map((item) => {
+          const isOpen = openSet.has(item.id);
+          const triggerId = `${baseId}-${item.id}-trigger`;
+          const panelId = `${baseId}-${item.id}-panel`;
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkS5RVSXDV_cjs.cn(itemVariants({ variant })), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Heading, { className: "m-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                id: triggerId,
+                "aria-expanded": isOpen,
+                "aria-controls": panelId,
+                disabled: item.disabled,
+                onClick: () => toggle(item.id),
+                className: chunkS5RVSXDV_cjs.cn(
+                  "hover:bg-muted/60 flex w-full items-center justify-between gap-4 px-5 py-4 text-start transition-colors",
+                  "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset",
+                  "disabled:pointer-events-none disabled:opacity-50"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground min-w-0 text-sm font-semibold", children: item.title }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    lucideReact.ChevronDown,
+                    {
+                      "aria-hidden": "true",
+                      className: chunkS5RVSXDV_cjs.cn(
+                        "text-muted-foreground h-5 w-5 shrink-0 transition-transform duration-200",
+                        isOpen && "rotate-180"
+                      )
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                id: panelId,
+                role: "region",
+                "aria-labelledby": triggerId,
+                "aria-hidden": !isOpen,
+                inert: !isOpen || void 0,
+                className: chunkS5RVSXDV_cjs.cn(
+                  "grid transition-[grid-template-rows] duration-200 ease-out",
+                  isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground px-5 pb-4 text-sm leading-relaxed", children: item.content }) })
+              }
+            )
+          ] }, item.id);
+        })
+      }
+    );
+  }
+);
+
+exports.Accordion = Accordion;
+//# sourceMappingURL=chunk-HK3AMH3Q.cjs.map
+//# sourceMappingURL=chunk-HK3AMH3Q.cjs.map

package/dist/chunk-HK3AMH3Q.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Accordion/Accordion.tsx"],"names":["cva","React","Accordion","jsx","cn","jsxs","ChevronDown"],"mappings":"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","file":"chunk-HK3AMH3Q.cjs","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDown } from 'lucide-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n// =============================================================================\n// Variants\n// =============================================================================\n\nconst accordionVariants = cva('', {\n  variants: {\n    variant: {\n      // Each item is its own card with spacing between\n      separated: 'flex flex-col gap-3',\n      // One bordered list with dividers\n      joined: 'border-border divide-border divide-y rounded-lg border',\n    },\n  },\n  defaultVariants: {\n    variant: 'separated',\n  },\n});\n\nconst itemVariants = cva('overflow-hidden', {\n  variants: {\n    variant: {\n      separated: 'border-border bg-card rounded-lg border',\n      joined: 'bg-card first:rounded-t-lg last:rounded-b-lg',\n    },\n  },\n  defaultVariants: {\n    variant: 'separated',\n  },\n});\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface AccordionItem {\n  /** Stable id used for open state and aria wiring. */\n  id: string;\n  /** Header label (e.g. an FAQ question). */\n  title: React.ReactNode;\n  /** Panel content (e.g. the answer). */\n  content: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface AccordionProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    VariantProps<typeof accordionVariants> {\n  items: AccordionItem[];\n  /** `single` keeps at most one panel open; `multiple` allows any number. */\n  type?: 'single' | 'multiple';\n  /** Ids open initially (uncontrolled). */\n  defaultOpenIds?: string[];\n  /** Controlled open ids. Changes reported via `onOpenChange`. */\n  openIds?: string[];\n  onOpenChange?: (openIds: string[]) => void;\n  /** In `single` mode, allow closing the open panel (default true). */\n  collapsible?: boolean;\n  /** Heading level wrapping each trigger for document outline (default h3). */\n  headingLevel?: 'h2' | 'h3' | 'h4';\n}\n\n// =============================================================================\n// Accordion\n// =============================================================================\n\n/**\n * A vertically stacked set of expandable panels — FAQ lists, settings\n * groups, progressive disclosure. Panels animate open to their natural\n * height (CSS grid rows, no max-height clipping), and headers are real\n * buttons inside headings with full `aria-expanded`/`aria-controls` wiring.\n *\n * @example\n * ```tsx\n * <Accordion\n *   type=\"single\"\n *   items={[\n *     { id: 'pricing', title: 'How is pricing calculated?', content: <p>…</p> },\n *     { id: 'billing', title: 'When am I billed?', content: <p>…</p> },\n *   ]}\n * />\n * ```\n */\nexport const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(\n  function Accordion(\n    {\n      items,\n      type = 'single',\n      defaultOpenIds,\n      openIds: controlledOpen,\n      onOpenChange,\n      collapsible = true,\n      headingLevel: Heading = 'h3',\n      variant,\n      className,\n      ...props\n    },\n    ref\n  ) {\n    const baseId = React.useId();\n    const [internalOpen, setInternalOpen] = React.useState<string[]>(\n      () => defaultOpenIds ?? []\n    );\n    const rawOpen = controlledOpen ?? internalOpen;\n    // Single mode keeps at most one panel open, even if defaultOpenIds or a\n    // controlled openIds array hands us several.\n    const open = React.useMemo(\n      () => (type === 'single' ? rawOpen.slice(0, 1) : rawOpen),\n      [type, rawOpen]\n    );\n    const openSet = React.useMemo(() => new Set(open), [open]);\n\n    const toggle = (id: string) => {\n      let next: string[];\n      if (openSet.has(id)) {\n        if (type === 'single' && !collapsible) return;\n        next = open.filter((o) => o !== id);\n      } else {\n        next = type === 'single' ? [id] : [...open, id];\n      }\n      if (controlledOpen === undefined) setInternalOpen(next);\n      onOpenChange?.(next);\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(accordionVariants({ variant }), className)}\n        {...props}\n      >\n        {items.map((item) => {\n          const isOpen = openSet.has(item.id);\n          const triggerId = `${baseId}-${item.id}-trigger`;\n          const panelId = `${baseId}-${item.id}-panel`;\n          return (\n            <div key={item.id} className={cn(itemVariants({ variant }))}>\n              <Heading className=\"m-0\">\n                <button\n                  type=\"button\"\n                  id={triggerId}\n                  aria-expanded={isOpen}\n                  aria-controls={panelId}\n                  disabled={item.disabled}\n                  onClick={() => toggle(item.id)}\n                  className={cn(\n                    'hover:bg-muted/60 flex w-full items-center justify-between gap-4 px-5 py-4 text-start transition-colors',\n                    'focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset',\n                    'disabled:pointer-events-none disabled:opacity-50'\n                  )}\n                >\n                  <span className=\"text-foreground min-w-0 text-sm font-semibold\">\n                    {item.title}\n                  </span>\n                  <ChevronDown\n                    aria-hidden=\"true\"\n                    className={cn(\n                      'text-muted-foreground h-5 w-5 shrink-0 transition-transform duration-200',\n                      isOpen && 'rotate-180'\n                    )}\n                  />\n                </button>\n              </Heading>\n              {/* grid-rows 0fr→1fr animates to natural height without a max-height clip;\n                  collapsed panels are hidden from AT and unfocusable via aria-hidden + inert */}\n              <div\n                id={panelId}\n                role=\"region\"\n                aria-labelledby={triggerId}\n                aria-hidden={!isOpen}\n                inert={!isOpen || undefined}\n                className={cn(\n                  'grid transition-[grid-template-rows] duration-200 ease-out',\n                  isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'\n                )}\n              >\n                <div className=\"overflow-hidden\">\n                  <div className=\"text-muted-foreground px-5 pb-4 text-sm leading-relaxed\">\n                    {item.content}\n                  </div>\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n);\n"]}

package/dist/chunk-HQ3XPCHG.js

@@ -0,0 +1,114 @@
+import { cn } from './chunk-TQONQSJO.js';
+import * as React from 'react';
+import { DateTime } from 'luxon';
+import { CircleHelp, CircleAlert, CircleMinus, CircleCheck } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_THRESHOLDS = { fresh: 90, aging: 180 };
+function toDateTime(date) {
+  return typeof date === "string" ? DateTime.fromISO(date) : DateTime.fromJSDate(date);
+}
+function daysSince(date) {
+  const dt = toDateTime(date);
+  if (!dt.isValid) return null;
+  const days = Math.floor(DateTime.now().diff(dt, "days").days);
+  return Math.max(0, days);
+}
+function levelForDays(days, thresholds) {
+  if (days === null) return "unknown";
+  if (days < thresholds.fresh) return "fresh";
+  if (days < thresholds.aging) return "aging";
+  return "stale";
+}
+function freshnessLevel(date, thresholds = DEFAULT_THRESHOLDS) {
+  return levelForDays(daysSince(date), thresholds);
+}
+function ageText(days) {
+  if (days === null) return "date unknown";
+  return days === 0 ? "today" : days === 1 ? "yesterday" : `${days}d ago`;
+}
+var META = {
+  fresh: {
+    Icon: CircleCheck,
+    chip: "bg-success/10 text-success-800 dark:bg-success/20 dark:text-success",
+    dot: "bg-success",
+    label: "Fresh"
+  },
+  aging: {
+    Icon: CircleMinus,
+    chip: "bg-warning/15 text-warning-800 dark:bg-warning/20 dark:text-warning",
+    dot: "bg-warning",
+    label: "Aging"
+  },
+  stale: {
+    Icon: CircleAlert,
+    chip: "bg-destructive/10 text-destructive-700 dark:bg-destructive/20 dark:text-destructive",
+    dot: "bg-destructive",
+    label: "Stale"
+  },
+  unknown: {
+    Icon: CircleHelp,
+    chip: "bg-muted text-muted-foreground",
+    dot: "bg-muted-foreground/50",
+    label: "Unknown"
+  }
+};
+var FreshnessBadge = React.forwardRef(function FreshnessBadge2({
+  date,
+  thresholds = DEFAULT_THRESHOLDS,
+  label = "Reviewed",
+  className,
+  ...props
+}, ref) {
+  const days = daysSince(date);
+  const level = levelForDays(days, thresholds);
+  const { Icon, chip } = META[level];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn(
+        "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold",
+        chip,
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "h-3 w-3 shrink-0" }),
+        label,
+        " ",
+        ageText(days)
+      ]
+    }
+  );
+});
+var FreshnessDot = React.forwardRef(function FreshnessDot2({
+  date,
+  thresholds = DEFAULT_THRESHOLDS,
+  label = "Reviewed",
+  className,
+  ...props
+}, ref) {
+  const days = daysSince(date);
+  const level = levelForDays(days, thresholds);
+  const description = `${META[level].label} \u2014 ${label} ${ageText(days)}`;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      role: "img",
+      "aria-label": description,
+      title: description,
+      className: cn(
+        "inline-block h-2 w-2 shrink-0 rounded-full",
+        META[level].dot,
+        className
+      ),
+      ...props
+    }
+  );
+});
+
+export { FreshnessBadge, FreshnessDot, daysSince, freshnessLevel };
+//# sourceMappingURL=chunk-HQ3XPCHG.js.map
+//# sourceMappingURL=chunk-HQ3XPCHG.js.map

package/dist/chunk-HQ3XPCHG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FreshnessBadge/FreshnessBadge.tsx"],"names":["FreshnessBadge","FreshnessDot"],"mappings":"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","file":"chunk-HQ3XPCHG.js","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { DateTime } from 'luxon';\nimport {\n  CircleAlert,\n  CircleCheck,\n  CircleHelp,\n  CircleMinus,\n} from 'lucide-react';\nimport { cn } from '../../utils/cn';\n\n// =============================================================================\n// Types & helpers\n// =============================================================================\n\nexport type FreshnessLevel = 'fresh' | 'aging' | 'stale' | 'unknown';\n\nexport interface FreshnessThresholds {\n  /** Days within which a date counts as fresh (default 90). */\n  fresh: number;\n  /** Days within which a date counts as aging; beyond is stale (default 180). */\n  aging: number;\n}\n\nconst DEFAULT_THRESHOLDS: FreshnessThresholds = { fresh: 90, aging: 180 };\n\nfunction toDateTime(date: string | Date): DateTime {\n  return typeof date === 'string'\n    ? DateTime.fromISO(date)\n    : DateTime.fromJSDate(date);\n}\n\n/**\n * Whole days elapsed since the given date (0 for today/future), or `null`\n * when the date cannot be parsed.\n */\nexport function daysSince(date: string | Date): number | null {\n  const dt = toDateTime(date);\n  if (!dt.isValid) return null;\n  const days = Math.floor(DateTime.now().diff(dt, 'days').days);\n  return Math.max(0, days);\n}\n\nfunction levelForDays(\n  days: number | null,\n  thresholds: FreshnessThresholds\n): FreshnessLevel {\n  if (days === null) return 'unknown';\n  if (days < thresholds.fresh) return 'fresh';\n  if (days < thresholds.aging) return 'aging';\n  return 'stale';\n}\n\n/**\n * Bucket a date into fresh / aging / stale by day thresholds. Unparseable\n * dates return `unknown` rather than masquerading as fresh or stale.\n */\nexport function freshnessLevel(\n  date: string | Date,\n  thresholds: FreshnessThresholds = DEFAULT_THRESHOLDS\n): FreshnessLevel {\n  return levelForDays(daysSince(date), thresholds);\n}\n\nfunction ageText(days: number | null): string {\n  if (days === null) return 'date unknown';\n  return days === 0 ? 'today' : days === 1 ? 'yesterday' : `${days}d ago`;\n}\n\nconst META: Record<\n  FreshnessLevel,\n  { Icon: typeof CircleCheck; chip: string; dot: string; label: string }\n> = {\n  fresh: {\n    Icon: CircleCheck,\n    chip: 'bg-success/10 text-success-800 dark:bg-success/20 dark:text-success',\n    dot: 'bg-success',\n    label: 'Fresh',\n  },\n  aging: {\n    Icon: CircleMinus,\n    chip: 'bg-warning/15 text-warning-800 dark:bg-warning/20 dark:text-warning',\n    dot: 'bg-warning',\n    label: 'Aging',\n  },\n  stale: {\n    Icon: CircleAlert,\n    chip: 'bg-destructive/10 text-destructive-700 dark:bg-destructive/20 dark:text-destructive',\n    dot: 'bg-destructive',\n    label: 'Stale',\n  },\n  unknown: {\n    Icon: CircleHelp,\n    chip: 'bg-muted text-muted-foreground',\n    dot: 'bg-muted-foreground/50',\n    label: 'Unknown',\n  },\n};\n\n// =============================================================================\n// Components\n// =============================================================================\n\nexport interface FreshnessBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** The date being aged — last review, last sync, last update. */\n  date: string | Date;\n  /** Day cutoffs for fresh/aging (default 90/180). */\n  thresholds?: FreshnessThresholds;\n  /** Verb before the age (default \"Reviewed\"). */\n  label?: string;\n}\n\n/**\n * A recency chip that ages from success through warning to destructive:\n * \"Reviewed 12d ago\". Suits source registries, sync statuses, data-quality\n * dashboards — anywhere staleness is a signal.\n *\n * @example\n * ```tsx\n * <FreshnessBadge date=\"2026-07-01\" />\n * <FreshnessBadge date={lastSync} label=\"Synced\" thresholds={{ fresh: 1, aging: 7 }} />\n * ```\n */\nexport const FreshnessBadge = React.forwardRef<\n  HTMLSpanElement,\n  FreshnessBadgeProps\n>(function FreshnessBadge(\n  {\n    date,\n    thresholds = DEFAULT_THRESHOLDS,\n    label = 'Reviewed',\n    className,\n    ...props\n  },\n  ref\n) {\n  const days = daysSince(date);\n  const level = levelForDays(days, thresholds);\n  const { Icon, chip } = META[level];\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold',\n        chip,\n        className\n      )}\n      {...props}\n    >\n      <Icon aria-hidden=\"true\" className=\"h-3 w-3 shrink-0\" />\n      {label} {ageText(days)}\n    </span>\n  );\n});\n\nexport interface FreshnessDotProps extends React.HTMLAttributes<HTMLSpanElement> {\n  date: string | Date;\n  thresholds?: FreshnessThresholds;\n  /** Verb used in the accessible label and tooltip (default \"Reviewed\"). */\n  label?: string;\n}\n\n/** Colored dot for tight spots — table cells, tooltip source rows. */\nexport const FreshnessDot = React.forwardRef<\n  HTMLSpanElement,\n  FreshnessDotProps\n>(function FreshnessDot(\n  {\n    date,\n    thresholds = DEFAULT_THRESHOLDS,\n    label = 'Reviewed',\n    className,\n    ...props\n  },\n  ref\n) {\n  const days = daysSince(date);\n  const level = levelForDays(days, thresholds);\n  const description = `${META[level].label} — ${label} ${ageText(days)}`;\n  return (\n    <span\n      ref={ref}\n      role=\"img\"\n      aria-label={description}\n      title={description}\n      className={cn(\n        'inline-block h-2 w-2 shrink-0 rounded-full',\n        META[level].dot,\n        className\n      )}\n      {...props}\n    />\n  );\n});\n"]}

package/dist/chunk-I44YNYI6.cjs

@@ -0,0 +1,4 @@
+'use strict';
+
+//# sourceMappingURL=chunk-I44YNYI6.cjs.map
+//# sourceMappingURL=chunk-I44YNYI6.cjs.map

package/dist/chunk-I44YNYI6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-I44YNYI6.cjs"}