@nebutra/ui 2.0.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/dist/{canonical-Bf4czR2u.d.ts → canonical-DEhT4VfS.d.ts} +71 -120
  2. package/dist/card-DunB1gKE.d.ts +105 -0
  3. package/dist/components/index.d.ts +33 -4
  4. package/dist/components/index.js +225 -89
  5. package/dist/components/index.js.map +1 -1
  6. package/dist/editorial/index.d.ts +2 -2
  7. package/dist/editorial/index.js +75 -1
  8. package/dist/editorial/index.js.map +1 -1
  9. package/dist/empty-state-bmfHCOuN.d.ts +86 -0
  10. package/dist/hooks/index.d.ts +18 -1
  11. package/dist/hooks/index.js +120 -5
  12. package/dist/hooks/index.js.map +1 -1
  13. package/dist/index.d.ts +1 -1
  14. package/dist/layout/index.d.ts +17 -58
  15. package/dist/layout/index.js +366 -126
  16. package/dist/layout/index.js.map +1 -1
  17. package/dist/layouts/index.d.ts +1 -1
  18. package/dist/layouts/index.js +89 -15
  19. package/dist/layouts/index.js.map +1 -1
  20. package/dist/patterns/index.d.ts +38 -44
  21. package/dist/patterns/index.js +470 -278
  22. package/dist/patterns/index.js.map +1 -1
  23. package/dist/primitives/canonical.d.ts +3 -1
  24. package/dist/primitives/canonical.js +495 -231
  25. package/dist/primitives/canonical.js.map +1 -1
  26. package/dist/primitives/index.d.ts +90 -62
  27. package/dist/primitives/index.js +1129 -1185
  28. package/dist/primitives/index.js.map +1 -1
  29. package/dist/tailwind.preset.d.ts +32 -32
  30. package/dist/tailwind.preset.js +24 -20
  31. package/dist/tailwind.preset.js.map +1 -1
  32. package/dist/theme/index.d.ts +1 -110
  33. package/dist/typography/fonts.css +8 -16
  34. package/dist/typography/index.d.ts +29 -45
  35. package/dist/typography/index.js +26 -14
  36. package/dist/typography/index.js.map +1 -1
  37. package/dist/utils/index.d.ts +18 -12
  38. package/dist/utils/index.js +94 -18
  39. package/dist/utils/index.js.map +1 -1
  40. package/package.json +6 -10
  41. package/src/typography/fonts.css +8 -16
  42. package/dist/styles/brand-override.css +0 -61
  43. package/src/styles/brand-override.css +0 -61
@@ -2,7 +2,7 @@
2
2
  import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
3
3
  import { ChevronUpDown, Check, ChevronRight, ChevronDown, MagnifyingGlass, Plus, Cross, MoreHorizontal, Status, Copy, Information, Warning, External, LoaderCircle, EyeOff, Eye, Minus, LockClosed, CheckCircle, MoreVertical, DeviceDesktop, Sun, Moon, Hash, Code, Link, FolderOpen, FolderClosed, File, ChevronLeft, ChevronUp, FileText } from '@nebutra/icons';
4
4
  import { clsx } from 'clsx';
5
- import { twMerge } from 'tailwind-merge';
5
+ import { extendTailwindMerge } from 'tailwind-merge';
6
6
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
7
7
  import { cva } from 'class-variance-authority';
8
8
  import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
@@ -10,6 +10,7 @@ import * as React24 from 'react';
10
10
  import React24__default, { createContext, useId, useRef, useState, useMemo, use, useCallback, useEffect, Children, isValidElement, cloneElement } from 'react';
11
11
  import { colors, brandSpring, flow, emerge } from '@nebutra/brand';
12
12
  export { brandSpring } from '@nebutra/brand';
13
+ import { tokenColor, fontStack } from '@nebutra/tokens/values';
13
14
  import { useReducedMotion, LazyMotion, domAnimation, AnimatePresence, motion, m } from 'framer-motion';
14
15
  import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
15
16
  import { Prism } from 'react-syntax-highlighter';
@@ -36,6 +37,80 @@ import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
36
37
  import { useTheme } from '@nebutra/tokens';
37
38
 
38
39
  // src/primitives/accordion.tsx
40
+
41
+ // src/utils/tw-merge-theme.generated.ts
42
+ var TW_MERGE_THEME = {
43
+ breakpoint: ["3xl", "shell", "tight", "xs"],
44
+ container: ["content", "text", "wide"],
45
+ ease: ["brand", "in", "in-out", "out", "spring"],
46
+ font: ["cn", "display", "heading", "mono", "sans"],
47
+ leading: ["display", "heading"],
48
+ radius: ["2xl", "3xl", "button", "card", "full", "lg", "md", "none", "panel", "sm", "xl", "xs"],
49
+ shadow: [
50
+ "2xl",
51
+ "ambient-glow",
52
+ "ambient-lg",
53
+ "ambient-md",
54
+ "ambient-sm",
55
+ "brand",
56
+ "brand-lg",
57
+ "glass-lg",
58
+ "glass-md",
59
+ "glass-sm",
60
+ "glow-accent",
61
+ "glow-accent-lg",
62
+ "glow-accent-sm",
63
+ "glow-primary",
64
+ "lg",
65
+ "md",
66
+ "sheen",
67
+ "sm",
68
+ "xl",
69
+ "xs"
70
+ ],
71
+ text: [
72
+ "2xl",
73
+ "2xs",
74
+ "3xl",
75
+ "4xl",
76
+ "5xl",
77
+ "6xl",
78
+ "7xl",
79
+ "8xl",
80
+ "9xl",
81
+ "base",
82
+ "body",
83
+ "display",
84
+ "label",
85
+ "lg",
86
+ "meta",
87
+ "sm",
88
+ "ui",
89
+ "xl",
90
+ "xs"
91
+ ],
92
+ tracking: ["display", "heading", "label", "tight"]
93
+ };
94
+ var TW_MERGE_CLASS_GROUPS = {
95
+ duration: [{ duration: ["cinematic", "flow", "micro", "reveal"] }]
96
+ };
97
+
98
+ // src/utils/cn.ts
99
+ var twMerge = extendTailwindMerge({
100
+ extend: {
101
+ theme: Object.fromEntries(
102
+ Object.entries(TW_MERGE_THEME).map(([key, values]) => [key, [...values]])
103
+ ),
104
+ classGroups: Object.fromEntries(
105
+ Object.entries(TW_MERGE_CLASS_GROUPS).map(([key, groups]) => [
106
+ key,
107
+ groups.map(
108
+ (group) => Object.fromEntries(Object.entries(group).map(([k, v]) => [k, [...v]]))
109
+ )
110
+ ])
111
+ )
112
+ }
113
+ });
39
114
  function cn(...inputs) {
40
115
  return twMerge(clsx(inputs));
41
116
  }
@@ -48,17 +123,17 @@ function asPlainStyle(style) {
48
123
  function withHtmlProps(Component) {
49
124
  return Component;
50
125
  }
51
- var RadixItem = withHtmlProps(Accordion$1.Item);
52
- var RadixHeader = withHtmlProps(Accordion$1.Header);
53
- var RadixTrigger = withHtmlProps(Accordion$1.Trigger);
54
- var RadixContent = withHtmlProps(Accordion$1.Panel);
126
+ var AccordionItemBase = withHtmlProps(Accordion$1.Item);
127
+ var AccordionHeaderBase = withHtmlProps(Accordion$1.Header);
128
+ var AccordionTriggerBase = withHtmlProps(Accordion$1.Trigger);
129
+ var AccordionPanelBase = withHtmlProps(Accordion$1.Panel);
55
130
  var Accordion = Accordion$1.Root;
56
131
  var AccordionItem = ({
57
132
  className,
58
133
  ref,
59
134
  ...props
60
135
  }) => /* @__PURE__ */ jsx(
61
- RadixItem,
136
+ AccordionItemBase,
62
137
  {
63
138
  ref,
64
139
  className: cn("border-b border-border/70 last:border-b-0", className),
@@ -72,8 +147,8 @@ var AccordionTrigger = ({
72
147
  size = "default",
73
148
  ref,
74
149
  ...props
75
- }) => /* @__PURE__ */ jsx(RadixHeader, { className: "flex", children: /* @__PURE__ */ jsxs(
76
- RadixTrigger,
150
+ }) => /* @__PURE__ */ jsx(AccordionHeaderBase, { className: "flex", children: /* @__PURE__ */ jsxs(
151
+ AccordionTriggerBase,
77
152
  {
78
153
  ref,
79
154
  className: cn(
@@ -105,11 +180,11 @@ var AccordionContent = ({
105
180
  ref,
106
181
  ...props
107
182
  }) => /* @__PURE__ */ jsx(
108
- RadixContent,
183
+ AccordionPanelBase,
109
184
  {
110
185
  ref,
111
186
  ...keepMounted ? { keepMounted: true } : {},
112
- className: "text-sm leading-relaxed data-[ending-style]:animate-accordion-up data-[open]:animate-accordion-down overflow-hidden text-muted-foreground transition-[height,opacity] duration-flow ease-out",
187
+ className: "text-sm leading-relaxed h-[var(--accordion-panel-height,auto)] data-[starting-style]:h-0 data-[ending-style]:h-0 overflow-hidden text-muted-foreground transition-[height,opacity] duration-flow ease-out",
113
188
  ...props,
114
189
  children: /* @__PURE__ */ jsx("div", { className: cn(size === "small" ? "pb-2.5 pt-0" : "pb-4 pt-0", className), children })
115
190
  }
@@ -195,7 +270,7 @@ var alertVariants = cva("flex items-stretch w-full gap-2 group-[.toaster]:w-(--w
195
270
  {
196
271
  variant: "destructive",
197
272
  appearance: "outline",
198
- className: "border border-border bg-background text-destructive [&_[data-slot=alert-close]]:text-foreground"
273
+ className: "border border-border bg-background text-destructive-strong [&_[data-slot=alert-close]]:text-foreground"
199
274
  },
200
275
  {
201
276
  variant: "success",
@@ -265,7 +340,7 @@ var alertVariants = cva("flex items-stretch w-full gap-2 group-[.toaster]:w-(--w
265
340
  {
266
341
  variant: "mono",
267
342
  icon: "destructive",
268
- className: "[&_[data-slot=alert-icon]]:text-destructive"
343
+ className: "[&_[data-slot=alert-icon]]:text-destructive-strong"
269
344
  },
270
345
  {
271
346
  variant: "mono",
@@ -287,6 +362,7 @@ function Alert({
287
362
  appearance,
288
363
  close = false,
289
364
  onClose,
365
+ closeLabel = "Dismiss",
290
366
  children,
291
367
  ...props
292
368
  }) {
@@ -304,7 +380,7 @@ function Alert({
304
380
  {
305
381
  type: "button",
306
382
  onClick: onClose,
307
- "aria-label": "Dismiss",
383
+ "aria-label": closeLabel,
308
384
  "data-slot": "alert-close",
309
385
  className: cn(
310
386
  "group shrink-0 size-4 inline-flex items-center justify-center rounded-[var(--radius-sm)]",
@@ -348,7 +424,7 @@ function AlertContent({ className, ...props }) {
348
424
  );
349
425
  }
350
426
  ({
351
- // Nebutra Blue (云毓蓝) — technology & trust — VI: #0033FE
427
+ // Nebutra Blue (云毓蓝) — technology & trust
352
428
  blue50: colors.primary[50],
353
429
  blue100: colors.primary[100],
354
430
  blue200: colors.primary[200],
@@ -361,7 +437,7 @@ function AlertContent({ className, ...props }) {
361
437
  blue800: colors.primary[800],
362
438
  blue900: colors.primary[900],
363
439
  blue950: colors.primary[950],
364
- // Nebutra Cyan (云毓青) — data flow & intelligence — VI: #0BF1C3
440
+ // Nebutra Cyan (云毓青) — data flow & intelligence
365
441
  cyan50: colors.accent[50],
366
442
  cyan100: colors.accent[100],
367
443
  cyan200: colors.accent[200],
@@ -386,6 +462,13 @@ function AlertContent({ className, ...props }) {
386
462
  neutral800: colors.neutral[800],
387
463
  neutral900: colors.neutral[900],
388
464
  neutral950: colors.neutral[950],
465
+ // deepest — used as dark background
466
+ // Semantic raw colors — VI §Color Specifications. The 500s are the status
467
+ // tokens; the 600 hover steps have no token of their own.
468
+ // NOTE: info = brand blue, not sky/teal
469
+ red500: tokenColor("--status-danger"),
470
+ green500: tokenColor("--status-success"),
471
+ amber500: tokenColor("--status-warning"),
389
472
  white: colors.white,
390
473
  black: colors.black
391
474
  });
@@ -441,6 +524,18 @@ var primitiveFontWeight = {
441
524
  normal: 400,
442
525
  medium: 500,
443
526
  semibold: 600};
527
+ ({
528
+ /** Default body/UI stack — Geist with CJK falling through to MiSans */
529
+ sans: fontStack("--font-sans"),
530
+ /** CJK-locale stack (same order as sans, minus Latin-only system faces) */
531
+ cnSans: fontStack("--font-cn"),
532
+ /** Display / hero headlines */
533
+ display: fontStack("--font-display"),
534
+ /** Headings */
535
+ heading: fontStack("--font-heading"),
536
+ /** Code / monospace */
537
+ mono: fontStack("--font-mono")
538
+ });
444
539
  var primitiveShadow = {
445
540
  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
446
541
  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
@@ -472,8 +567,7 @@ var primitiveFocusRing = {
472
567
  // src/tokens/shadows.ts
473
568
  var shadowClasses = {
474
569
  md: "shadow-md",
475
- xl: "shadow-xl",
476
- "2xl": "shadow-2xl"};
570
+ xl: "shadow-xl"};
477
571
 
478
572
  // src/tokens/components/overlay.ts
479
573
  var overlayFocusRingClassName = "outline-none";
@@ -492,63 +586,66 @@ var overlayTokens = {
492
586
  }};
493
587
  var overlayClassNames = {
494
588
  focusRing: overlayFocusRingClassName,
495
- backdrop: "fixed inset-0 bg-black/40 backdrop-blur-sm transition-[opacity,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none",
589
+ backdrop: (
590
+ // allow-palette: dialog backdrop dims arbitrary app content behind it, must stay dark in both themes
591
+ "fixed inset-0 bg-black/40 transition-[opacity] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[var(--motion-duration-micro)] motion-reduce:transition-none"
592
+ ),
496
593
  modalSurface: [
497
594
  "fixed left-1/2 top-1/2 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4",
498
- "border border-border/60 bg-background/95 p-6 text-foreground backdrop-blur-xl",
595
+ "bg-background p-6 text-foreground",
499
596
  "rounded-[var(--radius-xl)]",
500
- shadowClasses["2xl"],
597
+ "shadow-[0_0_0_1px_var(--edge-soft),var(--elevation-overlay)]",
501
598
  "outline-none",
502
- "transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
503
- "data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0",
599
+ "transition-[opacity,transform] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
600
+ "data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 data-ending-style:duration-[var(--motion-duration-micro)]",
504
601
  "motion-reduce:transition-none motion-reduce:data-starting-style:transform-none motion-reduce:data-ending-style:transform-none"
505
602
  ].join(" "),
506
603
  menuSurface: [
507
604
  "min-w-32 origin-[var(--transform-origin)] overflow-hidden rounded-[var(--radius-lg)] border border-border/70 bg-popover/95 p-1 text-popover-foreground backdrop-blur-md",
508
605
  shadowClasses.xl,
509
- "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
510
- "data-[starting-style]:scale-[0.97] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.97] data-[ending-style]:opacity-0",
606
+ "outline-none transition-[opacity,transform] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
607
+ "data-[starting-style]:scale-[0.97] data-[starting-style]:opacity-0 data-ending-style:scale-[0.97] data-ending-style:opacity-0 data-ending-style:duration-[var(--motion-duration-micro)]",
511
608
  "motion-reduce:transition-none motion-reduce:data-[starting-style]:transform-none motion-reduce:data-[ending-style]:transform-none"
512
609
  ].join(" "),
513
610
  selectSurface: [
514
611
  "max-h-[var(--select-content-max-height)] min-w-[var(--select-content-min-width)] origin-[var(--transform-origin)] overflow-hidden",
515
612
  "rounded-[var(--select-content-radius)] border border-border/70 bg-popover/95 text-popover-foreground backdrop-blur-md",
516
613
  "shadow-[var(--select-content-shadow)] outline-none",
517
- "transition-[opacity,transform,display] duration-[var(--select-duration)] ease-[var(--ease-brand)]",
614
+ "transition-[opacity,transform] duration-[var(--select-duration)] ease-[var(--ease-brand)]",
518
615
  "data-starting-style:scale-[0.97] data-starting-style:opacity-0 data-ending-style:scale-[0.97] data-ending-style:opacity-0",
519
616
  "motion-reduce:transition-none motion-reduce:data-starting-style:transform-none motion-reduce:data-ending-style:transform-none"
520
617
  ].join(" "),
521
618
  navigationMenuSurface: [
522
619
  "min-w-32 origin-[var(--transform-origin)] overflow-hidden rounded-[var(--radius-xl)] border border-border/70 bg-popover/95 text-popover-foreground backdrop-blur-md",
523
620
  shadowClasses.xl,
524
- "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
525
- "data-[starting-style]:scale-[0.97] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.97] data-[ending-style]:opacity-0",
621
+ "outline-none transition-[opacity,transform] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
622
+ "data-[starting-style]:scale-[0.97] data-[starting-style]:opacity-0 data-ending-style:scale-[0.97] data-ending-style:opacity-0 data-ending-style:duration-[var(--motion-duration-micro)]",
526
623
  "motion-reduce:transition-none motion-reduce:data-[starting-style]:transform-none motion-reduce:data-[ending-style]:transform-none"
527
624
  ].join(" "),
528
625
  popoverSurface: [
529
626
  "w-72 origin-[var(--transform-origin)] rounded-[var(--radius-lg)] border border-border/70 bg-popover/95 p-4 text-popover-foreground backdrop-blur-md",
530
627
  shadowClasses.xl,
531
- "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
532
- "data-[open]:opacity-100 data-[closed]:opacity-0 data-[closed]:scale-[0.97] data-[open]:scale-100",
628
+ "outline-none transition-[opacity,transform] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
629
+ "data-[open]:opacity-100 data-[closed]:opacity-0 data-[closed]:scale-[0.97] data-[open]:scale-100 data-[closed]:duration-[var(--motion-duration-micro)]",
533
630
  "motion-reduce:transition-none motion-reduce:data-[closed]:transform-none motion-reduce:data-[open]:transform-none"
534
631
  ].join(" "),
535
632
  tooltipSurface: [
536
633
  "origin-[var(--transform-origin)] overflow-hidden rounded-[var(--radius-md)] border border-border/70 bg-popover/95 px-3 py-1.5 text-sm text-popover-foreground backdrop-blur-md",
537
634
  shadowClasses.md,
538
- "transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
539
- "data-starting-style:scale-[0.97] data-starting-style:opacity-0 data-ending-style:scale-[0.97] data-ending-style:opacity-0",
635
+ "transition-[opacity,transform] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
636
+ "data-starting-style:scale-[0.97] data-starting-style:opacity-0 data-ending-style:scale-[0.97] data-ending-style:opacity-0 data-ending-style:duration-[var(--motion-duration-micro)]",
540
637
  "data-[instant]:duration-0",
541
638
  "motion-reduce:transition-none motion-reduce:data-starting-style:transform-none motion-reduce:data-ending-style:transform-none"
542
639
  ].join(" "),
543
640
  sheetBackdrop: [
544
641
  "fixed inset-0 bg-[var(--sheet-overlay-background)] backdrop-blur-[var(--sheet-overlay-blur)]",
545
- "transition-[opacity,backdrop-filter,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
546
- "data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none"
642
+ "transition-[opacity] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
643
+ "data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[var(--motion-duration-micro)] motion-reduce:transition-none"
547
644
  ].join(" "),
548
645
  sheetSurface: [
549
646
  "fixed flex flex-col overflow-hidden border border-border bg-[var(--sheet-background)] text-foreground shadow-[var(--sheet-shadow)]",
550
- "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
551
- "data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none"
647
+ "outline-none transition-[opacity,transform] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
648
+ "data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[var(--motion-duration-micro)] motion-reduce:transition-none"
552
649
  ].join(" "),
553
650
  closeButton: `absolute right-4 top-4 rounded-[var(--radius-sm)] opacity-70 ring-offset-background ${overlayFocusRingClassName} transition-opacity duration-[var(--motion-duration-micro)] ease-[var(--ease-brand)] hover:opacity-100 disabled:pointer-events-none data-[open]:bg-accent data-[open]:text-muted-foreground motion-reduce:transition-none`
554
651
  };
@@ -557,7 +654,11 @@ var buttonVariants = cva(
557
654
  "inline-flex items-center justify-center gap-2 whitespace-nowrap",
558
655
  "rounded-[var(--btn-default-radius,var(--radius-md))]",
559
656
  "text-[length:var(--control-font-size-md,0.875rem)] font-[number:var(--font-weight-medium,500)]",
560
- "transition-[color,background-color,border-color,transform] duration-flow ease-[var(--ease-brand)]",
657
+ // `transform` is in the property list on purpose: without it the
658
+ // active:scale-[0.97] press snapped instantly and the button felt dead
659
+ // under the finger. Duration/ease stay on the flow rail — motion
660
+ // governance pins them (primitives/__tests__/motion-governance.test.ts).
661
+ "transition-[color,background-color,border-color,box-shadow,transform] duration-flow ease-[var(--ease-brand)]",
561
662
  "active:scale-[0.97] motion-reduce:active:scale-100 motion-reduce:transition-none",
562
663
  "disabled:pointer-events-none disabled:opacity-50",
563
664
  "aria-busy:cursor-wait"
@@ -567,7 +668,7 @@ var buttonVariants = cva(
567
668
  variant: {
568
669
  // Recipe-driven via packages/design/tokens/recipe.css (.btn-brand-default)
569
670
  default: "btn-brand-default",
570
- ink: "bg-[var(--neutral-12)] text-[var(--neutral-1)] ring-1 ring-inset ring-[color:var(--neutral-1)]/5 hover:bg-[var(--neutral-11)] hover:-translate-y-px active:translate-y-0 transition-[transform,background-color] duration-micro",
671
+ ink: "bg-neutral-12 text-neutral-1 ring-1 ring-inset ring-neutral-1/5 hover:bg-neutral-11 hover:-translate-y-px active:translate-y-0 transition-[transform,background-color] duration-micro",
571
672
  destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
572
673
  outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
573
674
  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
@@ -1302,8 +1403,14 @@ var badgeVariants = cva(
1302
1403
  "teal-subtle": "bg-info/10 text-info fill-current border-transparent",
1303
1404
  inverted: "bg-foreground text-background fill-current",
1304
1405
  // Special visual treatments (intentional product design, not brand hex)
1305
- trial: "bg-gradient-to-br from-trial-start to-trial-end text-primary-foreground fill-current",
1306
- turbo: "bg-gradient-to-br from-turbo-start to-turbo-end text-primary-foreground fill-current",
1406
+ trial: (
1407
+ // allow-palette: the trial gradient is fixed and vivid in both themes, so its ink is fixed white
1408
+ "bg-gradient-to-br from-trial-start to-trial-end text-white fill-current"
1409
+ ),
1410
+ turbo: (
1411
+ // allow-palette: the turbo gradient is fixed and vivid in both themes, so its ink is fixed white
1412
+ "bg-gradient-to-br from-turbo-start to-turbo-end text-white fill-current"
1413
+ ),
1307
1414
  pill: "bg-background text-foreground fill-foreground border-border hover:bg-muted/50 focus-visible:bg-muted/50",
1308
1415
  beta: "border-transparent bg-muted text-muted-foreground",
1309
1416
  new: "border-transparent bg-primary/10 text-primary",
@@ -1418,8 +1525,9 @@ var Slot = React24.forwardRef(
1418
1525
  Slot.displayName = "Slot";
1419
1526
  var Breadcrumb = ({
1420
1527
  ref,
1528
+ "aria-label": ariaLabel = "breadcrumb",
1421
1529
  ...props
1422
- }) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props });
1530
+ }) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": ariaLabel, ...props });
1423
1531
  Breadcrumb.displayName = "Breadcrumb";
1424
1532
  var BreadcrumbList = ({
1425
1533
  className,
@@ -1516,10 +1624,10 @@ function Spinner({ className }) {
1516
1624
  }
1517
1625
  );
1518
1626
  }
1519
- function getIconSizeClass(size, iconSize2) {
1520
- if (iconSize2 === "sm") return "[&>svg]:size-3.5";
1521
- if (iconSize2 === "md") return "[&>svg]:size-3.5";
1522
- if (iconSize2 === "lg") return "[&>svg]:size-4";
1627
+ function getIconSizeClass(size, iconSize3) {
1628
+ if (iconSize3 === "sm") return "[&>svg]:size-3.5";
1629
+ if (iconSize3 === "md") return "[&>svg]:size-3.5";
1630
+ if (iconSize3 === "lg") return "[&>svg]:size-4";
1523
1631
  switch (size) {
1524
1632
  case "tiny":
1525
1633
  return "[&>svg]:size-3";
@@ -1534,10 +1642,10 @@ function getIconSizeClass(size, iconSize2) {
1534
1642
  return "[&>svg]:size-4";
1535
1643
  }
1536
1644
  }
1537
- function getSpinnerSizeClass(size, iconSize2) {
1538
- if (iconSize2 === "sm") return "size-3.5";
1539
- if (iconSize2 === "md") return "size-3.5";
1540
- if (iconSize2 === "lg") return "size-4";
1645
+ function getSpinnerSizeClass(size, iconSize3) {
1646
+ if (iconSize3 === "sm") return "size-3.5";
1647
+ if (iconSize3 === "md") return "size-3.5";
1648
+ if (iconSize3 === "lg") return "size-4";
1541
1649
  switch (size) {
1542
1650
  case "tiny":
1543
1651
  return "size-3";
@@ -1562,10 +1670,10 @@ function resolveShadowClass(shadow) {
1562
1670
  const level = shadow === true ? "md" : shadow;
1563
1671
  return SHADOW_CLASSES[level];
1564
1672
  }
1565
- function ButtonContent({ loading, prefix, suffix, size, iconSize: iconSize2, children }) {
1566
- const iconSizeClass = getIconSizeClass(size, iconSize2);
1673
+ function ButtonContent({ loading, prefix, suffix, size, iconSize: iconSize3, children }) {
1674
+ const iconSizeClass = getIconSizeClass(size, iconSize3);
1567
1675
  return /* @__PURE__ */ jsxs(Fragment, { children: [
1568
- loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size, iconSize2) }),
1676
+ loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size, iconSize3) }),
1569
1677
  prefix != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("shrink-0", iconSizeClass), children: prefix }),
1570
1678
  children,
1571
1679
  suffix != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("shrink-0", iconSizeClass), children: suffix })
@@ -1576,7 +1684,7 @@ var Button = ({
1576
1684
  variant,
1577
1685
  size,
1578
1686
  shape,
1579
- iconSize: iconSize2,
1687
+ iconSize: iconSize3,
1580
1688
  asChild = false,
1581
1689
  loading = false,
1582
1690
  disabled,
@@ -1594,7 +1702,7 @@ var Button = ({
1594
1702
  Comp,
1595
1703
  {
1596
1704
  ref,
1597
- className: cn(buttonVariants({ variant, size, shape, iconSize: iconSize2 }), shadowClass, className),
1705
+ className: cn(buttonVariants({ variant, size, shape, iconSize: iconSize3 }), shadowClass, className),
1598
1706
  disabled: isDisabled,
1599
1707
  "aria-busy": loading || void 0,
1600
1708
  ...props,
@@ -1605,7 +1713,7 @@ var Button = ({
1605
1713
  prefix,
1606
1714
  suffix,
1607
1715
  size,
1608
- iconSize: iconSize2,
1716
+ iconSize: iconSize3,
1609
1717
  children
1610
1718
  }
1611
1719
  )
@@ -1618,7 +1726,7 @@ var ButtonLink = ({
1618
1726
  variant,
1619
1727
  size,
1620
1728
  shape,
1621
- iconSize: iconSize2,
1729
+ iconSize: iconSize3,
1622
1730
  prefix,
1623
1731
  suffix,
1624
1732
  shadow,
@@ -1638,7 +1746,7 @@ var ButtonLink = ({
1638
1746
  {
1639
1747
  ref,
1640
1748
  className: cn(
1641
- buttonVariants({ variant, size, shape, iconSize: iconSize2 }),
1749
+ buttonVariants({ variant, size, shape, iconSize: iconSize3 }),
1642
1750
  shadowClass,
1643
1751
  loading && "pointer-events-none opacity-50",
1644
1752
  className
@@ -1652,7 +1760,7 @@ var ButtonLink = ({
1652
1760
  prefix,
1653
1761
  suffix,
1654
1762
  size,
1655
- iconSize: iconSize2,
1763
+ iconSize: iconSize3,
1656
1764
  children
1657
1765
  }
1658
1766
  )
@@ -1660,68 +1768,119 @@ var ButtonLink = ({
1660
1768
  );
1661
1769
  };
1662
1770
  ButtonLink.displayName = "ButtonLink";
1663
- var Card = ({
1771
+ var cardVariants = cva(
1772
+ "rounded-[var(--radius-card,var(--radius-lg))] text-card-foreground transition-[box-shadow,background-color] duration-micro",
1773
+ {
1774
+ variants: {
1775
+ variant: {
1776
+ default: "bg-card shadow-[var(--elevation-card)] ring-1 ring-[var(--edge-soft)]",
1777
+ elevated: "bg-card shadow-ambient-md ring-1 ring-[var(--edge-soft)]",
1778
+ outline: "bg-transparent ring-1 ring-border",
1779
+ ghost: "bg-transparent"
1780
+ },
1781
+ padding: {
1782
+ none: "",
1783
+ sm: "p-4",
1784
+ md: "p-6",
1785
+ lg: "p-8"
1786
+ },
1787
+ interactive: {
1788
+ true: "cursor-pointer hover:shadow-ambient-md",
1789
+ false: ""
1790
+ }
1791
+ },
1792
+ defaultVariants: { variant: "default", padding: "none", interactive: false }
1793
+ }
1794
+ );
1795
+ var CardPaddedContext = React24.createContext(false);
1796
+ var CardRoot = ({
1664
1797
  className,
1798
+ variant,
1799
+ padding = "none",
1800
+ interactive,
1665
1801
  ref,
1666
1802
  ...props
1667
- }) => /* @__PURE__ */ jsx(
1803
+ }) => /* @__PURE__ */ jsx(CardPaddedContext.Provider, { value: padding !== "none", children: /* @__PURE__ */ jsx(
1668
1804
  "div",
1669
1805
  {
1670
1806
  ref,
1671
- className: cn(
1672
- "rounded-[var(--radius-lg)] border border-border bg-card text-card-foreground shadow-sm",
1673
- className
1674
- ),
1807
+ className: cn(cardVariants({ variant, padding, interactive }), className),
1675
1808
  ...props
1676
1809
  }
1677
- );
1678
- Card.displayName = "Card";
1679
- var CardHeader = ({
1680
- className,
1681
- ref,
1682
- ...props
1683
- }) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props });
1810
+ ) });
1811
+ CardRoot.displayName = "Card";
1812
+ var CardHeader = ({ className, ref, ...props }) => {
1813
+ const padded = React24.use(CardPaddedContext);
1814
+ return /* @__PURE__ */ jsx(
1815
+ "div",
1816
+ {
1817
+ ref,
1818
+ className: cn("flex flex-col gap-1.5", !padded && "p-6", className),
1819
+ ...props
1820
+ }
1821
+ );
1822
+ };
1684
1823
  CardHeader.displayName = "CardHeader";
1685
- var CardTitle = ({
1686
- className,
1687
- children,
1688
- ref,
1689
- ...props
1690
- }) => /* @__PURE__ */ jsx(
1691
- "h3",
1824
+ var CardTitle = ({ className, as: Tag = "h3", ref, ...props }) => /* @__PURE__ */ jsx(
1825
+ Tag,
1692
1826
  {
1693
1827
  ref,
1694
- className: cn("text-2xl font-semibold leading-none tracking-tight", className),
1695
- ...props,
1696
- children
1828
+ className: cn("text-lg font-semibold leading-tight tracking-tight text-foreground", className),
1829
+ ...props
1697
1830
  }
1698
1831
  );
1699
1832
  CardTitle.displayName = "CardTitle";
1700
- var CardDescription = ({
1701
- className,
1702
- as: Tag = "p",
1833
+ var CardDescription = ({ className, as: Tag = "p", ref, ...props }) => React24.createElement(Tag, {
1703
1834
  ref,
1835
+ className: cn("text-sm leading-relaxed text-muted-foreground", className),
1704
1836
  ...props
1705
- }) => {
1706
- return React24.createElement(Tag, {
1707
- ref,
1708
- className: cn("text-sm text-muted-foreground", className),
1709
- ...props
1710
- });
1711
- };
1837
+ });
1712
1838
  CardDescription.displayName = "CardDescription";
1713
- var CardContent = ({
1714
- className,
1715
- ref,
1716
- ...props
1717
- }) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props });
1839
+ var CardContent = ({ className, ref, ...props }) => {
1840
+ const padded = React24.use(CardPaddedContext);
1841
+ return /* @__PURE__ */ jsx("div", { ref, className: cn(padded ? "mt-4 first:mt-0" : "p-6 pt-0", className), ...props });
1842
+ };
1718
1843
  CardContent.displayName = "CardContent";
1719
- var CardFooter = ({
1720
- className,
1721
- ref,
1722
- ...props
1723
- }) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props });
1844
+ var CardFooter = ({ className, ref, ...props }) => {
1845
+ const padded = React24.use(CardPaddedContext);
1846
+ return /* @__PURE__ */ jsx(
1847
+ "div",
1848
+ {
1849
+ ref,
1850
+ className: cn(
1851
+ "flex items-center",
1852
+ padded ? "mt-6 border-t border-border/50 pt-4 first:mt-0" : "p-6 pt-0",
1853
+ className
1854
+ ),
1855
+ ...props
1856
+ }
1857
+ );
1858
+ };
1724
1859
  CardFooter.displayName = "CardFooter";
1860
+ var iconSize = { sm: "size-8", md: "size-10", lg: "size-12" };
1861
+ var CardIcon = ({ className, size = "md", ref, ...props }) => /* @__PURE__ */ jsx(
1862
+ "div",
1863
+ {
1864
+ ref,
1865
+ className: cn(
1866
+ "flex shrink-0 items-center justify-center rounded-[var(--radius-lg)] bg-muted/50",
1867
+ iconSize[size],
1868
+ className
1869
+ ),
1870
+ ...props
1871
+ }
1872
+ );
1873
+ CardIcon.displayName = "CardIcon";
1874
+ var Card = Object.assign(CardRoot, {
1875
+ Header: CardHeader,
1876
+ Title: CardTitle,
1877
+ Description: CardDescription,
1878
+ Content: CardContent,
1879
+ Body: CardContent,
1880
+ Footer: CardFooter,
1881
+ Icon: CardIcon
1882
+ });
1883
+ var CardBody = CardContent;
1725
1884
  var DEFAULT_STROKE_WIDTH = 1.6;
1726
1885
  function CheckGlyph({
1727
1886
  size = 16,
@@ -1782,35 +1941,36 @@ function IndeterminateGlyph({
1782
1941
  }
1783
1942
  );
1784
1943
  }
1785
- var getInputClasses = (checked, disabled, indeterminate) => {
1786
- let className = "relative border w-4 h-4 duration-micro rounded inline-flex items-center justify-center";
1787
- if (disabled) {
1788
- if (!checked || indeterminate) {
1789
- className += " bg-geist-gray-100 border-geist-gray-500";
1790
- className += indeterminate ? " stroke-geist-gray-500" : " fill-geist-gray-100 stroke-geist-gray-100";
1791
- } else {
1792
- className += " bg-geist-gray-600 border-geist-gray-600 fill-geist-gray-600 stroke-geist-gray-100";
1793
- }
1794
- } else {
1795
- if (!checked || indeterminate) {
1796
- className += " bg-geist-background-100 border-geist-gray-700 group-hover:bg-geist-gray-200";
1797
- className += indeterminate ? " stroke-geist-gray-700" : " fill-geist-background-100 stroke-geist-background-100 group-hover:stroke-geist-gray-200 group-hover:fill-geist-gray-200";
1798
- } else {
1799
- className += " bg-geist-gray-1000 border-geist-gray-1000 fill-geist-gray-1000 stroke-geist-gray-100";
1800
- }
1801
- }
1802
- return className;
1944
+
1945
+ // src/primitives/form-control.ts
1946
+ var formControlFocusClassNames = {
1947
+ input: "outline-none focus:border-ring focus:ring-[length:var(--input-focus-ring-width)] focus:ring-ring/30",
1948
+ textarea: "outline-none focus:border-ring focus:ring-[length:var(--textarea-focus-ring-width)] focus:ring-ring/30",
1949
+ select: "outline-none focus:border-ring focus:ring-[length:var(--select-focus-ring-width)] focus:ring-ring/30"
1803
1950
  };
1951
+ var formControlInvalidClassNames = {
1952
+ input: "aria-invalid:border-destructive/60 aria-invalid:focus:border-destructive aria-invalid:focus:ring-destructive/20",
1953
+ textarea: "aria-invalid:border-destructive/60 aria-invalid:focus:border-destructive aria-invalid:focus:ring-destructive/20",
1954
+ select: "aria-invalid:border-destructive/60 aria-invalid:focus:border-destructive aria-invalid:focus:ring-destructive/20"
1955
+ };
1956
+ var controlFocusProxyClassName = "peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[hsl(var(--ring))]";
1957
+ var boxClassName = (on) => cn(
1958
+ "relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border",
1959
+ "stroke-current fill-none transition-[background-color,border-color,color] duration-micro",
1960
+ on ? "border-primary bg-primary text-primary-foreground" : "border-[var(--control-border)] bg-background text-transparent group-hover:border-muted-foreground",
1961
+ "peer-disabled:opacity-50",
1962
+ controlFocusProxyClassName
1963
+ );
1804
1964
  var Checkbox = ({
1805
1965
  checked: controlledChecked,
1806
1966
  defaultChecked = false,
1807
- onChange,
1967
+ onChange: legacyOnChange,
1968
+ onCheckedChange: onChange = legacyOnChange,
1808
1969
  disabled = false,
1809
1970
  indeterminate = false,
1810
1971
  children,
1811
1972
  className,
1812
- id,
1813
- name
1973
+ ...inputProps
1814
1974
  }) => {
1815
1975
  const [internalChecked, setInternalChecked] = React24__default.useState(defaultChecked);
1816
1976
  const isControlled = controlledChecked !== void 0;
@@ -1819,34 +1979,28 @@ var Checkbox = ({
1819
1979
  "label",
1820
1980
  {
1821
1981
  className: cn(
1822
- "flex items-center text-[13px] font-sans group",
1823
- disabled ? "text-geist-gray-500 cursor-not-allowed" : "text-geist-gray-1000 cursor-pointer",
1982
+ "group flex items-center text-[13px] font-sans",
1983
+ disabled ? "cursor-not-allowed text-muted-foreground" : "cursor-pointer text-foreground",
1824
1984
  className
1825
1985
  ),
1826
1986
  children: [
1827
1987
  /* @__PURE__ */ jsx(
1828
1988
  "input",
1829
1989
  {
1830
- id,
1831
- name,
1990
+ ...inputProps,
1832
1991
  disabled,
1833
1992
  type: "checkbox",
1834
1993
  checked,
1994
+ "aria-checked": indeterminate ? "mixed" : void 0,
1835
1995
  onChange: (e) => {
1836
- if (!indeterminate) {
1837
- if (!isControlled) {
1838
- setInternalChecked(e.target.checked);
1839
- }
1840
- if (onChange) {
1841
- onChange(e.target.checked);
1842
- }
1843
- }
1996
+ if (indeterminate) return;
1997
+ if (!isControlled) setInternalChecked(e.target.checked);
1998
+ onChange?.(e.target.checked);
1844
1999
  },
1845
- "aria-label": typeof children === "string" ? children : "checkbox",
1846
- className: "sr-only"
2000
+ className: "peer sr-only"
1847
2001
  }
1848
2002
  ),
1849
- /* @__PURE__ */ jsx("span", { className: getInputClasses(checked, disabled, indeterminate), children: indeterminate ? /* @__PURE__ */ jsx(IndeterminateGlyph, {}) : /* @__PURE__ */ jsx(CheckGlyph, {}) }),
2003
+ /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: boxClassName(checked || indeterminate), children: indeterminate ? /* @__PURE__ */ jsx(IndeterminateGlyph, {}) : /* @__PURE__ */ jsx(CheckGlyph, {}) }),
1850
2004
  children && /* @__PURE__ */ jsx("span", { className: "ml-2", children })
1851
2005
  ]
1852
2006
  }
@@ -2072,9 +2226,9 @@ var overlayPrimitiveClassNames = {
2072
2226
  menuItemBaseClassName,
2073
2227
  "min-h-8 gap-2",
2074
2228
  menuHighlightedClassName,
2075
- "data-[variant=destructive]:text-destructive",
2229
+ "data-[variant=destructive]:text-destructive-strong",
2076
2230
  "data-[variant=destructive]:data-[highlighted]:bg-destructive/10",
2077
- "data-[variant=destructive]:data-[highlighted]:text-destructive"
2231
+ "data-[variant=destructive]:data-[highlighted]:text-destructive-strong"
2078
2232
  ].join(" "),
2079
2233
  menuItem: [menuItemBaseClassName, menuHighlightedClassName].join(" "),
2080
2234
  menuSubTrigger: [
@@ -2529,7 +2683,8 @@ function CodeBlock(props) {
2529
2683
  onLineReference,
2530
2684
  languageIcons,
2531
2685
  showLanguageIcon = true,
2532
- "aria-label": ariaLabel
2686
+ "aria-label": ariaLabel,
2687
+ copyLabel = "Copy code"
2533
2688
  } = props;
2534
2689
  const resolvedHide = props.hideLineNumbers;
2535
2690
  const resolvedShow = props.showLineNumbers;
@@ -2751,7 +2906,9 @@ function CodeBlock(props) {
2751
2906
  /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "max-h-60 overflow-y-auto", children: controlledSwitcher.options.map((opt) => /* @__PURE__ */ jsxs(
2752
2907
  DropdownMenuItem,
2753
2908
  {
2754
- onClick: () => controlledSwitcher.onChange(opt.value),
2909
+ onClick: () => (controlledSwitcher.onValueChange ?? controlledSwitcher.onChange)?.(
2910
+ opt.value
2911
+ ),
2755
2912
  className: cn(
2756
2913
  "text-xs",
2757
2914
  opt.value === controlledSwitcher.value && "bg-accent font-medium"
@@ -2823,7 +2980,7 @@ function CodeBlock(props) {
2823
2980
  type: "button",
2824
2981
  onClick: () => copyToClipboard(code),
2825
2982
  className: "inline-flex h-8 w-8 items-center justify-center rounded-[var(--radius-md)] hover:bg-accent hover:text-accent-foreground",
2826
- "aria-label": "Copy code",
2983
+ "aria-label": copyLabel,
2827
2984
  children: copied ? /* @__PURE__ */ jsx(
2828
2985
  motion.div,
2829
2986
  {
@@ -2961,11 +3118,7 @@ var commandFrameClassName = cn(
2961
3118
  "[&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-2.5",
2962
3119
  "[&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-4"
2963
3120
  );
2964
- var commandInputWrapperClassName = cn(
2965
- "flex items-center border-b border-border px-3",
2966
- "transition-[border-color] duration-micro ease-out",
2967
- "has-[:focus-visible]:border-ring/60"
2968
- );
3121
+ var commandInputWrapperClassName = cn("flex items-center border-b border-border px-3");
2969
3122
  var commandInputClassName = cn(
2970
3123
  "flex h-11 w-full appearance-none border-0 bg-transparent py-3 text-sm text-foreground shadow-none outline-none",
2971
3124
  "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
@@ -3396,6 +3549,7 @@ function PopoverContent({
3396
3549
  return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
3397
3550
  Popover$1.Positioner,
3398
3551
  {
3552
+ style: { zIndex: overlayZIndex.popover },
3399
3553
  "data-slot": "popover-positioner",
3400
3554
  sideOffset,
3401
3555
  align,
@@ -3410,7 +3564,7 @@ function PopoverContent({
3410
3564
  overlayPrimitiveClassNames.popoverSurface,
3411
3565
  className
3412
3566
  ),
3413
- style: { zIndex: overlayZIndex.popover, ...style },
3567
+ style,
3414
3568
  ...props,
3415
3569
  children: [
3416
3570
  children,
@@ -3602,7 +3756,8 @@ function toCssLength(value) {
3602
3756
  function ComboboxRoot({
3603
3757
  options,
3604
3758
  value: controlledValue,
3605
- onChange,
3759
+ onChange: legacyOnChange,
3760
+ onValueChange: onChange = legacyOnChange,
3606
3761
  defaultValue = null,
3607
3762
  disabled = false,
3608
3763
  errored,
@@ -3800,6 +3955,7 @@ var ContextMenuContent = ({
3800
3955
  }) => /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(
3801
3956
  ContextMenu$1.Positioner,
3802
3957
  {
3958
+ style: { zIndex: overlayZIndex.popover },
3803
3959
  alignOffset,
3804
3960
  align,
3805
3961
  sideOffset,
@@ -4009,8 +4165,18 @@ var ContextMenu = Object.assign(ContextMenuRoot, {
4009
4165
  SubTrigger: ContextMenuSubTrigger,
4010
4166
  SubContent: ContextMenuSubContent
4011
4167
  });
4012
- var DEFAULT_TOOLTIP_DELAY_MS = 150;
4013
- var SKIP_DELAY_WINDOW_MS = 400;
4168
+
4169
+ // src/tokens/components/interaction.ts
4170
+ var interaction = {
4171
+ /**
4172
+ * Tooltips. The first one waits so a sweeping pointer does not strobe;
4173
+ * once one is open, its neighbours open instantly if the pointer arrives
4174
+ * within the skip window. Radix Tooltip defaults: delayDuration 700,
4175
+ * skipDelayDuration 300. Vercel/Kowalski: "delay the first tooltip only".
4176
+ */
4177
+ tooltip: { delayMs: 700, skipWindowMs: 300 }};
4178
+ var DEFAULT_TOOLTIP_DELAY_MS = interaction.tooltip.delayMs;
4179
+ var SKIP_DELAY_WINDOW_MS = interaction.tooltip.skipWindowMs;
4014
4180
  var lastTooltipOpenAt = 0;
4015
4181
  var skipDelayListeners = /* @__PURE__ */ new Set();
4016
4182
  function markTooltipOpened() {
@@ -4432,7 +4598,7 @@ var ContextCardTrigger = ({
4432
4598
  align,
4433
4599
  sideOffset,
4434
4600
  alignOffset,
4435
- className: "z-50",
4601
+ style: { zIndex: overlayZIndex.popover },
4436
4602
  children: /* @__PURE__ */ jsx(
4437
4603
  Popover$1.Popup,
4438
4604
  {
@@ -4454,7 +4620,7 @@ var ContextCardTrigger = ({
4454
4620
  "rounded-[var(--context-card-radius)] border border-border bg-popover",
4455
4621
  "px-[var(--context-card-padding-x)] py-[var(--context-card-padding-y)]",
4456
4622
  "text-[length:var(--context-card-body-size)] text-popover-foreground shadow-md outline-none",
4457
- "transition-[opacity,transform,display] duration-[var(--context-card-duration)] ease-[var(--context-card-easing)]",
4623
+ "transition-[opacity,transform] duration-[var(--context-card-duration)] ease-[var(--context-card-easing)]",
4458
4624
  "data-starting-style:opacity-0 data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-ending-style:scale-[0.98]",
4459
4625
  "motion-reduce:transition-none motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100",
4460
4626
  "",
@@ -4701,6 +4867,70 @@ var emptyStateTokens = {
4701
4867
  descriptionLineHeight: primitiveSpacing[6]
4702
4868
  }
4703
4869
  };
4870
+ var SIZE_MAP = {
4871
+ sm: { box: "h-8 w-8", halo: "h-16 w-16 -inset-4", glyph: "h-3.5 w-3.5" },
4872
+ md: { box: "h-10 w-10", halo: "h-20 w-20 -inset-5", glyph: "h-4 w-4" },
4873
+ lg: { box: "h-14 w-14", halo: "h-28 w-28 -inset-7", glyph: "h-5 w-5" },
4874
+ xl: { box: "h-20 w-20", halo: "h-40 w-40 -inset-10", glyph: "h-7 w-7" }
4875
+ };
4876
+ function BrandMark({
4877
+ children,
4878
+ variant = "gradient",
4879
+ size = "md",
4880
+ className,
4881
+ halo = false,
4882
+ ariaHidden = true
4883
+ }) {
4884
+ const sizes = SIZE_MAP[size];
4885
+ return /* @__PURE__ */ jsxs(
4886
+ "span",
4887
+ {
4888
+ "aria-hidden": ariaHidden,
4889
+ className: cn("relative inline-flex shrink-0 items-center justify-center", className),
4890
+ children: [
4891
+ halo && /* @__PURE__ */ jsx(
4892
+ "span",
4893
+ {
4894
+ "aria-hidden": "true",
4895
+ className: cn(
4896
+ "pointer-events-none absolute rounded-full bg-brand-mark opacity-30 blur-2xl",
4897
+ sizes.halo
4898
+ )
4899
+ }
4900
+ ),
4901
+ /* @__PURE__ */ jsx(
4902
+ "span",
4903
+ {
4904
+ className: cn(
4905
+ "relative inline-flex items-center justify-center rounded-[var(--radius-2xl)]",
4906
+ sizes.box,
4907
+ variant === "gradient" && "bg-brand-mark text-brand-mark-foreground shadow-sm",
4908
+ variant === "soft" && "bg-brand-mark/10 text-brand-mark dark:bg-brand-mark/20",
4909
+ variant === "outline" && "border border-border bg-background text-foreground"
4910
+ ),
4911
+ children: children ?? /* @__PURE__ */ jsx(DefaultGlyph, { className: sizes.glyph })
4912
+ }
4913
+ )
4914
+ ]
4915
+ }
4916
+ );
4917
+ }
4918
+ function DefaultGlyph({ className }) {
4919
+ return /* @__PURE__ */ jsxs(
4920
+ "svg",
4921
+ {
4922
+ viewBox: "0 0 16 16",
4923
+ fill: "none",
4924
+ "aria-hidden": "true",
4925
+ className,
4926
+ xmlns: "http://www.w3.org/2000/svg",
4927
+ children: [
4928
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "3", fill: "currentColor" }),
4929
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeOpacity: "0.35" })
4930
+ ]
4931
+ }
4932
+ );
4933
+ }
4704
4934
  var variantClassName = {
4705
4935
  "blank-slate": "border border-dashed border-border bg-background",
4706
4936
  informational: "border border-border bg-card",
@@ -4719,7 +4949,7 @@ var iconToneClassName = {
4719
4949
  "no-results": "text-muted-foreground",
4720
4950
  cleared: "text-muted-foreground",
4721
4951
  permission: "text-muted-foreground",
4722
- error: "text-destructive"
4952
+ error: "text-destructive-strong"
4723
4953
  };
4724
4954
  var emptyStateCssVars = (size) => ({
4725
4955
  "--empty-state-min-height": `${emptyStateTokens.root.minHeight[size]}px`,
@@ -4819,16 +5049,47 @@ var EmptyStateRoot = ({
4819
5049
  );
4820
5050
  };
4821
5051
  EmptyStateRoot.displayName = "EmptyState.Root";
4822
- var EmptyState = {
5052
+ var toneVariant = {
5053
+ default: "blank-slate",
5054
+ branded: "informational",
5055
+ subtle: "guide"
5056
+ };
5057
+ function EmptyStateSimple({
5058
+ title,
5059
+ description,
5060
+ mascot,
5061
+ icon,
5062
+ action,
5063
+ secondaryAction,
5064
+ tone = "default",
5065
+ size = "md",
5066
+ className
5067
+ }) {
5068
+ const visual = mascot ?? icon ?? (tone === "branded" ? /* @__PURE__ */ jsx(BrandMark, { size: size === "lg" ? "lg" : "md" }) : null);
5069
+ return /* @__PURE__ */ jsx(
5070
+ EmptyStateRoot,
5071
+ {
5072
+ action,
5073
+ className: cn(tone === "subtle" && "border-0 bg-transparent", className),
5074
+ description,
5075
+ icon: visual ? /* @__PURE__ */ jsx(EmptyStateIcon, { icon: visual }) : void 0,
5076
+ link: secondaryAction,
5077
+ size,
5078
+ title,
5079
+ variant: toneVariant[tone]
5080
+ }
5081
+ );
5082
+ }
5083
+ var EmptyState = Object.assign(EmptyStateSimple, {
4823
5084
  Root: EmptyStateRoot,
4824
5085
  Icon: EmptyStateIcon
4825
- };
5086
+ });
4826
5087
  var textSize = {
4827
5088
  small: "text-xs",
4828
5089
  medium: "text-sm",
4829
5090
  large: "text-base"
4830
5091
  };
4831
- var iconSize = {
5092
+ var iconSize2 = {
4832
5093
  small: 12,
4833
5094
  medium: 14,
4834
5095
  large: 16
@@ -4864,9 +5125,13 @@ var ErrorMessage = ({
4864
5125
  {
4865
5126
  ref,
4866
5127
  role: "alert",
4867
- className: cn("inline-flex items-center gap-1.5 text-destructive", textSize[sz], className),
5128
+ className: cn(
5129
+ "inline-flex items-center gap-1.5 text-destructive-strong",
5130
+ textSize[sz],
5131
+ className
5132
+ ),
4868
5133
  children: [
4869
- /* @__PURE__ */ jsx(Warning, { size: iconSize[sz], "aria-hidden": "true", className: "shrink-0" }),
5134
+ /* @__PURE__ */ jsx(Warning, { size: iconSize2[sz], "aria-hidden": "true", className: "shrink-0" }),
4870
5135
  /* @__PURE__ */ jsxs("span", { children: [
4871
5136
  label && /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
4872
5137
  label,
@@ -4938,12 +5203,12 @@ var ErrorSurface = ({
4938
5203
  "span",
4939
5204
  {
4940
5205
  "aria-hidden": "true",
4941
- className: "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-destructive/20 bg-background text-destructive",
5206
+ className: "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-destructive/20 bg-background text-destructive-strong",
4942
5207
  children: /* @__PURE__ */ jsx(Warning, { size: surfaceIconSize[size] })
4943
5208
  }
4944
5209
  ),
4945
5210
  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
4946
- label && showLabel ? /* @__PURE__ */ jsx("p", { className: "mb-1 text-xs font-medium uppercase tracking-normal text-destructive", children: label }) : null,
5211
+ label && showLabel ? /* @__PURE__ */ jsx("p", { className: "mb-1 text-xs font-medium uppercase tracking-normal text-destructive-strong", children: label }) : null,
4947
5212
  resolvedTitle ? /* @__PURE__ */ jsx("p", { className: "font-semibold leading-6 text-foreground", children: resolvedTitle }) : null,
4948
5213
  message ? /* @__PURE__ */ jsx("p", { className: cn("leading-5 text-muted-foreground", resolvedTitle && "mt-1"), children: message }) : null,
4949
5214
  resolvedErrorId ? /* @__PURE__ */ jsxs("details", { className: "mt-3 text-xs text-muted-foreground", children: [
@@ -4992,10 +5257,10 @@ var Field = ({
4992
5257
  ...props
4993
5258
  }) => {
4994
5259
  return /* @__PURE__ */ jsxs("div", { ref, className: cn("grid gap-2", className), ...props, children: [
4995
- /* @__PURE__ */ jsx(Label, { htmlFor, className: cn(error && "text-destructive"), children: label }),
5260
+ /* @__PURE__ */ jsx(Label, { htmlFor, className: cn(error && "text-destructive-strong"), children: label }),
4996
5261
  children,
4997
5262
  description && !error && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }),
4998
- error && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-destructive", children: error })
5263
+ error && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-destructive-strong", children: error })
4999
5264
  ] });
5000
5265
  };
5001
5266
  Field.displayName = "Field";
@@ -5044,7 +5309,7 @@ var FormLabel = ({
5044
5309
  Label,
5045
5310
  {
5046
5311
  ref,
5047
- className: cn(error && "text-destructive", className),
5312
+ className: cn(error && "text-destructive-strong", className),
5048
5313
  htmlFor: formItemId,
5049
5314
  ...props
5050
5315
  }
@@ -5101,7 +5366,7 @@ var FormMessage = ({
5101
5366
  {
5102
5367
  ref,
5103
5368
  id: formMessageId,
5104
- className: cn("text-sm font-medium text-destructive", className),
5369
+ className: cn("text-sm font-medium text-destructive-strong", className),
5105
5370
  ...props,
5106
5371
  children: body
5107
5372
  }
@@ -5330,20 +5595,29 @@ var HoverCardContent = ({
5330
5595
  style,
5331
5596
  ref,
5332
5597
  ...props
5333
- }) => /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { side, align, sideOffset, children: /* @__PURE__ */ jsx(
5334
- Popover$1.Popup,
5598
+ }) => /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
5599
+ Popover$1.Positioner,
5335
5600
  {
5336
- ref,
5337
- className: cn(
5338
- overlayClassNames.popoverSurface,
5339
- overlayPrimitiveClassNames.popoverSurface,
5340
- "w-64",
5341
- className
5342
- ),
5343
- style: { zIndex: overlayZIndex.popover, ...style },
5344
- ...props
5601
+ style: { zIndex: overlayZIndex.popover },
5602
+ side,
5603
+ align,
5604
+ sideOffset,
5605
+ children: /* @__PURE__ */ jsx(
5606
+ Popover$1.Popup,
5607
+ {
5608
+ ref,
5609
+ className: cn(
5610
+ overlayClassNames.popoverSurface,
5611
+ overlayPrimitiveClassNames.popoverSurface,
5612
+ "w-64",
5613
+ className
5614
+ ),
5615
+ style: { zIndex: overlayZIndex.popover, ...style },
5616
+ ...props
5617
+ }
5618
+ )
5345
5619
  }
5346
- ) }) });
5620
+ ) });
5347
5621
  HoverCardContent.displayName = "HoverCardContent";
5348
5622
  var HoverCardTrigger = ({
5349
5623
  asChild,
@@ -5447,18 +5721,6 @@ var inputTokens = {
5447
5721
  },
5448
5722
  focusRingWidth: 3,
5449
5723
  fieldGap: primitiveSpacing[2] - primitiveSpacing[1] / 2};
5450
-
5451
- // src/primitives/form-control.ts
5452
- var formControlFocusClassNames = {
5453
- input: "outline-none focus:border-ring focus:ring-[length:var(--input-focus-ring-width)] focus:ring-ring/30",
5454
- textarea: "outline-none focus:border-ring focus:ring-[length:var(--textarea-focus-ring-width)] focus:ring-ring/30",
5455
- select: "outline-none focus:border-ring focus:ring-[length:var(--select-focus-ring-width)] focus:ring-ring/30"
5456
- };
5457
- var formControlInvalidClassNames = {
5458
- input: "aria-invalid:border-destructive/60 aria-invalid:focus:border-destructive aria-invalid:focus:ring-destructive/20",
5459
- textarea: "aria-invalid:border-destructive/60 aria-invalid:focus:border-destructive aria-invalid:focus:ring-destructive/20",
5460
- select: "aria-invalid:border-destructive/60 aria-invalid:focus:border-destructive aria-invalid:focus:ring-destructive/20"
5461
- };
5462
5724
  var inputVariants = cva(
5463
5725
  [
5464
5726
  "flex h-[var(--input-height)] w-full rounded-[var(--input-radius)]",
@@ -5505,7 +5767,7 @@ var inputVariants = cva(
5505
5767
  * the ring surrounds the whole group rather than a box inside it.
5506
5768
  */
5507
5769
  tone: {
5508
- bordered: `border border-input bg-background shadow-xs ${formControlFocusClassNames.input}`,
5770
+ bordered: `border border-input bg-background ${formControlFocusClassNames.input}`,
5509
5771
  bare: "border-0 bg-transparent shadow-none"
5510
5772
  }
5511
5773
  },
@@ -5544,7 +5806,7 @@ var fieldMessageVariants = cva("text-xs", {
5544
5806
  variants: {
5545
5807
  tone: {
5546
5808
  description: "text-muted-foreground",
5547
- error: "font-medium text-destructive"
5809
+ error: "font-medium text-destructive-strong"
5548
5810
  }
5549
5811
  }
5550
5812
  });
@@ -5611,6 +5873,7 @@ var Input = ({
5611
5873
  revealable,
5612
5874
  revealLabel = "Show password",
5613
5875
  hideLabel = "Hide password",
5876
+ clearLabel = "Clear input",
5614
5877
  clearOnEscape,
5615
5878
  wrapperClassName,
5616
5879
  fieldClassName,
@@ -5761,7 +6024,7 @@ var Input = ({
5761
6024
  "button",
5762
6025
  {
5763
6026
  type: "button",
5764
- "aria-label": "Clear input",
6027
+ "aria-label": clearLabel,
5765
6028
  disabled,
5766
6029
  className: inputControlButtonVariants(),
5767
6030
  style: getInputStyle(size, void 0),
@@ -5833,8 +6096,11 @@ var InputOTP = ({
5833
6096
  children,
5834
6097
  render,
5835
6098
  ref,
5836
- ...props
6099
+ onValueChange,
6100
+ onChange: legacyOnChange,
6101
+ ...rest
5837
6102
  }) => {
6103
+ const props = { ...rest, onChange: onValueChange ?? legacyOnChange };
5838
6104
  const otpProps = render ? { render, ...props } : { children, ...props };
5839
6105
  return /* @__PURE__ */ jsx(
5840
6106
  OTPInput,
@@ -6136,7 +6402,7 @@ var MenuItem = function MenuItem2({
6136
6402
  /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children }),
6137
6403
  suffix && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex shrink-0 [&_svg]:size-4", children: suffix })
6138
6404
  ] });
6139
- const errorClass = type === "error" ? "text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive" : "";
6405
+ const errorClass = type === "error" ? "text-destructive-strong data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive-strong" : "";
6140
6406
  const passthrough = {};
6141
6407
  if (onClick !== void 0) passthrough.onClick = onClick;
6142
6408
  if (disabled !== void 0) passthrough.disabled = disabled;
@@ -6947,6 +7213,7 @@ var MultiSelectContent = ({
6947
7213
  alignOffset = 0,
6948
7214
  width = "md",
6949
7215
  onKeyDown,
7216
+ "aria-label": ariaLabel = "Multi select options",
6950
7217
  ref,
6951
7218
  ...props
6952
7219
  }) => {
@@ -6962,7 +7229,7 @@ var MultiSelectContent = ({
6962
7229
  {
6963
7230
  align,
6964
7231
  alignOffset,
6965
- className: "z-50",
7232
+ style: { zIndex: overlayZIndex.popover },
6966
7233
  side,
6967
7234
  sideOffset,
6968
7235
  children: /* @__PURE__ */ jsx(
@@ -6970,11 +7237,11 @@ var MultiSelectContent = ({
6970
7237
  {
6971
7238
  ref: composeRefs2(contentRef, ref),
6972
7239
  role: "dialog",
6973
- "aria-label": "Multi select options",
7240
+ "aria-label": ariaLabel,
6974
7241
  className: cn(
6975
7242
  "z-50 max-h-[var(--multi-select-content-max-height)] w-[var(--multi-select-width)] overflow-y-auto",
6976
7243
  "rounded-[var(--multi-select-content-radius)] border border-border bg-popover p-[var(--multi-select-content-padding)] text-popover-foreground shadow-md outline-none",
6977
- "transition-[opacity,transform,display] duration-[var(--multi-select-popover-duration)] ease-[var(--multi-select-easing)]",
7244
+ "transition-[opacity,transform] duration-[var(--multi-select-popover-duration)] ease-[var(--multi-select-easing)]",
6978
7245
  "data-starting-style:translate-y-1 data-starting-style:opacity-0 data-ending-style:translate-y-1 data-ending-style:opacity-0",
6979
7246
  "motion-reduce:transition-none motion-reduce:data-starting-style:translate-y-0 motion-reduce:data-ending-style:translate-y-0",
6980
7247
  className
@@ -8401,16 +8668,16 @@ var Progress = function Progress2({
8401
8668
  };
8402
8669
  var variantMap = {
8403
8670
  success: {
8404
- container: "border-success/40 bg-success/10 text-success fill-success",
8405
- cta: "text-success decoration-success/50 hover:text-success hover:decoration-success"
8671
+ container: "border-success/40 bg-success/10 text-success-strong fill-success-strong",
8672
+ cta: "text-success-strong decoration-success/50 hover:text-success-strong hover:decoration-success"
8406
8673
  },
8407
8674
  warning: {
8408
- container: "border-warning/40 bg-warning/10 text-warning fill-warning",
8409
- cta: "text-warning decoration-warning/50 hover:text-warning hover:decoration-warning"
8675
+ container: "border-warning/40 bg-warning/10 text-warning-strong fill-warning-strong",
8676
+ cta: "text-warning-strong decoration-warning/50 hover:text-warning-strong hover:decoration-warning"
8410
8677
  },
8411
8678
  error: {
8412
- container: "border-destructive/40 bg-destructive/10 text-destructive fill-destructive",
8413
- cta: "text-destructive decoration-destructive/50 hover:text-destructive hover:decoration-destructive"
8679
+ container: "border-destructive/40 bg-destructive/10 text-destructive-strong fill-destructive-strong",
8680
+ cta: "text-destructive-strong decoration-destructive/50 hover:text-destructive-strong hover:decoration-destructive"
8414
8681
  },
8415
8682
  info: {
8416
8683
  container: "border-border bg-muted text-foreground fill-foreground",
@@ -8472,13 +8739,15 @@ var itemStyle = {
8472
8739
  "--radio-motion-easing": radioTokens.motion.easing
8473
8740
  };
8474
8741
  var radioControlClassName = cn(
8475
- "relative inline-flex shrink-0 items-center justify-center rounded-[var(--radius-full)] border-[length:var(--radio-border-width)] border-border bg-background text-foreground",
8742
+ "relative inline-flex shrink-0 items-center justify-center rounded-[var(--radius-full)] border-[length:var(--radio-border-width)] border-[var(--control-border)] bg-background text-foreground",
8476
8743
  "size-[var(--radio-control-size)]",
8477
8744
  "transition-[background-color,border-color,box-shadow] duration-[var(--radio-motion-duration)] ease-[var(--radio-motion-easing)]",
8478
8745
  "after:size-[var(--radio-dot-size)] after:scale-95 after:rounded-[var(--radius-full)] after:bg-current after:opacity-0 after:transition-[opacity,transform] after:duration-[var(--radio-motion-duration)] after:ease-[var(--radio-motion-easing)] after:content-['']",
8479
- "peer-checked:border-[var(--neutral-12)] peer-checked:after:scale-100 peer-checked:after:opacity-100",
8480
- "peer-focus-visible:outline-none",
8481
- "peer-disabled:border-[var(--neutral-5)] peer-disabled:bg-muted peer-disabled:text-[var(--neutral-8)]"
8746
+ // "On" is the action colour, as for checkbox / toggle / slider / choicebox —
8747
+ // it was --neutral-12, which only matched the House ink by coincidence.
8748
+ "peer-checked:border-primary peer-checked:text-primary peer-checked:after:scale-100 peer-checked:after:opacity-100",
8749
+ controlFocusProxyClassName,
8750
+ "peer-disabled:border-neutral-5 peer-disabled:bg-muted peer-disabled:text-neutral-8"
8482
8751
  );
8483
8752
  function useRadioGroupContext() {
8484
8753
  return use(RadioGroupContext);
@@ -9137,7 +9406,7 @@ function NativeSelect({
9137
9406
  style: { borderRadius: "var(--select-radius)" },
9138
9407
  className: cn(
9139
9408
  "h-[var(--select-height)] w-full appearance-none rounded-[var(--select-radius)] border font-sans",
9140
- "bg-background text-[length:var(--select-font-size)] text-foreground shadow-xs outline-none",
9409
+ "bg-background text-[length:var(--select-font-size)] text-foreground outline-none",
9141
9410
  "transition-[background-color,border-color,box-shadow,color] duration-[var(--select-duration)] ease-[var(--select-easing)]",
9142
9411
  formControlFocusClassNames.select,
9143
9412
  "disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground",
@@ -9321,7 +9590,7 @@ var SelectTrigger = ({
9321
9590
  ref,
9322
9591
  className: cn(
9323
9592
  "flex h-[var(--select-height)] w-full items-center justify-between whitespace-nowrap rounded-[var(--select-radius)] border border-input bg-background",
9324
- "px-[var(--select-padding-x)] text-[length:var(--select-font-size)] text-foreground shadow-xs",
9593
+ "px-[var(--select-padding-x)] text-[length:var(--select-font-size)] text-foreground",
9325
9594
  "transition-[background-color,border-color,box-shadow,color] duration-micro ease-out placeholder:text-muted-foreground",
9326
9595
  formControlFocusClassNames.select,
9327
9596
  "disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
@@ -9355,6 +9624,7 @@ var SelectContent = ({
9355
9624
  }) => /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
9356
9625
  Select$1.Positioner,
9357
9626
  {
9627
+ style: { zIndex: overlayZIndex.popover },
9358
9628
  alignItemWithTrigger: position === "item-aligned",
9359
9629
  sideOffset: selectTokens.content.sideOffset,
9360
9630
  children: /* @__PURE__ */ jsx(
@@ -9558,6 +9828,7 @@ var SheetContent = ({
9558
9828
  noOverlay = false,
9559
9829
  showClose,
9560
9830
  close,
9831
+ closeLabel = "Close",
9561
9832
  style,
9562
9833
  ref,
9563
9834
  ...props
@@ -9579,7 +9850,7 @@ var SheetContent = ({
9579
9850
  shouldRenderClose ? /* @__PURE__ */ jsxs(
9580
9851
  SheetClose,
9581
9852
  {
9582
- "aria-label": "Close",
9853
+ "aria-label": closeLabel,
9583
9854
  className: cn(
9584
9855
  "absolute right-[var(--sheet-close-offset)] top-[var(--sheet-close-offset)] inline-flex size-[var(--sheet-close-size)] items-center justify-center rounded-[var(--sheet-close-radius)] text-muted-foreground",
9585
9856
  "transition-[background-color,color,box-shadow] duration-[var(--motion-duration-micro)] ease-[var(--ease-out)] hover:bg-muted hover:text-foreground",
@@ -9588,7 +9859,7 @@ var SheetContent = ({
9588
9859
  ),
9589
9860
  children: [
9590
9861
  /* @__PURE__ */ jsx(Cross, { "aria-hidden": "true", className: "size-[var(--sheet-close-icon-size)]" }),
9591
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
9862
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: closeLabel })
9592
9863
  ]
9593
9864
  }
9594
9865
  ) : null
@@ -9745,13 +10016,7 @@ var ShowMore = ({
9745
10016
  style: cssVars,
9746
10017
  ...props,
9747
10018
  children: [
9748
- !noBorder && /* @__PURE__ */ jsx(
9749
- "div",
9750
- {
9751
- "aria-hidden": "true",
9752
- className: cn("h-px flex-1 bg-[var(--neutral-7)]", dividerClassName)
9753
- }
9754
- ),
10019
+ !noBorder && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: cn("h-px flex-1 bg-neutral-7", dividerClassName) }),
9755
10020
  /* @__PURE__ */ jsx("div", { className: "shrink-0 bg-background px-[var(--show-more-gap)]", children: /* @__PURE__ */ jsxs(
9756
10021
  "button",
9757
10022
  {
@@ -9785,13 +10050,7 @@ var ShowMore = ({
9785
10050
  ]
9786
10051
  }
9787
10052
  ) }),
9788
- !noBorder && /* @__PURE__ */ jsx(
9789
- "div",
9790
- {
9791
- "aria-hidden": "true",
9792
- className: cn("h-px flex-1 bg-[var(--neutral-7)]", dividerClassName)
9793
- }
9794
- )
10053
+ !noBorder && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: cn("h-px flex-1 bg-neutral-7", dividerClassName) })
9795
10054
  ]
9796
10055
  }
9797
10056
  );
@@ -10566,6 +10825,7 @@ var SwitchControl = function SwitchControl2({
10566
10825
  "inline-flex h-full w-full items-center justify-center gap-1.5 whitespace-nowrap rounded-[var(--switch-control-radius)] px-[var(--switch-control-padding-x)] font-medium text-[length:var(--switch-font-size)]",
10567
10826
  "text-muted-foreground transition-[background-color,box-shadow,color] duration-[var(--switch-duration)] ease-[var(--switch-easing)]",
10568
10827
  "peer-checked:bg-background peer-checked:text-foreground peer-checked:shadow-sm",
10828
+ controlFocusProxyClassName,
10569
10829
  "",
10570
10830
  "peer-disabled:pointer-events-none peer-disabled:text-muted-foreground/60",
10571
10831
  "[&_svg]:size-[var(--switch-icon-size)]"
@@ -11076,7 +11336,7 @@ function TabsContent({ className, forceMount, keepMounted, variant, ...props })
11076
11336
  );
11077
11337
  }
11078
11338
  var fieldMessageClassName = "text-xs text-muted-foreground";
11079
- var fieldErrorClassName = "text-xs font-medium text-destructive";
11339
+ var fieldErrorClassName = "text-xs font-medium text-destructive-strong";
11080
11340
  function getTextareaStyle(size, style) {
11081
11341
  const token = textareaTokens.sizes[size];
11082
11342
  return {
@@ -11111,6 +11371,7 @@ var Textarea = ({
11111
11371
  description,
11112
11372
  error,
11113
11373
  fieldClassName,
11374
+ tone = "bordered",
11114
11375
  id,
11115
11376
  onChange,
11116
11377
  onValueChange,
@@ -11136,10 +11397,10 @@ var Textarea = ({
11136
11397
  "textarea",
11137
11398
  {
11138
11399
  className: cn(
11139
- "flex min-h-[var(--textarea-min-height)] w-full resize-y rounded-[var(--textarea-radius)] border border-input bg-background",
11140
- "px-[var(--textarea-padding-x)] py-[var(--textarea-padding-y)] text-[length:var(--textarea-font-size)] text-foreground shadow-xs",
11400
+ "flex min-h-[var(--textarea-min-height)] w-full resize-y rounded-[var(--textarea-radius)]",
11401
+ "px-[var(--textarea-padding-x)] py-[var(--textarea-padding-y)] text-[length:var(--textarea-font-size)] text-foreground",
11141
11402
  "transition-[background-color,border-color,box-shadow,color] duration-micro ease-out placeholder:text-muted-foreground",
11142
- formControlFocusClassNames.textarea,
11403
+ tone === "bordered" ? `border border-input bg-background ${formControlFocusClassNames.textarea}` : "border-0 bg-transparent shadow-none",
11143
11404
  "disabled:cursor-not-allowed disabled:opacity-50 read-only:cursor-default read-only:bg-muted/70",
11144
11405
  formControlInvalidClassNames.textarea,
11145
11406
  className
@@ -11210,7 +11471,8 @@ function isThemeSwitcherValue(value) {
11210
11471
  var ThemeSwitcher = ({
11211
11472
  value,
11212
11473
  defaultValue = "system",
11213
- onChange,
11474
+ onChange: legacyOnChange,
11475
+ onValueChange: onChange = legacyOnChange,
11214
11476
  disabled = false,
11215
11477
  size = "medium",
11216
11478
  name,
@@ -11358,7 +11620,8 @@ function playToggleSound(lastPlayedAt) {
11358
11620
  var ThemeToggle = ({
11359
11621
  value,
11360
11622
  defaultValue,
11361
- onChange,
11623
+ onChange: legacyOnChange,
11624
+ onValueChange: onChange = legacyOnChange,
11362
11625
  size = "md",
11363
11626
  sound = false,
11364
11627
  applyToDocument = false,
@@ -11770,6 +12033,7 @@ var Toggle = ({
11770
12033
  "aria-hidden": "true",
11771
12034
  className: cn(
11772
12035
  "relative inline-flex h-[var(--toggle-track-height)] w-[var(--toggle-track-width)] items-center rounded-[var(--toggle-radius)] border bg-[var(--toggle-track-off)] p-px",
12036
+ controlFocusProxyClassName,
11773
12037
  "border-[var(--toggle-track-border)] transition-[background-color,border-color] duration-[var(--toggle-duration)] ease-[var(--toggle-easing)]",
11774
12038
  "peer-checked:bg-[var(--toggle-track-on)]",
11775
12039
  "peer-checked:[&>span]:translate-x-[var(--toggle-thumb-translate)] peer-checked:[&>span]:text-[var(--toggle-icon-on)]",
@@ -12310,6 +12574,6 @@ var TreeIcon = ({ icon, hasChildren = false, className, ...props }) => {
12310
12574
  };
12311
12575
  var TreeLabel = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { className: cn("font flex-1 truncate text-sm", className), ...props });
12312
12576
 
12313
- export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertContent, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertIcon, AlertTitle, AlertToolbar, AnimateIn, AnimateInGroup, AnimateSwap, AnimatedThemeToggler, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonLink, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, CodeBlock, Collapse, CollapseGroup, Combobox, ComboboxEmpty, ComboboxGroupSub, ComboboxInput, ComboboxList, ComboboxOptionItem, ComboboxRoot, ComboboxSeparator, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandResults, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CopyCodeButton, CopyIdButton, CopyLinkButton, CopyMenuItem, CopyableField, Description, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuEmpty, DropdownMenuFilterInput, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateIcon, EmptyStateRoot, ErrorSurface as Error, ErrorMessage, Field, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Gauge, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, Label, LoadingDots, Menu, MenuButton, MenuContainer, MenuItem, MenuItemLocked, MenuLink, MenuSection, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, MultiSelectContent, MultiSelectRoot, MultiSelectRow, MultiSelectTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Note, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverPositioner, PopoverTrigger, Progress, ProjectBanner, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Scroller, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShowMore, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonText, Slider, Spinner2 as Spinner, SplitButton, SplitButtonMenuItem, Stack, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableCol, TableColgroup, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeSwitcher, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TreeExpander, TreeIcon, TreeLabel, TreeLines, TreeNode, TreeNodeContent, TreeNodeTrigger, TreeProvider, TreeView, alertVariants, badgeVariants, buttonVariants, containerWidths, flexLayouts, gridLayouts, labelVariants, navigationMenuTriggerStyle, progressIndicatorVariants, progressVariants, tabsContentVariants, tabsListVariants, tabsTriggerVariants, toggleGroupItemVariants, toggleGroupVariants, useCopyToClipboard, useFormField, useToasts, zIndex };
12577
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertContent, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertIcon, AlertTitle, AlertToolbar, AnimateIn, AnimateInGroup, AnimateSwap, AnimatedThemeToggler, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonLink, Card, CardBody, CardContent, CardDescription, CardFooter, CardHeader, CardIcon, CardRoot, CardTitle, Checkbox, CheckboxGroup, CodeBlock, Collapse, CollapseGroup, Combobox, ComboboxEmpty, ComboboxGroupSub, ComboboxInput, ComboboxList, ComboboxOptionItem, ComboboxRoot, ComboboxSeparator, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandResults, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CopyCodeButton, CopyIdButton, CopyLinkButton, CopyMenuItem, CopyableField, Description, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuEmpty, DropdownMenuFilterInput, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateIcon, EmptyStateRoot, ErrorSurface as Error, ErrorMessage, Field, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Gauge, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, Label, LoadingDots, Menu, MenuButton, MenuContainer, MenuItem, MenuItemLocked, MenuLink, MenuSection, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, MultiSelectContent, MultiSelectRoot, MultiSelectRow, MultiSelectTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Note, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverPositioner, PopoverTrigger, Progress, ProjectBanner, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Scroller, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShowMore, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonText, Slider, Spinner2 as Spinner, SplitButton, SplitButtonMenuItem, Stack, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableCol, TableColgroup, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeSwitcher, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TreeExpander, TreeIcon, TreeLabel, TreeLines, TreeNode, TreeNodeContent, TreeNodeTrigger, TreeProvider, TreeView, alertVariants, badgeVariants, buttonVariants, cardVariants, containerWidths, flexLayouts, gridLayouts, labelVariants, navigationMenuTriggerStyle, progressIndicatorVariants, progressVariants, tabsContentVariants, tabsListVariants, tabsTriggerVariants, toggleGroupItemVariants, toggleGroupVariants, useCopyToClipboard, useFormField, useToasts, zIndex };
12314
12578
  //# sourceMappingURL=canonical.js.map
12315
12579
  //# sourceMappingURL=canonical.js.map