@medalsocial/meda 3.14.0 → 3.15.0

package/README.md

@@ -66,7 +66,8 @@ per-feature stylesheets never reach an optional peer (see
 
 Unbranded, presentational screens for a customer booking flow: the wizard steps
 (`WhoScreen`, `ServiceScreen`, `StylistScreen`, `TimeScreen`, `DetailsScreen`,
-`SummaryBar`, `Confirmation`, `BookingSkeleton`, `AddChildSheet`), `ManageScreen`,
+`SummaryBar`, `Confirmation`, `BookingSkeleton`, `AddChildSheet`), the desktop's
+sticky side panel (`BookingPanel`), `ManageScreen`,
 login (`LoginSheet`, `LoginPanel`, `OtpSlots`, `VippsButton`) and the customer
 portal (`PortalShell`, `UpcomingBookings`, `VisitHistory`, `ChildCards`,
 `RebookCards`, `FamilyEditor`, `ProfileForm`, `DataControls`, `AccountCard`,

package/dist/booking/internal/service-multi.d.ts

@@ -30,9 +30,10 @@ export declare function PersonTabs({ people, active, done, onSelect, labels, lab
  * missing, and «Next». The same bar as `SummaryBar`, so the step reads as one
  * flow; a caller that also renders `SummaryBar` hides it on this step.
  *
- * «Next» is never disabled. A disabled button explains nothing and is skipped
- * by a screen reader's tab order; this one stays, the line says what is
- * missing, and the caller decides what pressing it does.
+ * «Next» is not disabled by default. A disabled button explains nothing and
+ * is skipped by a screen reader's tab order; this one stays, the line says
+ * what is missing, and the caller decides what pressing it does. A site that
+ * wants it held back anyway opts in with `selection.disableUntilReady`.
  */
 export declare function TotalBar({ selection, format, classNames, }: {
     selection: ServiceSelection;

package/dist/booking/internal/service-multi.js

@@ -53,16 +53,20 @@ export function PersonTabs({ people, active, done, onSelect, labels, labelledBy,
  * missing, and «Next». The same bar as `SummaryBar`, so the step reads as one
  * flow; a caller that also renders `SummaryBar` hides it on this step.
  *
- * «Next» is never disabled. A disabled button explains nothing and is skipped
- * by a screen reader's tab order; this one stays, the line says what is
- * missing, and the caller decides what pressing it does.
+ * «Next» is not disabled by default. A disabled button explains nothing and
+ * is skipped by a screen reader's tab order; this one stays, the line says
+ * what is missing, and the caller decides what pressing it does. A site that
+ * wants it held back anyway opts in with `selection.disableUntilReady`.
  */
 export function TotalBar({ selection, format, classNames, }) {
     const { total, canContinue, labels } = selection;
+    const held = selection.disableUntilReady === true && !canContinue;
     return (_jsxs("div", { className: slotClass(classNames, 'bar', 'sticky bottom-0 z-40 border-t border-border bg-background/95 backdrop-blur-md'), children: [_jsx(LiveStatus, { text: selection.notice ?? null, className: "px-5 text-sm font-medium text-foreground [&:not(:empty)]:pt-3" }), _jsxs("div", { className: "flex h-16 items-center justify-between gap-4 px-5", children: [_jsxs("div", { "aria-live": "polite", "aria-atomic": "true", className: "min-w-0 text-sm tabular-nums", children: [total !== null && (_jsx("p", { className: "truncate font-semibold", children: renderLabel(labels['service.total'], {
                                     minutes: total.minutes,
                                     price: format.price(total.priceOre),
-                                }) })), !canContinue && (_jsx("p", { className: "truncate text-muted-foreground", children: renderLabel(labels['service.chooseFirst']) }))] }), _jsx(BookingButton, { size: "lg", onClick: selection.onContinue, children: renderLabel(labels['service.continue']) })] })] }));
+                                }) })), !canContinue && (_jsx("p", { className: "truncate text-muted-foreground", children: renderLabel(labels['service.chooseFirst']) }))] }), _jsx(BookingButton, { size: "lg", onClick: selection.onContinue, disabled: held, "aria-disabled": held || undefined, "data-disabled": held ? '' : undefined, className: cn(
+                        // Material 3's disabled button: 38 % content on a 12 % container.
+                        held && 'disabled:bg-foreground/12 disabled:text-foreground/38 disabled:opacity-100', classNames?.next), children: renderLabel(labels['service.continue']) })] })] }));
 }
 /**
  * A service card on the multi-select step: a real checkbox inside its label.

package/dist/booking/internal/ui.d.ts

@@ -11,18 +11,26 @@ import type { ComponentProps } from 'react';
  */
 export type BookingButtonVariant = 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link';
 export type BookingButtonSize = 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm';
+/**
+ * The corners: `default` is booking's near-square look (each size's own);
+ * `full` a pill, for a site whose buttons are round.
+ */
+export type BookingButtonRadius = 'default' | 'full';
 /** Classes for a booking button — also for a link that should look like one. */
-export declare function bookingButtonClass({ variant, size, className, }?: {
+export declare function bookingButtonClass({ variant, size, radius, className, }?: {
     variant?: BookingButtonVariant;
     size?: BookingButtonSize;
+    radius?: BookingButtonRadius;
     className?: string;
 }): string;
 export interface BookingButtonProps extends ComponentProps<'button'> {
     variant?: BookingButtonVariant;
     size?: BookingButtonSize;
+    /** `full` for pill-shaped corners. Default: booking's near-square ones. */
+    radius?: BookingButtonRadius;
 }
 /** The booking screens' button. A native `<button type="button">` unless told otherwise. */
-export declare function BookingButton({ variant, size, className, type, ...props }: BookingButtonProps): import("react").JSX.Element;
+export declare function BookingButton({ variant, size, radius, className, type, ...props }: BookingButtonProps): import("react").JSX.Element;
 /** Override for meda `Input` in booking forms. */
 export declare const BOOKING_INPUT_CLASS = "h-12 rounded-[4px] border-[1.5px] border-input bg-background px-4 py-3 text-base transition-[color,border-color] focus-visible:border-primary focus-visible:ring-0 aria-invalid:border-destructive sm:text-base md:text-base dark:aria-invalid:border-destructive/50";
 /** Override for meda `Textarea` in booking forms. */

package/dist/booking/internal/ui.js

@@ -18,12 +18,12 @@ const BUTTON_SIZES = {
     'icon-sm': 'size-8 rounded-[min(var(--radius-md),10px)]',
 };
 /** Classes for a booking button — also for a link that should look like one. */
-export function bookingButtonClass({ variant = 'default', size = 'default', className, } = {}) {
-    return cn(BUTTON_BASE, BUTTON_VARIANTS[variant], BUTTON_SIZES[size], className);
+export function bookingButtonClass({ variant = 'default', size = 'default', radius = 'default', className, } = {}) {
+    return cn(BUTTON_BASE, BUTTON_VARIANTS[variant], BUTTON_SIZES[size], radius === 'full' && 'rounded-full', className);
 }
 /** The booking screens' button. A native `<button type="button">` unless told otherwise. */
-export function BookingButton({ variant, size, className, type = 'button', ...props }) {
-    return (_jsx("button", { type: type, "data-slot": "button", className: bookingButtonClass({ variant, size, className }), ...props }));
+export function BookingButton({ variant, size, radius, className, type = 'button', ...props }) {
+    return (_jsx("button", { type: type, "data-slot": "button", className: bookingButtonClass({ variant, size, radius, className }), ...props }));
 }
 /** Override for meda `Input` in booking forms. */
 export const BOOKING_INPUT_CLASS = 'h-12 rounded-[4px] border-[1.5px] border-input bg-background px-4 py-3 text-base transition-[color,border-color] focus-visible:border-primary focus-visible:ring-0 aria-invalid:border-destructive sm:text-base md:text-base dark:aria-invalid:border-destructive/50';

package/dist/booking/service-screen.d.ts

@@ -51,8 +51,10 @@ export type ServiceScreenLabels = Record<(typeof SERVICE_SCREEN_LABEL_KEYS)[numb
  * - `price` — a card's price (passed to `ServiceCard`, and the «same as last time» card's)
  * - `tab` / `tabSelected` — a person's tab in a multi-select family / the open one
  * - `bar` — the multi-select step's sticky total bar
+ * - `next` — the bar's «Next» button (`data-disabled` while
+ *   `selection.disableUntilReady` holds it back, for a site's own disabled look)
  */
-export type ServiceScreenSlot = 'tab' | 'tabSelected' | 'bar' | 'root' | 'heading' | 'pill' | 'pillSelected' | 'groupHeading' | 'card' | 'cardSelected' | 'price';
+export type ServiceScreenSlot = 'tab' | 'tabSelected' | 'bar' | 'next' | 'root' | 'heading' | 'pill' | 'pillSelected' | 'groupHeading' | 'card' | 'cardSelected' | 'price';
 /** One service group, in display order. */
 export interface ServiceScreenCategory {
     key: string;
@@ -127,10 +129,18 @@ export interface ServiceSelection {
     } | null;
     /**
      * Whether every person has at least one service. «Next» stays enabled
-     * either way (a disabled button explains nothing); while `false` the bar
-     * shows `service.chooseFirst` instead of the total.
+     * either way (a disabled button explains nothing) unless
+     * `disableUntilReady`; while `false` the bar shows `service.chooseFirst`
+     * under the total.
      */
     canContinue: boolean;
+    /**
+     * Opt-in: hold «Next» back — `disabled`, `aria-disabled` and
+     * `data-disabled` — while `canContinue` is `false`, drawn in the Material 3
+     * disabled look (38 % content on a 12 % container). The line under the
+     * total still says what is missing. Default: off, «Next» always enabled.
+     */
+    disableUntilReady?: boolean;
     /** A refusal to say politely (e.g. too many services), announced as a live region. */
     notice?: string | null;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {
@@ -220,12 +220,12 @@
     "@fontsource-variable/geist-mono": "5.3.0",
     "@react-three/fiber": "9.8.1",
     "@size-limit/preset-small-lib": "13.1.1",
-    "@storybook/addon-a11y": "10.6.1",
-    "@storybook/addon-docs": "10.6.1",
-    "@storybook/addon-mcp": "10.6.1",
-    "@storybook/addon-themes": "10.6.1",
-    "@storybook/addon-vitest": "10.6.1",
-    "@storybook/react-vite": "10.6.1",
+    "@storybook/addon-a11y": "10.6.2",
+    "@storybook/addon-docs": "10.6.2",
+    "@storybook/addon-mcp": "10.6.2",
+    "@storybook/addon-themes": "10.6.2",
+    "@storybook/addon-vitest": "10.6.2",
+    "@storybook/react-vite": "10.6.2",
     "@tailwindcss/cli": "4.3.3",
     "@tailwindcss/vite": "4.3.3",
     "@tanstack/intent": "0.5.5",
@@ -235,31 +235,31 @@
     "@types/react-dom": "19.3.0",
     "@types/three": "0.185.4",
     "@vitejs/plugin-react": "6.1.2",
-    "@vitest/browser-playwright": "4.1.11",
-    "@vitest/coverage-istanbul": "4.1.11",
-    "@vitest/coverage-v8": "4.1.11",
+    "@vitest/browser-playwright": "4.1.12",
+    "@vitest/coverage-istanbul": "4.1.12",
+    "@vitest/coverage-v8": "4.1.12",
     "@xyflow/react": "12.12.0",
     "chromatic": "18.12.0",
     "esbuild": "0.28.2",
     "fast-check": "4.10.2",
     "husky": "9.1.7",
-    "jsdom": "30.1.2",
+    "jsdom": "30.1.3",
     "next-themes": "0.4.6",
-    "playwright": "1.64.0",
-    "react": "19.2.8",
-    "react-dom": "19.2.8",
+    "playwright": "1.64.1",
+    "react": "19.2.9",
+    "react-dom": "19.2.9",
     "react-markdown": "10.1.0",
     "rehype-highlight": "7.0.2",
     "remark-gfm": "4.0.1",
     "size-limit": "13.1.1",
-    "storybook": "10.6.1",
+    "storybook": "10.6.2",
     "tailwindcss": "4.3.3",
     "three": "0.186.1",
     "typescript": "~6.0.3",
     "vite": "8.3.4",
-    "vitest": "4.1.11",
+    "vitest": "4.1.12",
     "vitest-axe": "0.1.0",
-    "wrangler": "4.149.0"
+    "wrangler": "4.151.0"
   },
   "keywords": [
     "tanstack-intent"