@titan-design/react-ui 0.1.0 → 0.2.5

package/src/components/ui/progress/Progress.tsx

@@ -0,0 +1,339 @@
+import React from 'react'
+import { View, Text, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type ProgressSize = 'sm' | 'md' | 'lg'
+export type ProgressColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'
+export type ProgressVariant = 'linear' | 'circular'
+
+/** Maps the color prop to a CSS variable reference for inline styles */
+const colorVarMap: Record<ProgressColor, string> = {
+  primary: 'var(--color-brand-primary)',
+  secondary: 'var(--color-brand-secondary)',
+  success: 'var(--color-status-success)',
+  error: 'var(--color-status-error)',
+  warning: 'var(--color-status-warning)',
+  info: 'var(--color-status-info)',
+}
+
+export interface ProgressProps extends ViewProps {
+  /** Current value (0-100) */
+  value?: number
+  /** Maximum value */
+  max?: number
+  /** Whether the progress is indeterminate */
+  isIndeterminate?: boolean
+  /** Size of the progress bar */
+  size?: ProgressSize
+  /** Color of the progress */
+  color?: ProgressColor
+  /** Whether to show the value label */
+  showValue?: boolean
+  /** Custom value format function */
+  formatValue?: (value: number, max: number) => string
+  /** Label text */
+  label?: string
+  /** Fixed track width in pixels (default: full width) */
+  trackWidth?: number
+  /** Custom hex color override for the fill bar */
+  customColor?: string
+  /** Additional className */
+  className?: string
+}
+
+const sizeStyles: Record<ProgressSize, string> = {
+  sm: 'h-1',
+  md: 'h-2',
+  lg: 'h-3',
+}
+
+const colorStyles: Record<ProgressColor, string> = {
+  primary: 'bg-brand-primary',
+  secondary: 'bg-brand-secondary',
+  success: 'bg-status-success',
+  error: 'bg-status-error',
+  warning: 'bg-status-warning',
+  info: 'bg-status-info',
+}
+
+const trackColorStyles: Record<ProgressColor, string> = {
+  primary: 'bg-brand-primary/20',
+  secondary: 'bg-brand-secondary/20',
+  success: 'bg-status-success/20',
+  error: 'bg-status-error/20',
+  warning: 'bg-status-warning/20',
+  info: 'bg-status-info/20',
+}
+
+/**
+ * Linear progress bar component.
+ *
+ * @example
+ * // Determinate progress
+ * <Progress value={75} />
+ *
+ * @example
+ * // With label and value
+ * <Progress value={45} label="Uploading..." showValue />
+ *
+ * @example
+ * // Indeterminate progress
+ * <Progress isIndeterminate />
+ */
+export function Progress({
+  value = 0,
+  max = 100,
+  isIndeterminate = false,
+  size = 'md',
+  color = 'primary',
+  showValue = false,
+  formatValue = (v, m) => `${Math.round((v / m) * 100)}%`,
+  label,
+  trackWidth,
+  customColor,
+  className,
+  ...props
+}: ProgressProps) {
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100)
+
+  return (
+    <View className={cn('w-full', className)} {...props}>
+      {/* Label and Value Row */}
+      {(label || showValue) && (
+        <View className="flex-row justify-between items-center mb-1">
+          {label && (
+            <Text className="text-sm text-text-secondary">{label}</Text>
+          )}
+          {showValue && !isIndeterminate && (
+            <Text className="text-sm font-medium text-text-primary">
+              {formatValue(value, max)}
+            </Text>
+          )}
+        </View>
+      )}
+
+      {/* Progress Track */}
+      <View
+        className={cn(
+          'rounded-full overflow-hidden',
+          trackWidth ? undefined : 'w-full',
+          trackColorStyles[color],
+          sizeStyles[size]
+        )}
+        style={trackWidth ? { width: trackWidth } : undefined}
+        accessibilityRole="progressbar"
+        accessibilityValue={{
+          min: 0,
+          max: max,
+          now: isIndeterminate ? undefined : value,
+        }}
+      >
+        {/* Progress Fill */}
+        <View
+          className={cn(
+            'h-full rounded-full',
+            !customColor && colorStyles[color],
+            isIndeterminate && 'animate-pulse w-1/3'
+          )}
+          style={{
+            ...(isIndeterminate ? {} : { width: `${percentage}%` }),
+            ...(customColor ? { backgroundColor: customColor } : {}),
+          }}
+        />
+      </View>
+    </View>
+  )
+}
+
+export interface CircularProgressProps extends ViewProps {
+  /** Current value (0-100) */
+  value?: number
+  /** Maximum value */
+  max?: number
+  /** Whether the progress is indeterminate */
+  isIndeterminate?: boolean
+  /** Size of the progress circle (diameter) */
+  size?: number
+  /** Stroke width */
+  strokeWidth?: number
+  /** Color of the progress */
+  color?: ProgressColor
+  /** Whether to show the value in center */
+  showValue?: boolean
+  /** Custom value format function */
+  formatValue?: (value: number, max: number) => string
+  /** Additional className */
+  className?: string
+}
+
+/**
+ * Circular progress indicator component.
+ *
+ * @example
+ * <CircularProgress value={75} showValue />
+ */
+export function CircularProgress({
+  value = 0,
+  max = 100,
+  isIndeterminate = false,
+  size = 48,
+  strokeWidth = 4,
+  color = 'primary',
+  showValue = false,
+  formatValue = (v, m) => `${Math.round((v / m) * 100)}%`,
+  className,
+  ...props
+}: CircularProgressProps) {
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100)
+  const radius = (size - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
+  const strokeDashoffset = circumference - (percentage / 100) * circumference
+  const center = size / 2
+
+  return (
+    <View
+      className={cn('items-center justify-center', className)}
+      style={{ width: size, height: size }}
+      accessibilityRole="progressbar"
+      accessibilityValue={{
+        min: 0,
+        max: max,
+        now: isIndeterminate ? undefined : value,
+      }}
+      {...props}
+    >
+      {/* SVG implementation for web */}
+      <View
+        className={cn(isIndeterminate && 'animate-spin')}
+        style={{ width: size, height: size }}
+      >
+        <svg
+          width={size}
+          height={size}
+          viewBox={`0 0 ${size} ${size}`}
+          style={{ position: 'absolute' }}
+        >
+          {/* Background track */}
+          <circle
+            cx={center}
+            cy={center}
+            r={radius}
+            fill="none"
+            stroke="var(--color-border-default)"
+            strokeWidth={strokeWidth}
+          />
+          {/* Progress arc */}
+          <circle
+            cx={center}
+            cy={center}
+            r={radius}
+            fill="none"
+            stroke={colorVarMap[color]}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeDasharray={circumference}
+            strokeDashoffset={isIndeterminate ? circumference * 0.75 : strokeDashoffset}
+            transform={`rotate(-90 ${center} ${center})`}
+            style={{ transition: 'stroke-dashoffset 300ms cubic-bezier(0.22, 1, 0.36, 1)' }}
+          />
+        </svg>
+      </View>
+
+      {/* Center value */}
+      {showValue && !isIndeterminate && (
+        <Text
+          className="text-xs font-semibold text-text-primary absolute"
+          style={{ fontSize: Math.max(size * 0.22, 10) }}
+        >
+          {formatValue(value, max)}
+        </Text>
+      )}
+    </View>
+  )
+}
+
+export interface ProgressStepsProps extends ViewProps {
+  /** Current step (0-indexed) */
+  currentStep: number
+  /** Total number of steps */
+  totalSteps: number
+  /** Color of completed steps */
+  color?: ProgressColor
+  /** Size of step indicators */
+  size?: ProgressSize
+  /** Labels for each step */
+  labels?: string[]
+  /** Additional className */
+  className?: string
+}
+
+const stepSizeStyles: Record<ProgressSize, { dot: string; connector: string }> = {
+  sm: { dot: 'w-2 h-2', connector: 'h-0.5' },
+  md: { dot: 'w-3 h-3', connector: 'h-1' },
+  lg: { dot: 'w-4 h-4', connector: 'h-1.5' },
+}
+
+/**
+ * Step-based progress indicator.
+ *
+ * @example
+ * <ProgressSteps currentStep={2} totalSteps={4} labels={['Cart', 'Shipping', 'Payment', 'Done']} />
+ */
+export function ProgressSteps({
+  currentStep,
+  totalSteps,
+  color = 'primary',
+  size = 'md',
+  labels,
+  className,
+  ...props
+}: ProgressStepsProps) {
+  const { dot, connector } = stepSizeStyles[size]
+
+  return (
+    <View className={cn('w-full', className)} {...props}>
+      <View className="flex-row items-center">
+        {Array.from({ length: totalSteps }).map((_, index) => (
+          <React.Fragment key={index}>
+            {/* Step dot */}
+            <View
+              className={cn(
+                'rounded-full',
+                dot,
+                index <= currentStep ? colorStyles[color] : 'bg-border-strong'
+              )}
+            />
+
+            {/* Connector line */}
+            {index < totalSteps - 1 && (
+              <View
+                className={cn(
+                  'flex-1 mx-1',
+                  connector,
+                  index < currentStep ? colorStyles[color] : 'bg-border-strong'
+                )}
+              />
+            )}
+          </React.Fragment>
+        ))}
+      </View>
+
+      {/* Labels */}
+      {labels && labels.length > 0 && (
+        <View className="flex-row mt-2">
+          {labels.map((label, index) => (
+            <Text
+              key={index}
+              className={cn(
+                'flex-1 text-xs text-center',
+                index <= currentStep ? 'text-text-primary font-medium' : 'text-text-tertiary'
+              )}
+            >
+              {label}
+            </Text>
+          ))}
+        </View>
+      )}
+    </View>
+  )
+}

package/src/components/ui/progress/index.ts

@@ -0,0 +1,9 @@
+export { Progress, CircularProgress, ProgressSteps } from './Progress'
+export type {
+  ProgressProps,
+  CircularProgressProps,
+  ProgressStepsProps,
+  ProgressSize,
+  ProgressColor,
+  ProgressVariant,
+} from './Progress'

package/src/components/ui/radio/Radio.stories.tsx

@@ -0,0 +1,199 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { View, Text } from 'react-native'
+import { Radio, RadioGroup } from './Radio'
+
+const meta: Meta<typeof RadioGroup> = {
+  title: 'Components/Radio',
+  component: RadioGroup,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    color: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'error'],
+    },
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+    },
+    isDisabled: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof RadioGroup>
+
+export const Default: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>('option1')
+    return (
+      <RadioGroup value={value} onChange={setValue}>
+        <Radio value="option1">Option 1</Radio>
+        <Radio value="option2">Option 2</Radio>
+        <Radio value="option3">Option 3</Radio>
+      </RadioGroup>
+    )
+  },
+}
+
+export const WithLabel: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>('email')
+    return (
+      <RadioGroup value={value} onChange={setValue} label="Notification Preference">
+        <Radio value="email">Email</Radio>
+        <Radio value="sms">SMS</Radio>
+        <Radio value="push">Push Notification</Radio>
+        <Radio value="none">None</Radio>
+      </RadioGroup>
+    )
+  },
+}
+
+export const Horizontal: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>('monthly')
+    return (
+      <RadioGroup
+        value={value}
+        onChange={setValue}
+        orientation="horizontal"
+        label="Billing Cycle"
+      >
+        <Radio value="monthly">Monthly</Radio>
+        <Radio value="quarterly">Quarterly</Radio>
+        <Radio value="yearly">Yearly</Radio>
+      </RadioGroup>
+    )
+  },
+}
+
+export const AllSizes: Story = {
+  render: function Render() {
+    const [small, setSmall] = useState<string | null>('a')
+    const [medium, setMedium] = useState<string | null>('a')
+    const [large, setLarge] = useState<string | null>('a')
+    
+    return (
+      <View className="gap-6">
+        <View>
+          <Text className="text-text-secondary text-sm mb-2">Small</Text>
+          <RadioGroup value={small} onChange={setSmall} size="sm" orientation="horizontal">
+            <Radio value="a">Option A</Radio>
+            <Radio value="b">Option B</Radio>
+          </RadioGroup>
+        </View>
+        <View>
+          <Text className="text-text-secondary text-sm mb-2">Medium (default)</Text>
+          <RadioGroup value={medium} onChange={setMedium} size="md" orientation="horizontal">
+            <Radio value="a">Option A</Radio>
+            <Radio value="b">Option B</Radio>
+          </RadioGroup>
+        </View>
+        <View>
+          <Text className="text-text-secondary text-sm mb-2">Large</Text>
+          <RadioGroup value={large} onChange={setLarge} size="lg" orientation="horizontal">
+            <Radio value="a">Option A</Radio>
+            <Radio value="b">Option B</Radio>
+          </RadioGroup>
+        </View>
+      </View>
+    )
+  },
+}
+
+export const AllColors: Story = {
+  render: function Render() {
+    const [primary, setPrimary] = useState<string | null>('a')
+    const [secondary, setSecondary] = useState<string | null>('a')
+    const [success, setSuccess] = useState<string | null>('a')
+    const [error, setError] = useState<string | null>('a')
+    
+    return (
+      <View className="gap-6">
+        <RadioGroup value={primary} onChange={setPrimary} color="primary" orientation="horizontal" label="Primary">
+          <Radio value="a">Option A</Radio>
+          <Radio value="b">Option B</Radio>
+        </RadioGroup>
+        <RadioGroup value={secondary} onChange={setSecondary} color="secondary" orientation="horizontal" label="Secondary">
+          <Radio value="a">Option A</Radio>
+          <Radio value="b">Option B</Radio>
+        </RadioGroup>
+        <RadioGroup value={success} onChange={setSuccess} color="success" orientation="horizontal" label="Success">
+          <Radio value="a">Option A</Radio>
+          <Radio value="b">Option B</Radio>
+        </RadioGroup>
+        <RadioGroup value={error} onChange={setError} color="error" orientation="horizontal" label="Error">
+          <Radio value="a">Option A</Radio>
+          <Radio value="b">Option B</Radio>
+        </RadioGroup>
+      </View>
+    )
+  },
+}
+
+export const Disabled: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>('option1')
+    return (
+      <View className="gap-6">
+        <View>
+          <Text className="text-text-secondary text-sm mb-2">Entire group disabled</Text>
+          <RadioGroup value={value} onChange={setValue} isDisabled>
+            <Radio value="option1">Option 1</Radio>
+            <Radio value="option2">Option 2</Radio>
+          </RadioGroup>
+        </View>
+        <View>
+          <Text className="text-text-secondary text-sm mb-2">Individual option disabled</Text>
+          <RadioGroup value={value} onChange={setValue}>
+            <Radio value="option1">Option 1 (enabled)</Radio>
+            <Radio value="option2" isDisabled>Option 2 (disabled)</Radio>
+            <Radio value="option3">Option 3 (enabled)</Radio>
+          </RadioGroup>
+        </View>
+      </View>
+    )
+  },
+}
+
+export const FormExample: Story = {
+  render: function Render() {
+    const [plan, setPlan] = useState<string | null>('pro')
+    const [billing, setBilling] = useState<string | null>('monthly')
+    
+    return (
+      <View className="gap-6 p-4 bg-surface-base rounded-lg max-w-md">
+        <Text className="text-lg font-semibold text-text-primary">Subscription Settings</Text>
+        
+        <RadioGroup value={plan} onChange={setPlan} label="Select Plan">
+          <Radio value="free">Free - Basic features</Radio>
+          <Radio value="pro">Pro - Advanced features</Radio>
+          <Radio value="enterprise">Enterprise - Custom solutions</Radio>
+        </RadioGroup>
+        
+        <RadioGroup 
+          value={billing} 
+          onChange={setBilling} 
+          orientation="horizontal"
+          label="Billing Frequency"
+        >
+          <Radio value="monthly">Monthly</Radio>
+          <Radio value="yearly">Yearly (save 20%)</Radio>
+        </RadioGroup>
+        
+        <View className="pt-4 border-t border-border-default">
+          <Text className="text-sm text-text-secondary">
+            Selected: {plan} plan, billed {billing}
+          </Text>
+        </View>
+      </View>
+    )
+  },
+}