najm-kit 0.0.8 → 0.0.9

package/dist/json.mjs

@@ -1,5 +1,5 @@
-import * as React3 from 'react';
-import React3__default, { createContext, useContext, useMemo, useRef, useCallback } from 'react';
+import * as React2 from 'react';
+import React2__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,6 +173,44 @@ 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 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("");
 }
@@ -196,8 +234,8 @@ var NIcon = ({
     height: size,
     ...style
   };
-  if (React3__default.isValidElement(icon)) {
-    return React3__default.cloneElement(icon, {
+  if (React2__default.isValidElement(icon)) {
+    return React2__default.cloneElement(icon, {
       className: cn(className, icon.props.className),
       onClick,
       ...rest
@@ -315,7 +353,7 @@ function renderIcon(icon) {
   if (!icon) return null;
   return /* @__PURE__ */ jsx(NIcon, { "aria-hidden": "true", icon, className: "shrink-0" });
 }
-var Button = React3.forwardRef(
+var Button = React2.forwardRef(
   ({
     className,
     variant,
@@ -331,17 +369,23 @@ var Button = React3.forwardRef(
     loaderPosition = "left",
     leftIcon,
     rightIcon,
-    bordered = false,
+    bordered,
+    borderDegree,
     disabled,
     children,
     onClick,
     ...props
   }, ref) => {
-    const [pending, setPending] = React3.useState(false);
+    const [pending, setPending] = React2.useState(false);
     const isLoading = loading || pending;
     const isDisabled = disabled || disabledWhileLoading && isLoading;
     const Comp = asChild ? Slot : "button";
-    const handleClick = React3.useCallback(
+    const resolvedBorderDegree = useResolvedBorderDegree({
+      borderDegree,
+      bordered,
+      fallback: "default"
+    });
+    const handleClick = React2.useCallback(
       (event) => {
         if (isDisabled) {
           event.preventDefault();
@@ -370,12 +414,22 @@ var Button = React3.forwardRef(
         "data-slot": "button",
         "data-loading": isLoading || void 0,
         "data-disabled": isDisabled || void 0,
+        "data-border-degree": variant === "outline" || bordered || borderDegree ? resolvedBorderDegree : void 0,
         "aria-busy": isLoading || void 0,
         "aria-disabled": asChild && isDisabled ? true : void 0,
         disabled: !asChild ? isDisabled : void 0,
         className: cn(
           buttonVariants({ variant, size, rounded, fullWidth }),
-          bordered && "border border-muted-foreground",
+          // Outline buttons always have a border; let the resolved degree drive its color.
+          variant === "outline" && borderColorClassForDegree(resolvedBorderDegree),
+          // 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",
+            borderDegree ? borderColorClassForDegree(resolvedBorderDegree) : "border-muted-foreground"
+          ),
           className
         ),
         onClick: handleClick,

package/dist/styles.css

@@ -1190,6 +1190,8 @@ video {
     --najm-destructive: 0 84.2% 60.2%;
     --najm-destructive-foreground: 0 0% 98%;
     --najm-border: 0 0% 89.8%;
+    --najm-border-subtle: 0 0% 95%;
+    --najm-border-strong: 0 0% 30%;
     --najm-input: 0 0% 89.8%;
     --najm-ring: 240 4% 11%;
     --najm-radius: 0.5rem;
@@ -1215,6 +1217,8 @@ video {
     --najm-destructive: 0 84% 60%;
     --najm-destructive-foreground: 0 0% 100%;
     --najm-border: 240 6% 15%;
+    --najm-border-subtle: 240 6% 11%;
+    --najm-border-strong: 0 0% 78%;
     --najm-input: 240 6% 15%;
     --najm-ring: 240 4% 11%;
   }
@@ -1304,6 +1308,9 @@ video {
 .invisible {
   visibility: hidden;
 }
+.collapse {
+  visibility: collapse;
+}
 .static {
   position: static;
 }
@@ -1402,6 +1409,9 @@ video {
 .top-4 {
   top: 1rem;
 }
+.top-7 {
+  top: 1.75rem;
+}
 .top-\[50\%\] {
   top: 50%;
 }
@@ -1420,6 +1430,9 @@ video {
 .z-50 {
   z-index: 50;
 }
+.z-\[10000\] {
+  z-index: 10000;
+}
 .col-start-2 {
   grid-column-start: 2;
 }
@@ -2364,6 +2377,12 @@ video {
 .border-border {
   border-color: hsl(var(--najm-border));
 }
+.border-border-strong {
+  border-color: hsl(var(--najm-border-strong));
+}
+.border-border-subtle {
+  border-color: hsl(var(--najm-border-subtle));
+}
 .border-border\/30 {
   border-color: hsl(var(--najm-border) / 0.3);
 }
@@ -2907,6 +2926,9 @@ video {
 .pl-9 {
   padding-left: 2.25rem;
 }
+.pl-\[calc\(var\(--rail\2c 4rem\)\/2_-_1\.5rem\)\] {
+  padding-left: calc(var(--rail,4rem) / 2 - 1.5rem);
+}
 .pr-1\.5 {
   padding-right: 0.375rem;
 }
@@ -3448,6 +3470,9 @@ video {
 .ease-out {
   animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+.border-border-strong {
+    border-color: hsl(var(--najm-border-strong)) !important;
+  }
 /* Scrollable, but the scrollbar reserves no layout space (hidden in all
      browsers). `overflow: overlay` was removed from Chrome (~v121) and now
      behaves like `auto`, so hiding the bar is the only pure-CSS way to avoid
@@ -3557,6 +3582,9 @@ video {
 .focus-within\:border-primary:focus-within {
   border-color: hsl(var(--najm-primary));
 }
+.focus-within\:border-primary\/70:focus-within {
+  border-color: hsl(var(--najm-primary) / 0.7);
+}
 .focus-within\:opacity-100:focus-within {
   opacity: 1;
 }
@@ -3573,6 +3601,9 @@ video {
 .hover\:border-border\/60:hover {
   border-color: hsl(var(--najm-border) / 0.6);
 }
+.hover\:border-input:hover {
+  border-color: hsl(var(--najm-input));
+}
 .hover\:border-muted-foreground\/30:hover {
   border-color: hsl(var(--najm-muted-foreground) / 0.3);
 }
@@ -5003,12 +5034,12 @@ video {
 .\[\&_tr\]\:border-b tr {
   border-bottom-width: 1px;
 }
+.\[\&_tr\]\:border-border tr {
+  border-color: hsl(var(--najm-border));
+}
 .\[\&_tr\]\:border-border\/40 tr {
   border-color: hsl(var(--najm-border) / 0.4);
 }
-.\[\&_tr\]\:border-muted-foreground tr {
-  border-color: hsl(var(--najm-muted-foreground));
-}
 a.\[a\&\]\:hover\:bg-accent\/50:hover {
   background-color: hsl(var(--najm-accent) / 0.5);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",
   "main": "./dist/index.mjs",