@cdx-ui/components 0.0.1-beta.15 → 0.0.1-beta.151

package/lib/module/components/CLAUDE.md

@@ -0,0 +1,195 @@
+# Components — authoring & styling conventions
+
+Auto-loaded when working in `packages/components/src/components/**`. Covers both the
+styled component files (`index.tsx`) and their co-located CVA variant files (`styles.ts`).
+
+---
+
+## Component Authoring (`index.tsx`)
+
+Styled components in `@cdx-ui/components` follow a consistent pattern. Read the full guides before making changes:
+
+- `docs/internal/practices/composition.md` — compound component pattern, naming conventions
+- `docs/internal/practices/types.md` — prop types, `I*Props` vs `*Props`, exporting
+- `docs/internal/practices/styling.md` — `cn()`, CVA, token classes, `Platform.select()`
+- `docs/internal/practices/state.md` — `useControllableState`, `composeEventHandlers`
+- `docs/internal/practices/data-attributes.md` — `data-[state]`, `data-slot`, and `data-icon` conventions
+- `docs/internal/practices/as-child.md` — styled-layer `asChild` via re-exported `Slot`
+
+## Six standards (Standards 4–6 apply here)
+
+Standards 1–3 govern primitive-layer authoring (see `packages/primitives/src/CLAUDE.md`).
+Standards 4–6 govern the styled layer:
+
+### Standard 4 — `data-slot` attributes
+
+Every public styled slot emits a stable `data-slot="<component>-<part>"` attribute on its outermost rendered element. The convention is lowercase, kebab-case, `<component>` then `-<slot>` if not the root.
+
+| Slot               | Attribute                    |
+| ------------------ | ---------------------------- |
+| `<Button>` root    | `data-slot="button"`         |
+| `<Button.Label>`   | `data-slot="button-label"`   |
+| `<Button.Icon>`    | `data-slot="button-icon"`    |
+| `<Button.Spinner>` | `data-slot="button-spinner"` |
+| `<Button.Group>`   | `data-slot="button-group"`   |
+| `<IconButton>`     | `data-slot="icon-button"`    |
+| `<Dialog.Content>` | `data-slot="dialog-content"` |
+
+Use `dataAttributes({ slot: '<component>-<part>' })` from `@cdx-ui/primitives` so the helper handles native (flat `data-*` keys) and web (RNW `dataSet`) correctly.
+
+#### Combining multiple data-attribute sources — use `mergeDataAttributes`
+
+When the same element receives `data-*` from more than one source (e.g. a slot identifier plus a position hint, or consumer-supplied data attrs flowing in through props), do **not** chain multiple `{...dataAttributes(...)}` spreads — on web each call returns `{ dataSet: {...} }` and a plain JSX spread replaces the `dataSet` key entirely, so the second source wipes out the first. Use `mergeDataAttributes(...)` from `@cdx-ui/primitives` to combine sources; later args win on key conflicts:
+
+```tsx
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+
+<Element
+  ref={ref}
+  className={...}
+  style={style}
+  {...props}
+  {...mergeDataAttributes(
+    props,                 // pulls in any consumer-supplied data attrs
+    dataAttributes({ slot: '<component>-<part>' }),
+    positionToDataIcon(position),                      // optional, may be undefined
+  )}
+/>
+```
+
+Spread `{...props}` first, then the merge — so any keys that `mergeDataAttributes` produces overwrite their counterparts in props with the merged values.
+
+When the styled component renders a primitive Root, the primitive Root applies the same pattern internally — incoming data attrs (slot from the styled layer) are merged with the primitive's own interaction-state data attrs and emitted once. The styled layer doesn't need to do anything special; just pass `data-slot` through and the primitive's merge does the rest.
+
+### Standard 5 — Static design variants vs. interaction state
+
+Variant functions take only static design inputs (`variant`/`color`/`size`/`fullWidth`/etc.). Interaction states (`hover`/`focus`/`active`/`disabled`/`focus-visible`) are expressed as `data-[...]:` selectors **inside** CVA variant strings, never as variant inputs.
+
+- CSS-layer state changes are free of React work: when the primitive flips `data-hover=true`, the CSS engine (web) and Uniwind's native style layer reconcile styles without re-rendering React, re-running CVA, or invoking `cn()`/`tailwind-merge`.
+- Variant-input state changes cascade React work: CVA re-runs, `cn()` re-merges, and className-prop reconciliation cascades through the tree.
+- Sub-slots can react to root state via parent selectors (`data-[hover=true]:`) without each slot subscribing to context (per Standard 1).
+- **Native compound conditions** — on native, prefer single-condition `data-[field-state=...]` selectors backed by a primitive-derived compound-state attribute over compound `data-[]:data-[]` chains (Uniwind matches only the last condition). Web may keep compound chains. See `Input/styles.ts` and `Select/styles.ts`; full practice in `docs/internal/practices/data-attributes.md` § "Compound state on native".
+
+### Standard 6 — Position hints (`data-icon="inline-start|inline-end"`)
+
+Icon-/spinner-bearing styled slots accept an optional `position?: 'leading' | 'trailing'` prop that emits `data-icon="inline-start|inline-end"`. Spacing rules in CVA target the `data-icon` attribute via logical-property utilities (`me-*`/`ms-*`) so RTL is handled for free.
+
+Mapping (via the shared `positionToDataIcon` helper at `packages/components/src/utils/positionToDataIcon.ts`):
+
+- `position="leading"` → `data-icon="inline-start"`
+- `position="trailing"` → `data-icon="inline-end"`
+- `position` omitted → no `data-icon` attribute, baseline spacing applies
+
+```tsx
+import { positionToDataIcon, type IconSlotPosition } from '../../utils/positionToDataIcon';
+
+interface ButtonIconProps {
+  position?: IconSlotPosition;
+  // ...
+}
+
+<Icon {...positionToDataIcon(position)} {...props} />;
+```
+
+```tsx
+<Button>
+  <Button.Icon as={CheckIcon} position="leading" />
+  <Button.Label>Confirm</Button.Label>
+</Button>
+```
+
+CVA expresses padding via logical-property selectors:
+
+```ts
+cva(['data-[icon=inline-start]:me-1.5 data-[icon=inline-end]:ms-1.5'], { ... });
+```
+
+Where: **styled layer.** Pure styling hint with no behavior or a11y semantics — fails Standard 3, so no primitive involvement.
+
+## Canonical reference
+
+`packages/components/src/components/Button/index.tsx` + `Button/styles.ts` is the canonical example for Standards 4–6:
+
+- `data-slot` on `Button`, `Button.Label`, `Button.Icon`, `Button.Spinner`, `Button.Group`
+- `asChild` re-uses `Slot` from `@cdx-ui/primitives` — no new primitive needed for sub-slots
+- `buttonIconVariants` / `buttonSpinnerVariants` carry `data-[icon=inline-start]:me-1.5 data-[icon=inline-end]:ms-1.5` so leading/trailing padding works without per-call overrides
+
+`packages/components/src/components/QuickActionButton/index.tsx` shows the second axis of Standard 1: a styled-layer sub-slot (the Indicator) opts into `useButtonContext()` when its styling reacts to interaction state. The pattern is the same as the primitive Root — call `useButtonContext()`, spread `mergeDataAttributes(props, dataAttributes({ ... }))` — only it lives in the styled layer.
+
+### Pattern summary
+
+Each component follows this structure (see `Button/index.tsx`):
+
+1. **Imports** — RN base components, primitive `Root` and `Slot` from `@cdx-ui/primitives`, `cn` + style context from `@cdx-ui/utils`, variant functions from `./styles`
+2. **Scope constant** — `const SCOPE = 'COMPONENT_NAME'` for `useStyleContext` with a `ParentContext.Provider` wrapper for static variant context
+3. **Root component** — renders the primitive Root (or a host element directly when no primitive exists), spreads `dataAttributes({ slot: '<component>' })`
+4. **Sub-slots** — each accepts `asChild`, renders a host element via `const Comp = asChild ? Slot : DefaultElement`, spreads `dataAttributes({ slot: '<component>-<slot>' })`. Sub-slots **do not** call `useButtonContext()` (or its equivalent) unless their own styling reacts to interaction state.
+5. **Position-aware sub-slots** — icon/spinner-style slots accept `position?: 'leading' | 'trailing'` and emit `data-icon` via `dataAttributes({ icon: '...' })`.
+6. **Compound export** — `Object.assign(RootComponent, { Sub1, Sub2 }) as CompoundType`
+
+### Key rules
+
+- Props interface extends RN base props + primitive `I*Props` + CVA `VariantProps` + `{ className?: string }`
+- Always accept and spread `style` alongside `className`
+- Variant defaults in destructuring must match CVA `defaultVariants`
+- `displayName` set on every exported sub-component
+- `className` is merged last via `cn()` so consumer overrides always win
+- Never hardcode colors — use semantic token classes (`bg-surface-*`, `text-content-*`, `border-stroke-*`)
+- Event handlers composed via `composeEventHandlers` from `@cdx-ui/utils`
+- Third-party libraries fully abstracted — no adopted library types leak to consumers
+- **`data-slot`** emitted on every styled slot via `dataAttributes({ slot: '<component>-<part>' })`
+- **`asChild`** supported on every styled slot — `const Comp = asChild ? Slot : DefaultElement`
+- **`position`** prop on icon/spinner-style slots maps to `data-icon="inline-start|inline-end"`
+
+---
+
+## Styling Conventions (`styles.ts`)
+
+Variant definitions live in co-located `styles.ts` files using CVA. Read the full guides before making changes:
+
+- `docs/internal/practices/styling.md` — `cn()`, CVA, token architecture, dark mode, `Platform.select()`
+- `docs/internal/practices/data-attributes.md` — `data-[state]` and `data-icon` selectors
+
+### Pattern summary
+
+Each `styles.ts` exports CVA variant functions and their derived `VariantProps` types (see `Button/styles.ts` as the canonical example):
+
+```ts
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+
+export const componentRootVariants = cva(
+  [
+    /* base classes + interaction state selectors (data-[hover=true]:..., data-[active=true]:...) */
+  ],
+  {
+    variants: {
+      /* static design axes only — variant, color, size, fullWidth, etc. */
+    },
+    compoundVariants: [
+      /* variant × variant combinations */
+    ],
+    defaultVariants: {
+      /* defaults matching the component's destructured defaults */
+    },
+  },
+);
+
+export type ComponentVariantProps = VariantProps<typeof componentRootVariants>;
+```
+
+### Key rules
+
+- **Semantic token classes only** — use `bg-surface-action-strong`, `text-content-primary`, `border-stroke-primary`, etc. Never hardcode hex colors, `bg-white`, `text-black`, or raw Tailwind color scales for themed values.
+- **`data-[state]` selectors** — use `data-[disabled=true]:`, `data-[hover=true]:`, `data-[active=true]:`, `data-[focus-visible=true]:` for interaction states. Primitives emit these data attributes (Standard 1). **Interaction state is never a CVA variant input** (Standard 5). On native, prefer single-condition `data-[field-state=...]` selectors backed by a primitive-derived compound-state attribute over compound `data-[]:data-[]` chains (which only match the last condition); web may keep compound chains. See `Input/styles.ts` / `Select/styles.ts`.
+- **`data-[icon=inline-start|inline-end]` selectors** for icon/spinner position spacing (Standard 6) — pair with logical-property utilities (`me-*`/`ms-*`) so RTL flips automatically.
+- **`Platform.select()`** for platform-specific classes — web gets `data-[hover=true]` styles (hover exists on web); native responds only to `data-[active=true]` (press). Always set `default` (native) and `web` keys.
+- **Shared style primitives** — import `DISABLED_CURSOR`, `TRANSITION_COLORS`, etc. from `../../styles/constants` for cross-component consistency.
+- **`web:` prefix** for web-only utilities — e.g., `web:outline-none`, `web:focus-visible:ring-2`.
+- **`compoundVariants`** for variant × variant combinations where simple variant merging is insufficient.
+- **`defaultVariants`** must match the destructured defaults in the component's `index.tsx`.
+- **One `cva()` per sub-component** — root, text, icon, spinner, etc. each get their own variant function.
+- **Export `VariantProps` types** — derived via `VariantProps<typeof variantFn>` for the component layer to consume.
+- **No dynamic string construction** — all Tailwind class names must be statically detectable by the Tailwind scanner.
+- **CSS variables for token values** — use `rounded-[var(--border-radius-button)]` syntax when referencing design tokens not mapped to Tailwind utilities.

package/lib/module/components/Calendar/CalendarMonthHeader.js

@@ -0,0 +1,92 @@
+"use strict";
+
+import { forwardRef, useCallback, useMemo } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { formatCalendarMonthYear, formatMonthId, parseMonthId, resolveDateComponentLabels } from '@cdx-ui/formatters';
+import { cn } from '@cdx-ui/utils';
+import { ChevronLeft, ChevronRight, KeyboardArrowDown } from '@cdx-ui/icons';
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { calendarMonthHeaderIconVariants, calendarMonthHeaderLabelVariants, calendarMonthHeaderNavVariants, calendarMonthHeaderToggleVariants, calendarMonthHeaderVariants } from './styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CalendarMonthHeader = /*#__PURE__*/forwardRef(({
+  monthId,
+  onMonthIdChange,
+  disabled = false,
+  view,
+  onViewChange,
+  locale = 'en-US',
+  labels: labelsProp,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const labels = useMemo(() => resolveDateComponentLabels(labelsProp), [labelsProp]);
+  const label = formatCalendarMonthYear(monthId, {
+    locale
+  });
+  const isYearView = view === 'year';
+  const shiftMonth = useCallback(delta => {
+    const parts = parseMonthId(monthId);
+    if (!parts) {
+      return;
+    }
+    const date = new Date(parts.year, parts.month - 1 + delta, 1);
+    onMonthIdChange(formatMonthId({
+      year: date.getFullYear(),
+      month: date.getMonth() + 1
+    }));
+  }, [monthId, onMonthIdChange]);
+  const toggleYearView = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    onViewChange(isYearView ? 'month' : 'year');
+  }, [disabled, isYearView, onViewChange]);
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    className: cn(calendarMonthHeaderVariants(), className),
+    style: style,
+    ...props,
+    children: [/*#__PURE__*/_jsxs(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: isYearView ? labels.showCalendar : labels.showYearPicker,
+      disabled: disabled,
+      onPress: toggleYearView,
+      className: calendarMonthHeaderToggleVariants(),
+      children: [/*#__PURE__*/_jsx(Text, {
+        className: calendarMonthHeaderLabelVariants({
+          isYearView
+        }),
+        numberOfLines: 1,
+        children: label
+      }), /*#__PURE__*/_jsx(Icon, {
+        as: isYearView ? KeyboardArrowDown : ChevronRight,
+        className: calendarMonthHeaderIconVariants({
+          isYearView
+        })
+      })]
+    }), !isYearView ? /*#__PURE__*/_jsxs(View, {
+      className: calendarMonthHeaderNavVariants(),
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        as: ChevronLeft,
+        variant: "ghost",
+        color: "neutral",
+        size: "small",
+        accessibilityLabel: labels.previousMonth,
+        isDisabled: disabled,
+        onPress: () => shiftMonth(-1)
+      }), /*#__PURE__*/_jsx(IconButton, {
+        as: ChevronRight,
+        variant: "ghost",
+        color: "neutral",
+        size: "small",
+        accessibilityLabel: labels.nextMonth,
+        isDisabled: disabled,
+        onPress: () => shiftMonth(1)
+      })]
+    }) : null]
+  });
+});
+CalendarMonthHeader.displayName = 'CalendarMonthHeader';
+//# sourceMappingURL=CalendarMonthHeader.js.map

package/lib/module/components/Calendar/CalendarMonthHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useCallback","useMemo","Pressable","Text","View","formatCalendarMonthYear","formatMonthId","parseMonthId","resolveDateComponentLabels","cn","ChevronLeft","ChevronRight","KeyboardArrowDown","Icon","IconButton","calendarMonthHeaderIconVariants","calendarMonthHeaderLabelVariants","calendarMonthHeaderNavVariants","calendarMonthHeaderToggleVariants","calendarMonthHeaderVariants","jsx","_jsx","jsxs","_jsxs","CalendarMonthHeader","monthId","onMonthIdChange","disabled","view","onViewChange","locale","labels","labelsProp","className","style","props","ref","label","isYearView","shiftMonth","delta","parts","date","Date","year","month","getFullYear","getMonth","toggleYearView","children","accessibilityRole","accessibilityLabel","showCalendar","showYearPicker","onPress","numberOfLines","as","variant","color","size","previousMonth","isDisabled","nextMonth","displayName"],"sourceRoot":"../../../../src","sources":["components/Calendar/CalendarMonthHeader.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Calendar/CalendarYearPickerGrid.js

@@ -0,0 +1,70 @@
+"use strict";
+
+import { forwardRef, useCallback, useMemo } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { formatMonthId, formatSelectYear, parseMonthId, resolveDateComponentLabels } from '@cdx-ui/formatters';
+import { cn } from '@cdx-ui/utils';
+import { calendarPillCellTextVariants, calendarPillCellVariants, calendarYearPickerGridVariants } from './styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const YEAR_RANGE_BEFORE = 9;
+const YEAR_RANGE_AFTER = 11;
+export const CalendarYearPickerGrid = /*#__PURE__*/forwardRef(({
+  monthId,
+  onMonthIdChange,
+  disabled = false,
+  onViewChange,
+  labels: labelsProp,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const labels = useMemo(() => resolveDateComponentLabels(labelsProp), [labelsProp]);
+  const parts = parseMonthId(monthId);
+  const currentYear = parts?.year ?? new Date().getFullYear();
+  const currentMonth = parts?.month ?? 1;
+  const years = useMemo(() => Array.from({
+    length: YEAR_RANGE_BEFORE + YEAR_RANGE_AFTER + 1
+  }, (_, i) => currentYear - YEAR_RANGE_BEFORE + i), [currentYear]);
+  const selectYear = useCallback(year => {
+    if (disabled) {
+      return;
+    }
+    onMonthIdChange(formatMonthId({
+      year,
+      month: currentMonth
+    }));
+    onViewChange('month');
+  }, [currentMonth, disabled, onMonthIdChange, onViewChange]);
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    className: cn(calendarYearPickerGridVariants(), className),
+    style: style,
+    accessibilityRole: "none",
+    ...props,
+    children: years.map(year => {
+      const selected = year === currentYear;
+      return /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityState: {
+          selected,
+          disabled
+        },
+        accessibilityLabel: formatSelectYear(labels, year),
+        disabled: disabled,
+        onPress: () => selectYear(year),
+        className: calendarPillCellVariants({
+          selected,
+          disabled
+        }),
+        children: /*#__PURE__*/_jsx(Text, {
+          className: calendarPillCellTextVariants({
+            selected
+          }),
+          children: String(year)
+        })
+      }, year);
+    })
+  });
+});
+CalendarYearPickerGrid.displayName = 'CalendarYearPickerGrid';
+//# sourceMappingURL=CalendarYearPickerGrid.js.map

package/lib/module/components/Calendar/CalendarYearPickerGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useCallback","useMemo","Pressable","Text","View","formatMonthId","formatSelectYear","parseMonthId","resolveDateComponentLabels","cn","calendarPillCellTextVariants","calendarPillCellVariants","calendarYearPickerGridVariants","jsx","_jsx","YEAR_RANGE_BEFORE","YEAR_RANGE_AFTER","CalendarYearPickerGrid","monthId","onMonthIdChange","disabled","onViewChange","labels","labelsProp","className","style","props","ref","parts","currentYear","year","Date","getFullYear","currentMonth","month","years","Array","from","length","_","i","selectYear","accessibilityRole","children","map","selected","accessibilityState","accessibilityLabel","onPress","String","displayName"],"sourceRoot":"../../../../src","sources":["components/Calendar/CalendarYearPickerGrid.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Calendar/flashCalendarAdapter.js

@@ -0,0 +1,290 @@
+"use strict";
+
+import { useMemo } from 'react';
+import { useCSSVariable } from 'uniwind';
+const DAY_SIZE = 36;
+const DAY_RADIUS = DAY_SIZE / 2;
+const CALENDAR_COLOR_VARS = ['--color-surface-action-strong', '--color-content-action-on-strong', '--color-content-tertiary', '--color-surface-action-subtle', '--color-content-primary', '--color-stroke-action', '--color-surface-action-subtle-hover', '--color-content-action'];
+const CALENDAR_LENGTH_VARS = ['--text-sm', '--border-width-selected', '--opacity-disabled'];
+const DAY_FONT_SIZE_FALLBACK = 14;
+const TODAY_BORDER_WIDTH_FALLBACK = 2;
+const DISABLED_OPACITY_FALLBACK = 0.5;
+const ROOT_FONT_SIZE_PX = 16;
+function tokenValue(resolved, cssVar) {
+  return resolved != null ? String(resolved) : `var(${cssVar})`;
+}
+
+/**
+ * Coerces a length token to the numeric px RN `fontSize`/`borderWidth` require.
+ *
+ * `useCSSVariable` resolves lengths differently per platform: native returns a
+ * number already in px, while web returns the raw CSS string (`0.875rem`). Only
+ * the rem form needs the root-font-size conversion — scaling the native value
+ * would multiply it a second time.
+ */
+function lengthToPx(resolved, fallback) {
+  if (typeof resolved === 'number') {
+    return Number.isFinite(resolved) ? resolved : fallback;
+  }
+  if (typeof resolved !== 'string') {
+    return fallback;
+  }
+  const trimmed = resolved.trim();
+  const numeric = Number.parseFloat(trimmed);
+  if (!Number.isFinite(numeric)) {
+    return fallback;
+  }
+  return trimmed.endsWith('rem') ? numeric * ROOT_FONT_SIZE_PX : numeric;
+}
+function useFlashCalendarColors() {
+  const [surfaceActionStrong, contentActionOnStrong, contentTertiary, surfaceActionSubtle, contentPrimary, strokeAction, surfaceActionSubtleHover, contentAction] = useCSSVariable(CALENDAR_COLOR_VARS);
+  return useMemo(() => ({
+    surfaceActionStrong: tokenValue(surfaceActionStrong, '--color-surface-action-strong'),
+    contentActionOnStrong: tokenValue(contentActionOnStrong, '--color-content-action-on-strong'),
+    contentTertiary: tokenValue(contentTertiary, '--color-content-tertiary'),
+    surfaceActionSubtle: tokenValue(surfaceActionSubtle, '--color-surface-action-subtle'),
+    contentPrimary: tokenValue(contentPrimary, '--color-content-primary'),
+    strokeAction: tokenValue(strokeAction, '--color-stroke-action'),
+    surfaceActionSubtleHover: tokenValue(surfaceActionSubtleHover, '--color-surface-action-subtle-hover'),
+    contentAction: tokenValue(contentAction, '--color-content-action')
+  }), [contentAction, contentActionOnStrong, contentPrimary, contentTertiary, strokeAction, surfaceActionStrong, surfaceActionSubtle, surfaceActionSubtleHover]);
+}
+function useFlashCalendarLengths() {
+  const [textSm, borderWidthSelected, opacityDisabled] = useCSSVariable(CALENDAR_LENGTH_VARS);
+  return useMemo(() => ({
+    dayFontSize: lengthToPx(textSm, DAY_FONT_SIZE_FALLBACK),
+    todayBorderWidth: lengthToPx(borderWidthSelected, TODAY_BORDER_WIDTH_FALLBACK),
+    disabledOpacity: lengthToPx(opacityDisabled, DISABLED_OPACITY_FALLBACK)
+  }), [borderWidthSelected, opacityDisabled, textSm]);
+}
+function isSelectedDay(id, selectedDateId) {
+  return selectedDateId !== undefined && id === selectedDateId;
+}
+function selectedDayStyles(colors) {
+  return {
+    container: {
+      borderRadius: DAY_RADIUS,
+      borderWidth: 0,
+      backgroundColor: colors.surfaceActionStrong
+    },
+    content: {
+      color: colors.contentActionOnStrong,
+      fontWeight: '600'
+    }
+  };
+}
+export function useFlashCalendarTheme(selectedDateId) {
+  const colors = useFlashCalendarColors();
+  const lengths = useFlashCalendarLengths();
+  const selected = useMemo(() => selectedDayStyles(colors), [colors]);
+  return useMemo(() => ({
+    rowMonth: {
+      container: {
+        height: 0,
+        paddingVertical: 0,
+        overflow: 'hidden'
+      },
+      content: {
+        fontSize: 0,
+        height: 0,
+        opacity: 0
+      }
+    },
+    rowWeek: {
+      container: {
+        paddingBottom: 4
+      }
+    },
+    itemWeekName: {
+      content: {
+        fontSize: 13,
+        fontWeight: '500',
+        color: colors.contentTertiary
+      }
+    },
+    itemDay: {
+      base: () => ({
+        container: {
+          borderRadius: DAY_RADIUS,
+          alignItems: 'center',
+          justifyContent: 'center'
+        },
+        content: {
+          fontSize: lengths.dayFontSize,
+          fontWeight: '500'
+        }
+      }),
+      idle: ({
+        id,
+        isPressed
+      }) => isSelectedDay(id, selectedDateId) ? selected : {
+        container: {
+          borderRadius: DAY_RADIUS,
+          backgroundColor: isPressed ? colors.surfaceActionSubtle : 'transparent'
+        },
+        content: {
+          color: colors.contentPrimary
+        }
+      },
+      today: ({
+        id,
+        isPressed
+      }) => isSelectedDay(id, selectedDateId) ? selected : {
+        container: {
+          borderRadius: DAY_RADIUS,
+          borderWidth: lengths.todayBorderWidth,
+          borderColor: colors.strokeAction,
+          backgroundColor: isPressed ? colors.surfaceActionSubtle : 'transparent'
+        },
+        content: {
+          color: colors.contentPrimary,
+          fontWeight: '600'
+        }
+      },
+      active: () => selected,
+      disabled: () => ({
+        container: {
+          borderRadius: DAY_RADIUS,
+          backgroundColor: 'transparent'
+        },
+        content: {
+          color: colors.contentPrimary,
+          opacity: lengths.disabledOpacity
+        }
+      })
+    }
+  }), [colors, lengths, selected, selectedDateId]);
+}
+export function useFlashCalendarRangeTheme(range) {
+  const colors = useFlashCalendarColors();
+  const lengths = useFlashCalendarLengths();
+  const selected = useMemo(() => selectedDayStyles(colors), [colors]);
+  return useMemo(() => ({
+    rowMonth: {
+      container: {
+        height: 0,
+        paddingVertical: 0,
+        overflow: 'hidden'
+      },
+      content: {
+        fontSize: 0,
+        height: 0,
+        opacity: 0
+      }
+    },
+    rowWeek: {
+      container: {
+        paddingBottom: 4
+      }
+    },
+    itemWeekName: {
+      content: {
+        fontSize: 13,
+        fontWeight: '500',
+        color: colors.contentTertiary
+      }
+    },
+    itemDayContainer: {
+      activeDayFiller: {
+        backgroundColor: colors.surfaceActionSubtleHover
+      }
+    },
+    itemDay: {
+      base: () => ({
+        container: {
+          borderRadius: 0,
+          padding: 0,
+          alignItems: 'center',
+          justifyContent: 'center'
+        },
+        content: {
+          fontSize: lengths.dayFontSize,
+          fontWeight: '500'
+        }
+      }),
+      idle: ({
+        isPressed
+      }) => ({
+        container: {
+          borderRadius: DAY_RADIUS,
+          backgroundColor: isPressed ? colors.surfaceActionSubtle : 'transparent'
+        },
+        content: {
+          color: colors.contentPrimary
+        }
+      }),
+      today: ({
+        id,
+        isPressed
+      }) => {
+        const isEndpoint = range?.startId !== undefined && id === range.startId || range?.endId !== undefined && id === range.endId;
+        if (isEndpoint) {
+          return selected;
+        }
+        return {
+          container: {
+            borderRadius: DAY_RADIUS,
+            borderWidth: lengths.todayBorderWidth,
+            borderColor: colors.strokeAction,
+            backgroundColor: isPressed ? colors.surfaceActionSubtle : 'transparent'
+          },
+          content: {
+            color: colors.contentPrimary,
+            fontWeight: '600'
+          }
+        };
+      },
+      active: ({
+        isStartOfRange,
+        isEndOfRange
+      }) => {
+        const isEndpoint = isStartOfRange || isEndOfRange;
+        const isSingleDay = isStartOfRange && isEndOfRange;
+        return {
+          container: {
+            padding: 0,
+            borderRadius: isSingleDay ? DAY_RADIUS : 0,
+            borderTopLeftRadius: isStartOfRange ? DAY_RADIUS : 0,
+            borderBottomLeftRadius: isStartOfRange ? DAY_RADIUS : 0,
+            borderTopRightRadius: isEndOfRange ? DAY_RADIUS : 0,
+            borderBottomRightRadius: isEndOfRange ? DAY_RADIUS : 0,
+            backgroundColor: isEndpoint ? colors.surfaceActionStrong : colors.surfaceActionSubtleHover
+          },
+          content: {
+            color: isEndpoint ? colors.contentActionOnStrong : colors.contentAction,
+            fontWeight: isEndpoint ? '600' : '500'
+          }
+        };
+      },
+      disabled: () => ({
+        container: {
+          borderRadius: DAY_RADIUS,
+          backgroundColor: 'transparent'
+        },
+        content: {
+          color: colors.contentPrimary,
+          opacity: lengths.disabledOpacity
+        }
+      })
+    }
+  }), [colors, lengths, range?.endId, range?.startId, selected]);
+}
+
+/** Keep range days flush so the band reads as one shape (filler covers residual sub-pixel gaps). */
+export const FLASH_CALENDAR_RANGE_DAY_SPACING = 0;
+export const FLASH_CALENDAR_DAY_HEIGHT = DAY_SIZE;
+export function formatFlashCalendarWeekdayShort(date, locale) {
+  return new Intl.DateTimeFormat(locale, {
+    weekday: 'short'
+  }).format(date);
+}
+
+/**
+ * Brands a raw Flash Calendar day id as a wire {@link DateId}. Flash Calendar
+ * always hands back `YYYY-MM-DD`, so this is the trusted third-party boundary
+ * where the wire brand is applied.
+ */
+export function toCalendarDateId(id) {
+  return id;
+}
+//# sourceMappingURL=flashCalendarAdapter.js.map