@bearmenu/ui 0.8.38 → 0.8.40

package/dist/{chunk-FVSKGCK3.js → chunk-DZHKUUYV.js}

@@ -36,7 +36,16 @@ var cardVariants = cva(
         // several-hundred-pixel slab that translates under the cursor is a
         // wobble rather than a lift. A panel that size delegates interaction to
         // its children.
-        elevatedPanel: "bg-card border border-border shadow-[var(--shadow-panel)]"
+        elevatedPanel: "bg-card border border-border shadow-[var(--shadow-panel)]",
+        // The booking frames' settings/report SECTION card (Settings Rules U0,
+        // Reports P0): a smaller, page-content-scale radius than every other
+        // variant's `rounded-3xl` — 14px on a phone, 16px from `sm` — carried
+        // entirely by `--shadow-card` with no border at all. Not a bigger
+        // `elevated`: that variant is fixed at 24px and keeps its hairline in
+        // both themes on purpose (see its note); this one is for the specific
+        // page-section shape the booking design draws, not a general
+        // border-dropping replacement for `elevated`.
+        section: "rounded-[14px] bg-card shadow-[var(--shadow-card)] sm:rounded-[16px]"
       },
       size: {
         sm: "[&_[data-slot=card-header]]:p-4 [&_[data-slot=card-content]]:p-4 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-4 [&_[data-slot=card-footer]]:pt-0",
@@ -68,6 +77,11 @@ var cardVariants = cva(
         variant: "elevated",
         interactive: true,
         class: "hover:shadow-[var(--shadow-card-hover)]"
+      },
+      {
+        variant: "section",
+        interactive: true,
+        class: "hover:shadow-[var(--shadow-card-hover)]"
       }
     ],
     defaultVariants: {

package/dist/{chunk-XLHMF6F5.js → chunk-NF5UMLSL.js}

@@ -4,20 +4,30 @@ import * as React from 'react';
 import { Drawer as Drawer$1 } from 'vaul';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var DrawerDirectionContext = React.createContext("bottom");
+var DrawerContext = React.createContext({
+  direction: "bottom",
+  modal: true
+});
 var Drawer = (_a) => {
   var _b = _a, {
     shouldScaleBackground = false,
-    direction = "bottom"
+    direction = "bottom",
+    modal = true,
+    autoFocus = true
   } = _b, props = __objRest(_b, [
     "shouldScaleBackground",
-    "direction"
+    "direction",
+    "modal",
+    "autoFocus"
   ]);
-  return /* @__PURE__ */ jsx(DrawerDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx(
+  const context = React.useMemo(() => ({ direction, modal }), [direction, modal]);
+  return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
     Drawer$1.Root,
     __spreadValues({
       shouldScaleBackground,
-      direction
+      direction,
+      modal,
+      autoFocus
     }, props)
   ) });
 };
@@ -39,7 +49,7 @@ var DrawerOverlay = React.forwardRef((_a, ref) => {
 DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
 var DrawerContent = React.forwardRef((_a, ref) => {
   var _b = _a, { className, variant = "flush", showHandle, overlayClassName, children } = _b, props = __objRest(_b, ["className", "variant", "showHandle", "overlayClassName", "children"]);
-  const direction = React.useContext(DrawerDirectionContext);
+  const { direction, modal } = React.useContext(DrawerContext);
   const isVertical = direction === "top" || direction === "bottom";
   const handleEnabled = showHandle != null ? showHandle : direction === "bottom";
   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)]";
@@ -50,6 +60,7 @@ var DrawerContent = React.forwardRef((_a, ref) => {
       __spreadProps(__spreadValues({
         ref,
         "data-slot": "drawer-content",
+        "aria-modal": modal ? true : void 0,
         className: cn(
           "fixed z-[1000] flex border-border bg-card shadow-[var(--shadow-overlay)]",
           positionClasses,

package/dist/components/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "secondary" | "success" | "warning" | "destructive" | "outline" | "glass" | "overlay" | "brown" | "code" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | "softSuccess" | "softWarning" | "softDestructive" | "softNeutral" | null | undefined;
+    variant?: "secondary" | "default" | "success" | "warning" | "destructive" | "outline" | "glass" | "overlay" | "brown" | "code" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | "softSuccess" | "softWarning" | "softDestructive" | "softNeutral" | null | undefined;
     size?: "status" | "chip" | null | undefined;
     live?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

package/dist/components/button.d.ts

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "secondary" | "warning" | "destructive" | "outline" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "cta" | null | undefined;
-    size?: "icon" | "default" | "cta" | "xs" | "sm" | "lg" | "pill" | "cta-sm" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "secondary" | "default" | "link" | "warning" | "destructive" | "outline" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "cta" | null | undefined;
+    size?: "default" | "icon" | "cta" | "xs" | "sm" | "lg" | "pill" | "cta-sm" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/components/card.d.ts

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const cardVariants: (props?: ({
-    variant?: "outline" | "glass" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
+    variant?: "outline" | "glass" | "section" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "outline" | "glass" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
+    variant?: "outline" | "glass" | "section" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/card.js

@@ -1,4 +1,4 @@
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants } from '../chunk-FVSKGCK3.js';
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants } from '../chunk-DZHKUUYV.js';
 import '../chunk-ZLMRVBD7.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/command.d.ts

@@ -28,7 +28,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "value" | "onChange" | "type"> & {
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -64,7 +64,7 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "value" | "heading"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -82,7 +82,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "value" | "onSelect" | "disabled"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "onSelect" | "value" | "disabled"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/components/drawer.d.ts

@@ -4,8 +4,15 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
+/**
+ * `autoFocus` defaults to `true` here, where vaul defaults it to `false`.
+ * vaul's default cancels Radix's open auto-focus, so focus never enters the
+ * sheet, Radix's FocusScope never engages, and Tab walks the page behind a
+ * modal drawer. A caller that must not move focus on open passes
+ * `autoFocus={false}`.
+ */
 declare const Drawer: {
-    ({ shouldScaleBackground, direction, ...props }: React.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
+    ({ shouldScaleBackground, direction, modal, autoFocus, ...props }: React.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/drawer.js

@@ -1,3 +1,3 @@
-export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from '../chunk-XLHMF6F5.js';
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from '../chunk-NF5UMLSL.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/empty-state.d.ts

@@ -3,7 +3,14 @@ import * as React from 'react';
 type EmptyStateAction = {
     label: string;
     onClick: () => void;
+    /**
+     * Rendered before the label, sized like the DS button's own icons (the
+     * `Button` base class forces every child `<svg>` to 16px) — "Try again"
+     * carries a refresh glyph, "New reservation" a plus.
+     */
+    icon?: React.ReactNode;
 };
+type EmptyStateVariant = "default" | "search" | "error";
 interface EmptyStateProps {
     title: string;
     description: string;
@@ -11,10 +18,40 @@ interface EmptyStateProps {
     illustration?: React.ReactNode;
     action?: EmptyStateAction;
     secondaryAction?: EmptyStateAction;
-    variant?: "default" | "search" | "error";
+    /**
+     * The primary action's style. Defaults by variant: `outline` for `error`
+     * (try again) and `search` (clear filters) — a recovery step, not the page's
+     * main call to action — and a filled `default` for the plain empty state,
+     * where the action is usually "create the first one".
+     */
+    actionVariant?: "default" | "outline";
+    variant?: EmptyStateVariant;
     size?: "sm" | "md" | "lg";
+    /**
+     * `card` draws the booking pages' whole-body state card (reports/02-p4,
+     * calendar/02-c2): a 14px-radius card surface (16px from `sm`) with the
+     * resting card shadow and no border. `none` (the default) leaves the
+     * surface to the container it sits in.
+     */
+    surface?: "none" | "card";
     className?: string;
 }
+/**
+ * EmptyState — an icon tile, a title, one line of body and an optional action,
+ * spaced as the booking frames draw them (reports/02-p4, calendar/02-c2): a
+ * 64px tile (72px from `sm`) with a 28px glyph, 16px to the title, 12px from
+ * title to body, 16px from body to the action. The action is full-width on a
+ * phone and hugs its label from `sm`.
+ *
+ * The tile is 20px-radius (22px from `sm`); the title is 16px on a phone,
+ * 18px from `sm`. On `surface="card"` the card itself is 14px-radius (16px
+ * from `sm`), no border, with 20px side padding to the action row — measured
+ * off the frames' DOM (reports/02-p4, calendar/02-c2), not eyeballed.
+ *
+ * The error variant says "error" with its glyph and its tile's wash, not by
+ * painting the title and body red: red body copy is both harder to read and
+ * louder than a load failure the user can retry.
+ */
 declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
 declare const SearchEmptyState: React.ForwardRefExoticComponent<Omit<EmptyStateProps, "icon" | "variant"> & React.RefAttributes<HTMLDivElement>>;
 declare const ErrorEmptyState: React.ForwardRefExoticComponent<Omit<EmptyStateProps, "icon" | "variant"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/empty-state.js

@@ -5,7 +5,7 @@ import { Text } from '../chunk-ZLMRVBD7.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';
-import { FileX, AlertCircle, Search } from 'lucide-react';
+import { AlertCircle, Search, FileX } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var sizeStyles = {
@@ -13,6 +13,16 @@ var sizeStyles = {
   md: "py-12 px-6",
   lg: "py-16 px-8"
 };
+var DEFAULT_ACTION_VARIANT = {
+  default: "default",
+  search: "outline",
+  error: "outline"
+};
+var DEFAULT_ICON = {
+  default: /* @__PURE__ */ jsx(FileX, { className: "text-muted-foreground", "aria-hidden": true }),
+  search: /* @__PURE__ */ jsx(Search, { className: "text-muted-foreground", "aria-hidden": true }),
+  error: /* @__PURE__ */ jsx(AlertCircle, { className: "text-destructive", "aria-hidden": true })
+};
 var EmptyState = React.forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -22,8 +32,10 @@ var EmptyState = React.forwardRef(
       illustration,
       action,
       secondaryAction,
+      actionVariant,
       variant = "default",
       size = "md",
+      surface = "none",
       className
     } = _b, props = __objRest(_b, [
       "title",
@@ -32,21 +44,12 @@ var EmptyState = React.forwardRef(
       "illustration",
       "action",
       "secondaryAction",
+      "actionVariant",
       "variant",
       "size",
+      "surface",
       "className"
     ]);
-    const getDefaultIcon = () => {
-      switch (variant) {
-        case "search":
-          return /* @__PURE__ */ jsx(Search, { className: "h-12 w-12 text-muted-foreground/50" });
-        case "error":
-          return /* @__PURE__ */ jsx(AlertCircle, { className: "h-12 w-12 text-destructive/50" });
-        default:
-          return /* @__PURE__ */ jsx(FileX, { className: "h-12 w-12 text-muted-foreground/50" });
-      }
-    };
-    const textColor = variant === "error" ? "destructive" : "muted";
     return /* @__PURE__ */ jsxs(
       "div",
       __spreadProps(__spreadValues({
@@ -55,16 +58,43 @@ var EmptyState = React.forwardRef(
         className: cn(
           "flex flex-col items-center justify-center text-center",
           sizeStyles[size],
+          surface === "card" && "rounded-[14px] bg-card px-5 shadow-[var(--shadow-card)] sm:rounded-[16px]",
           className
         )
       }, props), {
         children: [
-          illustration ? /* @__PURE__ */ jsx("div", { className: "mb-6", children: illustration }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: icon || getDefaultIcon() }),
-          /* @__PURE__ */ jsx(Text, { as: "h3", weight: "semibold", color: textColor, className: "text-lg mb-2", children: title }),
-          /* @__PURE__ */ jsx(Text, { as: "p", color: textColor, className: "text-sm max-w-md mb-6", children: description }),
-          (action || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-            action && /* @__PURE__ */ jsx(Button, { onClick: action.onClick, variant: "default", className: "glass-hover", children: action.label }),
-            secondaryAction && /* @__PURE__ */ jsx(Button, { onClick: secondaryAction.onClick, variant: "outline", className: "glass-hover", children: secondaryAction.label })
+          illustration ? /* @__PURE__ */ jsx("div", { className: "mb-6", children: illustration }) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "empty-state-icon",
+              className: cn(
+                // The glyph size is the tile's, whatever size the caller's icon
+                // node asked for — a 40px icon in a 64px tile has no margin.
+                "mb-4 flex size-16 shrink-0 items-center justify-center rounded-[20px] border border-border shadow-sm sm:size-18 sm:rounded-[22px] [&_svg]:size-7",
+                variant === "error" ? "bg-destructive/5" : "bg-card"
+              ),
+              children: icon != null ? icon : DEFAULT_ICON[variant]
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { as: "h3", weight: "semibold", className: "text-base sm:text-lg", children: title }),
+          description ? /* @__PURE__ */ jsx(Text, { as: "p", color: "muted", className: "mt-3 max-w-md text-sm", children: description }) : null,
+          (action || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:items-center", children: [
+            action && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                onClick: action.onClick,
+                variant: actionVariant != null ? actionVariant : DEFAULT_ACTION_VARIANT[variant],
+                className: "glass-hover",
+                children: [
+                  action.icon,
+                  action.label
+                ]
+              }
+            ),
+            secondaryAction && /* @__PURE__ */ jsxs(Button, { onClick: secondaryAction.onClick, variant: "outline", className: "glass-hover", children: [
+              secondaryAction.icon,
+              secondaryAction.label
+            ] })
           ] })
         ]
       })

package/dist/components/responsive-overlay.js

@@ -1,6 +1,6 @@
 import { useMediaQuery, DESKTOP_MEDIA_QUERY } from '../chunk-OPVKL4VS.js';
 import { Sheet, SheetContent, SheetTitle, SheetDescription } from '../chunk-LAEVMNJN.js';
-import { Drawer, DrawerContent, DrawerTitle, DrawerDescription } from '../chunk-XLHMF6F5.js';
+import { Drawer, DrawerContent, DrawerTitle, DrawerDescription } from '../chunk-NF5UMLSL.js';
 import { Dialog, DialogContent, DialogTitle, DialogDescription } from '../chunk-IQIJCMG2.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
@@ -59,15 +59,14 @@ var ResponsiveOverlay = React.forwardRef(
   }, ref) => {
     const isWide = useMediaQuery(wideFrom === "lg" ? DESKTOP_MEDIA_QUERY : MD_MEDIA_QUERY);
     const container = isWide ? desktop : "drawer";
-    const titleId = React.useId();
-    const subtitleId = React.useId();
     useFocusReturn(open);
+    const describedBy = subtitle ? {} : { "aria-describedby": void 0 };
     const Title = CONTAINER_TITLE[container];
     const Description = CONTAINER_DESCRIPTION[container];
     const header = /* @__PURE__ */ jsxs("div", { "data-slot": "responsive-overlay-header", className: "flex items-start gap-3 px-5 pt-5", children: [
       /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx(Title, { id: titleId, className: "text-[19px] font-bold leading-tight", children: title }),
-        subtitle ? /* @__PURE__ */ jsx(Description, { id: subtitleId, className: "mt-1 text-[13px] text-muted-foreground", children: subtitle }) : null
+        /* @__PURE__ */ jsx(Title, { className: "text-[19px] font-bold leading-tight", children: title }),
+        subtitle ? /* @__PURE__ */ jsx(Description, { className: "mt-1 text-[13px] text-muted-foreground", children: subtitle }) : null
       ] }),
       /* @__PURE__ */ jsxs(
         "button",
@@ -102,17 +101,16 @@ var ResponsiveOverlay = React.forwardRef(
     if (container === "sheet") {
       return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, modal, children: /* @__PURE__ */ jsxs(
         SheetContent,
-        __spreadProps(__spreadValues({
+        __spreadProps(__spreadValues(__spreadProps(__spreadValues({
           ref,
           side: "right",
           attachment: "inset",
           hideClose: true,
-          overlayClassName: "bg-scrim-overlay backdrop-blur-none",
-          "aria-labelledby": titleId,
-          "aria-describedby": subtitle ? subtitleId : void 0,
+          overlayClassName: "bg-scrim-overlay backdrop-blur-none"
+        }, describedBy), {
           "data-slot": "responsive-overlay-sheet",
           "data-modal": modal ? "true" : "false"
-        }, modal ? {} : { onInteractOutside: (event) => event.preventDefault() }), {
+        }), modal ? {} : { onInteractOutside: (event) => event.preventDefault() }), {
           className: cn(
             "flex w-[420px] max-w-[calc(100vw-1.5rem)] flex-col gap-0 bg-card p-0",
             className
@@ -128,13 +126,12 @@ var ResponsiveOverlay = React.forwardRef(
     if (container === "dialog") {
       return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
         DialogContent,
-        {
+        __spreadProps(__spreadValues({
           ref,
           size,
           showCloseButton: false,
-          overlayClassName: "bg-scrim-overlay backdrop-blur-none",
-          "aria-labelledby": titleId,
-          "aria-describedby": subtitle ? subtitleId : void 0,
+          overlayClassName: "bg-scrim-overlay backdrop-blur-none"
+        }, describedBy), {
           className: cn(
             // The dialog's own `grid gap-4 p-6` would put air between the
             // header, the body and the band the frames draw flush.
@@ -146,23 +143,22 @@ var ResponsiveOverlay = React.forwardRef(
             body,
             foot
           ]
-        }
+        })
       ) });
     }
     return /* @__PURE__ */ jsx(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
       DrawerContent,
-      {
+      __spreadProps(__spreadValues({
         ref,
-        overlayClassName: "bg-scrim-overlay",
-        "aria-labelledby": titleId,
-        "aria-describedby": subtitle ? subtitleId : void 0,
+        overlayClassName: "bg-scrim-overlay"
+      }, describedBy), {
         className: cn("flex max-h-[85vh] flex-col p-0", className),
         children: [
           header,
           body,
           foot
         ]
-      }
+      })
     ) });
   }
 );

package/dist/components/spinner.d.ts

@@ -4,11 +4,11 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "default" | "inherit" | "primary" | "destructive" | null | undefined;
+    tone?: "primary" | "default" | "inherit" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "default" | "inherit" | "primary" | "destructive" | null | undefined;
+    tone?: "primary" | "default" | "inherit" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /** Visually-hidden label for screen readers. Defaults to "Loading". */
     label?: string;

package/dist/components/tag.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const tagVariants: (props?: ({
-    variant?: "default" | "primary" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
+    variant?: "primary" | "default" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "default" | "primary" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
+    variant?: "primary" | "default" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     onRemove?: () => void;

package/dist/components/text.d.ts

@@ -22,8 +22,8 @@ import { VariantProps } from 'class-variance-authority';
  * Weights are 400 / 600 / 700. 500 is not in the system.
  */
 declare const textVariants: (props?: ({
-    variant?: "body" | "small" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
-    color?: "default" | "inherit" | "primary" | "destructive" | "muted" | "primary-foreground" | null | undefined;
+    variant?: "small" | "body" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
+    color?: "primary" | "default" | "inherit" | "destructive" | "muted" | "primary-foreground" | null | undefined;
     weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
     tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;

package/dist/components/venue-events-block.js

@@ -1,6 +1,6 @@
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { Card } from '../chunk-FVSKGCK3.js';
+import { Card } from '../chunk-DZHKUUYV.js';
 import '../chunk-ZLMRVBD7.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.38",
+  "version": "0.8.40",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

package/src/components/card.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
   argTypes: {
     variant: {
       control: "select",
-      options: ["glass", "surface"],
+      options: ["glass", "surface", "outline", "muted", "elevated", "elevatedPanel", "section"],
     },
   },
 } satisfies Meta<typeof Card>;
@@ -47,6 +47,25 @@ export const Surface: Story = {
   ),
 };
 
+/**
+ * The booking frames' settings/report section shape (Settings Rules U0,
+ * Reports P0): 14px radius on a phone, 16px from `sm`, shadow only, no
+ * border. Distinct from `elevated`, which is a fixed 24px with a hairline.
+ */
+export const Section: Story = {
+  render: () => (
+    <Card variant="section" className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Booking rules</CardTitle>
+        <CardDescription>How far ahead guests can book, and the slot length.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-muted-foreground">Section content goes here.</p>
+      </CardContent>
+    </Card>
+  ),
+};
+
 export const WithForm: Story = {
   render: () => (
     <Card className="w-[350px]">

package/src/components/card.test.tsx

@@ -0,0 +1,27 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Card } from "./card";
+
+describe("Card", () => {
+  it("draws the section variant borderless, at the booking frames' radius", () => {
+    render(<Card variant="section">Content</Card>);
+    const card = screen.getByText("Content");
+    expect(card).toHaveClass("rounded-[14px]", "sm:rounded-[16px]", "bg-card");
+    expect(card).not.toHaveClass("border", "border-border");
+  });
+
+  it("keeps elevated's fixed radius and hairline, unaffected by the new variant", () => {
+    render(<Card variant="elevated">Content</Card>);
+    const card = screen.getByText("Content");
+    expect(card).toHaveClass("rounded-3xl", "border", "border-border");
+  });
+
+  it("steps section's shadow up on hover when interactive", () => {
+    render(
+      <Card variant="section" interactive>
+        Content
+      </Card>
+    );
+    expect(screen.getByText("Content")).toHaveClass("hover:shadow-[var(--shadow-card-hover)]");
+  });
+});

package/src/components/card.tsx

@@ -35,6 +35,15 @@ const cardVariants = cva(
         // wobble rather than a lift. A panel that size delegates interaction to
         // its children.
         elevatedPanel: "bg-card border border-border shadow-[var(--shadow-panel)]",
+        // The booking frames' settings/report SECTION card (Settings Rules U0,
+        // Reports P0): a smaller, page-content-scale radius than every other
+        // variant's `rounded-3xl` — 14px on a phone, 16px from `sm` — carried
+        // entirely by `--shadow-card` with no border at all. Not a bigger
+        // `elevated`: that variant is fixed at 24px and keeps its hairline in
+        // both themes on purpose (see its note); this one is for the specific
+        // page-section shape the booking design draws, not a general
+        // border-dropping replacement for `elevated`.
+        section: "rounded-[14px] bg-card shadow-[var(--shadow-card)] sm:rounded-[16px]",
       },
       size: {
         sm: "[&_[data-slot=card-header]]:p-4 [&_[data-slot=card-content]]:p-4 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-4 [&_[data-slot=card-footer]]:pt-0",
@@ -68,6 +77,11 @@ const cardVariants = cva(
         interactive: true,
         class: "hover:shadow-[var(--shadow-card-hover)]",
       },
+      {
+        variant: "section",
+        interactive: true,
+        class: "hover:shadow-[var(--shadow-card-hover)]",
+      },
     ],
   defaultVariants: {
     variant: "surface",