@retray-dev/ui-kit 10.0.0 → 10.2.0

package/COMPONENTS.md

@@ -1,4 +1,4 @@
-# @retray-dev/ui-kit — Component Reference (v10.0.0)
+# @retray-dev/ui-kit — Component Reference (v10.2.0)
 
 This file is the AI reference for this package. Add all three lines below to your project's `CLAUDE.md` to give Claude full context — components, setup guide, and usage examples:
 
@@ -252,19 +252,19 @@ These are the only values you need to supply when customizing the theme. The lib
 | Token | Light Default | Dark Default | Semantic Role |
 |-------|--------------|--------------|---------------|
 | `background` | `#ffffff` | `#0f0f0f` | Screen / page background |
-| `foreground` | `#222222` | `#fafafa` | Primary text — deep near-black, not pure black |
+| `foreground` | `#1a1a1a` | `#fafafa` | Primary text — deep near-black, not pure black |
 | `card` | `#ffffff` | `#1c1c1c` | Card / elevated surface background |
 | `primary` | `#1a1a1a` | `#fafafa` | Primary action (buttons, selected states, active indicators) |
 | `primaryForeground` | `#ffffff` | `#0f0f0f` | Text/icon placed on primary-colored backgrounds |
 | `border` | `#dddddd` | `#303030` | Borders, dividers, input outlines |
-| `destructive` | `#e53935` | `#ef5350` | Error / danger / delete actions |
+| `destructive` | `#c72828` | `#ef5350` | Error / danger / delete actions |
 | `destructiveForeground` | `#ffffff` | `#ffffff` | Text/icon on destructive backgrounds |
 | `success` | `#1a7a45` | `#2e7d52` | Success / confirmation states |
 | `successForeground` | `#ffffff` | `#ffffff` | Text/icon on success backgrounds |
-| `warning` | `#e67e00` | `#f57c00` | Warning / caution states |
-| `warningForeground` | `#ffffff` | `#ffffff` | Text/icon on warning backgrounds |
+| `warning` | `#9a5200` | `#f5a623` | Warning / caution states |
+| `warningForeground` | `#ffffff` | `#0f0f0f` | Text/icon on warning backgrounds |
 | `overlay` *(optional)* | `rgba(0,0,0,0.45)` | `rgba(0,0,0,0.45)` | Backdrop/overlay color behind sheets and dialogs |
-| `accent` *(optional)* | same as `primary` | same as `primary` | Secondary brand accent (e.g. Airbnb coral). Falls back to `primary` |
+| `accent` *(optional)* | `#d4561d` | `#e87645` | Secondary brand accent (e.g. Airbnb coral). Falls back to `primary` |
 | `accentForeground` *(optional)* | same as `primaryForeground` | same as `primaryForeground` | Text/icon on accent backgrounds. Falls back to `primaryForeground` |
 
 ### Derived Tokens (ResolvedColors) — read-only via useTheme().colors
@@ -273,8 +273,8 @@ The full palette components consume. Never supply these directly — they are co
 
 | Token | Derived From | Purpose |
 |-------|-------------|---------|
-| `foregroundSubtle` | `foreground` @ ~55% | Body text, subtitles, secondary content |
-| `foregroundMuted` | `foreground` @ ~38% | Captions, timestamps, placeholders |
+| `foregroundSubtle` | `foreground` @ ~70% | Body text, subtitles, secondary content |
+| `foregroundMuted` | `foreground` @ ~62% | Captions, timestamps, placeholders |
 | `surface` | `background` slightly off-canvas | Chip backgrounds, input fills, tag backgrounds, skeleton |
 | `surfaceStrong` | `background` stronger offset | Pressed/hover fill states |
 | `destructiveTint` | `destructive` blended to bg | Alert banner background, toast background |
@@ -1175,6 +1175,69 @@ const [amount, setAmount] = useState(0)
 
 ---
 
+### NumberStepper
+
+**Import:** `import { NumberStepper } from '@retray-dev/ui-kit'`
+
+**When to use:** Quantity +/- controls — cart item counts, guest selectors, inventory adjustments, portion sizes. Use when the user needs to increment/decrement a discrete numeric value within a constrained range (min–max).
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| value | `number` | required | Current numeric value |
+| onValueChange | `(value: number) => void` | required | Called with clamped value on each step |
+| min | `number` | `1` | Minimum allowed value |
+| max | `number` | `99` | Maximum allowed value |
+| step | `number` | `1` | Increment/decrement amount. Supports decimals (e.g. `0.5`) |
+| size | `'sm' \| 'md' \| 'lg'` | `'md'` | Controls button and value text size |
+| disabled | `boolean` | `false` | Disables both buttons |
+| accessibilityLabel | `string` | — | Custom a11y label for value text. Default: `"Quantity: {value}"` |
+| style | `ViewStyle` | — | Outer container style |
+
+**Styling:** Row layout with two square buttons flanking a centered value label. Buttons use `RADIUS.md` (14pt), `borderWidth: 1.5`, `surface` background with `border` outline. Value text: `Sohne-Medium`, centered, `foreground` color.
+
+**Button states:** The decrement button disables (opacity 0.35, non-pressable) when `value ≤ min`. The increment button disables when `value ≥ max`. Both disable when the `disabled` prop is `true`.
+
+**Haptics:** `impactLight` on each press.
+
+**Accessibility:** Each button has a descriptive label (`"Decrease, current value X"` / `"Increase, current value X"`). The value text has `accessibilityRole="text"`. Disabled state passed to `accessibilityState`.
+
+**Animation:** `PressableButton` (scale 0.95) on each button — matches the Button/IconButton press feel.
+
+**Examples:**
+```tsx
+// Basic quantity stepper
+const [qty, setQty] = useState(1)
+<NumberStepper value={qty} onValueChange={setQty} />
+
+// Custom range and step
+const [rating, setRating] = useState(3)
+<NumberStepper value={rating} onValueChange={setRating} min={0} max={5} step={0.5} />
+
+// Large size for prominent use
+const [guests, setGuests] = useState(2)
+<NumberStepper value={guests} onValueChange={setGuests} min={1} max={16} size="lg" />
+
+// Disabled during async operation
+<NumberStepper
+  value={qty}
+  onValueChange={setQty}
+  disabled={isUpdating}
+/>
+```
+
+**Composition — cart item row:**
+```tsx
+<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+  <View>
+    <Text variant="body-md">Margherita Pizza</Text>
+    <Text variant="caption-sm" color={colors.foregroundMuted}>$12.000</Text>
+  </View>
+  <NumberStepper value={quantity} onValueChange={setQuantity} />
+</View>
+```
+
+---
+
 ### CurrencyDisplay
 
 **Import:** `import { CurrencyDisplay } from '@retray-dev/ui-kit'`
@@ -1926,7 +1989,7 @@ const [accepted, setAccepted] = useState(false)
 
 **Dimensions:** Track 52×30px (pill), Thumb 24×24px with 3px offset.
 
-**Animation:** Thumb translates via spring; track color transitions via opacity (150ms).
+**Animation:** Thumb translates via spring (`SPRINGS.elastic`); track color and border animate via `EaseView` `COLOR_TRANSITION`; icons crossfade via `OPACITY_TRANSITION`. All declarative — UI thread.
 
 **Haptics:** `selectionAsync` on toggle.
 
@@ -2277,7 +2340,7 @@ const [tab, setTab] = useState('profile')
 ```ts
 {
   value: string
-  trigger: string
+  trigger: string | ReactNode
   content: ReactNode
   iconName?: string          // Icon name from @expo/vector-icons
   icon?: ReactNode           // Custom icon node
@@ -2285,7 +2348,7 @@ const [tab, setTab] = useState('profile')
 }
 ```
 
-**Animation:** `react-native-reanimated` `withTiming` (220ms) for height and chevron rotation (180°). Press scale uses `withSpring`. Runs on UI thread at 60fps.
+**Animation:** `react-native-reanimated` `withTiming` (240ms expand / 200ms collapse) for height and chevron rotation (180°). Runs on UI thread at 60fps.
 
 **Haptics:** `selectionAsync` on toggle.
 
@@ -2693,11 +2756,13 @@ dismiss(id)
 |------|------|---------|-------|
 | visible | `boolean` | required | Controls dialog visibility |
 | title | `string` | required | Dialog heading |
-| description | `string` | — | Supporting text — describe what exactly will happen |
+| subtitle | `string` | — | Secondary text below title |
+| description | `string` | — | **Deprecated** — use `subtitle` instead |
 | confirmLabel | `string` | `'Confirm'` | Confirm button text |
 | cancelLabel | `string` | `'Cancel'` | Cancel button text |
 | confirmVariant | `'primary' \| 'destructive'` | `'primary'` | Use `'destructive'` for delete/remove actions |
 | loading | `boolean` | `false` | Show spinner in confirm button and disable it (for async `onConfirm`) |
+| showCloseButton | `boolean` | `false` | Show an X close button in the top-right corner |
 | onConfirm | `() => void` | required | Called when confirm is tapped |
 | onCancel | `() => void` | required | Called when cancel is tapped or backdrop pressed |
 
@@ -3075,7 +3140,7 @@ dismiss(id)
 
 **Import:** `import { Chip, ChipGroup } from '@retray-dev/ui-kit'`
 
-**When to use:** Inline filter options, quick selections, multi-select toggles. Use `Chip` for standalone custom logic; use `ChipGroup` for managed selection (single or multi).
+**When to use:** Inline filter options, quick selections, multi-select toggles. Use `Chip` for standalone custom logic; use `ChipGroup` for managed selection (single or multi). **ChipGroup vs CategoryStrip:** ChipGroup wraps to multiple rows and supports disabled items — best for filter tags, feature toggles, and tray-style selections. CategoryStrip scrolls horizontally and supports badge counts — best for top-of-screen category browsers.
 
 **`Chip` Props:**
 
@@ -3147,7 +3212,7 @@ const [categories, setCategories] = useState<number[]>([1, 3])
 
 **Import:** `import { CategoryStrip } from '@retray-dev/ui-kit'`
 
-**When to use:** Horizontal scrollable filter/category bar at the top of browse screens — marketplace categories, content type filters, location tabs. Airbnb-style pill chips that scroll horizontally.
+**When to use:** Horizontal scrollable filter/category bar at the top of browse screens — marketplace categories, content type filters, location tabs. Airbnb-style pill chips that scroll horizontally. **CategoryStrip vs ChipGroup:** CategoryStrip scrolls horizontally and supports badge counts — best for top-of-screen category browsers. ChipGroup wraps to multiple rows and supports disabled items — best for filter tags and tray-style selections.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
@@ -3272,7 +3337,7 @@ const [categories, setCategories] = useState<number[]>([1, 3])
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | label | `string \| ReactNode` | required | Left side. Strings auto-styled in `foregroundMuted` caption |
-| value | `string` | required | Right side value text |
+| value | `string \| number \| ReactNode` | required | Right side value. Strings and numbers auto-styled in `Sohne-SemiBold`; pass `ReactNode` for custom content |
 | separator | `'dotted' \| 'solid' \| 'dashed' \| 'none'` | `'dotted'` | Fill line between label and value |
 | labelWeight | `'normal' \| 'medium' \| 'semibold' \| 'bold'` | `'normal'` | Font weight of label text |
 | valueColor | `string` | — | Override value text color (hex or theme token value) |
@@ -3766,7 +3831,7 @@ export default function TabLayout() {
 | onClose | `() => void` | required | — |
 | initialIndex | `number` | `0` | Page to open on |
 
-**Behavior:** pinch to zoom (max 3×), double-tap to toggle 2.5× zoom, pan while zoomed. Paging locks automatically while a page is zoomed in. `PagerDots` shown when there is more than one image.
+**Behavior:** pinch to zoom (max 3×), double-tap to toggle 2.5× zoom, pan while zoomed. Paging locks automatically while a page is zoomed in. Swipe down to dismiss (drag down or fling; backdrop fades proportionally). `PagerDots` shown when there is more than one image.
 
 **Example:**
 ```tsx
@@ -3918,6 +3983,7 @@ import { HolographicCard, FOIL_PRESETS } from '@retray-dev/ui-kit/HolographicCar
 | onChange | `(uri: string \| null) => void` | — | Called with selected URI after picker completes |
 | loading | `boolean` | `false` | Show spinner overlay (e.g. while uploading to server) |
 | placeholder | `string` | `'Tap to add image'` | Text shown when no image selected |
+| showPlaceholderText | `boolean` | `true` | Whether to show the placeholder text. Use `false` for compact/avatar variants |
 | width | `number` | — | Width of the upload area. Defaults to full width |
 | height | `number` | `200` | Height of the upload area |
 | borderRadius | `number` | `RADIUS.lg` | — |
@@ -3947,16 +4013,68 @@ const handleChange = async (uri: string | null) => {
   height={200}
 />
 
-// Avatar upload (square)
+// Avatar upload (square, no text)
 <ImageUpload
   value={avatarUri}
   onChange={setAvatarUri}
   width={100}
   height={100}
   borderRadius={50}
+  showPlaceholderText={false}
+/>
+```
+
+---
+
+### IconPicker
+
+**Import:** `import { IconPicker } from '@retray-dev/ui-kit'`
+
+**When to use:** Selecting an icon from a curated catalog of ~320 icons (across all 6 `@expo/vector-icons` families) organized by 12 categories. The trigger is a simple tappable square showing the selected icon (or a + placeholder). Tapping opens a bottom sheet with category chips (icon + label) and a scrollable grid. No search, no text clutter — purely visual selection.
+
+**Requires:** `@gorhom/bottom-sheet` (already a peer dependency of the UI kit).
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| value | `string \| null` | — | Currently selected icon name |
+| onChange | `(iconName: string) => void` | — | Called when an icon is selected |
+| label | `string` | — | Optional label above the trigger |
+| error | `string` | — | Error message (red border + helper text) |
+| hint | `string` | — | Hint text below trigger |
+| disabled | `boolean` | `false` | Prevents opening |
+| numColumns | `number` | `6` | Icons per row in the sheet grid |
+| gap | `number` | `6` | Gap between cells (dp) |
+| style | `ViewStyle` | — | — |
+
+**Examples:**
+```tsx
+const [icon, setIcon] = useState<string | null>(null)
+
+// Basic usage
+<IconPicker
+  label="Icon"
+  value={icon}
+  onChange={setIcon}
+/>
+
+// With validation error
+<IconPicker
+  label="Icon"
+  value={icon}
+  onChange={setIcon}
+  error={!icon ? 'Please select an icon' : undefined}
 />
 ```
 
+**Notes:**
+- Uses a static curated list of ~320 icons in 12 categories (food, sports, business, objects, status, actions, communication, navigation, media, layout, nature, brands) — instant load, no runtime glyphMap scanning.
+- Category chips use representative icons (coffee, activity, briefcase, folder, alert-circle, edit-3, message-circle, compass, image, grid, sun, globe) with Spanish labels and a "Todos" (All) chip.
+- Grid cells show only icons — clean, fast visual scanning. Cell size adapts to container width.
+- Sheet uses `enableDynamicSizing` with `maxDynamicContentSize` (70% screen height) — height auto-fits content up to that cap.
+- Category strip is a horizontal `ScrollView` of pill-shaped chips. The grid is rendered in rows inside a `BottomSheetScrollView`.
+- Selection closes the sheet immediately and resets category to "Todos".
+- Haptics: medium impact on open, selection on icon tap.
+
 ---
 
 ### useConfirmDialog
@@ -4061,6 +4179,21 @@ import { renderIcon } from '@retray-dev/ui-kit'
 const icon = renderIcon('check', 18, colors.primary)
 ```
 
+### `getValidIconNames` utility
+
+```tsx
+import { getValidIconNames } from '@retray-dev/ui-kit'
+
+// All icon names across all configured families
+const allIcons: string[] = getValidIconNames()
+// => ["home", "user", "heart", "star", ...]
+
+// Scoped to specific families (does not mutate global config)
+const featherOnly: string[] = getValidIconNames(['Feather'])
+```
+
+Returns `string[]` — all resolvable icon names from the configured families. Respects `configureIconFamilies()` global config. The optional `families` parameter builds a temporary cache scoped to those families without mutating global state. Use to build icon pickers, search, and galleries.
+
 ### `iconName` props on components
 
 All components with icon slots accept `iconName` — auto-resolved size and color:

package/CONSUMER.md

@@ -1,4 +1,4 @@
-# @retray-dev/ui-kit — Consumer Setup Guide (v9.2.0)
+# @retray-dev/ui-kit — Consumer Setup Guide (v10.1.0)
 
 > **For AI assistants (Claude Code):** Add all three lines below to your project's `CLAUDE.md` so Claude has full context about this UI kit:
 > ```markdown

package/README.md

@@ -2,7 +2,7 @@
 
 A personal React Native / Expo UI component library with a built-in design system, dark mode support, haptic feedback, and smooth animations.
 
-- 51 components across 9 categories (plus the deep-import `HolographicCard`)
+- 53 components across 9 categories (plus the deep-import `HolographicCard`)
 - Light/dark theme with 12 public tokens (25 resolved) and full customization
 - Apple HIG–compliant touch targets and haptic feedback
 - Animated interactions: spring press, sliding tabs, accordion easing, animated progress
@@ -23,14 +23,14 @@ pnpm add @retray-dev/ui-kit
 Install these in your app if not already present:
 
 ```bash
-pnpm add expo-font expo-haptics expo-linear-gradient react-native-safe-area-context @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler react-native-worklets @react-native-picker/picker @react-native-community/slider @expo/vector-icons react-native-size-matters react-native-svg react-native-screens sonner-native pressto react-native-ease
+pnpm add expo-font expo-haptics expo-linear-gradient react-native-safe-area-context @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler react-native-worklets @react-native-picker/picker @react-native-community/slider @expo/vector-icons react-native-size-matters react-native-svg react-native-screens sonner-native pressto react-native-ease expo-image-picker
 ```
 
 For Expo projects, run `npx expo install` instead to get SDK-compatible versions.
 
 `pressto` is **required** — it powers the press animations on every interactive component. Omitting it crashes the import. `sonner-native` is **required** for `Toast`.
 
-**Optional:** for richer haptics in a custom dev build (not Expo Go), also `pnpm add react-native-pulsar`. The kit falls back to `expo-haptics` automatically when it is absent. For the deep-import `HolographicCard`, add `@shopify/react-native-skia expo-sensors`.
+**Optional:** for richer haptics in a custom dev build (not Expo Go), also `pnpm add react-native-pulsar`. The kit falls back to `expo-haptics` automatically when it is absent. For `ImageUpload`, add `expo-image-picker`. For the deep-import `HolographicCard`, add `@shopify/react-native-skia expo-sensors`.
 
 Add the Worklets Babel plugin to `babel.config.js` (required by `@gorhom/bottom-sheet`):
 
@@ -183,7 +183,7 @@ import { SPACING, ICON_SIZES, RADIUS, SHADOWS, BREAKPOINTS, TYPOGRAPHY } from '@
 | ----------- | ----------------------------------------------------------------------------------------------- |
 | Display     | `Text`, `Badge`, `Avatar`, `Separator`, `Spinner`, `Skeleton`, `Progress`, `CurrencyDisplay`   |
 | Surfaces    | `Card`, `AlertBanner`, `EmptyState`, `MediaCard`, `PricingCard`                                 |
-| Form        | `Form` (+ `Form.Field` / `Form.Section` / `Form.Footer`), `Button`, `ButtonGroup`, `IconButton`, `Input`, `CurrencyInput`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider`, `SelectableGrid`, `SheetSelect`, `ImageUpload` |
+| Form        | `Form` (+ `Form.Field` / `Form.Section` / `Form.Footer`), `Button`, `ButtonGroup`, `IconButton`, `Input`, `CurrencyInput`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider`, `SelectableGrid`, `SheetSelect`, `ImageUpload`, `IconPicker`, `NumberStepper` |
 | Composition | `Tabs`, `Accordion`                                                                             |
 | Navigation  | `AppHeader`, `TabBar`, `PagerDots`                                                              |
 | Overlays    | `Sheet`, `ConfirmDialog`, `ImageViewer`                                                         |

package/dist/Accordion.d.mts

@@ -3,7 +3,7 @@ import { ViewStyle } from 'react-native';
 
 interface AccordionItem {
     value: string;
-    trigger: string;
+    trigger: string | React.ReactNode;
     content: React.ReactNode;
     /** Icon name from @expo/vector-icons rendered left of trigger. */
     iconName?: string;

package/dist/Accordion.d.ts

@@ -3,7 +3,7 @@ import { ViewStyle } from 'react-native';
 
 interface AccordionItem {
     value: string;
-    trigger: string;
+    trigger: string | React.ReactNode;
     content: React.ReactNode;
     /** Icon name from @expo/vector-icons rendered left of trigger. */
     iconName?: string;

package/dist/Accordion.js

@@ -217,7 +217,7 @@ var ALL_FAMILIES = [
 ];
 var activeFamilies = ALL_FAMILIES;
 var resolvedCache = null;
-function buildCache() {
+function buildCache(families) {
   const cache = /* @__PURE__ */ new Map();
   for (const family of activeFamilies) {
     const glyphMap = family.getGlyphMap();
@@ -302,9 +302,9 @@ function AccordionItemComponent({
       },
       accessibilityRole: "button",
       accessibilityState: { expanded: isOpen },
-      accessibilityLabel: item.trigger
+      accessibilityLabel: typeof item.trigger === "string" ? item.trigger : void 0
     },
-    /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.triggerContent }, resolvedIcon ? /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.icon }, resolvedIcon) : null, /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.triggerText, { color: colors.foreground }], allowFontScaling: true }, item.trigger)),
+    /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.triggerContent }, resolvedIcon ? /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.icon }, resolvedIcon) : null, typeof item.trigger === "string" ? /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.triggerText, { color: colors.foreground }], allowFontScaling: true }, item.trigger) : item.trigger),
     /* @__PURE__ */ React3__default.default.createElement(Animated__default.default.View, { style: [styles.chevron, rotationStyle] }, /* @__PURE__ */ React3__default.default.createElement(vectorIcons.Entypo, { name: "chevron-down", size: 18, color: colors.foregroundMuted }))
   ), /* @__PURE__ */ React3__default.default.createElement(Animated__default.default.View, { style: bodyStyle }, /* @__PURE__ */ React3__default.default.createElement(
     reactNative.View,

package/dist/Accordion.mjs

@@ -1,7 +1,7 @@
-export { Accordion } from './chunk-O3HA6TYM.mjs';
+export { Accordion } from './chunk-YJ7I257J.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
-import './chunk-T7XZ7H7Y.mjs';
+import './chunk-KA7LTET3.mjs';
 import './chunk-SOYNZDVY.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/AlertBanner.js

@@ -156,7 +156,7 @@ var ALL_FAMILIES = [
 ];
 var activeFamilies = ALL_FAMILIES;
 var resolvedCache = null;
-function buildCache() {
+function buildCache(families) {
   const cache = /* @__PURE__ */ new Map();
   for (const family of activeFamilies) {
     const glyphMap = family.getGlyphMap();

package/dist/AlertBanner.mjs

@@ -1,6 +1,6 @@
-export { AlertBanner } from './chunk-6MKGPAR2.mjs';
+export { AlertBanner } from './chunk-BEMIQXXU.mjs';
 import './chunk-QY3X2UYR.mjs';
-import './chunk-T7XZ7H7Y.mjs';
+import './chunk-KA7LTET3.mjs';
 import './chunk-SOYNZDVY.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/AppHeader.js

@@ -218,7 +218,7 @@ var ALL_FAMILIES = [
 ];
 var activeFamilies = ALL_FAMILIES;
 var resolvedCache = null;
-function buildCache() {
+function buildCache(families) {
   const cache = /* @__PURE__ */ new Map();
   for (const family of activeFamilies) {
     const glyphMap = family.getGlyphMap();

package/dist/AppHeader.mjs

@@ -1,10 +1,10 @@
-export { AppHeader } from './chunk-AZJF2BLK.mjs';
-import './chunk-3U4SSNWP.mjs';
+export { AppHeader } from './chunk-TBNZHU6C.mjs';
+import './chunk-T2KCAHOS.mjs';
 import './chunk-3DKJ2GIC.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
 import './chunk-QY3X2UYR.mjs';
-import './chunk-T7XZ7H7Y.mjs';
+import './chunk-KA7LTET3.mjs';
 import './chunk-SOYNZDVY.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Badge.js

@@ -155,7 +155,7 @@ var ALL_FAMILIES = [
 ];
 var activeFamilies = ALL_FAMILIES;
 var resolvedCache = null;
-function buildCache() {
+function buildCache(families) {
   const cache = /* @__PURE__ */ new Map();
   for (const family of activeFamilies) {
     const glyphMap = family.getGlyphMap();

package/dist/Badge.mjs

@@ -1,5 +1,5 @@
-export { Badge } from './chunk-TERDKCLE.mjs';
-import './chunk-T7XZ7H7Y.mjs';
+export { Badge } from './chunk-VF2ATYN3.mjs';
+import './chunk-KA7LTET3.mjs';
 import './chunk-SOYNZDVY.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Button.js

@@ -217,7 +217,7 @@ var ALL_FAMILIES = [
 ];
 var activeFamilies = ALL_FAMILIES;
 var resolvedCache = null;
-function buildCache() {
+function buildCache(families) {
   const cache = /* @__PURE__ */ new Map();
   for (const family of activeFamilies) {
     const glyphMap = family.getGlyphMap();

package/dist/Button.mjs

@@ -1,9 +1,9 @@
-export { Button } from './chunk-2TFTAWVJ.mjs';
+export { Button } from './chunk-HTHGSXFG.mjs';
 import './chunk-3DKJ2GIC.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
 import './chunk-QY3X2UYR.mjs';
-import './chunk-T7XZ7H7Y.mjs';
+import './chunk-KA7LTET3.mjs';
 import './chunk-SOYNZDVY.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/CategoryStrip.js

@@ -217,7 +217,7 @@ var ALL_FAMILIES = [
 ];
 var activeFamilies = ALL_FAMILIES;
 var resolvedCache = null;
-function buildCache() {
+function buildCache(families) {
   const cache = /* @__PURE__ */ new Map();
   for (const family of activeFamilies) {
     const glyphMap = family.getGlyphMap();

package/dist/CategoryStrip.mjs

@@ -1,9 +1,9 @@
-export { CategoryStrip } from './chunk-VQ57HWPL.mjs';
+export { CategoryStrip } from './chunk-6L4G6PBT.mjs';
 import './chunk-YNROWHQJ.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
 import './chunk-QY3X2UYR.mjs';
-import './chunk-T7XZ7H7Y.mjs';
+import './chunk-KA7LTET3.mjs';
 import './chunk-SOYNZDVY.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Chip.js

@@ -218,7 +218,7 @@ var ALL_FAMILIES = [
 ];
 var activeFamilies = ALL_FAMILIES;
 var resolvedCache = null;
-function buildCache() {
+function buildCache(families) {
   const cache = /* @__PURE__ */ new Map();
   for (const family of activeFamilies) {
     const glyphMap = family.getGlyphMap();

package/dist/Chip.mjs

@@ -1,8 +1,8 @@
-export { Chip, ChipGroup } from './chunk-UREA2GYY.mjs';
+export { Chip, ChipGroup } from './chunk-DYT7BG5I.mjs';
 import './chunk-3DKJ2GIC.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
-import './chunk-T7XZ7H7Y.mjs';
+import './chunk-KA7LTET3.mjs';
 import './chunk-SOYNZDVY.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/ConfirmDialog.d.mts

@@ -3,15 +3,20 @@ import React from 'react';
 interface ConfirmDialogProps {
     visible: boolean;
     title: string;
+    /** Secondary text below title. */
+    subtitle?: string;
+    /** @deprecated Use `subtitle` instead. */
     description?: string;
     confirmLabel?: string;
     cancelLabel?: string;
     confirmVariant?: 'primary' | 'destructive';
     /** Show a loading spinner in the confirm button (e.g. while async action completes). */
     loading?: boolean;
+    /** Show an X close button in the top-right corner. */
+    showCloseButton?: boolean;
     onConfirm: () => void;
     onCancel: () => void;
 }
-declare function ConfirmDialog({ visible, title, description, confirmLabel, cancelLabel, confirmVariant, loading, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
+declare function ConfirmDialog({ visible, title, subtitle, description, confirmLabel, cancelLabel, confirmVariant, loading, showCloseButton, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
 
 export { ConfirmDialog, type ConfirmDialogProps };

package/dist/ConfirmDialog.d.ts

@@ -3,15 +3,20 @@ import React from 'react';
 interface ConfirmDialogProps {
     visible: boolean;
     title: string;
+    /** Secondary text below title. */
+    subtitle?: string;
+    /** @deprecated Use `subtitle` instead. */
     description?: string;
     confirmLabel?: string;
     cancelLabel?: string;
     confirmVariant?: 'primary' | 'destructive';
     /** Show a loading spinner in the confirm button (e.g. while async action completes). */
     loading?: boolean;
+    /** Show an X close button in the top-right corner. */
+    showCloseButton?: boolean;
     onConfirm: () => void;
     onCancel: () => void;
 }
-declare function ConfirmDialog({ visible, title, description, confirmLabel, cancelLabel, confirmVariant, loading, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
+declare function ConfirmDialog({ visible, title, subtitle, description, confirmLabel, cancelLabel, confirmVariant, loading, showCloseButton, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
 
 export { ConfirmDialog, type ConfirmDialogProps };