@expokit/cli 0.2.0 → 0.4.0

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,66 +0,0 @@
-{
-  "name": "color-swatch",
-  "category": "Selection",
-  "aliases": [],
-  "exportName": "ColorSwatch",
-  "files": [
-    "src/components/ui/color-swatch.tsx"
-  ],
-  "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)."
-    ]
-  ],
-  "examples": []
-}

package/registry/_docs/kpi-card.json

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

package/registry/_docs/like-button.json

@@ -1,72 +0,0 @@
-{
-  "name": "like-button",
-  "category": "Buttons",
-  "aliases": [],
-  "exportName": "LikeButton",
-  "files": [
-    "src/components/ui/like-button.tsx"
-  ],
-  "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."
-    ]
-  ],
-  "examples": []
-}

package/registry/_docs/morph-button.json

@@ -1,108 +0,0 @@
-{
-  "name": "morph-button",
-  "category": "Buttons",
-  "aliases": [],
-  "exportName": "MorphButton",
-  "files": [
-    "src/components/ui/morph-button.tsx"
-  ],
-  "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)."
-    ]
-  ],
-  "examples": []
-}

package/registry/_docs/pagination-dots.json

@@ -1,88 +0,0 @@
-{
-  "name": "pagination-dots",
-  "category": "Display",
-  "aliases": [],
-  "exportName": "PaginationDots",
-  "files": [
-    "src/components/ui/pagination-dots.tsx"
-  ],
-  "props": [
-    [
-      "count",
-      "number",
-      "—",
-      "Number of pages."
-    ],
-    [
-      "index",
-      "number",
-      "0",
-      "Active page; changes spring the indicator across."
-    ],
-    [
-      "progress",
-      "Animated.Value | AnimatedInterpolation | number",
-      "—",
-      "Live page position (e.g. Animated.divide(scrollX, width)) for smooth tracking while swiping. Use useNativeDriver: false for the 'dots' variant."
-    ],
-    [
-      "variant",
-      "\"dots\" | \"scale\" | \"line\" | \"numbers\"",
-      "\"dots\"",
-      "Stretching pill · growing dot · filling segments · rolling \"2 / 5\"."
-    ],
-    [
-      "size",
-      "\"sm\" | \"md\" | \"lg\"",
-      "\"md\"",
-      "6 / 8 / 10pt dots."
-    ],
-    [
-      "onPress",
-      "(index: number) => void",
-      "—",
-      "Makes dots tappable (44pt hit area) and enables accessibility increment / decrement."
-    ],
-    [
-      "accent",
-      "string",
-      "theme accent",
-      "Active colour."
-    ],
-    [
-      "inactiveColor",
-      "string",
-      "18% foreground",
-      "Inactive dot colour."
-    ],
-    [
-      "accessibilityLabel",
-      "string",
-      "\"Page\"",
-      "Announced with \"2 of 5\"."
-    ],
-    [
-      "style",
-      "StyleProp<ViewStyle>",
-      "—",
-      "Style for the row of dots (the numbers pill or line track in those variants)."
-    ]
-  ],
-  "examples": [
-    {
-      "name": "Onboarding",
-      "title": "Onboarding",
-      "code": "import React, { useMemo, useRef, useState } from 'react';\nimport { Animated, Pressable, ScrollView, Text, View } from 'react-native';\nimport { PaginationDots } from '@/components/ui/pagination-dots';\nimport { useKit } from '@/lib/kit';\n\nconst PAGES: { color?: string; kicker: string; title: string; body: string }[] = [\n  { kicker: 'PLAN', title: 'Plan your week in minutes', body: 'Drag tasks onto your calendar and we block the time for you.' },\n  { color: '#0ea5e9', kicker: 'FOCUS', title: 'Stay in the zone', body: 'Focus sessions silence notifications until your block ends.' },\n  { color: '#10b981', kicker: 'REVIEW', title: 'See what moved', body: 'A Friday recap shows what you shipped and what slipped.' },\n  { color: '#f59e0b', kicker: 'SHARE', title: 'Bring your team along', body: 'Shared boards keep everyone on the same page.' },\n];\n\nexport default function Onboarding() {\n  const { colors, radius } = useKit();\n  const [width, setWidth] = useState(0);\n  const [page, setPage] = useState(0);\n  const scrollX = useRef(new Animated.Value(0)).current;\n  const ref = useRef<ScrollView>(null);\n  const progress = useMemo(() => (width ? Animated.divide(scrollX, width) : 0), [scrollX, width]);\n  const go = (i: number) => ref.current?.scrollTo({ x: i * width, animated: true });\n\n  return (\n    <View style={{ gap: 18 }} onLayout={(e) => setWidth(e.nativeEvent.layout.width)}>\n      <Animated.ScrollView\n        ref={ref}\n        horizontal\n        pagingEnabled\n        showsHorizontalScrollIndicator={false}\n        scrollEventThrottle={16}\n        onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], { useNativeDriver: false })}\n        onMomentumScrollEnd={(e) => width && setPage(Math.round(e.nativeEvent.contentOffset.x / width))}\n      >\n        {PAGES.map((p) => (\n          <View key={p.title} style={{ width: width || 1, paddingHorizontal: 2 }}>\n            <View style={{ height: 210, borderRadius: radius.scale(24), backgroundColor: p.color ?? colors.accent, padding: 22, justifyContent: 'flex-end' }}>\n              <Text style={{ color: 'rgba(255,255,255,0.75)', fontSize: 12, fontWeight: '400', letterSpacing: 1.2 }}>{p.kicker}</Text>\n              <Text style={{ color: '#fff', fontSize: 24, fontWeight: '400', letterSpacing: -0.5, marginTop: 6 }}>{p.title}</Text>\n              <Text style={{ color: 'rgba(255,255,255,0.85)', fontSize: 14, lineHeight: 20, marginTop: 6 }}>{p.body}</Text>\n            </View>\n          </View>\n        ))}\n      </Animated.ScrollView>\n      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>\n        <Pressable onPress={() => go(PAGES.length - 1)} hitSlop={12} accessibilityRole=\"button\">\n          <Text style={{ fontSize: 15, fontWeight: '400', color: colors.mutedForeground }}>Skip</Text>\n        </Pressable>\n        <PaginationDots count={PAGES.length} progress={progress} onPress={go} accessibilityLabel=\"Onboarding page\" />\n        <Pressable\n          onPress={() => go(Math.min(PAGES.length - 1, page + 1))}\n          accessibilityRole=\"button\"\n          style={{ height: 44, paddingHorizontal: 18, borderRadius: radius.capsule(44), backgroundColor: colors.accent, justifyContent: 'center' }}\n        >\n          <Text style={{ fontSize: 15, fontWeight: '400', color: colors.accentForeground }}>{page === PAGES.length - 1 ? 'Done' : 'Next'}</Text>\n        </Pressable>\n      </View>\n    </View>\n  );\n}\n"
-    },
-    {
-      "name": "Variants",
-      "title": "Variants",
-      "code": "import React, { useMemo, useRef, useState } from 'react';\nimport { Animated, Pressable, ScrollView, Text, View } from 'react-native';\nimport { PaginationDots } from '@/components/ui/pagination-dots';\nimport { useKit } from '@/lib/kit';\n\nfunction Label({ children }: { children: string }) {\n  const { colors } = useKit();\n  return <Text style={{ fontSize: 12, fontWeight: '400', letterSpacing: 0.4, color: colors.mutedForeground }}>{children}</Text>;\n}\n\nexport default function Variants() {\n  const { colors, radius } = useKit();\n  const [i, setI] = useState(1);\n  return (\n    <View style={{ gap: 22 }}>\n      {(['dots', 'scale', 'line', 'numbers'] as const).map((variant) => (\n        <View key={variant} style={{ gap: 10 }}>\n          <Label>{variant.toUpperCase()}</Label>\n          <PaginationDots variant={variant} count={5} index={i} onPress={setI} />\n        </View>\n      ))}\n      <View style={{ flexDirection: 'row', gap: 10, justifyContent: 'center' }}>\n        {['Previous', 'Next'].map((t, k) => (\n          <Pressable\n            key={t}\n            onPress={() => setI((v) => Math.max(0, Math.min(4, v + (k ? 1 : -1))))}\n            accessibilityRole=\"button\"\n            style={{ height: 44, paddingHorizontal: 18, borderRadius: radius.md, borderWidth: 1, borderColor: colors.border, justifyContent: 'center' }}\n          >\n            <Text style={{ fontSize: 14, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n          </Pressable>\n        ))}\n      </View>\n    </View>\n  );\n}\n"
-    },
-    {
-      "name": "Sizes",
-      "title": "Sizes",
-      "code": "import { Animated, Pressable, ScrollView, Text, View } from 'react-native';\nimport { PaginationDots } from '@/components/ui/pagination-dots';\n\nexport default function Sizes() {\n  return (\n    <View style={{ gap: 18, alignItems: 'center' }}>\n      <PaginationDots size=\"sm\" count={6} index={2} />\n      <PaginationDots size=\"md\" count={6} index={2} />\n      <PaginationDots size=\"lg\" count={6} index={2} />\n    </View>\n  );\n}\n"
-    }
-  ]
-}

package/registry/_docs/shimmer-button.json

@@ -1,78 +0,0 @@
-{
-  "name": "shimmer-button",
-  "category": "Buttons",
-  "aliases": [],
-  "exportName": "ShimmerButton",
-  "files": [
-    "src/components/ui/shimmer-button.tsx"
-  ],
-  "props": [
-    [
-      "variant",
-      "\"shimmer\" | \"glow\" | \"border-beam\"",
-      "\"shimmer\"",
-      "Light sweep, breathing halo or orbiting border beam."
-    ],
-    [
-      "size",
-      "\"sm\" | \"md\" | \"lg\"",
-      "\"md\"",
-      "40 / 50 / 58pt tall."
-    ],
-    [
-      "color",
-      "string",
-      "primary / accent",
-      "Button colour (beam colour for border-beam)."
-    ],
-    [
-      "textColor",
-      "string",
-      "readable on color",
-      "Label colour."
-    ],
-    [
-      "speed",
-      "number",
-      "2600 / 2400 / 3200",
-      "Loop length in ms."
-    ],
-    [
-      "pill",
-      "boolean",
-      "true",
-      "Fully rounded ends."
-    ],
-    [
-      "block",
-      "boolean",
-      "false",
-      "Stretches to the parent's width (alignSelf: stretch)."
-    ],
-    [
-      "left / right",
-      "ReactNode",
-      "—",
-      "Icons beside the label."
-    ],
-    [
-      "textStyle",
-      "StyleProp<TextStyle>",
-      "—",
-      "Style for the label text."
-    ],
-    [
-      "style",
-      "StyleProp<ViewStyle>",
-      "—",
-      "Style for the outer animated wrapper (margins, alignment)."
-    ],
-    [
-      "…PressableProps",
-      "",
-      "",
-      "onPress, disabled, …"
-    ]
-  ],
-  "examples": []
-}