@expokit/cli 0.3.0 → 0.4.0

package/registry/time-picker/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/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

@@ -244,7 +244,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 +379,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 +455,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 +479,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 style={[styles.tagText, ff, { color: tint }]}>{t}</Text>
             </View>
           ))}
           {item.links?.map((l) => (
@@ -490,14 +491,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 +928,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 +941,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 style={[styles.moreText, ff]}>+{more}</Text>
         </View>
       ) : null}
     </View>

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

@@ -116,7 +116,8 @@ 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 scale = useRef(new Animated.Value(1)).current;
   const isDisabled = disabled || loading;
@@ -149,7 +150,7 @@ export function Button({
   const label = isTextNode(children) ? (
     <Text
       numberOfLines={1}
-      style={[styles.label, { color: fg, fontSize: s.font }, variant === 'link' && styles.link, textStyle]}
+      style={[styles.label, ff, { color: fg, fontSize: s.font }, variant === 'link' && styles.link, textStyle]}
     >
       {children}
     </Text>
@@ -235,7 +236,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 style={[styles.label, ff, { color: fg, fontSize: s.font, opacity: 0.85 }]}>{children}</Text>
                 ) : null}
               </View>
             ) : (

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

@@ -417,7 +417,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 +506,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 +573,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 +595,7 @@ 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 style={[styles.actionText, ff, { color: look.actionFg }]}>{data.action.label}</Text>
                 </Pressable>
               ) : null}
               {closeButton ? (
@@ -648,7 +649,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 +895,18 @@ 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 style={[styles.islandChipText, ff, { color: fg }]}>{shown.action.label}</Text>
                         </View>
                       ) : null}
                     </Pressable>
@@ -921,7 +923,7 @@ 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 style={[styles.title, ff, { color: fg }]}>{shown.action.label}</Text>
                         </Pressable>
                       </View>
                     ) : null}

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": []
-}

package/registry/_docs/morph-button.json

@@ -1,128 +0,0 @@
-{
-  "name": "morph-button",
-  "category": "Buttons",
-  "aliases": [],
-  "exportName": "MorphButton",
-  "files": [
-    "src/components/ui/morph-button.tsx"
-  ],
-  "summary": "An async button that shrinks to a spinner, then draws a tick or shakes a cross.",
-  "props": [
-    [
-      "onPress",
-      "() => Promise<unknown>",
-      "—",
-      "Async work. Resolve → tick, reject → cross + shake."
-    ],
-    [
-      "variant",
-      "\"primary\" | \"accent\" | \"soft\" | \"outline\"",
-      "\"primary\"",
-      "Look while idle."
-    ],
-    [
-      "size",
-      "\"sm\" | \"md\" | \"lg\"",
-      "\"md\"",
-      "40 / 48 / 56pt tall."
-    ],
-    [
-      "color",
-      "string",
-      "theme accent",
-      "Brand colour for accent, soft and outline."
-    ],
-    [
-      "successColor / errorColor",
-      "string",
-      "theme success / danger",
-      "Colours of the result circle."
-    ],
-    [
-      "resetAfter",
-      "number",
-      "1300",
-      "ms the result stays before morphing back."
-    ],
-    [
-      "minLoading",
-      "number",
-      "600",
-      "Minimum ms the spinner is shown."
-    ],
-    [
-      "onSuccess / onError",
-      "(value) => void",
-      "—",
-      "Called with the resolved value or the thrown error."
-    ],
-    [
-      "onStatusChange",
-      "(status) => void",
-      "—",
-      "\"idle\" | \"loading\" | \"success\" | \"error\"."
-    ],
-    [
-      "pill",
-      "boolean",
-      "true",
-      "Fully rounded ends while idle."
-    ],
-    [
-      "block",
-      "boolean",
-      "false",
-      "Full width; shrinks to the centre while busy."
-    ],
-    [
-      "left",
-      "ReactNode",
-      "—",
-      "Icon before the label."
-    ],
-    [
-      "haptics",
-      "boolean",
-      "true",
-      "Taps on start, success and error."
-    ],
-    [
-      "disabled",
-      "boolean",
-      "false",
-      "Blocks presses."
-    ],
-    [
-      "textStyle",
-      "StyleProp<TextStyle>",
-      "—",
-      "Style for the idle label text."
-    ],
-    [
-      "style",
-      "StyleProp<ViewStyle>",
-      "—",
-      "Style for the outer animated wrapper (margins, alignment)."
-    ]
-  ],
-  "behavior": [
-    [
-      "Motion",
-      "While the promise runs the button springs into a circle with a spinner. A resolve draws a success tick, a reject shakes with an error cross, then it springs back to its label."
-    ],
-    [
-      "Touch",
-      "Presses are ignored while it is busy, and the spinner shows for at least minLoading so fast requests still register."
-    ],
-    [
-      "Haptics",
-      "A light impact on start, then a success or error notification when the promise settles."
-    ],
-    [
-      "Screen readers",
-      "A button with busy and disabled states; while not idle its value reads \"Working\", \"Done\" or \"Failed\"."
-    ]
-  ],
-  "usage": null,
-  "examples": []
-}