impact-nova 2.1.0-alpha.4 → 2.1.0-alpha.5

package/dist/components/feedback/dropdown-menu/dropdown-menu.js

@@ -1,9 +1,9 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import * as l from "react";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import * as c from "react";
 import * as t from "@radix-ui/react-dropdown-menu";
 import { Checkmark as f, ChevronRight as x } from "impact-nova-icons";
 import { wrapRadixPart as p } from "../../../lib/primitives/create-compound.js";
-import { cn as s } from "../../../lib/utils.js";
+import { cn as d } from "../../../lib/utils.js";
 const j = (n) => /* @__PURE__ */ e(t.Root, { "data-component": "dropdown-menu", ...n }), G = p(
   "dropdown-menu",
   "trigger",
@@ -14,25 +14,25 @@ const j = (n) => /* @__PURE__ */ e(t.Root, { "data-component": "dropdown-menu",
   "group",
   "DropdownMenuGroup",
   t.Group
-), T = t.Portal, L = t.Sub, g = l.forwardRef(({ className: n, ...a }, o) => /* @__PURE__ */ e(
+), T = t.Portal, L = t.Sub, g = c.forwardRef(({ className: n, ...a }, o) => /* @__PURE__ */ e(
   t.RadioGroup,
   {
     ref: o,
-    className: s("flex flex-col gap-0.5", n),
+    className: d("flex flex-col gap-0.5", n),
     ...a
   }
 ));
 g.displayName = t.RadioGroup.displayName;
-const h = l.forwardRef(({ className: n, inset: a, icon: o, children: r, ...d }, i) => /* @__PURE__ */ c(
+const h = c.forwardRef(({ className: n, inset: a, icon: o, children: r, ...s }, i) => /* @__PURE__ */ l(
   t.SubTrigger,
   {
     ref: i,
-    className: s(
+    className: d(
       "flex cursor-default select-none items-center gap-2 rounded-md px-3 h-[35px] text-[13px] outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 font-medium",
       a && "pl-4",
       n
     ),
-    ...d,
+    ...s,
     children: [
       o && /* @__PURE__ */ e("span", { className: "flex-shrink-0 text-content-secondary [&>svg]:size-4", children: o }),
       r,
@@ -41,27 +41,27 @@ const h = l.forwardRef(({ className: n, inset: a, icon: o, children: r, ...d },
   }
 ));
 h.displayName = t.SubTrigger.displayName;
-const w = l.forwardRef(({ className: n, ...a }, o) => /* @__PURE__ */ e(t.Portal, { children: /* @__PURE__ */ e(
+const b = c.forwardRef(({ className: n, ...a }, o) => /* @__PURE__ */ e(t.Portal, { children: /* @__PURE__ */ e(
   t.SubContent,
   {
     ref: o,
-    className: s(
-      "z-[100] min-w-[8rem] overflow-hidden rounded-lg bg-canvas-overlay p-2 text-canvas-overlay-foreground shadow-elevation-floating text-[13px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin] motion-reduce:animate-none motion-reduce:transition-none",
+    className: d(
+      "z-50 min-w-[8rem] overflow-hidden rounded-lg bg-canvas-overlay p-2 text-canvas-overlay-foreground shadow-elevation-floating text-[13px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin] motion-reduce:animate-none motion-reduce:transition-none",
       n
     ),
     ...a
   }
 ) }));
-w.displayName = t.SubContent.displayName;
-const N = l.forwardRef(({ className: n, sideOffset: a = 4, portalled: o = !0, ...r }, d) => {
+b.displayName = t.SubContent.displayName;
+const w = c.forwardRef(({ className: n, sideOffset: a = 4, portalled: o = !0, ...r }, s) => {
   const i = /* @__PURE__ */ e(
     t.Content,
     {
-      ref: d,
+      ref: s,
       sideOffset: a,
       "data-component": "dropdown-menu-content",
-      className: s(
-        "z-[100] max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[12rem] overflow-y-auto overflow-x-hidden rounded-lg bg-canvas-overlay p-2 text-canvas-overlay-foreground shadow-elevation-floating flex flex-col gap-0.5",
+      className: d(
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[12rem] overflow-y-auto overflow-x-hidden rounded-lg bg-canvas-overlay p-2 text-canvas-overlay-foreground shadow-elevation-floating flex flex-col gap-0.5",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin] motion-reduce:animate-none motion-reduce:transition-none",
         n
       ),
@@ -70,13 +70,13 @@ const N = l.forwardRef(({ className: n, sideOffset: a = 4, portalled: o = !0, ..
   );
   return o ? /* @__PURE__ */ e(t.Portal, { children: i }) : i;
 });
-N.displayName = t.Content.displayName;
-const b = l.forwardRef(({ className: n, inset: a, description: o, icon: r, children: d, ...i }, m) => /* @__PURE__ */ c(
+w.displayName = t.Content.displayName;
+const N = c.forwardRef(({ className: n, inset: a, description: o, icon: r, children: s, ...i }, m) => /* @__PURE__ */ l(
   t.Item,
   {
     ref: m,
     "data-component": "dropdown-menu-item",
-    className: s(
+    className: d(
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-3 h-[35px] text-[13px] outline-none transition-colors focus:bg-accent focus:text-content data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
       a && "pl-4",
       n
@@ -84,19 +84,19 @@ const b = l.forwardRef(({ className: n, inset: a, description: o, icon: r, child
     ...i,
     children: [
       r && /* @__PURE__ */ e("span", { className: "flex-shrink-0 [&>svg]:size-4", children: r }),
-      /* @__PURE__ */ c("div", { className: "flex flex-col gap-0.5 justify-center", children: [
-        /* @__PURE__ */ e("span", { className: "font-medium leading-none", children: d }),
+      /* @__PURE__ */ l("div", { className: "flex flex-col gap-0.5 justify-center", children: [
+        /* @__PURE__ */ e("span", { className: "font-medium leading-none", children: s }),
         o && /* @__PURE__ */ e("span", { className: "text-[10px] leading-tight text-content-secondary line-clamp-1", children: o })
       ] })
     ]
   }
 ));
-b.displayName = t.Item.displayName;
-const v = l.forwardRef(({ className: n, children: a, checked: o, description: r, icon: d, ...i }, m) => /* @__PURE__ */ c(
+N.displayName = t.Item.displayName;
+const y = c.forwardRef(({ className: n, children: a, checked: o, description: r, icon: s, ...i }, m) => /* @__PURE__ */ l(
   t.CheckboxItem,
   {
     ref: m,
-    className: s(
+    className: d(
       "relative flex cursor-default select-none items-center rounded-md h-[35px] pl-10 pr-3 text-[13px] outline-none transition-colors focus:bg-accent focus:text-content data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       n
     ),
@@ -107,16 +107,16 @@ const v = l.forwardRef(({ className: n, children: a, checked: o, description: r,
       /* @__PURE__ */ e("span", { className: "absolute left-3 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ e(
         "div",
         {
-          className: s(
+          className: d(
             "flex h-4 w-4 items-center justify-center rounded-[4px] border border-stroke transition-colors",
             o && "bg-brand border-brand text-brand-foreground"
           ),
           children: /* @__PURE__ */ e(t.ItemIndicator, { children: /* @__PURE__ */ e(f, { className: "h-3.5 w-3.5" }) })
         }
       ) }),
-      /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
-        d && /* @__PURE__ */ e("span", { className: "flex-shrink-0 text-content-secondary [&>svg]:size-4", children: d }),
-        /* @__PURE__ */ c("div", { className: "flex flex-col gap-0.5 justify-center", children: [
+      /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+        s && /* @__PURE__ */ e("span", { className: "flex-shrink-0 text-content-secondary [&>svg]:size-4", children: s }),
+        /* @__PURE__ */ l("div", { className: "flex flex-col gap-0.5 justify-center", children: [
           /* @__PURE__ */ e("span", { className: "font-medium leading-none", children: a }),
           r && /* @__PURE__ */ e("span", { className: "text-[10px] leading-tight text-content-secondary line-clamp-1", children: r })
         ] })
@@ -124,32 +124,45 @@ const v = l.forwardRef(({ className: n, children: a, checked: o, description: r,
     ]
   }
 ));
-v.displayName = t.CheckboxItem.displayName;
-const y = l.forwardRef(({ className: n, children: a, description: o, icon: r, ...d }, i) => /* @__PURE__ */ e(
+y.displayName = t.CheckboxItem.displayName;
+const v = c.forwardRef(({ className: n, children: a, description: o, icon: r, ...s }, i) => /* @__PURE__ */ l(
   t.RadioItem,
   {
     ref: i,
-    className: s(
-      "relative flex cursor-default select-none items-center rounded-md h-[35px] px-3 text-[13px] outline-none transition-colors focus:bg-accent focus:text-content data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:bg-accent",
+    "data-component": "dropdown-menu-radio-item",
+    className: d(
+      "group relative flex cursor-default select-none items-center rounded-md min-h-[35px] py-1.5 pl-10 pr-3 text-[13px] outline-none transition-colors focus:bg-accent focus:text-content data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:bg-accent",
       n
     ),
     onSelect: (m) => m.preventDefault(),
-    ...d,
-    children: /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
-      r && /* @__PURE__ */ e("span", { className: "flex-shrink-0 text-content-secondary [&>svg]:size-4", children: r }),
-      /* @__PURE__ */ c("div", { className: "flex flex-col gap-0.5 justify-center", children: [
-        /* @__PURE__ */ e("span", { className: "font-medium leading-none", children: a }),
-        o && /* @__PURE__ */ e("span", { className: "text-[10px] leading-tight text-content-secondary line-clamp-1", children: o })
+    ...s,
+    children: [
+      /* @__PURE__ */ e("span", { className: "absolute left-3 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: d(
+            "flex h-4 w-4 items-center justify-center rounded-full border border-stroke transition-colors",
+            "group-data-[state=checked]:border-brand"
+          ),
+          children: /* @__PURE__ */ e(t.ItemIndicator, { children: /* @__PURE__ */ e("div", { className: "h-2 w-2 rounded-full bg-brand" }) })
+        }
+      ) }),
+      /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+        r && /* @__PURE__ */ e("span", { className: "flex-shrink-0 text-content-secondary [&>svg]:size-4", children: r }),
+        /* @__PURE__ */ l("div", { className: "flex flex-col gap-0.5 justify-center", children: [
+          /* @__PURE__ */ e("span", { className: "font-medium leading-none", children: a }),
+          o && /* @__PURE__ */ e("span", { className: "text-[10px] leading-tight text-content-secondary line-clamp-1", children: o })
+        ] })
       ] })
-    ] })
+    ]
   }
 ));
-y.displayName = t.RadioItem.displayName;
-const D = l.forwardRef(({ className: n, inset: a, ...o }, r) => /* @__PURE__ */ e(
+v.displayName = t.RadioItem.displayName;
+const D = c.forwardRef(({ className: n, inset: a, ...o }, r) => /* @__PURE__ */ e(
   t.Label,
   {
     ref: r,
-    className: s(
+    className: d(
       "px-3 py-2 text-xs font-bold tracking-wider text-content-icon",
       a && "pl-4",
       n
@@ -158,55 +171,55 @@ const D = l.forwardRef(({ className: n, inset: a, ...o }, r) => /* @__PURE__ */
   }
 ));
 D.displayName = t.Label.displayName;
-const M = l.forwardRef(({ className: n, ...a }, o) => /* @__PURE__ */ e(
+const M = c.forwardRef(({ className: n, ...a }, o) => /* @__PURE__ */ e(
   t.Separator,
   {
     ref: o,
-    className: s("-mx-2 my-1 h-px bg-stroke-hairline", n),
+    className: d("-mx-2 my-1 h-px bg-stroke-hairline", n),
     ...a
   }
 ));
 M.displayName = t.Separator.displayName;
-const R = ({
+const k = ({
   className: n,
   ...a
 }) => /* @__PURE__ */ e(
   "div",
   {
-    className: s(
+    className: d(
       "sticky bottom-0 z-10 -mx-2 -mb-2 mt-1 flex items-center justify-end gap-2 border-t bg-canvas-elevated p-2 shrink-0 rounded-b-xl",
       n
     ),
     ...a
   }
 );
-R.displayName = "DropdownMenuFooter";
-const k = ({
+k.displayName = "DropdownMenuFooter";
+const R = ({
   className: n,
   ...a
 }) => /* @__PURE__ */ e(
   "span",
   {
-    className: s("ml-auto text-xs tracking-widest opacity-60", n),
+    className: d("ml-auto text-xs tracking-widest opacity-60", n),
     ...a
   }
 );
-k.displayName = "DropdownMenuShortcut";
+R.displayName = "DropdownMenuShortcut";
 export {
   j as DropdownMenu,
-  v as DropdownMenuCheckboxItem,
-  N as DropdownMenuContent,
-  R as DropdownMenuFooter,
+  y as DropdownMenuCheckboxItem,
+  w as DropdownMenuContent,
+  k as DropdownMenuFooter,
   P as DropdownMenuGroup,
-  b as DropdownMenuItem,
+  N as DropdownMenuItem,
   D as DropdownMenuLabel,
   T as DropdownMenuPortal,
   g as DropdownMenuRadioGroup,
-  y as DropdownMenuRadioItem,
+  v as DropdownMenuRadioItem,
   M as DropdownMenuSeparator,
-  k as DropdownMenuShortcut,
+  R as DropdownMenuShortcut,
   L as DropdownMenuSub,
-  w as DropdownMenuSubContent,
+  b as DropdownMenuSubContent,
   h as DropdownMenuSubTrigger,
   G as DropdownMenuTrigger
 };

package/dist/components/feedback/popover/popover.js

@@ -34,7 +34,7 @@ const B = (o) => /* @__PURE__ */ e(
       "aria-label": s ?? v("aria.popover"),
       "data-component": "popover-content",
       className: n(
-        "z-[100] min-w-[240px] rounded-xl border bg-canvas-overlay p-3 text-canvas-overlay-foreground shadow-md outline-none overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin] pointer-events-auto motion-reduce:animate-none motion-reduce:transition-none",
+        "z-50 min-w-[240px] rounded-xl border bg-canvas-overlay p-3 text-canvas-overlay-foreground shadow-md outline-none overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin] pointer-events-auto motion-reduce:animate-none motion-reduce:transition-none",
         o
       ),
       ...r

package/dist/components/feedback/sheet/sheet.js

@@ -153,7 +153,7 @@ const G = S("sheet", {
   "description",
   "SheetDescription",
   t.Description,
-  "text-sm text-muted-foreground"
+  "text-sm text-content-secondary"
 );
 export {
   V as Sheet,

package/dist/components/feedback/tooltip/tooltip.js

@@ -1,45 +1,45 @@
 import { jsx as i, jsxs as m } from "react/jsx-runtime";
 import * as s from "react";
-import * as o from "@radix-ui/react-tooltip";
+import * as r from "@radix-ui/react-tooltip";
 import { wrapRadixPart as c } from "../../../lib/primitives/create-compound.js";
 import { cn as a } from "../../../lib/utils.js";
 import { tooltipVariants as f } from "./tooltip.variants.js";
-function u(t) {
-  return t === "primary" ? "default" : t ?? "default";
+function g(t) {
+  return t === "primary" ? "default" : t ?? "tertiary";
 }
-const x = o.Provider, N = (t) => /* @__PURE__ */ i(o.Root, { "data-component": "tooltip", ...t }), R = c(
+const x = r.Provider, N = (t) => /* @__PURE__ */ i(r.Root, { "data-component": "tooltip", ...t }), R = c(
   "tooltip",
   "trigger",
   "TooltipTrigger",
-  o.Trigger
-), g = s.forwardRef(
+  r.Trigger
+), u = s.forwardRef(
   ({
     className: t,
     sideOffset: n = 4,
-    variant: l = "default",
-    showArrow: d = !0,
+    variant: l = "tertiary",
+    showArrow: p = !0,
     ...e
-  }, p) => {
-    const r = u(l);
-    return /* @__PURE__ */ i(o.Portal, { children: /* @__PURE__ */ m(
-      o.Content,
+  }, d) => {
+    const o = g(l);
+    return /* @__PURE__ */ i(r.Portal, { children: /* @__PURE__ */ m(
+      r.Content,
       {
-        ref: p,
+        ref: d,
         sideOffset: n,
         "data-component": "tooltip-content",
-        "data-variant": r,
-        className: a(f({ variant: r }), t),
+        "data-variant": o,
+        className: a(f({ variant: o }), t),
         ...e,
         children: [
           e.children,
-          d && /* @__PURE__ */ i(
-            o.Arrow,
+          p && /* @__PURE__ */ i(
+            r.Arrow,
             {
               className: a(
                 "fill-current",
-                r === "default" && "fill-brand",
-                r === "secondary" && "fill-background stroke-border",
-                r === "tertiary" && "fill-foreground"
+                o === "default" && "fill-brand",
+                o === "secondary" && "fill-background stroke-border",
+                o === "tertiary" && "fill-foreground"
               )
             }
           )
@@ -48,10 +48,10 @@ const x = o.Provider, N = (t) => /* @__PURE__ */ i(o.Root, { "data-component": "
     ) });
   }
 );
-g.displayName = o.Content.displayName;
+u.displayName = r.Content.displayName;
 export {
   N as Tooltip,
-  g as TooltipContent,
+  u as TooltipContent,
   x as TooltipProvider,
   R as TooltipTrigger
 };

package/dist/components/feedback/tooltip/tooltip.variants.js

@@ -10,7 +10,7 @@ const o = t(
       }
     },
     defaultVariants: {
-      variant: "default"
+      variant: "tertiary"
     }
   }
 );