achery-ui 0.10.1 → 0.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "achery-ui",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "Achery Workshop design system — autumn alchemy, hard edges, botanical marginalia.",
   "repository": {
     "type": "git",

package/src/native/components/Badge.tsx

@@ -4,11 +4,13 @@ import { useTheme } from '../theme/ThemeContext'
 
 export type BadgeTone = 'neutral' | 'saved' | 'drafting' | 'stopped' | 'archived'
 export type BadgeVariant = 'outline' | 'solid'
+export type BadgeSize = 'sm' | 'md' | 'lg'
 
 export interface BadgeProps {
   tone?: BadgeTone
   variant?: BadgeVariant
   dot?: boolean
+  size?: BadgeSize
   children: string
   style?: ViewStyle
 }
@@ -24,7 +26,9 @@ function toneColors(tone: BadgeTone, variant: BadgeVariant, isDark: boolean) {
   return map[tone]
 }
 
-export function Badge({ tone = 'neutral', variant = 'outline', dot = false, children, style }: BadgeProps) {
+const badgeFontSize: Record<BadgeSize, number> = { sm: 10, md: 11, lg: 12 }
+
+export function Badge({ tone = 'neutral', variant = 'outline', dot = false, size = 'md', children, style }: BadgeProps) {
   const { tokens, dark } = useTheme()
   const colors = toneColors(tone, variant, dark)
 
@@ -51,7 +55,7 @@ export function Badge({ tone = 'neutral', variant = 'outline', dot = false, chil
       {dot && (
         <View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: colors.fg }} />
       )}
-      <Text style={{ color: fg, fontSize: 11, fontWeight: fontWeights.semibold.toString() as any, letterSpacing: 0.5 }}>
+      <Text style={{ color: fg, fontSize: badgeFontSize[size], fontWeight: fontWeights.semibold.toString() as any, letterSpacing: 0.5 }}>
         {children}
       </Text>
     </View>

package/src/native/components/Button.tsx

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react'
 import { TouchableOpacity, View, Text, StyleSheet, type ViewStyle } from 'react-native'
 import { spacing, fontWeights } from 'achery-ui/tokens'
 import { useTheme } from '../theme/ThemeContext'
@@ -9,7 +10,7 @@ export type ButtonSize = 'sm' | 'md' | 'lg'
 export interface ButtonProps {
   variant?: ButtonVariant
   size?: ButtonSize
-  children: string
+  children: ReactNode
   onPress?: () => void
   disabled?: boolean
   style?: ViewStyle
@@ -37,6 +38,14 @@ function makeColors(variant: ButtonVariant, tokens: SemanticTokens) {
 export function Button({ variant = 'secondary', size = 'md', children, onPress, disabled, style }: ButtonProps) {
   const { tokens } = useTheme()
   const colors = makeColors(variant, tokens)
+  const textStyle = {
+    color: disabled ? tokens.fgMute : colors.label,
+    fontSize: fontSize[size],
+    fontWeight: fontWeights.semibold.toString() as any,
+    letterSpacing: 0.01 * fontSize[size],
+  }
+
+  const isString = typeof children === 'string'
 
   return (
     <TouchableOpacity
@@ -52,20 +61,18 @@ export function Button({ variant = 'secondary', size = 'md', children, onPress,
           paddingHorizontal: paddingH[size],
           alignSelf: 'flex-start',
           opacity: disabled ? 0.5 : 1,
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: spacing.sp2,
         },
         style,
       ]}
     >
-      <Text
-        style={{
-          color: disabled ? tokens.fgMute : colors.label,
-          fontSize: fontSize[size],
-          fontWeight: fontWeights.semibold.toString() as any,
-          letterSpacing: 0.01 * fontSize[size],
-        }}
-      >
-        {children}
-      </Text>
+      {isString ? (
+        <Text style={textStyle}>{children}</Text>
+      ) : (
+        children
+      )}
     </TouchableOpacity>
   )
 }

package/src/native/components/Input.tsx

@@ -1,4 +1,4 @@
-import { View, TextInput, Text, type TextInputProps, type TextStyle, type ViewStyle } from 'react-native'
+import { View, TextInput, Text, type TextInputProps, type ViewStyle } from 'react-native'
 import { spacing, fontWeights } from 'achery-ui/tokens'
 import { useTheme } from '../theme/ThemeContext'
 
@@ -32,7 +32,6 @@ export function Field({ label, hint, error, children, style }: FieldProps) {
 
 export interface InputProps extends TextInputProps {
   error?: boolean
-  style?: ViewStyle
 }
 
 export function Input({ error, style, ...props }: InputProps) {
@@ -61,7 +60,6 @@ export interface TextareaProps extends TextInputProps {
   error?: boolean
   /** Approximate number of visible lines. @default 4 */
   rows?: number
-  style?: TextStyle
 }
 
 /**

package/src/native/components/Skeleton.tsx

@@ -60,7 +60,7 @@ export const Skeleton = ({ lines = 3, width, block = false, height = 80, style }
       {Array.from({ length: lines }).map((_, i) => (
         <Animated.View
           key={i}
-          style={[baseStyle, { height: LINE_HEIGHT, width: lineWidths[i] ?? '100%' }, { opacity }]}
+          style={[baseStyle, { height: LINE_HEIGHT, width: (lineWidths[i] ?? '100%') as any }, { opacity }]}
         />
       ))}
     </View>

package/src/native/components/Tabs.tsx

@@ -1,6 +1,6 @@
-import { useState } from 'react'
+import { useState, type ReactNode } from 'react'
 import { ScrollView, TouchableOpacity, View, Text } from 'react-native'
-import type { ViewStyle, ReactNode } from 'react-native'
+import type { ViewStyle } from 'react-native'
 import { spacing, fontWeights } from 'achery-ui/tokens'
 import { useTheme } from '../theme/ThemeContext'
 

package/src/native/index.ts

@@ -2,17 +2,18 @@ export { NativeThemeProvider, useTheme } from './theme/ThemeContext'
 export type { NativeThemeProviderProps, NativeThemeContextValue } from './theme/ThemeContext'
 
 export {
-  Text, Button, Card, Badge, Field, Input, MaterialCard, MaterialEyebrow,
+  Text, Button, Card, Badge, Field, Input, Textarea, MaterialCard, MaterialEyebrow,
   Glyph, GlyphPicker,
   Skeleton, ProgressBar, Checkbox, Toggle, Tabs,
   ToastProvider, useToast,
+  StatusDot, SegmentedControl, ScreenNav,
 } from './components/index'
 export type {
   TextProps,
   ButtonProps, ButtonVariant, ButtonSize,
   CardProps, CardVariant, CardPadding,
   BadgeProps, BadgeTone, BadgeVariant,
-  FieldProps, InputProps,
+  FieldProps, InputProps, TextareaProps,
   NativeMaterialCardProps, MaterialIntensity,
   NativeGlyphProps,
   GlyphPickerProps,
@@ -22,6 +23,9 @@ export type {
   ToggleProps,
   TabsProps, TabItem,
   ToastProviderProps, ToastData, ToastOptions,
+  StatusDotProps,
+  SegmentedControlProps, NativeSegmentOption,
+  ScreenNavProps,
 } from './components/index'
 
 // Glyph utilities — pure TS, work on native