impact-nova 1.5.14 → 1.6.0

package/dist/components/ui/sheet.js

@@ -1,29 +1,29 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import * as n from "react";
 import * as o from "@radix-ui/react-dialog";
-import { cva as v } from "class-variance-authority";
+import { cva as N } from "class-variance-authority";
 import { ChevronDown as S, ChevronUp as w, X as C } from "lucide-react";
-import { cn as l } from "../../lib/utils.js";
-import { Tooltip as g, TooltipTrigger as x, TooltipContent as b } from "./tooltip.js";
+import { cn as r } from "../../lib/utils.js";
+import { Tooltip as g, TooltipTrigger as x, TooltipContent as y } from "./tooltip.js";
 import { useImpactNovaI18n as T } from "../../i18n/ImpactNovaI18nContext.js";
-const y = n.createContext({
+const b = n.createContext({
   isExpanded: !1,
   expandable: !1,
   side: "right"
-}), U = o.Root, X = o.Trigger, k = o.Close, D = o.Portal, N = n.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ e(
+}), U = o.Root, X = o.Trigger, D = o.Close, E = o.Portal, v = n.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ e(
   o.Overlay,
   {
-    className: l(
-      "fixed inset-0 z-50 bg-black/40  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+    className: r(
+      "fixed inset-0 z-50 bg-scrim  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       t
     ),
     ...a,
     ref: s
   }
 ));
-N.displayName = o.Overlay.displayName;
-const E = v(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+v.displayName = o.Overlay.displayName;
+const R = N(
+  "fixed z-50 gap-4 bg-canvas p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
   {
     variants: {
       side: {
@@ -37,72 +37,100 @@ const E = v(
       side: "right"
     }
   }
-), R = n.forwardRef(({ side: t = "right", className: a, children: s, expandable: c = !1, defaultExpanded: d = !1, ...f }, u) => {
-  const [h, p] = n.useState(d), m = n.useCallback(() => {
-    p((i) => !i);
-  }, []);
-  return /* @__PURE__ */ e(y.Provider, { value: { isExpanded: h, onExpandToggle: m, expandable: c, side: t || void 0 }, children: /* @__PURE__ */ r(D, { children: [
-    /* @__PURE__ */ e(N, {}),
-    /* @__PURE__ */ e(
-      o.Content,
+), k = n.forwardRef(
+  ({
+    side: t = "right",
+    className: a,
+    children: s,
+    expandable: c = !1,
+    defaultExpanded: d = !1,
+    ...f
+  }, u) => {
+    const [h, m] = n.useState(d), p = n.useCallback(() => {
+      m((i) => !i);
+    }, []);
+    return /* @__PURE__ */ e(
+      b.Provider,
       {
-        ref: u,
-        "data-component": "sheet-content",
-        onOpenAutoFocus: (i) => i.preventDefault(),
-        className: l(
-          E({ side: t }),
-          "flex flex-col p-0 transition-all duration-300",
-          t === "bottom" && (h ? "h-[96vh]" : "h-[40vh]"),
-          a
-        ),
-        ...f,
-        children: s
+        value: {
+          isExpanded: h,
+          onExpandToggle: p,
+          expandable: c,
+          side: t || void 0
+        },
+        children: /* @__PURE__ */ l(E, { children: [
+          /* @__PURE__ */ e(v, {}),
+          /* @__PURE__ */ e(
+            o.Content,
+            {
+              ref: u,
+              "data-component": "sheet-content",
+              onOpenAutoFocus: (i) => i.preventDefault(),
+              className: r(
+                R({ side: t }),
+                "flex flex-col p-0 transition-all duration-300",
+                t === "bottom" && (h ? "h-[96vh]" : "h-[40vh]"),
+                a
+              ),
+              ...f,
+              children: s
+            }
+          )
+        ] })
       }
-    )
-  ] }) });
-});
-R.displayName = o.Content.displayName;
+    );
+  }
+);
+k.displayName = o.Content.displayName;
 const L = ({
   className: t,
   children: a,
   ...s
 }) => {
-  const { t: c } = T(), { isExpanded: d, onExpandToggle: f, expandable: u, side: h } = n.useContext(y), p = c("aria.close"), m = c("nestedList.expand"), i = c("nestedList.collapse");
-  return /* @__PURE__ */ r(
+  const { t: c } = T(), { isExpanded: d, onExpandToggle: f, expandable: u, side: h } = n.useContext(b), m = c("aria.close"), p = c("nestedList.expand"), i = c("nestedList.collapse");
+  return /* @__PURE__ */ l(
     "div",
     {
-      className: l(
-        "flex px-4 py-4 shrink-0 items-center justify-between bg-light-blue border-b",
+      className: r(
+        "flex px-4 py-4 shrink-0 items-center justify-between bg-canvas-tint border-b",
         h === "bottom" && "rounded-t-lg",
         t
       ),
       ...s,
       children: [
         /* @__PURE__ */ e("div", { className: "flex flex-col space-y-1 text-center sm:text-left", children: a }),
-        /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
-          u && /* @__PURE__ */ r(g, { children: [
-            /* @__PURE__ */ e(x, { asChild: !0, children: /* @__PURE__ */ r(
+        /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+          u && /* @__PURE__ */ l(g, { children: [
+            /* @__PURE__ */ e(x, { asChild: !0, children: /* @__PURE__ */ l(
               "button",
               {
                 type: "button",
                 "data-component": "sheet-expand-toggle",
                 onClick: f,
-                className: "rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none",
-                "aria-label": d ? i : m,
+                className: "rounded-sm opacity-70 ring-offset-canvas transition-opacity hover:opacity-100 focus:outline-none",
+                "aria-label": d ? i : p,
                 children: [
                   d ? /* @__PURE__ */ e(S, { className: "h-4 w-4" }) : /* @__PURE__ */ e(w, { className: "h-4 w-4" }),
-                  /* @__PURE__ */ e("span", { className: "sr-only", children: d ? i : m })
+                  /* @__PURE__ */ e("span", { className: "sr-only", children: d ? i : p })
                 ]
               }
             ) }),
-            /* @__PURE__ */ e(b, { variant: "tertiary", side: "top", children: d ? i : m })
+            /* @__PURE__ */ e(y, { variant: "tertiary", side: "top", children: d ? i : p })
           ] }),
-          /* @__PURE__ */ r(g, { children: [
-            /* @__PURE__ */ e(x, { asChild: !0, children: /* @__PURE__ */ r(k, { "data-component": "sheet-close", className: "rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", "aria-label": p, children: [
-              /* @__PURE__ */ e(C, { className: "h-4 w-4" }),
-              /* @__PURE__ */ e("span", { className: "sr-only", children: p })
-            ] }) }),
-            /* @__PURE__ */ e(b, { variant: "tertiary", side: "top", children: p })
+          /* @__PURE__ */ l(g, { children: [
+            /* @__PURE__ */ e(x, { asChild: !0, children: /* @__PURE__ */ l(
+              D,
+              {
+                "data-component": "sheet-close",
+                className: "rounded-sm opacity-70 ring-offset-canvas transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2 disabled:pointer-events-none",
+                "aria-label": m,
+                children: [
+                  /* @__PURE__ */ e(C, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ e("span", { className: "sr-only", children: m })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ e(y, { variant: "tertiary", side: "top", children: m })
           ] })
         ] })
       ]
@@ -113,13 +141,7 @@ L.displayName = "SheetHeader";
 const j = ({
   className: t,
   ...a
-}) => /* @__PURE__ */ e(
-  "div",
-  {
-    className: l("flex-1 overflow-y-auto p-4", t),
-    ...a
-  }
-);
+}) => /* @__PURE__ */ e("div", { className: r("flex-1 overflow-y-auto p-4", t), ...a });
 j.displayName = "SheetBody";
 const O = ({
   className: t,
@@ -127,8 +149,8 @@ const O = ({
 }) => /* @__PURE__ */ e(
   "div",
   {
-    className: l(
-      "mt-auto flex px-4 py-3 shrink-0 items-center justify-end gap-2 border-t bg-background",
+    className: r(
+      "mt-auto flex px-4 py-3 shrink-0 items-center justify-end gap-2 border-t bg-canvas",
       t
     ),
     ...a,
@@ -141,7 +163,7 @@ const P = n.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ e(
   {
     ref: s,
     "data-component": "sheet-title",
-    className: l("text-sm font-bold leading-none tracking-tight", t),
+    className: r("text-sm font-bold leading-none tracking-tight", t),
     ...a
   }
 ));
@@ -150,7 +172,7 @@ const F = n.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ e(
   o.Description,
   {
     ref: s,
-    className: l("text-sm text-muted-foreground", t),
+    className: r("text-sm text-content-muted", t),
     ...a
   }
 ));
@@ -158,13 +180,13 @@ F.displayName = o.Description.displayName;
 export {
   U as Sheet,
   j as SheetBody,
-  k as SheetClose,
-  R as SheetContent,
+  D as SheetClose,
+  k as SheetContent,
   F as SheetDescription,
   O as SheetFooter,
   L as SheetHeader,
-  N as SheetOverlay,
-  D as SheetPortal,
+  v as SheetOverlay,
+  E as SheetPortal,
   P as SheetTitle,
   X as SheetTrigger
 };