achery-ui 0.9.2 → 0.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "achery-ui",
-  "version": "0.9.2",
+  "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

@@ -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) {
@@ -56,3 +55,45 @@ export function Input({ error, style, ...props }: InputProps) {
     />
   )
 }
+
+export interface TextareaProps extends TextInputProps {
+  error?: boolean
+  /** Approximate number of visible lines. @default 4 */
+  rows?: number
+}
+
+/**
+ * Multi-line text input. Passes `multiline` and `textAlignVertical="top"` to
+ * the underlying `TextInput`. Wrap in {@link Field} for a label.
+ *
+ * @example
+ * ```tsx
+ * <Field label="Notes">
+ *   <Textarea rows={5} placeholder="Notes, checklists, anything…" />
+ * </Field>
+ * ```
+ */
+export function Textarea({ error, rows = 4, style, ...props }: TextareaProps) {
+  const { tokens } = useTheme()
+  return (
+    <TextInput
+      multiline
+      textAlignVertical="top"
+      style={[
+        {
+          backgroundColor: tokens.bg,
+          borderWidth: 1.5,
+          borderColor: error ? tokens.danger : tokens.border,
+          paddingVertical: spacing.sp3,
+          paddingHorizontal: spacing.sp5,
+          color: tokens.fg,
+          fontSize: 14,
+          minHeight: rows * 24,
+        },
+        style,
+      ]}
+      placeholderTextColor={tokens.fgMute}
+      {...props}
+    />
+  )
+}

package/src/native/components/ScreenNav.tsx

@@ -0,0 +1,111 @@
+import { View, Text, TouchableOpacity } from 'react-native'
+import { useTheme } from '../theme/ThemeContext'
+import { spacing, fontWeights } from 'achery-ui/tokens'
+
+export interface ScreenNavProps {
+  /** Called when the leading cancel/back button is tapped. */
+  onBack: () => void
+  /** Label text for the leading button. @default 'cancel' */
+  backLabel?: string
+  /** Screen title shown centred in the nav bar. */
+  title: string
+  /** Called when the trailing action button is tapped. */
+  onAction?: () => void
+  /** Label for the trailing action button. Required when `onAction` is provided. */
+  actionLabel?: string
+  /** Disables the trailing action button. */
+  actionDisabled?: boolean
+}
+
+/**
+ * Navigation bar for modal push screens (Expo Router `Stack`). Renders a
+ * leading cancel/back button, a centred title, and an optional trailing action
+ * button. Includes safe-area top padding for iOS.
+ *
+ * @example
+ * ```tsx
+ * <ScreenNav
+ *   onBack={() => router.back()}
+ *   title="New task"
+ *   onAction={handleSave}
+ *   actionLabel="Save"
+ *   actionDisabled={isPending}
+ * />
+ * ```
+ */
+export const ScreenNav = ({
+  onBack,
+  backLabel = 'cancel',
+  title,
+  onAction,
+  actionLabel,
+  actionDisabled = false,
+}: ScreenNavProps) => {
+  const { tokens } = useTheme()
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: spacing.sp4,
+        paddingTop: 56,
+        paddingBottom: spacing.sp3,
+        backgroundColor: tokens.surface,
+        borderBottomWidth: 1,
+        borderBottomColor: tokens.border,
+      }}
+    >
+      <TouchableOpacity
+        onPress={onBack}
+        hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+        style={{ minWidth: 48 }}
+      >
+        <Text
+          style={{
+            color: tokens.fg3,
+            fontSize: 12,
+            fontWeight: fontWeights.semibold.toString() as any,
+            letterSpacing: 0.3,
+          }}
+        >
+          {backLabel}
+        </Text>
+      </TouchableOpacity>
+
+      <Text
+        style={{
+          color: tokens.fgMute,
+          fontSize: 11,
+          fontWeight: fontWeights.semibold.toString() as any,
+          letterSpacing: 1.5,
+          textTransform: 'uppercase',
+        }}
+      >
+        {title}
+      </Text>
+
+      {onAction && actionLabel ? (
+        <TouchableOpacity
+          onPress={actionDisabled ? undefined : onAction}
+          disabled={actionDisabled}
+          hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+          style={{ minWidth: 48, alignItems: 'flex-end' }}
+        >
+          <Text
+            style={{
+              color: actionDisabled ? tokens.fgMute : tokens.accent,
+              fontSize: 12,
+              fontWeight: fontWeights.bold.toString() as any,
+            }}
+          >
+            {actionLabel}
+          </Text>
+        </TouchableOpacity>
+      ) : (
+        <View style={{ minWidth: 48 }} />
+      )}
+    </View>
+  )
+}

package/src/native/components/SegmentedControl.tsx

@@ -0,0 +1,81 @@
+import { View, TouchableOpacity, Text } from 'react-native'
+import type { ReactNode } from 'react'
+import { useTheme } from '../theme/ThemeContext'
+import { spacing, fontWeights } from 'achery-ui/tokens'
+
+/** A single option within a native {@link SegmentedControl}. */
+export interface NativeSegmentOption<T extends string = string> {
+  value: T
+  label: ReactNode
+}
+
+export interface SegmentedControlProps<T extends string = string> {
+  options: NativeSegmentOption<T>[]
+  value: T
+  onChange: (value: T) => void
+  disabled?: boolean
+}
+
+/**
+ * Inline button group where exactly one option is active.
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl
+ *   options={[{ value: 'hard', label: 'Hard' }, { value: 'soft', label: 'Soft' }]}
+ *   value={depType}
+ *   onChange={setDepType}
+ * />
+ * ```
+ */
+export const SegmentedControl = <T extends string>({
+  options,
+  value,
+  onChange,
+  disabled = false,
+}: SegmentedControlProps<T>) => {
+  const { tokens } = useTheme()
+
+  return (
+    <View style={{ flexDirection: 'row', borderWidth: 1, borderColor: tokens.border }}>
+      {options.map((opt, i) => {
+        const isActive = opt.value === value
+        const isLast = i === options.length - 1
+        return (
+          <TouchableOpacity
+            key={opt.value}
+            onPress={() => !disabled && onChange(opt.value)}
+            activeOpacity={0.7}
+            style={{
+              flex: 1,
+              alignItems: 'center',
+              justifyContent: 'center',
+              paddingVertical: spacing.sp2,
+              paddingHorizontal: spacing.sp3,
+              backgroundColor: isActive ? tokens.fg : tokens.surface,
+              borderRightWidth: isLast ? 0 : 1,
+              borderRightColor: tokens.border,
+              opacity: disabled ? 0.4 : 1,
+            }}
+          >
+            {typeof opt.label === 'string' ? (
+              <Text
+                style={{
+                  color: isActive ? tokens.bg : tokens.fg3,
+                  fontSize: 10,
+                  fontWeight: fontWeights.semibold.toString() as any,
+                  letterSpacing: 0.8,
+                  textTransform: 'uppercase',
+                }}
+              >
+                {opt.label}
+              </Text>
+            ) : (
+              opt.label
+            )}
+          </TouchableOpacity>
+        )
+      })}
+    </View>
+  )
+}

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/StatusDot.tsx

@@ -0,0 +1,53 @@
+import { View } from 'react-native'
+import type { BadgeTone } from './Badge'
+import { useTheme } from '../theme/ThemeContext'
+import { palette } from 'achery-ui/tokens'
+
+export interface StatusDotProps {
+  /** Semantic tone — maps to the same colours as {@link Badge}. */
+  tone?: BadgeTone
+  /**
+   * Diameter in dp.
+   * @default 8
+   */
+  size?: number
+}
+
+const TONE_COLOR: Record<BadgeTone, (isDark: boolean) => string> = {
+  neutral:  (isDark) => isDark ? palette.cream : palette.ink,
+  saved:    () => palette.success,
+  drafting: () => palette.ochre,
+  stopped:  () => palette.rust,
+  archived: (isDark) => isDark ? palette.silver : palette.silverDeep,
+}
+
+/**
+ * Small filled dot conveying semantic status via the same tone palette as
+ * {@link Badge}. Use where a full badge label would be too heavy.
+ *
+ * @example
+ * ```tsx
+ * <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+ *   <StatusDot tone="drafting" />
+ *   <Text>In progress</Text>
+ * </View>
+ * ```
+ */
+export const StatusDot = ({ tone = 'neutral', size = 8 }: StatusDotProps) => {
+  const { dark } = useTheme()
+  const color = TONE_COLOR[tone](dark)
+  const isNeutral = tone === 'neutral'
+
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        backgroundColor: isNeutral ? 'transparent' : color,
+        borderWidth: isNeutral ? 1.5 : 0,
+        borderColor: color,
+      }}
+    />
+  )
+}

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/components/index.ts

@@ -10,8 +10,8 @@ export type { CardProps, CardVariant, CardPadding } from './Card'
 export { Badge } from './Badge'
 export type { BadgeProps, BadgeTone, BadgeVariant } from './Badge'
 
-export { Field, Input } from './Input'
-export type { FieldProps, InputProps } from './Input'
+export { Field, Input, Textarea } from './Input'
+export type { FieldProps, InputProps, TextareaProps } from './Input'
 
 export { MaterialCard, MaterialEyebrow } from './MaterialCard'
 export type { NativeMaterialCardProps, MaterialIntensity } from './MaterialCard'
@@ -39,3 +39,12 @@ export type { TabsProps, TabItem } from './Tabs'
 
 export { ToastProvider, useToast } from './Toast'
 export type { ToastProviderProps, ToastData, ToastOptions } from './Toast'
+
+export { StatusDot } from './StatusDot'
+export type { StatusDotProps } from './StatusDot'
+
+export { SegmentedControl } from './SegmentedControl'
+export type { SegmentedControlProps, NativeSegmentOption } from './SegmentedControl'
+
+export { ScreenNav } from './ScreenNav'
+export type { ScreenNavProps } from './ScreenNav'

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