@devalok/shilp-sutra 0.33.2 → 0.34.0

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"
           ),

package/dist/ui/banner.js

@@ -28,8 +28,8 @@ const B = N(
   error: h,
   neutral: o
 }, j = r.forwardRef(
-  ({ className: a, color: s = "info", action: c, actions: l, onDismiss: n, children: d, ...m }, f) => {
-    const t = l ?? c, u = V[s ?? "info"], [b, p] = r.useState(!0), g = r.useCallback(() => {
+  ({ className: a, color: s = "info", action: c, actions: d, onDismiss: n, children: l, ...m }, f) => {
+    const t = d ?? c, u = V[s ?? "info"], [b, p] = r.useState(!0), g = r.useCallback(() => {
       p(!1);
     }, []);
     return /* @__PURE__ */ e(A, { onExitComplete: n, children: b && /* @__PURE__ */ x(
@@ -44,14 +44,14 @@ const B = N(
         ...k(m),
         children: [
           /* @__PURE__ */ e(i, { icon: u, size: "md", className: "shrink-0" }),
-          /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: d }),
+          /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: l }),
           t && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-ds-02 [&_button]:transition-colors [&_button]:duration-moderate-01 [&_button]:ease-productive-standard [&_button:hover]:bg-current/10", children: t }),
           n && /* @__PURE__ */ e(
             "button",
             {
               type: "button",
               onClick: g,
-              className: "shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm transition-colors duration-moderate-01 ease-productive-standard hover:bg-current/10 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 transition-colors duration-moderate-01 ease-productive-standard hover:bg-current/10 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9",
               "aria-label": "Dismiss",
               title: "Dismiss",
               children: /* @__PURE__ */ e(i, { icon: I, size: "sm" })

package/dist/ui/breadcrumb.js

@@ -2,12 +2,12 @@
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import { S as d } from "../_chunks/primitives.js";
 import { IconDots as n, IconChevronRight as l } from "@tabler/icons-react";
-import * as o from "react";
+import * as m from "react";
 import { cn as i } from "./lib/utils.js";
-import { Icon as m } from "./icon.js";
-const u = o.forwardRef(({ ...e }, r) => /* @__PURE__ */ s("nav", { ref: r, "aria-label": "breadcrumb", ...e }));
+import { Icon as o } from "./icon.js";
+const u = m.forwardRef(({ ...e }, r) => /* @__PURE__ */ s("nav", { ref: r, "aria-label": "breadcrumb", ...e }));
 u.displayName = "Breadcrumb";
-const f = o.forwardRef(
+const f = m.forwardRef(
   ({ className: e, ...r }, a) => /* @__PURE__ */ s(
     "ol",
     {
@@ -21,23 +21,23 @@ const f = o.forwardRef(
   )
 );
 f.displayName = "BreadcrumbList";
-const p = o.forwardRef(
+const p = m.forwardRef(
   ({ className: e, ...r }, a) => /* @__PURE__ */ s("li", { ref: a, className: i("inline-flex items-center gap-ds-03", e), ...r })
 );
 p.displayName = "BreadcrumbItem";
-const b = o.forwardRef(({ className: e, asChild: r = !1, ...a }, t) => /* @__PURE__ */ s(
+const b = m.forwardRef(({ className: e, asChild: r = !1, ...a }, t) => /* @__PURE__ */ s(
   r ? d : "a",
   {
     ref: t,
     className: i(
-      "transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 rounded-ds-sm",
+      "transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 rounded-ds-sm",
       e
     ),
     ...a
   }
 ));
 b.displayName = "BreadcrumbLink";
-const g = o.forwardRef(
+const g = m.forwardRef(
   ({ className: e, ...r }, a) => /* @__PURE__ */ s(
     "span",
     {
@@ -56,7 +56,7 @@ const B = ({ children: e, className: r, ...a }) => /* @__PURE__ */ s(
     "aria-hidden": "true",
     className: i("[&>svg]:h-ico-sm [&>svg]:w-ico-sm", r),
     ...a,
-    children: e ?? /* @__PURE__ */ s(m, { icon: l, size: "sm" })
+    children: e ?? /* @__PURE__ */ s(o, { icon: l, size: "sm" })
   }
 );
 B.displayName = "BreadcrumbSeparator";
@@ -68,7 +68,7 @@ const N = ({ className: e, ...r }) => /* @__PURE__ */ c(
     className: i("flex h-ds-sm-plus w-ds-sm-plus items-center justify-center", e),
     ...r,
     children: [
-      /* @__PURE__ */ s(m, { icon: n, size: "sm" }),
+      /* @__PURE__ */ s(o, { icon: n, size: "sm" }),
       /* @__PURE__ */ s("span", { className: "sr-only", children: "More" })
     ]
   }

package/dist/ui/button.js

@@ -13,7 +13,7 @@ import { cn as i } from "./lib/utils.js";
 import { Spinner as B } from "./spinner.js";
 import { u as je, m as Ie } from "../_chunks/framer.js";
 const H = be(
-  "relative inline-flex items-center justify-center whitespace-nowrap font-sans select-none overflow-hidden isolate 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 disabled:cursor-not-allowed disabled:saturate-[0.3] [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]",
+  "relative inline-flex items-center justify-center whitespace-nowrap font-sans select-none overflow-hidden isolate 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 disabled:cursor-not-allowed disabled:saturate-[0.3] [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]",
   {
     variants: {
       variant: {

package/dist/ui/checkbox.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as e } from "react/jsx-runtime";
 import { j as l, k as C } from "../_chunks/primitives.js";
-import * as n from "react";
+import * as i from "react";
 import { cn as v } from "./lib/utils.js";
-import { A as w, m as i } from "../_chunks/framer.js";
+import { A as w, m as n } from "../_chunks/framer.js";
 const y = {
   sm: "h-5 w-5",
   md: "h-6 w-6",
@@ -12,10 +12,10 @@ const y = {
   sm: "h-[14px] w-[14px]",
   md: "h-[18px] w-[18px]",
   lg: "h-5 w-5"
-}, j = n.forwardRef(({ className: u, error: m, indeterminate: a, size: o = "md", checked: s, onCheckedChange: c, defaultChecked: d, ...f }, p) => {
-  const t = s !== void 0, [b, k] = n.useState(
+}, j = i.forwardRef(({ className: u, error: m, indeterminate: a, size: o = "md", checked: s, onCheckedChange: c, defaultChecked: d, ...f }, p) => {
+  const t = s !== void 0, [b, k] = i.useState(
     a ? "indeterminate" : !!d
-  ), r = a ? "indeterminate" : t ? s : b, g = r === !0 || r === "indeterminate", x = n.useCallback(
+  ), r = a ? "indeterminate" : t ? s : b, g = r === !0 || r === "indeterminate", x = i.useCallback(
     (h) => {
       t || k(h), c?.(h);
     },
@@ -34,7 +34,7 @@ const y = {
         "border border-surface-border-strong",
         "bg-surface-raised-hover",
         "transition-colors duration-fast-01 ease-productive-standard",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2",
+        "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2",
         "disabled:cursor-not-allowed disabled:opacity-action-disabled",
         "data-[state=unchecked]:hover:border-accent-7 data-[state=unchecked]:hover:bg-surface-raised-active",
         "data-[state=checked]:bg-accent-9 data-[state=checked]:border-accent-7 data-[state=checked]:text-accent-fg",
@@ -44,7 +44,7 @@ const y = {
       ),
       ...f,
       children: /* @__PURE__ */ e(w, { children: g && /* @__PURE__ */ e(C, { forceMount: !0, asChild: !0, children: /* @__PURE__ */ e(
-        i.span,
+        n.span,
         {
           className: "flex items-center justify-center text-current",
           initial: { opacity: 0 },
@@ -60,7 +60,7 @@ const y = {
               fill: "none",
               className: L[o],
               children: r === "indeterminate" ? /* @__PURE__ */ e(
-                i.line,
+                n.line,
                 {
                   x1: "4",
                   y1: "8",
@@ -75,7 +75,7 @@ const y = {
                   transition: { duration: 0.24, ease: "easeOut" }
                 }
               ) : /* @__PURE__ */ e(
-                i.path,
+                n.path,
                 {
                   d: "M3.5 8.5l3 3 6-6",
                   stroke: "currentColor",