najm-kit 0.0.19 → 0.0.21

package/dist/index.mjs

@@ -27,9 +27,12 @@ import { Command as Command$1 } from 'cmdk';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { Toaster as Toaster$1 } from 'sonner';
+export { toast } from 'sonner';
 import { FormProvider, Controller, useFormContext, useForm, useFieldArray } from 'react-hook-form';
 import { defaultStyles, FileIcon } from 'react-file-icon';
 import { format } from 'date-fns';
+import { HexColorPicker } from 'react-colorful';
+import { converter, parse, formatHsl, formatRgb, formatHex } from 'culori';
 import { PhoneInput as PhoneInput$1, defaultCountries } from 'react-international-phone';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -47,6 +50,8 @@ var lightMode = {
   "popover-foreground": "oklch(0.1445 0 0)",
   secondary: "oklch(0.9703 0 0)",
   "secondary-foreground": "oklch(0.2044 0 0)",
+  tertiary: "oklch(0.9676 0.007 247.897)",
+  "tertiary-foreground": "oklch(0.3138 0.0453 249.447)",
   muted: "oklch(0.9703 0 0)",
   "muted-foreground": "oklch(0.5555 0 0)",
   accent: "oklch(0.9703 0 0)",
@@ -54,10 +59,16 @@ var lightMode = {
   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"
+  radius: "0.5rem",
+  sidebar: "oklch(0.985 0 0)",
+  "sidebar-foreground": "oklch(0.1445 0 0)",
+  "sidebar-primary": "oklch(0.2228 0.0043 286.044)",
+  "sidebar-primary-foreground": "oklch(0.9848 0 0)",
+  "sidebar-accent": "oklch(0.9703 0 0)",
+  "sidebar-accent-foreground": "oklch(0.2044 0 0)",
+  "sidebar-border": "oklch(0.9219 0 0)",
+  "sidebar-ring": "oklch(0.2228 0.0043 286.044)"
 };
 var darkMode = {
   background: "oklch(0.1417 0.0044 285.819)",
@@ -68,6 +79,8 @@ var darkMode = {
   "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)",
+  tertiary: "oklch(0.3138 0.0453 249.447)",
+  "tertiary-foreground": "oklch(0.8529 0.0324 248.208)",
   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)",
@@ -75,10 +88,16 @@ var darkMode = {
   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"
+  radius: "0.5rem",
+  sidebar: "oklch(0.205 0 0)",
+  "sidebar-foreground": "oklch(0.9683 0.0014 286.375)",
+  "sidebar-primary": "oklch(0.4865 0.2423 291.866)",
+  "sidebar-primary-foreground": "oklch(0.9848 0 0)",
+  "sidebar-accent": "oklch(0.2313 0.007 285.839)",
+  "sidebar-accent-foreground": "oklch(0.9683 0.0014 286.375)",
+  "sidebar-border": "oklch(0.262 0.0085 285.799)",
+  "sidebar-ring": "oklch(0.4865 0.2423 291.866)"
 };
 
 // src/theme/presets/accents.ts
@@ -88,42 +107,54 @@ var accents = {
     "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)"
+    "accent-foreground": "oklch(0.9848 0 0)",
+    "sidebar-primary": "oklch(0.2228 0.0043 286.044)",
+    "sidebar-ring": "oklch(0.2228 0.0043 286.044)"
   },
   emerald: {
     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)"
+    "accent-foreground": "oklch(0.9131 0.0924 171.145)",
+    "sidebar-primary": "oklch(0.6902 0.1481 162.368)",
+    "sidebar-ring": "oklch(0.6902 0.1481 162.368)"
   },
   green: {
     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)"
+    "accent-foreground": "oklch(0.8958 0.096 156.121)",
+    "sidebar-primary": "oklch(0.7205 0.192 149.493)",
+    "sidebar-ring": "oklch(0.7205 0.192 149.493)"
   },
   slate: {
     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)"
+    "accent-foreground": "oklch(0.8784 0.0141 256.711)",
+    "sidebar-primary": "oklch(0.6227 0.0463 256.82)",
+    "sidebar-ring": "oklch(0.6227 0.0463 256.82)"
   },
   blue: {
     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)"
+    "accent-foreground": "oklch(0.8064 0.0902 259.76)",
+    "sidebar-primary": "oklch(0.6261 0.1859 259.596)",
+    "sidebar-ring": "oklch(0.6261 0.1859 259.596)"
   },
   violet: {
     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)"
+    "accent-foreground": "oklch(0.7817 0.1036 301.636)",
+    "sidebar-primary": "oklch(0.4865 0.2423 291.866)",
+    "sidebar-ring": "oklch(0.6016 0.2214 292.234)"
   }
 };
 
@@ -162,7 +193,15 @@ function resolvePreset(preset) {
   const { mode, accent } = PRESET_MAP[preset];
   return composePreset(mode, accent);
 }
-var ACCENT_KEYS = /* @__PURE__ */ new Set(["primary", "primary-foreground", "ring", "accent", "accent-foreground"]);
+var ACCENT_KEYS = /* @__PURE__ */ new Set([
+  "primary",
+  "primary-foreground",
+  "ring",
+  "accent",
+  "accent-foreground",
+  "sidebar-primary",
+  "sidebar-ring"
+]);
 function tokensToStyle(tokens, accentOnly) {
   const style = {};
   for (const [key, value] of Object.entries(tokens)) {
@@ -172,50 +211,123 @@ function tokensToStyle(tokens, accentOnly) {
   }
   return style;
 }
+var SHADCN_RADIUS_SCALE = {
+  "--radius-xs": "calc(var(--radius) - 4px)",
+  "--radius-sm": "calc(var(--radius) - 4px)",
+  "--radius-md": "calc(var(--radius) - 2px)",
+  "--radius-lg": "var(--radius)",
+  "--radius-xl": "calc(var(--radius) + 4px)",
+  "--radius-2xl": "calc(var(--radius) + 8px)",
+  "--radius-3xl": "calc(var(--radius) + 12px)",
+  "--radius-4xl": "calc(var(--radius) + 16px)"
+};
+function radiusToStyle(radius, scale) {
+  const style = { "--radius": radius };
+  for (const [key, value] of Object.entries(SHADCN_RADIUS_SCALE)) {
+    style[key] = scale === "uniform" ? "var(--radius)" : value;
+  }
+  return style;
+}
+function resolveThemeTokens({
+  preset,
+  mode,
+  accent,
+  explicitTokens,
+  configTokens,
+  configMode,
+  overrides
+}) {
+  if (explicitTokens) return explicitTokens;
+  const tokenMode = mode ?? configMode;
+  const modeOverrides = tokenMode ? overrides?.[tokenMode] : void 0;
+  const tokensMatchMode = !configMode || !tokenMode || configMode === tokenMode;
+  const scopedTokens = tokensMatchMode ? configTokens : void 0;
+  if (preset) {
+    return { ...resolvePreset(preset), ...scopedTokens ?? {}, ...modeOverrides ?? {} };
+  }
+  if (tokenMode) {
+    return {
+      ...composePreset(tokenMode, accent ?? "neutral"),
+      ...scopedTokens ?? {},
+      ...modeOverrides ?? {}
+    };
+  }
+  if (scopedTokens || modeOverrides) return { ...scopedTokens ?? {}, ...modeOverrides ?? {} };
+  return null;
+}
 var NajmThemeDepthContext = React.createContext(0);
 var NajmThemeContainerCtx = React.createContext(null);
-var DEFAULT_APPEARANCE = {
-  borderDegree: "default"
-};
+var DEFAULT_APPEARANCE = {};
 var NajmAppearanceContext = React.createContext(DEFAULT_APPEARANCE);
 function useNajmAppearance() {
   return React.useContext(NajmAppearanceContext);
 }
 function NajmThemeProvider({
+  config,
   preset,
   mode,
   accent,
   tokens,
   accentOnly,
   appearance,
+  radius,
+  radiusScale,
+  spacing,
   className,
   asChild,
   children
 }) {
   const depth = React.useContext(NajmThemeDepthContext);
   const parentAppearance = React.useContext(NajmAppearanceContext);
-  const shouldApplyThemeTokens = Boolean(preset || mode || tokens);
+  const effectivePreset = preset ?? config?.preset;
+  const effectiveMode = mode ?? config?.mode;
+  const effectiveAccent = accent ?? config?.accent;
+  const effectiveAccentOnly = accentOnly ?? config?.accentOnly;
+  const effectiveRadius = radius ?? config?.radius;
+  const effectiveRadiusScale = radiusScale ?? config?.radiusScale ?? "shadcn";
+  const effectiveSpacing = spacing ?? config?.spacing;
+  const effectiveBorderWidth = appearance?.borderWidth ?? config?.appearance?.borderWidth;
   const resolved = React.useMemo(() => {
-    if (!shouldApplyThemeTokens) return null;
-    if (tokens) return tokens;
-    if (preset) return resolvePreset(preset);
-    return composePreset(mode, accent ?? "neutral");
-  }, [preset, mode, accent, tokens, shouldApplyThemeTokens]);
+    return resolveThemeTokens({
+      preset: effectivePreset,
+      mode: effectiveMode,
+      accent: effectiveAccent,
+      explicitTokens: tokens,
+      configTokens: config?.tokens,
+      configMode: config?.mode,
+      overrides: config?.overrides
+    });
+  }, [
+    effectivePreset,
+    effectiveMode,
+    effectiveAccent,
+    tokens,
+    config?.tokens,
+    config?.mode,
+    config?.overrides
+  ]);
   const style = React.useMemo(
-    () => resolved ? tokensToStyle(resolved, accentOnly) : void 0,
-    [resolved, accentOnly]
+    () => {
+      const tokenStyle = resolved ? tokensToStyle(resolved, effectiveAccentOnly) : void 0;
+      const radiusStyle = effectiveRadius !== void 0 ? radiusToStyle(effectiveRadius, effectiveRadiusScale) : void 0;
+      const borderWidthStyle = effectiveBorderWidth !== void 0 ? { "--border-width": effectiveBorderWidth } : void 0;
+      const spacingStyle = effectiveSpacing !== void 0 ? { "--spacing": effectiveSpacing } : void 0;
+      if (!tokenStyle && !radiusStyle && !borderWidthStyle && !spacingStyle) return void 0;
+      return { ...tokenStyle, ...radiusStyle, ...borderWidthStyle, ...spacingStyle };
+    },
+    [resolved, effectiveAccentOnly, effectiveRadius, effectiveRadiusScale, effectiveSpacing, effectiveBorderWidth]
   );
   const Comp = asChild ? Slot : "div";
   const [container, setContainer] = React.useState(null);
   const resolvedAppearance = React.useMemo(
-    () => ({ ...parentAppearance, ...appearance ?? {} }),
-    [parentAppearance, appearance]
+    () => ({ ...parentAppearance, ...config?.appearance ?? {}, ...appearance ?? {} }),
+    [parentAppearance, config?.appearance, appearance]
   );
   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,
     {
       ref: setContainer,
-      "data-najm-theme": preset ?? `${mode ?? "light"}-${accent ?? "neutral"}`,
+      "data-najm-theme": effectivePreset ?? `${effectiveMode ?? "light"}-${effectiveAccent ?? "neutral"}`,
       className,
       style,
       children
@@ -223,49 +335,502 @@ function NajmThemeProvider({
   ) }) }) });
 }
 
-// src/theme/borders.ts
-function resolveBorderDegree(borderDegree, bordered, globalBorderDegree, fallback = "default") {
-  if (borderDegree) return borderDegree;
-  if (bordered === true) return "strong";
-  if (bordered === false) return fallback;
-  return globalBorderDegree ?? fallback;
-}
-function borderColorClassForDegree(degree) {
-  switch (degree) {
-    case "none":
-      return "border-transparent";
-    case "subtle":
-      return "border-border-subtle";
-    case "strong":
-      return "border-border-strong";
-    default:
-      return "border-border";
+// src/theme/config.ts
+var MODES = ["light", "dark"];
+var ACCENTS = ["neutral", "emerald", "green", "slate", "blue", "violet"];
+var PRESETS = ["light", "dark", "dark-emerald", "dark-green", "dark-slate", "dark-blue", "dark-violet"];
+var RADIUS_SCALES = ["shadcn", "uniform"];
+var TOKEN_KEYS = [
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "tertiary",
+  "tertiary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "destructive-foreground",
+  "border",
+  "input",
+  "ring",
+  "sidebar",
+  "sidebar-foreground",
+  "sidebar-primary",
+  "sidebar-primary-foreground",
+  "sidebar-accent",
+  "sidebar-accent-foreground",
+  "sidebar-border",
+  "sidebar-ring",
+  "chart-1",
+  "chart-2",
+  "chart-3",
+  "chart-4",
+  "chart-5",
+  "radius"
+];
+var ROOT_KEYS = /* @__PURE__ */ new Set([
+  "preset",
+  "mode",
+  "accent",
+  "tokens",
+  "overrides",
+  "accentOnly",
+  "appearance",
+  "radius",
+  "radiusScale",
+  "spacing"
+]);
+var TOKEN_KEY_SET = new Set(TOKEN_KEYS);
+var MODE_KEY_SET = new Set(MODES);
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function assertKnownKeys(value, keys, path) {
+  const unknown = Object.keys(value).find((key) => !keys.has(key));
+  if (unknown) throw new TypeError(`Unknown ${path} property: ${unknown}`);
+}
+function optionalEnum(value, values, path) {
+  if (value === void 0) return void 0;
+  if (typeof value !== "string" || !values.includes(value)) {
+    throw new TypeError(`${path} must be one of: ${values.join(", ")}`);
   }
+  return value;
 }
-function inputBorderColorClassForDegree(degree) {
-  switch (degree) {
-    case "none":
-      return "border-transparent";
-    case "subtle":
-      return "border-border-subtle";
-    case "strong":
-      return "border-border-strong";
-    default:
-      return "border-input";
+function optionalString(value, path) {
+  if (value === void 0) return void 0;
+  if (typeof value !== "string" || value.trim() === "") {
+    throw new TypeError(`${path} must be a non-empty string`);
+  }
+  return value;
+}
+function parseTokens(value) {
+  if (value === void 0) return void 0;
+  if (!isRecord(value)) throw new TypeError("theme.tokens must be an object");
+  assertKnownKeys(value, TOKEN_KEY_SET, "theme.tokens");
+  const tokens = {};
+  for (const key of TOKEN_KEYS) {
+    const token = optionalString(value[key], `theme.tokens.${key}`);
+    if (token !== void 0) tokens[key] = token;
+  }
+  return tokens;
+}
+function parseOverrides(value) {
+  if (value === void 0) return void 0;
+  if (!isRecord(value)) throw new TypeError("theme.overrides must be an object");
+  assertKnownKeys(value, MODE_KEY_SET, "theme.overrides");
+  const overrides = {};
+  for (const mode of MODES) {
+    const entry = value[mode];
+    if (entry === void 0) continue;
+    overrides[mode] = parseTokens(entry) ?? {};
+  }
+  return overrides;
+}
+function defineNajmThemeConfig(config) {
+  return config;
+}
+function parseNajmThemeConfig(input) {
+  let value = input;
+  if (typeof input === "string") {
+    try {
+      value = JSON.parse(input);
+    } catch (error) {
+      throw new TypeError(`Invalid theme JSON: ${error.message}`);
+    }
+  }
+  if (!isRecord(value)) throw new TypeError("Theme config must be an object");
+  assertKnownKeys(value, ROOT_KEYS, "theme");
+  let appearance;
+  if (value.appearance !== void 0) {
+    if (!isRecord(value.appearance)) throw new TypeError("theme.appearance must be an object");
+    assertKnownKeys(value.appearance, /* @__PURE__ */ new Set(["borderWidth"]), "theme.appearance");
+    appearance = {
+      borderWidth: optionalString(
+        value.appearance.borderWidth,
+        "theme.appearance.borderWidth"
+      )
+    };
   }
+  const accentOnly = value.accentOnly;
+  if (accentOnly !== void 0 && typeof accentOnly !== "boolean") {
+    throw new TypeError("theme.accentOnly must be a boolean");
+  }
+  const parsedAccentOnly = typeof accentOnly === "boolean" ? accentOnly : void 0;
+  const config = {};
+  const preset = optionalEnum(value.preset, PRESETS, "theme.preset");
+  const mode = optionalEnum(value.mode, MODES, "theme.mode");
+  const accent = optionalEnum(value.accent, ACCENTS, "theme.accent");
+  const tokens = parseTokens(value.tokens);
+  const overrides = parseOverrides(value.overrides);
+  const radius = optionalString(value.radius, "theme.radius");
+  const radiusScale = optionalEnum(value.radiusScale, RADIUS_SCALES, "theme.radiusScale");
+  const spacing = optionalString(value.spacing, "theme.spacing");
+  if (preset !== void 0) config.preset = preset;
+  if (mode !== void 0) config.mode = mode;
+  if (accent !== void 0) config.accent = accent;
+  if (tokens !== void 0) config.tokens = tokens;
+  if (overrides !== void 0) config.overrides = overrides;
+  if (parsedAccentOnly !== void 0) config.accentOnly = parsedAccentOnly;
+  if (appearance !== void 0) config.appearance = appearance;
+  if (radius !== void 0) config.radius = radius;
+  if (radiusScale !== void 0) config.radiusScale = radiusScale;
+  if (spacing !== void 0) config.spacing = spacing;
+  return config;
+}
+function stringifyNajmThemeConfig(config, space = 2) {
+  return JSON.stringify(config, null, space);
+}
+var NajmDesignContext = React.createContext({
+  components: {}
+});
+function useNajmDesign() {
+  return React.useContext(NajmDesignContext);
 }
-function useResolvedBorderDegree(options = {}) {
-  const appearance = useNajmAppearance();
-  return resolveBorderDegree(
-    options.borderDegree,
-    options.bordered,
-    appearance.borderDegree,
-    options.fallback
+function useNajmComponentStyle(name) {
+  const { components } = useNajmDesign();
+  return components[name];
+}
+var SCALE_FACTOR = {
+  compact: "0.95",
+  default: "1",
+  comfortable: "1.05"
+};
+function typographyToStyle(t) {
+  const style = {};
+  if (t.fontSans) style["--font-sans"] = t.fontSans;
+  if (t.fontHeading) style["--font-heading"] = t.fontHeading;
+  if (t.fontMono) style["--font-mono"] = t.fontMono;
+  if (t.baseSize) style["--font-size-base"] = t.baseSize;
+  if (t.lineHeight) style["--line-height-base"] = t.lineHeight;
+  if (t.letterSpacing) style["--letter-spacing-base"] = t.letterSpacing;
+  if (t.scale) style["--font-scale"] = SCALE_FACTOR[t.scale];
+  return style;
+}
+function layoutToStyle(layout) {
+  const style = {};
+  if (layout.pageGutter) style["--page-gutter"] = layout.pageGutter;
+  if (layout.sectionGap) style["--section-gap"] = layout.sectionGap;
+  return style;
+}
+function NajmDesignProvider({
+  config,
+  mode,
+  className,
+  children
+}) {
+  const contextValue = React.useMemo(
+    () => ({ components: config.components ?? {}, typography: config.typography, layout: config.layout }),
+    [config.components, config.typography, config.layout]
+  );
+  const typographyStyle = React.useMemo(
+    () => config.typography ? typographyToStyle(config.typography) : void 0,
+    [config.typography]
+  );
+  const layoutStyle = React.useMemo(
+    () => config.layout ? layoutToStyle(config.layout) : void 0,
+    [config.layout]
+  );
+  const providerStyle = React.useMemo(
+    () => ({ ...layoutStyle ?? {}, ...typographyStyle ?? {} }),
+    [layoutStyle, typographyStyle]
   );
+  return /* @__PURE__ */ jsx(NajmDesignContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(NajmThemeProvider, { config: config.theme, mode, className, children: layoutStyle || typographyStyle ? (
+    // `display: contents` lets design CSS variables cascade to
+    // children without introducing a layout box that would break height
+    // chains (e.g. h-full) in the consuming app.
+    /* @__PURE__ */ jsx("div", { style: { display: "contents", ...providerStyle }, "data-najm-design-vars": "", children })
+  ) : children }) });
+}
+
+// src/theme/design-types.ts
+var NAJM_COMPONENT_NAMES = [
+  "button",
+  "badge",
+  "card",
+  "table",
+  "tabs",
+  "dialog",
+  "alert",
+  "sidebar",
+  "pageHeader",
+  "input",
+  "select",
+  "sheet",
+  "popover",
+  "tooltip",
+  "progress",
+  "avatar"
+];
+var RADIUS_VALUE_MAP = {
+  none: "0",
+  xs: "var(--radius-xs)",
+  sm: "var(--radius-sm)",
+  md: "var(--radius-md)",
+  lg: "var(--radius-lg)",
+  xl: "var(--radius-xl)",
+  full: "9999px"
+};
+function resolveRadiusValue(radius) {
+  if (!radius || radius === "inherit") return void 0;
+  return RADIUS_VALUE_MAP[radius] ?? radius;
+}
+
+// src/theme/design-config.ts
+var ROOT_KEYS2 = /* @__PURE__ */ new Set(["version", "theme", "typography", "components", "layout"]);
+var TYPOGRAPHY_KEYS = /* @__PURE__ */ new Set([
+  "fontSans",
+  "fontHeading",
+  "fontMono",
+  "baseSize",
+  "scale",
+  "lineHeight",
+  "letterSpacing"
+]);
+var LAYOUT_KEYS = /* @__PURE__ */ new Set(["pageGutter", "sectionGap"]);
+var COMPONENT_KEYS = /* @__PURE__ */ new Set([
+  "card",
+  "showSectionLabels",
+  "showSectionSeparators",
+  "defaultVariant",
+  "defaultSize",
+  "density",
+  "headerColor",
+  "headerTextColor",
+  "borderColor",
+  "radius",
+  "borderWidth",
+  "slots",
+  "variants"
+]);
+var SLOT_KEYS = /* @__PURE__ */ new Set(["className", "radius", "borderWidth", "padding", "paddingTop"]);
+var VARIANT_KEYS = /* @__PURE__ */ new Set(["use", "className", "tokens"]);
+var COMPONENT_NAME_SET = new Set(NAJM_COMPONENT_NAMES);
+var DENSITIES = /* @__PURE__ */ new Set(["compact", "default", "comfortable"]);
+var SCALES = /* @__PURE__ */ new Set(["compact", "default", "comfortable"]);
+function isRecord2(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function assertKnownKeys2(value, keys, path) {
+  const unknown = Object.keys(value).find((key) => !keys.has(key));
+  if (unknown) throw new TypeError(`Unknown ${path} property: ${unknown}`);
+}
+function optionalString2(value, path) {
+  if (value === void 0) return void 0;
+  if (typeof value !== "string") {
+    throw new TypeError(`${path} must be a string`);
+  }
+  return value;
+}
+function optionalBoolean(value, path) {
+  if (value === void 0) return void 0;
+  if (typeof value !== "boolean") {
+    throw new TypeError(`${path} must be a boolean`);
+  }
+  return value;
 }
-function surfaceBorderClasses(degree) {
-  if (degree === "none") return "border border-transparent";
-  return `border ${borderColorClassForDegree(degree)}`;
+function optionalEnum2(value, values, path) {
+  if (value === void 0) return void 0;
+  if (typeof value !== "string" || !values.has(value)) {
+    throw new TypeError(`${path} must be one of: ${[...values].join(", ")}`);
+  }
+  return value;
+}
+function parseTypography(value) {
+  if (value === void 0) return void 0;
+  if (!isRecord2(value)) throw new TypeError("typography must be an object");
+  assertKnownKeys2(value, TYPOGRAPHY_KEYS, "typography");
+  const cfg = {};
+  const fontSans = optionalString2(value.fontSans, "typography.fontSans");
+  const fontHeading = optionalString2(value.fontHeading, "typography.fontHeading");
+  const fontMono = optionalString2(value.fontMono, "typography.fontMono");
+  const baseSize = optionalString2(value.baseSize, "typography.baseSize");
+  const scale = optionalEnum2(value.scale, SCALES, "typography.scale");
+  const lineHeight = optionalString2(value.lineHeight, "typography.lineHeight");
+  const letterSpacing = optionalString2(value.letterSpacing, "typography.letterSpacing");
+  if (fontSans !== void 0) cfg.fontSans = fontSans;
+  if (fontHeading !== void 0) cfg.fontHeading = fontHeading;
+  if (fontMono !== void 0) cfg.fontMono = fontMono;
+  if (baseSize !== void 0) cfg.baseSize = baseSize;
+  if (scale !== void 0) cfg.scale = scale;
+  if (lineHeight !== void 0) cfg.lineHeight = lineHeight;
+  if (letterSpacing !== void 0) cfg.letterSpacing = letterSpacing;
+  return cfg;
+}
+function parseLayout(value) {
+  if (value === void 0) return void 0;
+  if (!isRecord2(value)) throw new TypeError("layout must be an object");
+  assertKnownKeys2(value, LAYOUT_KEYS, "layout");
+  const cfg = {};
+  const pageGutter = optionalString2(value.pageGutter, "layout.pageGutter");
+  const sectionGap = optionalString2(value.sectionGap, "layout.sectionGap");
+  if (pageGutter !== void 0) cfg.pageGutter = pageGutter;
+  if (sectionGap !== void 0) cfg.sectionGap = sectionGap;
+  return cfg;
+}
+function parseVariant(value, path) {
+  if (!isRecord2(value)) throw new TypeError(`${path} must be an object`);
+  assertKnownKeys2(value, VARIANT_KEYS, path);
+  const variant = {};
+  const use = optionalString2(value.use, `${path}.use`);
+  const className = optionalString2(value.className, `${path}.className`);
+  if (use !== void 0) variant.use = use;
+  if (className !== void 0) variant.className = className;
+  if (value.tokens !== void 0) {
+    if (!isRecord2(value.tokens)) throw new TypeError(`${path}.tokens must be an object`);
+    variant.tokens = value.tokens;
+  }
+  return variant;
+}
+function parseComponentStyle(value, path) {
+  if (!isRecord2(value)) throw new TypeError(`${path} must be an object`);
+  assertKnownKeys2(value, COMPONENT_KEYS, path);
+  const cfg = {};
+  const card = optionalBoolean(value.card, `${path}.card`);
+  const showSectionLabels = optionalBoolean(value.showSectionLabels, `${path}.showSectionLabels`);
+  const showSectionSeparators = optionalBoolean(value.showSectionSeparators, `${path}.showSectionSeparators`);
+  const defaultVariant = optionalString2(value.defaultVariant, `${path}.defaultVariant`);
+  const defaultSize = optionalString2(value.defaultSize, `${path}.defaultSize`);
+  const density = optionalEnum2(value.density, DENSITIES, `${path}.density`);
+  const headerColor = optionalString2(value.headerColor, `${path}.headerColor`);
+  const headerTextColor = optionalString2(value.headerTextColor, `${path}.headerTextColor`);
+  const borderColor = optionalString2(value.borderColor, `${path}.borderColor`);
+  const radius = optionalString2(value.radius, `${path}.radius`);
+  const borderWidth = optionalString2(value.borderWidth, `${path}.borderWidth`);
+  if (card !== void 0) cfg.card = card;
+  if (showSectionLabels !== void 0) cfg.showSectionLabels = showSectionLabels;
+  if (showSectionSeparators !== void 0) cfg.showSectionSeparators = showSectionSeparators;
+  if (defaultVariant !== void 0) cfg.defaultVariant = defaultVariant;
+  if (defaultSize !== void 0) cfg.defaultSize = defaultSize;
+  if (density !== void 0) cfg.density = density;
+  if (headerColor !== void 0) cfg.headerColor = headerColor;
+  if (headerTextColor !== void 0) cfg.headerTextColor = headerTextColor;
+  if (borderColor !== void 0) cfg.borderColor = borderColor;
+  if (radius !== void 0) cfg.radius = radius;
+  if (borderWidth !== void 0) cfg.borderWidth = borderWidth;
+  if (value.slots !== void 0) {
+    if (!isRecord2(value.slots)) throw new TypeError(`${path}.slots must be an object`);
+    const slots = {};
+    for (const [slotName, slotValue] of Object.entries(value.slots)) {
+      if (!isRecord2(slotValue)) throw new TypeError(`${path}.slots.${slotName} must be an object`);
+      assertKnownKeys2(slotValue, SLOT_KEYS, `${path}.slots.${slotName}`);
+      slots[slotName] = slotValue;
+    }
+    cfg.slots = slots;
+  }
+  if (value.variants !== void 0) {
+    if (!isRecord2(value.variants)) throw new TypeError(`${path}.variants must be an object`);
+    const variants = {};
+    for (const [variantName, variantValue] of Object.entries(value.variants)) {
+      variants[variantName] = parseVariant(variantValue, `${path}.variants.${variantName}`);
+    }
+    cfg.variants = variants;
+  }
+  return cfg;
+}
+function parseComponents(value) {
+  if (value === void 0) return void 0;
+  if (!isRecord2(value)) throw new TypeError("components must be an object");
+  const unknown = Object.keys(value).find((key) => !COMPONENT_NAME_SET.has(key));
+  if (unknown) throw new TypeError(`Unknown component name: ${unknown}`);
+  const components = {};
+  for (const [name, cfg] of Object.entries(value)) {
+    components[name] = parseComponentStyle(cfg, `components.${name}`);
+  }
+  return components;
+}
+function defineNajmDesignConfig(config) {
+  return config;
+}
+function parseNajmDesignConfig(input) {
+  let value = input;
+  if (typeof input === "string") {
+    try {
+      value = JSON.parse(input);
+    } catch (error) {
+      throw new TypeError(`Invalid design JSON: ${error.message}`);
+    }
+  }
+  if (!isRecord2(value)) throw new TypeError("Design config must be an object");
+  if (!("version" in value) && !("theme" in value)) {
+    return {
+      version: 1,
+      theme: parseNajmThemeConfig(value)
+    };
+  }
+  assertKnownKeys2(value, ROOT_KEYS2, "design");
+  if (value.version !== void 0 && value.version !== 1) {
+    throw new TypeError("design.version must be 1");
+  }
+  if (value.theme === void 0) throw new TypeError("design.theme is required");
+  const config = {
+    version: 1,
+    theme: parseNajmThemeConfig(value.theme)
+  };
+  const typography = parseTypography(value.typography);
+  if (typography !== void 0) config.typography = typography;
+  const components = parseComponents(value.components);
+  if (components !== void 0) config.components = components;
+  const layout = parseLayout(value.layout);
+  if (layout !== void 0) config.layout = layout;
+  return config;
+}
+function stringifyNajmDesignConfig(config, space = 2) {
+  return JSON.stringify(config, null, space);
+}
+function resolveVariantAlias(variants, variant) {
+  if (!variants) return { variant };
+  const seen = /* @__PURE__ */ new Set();
+  let current = variant;
+  let style = variants[current];
+  while (style?.use && !seen.has(current)) {
+    seen.add(current);
+    const next = style.use;
+    if (seen.has(next)) break;
+    current = next;
+    style = variants[current];
+  }
+  return { variant: current, style };
+}
+
+// src/theme/borders.ts
+var SURFACE_BORDER_CLASSES = {
+  all: "najm-border border-border",
+  top: "najm-border-t border-border",
+  right: "najm-border-r border-border",
+  bottom: "najm-border-b border-border",
+  left: "najm-border-l border-border"
+};
+var SIDEBAR_BORDER_CLASSES = {
+  all: "najm-border border-sidebar-border",
+  top: "najm-border-t border-sidebar-border",
+  right: "najm-border-r border-sidebar-border",
+  bottom: "najm-border-b border-sidebar-border",
+  left: "najm-border-l border-sidebar-border"
+};
+var BORDER_RESET_CLASSES = {
+  all: "border-0",
+  top: "border-t-0",
+  right: "border-r-0",
+  bottom: "border-b-0",
+  left: "border-l-0"
+};
+function surfaceBorderClasses(bordered = true, side = "all") {
+  return bordered === false ? BORDER_RESET_CLASSES[side] : SURFACE_BORDER_CLASSES[side];
+}
+function sidebarBorderClasses(bordered = true, side = "all") {
+  return bordered === false ? BORDER_RESET_CLASSES[side] : SIDEBAR_BORDER_CLASSES[side];
+}
+function inputBorderClasses(bordered = true) {
+  return bordered === false ? "border-0" : "najm-border border-input";
 }
 var EDITABLE_INPUT_TYPES = /* @__PURE__ */ new Set([
   "text",
@@ -600,21 +1165,25 @@ var Button = React.forwardRef(
     leftIcon,
     rightIcon,
     bordered,
-    borderDegree,
     disabled,
     children,
     onClick,
+    style,
     ...props
   }, ref) => {
+    const recipe = useNajmComponentStyle("button");
+    const aliased = resolveVariantAlias(
+      recipe?.variants,
+      variant ?? recipe?.defaultVariant ?? "default"
+    );
+    const effVariant = variant ?? aliased.variant ?? recipe?.defaultVariant;
+    const effSize = size ?? recipe?.defaultSize;
+    const recipeRadius = rounded === void 0 ? resolveRadiusValue(recipe?.radius) : void 0;
+    const recipeStyle = recipeRadius ? { borderRadius: recipeRadius } : void 0;
     const [pending, setPending] = React.useState(false);
     const isLoading = loading || pending;
     const isDisabled = disabled || disabledWhileLoading && isLoading;
     const Comp = asChild ? Slot : "button";
-    const resolvedBorderDegree = useResolvedBorderDegree({
-      borderDegree,
-      bordered,
-      fallback: "default"
-    });
     const handleClick = React.useCallback(
       (event) => {
         if (isDisabled) {
@@ -644,21 +1213,22 @@ var Button = React.forwardRef(
         "data-slot": "button",
         "data-loading": isLoading || void 0,
         "data-disabled": isDisabled || void 0,
-        "data-border-degree": variant === "outline" || bordered || borderDegree ? resolvedBorderDegree : void 0,
+        "data-bordered": effVariant === "outline" ? "true" : bordered === false ? "false" : bordered ? "true" : void 0,
         "aria-busy": isLoading || void 0,
         "aria-disabled": asChild && isDisabled ? true : void 0,
         disabled: !asChild ? isDisabled : void 0,
+        style: recipeStyle ? { ...recipeStyle, ...style } : style,
         className: cn(
-          buttonVariants({ variant, size, rounded, fullWidth }),
-          // Outline buttons always have a border; let the resolved degree drive its color.
-          variant === "outline" && borderColorClassForDegree(resolvedBorderDegree),
+          buttonVariants({ variant: effVariant, size: effSize, rounded, fullWidth }),
+          aliased.style?.className,
+          // Outline buttons always carry an input-style border.
+          effVariant === "outline" && inputBorderClasses(true),
           // Filled/ghost/plain/link/success/warning/info/soft/subtle buttons only get a
-          // border when the consumer explicitly opts in via `bordered` or `borderDegree`.
-          // We do NOT honor the global strong mode for these, because it would make every
-          // filled button look outlined.
-          variant !== "outline" && (bordered || borderDegree) && cn(
+          // border when the consumer explicitly opts in via `bordered`. Global theming
+          // should not outline every filled button.
+          effVariant !== "outline" && bordered === true && cn(
             "border",
-            borderDegree ? borderColorClassForDegree(resolvedBorderDegree) : "border-muted-foreground"
+            "border-muted-foreground"
           ),
           className
         ),
@@ -730,41 +1300,41 @@ var badgeColorVariants = cva(
       }
     },
     compoundVariants: [
-      { color: "primary", look: "solid", class: "bg-pink-500 text-white" },
-      { color: "primary", look: "soft", class: "bg-pink-500/10 text-pink-400 border-pink-500/20" },
-      { color: "primary", look: ["outline", "dash"], class: "text-pink-400 border-pink-500/60" },
-      { color: "secondary", look: "solid", class: "bg-indigo-500 text-white" },
-      { color: "secondary", look: "soft", class: "bg-indigo-500/10 text-indigo-400 border-indigo-500/20" },
-      { color: "secondary", look: ["outline", "dash"], class: "text-indigo-400 border-indigo-500/60" },
-      { color: "accent", look: "solid", class: "bg-orange-500 text-white" },
-      { color: "accent", look: "soft", class: "bg-orange-500/10 text-orange-400 border-orange-500/20" },
-      { color: "accent", look: ["outline", "dash"], class: "text-orange-400 border-orange-500/60" },
-      { color: "neutral", look: "solid", class: "bg-slate-500 text-white" },
-      { color: "neutral", look: "soft", class: "bg-slate-500/10 text-slate-400 border-slate-500/20" },
-      { color: "neutral", look: ["outline", "dash"], class: "text-slate-400 border-slate-500/60" },
-      { color: "info", look: "solid", class: "bg-sky-500 text-white" },
-      { color: "info", look: "soft", class: "bg-sky-500/10 text-sky-400 border-sky-500/20" },
-      { color: "info", look: ["outline", "dash"], class: "text-sky-400 border-sky-500/60" },
-      { color: "success", look: "solid", class: "bg-emerald-500 text-white" },
-      { color: "success", look: "soft", class: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20" },
-      { color: "success", look: ["outline", "dash"], class: "text-emerald-400 border-emerald-500/60" },
-      { color: "warning", look: "solid", class: "bg-amber-400 text-slate-900" },
-      { color: "warning", look: "soft", class: "bg-amber-400/10 text-amber-400 border-amber-400/20" },
-      { color: "warning", look: ["outline", "dash"], class: "text-amber-400 border-amber-400/60" },
-      { color: "destructive", look: "solid", class: "bg-red-500 text-white" },
-      { color: "destructive", look: "soft", class: "bg-red-500/10 text-red-400 border-red-500/20" },
-      { color: "destructive", look: ["outline", "dash"], class: "text-red-400 border-red-500/60" }
+      { color: "primary", look: "solid", class: "bg-primary text-primary-foreground" },
+      { color: "primary", look: "soft", class: "bg-primary/10 text-primary border-primary/20" },
+      { color: "primary", look: ["outline", "dash"], class: "text-primary border-primary/60" },
+      { color: "secondary", look: "solid", class: "bg-secondary text-secondary-foreground" },
+      { color: "secondary", look: "soft", class: "bg-secondary/10 text-secondary-foreground border-secondary/30" },
+      { color: "secondary", look: ["outline", "dash"], class: "text-secondary-foreground border-secondary/40" },
+      { color: "accent", look: "solid", class: "bg-accent text-accent-foreground" },
+      { color: "accent", look: "soft", class: "bg-accent/10 text-accent-foreground border-accent/30" },
+      { color: "accent", look: ["outline", "dash"], class: "text-accent-foreground border-accent/40" },
+      { color: "neutral", look: "solid", class: "bg-neutral text-neutral-foreground" },
+      { color: "neutral", look: "soft", class: "bg-neutral/10 text-neutral-foreground border-neutral/30" },
+      { color: "neutral", look: ["outline", "dash"], class: "text-neutral-foreground border-neutral/40" },
+      { color: "info", look: "solid", class: "bg-info text-info-foreground" },
+      { color: "info", look: "soft", class: "bg-info/10 text-info border-info/20" },
+      { color: "info", look: ["outline", "dash"], class: "text-info border-info/60" },
+      { color: "success", look: "solid", class: "bg-success text-success-foreground" },
+      { color: "success", look: "soft", class: "bg-success/10 text-success border-success/20" },
+      { color: "success", look: ["outline", "dash"], class: "text-success border-success/60" },
+      { color: "warning", look: "solid", class: "bg-warning text-warning-foreground" },
+      { color: "warning", look: "soft", class: "bg-warning/10 text-warning border-warning/20" },
+      { color: "warning", look: ["outline", "dash"], class: "text-warning border-warning/60" },
+      { color: "destructive", look: "solid", class: "bg-destructive text-destructive-foreground" },
+      { color: "destructive", look: "soft", class: "bg-destructive/10 text-destructive border-destructive/20" },
+      { color: "destructive", look: ["outline", "dash"], class: "text-destructive border-destructive/60" }
     ],
     defaultVariants: { color: "primary", look: "solid", size: "md", shape: "default" }
   }
 );
 var COLOR_TEXT_MAP = {
-  success: "text-emerald-600",
-  warning: "text-amber-500",
-  accent: "text-orange-500",
-  info: "text-sky-600",
-  neutral: "text-slate-500",
-  destructive: "text-red-600"
+  success: "text-success",
+  warning: "text-warning",
+  accent: "text-accent-foreground",
+  info: "text-info",
+  neutral: "text-neutral-foreground",
+  destructive: "text-destructive"
 };
 var SIZE_TEXT_MAP = {
   sm: "text-xs",
@@ -791,10 +1361,19 @@ function Badge({
   iconPosition = "left",
   asChild = false,
   children,
+  style,
   ...props
 }) {
   const Comp = asChild ? Slot : "span";
-  const resolvedColor = statusMap?.[status ?? ""] ?? color;
+  const recipe = useNajmComponentStyle("badge");
+  const aliased = resolveVariantAlias(
+    recipe?.variants,
+    variant ?? recipe?.defaultVariant ?? "default"
+  );
+  const effVariant = variant ?? aliased.variant ?? recipe?.defaultVariant;
+  const recipeRadius = shape === void 0 ? resolveRadiusValue(recipe?.radius) : void 0;
+  const recipeStyle = recipeRadius ? { borderRadius: recipeRadius, ...style } : style;
+  const resolvedColor = statusMap?.[status ?? ""] ?? color ?? "primary";
   const resolvedLabel = label ?? (typeof children === "string" ? children : void 0) ?? status;
   const content = typeof children !== "string" && children ? children : resolvedLabel ?? children;
   const resolvedIcon = icon ?? (resolvedColor ? iconMap?.[resolvedColor] : void 0);
@@ -814,6 +1393,7 @@ function Badge({
           sizeClass,
           className
         ),
+        style: recipeStyle,
         ...props,
         children: [
           iconPosition === "left" && iconNode,
@@ -823,8 +1403,8 @@ function Badge({
       }
     );
   }
-  const classes = resolvedColor ? badgeColorVariants({ color: resolvedColor, look, size, shape }) : badgeVariants({ variant });
-  return /* @__PURE__ */ jsxs(Comp, { "data-slot": "badge", className: cn(classes, className), ...props, children: [
+  const classes = resolvedColor ? badgeColorVariants({ color: resolvedColor, look, size, shape }) : badgeVariants({ variant: effVariant });
+  return /* @__PURE__ */ jsxs(Comp, { "data-slot": "badge", className: cn(classes, aliased.style?.className, className), style: recipeStyle, ...props, children: [
     iconPosition === "left" && iconNode,
     content,
     iconPosition === "right" && iconNode
@@ -1136,14 +1716,13 @@ var sheetVariants = cva(
   }
 );
 function SheetContent({ className, portalClassName, side, children, ...props }) {
-  const resolvedBorderDegree = useResolvedBorderDegree();
   return /* @__PURE__ */ jsx(SheetPortal, { children: /* @__PURE__ */ jsxs("div", { className: portalClassName, children: [
     /* @__PURE__ */ jsx(SheetOverlay, {}),
     /* @__PURE__ */ jsxs(
       SheetPrimitive.Content,
       {
         "data-slot": "sheet-content",
-        className: cn(sheetVariants({ side }), borderColorClassForDegree(resolvedBorderDegree), className),
+        className: cn(sheetVariants({ side }), className),
         ...props,
         children: [
           children,
@@ -1297,7 +1876,6 @@ function DialogOverlay({ className, ...props }) {
 }
 function DialogContent({ className, children, ...props }) {
   const portalClassName = useNPortalScope();
-  const resolvedBorderDegree = useResolvedBorderDegree();
   return /* @__PURE__ */ jsx(DialogPortal, { "data-slot": "dialog-portal", children: /* @__PURE__ */ jsxs("div", { className: portalClassName, children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
     /* @__PURE__ */ jsxs(
@@ -1305,8 +1883,7 @@ function DialogContent({ className, children, ...props }) {
       {
         "data-slot": "dialog-content",
         className: cn(
-          "bg-card data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-sm translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border p-6 shadow-lg duration-200",
-          borderColorClassForDegree(resolvedBorderDegree),
+          "bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-sm translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg najm-border border-border p-6 shadow-lg duration-200",
           className
         ),
         ...props,
@@ -2199,7 +2776,6 @@ function DropdownMenuSubContent({ className, ...props }) {
 }
 function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
   const container = React.useContext(NajmThemeContainerCtx);
-  const resolvedBorderDegree = useResolvedBorderDegree();
   useNajmPortalLayerStyles();
   return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Content,
@@ -2208,7 +2784,6 @@ function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
       sideOffset,
       className: cn(
         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[10000] min-w-[8rem] overflow-hidden rounded-md border border-border p-1 shadow-md",
-        borderColorClassForDegree(resolvedBorderDegree),
         className
       ),
       ...props
@@ -2279,7 +2854,6 @@ function PopoverAnchor({ ...props }) {
 }
 function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
   const container = React.useContext(NajmThemeContainerCtx);
-  const resolvedBorderDegree = useResolvedBorderDegree();
   useNajmPortalLayerStyles();
   return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
     PopoverPrimitive.Content,
@@ -2289,7 +2863,6 @@ function PopoverContent({ className, align = "center", sideOffset = 4, ...props
       sideOffset,
       className: cn(
         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[10000] w-72 origin-(--radix-popover-content-transform-origin) rounded-md border border-border p-4 shadow-md outline-none",
-        borderColorClassForDegree(resolvedBorderDegree),
         className
       ),
       ...props
@@ -2989,7 +3562,7 @@ function Avatar({
       children: [
         hasChildren ? children : hasShortcut ? /* @__PURE__ */ jsxs(Fragment, { children: [
           src && /* @__PURE__ */ jsx(
-            "img",
+            AvatarPrimitive.Image,
             {
               "data-slot": "avatar-image",
               src,
@@ -2998,7 +3571,7 @@ function Avatar({
             }
           ),
           /* @__PURE__ */ jsx(
-            "span",
+            AvatarPrimitive.Fallback,
             {
               "data-slot": "avatar-fallback",
               className: cn(fallbackVariants({ size, shape }), fallbackClassName),
@@ -3023,7 +3596,7 @@ function Avatar({
 }
 function AvatarImage({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    "img",
+    AvatarPrimitive.Image,
     {
       "data-slot": "avatar-image",
       className: cn("aspect-square size-full", className),
@@ -3033,11 +3606,10 @@ function AvatarImage({ className, ...props }) {
 }
 function AvatarFallback({
   className,
-  delayMs: _delayMs,
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    "span",
+    AvatarPrimitive.Fallback,
     {
       "data-slot": "avatar-fallback",
       className: cn("flex size-full items-center justify-center rounded-full bg-muted", className),
@@ -3867,7 +4439,6 @@ function NAvatar({
   const hasText = Boolean(title || subtitle || meta);
   const fallbackText = fallback && !title ? fallback : label ? getInitials(label) : "?";
   const shapeClass = SHAPE_CLASSES[shape];
-  const [imgLoaded, setImgLoaded] = React__default.useState(false);
   return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", classNames?.root, className), children: [
     /* @__PURE__ */ jsxs(
       Avatar,
@@ -3879,11 +4450,10 @@ function NAvatar({
             {
               src: imageSrc,
               alt: alt || label,
-              onLoadingStatusChange: (status) => setImgLoaded(status === "loaded"),
-              className: cn("absolute inset-0 z-10 object-cover", classNames?.image)
+              className: cn("object-cover", classNames?.image)
             }
           ),
-          !imgLoaded && /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(
             AvatarFallback,
             {
               style: { backgroundColor: bg, color: text },
@@ -3938,18 +4508,18 @@ function NCard({
   noPadding = false,
   separator = false,
   bordered,
-  borderDegree,
   className,
   classNames,
   onClick
 }) {
   const isEmpty = empty ?? noData ?? false;
   const resolvedEmptyText = emptyText ?? noDataText ?? "No data available";
-  const resolvedBorderDegree = useResolvedBorderDegree({
-    borderDegree,
-    bordered,
-    fallback: "default"
-  });
+  const recipe = useNajmComponentStyle("card");
+  const recipeRadius = resolveRadiusValue(recipe?.radius);
+  const recipeStyle = recipeRadius || recipe?.borderWidth ? {
+    ...recipeRadius ? { borderRadius: recipeRadius } : {},
+    ...recipe?.borderWidth ? { borderWidth: recipe.borderWidth } : {}
+  } : void 0;
   let actionSlot = null;
   let footerSlot = null;
   const mainChildren = [];
@@ -3968,18 +4538,16 @@ function NCard({
   });
   const hasHeader = !!(title || description || actionSlot);
   const iconSize = description ? "h-8 w-8" : "h-5 w-5";
-  const isStrong = resolvedBorderDegree === "strong";
-  const isNone = resolvedBorderDegree === "none";
   return /* @__PURE__ */ jsxs(
     Card,
     {
-      "data-bordered": bordered ? "true" : void 0,
-      "data-border-degree": resolvedBorderDegree,
+      "data-bordered": bordered === false ? "false" : bordered ? "true" : void 0,
       onClick,
+      style: recipeStyle,
       className: cn(
         "flex flex-col",
         !noPadding && "p-4 gap-3",
-        isNone ? "border-transparent" : `${borderColorClassForDegree(resolvedBorderDegree)} ${isStrong ? "shadow-none" : ""}`,
+        surfaceBorderClasses(bordered),
         classNames?.root,
         className
       ),
@@ -4168,7 +4736,6 @@ function DefaultCard({
   change,
   onClick,
   bordered,
-  borderDegree,
   className,
   classNames
 }) {
@@ -4178,7 +4745,6 @@ function DefaultCard({
       noPadding: true,
       onClick,
       bordered,
-      borderDegree,
       className: cn(
         "group p-4 transition-colors",
         onClick && "cursor-pointer hover:border-border/60 hover:bg-accent/40",
@@ -4235,7 +4801,6 @@ function UsageCard({
   countLabel,
   onClick,
   bordered,
-  borderDegree,
   className,
   classNames
 }) {
@@ -4247,7 +4812,6 @@ function UsageCard({
       noPadding: true,
       onClick,
       bordered,
-      borderDegree,
       className: cn(
         "group min-h-[116px] px-4 py-4 transition-colors",
         onClick && "cursor-pointer hover:bg-accent/30",
@@ -4292,14 +4856,13 @@ function UsageCard({
     }
   );
 }
-function CompactCard({ icon, label, value, unit, iconColor, onClick, bordered, borderDegree, className, classNames }) {
+function CompactCard({ icon, label, value, unit, iconColor, onClick, bordered, className, classNames }) {
   return /* @__PURE__ */ jsxs(
     NCard,
     {
       noPadding: true,
       onClick,
       bordered,
-      borderDegree,
       className: cn(
         !bordered && "border-0",
         "bg-foreground/10 p-3 shadow-none",
@@ -5118,7 +5681,7 @@ function NFolderIcon({ size = "md", className }) {
   return /* @__PURE__ */ jsx("span", { className: cn(dim, "inline-flex shrink-0 items-center justify-center", className), children: /* @__PURE__ */ jsx(Folder, { size: iconSize, className: "text-sky-500", fill: "currentColor", strokeWidth: 1.5 }) });
 }
 var NO_SHADE = /* @__PURE__ */ new Set(["black", "white"]);
-var PRESETS = {
+var PRESETS2 = {
   muted: "border-muted-foreground",
   primary: "border-primary",
   accent: "border-accent",
@@ -5150,15 +5713,11 @@ var FOCUS_INTERACTIVE_BASE = "border focus-within:border-primary";
 var HOVER_INTERACTIVE_BASE = "hover:border-primary";
 var STATIC_BASE = "border";
 var BaseInput = React__default.forwardRef(
-  ({ children, variant = "default", status = "default", bordered, borderDegree, borderColor, className, disabled = false, onHover, onClick, hasIcon, ...rest }, ref) => {
+  ({ children, variant = "default", status = "default", bordered, borderColor, className, disabled = false, onHover, onClick, hasIcon, ...rest }, ref) => {
     const isGhost = variant === "ghost";
     const isError = status === "error";
-    const resolvedBorderDegree = useResolvedBorderDegree({
-      borderDegree,
-      bordered,
-      fallback: "default"
-    });
     const hasExplicitColor = !!borderColor;
+    const isBordered = bordered !== false;
     let colorClass = "";
     let borderClass = "";
     if (!isGhost) {
@@ -5166,17 +5725,17 @@ var BaseInput = React__default.forwardRef(
         borderClass = ERROR_BORDER;
       } else if (hasExplicitColor) {
         borderClass = `${STATIC_BASE} ${FOCUS_INTERACTIVE_BASE} ${HOVER_INTERACTIVE_BASE}`;
-        colorClass = PRESETS[borderColor] ?? (NO_SHADE.has(borderColor) ? `border-${borderColor}` : `border-${borderColor}-600`);
+        colorClass = PRESETS2[borderColor] ?? (NO_SHADE.has(borderColor) ? `border-${borderColor}` : `border-${borderColor}-600`);
       } else {
-        const restingBorderClass = inputBorderColorClassForDegree(resolvedBorderDegree);
-        borderClass = resolvedBorderDegree === "default" ? `${STATIC_BASE} ${restingBorderClass} hover:border-input focus-within:border-primary/70` : `${STATIC_BASE} ${restingBorderClass} focus-within:border-primary/70`;
+        const restingBorderClass = inputBorderClasses(isBordered);
+        borderClass = isBordered ? `${STATIC_BASE} ${restingBorderClass} hover:border-input focus-within:border-primary/70` : restingBorderClass;
       }
     }
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        "data-border-degree": isGhost ? void 0 : resolvedBorderDegree,
+        "data-bordered": !isGhost && !isBordered ? "false" : !isGhost ? "true" : void 0,
         className: cn(
           inputVariants({ variant, status, hasIcon, disabled }),
           !isGhost && borderClass,
@@ -5201,33 +5760,33 @@ function resolveIcon(icon) {
   if (!icon) return null;
   return /* @__PURE__ */ jsx(NIcon, { icon, size: 16 });
 }
-var TextInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderDegree, borderColor, disabled = false, ...props }) => {
+var TextInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, ...props }) => {
   const shouldDisplayIcon = Boolean(icon) && showIcon;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
-  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderDegree, borderColor, className: cn("gap-2", className), disabled, children: [
+  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2", className), disabled, children: [
     shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
     /* @__PURE__ */ jsx(Input, { placeholder, value, onChange: (ev) => onChange(ev.target.value), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-muted-foreground", disabled, ...props })
   ] });
 };
-var NumberInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderDegree, borderColor }) => {
+var NumberInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderColor }) => {
   const shouldDisplayIcon = Boolean(icon) && showIcon;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
-  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderDegree, borderColor, className: cn("gap-2", className), children: [
+  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2", className), children: [
     shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
     /* @__PURE__ */ jsx(Input, { type: "number", placeholder, value: value ?? "", onChange: (ev) => onChange(Number(ev.target.value)), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-muted-foreground" })
   ] });
 };
-var PasswordInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderDegree, borderColor }) => {
+var PasswordInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderColor }) => {
   const [showPassword, setShowPassword] = useState(false);
   const shouldDisplayIcon = Boolean(icon) && showIcon;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
-  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderDegree, borderColor, className: cn("gap-2", className), children: [
+  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2", className), children: [
     shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
     /* @__PURE__ */ jsx(Input, { type: showPassword ? "text" : "password", placeholder, value, onChange: (ev) => onChange(ev.target.value), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-muted-foreground" }),
     showPassword ? /* @__PURE__ */ jsx(Eye, { className: "absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground cursor-pointer", onClick: () => setShowPassword(false) }) : /* @__PURE__ */ jsx(EyeOff, { className: "absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground cursor-pointer", onClick: () => setShowPassword(true) })
   ] });
 };
-var TextAreaInput = ({ value, onChange, placeholder = "", className = "", variant = "default", status = "default", bordered, borderDegree, borderColor, rows }) => /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderDegree, borderColor, className: cn("items-start", className), children: /* @__PURE__ */ jsx(
+var TextAreaInput = ({ value, onChange, placeholder = "", className = "", variant = "default", status = "default", bordered, borderColor, rows }) => /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderColor, className: cn("items-start", className), children: /* @__PURE__ */ jsx(
   Textarea,
   {
     rows,
@@ -5244,7 +5803,7 @@ function renderItems(items) {
     return /* @__PURE__ */ jsx(SelectItem, { value, children: label }, value);
   });
 }
-var SelectInput = ({ placeholder = "", value, onChange, icon, showIcon = true, iconColor, items, className = "", variant = "default", status = "default", bordered, borderDegree, borderColor, disabled = false }) => {
+var SelectInput = ({ placeholder = "", value, onChange, icon, showIcon = true, iconColor, items, className = "", variant = "default", status = "default", bordered, borderColor, disabled = false }) => {
   const shouldDisplayIcon = Boolean(icon) && showIcon && !value;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   const displayLabel = value ? (() => {
@@ -5252,7 +5811,7 @@ var SelectInput = ({ placeholder = "", value, onChange, icon, showIcon = true, i
     return typeof found === "string" ? found : found?.label ?? value;
   })() : "";
   return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderDegree, borderColor, className: "pointer-events-none", children: [
+    /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: "pointer-events-none", children: [
       shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
       /* @__PURE__ */ jsx("span", { className: cn("flex-1 truncate text-sm", !displayLabel && "text-muted-foreground"), children: displayLabel || placeholder }),
       /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 opacity-50" })
@@ -5270,7 +5829,7 @@ var SelectInput = ({ placeholder = "", value, onChange, icon, showIcon = true, i
     ] }, String(value))
   ] });
 };
-var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...", emptyMessage = "No results found.", value, onChange, icon, showIcon = true, iconColor, items = [], className = "", variant = "default", status = "default", bordered, borderDegree, borderColor, disabled = false, allowFreeText = false }) => {
+var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...", emptyMessage = "No results found.", value, onChange, icon, showIcon = true, iconColor, items = [], className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, allowFreeText = false }) => {
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
   const normalizedItems = items.map((item) => typeof item === "string" ? { value: item, label: item } : item);
@@ -5290,7 +5849,7 @@ var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...
     setOpen(o);
     if (!o) setQuery("");
   }, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderDegree, borderColor, className: cn("cursor-pointer", className), children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("cursor-pointer", className), children: [
       shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
       /* @__PURE__ */ jsx("span", { className: cn("flex-1 truncate text-sm", !displayLabel && "text-muted-foreground"), children: displayLabel || placeholder }),
       /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
@@ -5329,7 +5888,7 @@ var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...
     ] }) })
   ] });
 };
-var MultiSelectInput = ({ placeholder = "Select items...", value = [], onChange, icon, showIcon = true, iconColor, items, className = "", variant = "default", status = "default", bordered, borderDegree, borderColor, disabled = false, searchPlaceholder = "Search...", emptyMessage = "No items found.", maxDisplay = 3, showSearch = true }) => {
+var MultiSelectInput = ({ placeholder = "Select items...", value = [], onChange, icon, showIcon = true, iconColor, items, className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, searchPlaceholder = "Search...", emptyMessage = "No items found.", maxDisplay = 3, showSearch = true }) => {
   const [open, setOpen] = useState(false);
   const shouldDisplayIcon = Boolean(icon) && showIcon && value.length === 0;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
@@ -5343,7 +5902,7 @@ var MultiSelectInput = ({ placeholder = "Select items...", value = [], onChange,
   const displayedItems = value.slice(0, maxDisplay);
   const remainingCount = value.length - maxDisplay;
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderDegree, borderColor, className: cn("gap-2 cursor-pointer", className, disabled && "cursor-not-allowed opacity-50"), children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2 cursor-pointer", className, disabled && "cursor-not-allowed opacity-50"), children: [
       shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
       /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 flex-1 overflow-hidden", children: value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: placeholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         displayedItems.map((itemValue) => /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "text-xs px-2 py-0.5 gap-1", children: [
@@ -5377,7 +5936,7 @@ var MultiSelectInput = ({ placeholder = "Select items...", value = [], onChange,
   ] });
 };
 var layoutVariants = cva("flex items-start", { variants: { layout: { column: "flex-col gap-4", row: "flex-row gap-7" } }, defaultVariants: { layout: "row" } });
-var RadioGroupInput = ({ value, onChange, className = "", variant = "default", status = "default", bordered, borderDegree, borderColor, layout = "row", items }) => /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderDegree, borderColor, className, children: /* @__PURE__ */ jsx(RadioGroup2, { onValueChange: onChange, value, className: layoutVariants({ layout }), children: items.map((item) => {
+var RadioGroupInput = ({ value, onChange, className = "", variant = "default", status = "default", bordered, borderColor, layout = "row", items }) => /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderColor, className, children: /* @__PURE__ */ jsx(RadioGroup2, { onValueChange: onChange, value, className: layoutVariants({ layout }), children: items.map((item) => {
   const itemValue = typeof item === "string" ? item : item.value;
   const itemLabel = typeof item === "string" ? item : item.label;
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center space-y-0", children: [
@@ -5385,7 +5944,7 @@ var RadioGroupInput = ({ value, onChange, className = "", variant = "default", s
     /* @__PURE__ */ jsx(Label, { className: "text-sm font-normal peer-disabled:opacity-70 ml-1", children: itemLabel })
   ] }, itemValue);
 }) }) });
-var CheckboxInput = ({ value, onChange, helper, label, checkboxClassName, className, variant = "default", status = "default", bordered, borderDegree, borderColor }) => /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderDegree, borderColor, className: cn("flex gap-2 items-center", className), children: [
+var CheckboxInput = ({ value, onChange, helper, label, checkboxClassName, className, variant = "default", status = "default", bordered, borderColor }) => /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("flex gap-2 items-center", className), children: [
   /* @__PURE__ */ jsx(Checkbox, { checked: value, onCheckedChange: onChange, className: cn("cursor-pointer transition-colors duration-200 border-primary", checkboxClassName) }),
   /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ jsx(Label, { className: "cursor-pointer text-muted-foreground", onClick: () => onChange(!value), children: label }),
@@ -5410,7 +5969,6 @@ function CheckboxGroupInput({
   variant = "default",
   status = "default",
   bordered,
-  borderDegree,
   borderColor,
   disabled = false
 }) {
@@ -5418,7 +5976,7 @@ function CheckboxGroupInput({
     const next = checked ? [...value, itemValue] : value.filter((v) => v !== itemValue);
     onChange(next);
   };
-  return /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderDegree, borderColor, className: cn("flex-wrap", className), disabled, children: /* @__PURE__ */ jsx("div", { className: cn(layoutVariants2({ layout })), children: items.map((item) => {
+  return /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderColor, className: cn("flex-wrap", className), disabled, children: /* @__PURE__ */ jsx("div", { className: cn(layoutVariants2({ layout })), children: items.map((item) => {
     const itemValue = typeof item === "string" ? item : item.value;
     const itemLabel = typeof item === "string" ? item : item.label;
     const checked = value.includes(itemValue);
@@ -5435,7 +5993,7 @@ function CheckboxGroupInput({
     ] }, itemValue);
   }) }) });
 }
-var SwitchInput = ({ value, onChange, label = "", helper, className = "", variant = "default", status = "default", bordered, borderDegree, borderColor, icon, showIcon = true, iconPosition = "label", iconColor }) => /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderDegree, borderColor, className: cn("gap-2 justify-between items-center", className), children: [
+var SwitchInput = ({ value, onChange, label = "", helper, className = "", variant = "default", status = "default", bordered, borderColor, icon, showIcon = true, iconPosition = "label", iconColor }) => /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2 justify-between items-center", className), children: [
   /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ jsxs(Label, { className: "flex items-center gap-2", children: [
       iconPosition === "label" && icon && showIcon && /* @__PURE__ */ jsx("span", { className: "w-4 h-4", children: resolveIcon(icon) }),
@@ -5448,10 +6006,10 @@ var SwitchInput = ({ value, onChange, label = "", helper, className = "", varian
     /* @__PURE__ */ jsx(Switch, { checked: value, onCheckedChange: onChange })
   ] })
 ] });
-var DateInput = ({ value, onChange, placeholder = "Pick a date", className = "", icon, showIcon = true, iconColor, variant = "default", status = "default", bordered, borderDegree, borderColor }) => {
+var DateInput = ({ value, onChange, placeholder = "Pick a date", className = "", icon, showIcon = true, iconColor, variant = "default", status = "default", bordered, borderColor }) => {
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   const toDateString = (date) => date?.toISOString().split("T")[0];
-  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderDegree, borderColor, className, children: [
+  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className, children: [
     /* @__PURE__ */ jsxs(Popover, { children: [
       /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: cn("w-full flex items-center cursor-pointer gap-2 justify-start text-left font-normal", !value && "text-foreground"), children: /* @__PURE__ */ jsx(Label, { className: "text-muted-foreground cursor-pointer", children: value ? format(typeof value === "string" ? new Date(value) : value, "PPP") : placeholder }) }) }),
       /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(Calendar, { mode: "single", selected: typeof value === "string" ? new Date(value) : value, onSelect: (date) => onChange(toDateString(date)), captionLayout: "dropdown" }) })
@@ -5466,7 +6024,7 @@ function truncateFilename(filename, maxLength = 25) {
   const name = extIndex !== -1 ? filename.slice(0, extIndex) : filename;
   return `${name.slice(0, maxLength - ext.length - 3)}...${ext}`;
 }
-var FileInput = ({ value, onChange, placeholder = "No file chosen", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderDegree, borderColor }) => {
+var FileInput = ({ value, onChange, placeholder = "No file chosen", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderColor }) => {
   const fileInputRef = useRef(null);
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   const displayFilename = () => {
@@ -5474,7 +6032,7 @@ var FileInput = ({ value, onChange, placeholder = "No file chosen", icon, showIc
     const filename = typeof value === "string" ? value.split(/[\\/]/).pop() || "" : value.name;
     return truncateFilename(filename);
   };
-  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderDegree, borderColor, className: cn("flex px-0 p-0 text-muted-foreground", className), onClick: () => fileInputRef.current?.click(), children: [
+  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("flex px-0 p-0 text-muted-foreground", className), onClick: () => fileInputRef.current?.click(), children: [
     /* @__PURE__ */ jsx("input", { type: "file", ref: fileInputRef, onChange: (e) => onChange(e.target.files?.[0] || null), className: "hidden" }),
     /* @__PURE__ */ jsxs("div", { className: "bg-muted flex h-full items-center px-3", children: [
       showIcon && (icon ? /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }) : /* @__PURE__ */ jsx(FileUp, { className: cn(iconProps.className) })),
@@ -5500,18 +6058,12 @@ function NUploader({
   listTitle = "Uploaded files",
   className,
   dropzoneClassName,
-  borderDegree,
   onFilesSelected,
   onCancel,
   onRemove
 }) {
   const inputRef = useRef(null);
   const [isDragging, setIsDragging] = useState(false);
-  const resolvedBorderDegree = useResolvedBorderDegree({
-    borderDegree,
-    fallback: "default"
-  });
-  const dropzoneBorderClass = borderColorClassForDegree(resolvedBorderDegree);
   const emit = useCallback(
     (files) => {
       if (!files || disabled) return;
@@ -5555,8 +6107,7 @@ function NUploader({
         onDragLeave,
         onDrop,
         className: cn(
-          "flex flex-col items-center justify-center gap-3 rounded-2xl border-2 border-dashed px-6 py-10 text-center transition-colors",
-          dropzoneBorderClass,
+          "flex flex-col items-center justify-center gap-3 rounded-2xl border-2 border-dashed border-border px-6 py-10 text-center transition-colors",
           "bg-muted/40 hover:bg-muted/60",
           isDragging && "border-primary bg-primary/5",
           disabled && "cursor-not-allowed opacity-60",
@@ -5792,18 +6343,52 @@ function ImageInput({
     renderFileInput()
   ] });
 }
-var StarRatingInput = ({ value, onChange, maxStars = 5, className = "", variant = "default", status = "default", bordered, borderDegree, borderColor }) => {
+var StarRatingInput = ({ value, onChange, maxStars = 5, className = "", variant = "default", status = "default", bordered, borderColor }) => {
   const stars = Array.from({ length: maxStars }, (_, i) => /* @__PURE__ */ jsx(Star, { onClick: () => onChange(i + 1), className: cn("cursor-pointer h-8 w-8", i < value ? "fill-orange-400 text-orange-400" : "fill-[#d6d6d6] text-[#d6d6d6]") }, i));
-  return /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderDegree, borderColor, className: cn("gap-2", className), children: stars });
+  return /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2", className), children: stars });
 };
 var DEFAULT_COLORS = ["#222222", "#e11d48", "#ea580c", "#16a34a", "#db2777", "#2563eb", "#9333ea", "#eab308"];
-var ColorArrayInput = ({ value, onChange, className = "", variant = "default", status = "default", bordered, borderDegree, borderColor, colors = DEFAULT_COLORS }) => {
+var ColorArrayInput = ({ value, onChange, className = "", variant = "default", status = "default", bordered, borderColor, colors = DEFAULT_COLORS }) => {
   const [selectedColor, setSelectedColor] = useState(value || "");
-  return /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderDegree, borderColor, className: cn("flex flex-wrap gap-2", className), children: colors.map((color) => /* @__PURE__ */ jsx("div", { className: cn("flex h-9 w-9 items-center justify-center cursor-pointer rounded-full transition-transform hover:scale-105", selectedColor === color && "ring-2 ring-offset-2"), onClick: () => {
+  return /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderColor, className: cn("flex flex-wrap gap-2", className), children: colors.map((color) => /* @__PURE__ */ jsx("div", { className: cn("flex h-9 w-9 items-center justify-center cursor-pointer rounded-full transition-transform hover:scale-105", selectedColor === color && "ring-2 ring-offset-2"), onClick: () => {
     setSelectedColor(color);
     onChange(color);
   }, children: /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full", style: { backgroundColor: color }, children: selectedColor === color && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-white" }) }) }, color)) });
 };
+var toOklch = converter("oklch");
+function parseColor(input) {
+  return parse((input ?? "").trim());
+}
+function formatColor(input, format2) {
+  const c = parseColor(input);
+  if (!c) return input;
+  switch (format2) {
+    case "hex":
+      return formatHex(c) ?? input;
+    case "rgb":
+      return formatRgb(c) ?? input;
+    case "hsl":
+      return formatHsl(c) ?? input;
+    case "oklch": {
+      const o = toOklch(c);
+      if (!o) return input;
+      const l = +o.l.toFixed(4);
+      const ch = +(o.c ?? 0).toFixed(4);
+      const h = +(o.h ?? 0).toFixed(2);
+      return `oklch(${l} ${ch} ${h})`;
+    }
+  }
+}
+function detectFormat(input) {
+  const value = (input ?? "").trim().toLowerCase();
+  if (value.startsWith("oklch")) return "oklch";
+  if (value.startsWith("hsl")) return "hsl";
+  if (value.startsWith("rgb")) return "rgb";
+  return "hex";
+}
+function toPickerHex(input) {
+  return formatHex(parseColor(input) ?? parseColor("#000000")) ?? "#000000";
+}
 var PRESET_COLORS = [
   "#EF4444",
   "#F97316",
@@ -5826,7 +6411,14 @@ var PRESET_COLORS = [
   "#6B7280",
   "#000000"
 ];
-function ColorPickerInput({
+var DEFAULT_FORMATS = ["hex", "rgb", "hsl", "oklch"];
+function ColorPickerInput(props) {
+  if (props.mode === "popover") {
+    return /* @__PURE__ */ jsx(PopoverColorPicker, { ...props });
+  }
+  return /* @__PURE__ */ jsx(SwatchesColorPicker, { ...props });
+}
+function SwatchesColorPicker({
   value = "#000000",
   onChange,
   colors = PRESET_COLORS,
@@ -5834,9 +6426,9 @@ function ColorPickerInput({
   variant = "default",
   status = "default",
   bordered,
-  borderDegree,
   borderColor,
-  disabled = false
+  disabled = false,
+  hideSwatches = false
 }) {
   const inputRef = useRef(null);
   return /* @__PURE__ */ jsxs(
@@ -5845,7 +6437,6 @@ function ColorPickerInput({
       variant,
       status,
       bordered,
-      borderDegree,
       borderColor,
       className: cn("flex-col gap-3 items-start p-3", className),
       disabled,
@@ -5865,14 +6456,14 @@ function ColorPickerInput({
             {
               ref: inputRef,
               type: "color",
-              value,
+              value: toPickerHex(value),
               onChange: (e) => onChange(e.target.value),
               disabled,
               className: "sr-only"
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: colors.map((color) => /* @__PURE__ */ jsx(
+        !hideSwatches && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: colors.map((color) => /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -5882,7 +6473,7 @@ function ColorPickerInput({
             },
             disabled,
             className: cn(
-              "w-6 h-6 rounded-md border border-border transition-transform hover:scale-110",
+              "w-6 h-6 rounded-md border border-border transition-transform hover:scale-110 cursor-pointer",
               value === color && "ring-2 ring-primary ring-offset-1"
             ),
             style: { backgroundColor: color },
@@ -5894,6 +6485,121 @@ function ColorPickerInput({
     }
   );
 }
+function PopoverColorPicker({
+  value = "#000000",
+  onChange,
+  colors = PRESET_COLORS,
+  className,
+  variant = "default",
+  status = "default",
+  bordered,
+  borderColor,
+  disabled = false,
+  hideSwatches = false,
+  formats = DEFAULT_FORMATS,
+  output = "preserve"
+}) {
+  const initialFormat = formats.includes(detectFormat(value)) ? detectFormat(value) : formats[0] ?? "hex";
+  const [activeFormat, setActiveFormat] = useState(initialFormat);
+  const [draft, setDraft] = useState(value);
+  useEffect(() => {
+    setDraft(value);
+  }, [value]);
+  const outputFormat = output;
+  const emit = (raw) => {
+    if (outputFormat === "preserve") {
+      onChange(raw);
+    } else {
+      onChange(formatColor(raw, outputFormat));
+    }
+  };
+  const handlePickerChange = (hex) => {
+    setDraft(hex);
+    emit(hex);
+  };
+  const handleTextChange = (text) => {
+    setDraft(text);
+    if (parseColor(text)) emit(text);
+  };
+  const handleTabChange = (next) => {
+    setActiveFormat(next);
+    if (parseColor(draft)) setDraft(formatColor(draft, next));
+  };
+  const handlePreset = (color) => {
+    setDraft(color);
+    emit(color);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled,
+        className: cn(
+          "flex items-center gap-3 w-full rounded-md border border-border bg-background px-3 py-2 text-left cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
+          status === "error" && "border-destructive",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "w-8 h-8 rounded-md border border-border shrink-0",
+              style: { backgroundColor: toPickerHex(value) }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground font-mono truncate", children: value })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "w-64 flex flex-col gap-3", align: "start", children: [
+      /* @__PURE__ */ jsx(
+        HexColorPicker,
+        {
+          color: toPickerHex(draft),
+          onChange: handlePickerChange,
+          style: { width: "100%" }
+        }
+      ),
+      formats.length > 1 && /* @__PURE__ */ jsx("div", { className: "flex gap-1 rounded-md bg-muted p-1", children: formats.map((fmt) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleTabChange(fmt),
+          className: cn(
+            "flex-1 rounded-sm px-1.5 py-1 text-xs font-medium uppercase cursor-pointer transition-colors",
+            activeFormat === fmt ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+          ),
+          children: fmt
+        },
+        fmt
+      )) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: draft,
+          onChange: (e) => handleTextChange(e.target.value),
+          spellCheck: false,
+          className: "w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm font-mono outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        }
+      ),
+      !hideSwatches && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: colors.map((color) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => handlePreset(color),
+          className: cn(
+            "w-5 h-5 rounded-md border border-border transition-transform hover:scale-110 cursor-pointer"
+          ),
+          style: { backgroundColor: color },
+          title: color
+        },
+        color
+      )) })
+    ] })
+  ] });
+}
 var DEFAULT_OPTIONS = [
   { value: 5, label: "Excellent" },
   { value: 4, label: "Good" },
@@ -5934,7 +6640,6 @@ function EmojiInput({
   variant = "default",
   status = "default",
   bordered,
-  borderDegree,
   borderColor,
   disabled = false
 }) {
@@ -5944,7 +6649,6 @@ function EmojiInput({
       variant,
       status,
       bordered,
-      borderDegree,
       borderColor,
       className: cn("gap-3 flex-wrap", className),
       disabled,
@@ -6016,7 +6720,6 @@ function PhoneInput({
   variant = "default",
   status = "default",
   bordered,
-  borderDegree,
   borderColor
 }) {
   const phoneThemeVars = {
@@ -6041,7 +6744,7 @@ function PhoneInput({
     "--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(
+  return /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-0 overflow-visible p-0!", className), disabled, children: /* @__PURE__ */ jsx(
     PhoneInput$1,
     {
       className: "w-full",
@@ -6102,7 +6805,7 @@ function PhoneInput({
     }
   ) });
 }
-var TimeInput = ({ value = "", onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderDegree, borderColor, format24 = true, showSeconds = false, disabled = false }) => {
+var TimeInput = ({ value = "", onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderColor, format24 = true, showSeconds = false, disabled = false }) => {
   const [inputValue, setInputValue] = useState(value);
   const [isValid, setIsValid] = useState(true);
   useEffect(() => {
@@ -6150,7 +6853,7 @@ var TimeInput = ({ value = "", onChange, placeholder = "", icon, showIcon = true
   };
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   const currentStatus = !isValid ? "error" : status;
-  return /* @__PURE__ */ jsxs(BaseInput, { variant, status: currentStatus, bordered, borderDegree, borderColor, className: cn("gap-2", className), children: [
+  return /* @__PURE__ */ jsxs(BaseInput, { variant, status: currentStatus, bordered, borderColor, className: cn("gap-2", className), children: [
     showIcon && (icon ? /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }) : /* @__PURE__ */ jsx(Clock, { className: iconProps.className, style: iconProps.style })),
     /* @__PURE__ */ jsx(Input, { type: "text", placeholder: placeholder || (showSeconds ? "HH:MM:SS" : "HH:MM"), value: inputValue, onChange: (e) => handleInputChange(e.target.value), onKeyDown: (e) => {
       if (!/\d/.test(e.key) && !["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].includes(e.key)) e.preventDefault();
@@ -6579,12 +7282,11 @@ var VARIANT_PRESETS = {
   }
 };
 var VariantContext = createContext({ variant: "default" });
-var VariantProvider = ({ variant = "default", bordered, borderDegree, children }) => /* @__PURE__ */ jsx(VariantContext.Provider, { value: { variant, bordered, borderDegree }, children });
+var VariantProvider = ({ variant = "default", bordered, children }) => /* @__PURE__ */ jsx(VariantContext.Provider, { value: { variant, bordered }, children });
 var useVariant = () => useContext(VariantContext).variant;
 var useBordered = () => useContext(VariantContext).bordered;
-var useBorderDegree = () => useContext(VariantContext).borderDegree;
 var useVariantPreset = () => VARIANT_PRESETS[useContext(VariantContext).variant];
-function NFormInner({ schema, defaultValues, onSubmit, form: externalForm, variant = "default", bordered, borderDegree, as = "form", className = "", id, devTools, children }) {
+function NFormInner({ schema, defaultValues, onSubmit, form: externalForm, variant = "default", bordered, as = "form", className = "", id, devTools, children }) {
   const resolver = useMemo(() => schema ? zodResolver(schema) : void 0, [schema]);
   const internalForm = useForm({
     resolver,
@@ -6616,7 +7318,7 @@ function NFormInner({ schema, defaultValues, onSubmit, form: externalForm, varia
   }, [form.formState.errors]);
   const wrapperClass = cn("flex flex-col h-full w-full gap-4", className);
   const submit = form.handleSubmit(onSubmit);
-  const inner = /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsx(VariantProvider, { variant, bordered, borderDegree, children: as === "form" ? /* @__PURE__ */ jsx("form", { id, onSubmit: submit, className: wrapperClass, autoComplete: "off", children }) : /* @__PURE__ */ jsx("div", { id, className: wrapperClass, onKeyDown: (e) => {
+  const inner = /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsx(VariantProvider, { variant, bordered, children: as === "form" ? /* @__PURE__ */ jsx("form", { id, onSubmit: submit, className: wrapperClass, autoComplete: "off", children }) : /* @__PURE__ */ jsx("div", { id, className: wrapperClass, onKeyDown: (e) => {
     if (e.key === "Enter" && e.target.tagName !== "TEXTAREA") {
       e.preventDefault();
       void submit();
@@ -6679,7 +7381,6 @@ var FormInput = ({ name, type, formLabel, formDescription, required = false, dis
   const prefix = usePrefix();
   const preset = useVariantPreset();
   const contextBordered = useBordered();
-  const contextBorderDegree = useBorderDegree();
   const fieldName = prefix ? `${prefix}.${name}` : name;
   if (!InputComponent) return null;
   const getDefaultValue = () => {
@@ -6710,7 +7411,7 @@ var FormInput = ({ name, type, formLabel, formDescription, required = false, dis
         formLabel,
         required && !disabled && !readOnly && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
       ] }),
-      /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(InputComponent, { value: field.value ?? getDefaultValue(), onChange: handleChange, status: hasError && !isHidden ? "error" : "default", bordered: contextBordered, borderDegree: contextBorderDegree, icon: formLabel ? void 0 : icon, iconColor: formLabel ? void 0 : iconColor, disabled, readOnly, ...inputRest, className: slot.input }) }),
+      /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(InputComponent, { value: field.value ?? getDefaultValue(), onChange: handleChange, status: hasError && !isHidden ? "error" : "default", bordered: contextBordered, icon: formLabel ? void 0 : icon, iconColor: formLabel ? void 0 : iconColor, disabled, readOnly, ...inputRest, className: slot.input }) }),
       !hasError && !disabled && !readOnly && formDescription && /* @__PURE__ */ jsx(FormDescription, { className: slot.description, children: formDescription }),
       !isHidden && /* @__PURE__ */ jsx(FormMessage, { className: slot.error })
     ] });
@@ -7041,7 +7742,6 @@ function WizardForm({
   submitLabel = "Submit",
   variant = "default",
   bordered,
-  borderDegree,
   className,
   classNames,
   footerSlot
@@ -7101,7 +7801,7 @@ function WizardForm({
             classNames
           }
         ),
-        /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsx(VariantProvider, { variant, bordered, borderDegree, children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsx(VariantProvider, { variant, bordered, children: /* @__PURE__ */ jsxs(
           "form",
           {
             id: `step-${currentStepConfig.id}`,
@@ -7135,18 +7835,12 @@ var handler = {
   }
 };
 useTableStore.use = new Proxy({}, handler);
-var actionButtonClass = (bordered, danger, borderClass) => cn(
+var actionButtonClass = (bordered, danger) => cn(
   "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors",
   danger ? "hover:bg-red-500/10 hover:text-red-400" : "hover:bg-muted hover:text-foreground",
-  bordered && `border ${borderClass ?? "border-muted-foreground"}`
+  bordered && "border border-muted-foreground"
 );
-function TableActionCell({ row, onView, onEdit, onDelete, openRowMenu, menuButton, bordered, borderDegree }) {
-  const resolvedBorderDegree = useResolvedBorderDegree({
-    borderDegree,
-    bordered,
-    fallback: "default"
-  });
-  const borderClass = borderColorClassForDegree(resolvedBorderDegree);
+function TableActionCell({ row, onView, onEdit, onDelete, openRowMenu, menuButton, bordered }) {
   if (menuButton && openRowMenu) {
     return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-1", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
       "button",
@@ -7169,7 +7863,7 @@ function TableActionCell({ row, onView, onEdit, onDelete, openRowMenu, menuButto
         type: "button",
         "aria-label": "View",
         onClick: () => onView(row.original),
-        className: actionButtonClass(bordered, false, borderClass),
+        className: actionButtonClass(bordered, false),
         children: /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" })
       }
     ),
@@ -7179,7 +7873,7 @@ function TableActionCell({ row, onView, onEdit, onDelete, openRowMenu, menuButto
         type: "button",
         "aria-label": "Edit",
         onClick: () => onEdit(row.original),
-        className: actionButtonClass(bordered, false, borderClass),
+        className: actionButtonClass(bordered, false),
         children: /* @__PURE__ */ jsx(Pencil, { className: "h-3.5 w-3.5" })
       }
     ),
@@ -7189,7 +7883,7 @@ function TableActionCell({ row, onView, onEdit, onDelete, openRowMenu, menuButto
         type: "button",
         "aria-label": "Delete",
         onClick: () => onDelete(row.original),
-        className: actionButtonClass(bordered, true, borderClass),
+        className: actionButtonClass(bordered, true),
         children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
       }
     )
@@ -7265,9 +7959,10 @@ var createTableStore = () => {
     className: "",
     classNames: {},
     bordered: void 0,
-    borderDegree: void 0,
     headerClassName: "bg-card",
-    headerColor: "primary",
+    headerColor: void 0,
+    headerTextColor: void 0,
+    borderColor: void 0,
     showCheckbox: true,
     selectedRowId: null,
     headerSlot: null,
@@ -7519,7 +8214,6 @@ function useTable() {
   const openRowMenu = useTableStore.use.openRowMenu();
   const menuButton = useTableStore.use.menuButton();
   const bordered = useTableStore.use.bordered();
-  const borderDegree = useTableStore.use.borderDegree();
   const CardComponent = useTableStore.use.CardComponent();
   const dynamicHeight = useTableStore.use.dynamicHeight();
   const viewMode = useTableStore.use.viewMode();
@@ -7550,14 +8244,14 @@ function useTable() {
         {
           id: "actions",
           header: () => isMenuActions ? null : React__default.createElement("div", { className: "flex w-full justify-start text-left" }, "Actions"),
-          cell: ({ row }) => React__default.createElement(TableActionCell, { row, onView, onEdit, onDelete, openRowMenu, menuButton, bordered, borderDegree }),
+          cell: ({ row }) => React__default.createElement(TableActionCell, { row, onView, onEdit, onDelete, openRowMenu, menuButton, bordered }),
           enableSorting: false,
           enableHiding: false
         }
       ];
     }
     return effectiveColumns;
-  }, [columns, CardComponent, hasActions, onView, onEdit, onDelete, openRowMenu, menuButton, bordered, borderDegree]);
+  }, [columns, CardComponent, hasActions, onView, onEdit, onDelete, openRowMenu, menuButton, bordered]);
   const notifyStateChange = useCallback((state) => {
     onStateChange?.(state);
   }, [onStateChange]);
@@ -7678,17 +8372,47 @@ function useTableKeyboard(options = {}) {
 }
 
 // src/components/table/tableColors.ts
-var HEADER_COLORS = {
-  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" },
-  amber: { bg: "bg-amber-500/30", text: "[&_th]:text-amber-800   dark:[&_th]:text-amber-300", row: "hover:bg-amber-500/5" },
-  rose: { bg: "bg-rose-600/30", text: "[&_th]:text-rose-800    dark:[&_th]:text-rose-300", row: "hover:bg-rose-500/5" },
-  slate: { bg: "bg-slate-700/60", text: "[&_th]:text-slate-100   dark:[&_th]:text-slate-400", row: "hover:bg-slate-500/5" }
-};
-var HEADER_HEX = {
-  primary: "",
+var DEFAULT_TABLE_HEADER_COLOR = "var(--primary)";
+var DEFAULT_TABLE_HEADER_TEXT_COLOR = "var(--primary-foreground)";
+var DEFAULT_TABLE_BORDER_COLOR = "var(--border)";
+var THEME_COLOR_TOKENS = /* @__PURE__ */ new Set([
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "tertiary",
+  "tertiary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "destructive-foreground",
+  "border",
+  "input",
+  "ring",
+  "sidebar",
+  "sidebar-foreground",
+  "sidebar-primary",
+  "sidebar-primary-foreground",
+  "sidebar-accent",
+  "sidebar-accent-foreground",
+  "sidebar-border",
+  "sidebar-ring",
+  "chart-1",
+  "chart-2",
+  "chart-3",
+  "chart-4",
+  "chart-5"
+]);
+var TABLE_HEADER_COLOR_PRESETS = {
+  primary: DEFAULT_TABLE_HEADER_COLOR,
   violet: "#7c3aed",
   blue: "#2563eb",
   emerald: "#059669",
@@ -7696,6 +8420,17 @@ var HEADER_HEX = {
   rose: "#e11d48",
   slate: "#475569"
 };
+function resolveTableColor(value, fallback) {
+  const color = value?.trim();
+  if (!color) return fallback;
+  if (color in TABLE_HEADER_COLOR_PRESETS) {
+    return TABLE_HEADER_COLOR_PRESETS[color];
+  }
+  if (THEME_COLOR_TOKENS.has(color)) {
+    return `var(--${color})`;
+  }
+  return color;
+}
 var ROW_CONTEXT_HANDLED = "__ntableRowContextHandled";
 function EditableCell({ cell, onCellEdit }) {
   const columnDef = cell.column.columnDef;
@@ -7750,6 +8485,12 @@ function EditableCell({ cell, onCellEdit }) {
   ] });
 }
 function NTableContent({ effectiveMode }) {
+  const recipe = useNajmComponentStyle("table");
+  const recipeRadius = resolveRadiusValue(recipe?.radius);
+  const recipeStyle = recipeRadius || recipe?.borderWidth ? {
+    ...recipeRadius ? { borderRadius: recipeRadius } : {},
+    ...recipe?.borderWidth ? { borderWidth: recipe.borderWidth } : {}
+  } : void 0;
   const table = useTableStore.use.table();
   const storeIsTableView = useTableStore.use.isTableView();
   const columns = useTableStore.use.columns();
@@ -7757,7 +8498,20 @@ function NTableContent({ effectiveMode }) {
   const noResultsText = useTableStore.use.noResultsText();
   const headerClassName = useTableStore.use.headerClassName();
   const headerColor = useTableStore.use.headerColor();
-  const colorStyle = headerColor ? HEADER_COLORS[headerColor] : null;
+  const headerTextColor = useTableStore.use.headerTextColor();
+  const tableBorderColor = useTableStore.use.borderColor();
+  const resolvedHeaderColor = resolveTableColor(headerColor, DEFAULT_TABLE_HEADER_COLOR);
+  const resolvedHeaderTextColor = resolveTableColor(headerTextColor, DEFAULT_TABLE_HEADER_TEXT_COLOR);
+  const resolvedBorderColor = resolveTableColor(tableBorderColor, DEFAULT_TABLE_BORDER_COLOR);
+  const headerCellStyle = {
+    backgroundColor: resolvedHeaderColor,
+    color: resolvedHeaderTextColor
+  };
+  const contentStyle = recipeStyle || tableBorderColor ? {
+    ...recipeStyle ?? {},
+    ...tableBorderColor ? { borderColor: resolvedBorderColor } : {}
+  } : void 0;
+  const rowBorderStyle = tableBorderColor ? { borderColor: resolvedBorderColor } : void 0;
   const onRowClick = useTableStore.use.onRowClick();
   const onRowContextMenu = useTableStore.use.onRowContextMenu();
   const onBackgroundContextMenu = useTableStore.use.onBackgroundContextMenu();
@@ -7768,15 +8522,6 @@ function NTableContent({ effectiveMode }) {
   const showContent = useTableStore.use.showContent();
   const classNames = useTableStore.use.classNames();
   const bordered = useTableStore.use.bordered();
-  const borderDegree = useTableStore.use.borderDegree();
-  const resolvedBorderDegree = useResolvedBorderDegree({
-    borderDegree,
-    bordered,
-    fallback: "default"
-  });
-  const tableBorderClass = borderColorClassForDegree(resolvedBorderDegree);
-  const isStrong = resolvedBorderDegree === "strong";
-  const useDegreeBorder = bordered || borderDegree || resolvedBorderDegree !== "default";
   const showCheckbox = useTableStore.use.showCheckbox();
   const selectedRowId = useTableStore.use.selectedRowId();
   const renderSubRow = useTableStore.use.renderSubRow();
@@ -7803,29 +8548,51 @@ function NTableContent({ effectiveMode }) {
     NajmScroll,
     {
       axis: "both",
-      "data-border-degree": resolvedBorderDegree,
+      "data-bordered": bordered === false ? "false" : bordered ? "true" : void 0,
       className: cn(
         "min-h-0 flex-1 overflow-hidden rounded-md bg-card",
-        useDegreeBorder ? `border ${tableBorderClass}` : "shadow-sm",
-        isStrong && "shadow-none",
+        bordered === true ? surfaceBorderClasses(true) : "shadow-sm",
         classNames?.content
       ),
+      style: contentStyle,
       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, 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,
+        /* @__PURE__ */ jsx(TableHeader, { "data-ntable-table-header": true, className: cn("bg-card sticky top-0 z-10", headerClassName, bordered === true && "[&_tr]:border-border", classNames?.tableHeader), children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsxs(TableRow, { style: rowBorderStyle, className: cn("hover:bg-transparent", bordered === true && "border-border"), children: [
+          showCheckbox && /* @__PURE__ */ jsx(
+            TableHead,
             {
-              "aria-label": "Select all rows",
-              checked: table.getIsAllPageRowsSelected(),
-              onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value)
+              className: "w-10 text-foreground h-12 text-center",
+              style: headerCellStyle,
+              children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  "aria-label": "Select all rows",
+                  checked: table.getIsAllPageRowsSelected(),
+                  onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value)
+                }
+              )
             }
-          ) }),
-          hasExpansion && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Expand column", className: cn("w-10 text-foreground h-12", colorStyle?.bg) }),
-          hg.headers.map((header) => /* @__PURE__ */ jsx(TableHead, { className: cn("text-foreground h-12", colorStyle?.bg), children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", header.column.getCanSort() && showSorting && "cursor-pointer select-none"), onClick: header.column.getToggleSortingHandler(), children: [
-            flexRender(header.column.columnDef.header, header.getContext()),
-            header.column.getCanSort() && showSorting && /* @__PURE__ */ jsx("span", { children: getSortIcon(header.column) })
-          ] }) }, header.id))
+          ),
+          hasExpansion && /* @__PURE__ */ jsx(
+            TableHead,
+            {
+              "aria-label": "Expand column",
+              className: "w-10 text-foreground h-12",
+              style: headerCellStyle
+            }
+          ),
+          hg.headers.map((header) => /* @__PURE__ */ jsx(
+            TableHead,
+            {
+              className: "text-foreground h-12",
+              style: headerCellStyle,
+              children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", header.column.getCanSort() && showSorting && "cursor-pointer select-none"), onClick: header.column.getToggleSortingHandler(), children: [
+                flexRender(header.column.columnDef.header, header.getContext()),
+                header.column.getCanSort() && showSorting && /* @__PURE__ */ jsx("span", { children: getSortIcon(header.column) })
+              ] })
+            },
+            header.id
+          ))
         ] }, hg.id)) }),
         /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => {
           const isSelectedByRowId = Boolean(selectedRowId && row.original?.id === selectedRowId);
@@ -7845,7 +8612,8 @@ 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-primary/5 hover:bg-primary/5", useDegreeBorder && "border-border"),
+                style: rowBorderStyle,
+                className: cn(classNames?.row, onRowClick && "cursor-pointer", isSelectedByRowId && "bg-primary/5 hover:bg-primary/5", bordered === true && "border-border"),
                 children: [
                   showCheckbox && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10 text-center", children: /* @__PURE__ */ jsx(
                     Checkbox,
@@ -7868,7 +8636,7 @@ function NTableContent({ effectiveMode }) {
                       },
                       className: cn(
                         "flex h-6 w-6 items-center justify-center rounded hover:bg-muted",
-                        useDegreeBorder && `border ${tableBorderClass}`
+                        bordered === true && "border border-border"
                       ),
                       children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
                     }
@@ -7882,41 +8650,39 @@ function NTableContent({ effectiveMode }) {
                 ]
               }
             ),
-            isExpanded && renderSubRow && /* @__PURE__ */ jsx(TableRow, { "data-expanded-row": "true", className: "bg-muted/40 hover:bg-muted/40", children: /* @__PURE__ */ jsx(TableCell, { colSpan: totalCols, className: "p-0", children: renderSubRow(row.original) }) })
+            isExpanded && renderSubRow && /* @__PURE__ */ jsx(TableRow, { "data-expanded-row": "true", style: rowBorderStyle, className: "bg-muted/40 hover:bg-muted/40", children: /* @__PURE__ */ jsx(TableCell, { colSpan: totalCols, className: "p-0", children: renderSubRow(row.original) }) })
           ] }, row.id);
-        }) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length + (showCheckbox ? 1 : 0) + (hasExpansion ? 1 : 0), className: "h-16 text-center", children: noResultsText }) }) })
+        }) : /* @__PURE__ */ jsx(TableRow, { style: rowBorderStyle, children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length + (showCheckbox ? 1 : 0) + (hasExpansion ? 1 : 0), className: "h-16 text-center", children: noResultsText }) }) })
       ] })
     }
   );
 }
-function NDataCardShell({ row, onClick, onContextMenu, actions, children, className, showCheckbox = true, selectedRowId, openRowMenu, menuButton, bordered, borderDegree }) {
+function NDataCardShell({ row, onClick, onContextMenu, actions, children, className, showCheckbox = true, selectedRowId, openRowMenu, menuButton, bordered }) {
+  const recipe = useNajmComponentStyle("table");
+  const recipeRadius = resolveRadiusValue(recipe?.radius);
+  const recipeStyle = recipeRadius || recipe?.borderWidth ? {
+    ...recipeRadius ? { borderRadius: recipeRadius } : {},
+    ...recipe?.borderWidth ? { borderWidth: recipe.borderWidth } : {}
+  } : void 0;
   const canExpand = row.getCanExpand();
   const isExpanded = canExpand && row.getIsExpanded();
   const isSelected = row.getIsSelected();
   const isHighlighted = selectedRowId != null && row.original?.id === selectedRowId;
   const isActive = isSelected || isHighlighted;
   const useMenuButton = menuButton && openRowMenu;
-  const resolvedBorderDegree = useResolvedBorderDegree({
-    borderDegree,
-    bordered,
-    fallback: "default"
-  });
-  const isStrong = resolvedBorderDegree === "strong";
-  const isNone = resolvedBorderDegree === "none";
-  const borderClass = borderColorClassForDegree(resolvedBorderDegree);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-row": "true",
       "data-row-id": row.id,
-      "data-border-degree": resolvedBorderDegree,
+      "data-bordered": bordered === false ? "false" : bordered ? "true" : void 0,
       onClick,
       onContextMenu,
+      style: recipeStyle,
       className: cn(
         "relative group w-full rounded-lg bg-card",
-        isNone ? "border-transparent" : `border ${borderClass}`,
-        isStrong && "shadow-none",
-        isActive && (bordered || resolvedBorderDegree !== "default" || borderDegree ? "border-primary" : "ring-2 ring-primary ring-offset-1 ring-offset-background"),
+        surfaceBorderClasses(bordered),
+        isActive && (bordered ? "border-primary" : "ring-2 ring-primary ring-offset-1 ring-offset-background"),
         onClick && "cursor-pointer",
         className
       ),
@@ -8011,7 +8777,7 @@ function NDataCardShell({ row, onClick, onContextMenu, actions, children, classN
             },
             className: cn(
               "absolute bottom-2 right-2 z-10 flex h-6 w-6 items-center justify-center rounded hover:bg-muted",
-              bordered && `border ${borderClass}`
+              bordered && "border border-border"
             ),
             children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
           }
@@ -8048,7 +8814,6 @@ function NTableCards({ effectiveMode }) {
   const showContent = useTableStore.use.showContent();
   const classNames = useTableStore.use.classNames();
   const bordered = useTableStore.use.bordered();
-  const borderDegree = useTableStore.use.borderDegree();
   const renderSubRow = useTableStore.use.renderSubRow();
   const userGetRowCanExpand = useTableStore.use.getRowCanExpand();
   const handleContainerContextMenu = useCallback((e) => {
@@ -8151,7 +8916,6 @@ function NTableCards({ effectiveMode }) {
         openRowMenu,
         menuButton,
         bordered,
-        borderDegree,
         children: /* @__PURE__ */ jsx(
           CardComponent,
           {
@@ -8182,14 +8946,6 @@ function NTablePagination() {
   const setPagination = useTableStore.use.setPagination();
   const isPaginationControlled = useTableStore.use.isPaginationControlled();
   const bordered = useTableStore.use.bordered();
-  const borderDegree = useTableStore.use.borderDegree();
-  const resolvedBorderDegree = useResolvedBorderDegree({
-    borderDegree,
-    bordered,
-    fallback: "default"
-  });
-  const triggerBorderClass = borderColorClassForDegree(resolvedBorderDegree);
-  const useDegreeBorder = bordered || borderDegree || resolvedBorderDegree !== "default";
   if (!table || !showContent || !showPagination || viewMode === "json" || viewMode === "files") return null;
   const filteredRows = table.getFilteredRowModel().rows;
   const selectedRows = table.getFilteredSelectedRowModel().rows;
@@ -8227,8 +8983,8 @@ function NTablePagination() {
           /* @__PURE__ */ jsx(
             SelectTrigger,
             {
-              "data-border-degree": useDegreeBorder ? resolvedBorderDegree : void 0,
-              className: cn("h-8 w-[80px]", useDegreeBorder && triggerBorderClass),
+              "data-bordered": bordered ? "true" : void 0,
+              className: cn("h-8 w-[80px]", bordered && "najm-border border-border"),
               children: /* @__PURE__ */ jsx(SelectValue, { placeholder: pageSize })
             }
           ),
@@ -8259,28 +9015,25 @@ function NTablePagination() {
 function SearchFilter({ placeholder }) {
   const table = useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
-  const borderDegree = useTableStore.use.borderDegree();
   if (!table) return null;
   const value = table.getState().globalFilter ?? "";
-  return /* @__PURE__ */ jsx(TextInput, { icon: Search, value, onChange: (v) => table.setGlobalFilter(v), placeholder: placeholder ?? "Search\u2026", bordered, borderDegree });
+  return /* @__PURE__ */ jsx(TextInput, { icon: Search, value, onChange: (v) => table.setGlobalFilter(v), placeholder: placeholder ?? "Search\u2026", bordered });
 }
 function TextFilter({ name, placeholder }) {
   const table = useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
-  const borderDegree = useTableStore.use.borderDegree();
   const column = table?.getColumn?.(name);
   if (!column) return null;
-  return /* @__PURE__ */ jsx(TextInput, { value: column.getFilterValue() ?? "", onChange: (value) => column.setFilterValue(value), placeholder, bordered, borderDegree });
+  return /* @__PURE__ */ jsx(TextInput, { value: column.getFilterValue() ?? "", onChange: (value) => column.setFilterValue(value), placeholder, bordered });
 }
 function SelectFilter({ name, options, placeholder, inputType }) {
   const table = useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
-  const borderDegree = useTableStore.use.borderDegree();
   const column = table?.getColumn?.(name);
   if (!column) return null;
   const allOptions = [{ value: "__clear__", label: "All" }, ...options.map((o) => typeof o === "string" ? { value: o, label: o } : o)];
   const InputComponent = inputType === "combobox" ? ComboboxInput : SelectInput;
-  return /* @__PURE__ */ jsx(InputComponent, { value: column.getFilterValue() ?? "", onChange: (value) => column.setFilterValue(value === "" || value === "__clear__" ? void 0 : value), items: allOptions, placeholder: placeholder || "Filter...", bordered, borderDegree });
+  return /* @__PURE__ */ jsx(InputComponent, { value: column.getFilterValue() ?? "", onChange: (value) => column.setFilterValue(value === "" || value === "__clear__" ? void 0 : value), items: allOptions, placeholder: placeholder || "Filter...", bordered });
 }
 function defaultWrapperClass(filter) {
   return filter.type === "search" ? "flex-1 min-w-[160px] max-w-sm" : "w-full sm:w-40 shrink-0";
@@ -8288,7 +9041,6 @@ function defaultWrapperClass(filter) {
 function RenderFilter({ filter }) {
   const table = useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
-  const borderDegree = useTableStore.use.borderDegree();
   if (filter.type === "search") {
     return /* @__PURE__ */ jsx(SearchFilter, { placeholder: filter.placeholder });
   }
@@ -8300,7 +9052,6 @@ function RenderFilter({ filter }) {
         onChange: filter.onChange,
         placeholder: filter.placeholder,
         bordered,
-        borderDegree,
         className: "w-full"
       }
     );
@@ -8314,7 +9065,6 @@ function RenderFilter({ filter }) {
           onChange: filter.onChange,
           placeholder: filter.placeholder,
           bordered,
-          borderDegree,
           className: "w-full"
         }
       );
@@ -8333,7 +9083,6 @@ function RenderFilter({ filter }) {
           showIcon: true,
           disabled: filter.disabled,
           bordered,
-          borderDegree,
           className: "w-full"
         }
       );
@@ -8349,7 +9098,6 @@ function RenderFilter({ filter }) {
         showIcon: true,
         disabled: filter.disabled,
         bordered,
-        borderDegree,
         className: "w-full"
       }
     );
@@ -8377,17 +9125,13 @@ function TableAddButton() {
   const showAddButton = useTableStore.use.showAddButton();
   const addButtonText = useTableStore.use.addButtonText();
   const headerColor = useTableStore.use.headerColor();
+  const headerTextColor = useTableStore.use.headerTextColor();
   const bordered = useTableStore.use.bordered();
-  const borderDegree = useTableStore.use.borderDegree();
-  const resolvedBorderDegree = useResolvedBorderDegree({
-    borderDegree,
-    bordered,
-    fallback: "default"
-  });
   if (!showAddButton) return null;
-  const accentHex = headerColor ? HEADER_HEX[headerColor] : void 0;
-  const btnStyle = accentHex ? { backgroundColor: accentHex } : void 0;
-  const baseCls = accentHex ? "hover:opacity-90" : "bg-primary hover:bg-primary/90";
+  const btnStyle = {
+    backgroundColor: resolveTableColor(headerColor, DEFAULT_TABLE_HEADER_COLOR),
+    color: resolveTableColor(headerTextColor, DEFAULT_TABLE_HEADER_TEXT_COLOR)
+  };
   const borderedCls = bordered ? "border border-muted-foreground" : "";
   return /* @__PURE__ */ jsx(
     "button",
@@ -8397,8 +9141,8 @@ function TableAddButton() {
       style: btnStyle,
       "aria-label": addButtonText || "Create",
       title: addButtonText || "Create",
-      "data-border-degree": bordered ? resolvedBorderDegree : void 0,
-      className: `h-10 w-10 shrink-0 cursor-pointer flex items-center justify-center rounded-lg text-white transition-opacity ${baseCls} ${borderedCls}`,
+      "data-bordered": bordered ? "true" : void 0,
+      className: `h-10 w-10 shrink-0 cursor-pointer flex items-center justify-center rounded-lg transition-opacity hover:opacity-90 ${borderedCls}`,
       children: /* @__PURE__ */ jsx(Plus, { className: "h-5 w-5" })
     }
   );
@@ -8414,7 +9158,6 @@ function TableSettingsMenu() {
   const cardComponent = useTableStore.use.CardComponent();
   const table = useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
-  const borderDegree = useTableStore.use.borderDegree();
   if (!showViewToggle && !showColumnVisibility) return null;
   const allModes = ["table", "cards", "json", "files"];
   const filteredModes = availableModes ?? allModes;
@@ -8433,7 +9176,7 @@ function TableSettingsMenu() {
   const hasModes = modeItems.length > 0;
   const hasColumns = columns.length > 0;
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(BaseInput, { "aria-label": "Table settings", className: "w-auto cursor-pointer px-3", bordered, borderDegree, children: /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) }) }),
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(BaseInput, { "aria-label": "Table settings", className: "w-auto cursor-pointer px-3", bordered, children: /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) }) }),
     /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56 bg-card", children: [
       showViewToggle && hasModes && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(DropdownMenuLabel, { className: "flex items-center gap-2", children: [
@@ -8759,9 +9502,10 @@ function NTable(props) {
     className: props.className ?? "",
     classNames: props.classNames ?? {},
     bordered: props.bordered,
-    borderDegree: props.borderDegree,
     headerClassName: props.headerClassName ?? "bg-card",
-    headerColor: props.headerColor ?? "primary",
+    headerColor: props.headerColor,
+    headerTextColor: props.headerTextColor,
+    borderColor: props.borderColor,
     showCheckbox: props.showCheckbox ?? true,
     selectedRowId: props.selectedRowId ?? null,
     headerSlot: props.headerSlot ?? null,
@@ -9195,7 +9939,7 @@ function NSmartPasteDialog({
 function NSidebarHeader({ children, collapsed, className, classNames }) {
   if (!children) return null;
   return /* @__PURE__ */ jsx("div", { className: cn(
-    "flex items-center h-14 min-h-14 px-4 border-b border-border/70 shrink-0 gap-2 justify-start",
+    "flex items-center h-14 min-h-14 px-4 border-b border-sidebar-border/70 shrink-0 gap-2 justify-start",
     classNames?.sidebarHeader,
     className
   ), children });
@@ -9208,8 +9952,7 @@ function NSidebarLogo({
   collapsed = false
 }) {
   if (!icon && !title && !subtitle) return null;
-  const IconNode = React__default.isValidElement(icon) ? icon : typeof icon === "function" || typeof icon === "object" && icon !== null && "$$typeof" in icon ? React__default.createElement(icon, { className: "h-6 w-6 text-primary" }) : icon;
-  const collapsedCenter = collapsed ? { marginLeft: "calc(var(--rail, 4rem) / 2 - 2.25rem)" } : void 0;
+  const IconNode = React__default.isValidElement(icon) ? icon : typeof icon === "function" || typeof icon === "object" && icon !== null && "$$typeof" in icon ? React__default.createElement(icon, { className: "h-6 w-6 text-sidebar-primary" }) : icon;
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -9223,14 +9966,16 @@ function NSidebarLogo({
         IconNode && /* @__PURE__ */ jsx(
           "div",
           {
-            className: "size-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0",
-            style: collapsedCenter,
+            className: cn(
+              "size-10 rounded-lg bg-sidebar-primary/10 flex items-center justify-center shrink-0",
+              collapsed && "ml-[calc((var(--rail,4rem)-var(--sidebar-edge-width,0px))/2-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem))]"
+            ),
             children: IconNode
           }
         ),
         !collapsed && (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col ", children: [
-          title && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground leading-tight truncate", children: title }),
-          subtitle && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground leading-tight truncate", children: subtitle })
+          title && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-sidebar-foreground leading-tight truncate", children: title }),
+          subtitle && /* @__PURE__ */ jsx("span", { className: "text-xs text-sidebar-foreground/60 leading-tight truncate", children: subtitle })
         ] })
       ]
     }
@@ -9265,8 +10010,8 @@ function NSidebarItem({
   const baseClasses = cn(
     "flex items-center gap-3 w-full rounded-md text-sm px-2 font-medium transition-colors h-8 text-left",
     depth > 0 && "pl-7",
-    collapsed && "pl-[calc(var(--rail,4rem)/2_-_1.5rem)]",
-    item.disabled ? "opacity-50 cursor-not-allowed" : active ? "cursor-pointer bg-primary text-primary-foreground" : "cursor-pointer text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+    collapsed && "pl-[calc((var(--rail,4rem)-var(--sidebar-edge-width,0px))/2-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem))]",
+    item.disabled ? "opacity-50 cursor-not-allowed" : active ? "cursor-pointer bg-sidebar-primary text-sidebar-primary-foreground" : "cursor-pointer text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
     classNames?.sidebarItem
   );
   const handleClick = () => {
@@ -9351,10 +10096,10 @@ function NSidebarSection({
       "data-sidebar-section": true,
       className: cn(
         "flex flex-col gap-1",
-        showSectionSeparators && !isFirst && "border-t border-border/70 pt-3"
+        showSectionSeparators && !isFirst && "border-t border-sidebar-border/70 pt-3"
       ),
       children: [
-        showSectionLabels && group.sectionLabel && (collapsed ? /* @__PURE__ */ jsx("div", { className: "h-5" }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 h-5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: [
+        showSectionLabels && group.sectionLabel && (collapsed ? /* @__PURE__ */ jsx("div", { className: "h-5" }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 h-5 text-[11px] font-semibold uppercase tracking-wider text-sidebar-foreground/60", children: [
           showSectionIcons && group.sectionIcon && /* @__PURE__ */ jsx(group.sectionIcon, { className: "h-3.5 w-3.5 shrink-0" }),
           /* @__PURE__ */ jsx("span", { children: group.sectionLabel })
         ] })),
@@ -9385,9 +10130,10 @@ function NSidebarContent({
   showSectionLabels,
   showSectionIcons,
   showSectionSeparators,
+  contentStyle,
   classNames
 }) {
-  return /* @__PURE__ */ jsx(NajmScroll, { axis: "y", className: "flex-1", children: /* @__PURE__ */ jsx("nav", { className: "flex flex-col gap-3 px-4 py-2", children: groups.map((group, gi) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(NajmScroll, { axis: "y", className: "flex-1", children: /* @__PURE__ */ jsx("nav", { className: "flex flex-col gap-3 px-4 py-2", style: contentStyle, children: groups.map((group, gi) => /* @__PURE__ */ jsx(
     NSidebarSection,
     {
       group,
@@ -9413,7 +10159,7 @@ function DefaultFooter({
   collapsed = false
 }) {
   if (!onSettings && !onLogout) return null;
-  const itemClass = "flex h-8 w-full cursor-pointer items-center gap-3 rounded-md px-2 text-left text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors";
+  const itemClass = "flex h-8 w-full cursor-pointer items-center gap-3 rounded-md px-2 text-left text-sm font-medium text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors";
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
     onSettings && /* @__PURE__ */ jsxs("button", { type: "button", onClick: onSettings, className: itemClass, "aria-label": settingsLabel, title: settingsLabel, children: [
       /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4 shrink-0" }),
@@ -9445,7 +10191,7 @@ function NSidebarFooter({
   const showCollapseInFooter = showCollapseButton && !isMobile;
   const CollapseIcon = collapsed ? PanelLeftOpen : PanelLeftClose;
   if (!footerContent && !showCollapseInFooter) return null;
-  return /* @__PURE__ */ jsxs("div", { className: cn("border-t border-border/70 px-4 py-2 shrink-0 flex flex-col gap-1", classNames?.sidebarFooter, className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("border-t border-sidebar-border/70 px-4 py-2 shrink-0 flex flex-col gap-1", classNames?.sidebarFooter, className), children: [
     footerContent,
     showCollapseInFooter && /* @__PURE__ */ jsxs(
       "button",
@@ -9453,7 +10199,7 @@ function NSidebarFooter({
         type: "button",
         onClick: onToggleCollapsed,
         className: cn(
-          "flex items-center w-full cursor-pointer rounded-md text-sm font-medium transition-colors h-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+          "flex items-center w-full cursor-pointer rounded-md text-sm font-medium transition-colors h-8 text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
           "gap-3 px-2 text-left"
         ),
         "aria-label": collapsed ? expandLabel : collapseLabel,
@@ -9477,18 +10223,9 @@ function NSidebarMobile({
   hamburgerClassName,
   showHamburgerButton = true,
   children,
-  bordered,
-  borderDegree
+  bordered
 }) {
   const mobileClass = mobileBreakpoint === "sm" ? "sm:hidden" : mobileBreakpoint === "lg" ? "lg:hidden" : "md:hidden";
-  const resolvedBorderDegree = useResolvedBorderDegree({
-    borderDegree,
-    bordered,
-    fallback: "default"
-  });
-  const isStrong = resolvedBorderDegree === "strong";
-  const isNone = resolvedBorderDegree === "none";
-  const mobileBorderClass = isNone ? "border-transparent" : borderColorClassForDegree(resolvedBorderDegree);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     showHamburgerButton && /* @__PURE__ */ jsx(
       "button",
@@ -9496,7 +10233,7 @@ function NSidebarMobile({
         type: "button",
         onClick: onOpen,
         className: cn(
-          "fixed top-3 left-3 z-50 p-2 rounded-lg bg-card border shadow-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors",
+          "fixed top-3 left-3 z-50 p-2 rounded-lg bg-sidebar najm-border border-sidebar-border shadow-md text-sidebar-foreground hover:text-sidebar-accent-foreground hover:bg-sidebar-accent transition-colors",
           mobileClass,
           hamburgerClassName,
           open && "hidden"
@@ -9516,11 +10253,10 @@ function NSidebarMobile({
     /* @__PURE__ */ jsxs(
       "aside",
       {
-        "data-border-degree": resolvedBorderDegree,
+        "data-bordered": bordered === false ? "false" : bordered ? "true" : void 0,
         className: cn(
-          "fixed inset-y-0 left-0 z-50 bg-card flex flex-col transition-transform duration-200",
-          // When global strong is on, we want a strong border, not a soft `border-r` edge.
-          isStrong ? `border ${mobileBorderClass} shadow-none` : isNone ? "border-transparent" : `border-r ${mobileBorderClass}`,
+          "fixed inset-y-0 left-0 z-50 bg-sidebar text-sidebar-foreground flex flex-col transition-transform duration-200",
+          sidebarBorderClasses(bordered, "right"),
           mobileClass,
           open ? "translate-x-0" : "-translate-x-full"
         ),
@@ -9531,7 +10267,7 @@ function NSidebarMobile({
             {
               type: "button",
               onClick: onClose,
-              className: "absolute top-3 right-3 z-10 p-1 rounded-md hover:bg-accent text-muted-foreground",
+              className: "absolute top-3 right-3 z-10 p-1 rounded-md hover:bg-sidebar-accent text-sidebar-foreground/70",
               "aria-label": closeLabel,
               children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
             }
@@ -9567,12 +10303,11 @@ function NSidebar({
   defaultCollapsed = false,
   onCollapsedChange,
   showCollapseButton = true,
-  collapseButtonPosition = "footer",
-  showSectionLabels = true,
+  collapseButtonPosition = "rail",
+  showSectionLabels,
   showSectionIcons = true,
-  showSectionSeparators = false,
+  showSectionSeparators,
   bordered,
-  borderDegree,
   footer,
   className,
   classNames,
@@ -9597,6 +10332,7 @@ function NSidebar({
   logoutLabel,
   widths
 }) {
+  const recipe = useNajmComponentStyle("sidebar");
   const [_mobileOpen, _setMobileOpen] = useState(defaultMobileOpen);
   const [_collapsed, _setCollapsed] = useState(defaultCollapsed);
   const isControlled = mobileOpenProp !== void 0;
@@ -9606,30 +10342,68 @@ function NSidebar({
     if (!isControlled) _setMobileOpen(open);
     onMobileOpenChange?.(open);
   };
-  const handleToggleCollapsed = useCallback(() => {
-    const next = !collapsed;
+  const [railDragging, setRailDragging] = useState(false);
+  const suppressRailClickRef = useRef(false);
+  const setCollapsedState = useCallback((next) => {
+    if (next === collapsed) return;
     if (collapsedProp === void 0) _setCollapsed(next);
     onCollapsedChange?.(next);
   }, [collapsed, collapsedProp, onCollapsedChange]);
+  const handleToggleCollapsed = useCallback(() => {
+    setCollapsedState(!collapsed);
+  }, [collapsed, setCollapsedState]);
+  const handleRailPointerDown = useCallback((e) => {
+    if (e.button !== 0) return;
+    const startX = e.clientX;
+    const startCollapsed = collapsed;
+    const threshold = 24;
+    let resolved = false;
+    setRailDragging(true);
+    const onMove = (ev) => {
+      const dx = ev.clientX - startX;
+      if (!resolved && !startCollapsed && dx < -threshold) {
+        resolved = true;
+        suppressRailClickRef.current = true;
+        setCollapsedState(true);
+      } else if (!resolved && startCollapsed && dx > threshold) {
+        resolved = true;
+        suppressRailClickRef.current = true;
+        setCollapsedState(false);
+      }
+    };
+    const onUp = (ev) => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      setRailDragging(false);
+      if (resolved || Math.abs(ev.clientX - startX) >= 4) suppressRailClickRef.current = true;
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  }, [collapsed, setCollapsedState]);
+  const handleRailClick = useCallback(() => {
+    if (suppressRailClickRef.current) {
+      suppressRailClickRef.current = false;
+      return;
+    }
+    handleToggleCollapsed();
+  }, [handleToggleCollapsed]);
   const handleNavigate = useCallback((href) => {
     onNavigate?.(href);
     if (closeOnNavigate) setMobileOpen(false);
   }, [onNavigate, closeOnNavigate]);
   const groups = useMemo(() => buildGroups(navItems), [navItems]);
-  const resolvedBorderDegree = useResolvedBorderDegree({
-    borderDegree,
-    bordered,
-    fallback: "default"
-  });
-  const sidebarShellBorderClass = borderColorClassForDegree(resolvedBorderDegree);
-  const isStrong = resolvedBorderDegree === "strong";
-  const isNone = resolvedBorderDegree === "none";
   const desktopClass = mobileBreakpoint === "sm" ? "hidden sm:flex" : mobileBreakpoint === "lg" ? "hidden lg:flex" : "hidden md:flex";
   const expandedWidth = widths?.expanded ?? 240;
   const collapsedWidth = widths?.collapsed ?? 64;
   const mobileWidth = widths?.mobile ?? expandedWidth;
   const railVar = typeof collapsedWidth === "number" ? `${collapsedWidth}px` : collapsedWidth;
+  const sidebarEdgeWidth = bordered === false ? "0px" : recipe?.borderWidth ?? "var(--border-width, 1px)";
   const showEdgeCollapse = showCollapseButton && collapseButtonPosition === "edge";
+  const showRailCollapse = showCollapseButton && collapseButtonPosition === "rail";
+  const effectiveShowSectionLabels = showSectionLabels ?? recipe?.showSectionLabels ?? true;
+  const effectiveShowSectionSeparators = showSectionSeparators ?? recipe?.showSectionSeparators ?? false;
+  const contentSlot = recipe?.slots?.content;
+  const contentStyle = contentSlot?.paddingTop ? { paddingTop: contentSlot.paddingTop } : void 0;
   const defaultLogoContent = logoIcon || logoTitle || logoSubtitle ? /* @__PURE__ */ jsx(NSidebarLogo, { icon: logoIcon, title: logoTitle, subtitle: logoSubtitle, onClick: onLogoClick, collapsed }) : null;
   const headerContent = logo ?? defaultLogoContent;
   const contentProps = {
@@ -9639,9 +10413,10 @@ function NSidebar({
     onNavigate: handleNavigate,
     linkComponent,
     collapsed,
-    showSectionLabels,
+    showSectionLabels: effectiveShowSectionLabels,
     showSectionIcons,
-    showSectionSeparators,
+    showSectionSeparators: effectiveShowSectionSeparators,
+    contentStyle,
     classNames
   };
   const footerProps = {
@@ -9681,25 +10456,44 @@ function NSidebar({
         hamburgerClassName,
         showHamburgerButton,
         bordered,
-        borderDegree,
         children: mobileInner
       }
     ),
     /* @__PURE__ */ jsxs(
       "aside",
       {
-        "data-border-degree": resolvedBorderDegree,
+        "data-bordered": bordered === false ? "false" : bordered ? "true" : void 0,
         className: cn(
           desktopClass,
-          "relative z-10 flex flex-col h-full bg-card transition-all duration-200",
-          isNone ? "border-r border-transparent" : cn("border-r", sidebarShellBorderClass),
-          isStrong && "shadow-none",
+          "relative z-10 flex flex-col h-full bg-sidebar text-sidebar-foreground transition-all duration-200",
+          sidebarBorderClasses(bordered, "right"),
           classNames?.sidebar,
           className
         ),
-        style: { width: collapsed ? collapsedWidth : expandedWidth, ["--rail"]: railVar },
+        style: {
+          width: collapsed ? collapsedWidth : expandedWidth,
+          ["--rail"]: railVar,
+          ["--sidebar-edge-width"]: sidebarEdgeWidth,
+          ...bordered !== false && recipe?.borderWidth ? { borderRightWidth: recipe.borderWidth } : {}
+        },
         children: [
           sidebarInner,
+          showRailCollapse && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-label": collapsed ? expandLabel : collapseLabel,
+              title: collapsed ? expandLabel : collapseLabel,
+              "data-dragging": railDragging ? "true" : void 0,
+              onPointerDown: handleRailPointerDown,
+              onClick: handleRailClick,
+              className: "group/rail absolute inset-y-0 right-0 z-20 flex w-3 translate-x-1/2 cursor-ew-resize touch-none select-none items-center justify-center border-0 bg-transparent p-0",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 right-1/2 w-0.5 translate-x-1/2 bg-sidebar-ring opacity-0 transition-opacity duration-150 group-hover/rail:opacity-100 group-data-[dragging=true]/rail:opacity-100" }),
+                /* @__PURE__ */ jsx("span", { className: "relative h-9 w-1 rounded-full bg-sidebar-border transition-all duration-150 group-hover/rail:h-12 group-hover/rail:bg-sidebar-ring group-data-[dragging=true]/rail:bg-sidebar-ring" })
+              ]
+            }
+          ),
           showEdgeCollapse && /* @__PURE__ */ jsx(
             "button",
             {
@@ -9707,7 +10501,7 @@ function NSidebar({
               onClick: handleToggleCollapsed,
               "aria-label": collapsed ? expandLabel : collapseLabel,
               title: collapsed ? expandLabel : collapseLabel,
-              className: "absolute right-0 top-7 z-20 flex size-6 -translate-y-1/2 translate-x-1/2 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-foreground",
+              className: "absolute right-0 top-7 z-20 flex size-6 -translate-y-1/2 translate-x-1/2 cursor-pointer items-center justify-center rounded-full border border-sidebar-border bg-sidebar text-sidebar-foreground shadow-sm transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
               children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3.5 w-3.5" })
             }
           )
@@ -9935,6 +10729,29 @@ function NCommandPalette({
     ] })
   ] });
 }
+function NPageLayout({
+  as: Comp = "main",
+  className,
+  style,
+  ...props
+}) {
+  const { layout } = useNajmDesign();
+  const pageGutter = layout?.pageGutter ?? "var(--page-gutter, 24px)";
+  const sectionGap = layout?.sectionGap ?? "var(--section-gap, 20px)";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn("flex min-w-0 flex-col", className),
+      style: {
+        gap: sectionGap,
+        paddingInline: pageGutter,
+        paddingBlock: sectionGap,
+        ...style
+      },
+      ...props
+    }
+  );
+}
 function NPageHeaderActions({ children, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex shrink-0 items-center gap-2 sm:gap-3", className), children });
 }
@@ -9954,11 +10771,12 @@ function getSlotElements(children, slot) {
   const matches = React__default.Children.toArray(children).filter((child) => isPageHeaderSlot(child, slot));
   return matches.length > 0 ? matches : void 0;
 }
-function NPageHeader({ icon: Icon2, title, subtitle, actions, filters, top, search, children, className, headerClassName, bordered, borderDegree }) {
+function NPageHeader({ icon: Icon2, title, subtitle, actions, filters, top, search, children, className, headerClassName, card, bordered }) {
   const [internalSearch, setInternalSearch] = useState("");
+  const recipe = useNajmComponentStyle("pageHeader");
   const searchValue = search?.value ?? internalSearch;
   const handleSearchChange = useCallback((e) => {
-    setInternalSearch(e.target.value);
+    setInternalSearch(e.currentTarget.value);
     search?.onChange?.(e);
   }, [search?.onChange]);
   const slottedActions = getSlotElements(children, NPageHeaderActions);
@@ -9967,21 +10785,21 @@ function NPageHeader({ icon: Icon2, title, subtitle, actions, filters, top, sear
   const resolvedActions = slottedActions ?? actions;
   const resolvedFilters = slottedFilters ?? filters;
   const resolvedTop = slottedTop ?? top;
-  const resolvedBorderDegree = useResolvedBorderDegree({
-    borderDegree,
-    bordered,
-    fallback: "default"
-  });
-  const hasBorderShell = bordered || Boolean(borderDegree) || resolvedBorderDegree !== "default";
-  const isStrong = resolvedBorderDegree === "strong";
+  const isCard = card ?? recipe?.card ?? bordered === true;
+  const recipeRadius = resolveRadiusValue(recipe?.radius);
+  const recipeStyle = recipeRadius || recipe?.borderWidth ? {
+    ...recipeRadius ? { borderRadius: recipeRadius } : {},
+    ...recipe?.borderWidth ? { borderWidth: recipe.borderWidth } : {}
+  } : void 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-slot": "page-header",
-      "data-border-degree": hasBorderShell ? resolvedBorderDegree : void 0,
+      "data-card": isCard ? "true" : void 0,
+      "data-bordered": bordered === false ? "false" : bordered ? "true" : void 0,
+      style: recipeStyle,
       className: cn(
-        hasBorderShell ? cn("border rounded-xl bg-card shadow-none", borderColorClassForDegree(resolvedBorderDegree)) : "border-b border-border",
-        isStrong && "shadow-none",
+        isCard ? cn("rounded-xl bg-card shadow-none", surfaceBorderClasses(true)) : cn("border-b", surfaceBorderClasses(true, "bottom").replace("najm-border-b", "najm-border-b")),
         className
       ),
       children: [
@@ -10044,4 +10862,4 @@ function NInspectorSheet({ open, onClose, title, children }) {
   ] }) });
 }
 
-export { Alert, NCard as AsyncCard, Avatar, AvatarFallback, AvatarGroup, AvatarImage, AvatarStatus, Badge, BaseInput, Button, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroupInput, CheckboxInput, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorArrayInput, ColorPickerInput, Combobox, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicArray_default as DynamicArray, EmojiInput, FileImportButton, FileInput, Form, FormControl, FormDescription, FormField, FormInput, FormItem, FormLabel, FormMessage, IconButton, ImageInput, Indicator, Input, Label, LangInput, MultiSelectInput, NAlert, NAppShell, NCard as NAsyncCard, NAvatar, NBadge, NBulkActionsBar, NButton, NCard, NCardAction, NCardFooter, NCommandPalette, NConfirmDialog, NContextMenu, NDataCardShell, NDeleteDialog, NDeleteDialogContent, NDetailCard, NDetailItem, NDetailList, NDialog, NEmptyState, NErrorBoundary, NErrorState, NFileBrowser, NFileTypeIcon, NFilterBar, NFolderIcon, NForm, NFormSectionHeader, NIcon, NIndicator, NInspectorSheet, NLoadingState, NMultiDialog, NNavbar, NPageHeader, NPageHeaderActions, NPageHeaderFilters, NPageHeaderTop, NPortalScopeProvider, NProgress, NRowActions, NSection, NSectionHeader, NSectionInfo, NSectionWithInfo, NSheet, NSidebar, NSidebarContent, NSidebarFooter, NSidebarHeader, NSidebarItem, NSidebarLogo, NSidebarMobile, NSidebarSection, NSkeleton, NSkeletonCalendar, NSkeletonChart, NSkeletonDonut, NSkeletonEventList, NSkeletonWidget, NSkeletonWidgets, NSlider, NSmartPasteDialog, NSpinner, NStatCard, NStatCardSkeleton, Swap as NSwap, NTable, NTableCardRoot, NTableCards, NTableContent, NTableHeader, NTableJson, NTableLoadingSkeleton, NTablePagination, NTableRowSkeleton, NTableSkeleton, NTabs, NUploader, NViewBody, NViewToggle, NajmScroll, NajmThemeProvider, NativeSelect, NumberInput, PasswordInput, PhoneInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrefixProvider, Progress, RadioGroup2 as RadioGroup, RadioGroupInput, RadioGroupItem, RepeatingFields, ScrollArea, SearchField, SearchField as SearchInput, SegmentedControl, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SimpleTooltip, NSkeleton as Skeleton, Slider, SliderInput, StarRatingInput, StatusPill, StepIndicator, StepsHeader, StepsProgress, Swap, SwapIndeterminate, SwapOff, SwapOn, Switch, SwitchInput, TAB_COLORS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableStoreContext, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaInput, TextInput, Textarea, TimeInput, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VariantProvider, WizardForm, alertVariants, avatarVariants, badgeColorVariants, badgeVariants, borderColorClassForDegree, buildDefaultFileColumns, buttonVariants, cn, composePreset, createDialogStore, createTableStore, dialogVariants, formatFileBytes, formatFileRelative, getIconColorProps, indicatorVariants, inputBorderColorClassForDegree, resolveBorderDegree, resolvePreset, resolveSlot, sliderVariants, surfaceBorderClasses, swapVariants, toggleVariants, tooltipContentVariants, truncateByCharacters, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useNForm, useNPortalScope, useNajmAppearance, usePrefix, useResolvedBorderDegree, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useTableStore, useVariant, useVariantPreset };
+export { Alert, NCard as AsyncCard, Avatar, AvatarFallback, AvatarGroup, AvatarImage, AvatarStatus, Badge, BaseInput, Button, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroupInput, CheckboxInput, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorArrayInput, ColorPickerInput, Combobox, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicArray_default as DynamicArray, EmojiInput, FileImportButton, FileInput, Form, FormControl, FormDescription, FormField, FormInput, FormItem, FormLabel, FormMessage, IconButton, ImageInput, Indicator, Input, Label, LangInput, MultiSelectInput, NAJM_COMPONENT_NAMES, NAlert, NAppShell, NCard as NAsyncCard, NAvatar, NBadge, NBulkActionsBar, NButton, NCard, NCardAction, NCardFooter, NCommandPalette, NConfirmDialog, NContextMenu, NDataCardShell, NDeleteDialog, NDeleteDialogContent, NDetailCard, NDetailItem, NDetailList, NDialog, NEmptyState, NErrorBoundary, NErrorState, NFileBrowser, NFileTypeIcon, NFilterBar, NFolderIcon, NForm, NFormSectionHeader, NIcon, NIndicator, NInspectorSheet, NLoadingState, NMultiDialog, NNavbar, NPageHeader, NPageHeaderActions, NPageHeaderFilters, NPageHeaderTop, NPageLayout, NPortalScopeProvider, NProgress, NRowActions, NSection, NSectionHeader, NSectionInfo, NSectionWithInfo, NSheet, NSidebar, NSidebarContent, NSidebarFooter, NSidebarHeader, NSidebarItem, NSidebarLogo, NSidebarMobile, NSidebarSection, NSkeleton, NSkeletonCalendar, NSkeletonChart, NSkeletonDonut, NSkeletonEventList, NSkeletonWidget, NSkeletonWidgets, NSlider, NSmartPasteDialog, NSpinner, NStatCard, NStatCardSkeleton, Swap as NSwap, NTable, NTableCardRoot, NTableCards, NTableContent, NTableHeader, NTableJson, NTableLoadingSkeleton, NTablePagination, NTableRowSkeleton, NTableSkeleton, NTabs, NUploader, NViewBody, NViewToggle, NajmDesignProvider, NajmScroll, NajmThemeProvider, NativeSelect, NumberInput, PasswordInput, PhoneInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrefixProvider, Progress, RADIUS_VALUE_MAP, RadioGroup2 as RadioGroup, RadioGroupInput, RadioGroupItem, RepeatingFields, ScrollArea, SearchField, SearchField as SearchInput, SegmentedControl, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SimpleTooltip, NSkeleton as Skeleton, Slider, SliderInput, StarRatingInput, StatusPill, StepIndicator, StepsHeader, StepsProgress, Swap, SwapIndeterminate, SwapOff, SwapOn, Switch, SwitchInput, TAB_COLORS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableStoreContext, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaInput, TextInput, Textarea, TimeInput, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VariantProvider, WizardForm, alertVariants, avatarVariants, badgeColorVariants, badgeVariants, buildDefaultFileColumns, buttonVariants, cn, composePreset, createDialogStore, createTableStore, defineNajmDesignConfig, defineNajmThemeConfig, detectFormat, dialogVariants, formatColor, formatFileBytes, formatFileRelative, getIconColorProps, indicatorVariants, inputBorderClasses, parseColor, parseNajmDesignConfig, parseNajmThemeConfig, resolvePreset, resolveRadiusValue, resolveSlot, resolveVariantAlias, sidebarBorderClasses, sliderVariants, stringifyNajmDesignConfig, stringifyNajmThemeConfig, surfaceBorderClasses, swapVariants, toPickerHex, toggleVariants, tooltipContentVariants, truncateByCharacters, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useNForm, useNPortalScope, useNajmAppearance, useNajmComponentStyle, useNajmDesign, usePrefix, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useTableStore, useVariant, useVariantPreset };