@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.
Files changed (44) hide show
  1. package/dist/{chunk-TB2K5JN3.js → chunk-BFS4M7KD.js} +26 -9
  2. package/dist/{chunk-KGXTBTCJ.js → chunk-CLFE4U5T.js} +1 -1
  3. package/dist/{chunk-NF5UMLSL.js → chunk-FVFAOW36.js} +46 -40
  4. package/dist/{chunk-ZUBBMLBD.js → chunk-RQPUBKFU.js} +1 -1
  5. package/dist/{chunk-FQAIYKAS.js → chunk-WHUG6QEI.js} +8 -2
  6. package/dist/components/badge.d.ts +1 -1
  7. package/dist/components/badge.js +1 -1
  8. package/dist/components/booking-row.js +1 -1
  9. package/dist/components/button.d.ts +2 -2
  10. package/dist/components/command.d.ts +3 -3
  11. package/dist/components/concept-convergence.js +1 -1
  12. package/dist/components/drawer.d.ts +9 -0
  13. package/dist/components/drawer.js +1 -1
  14. package/dist/components/filter-category-row.js +1 -1
  15. package/dist/components/menu-item.js +3 -3
  16. package/dist/components/multi-select-combobox.js +1 -1
  17. package/dist/components/place-card.js +1 -1
  18. package/dist/components/place-details-mobile.js +1 -1
  19. package/dist/components/responsive-overlay.d.ts +23 -0
  20. package/dist/components/responsive-overlay.js +57 -34
  21. package/dist/components/signature-chip.js +2 -2
  22. package/dist/components/spinner.d.ts +2 -2
  23. package/dist/components/tag.d.ts +2 -2
  24. package/dist/components/text.d.ts +2 -2
  25. package/dist/components/toggle-group.js +9 -5
  26. package/dist/components/toggle.d.ts +11 -2
  27. package/dist/components/toggle.js +1 -1
  28. package/dist/components/top-ranking-entry.js +3 -3
  29. package/package.json +1 -1
  30. package/src/components/badge.stories.tsx +22 -1
  31. package/src/components/badge.test.tsx +37 -0
  32. package/src/components/badge.tsx +8 -2
  33. package/src/components/drawer.stories.tsx +25 -0
  34. package/src/components/drawer.test.tsx +50 -0
  35. package/src/components/drawer.tsx +70 -47
  36. package/src/components/responsive-overlay.stories.tsx +62 -0
  37. package/src/components/responsive-overlay.test.tsx +134 -0
  38. package/src/components/responsive-overlay.tsx +66 -7
  39. package/src/components/toggle-group.stories.tsx +17 -0
  40. package/src/components/toggle-group.test.tsx +65 -0
  41. package/src/components/toggle-group.tsx +13 -5
  42. package/src/components/toggle.test.tsx +50 -1
  43. package/src/components/toggle.tsx +35 -4
  44. 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. The group
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: "h-10 w-11 rounded-full text-muted-foreground hover:bg-transparent hover:text-foreground data-[state=on]:bg-card data-[state=on]:text-foreground data-[state=on]:shadow-[var(--shadow-card)]",
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 };
@@ -1,4 +1,4 @@
1
- import { Badge } from './chunk-FQAIYKAS.js';
1
+ import { Badge } from './chunk-WHUG6QEI.js';
2
2
  import { cn } from './chunk-FEK5XGZW.js';
3
3
  import { jsx } from 'react/jsx-runtime';
4
4
 
@@ -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((_a, ref) => {
51
- var _b = _a, { className, variant = "flush", showHandle, overlayClassName, children } = _b, props = __objRest(_b, ["className", "variant", "showHandle", "overlayClassName", "children"]);
52
- const { direction, modal } = React.useContext(DrawerContext);
53
- const isVertical = direction === "top" || direction === "bottom";
54
- const handleEnabled = showHandle != null ? showHandle : direction === "bottom";
55
- 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)]";
56
- return /* @__PURE__ */ jsxs(DrawerPortal, { children: [
57
- /* @__PURE__ */ jsx(DrawerOverlay, { className: overlayClassName }),
58
- /* @__PURE__ */ jsxs(
59
- Drawer$1.Content,
60
- __spreadProps(__spreadValues({
61
- ref,
62
- "data-slot": "drawer-content",
63
- "aria-modal": modal ? true : void 0,
64
- className: cn(
65
- "fixed z-[1000] flex border-border bg-card shadow-[var(--shadow-overlay)]",
66
- positionClasses,
67
- // The single height cap for every vertical drawer. Consumers should
68
- // NOT restate it: six app call sites carried an identical
69
- // `!max-h-[90vh]`, so this default governed nothing and changing it
70
- // here would have reached none of them.
71
- isVertical ? "max-h-[85vh]" : "",
72
- variant === "floating" && "m-3 rounded-2xl border",
73
- className
74
- )
75
- }, props), {
76
- children: [
77
- handleEnabled && /* @__PURE__ */ jsx(
78
- "div",
79
- {
80
- "aria-hidden": true,
81
- className: "mx-auto mt-2 h-1.5 w-[60px] shrink-0 rounded-full bg-muted-foreground/30"
82
- }
83
- ),
84
- children
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"]);
@@ -1,4 +1,4 @@
1
- import { SignatureChip } from './chunk-KGXTBTCJ.js';
1
+ import { SignatureChip } from './chunk-CLFE4U5T.js';
2
2
  import { cn } from './chunk-FEK5XGZW.js';
3
3
  import { __objRest, __spreadValues } from './chunk-MMUBH76A.js';
4
4
  import { memo } from 'react';
@@ -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-[11px]"
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?: "secondary" | "default" | "success" | "warning" | "destructive" | "outline" | "glass" | "overlay" | "brown" | "code" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | "softSuccess" | "softWarning" | "softDestructive" | "softNeutral" | null | undefined;
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;
@@ -1,3 +1,3 @@
1
- export { Badge, badgeVariants } from '../chunk-FQAIYKAS.js';
1
+ export { Badge, badgeVariants } from '../chunk-WHUG6QEI.js';
2
2
  import '../chunk-FEK5XGZW.js';
3
3
  import '../chunk-MMUBH76A.js';
@@ -1,4 +1,4 @@
1
- import { Badge } from '../chunk-FQAIYKAS.js';
1
+ import { Badge } from '../chunk-WHUG6QEI.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';
@@ -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?: "secondary" | "default" | "link" | "warning" | "destructive" | "outline" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "cta" | null | undefined;
7
- size?: "default" | "icon" | "cta" | "xs" | "sm" | "lg" | "pill" | "cta-sm" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
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>>, "onChange" | "value" | "type"> & {
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">, "heading" | "value"> & {
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">, "onSelect" | "value" | "disabled"> & {
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-FQAIYKAS.js';
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-NF5UMLSL.js';
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
1
  import { Text } from '../chunk-ZLMRVBD7.js';
2
- import { Badge } from '../chunk-FQAIYKAS.js';
2
+ import { Badge } from '../chunk-WHUG6QEI.js';
3
3
  import '../chunk-FEK5XGZW.js';
4
4
  import '../chunk-MMUBH76A.js';
5
5
  import { ChevronRight } from 'lucide-react';
@@ -1,5 +1,5 @@
1
- export { MentionSignal, MenuItem } from '../chunk-ZUBBMLBD.js';
2
- import '../chunk-KGXTBTCJ.js';
3
- import '../chunk-FQAIYKAS.js';
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-FQAIYKAS.js';
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-FQAIYKAS.js';
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-FQAIYKAS.js';
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 { Sheet, SheetContent, SheetTitle, SheetDescription } from '../chunk-LAEVMNJN.js';
3
- import { Drawer, DrawerContent, DrawerTitle, DrawerDescription } from '../chunk-NF5UMLSL.js';
4
- import { Dialog, DialogContent, DialogTitle, DialogDescription } from '../chunk-IQIJCMG2.js';
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 { jsx, jsxs } from 'react/jsx-runtime';
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 header = /* @__PURE__ */ jsxs("div", { "data-slot": "responsive-overlay-header", className: "flex items-start gap-3 px-5 pt-5", children: [
76
- /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
77
- /* @__PURE__ */ jsx(Title, { className: "text-[19px] font-bold leading-tight", children: title }),
78
- subtitle ? /* @__PURE__ */ jsx(Description, { className: "mt-1 text-[13px] text-muted-foreground", children: subtitle }) : null
79
- ] }),
80
- /* @__PURE__ */ jsxs(
81
- "button",
82
- {
83
- type: "button",
84
- "data-slot": "responsive-overlay-close",
85
- onClick: () => onOpenChange(false),
86
- 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",
87
- children: [
88
- /* @__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 }) }),
89
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: closeLabel })
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("min-h-0 flex-1 overflow-y-auto px-5 py-4", bodyClassName),
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
- }, describedBy), {
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,
@@ -1,4 +1,4 @@
1
- export { SignatureChip } from '../chunk-KGXTBTCJ.js';
2
- import '../chunk-FQAIYKAS.js';
1
+ export { SignatureChip } from '../chunk-CLFE4U5T.js';
2
+ import '../chunk-WHUG6QEI.js';
3
3
  import '../chunk-FEK5XGZW.js';
4
4
  import '../chunk-MMUBH76A.js';
@@ -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?: "primary" | "default" | "inherit" | "destructive" | null | undefined;
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?: "primary" | "default" | "inherit" | "destructive" | null | undefined;
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;
@@ -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?: "primary" | "default" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
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?: "primary" | "default" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
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?: "small" | "body" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
26
- color?: "primary" | "default" | "inherit" | "destructive" | "muted" | "primary-foreground" | null | undefined;
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;