@expokit/cli 0.4.3 → 0.5.0

package/registry/liquidglass-tab/files/src/components/TabScreen.tsx

@@ -6,6 +6,7 @@ import {
   Text,
   View,
   useColorScheme,
+  useWindowDimensions,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -17,7 +18,7 @@ interface TabScreenProps {
   description: string;
   accent: string;
   /** Label of a button pinned to the bottom of the screen, above the tab bar. */
-  action?: string;
+  action?: string | undefined;
 }
 
 export function TabScreen({ title, description, accent, action }: TabScreenProps) {
@@ -27,6 +28,12 @@ export function TabScreen({ title, description, accent, action }: TabScreenProps
   const bottomInset = useTabBarInset(24);
   // Bottom-anchored UI sits on top of the bar's footprint, not on the screen edge.
   const actionBottom = useTabBarInset(12);
+  // Phones: full width, one card per row. Tablets and open foldables: a centred column, two cards per row.
+  const { width } = useWindowDimensions();
+  const columnW = Math.min(width, COLUMN_MAX);
+  const side = Math.max(0, (width - columnW) / 2) + 20;
+  const columns = width >= 600 ? 2 : 1;
+  const cardW = columns > 1 ? (columnW - 40 - CARD_GAP * (columns - 1)) / columns : undefined;
   const bg = isDark ? '#0f0f1a' : '#f2f2f7';
   const text = isDark ? '#fff' : '#1c1c1e';
   const sub = isDark ? '#9898a8' : '#6c6c70';
@@ -38,6 +45,7 @@ export function TabScreen({ title, description, accent, action }: TabScreenProps
         contentContainerStyle={[
           styles.scroll,
           { paddingTop: insets.top + 12, paddingBottom: bottomInset },
+          { width: '100%', maxWidth: COLUMN_MAX, alignSelf: 'center' },
         ]}
         showsVerticalScrollIndicator={false}
         // Pad by hand on every bar: useTabBarInset() already counts the floating bar and home indicator.
@@ -54,27 +62,29 @@ export function TabScreen({ title, description, accent, action }: TabScreenProps
         <Text style={[styles.title, { color: text }]}>{title}</Text>
         <Text style={[styles.subtitle, { color: sub }]}>{description}</Text>
 
-        {SECTIONS.map((n) => (
-          <View
-            key={n}
-            style={[
-              styles.card,
-              { backgroundColor: isDark ? '#1c1c2e' : '#ffffff' },
-            ]}
-          >
-            <Text style={[styles.cardTitle, { color: text }]}>Section {n}</Text>
-            <Text style={[styles.cardSub, { color: sub }]}>
-              iOS 26+ gets the system Liquid Glass bar. Older iOS, Android and web get the
-              blur glass fallback — both merge into a glass circle when you scroll down.
-            </Text>
-          </View>
-        ))}
+        <View style={columns > 1 ? styles.grid : undefined}>
+          {SECTIONS.map((n) => (
+            <View
+              key={n}
+              style={[
+                styles.card,
+                { width: cardW, backgroundColor: isDark ? '#1c1c2e' : '#ffffff' },
+              ]}
+            >
+              <Text style={[styles.cardTitle, { color: text }]}>Section {n}</Text>
+              <Text style={[styles.cardSub, { color: sub }]}>
+                iOS 26+ gets the system Liquid Glass bar. Older iOS, Android and web get the
+                blur glass fallback — both merge into a glass circle when you scroll down.
+              </Text>
+            </View>
+          ))}
+        </View>
         {action ? <View style={{ height: 64 }} /> : null}
       </ScrollView>
       {action ? (
         <Pressable
           accessibilityRole="button"
-          style={({ pressed }) => [styles.action, { bottom: actionBottom, backgroundColor: accent, opacity: pressed ? 0.85 : 1 }]}
+          style={({ pressed }) => [styles.action, { left: side, right: side, bottom: actionBottom, backgroundColor: accent, opacity: pressed ? 0.85 : 1 }]}
         >
           <Text style={styles.actionText}>{action}</Text>
         </Pressable>
@@ -83,7 +93,7 @@ export function TabScreen({ title, description, accent, action }: TabScreenProps
   );
 }
 
-export function TabScreenFromConfig({ tabName, action }: { tabName: string; action?: string }) {
+export function TabScreenFromConfig({ tabName, action }: { tabName: string; action?: string | undefined }) {
   const tab = getTab(tabName);
   if (!tab) {
     return null;
@@ -103,6 +113,9 @@ export function TabScreenFromConfig({ tabName, action }: { tabName: string; acti
 }
 
 const SECTIONS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+/** Widest the screen's column gets on tablets. */
+const COLUMN_MAX = 720;
+const CARD_GAP = 10;
 
 const styles = StyleSheet.create({
   root: { flex: 1 },
@@ -127,6 +140,7 @@ const styles = StyleSheet.create({
   },
   title: { fontSize: 34, fontWeight: '400', letterSpacing: -0.5 },
   subtitle: { fontSize: 15, marginTop: 8, marginBottom: 20, lineHeight: 22 },
+  grid: { flexDirection: 'row', flexWrap: 'wrap', columnGap: CARD_GAP },
   card: {
     borderRadius: 14,
     padding: 16,
@@ -143,5 +157,5 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  actionText: { color: '#fff', fontSize: 16, fontWeight: '500' },
+  actionText: { color: '#fff', fontSize: 16, fontWeight: '500', includeFontPadding: false, textAlignVertical: 'center' },
 });

package/registry/liquidglass-tab/files/src/lib/tab-icons.ts

@@ -106,7 +106,7 @@ export function resolveIconNames(tab: {
   icon?: TabIconPreset;
   iconName?: string;
   iconSelected?: string;
-}): { name?: string; selected?: string } {
+}): { name?: string | undefined; selected?: string | undefined } {
   if (tab.icon?.name) {
     return { name: tab.icon.name, selected: tab.icon.selected };
   }

package/registry/liquidglass-tab.json

@@ -4,6 +4,7 @@
   "title": "Native bottom tabs (Liquid Glass)",
   "description": "Real Liquid Glass NativeTabs on iOS 26+, and a floating blur glass tab bar with the same scroll-collapse on iOS 18 and older, Android and web.",
   "tier": "free",
+  "aliases": [],
   "dependencies": [
     "expo-router",
     "expo-glass-effect",

package/registry/list-item/files/src/components/ui/list-item.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 import {
   Animated,
   Image,
@@ -41,61 +41,61 @@ export interface ListItemIconProps {
 
 export interface ListItemAvatar {
   /** Image URL. Falls back to initials while loading or when it fails. */
-  src?: string;
+  src?: string | undefined;
   /** Used for the initials and the fallback colour. */
-  name?: string;
+  name?: string | undefined;
   /** Fallback circle colour (default: picked from the name). */
-  color?: string;
+  color?: string | undefined;
   /** Shows a green presence dot. */
-  online?: boolean;
+  online?: boolean | undefined;
 }
 
 export interface ListItemProps {
   title: string;
   /** One muted line under the title. */
-  subtitle?: string;
+  subtitle?: string | undefined;
   /** Longer muted text under the subtitle, clamped to `numberOfLines`. */
-  description?: string;
+  description?: string | undefined;
   /** Lines shown of `description` (default 2). */
-  numberOfLines?: number;
+  numberOfLines?: number | undefined;
   /** Small text at the right end of the title row, e.g. a time ("9:41"). */
-  meta?: string;
+  meta?: string | undefined;
 
   /** Built-in icon name or your own icon, drawn in a rounded tile. */
-  icon?: ListItemIconName | ((props: ListItemIconProps) => React.ReactNode);
+  icon?: (ListItemIconName | ((props: ListItemIconProps) => React.ReactNode)) | undefined;
   /** Tile colour (default: theme accent; the danger colour when `destructive`). */
-  iconColor?: string;
+  iconColor?: string | undefined;
   /** 'filled' white glyph on a solid tile (iOS Settings) · 'tinted' coloured glyph on a soft tile. */
-  iconVariant?: 'filled' | 'tinted';
+  iconVariant?: 'filled' | 'tinted' | undefined;
   /** Round avatar instead of an icon tile. */
-  avatar?: ListItemAvatar;
+  avatar?: ListItemAvatar | undefined;
   /** Anything else on the left (overrides `icon` / `avatar`). */
-  leading?: React.ReactNode;
+  leading?: React.ReactNode | undefined;
 
   /** Muted value text on the right, e.g. "English" or "1.2 GB". */
-  value?: string;
+  value?: string | undefined;
   /** `true` draws a dot; a number or string draws a pill (99+ above 99). */
-  badge?: boolean | number | string;
+  badge?: boolean | number | string | undefined;
   /** Shows a chevron. Defaults to true when the row is pressable and has no `trailing` / `checked`. */
-  chevron?: boolean;
+  chevron?: boolean | undefined;
   /** Shows an accent check mark (for pickers). */
-  checked?: boolean;
+  checked?: boolean | undefined;
   /** Anything on the right, e.g. a <Switch />. Rendered after `value` and `badge`. */
-  trailing?: React.ReactNode;
+  trailing?: React.ReactNode | undefined;
 
-  onPress?: () => void;
-  onLongPress?: () => void;
+  onPress?: (() => void) | undefined;
+  onLongPress?: (() => void) | undefined;
   /** Red title and icon, for "Sign out" or "Delete account". */
-  destructive?: boolean;
-  disabled?: boolean;
-  size?: ListItemSize;
+  destructive?: boolean | undefined;
+  disabled?: boolean | undefined;
+  size?: ListItemSize | undefined;
   /** Hairline under the row that starts past the leading slot. ListGroup / ListSection set it for you. */
-  divider?: boolean;
+  divider?: boolean | undefined;
   /** Highlight colour for checks, badges and default icon tiles (default: theme accent). */
-  accent?: string;
-  titleStyle?: StyleProp<TextStyle>;
-  accessibilityLabel?: string;
-  style?: StyleProp<ViewStyle>;
+  accent?: string | undefined;
+  titleStyle?: StyleProp<TextStyle> | undefined;
+  accessibilityLabel?: string | undefined;
+  style?: StyleProp<ViewStyle> | undefined;
 }
 
 const SIZES: Record<ListItemSize, { minH: number; tile: number; glyph: number; avatar: number; title: number; sub: number; padY: number }> = {
@@ -109,7 +109,7 @@ const SIZES: Record<ListItemSize, { minH: number; tile: number; glyph: number; a
 const FONT_CAP = 1.35;
 const PAD_X = 16;
 const GAP = 12;
-const AVATAR_COLORS = ['#f97316', '#0ea5e9', '#22c55e', '#a855f7', '#ec4899', '#14b8a6', '#6366f1', '#eab308'];
+const AVATAR_COLORS: [string, ...string[]] = ['#f97316', '#0ea5e9', '#22c55e', '#a855f7', '#ec4899', '#14b8a6', '#6366f1', '#eab308'];
 
 /**
  * Settings / contacts style row: icon tile, avatar or custom leading; title, subtitle and
@@ -143,7 +143,7 @@ export function ListItem({
   accessibilityLabel,
   style,
 }: ListItemProps) {
-  const { colors, radius, font } = useKit();
+  const { colors, radius, font, labels } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
   const tint = accent ?? colors.accent;
   const s = SIZES[size];
@@ -152,7 +152,7 @@ export function ListItem({
   const titleColor = destructive ? colors.danger : colors.foreground;
 
   // Press highlight: an overlay whose opacity runs on the native driver.
-  const highlight = useRef(new Animated.Value(0)).current;
+  const [highlight] = useState(() => new Animated.Value(0));
   const fade = (to: number, duration: number) =>
     Animated.timing(highlight, { toValue: to, duration, useNativeDriver: true }).start();
 
@@ -257,7 +257,7 @@ export function ListItem({
       onPressOut={() => fade(0, 320)}
       accessibilityRole="button"
       accessibilityState={{ disabled: !!disabled, checked: checked === undefined ? undefined : checked }}
-      accessibilityLabel={accessibilityLabel ?? [title, subtitle, value, badgeText ? `${badgeText} new` : null].filter(Boolean).join(', ')}
+      accessibilityLabel={accessibilityLabel ?? [title, subtitle, value, badgeText ? labels.newCount(String(badgeText)) : null].filter(Boolean).join(', ')}
       style={rowStyle}
     >
       <Animated.View
@@ -274,13 +274,13 @@ export function ListItem({
 
 export interface ListGroupProps {
   /** Small uppercase heading above the card. */
-  header?: string;
+  header?: string | undefined;
   /** Muted explanation under the card. */
-  footer?: string;
+  footer?: string | undefined;
   /** Card colour (default: theme card). */
-  background?: string;
+  background?: string | undefined;
   children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle> | undefined;
 }
 
 /**
@@ -312,12 +312,12 @@ export function ListGroup({ header, footer, background, children, style }: ListG
 
 export interface ListSectionProps {
   /** Section heading, e.g. "A" in a contacts list or "Today" in an inbox. */
-  header?: string;
-  footer?: string;
+  header?: string | undefined;
+  footer?: string | undefined;
   /** Hairline under the last row too (default false). */
-  dividerAfterLast?: boolean;
+  dividerAfterLast?: boolean | undefined;
   children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle> | undefined;
 }
 
 /** Plain full-width section: header text, then rows with inset separators. */
@@ -360,7 +360,7 @@ function AvatarCircle({ src, name = '', color, online, size, ring }: ListItemAva
     .join('');
   let hash = 0;
   for (let i = 0; i < name.length; i++) hash = (hash * 31 + name.charCodeAt(i)) | 0;
-  const bg = color ?? AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+  const bg = color ?? AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length] ?? AVATAR_COLORS[0];
   const dot = Math.max(10, Math.round(size * 0.28));
   return (
     <View style={{ width: size, height: size }}>
@@ -507,7 +507,7 @@ const styles = StyleSheet.create({
   value: { fontSize: 15, flexShrink: 1 },
   dot: { width: 9, height: 9, borderRadius: 5 },
   badge: { minWidth: 22, minHeight: 22, paddingHorizontal: 7, alignItems: 'center', justifyContent: 'center' },
-  badgeText: { fontSize: 12, fontWeight: '400', fontVariant: ['tabular-nums'] },
+  badgeText: { fontSize: 12, fontWeight: '400', fontVariant: ['tabular-nums'], includeFontPadding: false, textAlignVertical: 'center' },
   divider: { position: 'absolute', right: 0, bottom: 0, height: StyleSheet.hairlineWidth },
   avatar: { alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },
   online: { position: 'absolute', right: -1, bottom: -1, borderWidth: 2 },