@bearmenu/ui 0.8.35 → 0.8.37

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 (76) hide show
  1. package/dist/chunk-EGU6EG73.js +39 -0
  2. package/dist/{chunk-NIAL4ZU2.js → chunk-FQAIYKAS.js} +45 -8
  3. package/dist/{chunk-TVEIUTBQ.js → chunk-IQIJCMG2.js} +1 -1
  4. package/dist/{chunk-6W25S5CF.js → chunk-KGXTBTCJ.js} +1 -1
  5. package/dist/chunk-LAEVMNJN.js +135 -0
  6. package/dist/{chunk-VCRXL7H5.js → chunk-PGQXVJXW.js} +2 -2
  7. package/dist/{chunk-F3XK34DV.js → chunk-TB2K5JN3.js} +2 -2
  8. package/dist/{chunk-XNBDACL7.js → chunk-ZUBBMLBD.js} +1 -1
  9. package/dist/components/badge.d.ts +8 -2
  10. package/dist/components/badge.js +1 -1
  11. package/dist/components/banner.d.ts +17 -2
  12. package/dist/components/banner.js +10 -7
  13. package/dist/components/booking-row.js +1 -1
  14. package/dist/components/button-group.js +3 -39
  15. package/dist/components/calendar.js +1 -1
  16. package/dist/components/combobox.js +3 -3
  17. package/dist/components/command.js +2 -2
  18. package/dist/components/concept-convergence.js +1 -1
  19. package/dist/components/dialog.js +1 -1
  20. package/dist/components/dropdown-menu.js +6 -6
  21. package/dist/components/filter-category-row.js +1 -1
  22. package/dist/components/input-group.js +1 -1
  23. package/dist/components/menu-item.js +3 -3
  24. package/dist/components/multi-select-combobox.js +10 -5
  25. package/dist/components/multi-select-menu.js +1 -1
  26. package/dist/components/pan-zoom-viewport.d.ts +137 -0
  27. package/dist/components/pan-zoom-viewport.js +531 -0
  28. package/dist/components/place-card.js +2 -2
  29. package/dist/components/place-details-mobile.js +1 -1
  30. package/dist/components/responsive-overlay.d.ts +29 -1
  31. package/dist/components/responsive-overlay.js +46 -7
  32. package/dist/components/searchable-select.js +3 -3
  33. package/dist/components/select.js +2 -2
  34. package/dist/components/selection-bar.js +1 -1
  35. package/dist/components/sheet.d.ts +6 -0
  36. package/dist/components/sheet.js +3 -133
  37. package/dist/components/signature-chip.js +2 -2
  38. package/dist/components/tabs.d.ts +16 -1
  39. package/dist/components/tabs.js +21 -3
  40. package/dist/components/toggle-group.js +1 -1
  41. package/dist/components/toggle.d.ts +6 -0
  42. package/dist/components/toggle.js +1 -1
  43. package/dist/components/top-ranking-entry.js +3 -3
  44. package/package.json +1 -1
  45. package/src/components/badge.stories.tsx +32 -1
  46. package/src/components/badge.test.tsx +45 -0
  47. package/src/components/badge.tsx +41 -3
  48. package/src/components/banner.stories.tsx +32 -0
  49. package/src/components/banner.test.tsx +58 -0
  50. package/src/components/banner.tsx +28 -4
  51. package/src/components/calendar.tsx +1 -1
  52. package/src/components/combobox.tsx +1 -1
  53. package/src/components/command.test.tsx +10 -0
  54. package/src/components/command.tsx +1 -1
  55. package/src/components/dialog.tsx +1 -1
  56. package/src/components/dropdown-menu.test.tsx +31 -0
  57. package/src/components/dropdown-menu.tsx +6 -6
  58. package/src/components/input-group.tsx +1 -1
  59. package/src/components/multi-select-combobox.tsx +7 -1
  60. package/src/components/multi-select-menu.tsx +1 -1
  61. package/src/components/pan-zoom-viewport.stories.tsx +134 -0
  62. package/src/components/pan-zoom-viewport.test.tsx +381 -0
  63. package/src/components/pan-zoom-viewport.tsx +727 -0
  64. package/src/components/responsive-overlay.stories.tsx +61 -0
  65. package/src/components/responsive-overlay.test.tsx +104 -0
  66. package/src/components/responsive-overlay.tsx +87 -22
  67. package/src/components/searchable-select.tsx +1 -1
  68. package/src/components/select.tsx +2 -2
  69. package/src/components/selection-bar.tsx +1 -1
  70. package/src/components/sheet.tsx +14 -3
  71. package/src/components/tabs.stories.tsx +23 -0
  72. package/src/components/tabs.test.tsx +64 -0
  73. package/src/components/tabs.tsx +36 -3
  74. package/src/components/toggle.test.tsx +19 -0
  75. package/src/components/toggle.tsx +8 -2
  76. package/src/globals.css +28 -19
@@ -0,0 +1,39 @@
1
+ import { cn } from './chunk-FEK5XGZW.js';
2
+ import { __objRest, __spreadValues } from './chunk-MMUBH76A.js';
3
+ import * as React from 'react';
4
+ import { cva } from 'class-variance-authority';
5
+ import { jsx } from 'react/jsx-runtime';
6
+
7
+ var buttonGroupVariants = cva("inline-flex", {
8
+ variants: {
9
+ orientation: {
10
+ horizontal: "flex-row [&>[data-slot=button]]:rounded-none [&>[data-slot=button]:first-child]:rounded-l-xl [&>[data-slot=button]:last-child]:rounded-r-xl [&>[data-slot=button]:not(:first-child)]:-ml-px",
11
+ vertical: "flex-col [&>[data-slot=button]]:rounded-none [&>[data-slot=button]:first-child]:rounded-t-xl [&>[data-slot=button]:last-child]:rounded-b-xl [&>[data-slot=button]:not(:first-child)]:-mt-px"
12
+ },
13
+ attached: {
14
+ true: "",
15
+ false: "gap-1"
16
+ }
17
+ },
18
+ defaultVariants: {
19
+ orientation: "horizontal",
20
+ attached: true
21
+ }
22
+ });
23
+ var ButtonGroup = React.forwardRef(
24
+ (_a, ref) => {
25
+ var _b = _a, { className, orientation, attached } = _b, props = __objRest(_b, ["className", "orientation", "attached"]);
26
+ return /* @__PURE__ */ jsx(
27
+ "div",
28
+ __spreadValues({
29
+ ref,
30
+ role: "group",
31
+ "data-slot": "button-group",
32
+ className: cn(buttonGroupVariants({ orientation, attached }), className)
33
+ }, props)
34
+ );
35
+ }
36
+ );
37
+ ButtonGroup.displayName = "ButtonGroup";
38
+
39
+ export { ButtonGroup, buttonGroupVariants };
@@ -1,7 +1,7 @@
1
1
  import { cn } from './chunk-FEK5XGZW.js';
2
- import { __objRest, __spreadValues } from './chunk-MMUBH76A.js';
2
+ import { __objRest, __spreadProps, __spreadValues } from './chunk-MMUBH76A.js';
3
3
  import { cva } from 'class-variance-authority';
4
- import { jsx } from 'react/jsx-runtime';
4
+ import { jsxs, jsx } from 'react/jsx-runtime';
5
5
 
6
6
  var badgeVariants = cva(
7
7
  "inline-flex items-center rounded-lg border px-2.5 py-0.5 text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
@@ -49,7 +49,23 @@ var badgeVariants = cva(
49
49
  * target when it is the row's own control — see `MenuPickRow` for the
50
50
  * same rule on the add toggle.
51
51
  */
52
- assignee: "rounded-full border-0 bg-surface-2 py-1 pl-1 pr-2 gap-1.5 text-[12px] leading-[1.2] font-semibold text-foreground"
52
+ assignee: "rounded-full border-0 bg-surface-2 py-1 pl-1 pr-2 gap-1.5 text-[12px] leading-[1.2] font-semibold text-foreground",
53
+ /**
54
+ * Soft tones — a wash of the status colour with its INK on top, for a
55
+ * status that sits in a list and should not shout: the booking
56
+ * design's "Seated" (success), "25 min late" (destructive), "Needs an
57
+ * answer" (warning) and "Confirmed" (neutral) pills in a table row
58
+ * (calendar/11-dp, floor/14-w1, queue/02-q0).
59
+ *
60
+ * The ink tokens, not the solid ones: `--success` / `--warning` /
61
+ * `--destructive` are tuned as fills and fall short of AA as text on
62
+ * their own wash; `--*-ink` exists for exactly that. Usually paired
63
+ * with an `icon`, so the status does not rest on colour alone.
64
+ */
65
+ softSuccess: "rounded-md border-0 bg-success/15 px-2 py-1 text-success-ink",
66
+ softWarning: "rounded-md border-0 bg-warning/20 px-2 py-1 text-warning-ink",
67
+ softDestructive: "rounded-md border-0 bg-destructive/12 px-2 py-1 text-destructive-ink",
68
+ softNeutral: "rounded-md border-0 bg-surface-2 px-2 py-1 text-ink-secondary"
53
69
  },
54
70
  /**
55
71
  * `status` is the taller pill the booking design draws beside a
@@ -75,13 +91,34 @@ var badgeVariants = cva(
75
91
  }
76
92
  );
77
93
  function Badge(_a) {
78
- var _b = _a, { className, variant, size, live, as: Tag = "div" } = _b, props = __objRest(_b, ["className", "variant", "size", "live", "as"]);
79
- return /* @__PURE__ */ jsx(
94
+ var _b = _a, {
95
+ className,
96
+ variant,
97
+ size,
98
+ live,
99
+ as: Tag = "div",
100
+ icon,
101
+ children
102
+ } = _b, props = __objRest(_b, [
103
+ "className",
104
+ "variant",
105
+ "size",
106
+ "live",
107
+ "as",
108
+ "icon",
109
+ "children"
110
+ ]);
111
+ return /* @__PURE__ */ jsxs(
80
112
  Tag,
81
- __spreadValues({
113
+ __spreadProps(__spreadValues({
82
114
  "data-slot": "badge",
83
- className: cn(badgeVariants({ variant, size, live }), className)
84
- }, props)
115
+ className: cn(badgeVariants({ variant, size, live }), icon ? "gap-1" : void 0, className)
116
+ }, props), {
117
+ children: [
118
+ icon ? /* @__PURE__ */ jsx("span", { "data-slot": "badge-icon", "aria-hidden": true, className: "inline-flex shrink-0 [&>svg]:size-3.5", children: icon }) : null,
119
+ children
120
+ ]
121
+ })
85
122
  );
86
123
  }
87
124
 
@@ -61,7 +61,7 @@ var DialogContent = React.forwardRef(
61
61
  }, props), {
62
62
  children: [
63
63
  children,
64
- showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground opacity-70 transition-opacity hover:bg-accent hover:text-accent-foreground hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent", children: [
64
+ showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground opacity-70 transition-opacity hover:bg-accent-subtle hover:text-foreground hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none", children: [
65
65
  /* @__PURE__ */ jsx(X, { className: "size-4" }),
66
66
  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
67
67
  ] })
@@ -1,4 +1,4 @@
1
- import { Badge } from './chunk-NIAL4ZU2.js';
1
+ import { Badge } from './chunk-FQAIYKAS.js';
2
2
  import { cn } from './chunk-FEK5XGZW.js';
3
3
  import { jsx } from 'react/jsx-runtime';
4
4
 
@@ -0,0 +1,135 @@
1
+ import { cn } from './chunk-FEK5XGZW.js';
2
+ import { __objRest, __spreadProps, __spreadValues } from './chunk-MMUBH76A.js';
3
+ import * as React from 'react';
4
+ import * as SheetPrimitive from '@radix-ui/react-dialog';
5
+ import { cva } from 'class-variance-authority';
6
+ import { X } from 'lucide-react';
7
+ import { jsx, jsxs } from 'react/jsx-runtime';
8
+
9
+ var Sheet = SheetPrimitive.Root;
10
+ var SheetTrigger = SheetPrimitive.Trigger;
11
+ var SheetClose = SheetPrimitive.Close;
12
+ var SheetPortal = SheetPrimitive.Portal;
13
+ var SheetOverlay = React.forwardRef((_a, ref) => {
14
+ var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
15
+ return /* @__PURE__ */ jsx(
16
+ SheetPrimitive.Overlay,
17
+ __spreadProps(__spreadValues({
18
+ className: cn(
19
+ "fixed inset-0 z-[1000] bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
20
+ className
21
+ )
22
+ }, props), {
23
+ ref
24
+ })
25
+ );
26
+ });
27
+ SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
28
+ var sheetVariants = cva(
29
+ "fixed z-[1000] gap-4 bg-background border-border shadow-[var(--shadow-overlay)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:duration-[var(--duration-deliberate)] data-[state=closed]:duration-[var(--duration-exit-standard)] data-[state=open]:ease-[var(--ease-enter)] data-[state=closed]:ease-[var(--ease-exit)]",
30
+ {
31
+ variants: {
32
+ side: {
33
+ top: "inset-x-0 top-0 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
34
+ bottom: "inset-x-0 bottom-0 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
35
+ left: "inset-y-0 left-0 h-full w-3/4 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
36
+ right: "inset-y-0 right-0 h-full w-3/4 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right"
37
+ },
38
+ attachment: {
39
+ edge: "p-6",
40
+ // Padding is the caller's business here: a detail surface runs a gallery
41
+ // and a sticky action bar to the panel edge, and a fixed p-6 would inset
42
+ // both. `edge` keeps its p-6 so nothing already shipped shifts.
43
+ inset: "rounded-2xl overflow-hidden"
44
+ }
45
+ },
46
+ compoundVariants: [
47
+ // `edge` restates exactly what each side carried before `attachment`
48
+ // existed — the seam border and the two inward-facing corners. Kept as
49
+ // compounds rather than left on `side` so `inset` is not fighting them
50
+ // through class-merge order.
51
+ // `sm:max-w-sm` lives here, not on `side`: an inset panel is sized by its
52
+ // caller, and a responsive cap left on `side` cannot be overridden from
53
+ // className — tailwind-merge scopes `sm:max-w-*` and `max-w-*` to
54
+ // different groups, so `max-w-none` loses to it at every width ≥ sm.
55
+ { side: "top", attachment: "edge", class: "border-b" },
56
+ { side: "bottom", attachment: "edge", class: "border-t rounded-t-2xl" },
57
+ { side: "left", attachment: "edge", class: "border-r rounded-r-2xl sm:max-w-sm" },
58
+ { side: "right", attachment: "edge", class: "border-l rounded-l-2xl sm:max-w-sm" },
59
+ // The inset offsets live here rather than on `attachment` because each
60
+ // side has to give up its own edge: a right-side panel clears top, right
61
+ // and bottom but is still anchored to the right.
62
+ { side: "right", attachment: "inset", class: "inset-y-3 right-3 h-auto" },
63
+ { side: "left", attachment: "inset", class: "inset-y-3 left-3 h-auto" },
64
+ { side: "top", attachment: "inset", class: "inset-x-3 top-3" },
65
+ { side: "bottom", attachment: "inset", class: "inset-x-3 bottom-3" }
66
+ ],
67
+ defaultVariants: {
68
+ side: "right",
69
+ attachment: "edge"
70
+ }
71
+ }
72
+ );
73
+ var SheetContent = React.forwardRef(
74
+ (_a, ref) => {
75
+ var _b = _a, { side = "right", attachment = "edge", className, children, hideClose, overlayClassName } = _b, props = __objRest(_b, ["side", "attachment", "className", "children", "hideClose", "overlayClassName"]);
76
+ return /* @__PURE__ */ jsxs(SheetPortal, { children: [
77
+ /* @__PURE__ */ jsx(SheetOverlay, { className: overlayClassName }),
78
+ /* @__PURE__ */ jsxs(
79
+ SheetPrimitive.Content,
80
+ __spreadProps(__spreadValues({
81
+ ref,
82
+ className: cn(sheetVariants({ side, attachment }), className)
83
+ }, props), {
84
+ children: [
85
+ children,
86
+ !hideClose && /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-lg opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary glass-hover p-2", children: [
87
+ /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
88
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
89
+ ] })
90
+ ]
91
+ })
92
+ )
93
+ ] });
94
+ }
95
+ );
96
+ SheetContent.displayName = SheetPrimitive.Content.displayName;
97
+ var SheetHeader = (_a) => {
98
+ var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
99
+ return /* @__PURE__ */ jsx("div", __spreadValues({ className: cn("flex flex-col space-y-2 text-center sm:text-left", className) }, props));
100
+ };
101
+ SheetHeader.displayName = "SheetHeader";
102
+ var SheetFooter = (_a) => {
103
+ var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
104
+ return /* @__PURE__ */ jsx(
105
+ "div",
106
+ __spreadValues({
107
+ className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)
108
+ }, props)
109
+ );
110
+ };
111
+ SheetFooter.displayName = "SheetFooter";
112
+ var SheetTitle = React.forwardRef((_a, ref) => {
113
+ var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
114
+ return /* @__PURE__ */ jsx(
115
+ SheetPrimitive.Title,
116
+ __spreadValues({
117
+ ref,
118
+ className: cn("text-lg font-semibold text-foreground", className)
119
+ }, props)
120
+ );
121
+ });
122
+ SheetTitle.displayName = SheetPrimitive.Title.displayName;
123
+ var SheetDescription = React.forwardRef((_a, ref) => {
124
+ var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
125
+ return /* @__PURE__ */ jsx(
126
+ SheetPrimitive.Description,
127
+ __spreadValues({
128
+ ref,
129
+ className: cn("text-sm text-muted-foreground", className)
130
+ }, props)
131
+ );
132
+ });
133
+ SheetDescription.displayName = SheetPrimitive.Description.displayName;
134
+
135
+ export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger };
@@ -1,4 +1,4 @@
1
- import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './chunk-TVEIUTBQ.js';
1
+ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './chunk-IQIJCMG2.js';
2
2
  import { cn } from './chunk-FEK5XGZW.js';
3
3
  import { __objRest, __spreadValues, __spreadProps } from './chunk-MMUBH76A.js';
4
4
  import * as React from 'react';
@@ -122,7 +122,7 @@ var CommandItem = React.forwardRef((_a, ref) => {
122
122
  ref,
123
123
  className: cn(
124
124
  "relative flex cursor-default select-none items-center rounded-lg px-2 py-1.5 text-sm outline-none transition-colors",
125
- "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground",
125
+ "data-[selected=true]:bg-accent-subtle data-[selected=true]:text-foreground",
126
126
  "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
127
127
  className
128
128
  )
@@ -5,12 +5,12 @@ import { cva } from 'class-variance-authority';
5
5
  import { jsx } from 'react/jsx-runtime';
6
6
 
7
7
  var toggleVariants = cva(
8
- "inline-flex items-center justify-center gap-2 rounded-md text-sm font-semibold hover:bg-accent/50 hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors aria-invalid:ring-2 aria-invalid:ring-destructive/40 whitespace-nowrap",
8
+ "inline-flex items-center justify-center gap-2 rounded-md text-sm font-semibold hover:bg-accent-subtle hover:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors aria-invalid:ring-2 aria-invalid:ring-destructive/40 whitespace-nowrap",
9
9
  {
10
10
  variants: {
11
11
  variant: {
12
12
  default: "bg-transparent",
13
- outline: "border border-border bg-transparent hover:bg-accent/50 hover:text-accent-foreground data-[state=on]:border-primary",
13
+ outline: "border border-border bg-transparent hover:bg-accent-subtle hover:text-foreground data-[state=on]:border-primary",
14
14
  /**
15
15
  * One cell of a segmented control: a raised card on the group's
16
16
  * muted capsule when on, quiet type when off. The group
@@ -1,4 +1,4 @@
1
- import { SignatureChip } from './chunk-6W25S5CF.js';
1
+ import { SignatureChip } from './chunk-KGXTBTCJ.js';
2
2
  import { cn } from './chunk-FEK5XGZW.js';
3
3
  import { __objRest, __spreadValues } from './chunk-MMUBH76A.js';
4
4
  import { memo } from 'react';
@@ -4,7 +4,7 @@ import * as React from 'react';
4
4
  import { VariantProps } from 'class-variance-authority';
5
5
 
6
6
  declare const badgeVariants: (props?: ({
7
- variant?: "secondary" | "default" | "success" | "warning" | "destructive" | "outline" | "glass" | "overlay" | "brown" | "code" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | null | undefined;
7
+ variant?: "secondary" | "default" | "success" | "warning" | "destructive" | "outline" | "glass" | "overlay" | "brown" | "code" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | "softSuccess" | "softWarning" | "softDestructive" | "softNeutral" | null | undefined;
8
8
  size?: "status" | "chip" | null | undefined;
9
9
  live?: boolean | null | undefined;
10
10
  } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -18,7 +18,13 @@ interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<
18
18
  * clickable row.
19
19
  */
20
20
  as?: "div" | "span";
21
+ /**
22
+ * A lucide glyph drawn at 14px before the label — the armchair on
23
+ * "Seated", the clock on "25 min late". Decorative: the label carries the
24
+ * meaning, so the slot is `aria-hidden`.
25
+ */
26
+ icon?: React.ReactNode;
21
27
  }
22
- declare function Badge({ className, variant, size, live, as: Tag, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
28
+ declare function Badge({ className, variant, size, live, as: Tag, icon, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
23
29
 
24
30
  export { Badge, type BadgeProps, badgeVariants };
@@ -1,3 +1,3 @@
1
- export { Badge, badgeVariants } from '../chunk-NIAL4ZU2.js';
1
+ export { Badge, badgeVariants } from '../chunk-FQAIYKAS.js';
2
2
  import '../chunk-FEK5XGZW.js';
3
3
  import '../chunk-MMUBH76A.js';
@@ -21,9 +21,17 @@ import { VariantProps } from 'class-variance-authority';
21
21
  * - `warning`: a 16% amber wash with the design's amber ink — darker than
22
22
  * the solid `--warning`, which falls short of AA on its own wash at this
23
23
  * size; dark mode uses the lifted token.
24
+ * - `destructive`: something did not load or did not happen — "The queue
25
+ * didn't load", "Walk-ins didn't load" (today/04-d3, floor/02-s2,
26
+ * reports/03-p9). A red wash with `--destructive-ink`, and the one tone
27
+ * with a hairline: the booking frames draw it, because a failure has to
28
+ * read as a boundary on a page already full of soft grounds.
29
+ *
30
+ * `action` takes the trailing control — the frames' "Retry". It sits on the
31
+ * right edge, centred on the text, and never wraps under it.
24
32
  */
25
33
  declare const bannerVariants: (props?: ({
26
- tone?: "warning" | "info" | null | undefined;
34
+ tone?: "warning" | "destructive" | "info" | null | undefined;
27
35
  } & class_variance_authority_types.ClassProp) | undefined) => string;
28
36
  type BannerProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & VariantProps<typeof bannerVariants> & {
29
37
  /**
@@ -33,7 +41,14 @@ type BannerProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & Variant
33
41
  icon?: React.ReactNode;
34
42
  /** The bold first line — "19:30 just went". */
35
43
  title?: React.ReactNode;
44
+ /**
45
+ * A trailing control — "Retry". Pass a real button (a `Button
46
+ * variant="link"` reads as the frames draw it); the banner only places it.
47
+ * A banner that announces a failure the user did not just cause is
48
+ * usually worth `role="status"` from the caller.
49
+ */
50
+ action?: React.ReactNode;
36
51
  };
37
- declare function Banner({ tone, icon, title, className, children, ...props }: BannerProps): react_jsx_runtime.JSX.Element;
52
+ declare function Banner({ tone, icon, title, action, className, children, ...props }: BannerProps): react_jsx_runtime.JSX.Element;
38
53
 
39
54
  export { Banner, type BannerProps, bannerVariants };
@@ -1,7 +1,7 @@
1
1
  import { cn } from '../chunk-FEK5XGZW.js';
2
2
  import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
3
3
  import { cva } from 'class-variance-authority';
4
- import { TriangleAlert, Info } from 'lucide-react';
4
+ import { CircleAlert, TriangleAlert, Info } from 'lucide-react';
5
5
  import { jsxs, jsx } from 'react/jsx-runtime';
6
6
 
7
7
  var bannerVariants = cva(
@@ -10,7 +10,8 @@ var bannerVariants = cva(
10
10
  variants: {
11
11
  tone: {
12
12
  info: "bg-surface-2 text-ink-secondary",
13
- warning: "bg-[oklch(0.62_0.15_70/0.16)] text-[oklch(0.42_0.1_70)] dark:bg-warning/15 dark:text-warning"
13
+ warning: "bg-[oklch(0.62_0.15_70/0.16)] text-[oklch(0.42_0.1_70)] dark:bg-warning/15 dark:text-warning",
14
+ destructive: "border border-destructive/25 bg-destructive/10 text-destructive-ink"
14
15
  }
15
16
  },
16
17
  defaultVariants: { tone: "info" }
@@ -18,16 +19,18 @@ var bannerVariants = cva(
18
19
  );
19
20
  var TONE_ICON = {
20
21
  info: /* @__PURE__ */ jsx(Info, { "aria-hidden": true }),
21
- warning: /* @__PURE__ */ jsx(TriangleAlert, { "aria-hidden": true })
22
+ warning: /* @__PURE__ */ jsx(TriangleAlert, { "aria-hidden": true }),
23
+ destructive: /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": true })
22
24
  };
23
25
  function Banner(_a) {
24
- var _b = _a, { tone, icon, title, className, children } = _b, props = __objRest(_b, ["tone", "icon", "title", "className", "children"]);
26
+ var _b = _a, { tone, icon, title, action, className, children } = _b, props = __objRest(_b, ["tone", "icon", "title", "action", "className", "children"]);
25
27
  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ "data-slot": "banner", className: cn(bannerVariants({ tone }), className) }, props), { children: [
26
28
  icon === void 0 ? TONE_ICON[tone != null ? tone : "info"] : icon,
27
- /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
29
+ /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
28
30
  title ? /* @__PURE__ */ jsx("b", { className: "mb-[3px] block text-[13px] font-bold", children: title }) : null,
29
- /* @__PURE__ */ jsx("div", { className: cn(tone === "warning" && title ? "opacity-90" : void 0), children })
30
- ] })
31
+ /* @__PURE__ */ jsx("div", { className: cn((tone === "warning" || tone === "destructive") && title ? "opacity-90" : void 0), children })
32
+ ] }),
33
+ action ? /* @__PURE__ */ jsx("div", { "data-slot": "banner-action", className: "shrink-0 self-center", children: action }) : null
31
34
  ] }));
32
35
  }
33
36
 
@@ -1,4 +1,4 @@
1
- import { Badge } from '../chunk-NIAL4ZU2.js';
1
+ import { Badge } from '../chunk-FQAIYKAS.js';
2
2
  import { cn } from '../chunk-FEK5XGZW.js';
3
3
  import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
4
4
  import * as React from 'react';
@@ -1,39 +1,3 @@
1
- import { cn } from '../chunk-FEK5XGZW.js';
2
- import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
3
- import * as React from 'react';
4
- import { cva } from 'class-variance-authority';
5
- import { jsx } from 'react/jsx-runtime';
6
-
7
- var buttonGroupVariants = cva("inline-flex", {
8
- variants: {
9
- orientation: {
10
- horizontal: "flex-row [&>[data-slot=button]]:rounded-none [&>[data-slot=button]:first-child]:rounded-l-xl [&>[data-slot=button]:last-child]:rounded-r-xl [&>[data-slot=button]:not(:first-child)]:-ml-px",
11
- vertical: "flex-col [&>[data-slot=button]]:rounded-none [&>[data-slot=button]:first-child]:rounded-t-xl [&>[data-slot=button]:last-child]:rounded-b-xl [&>[data-slot=button]:not(:first-child)]:-mt-px"
12
- },
13
- attached: {
14
- true: "",
15
- false: "gap-1"
16
- }
17
- },
18
- defaultVariants: {
19
- orientation: "horizontal",
20
- attached: true
21
- }
22
- });
23
- var ButtonGroup = React.forwardRef(
24
- (_a, ref) => {
25
- var _b = _a, { className, orientation, attached } = _b, props = __objRest(_b, ["className", "orientation", "attached"]);
26
- return /* @__PURE__ */ jsx(
27
- "div",
28
- __spreadValues({
29
- ref,
30
- role: "group",
31
- "data-slot": "button-group",
32
- className: cn(buttonGroupVariants({ orientation, attached }), className)
33
- }, props)
34
- );
35
- }
36
- );
37
- ButtonGroup.displayName = "ButtonGroup";
38
-
39
- export { ButtonGroup, buttonGroupVariants };
1
+ export { ButtonGroup, buttonGroupVariants } from '../chunk-EGU6EG73.js';
2
+ import '../chunk-FEK5XGZW.js';
3
+ import '../chunk-MMUBH76A.js';
@@ -211,7 +211,7 @@ function CalendarDayButton(_a) {
211
211
  "data-range-end": modifiers.range_end,
212
212
  "data-range-middle": modifiers.range_middle,
213
213
  className: cn(
214
- "group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground flex aspect-square h-(--cell-size) w-(--cell-size) size-auto min-w-0 flex-col items-center justify-center gap-1 rounded-md p-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
214
+ "group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground flex aspect-square h-(--cell-size) w-(--cell-size) size-auto min-w-0 flex-col items-center justify-center gap-1 rounded-md p-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
215
215
  defaultClassNames.day,
216
216
  className
217
217
  )
@@ -1,6 +1,6 @@
1
1
  import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
2
- import { Command, CommandInput, CommandList, CommandLoading, CommandEmpty, CommandGroup, CommandItem } from '../chunk-VCRXL7H5.js';
3
- import '../chunk-TVEIUTBQ.js';
2
+ import { Command, CommandInput, CommandList, CommandLoading, CommandEmpty, CommandGroup, CommandItem } from '../chunk-PGQXVJXW.js';
3
+ import '../chunk-IQIJCMG2.js';
4
4
  import { Button } from '../chunk-5SGKGFMN.js';
5
5
  import '../chunk-RIH2IS7X.js';
6
6
  import '../chunk-5YNIQ2BL.js';
@@ -93,7 +93,7 @@ function Combobox({
93
93
  e.stopPropagation();
94
94
  onValueChange(void 0);
95
95
  },
96
- className: "absolute right-9 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-full 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",
96
+ className: "absolute right-9 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent-subtle hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
97
97
  children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
98
98
  }
99
99
  )
@@ -1,4 +1,4 @@
1
- export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut } from '../chunk-VCRXL7H5.js';
2
- import '../chunk-TVEIUTBQ.js';
1
+ export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut } from '../chunk-PGQXVJXW.js';
2
+ import '../chunk-IQIJCMG2.js';
3
3
  import '../chunk-FEK5XGZW.js';
4
4
  import '../chunk-MMUBH76A.js';
@@ -1,7 +1,7 @@
1
1
  import { PhotoGround } from '../chunk-SWD6CJ35.js';
2
2
  import { Convergence } from '../chunk-4XDJXMLF.js';
3
3
  import '../chunk-OIV7B44M.js';
4
- import { Badge } from '../chunk-NIAL4ZU2.js';
4
+ import { Badge } from '../chunk-FQAIYKAS.js';
5
5
  import { cn } from '../chunk-FEK5XGZW.js';
6
6
  import '../chunk-MMUBH76A.js';
7
7
  import { jsxs, jsx } from 'react/jsx-runtime';
@@ -1,3 +1,3 @@
1
- export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, dialogContentVariants } from '../chunk-TVEIUTBQ.js';
1
+ export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, dialogContentVariants } from '../chunk-IQIJCMG2.js';
2
2
  import '../chunk-FEK5XGZW.js';
3
3
  import '../chunk-MMUBH76A.js';
@@ -62,7 +62,7 @@ function DropdownMenuItem(_a) {
62
62
  "data-inset": inset,
63
63
  "data-variant": variant,
64
64
  className: cn(
65
- "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
65
+ "focus:bg-accent-subtle focus:text-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
66
66
  className
67
67
  )
68
68
  }, props)
@@ -85,7 +85,7 @@ function DropdownMenuCheckboxItem(_a) {
85
85
  __spreadProps(__spreadValues({
86
86
  "data-slot": "dropdown-menu-checkbox-item",
87
87
  className: cn(
88
- "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
88
+ "focus:bg-accent-subtle focus:text-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
89
89
  className
90
90
  ),
91
91
  checked
@@ -100,7 +100,7 @@ function DropdownMenuCheckboxItem(_a) {
100
100
  ),
101
101
  children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3" }) })
102
102
  }
103
- ) : /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
103
+ ) : /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 text-accent" }) }) }),
104
104
  children
105
105
  ]
106
106
  })
@@ -123,12 +123,12 @@ function DropdownMenuRadioItem(_a) {
123
123
  __spreadProps(__spreadValues({
124
124
  "data-slot": "dropdown-menu-radio-item",
125
125
  className: cn(
126
- "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
126
+ "focus:bg-accent-subtle focus:text-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
127
127
  className
128
128
  )
129
129
  }, props), {
130
130
  children: [
131
- /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) }) }),
131
+ /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current text-accent" }) }) }),
132
132
  children
133
133
  ]
134
134
  })
@@ -195,7 +195,7 @@ function DropdownMenuSubTrigger(_a) {
195
195
  "data-slot": "dropdown-menu-sub-trigger",
196
196
  "data-inset": inset,
197
197
  className: cn(
198
- "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
198
+ "focus:bg-accent-subtle focus:text-foreground data-[state=open]:bg-accent-subtle data-[state=open]:text-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
199
199
  className
200
200
  )
201
201
  }, props), {
@@ -1,5 +1,5 @@
1
1
  import { Text } from '../chunk-ZLMRVBD7.js';
2
- import { Badge } from '../chunk-NIAL4ZU2.js';
2
+ import { Badge } from '../chunk-FQAIYKAS.js';
3
3
  import '../chunk-FEK5XGZW.js';
4
4
  import '../chunk-MMUBH76A.js';
5
5
  import { ChevronRight } from 'lucide-react';
@@ -85,7 +85,7 @@ var InputGroupButton = React.forwardRef(
85
85
  type,
86
86
  "data-slot": "input-group-button",
87
87
  className: cn(
88
- "inline-flex h-7 min-w-7 cursor-pointer items-center justify-center gap-1 rounded-md px-2 text-xs font-semibold text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&:has(svg:only-child)]:w-7 [&:has(svg:only-child)]:px-0 [&_svg]:size-4",
88
+ "inline-flex h-7 min-w-7 cursor-pointer items-center justify-center gap-1 rounded-md px-2 text-xs font-semibold text-muted-foreground transition-colors hover:bg-accent-subtle hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&:has(svg:only-child)]:w-7 [&:has(svg:only-child)]:px-0 [&_svg]:size-4",
89
89
  className
90
90
  )
91
91
  }, props)
@@ -1,5 +1,5 @@
1
- export { MentionSignal, MenuItem } from '../chunk-XNBDACL7.js';
2
- import '../chunk-6W25S5CF.js';
3
- import '../chunk-NIAL4ZU2.js';
1
+ export { MentionSignal, MenuItem } from '../chunk-ZUBBMLBD.js';
2
+ import '../chunk-KGXTBTCJ.js';
3
+ import '../chunk-FQAIYKAS.js';
4
4
  import '../chunk-FEK5XGZW.js';
5
5
  import '../chunk-MMUBH76A.js';