najm-kit 0.0.19 → 0.0.21

package/dist/json.mjs

@@ -1,5 +1,5 @@
-import * as React2 from 'react';
-import React2__default, { createContext, useContext, useMemo, useRef, useCallback } from 'react';
+import * as React3 from 'react';
+import React3__default, { createContext, useContext, useMemo, useRef, useCallback } from 'react';
 import CodeMirror from '@uiw/react-codemirror';
 import { json } from '@codemirror/lang-json';
 import { keymap, EditorView, Decoration, ViewPlugin } from '@codemirror/view';
@@ -173,43 +173,10 @@ function JsonViewer({ value, colors = defaultJsonViewColors, className, maxHeigh
     }
   );
 }
-React2.createContext(0);
-React2.createContext(null);
-var DEFAULT_APPEARANCE = {
-  borderDegree: "default"
-};
-var NajmAppearanceContext = React2.createContext(DEFAULT_APPEARANCE);
-function useNajmAppearance() {
-  return React2.useContext(NajmAppearanceContext);
-}
 
 // 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";
-  }
-}
-function useResolvedBorderDegree(options = {}) {
-  const appearance = useNajmAppearance();
-  return resolveBorderDegree(
-    options.borderDegree,
-    options.bordered,
-    appearance.borderDegree,
-    options.fallback
-  );
+function inputBorderClasses(bordered = true) {
+  return bordered === false ? "border-0" : "najm-border border-input";
 }
 function toPascalCase(value) {
   return value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").split(/[\s_-]+/).filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
@@ -234,8 +201,8 @@ var NIcon = ({
     height: size,
     ...style
   };
-  if (React2__default.isValidElement(icon)) {
-    return React2__default.cloneElement(icon, {
+  if (React3__default.isValidElement(icon)) {
+    return React3__default.cloneElement(icon, {
       className: cn(className, icon.props.className),
       onClick,
       ...rest
@@ -282,6 +249,112 @@ var NIcon = ({
   return null;
 };
 NIcon.displayName = "NIcon";
+React3.createContext(0);
+React3.createContext(null);
+var DEFAULT_APPEARANCE = {};
+React3.createContext(DEFAULT_APPEARANCE);
+var NajmDesignContext = React3.createContext({
+  components: {}
+});
+function useNajmDesign() {
+  return React3.useContext(NajmDesignContext);
+}
+function useNajmComponentStyle(name) {
+  const { components } = useNajmDesign();
+  return components[name];
+}
+
+// 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/config.ts
+var MODES = ["light", "dark"];
+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"
+];
+new Set(TOKEN_KEYS);
+new Set(MODES);
+
+// src/theme/design-config.ts
+new Set(NAJM_COMPONENT_NAMES);
+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 };
+}
 var buttonVariants = cva(
   [
     "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap text-sm font-medium outline-none transition-all",
@@ -353,7 +426,7 @@ function renderIcon(icon) {
   if (!icon) return null;
   return /* @__PURE__ */ jsx(NIcon, { "aria-hidden": "true", icon, className: "shrink-0" });
 }
-var Button = React2.forwardRef(
+var Button = React3.forwardRef(
   ({
     className,
     variant,
@@ -370,22 +443,26 @@ var Button = React2.forwardRef(
     leftIcon,
     rightIcon,
     bordered,
-    borderDegree,
     disabled,
     children,
     onClick,
+    style,
     ...props
   }, ref) => {
-    const [pending, setPending] = React2.useState(false);
+    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] = React3.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 = React2.useCallback(
+    const handleClick = React3.useCallback(
       (event) => {
         if (isDisabled) {
           event.preventDefault();
@@ -414,21 +491,22 @@ var Button = React2.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
         ),

package/dist/theme.css

@@ -25,6 +25,7 @@
 @source inline("{sm,md,lg}:{hidden,flex}");
 @source inline("border-{black,white}");
 @source inline("border-{gray,slate,zinc,neutral,stone,red,orange,amber,yellow,green,teal,blue,indigo,purple}{,-600}");
+@source inline("najm-border najm-border-t najm-border-r najm-border-b najm-border-l");
 
 /* Map Tailwind's color/radius theme to the runtime --* tokens. `inline` so
    utilities resolve --* at the element (NajmThemeProvider scopes them per
@@ -46,11 +47,17 @@
   --color-muted-foreground: var(--muted-foreground);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
+  --color-neutral: var(--neutral);
+  --color-neutral-foreground: var(--neutral-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
   --color-border: var(--border);
-  --color-border-subtle: var(--border-subtle);
-  --color-border-strong: var(--border-strong);
   --color-input: var(--input);
   --color-ring: var(--ring);
 
@@ -87,6 +94,42 @@
   100% { transform: translateX(200%); width: 40%; }
 }
 
+/* Typography variables emitted by NajmDesignProvider. */
+[data-najm-design-vars] {
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+  font-size: var(--font-size-base, 14px);
+  line-height: var(--line-height-base, 1.5);
+  letter-spacing: var(--letter-spacing-base, 0);
+  --text-xs: calc(var(--font-size-base, 14px) * 0.857142857 * var(--font-scale, 1));
+  --text-xs--line-height: var(--line-height-base, 1.5);
+  --text-sm: calc(var(--font-size-base, 14px) * var(--font-scale, 1));
+  --text-sm--line-height: var(--line-height-base, 1.5);
+  --text-base: calc(var(--font-size-base, 14px) * 1.142857143 * var(--font-scale, 1));
+  --text-base--line-height: var(--line-height-base, 1.5);
+  --text-lg: calc(var(--font-size-base, 14px) * 1.285714286 * var(--font-scale, 1));
+  --text-lg--line-height: var(--line-height-base, 1.5);
+  --text-xl: calc(var(--font-size-base, 14px) * 1.428571429 * var(--font-scale, 1));
+  --text-xl--line-height: var(--line-height-base, 1.5);
+}
+
+[data-najm-design-vars] :where(
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  [data-slot="card-title"],
+  [data-slot="dialog-title"],
+  [data-slot="sheet-title"]
+) {
+  font-family: var(--font-heading, var(--font-sans, ui-sans-serif, system-ui, sans-serif));
+}
+
+[data-najm-design-vars] :where(code, kbd, pre, samp) {
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+
 /* Default token values (oklch). Override globally via :root / .dark, or per
    subtree via <NajmThemeProvider>. */
 :root {
@@ -106,11 +149,17 @@
   --muted-foreground: oklch(0.5555 0 0);
   --accent: oklch(0.2747 0.006 286.001);
   --accent-foreground: oklch(0.9848 0 0);
+  --neutral: oklch(0.556 0 0);
+  --neutral-foreground: oklch(0.9848 0 0);
+  --info: oklch(0.6231 0.1679 254.149);
+  --info-foreground: oklch(0.9848 0 0);
+  --success: oklch(0.696 0.17 162.48);
+  --success-foreground: oklch(0.1445 0 0);
+  --warning: oklch(0.769 0.188 70.08);
+  --warning-foreground: oklch(0.1445 0 0);
   --destructive: oklch(0.6368 0.2078 25.326);
   --destructive-foreground: oklch(0.9848 0 0);
   --border: oklch(0.9219 0 0);
-  --border-subtle: oklch(0.9619 0 0);
-  --border-strong: oklch(0.4184 0 0);
   --input: oklch(0.9219 0 0);
   --ring: oklch(0.2228 0.0043 286.044);
 
@@ -130,6 +179,7 @@
   --chart-5: oklch(0.769 0.188 70.08);
 
   --radius: 0.5rem;
+  --border-width: 1px;
 }
 
 .dark {
@@ -149,11 +199,17 @@
   --muted-foreground: oklch(0.6255 0.0171 285.896);
   --accent: oklch(0.2313 0.007 285.839);
   --accent-foreground: oklch(0.9683 0.0014 286.375);
+  --neutral: oklch(0.7155 0 0);
+  --neutral-foreground: oklch(0.1445 0 0);
+  --info: oklch(0.6231 0.1679 254.149);
+  --info-foreground: oklch(0.9683 0.0014 286.375);
+  --success: oklch(0.696 0.17 162.48);
+  --success-foreground: oklch(0.1445 0 0);
+  --warning: oklch(0.769 0.188 70.08);
+  --warning-foreground: oklch(0.1445 0 0);
   --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);
   --ring: oklch(0.2228 0.0043 286.044);
 
@@ -175,8 +231,29 @@
   --radius: 0.5rem;
 }
 
-.border-border-strong {
-  border-color: var(--border-strong) !important;
+.najm-border {
+  border-style: solid;
+  border-width: var(--border-width);
+}
+
+.najm-border-t {
+  border-top-style: solid;
+  border-top-width: var(--border-width);
+}
+
+.najm-border-r {
+  border-right-style: solid;
+  border-right-width: var(--border-width);
+}
+
+.najm-border-b {
+  border-bottom-style: solid;
+  border-bottom-width: var(--border-width);
+}
+
+.najm-border-l {
+  border-left-style: solid;
+  border-left-width: var(--border-width);
 }
 
 [data-radix-popper-content-wrapper] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",
   "main": "./dist/index.mjs",
@@ -104,10 +104,12 @@
     "class-variance-authority": "^0.7",
     "clsx": "^2",
     "cmdk": "^1",
+    "culori": "^4.0.2",
     "date-fns": "^4",
     "lucide-react": "^0.474",
     "overlayscrollbars": "^2.16.0",
     "overlayscrollbars-react": "^0.5.6",
+    "react-colorful": "^5.7.0",
     "react-day-picker": "^9",
     "react-file-icon": "^1.6.0",
     "react-international-phone": "^4.8.0",
@@ -117,14 +119,15 @@
     "zustand": "^5"
   },
   "devDependencies": {
+    "@hookform/resolvers": "^5",
+    "@tailwindcss/postcss": "^4",
     "@testing-library/react": "^16",
     "@testing-library/user-event": "^14.6.1",
-    "@hookform/resolvers": "^5",
+    "@types/culori": "^4.0.1",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/react-file-icon": "^1.0.5",
     "@vitejs/plugin-react": "^4",
-    "@tailwindcss/postcss": "^4",
     "happy-dom": "^17",
     "postcss": "^8",
     "react-hook-form": "^7",