@nebutra/ui 0.2.2 → 0.2.3

package/dist/layout/index.d.ts

@@ -40,8 +40,8 @@ interface AppShellProps {
  * fixed-width rail on `md+` viewports and collapses into a `Sheet` overlay on
  * mobile (triggered by the hamburger button shown in the header).
  *
- * The sidebar width animates smoothly (200ms ease-out) when toggling between
- * the expanded and collapsed states so it can host an icon-only rail.
+ * The sidebar width animates smoothly (duration-flow, ease-out) when toggling
+ * between the expanded and collapsed states so it can host an icon-only rail.
  *
  * @status stable
  *

package/dist/layout/index.js

@@ -102,7 +102,7 @@ var primitiveTransition = {
 };
 
 // src/tokens/components/overlay.ts
-var overlayFocusRingClassName = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
+var overlayFocusRingClassName = "outline-none";
 var overlayZIndex = {
   backdrop: 1040,
   modal: 1050};
@@ -154,6 +154,12 @@ var sheetTokens = {
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+
+// src/utils/primitive-props.ts
+function asPlainStyle(style) {
+  if (style == null || typeof style === "function") return {};
+  return style;
+}
 function getSheetStyle(style) {
   return {
     "--sheet-inset": `${sheetTokens.inset}px`,
@@ -176,7 +182,7 @@ function getSheetStyle(style) {
     "--sheet-shadow": sheetTokens.surface.shadow,
     "--sheet-duration": `${overlayTokens.motion.duration}ms`,
     "--sheet-easing": overlayTokens.motion.easing,
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function Sheet({ modal = "trap-focus", disablePointerDismissal = true, ...props }) {
@@ -329,7 +335,7 @@ function AppShell({
             "aria-label": "Primary",
             className: cn(
               "hidden h-screen overflow-hidden bg-sidebar text-sidebar-foreground md:block",
-              "transition-[width] duration-200 ease-out",
+              "transition-[width] duration-flow ease-out",
               overlay ? "absolute inset-y-0 left-0 z-40" : "shrink-0",
               railWidth > 0 && "border-r border-sidebar-border",
               overlay && railWidth > 0 && "shadow-2xl"
@@ -374,7 +380,7 @@ function AppShell({
                     className: cn(
                       "relative inline-flex size-8 items-center justify-center rounded-[var(--radius-md)] text-foreground/80 after:absolute after:-inset-1.5 after:content-['']",
                       "hover:bg-muted hover:text-foreground md:hidden",
-                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1"
+                      "focus-visible:outline-none"
                     ),
                     children: /* @__PURE__ */ jsx(Menu, { className: "size-4", "aria-hidden": "true" })
                   }
@@ -392,7 +398,7 @@ function AppShell({
               className: cn(
                 "relative inline-flex size-8 items-center justify-center rounded-[var(--radius-md)] text-foreground/80 after:absolute after:-inset-1.5 after:content-['']",
                 "hover:bg-muted hover:text-foreground",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1"
+                "focus-visible:outline-none"
               ),
               children: /* @__PURE__ */ jsx(Menu, { className: "size-4", "aria-hidden": "true" })
             }
@@ -793,7 +799,6 @@ var buttonVariants = cva(
     "rounded-[var(--btn-default-radius,var(--radius-md))]",
     "text-[length:var(--control-font-size-md,0.875rem)] font-[number:var(--font-weight-medium,500)]",
     "transition-colors duration-micro ease-out",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
     "disabled:pointer-events-none disabled:opacity-50",
     "aria-busy:cursor-wait"
   ].join(" "),
@@ -820,8 +825,30 @@ var buttonVariants = cva(
       },
       shape: {
         default: "",
-        square: "",
-        circle: ""
+        // Radius from --btn-default-radius / --radius-md — brand-switchable.
+        // Do not hardcode rounded-md here; a language must be able to retarget
+        // the corner treatment of every icon trigger at once.
+        square: "rounded-[var(--btn-default-radius,var(--radius-md))]",
+        // Pill radius token, not Tailwind rounded-full — same 9999px default,
+        // but a brand that ships a softer "circle" can override --radius-pill.
+        circle: "rounded-[var(--radius-pill,9999px)]",
+        pill: "rounded-[var(--radius-pill,9999px)]"
+      },
+      // Icon-only box size — orthogonal to `size` (which tunes text-button
+      // height/padding/font together) and to `shape` (which picks the
+      // corner treatment). Only takes effect combined with shape="square"
+      // or shape="circle" (see compoundVariants below); every other
+      // combination ignores it. 28/32/36 cover the icon-trigger sizes that
+      // actually occur in the app — 24/40/48 are already reachable via
+      // shape + size (tiny/default/lg). Heights read --control-height-icon-*
+      // so density-aware Brand Packages can scale them with the ladder.
+      iconSize: {
+        sm: "",
+        // 28px default
+        md: "",
+        // 32px default
+        lg: ""
+        // 36px default
       }
     },
     compoundVariants: [
@@ -832,22 +859,56 @@ var buttonVariants = cva(
       {
         shape: "circle",
         size: "tiny",
-        className: "w-[var(--control-height-tiny,1.5rem)] px-0 rounded-full"
+        className: "w-[var(--control-height-tiny,1.5rem)] px-0"
       },
       {
         shape: "circle",
         size: "sm",
-        className: "w-[var(--control-height-sm,2rem)] px-0 rounded-full"
+        className: "w-[var(--control-height-sm,2rem)] px-0"
       },
       {
         shape: "circle",
         size: "default",
-        className: "w-[var(--control-height-md,2.5rem)] px-0 rounded-full"
+        className: "w-[var(--control-height-md,2.5rem)] px-0"
       },
       {
         shape: "circle",
         size: "lg",
-        className: "w-[var(--control-height-lg,3rem)] px-0 rounded-full"
+        className: "w-[var(--control-height-lg,3rem)] px-0"
+      },
+      // iconSize wins over the size-driven box above — matched on shape +
+      // iconSize only, so it applies regardless of whatever `size` was
+      // passed (or left at its "default" fallback). Corner treatment stays
+      // on the shape variant (token-backed); only the box is set here.
+      {
+        shape: "square",
+        iconSize: "sm",
+        className: "h-[var(--control-height-icon-sm,1.75rem)] w-[var(--control-height-icon-sm,1.75rem)] px-0"
+      },
+      {
+        shape: "square",
+        iconSize: "md",
+        className: "h-[var(--control-height-icon-md,2rem)] w-[var(--control-height-icon-md,2rem)] px-0"
+      },
+      {
+        shape: "square",
+        iconSize: "lg",
+        className: "h-[var(--control-height-icon-lg,2.25rem)] w-[var(--control-height-icon-lg,2.25rem)] px-0"
+      },
+      {
+        shape: "circle",
+        iconSize: "sm",
+        className: "h-[var(--control-height-icon-sm,1.75rem)] w-[var(--control-height-icon-sm,1.75rem)] px-0"
+      },
+      {
+        shape: "circle",
+        iconSize: "md",
+        className: "h-[var(--control-height-icon-md,2rem)] w-[var(--control-height-icon-md,2rem)] px-0"
+      },
+      {
+        shape: "circle",
+        iconSize: "lg",
+        className: "h-[var(--control-height-icon-lg,2.25rem)] w-[var(--control-height-icon-lg,2.25rem)] px-0"
       }
     ],
     defaultVariants: {
@@ -869,7 +930,10 @@ function Spinner({ className }) {
     }
   );
 }
-function getIconSizeClass(size) {
+function getIconSizeClass(size, iconSize2) {
+  if (iconSize2 === "sm") return "[&>svg]:size-3.5";
+  if (iconSize2 === "md") return "[&>svg]:size-3.5";
+  if (iconSize2 === "lg") return "[&>svg]:size-4";
   switch (size) {
     case "tiny":
       return "[&>svg]:size-3";
@@ -884,7 +948,10 @@ function getIconSizeClass(size) {
       return "[&>svg]:size-4";
   }
 }
-function getSpinnerSizeClass(size) {
+function getSpinnerSizeClass(size, iconSize2) {
+  if (iconSize2 === "sm") return "size-3.5";
+  if (iconSize2 === "md") return "size-3.5";
+  if (iconSize2 === "lg") return "size-4";
   switch (size) {
     case "tiny":
       return "size-3";
@@ -909,10 +976,10 @@ function resolveShadowClass(shadow) {
   const level = shadow === true ? "md" : shadow;
   return SHADOW_CLASSES[level];
 }
-function ButtonContent({ loading, prefix, suffix, size, children }) {
-  const iconSizeClass = getIconSizeClass(size);
+function ButtonContent({ loading, prefix, suffix, size, iconSize: iconSize2, children }) {
+  const iconSizeClass = getIconSizeClass(size, iconSize2);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size) }),
+    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size, iconSize2) }),
     prefix != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("shrink-0", iconSizeClass), children: prefix }),
     children,
     suffix != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("shrink-0", iconSizeClass), children: suffix })
@@ -923,6 +990,7 @@ var Button = ({
   variant,
   size,
   shape,
+  iconSize: iconSize2,
   asChild = false,
   loading = false,
   disabled,
@@ -940,11 +1008,21 @@ var Button = ({
     Comp,
     {
       ref,
-      className: cn(buttonVariants({ variant, size, shape }), shadowClass, className),
+      className: cn(buttonVariants({ variant, size, shape, iconSize: iconSize2 }), shadowClass, className),
       disabled: isDisabled,
       "aria-busy": loading || void 0,
       ...props,
-      children: asChild ? children : /* @__PURE__ */ jsx(ButtonContent, { loading, prefix, suffix, size, children })
+      children: asChild ? children : /* @__PURE__ */ jsx(
+        ButtonContent,
+        {
+          loading,
+          prefix,
+          suffix,
+          size,
+          iconSize: iconSize2,
+          children
+        }
+      )
     }
   );
 };
@@ -954,6 +1032,7 @@ var ButtonLink = ({
   variant,
   size,
   shape,
+  iconSize: iconSize2,
   prefix,
   suffix,
   shadow,
@@ -973,14 +1052,24 @@ var ButtonLink = ({
     {
       ref,
       className: cn(
-        buttonVariants({ variant, size, shape }),
+        buttonVariants({ variant, size, shape, iconSize: iconSize2 }),
         shadowClass,
         loading && "pointer-events-none opacity-50",
         className
       ),
       ...loadingProps,
       ...props,
-      children: /* @__PURE__ */ jsx(ButtonContent, { loading, prefix, suffix, size, children })
+      children: /* @__PURE__ */ jsx(
+        ButtonContent,
+        {
+          loading,
+          prefix,
+          suffix,
+          size,
+          iconSize: iconSize2,
+          children
+        }
+      )
     }
   );
 };