@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.
- package/dist/chunk-EGU6EG73.js +39 -0
- package/dist/{chunk-NIAL4ZU2.js → chunk-FQAIYKAS.js} +45 -8
- package/dist/{chunk-TVEIUTBQ.js → chunk-IQIJCMG2.js} +1 -1
- package/dist/{chunk-6W25S5CF.js → chunk-KGXTBTCJ.js} +1 -1
- package/dist/chunk-LAEVMNJN.js +135 -0
- package/dist/{chunk-VCRXL7H5.js → chunk-PGQXVJXW.js} +2 -2
- package/dist/{chunk-F3XK34DV.js → chunk-TB2K5JN3.js} +2 -2
- package/dist/{chunk-XNBDACL7.js → chunk-ZUBBMLBD.js} +1 -1
- package/dist/components/badge.d.ts +8 -2
- package/dist/components/badge.js +1 -1
- package/dist/components/banner.d.ts +17 -2
- package/dist/components/banner.js +10 -7
- package/dist/components/booking-row.js +1 -1
- package/dist/components/button-group.js +3 -39
- package/dist/components/calendar.js +1 -1
- package/dist/components/combobox.js +3 -3
- package/dist/components/command.js +2 -2
- package/dist/components/concept-convergence.js +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/dropdown-menu.js +6 -6
- package/dist/components/filter-category-row.js +1 -1
- package/dist/components/input-group.js +1 -1
- package/dist/components/menu-item.js +3 -3
- package/dist/components/multi-select-combobox.js +10 -5
- package/dist/components/multi-select-menu.js +1 -1
- package/dist/components/pan-zoom-viewport.d.ts +137 -0
- package/dist/components/pan-zoom-viewport.js +531 -0
- package/dist/components/place-card.js +2 -2
- package/dist/components/place-details-mobile.js +1 -1
- package/dist/components/responsive-overlay.d.ts +29 -1
- package/dist/components/responsive-overlay.js +46 -7
- package/dist/components/searchable-select.js +3 -3
- package/dist/components/select.js +2 -2
- package/dist/components/selection-bar.js +1 -1
- package/dist/components/sheet.d.ts +6 -0
- package/dist/components/sheet.js +3 -133
- package/dist/components/signature-chip.js +2 -2
- package/dist/components/tabs.d.ts +16 -1
- package/dist/components/tabs.js +21 -3
- package/dist/components/toggle-group.js +1 -1
- package/dist/components/toggle.d.ts +6 -0
- package/dist/components/toggle.js +1 -1
- package/dist/components/top-ranking-entry.js +3 -3
- package/package.json +1 -1
- package/src/components/badge.stories.tsx +32 -1
- package/src/components/badge.test.tsx +45 -0
- package/src/components/badge.tsx +41 -3
- package/src/components/banner.stories.tsx +32 -0
- package/src/components/banner.test.tsx +58 -0
- package/src/components/banner.tsx +28 -4
- package/src/components/calendar.tsx +1 -1
- package/src/components/combobox.tsx +1 -1
- package/src/components/command.test.tsx +10 -0
- package/src/components/command.tsx +1 -1
- package/src/components/dialog.tsx +1 -1
- package/src/components/dropdown-menu.test.tsx +31 -0
- package/src/components/dropdown-menu.tsx +6 -6
- package/src/components/input-group.tsx +1 -1
- package/src/components/multi-select-combobox.tsx +7 -1
- package/src/components/multi-select-menu.tsx +1 -1
- package/src/components/pan-zoom-viewport.stories.tsx +134 -0
- package/src/components/pan-zoom-viewport.test.tsx +381 -0
- package/src/components/pan-zoom-viewport.tsx +727 -0
- package/src/components/responsive-overlay.stories.tsx +61 -0
- package/src/components/responsive-overlay.test.tsx +104 -0
- package/src/components/responsive-overlay.tsx +87 -22
- package/src/components/searchable-select.tsx +1 -1
- package/src/components/select.tsx +2 -2
- package/src/components/selection-bar.tsx +1 -1
- package/src/components/sheet.tsx +14 -3
- package/src/components/tabs.stories.tsx +23 -0
- package/src/components/tabs.test.tsx +64 -0
- package/src/components/tabs.tsx +36 -3
- package/src/components/toggle.test.tsx +19 -0
- package/src/components/toggle.tsx +8 -2
- 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, {
|
|
79
|
-
|
|
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-
|
|
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
|
] })
|
|
@@ -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-
|
|
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-
|
|
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
|
|
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
|
|
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
|
|
@@ -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 };
|
package/dist/components/badge.js
CHANGED
|
@@ -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,39 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
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
|
|
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-
|
|
3
|
-
import '../chunk-
|
|
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-
|
|
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-
|
|
2
|
-
import '../chunk-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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), {
|
|
@@ -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-
|
|
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-
|
|
2
|
-
import '../chunk-
|
|
3
|
-
import '../chunk-
|
|
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';
|