radix-native 0.0.1

package/src/components/actions/CheckboxCards.tsx

@@ -0,0 +1,257 @@
+import React, { createContext, useCallback, useContext, useMemo } from 'react'
+import { Pressable, View } from 'react-native'
+import type { StyleProp, ViewStyle } from 'react-native'
+import { useThemeContext } from '../../hooks/useThemeContext'
+import { useResolveColor } from '../../hooks/useResolveColor'
+import { resolveSpace } from '../../utils/resolveSpace'
+import { scalingMap } from '../../tokens/scaling'
+import { getRadius } from '../../tokens/radius'
+import type { MarginToken, SpaceToken } from '../../tokens/spacing'
+import type { AccentColor } from '../../tokens/colors/types'
+import { Checkbox, type CheckboxSize } from './Checkbox'
+
+// ─── Types ──────────────────────────────────────────────────────────────────────
+
+export type CheckboxCardsVariant = 'surface' | 'classic'
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+
+interface CheckboxCardsContextValue {
+  size: CheckboxSize
+  variant: CheckboxCardsVariant
+  color?: AccentColor
+  highContrast?: boolean
+  disabled: boolean
+  value: string[]
+  onItemToggle: (itemValue: string) => void
+}
+
+const CheckboxCardsContext = createContext<CheckboxCardsContextValue | null>(null)
+
+// ─── Root Types ─────────────────────────────────────────────────────────────────
+
+export interface CheckboxCardsProps {
+  /** Card size (1–3). Default: 2. */
+  size?: CheckboxSize
+  /** Visual variant. Default: 'surface'. */
+  variant?: CheckboxCardsVariant
+  /** Accent color. Default: theme accent. */
+  color?: AccentColor
+  /** Increases color contrast with the background. */
+  highContrast?: boolean
+  /** Number of columns. Default: 1. */
+  columns?: number
+  /** Gap between cards as space token. Default: 4. */
+  gap?: SpaceToken
+  /** Controlled selected values. */
+  value?: string[]
+  /** Uncontrolled default selected values. */
+  defaultValue?: string[]
+  /** Called when selected values change. */
+  onValueChange?: (value: string[]) => void
+  /** Disables all cards. */
+  disabled?: boolean
+  /** Card items. */
+  children?: React.ReactNode
+  // ─── Margin props ──────────────────────────────────────────────────────────
+  m?: MarginToken
+  mx?: MarginToken
+  my?: MarginToken
+  mt?: MarginToken
+  mr?: MarginToken
+  mb?: MarginToken
+  ml?: MarginToken
+  style?: StyleProp<ViewStyle>
+}
+
+// ─── Item Types ─────────────────────────────────────────────────────────────────
+
+export interface CheckboxCardsItemProps {
+  /** Unique value identifying this card. */
+  value: string
+  /** Disables this individual card. */
+  disabled?: boolean
+  /** Card content. */
+  children?: React.ReactNode
+  style?: StyleProp<ViewStyle>
+}
+
+// ─── Size tokens (matching Radix CSS vars) ──────────────────────────────────────
+// Radix uses: padding-left = space-3/4/5, padding-top/bottom = space-3/1.2, space-4*0.875, space-5/1.2
+// checkbox-size = space-4*0.875, space-4, space-4*1.25
+// padding-right = padding-left * 2 + checkbox-size
+
+const SIZE_CONFIG: Record<CheckboxSize, {
+  paddingLeft: number
+  paddingY: number
+  checkboxSize: number
+  radiusLevel: 3 | 4
+}> = {
+  1: { paddingLeft: 12, paddingY: 10, checkboxSize: 14, radiusLevel: 3 },
+  2: { paddingLeft: 16, paddingY: 14, checkboxSize: 16, radiusLevel: 3 },
+  3: { paddingLeft: 24, paddingY: 20, checkboxSize: 20, radiusLevel: 4 },
+}
+
+// ─── Root Component ─────────────────────────────────────────────────────────────
+
+function CheckboxCardsRoot({
+  size = 2,
+  variant = 'surface',
+  color,
+  highContrast,
+  columns = 1,
+  gap: gapProp = 4,
+  value: valueProp,
+  defaultValue = [],
+  onValueChange,
+  disabled = false,
+  children,
+  m, mx, my, mt, mr, mb, ml,
+  style,
+}: CheckboxCardsProps) {
+  const { scaling } = useThemeContext()
+
+  const [internal, setInternal] = React.useState<string[]>(defaultValue)
+  const isControlled = valueProp !== undefined
+  const value = isControlled ? valueProp : internal
+
+  const onItemToggle = useCallback((itemValue: string) => {
+    const next = value.includes(itemValue)
+      ? value.filter(v => v !== itemValue)
+      : [...value, itemValue]
+    if (!isControlled) setInternal(next)
+    onValueChange?.(next)
+  }, [value, isControlled, onValueChange])
+
+  const ctx = useMemo<CheckboxCardsContextValue>(() => ({
+    size, variant, color, highContrast, disabled, value, onItemToggle,
+  }), [size, variant, color, highContrast, disabled, value, onItemToggle])
+
+  const sp = (token: MarginToken | undefined): number | undefined =>
+    token !== undefined ? resolveSpace(token, scaling) : undefined
+
+  const resolvedGap = resolveSpace(gapProp, scaling)
+
+  return (
+    <CheckboxCardsContext.Provider value={ctx}>
+      <View
+        style={[
+          {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            gap: resolvedGap,
+            marginTop: sp(mt ?? my ?? m),
+            marginBottom: sp(mb ?? my ?? m),
+            marginLeft: sp(ml ?? mx ?? m),
+            marginRight: sp(mr ?? mx ?? m),
+          },
+          style,
+        ]}
+      >
+        {React.Children.map(children, child => (
+          <View style={{
+            flexBasis: columns > 1 ? `${100 / columns}%` as unknown as number : undefined,
+            flexGrow: 1,
+            flexShrink: 1,
+            minWidth: 0,
+          }}>
+            {child}
+          </View>
+        ))}
+      </View>
+    </CheckboxCardsContext.Provider>
+  )
+}
+CheckboxCardsRoot.displayName = 'CheckboxCards.Root'
+
+// ─── Item Component ─────────────────────────────────────────────────────────────
+
+function CheckboxCardsItem({
+  value: itemValue,
+  disabled: disabledProp,
+  children,
+  style,
+}: CheckboxCardsItemProps) {
+  const ctx = useContext(CheckboxCardsContext)
+  if (!ctx) throw new Error('CheckboxCards.Item must be used within CheckboxCards.Root')
+
+  const { size, variant, color, highContrast, disabled: groupDisabled, value, onItemToggle } = ctx
+  const { scaling, radius } = useThemeContext()
+  const rc = useResolveColor()
+
+  const isDisabled = disabledProp ?? groupDisabled
+  const isChecked = value.includes(itemValue)
+
+  const handlePress = useCallback(() => {
+    if (!isDisabled) onItemToggle(itemValue)
+  }, [isDisabled, onItemToggle, itemValue])
+
+  const scalingFactor = scalingMap[scaling]
+  const cfg = SIZE_CONFIG[size]
+  const paddingLeft = Math.round(cfg.paddingLeft * scalingFactor)
+  const paddingY = Math.round(cfg.paddingY * scalingFactor)
+  const checkboxSize = Math.round(cfg.checkboxSize * scalingFactor)
+  // Radix CSS: padding-right = padding-left * 2 + checkbox-size
+  const paddingRight = paddingLeft * 2 + checkboxSize
+  const borderRadius = getRadius(radius, cfg.radiusLevel)
+
+  type C = Parameters<typeof rc>[0]
+
+  // Card border & background — does NOT change on checked state (matches Radix)
+  // Surface: box-shadow: 0 0 0 1px gray-a5 (simulated with borderWidth)
+  // Classic: similar border + outer shadow
+  const borderColor = rc('gray-a5' as C)
+  const bgColor = rc('gray-surface' as C)
+
+  const cardStyle: ViewStyle = {
+    position: 'relative',
+    overflow: 'hidden',
+    paddingLeft,
+    paddingRight,
+    paddingTop: paddingY,
+    paddingBottom: paddingY,
+    borderRadius,
+    borderWidth: 1,
+    borderColor,
+    backgroundColor: bgColor,
+    opacity: isDisabled ? 0.5 : undefined,
+  }
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={isDisabled}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: isChecked, disabled: isDisabled }}
+      style={[cardStyle, style]}
+    >
+      {children}
+      {/* Checkbox absolutely positioned on the right, matching Radix CSS */}
+      <View style={{
+        position: 'absolute',
+        right: paddingLeft,
+        top: 0,
+        bottom: 0,
+        justifyContent: 'center',
+      }}>
+        <Checkbox
+          size={size}
+          variant="surface"
+          color={color}
+          highContrast={highContrast}
+          checked={isChecked}
+          onCheckedChange={() => onItemToggle(itemValue)}
+          disabled={isDisabled}
+        />
+      </View>
+    </Pressable>
+  )
+}
+CheckboxCardsItem.displayName = 'CheckboxCards.Item'
+
+// ─── Compound export ────────────────────────────────────────────────────────────
+
+export const CheckboxCards = Object.assign(CheckboxCardsRoot, {
+  Root: CheckboxCardsRoot,
+  Item: CheckboxCardsItem,
+})

package/src/components/actions/CheckboxGroup.tsx

@@ -0,0 +1,249 @@
+import React, { createContext, useCallback, useContext, useMemo } from 'react'
+import { Pressable, View } from 'react-native'
+import { Text as RNText } from 'react-native'
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native'
+import { useThemeContext } from '../../hooks/useThemeContext'
+import { useResolveColor } from '../../hooks/useResolveColor'
+import { resolveSpace } from '../../utils/resolveSpace'
+import { fontSize, lineHeight, letterSpacingEm } from '../../tokens/typography'
+import { scalingMap } from '../../tokens/scaling'
+import type { MarginToken } from '../../tokens/spacing'
+import type { AccentColor } from '../../tokens/colors/types'
+import { Checkbox, type CheckboxSize, type CheckboxVariant } from './Checkbox'
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+
+interface CheckboxGroupContextValue {
+  size: CheckboxSize
+  variant: CheckboxVariant
+  color?: AccentColor
+  highContrast?: boolean
+  disabled: boolean
+  value: string[]
+  onItemToggle: (itemValue: string) => void
+}
+
+const CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(null)
+
+// ─── Root Types ─────────────────────────────────────────────────────────────────
+
+export interface CheckboxGroupProps {
+  /** Checkbox size (1–3). Default: 2. */
+  size?: CheckboxSize
+  /** Visual variant. Default: 'surface'. */
+  variant?: CheckboxVariant
+  /** Accent color. Default: theme accent. */
+  color?: AccentColor
+  /** Increases color contrast with the background. */
+  highContrast?: boolean
+  /** Controlled selected values. */
+  value?: string[]
+  /** Uncontrolled default selected values. */
+  defaultValue?: string[]
+  /** Called when selected values change. */
+  onValueChange?: (value: string[]) => void
+  /** Disables all checkboxes in the group. */
+  disabled?: boolean
+  /** Group children (CheckboxGroup.Item). */
+  children?: React.ReactNode
+  // ─── Margin props ──────────────────────────────────────────────────────────
+  m?: MarginToken
+  mx?: MarginToken
+  my?: MarginToken
+  mt?: MarginToken
+  mr?: MarginToken
+  mb?: MarginToken
+  ml?: MarginToken
+  style?: StyleProp<ViewStyle>
+}
+
+// ─── Item Types ─────────────────────────────────────────────────────────────────
+
+export interface CheckboxGroupItemProps {
+  /** Unique value identifying this item. */
+  value: string
+  /** Disables this individual item. */
+  disabled?: boolean
+  /** Label text or custom content. */
+  children?: React.ReactNode
+  // ─── Margin props ──────────────────────────────────────────────────────────
+  m?: MarginToken
+  mx?: MarginToken
+  my?: MarginToken
+  mt?: MarginToken
+  mr?: MarginToken
+  mb?: MarginToken
+  ml?: MarginToken
+  style?: StyleProp<ViewStyle>
+}
+
+// ─── Font size mapping per checkbox size ────────────────────────────────────────
+
+const LABEL_FONT_SIZE: Record<CheckboxSize, 1 | 2 | 3> = { 1: 1, 2: 2, 3: 3 }
+const LABEL_GAP: Record<CheckboxSize, number> = { 1: 4, 2: 6, 3: 8 }
+
+// ─── Root Component ─────────────────────────────────────────────────────────────
+
+function CheckboxGroupRoot({
+  size = 2,
+  variant = 'surface',
+  color,
+  highContrast,
+  value: valueProp,
+  defaultValue = [],
+  onValueChange,
+  disabled = false,
+  children,
+  m, mx, my, mt, mr, mb, ml,
+  style,
+}: CheckboxGroupProps) {
+  const { scaling } = useThemeContext()
+
+  const [internal, setInternal] = React.useState<string[]>(defaultValue)
+  const isControlled = valueProp !== undefined
+  const value = isControlled ? valueProp : internal
+
+  const onItemToggle = useCallback((itemValue: string) => {
+    const next = value.includes(itemValue)
+      ? value.filter(v => v !== itemValue)
+      : [...value, itemValue]
+    if (!isControlled) setInternal(next)
+    onValueChange?.(next)
+  }, [value, isControlled, onValueChange])
+
+  const ctx = useMemo<CheckboxGroupContextValue>(() => ({
+    size, variant, color, highContrast, disabled, value, onItemToggle,
+  }), [size, variant, color, highContrast, disabled, value, onItemToggle])
+
+  const sp = (token: MarginToken | undefined): number | undefined =>
+    token !== undefined ? resolveSpace(token, scaling) : undefined
+
+  return (
+    <CheckboxGroupContext.Provider value={ctx}>
+      <View
+        accessibilityRole="none"
+        style={[
+          { flexDirection: 'column', gap: resolveSpace(2, scaling) },
+          {
+            marginTop: sp(mt ?? my ?? m),
+            marginBottom: sp(mb ?? my ?? m),
+            marginLeft: sp(ml ?? mx ?? m),
+            marginRight: sp(mr ?? mx ?? m),
+          },
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    </CheckboxGroupContext.Provider>
+  )
+}
+CheckboxGroupRoot.displayName = 'CheckboxGroup.Root'
+
+// ─── Item Component ─────────────────────────────────────────────────────────────
+
+function CheckboxGroupItem({
+  value: itemValue,
+  disabled: disabledProp,
+  children,
+  m, mx, my, mt, mr, mb, ml,
+  style,
+}: CheckboxGroupItemProps) {
+  const ctx = useContext(CheckboxGroupContext)
+  if (!ctx) throw new Error('CheckboxGroup.Item must be used within CheckboxGroup.Root')
+
+  const { size, variant, color, highContrast, disabled: groupDisabled, value, onItemToggle } = ctx
+  const { scaling, fonts } = useThemeContext()
+  const rc = useResolveColor()
+
+  const isDisabled = disabledProp ?? groupDisabled
+  const isChecked = value.includes(itemValue)
+
+  const handlePress = useCallback(() => {
+    if (!isDisabled) onItemToggle(itemValue)
+  }, [isDisabled, onItemToggle, itemValue])
+
+  const sp = (token: MarginToken | undefined): number | undefined =>
+    token !== undefined ? resolveSpace(token, scaling) : undefined
+
+  const scalingFactor = scalingMap[scaling]
+  const fontIdx = LABEL_FONT_SIZE[size]
+  const resolvedFontSize = Math.round(fontSize[fontIdx] * scalingFactor)
+  const resolvedLineHeight = Math.round(lineHeight[fontIdx] * scalingFactor)
+  const resolvedLetterSpacing = letterSpacingEm[fontIdx] * resolvedFontSize
+  const gap = Math.round(LABEL_GAP[size] * scalingFactor)
+
+  type C = Parameters<typeof rc>[0]
+  const textColor = rc('gray-12' as C)
+  const fontFamily = fonts.regular
+
+  const hasLabel = children != null
+
+  if (!hasLabel) {
+    return (
+      <Checkbox
+        size={size}
+        variant={variant}
+        color={color}
+        highContrast={highContrast}
+        checked={isChecked}
+        onCheckedChange={() => onItemToggle(itemValue)}
+        disabled={isDisabled}
+        m={m} mx={mx} my={my} mt={mt} mr={mr} mb={mb} ml={ml}
+        style={style}
+      />
+    )
+  }
+
+  const labelStyle: TextStyle = {
+    fontSize: resolvedFontSize,
+    lineHeight: resolvedLineHeight,
+    letterSpacing: resolvedLetterSpacing,
+    color: isDisabled ? rc('gray-a8' as C) : textColor,
+    fontFamily,
+  }
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={isDisabled}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: isChecked, disabled: isDisabled }}
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap,
+          marginTop: sp(mt ?? my ?? m),
+          marginBottom: sp(mb ?? my ?? m),
+          marginLeft: sp(ml ?? mx ?? m),
+          marginRight: sp(mr ?? mx ?? m),
+        },
+        style,
+      ]}
+    >
+      <Checkbox
+        size={size}
+        variant={variant}
+        color={color}
+        highContrast={highContrast}
+        checked={isChecked}
+        onCheckedChange={() => onItemToggle(itemValue)}
+        disabled={isDisabled}
+      />
+      {typeof children === 'string' || typeof children === 'number' ? (
+        <RNText style={labelStyle}>{children}</RNText>
+      ) : (
+        children
+      )}
+    </Pressable>
+  )
+}
+CheckboxGroupItem.displayName = 'CheckboxGroup.Item'
+
+// ─── Compound export ────────────────────────────────────────────────────────────
+
+export const CheckboxGroup = Object.assign(CheckboxGroupRoot, {
+  Root: CheckboxGroupRoot,
+  Item: CheckboxGroupItem,
+})

package/src/components/actions/index.ts

@@ -0,0 +1,4 @@
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './Button'
+export { Checkbox, type CheckboxProps, type CheckboxSize, type CheckboxVariant, type CheckedState } from './Checkbox'
+export { CheckboxGroup, type CheckboxGroupProps, type CheckboxGroupItemProps } from './CheckboxGroup'
+export { CheckboxCards, type CheckboxCardsProps, type CheckboxCardsItemProps, type CheckboxCardsVariant } from './CheckboxCards'

package/src/components/layout/Box.tsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import { View } from 'react-native'
+import type { ViewProps, ViewStyle } from 'react-native'
+import { useThemeContext } from '../../hooks/useThemeContext'
+import { useResolveColor } from '../../hooks/useResolveColor'
+import { resolveSpace } from '../../utils/resolveSpace'
+import { getRadius, getFullRadius } from '../../tokens/radius'
+import type { SpaceToken, MarginToken } from '../../tokens/spacing'
+import type { ThemeColor, RadiusToken } from '../../theme/theme.types'
+
+export interface BoxProps extends ViewProps {
+  // ─── Padding ──────────────────────────────────────────────────────
+  p?: SpaceToken
+  px?: SpaceToken
+  py?: SpaceToken
+  pt?: SpaceToken
+  pr?: SpaceToken
+  pb?: SpaceToken
+  pl?: SpaceToken
+  // ─── Margin ───────────────────────────────────────────────────────
+  m?: MarginToken
+  mx?: MarginToken
+  my?: MarginToken
+  mt?: MarginToken
+  mr?: MarginToken
+  mb?: MarginToken
+  ml?: MarginToken
+  // ─── Size ─────────────────────────────────────────────────────────
+  width?: number | string
+  minWidth?: number | string
+  maxWidth?: number | string
+  height?: number | string
+  minHeight?: number | string
+  maxHeight?: number | string
+  // ─── Position ─────────────────────────────────────────────────────
+  position?: 'relative' | 'absolute'
+  top?: number | string
+  right?: number | string
+  bottom?: number | string
+  left?: number | string
+  // ─── Layout ───────────────────────────────────────────────────────
+  overflow?: 'hidden' | 'visible' | 'scroll'
+  flexBasis?: number | string
+  flexShrink?: number
+  flexGrow?: number
+  // ─── RN-only theme props ───────────────────────────────────────────
+  /** Background color from the theme token system */
+  bg?: ThemeColor
+  /** Border radius using the theme radius token (level 4 — card-sized) */
+  radius?: RadiusToken
+}
+
+/** Fundamental layout primitive backed by a View. */
+export function Box({
+  p, px, py, pt, pr, pb, pl,
+  m, mx, my, mt, mr, mb, ml,
+  width, minWidth, maxWidth,
+  height, minHeight, maxHeight,
+  position,
+  top, right, bottom, left,
+  overflow,
+  flexBasis, flexShrink, flexGrow,
+  bg,
+  radius,
+  style,
+  ...rest
+}: BoxProps) {
+  const { scaling } = useThemeContext()
+  const rc = useResolveColor()
+
+  const sp = (token: MarginToken | SpaceToken | undefined): number | undefined =>
+    token !== undefined ? resolveSpace(token, scaling) : undefined
+
+  const boxStyle: ViewStyle = {
+    // Padding — specific > axis > all
+    paddingTop:    sp(pt ?? py ?? p),
+    paddingBottom: sp(pb ?? py ?? p),
+    paddingLeft:   sp(pl ?? px ?? p),
+    paddingRight:  sp(pr ?? px ?? p),
+    // Margin — specific > axis > all
+    marginTop:    sp(mt ?? my ?? m),
+    marginBottom: sp(mb ?? my ?? m),
+    marginLeft:   sp(ml ?? mx ?? m),
+    marginRight:  sp(mr ?? mx ?? m),
+    // Size
+    width:     width     as ViewStyle['width'],
+    minWidth:  minWidth  as ViewStyle['minWidth'],
+    maxWidth:  maxWidth  as ViewStyle['maxWidth'],
+    height:    height    as ViewStyle['height'],
+    minHeight: minHeight as ViewStyle['minHeight'],
+    maxHeight: maxHeight as ViewStyle['maxHeight'],
+    // Position
+    position, top: top as ViewStyle['top'], right: right as ViewStyle['right'],
+    bottom: bottom as ViewStyle['bottom'], left: left as ViewStyle['left'],
+    // Layout
+    overflow: overflow as ViewStyle['overflow'],
+    flexBasis: flexBasis as ViewStyle['flexBasis'],
+    flexShrink, flexGrow,
+    // Theme
+    backgroundColor: bg ? rc(bg) : undefined,
+    borderRadius: radius
+      ? (radius === 'full' ? getFullRadius(radius) : getRadius(radius, 4))
+      : undefined,
+  }
+
+  return <View style={[boxStyle, style]} {...rest} />
+}
+Box.displayName = 'Box'