@bearmenu/ui 0.8.28 → 0.8.29

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 (18) hide show
  1. package/dist/{chunk-PDTPO6NG.js → chunk-JWTN7MNK.js} +1 -1
  2. package/dist/{chunk-MCOHLWRS.js → chunk-ZJMCU7MI.js} +1 -1
  3. package/dist/components/combobox.js +2 -2
  4. package/dist/components/command.js +2 -2
  5. package/dist/components/dialog.js +1 -1
  6. package/dist/components/drawer.js +1 -1
  7. package/dist/components/multi-select-combobox.js +2 -2
  8. package/dist/components/party-counter.js +1 -1
  9. package/dist/components/searchable-select.js +2 -2
  10. package/dist/components/sheet.js +1 -1
  11. package/dist/components/time-slot.js +6 -3
  12. package/package.json +1 -1
  13. package/src/components/dialog.tsx +1 -1
  14. package/src/components/drawer.tsx +1 -1
  15. package/src/components/party-counter.tsx +3 -1
  16. package/src/components/sheet.tsx +1 -1
  17. package/src/components/time-slot.tsx +10 -3
  18. package/src/globals.css +19 -1
package/dist/{chunk-PDTPO6NG.js → chunk-JWTN7MNK.js} RENAMED
@@ -26,7 +26,7 @@ var DialogOverlay = React.forwardRef((_a, ref) => {
26
26
  });
27
27
  DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
28
28
  var dialogContentVariants = cva(
29
- "fixed left-[50%] top-[50%] z-[1000] grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 bg-card p-6 shadow-2xl 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)] data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-2xl border border-border",
29
+ "fixed left-[50%] top-[50%] z-[1000] grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 bg-card p-6 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)] data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-2xl border border-border",
30
30
  {
31
31
  variants: {
32
32
  size: {
package/dist/{chunk-MCOHLWRS.js → chunk-ZJMCU7MI.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './chunk-PDTPO6NG.js';
1
+ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './chunk-JWTN7MNK.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';
package/dist/components/combobox.js CHANGED
@@ -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-MCOHLWRS.js';
3
- import '../chunk-PDTPO6NG.js';
2
+ import { Command, CommandInput, CommandList, CommandLoading, CommandEmpty, CommandGroup, CommandItem } from '../chunk-ZJMCU7MI.js';
3
+ import '../chunk-JWTN7MNK.js';
4
4
  import { Button } from '../chunk-5HHRVJOT.js';
5
5
  import '../chunk-RIH2IS7X.js';
6
6
  import '../chunk-5YNIQ2BL.js';
package/dist/components/command.js CHANGED
@@ -1,4 +1,4 @@
1
- export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut } from '../chunk-MCOHLWRS.js';
2
- import '../chunk-PDTPO6NG.js';
1
+ export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut } from '../chunk-ZJMCU7MI.js';
2
+ import '../chunk-JWTN7MNK.js';
3
3
  import '../chunk-FEK5XGZW.js';
4
4
  import '../chunk-MMUBH76A.js';
package/dist/components/dialog.js CHANGED
@@ -1,3 +1,3 @@
1
- export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, dialogContentVariants } from '../chunk-PDTPO6NG.js';
1
+ export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, dialogContentVariants } from '../chunk-JWTN7MNK.js';
2
2
  import '../chunk-FEK5XGZW.js';
3
3
  import '../chunk-MMUBH76A.js';
package/dist/components/drawer.js CHANGED
@@ -51,7 +51,7 @@ var DrawerContent = React.forwardRef((_a, ref) => {
51
51
  ref,
52
52
  "data-slot": "drawer-content",
53
53
  className: cn(
54
- "fixed z-[1000] flex border-border bg-card shadow-2xl",
54
+ "fixed z-[1000] flex border-border bg-card shadow-[var(--shadow-overlay)]",
55
55
  positionClasses,
56
56
  // The single height cap for every vertical drawer. Consumers should
57
57
  // NOT restate it: six app call sites carried an identical
package/dist/components/multi-select-combobox.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Checkbox } from '../chunk-L3CDXVEP.js';
2
2
  import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
3
- import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-MCOHLWRS.js';
4
- import '../chunk-PDTPO6NG.js';
3
+ import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-ZJMCU7MI.js';
4
+ import '../chunk-JWTN7MNK.js';
5
5
  import { Button } from '../chunk-5HHRVJOT.js';
6
6
  import '../chunk-RIH2IS7X.js';
7
7
  import '../chunk-5YNIQ2BL.js';
package/dist/components/party-counter.js CHANGED
@@ -14,7 +14,7 @@ function PartyCounter({
14
14
  }) {
15
15
  const atMin = value <= min;
16
16
  const atMax = value >= max;
17
- const roundButton = "grid size-9 shrink-0 cursor-pointer place-items-center rounded-full transition-[filter,background-color,opacity] duration-150 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card disabled:cursor-not-allowed disabled:opacity-40 [&_svg]:size-4";
17
+ const roundButton = "relative grid size-9 shrink-0 cursor-pointer place-items-center rounded-full transition-[filter,background-color,opacity] duration-150 after:absolute after:-inset-1 after:content-[''] motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card disabled:cursor-not-allowed disabled:opacity-40 [&_svg]:size-4";
18
18
  return /* @__PURE__ */ jsxs(
19
19
  "div",
20
20
  {
package/dist/components/searchable-select.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
2
- import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-MCOHLWRS.js';
3
- import '../chunk-PDTPO6NG.js';
2
+ import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-ZJMCU7MI.js';
3
+ import '../chunk-JWTN7MNK.js';
4
4
  import { Button } from '../chunk-5HHRVJOT.js';
5
5
  import '../chunk-RIH2IS7X.js';
6
6
  import '../chunk-5YNIQ2BL.js';
package/dist/components/sheet.js CHANGED
@@ -26,7 +26,7 @@ var SheetOverlay = React.forwardRef((_a, ref) => {
26
26
  });
27
27
  SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
28
28
  var sheetVariants = cva(
29
- "fixed z-[1000] gap-4 bg-background border-border shadow-2xl 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)]",
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
30
  {
31
31
  variants: {
32
32
  side: {
package/dist/components/time-slot.js CHANGED
@@ -26,9 +26,12 @@ function TimeSlot({
26
26
  // Content sits at the top: a slot without a meta line in a row with
27
27
  // one is stretched by the grid, and the time must not drop to the middle.
28
28
  "flex w-full cursor-pointer flex-col items-center justify-start rounded-[11px] border px-1 py-2 text-center leading-[1.2]",
29
- "transition-[border-color,filter] duration-150 motion-reduce:transition-none",
29
+ // A press state, not just hover: this is the most-tapped control in
30
+ // the flow and the primary device has no hover at all, so without it
31
+ // a tap gives nothing back until the fill repaints.
32
+ "transition-[border-color,filter,transform] duration-150 not-disabled:active:scale-[0.98] motion-reduce:transition-none",
30
33
  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
31
- selected ? "border-transparent bg-[image:var(--gradient-primary)] text-white hover:brightness-[0.94]" : "border-border bg-card text-foreground hover:border-accent/50",
34
+ selected ? "border-transparent bg-[image:var(--gradient-primary)] text-primary-foreground hover:brightness-[0.94]" : "border-border bg-card text-foreground hover:border-accent/50",
32
35
  unavailable && "cursor-not-allowed opacity-[0.32] hover:border-border"
33
36
  ),
34
37
  children: [
@@ -47,7 +50,7 @@ function TimeSlot({
47
50
  {
48
51
  className: cn(
49
52
  "mt-[3px] block text-[9.5px] leading-[1.2]",
50
- selected ? "text-white/80" : tone === "waitlist" ? "text-muted-foreground" : "text-accent"
53
+ selected ? "text-primary-foreground/80" : tone === "waitlist" ? "text-muted-foreground" : "text-accent"
51
54
  ),
52
55
  children: meta
53
56
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bearmenu/ui",
3
- "version": "0.8.28",
3
+ "version": "0.8.29",
4
4
  "packageManager": "pnpm@10.28.1",
5
5
  "description": "BearMenu design system — shared UI tokens, primitives, and components",
6
6
  "license": "UNLICENSED",
package/src/components/dialog.tsx CHANGED
@@ -28,7 +28,7 @@ const DialogOverlay = React.forwardRef<
28
28
  DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
29
29
 
30
30
  const dialogContentVariants = cva(
31
- "fixed left-[50%] top-[50%] z-[1000] grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 bg-card p-6 shadow-2xl 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)] data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-2xl border border-border",
31
+ "fixed left-[50%] top-[50%] z-[1000] grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 bg-card p-6 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)] data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-2xl border border-border",
32
32
  {
33
33
  variants: {
34
34
  size: {
package/src/components/drawer.tsx CHANGED
@@ -69,7 +69,7 @@ const DrawerContent = React.forwardRef<
69
69
  ref={ref}
70
70
  data-slot="drawer-content"
71
71
  className={cn(
72
- "fixed z-[1000] flex border-border bg-card shadow-2xl",
72
+ "fixed z-[1000] flex border-border bg-card shadow-[var(--shadow-overlay)]",
73
73
  positionClasses,
74
74
  // The single height cap for every vertical drawer. Consumers should
75
75
  // NOT restate it: six app call sites carried an identical
package/src/components/party-counter.tsx CHANGED
@@ -50,8 +50,10 @@ export function PartyCounter({
50
50
  const atMin = value <= min;
51
51
  const atMax = value >= max;
52
52
 
53
+ // 36px circle, 44px target: the counter sits in a 52px row, so the tap
54
+ // band can grow past the drawn button without reaching its neighbour.
53
55
  const roundButton =
54
- "grid size-9 shrink-0 cursor-pointer place-items-center rounded-full transition-[filter,background-color,opacity] duration-150 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card disabled:cursor-not-allowed disabled:opacity-40 [&_svg]:size-4";
56
+ "relative grid size-9 shrink-0 cursor-pointer place-items-center rounded-full transition-[filter,background-color,opacity] duration-150 after:absolute after:-inset-1 after:content-[''] motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card disabled:cursor-not-allowed disabled:opacity-40 [&_svg]:size-4";
55
57
 
56
58
  return (
57
59
  <div
package/src/components/sheet.tsx CHANGED
@@ -46,7 +46,7 @@ SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
46
46
  * separates the two and a border only draws a hard line around the radius.
47
47
  */
48
48
  const sheetVariants = cva(
49
- "fixed z-[1000] gap-4 bg-background border-border shadow-2xl 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)]",
49
+ "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)]",
50
50
  {
51
51
  variants: {
52
52
  side: {
package/src/components/time-slot.tsx CHANGED
@@ -63,10 +63,13 @@ export function TimeSlot({
63
63
  // Content sits at the top: a slot without a meta line in a row with
64
64
  // one is stretched by the grid, and the time must not drop to the middle.
65
65
  "flex w-full cursor-pointer flex-col items-center justify-start rounded-[11px] border px-1 py-2 text-center leading-[1.2]",
66
- "transition-[border-color,filter] duration-150 motion-reduce:transition-none",
66
+ // A press state, not just hover: this is the most-tapped control in
67
+ // the flow and the primary device has no hover at all, so without it
68
+ // a tap gives nothing back until the fill repaints.
69
+ "transition-[border-color,filter,transform] duration-150 not-disabled:active:scale-[0.98] motion-reduce:transition-none",
67
70
  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
68
71
  selected
69
- ? "border-transparent bg-[image:var(--gradient-primary)] text-white hover:brightness-[0.94]"
72
+ ? "border-transparent bg-[image:var(--gradient-primary)] text-primary-foreground hover:brightness-[0.94]"
70
73
  : "border-border bg-card text-foreground hover:border-accent/50",
71
74
  unavailable && "cursor-not-allowed opacity-[0.32] hover:border-border"
72
75
  )}
@@ -83,7 +86,11 @@ export function TimeSlot({
83
86
  <span
84
87
  className={cn(
85
88
  "mt-[3px] block text-[9.5px] leading-[1.2]",
86
- selected ? "text-white/80" : tone === "waitlist" ? "text-muted-foreground" : "text-accent"
89
+ selected
90
+ ? "text-primary-foreground/80"
91
+ : tone === "waitlist"
92
+ ? "text-muted-foreground"
93
+ : "text-accent"
87
94
  )}
88
95
  >
89
96
  {meta}
package/src/globals.css CHANGED
@@ -80,7 +80,12 @@ h6 {
80
80
  wells and highlighted rows. Neutral on purpose — its call sites pair it
81
81
  with `text-accent`, and the text is what carries the meaning. */
82
82
  --accent-subtle: oklch(0.945 0 0);
83
- --destructive: oklch(0.577 0.245 27.325);
83
+ /* The house red, not Shadcn's factory one. The default sat at chroma
84
+ 0.245 — louder than anything else in this palette, and the same
85
+ out-shouting that got a 0.22 "ember" rejected for the accent. This is
86
+ --destructive-ink's value, so a destructive fill and a destructive label
87
+ are finally the same red; white on it measures 5.97:1 (was 4.77:1). */
88
+ --destructive: oklch(0.52 0.16 25);
84
89
  --destructive-foreground: oklch(0.985 0 0);
85
90
  /**
86
91
  * Destructive and success as INK — a red or green label on a card, where
@@ -156,6 +161,12 @@ h6 {
156
161
  the least attributable place for a colour cast. */
157
162
  --shadow-panel: 0 1px 2px oklch(0.52 0 0 / 0.04), 0 4px 16px -4px oklch(0.52 0 0 / 0.07);
158
163
 
164
+ /* The dim behind a sheet or a dialog. It has to be mode-aware: this value
165
+ over a white page separates plane 2 from plane 0 by 3.6:1, and the same
166
+ value over a near-black one dims nothing at all (the dark block below
167
+ carries the deeper, more opaque sibling). */
168
+ --scrim: oklch(0.16 0.01 55 / 0.5);
169
+
159
170
  /* Brown variant — replaces hardcoded #482E1F across button/badge */
160
171
  --brown: oklch(0.31 0.05 45);
161
172
  --brown-foreground: oklch(0.985 0 0);
@@ -305,6 +316,11 @@ h6 {
305
316
  --shadow-card-hover: 0 4px 16px oklch(0 0 0 / 0.3), 0 1px 4px oklch(0 0 0 / 0.2);
306
317
  --shadow-overlay: 0 8px 32px oklch(0 0 0 / 0.4), 0 2px 8px oklch(0 0 0 / 0.25);
307
318
  --shadow-panel: 0 1px 3px oklch(0 0 0 / 0.24), 0 8px 24px -8px oklch(0 0 0 / 0.34);
319
+ /* Deeper and more opaque than light's: on a 0.155 canvas the light value
320
+ composites to the canvas itself, leaving a sheet with no edge at all —
321
+ in dark, elevation is carried by the scrim and by lightness, not by a
322
+ shadow nobody can see. */
323
+ --scrim: oklch(0.05 0.01 55 / 0.78);
308
324
  --sidebar: oklch(0.205 0 0);
309
325
  --sidebar-foreground: oklch(0.985 0 0);
310
326
  --sidebar-primary: oklch(0.488 0.243 264.376);
@@ -372,6 +388,8 @@ h6 {
372
388
  --color-destructive-foreground: var(--destructive-foreground);
373
389
  --color-destructive-ink: var(--destructive-ink);
374
390
  --color-success-ink: var(--success-ink);
391
+ /* `bg-scrim` — the dim behind a sheet or a dialog. */
392
+ --color-scrim: var(--scrim);
375
393
  --color-border: var(--border);
376
394
  --color-input: var(--input);
377
395
  --color-ring: var(--ring);