najm-kit 0.0.14 → 0.0.16

package/dist/index.d.ts

@@ -173,7 +173,7 @@ type NIconProps = Omit<React__default.HTMLAttributes<HTMLElement>, "children"> &
 declare const NIcon: React__default.FC<NIconProps>;
 
 declare const buttonVariants: (props?: {
-    variant?: "subtle" | "default" | "secondary" | "tertiary" | "destructive" | "outline" | "link" | "ghost" | "success" | "warning" | "info" | "soft" | "plain";
+    variant?: "subtle" | "default" | "secondary" | "tertiary" | "destructive" | "link" | "outline" | "ghost" | "success" | "warning" | "info" | "soft" | "plain";
     size?: "default" | "icon" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "icon-xs" | "icon-sm" | "icon-lg" | "icon-xl";
     rounded?: "none" | "default" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
     fullWidth?: boolean;
@@ -741,7 +741,7 @@ type AvatarShape$1 = "circle" | "rounded" | "square";
 type AvatarStatusType = "online" | "offline" | "busy" | "away";
 declare const avatarVariants: (props?: {
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
-    shape?: "square" | "circle" | "rounded";
+    shape?: "circle" | "square" | "rounded";
     ring?: boolean;
 } & class_variance_authority_types.ClassProp) => string;
 type AvatarRingColor = "background" | "primary" | "secondary" | "muted" | "destructive";
@@ -756,7 +756,7 @@ interface AvatarProps$1 extends Omit<React$1.ComponentProps<typeof AvatarPrimiti
 }
 declare function Avatar({ className, size, shape, ring, ringColor, src, alt, fallback, status, imageClassName, fallbackClassName, children, ...props }: AvatarProps$1): react_jsx_runtime.JSX.Element;
 declare function AvatarImage({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Image>): react_jsx_runtime.JSX.Element;
-declare function AvatarFallback({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Fallback>): react_jsx_runtime.JSX.Element;
+declare function AvatarFallback({ className, delayMs: _delayMs, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Fallback>): react_jsx_runtime.JSX.Element;
 declare function AvatarStatus({ status, size, className, }: {
     status: AvatarStatusType;
     size?: AvatarSize;
@@ -2310,7 +2310,7 @@ declare const createTableStore: () => {
 declare const HEADER_COLORS: {
     readonly primary: {
         readonly bg: "bg-primary/15";
-        readonly text: "[&_th]:text-primary";
+        readonly text: "[&_th]:text-foreground";
         readonly row: "hover:bg-primary/5";
     };
     readonly violet: {

package/dist/index.mjs

@@ -39,100 +39,106 @@ import { getExpandedRowModel, getSortedRowModel, getPaginationRowModel, getFilte
 
 // src/theme/presets/modes.ts
 var lightMode = {
-  background: "0 0% 100%",
-  foreground: "0 0% 3.9%",
-  card: "0 0% 100%",
-  "card-foreground": "0 0% 3.9%",
-  popover: "0 0% 100%",
-  "popover-foreground": "0 0% 3.9%",
-  secondary: "0 0% 96.1%",
-  "secondary-foreground": "0 0% 9%",
-  muted: "0 0% 96.1%",
-  "muted-foreground": "0 0% 45.1%",
-  accent: "0 0% 96.1%",
-  "accent-foreground": "0 0% 9%",
-  destructive: "0 84.2% 60.2%",
-  "destructive-foreground": "0 0% 98%",
-  border: "0 0% 89.8%",
-  "border-subtle": "0 0% 95%",
-  "border-strong": "0 0% 30%",
-  input: "0 0% 89.8%",
+  background: "oklch(1 0 0)",
+  foreground: "oklch(0.1445 0 0)",
+  card: "oklch(1 0 0)",
+  "card-foreground": "oklch(0.1445 0 0)",
+  popover: "oklch(1 0 0)",
+  "popover-foreground": "oklch(0.1445 0 0)",
+  secondary: "oklch(0.9703 0 0)",
+  "secondary-foreground": "oklch(0.2044 0 0)",
+  muted: "oklch(0.9703 0 0)",
+  "muted-foreground": "oklch(0.5555 0 0)",
+  accent: "oklch(0.9703 0 0)",
+  "accent-foreground": "oklch(0.2044 0 0)",
+  destructive: "oklch(0.6368 0.2078 25.326)",
+  "destructive-foreground": "oklch(0.9848 0 0)",
+  border: "oklch(0.9219 0 0)",
+  "border-subtle": "oklch(0.9619 0 0)",
+  "border-strong": "oklch(0.4184 0 0)",
+  input: "oklch(0.9219 0 0)",
   radius: "0.5rem"
 };
 var darkMode = {
-  background: "240 10% 4%",
-  foreground: "240 5% 96%",
-  card: "240 8% 8%",
-  "card-foreground": "240 5% 96%",
-  popover: "240 8% 8%",
-  "popover-foreground": "240 5% 96%",
-  secondary: "240 6% 12%",
-  "secondary-foreground": "240 5% 90%",
-  muted: "240 6% 12%",
-  "muted-foreground": "240 5% 55%",
-  accent: "240 6% 12%",
-  "accent-foreground": "240 5% 96%",
-  destructive: "0 84% 60%",
-  "destructive-foreground": "0 0% 100%",
-  border: "240 6% 15%",
-  "border-subtle": "240 6% 11%",
-  "border-strong": "0 0% 78%",
-  input: "240 6% 15%",
+  background: "oklch(0.1417 0.0044 285.819)",
+  foreground: "oklch(0.9683 0.0014 286.375)",
+  card: "oklch(0.1872 0.0066 285.748)",
+  "card-foreground": "oklch(0.9683 0.0014 286.375)",
+  popover: "oklch(0.1872 0.0066 285.748)",
+  "popover-foreground": "oklch(0.9683 0.0014 286.375)",
+  secondary: "oklch(0.2313 0.007 285.839)",
+  "secondary-foreground": "oklch(0.9203 0.0034 286.332)",
+  muted: "oklch(0.2313 0.007 285.839)",
+  "muted-foreground": "oklch(0.6255 0.0171 285.896)",
+  accent: "oklch(0.2313 0.007 285.839)",
+  "accent-foreground": "oklch(0.9683 0.0014 286.375)",
+  destructive: "oklch(0.6356 0.2082 25.378)",
+  "destructive-foreground": "oklch(1 0 0)",
+  border: "oklch(0.262 0.0085 285.799)",
+  "border-subtle": "oklch(0.2208 0.0065 285.856)",
+  "border-strong": "oklch(0.8294 0 0)",
+  input: "oklch(0.262 0.0085 285.799)",
   radius: "0.5rem"
 };
 
 // src/theme/presets/accents.ts
 var accents = {
   neutral: {
-    primary: "240 4% 11%",
-    "primary-foreground": "0 0% 98%",
-    ring: "240 4% 11%",
-    accent: "240 4% 16%",
-    "accent-foreground": "0 0% 98%"
+    primary: "oklch(0.2228 0.0043 286.044)",
+    "primary-foreground": "oklch(0.9848 0 0)",
+    ring: "oklch(0.2228 0.0043 286.044)",
+    accent: "oklch(0.2747 0.006 286.001)",
+    "accent-foreground": "oklch(0.9848 0 0)"
   },
   emerald: {
-    primary: "160 84% 39%",
-    "primary-foreground": "0 0% 100%",
-    ring: "160 84% 39%",
-    accent: "160 84% 15%",
-    "accent-foreground": "160 84% 80%"
+    primary: "oklch(0.6902 0.1481 162.368)",
+    "primary-foreground": "oklch(1 0 0)",
+    ring: "oklch(0.6902 0.1481 162.368)",
+    accent: "oklch(0.3519 0.0714 164.26)",
+    "accent-foreground": "oklch(0.9131 0.0924 171.145)"
   },
   green: {
-    primary: "142 71% 45%",
-    "primary-foreground": "0 0% 100%",
-    ring: "142 71% 45%",
-    accent: "142 71% 15%",
-    "accent-foreground": "142 71% 80%"
+    primary: "oklch(0.7205 0.192 149.493)",
+    "primary-foreground": "oklch(1 0 0)",
+    ring: "oklch(0.7205 0.192 149.493)",
+    accent: "oklch(0.333 0.0811 150.922)",
+    "accent-foreground": "oklch(0.8958 0.096 156.121)"
   },
   slate: {
-    primary: "215 20% 55%",
-    "primary-foreground": "0 0% 100%",
-    ring: "215 20% 55%",
-    accent: "215 20% 20%",
-    "accent-foreground": "215 20% 85%"
+    primary: "oklch(0.6227 0.0463 256.82)",
+    "primary-foreground": "oklch(1 0 0)",
+    ring: "oklch(0.6227 0.0463 256.82)",
+    accent: "oklch(0.3115 0.0245 256.824)",
+    "accent-foreground": "oklch(0.8784 0.0141 256.711)"
   },
   blue: {
-    primary: "217 91% 60%",
-    "primary-foreground": "0 0% 100%",
-    ring: "217 91% 60%",
-    accent: "217 91% 20%",
-    "accent-foreground": "217 91% 80%"
+    primary: "oklch(0.6261 0.1859 259.596)",
+    "primary-foreground": "oklch(1 0 0)",
+    ring: "oklch(0.6261 0.1859 259.596)",
+    accent: "oklch(0.2941 0.1092 259.917)",
+    "accent-foreground": "oklch(0.8064 0.0902 259.76)"
   },
   violet: {
-    primary: "263 70% 50%",
-    "primary-foreground": "0 0% 100%",
-    ring: "258 90% 66%",
-    accent: "263 70% 18%",
-    "accent-foreground": "263 70% 80%"
+    primary: "oklch(0.4865 0.2423 291.866)",
+    "primary-foreground": "oklch(1 0 0)",
+    ring: "oklch(0.6016 0.2214 292.234)",
+    accent: "oklch(0.2467 0.109 294.41)",
+    "accent-foreground": "oklch(0.7817 0.1036 301.636)"
   }
 };
 
 // src/theme/presets/compose.ts
 function lightAccentFromPrimary(primary = "") {
-  const parts = primary.trim().split(/\s+/);
-  if (parts.length < 2) return { accent: "0 0% 94%", "accent-foreground": "0 0% 30%" };
-  const [h, s] = parts;
-  return { accent: `${h} ${s} 93%`, "accent-foreground": `${h} ${s} 35%` };
+  const m = primary.trim().match(/^oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)$/i);
+  if (!m) return { accent: "oklch(0.95 0 0)", "accent-foreground": "oklch(0.42 0 0)" };
+  const c = Number(m[2]);
+  const h = Number(m[3]);
+  const tint = Math.min(c, 0.05);
+  const fg = Math.min(c, 0.12);
+  return {
+    accent: `oklch(0.95 ${tint} ${h})`,
+    "accent-foreground": `oklch(0.42 ${fg} ${h})`
+  };
 }
 function composePreset(mode, accent) {
   const base = mode === "dark" ? darkMode : lightMode;
@@ -161,7 +167,7 @@ function tokensToStyle(tokens, accentOnly) {
   const style = {};
   for (const [key, value] of Object.entries(tokens)) {
     if (value && (!accentOnly || ACCENT_KEYS.has(key))) {
-      style[`--najm-${key}`] = value;
+      style[`--${key}`] = value;
     }
   }
   return style;
@@ -187,30 +193,24 @@ function NajmThemeProvider({
   children
 }) {
   const depth = React.useContext(NajmThemeDepthContext);
-  const isRoot = depth === 0;
   const parentAppearance = React.useContext(NajmAppearanceContext);
-  const shouldApplyThemeTokens = isRoot || Boolean(preset || mode || tokens);
+  const shouldApplyThemeTokens = Boolean(preset || mode || tokens);
   const resolved = React.useMemo(() => {
     if (!shouldApplyThemeTokens) return null;
     if (tokens) return tokens;
     if (preset) return resolvePreset(preset);
-    if (mode) return composePreset(mode, accent ?? "neutral");
-    return resolvePreset("light");
+    return composePreset(mode, accent ?? "neutral");
   }, [preset, mode, accent, tokens, shouldApplyThemeTokens]);
-  const style = React.useMemo(() => resolved ? tokensToStyle(resolved, accentOnly) : void 0, [resolved, accentOnly]);
+  const style = React.useMemo(
+    () => resolved ? tokensToStyle(resolved, accentOnly) : void 0,
+    [resolved, accentOnly]
+  );
   const Comp = asChild ? Slot : "div";
   const [container, setContainer] = React.useState(null);
   const resolvedAppearance = React.useMemo(
     () => ({ ...parentAppearance, ...appearance ?? {} }),
     [parentAppearance, appearance]
   );
-  React.useEffect(() => {
-    if (!isRoot) return;
-    const root = document.documentElement;
-    const entries = Object.entries(style ?? {});
-    entries.forEach(([k, v]) => root.style.setProperty(k, v));
-    return () => entries.forEach(([k]) => root.style.removeProperty(k));
-  }, [style, isRoot]);
   return /* @__PURE__ */ jsx(NajmThemeDepthContext.Provider, { value: depth + 1, children: /* @__PURE__ */ jsx(NajmAppearanceContext.Provider, { value: resolvedAppearance, children: /* @__PURE__ */ jsx(NajmThemeContainerCtx.Provider, { value: container, children: /* @__PURE__ */ jsx(
     Comp,
     {
@@ -1105,7 +1105,8 @@ function SheetClose({ ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
 }
 function SheetPortal({ ...props }) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+  const container = React.useContext(NajmThemeContainerCtx);
+  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", container: container ?? void 0, ...props });
 }
 function SheetOverlay({ className, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -1187,10 +1188,6 @@ function NajmScroll({ className, axis = "y", autoHide = "never", viewportRef, ev
       className: cn(className),
       style: {
         ...style,
-        display: "flex",
-        alignItems: "stretch",
-        flexDirection: "row",
-        flexWrap: "nowrap",
         overflow: "hidden",
         minHeight: 0,
         minWidth: 0
@@ -1257,14 +1254,14 @@ function NSheet({
       side,
       portalClassName: portal,
       className: cn(
-        "flex h-dvh max-h-dvh flex-col overflow-hidden bg-sidebar p-0 text-txt-primary",
+        "flex h-dvh max-h-dvh flex-col overflow-hidden bg-sidebar p-0 text-foreground",
         contentClassName
       ),
       style,
       children: [
         /* @__PURE__ */ jsxs(SheetHeader, { className: "shrink-0 border-b border-border px-6 py-4 gap-1", children: [
-          /* @__PURE__ */ jsx(SheetTitle, { className: "text-sm font-semibold text-txt-primary", children: title }),
-          description && /* @__PURE__ */ jsx(SheetDescription, { className: "text-xs text-txt-muted", children: description })
+          /* @__PURE__ */ jsx(SheetTitle, { className: "text-sm font-semibold text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx(SheetDescription, { className: "text-xs text-muted-foreground", children: description })
         ] }),
         /* @__PURE__ */ jsx(NajmScroll, { axis: "y", className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx("div", { className: cn("px-6 py-5", bodyClassName), children }) }),
         footer && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border px-6 py-3", children: footer })
@@ -1279,7 +1276,8 @@ function DialogTrigger({ ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal({ ...props }) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  const container = React.useContext(NajmThemeContainerCtx);
+  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "dialog-portal", container: container ?? void 0, ...props });
 }
 function DialogClose({ ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "dialog-close cursor-pointer", ...props });
@@ -2148,7 +2146,7 @@ function useNajmPortalLayerStyles() {
     if (document.getElementById(PORTAL_LAYER_STYLE_ID)) return;
     const style = document.createElement("style");
     style.id = PORTAL_LAYER_STYLE_ID;
-    style.textContent = `[data-radix-popper-content-wrapper]{z-index:var(--najm-portal-z-index,10000)!important;}`;
+    style.textContent = `[data-radix-popper-content-wrapper]{z-index:var(--portal-z-index,10000)!important;}`;
     document.head.appendChild(style);
   }, []);
 }
@@ -2406,7 +2404,7 @@ function Checkbox({ className, ...props }) {
     {
       "data-slot": "checkbox",
       className: cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer border-foreground/40 dark:border-foreground/50 dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props,
@@ -2991,7 +2989,7 @@ function Avatar({
       children: [
         hasChildren ? children : hasShortcut ? /* @__PURE__ */ jsxs(Fragment, { children: [
           src && /* @__PURE__ */ jsx(
-            AvatarPrimitive.Image,
+            "img",
             {
               "data-slot": "avatar-image",
               src,
@@ -3000,7 +2998,7 @@ function Avatar({
             }
           ),
           /* @__PURE__ */ jsx(
-            AvatarPrimitive.Fallback,
+            "span",
             {
               "data-slot": "avatar-fallback",
               className: cn(fallbackVariants({ size, shape }), fallbackClassName),
@@ -3025,7 +3023,7 @@ function Avatar({
 }
 function AvatarImage({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    AvatarPrimitive.Image,
+    "img",
     {
       "data-slot": "avatar-image",
       className: cn("aspect-square size-full", className),
@@ -3035,10 +3033,11 @@ function AvatarImage({ className, ...props }) {
 }
 function AvatarFallback({
   className,
+  delayMs: _delayMs,
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    AvatarPrimitive.Fallback,
+    "span",
     {
       "data-slot": "avatar-fallback",
       className: cn("flex size-full items-center justify-center rounded-full bg-muted", className),
@@ -3576,7 +3575,7 @@ function TableHead({ className, ...props }) {
   return /* @__PURE__ */ jsx("th", { "data-slot": "table-head", className: cn("text-foreground h-9 px-3 text-left align-middle text-xs font-medium uppercase tracking-wide whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props });
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsx("td", { "data-slot": "table-cell", className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props });
+  return /* @__PURE__ */ jsx("td", { "data-slot": "table-cell", className: cn("px-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props });
 }
 function TableCaption({ className, ...props }) {
   return /* @__PURE__ */ jsx("caption", { "data-slot": "table-caption", className: cn("text-muted-foreground mt-4 text-sm", className), ...props });
@@ -3707,7 +3706,7 @@ var NErrorBoundary = class extends React__default.Component {
   render() {
     if (this.state.hasError) {
       return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full p-8 text-center", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-12 w-12 rounded-xl bg-status-red/10 flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-6 w-6 text-status-red" }) }),
+        /* @__PURE__ */ jsx("div", { className: "h-12 w-12 rounded-xl bg-destructive/10 flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-6 w-6 text-destructive" }) }),
         /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground mb-1", children: this.props.fallbackTitle ?? "Something went wrong" }),
         /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4 max-w-md", children: this.state.error?.message ?? "An unexpected error occurred." }),
         /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: this.handleReset, className: "gap-1.5", children: [
@@ -4858,7 +4857,7 @@ function FloatingButtonSegment({
       className: cn(
         "flex items-center gap-2 px-4 h-11 text-sm transition-colors",
         "hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed",
-        action.danger && "text-status-red hover:bg-status-red/10"
+        action.danger && "text-destructive hover:bg-destructive/10"
       ),
       children: [
         Icon2 ? /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4" }) : null,
@@ -5076,7 +5075,7 @@ function NFileTypeIcon({
   const dim = DIMENSIONS[size];
   const isDark = useIsDark();
   if (showThumbnail && /^image\//.test(mimeType) && url) {
-    return /* @__PURE__ */ jsx("span", { className: cn(dim, "block shrink-0 overflow-hidden rounded-lg bg-bg-elev-2 shadow-sm", className), children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("span", { className: cn(dim, "block shrink-0 overflow-hidden rounded-lg bg-secondary shadow-sm", className), children: /* @__PURE__ */ jsx(
       "img",
       {
         src: url,
@@ -6022,23 +6021,23 @@ function PhoneInput({
     "--react-international-phone-height": "40px",
     "--react-international-phone-border-radius": "0",
     "--react-international-phone-background-color": "transparent",
-    "--react-international-phone-text-color": "hsl(var(--najm-foreground))",
+    "--react-international-phone-text-color": "var(--foreground)",
     "--react-international-phone-border-color": "transparent",
     "--react-international-phone-country-selector-background-color": "transparent",
-    "--react-international-phone-country-selector-background-color-hover": "hsl(var(--najm-accent))",
-    "--react-international-phone-country-selector-arrow-color": "hsl(var(--najm-muted-foreground))",
+    "--react-international-phone-country-selector-background-color-hover": "var(--accent)",
+    "--react-international-phone-country-selector-arrow-color": "var(--muted-foreground)",
     "--react-international-phone-disabled-background-color": "transparent",
-    "--react-international-phone-disabled-text-color": "hsl(var(--najm-muted-foreground))",
+    "--react-international-phone-disabled-text-color": "var(--muted-foreground)",
     "--react-international-phone-dropdown-top": "calc(100% + 6px)",
     "--react-international-phone-dropdown-left": "0",
-    "--react-international-phone-dropdown-item-background-color": "hsl(var(--najm-popover))",
-    "--react-international-phone-dropdown-item-text-color": "hsl(var(--najm-popover-foreground))",
-    "--react-international-phone-dropdown-item-dial-code-color": "hsl(var(--najm-muted-foreground))",
-    "--react-international-phone-selected-dropdown-item-background-color": "hsl(var(--najm-accent))",
-    "--react-international-phone-selected-dropdown-item-text-color": "hsl(var(--najm-accent-foreground))",
-    "--react-international-phone-selected-dropdown-item-dial-code-color": "hsl(var(--najm-muted-foreground))",
-    "--react-international-phone-dropdown-preferred-list-divider-color": "hsl(var(--najm-border))",
-    "--react-international-phone-dropdown-shadow": "0 16px 40px hsl(var(--najm-background) / 0.45)"
+    "--react-international-phone-dropdown-item-background-color": "var(--popover)",
+    "--react-international-phone-dropdown-item-text-color": "var(--popover-foreground)",
+    "--react-international-phone-dropdown-item-dial-code-color": "var(--muted-foreground)",
+    "--react-international-phone-selected-dropdown-item-background-color": "var(--accent)",
+    "--react-international-phone-selected-dropdown-item-text-color": "var(--accent-foreground)",
+    "--react-international-phone-selected-dropdown-item-dial-code-color": "var(--muted-foreground)",
+    "--react-international-phone-dropdown-preferred-list-divider-color": "var(--border)",
+    "--react-international-phone-dropdown-shadow": "0 16px 40px color-mix(in oklch, var(--background), transparent 55%)"
   };
   return /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderDegree, borderColor, className: cn("gap-0 overflow-visible p-0!", className), disabled, children: /* @__PURE__ */ jsx(
     PhoneInput$1,
@@ -6057,7 +6056,7 @@ function PhoneInput({
         background: "transparent",
         outline: "none",
         fontSize: "14px",
-        color: "hsl(var(--najm-foreground))"
+        color: "var(--foreground)"
       },
       countrySelectorStyleProps: {
         style: {
@@ -6090,8 +6089,8 @@ function PhoneInput({
           style: {
             zIndex: 60,
             width: "min(300px, calc(100vw - 32px))",
-            backgroundColor: "hsl(var(--najm-popover))",
-            border: "1px solid hsl(var(--najm-border))",
+            backgroundColor: "var(--popover)",
+            border: "1px solid var(--border)",
             borderRadius: "8px",
             overflowX: "hidden"
           }
@@ -6513,7 +6512,7 @@ function Combobox({
                 children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
               }
             ),
-            /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 text-txt-muted" })
+            /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })
           ] })
         ]
       }
@@ -6564,10 +6563,10 @@ var VARIANT_PRESETS = {
   },
   studio: {
     item: "space-y-1.5 w-full",
-    label: "text-[11px] uppercase tracking-[0.16em] text-txt-muted flex items-center gap-2",
+    label: "text-[11px] uppercase tracking-[0.16em] text-muted-foreground flex items-center gap-2",
     input: "h-10 bg-card",
-    description: "text-xs text-txt-muted",
-    error: "text-xs text-status-red"
+    description: "text-xs text-muted-foreground",
+    error: "text-xs text-destructive"
   },
   compact: {
     item: "flex flex-col w-full gap-1",
@@ -7678,7 +7677,7 @@ function useTableKeyboard(options = {}) {
 
 // src/components/table/tableColors.ts
 var HEADER_COLORS = {
-  primary: { bg: "bg-primary/15", text: "[&_th]:text-primary", row: "hover:bg-primary/5" },
+  primary: { bg: "bg-primary/15", text: "[&_th]:text-foreground", row: "hover:bg-primary/5" },
   violet: { bg: "bg-violet-600/30", text: "[&_th]:text-violet-800 dark:[&_th]:text-violet-300", row: "hover:bg-violet-500/5" },
   blue: { bg: "bg-blue-600/30", text: "[&_th]:text-blue-800   dark:[&_th]:text-blue-300", row: "hover:bg-blue-500/5" },
   emerald: { bg: "bg-emerald-600/30", text: "[&_th]:text-emerald-800 dark:[&_th]:text-emerald-400", row: "hover:bg-emerald-500/5" },
@@ -7811,8 +7810,8 @@ function NTableContent({ effectiveMode }) {
       ),
       onContextMenu: handleBackgroundContextMenu,
       children: /* @__PURE__ */ jsxs(Table, { children: [
-        /* @__PURE__ */ jsx(TableHeader, { "data-ntable-table-header": true, className: cn("bg-card sticky top-0 z-10", colorStyle?.text, headerClassName, bordered && "[&_tr]:border-border", classNames?.tableHeader), children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsxs(TableRow, { className: cn("hover:bg-transparent", bordered && "border-border"), children: [
-          showCheckbox && /* @__PURE__ */ jsx(TableHead, { className: cn("w-10 text-foreground h-12", colorStyle?.bg), children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(TableHeader, { "data-ntable-table-header": true, className: cn("bg-card sticky top-0 z-10", colorStyle?.text, headerClassName, useDegreeBorder && "[&_tr]:border-border", classNames?.tableHeader), children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsxs(TableRow, { className: cn("hover:bg-transparent", useDegreeBorder && "border-border"), children: [
+          showCheckbox && /* @__PURE__ */ jsx(TableHead, { className: cn("w-10 text-foreground h-12 text-center", colorStyle?.bg), children: /* @__PURE__ */ jsx(
             Checkbox,
             {
               "aria-label": "Select all rows",
@@ -7844,9 +7843,9 @@ function NTableContent({ effectiveMode }) {
                   e.nativeEvent[ROW_CONTEXT_HANDLED] = true;
                   onRowContextMenu(e, row.original);
                 } : void 0,
-                className: cn(colorStyle?.row, classNames?.row, onRowClick && "cursor-pointer", isSelectedByRowId && "bg-brand/5 hover:bg-brand/5", bordered && "border-border"),
+                className: cn(colorStyle?.row, classNames?.row, onRowClick && "cursor-pointer", isSelectedByRowId && "bg-primary/5 hover:bg-primary/5", useDegreeBorder && "border-border"),
                 children: [
-                  showCheckbox && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(
+                  showCheckbox && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10 text-center", children: /* @__PURE__ */ jsx(
                     Checkbox,
                     {
                       "aria-label": `Select row ${row.id}`,
@@ -7867,7 +7866,7 @@ function NTableContent({ effectiveMode }) {
                       },
                       className: cn(
                         "flex h-6 w-6 items-center justify-center rounded hover:bg-muted",
-                        bordered && `border ${tableBorderClass}`
+                        useDegreeBorder && `border ${tableBorderClass}`
                       ),
                       children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
                     }
@@ -8885,7 +8884,7 @@ function buildDefaultFileColumns(options = {}) {
         const node = row.original;
         return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
           renderThumb({ node, size: "sm" }),
-          /* @__PURE__ */ jsx("span", { className: "font-medium text-txt", children: node.name })
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: node.name })
         ] });
       }
     }
@@ -8906,7 +8905,7 @@ function buildDefaultFileColumns(options = {}) {
       header: "Size",
       cell: ({ row }) => {
         const node = row.original;
-        return /* @__PURE__ */ jsx("span", { className: "block text-right text-txt-muted", children: node.isFolder ? "-" : formatFileBytes(node.size ?? 0) });
+        return /* @__PURE__ */ jsx("span", { className: "block text-right text-muted-foreground", children: node.isFolder ? "-" : formatFileBytes(node.size ?? 0) });
       }
     });
   }
@@ -8916,7 +8915,7 @@ function buildDefaultFileColumns(options = {}) {
       header: "Modified",
       cell: ({ row }) => {
         const node = row.original;
-        return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-txt-muted", children: [
+        return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
           /* @__PURE__ */ jsx(Clock, { size: 12 }),
           node.isFolder || !node.updatedAt ? "-" : formatFileRelative(node.updatedAt)
         ] });
@@ -8939,8 +8938,8 @@ function DefaultFileTile({
       card: { onClick, onContextMenu },
       className: cn(
         "group relative flex w-36 cursor-pointer flex-col items-center justify-start gap-2 rounded-xl border border-transparent p-4 transition-colors",
-        "hover:bg-bg-elev-1 hover:border-white/10",
-        isSel && "bg-brand/10 border-brand/40"
+        "hover:bg-card hover:border-white/10",
+        isSel && "bg-primary/10 border-primary/40"
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "relative flex h-20 w-20 items-end justify-center", children: [
@@ -8956,7 +8955,7 @@ function DefaultFileTile({
               },
               onClick: (e) => e.stopPropagation(),
               className: cn(
-                "absolute left-0 top-0 rounded border-white/20 bg-bg transition-opacity",
+                "absolute left-0 top-0 rounded border-white/20 bg-background transition-opacity",
                 isSel ? "opacity-100" : "opacity-0 group-hover:opacity-100"
               ),
               "aria-label": `Select ${data.name}`
@@ -8964,8 +8963,8 @@ function DefaultFileTile({
           )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center text-center", children: [
-          /* @__PURE__ */ jsx("span", { className: "max-w-full truncate text-xs font-semibold text-txt", children: data.name }),
-          /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-[10px] text-txt-muted", children: data.isFolder ? "Folder" : formatFileBytes(data.size ?? 0) })
+          /* @__PURE__ */ jsx("span", { className: "max-w-full truncate text-xs font-semibold text-foreground", children: data.name }),
+          /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-[10px] text-muted-foreground", children: data.isFolder ? "Folder" : formatFileBytes(data.size ?? 0) })
         ] })
       ]
     }
@@ -9144,7 +9143,7 @@ function NSmartPasteDialog({
         )
       ] }),
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-3 min-h-0", children: [
-        description && /* @__PURE__ */ jsx("p", { className: "text-xs text-txt-muted leading-relaxed", children: description }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground leading-relaxed", children: description }),
         /* @__PURE__ */ jsx(
           Textarea,
           {

package/dist/json.mjs

@@ -900,10 +900,6 @@ function NajmScroll({ className, axis = "y", autoHide = "never", viewportRef, ev
       className: cn(className),
       style: {
         ...style,
-        display: "flex",
-        alignItems: "stretch",
-        flexDirection: "row",
-        flexWrap: "nowrap",
         overflow: "hidden",
         minHeight: 0,
         minWidth: 0