@devalok/shilp-sutra 0.33.1 → 0.34.0

package/dist/composed/multi-select-popover.js

@@ -156,7 +156,7 @@ const V = r.forwardRef(
                   onKeyDown: B,
                   "aria-label": "Search",
                   "aria-activedescendant": a >= 0 ? `msp-item-${a}` : void 0,
-                  className: "w-full bg-transparent text-ds-md font-body text-surface-fg placeholder:text-surface-fg-subtle outline-none"
+                  className: "w-full bg-transparent text-ds-md font-body text-surface-fg placeholder:text-surface-fg-subtle outline-hidden"
                 }
               ),
               S && /* @__PURE__ */ n(_, { size: "sm" })

package/dist/composed/page-header.js

@@ -1,6 +1,6 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import * as o from "react";
-import { cn as d } from "../ui/lib/utils.js";
+import { cn as n } from "../ui/lib/utils.js";
 const x = o.forwardRef(
   ({ title: c, subtitle: r, actions: a, breadcrumbs: s, titleClassName: f, className: h, ...g }, m) => {
     const i = c ?? s?.[s.length - 1]?.label ?? "";
@@ -8,14 +8,14 @@ const x = o.forwardRef(
       "div",
       {
         ref: m,
-        className: d(
+        className: n(
           "flex flex-col gap-ds-05 border-b border-surface-border-strong pb-ds-06",
           h
         ),
         ...g,
         children: [
-          s && s.length > 0 && /* @__PURE__ */ e("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-ds-02b", children: s.map((t, n) => /* @__PURE__ */ l(o.Fragment, { children: [
-            n > 0 && /* @__PURE__ */ e(
+          s && s.length > 0 && /* @__PURE__ */ e("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-ds-02b", children: s.map((t, d) => /* @__PURE__ */ l(o.Fragment, { children: [
+            d > 0 && /* @__PURE__ */ e(
               "svg",
               {
                 width: 16,
@@ -35,26 +35,26 @@ const x = o.forwardRef(
               "a",
               {
                 href: t.href,
-                className: "text-ds-sm text-surface-fg-subtle transition-colors hover:text-surface-fg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 rounded-ds-sm",
+                className: "text-ds-sm text-surface-fg-subtle transition-colors hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 rounded-ds-sm",
                 children: t.label
               }
             ) : /* @__PURE__ */ e(
               "span",
               {
-                className: d(
+                className: n(
                   "text-ds-sm",
-                  n === s.length - 1 ? "text-surface-fg" : "text-surface-fg-subtle"
+                  d === s.length - 1 ? "text-surface-fg" : "text-surface-fg-subtle"
                 ),
                 children: t.label
               }
             )
-          ] }, n)) }),
+          ] }, d)) }),
           (i || r || a) && /* @__PURE__ */ l("div", { className: "flex items-start justify-between gap-ds-05", children: [
             /* @__PURE__ */ l("div", { className: "flex flex-col gap-ds-02b", children: [
               i && /* @__PURE__ */ e(
                 "h1",
                 {
-                  className: d(
+                  className: n(
                     "text-ds-2xl font-semibold text-surface-fg",
                     f
                   ),

package/dist/composed/rich-chat-input.js

@@ -226,7 +226,7 @@ function nt({ value: r, onChange: n }) {
       {
         value: t,
         onChange: (o) => d(Number(o.target.value)),
-        className: "h-ds-sm rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02 text-ds-sm text-surface-fg focus:outline-none focus:ring-2 focus:ring-accent-9",
+        className: "h-ds-sm rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02 text-ds-sm text-surface-fg focus:outline-hidden focus:ring-2 focus:ring-accent-9",
         "aria-label": "Hour",
         children: Array.from({ length: 12 }, (o, c) => c + 1).map((o) => /* @__PURE__ */ e("option", { value: o, children: o }, o))
       }
@@ -237,7 +237,7 @@ function nt({ value: r, onChange: n }) {
       {
         value: i - i % 5,
         onChange: (o) => u(Number(o.target.value)),
-        className: "h-ds-sm rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02 text-ds-sm text-surface-fg focus:outline-none focus:ring-2 focus:ring-accent-9",
+        className: "h-ds-sm rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02 text-ds-sm text-surface-fg focus:outline-hidden focus:ring-2 focus:ring-accent-9",
         "aria-label": "Minute",
         children: Array.from({ length: 12 }, (o, c) => c * 5).map((o) => /* @__PURE__ */ e("option", { value: o, children: String(o).padStart(2, "0") }, o))
       }
@@ -294,7 +294,7 @@ function kr({
           value: d,
           min: f,
           onChange: u,
-          className: "h-ds-sm rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-03 text-ds-sm text-surface-fg focus:outline-none focus:ring-2 focus:ring-accent-9"
+          className: "h-ds-sm rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-03 text-ds-sm text-surface-fg focus:outline-hidden focus:ring-2 focus:ring-accent-9"
         }
       )
     ] }),
@@ -1007,7 +1007,7 @@ const ot = a.forwardRef(
               onClick: k,
               onKeyDown: T,
               "aria-label": c ? "Pause voice message" : "Play voice message",
-              className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-ds-full bg-accent-9 text-accent-fg hover:bg-accent-10 active:scale-95 transition-colors duration-fast-01 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2",
+              className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-ds-full bg-accent-9 text-accent-fg hover:bg-accent-10 active:scale-95 transition-colors duration-fast-01 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2",
               children: c ? /* @__PURE__ */ e(er, { size: 16, stroke: 2, "aria-hidden": "true" }) : /* @__PURE__ */ e(tr, { size: 16, stroke: 2, "aria-hidden": "true" })
             }
           ),
@@ -1033,7 +1033,7 @@ const ot = a.forwardRef(
               type: "button",
               onClick: A,
               "aria-label": `Playback speed ${M}x`,
-              className: "shrink-0 text-ds-xs bg-surface-raised rounded-ds-full px-ds-02 py-[1px] hover:bg-surface-raised-hover tabular-nums transition-colors duration-fast-01 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2",
+              className: "shrink-0 text-ds-xs bg-surface-raised rounded-ds-full px-ds-02 py-[1px] hover:bg-surface-raised-hover tabular-nums transition-colors duration-fast-01 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2",
               children: [
                 M,
                 "x"
@@ -1141,7 +1141,7 @@ const Wr = {
   minimal: { minHeight: 44, maxHeight: 128, showToolbar: !1, toolbarPosition: "bottom" },
   inline: { minHeight: 40, maxHeight: 160, showToolbar: !1, toolbarPosition: "top" }
 }, Vr = [
-  "prose prose-sm max-w-none focus:outline-none",
+  "prose prose-sm max-w-none focus:outline-hidden",
   "font-body text-ds-md leading-relaxed text-surface-fg",
   "[&_p.is-editor-empty:first-child]:relative",
   "[&_p.is-editor-empty:first-child::before]:text-surface-fg-subtle [&_p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)] [&_p.is-editor-empty:first-child::before]:pointer-events-none [&_p.is-editor-empty:first-child::before]:absolute [&_p.is-editor-empty:first-child::before]:left-0 [&_p.is-editor-empty:first-child::before]:top-0 [&_p.is-editor-empty:first-child::before]:w-full [&_p.is-editor-empty:first-child::before]:truncate",
@@ -1151,7 +1151,7 @@ const Wr = {
   "[&_li]:text-surface-fg",
   "[&_code]:rounded [&_code]:bg-surface-raised [&_code]:px-ds-02 [&_code]:py-[1px] [&_code]:text-ds-md [&_code]:text-accent-11",
   "[&_strong]:font-semibold [&_strong]:text-surface-fg",
-  "[&_mark]:rounded-sm [&_mark]:bg-warning-3 [&_mark]:px-[2px]",
+  "[[&_mark]:rounded-sm_mark]:rounded-xs [&_mark]:bg-warning-3 [&_mark]:px-[2px]",
   "[&_a]:text-accent-11 [&_a]:underline",
   "[&_.mention]:rounded-ds-sm [&_.mention]:bg-accent-2 [&_.mention]:px-ds-02 [&_.mention]:py-[1px] [&_.mention]:font-medium [&_.mention]:text-accent-11"
 ].join(" ");
@@ -1591,7 +1591,7 @@ const Jr = a.forwardRef(
                     {
                       ref: ut,
                       className: z(
-                        "flex items-center px-ds-04 py-ds-03 cursor-text [&_.tiptap]:w-full [&_.tiptap]:outline-none",
+                        "flex items-center px-ds-04 py-ds-03 cursor-text [&_.tiptap]:w-full [&_.tiptap]:outline-hidden",
                         D === "recording" && "invisible"
                       ),
                       style: {

package/dist/composed/rich-text-editor.js

@@ -5,7 +5,7 @@ import { u as j, i as q, P as Q, a as D, L as U, b as M, c as O, d as K, E as $,
 import { F as W, E as X, a as Y, c as Z, l as G, b as F } from "../_chunks/mention-suggestion.js";
 import { useColorMode as ee } from "../hooks/use-color-mode.js";
 import { cn as L } from "../ui/lib/utils.js";
-import { IconBold as te, IconItalic as ie, IconUnderline as se, IconStrikethrough as ne, IconHighlight as re, IconH2 as oe, IconH3 as le, IconBlockquote as ce, IconList as ae, IconListNumbers as de, IconListCheck as ue, IconCode as fe, IconPhoto as he, IconPaperclip as ge, IconLineDashed as me, IconAlignLeft as be, IconAlignCenter as pe, IconAlignRight as ke, IconMoodSmile as ve, IconArrowBackUp as xe, IconArrowForwardUp as Ae, IconLink as _e } from "@tabler/icons-react";
+import { IconBold as te, IconItalic as ie, IconUnderline as se, IconStrikethrough as ne, IconHighlight as re, IconH2 as oe, IconH3 as le, IconBlockquote as ce, IconList as ae, IconListNumbers as de, IconListCheck as ue, IconCode as fe, IconPhoto as he, IconPaperclip as ge, IconLineDashed as me, IconAlignLeft as be, IconAlignCenter as pe, IconAlignRight as ke, IconMoodSmile as ve, IconArrowBackUp as xe, IconArrowForwardUp as _e, IconLink as Ae } from "@tabler/icons-react";
 import { Icon as l } from "../ui/icon.js";
 const J = [
   "prose prose-sm max-w-none",
@@ -19,7 +19,7 @@ const J = [
   "[&_pre]:rounded-ds-lg [&_pre]:bg-surface-raised [&_pre]:p-ds-04",
   "[&_strong]:font-semibold [&_strong]:text-surface-fg",
   "[&_blockquote]:border-l-[3px] [&_blockquote]:border-accent-6 [&_blockquote]:pl-ds-04 [&_blockquote]:italic [&_blockquote]:text-surface-fg-subtle",
-  "[&_mark]:rounded-sm [&_mark]:bg-warning-3 [&_mark]:px-[2px]",
+  "[[&_mark]:rounded-sm_mark]:rounded-xs [&_mark]:bg-warning-3 [&_mark]:px-[2px]",
   '[&_ul[data-type="taskList"]]:ml-0 [&_ul[data-type="taskList"]]:list-none [&_li[data-type="taskItem"]]:flex [&_li[data-type="taskItem"]]:items-start [&_li[data-type="taskItem"]]:gap-ds-02',
   "[&_hr]:my-ds-04 [&_hr]:border-surface-border-strong",
   "[&_a]:text-accent-11 [&_a]:underline [&_a]:decoration-accent-6 hover:[&_a]:decoration-accent-11",
@@ -65,7 +65,7 @@ function Le({ editor: i }) {
       }
       const m = i.getAttributes("link").href || "";
       g(m), f(!0), setTimeout(() => n.current?.focus(), 0);
-    }, isActive: t, title: "Link", children: /* @__PURE__ */ e(l, { icon: _e, size: "sm" }) }),
+    }, isActive: t, title: "Link", children: /* @__PURE__ */ e(l, { icon: Ae, size: "sm" }) }),
     u && /* @__PURE__ */ y(
       "form",
       {
@@ -86,7 +86,7 @@ function Le({ editor: i }) {
                 m.key === "Escape" && (f(!1), g(""), i.commands.focus());
               },
               placeholder: "https://...",
-              className: "h-ds-sm w-[240px] rounded-ds-sm border border-surface-border-strong bg-surface-overlay px-ds-03 text-ds-sm text-surface-fg focus:border-accent-7 focus:outline-none"
+              className: "h-ds-sm w-[240px] rounded-ds-sm border border-surface-border-strong bg-surface-overlay px-ds-03 text-ds-sm text-surface-fg focus:border-accent-7 focus:outline-hidden"
             }
           ),
           /* @__PURE__ */ e("button", { type: "submit", className: "h-ds-sm rounded-ds-sm bg-accent-9 px-ds-03 text-ds-sm text-accent-fg hover:bg-accent-10", children: "Apply" })
@@ -95,7 +95,7 @@ function Le({ editor: i }) {
     )
   ] });
 }
-function _() {
+function A() {
   return /* @__PURE__ */ e("div", { className: "mx-ds-02 h-[16px] w-px bg-surface-border" });
 }
 function ye({ editor: i, toolbar: u, onImageClick: f, onFileClick: h, onEmojiClick: g }) {
@@ -121,35 +121,35 @@ function ye({ editor: i, toolbar: u, onImageClick: f, onFileClick: h, onEmojiCli
       canUndo: o.can().undo(),
       canRedo: o.can().redo()
     })
-  }), t = (o) => !u || u.includes(o), A = t("bold") || t("italic") || t("underline") || t("strike") || t("highlight"), p = t("h2") || t("h3") || t("blockquote"), k = t("bulletList") || t("orderedList") || t("taskList") || t("codeBlock"), m = t("link") || !!f && t("image") || !!h && t("file") || t("hr"), C = t("alignLeft") || t("alignCenter") || t("alignRight"), v = !!g && t("emoji"), R = t("undo") || t("redo");
+  }), t = (o) => !u || u.includes(o), _ = t("bold") || t("italic") || t("underline") || t("strike") || t("highlight"), p = t("h2") || t("h3") || t("blockquote"), k = t("bulletList") || t("orderedList") || t("taskList") || t("codeBlock"), m = t("link") || !!f && t("image") || !!h && t("file") || t("hr"), C = t("alignLeft") || t("alignCenter") || t("alignRight"), v = !!g && t("emoji"), R = t("undo") || t("redo");
   return /* @__PURE__ */ y("div", { role: "toolbar", "aria-label": "Text formatting", className: "flex flex-wrap items-center gap-ds-01 border-b border-surface-border-strong px-ds-04 py-ds-02b", children: [
     t("bold") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleBold().run(), isActive: n.isBold, title: "Bold", children: /* @__PURE__ */ e(l, { icon: te, size: "sm", stroke: "bold" }) }),
     t("italic") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleItalic().run(), isActive: n.isItalic, title: "Italic", children: /* @__PURE__ */ e(l, { icon: ie, size: "sm", stroke: "bold" }) }),
     t("underline") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleUnderline().run(), isActive: n.isUnderline, title: "Underline", children: /* @__PURE__ */ e(l, { icon: se, size: "sm", stroke: "bold" }) }),
     t("strike") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleStrike().run(), isActive: n.isStrike, title: "Strikethrough", children: /* @__PURE__ */ e(l, { icon: ne, size: "sm", stroke: "bold" }) }),
     t("highlight") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleHighlight().run(), isActive: n.isHighlight, title: "Highlight", children: /* @__PURE__ */ e(l, { icon: re, size: "sm", stroke: "bold" }) }),
-    A && p && /* @__PURE__ */ e(_, {}),
+    _ && p && /* @__PURE__ */ e(A, {}),
     t("h2") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleHeading({ level: 2 }).run(), isActive: n.isH2, title: "Heading 2", children: /* @__PURE__ */ e(l, { icon: oe, size: "sm", stroke: "bold" }) }),
     t("h3") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleHeading({ level: 3 }).run(), isActive: n.isH3, title: "Heading 3", children: /* @__PURE__ */ e(l, { icon: le, size: "sm", stroke: "bold" }) }),
     t("blockquote") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleBlockquote().run(), isActive: n.isBlockquote, title: "Blockquote", children: /* @__PURE__ */ e(l, { icon: ce, size: "sm", stroke: "bold" }) }),
-    p && k && /* @__PURE__ */ e(_, {}),
+    p && k && /* @__PURE__ */ e(A, {}),
     t("bulletList") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleBulletList().run(), isActive: n.isBulletList, title: "Bullet list", children: /* @__PURE__ */ e(l, { icon: ae, size: "sm", stroke: "bold" }) }),
     t("orderedList") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleOrderedList().run(), isActive: n.isOrderedList, title: "Ordered list", children: /* @__PURE__ */ e(l, { icon: de, size: "sm", stroke: "bold" }) }),
     t("taskList") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleTaskList().run(), isActive: n.isTaskList, title: "Task list", children: /* @__PURE__ */ e(l, { icon: ue, size: "sm", stroke: "bold" }) }),
     t("codeBlock") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().toggleCodeBlock().run(), isActive: n.isCodeBlock, title: "Code block", children: /* @__PURE__ */ e(l, { icon: fe, size: "sm", stroke: "bold" }) }),
-    k && m && /* @__PURE__ */ e(_, {}),
+    k && m && /* @__PURE__ */ e(A, {}),
     t("link") && /* @__PURE__ */ e(Le, { editor: i }),
     f && t("image") && /* @__PURE__ */ e(c, { onClick: f, title: "Insert image", children: /* @__PURE__ */ e(l, { icon: he, size: "sm" }) }),
     h && t("file") && /* @__PURE__ */ e(c, { onClick: h, title: "Attach file", children: /* @__PURE__ */ e(l, { icon: ge, size: "sm" }) }),
     t("hr") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().setHorizontalRule().run(), title: "Horizontal rule", children: /* @__PURE__ */ e(l, { icon: me, size: "sm" }) }),
-    m && C && /* @__PURE__ */ e(_, {}),
+    m && C && /* @__PURE__ */ e(A, {}),
     t("alignLeft") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().setTextAlign("left").run(), isActive: n.isAlignLeft, title: "Align left", children: /* @__PURE__ */ e(l, { icon: be, size: "sm" }) }),
     t("alignCenter") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().setTextAlign("center").run(), isActive: n.isAlignCenter, title: "Align center", children: /* @__PURE__ */ e(l, { icon: pe, size: "sm" }) }),
     t("alignRight") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().setTextAlign("right").run(), isActive: n.isAlignRight, title: "Align right", children: /* @__PURE__ */ e(l, { icon: ke, size: "sm" }) }),
-    C && (v || R) && /* @__PURE__ */ e(_, {}),
+    C && (v || R) && /* @__PURE__ */ e(A, {}),
     g && t("emoji") && /* @__PURE__ */ e(c, { onClick: g, title: "Emoji", children: /* @__PURE__ */ e(l, { icon: ve, size: "sm" }) }),
     t("undo") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().undo().run(), disabled: !n.canUndo, title: "Undo", children: /* @__PURE__ */ e(l, { icon: xe, size: "sm" }) }),
-    t("redo") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().redo().run(), disabled: !n.canRedo, title: "Redo", children: /* @__PURE__ */ e(l, { icon: Ae, size: "sm" }) })
+    t("redo") && /* @__PURE__ */ e(c, { onClick: () => i.chain().focus().redo().run(), disabled: !n.canRedo, title: "Redo", children: /* @__PURE__ */ e(l, { icon: _e, size: "sm" }) })
   ] });
 }
 const Ce = d.lazy(() => import("@emoji-mart/react"));
@@ -179,7 +179,7 @@ const Ie = d.forwardRef(
     className: g,
     editable: n = !0,
     toolbar: t,
-    onImageUpload: A,
+    onImageUpload: _,
     onFileUpload: p,
     mentions: k,
     onMentionSearch: m,
@@ -190,8 +190,8 @@ const Ie = d.forwardRef(
     const z = d.useRef(null), T = d.useRef(!1), [E, w] = d.useState(!1), B = d.useRef(null), N = d.useRef(null), P = d.useRef(null), H = async (s) => {
       const r = z.current;
       if (r)
-        if (A) {
-          const a = await A(s);
+        if (_) {
+          const a = await _(s);
           a && /^https?:\/\//i.test(a) && r.chain().focus().setImage({ src: a }).run();
         } else {
           const a = new FileReader();
@@ -276,7 +276,7 @@ const Ie = d.forwardRef(
         attributes: {
           class: L(
             ...J,
-            "focus:outline-none",
+            "focus:outline-hidden",
             "min-h-[120px] px-ds-04 py-ds-04"
           )
         }

package/dist/shell/top-bar.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsx as e, jsxs as n, Fragment as j } from "react/jsx-runtime";
+import { jsx as e, jsxs as d, Fragment as j } from "react/jsx-runtime";
 import * as c from "react";
 import { useColorMode as D } from "../hooks/use-color-mode.js";
 import { Avatar as U, AvatarImage as z, AvatarFallback as A } from "../ui/avatar.js";
-import { DropdownMenu as L, DropdownMenuTrigger as S, DropdownMenuContent as F, DropdownMenuItem as f, DropdownMenuSeparator as x } from "../ui/dropdown-menu.js";
-import { Tooltip as h, TooltipTrigger as b, TooltipContent as N } from "../ui/tooltip.js";
+import { DropdownMenu as L, DropdownMenuTrigger as S, DropdownMenuContent as F, DropdownMenuItem as f, DropdownMenuSeparator as h } from "../ui/dropdown-menu.js";
+import { Tooltip as x, TooltipTrigger as b, TooltipContent as N } from "../ui/tooltip.js";
 import { IconUser as O, IconSun as _, IconMoon as E, IconLogout as P } from "@tabler/icons-react";
 import { Icon as p } from "../ui/icon.js";
-import { cn as d } from "../ui/lib/utils.js";
+import { cn as n } from "../ui/lib/utils.js";
 const w = c.forwardRef(
   ({ className: r, children: s, ...o }, t) => {
     const l = c.Children.toArray(s).some(
@@ -18,7 +18,7 @@ const w = c.forwardRef(
       {
         ...o,
         ref: t,
-        className: d(
+        className: n(
           "z-sticky w-full border-b border-surface-border-strong bg-surface-raised px-ds-05 py-ds-04 md:px-ds-06",
           l ? "grid grid-cols-[1fr_auto_1fr] items-center" : "flex items-center",
           r
@@ -34,7 +34,7 @@ const v = c.forwardRef(
     "div",
     {
       ref: t,
-      className: d("flex items-center gap-ds-04", r),
+      className: n("flex items-center gap-ds-04", r),
       ...o,
       children: s
     }
@@ -46,7 +46,7 @@ const m = c.forwardRef(
     "div",
     {
       ref: t,
-      className: d("flex items-center justify-center px-ds-04", r),
+      className: n("flex items-center justify-center px-ds-04", r),
       ...o,
       children: s
     }
@@ -58,7 +58,7 @@ const y = c.forwardRef(
     "div",
     {
       ref: t,
-      className: d("ml-auto flex items-center gap-ds-04", r),
+      className: n("ml-auto flex items-center gap-ds-04", r),
       ...o,
       children: s
     }
@@ -74,21 +74,21 @@ const V = {
     "div",
     {
       ref: l,
-      className: d("flex items-center", V[r], s),
+      className: n("flex items-center", V[r], s),
       ...t,
       children: o
     }
   )
 );
 T.displayName = "TopBar.Section";
-const B = c.forwardRef(({ icon: r, tooltip: s, className: o, ...t }, l) => /* @__PURE__ */ n(h, { children: [
+const B = c.forwardRef(({ icon: r, tooltip: s, className: o, ...t }, l) => /* @__PURE__ */ d(x, { children: [
   /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ e(
     "button",
     {
       ref: l,
       type: "button",
       "aria-label": s,
-      className: d(
+      className: n(
         "flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-surface-border-strong bg-surface-raised-hover text-surface-fg-muted transition-[color,background-color,border-color,transform] hover:bg-surface-raised-active active:scale-90 duration-fast-01 ease-productive-standard",
         o
       ),
@@ -104,7 +104,7 @@ const C = c.forwardRef(
     "h2",
     {
       ref: t,
-      className: d(
+      className: n(
         "hidden text-ds-lg text-surface-fg md:block",
         r
       ),
@@ -117,15 +117,15 @@ C.displayName = "TopBar.Title";
 const M = c.forwardRef(
   ({ user: r, onNavigate: s, onLogout: o, userMenuItems: t, className: l }, i) => {
     const { colorMode: u, toggleColorMode: k } = D();
-    return /* @__PURE__ */ n(L, { children: [
-      /* @__PURE__ */ n(h, { children: [
+    return /* @__PURE__ */ d(L, { children: [
+      /* @__PURE__ */ d(x, { children: [
         /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ e(S, { asChild: !0, children: /* @__PURE__ */ e(
           "button",
           {
             ref: i,
             type: "button",
-            className: d("flex items-center gap-ds-03 outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", l),
-            children: /* @__PURE__ */ n(U, { className: "h-ds-sm-plus w-ds-sm-plus cursor-pointer", children: [
+            className: n("flex items-center gap-ds-03 outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", l),
+            children: /* @__PURE__ */ d(U, { className: "h-ds-sm-plus w-ds-sm-plus cursor-pointer", children: [
               r.image ? /* @__PURE__ */ e(z, { src: r.image, alt: r.name }) : null,
               /* @__PURE__ */ e(A, { className: "bg-surface-raised-hover text-surface-fg", children: r.name?.charAt(0).toUpperCase() })
             ] })
@@ -133,18 +133,18 @@ const M = c.forwardRef(
         ) }) }),
         /* @__PURE__ */ e(N, { side: "bottom", align: "center", children: "User Menu" })
       ] }),
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ d(
         F,
         {
           className: "w-[200px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating",
           sideOffset: 8,
           align: "end",
           children: [
-            /* @__PURE__ */ n("div", { className: "border-b border-surface-border-strong px-ds-05 py-ds-04", children: [
+            /* @__PURE__ */ d("div", { className: "border-b border-surface-border-strong px-ds-05 py-ds-04", children: [
               /* @__PURE__ */ e("p", { className: "text-ds-md text-surface-fg", children: r.name }),
               r.email && /* @__PURE__ */ e("p", { className: "text-ds-sm text-surface-fg-subtle truncate", children: r.email })
             ] }),
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ d(
               f,
               {
                 className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
@@ -162,12 +162,12 @@ const M = c.forwardRef(
                 warning: "text-warning-11",
                 info: "text-info-11"
               }, g = a.color ? I[a.color] ?? "text-surface-fg-muted" : "text-surface-fg-muted";
-              return /* @__PURE__ */ n(c.Fragment, { children: [
-                a.separator && /* @__PURE__ */ e(x, { className: "bg-surface-border" }),
-                /* @__PURE__ */ n(
+              return /* @__PURE__ */ d(c.Fragment, { children: [
+                a.separator && /* @__PURE__ */ e(h, { className: "bg-surface-border" }),
+                /* @__PURE__ */ d(
                   f,
                   {
-                    className: d(
+                    className: n(
                       "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
                       a.disabled && "pointer-events-none opacity-action-disabled"
                     ),
@@ -179,21 +179,21 @@ const M = c.forwardRef(
                       a.icon && /* @__PURE__ */ e(
                         "span",
                         {
-                          className: d(
+                          className: n(
                             "[&>svg]:h-ico-sm [&>svg]:w-ico-sm",
                             g
                           ),
                           children: a.icon
                         }
                       ),
-                      /* @__PURE__ */ e("span", { className: d("text-ds-md", g), children: a.label }),
+                      /* @__PURE__ */ e("span", { className: n("text-ds-md", g), children: a.label }),
                       a.badge != null && a.badge !== !1 && (typeof a.badge == "string" ? /* @__PURE__ */ e("span", { className: "ml-auto inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-ds-full bg-error-9 px-ds-02 text-[10px] font-semibold leading-none text-accent-fg", children: a.badge }) : /* @__PURE__ */ e("span", { className: "ml-auto h-[8px] w-[8px] rounded-ds-full bg-error-9" }))
                     ]
                   }
                 )
               ] }, a.label + R);
             }),
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ d(
               f,
               {
                 className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
@@ -204,9 +204,9 @@ const M = c.forwardRef(
                 ]
               }
             ),
-            o && /* @__PURE__ */ n(j, { children: [
-              /* @__PURE__ */ e(x, { className: "bg-surface-border" }),
-              /* @__PURE__ */ n(
+            o && /* @__PURE__ */ d(j, { children: [
+              /* @__PURE__ */ e(h, { className: "bg-surface-border" }),
+              /* @__PURE__ */ d(
                 f,
                 {
                   className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",

package/dist/tailwind/index.cjs

@@ -33,17 +33,8 @@ __export(preset_exports, {
 module.exports = __toCommonJS(preset_exports);
 var import_plugin = __toESM(require("tailwindcss/plugin"), 1);
 const s = {
-  /**
-   * Dark mode uses the `.dark` class strategy. If your app uses `darkMode: 'media'`,
-   * set it explicitly in your own tailwind.config — your config takes precedence.
-   */
-  darkMode: "class",
-  safelist: [
-    "py-ds-02",
-    "py-ds-03",
-    "py-ds-05",
-    "py-ds-07"
-  ],
+  // TW4: darkMode is now configured via @variant in CSS, not here.
+  // TW4: safelist removed — use @source inline() in CSS if needed.
   theme: {
     extend: {
       // Breakpoints must be static values — CSS custom properties cannot be used

package/dist/tailwind/preset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGzC,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CAud3B,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGzC,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CAid3B,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/tailwind/preset.js

@@ -1,16 +1,7 @@
 import e from "tailwindcss/plugin";
 const s = {
-  /**
-   * Dark mode uses the `.dark` class strategy. If your app uses `darkMode: 'media'`,
-   * set it explicitly in your own tailwind.config — your config takes precedence.
-   */
-  darkMode: "class",
-  safelist: [
-    "py-ds-02",
-    "py-ds-03",
-    "py-ds-05",
-    "py-ds-07"
-  ],
+  // TW4: darkMode is now configured via @variant in CSS, not here.
+  // TW4: safelist removed — use @source inline() in CSS if needed.
   theme: {
     extend: {
       // Breakpoints must be static values — CSS custom properties cannot be used

package/dist/ui/accordion.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as o, jsxs as f } from "react/jsx-runtime";
 import * as s from "react";
-import { I as l, H as p, T as d, C as c, R as u } from "../_chunks/primitives.js";
+import { I as l, H as p, T as n, C as c, R as u } from "../_chunks/primitives.js";
 import { IconChevronDown as g } from "@tabler/icons-react";
 import { Icon as b } from "./icon.js";
 import { cn as i } from "./lib/utils.js";
-import { tweens as N } from "./lib/motion.js";
-import { m as h } from "../_chunks/framer.js";
+import { tweens as h } from "./lib/motion.js";
+import { m as N } from "../_chunks/framer.js";
 const H = u, x = s.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ o(
   l,
   {
@@ -17,25 +17,25 @@ const H = u, x = s.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ o(
 ));
 x.displayName = "AccordionItem";
 const v = s.forwardRef(({ className: a, children: r, chevronPosition: e = "right", ...t }, m) => {
-  const n = /* @__PURE__ */ o(b, { icon: g, size: "sm", className: "shrink-0 text-surface-fg-muted transition-transform duration-moderate-02 ease-productive-standard group-data-[state=open]:rotate-180" });
+  const d = /* @__PURE__ */ o(b, { icon: g, size: "sm", className: "shrink-0 text-surface-fg-muted transition-transform duration-moderate-02 ease-productive-standard group-data-[state=open]:rotate-180" });
   return /* @__PURE__ */ o(p, { className: "flex", children: /* @__PURE__ */ f(
-    d,
+    n,
     {
       ref: m,
       className: i(
-        "group flex flex-1 items-center justify-between py-ds-05 text-left text-ds-md font-medium hover:bg-surface-raised rounded-ds-md data-[state=open]:bg-surface-raised focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9",
+        "group flex flex-1 items-center justify-between py-ds-05 text-left text-ds-md font-medium hover:bg-surface-raised rounded-ds-md data-[state=open]:bg-surface-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9",
         a
       ),
       ...t,
       children: [
-        e === "left" && n,
+        e === "left" && d,
         r,
-        e === "right" && n
+        e === "right" && d
       ]
     }
   ) });
 });
-v.displayName = d.displayName;
+v.displayName = n.displayName;
 const w = s.forwardRef(({ className: a, children: r, ...e }, t) => /* @__PURE__ */ o(
   c,
   {
@@ -43,11 +43,11 @@ const w = s.forwardRef(({ className: a, children: r, ...e }, t) => /* @__PURE__
     className: "w-full overflow-hidden text-ds-md data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up",
     ...e,
     children: /* @__PURE__ */ o(
-      h.div,
+      N.div,
       {
         initial: !1,
         animate: { opacity: 1 },
-        transition: N.fade,
+        transition: h.fade,
         children: /* @__PURE__ */ o("div", { className: i("pb-ds-05 pt-ds-02", a), children: r })
       }
     )

package/dist/ui/alert-dialog.js

@@ -11,13 +11,13 @@ const v = o.createContext({ open: !1 }), P = () => o.useContext(v), T = ({
   onOpenChange: t,
   ...r
 }) => {
-  const [l, A] = o.useState(a ?? !1), n = e !== void 0, d = n ? e : l, D = o.useCallback(
+  const [l, A] = o.useState(a ?? !1), n = e !== void 0, d = n ? e : l, h = o.useCallback(
     (c) => {
       n || A(c), t?.(c);
     },
     [n, t]
-  ), h = o.useMemo(() => ({ open: d }), [d]);
-  return /* @__PURE__ */ s(v.Provider, { value: h, children: /* @__PURE__ */ s(R, { open: d, onOpenChange: D, ...r }) });
+  ), D = o.useMemo(() => ({ open: d }), [d]);
+  return /* @__PURE__ */ s(v.Provider, { value: D, children: /* @__PURE__ */ s(R, { open: d, onOpenChange: h, ...r }) });
 };
 T.displayName = "AlertDialog";
 const L = O, z = C, N = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ s(
@@ -125,7 +125,7 @@ const V = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ s(
   {
     ref: t,
     className: i(
-      "inline-flex h-ds-md items-center justify-center rounded-ds-md px-ds-05 text-ds-md font-semibold transition-colors bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-raised focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled",
+      "inline-flex h-ds-md items-center justify-center rounded-ds-md px-ds-05 text-ds-md font-semibold transition-colors bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled",
       e
     ),
     ...a
@@ -137,7 +137,7 @@ const q = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ s(
   {
     ref: t,
     className: i(
-      "inline-flex h-ds-md items-center justify-center rounded-ds-md px-ds-05 text-ds-md font-semibold transition-colors bg-transparent text-surface-fg-muted border border-surface-border-strong hover:bg-surface-raised hover:text-surface-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled",
+      "inline-flex h-ds-md items-center justify-center rounded-ds-md px-ds-05 text-ds-md font-semibold transition-colors bg-transparent text-surface-fg-muted border border-surface-border-strong hover:bg-surface-raised hover:text-surface-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled",
       e
     ),
     ...a

package/dist/ui/alert.js

@@ -84,7 +84,7 @@ const P = V(
             {
               type: "button",
               onClick: p,
-              className: "shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9",
+              className: "shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-95 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9",
               "aria-label": "Dismiss",
               children: /* @__PURE__ */ r(l, { icon: k, size: h })
             }

package/dist/ui/autocomplete.js

@@ -79,7 +79,7 @@ const z = {
           disabled: y,
           className: p(
             "flex h-ds-md w-full rounded-ds-md border border-surface-border-strong bg-surface-raised-hover px-ds-04 py-ds-03 font-sans text-ds-md text-surface-fg placeholder:text-surface-fg-subtle",
-            "outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-[var(--border-focus-offset)]",
+            "outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-[var(--border-focus-offset)]",
             "transition-colors duration-fast-01",
             y && "opacity-action-disabled cursor-not-allowed"
           ),