@expokit/cli 0.3.0 → 0.4.1

package/registry/timeline/files/src/components/ui/avatar.tsx

@@ -131,7 +131,8 @@ export function Avatar({
   haptics = true,
   style,
 }: AvatarProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const reduceMotion = useReduceMotion();
   const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
   const px = resolveSize(size);
@@ -280,6 +281,7 @@ export function Avatar({
             numberOfLines={1}
             style={[
               styles.initials,
+              ff,
               {
                 color: ink,
                 fontSize: Math.max(9, px * (initials.length > 1 ? 0.37 : 0.42)),
@@ -448,7 +450,7 @@ export function Avatar({
           {badgeText ? (
             <Text
               allowFontScaling={false}
-              style={[styles.badgeText, { color: colors.dangerForeground, fontSize: Math.max(9, badgeH * 0.6) }]}
+              style={[styles.badgeText, ff, { color: colors.dangerForeground, fontSize: Math.max(9, badgeH * 0.6) }]}
             >
               {badgeText}
             </Text>
@@ -623,7 +625,8 @@ export function AvatarGroup({
   onPressMore,
   style,
 }: AvatarGroupProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const reduceMotion = useReduceMotion();
   const px = resolveSize(size);
   const bg = surface ?? colors.background;
@@ -699,7 +702,7 @@ export function AvatarGroup({
         <Text
           allowFontScaling={false}
           numberOfLines={1}
-          style={[styles.moreText, { color: colors.foreground, fontSize: Math.max(8, px * (extraText.length <= 2 ? 0.34 : extraText.length === 3 ? 0.29 : 0.24)) }]}
+          style={[styles.moreText, ff, { color: colors.foreground, fontSize: Math.max(8, px * (extraText.length <= 2 ? 0.34 : extraText.length === 3 ? 0.29 : 0.24)) }]}
         >
           +{extraText}
         </Text>

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

@@ -93,6 +93,10 @@ export interface TimelineProps {
   style?: StyleProp<ViewStyle>;
 }
 
+// Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
+// content text scales all the way.
+const FONT_CAP = 1.35;
+
 const ENTER_STAGGER = 70;
 const FILL_START = 160;
 /** Where the fill point sits in the viewport at the top of the scroll (it slides to the bottom by the end). */
@@ -244,7 +248,7 @@ function ScrollTimeline({
   const dottedFrom = Math.max(0, reach);
   const dottedH = measured && reach < n - 1 ? nodes[n - 1] - nodes[dottedFrom] : 0;
 
-  let fillStyle: Animated.WithAnimatedObject<ViewStyle> | null = null;
+  let fillStyle: Animated.WithAnimatedValue<ViewStyle> | null = null;
   if (fillH > 0) {
     if (frozen) {
       fillStyle = {};
@@ -379,7 +383,8 @@ function Row({
   lit,
   onNode,
 }: RowProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const compact = variant === 'compact';
   const card = variant === 'card';
   const scroll = variant === 'scroll';
@@ -454,21 +459,21 @@ function Row({
       <View style={[styles.titleRow, compact && styles.compactRow]}>
         <Text
           numberOfLines={compact ? 1 : 2}
-          style={[styles.title, { fontSize: titleSize, lineHeight: titleLine, color: titleColor }]}
+          style={[styles.title, ff, { fontSize: titleSize, lineHeight: titleLine, color: titleColor }]}
         >
           {item.title}
         </Text>
         {item.time ? (
           <Text
             numberOfLines={1}
-            style={[styles.time, { lineHeight: titleLine, color: current ? tint : colors.mutedForeground }]}
+            style={[styles.time, ff, { lineHeight: titleLine, color: current ? tint : colors.mutedForeground }]}
           >
             {item.time}
           </Text>
         ) : null}
       </View>
       {item.description && !compact ? (
-        <Text style={[styles.desc, { color: colors.mutedForeground }]}>{item.description}</Text>
+        <Text style={[styles.desc, ff, { color: colors.mutedForeground }]}>{item.description}</Text>
       ) : null}
       {photos.length ? <TimelineGallery images={photos} dim={muted} /> : null}
       {item.tags?.length || hasLinks ? (
@@ -478,7 +483,7 @@ function Row({
               key={`t-${t}`}
               style={[styles.tag, { borderRadius: radius.capsule(22), backgroundColor: alpha(tint, dark ? 0.2 : 0.1) }]}
             >
-              <Text style={[styles.tagText, { color: tint }]}>{t}</Text>
+              <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.tagText, ff, { color: tint }]}>{t}</Text>
             </View>
           ))}
           {item.links?.map((l) => (
@@ -490,14 +495,14 @@ function Row({
               hitSlop={12}
               style={({ pressed }) => [styles.link, { opacity: pressed ? 0.55 : 1 }]}
             >
-              <Text style={[styles.linkText, { color: tint }]}>{l.label} →</Text>
+              <Text style={[styles.linkText, ff, { color: tint }]}>{l.label} →</Text>
             </Pressable>
           ))}
         </View>
       ) : null}
       {item.content ? (
         <View style={styles.content}>
-          {isTextNode(item.content) ? <Text style={{ color: colors.foreground }}>{item.content}</Text> : item.content}
+          {isTextNode(item.content) ? <Text style={[ff, { color: colors.foreground }]}>{item.content}</Text> : item.content}
         </View>
       ) : null}
     </>
@@ -927,7 +932,8 @@ function TimelineGallery({ images, dim }: { images: TimelineImageSource[]; dim:
 }
 
 function Photo({ uri, delay, style, more }: { uri: string; delay: number; style: StyleProp<ViewStyle>; more: number }) {
-  const { colors } = useKit();
+  const { colors, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const shown = useRef(new Animated.Value(0)).current;
   return (
     <View style={[styles.photo, { backgroundColor: colors.muted }, style]}>
@@ -939,7 +945,7 @@ function Photo({ uri, delay, style, more }: { uri: string; delay: number; style:
       />
       {more > 0 ? (
         <View style={[StyleSheet.absoluteFill, styles.more]}>
-          <Text style={styles.moreText}>+{more}</Text>
+          <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.moreText, ff]}>+{more}</Text>
         </View>
       ) : null}
     </View>
@@ -1037,10 +1043,11 @@ const styles = StyleSheet.create({
   mini: { position: 'absolute', alignItems: 'center', justifyContent: 'center' },
   bodyWrap: { flex: 1, minWidth: 0 },
   card: { borderWidth: 1 },
-  titleRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 10 },
+  // Wraps only when the time no longer fits beside the title (large text sizes): it drops below.
+  titleRow: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'flex-start', gap: 10 },
   compactRow: { alignItems: 'center' },
   title: { flex: 1, fontWeight: '400', letterSpacing: -0.2 },
-  time: { fontSize: 12.5, fontWeight: '400', fontVariant: ['tabular-nums'] },
+  time: { flexShrink: 1, fontSize: 12.5, fontWeight: '400', fontVariant: ['tabular-nums'] },
   desc: { fontSize: 14, fontWeight: '400', lineHeight: 20, marginTop: 3 },
   gallery: { marginTop: 12, width: '100%', overflow: 'hidden', borderWidth: 1 },
   grid: { flexDirection: 'row', gap: 3 },

package/registry/timeline/files/src/lib/kit.tsx

@@ -181,14 +181,17 @@ export function useKit(): Theme {
   return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
 }
 
-/** Shared motion presets so the whole kit moves the same way. */
+/**
+ * Shared motion presets so the whole kit moves the same way. Every spring is critically damped
+ * (damping ≥ 2·√(stiffness·mass)): it settles smoothly with no overshoot or wobble.
+ */
 export const motion = {
   /** Toggles, selection indicators. */
-  snappy: { damping: 18, stiffness: 260, mass: 0.8 },
-  /** Press feedback, pops. */
-  bouncy: { damping: 11, stiffness: 220, mass: 0.7 },
+  snappy: { damping: 30, stiffness: 260, mass: 0.8 },
+  /** Press feedback, pops. (Kept under its old name; it no longer bounces.) */
+  bouncy: { damping: 26, stiffness: 220, mass: 0.7 },
   /** Sheets, layout changes. */
-  gentle: { damping: 22, stiffness: 160, mass: 1 },
+  gentle: { damping: 27, stiffness: 160, mass: 1 },
   fast: 160,
   normal: 240,
 };

package/registry/toast/files/src/components/ui/button.tsx

@@ -1,6 +1,7 @@
 import * as Haptics from 'expo-haptics';
-import React, { useId, useRef } from 'react';
+import React, { useEffect, useId, useRef, useState } from 'react';
 import {
+  AccessibilityInfo,
   ActivityIndicator,
   Animated,
   Pressable,
@@ -55,6 +56,10 @@ export interface ButtonProps extends Omit<PressableProps, 'style' | 'children'>
   textStyle?: StyleProp<TextStyle>;
 }
 
+// Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
+// content text scales all the way.
+const FONT_CAP = 1.35;
+
 const SIZES: Record<ButtonSize, { h: number; px: number; font: number; gap: number }> = {
   sm: { h: 36, px: 14, font: 14, gap: 6 },
   md: { h: 46, px: 18, font: 15.5, gap: 8 },
@@ -116,8 +121,10 @@ export function Button({
   onPressOut,
   ...props
 }: ButtonProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const gid = 'btn' + useId().replace(/[^a-zA-Z0-9]/g, '');
+  const reduce = useReduceMotion();
   const scale = useRef(new Animated.Value(1)).current;
   const isDisabled = disabled || loading;
   const tint = color ?? colors.accent;
@@ -144,12 +151,17 @@ export function Button({
   const solid = bg !== 'transparent';
   const quiet = variant === 'ghost' || variant === 'outline' || variant === 'link';
 
-  const spring = (to: number) => Animated.spring(scale, { toValue: to, useNativeDriver: true, ...motion.bouncy }).start();
+  // Reduce Motion: no squish; the pressed wash / opacity still marks the press.
+  const spring = (to: number) => {
+    if (reduce) return scale.setValue(1);
+    Animated.spring(scale, { toValue: to, useNativeDriver: true, ...motion.bouncy }).start();
+  };
 
   const label = isTextNode(children) ? (
     <Text
       numberOfLines={1}
-      style={[styles.label, { color: fg, fontSize: s.font }, variant === 'link' && styles.link, textStyle]}
+      maxFontSizeMultiplier={FONT_CAP}
+      style={[styles.label, ff, { color: fg, fontSize: s.font }, variant === 'link' && styles.link, textStyle]}
     >
       {children}
     </Text>
@@ -184,7 +196,8 @@ export function Button({
         style={({ pressed }) => [
           styles.base,
           {
-            height: s.h,
+            minHeight: s.h,
+            height: size === 'icon' ? s.h : undefined,
             width: size === 'icon' ? s.h : undefined,
             paddingHorizontal: variant === 'link' ? 0 : s.px,
             gap: s.gap,
@@ -235,7 +248,7 @@ export function Button({
               <View style={styles.row}>
                 <ActivityIndicator size="small" color={fg} />
                 {size !== 'icon' && isTextNode(children) ? (
-                  <Text style={[styles.label, { color: fg, fontSize: s.font, opacity: 0.85 }]}>{children}</Text>
+                  <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.label, ff, { color: fg, fontSize: s.font, opacity: 0.85 }]}>{children}</Text>
                 ) : null}
               </View>
             ) : (
@@ -252,6 +265,22 @@ export function Button({
   );
 }
 
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((r) => alive && setReduce(r))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
 const styles = StyleSheet.create({
   base: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center' },
   row: { flexDirection: 'row', alignItems: 'center', gap: 8 },

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

@@ -271,6 +271,9 @@ export interface ToasterProps {
 
 const PEEK = 12;
 const GUESS_HEIGHT = 64;
+// Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
+// content text scales all the way.
+const FONT_CAP = 1.35;
 
 /**
  * Hosts the toasts. It fills its parent absolutely (touches pass through), so drop it at the
@@ -417,7 +420,8 @@ function ToastItem({
   onRemoved,
 }: ToastItemProps) {
   const toast = useToast();
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const toward = edge === 'bottom' ? 1 : -1; // swipe direction that dismisses toward the edge
   const last = useRef(layout ?? { y: 0, scale: 1, hidden: false, faded: false });
   if (layout) last.current = layout;
@@ -505,8 +509,8 @@ function ToastItem({
         },
         onPanResponderTerminate: () => {
           setTouching(false);
-          Animated.spring(dragX, { toValue: 0, useNativeDriver: true }).start();
-          Animated.spring(dragY, { toValue: 0, useNativeDriver: true }).start();
+          Animated.spring(dragX, { toValue: 0, ...motion.snappy, useNativeDriver: true }).start();
+          Animated.spring(dragY, { toValue: 0, ...motion.snappy, useNativeDriver: true }).start();
         },
       });
     })(),
@@ -572,11 +576,11 @@ function ToastItem({
             <Animated.View style={[styles.row, minimal ? styles.padMinimal : icon ? styles.padIcon : styles.pad, { opacity: content }]}>
               {icon ? <View style={!minimal && data.description ? styles.iconTop : null}>{icon}</View> : null}
               <View style={minimal ? styles.textMinimal : styles.text}>
-                <Text numberOfLines={minimal ? 1 : 3} style={[styles.title, { color: look.title }]}>
+                <Text numberOfLines={minimal ? 1 : 3} style={[styles.title, ff, { color: look.title }]}>
                   {data.title}
                 </Text>
                 {data.description ? (
-                  <Text numberOfLines={minimal ? 2 : 4} style={[styles.desc, minimal && styles.descMinimal, { color: look.desc }]}>
+                  <Text numberOfLines={minimal ? 2 : 4} style={[styles.desc, minimal && styles.descMinimal, ff, { color: look.desc }]}>
                     {data.description}
                   </Text>
                 ) : null}
@@ -594,7 +598,9 @@ function ToastItem({
                     { borderRadius: radius.capsule(32), backgroundColor: look.actionBg, opacity: pressed ? 0.7 : 1 },
                   ]}
                 >
-                  <Text style={[styles.actionText, { color: look.actionFg }]}>{data.action.label}</Text>
+                  <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.actionText, ff, { color: look.actionFg }]}>
+                    {data.action.label}
+                  </Text>
                 </Pressable>
               ) : null}
               {closeButton ? (
@@ -648,7 +654,8 @@ interface IslandToasterProps {
  * fade are native-driven on their own wrapper views.
  */
 function IslandToaster({ store, toasts, duration, offset, haptics, reduceMotion, style }: IslandToasterProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const active = toasts.filter((t) => !t.dismissed);
   const front = active[0];
 
@@ -893,18 +900,20 @@ function IslandToaster({ store, toasts, duration, offset, haptics, reduceMotion,
                     >
                       {icon ? <View style={expanded && shown.description ? styles.iconTop : null}>{icon}</View> : null}
                       <View style={styles.text}>
-                        <Text numberOfLines={expanded ? 3 : 1} style={[styles.title, { color: fg }]}>
+                        <Text numberOfLines={expanded ? 3 : 1} style={[styles.title, ff, { color: fg }]}>
                           {shown.title}
                         </Text>
                         {shown.description ? (
-                          <Text numberOfLines={expanded ? undefined : 1} style={[styles.desc, { color: alpha(fg, 0.62) }]}>
+                          <Text numberOfLines={expanded ? undefined : 1} style={[styles.desc, ff, { color: alpha(fg, 0.62) }]}>
                             {shown.description}
                           </Text>
                         ) : null}
                       </View>
                       {!expanded && shown.action ? (
                         <View style={[styles.islandChip, { borderRadius: radius.capsule(24), backgroundColor: alpha(fg, 0.14) }]}>
-                          <Text style={[styles.islandChipText, { color: fg }]}>{shown.action.label}</Text>
+                          <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.islandChipText, ff, { color: fg }]}>
+                            {shown.action.label}
+                          </Text>
                         </View>
                       ) : null}
                     </Pressable>
@@ -921,7 +930,9 @@ function IslandToaster({ store, toasts, duration, offset, haptics, reduceMotion,
                             { borderRadius: radius.capsule(44), backgroundColor: alpha(fg, pressed ? 0.24 : 0.16) },
                           ]}
                         >
-                          <Text style={[styles.title, { color: fg }]}>{shown.action.label}</Text>
+                          <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.title, ff, { color: fg }]}>
+                            {shown.action.label}
+                          </Text>
                         </Pressable>
                       </View>
                     ) : null}
@@ -1265,7 +1276,7 @@ const styles = StyleSheet.create({
   title: { fontSize: 14.5, fontWeight: '400', lineHeight: 20, letterSpacing: -0.1 },
   desc: { fontSize: 13.5, fontWeight: '400', lineHeight: 19 },
   descMinimal: { fontSize: 13, lineHeight: 17 },
-  action: { paddingHorizontal: 12, height: 32, alignItems: 'center', justifyContent: 'center' },
+  action: { paddingHorizontal: 12, minHeight: 32, alignItems: 'center', justifyContent: 'center' },
   actionText: { fontSize: 13, fontWeight: '400' },
   close: { alignSelf: 'flex-start', padding: 2, marginRight: -4 },
   bar: { position: 'absolute', left: 0, right: 0, bottom: 0, height: 2, transformOrigin: 'left' },
@@ -1275,10 +1286,10 @@ const styles = StyleSheet.create({
   islandPlace: { position: 'absolute', top: 0 },
   islandPad: { paddingVertical: 14, paddingHorizontal: 20 },
   islandPadIcon: { paddingTop: 13, paddingBottom: 15, paddingLeft: 14, paddingRight: 18 },
-  islandChip: { paddingHorizontal: 10, height: 24, justifyContent: 'center' },
+  islandChip: { paddingHorizontal: 10, minHeight: 24, justifyContent: 'center' },
   islandChipText: { fontSize: 12.5, fontWeight: '400' },
   islandActions: { paddingHorizontal: 14, paddingBottom: 16, marginTop: -2 },
-  islandAction: { height: 44, alignItems: 'center', justifyContent: 'center' },
+  islandAction: { minHeight: 44, alignItems: 'center', justifyContent: 'center' },
   islandTrack: { position: 'absolute', left: 28, right: 28, bottom: 6, height: 2, borderRadius: 1, overflow: 'hidden' },
   islandFill: { flex: 1, transformOrigin: 'left' },
 });

package/registry/toast/files/src/lib/kit.tsx

@@ -181,14 +181,17 @@ export function useKit(): Theme {
   return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
 }
 
-/** Shared motion presets so the whole kit moves the same way. */
+/**
+ * Shared motion presets so the whole kit moves the same way. Every spring is critically damped
+ * (damping ≥ 2·√(stiffness·mass)): it settles smoothly with no overshoot or wobble.
+ */
 export const motion = {
   /** Toggles, selection indicators. */
-  snappy: { damping: 18, stiffness: 260, mass: 0.8 },
-  /** Press feedback, pops. */
-  bouncy: { damping: 11, stiffness: 220, mass: 0.7 },
+  snappy: { damping: 30, stiffness: 260, mass: 0.8 },
+  /** Press feedback, pops. (Kept under its old name; it no longer bounces.) */
+  bouncy: { damping: 26, stiffness: 220, mass: 0.7 },
   /** Sheets, layout changes. */
-  gentle: { damping: 22, stiffness: 160, mass: 1 },
+  gentle: { damping: 27, stiffness: 160, mass: 1 },
   fast: 160,
   normal: 240,
 };

package/schema/components.schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://expokit.karandev.in/schema.json",
+  "$schema": "https://expokit.in/schema.json",
   "aliases": {
     "components": "@/components",
     "lib": "@/lib",

package/registry/_docs/color-swatch.json

@@ -1,82 +0,0 @@
-{
-  "name": "color-swatch",
-  "category": "Selection",
-  "aliases": [],
-  "exportName": "ColorSwatch",
-  "files": [
-    "src/components/ui/color-swatch.tsx"
-  ],
-  "summary": "A colour picker where the chosen swatch settles in as a ring springs out around it.",
-  "props": [
-    [
-      "colors",
-      "(string | { color, label? })[]",
-      "10-colour palette",
-      "Your swatches (hex)."
-    ],
-    [
-      "value / onValueChange",
-      "string",
-      "—",
-      "Controlled selection (or use defaultValue)."
-    ],
-    [
-      "defaultValue",
-      "string",
-      "—",
-      "Initial selection when uncontrolled."
-    ],
-    [
-      "variant",
-      "\"circle\" | \"square\" | \"pill\"",
-      "\"circle\"",
-      "Swatch shape."
-    ],
-    [
-      "size",
-      "\"sm\" | \"md\" | \"lg\"",
-      "\"md\"",
-      "28 / 36 / 44pt swatches."
-    ],
-    [
-      "scrollable",
-      "boolean",
-      "false",
-      "One horizontally scrolling row instead of a wrapping grid."
-    ],
-    [
-      "showLabels",
-      "boolean",
-      "false",
-      "Colour names under each swatch."
-    ],
-    [
-      "disabled",
-      "boolean",
-      "false",
-      "Dims and blocks presses."
-    ],
-    [
-      "style",
-      "StyleProp<ViewStyle>",
-      "—",
-      "Style for the wrapping grid (the ScrollView when scrollable)."
-    ]
-  ],
-  "behavior": [
-    [
-      "Touch",
-      "Tap a swatch to choose it. Each swatch's hit area is padded out to 44pt."
-    ],
-    [
-      "Motion",
-      "The chosen swatch settles inward while a ring and check spring out. The check uses whichever ink reads best on that colour."
-    ],
-    [
-      "Screen readers",
-      "A radiogroup labelled \"Colour\" by default; each swatch is a radio named by its label or hex value."
-    ]
-  ],
-  "usage": null,
-  "examples": []
-}

package/registry/_docs/kpi-card.json

@@ -1,14 +0,0 @@
-{
-  "name": "kpi-card",
-  "category": null,
-  "aliases": [],
-  "exportName": "KpiCard",
-  "files": [
-    "src/components/charts/kpi-card.tsx"
-  ],
-  "summary": null,
-  "props": [],
-  "behavior": [],
-  "usage": null,
-  "examples": []
-}

package/registry/_docs/like-button.json

@@ -1,92 +0,0 @@
-{
-  "name": "like-button",
-  "category": "Buttons",
-  "aliases": [],
-  "exportName": "LikeButton",
-  "files": [
-    "src/components/ui/like-button.tsx"
-  ],
-  "summary": "A heart, star or bookmark that pops and bursts into particles when liked.",
-  "props": [
-    [
-      "liked / onChange",
-      "boolean",
-      "—",
-      "Controlled state (or use defaultLiked)."
-    ],
-    [
-      "defaultLiked",
-      "boolean",
-      "false",
-      "Initial state when uncontrolled; `count` is the count for this state."
-    ],
-    [
-      "variant",
-      "\"heart\" | \"star\" | \"bookmark\"",
-      "\"heart\"",
-      "Heart, star or bookmark icon; also picks the default liked colour and label."
-    ],
-    [
-      "count",
-      "number",
-      "—",
-      "Shows a rolling counter (1.2K formatting). Uncontrolled: the count for defaultLiked; the component adds the user's like."
-    ],
-    [
-      "size",
-      "number",
-      "26",
-      "Icon size."
-    ],
-    [
-      "color",
-      "string",
-      "danger / warning / accent",
-      "Liked colour (per variant default)."
-    ],
-    [
-      "particleColors",
-      "string[]",
-      "liked colour + theme",
-      "Colours of the burst dots."
-    ],
-    [
-      "haptics",
-      "boolean",
-      "true",
-      "Tap when liking."
-    ],
-    [
-      "disabled",
-      "boolean",
-      "false",
-      "Blocks presses."
-    ],
-    [
-      "style",
-      "StyleProp<ViewStyle>",
-      "—",
-      "Style for the pressable row holding the icon and counter."
-    ]
-  ],
-  "behavior": [
-    [
-      "Motion",
-      "Liking pops the icon, fills it on a bouncy spring and throws a ring and a burst of coloured dots. The counter rolls up or down to the new number."
-    ],
-    [
-      "Haptics",
-      "A light impact when it is liked; un-liking is silent."
-    ],
-    [
-      "Screen readers",
-      "A button labelled \"Like\", \"Favourite\" or \"Bookmark\" (or your label), with a selected state and the count as its value."
-    ],
-    [
-      "Touch",
-      "Small icons get a hitSlop that brings the target up to 44pt."
-    ]
-  ],
-  "usage": null,
-  "examples": []
-}