@nebutra/ui 0.2.2 → 0.2.3

package/dist/patterns/index.js

@@ -30,7 +30,7 @@ function ArtifactShiftCard({
     "div",
     {
       className: cn(
-        "group/card relative flex h-full min-h-[560px] flex-col overflow-hidden rounded-[var(--radius-panel)] border bg-background/90 transition-[transform,border-color,box-shadow] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-1 hover:border-foreground/25 hover:shadow-[0_28px_90px_-64px_var(--foreground)] focus-within:-translate-y-1 focus-within:border-foreground/25",
+        "group/card relative flex h-full min-h-[560px] flex-col overflow-hidden rounded-[var(--radius-panel)] border bg-background/90 transition-[transform,border-color,box-shadow] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-1 hover:border-foreground/25 hover:shadow-ambient-lg focus-within:-translate-y-1 focus-within:border-foreground/25",
         className
       ),
       "data-taste": "nebutra-shift-card",
@@ -71,7 +71,7 @@ function ArtifactShiftCardPreview({
     {
       "aria-label": label,
       className: cn(
-        "relative min-h-[260px] overflow-hidden rounded-[var(--radius-xl)] border border-border/60 bg-background/80 p-3 shadow-[0_18px_60px_-46px_var(--foreground)] transition-[transform,border-color,box-shadow] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover/card:-translate-y-1 group-hover/card:border-foreground/20 group-hover/card:shadow-[0_24px_80px_-52px_var(--foreground)] group-focus-within/card:-translate-y-1 group-focus-within/card:border-foreground/20 sm:p-4",
+        "relative min-h-[260px] overflow-hidden rounded-[var(--radius-xl)] border border-border/60 bg-background/80 p-3 shadow-ambient-sm transition-[transform,border-color,box-shadow] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover/card:-translate-y-1 group-hover/card:border-foreground/20 group-hover/card:shadow-ambient-md group-focus-within/card:-translate-y-1 group-focus-within/card:border-foreground/20 sm:p-4",
         className
       ),
       ...props,
@@ -122,7 +122,7 @@ function ArtifactShiftCardFooter({ className, ...props }) {
     "footer",
     {
       className: cn(
-        "relative mt-4 flex flex-wrap items-center justify-between gap-3 rounded-[var(--radius-xl)] border border-border/60 bg-background/85 px-4 py-3 shadow-[0_14px_48px_-42px_var(--foreground)] backdrop-blur-xl transition-[transform,border-color,box-shadow] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover/card:-translate-y-2 group-hover/card:border-foreground/20 group-hover/card:shadow-[0_22px_70px_-50px_var(--foreground)] group-focus-within/card:-translate-y-2 group-focus-within/card:border-foreground/20",
+        "relative mt-4 flex flex-wrap items-center justify-between gap-3 rounded-[var(--radius-xl)] border border-border/60 bg-background/85 px-4 py-3 shadow-ambient-sm backdrop-blur-xl transition-[transform,border-color,box-shadow] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover/card:-translate-y-2 group-hover/card:border-foreground/20 group-hover/card:shadow-ambient-md group-focus-within/card:-translate-y-2 group-focus-within/card:border-foreground/20",
         className
       ),
       ...props
@@ -150,7 +150,7 @@ var CardRoot = React.forwardRef(
       {
         ref,
         className: cn(
-          "rounded-[var(--radius-xl)] transition-[background-color,border-color,box-shadow,color] duration-200",
+          "rounded-[var(--radius-xl)] transition-[background-color,border-color,box-shadow,color] duration-micro",
           variantStyles[variant],
           paddingMap[padding],
           className
@@ -377,7 +377,7 @@ function DashboardCommandSurface({
         /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between", children: [
           /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
             status ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-green-9 shadow-[0_0_0_3px_var(--green-3)]" }),
+              /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-success shadow-[0_0_0_3px_hsl(var(--success)/0.18)]" }),
               /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium uppercase text-muted-foreground", children: status })
             ] }) : null,
             /* @__PURE__ */ jsx("h1", { className: "mt-2 text-2xl font-semibold tracking-normal text-card-foreground sm:text-[28px]", children: title }),
@@ -446,7 +446,7 @@ function DashboardMetricTile({
     {
       "data-pattern": "nebutra-dashboard-metric",
       className: cn(
-        "group h-full rounded-[var(--radius-lg)] border border-border bg-muted/40 p-3 transition-colors duration-150",
+        "group h-full rounded-[var(--radius-lg)] border border-border bg-muted/40 p-3 transition-colors duration-micro",
         "hover:border-muted-foreground/30 hover:bg-muted/65",
         className
       ),
@@ -474,7 +474,7 @@ function DashboardMetricTile({
   );
 }
 var badgeVariants = cva(
-  "inline-flex justify-center items-center align-middle shrink-0 rounded-full font-sans font-medium whitespace-nowrap tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 border border-transparent",
+  "inline-flex justify-center items-center align-middle shrink-0 rounded-full font-sans font-medium whitespace-nowrap tabular-nums transition-colors focus-visible:outline-none border border-transparent",
   {
     variants: {
       variant: {
@@ -496,15 +496,26 @@ var badgeVariants = cva(
         purple: "bg-secondary text-secondary-foreground fill-current",
         "purple-subtle": "bg-secondary/40 text-secondary-foreground fill-current border-transparent",
         amber: "bg-warning text-warning-foreground fill-current",
-        "amber-subtle": "bg-warning/15 text-warning fill-current border-transparent",
+        "amber-subtle": (
+          // --warning is a FILL (2.13:1). As ink on its own tint it measured 1.91:1.
+          // --warning-strong is the AA-safe amber foreground: 5.01:1 light / 6.20:1 dark.
+          "bg-warning/10 text-[hsl(var(--warning-strong))] fill-current border-transparent"
+        ),
         red: "bg-destructive text-destructive-foreground fill-current",
-        "red-subtle": "bg-destructive/15 text-destructive fill-current border-transparent",
+        "red-subtle": (
+          // --destructive is fill-only in dark (2.01:1 as ink on its own tint).
+          // --destructive-strong: 4.58:1 light / 4.97:1 dark.
+          "bg-destructive/10 text-[hsl(var(--destructive-strong))] fill-current border-transparent"
+        ),
         pink: "bg-accent text-accent-foreground fill-current",
         "pink-subtle": "bg-accent/40 text-accent-foreground fill-current border-transparent",
         green: "bg-success text-success-foreground fill-current",
-        "green-subtle": "bg-success/15 text-success fill-current border-transparent",
+        "green-subtle": (
+          // --success-strong closes the 4.49:1 light gap: 4.99:1 light / 4.83:1 dark.
+          "bg-success/10 text-[hsl(var(--success-strong))] fill-current border-transparent"
+        ),
         teal: "bg-info text-info-foreground fill-current",
-        "teal-subtle": "bg-info/15 text-info fill-current border-transparent",
+        "teal-subtle": "bg-info/10 text-info fill-current border-transparent",
         inverted: "bg-foreground text-background fill-current",
         // Special visual treatments (intentional product design, not brand hex)
         trial: "bg-gradient-to-br from-trial-start to-trial-end text-primary-foreground fill-current",
@@ -854,9 +865,9 @@ var badgeToneToVariant = {
 };
 var cardClassName = cn(
   "group relative block rounded-[var(--radius-xl)] border border-border bg-card text-card-foreground p-5 text-left",
-  "transition-[border-color,box-shadow,transform] duration-150 motion-reduce:transition-none motion-reduce:transform-none",
+  "transition-[border-color,box-shadow,transform] duration-micro motion-reduce:transition-none motion-reduce:transform-none",
   "hover:border-neutral-7 hover:shadow-sm hover:-translate-y-px motion-reduce:hover:translate-y-0",
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+  "focus-visible:outline-none"
 );
 function GalleryCardActionsMenu({ actions, title }) {
   function stop(event) {
@@ -875,7 +886,7 @@ function GalleryCardActionsMenu({ actions, title }) {
               "inline-flex h-7 w-7 items-center justify-center rounded-[var(--radius-md)]",
               "text-muted-foreground transition-colors",
               "hover:bg-accent hover:text-accent-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+              "focus-visible:outline-none"
             ),
             children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
           }
@@ -1035,7 +1046,7 @@ function KineticFeatureCard({
     "article",
     {
       className: cn(
-        "group/kinetic relative flex h-full min-h-[540px] flex-col overflow-hidden rounded-[var(--radius-panel)] border border-border/65 bg-background/82 p-6 shadow-[inset_0_1px_0_rgb(255_255_255/0.45),0_24px_90px_-70px_var(--foreground)] backdrop-blur-2xl transition-[transform,border-color,box-shadow,background-color] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-1 hover:border-foreground/25 hover:bg-background/94 hover:shadow-[inset_0_1px_0_rgb(255_255_255/0.55),0_34px_110px_-74px_var(--foreground)] focus-within:-translate-y-1 focus-within:border-foreground/25 sm:p-7",
+        "group/kinetic relative flex h-full min-h-[540px] flex-col overflow-hidden rounded-[var(--radius-panel)] border border-border/65 bg-background/82 p-6 shadow-glass-md backdrop-blur-2xl transition-[transform,border-color,box-shadow,background-color] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-1 hover:border-foreground/25 hover:bg-background/94 hover:shadow-glass-lg focus-within:-translate-y-1 focus-within:border-foreground/25 sm:p-7",
         className
       ),
       "data-taste": "nebutra-texture-cutout-card",
@@ -1058,7 +1069,7 @@ function KineticFeatureCard({
         ),
         /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-0 z-10 rounded-bl-[2rem] border-b border-l border-border/60 bg-muted/55 px-4 py-2 backdrop-blur-xl", children: /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground", children: eyebrow }) }),
         /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex h-full flex-col", children: [
-          /* @__PURE__ */ jsx("div", { className: "mb-8 flex items-start justify-between gap-4 pr-16", children: renderedIcon && /* @__PURE__ */ jsx("div", { className: "grid size-14 place-items-center rounded-[var(--radius-xl)] border border-border/65 bg-background/75 shadow-[inset_0_1px_0_rgb(255_255_255/0.55),0_16px_42px_-34px_var(--foreground)] transition-transform duration-500 group-hover/kinetic:-translate-y-1", children: renderedIcon }) }),
+          /* @__PURE__ */ jsx("div", { className: "mb-8 flex items-start justify-between gap-4 pr-16", children: renderedIcon && /* @__PURE__ */ jsx("div", { className: "grid size-14 place-items-center rounded-[var(--radius-xl)] border border-border/65 bg-background/75 shadow-glass-sm transition-transform duration-500 group-hover/kinetic:-translate-y-1", children: renderedIcon }) }),
           /* @__PURE__ */ jsx(
             "h3",
             {
@@ -1085,7 +1096,7 @@ function KineticCodePreview({
     "div",
     {
       className: cn(
-        "relative overflow-hidden rounded-[var(--radius-xl)] border border-border/60 bg-muted/30 shadow-[0_18px_70px_-56px_var(--foreground)] transition-[transform,border-color,box-shadow] duration-500 group-hover/kinetic:-translate-y-2 group-hover/kinetic:border-foreground/20 group-hover/kinetic:shadow-[0_26px_90px_-62px_var(--foreground)]",
+        "relative overflow-hidden rounded-[var(--radius-xl)] border border-border/60 bg-muted/30 shadow-ambient-md transition-[transform,border-color,box-shadow] duration-500 group-hover/kinetic:-translate-y-2 group-hover/kinetic:border-foreground/20 group-hover/kinetic:shadow-ambient-lg",
         className
       ),
       ...props,
@@ -1123,7 +1134,7 @@ function KineticConsoleFrame({
     "div",
     {
       className: cn(
-        "group/kinetic relative flex h-full min-h-[460px] w-full flex-col overflow-hidden rounded-[2rem] border border-border/65 bg-background/84 shadow-[inset_0_1px_0_rgb(255_255_255/0.45),0_32px_120px_-88px_var(--foreground)] backdrop-blur-3xl transition-[transform,border-color,box-shadow] duration-500 hover:-translate-y-1 hover:border-foreground/25 hover:shadow-[inset_0_1px_0_rgb(255_255_255/0.55),0_44px_140px_-90px_var(--foreground)]",
+        "group/kinetic relative flex h-full min-h-[460px] w-full flex-col overflow-hidden rounded-[2rem] border border-border/65 bg-background/84 shadow-glass-md backdrop-blur-3xl transition-[transform,border-color,box-shadow] duration-500 hover:-translate-y-1 hover:border-foreground/25 hover:shadow-glass-lg",
         className
       ),
       "data-taste": "nebutra-terminal-animation",
@@ -1169,7 +1180,7 @@ function KineticMorphSurface({
     "div",
     {
       className: cn(
-        "group/kinetic relative overflow-hidden rounded-[var(--radius-panel)] border border-border/65 bg-background/80 p-3 shadow-[inset_0_1px_0_rgb(255_255_255/0.45),0_28px_110px_-82px_var(--foreground)] backdrop-blur-2xl transition-[border-color,box-shadow,background-color] duration-500 hover:border-foreground/20 hover:bg-background/92 hover:shadow-[inset_0_1px_0_rgb(255_255_255/0.55),0_36px_130px_-88px_var(--foreground)] sm:p-4 lg:p-5",
+        "group/kinetic relative overflow-hidden rounded-[var(--radius-panel)] border border-border/65 bg-background/80 p-3 shadow-glass-md backdrop-blur-2xl transition-[border-color,box-shadow,background-color] duration-500 hover:border-foreground/20 hover:bg-background/92 hover:shadow-glass-lg sm:p-4 lg:p-5",
         className
       ),
       "data-active-key": activeKey,
@@ -1206,7 +1217,7 @@ function KineticSignalMarquee({
     "div",
     {
       className: cn(
-        "group/kinetic relative mx-auto overflow-hidden rounded-[var(--radius-panel)] border border-border/55 bg-background/72 px-3 py-8 shadow-[inset_0_1px_0_rgb(255_255_255/0.45),0_22px_90px_-76px_var(--foreground)] backdrop-blur-2xl sm:px-5",
+        "group/kinetic relative mx-auto overflow-hidden rounded-[var(--radius-panel)] border border-border/55 bg-background/72 px-3 py-8 shadow-glass-md backdrop-blur-2xl sm:px-5",
         className
       ),
       "data-taste": "nebutra-provider-grid",
@@ -1256,7 +1267,7 @@ function KineticCommandBox({
     "div",
     {
       className: cn(
-        "group/kinetic relative flex flex-col items-stretch overflow-hidden rounded-[var(--radius-xl)] border border-border/65 bg-background/82 p-1.5 shadow-[inset_0_1px_0_rgb(255_255_255/0.5),0_20px_70px_-58px_var(--foreground)] backdrop-blur-2xl transition-[transform,border-color,box-shadow,background-color] duration-500 hover:-translate-y-1 hover:border-foreground/25 hover:bg-background/92 hover:shadow-[inset_0_1px_0_rgb(255_255_255/0.6),0_28px_90px_-62px_var(--foreground)] sm:flex-row sm:items-center",
+        "group/kinetic relative flex flex-col items-stretch overflow-hidden rounded-[var(--radius-xl)] border border-border/65 bg-background/82 p-1.5 shadow-glass-sm backdrop-blur-2xl transition-[transform,border-color,box-shadow,background-color] duration-500 hover:-translate-y-1 hover:border-foreground/25 hover:bg-background/92 hover:shadow-glass-md sm:flex-row sm:items-center",
         className
       ),
       "data-taste": "nebutra-texture-command",
@@ -1279,7 +1290,7 @@ function KineticCommandBox({
           {
             type: "button",
             onClick: handleCopy,
-            className: "relative z-10 mt-2 flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-[var(--radius-lg)] border border-primary/20 bg-foreground px-5 py-2.5 text-sm font-medium text-background shadow-[inset_0_1px_0_rgb(255_255_255/0.2)] transition-[transform,opacity] hover:-translate-y-px hover:opacity-90 sm:mt-0",
+            className: "relative z-10 mt-2 flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-[var(--radius-lg)] border border-primary/20 bg-foreground px-5 py-2.5 text-sm font-medium text-background shadow-sheen transition-[transform,opacity] hover:-translate-y-px hover:opacity-90 sm:mt-0",
             children: [
               copied ? /* @__PURE__ */ jsx(Check, { className: "size-4" }) : /* @__PURE__ */ jsx(Copy, { className: "size-4" }),
               copied ? copiedLabel : copyLabel
@@ -1295,7 +1306,7 @@ function KineticStepRail({ className, children, ...props }) {
     "div",
     {
       className: cn(
-        "relative overflow-hidden rounded-[var(--radius-panel)] border border-border/65 bg-background/78 p-6 shadow-[inset_0_1px_0_rgb(255_255_255/0.45),0_24px_100px_-78px_var(--foreground)] backdrop-blur-2xl md:p-10",
+        "relative overflow-hidden rounded-[var(--radius-panel)] border border-border/65 bg-background/78 p-6 shadow-glass-md backdrop-blur-2xl md:p-10",
         className
       ),
       "data-taste": "nebutra-grid-beam",
@@ -1341,12 +1352,12 @@ function KineticStep({
     "article",
     {
       className: cn(
-        "group/kinetic relative flex h-full flex-col items-center rounded-[var(--radius-xl)] border border-border/60 bg-background/82 p-5 text-center shadow-[0_18px_70px_-58px_var(--foreground)] backdrop-blur-xl transition-[transform,border-color,box-shadow] duration-500 hover:-translate-y-1 hover:border-foreground/25 hover:shadow-[0_28px_90px_-62px_var(--foreground)]",
+        "group/kinetic relative flex h-full flex-col items-center rounded-[var(--radius-xl)] border border-border/60 bg-background/82 p-5 text-center shadow-ambient-md backdrop-blur-xl transition-[transform,border-color,box-shadow] duration-500 hover:-translate-y-1 hover:border-foreground/25 hover:shadow-ambient-lg",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative mb-6 grid size-16 place-items-center rounded-[var(--radius-xl)] border border-border/65 bg-background shadow-[inset_0_1px_0_rgb(255_255_255/0.55),0_18px_56px_-42px_var(--foreground)]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative mb-6 grid size-16 place-items-center rounded-[var(--radius-xl)] border border-border/65 bg-background shadow-glass-sm", children: [
           /* @__PURE__ */ jsx(
             "span",
             {
@@ -1408,7 +1419,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(" "),
@@ -1435,8 +1445,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: [
@@ -1447,22 +1479,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: {
@@ -1484,7 +1550,10 @@ function Spinner({ className }) {
     }
   );
 }
-function getIconSizeClass(size) {
+function getIconSizeClass(size, iconSize) {
+  if (iconSize === "sm") return "[&>svg]:size-3.5";
+  if (iconSize === "md") return "[&>svg]:size-3.5";
+  if (iconSize === "lg") return "[&>svg]:size-4";
   switch (size) {
     case "tiny":
       return "[&>svg]:size-3";
@@ -1499,7 +1568,10 @@ function getIconSizeClass(size) {
       return "[&>svg]:size-4";
   }
 }
-function getSpinnerSizeClass(size) {
+function getSpinnerSizeClass(size, iconSize) {
+  if (iconSize === "sm") return "size-3.5";
+  if (iconSize === "md") return "size-3.5";
+  if (iconSize === "lg") return "size-4";
   switch (size) {
     case "tiny":
       return "size-3";
@@ -1524,10 +1596,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, children }) {
+  const iconSizeClass = getIconSizeClass(size, iconSize);
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size) }),
+    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size, iconSize) }),
     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 })
@@ -1538,6 +1610,7 @@ var Button = ({
   variant,
   size,
   shape,
+  iconSize,
   asChild = false,
   loading = false,
   disabled,
@@ -1555,11 +1628,21 @@ var Button = ({
     Comp,
     {
       ref,
-      className: cn(buttonVariants({ variant, size, shape }), shadowClass, className),
+      className: cn(buttonVariants({ variant, size, shape, iconSize }), 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,
+          children
+        }
+      )
     }
   );
 };
@@ -1626,6 +1709,10 @@ var tabsTokens = {
 };
 
 // src/utils/primitive-props.ts
+function asPlainStyle(style) {
+  if (style == null || typeof style === "function") return {};
+  return style;
+}
 function withHtmlProps(Component) {
   return Component;
 }
@@ -1736,7 +1823,7 @@ var tabsListVariants = cva(
   }
 );
 var tabsTriggerVariants = cva(
-  "relative inline-flex h-[calc(var(--tabs-height)-var(--tabs-padding)*2)] min-w-[var(--tabs-trigger-min-width)] shrink-0 cursor-pointer items-center justify-center gap-[var(--tabs-trigger-gap)] whitespace-nowrap rounded-[var(--tabs-trigger-radius)] px-[var(--tabs-trigger-padding-x)] font-medium text-[length:var(--tabs-font-size)] outline-none transition-[background-color,border-color,box-shadow,color,opacity] duration-[var(--tabs-duration)] ease-[var(--tabs-easing)] focus-visible:ring-[length:var(--tabs-focus-ring-width)] focus-visible:ring-ring focus-visible:ring-offset-[length:var(--tabs-focus-ring-offset)] focus-visible:ring-offset-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:size-[var(--tabs-icon-size)] [&_svg]:shrink-0",
+  "relative inline-flex h-[calc(var(--tabs-height)-var(--tabs-padding)*2)] min-w-[var(--tabs-trigger-min-width)] shrink-0 cursor-pointer items-center justify-center gap-[var(--tabs-trigger-gap)] whitespace-nowrap rounded-[var(--tabs-trigger-radius)] px-[var(--tabs-trigger-padding-x)] font-medium text-[length:var(--tabs-font-size)] outline-none transition-[background-color,border-color,box-shadow,color,opacity] duration-[var(--tabs-duration)] ease-[var(--tabs-easing)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:size-[var(--tabs-icon-size)] [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -1773,7 +1860,7 @@ var tabsIndicatorVariants = cva(
   }
 );
 var tabsContentVariants = cva(
-  "mt-[var(--tabs-panel-gap)] text-[length:var(--tabs-font-size)] text-muted-foreground focus-visible:outline-none focus-visible:ring-[length:var(--tabs-focus-ring-width)] focus-visible:ring-ring focus-visible:ring-offset-[length:var(--tabs-focus-ring-offset)] focus-visible:ring-offset-background",
+  "mt-[var(--tabs-panel-gap)] text-[length:var(--tabs-font-size)] text-muted-foreground focus-visible:outline-none",
   {
     variants: {
       variant: {
@@ -1815,7 +1902,7 @@ function getTabsStyle(size, style) {
     "--tabs-badge-font-size": `${tabsTokens.badgeFontSize}px`,
     "--tabs-duration": `${tabsTokens.motion.duration}ms`,
     "--tabs-easing": tabsTokens.motion.easing,
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function getFirstEnabledValue(tabs) {
@@ -2046,7 +2133,7 @@ function getTextareaStyle(size, style) {
     "--textarea-focus-ring-width": `${textareaTokens.focusRingWidth}px`,
     borderRadius: "var(--textarea-radius)",
     outline: "none",
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function getTextareaFieldStyle() {
@@ -2294,7 +2381,7 @@ function MarkdownEditor({
               value,
               onChange: (e) => onChange(e.target.value),
               placeholder,
-              className: "resize-none rounded-none border-0 font-mono text-sm shadow-none focus-visible:ring-0",
+              className: "resize-none rounded-none border-0 font-mono text-sm shadow-none",
               style: { minHeight }
             }
           ) }),
@@ -2397,9 +2484,18 @@ function getAvatarFallbackClass(size) {
 }
 function getAvatarStyle(size, style) {
   if (typeof size !== "number") return style;
-  return {
+  const numericVars = {
     "--avatar-size": `${size}px`,
-    "--avatar-font-size": `${Math.max(10, Math.round(size * 0.375))}px`,
+    "--avatar-font-size": `${Math.max(10, Math.round(size * 0.375))}px`
+  };
+  if (typeof style === "function") {
+    return (state) => ({
+      ...numericVars,
+      ...style(state)
+    });
+  }
+  return {
+    ...numericVars,
     ...style
   };
 }
@@ -2674,7 +2770,7 @@ function QAPage({
       return bScore - aScore;
     });
   }, [answers]);
-  return /* @__PURE__ */ jsxs("div", { className: cn("mx-auto w-full max-w-5xl p-4 md:p-6", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("mx-auto w-full max-w-[var(--container-content)] p-4 md:p-6", className), children: [
     /* @__PURE__ */ jsxs("header", { className: "mb-6", children: [
       /* @__PURE__ */ jsx("h1", { className: "mb-4 font-bold text-2xl leading-tight text-foreground", children: question.title }),
       /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-4 text-muted-foreground text-sm", children: [
@@ -3160,7 +3256,7 @@ function SidebarNav({
           return /* @__PURE__ */ jsxs("section", { className: "group/section", children: [
             section.label && !collapsed ? /* @__PURE__ */ jsxs("div", { className: "mb-1.5 flex items-center justify-between px-2.5", children: [
               /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/45", children: section.label }),
-              visibleActions ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5 opacity-0 transition-opacity duration-150 group-hover/section:opacity-100 focus-within:opacity-100", children: visibleActions.map((action) => {
+              visibleActions ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5 opacity-0 transition-opacity duration-micro group-hover/section:opacity-100 focus-within:opacity-100", children: visibleActions.map((action) => {
                 const ActionIcon = action.icon;
                 const defaultButton = /* @__PURE__ */ jsx(
                   "button",
@@ -3169,7 +3265,7 @@ function SidebarNav({
                     "aria-label": action.label,
                     title: action.label,
                     onClick: action.onClick,
-                    className: "inline-flex size-4 items-center justify-center rounded text-sidebar-foreground/50 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    className: "inline-flex size-4 items-center justify-center rounded text-sidebar-foreground/50 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none",
                     children: /* @__PURE__ */ jsx(ActionIcon, { className: "size-3" })
                   }
                 );
@@ -3397,7 +3493,7 @@ function DefaultTrigger({ user }) {
       className: cn(
         "inline-flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full",
         "outline-none transition-[box-shadow,opacity] hover:opacity-90",
-        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "",
         "hover:ring-1 hover:ring-border"
       ),
       children: /* @__PURE__ */ jsxs(Avatar, { size: "sm", children: [
@@ -3492,7 +3588,7 @@ function getInitials(workspace) {
   if (!trimmed) return "??";
   const parts = trimmed.split(/\s+/).filter(Boolean);
   if (parts.length >= 2) {
-    return `${parts[0][0] ?? ""}${parts[1][0] ?? ""}`.toUpperCase();
+    return `${parts[0]?.[0] ?? ""}${parts[1]?.[0] ?? ""}`.toUpperCase();
   }
   return trimmed.slice(0, 2).toUpperCase();
 }
@@ -3549,7 +3645,7 @@ function TriggerButton({
         className: cn(
           "inline-flex items-center gap-1 rounded-[var(--radius-md)] p-1 outline-none transition-colors",
           "hover:bg-accent hover:text-accent-foreground",
-          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+          "",
           "disabled:cursor-not-allowed disabled:opacity-50",
           className
         ),
@@ -3570,7 +3666,7 @@ function TriggerButton({
       className: cn(
         "inline-flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-border bg-background px-2 py-1 text-left outline-none transition-colors",
         "hover:bg-accent hover:text-accent-foreground",
-        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+        "",
         "disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),