@titan-design/react-ui 0.1.0 → 0.1.1

package/src/components/ui/button/Button.tsx

@@ -0,0 +1,242 @@
+import React, { forwardRef } from 'react'
+import { Pressable, Text, View, ActivityIndicator, type PressableProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+import { semanticColorsDark } from '../../../theme/tokens/semantic'
+
+export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link'
+export type ButtonSize = 'sm' | 'md' | 'lg'
+export type ButtonColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'
+
+export interface ButtonProps extends Omit<PressableProps, 'children'> {
+  /** Visual style variant */
+  variant?: ButtonVariant
+  /** Size of the button */
+  size?: ButtonSize
+  /** Color scheme */
+  color?: ButtonColor
+  /** Whether this is an icon-only button (square aspect ratio) */
+  isIconButton?: boolean
+  /** Whether the button is disabled */
+  isDisabled?: boolean
+  /** Whether the button is in a loading state */
+  isLoading?: boolean
+  /** Loading text to display */
+  loadingText?: string
+  /** Whether the button should take full width */
+  fullWidth?: boolean
+  /** Additional className for styling */
+  className?: string
+  /** Button content */
+  children?: React.ReactNode
+}
+
+const variantStyles: Record<ButtonVariant, Record<ButtonColor, string>> = {
+  solid: {
+    primary: 'bg-brand-primary active:bg-brand-primary-dark active:scale-[0.98] web:hover:bg-brand-primary-dark web:active:scale-[0.98]',
+    secondary: 'bg-brand-secondary active:bg-brand-secondary-dark active:scale-[0.98] web:hover:bg-brand-secondary-dark web:active:scale-[0.98]',
+    success: 'bg-status-success active:opacity-90 active:scale-[0.98] web:hover:opacity-90 web:active:scale-[0.98]',
+    error: 'bg-status-error active:opacity-90 active:scale-[0.98] web:hover:opacity-90 web:active:scale-[0.98]',
+    warning: 'bg-status-warning active:opacity-90 active:scale-[0.98] web:hover:opacity-90 web:active:scale-[0.98]',
+    info: 'bg-status-info active:opacity-90 active:scale-[0.98] web:hover:opacity-90 web:active:scale-[0.98]',
+  },
+  outline: {
+    primary: 'border-2 border-brand-primary bg-transparent active:bg-brand-primary-subtle active:scale-[0.98] web:hover:bg-brand-primary-subtle web:active:scale-[0.98]',
+    secondary: 'border-2 border-brand-secondary bg-transparent active:bg-brand-secondary-subtle active:scale-[0.98] web:hover:bg-brand-secondary-subtle web:active:scale-[0.98]',
+    success: 'border-2 border-status-success bg-transparent active:bg-status-success-subtle active:scale-[0.98] web:hover:bg-status-success-subtle web:active:scale-[0.98]',
+    error: 'border-2 border-status-error bg-transparent active:bg-status-error-subtle active:scale-[0.98] web:hover:bg-status-error-subtle web:active:scale-[0.98]',
+    warning: 'border-2 border-status-warning bg-transparent active:bg-status-warning-subtle active:scale-[0.98] web:hover:bg-status-warning-subtle web:active:scale-[0.98]',
+    info: 'border-2 border-status-info bg-transparent active:bg-status-info-subtle active:scale-[0.98] web:hover:bg-status-info-subtle web:active:scale-[0.98]',
+  },
+  ghost: {
+    primary: 'bg-transparent active:bg-brand-primary-subtle active:scale-[0.98] web:hover:bg-brand-primary-subtle web:active:scale-[0.98]',
+    secondary: 'bg-transparent active:bg-brand-secondary-subtle active:scale-[0.98] web:hover:bg-brand-secondary-subtle web:active:scale-[0.98]',
+    success: 'bg-transparent active:bg-status-success-subtle active:scale-[0.98] web:hover:bg-status-success-subtle web:active:scale-[0.98]',
+    error: 'bg-transparent active:bg-status-error-subtle active:scale-[0.98] web:hover:bg-status-error-subtle web:active:scale-[0.98]',
+    warning: 'bg-transparent active:bg-status-warning-subtle active:scale-[0.98] web:hover:bg-status-warning-subtle web:active:scale-[0.98]',
+    info: 'bg-transparent active:bg-status-info-subtle active:scale-[0.98] web:hover:bg-status-info-subtle web:active:scale-[0.98]',
+  },
+  link: {
+    primary: 'bg-transparent',
+    secondary: 'bg-transparent',
+    success: 'bg-transparent',
+    error: 'bg-transparent',
+    warning: 'bg-transparent',
+    info: 'bg-transparent',
+  },
+}
+
+const textStyles: Record<ButtonVariant, Record<ButtonColor, string>> = {
+  solid: {
+    primary: 'text-white',
+    secondary: 'text-white',
+    success: 'text-white',
+    error: 'text-white',
+    warning: 'text-white',
+    info: 'text-white',
+  },
+  outline: {
+    primary: 'text-brand-primary',
+    secondary: 'text-brand-secondary',
+    success: 'text-status-success',
+    error: 'text-status-error',
+    warning: 'text-status-warning',
+    info: 'text-status-info',
+  },
+  ghost: {
+    primary: 'text-brand-primary',
+    secondary: 'text-brand-secondary',
+    success: 'text-status-success',
+    error: 'text-status-error',
+    warning: 'text-status-warning',
+    info: 'text-status-info',
+  },
+  link: {
+    primary: 'text-brand-primary web:hover:underline',
+    secondary: 'text-brand-secondary web:hover:underline',
+    success: 'text-status-success web:hover:underline',
+    error: 'text-status-error web:hover:underline',
+    warning: 'text-status-warning web:hover:underline',
+    info: 'text-status-info web:hover:underline',
+  },
+}
+
+const sizeStyles: Record<ButtonSize, string> = {
+  sm: 'px-4 py-1.5 min-h-[32px]',
+  md: 'px-5 py-2 min-h-[40px]',
+  lg: 'px-6 py-2.5 min-h-[48px]',
+}
+
+// Icon button sizes (square aspect ratio)
+const iconButtonSizeStyles: Record<ButtonSize, string> = {
+  sm: 'w-8 h-8 p-0',
+  md: 'w-10 h-10 p-0',
+  lg: 'w-12 h-12 p-0',
+}
+
+const textSizeStyles: Record<ButtonSize, string> = {
+  sm: 'text-sm',
+  md: 'text-sm',
+  lg: 'text-base',
+}
+
+/**
+ * Button component following compound component pattern.
+ *
+ * @example
+ * <Button variant="solid" color="primary">
+ *   <ButtonText>Click me</ButtonText>
+ * </Button>
+ *
+ * // Or with icon
+ * <Button variant="outline" color="secondary">
+ *   <ButtonIcon as={PlusIcon} />
+ *   <ButtonText>Add item</ButtonText>
+ * </Button>
+ */
+export const Button = forwardRef<View, ButtonProps>(function Button(
+  {
+    variant = 'solid',
+    size = 'md',
+    color = 'primary',
+    isIconButton = false,
+    isDisabled = false,
+    isLoading = false,
+    loadingText,
+    fullWidth = false,
+    className,
+    children,
+    ...props
+  },
+  ref
+) {
+  const disabled = isDisabled || isLoading
+
+  return (
+    <Pressable
+      ref={ref}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+      className={cn(
+        // Base styles
+        'flex-row items-center justify-center rounded-md transition-all duration-150',
+        // Variant + color styles
+        variantStyles[variant][color],
+        // Size styles (icon button vs regular)
+        isIconButton ? iconButtonSizeStyles[size] : sizeStyles[size],
+        // Full width
+        fullWidth && 'w-full',
+        // Disabled styles - more refined
+        disabled && 'opacity-40 cursor-not-allowed active:scale-100 web:active:scale-100',
+        // Link variant has no padding
+        variant === 'link' && 'px-0 py-0 min-h-0',
+        className
+      )}
+      {...props}
+    >
+      {isLoading && (
+        <ActivityIndicator
+          size="small"
+          color={variant === 'solid' ? semanticColorsDark['on-brand-primary'] : undefined}
+          className="mr-2"
+        />
+      )}
+      {isLoading && loadingText ? (
+        <Text
+          className={cn(
+            'font-semibold',
+            textSizeStyles[size],
+            textStyles[variant][color]
+          )}
+        >
+          {loadingText}
+        </Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  )
+})
+
+export interface ButtonTextProps {
+  children: React.ReactNode
+  className?: string
+}
+
+/**
+ * Text component for Button. Use inside Button for consistent styling.
+ */
+export function ButtonText({ children, className }: ButtonTextProps) {
+  return (
+    <Text className={cn('font-semibold text-inherit', className)}>
+      {children}
+    </Text>
+  )
+}
+
+export interface ButtonIconProps {
+  /** Icon component to render */
+  as: React.ComponentType<{ size?: number; color?: string; className?: string }>
+  /** Icon size */
+  size?: number
+  /** Additional className */
+  className?: string
+}
+
+/**
+ * Icon component for Button. Use inside Button for icons.
+ */
+export function ButtonIcon({ as: Icon, size = 16, className }: ButtonIconProps) {
+  return <Icon size={size} className={cn('text-inherit', className)} />
+}
+
+export interface ButtonSpinnerProps {
+  className?: string
+}
+
+/**
+ * Spinner component for Button loading state.
+ */
+export function ButtonSpinner({ className }: ButtonSpinnerProps) {
+  return <ActivityIndicator size="small" className={cn('text-inherit', className)} />
+}

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

@@ -0,0 +1,10 @@
+export { Button, ButtonText, ButtonIcon, ButtonSpinner } from './Button'
+export type {
+  ButtonProps,
+  ButtonTextProps,
+  ButtonIconProps,
+  ButtonSpinnerProps,
+  ButtonVariant,
+  ButtonSize,
+  ButtonColor,
+} from './Button'

package/src/components/ui/card/Card.stories.tsx

@@ -0,0 +1,443 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  CardSkeleton,
+  CardInset,
+} from './Card'
+import { Button, ButtonText } from '../button'
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card',
+  component: Card,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['elevated', 'outline', 'filled'],
+    },
+    elevation: {
+      control: 'select',
+      options: [1, 2, 3],
+      description: 'Elevation level (1=subtle, 2=standard, 3=prominent)',
+    },
+    isInteractive: { control: 'boolean' },
+    isLoading: { control: 'boolean' },
+    borderColor: { control: 'color' },
+    bgColor: { control: 'color' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Card>
+
+export const Default: Story = {
+  render: (args) => (
+    <Card {...args} style={{ width: 320 }}>
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card description goes here</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Text className="text-text-secondary">
+          This is the card content. You can put any content here.
+        </Text>
+      </CardContent>
+      <CardFooter>
+        <Button variant="ghost" size="sm">
+          <ButtonText>Cancel</ButtonText>
+        </Button>
+        <Button size="sm">
+          <ButtonText>Save</ButtonText>
+        </Button>
+      </CardFooter>
+    </Card>
+  ),
+}
+
+export const Elevated: Story = {
+  args: {
+    variant: 'elevated',
+  },
+  render: (args) => (
+    <Card {...args} style={{ width: 320 }}>
+      <CardContent>
+        <Text className="text-text-primary">Elevated card with elevation</Text>
+      </CardContent>
+    </Card>
+  ),
+}
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+  },
+  render: (args) => (
+    <Card {...args} style={{ width: 320 }}>
+      <CardContent>
+        <Text className="text-text-primary">Outlined card with border</Text>
+      </CardContent>
+    </Card>
+  ),
+}
+
+export const Filled: Story = {
+  args: {
+    variant: 'filled',
+  },
+  render: (args) => (
+    <Card {...args} style={{ width: 320 }}>
+      <CardContent>
+        <Text className="text-text-primary">Filled card with background</Text>
+      </CardContent>
+    </Card>
+  ),
+}
+
+export const Interactive: Story = {
+  args: {
+    isInteractive: true,
+  },
+  render: (args) => (
+    <Card {...args} style={{ width: 320 }}>
+      <CardHeader>
+        <CardTitle>Interactive Card</CardTitle>
+        <CardDescription>Hover to see the effect</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Text className="text-text-secondary">
+          This card has hover effects when isInteractive is true.
+        </Text>
+      </CardContent>
+    </Card>
+  ),
+}
+
+export const SimpleCard: Story = {
+  render: () => (
+    <Card style={{ width: 320 }}>
+      <CardContent>
+        <Text className="text-text-primary">Simple card with just content</Text>
+      </CardContent>
+    </Card>
+  ),
+}
+
+export const ElevationLevels: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
+      <Card elevation={1} style={{ width: 140 }}>
+        <CardContent>
+          <Text className="text-text-primary font-semibold">Subtle (1)</Text>
+        </CardContent>
+      </Card>
+      <Card elevation={2} style={{ width: 140 }}>
+        <CardContent>
+          <Text className="text-text-primary font-semibold">Standard (2)</Text>
+        </CardContent>
+      </Card>
+      <Card elevation={3} style={{ width: 140 }}>
+        <CardContent>
+          <Text className="text-text-primary font-semibold">Prominent (3)</Text>
+        </CardContent>
+      </Card>
+    </View>
+  ),
+}
+
+export const Clickable: Story = {
+  render: () => (
+    <Card
+      isInteractive
+      onPress={() => console.log('Card clicked!')}
+      style={{ width: 320 }}
+    >
+      <CardHeader>
+        <CardTitle>Clickable Card</CardTitle>
+        <CardDescription>Click anywhere on this card</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Text className="text-text-secondary">
+          This card has onPress handler and shows hover/press feedback.
+        </Text>
+      </CardContent>
+    </Card>
+  ),
+}
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+  },
+  render: (args) => (
+    <Card {...args} style={{ width: 320 }}>
+      <CardHeader>
+        <CardTitle>Loading Card</CardTitle>
+        <CardDescription>Content is loading...</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Text className="text-text-secondary">
+          This content is hidden behind a loading spinner.
+        </Text>
+      </CardContent>
+    </Card>
+  ),
+}
+
+export const Skeleton: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <CardSkeleton style={{ width: 320 }} />
+      <CardSkeleton hasHeader hasFooter style={{ width: 320 }} />
+      <CardSkeleton hasHeader={false} contentLines={2} style={{ width: 320 }} />
+    </View>
+  ),
+}
+
+export const InsetElements: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <Card elevation={2} style={{ width: 320 }}>
+        <CardHeader>
+          <CardTitle>Card with Inset</CardTitle>
+          <CardDescription>Demonstrating inset elements within cards</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <CardInset elevation={-1} className="p-4">
+            <Text className="text-text-secondary text-sm">
+              Shallow inset element (elevation -1)
+            </Text>
+          </CardInset>
+        </CardContent>
+      </Card>
+      
+      <Card elevation={3} style={{ width: 320 }}>
+        <CardHeader>
+          <CardTitle>Deep Inset</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <CardInset elevation={-2} className="p-4">
+            <Text className="text-text-secondary text-sm">
+              Deep inset element (elevation -2)
+            </Text>
+          </CardInset>
+        </CardContent>
+      </Card>
+      
+      <Card elevation={2} style={{ width: 320 }}>
+        <CardHeader>
+          <CardTitle>Nested Insets</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <CardInset elevation={-1} className="p-4 mb-4">
+            <Text className="text-text-secondary text-sm mb-2">
+              Outer inset (elevation -1)
+            </Text>
+            <CardInset elevation={-2} className="p-3">
+              <Text className="text-text-secondary text-xs">
+                Inner inset (elevation -2)
+              </Text>
+            </CardInset>
+          </CardInset>
+        </CardContent>
+      </Card>
+    </View>
+  ),
+}
+
+// Status colors from the theme (using CSS custom properties for theme compliance)
+const statusColors = {
+  success: 'var(--color-status-success)',
+  successSubtle: 'var(--color-status-success-subtle)',
+  error: 'var(--color-status-error)',
+  errorSubtle: 'var(--color-status-error-subtle)',
+  warning: 'var(--color-status-warning)',
+  warningSubtle: 'var(--color-status-warning-subtle)',
+  info: 'var(--color-status-info)',
+  infoSubtle: 'var(--color-status-info-subtle)',
+}
+
+export const StatusOutlineCards: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <Text className="text-lg font-semibold text-text-primary mb-2">
+        Status Cards with Custom Border Colors
+      </Text>
+      
+      <Card variant="outline" borderColor={statusColors.success} style={{ width: 320 }}>
+        <CardHeader>
+          <CardTitle>Success</CardTitle>
+          <CardDescription>Operation completed successfully</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Text className="text-text-secondary">
+            Your changes have been saved.
+          </Text>
+        </CardContent>
+      </Card>
+      
+      <Card variant="outline" borderColor={statusColors.error} style={{ width: 320 }}>
+        <CardHeader>
+          <CardTitle>Error</CardTitle>
+          <CardDescription>Something went wrong</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Text className="text-text-secondary">
+            Please try again or contact support.
+          </Text>
+        </CardContent>
+      </Card>
+      
+      <Card variant="outline" borderColor={statusColors.warning} style={{ width: 320 }}>
+        <CardHeader>
+          <CardTitle>Warning</CardTitle>
+          <CardDescription>Proceed with caution</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Text className="text-text-secondary">
+            This action cannot be undone.
+          </Text>
+        </CardContent>
+      </Card>
+      
+      <Card variant="outline" borderColor={statusColors.info} style={{ width: 320 }}>
+        <CardHeader>
+          <CardTitle>Information</CardTitle>
+          <CardDescription>Good to know</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Text className="text-text-secondary">
+            New features are available in this release.
+          </Text>
+        </CardContent>
+      </Card>
+    </View>
+  ),
+}
+
+export const StatusFilledCards: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <Text className="text-lg font-semibold text-text-primary mb-2">
+        Status Cards with Custom Background Colors
+      </Text>
+      
+      <Card 
+        variant="outline" 
+        borderColor={statusColors.success} 
+        bgColor={statusColors.successSubtle}
+        style={{ width: 320 }}
+      >
+        <CardHeader>
+          <CardTitle>Success</CardTitle>
+          <CardDescription>Operation completed successfully</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Text className="text-text-secondary">
+            Your changes have been saved.
+          </Text>
+        </CardContent>
+      </Card>
+      
+      <Card 
+        variant="outline" 
+        borderColor={statusColors.error} 
+        bgColor={statusColors.errorSubtle}
+        style={{ width: 320 }}
+      >
+        <CardHeader>
+          <CardTitle>Error</CardTitle>
+          <CardDescription>Something went wrong</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Text className="text-text-secondary">
+            Please try again or contact support.
+          </Text>
+        </CardContent>
+      </Card>
+      
+      <Card 
+        variant="outline" 
+        borderColor={statusColors.warning} 
+        bgColor={statusColors.warningSubtle}
+        style={{ width: 320 }}
+      >
+        <CardHeader>
+          <CardTitle>Warning</CardTitle>
+          <CardDescription>Proceed with caution</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Text className="text-text-secondary">
+            This action cannot be undone.
+          </Text>
+        </CardContent>
+      </Card>
+      
+      <Card 
+        variant="outline" 
+        borderColor={statusColors.info} 
+        bgColor={statusColors.infoSubtle}
+        style={{ width: 320 }}
+      >
+        <CardHeader>
+          <CardTitle>Information</CardTitle>
+          <CardDescription>Good to know</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Text className="text-text-secondary">
+            New features are available in this release.
+          </Text>
+        </CardContent>
+      </Card>
+    </View>
+  ),
+}
+
+export const BrandColoredCards: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <Text className="text-lg font-semibold text-text-primary mb-2">
+        Brand Colored Cards
+      </Text>
+      
+      <Card
+        variant="outline"
+        borderColor="var(--color-brand-primary)"
+        bgColor="var(--color-brand-primary-subtle)"
+        style={{ width: 320 }}
+      >
+        <CardHeader>
+          <CardTitle>Primary Brand</CardTitle>
+          <CardDescription>Orange brand color</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Text className="text-text-secondary">
+            Card with primary brand color styling.
+          </Text>
+        </CardContent>
+      </Card>
+
+      <Card
+        variant="outline"
+        borderColor="var(--color-brand-secondary)"
+        bgColor="var(--color-brand-secondary-subtle)"
+        style={{ width: 320 }}
+      >
+        <CardHeader>
+          <CardTitle>Secondary Brand</CardTitle>
+          <CardDescription>Steel brand color</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Text className="text-text-secondary">
+            Card with secondary brand color styling.
+          </Text>
+        </CardContent>
+      </Card>
+    </View>
+  ),
+}