@expokit/cli 0.4.3 → 0.5.0

package/registry/_docs/password-input.json

@@ -35,7 +35,7 @@
     [
       "matchMessage / mismatchMessage",
       "string",
-      "\"Passwords match\" / \"Passwords don't match\"",
+      "labels.passwordsMatch / labels.passwordsDontMatch",
       "Copy for confirm mode."
     ],
     [

package/registry/_docs/paywall.json

@@ -0,0 +1,144 @@
+{
+  "name": "paywall",
+  "category": "Blocks",
+  "aliases": [],
+  "exportName": "Paywall",
+  "files": [
+    "src/components/blocks/paywall.tsx"
+  ],
+  "summary": "Animated paywall, free-trial timeline, success and win-back screens.",
+  "props": [
+    [
+      "variant",
+      "\"card\" | \"glow\" | \"trial\"",
+      "\"card\"",
+      "Gradient card + plan picker, dark full-bleed with an annual toggle, or how the free trial works."
+    ],
+    [
+      "appName",
+      "string",
+      "'Lumen'",
+      "Shown on the card and the glow pill."
+    ],
+    [
+      "title",
+      "string",
+      "per variant",
+      "Heading."
+    ],
+    [
+      "subtitle",
+      "string",
+      "per variant",
+      "Line under the heading."
+    ],
+    [
+      "features",
+      "{ title, icon? }[]",
+      "per variant",
+      "Feature grid (card) or pills (glow)."
+    ],
+    [
+      "plans",
+      "PaywallPlan[]",
+      "yearly / monthly / lifetime",
+      "{ id, label, price, period, caption?, badge?, trialDays?, cta? }. In glow the toggle picks plans[0] (on) or plans[1] (off)."
+    ],
+    [
+      "plan",
+      "string",
+      "—",
+      "Selected plan id (controlled)."
+    ],
+    [
+      "defaultPlan",
+      "string",
+      "plans[0].id",
+      "Initial plan when uncontrolled."
+    ],
+    [
+      "onPlanChange",
+      "(id: string) => void",
+      "—",
+      "A plan was picked."
+    ],
+    [
+      "onPurchase",
+      "(plan: PaywallPlan) => void",
+      "—",
+      "Pressed the main button."
+    ],
+    [
+      "onRestore",
+      "() => void",
+      "—",
+      "Shows “Restore” in the top-left corner."
+    ],
+    [
+      "onClose",
+      "() => void",
+      "—",
+      "Shows a close button."
+    ],
+    [
+      "reminder",
+      "boolean",
+      "true",
+      "trial: the “remind me” switch (controlled with onReminderChange)."
+    ],
+    [
+      "auroraColors",
+      "[string, string, string]",
+      "orange, violet, cyan",
+      "Colours of the moving aurora."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Button and selected-plan colour."
+    ],
+    [
+      "topInset",
+      "number",
+      "0",
+      "Space above the restore / close buttons, e.g. useSafeAreaInsets().top. Also on PaywallSuccess and PaywallWinback."
+    ],
+    [
+      "bottomInset",
+      "number",
+      "30 on iOS, 16 elsewhere",
+      "Space under the button, e.g. useSafeAreaInsets().bottom + 12."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root style."
+    ]
+  ],
+  "behavior": [
+    [
+      "Motion",
+      "The aurora drifts on three loops of different lengths, a sheen sweeps the card, rows rise in one after another and prices slide when the plan changes. Springs are critically damped — nothing bounces."
+    ],
+    [
+      "Touch",
+      "Drag the card to tilt it; it springs flat when you let go. Plan tiles and rows scale down slightly on press."
+    ],
+    [
+      "Reduced motion",
+      "Loops, tilt, lifts and press scaling are off; fades and colour changes stay. Confetti fires fewer pieces."
+    ],
+    [
+      "Screen readers",
+      "Plans and reasons are radio groups and the card reads as one label."
+    ],
+    [
+      "Layout",
+      "Restore sits top-left and close top-right, clear of the button. The button bar stays pinned and content fades out under it. Pass topInset / bottomInset (e.g. from useSafeAreaInsets) for the notch and home indicator."
+    ]
+  ],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/pixel-bar.json

@@ -67,6 +67,12 @@
       "string",
       "auto summary",
       "What screen readers announce; defaults to a summary of the data."
+    ],
+    [
+      "accessibilityHint",
+      "string",
+      "\"Swipe up or down to read each …\"",
+      "Screen-reader hint for the swipe-to-read gesture; pass your own to translate it."
     ]
   ],
   "behavior": [],

package/registry/_docs/polar-area.json

@@ -79,6 +79,12 @@
       "string",
       "auto summary",
       "What screen readers announce; defaults to a summary of the data."
+    ],
+    [
+      "accessibilityHint",
+      "string",
+      "\"Swipe up or down to read each …\"",
+      "Screen-reader hint for the swipe-to-read gesture; pass your own to translate it."
     ]
   ],
   "behavior": [],

package/registry/_docs/qr-code-button.json

@@ -17,21 +17,27 @@
     [
       "label",
       "string",
-      "'Show QR Code'",
+      "labels.showQrCode",
       "Text on the pill."
     ],
     [
       "copyLabel",
       "string",
-      "'Copy'",
+      "labels.copy",
       "Copy button text."
     ],
     [
       "copiedLabel",
       "string",
-      "'Copied'",
+      "labels.copied",
       "Shown after Copy is pressed."
     ],
+    [
+      "closeLabel",
+      "string",
+      "labels.close",
+      "Screen-reader name of the card's close button. Set it app-wide with KitProvider's labels."
+    ],
     [
       "onCopy",
       "(value: string) => void",

package/registry/_docs/ruler-time-picker.json

@@ -0,0 +1,147 @@
+{
+  "name": "ruler-time-picker",
+  "category": "Inputs",
+  "aliases": [
+    "scrub-time-picker",
+    "drag-time-picker",
+    "ruler-date-picker",
+    "scrub-date-picker",
+    "day-ruler"
+  ],
+  "exportName": "RulerTimePicker",
+  "files": [
+    "src/components/ui/ruler-time-picker.tsx"
+  ],
+  "summary": "Drag a tick ruler and the big time or date rolls piece by piece with a motion blur.",
+  "props": [
+    [
+      "mode",
+      "'time' | 'date'",
+      "'time'",
+      "One tick per `step` minutes, or one tick per day with the 1st of each month marked."
+    ],
+    [
+      "value",
+      "{ hours, minutes } | Date",
+      "—",
+      "Controlled value: a 24-hour time, or a Date in date mode (its time of day is kept)."
+    ],
+    [
+      "defaultValue",
+      "{ hours, minutes } | Date",
+      "09:00 · today",
+      "Initial value when uncontrolled."
+    ],
+    [
+      "onChange",
+      "(value) => void",
+      "—",
+      "Called on every tick the ruler passes, while you drag."
+    ],
+    [
+      "label",
+      "string",
+      "—",
+      "Small line above the value, e.g. 'Reminder time:'."
+    ],
+    [
+      "step",
+      "number",
+      "5",
+      "Time: minutes per tick (1–60)."
+    ],
+    [
+      "hour12",
+      "boolean",
+      "true",
+      "Time: 12-hour clock with a rolling am / pm; false for 00–23."
+    ],
+    [
+      "minDate / maxDate",
+      "Date",
+      "—",
+      "Date: earliest / latest pickable day; the ruler resists past them."
+    ],
+    [
+      "showYear",
+      "'auto' | 'always' | 'never'",
+      "'auto'",
+      "Date: 'auto' shows the year only when it isn't this year."
+    ],
+    [
+      "locale",
+      "string",
+      "device",
+      "Date: weekday and month names (Intl), English where Intl isn't available."
+    ],
+    [
+      "size",
+      "'sm' | 'md' | 'lg'",
+      "'md'",
+      "Time at 40 / 52 / 64pt, date at 34 / 44 / 54pt."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Centre needle colour."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "A light tap on every step, a firmer one on each whole hour (time) or new month (date)."
+    ],
+    [
+      "sound",
+      "boolean",
+      "true",
+      "A soft tick on every step, generated in code (no audio file); it plays alongside other audio."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "label",
+      "Name read by screen readers."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root container."
+    ],
+    [
+      "textStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "The big value text (colour, weight, font family)."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Drag sideways anywhere on the picker to scrub; fling to coast. It snaps to the nearest step when it stops. A touch during a fling catches it. In date mode, past minDate / maxDate the ruler follows at a fraction of your finger and springs back. Every step taps (firmer on the hour or a new month) and ticks softly."
+    ],
+    [
+      "Motion",
+      "Ticks (and month markers) slide, swell and fade on the native driver from one endless pool. Each piece that changes rolls up (later) or down (earlier) with ghosted copies for a motion blur. Reduce Motion swaps the roll for an instant change."
+    ],
+    [
+      "Screen readers",
+      "One adjustable element whose value is the spoken time or full date; increment / decrement move one step, within the limits."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { RulerTimePicker, type TimeValue } from '@/components/ui/ruler-time-picker';\n\nconst [time, setTime] = useState<TimeValue>({ hours: 2, minutes: 15 });\n<RulerTimePicker label=\"Reminder time:\" value={time} onChange={setTime} />\n\n// One tick per day\nconst [date, setDate] = useState(new Date());\n<RulerTimePicker mode=\"date\" label=\"Delivery date:\" value={date} onChange={setDate} minDate={new Date()} />",
+  "examples": [
+    {
+      "name": "Reminder",
+      "title": "Reminder",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { RulerTimePicker, type TimeValue } from '@/components/ui/ruler-time-picker';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Controls stop at iOS's largest standard text size; content text stays uncapped. */\nconst FONT_CAP = 1.35;\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nconst BLUR: [number, number][] = [2, 4, 7, 10].flatMap((r, ring) =>\n  Array.from({ length: 8 }, (_, i): [number, number] => {\n    const a = ((i + ring / 2) / 8) * Math.PI * 2;\n    return [Math.cos(a) * r, Math.sin(a) * r];\n  }),\n);\n\n/** The settings screen the sheet was opened from, as blocks: a title, a grouped list and toggles. */\nconst SettingsScreen = React.memo(function SettingsScreen() {\n  const { colors, radius, dark } = useKit();\n  // In dark mode the grouped rows sit a step lighter than the screen, like iOS Settings.\n  const group = dark ? colors.secondary : colors.card;\n  const rows: [number, 'value' | 'on' | 'off'][] = [\n    [0.42, 'value'],\n    [0.3, 'value'],\n    [0.38, 'on'],\n    [0.34, 'on'],\n    [0.4, 'off'],\n    [0.28, 'value'],\n  ];\n  const bar = (w: number | `${number}%`, h: number, color: string) => (\n    <View style={{ width: w, height: h, backgroundColor: color, borderRadius: radius.capsule(h) }} />\n  );\n  return (\n    <View style={s.screen}>\n      {bar(150, 30, alpha(colors.foreground, 0.7))}\n      <View style={[s.group, { backgroundColor: group, borderRadius: radius.lg }]}>\n        {rows.map(([w, kind], i) => (\n          <View key={i} style={[s.row, i > 0 && { borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: colors.border }]}>\n            {bar(`${w * 100}%`, 14, alpha(colors.foreground, 0.45))}\n            {kind === 'value' ? (\n              bar(64, 14, colors.mutedForeground)\n            ) : (\n              <View style={[s.toggle, { backgroundColor: kind === 'on' ? colors.accent : colors.border, borderRadius: radius.capsule(28) }]}>\n                <View style={[s.knob, { backgroundColor: colors.background, alignSelf: kind === 'on' ? 'flex-end' : 'flex-start', borderRadius: radius.capsule(24) }]} />\n              </View>\n            )}\n          </View>\n        ))}\n      </View>\n      <View style={[s.group, s.card2, { backgroundColor: group, borderRadius: radius.lg }]}>\n        {bar('55%', 14, alpha(colors.foreground, 0.45))}\n        {bar('80%', 12, colors.mutedForeground)}\n      </View>\n    </View>\n  );\n});\n\n/** A bottom sheet over a blurred, dimmed screen, with a Done button under the picker. */\nfunction Sheet({ screen, bottomInset = 0, children }: DemoProps & { children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={[\n        s.frame,\n        { backgroundColor: colors.muted },\n        screen ? s.frameScreen : { borderRadius: radius.xl, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth },\n      ]}\n    >\n      <View pointerEvents=\"none\" style={StyleSheet.absoluteFill} importantForAccessibility=\"no-hide-descendants\" accessibilityElementsHidden>\n        {BLUR.map(([x, y], i) => (\n          <View key={i} style={[StyleSheet.absoluteFill, { opacity: 1 / 12, transform: [{ translateX: x }, { translateY: y }] }]}>\n            <SettingsScreen />\n          </View>\n        ))}\n        {/* A lighter dim than a modal's, so the screen behind still reads as a screen. */}\n        <View style={[StyleSheet.absoluteFill, { backgroundColor: colors.overlay, opacity: dark ? 0.45 : 0.5 }]} />\n      </View>\n      {/* Raised above the screen: an elevated (lighter) surface in dark mode, and a hairline edge in both. */}\n      <View\n        style={[\n          s.sheet,\n          {\n            backgroundColor: dark ? colors.border : colors.card,\n            borderColor: dark ? alpha(colors.foreground, 0.12) : colors.border,\n            borderRadius: radius.scale(32),\n            marginBottom: 8 + bottomInset,\n          },\n        ]}\n      >\n        <View style={[s.grabber, { backgroundColor: alpha(colors.foreground, dark ? 0.3 : 0.15), borderRadius: radius.capsule(5) }]} />\n        {children}\n        <Pressable\n          accessibilityRole=\"button\"\n          style={({ pressed }) => [s.button, { backgroundColor: colors.primary, borderRadius: radius.lg, opacity: pressed ? 0.85 : 1 }]}\n        >\n          <Text maxFontSizeMultiplier={FONT_CAP} style={[s.buttonText, { color: colors.primaryForeground }]}>Done</Text>\n        </Pressable>\n      </View>\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  frame: { alignSelf: 'stretch', minHeight: 400, justifyContent: 'flex-end', overflow: 'hidden', paddingHorizontal: 8 },\n  frameScreen: { flex: 1 },\n  screen: { flex: 1, paddingHorizontal: 16, paddingTop: 20, gap: 14 },\n  card2: { paddingVertical: 16, gap: 10 },\n  group: { paddingHorizontal: 14 },\n  row: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', minHeight: 50 },\n  toggle: { width: 46, height: 28, padding: 2, justifyContent: 'center' },\n  knob: { width: 24, height: 24 },\n  sheet: { paddingHorizontal: 16, paddingTop: 10, paddingBottom: 16, gap: 10, borderWidth: StyleSheet.hairlineWidth },\n  grabber: { alignSelf: 'center', width: 40, height: 5 },\n  button: { minHeight: 52, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 16 },\n  buttonText: { fontSize: 16, fontWeight: '600' },\n});\n\nexport default function Reminder(props: DemoProps) {\n  const [time, setTime] = useState<TimeValue>({ hours: 2, minutes: 15 });\n  return (\n    <Sheet {...props}>\n      <RulerTimePicker label=\"Reminder time:\" value={time} onChange={setTime} />\n    </Sheet>\n  );\n}\n"
+    },
+    {
+      "name": "Delivery",
+      "title": "Delivery",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { RulerTimePicker, type TimeValue } from '@/components/ui/ruler-time-picker';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Controls stop at iOS's largest standard text size; content text stays uncapped. */\nconst FONT_CAP = 1.35;\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nconst BLUR: [number, number][] = [2, 4, 7, 10].flatMap((r, ring) =>\n  Array.from({ length: 8 }, (_, i): [number, number] => {\n    const a = ((i + ring / 2) / 8) * Math.PI * 2;\n    return [Math.cos(a) * r, Math.sin(a) * r];\n  }),\n);\n\n/** The settings screen the sheet was opened from, as blocks: a title, a grouped list and toggles. */\nconst SettingsScreen = React.memo(function SettingsScreen() {\n  const { colors, radius, dark } = useKit();\n  // In dark mode the grouped rows sit a step lighter than the screen, like iOS Settings.\n  const group = dark ? colors.secondary : colors.card;\n  const rows: [number, 'value' | 'on' | 'off'][] = [\n    [0.42, 'value'],\n    [0.3, 'value'],\n    [0.38, 'on'],\n    [0.34, 'on'],\n    [0.4, 'off'],\n    [0.28, 'value'],\n  ];\n  const bar = (w: number | `${number}%`, h: number, color: string) => (\n    <View style={{ width: w, height: h, backgroundColor: color, borderRadius: radius.capsule(h) }} />\n  );\n  return (\n    <View style={s.screen}>\n      {bar(150, 30, alpha(colors.foreground, 0.7))}\n      <View style={[s.group, { backgroundColor: group, borderRadius: radius.lg }]}>\n        {rows.map(([w, kind], i) => (\n          <View key={i} style={[s.row, i > 0 && { borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: colors.border }]}>\n            {bar(`${w * 100}%`, 14, alpha(colors.foreground, 0.45))}\n            {kind === 'value' ? (\n              bar(64, 14, colors.mutedForeground)\n            ) : (\n              <View style={[s.toggle, { backgroundColor: kind === 'on' ? colors.accent : colors.border, borderRadius: radius.capsule(28) }]}>\n                <View style={[s.knob, { backgroundColor: colors.background, alignSelf: kind === 'on' ? 'flex-end' : 'flex-start', borderRadius: radius.capsule(24) }]} />\n              </View>\n            )}\n          </View>\n        ))}\n      </View>\n      <View style={[s.group, s.card2, { backgroundColor: group, borderRadius: radius.lg }]}>\n        {bar('55%', 14, alpha(colors.foreground, 0.45))}\n        {bar('80%', 12, colors.mutedForeground)}\n      </View>\n    </View>\n  );\n});\n\n/** A bottom sheet over a blurred, dimmed screen, with a Done button under the picker. */\nfunction Sheet({ screen, bottomInset = 0, children }: DemoProps & { children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={[\n        s.frame,\n        { backgroundColor: colors.muted },\n        screen ? s.frameScreen : { borderRadius: radius.xl, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth },\n      ]}\n    >\n      <View pointerEvents=\"none\" style={StyleSheet.absoluteFill} importantForAccessibility=\"no-hide-descendants\" accessibilityElementsHidden>\n        {BLUR.map(([x, y], i) => (\n          <View key={i} style={[StyleSheet.absoluteFill, { opacity: 1 / 12, transform: [{ translateX: x }, { translateY: y }] }]}>\n            <SettingsScreen />\n          </View>\n        ))}\n        {/* A lighter dim than a modal's, so the screen behind still reads as a screen. */}\n        <View style={[StyleSheet.absoluteFill, { backgroundColor: colors.overlay, opacity: dark ? 0.45 : 0.5 }]} />\n      </View>\n      {/* Raised above the screen: an elevated (lighter) surface in dark mode, and a hairline edge in both. */}\n      <View\n        style={[\n          s.sheet,\n          {\n            backgroundColor: dark ? colors.border : colors.card,\n            borderColor: dark ? alpha(colors.foreground, 0.12) : colors.border,\n            borderRadius: radius.scale(32),\n            marginBottom: 8 + bottomInset,\n          },\n        ]}\n      >\n        <View style={[s.grabber, { backgroundColor: alpha(colors.foreground, dark ? 0.3 : 0.15), borderRadius: radius.capsule(5) }]} />\n        {children}\n        <Pressable\n          accessibilityRole=\"button\"\n          style={({ pressed }) => [s.button, { backgroundColor: colors.primary, borderRadius: radius.lg, opacity: pressed ? 0.85 : 1 }]}\n        >\n          <Text maxFontSizeMultiplier={FONT_CAP} style={[s.buttonText, { color: colors.primaryForeground }]}>Done</Text>\n        </Pressable>\n      </View>\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  frame: { alignSelf: 'stretch', minHeight: 400, justifyContent: 'flex-end', overflow: 'hidden', paddingHorizontal: 8 },\n  frameScreen: { flex: 1 },\n  screen: { flex: 1, paddingHorizontal: 16, paddingTop: 20, gap: 14 },\n  card2: { paddingVertical: 16, gap: 10 },\n  group: { paddingHorizontal: 14 },\n  row: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', minHeight: 50 },\n  toggle: { width: 46, height: 28, padding: 2, justifyContent: 'center' },\n  knob: { width: 24, height: 24 },\n  sheet: { paddingHorizontal: 16, paddingTop: 10, paddingBottom: 16, gap: 10, borderWidth: StyleSheet.hairlineWidth },\n  grabber: { alignSelf: 'center', width: 40, height: 5 },\n  button: { minHeight: 52, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 16 },\n  buttonText: { fontSize: 16, fontWeight: '600' },\n});\n\nexport default function Delivery(props: DemoProps) {\n  const [today] = useState(() => new Date());\n  const [date, setDate] = useState(() => new Date(today.getFullYear(), today.getMonth(), today.getDate() + 2));\n  return (\n    <Sheet {...props}>\n      <RulerTimePicker mode=\"date\" label=\"Delivery date:\" value={date} onChange={setDate} minDate={today} />\n    </Sheet>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/scratch-card.json

@@ -26,6 +26,12 @@
       "\"Scratch to reveal\" / —",
       "Printed on the foil."
     ],
+    [
+      "revealHint",
+      "string",
+      "\"Double-tap to reveal\"",
+      "Screen-reader hint on the foil; pass your own to translate it."
+    ],
     [
       "threshold",
       "number",
@@ -102,7 +108,7 @@
     ],
     [
       "Screen readers",
-      "The foil is a button labelled with label and sublabel, with the hint 'Double-tap to reveal'."
+      "The foil is a button labelled with label and sublabel, with the hint revealHint (default 'Double-tap to reveal')."
     ]
   ],
   "usage": null,

package/registry/_docs/search-bar.json

@@ -41,7 +41,7 @@
     [
       "cancelLabel",
       "string",
-      "\"Cancel\"",
+      "labels.cancel",
       "Cancel button text."
     ],
     [

package/registry/_docs/select.json

@@ -76,7 +76,7 @@
     [
       "placeholder",
       "string",
-      "\"Select…\"",
+      "labels.selectPlaceholder",
       "Shown in the field while open with nothing selected."
     ],
     [
@@ -106,7 +106,7 @@
     [
       "searchPlaceholder",
       "string",
-      "\"Search\"",
+      "labels.search",
       "Placeholder of the filter field."
     ],
     [

package/registry/_docs/slide-to-confirm.json

@@ -11,13 +11,13 @@
     [
       "label",
       "string",
-      "\"Slide to confirm\"",
+      "labels.slideToConfirm",
       "Shimmering text in the track."
     ],
     [
       "confirmedLabel",
       "string",
-      "\"Confirmed\"",
+      "labels.confirmed",
       "Text once completed."
     ],
     [

package/registry/_docs/spinner.json

@@ -40,7 +40,7 @@
     [
       "label",
       "string",
-      "\"Loading\"",
+      "labels.loading",
       "Accessibility label; shown on screen when labelPosition is set."
     ],
     [

package/registry/_docs/stateful-button.json

@@ -39,13 +39,13 @@
     [
       "successText",
       "string",
-      "\"Done\"",
+      "labels.done",
       "Label after success."
     ],
     [
       "errorText",
       "string",
-      "\"Failed\"",
+      "labels.failed",
       "Label after an error."
     ],
     [

package/registry/_docs/swipe-deck.json

@@ -65,7 +65,7 @@
     [
       "rightLabel / leftLabel",
       "string | null",
-      "\"LIKE\" / \"NOPE\"",
+      "labels.like / labels.nope",
       "Stamp shown while dragging; null hides it."
     ],
     [

package/registry/_docs/time-picker.json

@@ -101,7 +101,7 @@
     [
       "label",
       "string",
-      "'Time'",
+      "labels.time",
       "Sheet: field label."
     ],
     [
@@ -119,7 +119,7 @@
     [
       "placeholder",
       "string",
-      "'Select a time'",
+      "labels.selectTime",
       "Sheet: shown while nothing is picked."
     ],
     [

package/registry/_docs/timeline-chart.json

@@ -31,6 +31,12 @@
       "string",
       "auto summary",
       "What screen readers announce; defaults to a summary of the data."
+    ],
+    [
+      "accessibilityHint",
+      "string",
+      "\"Swipe up or down to read each …\"",
+      "Screen-reader hint for the swipe-to-read gesture; pass your own to translate it."
     ]
   ],
   "behavior": [],

package/registry/_docs/toast.json

@@ -2,7 +2,7 @@
   "name": "toast",
   "category": "Feedback",
   "aliases": [],
-  "exportName": "ToastProvider",
+  "exportName": "Toaster",
   "files": [
     "src/components/ui/toast.tsx"
   ],
@@ -90,7 +90,19 @@
       "<Toaster> offset / gap",
       "number",
       "16 (island 10) / 10",
-      "Edge distance and fan-out spacing. No safe-area dependency: pass insets.top + 8 to clear a notch."
+      "Edge distance and fan-out spacing. Added on top of safeArea and bottomInset."
+    ],
+    [
+      "<Toaster> safeArea",
+      "boolean",
+      "false",
+      "Clear the notch / Dynamic Island and home indicator using react-native-safe-area-context's insets (when installed; every Expo Router app has it)."
+    ],
+    [
+      "<Toaster> bottomInset",
+      "number",
+      "0",
+      "Extra space under a bottom stack for a tab bar or composer: <Toaster safeArea bottomInset={49} /> in your (tabs) layout."
     ],
     [
       "<Toaster> closeButton",
@@ -139,7 +151,7 @@
       "Each toast is an alert in a polite live region, labelled by its title and description, with action and Dismiss buttons."
     ]
   ],
-  "usage": "import { toast, Toaster } from '@/components/ui/toast';\n\n// once, at the root of your app\n<Toaster />\n\n// anywhere\ntoast.success('Invoice INV-0042 sent', { description: 'Maya will get it by email.' });",
+  "usage": "import { toast, Toaster } from '@/components/ui/toast';\n\n// once, at the root of your app (safeArea keeps it clear of the notch and home indicator)\n<Toaster safeArea />\n\n// above a tab bar: in app/(tabs)/_layout.tsx, next to <Tabs />\n<Toaster safeArea bottomInset={49} />\n\n// anywhere\ntoast.success('Invoice INV-0042 sent', { description: 'Maya will get it by email.' });",
   "examples": [
     {
       "name": "Default",

package/registry/_docs/treemap.json

@@ -31,6 +31,12 @@
       "string",
       "auto summary",
       "What screen readers announce; defaults to a summary of the data."
+    ],
+    [
+      "accessibilityHint",
+      "string",
+      "\"Swipe up or down to read each …\"",
+      "Screen-reader hint for the swipe-to-read gesture; pass your own to translate it."
     ]
   ],
   "behavior": [],

package/registry/_docs/waterfall.json

@@ -37,6 +37,12 @@
       "string",
       "auto summary",
       "What screen readers announce; defaults to a summary of the data."
+    ],
+    [
+      "accessibilityHint",
+      "string",
+      "\"Swipe up or down to read each …\"",
+      "Screen-reader hint for the swipe-to-read gesture; pass your own to translate it."
     ]
   ],
   "behavior": [],

package/registry/accordion/files/src/components/ui/accordion.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import {
   AccessibilityInfo,
   Animated,
@@ -59,7 +59,9 @@ export function Accordion({
   const [inner, setInner] = useState(defaultValue);
   const open = value ?? inner;
   const openRef = useRef(open);
-  openRef.current = open;
+  useLayoutEffect(() => {
+    openRef.current = open;
+  });
 
   const toggle = useCallback(
     (v: string) => {
@@ -131,8 +133,8 @@ export function AccordionItem({ value, title, subtitle, icon, children, disabled
 
   const [height, setHeight] = useState(0);
   // `progress` drives height (layout → JS driver); `turn` rotates the chevron on the native driver.
-  const progress = useRef(new Animated.Value(open ? 1 : 0)).current;
-  const turn = useRef(new Animated.Value(open ? 1 : 0)).current;
+  const [progress] = useState(() => new Animated.Value(open ? 1 : 0));
+  const [turn] = useState(() => new Animated.Value(open ? 1 : 0));
 
   useEffect(() => {
     // Reduce Motion: open and close at once, chevron flips without turning.