@bearmenu/ui 0.8.41 → 0.8.43
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-TB2K5JN3.js → chunk-BFS4M7KD.js} +26 -9
- package/dist/{chunk-KGXTBTCJ.js → chunk-CLFE4U5T.js} +1 -1
- package/dist/{chunk-NF5UMLSL.js → chunk-FVFAOW36.js} +46 -40
- package/dist/{chunk-ZUBBMLBD.js → chunk-RQPUBKFU.js} +1 -1
- package/dist/{chunk-FQAIYKAS.js → chunk-WHUG6QEI.js} +8 -2
- package/dist/components/badge.d.ts +1 -1
- package/dist/components/badge.js +1 -1
- package/dist/components/booking-row.js +1 -1
- package/dist/components/button.d.ts +2 -2
- package/dist/components/command.d.ts +3 -3
- package/dist/components/concept-convergence.js +1 -1
- package/dist/components/drawer.d.ts +9 -0
- package/dist/components/drawer.js +1 -1
- package/dist/components/filter-category-row.js +1 -1
- package/dist/components/menu-item.js +3 -3
- package/dist/components/multi-select-combobox.js +1 -1
- package/dist/components/place-card.js +1 -1
- package/dist/components/place-details-mobile.js +1 -1
- package/dist/components/responsive-overlay.d.ts +23 -0
- package/dist/components/responsive-overlay.js +57 -34
- package/dist/components/signature-chip.js +2 -2
- package/dist/components/spinner.d.ts +2 -2
- package/dist/components/tag.d.ts +2 -2
- package/dist/components/text.d.ts +2 -2
- package/dist/components/toggle-group.js +9 -5
- package/dist/components/toggle.d.ts +11 -2
- 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 +22 -1
- package/src/components/badge.test.tsx +37 -0
- package/src/components/badge.tsx +8 -2
- package/src/components/drawer.stories.tsx +25 -0
- package/src/components/drawer.test.tsx +50 -0
- package/src/components/drawer.tsx +70 -47
- package/src/components/responsive-overlay.stories.tsx +62 -0
- package/src/components/responsive-overlay.test.tsx +134 -0
- package/src/components/responsive-overlay.tsx +66 -7
- package/src/components/toggle-group.stories.tsx +17 -0
- package/src/components/toggle-group.test.tsx +65 -0
- package/src/components/toggle-group.tsx +13 -5
- package/src/components/toggle.test.tsx +50 -1
- package/src/components/toggle.tsx +35 -4
- package/src/globals.css +7 -1
|
@@ -1,5 +1,5 @@
|
|
|
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 * as TogglePrimitive from '@radix-ui/react-toggle';
|
|
4
4
|
import { cva } from 'class-variance-authority';
|
|
5
5
|
import { jsx } from 'react/jsx-runtime';
|
|
@@ -13,11 +13,17 @@ var toggleVariants = cva(
|
|
|
13
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
|
-
* muted capsule when on, quiet type when off.
|
|
16
|
+
* muted capsule when on, quiet type when off. This class owns only
|
|
17
|
+
* the cell's layout and text colour — the button itself is the full
|
|
18
|
+
* 44px hit target the accessibility floor asks for. The raised card
|
|
19
|
+
* it draws is smaller (36px, measured off the booking frames'
|
|
20
|
+
* calendar toolbar and the closures scope control), so
|
|
21
|
+
* `SegmentedToggleContent` below carries the paint in an inner span,
|
|
22
|
+
* the same split `MenuPickRow` uses for its add disc. The group
|
|
17
23
|
* (`ToggleGroup variant="segmented"`) supplies the capsule; the cell
|
|
18
24
|
* never fills with the accent, which would read as a primary button.
|
|
19
25
|
*/
|
|
20
|
-
segmented: "
|
|
26
|
+
segmented: "group/segment relative rounded-full text-muted-foreground hover:bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground",
|
|
21
27
|
/**
|
|
22
28
|
* A choice among a few named options that sit in a wrapping row —
|
|
23
29
|
* the booking flow's seating preference ("No preference", "Terrace",
|
|
@@ -47,7 +53,11 @@ var toggleVariants = cva(
|
|
|
47
53
|
// call on another element alike.
|
|
48
54
|
compoundVariants: [
|
|
49
55
|
{ variant: "chip", class: "h-auto min-w-0 px-[13px]" },
|
|
50
|
-
{ variant: "tab", class: "h-auto min-w-0 px-3" }
|
|
56
|
+
{ variant: "tab", class: "h-auto min-w-0 px-3" },
|
|
57
|
+
// The segmented cell's hit target is fixed at the 44px floor
|
|
58
|
+
// regardless of `size` — restated here for the same reason as chip and
|
|
59
|
+
// tab above, so the size variants' `h-*` never wins the merge.
|
|
60
|
+
{ variant: "segmented", class: "h-11 px-0" }
|
|
51
61
|
],
|
|
52
62
|
defaultVariants: {
|
|
53
63
|
variant: "default",
|
|
@@ -55,23 +65,30 @@ var toggleVariants = cva(
|
|
|
55
65
|
}
|
|
56
66
|
}
|
|
57
67
|
);
|
|
68
|
+
function SegmentedToggleContent({ children }) {
|
|
69
|
+
return /* @__PURE__ */ jsx("span", { className: "flex h-9 w-full items-center justify-center gap-2 rounded-full text-inherit transition-[background-color,box-shadow] group-data-[state=on]/segment:bg-card group-data-[state=on]/segment:shadow-[var(--shadow-card)]", children });
|
|
70
|
+
}
|
|
58
71
|
function Toggle(_a) {
|
|
59
72
|
var _b = _a, {
|
|
60
73
|
className,
|
|
61
74
|
variant,
|
|
62
|
-
size
|
|
75
|
+
size,
|
|
76
|
+
children
|
|
63
77
|
} = _b, props = __objRest(_b, [
|
|
64
78
|
"className",
|
|
65
79
|
"variant",
|
|
66
|
-
"size"
|
|
80
|
+
"size",
|
|
81
|
+
"children"
|
|
67
82
|
]);
|
|
68
83
|
return /* @__PURE__ */ jsx(
|
|
69
84
|
TogglePrimitive.Root,
|
|
70
|
-
__spreadValues({
|
|
85
|
+
__spreadProps(__spreadValues({
|
|
71
86
|
"data-slot": "toggle",
|
|
72
87
|
className: cn(toggleVariants({ variant, size, className }))
|
|
73
|
-
}, props)
|
|
88
|
+
}, props), {
|
|
89
|
+
children: variant === "segmented" ? /* @__PURE__ */ jsx(SegmentedToggleContent, { children }) : children
|
|
90
|
+
})
|
|
74
91
|
);
|
|
75
92
|
}
|
|
76
93
|
|
|
77
|
-
export { Toggle, toggleVariants };
|
|
94
|
+
export { SegmentedToggleContent, Toggle, toggleVariants };
|
|
@@ -47,46 +47,52 @@ var DrawerOverlay = React.forwardRef((_a, ref) => {
|
|
|
47
47
|
);
|
|
48
48
|
});
|
|
49
49
|
DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
|
|
50
|
-
var DrawerContent = React.forwardRef(
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
/* @__PURE__ */ jsxs(
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
"
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
50
|
+
var DrawerContent = React.forwardRef(
|
|
51
|
+
(_a, ref) => {
|
|
52
|
+
var _b = _a, { className, variant = "flush", showHandle, overlayClassName, snapHeight, style, children } = _b, props = __objRest(_b, ["className", "variant", "showHandle", "overlayClassName", "snapHeight", "style", "children"]);
|
|
53
|
+
const { direction, modal } = React.useContext(DrawerContext);
|
|
54
|
+
const isVertical = direction === "top" || direction === "bottom";
|
|
55
|
+
const handleEnabled = showHandle != null ? showHandle : direction === "bottom";
|
|
56
|
+
const fixedHeight = isVertical && snapHeight !== void 0 ? typeof snapHeight === "number" ? `${snapHeight}px` : snapHeight : void 0;
|
|
57
|
+
const positionClasses = direction === "bottom" ? "inset-x-0 bottom-0 flex-col rounded-t-2xl border-t [padding-bottom:max(env(safe-area-inset-bottom),0px)]" : direction === "top" ? "inset-x-0 top-0 flex-col rounded-b-2xl border-b [padding-top:max(env(safe-area-inset-top),0px)]" : direction === "left" ? "inset-y-0 left-0 h-full w-3/4 max-w-sm flex-col rounded-r-2xl border-r [padding-left:max(env(safe-area-inset-left),0px)]" : "inset-y-0 right-0 h-full w-3/4 max-w-sm flex-col rounded-l-2xl border-l [padding-right:max(env(safe-area-inset-right),0px)]";
|
|
58
|
+
return /* @__PURE__ */ jsxs(DrawerPortal, { children: [
|
|
59
|
+
/* @__PURE__ */ jsx(DrawerOverlay, { className: overlayClassName }),
|
|
60
|
+
/* @__PURE__ */ jsxs(
|
|
61
|
+
Drawer$1.Content,
|
|
62
|
+
__spreadProps(__spreadValues({
|
|
63
|
+
ref,
|
|
64
|
+
"data-slot": "drawer-content",
|
|
65
|
+
"aria-modal": modal ? true : void 0,
|
|
66
|
+
style: fixedHeight !== void 0 ? __spreadProps(__spreadValues({}, style), { height: fixedHeight }) : style,
|
|
67
|
+
className: cn(
|
|
68
|
+
"fixed z-[1000] flex border-border bg-card shadow-[var(--shadow-overlay)]",
|
|
69
|
+
positionClasses,
|
|
70
|
+
// The single height cap for every vertical drawer, fixed height or
|
|
71
|
+
// not (a `snapHeight` taller than the viewport still backs off to
|
|
72
|
+
// this on a short phone). Consumers should NOT restate it: six app
|
|
73
|
+
// call sites carried an identical `!max-h-[90vh]`, so this default
|
|
74
|
+
// governed nothing and changing it here would have reached none of
|
|
75
|
+
// them.
|
|
76
|
+
isVertical ? "max-h-[85vh]" : "",
|
|
77
|
+
variant === "floating" && "m-3 rounded-2xl border",
|
|
78
|
+
className
|
|
79
|
+
)
|
|
80
|
+
}, props), {
|
|
81
|
+
children: [
|
|
82
|
+
handleEnabled && /* @__PURE__ */ jsx(
|
|
83
|
+
"div",
|
|
84
|
+
{
|
|
85
|
+
"aria-hidden": true,
|
|
86
|
+
className: "mx-auto mt-2 h-1 w-10 shrink-0 rounded-full bg-muted-foreground/30"
|
|
87
|
+
}
|
|
88
|
+
),
|
|
89
|
+
children
|
|
90
|
+
]
|
|
91
|
+
})
|
|
92
|
+
)
|
|
93
|
+
] });
|
|
94
|
+
}
|
|
95
|
+
);
|
|
90
96
|
DrawerContent.displayName = "DrawerContent";
|
|
91
97
|
var DrawerHeader = (_a) => {
|
|
92
98
|
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
@@ -70,11 +70,17 @@ var badgeVariants = cva(
|
|
|
70
70
|
/**
|
|
71
71
|
* `status` is the taller pill the booking design draws beside a
|
|
72
72
|
* summary — the same ink and radius, more air. `chip` (the default) is
|
|
73
|
-
* the inline one that sits in a row of text.
|
|
73
|
+
* the inline one that sits in a row of text. Measured off the booking
|
|
74
|
+
* details panel (Bookings Calendar 09, the header status badge): a 24px
|
|
75
|
+
* pill, not the 38px `py-[11px]` previously drew. Resets text size and
|
|
76
|
+
* weight too, because the colour variants (`confirmed`/`pending`/…)
|
|
77
|
+
* tune those for their compact, inline-with-a-row scale (10.5px bold);
|
|
78
|
+
* `status` is a different scale (12px semibold) and wins the merge by
|
|
79
|
+
* coming after the variant classes.
|
|
74
80
|
*/
|
|
75
81
|
size: {
|
|
76
82
|
chip: "",
|
|
77
|
-
status: "py-[
|
|
83
|
+
status: "gap-1 px-2 py-[3px] text-xs leading-[18px] font-semibold"
|
|
78
84
|
},
|
|
79
85
|
// v1.0 motion: "live" surface signal — applies `live-pulse` archetype.
|
|
80
86
|
// Pair with a colored variant (e.g. variant="destructive" live).
|
|
@@ -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?: "
|
|
7
|
+
variant?: "default" | "secondary" | "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;
|
package/dist/components/badge.js
CHANGED
|
@@ -3,8 +3,8 @@ import * as React from 'react';
|
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
|
|
5
5
|
declare const buttonVariants: (props?: ({
|
|
6
|
-
variant?: "
|
|
7
|
-
size?: "
|
|
6
|
+
variant?: "default" | "link" | "secondary" | "warning" | "destructive" | "outline" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "cta" | null | undefined;
|
|
7
|
+
size?: "icon" | "default" | "cta" | "xs" | "sm" | "lg" | "pill" | "cta-sm" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
|
|
8
8
|
fullWidth?: boolean | null | undefined;
|
|
9
9
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
10
10
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
@@ -28,7 +28,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
|
|
|
28
28
|
ref?: React.Ref<HTMLInputElement>;
|
|
29
29
|
} & {
|
|
30
30
|
asChild?: boolean;
|
|
31
|
-
}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "
|
|
31
|
+
}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "value" | "onChange" | "type"> & {
|
|
32
32
|
value?: string;
|
|
33
33
|
onValueChange?: (search: string) => void;
|
|
34
34
|
} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -64,7 +64,7 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
|
|
|
64
64
|
ref?: React.Ref<HTMLDivElement>;
|
|
65
65
|
} & {
|
|
66
66
|
asChild?: boolean;
|
|
67
|
-
}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "
|
|
67
|
+
}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "value" | "heading"> & {
|
|
68
68
|
heading?: React.ReactNode;
|
|
69
69
|
value?: string;
|
|
70
70
|
forceMount?: boolean;
|
|
@@ -82,7 +82,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
|
|
|
82
82
|
ref?: React.Ref<HTMLDivElement>;
|
|
83
83
|
} & {
|
|
84
84
|
asChild?: boolean;
|
|
85
|
-
}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "
|
|
85
|
+
}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "value" | "onSelect" | "disabled"> & {
|
|
86
86
|
disabled?: boolean;
|
|
87
87
|
onSelect?: (value: string) => void;
|
|
88
88
|
value?: string;
|
|
@@ -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-WHUG6QEI.js';
|
|
5
5
|
import { cn } from '../chunk-FEK5XGZW.js';
|
|
6
6
|
import '../chunk-MMUBH76A.js';
|
|
7
7
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
@@ -28,6 +28,15 @@ declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<DialogPri
|
|
|
28
28
|
* `--scrim-overlay` in globals.css, and why it is not `--scrim`).
|
|
29
29
|
*/
|
|
30
30
|
overlayClassName?: string;
|
|
31
|
+
/**
|
|
32
|
+
* A fixed sheet height instead of sizing to content — the booking frames'
|
|
33
|
+
* ~640px table sheet (floor/14-w1) draws one instead of growing with its
|
|
34
|
+
* content. A number is px; a string is passed through (`"70vh"`). Only
|
|
35
|
+
* meaningful on a vertical (`top`/`bottom`) drawer, and always capped by the
|
|
36
|
+
* shared `max-h-[85vh]` on short viewports. Omit it to keep every existing
|
|
37
|
+
* caller's content-sized sheet — this is opt-in, not a new default.
|
|
38
|
+
*/
|
|
39
|
+
snapHeight?: number | string;
|
|
31
40
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
32
41
|
declare const DrawerHeader: {
|
|
33
42
|
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from '../chunk-
|
|
1
|
+
export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from '../chunk-FVFAOW36.js';
|
|
2
2
|
import '../chunk-FEK5XGZW.js';
|
|
3
3
|
import '../chunk-MMUBH76A.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { MentionSignal, MenuItem } from '../chunk-
|
|
2
|
-
import '../chunk-
|
|
3
|
-
import '../chunk-
|
|
1
|
+
export { MentionSignal, MenuItem } from '../chunk-RQPUBKFU.js';
|
|
2
|
+
import '../chunk-CLFE4U5T.js';
|
|
3
|
+
import '../chunk-WHUG6QEI.js';
|
|
4
4
|
import '../chunk-FEK5XGZW.js';
|
|
5
5
|
import '../chunk-MMUBH76A.js';
|
|
@@ -5,7 +5,7 @@ import '../chunk-IQIJCMG2.js';
|
|
|
5
5
|
import { Button } from '../chunk-K6ACNU2L.js';
|
|
6
6
|
import '../chunk-RIH2IS7X.js';
|
|
7
7
|
import '../chunk-5YNIQ2BL.js';
|
|
8
|
-
import { Badge } from '../chunk-
|
|
8
|
+
import { Badge } from '../chunk-WHUG6QEI.js';
|
|
9
9
|
import { cn } from '../chunk-FEK5XGZW.js';
|
|
10
10
|
import { __spreadValues } from '../chunk-MMUBH76A.js';
|
|
11
11
|
import * as React from 'react';
|
|
@@ -6,7 +6,7 @@ import { showsGradeAtom } from '../chunk-I5V446BX.js';
|
|
|
6
6
|
import { Separator } from '../chunk-NWZGSLPU.js';
|
|
7
7
|
import { springSnappy } from '../chunk-OIV7B44M.js';
|
|
8
8
|
import { Skeleton } from '../chunk-XBBEX4SF.js';
|
|
9
|
-
import { Badge } from '../chunk-
|
|
9
|
+
import { Badge } from '../chunk-WHUG6QEI.js';
|
|
10
10
|
import { cn } from '../chunk-FEK5XGZW.js';
|
|
11
11
|
import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
|
|
12
12
|
import { forwardRef, memo, useState, useMemo } from 'react';
|
|
@@ -3,7 +3,7 @@ import '../chunk-FMTJGO76.js';
|
|
|
3
3
|
import '../chunk-MWB7S54O.js';
|
|
4
4
|
import '../chunk-NWZGSLPU.js';
|
|
5
5
|
import { Text } from '../chunk-ZLMRVBD7.js';
|
|
6
|
-
import { Badge } from '../chunk-
|
|
6
|
+
import { Badge } from '../chunk-WHUG6QEI.js';
|
|
7
7
|
import { cn } from '../chunk-FEK5XGZW.js';
|
|
8
8
|
import '../chunk-MMUBH76A.js';
|
|
9
9
|
import { useState } from 'react';
|
|
@@ -64,6 +64,29 @@ type ResponsiveOverlayProps = {
|
|
|
64
64
|
* keeps today's default in every mode (dialog, sheet, drawer).
|
|
65
65
|
*/
|
|
66
66
|
initialFocusRef?: React.RefObject<HTMLElement | null>;
|
|
67
|
+
/**
|
|
68
|
+
* Whether closing the overlay returns focus to whatever had it before the
|
|
69
|
+
* overlay opened. Two things do that today: Radix's `onCloseAutoFocus` —
|
|
70
|
+
* the FocusScope's own auto-focus-on-unmount, refocusing the element that
|
|
71
|
+
* was active before the overlay trapped focus — and this component's own
|
|
72
|
+
* `useFocusReturn`, which refocuses that same element a frame later so it
|
|
73
|
+
* survives the overlay's own unmount. `true` (the default) keeps today's
|
|
74
|
+
* behaviour in every mode (dialog, sheet, drawer): the opener gets focus
|
|
75
|
+
* back.
|
|
76
|
+
*
|
|
77
|
+
* Pass `false` when closing hands focus to another surface that takes it
|
|
78
|
+
* itself — a pick-mode bar docking over the header, say. Both paths are
|
|
79
|
+
* disabled and focus stays wherever the consumer puts it (typically inside
|
|
80
|
+
* the same `onOpenChange(false)` handler that closes the overlay).
|
|
81
|
+
*/
|
|
82
|
+
returnFocus?: boolean;
|
|
83
|
+
/**
|
|
84
|
+
* A fixed height for the phone drawer instead of sizing to its content —
|
|
85
|
+
* `DrawerContent`'s `snapHeight` (the frames' ~640px table sheet). Applies
|
|
86
|
+
* only when the narrow drawer is showing; the desktop dialog/sheet are
|
|
87
|
+
* unaffected. Omit to keep today's content-sized drawer.
|
|
88
|
+
*/
|
|
89
|
+
drawerHeight?: number | string;
|
|
67
90
|
};
|
|
68
91
|
/**
|
|
69
92
|
* ResponsiveOverlay — one overlay authored once: a `Drawer` under md, a
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { useMediaQuery, DESKTOP_MEDIA_QUERY } from '../chunk-OPVKL4VS.js';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import { SheetTitle, SheetDescription, Sheet, SheetContent } from '../chunk-LAEVMNJN.js';
|
|
3
|
+
import { DrawerTitle, DrawerDescription, Drawer, DrawerContent } from '../chunk-FVFAOW36.js';
|
|
4
|
+
import { DialogTitle, DialogDescription, Dialog, DialogContent } from '../chunk-IQIJCMG2.js';
|
|
5
5
|
import { cn } from '../chunk-FEK5XGZW.js';
|
|
6
6
|
import { __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
|
|
7
7
|
import * as React from 'react';
|
|
8
8
|
import { X } from 'lucide-react';
|
|
9
|
-
import {
|
|
9
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
10
10
|
|
|
11
11
|
var MD_MEDIA_QUERY = "(min-width: 768px)";
|
|
12
12
|
var CONTAINER_TITLE = { drawer: DrawerTitle, dialog: DialogTitle, sheet: SheetTitle };
|
|
@@ -15,7 +15,7 @@ var CONTAINER_DESCRIPTION = {
|
|
|
15
15
|
dialog: DialogDescription,
|
|
16
16
|
sheet: SheetDescription
|
|
17
17
|
};
|
|
18
|
-
function useFocusReturn(open) {
|
|
18
|
+
function useFocusReturn(open, returnFocus) {
|
|
19
19
|
const openerRef = React.useRef(null);
|
|
20
20
|
const wasOpen = React.useRef(false);
|
|
21
21
|
React.useEffect(() => {
|
|
@@ -26,7 +26,7 @@ function useFocusReturn(open) {
|
|
|
26
26
|
if (wasOpen.current) {
|
|
27
27
|
wasOpen.current = false;
|
|
28
28
|
const opener = openerRef.current;
|
|
29
|
-
if (opener && opener.isConnected) {
|
|
29
|
+
if (returnFocus && opener && opener.isConnected) {
|
|
30
30
|
requestAnimationFrame(() => opener.focus());
|
|
31
31
|
}
|
|
32
32
|
}
|
|
@@ -39,7 +39,7 @@ function useFocusReturn(open) {
|
|
|
39
39
|
}
|
|
40
40
|
document.addEventListener("focusin", track);
|
|
41
41
|
return () => document.removeEventListener("focusin", track);
|
|
42
|
-
}, [open]);
|
|
42
|
+
}, [open, returnFocus]);
|
|
43
43
|
}
|
|
44
44
|
var ResponsiveOverlay = React.forwardRef(
|
|
45
45
|
({
|
|
@@ -56,11 +56,13 @@ var ResponsiveOverlay = React.forwardRef(
|
|
|
56
56
|
wideFrom = "md",
|
|
57
57
|
className,
|
|
58
58
|
bodyClassName,
|
|
59
|
-
initialFocusRef
|
|
59
|
+
initialFocusRef,
|
|
60
|
+
returnFocus = true,
|
|
61
|
+
drawerHeight
|
|
60
62
|
}, ref) => {
|
|
61
63
|
const isWide = useMediaQuery(wideFrom === "lg" ? DESKTOP_MEDIA_QUERY : MD_MEDIA_QUERY);
|
|
62
64
|
const container = isWide ? desktop : "drawer";
|
|
63
|
-
useFocusReturn(open);
|
|
65
|
+
useFocusReturn(open, returnFocus);
|
|
64
66
|
const handleOpenAutoFocus = React.useCallback(
|
|
65
67
|
(event) => {
|
|
66
68
|
if (!(initialFocusRef == null ? void 0 : initialFocusRef.current)) return;
|
|
@@ -69,33 +71,51 @@ var ResponsiveOverlay = React.forwardRef(
|
|
|
69
71
|
},
|
|
70
72
|
[initialFocusRef]
|
|
71
73
|
);
|
|
74
|
+
const handleCloseAutoFocus = React.useCallback(
|
|
75
|
+
(event) => {
|
|
76
|
+
if (!returnFocus) event.preventDefault();
|
|
77
|
+
},
|
|
78
|
+
[returnFocus]
|
|
79
|
+
);
|
|
72
80
|
const describedBy = subtitle ? {} : { "aria-describedby": void 0 };
|
|
73
81
|
const Title = CONTAINER_TITLE[container];
|
|
74
82
|
const Description = CONTAINER_DESCRIPTION[container];
|
|
75
|
-
const
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
83
|
+
const isDrawer = container === "drawer";
|
|
84
|
+
const header = /* @__PURE__ */ jsxs(
|
|
85
|
+
"div",
|
|
86
|
+
{
|
|
87
|
+
"data-slot": "responsive-overlay-header",
|
|
88
|
+
className: cn("flex items-start gap-3", isDrawer ? "px-4 pt-4" : "px-5 pt-5"),
|
|
89
|
+
children: [
|
|
90
|
+
/* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
|
|
91
|
+
/* @__PURE__ */ jsx(Title, { className: cn("font-bold leading-tight", isDrawer ? "text-[22px]" : "text-[19px]"), children: title }),
|
|
92
|
+
subtitle ? /* @__PURE__ */ jsx(Description, { className: "mt-1 text-[13px] text-muted-foreground", children: subtitle }) : null
|
|
93
|
+
] }),
|
|
94
|
+
/* @__PURE__ */ jsxs(
|
|
95
|
+
"button",
|
|
96
|
+
{
|
|
97
|
+
type: "button",
|
|
98
|
+
"data-slot": "responsive-overlay-close",
|
|
99
|
+
onClick: () => onOpenChange(false),
|
|
100
|
+
className: "-m-1.5 grid size-11 shrink-0 place-items-center rounded-full text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
101
|
+
children: [
|
|
102
|
+
/* @__PURE__ */ jsx("span", { className: "grid size-8 place-items-center rounded-full bg-surface-2 transition-colors hover:bg-muted", children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": true }) }),
|
|
103
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: closeLabel })
|
|
104
|
+
]
|
|
105
|
+
}
|
|
106
|
+
)
|
|
107
|
+
]
|
|
108
|
+
}
|
|
109
|
+
);
|
|
94
110
|
const body = /* @__PURE__ */ jsx(
|
|
95
111
|
"div",
|
|
96
112
|
{
|
|
97
113
|
"data-slot": "responsive-overlay-body",
|
|
98
|
-
className: cn(
|
|
114
|
+
className: cn(
|
|
115
|
+
"min-h-0 flex-1 overflow-y-auto py-4",
|
|
116
|
+
isDrawer ? "px-4" : "px-5",
|
|
117
|
+
bodyClassName
|
|
118
|
+
),
|
|
99
119
|
children
|
|
100
120
|
}
|
|
101
121
|
);
|
|
@@ -116,7 +136,8 @@ var ResponsiveOverlay = React.forwardRef(
|
|
|
116
136
|
attachment: "inset",
|
|
117
137
|
hideClose: true,
|
|
118
138
|
overlayClassName: "bg-scrim-overlay backdrop-blur-none",
|
|
119
|
-
onOpenAutoFocus: handleOpenAutoFocus
|
|
139
|
+
onOpenAutoFocus: handleOpenAutoFocus,
|
|
140
|
+
onCloseAutoFocus: handleCloseAutoFocus
|
|
120
141
|
}, describedBy), {
|
|
121
142
|
"data-slot": "responsive-overlay-sheet",
|
|
122
143
|
"data-modal": modal ? "true" : "false"
|
|
@@ -141,7 +162,8 @@ var ResponsiveOverlay = React.forwardRef(
|
|
|
141
162
|
size,
|
|
142
163
|
showCloseButton: false,
|
|
143
164
|
overlayClassName: "bg-scrim-overlay backdrop-blur-none",
|
|
144
|
-
onOpenAutoFocus: handleOpenAutoFocus
|
|
165
|
+
onOpenAutoFocus: handleOpenAutoFocus,
|
|
166
|
+
onCloseAutoFocus: handleCloseAutoFocus
|
|
145
167
|
}, describedBy), {
|
|
146
168
|
className: cn(
|
|
147
169
|
// The dialog's own `grid gap-4 p-6` would put air between the
|
|
@@ -159,11 +181,12 @@ var ResponsiveOverlay = React.forwardRef(
|
|
|
159
181
|
}
|
|
160
182
|
return /* @__PURE__ */ jsx(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
|
|
161
183
|
DrawerContent,
|
|
162
|
-
__spreadProps(__spreadValues({
|
|
184
|
+
__spreadProps(__spreadValues(__spreadValues({
|
|
163
185
|
ref,
|
|
164
186
|
overlayClassName: "bg-scrim-overlay",
|
|
165
|
-
onOpenAutoFocus: handleOpenAutoFocus
|
|
166
|
-
|
|
187
|
+
onOpenAutoFocus: handleOpenAutoFocus,
|
|
188
|
+
onCloseAutoFocus: handleCloseAutoFocus
|
|
189
|
+
}, drawerHeight !== void 0 ? { snapHeight: drawerHeight } : {}), describedBy), {
|
|
167
190
|
className: cn("flex max-h-[85vh] flex-col p-0", className),
|
|
168
191
|
children: [
|
|
169
192
|
header,
|
|
@@ -4,11 +4,11 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
4
4
|
|
|
5
5
|
declare const spinnerVariants: (props?: ({
|
|
6
6
|
size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
|
|
7
|
-
tone?: "
|
|
7
|
+
tone?: "default" | "inherit" | "primary" | "destructive" | null | undefined;
|
|
8
8
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
9
9
|
declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
|
|
10
10
|
size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
|
|
11
|
-
tone?: "
|
|
11
|
+
tone?: "default" | "inherit" | "primary" | "destructive" | null | undefined;
|
|
12
12
|
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
13
13
|
/** Visually-hidden label for screen readers. Defaults to "Loading". */
|
|
14
14
|
label?: string;
|
package/dist/components/tag.d.ts
CHANGED
|
@@ -3,11 +3,11 @@ import * as React from 'react';
|
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
|
|
5
5
|
declare const tagVariants: (props?: ({
|
|
6
|
-
variant?: "
|
|
6
|
+
variant?: "default" | "primary" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
|
|
7
7
|
size?: "default" | "sm" | "lg" | null | undefined;
|
|
8
8
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
9
9
|
declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
|
|
10
|
-
variant?: "
|
|
10
|
+
variant?: "default" | "primary" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
|
|
11
11
|
size?: "default" | "sm" | "lg" | null | undefined;
|
|
12
12
|
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
13
13
|
onRemove?: () => void;
|
|
@@ -22,8 +22,8 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
22
22
|
* Weights are 400 / 600 / 700. 500 is not in the system.
|
|
23
23
|
*/
|
|
24
24
|
declare const textVariants: (props?: ({
|
|
25
|
-
variant?: "
|
|
26
|
-
color?: "
|
|
25
|
+
variant?: "body" | "small" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
|
|
26
|
+
color?: "default" | "inherit" | "primary" | "destructive" | "muted" | "primary-foreground" | null | undefined;
|
|
27
27
|
weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
|
|
28
28
|
leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
|
|
29
29
|
tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;
|