@ramme-io/ui 4.1.0 → 4.1.1

package/dist/components/forms/FileUpload.js

@@ -1,41 +1,41 @@
 import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { useState as x, useRef as A, useCallback as l } from "react";
+import F, { useState as v, useRef as I, useCallback as i } from "react";
 import { Button as j } from "../ui/Button.js";
-import { Icon as i } from "../ui/Icon.js";
-import { cn as v } from "../../utils/cn.js";
-const S = ({
-  onFileUpload: b,
-  multiple: n = !1,
-  acceptedFileTypes: o,
-  label: c,
-  className: N,
+import { Icon as c } from "../ui/Icon.js";
+import { cn as b } from "../../utils/cn.js";
+const $ = ({
+  onFileUpload: N,
+  multiple: o = !1,
+  acceptedFileTypes: n,
+  label: s,
+  className: y,
   helperText: m
 }) => {
-  const [y, s] = x(!1), [f, u] = x([]), p = A(null), d = l((e) => {
-    e.preventDefault(), e.stopPropagation(), e.type === "dragenter" || e.type === "dragover" ? s(!0) : e.type === "dragleave" && s(!1);
+  const [D, d] = v(!1), [f, u] = v([]), p = I(null), l = i((e) => {
+    e.preventDefault(), e.stopPropagation(), e.type === "dragenter" || e.type === "dragover" ? d(!0) : e.type === "dragleave" && d(!1);
   }, []), g = (e) => {
-    u((a) => n ? [...a, ...e] : [e[0]]), b(e);
-  }, D = l((e) => {
-    e.preventDefault(), e.stopPropagation(), s(!1), e.dataTransfer.files && e.dataTransfer.files.length > 0 && g(Array.from(e.dataTransfer.files));
-  }, [n]), w = l((e) => {
+    u((a) => o ? [...a, ...e] : [e[0]]), N(e);
+  }, w = i((e) => {
+    e.preventDefault(), e.stopPropagation(), d(!1), e.dataTransfer.files && e.dataTransfer.files.length > 0 && g(Array.from(e.dataTransfer.files));
+  }, [o]), C = i((e) => {
     e.preventDefault(), e.target.files && e.target.files.length > 0 && g(Array.from(e.target.files));
-  }, [n]), k = (e) => {
-    u((a) => a.filter((h, C) => C !== e));
-  };
-  return /* @__PURE__ */ t("div", { className: v("w-full", N), children: [
-    c && /* @__PURE__ */ r("label", { className: "block text-sm font-medium text-foreground mb-1.5", children: c }),
+  }, [o]), k = (e) => {
+    u((a) => a.filter((x, A) => A !== e));
+  }, h = F.useId();
+  return /* @__PURE__ */ t("div", { className: b("w-full", y), children: [
+    s && /* @__PURE__ */ r("label", { htmlFor: h, className: "block text-sm font-medium text-foreground mb-1.5", children: s }),
     /* @__PURE__ */ t(
       "div",
       {
-        className: v(
+        className: b(
           "relative flex flex-col items-center justify-center p-6 border-2 border-dashed rounded-lg transition-colors duration-200 ease-in-out cursor-pointer",
-          y ? "border-primary bg-primary/5" : "border-border bg-card hover:bg-muted/50",
+          D ? "border-primary bg-primary/5" : "border-border bg-card hover:bg-muted/50",
           "min-h-[150px]"
         ),
-        onDragEnter: d,
-        onDragLeave: d,
-        onDragOver: d,
-        onDrop: D,
+        onDragEnter: l,
+        onDragLeave: l,
+        onDragOver: l,
+        onDrop: w,
         onClick: () => {
           var e;
           return (e = p.current) == null ? void 0 : e.click();
@@ -45,28 +45,30 @@ const S = ({
             "input",
             {
               ref: p,
+              id: h,
               type: "file",
               className: "hidden",
-              multiple: n,
-              accept: o,
-              onChange: w
+              "aria-label": s || "Choose files to upload",
+              multiple: o,
+              accept: n,
+              onChange: C
             }
           ),
-          /* @__PURE__ */ r("div", { className: "bg-muted p-3 rounded-full mb-3", children: /* @__PURE__ */ r(i, { name: "upload-cloud", className: "h-6 w-6 text-muted-foreground" }) }),
+          /* @__PURE__ */ r("div", { className: "bg-muted p-3 rounded-full mb-3", children: /* @__PURE__ */ r(c, { name: "upload-cloud", className: "h-6 w-6 text-muted-foreground" }) }),
           /* @__PURE__ */ t("p", { className: "text-sm font-medium text-foreground text-center", children: [
             /* @__PURE__ */ r("span", { className: "text-primary font-semibold hover:underline", children: "Click to upload" }),
             " or drag and drop"
           ] }),
           /* @__PURE__ */ t("p", { className: "text-xs text-muted-foreground mt-1", children: [
-            o ? o.replace(/,/g, ", ") : "Any file type",
-            n ? "" : " (Single file)"
+            n ? n.replace(/,/g, ", ") : "Any file type",
+            o ? "" : " (Single file)"
           ] })
         ]
       }
     ),
     f.length > 0 && /* @__PURE__ */ r("div", { className: "mt-4 space-y-2", children: f.map((e, a) => /* @__PURE__ */ t("div", { className: "flex items-center justify-between p-2 rounded-md border border-border bg-card", children: [
       /* @__PURE__ */ t("div", { className: "flex items-center gap-3 overflow-hidden", children: [
-        /* @__PURE__ */ r("div", { className: "bg-primary/10 p-2 rounded text-primary", children: /* @__PURE__ */ r(i, { name: "file", className: "h-4 w-4" }) }),
+        /* @__PURE__ */ r("div", { className: "bg-primary/10 p-2 rounded text-primary", children: /* @__PURE__ */ r(c, { name: "file", className: "h-4 w-4" }) }),
         /* @__PURE__ */ t("div", { className: "min-w-0", children: [
           /* @__PURE__ */ r("p", { className: "text-sm font-medium text-foreground truncate", children: e.name }),
           /* @__PURE__ */ t("p", { className: "text-xs text-muted-foreground", children: [
@@ -81,10 +83,10 @@ const S = ({
           variant: "ghost",
           size: "icon",
           className: "h-8 w-8 text-muted-foreground hover:text-destructive",
-          onClick: (h) => {
-            h.stopPropagation(), k(a);
+          onClick: (x) => {
+            x.stopPropagation(), k(a);
           },
-          children: /* @__PURE__ */ r(i, { name: "x", className: "h-4 w-4" })
+          children: /* @__PURE__ */ r(c, { name: "x", className: "h-4 w-4" })
         }
       )
     ] }, `${e.name}-${a}`)) }),
@@ -92,5 +94,5 @@ const S = ({
   ] });
 };
 export {
-  S as FileUpload
+  $ as FileUpload
 };

package/dist/components/forms/Input.js

@@ -1,43 +1,44 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import b from "react";
-import { Icon as g } from "../ui/Icon.js";
+import c from "react";
+import { Icon as N } from "../ui/Icon.js";
 import { cn as o } from "../../utils/cn.js";
-const v = b.forwardRef(
+const h = c.forwardRef(
   ({
     label: r,
     icon: t,
     helperText: i,
-    error: a = !1,
+    error: d = !1,
     required: s = !1,
-    showOptionalLabel: d = !1,
-    className: m,
-    containerClassName: c,
+    showOptionalLabel: m = !1,
+    className: f,
+    containerClassName: u,
     ...l
-  }, f) => {
-    const u = "flex h-10 w-full rounded-md border bg-background py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", p = a ? "border-destructive" : "border-input", x = t ? "pl-10 pr-3" : "px-3";
-    return /* @__PURE__ */ n("div", { className: o("w-full", c), children: [
-      r && /* @__PURE__ */ n("label", { htmlFor: l.id || l.name, className: "block text-sm font-medium text-foreground mb-1", children: [
+  }, p) => {
+    const b = c.useId(), a = l.id || l.name || b, x = "flex h-10 w-full rounded-md border bg-background py-2 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", g = d ? "border-destructive" : "border-input", v = t ? "pl-10 pr-3" : "px-3";
+    return /* @__PURE__ */ n("div", { className: o("w-full", u), children: [
+      r && /* @__PURE__ */ n("label", { htmlFor: a, className: "block text-sm font-medium text-foreground mb-1", children: [
         r,
         s && /* @__PURE__ */ e("span", { className: "text-destructive ml-1", children: "*" }),
-        !s && d && /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground ml-1", children: "(optional)" })
+        !s && m && /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground ml-1", children: "(optional)" })
       ] }),
       /* @__PURE__ */ n("div", { className: "relative w-full", children: [
-        t && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ e(g, { name: t, className: "text-muted-foreground", size: 16 }) }),
+        t && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ e(N, { name: t, className: "text-muted-foreground", size: 16 }) }),
         /* @__PURE__ */ e(
           "input",
           {
-            ref: f,
-            className: o(u, p, x, m),
+            ref: p,
+            id: a,
+            className: o(x, g, v, f),
             required: s,
             ...l
           }
         )
       ] }),
-      i && /* @__PURE__ */ e("p", { className: o("mt-1.5 text-xs", a ? "text-destructive" : "text-muted-foreground"), children: i })
+      i && /* @__PURE__ */ e("p", { className: o("mt-1.5 text-xs", d ? "text-destructive" : "text-muted-foreground"), children: i })
     ] });
   }
 );
-v.displayName = "Input";
+h.displayName = "Input";
 export {
-  v as Input
+  h as Input
 };

package/dist/components/forms/MultiSelect.js

@@ -7,24 +7,24 @@ const R = (a) => /* @__PURE__ */ e(d.DropdownIndicator, { ...a, children: /* @__
   options: a,
   value: u,
   onChange: m,
-  label: t,
+  label: c,
   placeholder: s = "Select...",
   isClearable: b = !0,
   isDisabled: g = !1,
   isLoading: v = !1,
   isSearchable: x = !0,
   className: f,
-  error: c,
-  helperText: l
+  error: l,
+  helperText: n
 }) => {
-  const n = S(), h = (r, o) => {
+  const t = S(), h = (r, o) => {
     const C = r ? Array.from(r) : null;
     m(C);
   }, y = {
     control: (r, o) => ({
       ...r,
       backgroundColor: "rgb(var(--app-card-bg-color))",
-      borderColor: c ? "rgb(var(--app-danger-color))" : o.isFocused ? "rgb(var(--app-primary-color))" : "rgb(var(--app-border-color))",
+      borderColor: l ? "rgb(var(--app-danger-color))" : o.isFocused ? "rgb(var(--app-primary-color))" : "rgb(var(--app-border-color))",
       color: "rgb(var(--app-text-color))",
       borderRadius: "var(--app-border-radius-md)",
       boxShadow: o.isFocused ? "0 0 0 1px rgb(var(--app-primary-color))" : "none",
@@ -83,11 +83,12 @@ const R = (a) => /* @__PURE__ */ e(d.DropdownIndicator, { ...a, children: /* @__
     })
   };
   return /* @__PURE__ */ I("div", { className: p("w-full", f), children: [
-    t && /* @__PURE__ */ e("label", { htmlFor: n, className: "block text-sm font-medium text-foreground mb-1.5", children: t }),
+    c && /* @__PURE__ */ e("label", { htmlFor: t, className: "block text-sm font-medium text-foreground mb-1.5", children: c }),
     /* @__PURE__ */ e(
       k,
       {
-        instanceId: n,
+        instanceId: t,
+        inputId: t,
         styles: y,
         components: { DropdownIndicator: R, MultiValueRemove: w },
         options: a,
@@ -103,7 +104,7 @@ const R = (a) => /* @__PURE__ */ e(d.DropdownIndicator, { ...a, children: /* @__
         menuPosition: "fixed"
       }
     ),
-    l && /* @__PURE__ */ e("p", { className: p("mt-1.5 text-xs", c ? "text-destructive" : "text-muted-foreground"), children: l })
+    n && /* @__PURE__ */ e("p", { className: p("mt-1.5 text-xs", l ? "text-destructive" : "text-muted-foreground"), children: n })
   ] });
 };
 export {

package/dist/components/forms/Select.js

@@ -7,21 +7,21 @@ const S = (a) => /* @__PURE__ */ e(I.DropdownIndicator, { ...a, children: /* @__
   options: a,
   value: l,
   onChange: i,
-  label: c,
+  label: p,
   placeholder: m = "Select...",
   isDisabled: s = !1,
   isLoading: u = !1,
   isClearable: b = !0,
   isSearchable: g = !0,
   className: v,
-  error: p,
-  helperText: t
+  error: t,
+  helperText: d
 }) => {
-  const d = h(), x = {
+  const c = h(), x = {
     control: (r, o) => ({
       ...r,
       backgroundColor: "rgb(var(--app-card-bg-color))",
-      borderColor: p ? "rgb(var(--app-danger-color))" : o.isFocused ? "rgb(var(--app-primary-color))" : "rgb(var(--app-border-color))",
+      borderColor: t ? "rgb(var(--app-danger-color))" : o.isFocused ? "rgb(var(--app-primary-color))" : "rgb(var(--app-border-color))",
       color: "rgb(var(--app-text-color))",
       borderRadius: "var(--app-border-radius-md)",
       boxShadow: o.isFocused ? "0 0 0 1px rgb(var(--app-primary-color))" : "none",
@@ -65,11 +65,12 @@ const S = (a) => /* @__PURE__ */ e(I.DropdownIndicator, { ...a, children: /* @__
     })
   };
   return /* @__PURE__ */ f("div", { className: n("w-full", v), children: [
-    c && /* @__PURE__ */ e("label", { htmlFor: d, className: "block text-sm font-medium text-foreground mb-1.5", children: c }),
+    p && /* @__PURE__ */ e("label", { htmlFor: c, className: "block text-sm font-medium text-foreground mb-1.5", children: p }),
     /* @__PURE__ */ e(
       y,
       {
-        instanceId: d,
+        instanceId: c,
+        inputId: c,
         styles: x,
         components: { DropdownIndicator: S },
         options: a,
@@ -84,7 +85,7 @@ const S = (a) => /* @__PURE__ */ e(I.DropdownIndicator, { ...a, children: /* @__
         menuPosition: "fixed"
       }
     ),
-    t && /* @__PURE__ */ e("p", { className: n("mt-1.5 text-xs", p ? "text-destructive" : "text-muted-foreground"), children: t })
+    d && /* @__PURE__ */ e("p", { className: n("mt-1.5 text-xs", t ? "text-destructive" : "text-muted-foreground"), children: d })
   ] });
 };
 export {

package/dist/components/forms/Textarea.d.ts

@@ -1,22 +1,24 @@
 import React from 'react';
-interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     label?: string;
+    helperText?: string;
+    error?: boolean;
+    required?: boolean;
+    showOptionalLabel?: boolean;
     containerClassName?: string;
 }
 /**
  * @wizard
  * @name Textarea
- * @description A theme-aware textarea component for multi-line text input.
- * @tags form, input, ui
- * @props
- * - name: label
- * type: string
- * description: An optional label to display above the textarea.
- * - name: containerClassName
- * type: string
- * description: Optional additional CSS classes for the container div.
+ * @description A theme-aware multi-line text input with label, helper text, and validation state support. Strategic purpose: the multi-line sibling of Input, styled identically so the two are indistinguishable when stacked in one form. Forwards all standard HTML textarea attributes via spread.
+ * @tags form, input, ui, text, multiline
  * @category form
  * @id textarea
+ * @param {string} label - Optional label displayed above the textarea.
+ * @param {string} helperText - Supporting text rendered below the textarea. Appears in destructive color when error is true.
+ * @param {boolean} error - If true, applies destructive border styling to indicate a validation error. Defaults to false.
+ * @param {boolean} required - If true, appends a required (*) indicator next to the label. Defaults to false.
+ * @param {boolean} showOptionalLabel - If true, appends an (optional) label when the field is not required. Defaults to false.
+ * @param {string} containerClassName - Additional CSS classes applied to the outer container div.
  */
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
-export {};

package/dist/components/forms/Textarea.js

@@ -1,19 +1,39 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import d from "react";
-const m = d.forwardRef(
-  ({ label: r, className: t, containerClassName: a, ...e }, s) => /* @__PURE__ */ n("div", { className: `w-full ${a || ""}`, children: [
-    r && /* @__PURE__ */ o("label", { htmlFor: e.id || e.name, className: "block text-sm font-medium text-muted-foreground mb-1", children: r }),
-    /* @__PURE__ */ o(
-      "textarea",
-      {
-        ref: s,
-        className: `w-full px-3 py-2 rounded-md bg-card border border-border transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary ${t || ""}`,
-        ...e
-      }
-    )
-  ] })
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import i from "react";
+import { cn as o } from "../../utils/cn.js";
+const p = i.forwardRef(
+  ({
+    label: r,
+    helperText: a,
+    error: d = !1,
+    required: t = !1,
+    showOptionalLabel: c = !1,
+    className: m,
+    containerClassName: f,
+    ...s
+  }, u) => {
+    const x = "w-full rounded-md border bg-background px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", b = d ? "border-destructive" : "border-input", g = i.useId(), l = s.id || s.name || g;
+    return /* @__PURE__ */ n("div", { className: o("w-full", f), children: [
+      r && /* @__PURE__ */ n("label", { htmlFor: l, className: "block text-sm font-medium text-foreground mb-1", children: [
+        r,
+        t && /* @__PURE__ */ e("span", { className: "text-destructive ml-1", children: "*" }),
+        !t && c && /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground ml-1", children: "(optional)" })
+      ] }),
+      /* @__PURE__ */ e(
+        "textarea",
+        {
+          ref: u,
+          id: l,
+          className: o(x, b, m),
+          required: t,
+          ...s
+        }
+      ),
+      a && /* @__PURE__ */ e("p", { className: o("mt-1.5 text-xs", d ? "text-destructive" : "text-muted-foreground"), children: a })
+    ] });
+  }
 );
-m.displayName = "Textarea";
+p.displayName = "Textarea";
 export {
-  m as Textarea
+  p as Textarea
 };

package/dist/components/layout/Accordion.js

@@ -1,52 +1,45 @@
-import { jsx as t, jsxs as m } from "react/jsx-runtime";
-import d, { useState as u, useCallback as f } from "react";
-const x = ({ id: e, header: r, children: i, isOpen: n, onToggle: a }) => {
-  const [c, o] = u(n !== void 0 ? n : !1), s = n !== void 0, l = s ? n : c, h = f(() => {
-    s && a ? a(e, !l) : o((g) => !g);
-  }, [e, l, s, a]), p = `transform transition-transform duration-300 ${l ? "rotate-180" : "rotate-0"}`;
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import c, { useState as f, useCallback as u } from "react";
+const w = ({ id: e, header: n, children: l, isOpen: t, onToggle: s }) => {
+  const [d, r] = f(t !== void 0 ? t : !1), a = t !== void 0, i = a ? t : d, h = u(() => {
+    a && s ? s(e, !i) : r((g) => !g);
+  }, [e, i, a, s]), p = `transform transition-transform duration-300 ${i ? "rotate-180" : "rotate-0"}`;
   return /* @__PURE__ */ m("div", { className: "border border-border rounded-md overflow-hidden", children: [
-    /* @__PURE__ */ m(
+    /* @__PURE__ */ o("h3", { className: "m-0", children: /* @__PURE__ */ m(
       "button",
       {
         id: `accordion-header-${e}`,
-        "aria-expanded": l,
+        "aria-expanded": i,
         "aria-controls": `accordion-panel-${e}`,
         onClick: h,
-        className: "flex items-center justify-between w-full p-4 text-foreground bg-background hover:bg-background/80 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
-        role: "heading",
-        "aria-level": 3,
+        className: "flex items-center justify-between w-full p-4 text-left text-foreground bg-background hover:bg-background/80 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
         children: [
-          /* @__PURE__ */ t("span", { className: "text-xl font-semibold", children: r }),
-          /* @__PURE__ */ t("svg", { className: `w-6 h-6 text-foreground ${p}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })
+          /* @__PURE__ */ o("span", { className: "text-xl font-semibold", children: n }),
+          /* @__PURE__ */ o("svg", { className: `w-6 h-6 text-foreground shrink-0 ${p}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ o("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })
         ]
       }
-    ),
-    /* @__PURE__ */ t(
+    ) }),
+    /* @__PURE__ */ o(
       "div",
       {
         id: `accordion-panel-${e}`,
         role: "region",
         "aria-labelledby": `accordion-header-${e}`,
-        style: {
-          maxHeight: l ? "1000px" : "0",
-          // Arbitrary large height for transition
-          overflow: "hidden",
-          transition: "max-height 0.3s ease-in-out"
-        },
-        children: /* @__PURE__ */ t("div", { className: "p-4 bg-card", children: i })
+        className: `grid transition-[grid-template-rows] duration-300 ease-in-out ${i ? "grid-rows-[1fr]" : "grid-rows-[0fr]"}`,
+        children: /* @__PURE__ */ o("div", { className: "overflow-hidden min-h-0", children: /* @__PURE__ */ o("div", { className: "p-4 bg-card", children: l }) })
       }
     )
   ] });
-}, w = ({ children: e, singleOpen: r = !1, className: i }) => {
-  const [n, a] = u(null), c = f((o, s) => {
-    r && a(s ? o : null);
-  }, [r]);
-  return /* @__PURE__ */ t("div", { className: `space-y-4 ${i || ""}`, children: d.Children.map(e, (o) => d.isValidElement(o) ? d.cloneElement(o, {
-    isOpen: r ? o.props.id === n : void 0,
-    onToggle: r ? c : void 0
-  }) : o) });
+}, x = ({ children: e, singleOpen: n = !1, className: l }) => {
+  const [t, s] = f(null), d = u((r, a) => {
+    n && s(a ? r : null);
+  }, [n]);
+  return /* @__PURE__ */ o("div", { className: `space-y-4 ${l || ""}`, children: c.Children.map(e, (r) => c.isValidElement(r) ? c.cloneElement(r, {
+    isOpen: n ? r.props.id === t : void 0,
+    onToggle: n ? d : void 0
+  }) : r) });
 };
 export {
-  w as Accordion,
-  x as AccordionItem
+  x as Accordion,
+  w as AccordionItem
 };

package/dist/components/layout/Card.js

@@ -1,59 +1,76 @@
-import { jsx as d } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as t } from "react";
 import { cn as s } from "../../utils/cn.js";
 const l = t(
-  ({ className: e, children: a, ...r }, o) => /* @__PURE__ */ d(
+  ({ className: e, children: a, ...d }, o) => /* @__PURE__ */ r(
     "div",
     {
       ref: o,
       className: s(
-        "@container bg-card text-card-foreground rounded-lg border border-border shadow-sm",
+        "@container bg-card text-card-foreground",
+        /* A card in a narrow container is chrome restating chrome: its border
+                     sits a few pixels inside the panel's own edge, and its radius and
+                     shadow buy nothing at 390px while its inset costs real width. So
+                     below a 28rem container the card keeps its surface and drops the
+                     frame — the rule above it still groups, the box no longer taxes.
+        
+                     A CONTAINER query, not a breakpoint: this asks how much room the
+                     card actually has, so the same card is framed in a wide dashboard
+                     column and flush inside a sheet or a narrow sidebar on that very
+                     same screen. A `sm:` breakpoint would get the narrow-panel-on-a-
+                     big-monitor case exactly backwards.
+        
+                     28rem, not 24rem: inside a sheet a 390px phone gives the card a
+                     ~358px container, but a 430px phone gives ~398px — over 24rem, so
+                     the frame would come back on the LARGER phone. 28rem clears every
+                     handset while leaving real desktop columns framed. */
+        "border-y border-border @md:rounded-lg @md:border @md:shadow-sm",
         e
       ),
-      ...r,
+      ...d,
       children: a
     }
   )
 );
 l.displayName = "Card";
 const i = t(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ d(
+  ({ className: e, ...a }, d) => /* @__PURE__ */ r(
     "div",
     {
-      ref: r,
+      ref: d,
       className: s("flex flex-col space-y-fluid-xs p-fluid-lg", e),
       ...a
     }
   )
 );
 i.displayName = "CardHeader";
-const n = t(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ d(
+const m = t(
+  ({ className: e, ...a }, d) => /* @__PURE__ */ r(
     "h3",
     {
-      ref: r,
+      ref: d,
       className: s("text-fluid-lg font-semibold leading-none tracking-tight", e),
       ...a
     }
   )
 );
-n.displayName = "CardTitle";
-const m = t(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ d(
+m.displayName = "CardTitle";
+const n = t(
+  ({ className: e, ...a }, d) => /* @__PURE__ */ r(
     "p",
     {
-      ref: r,
+      ref: d,
       className: s("text-fluid-sm text-muted-foreground", e),
       ...a
     }
   )
 );
-m.displayName = "CardDescription";
+n.displayName = "CardDescription";
 const c = t(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ d(
+  ({ className: e, ...a }, d) => /* @__PURE__ */ r(
     "h2",
     {
-      ref: r,
+      ref: d,
       className: s(
         "text-xs font-semibold uppercase tracking-widest text-muted-foreground flex items-center gap-1.5",
         e
@@ -64,14 +81,14 @@ const c = t(
 );
 c.displayName = "CardLabel";
 const p = t(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ d("div", { ref: r, className: s("p-fluid-lg pt-0", e), ...a })
+  ({ className: e, ...a }, d) => /* @__PURE__ */ r("div", { ref: d, className: s("p-fluid-lg pt-0", e), ...a })
 );
 p.displayName = "CardContent";
 const f = t(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ d(
+  ({ className: e, ...a }, d) => /* @__PURE__ */ r(
     "div",
     {
-      ref: r,
+      ref: d,
       className: s("flex items-center p-fluid-lg pt-0", e),
       ...a
     }
@@ -81,9 +98,9 @@ f.displayName = "CardFooter";
 export {
   l as Card,
   p as CardContent,
-  m as CardDescription,
+  n as CardDescription,
   f as CardFooter,
   i as CardHeader,
   c as CardLabel,
-  n as CardTitle
+  m as CardTitle
 };