@riverbankcms/sdk 0.67.0 → 0.68.0

package/dist/styles/index.css

@@ -5593,32 +5593,32 @@
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--muted {
-  opacity: var(--ab-text-muted-opacity);
+  opacity: var(--ab-text-muted-opacity, 0.6);
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--faint {
-  opacity: var(--ab-text-faint-opacity);
+  opacity: var(--ab-text-faint-opacity, 0.4);
 }
 
 /* Selection cards (service, resource, time slot) */
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card {
   position: relative;
   padding: 1rem;
-  border: 2px solid var(--ab-card-border);
-  border-radius: var(--rb-block-radius);
+  border: 2px solid var(--ab-card-border, rgb(var(--tb-border, 226 232 240)));
+  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
   text-align: left;
   background: transparent;
   cursor: pointer;
-  transition: border-color var(--rb-block-transition) ease, background-color var(--rb-block-transition) ease;
+  transition: border-color var(--rb-block-transition, 150ms) ease, background-color var(--rb-block-transition, 150ms) ease;
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card:hover {
-  border-color: var(--ab-card-border-hover);
+  border-color: var(--ab-card-border-hover, rgba(var(--tb-primary, 17 24 39), 0.5));
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card--selected {
-  border-color: var(--ab-card-border-selected);
-  background-color: var(--ab-card-bg-selected);
+  border-color: var(--ab-card-border-selected, rgb(var(--tb-primary, 17 24 39)));
+  background-color: var(--ab-card-bg-selected, rgba(var(--tb-primary, 17 24 39), 0.05));
 }
 
 /* Checkmark indicator */
@@ -5627,7 +5627,7 @@
   width: 1.25rem;
   height: 1.25rem;
   border-radius: 50%;
-  background-color: var(--ab-check-bg);
+  background-color: var(--ab-check-bg, rgb(var(--tb-primary, 17 24 39)));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -5636,42 +5636,42 @@
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-check svg {
   width: 0.75rem;
   height: 0.75rem;
-  color: var(--ab-check-text);
+  color: var(--ab-check-text, rgb(var(--tb-background, 255 255 255)));
 }
 
 /* Info box (service summary) */
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-info-box {
   padding: 1rem;
-  border: 1px solid var(--ab-card-border);
-  border-radius: var(--rb-block-radius);
-  background-color: var(--ab-muted-bg);
+  border: 1px solid var(--ab-card-border, rgb(var(--tb-border, 226 232 240)));
+  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
+  background-color: var(--ab-muted-bg, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));
 }
 
 /* Alert states */
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert {
   padding: 0.75rem 1rem;
-  border-radius: var(--rb-block-radius);
+  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
   font-size: 0.875rem;
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--success {
-  background-color: var(--ab-success-bg);
-  color: var(--ab-success-text);
+  background-color: var(--ab-success-bg, rgba(var(--tb-success, 22 163 74), 0.1));
+  color: var(--ab-success-text, rgb(var(--tb-success, 22 163 74)));
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--error {
-  background-color: var(--ab-error-bg);
-  color: var(--ab-error-text);
+  background-color: var(--ab-error-bg, rgba(var(--tb-destructive, 220 38 38), 0.1));
+  color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--warning {
-  background-color: var(--ab-warning-bg);
-  color: var(--ab-warning-text);
+  background-color: var(--ab-warning-bg, rgba(var(--tb-warning, 245 158 11), 0.1));
+  color: var(--ab-warning-text, rgb(var(--tb-warning, 245 158 11)));
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--info {
-  background-color: var(--ab-info-bg);
-  color: var(--ab-info-text);
+  background-color: var(--ab-info-bg, rgba(var(--tb-info, 14 165 233), 0.1));
+  color: var(--ab-info-text, rgb(var(--tb-info, 14 165 233)));
 }
 
 /* Form elements */
@@ -5683,7 +5683,7 @@
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-required {
-  color: var(--ab-error-text);
+  color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));
   margin-left: 0.125rem;
 }
 
@@ -5692,19 +5692,19 @@
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-textarea {
   width: 100%;
   padding: 0.5rem 0.75rem;
-  border: 1px solid var(--ab-input-border);
-  border-radius: var(--rb-block-radius);
+  border: 1px solid var(--ab-input-border, rgb(var(--tb-border, 226 232 240)));
+  border-radius: var(--ab-input-radius, var(--radius-control, var(--rb-block-radius, 1rem)));
   background: transparent;
   font-size: 0.875rem;
-  transition: border-color var(--rb-block-transition) ease, box-shadow var(--rb-block-transition) ease;
+  transition: border-color var(--rb-block-transition, 150ms) ease, box-shadow var(--rb-block-transition, 150ms) ease;
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-input:focus,
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-select:focus,
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-textarea:focus {
   outline: none;
-  border-color: var(--ab-card-border-selected);
-  box-shadow: 0 0 0 3px var(--ab-input-focus-ring);
+  border-color: var(--ab-card-border-selected, rgb(var(--tb-primary, 17 24 39)));
+  box-shadow: 0 0 0 3px var(--ab-input-focus-ring, rgba(var(--tb-primary, 17 24 39), 0.3));
 }
 
 /* Buttons */
@@ -5713,31 +5713,31 @@
   align-items: center;
   justify-content: center;
   padding: 0.5rem 1.5rem;
-  border-radius: var(--rb-block-radius);
+  border-radius: var(--ab-button-radius, var(--rb-button-radius, var(--rb-block-radius, 1rem)));
   font-size: 0.875rem;
   font-weight: 500;
   cursor: pointer;
-  transition: background-color var(--rb-block-transition) ease, border-color var(--rb-block-transition) ease;
+  transition: background-color var(--rb-block-transition, 150ms) ease, border-color var(--rb-block-transition, 150ms) ease;
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--primary {
   flex: 1;
-  background-color: var(--ab-btn-primary-bg);
-  color: var(--ab-btn-primary-text);
+  background-color: var(--ab-btn-primary-bg, rgb(var(--tb-primary, 17 24 39)));
+  color: var(--ab-btn-primary-text, rgb(var(--tb-primaryForeground, 255 255 255)));
   border: none;
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--primary:hover:not(:disabled) {
-  background-color: var(--ab-btn-primary-hover);
+  background-color: var(--ab-btn-primary-hover, rgba(var(--tb-primary, 17 24 39), 0.9));
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--secondary {
   background: transparent;
-  border: 1px solid var(--ab-btn-secondary-border);
+  border: 1px solid var(--ab-btn-secondary-border, rgb(var(--tb-border, 226 232 240)));
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--secondary:hover:not(:disabled) {
-  background-color: var(--ab-btn-secondary-hover);
+  background-color: var(--ab-btn-secondary-hover, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--link {
@@ -5767,8 +5767,8 @@
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-skeleton {
   height: 2.5rem;
   width: 100%;
-  background-color: var(--ab-muted-bg);
-  border-radius: var(--rb-block-radius);
+  background-color: var(--ab-muted-bg, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));
+  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
   animation: ab-pulse 1.5s ease-in-out infinite;
 }
 
@@ -5797,7 +5797,7 @@
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-link {
   display: inline;
   margin-left: 0.5rem;
-  color: rgb(var(--tb-primary));
+  color: rgb(var(--tb-primary, 17 24 39));
   background: none;
   border: none;
   padding: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riverbankcms/sdk",
-  "version": "0.67.0",
+  "version": "0.68.0",
   "description": "Riverbank CMS SDK for headless content consumption",
   "main": "./dist/server/index.mjs",
   "module": "./dist/server/index.mjs",

package/dist/_dts/blocks/src/system/runtime/components/booking/DateTimeSelectionStep.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import type { BookingFormService } from '../../nodes/booking-form.state';
-interface DateTimeSelectionStepProps {
-    siteId: string;
-    preSelectedServiceId?: string;
-    preSelectedResourceId?: string;
-    /** When there's only one service, pass it here to display info and auto-select */
-    singleService?: BookingFormService;
-}
-/**
- * DateTimeSelectionStep Component
- *
- * Step 2: Date and time slot selection
- * Integrates with multi-step context and fetches available slots.
- * Prefetches available dates to filter the date picker.
- */
-export declare function DateTimeSelectionStep({ siteId, preSelectedServiceId, preSelectedResourceId, singleService, }: DateTimeSelectionStepProps): React.ReactElement;
-export {};

package/dist/_dts/blocks/src/system/runtime/components/booking/PaymentOptionSelectionStep.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { type BookingFormService } from '../../nodes/booking-form.state';
-type PaymentOptionSelectionStepProps = Readonly<{
-    services: readonly BookingFormService[];
-    defaultServiceId?: string;
-    enableAppointmentPackages?: boolean;
-}>;
-export declare function PaymentOptionSelectionStep({ services, defaultServiceId, enableAppointmentPackages, }: PaymentOptionSelectionStepProps): React.ReactElement;
-export {};

package/dist/_dts/blocks/src/system/runtime/components/booking/ServiceResourceSelector.d.ts

@@ -1,44 +0,0 @@
-export interface Service {
-    id: string;
-    title: string;
-    description?: string;
-    durationMinutes?: number;
-}
-export interface Resource {
-    id: string;
-    displayName: string;
-    title?: string;
-}
-export interface ServiceResourceSelectorProps {
-    /** @deprecated Site ID is now provided by BlockApiProvider context */
-    siteId?: string;
-    services: readonly Service[];
-    selectedServiceId?: string;
-    selectedResourceId?: string;
-    preSelectedServiceId?: string;
-    preSelectedResourceId?: string;
-    forceServiceSelection?: boolean;
-    shouldAutoSelectSingleResource?: boolean;
-    onSelect: (selection: {
-        serviceId: string;
-        resourceId?: string;
-    }) => void;
-    onBack?: () => void;
-    heading?: string;
-    description?: string;
-}
-/**
- * ServiceResourceSelector Component
- *
- * Handles Step 1 of the booking flow: service and resource selection.
- * Only shown when the booking form allows multiple services or when
- * resource selection is needed.
- *
- * Features:
- * - Service selection (if multiple services available)
- * - Resource selection (if multiple resources available for selected service)
- * - Auto-skips if only one option available
- * - Fetches resources dynamically when service is selected
- */
-export declare function ServiceResourceSelector({ siteId: _siteId, // Deprecated: siteId now comes from BlockApiProvider context
-services, selectedServiceId: controlledSelectedServiceId, selectedResourceId: controlledSelectedResourceId, preSelectedServiceId, preSelectedResourceId, forceServiceSelection, shouldAutoSelectSingleResource, onSelect, onBack, heading, description, }: ServiceResourceSelectorProps): React.ReactElement;

package/dist/_dts/blocks/src/system/runtime/components/booking/ServiceResourceSelector.state.d.ts

@@ -1,23 +0,0 @@
-import type { Resource, Service } from "./ServiceResourceSelector";
-export type InitialServiceSelection = Readonly<{
-    serviceId: string;
-    preserveResourceId?: string;
-}>;
-export declare function shouldShowServiceSelection(input: Readonly<{
-    services: readonly Service[];
-    forceServiceSelection: boolean;
-}>): boolean;
-export declare function resolveInitialServiceSelection(input: Readonly<{
-    services: readonly Service[];
-    selectedServiceId?: string;
-    preSelectedServiceId?: string;
-    preSelectedResourceId?: string;
-    shouldAutoSelectSingleService?: boolean;
-    hasLoadedInitialService: boolean;
-}>): InitialServiceSelection | null;
-export declare function resolveAutoSelectedResourceId(input: Readonly<{
-    resources: readonly Resource[];
-    preSelectedResourceId?: string;
-    selectedResourceId?: string;
-    shouldAutoSelectSingleResource: boolean;
-}>): string | null;

package/dist/_dts/blocks/src/system/runtime/components/booking/ServiceSelectionStep.d.ts

@@ -1,18 +0,0 @@
-import React from "react";
-import { type BookingFormService } from "../../nodes/booking-form.state";
-interface ServiceSelectionStepProps {
-    siteId: string;
-    services: readonly BookingFormService[];
-    preSelectedServiceId?: string;
-    preSelectedResourceId?: string;
-    forceServiceSelection?: boolean;
-    shouldAutoSelectSingleResource?: boolean;
-}
-/**
- * ServiceSelectionStep Component
- *
- * Step 1: Service and optionally resource selection
- * Uses multi-step context to update booking data
- */
-export declare function ServiceSelectionStep({ siteId, services, preSelectedServiceId, preSelectedResourceId, forceServiceSelection, shouldAutoSelectSingleResource, }: ServiceSelectionStepProps): React.ReactElement;
-export {};

package/dist/_dts/blocks/src/system/runtime/components/booking/slotDisplay.d.ts

@@ -1,2 +0,0 @@
-import type { TimeSlot } from "../../hooks/useAvailableSlots";
-export declare function collapseAnyAvailableSlotsForDisplay(slots: readonly TimeSlot[]): TimeSlot[];

package/dist/_dts/blocks/src/system/runtime/components/multi-step/MultiStepForm.d.ts

@@ -1,21 +0,0 @@
-import React from "react";
-import type { MultiStepFormProps } from "./types";
-/**
- * MultiStepForm Component
- *
- * Generic orchestrator for multi-step forms. Handles step navigation,
- * data accumulation, validation, and progress indication.
- *
- * Usage:
- * ```tsx
- * <MultiStepForm
- *   steps={[
- *     { id: 'step1', title: 'Step 1', component: <Step1 /> },
- *     { id: 'step2', title: 'Step 2', component: <Step2 /> },
- *   ]}
- *   onComplete={(data) => console.log('Done!', data)}
- *   progressStyle="dots"
- * />
- * ```
- */
-export declare function MultiStepForm<TData = unknown>({ steps, initialData, onComplete, onStepChange, onDataChange, progressStyle, className, persistToUrl, allowSkip, }: MultiStepFormProps<TData>): React.ReactElement;

package/dist/_dts/blocks/src/system/runtime/components/multi-step/useMultiStep.d.ts

@@ -1,15 +0,0 @@
-import type { Step, MultiStepContextValue } from './types';
-/**
- * Core hook for multi-step form logic
- *
- * Manages step navigation, data accumulation, and validation.
- * This is the engine that powers the MultiStepForm component.
- */
-export declare function useMultiStep<TData = unknown>({ steps, initialData, onStepChange, onDataChange, onComplete, persistToUrl, }: {
-    steps: Step<TData>[];
-    initialData?: Partial<TData>;
-    onStepChange?: (stepId: string, stepIndex: number) => void;
-    onDataChange?: (data: Partial<TData>) => void;
-    onComplete?: (data: TData) => void | Promise<void>;
-    persistToUrl?: boolean;
-}): MultiStepContextValue<TData>;

package/dist/_dts/blocks/src/system/runtime/components/multi-step/useMultiStep.state.d.ts

@@ -1,51 +0,0 @@
-import type { Step } from './types';
-export type MultiStepWorkflowStatus = {
-    tag: 'idle';
-} | {
-    tag: 'validating';
-} | {
-    tag: 'submitting';
-};
-export type MultiStepState<TData = unknown> = {
-    data: Partial<TData>;
-    currentStepIndex: number;
-    errors: Record<string, string>;
-    status: MultiStepWorkflowStatus;
-};
-export type MultiStepAction<TData = unknown> = {
-    type: 'data-updated';
-    updates: Partial<TData>;
-} | {
-    type: 'step-changed';
-    stepIndex: number;
-} | {
-    type: 'validation-started';
-} | {
-    type: 'validation-succeeded';
-} | {
-    type: 'validation-failed';
-    errors: Record<string, string>;
-} | {
-    type: 'submission-started';
-} | {
-    type: 'submission-succeeded';
-} | {
-    type: 'submission-failed';
-    message: string;
-} | {
-    type: 'reset';
-    initialData: Partial<TData>;
-};
-export declare function createInitialMultiStepState<TData = unknown>(initialData: Partial<TData>): MultiStepState<TData>;
-export declare function multiStepReducer<TData = unknown>(state: MultiStepState<TData>, action: MultiStepAction<TData>): MultiStepState<TData>;
-export declare function getVisibleSteps<TData = unknown>(steps: Step<TData>[], data: Partial<TData>): Step<TData>[];
-export declare function findStepIndexById<TData = unknown>(visibleSteps: Step<TData>[], stepId: string): number;
-export declare function getNextStepIndex(state: MultiStepState, visibleStepCount: number): number;
-export declare function getPreviousStepIndex(state: MultiStepState): number;
-export declare function getNavigableStepIndex(stepIndex: number, visibleStepCount: number): number | null;
-export declare function selectIsValidating(state: MultiStepState): boolean;
-export declare function selectIsSubmitting(state: MultiStepState): boolean;
-export declare function selectCanGoNext(state: MultiStepState): boolean;
-export declare function selectCanGoBack(state: MultiStepState): boolean;
-export declare function selectIsFirstStep(state: MultiStepState): boolean;
-export declare function selectIsLastStep(state: MultiStepState, visibleStepCount: number): boolean;

package/dist/_dts/blocks/src/system/runtime/hooks/useBookingSteps.d.ts

@@ -1,22 +0,0 @@
-/**
- * Hook to build multi-step booking flow
- */
-import type { Step } from "../components/multi-step/types";
-import { type BookingFormConfig, type BookingFormData, type BookingFormService } from "../nodes/booking-form.state";
-export type { BookingFormData };
-/**
- * Build the array of steps for the booking flow
- *
- * Steps are conditionally included based on form configuration:
- * - Service selection: Only if multiple services available
- * - Date/time selection: Always included
- * - Custom fields: Only if form has fields defined
- */
-export declare function useBookingSteps(siteId: string, formConfig: BookingFormConfig | null, services: readonly BookingFormService[], options?: Readonly<{
-    serviceId?: string;
-    resourceId?: string;
-    requiresServiceSelection?: boolean;
-    requiresResourceSelection?: boolean;
-    shouldAutoSelectSingleResource?: boolean;
-    enableAppointmentPackages?: boolean;
-}>): Step<BookingFormData>[];