@sibipro/sprinkles-native 0.1.8

package/src/components/Banner.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from '../utils/cn';
+
+export type BannerVariant = 'info' | 'warn' | 'danger' | 'success';
+
+const variantClasses: Record<BannerVariant, string> = {
+  info: 'bg-info-50 dark:bg-info-900',
+  warn: 'bg-warn-50 dark:bg-warn-900',
+  danger: 'bg-danger-50 dark:bg-danger-900',
+  success: 'bg-success-50 dark:bg-success-900',
+};
+
+export interface BannerProps extends ViewProps {
+  variant?: BannerVariant;
+  className?: string;
+}
+
+export function Banner({
+  variant = 'info',
+  className,
+  ...props
+}: BannerProps) {
+  return (
+    <View
+      className={cn(
+        'rounded-2xl p-4 flex-row items-start gap-2.5',
+        variantClasses[variant],
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/components/Button.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { cn } from '../utils/cn';
+import { Text } from './Text';
+
+export type ButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'tertiary-brand'
+  | 'tertiary-danger'
+  | 'danger'
+  | 'ghost'
+  | 'link';
+
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary: 'bg-button-primary',
+  secondary: 'bg-button-secondary border border-border',
+  tertiary: 'bg-transparent',
+  'tertiary-brand': 'bg-transparent',
+  'tertiary-danger': 'bg-transparent',
+  danger: 'bg-danger-500',
+  ghost: 'bg-transparent',
+  link: 'bg-transparent',
+};
+
+const pressedClasses: Record<ButtonVariant, string> = {
+  primary: 'bg-button-primary-hover',
+  secondary: 'bg-button-secondary-hover',
+  tertiary: 'bg-button-tertiary-hover',
+  'tertiary-brand': 'bg-brand-25',
+  'tertiary-danger': 'bg-danger-25',
+  danger: 'bg-danger-600',
+  ghost: 'bg-accent',
+  link: 'opacity-70',
+};
+
+const textClasses: Record<ButtonVariant, string> = {
+  primary: 'text-button-primary-foreground',
+  secondary: 'text-button-secondary-foreground',
+  tertiary: 'text-button-tertiary-foreground',
+  'tertiary-brand': 'text-brand-500',
+  'tertiary-danger': 'text-danger-500',
+  danger: 'text-white',
+  ghost: 'text-foreground',
+  link: 'text-brand-500 underline',
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: 'h-8 px-3',
+  md: 'h-10 px-4',
+  lg: 'h-12 px-5',
+};
+
+export interface ButtonProps extends Omit<PressableProps, 'children'> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export function Button({
+  variant = 'secondary',
+  size = 'md',
+  className,
+  disabled,
+  children,
+  ...props
+}: ButtonProps) {
+  return (
+    <Pressable
+      className={({ pressed }) =>
+        cn(
+          'rounded-lg flex-row items-center justify-center gap-2',
+          variantClasses[variant],
+          sizeClasses[size],
+          pressed && pressedClasses[variant],
+          disabled && 'opacity-50',
+          className,
+        )
+      }
+      disabled={disabled}
+      {...props}
+    >
+      {typeof children === 'string' ? (
+        <Text size="sm" weight="bold" className={textClasses[variant]}>
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}

package/src/components/Card.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from '../utils/cn';
+
+export type CardVariant = 'default' | 'outline';
+
+const variantClasses: Record<CardVariant, string> = {
+  default: 'bg-background shadow-md',
+  outline: 'bg-background border border-border',
+};
+
+export interface CardProps extends ViewProps {
+  variant?: CardVariant;
+  className?: string;
+}
+
+export function Card({
+  variant = 'default',
+  className,
+  ...props
+}: CardProps) {
+  return (
+    <View
+      className={cn('rounded-xl p-4', variantClasses[variant], className)}
+      {...props}
+    />
+  );
+}

package/src/components/Checkbox.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+import { cn } from '../utils/cn';
+import { Text } from './Text';
+
+export interface CheckboxProps {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  label?: string;
+  className?: string;
+}
+
+export function Checkbox({
+  checked = false,
+  onCheckedChange,
+  disabled,
+  label,
+  className,
+}: CheckboxProps) {
+  return (
+    <Pressable
+      onPress={() => !disabled && onCheckedChange?.(!checked)}
+      className={cn('flex-row items-center gap-2', disabled && 'opacity-50', className)}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked, disabled }}
+    >
+      <View
+        className={cn(
+          'h-5 w-5 rounded border items-center justify-center',
+          checked
+            ? 'bg-brand-500 border-brand-500'
+            : 'bg-background border-border',
+        )}
+      >
+        {checked && (
+          <Text className="text-white text-xs">✓</Text>
+        )}
+      </View>
+      {label && <Text className="text-foreground">{label}</Text>}
+    </Pressable>
+  );
+}

package/src/components/Chip.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { View, Pressable, type ViewProps } from 'react-native';
+import { cn } from '../utils/cn';
+import { Text } from './Text';
+
+export interface ChipProps extends ViewProps {
+  label: string;
+  onDismiss?: () => void;
+  className?: string;
+}
+
+export function Chip({ label, onDismiss, className, ...props }: ChipProps) {
+  return (
+    <View
+      className={cn(
+        'h-7 rounded-full bg-background-tertiary px-2.5 flex-row items-center gap-1',
+        className,
+      )}
+      {...props}
+    >
+      <Text size="sm" className="text-foreground">
+        {label}
+      </Text>
+      {onDismiss && (
+        <Pressable
+          onPress={onDismiss}
+          className="ml-0.5"
+          accessibilityRole="button"
+          accessibilityLabel={`Remove ${label}`}
+        >
+          <Text size="sm" className="text-foreground-label">
+            ✕
+          </Text>
+        </Pressable>
+      )}
+    </View>
+  );
+}

package/src/components/EmptyState.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from '../utils/cn';
+import { Text } from './Text';
+
+export interface EmptyStateProps extends ViewProps {
+  title: string;
+  description?: string;
+  icon?: React.ReactNode;
+  action?: React.ReactNode;
+  className?: string;
+}
+
+export function EmptyState({
+  title,
+  description,
+  icon,
+  action,
+  className,
+  ...props
+}: EmptyStateProps) {
+  return (
+    <View
+      className={cn('items-center py-12 px-4 gap-3', className)}
+      {...props}
+    >
+      {icon}
+      <View className="items-center gap-1">
+        <Text variant="heading" className="text-2xl text-center">
+          {title}
+        </Text>
+        {description && (
+          <Text className="text-lg text-foreground text-center">
+            {description}
+          </Text>
+        )}
+      </View>
+      {action}
+    </View>
+  );
+}

package/src/components/Input.tsx

@@ -0,0 +1,123 @@
+import React, { useRef } from 'react';
+import {
+  TextInput,
+  View,
+  Pressable,
+  type TextInputProps,
+  type ViewProps,
+} from 'react-native';
+import { cn } from '../utils/cn';
+import { Text } from './Text';
+
+export type InputVariant = 'default' | 'search' | 'ghost';
+export type InputGirth = 'sm' | 'md' | 'lg';
+
+const variantClasses: Record<InputVariant, string> = {
+  default: 'border border-border bg-background',
+  search: 'border-0 bg-background-secondary',
+  ghost: 'border-0 bg-transparent',
+};
+
+const girthClasses: Record<InputGirth, string> = {
+  sm: 'h-8',
+  md: 'h-10',
+  lg: 'min-h-[48px] py-3',
+};
+
+export interface InputProps extends TextInputProps {
+  variant?: InputVariant;
+  girth?: InputGirth;
+  error?: boolean;
+  className?: string;
+}
+
+export const Input = React.forwardRef<TextInput, InputProps>(
+  ({ variant = 'default', girth = 'md', error, className, ...props }, ref) => {
+    return (
+      <TextInput
+        ref={ref}
+        className={cn(
+          'w-full rounded-xl px-4 text-base text-foreground',
+          variantClasses[variant],
+          girthClasses[girth],
+          error && 'border-2 border-danger-500',
+          props.editable === false && 'opacity-60',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+export interface InputWithExtrasProps extends InputProps {
+  before?: React.ReactNode;
+  after?: React.ReactNode;
+  containerClassName?: string;
+}
+
+export const InputWithExtras = React.forwardRef<TextInput, InputWithExtrasProps>(
+  ({ before, after, containerClassName, variant = 'default', girth = 'md', error, className, ...props }, ref) => {
+    const innerRef = useRef<TextInput>(null);
+    const inputRef = (ref as React.RefObject<TextInput>) ?? innerRef;
+
+    return (
+      <Pressable onPress={() => inputRef.current?.focus()}>
+        <View
+          className={cn(
+            'flex-row items-center gap-1',
+            variantClasses[variant],
+            girthClasses[girth],
+            'rounded-xl px-4',
+            error && 'border-2 border-danger-500',
+            containerClassName,
+          )}
+        >
+          {before}
+          <Input
+            ref={inputRef}
+            variant="ghost"
+            girth={girth}
+            className={cn('flex-1 h-full px-0', className)}
+            {...props}
+          />
+          {after}
+        </View>
+      </Pressable>
+    );
+  },
+);
+
+export interface InputWithLabelProps extends InputProps {
+  label?: string;
+  description?: string;
+  errorMessage?: string;
+  containerClassName?: string;
+}
+
+export const InputWithLabel = React.forwardRef<TextInput, InputWithLabelProps>(
+  ({ label, description, errorMessage, containerClassName, error, ...props }, ref) => {
+    const hasError = error || !!errorMessage;
+
+    return (
+      <View className={cn('gap-1 w-full', containerClassName)}>
+        {label && (
+          <Text size="sm" weight="semibold" className="text-foreground">
+            {label}
+          </Text>
+        )}
+        <Input ref={ref} error={hasError} {...props} />
+        {description && !errorMessage && (
+          <Text size="xs" className="text-foreground-label">
+            {description}
+          </Text>
+        )}
+        {errorMessage && (
+          <Text size="xs" weight="semibold" className="text-danger-700">
+            {errorMessage}
+          </Text>
+        )}
+      </View>
+    );
+  },
+);

package/src/components/Label.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Text as RNText, type TextProps } from 'react-native';
+import { cn } from '../utils/cn';
+
+export interface LabelProps extends TextProps {
+  className?: string;
+}
+
+export function Label({ className, ...props }: LabelProps) {
+  return (
+    <RNText
+      className={cn('text-sm font-semibold text-foreground', className)}
+      {...props}
+    />
+  );
+}

package/src/components/ProgressBar.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from '../utils/cn';
+
+export interface ProgressBarProps extends ViewProps {
+  value: number;
+  max?: number;
+  className?: string;
+}
+
+export function ProgressBar({
+  value,
+  max = 100,
+  className,
+  ...props
+}: ProgressBarProps) {
+  const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+
+  return (
+    <View
+      className={cn('h-2 w-full rounded-full bg-background-tertiary', className)}
+      accessibilityRole="progressbar"
+      accessibilityValue={{ min: 0, max, now: value }}
+      {...props}
+    >
+      <View
+        className="h-full rounded-full bg-brand-500"
+        style={{ width: `${percentage}%` }}
+      />
+    </View>
+  );
+}

package/src/components/Separator.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from '../utils/cn';
+
+export interface SeparatorProps extends ViewProps {
+  orientation?: 'horizontal' | 'vertical';
+  className?: string;
+}
+
+export function Separator({
+  orientation = 'horizontal',
+  className,
+  ...props
+}: SeparatorProps) {
+  return (
+    <View
+      className={cn(
+        'bg-border',
+        orientation === 'horizontal' ? 'h-px w-full' : 'w-px h-full',
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/components/Skeleton.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, View, type ViewProps } from 'react-native';
+import { cn } from '../utils/cn';
+
+export interface SkeletonProps extends ViewProps {
+  className?: string;
+}
+
+export function Skeleton({ className, style, ...props }: SkeletonProps) {
+  const opacity = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 0.5,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+    animation.start();
+    return () => animation.stop();
+  }, [opacity]);
+
+  return (
+    <Animated.View
+      className={cn('rounded-md bg-background-tertiary', className)}
+      style={[{ opacity }, style]}
+      {...props}
+    />
+  );
+}

package/src/components/Switch.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {
+  Switch as RNSwitch,
+  type SwitchProps as RNSwitchProps,
+} from 'react-native';
+import { palettes } from '../theming/color-palettes';
+
+export interface SwitchProps extends RNSwitchProps {
+  checked?: boolean;
+  onCheckedChange?: (value: boolean) => void;
+}
+
+export function Switch({
+  checked,
+  onCheckedChange,
+  value,
+  onValueChange,
+  ...props
+}: SwitchProps) {
+  return (
+    <RNSwitch
+      value={checked ?? value}
+      onValueChange={onCheckedChange ?? onValueChange}
+      trackColor={{
+        false: palettes.neutral[300],
+        true: palettes.purple[500],
+      }}
+      thumbColor={palettes.white}
+      {...props}
+    />
+  );
+}

package/src/components/Text.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Text as RNText, type TextProps as RNTextProps } from 'react-native';
+import { cn } from '../utils/cn';
+
+export type TextVariant = 'body' | 'caption' | 'label' | 'heading';
+export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
+
+const variantClasses: Record<TextVariant, string> = {
+  body: 'text-base text-foreground',
+  caption: 'text-xs text-foreground-label',
+  label: 'text-sm text-foreground-label',
+  heading: 'text-lg font-bold text-foreground-heading',
+};
+
+const sizeClasses: Record<TextSize, string> = {
+  xs: 'text-xs',
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+  xl: 'text-xl',
+  '2xl': 'text-2xl',
+};
+
+const weightClasses: Record<TextWeight, string> = {
+  normal: 'font-normal',
+  medium: 'font-medium',
+  semibold: 'font-semibold',
+  bold: 'font-bold',
+};
+
+export interface TextProps extends RNTextProps {
+  variant?: TextVariant;
+  size?: TextSize;
+  weight?: TextWeight;
+  className?: string;
+}
+
+export function Text({
+  variant = 'body',
+  size,
+  weight,
+  className,
+  ...props
+}: TextProps) {
+  return (
+    <RNText
+      className={cn(
+        variantClasses[variant],
+        size && sizeClasses[size],
+        weight && weightClasses[weight],
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/index.ts

@@ -0,0 +1,52 @@
+// Components
+export { Text } from './components/Text';
+export type { TextProps, TextVariant, TextSize, TextWeight } from './components/Text';
+
+export { Badge } from './components/Badge';
+export type { BadgeProps, BadgeVariant } from './components/Badge';
+
+export { Button } from './components/Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './components/Button';
+
+export { Input, InputWithExtras, InputWithLabel } from './components/Input';
+export type { InputProps, InputWithExtrasProps, InputWithLabelProps, InputVariant, InputGirth } from './components/Input';
+
+export { Card } from './components/Card';
+export type { CardProps, CardVariant } from './components/Card';
+
+export { Banner } from './components/Banner';
+export type { BannerProps, BannerVariant } from './components/Banner';
+
+export { Separator } from './components/Separator';
+export type { SeparatorProps } from './components/Separator';
+
+export { Skeleton } from './components/Skeleton';
+export type { SkeletonProps } from './components/Skeleton';
+
+export { ProgressBar } from './components/ProgressBar';
+export type { ProgressBarProps } from './components/ProgressBar';
+
+export { Chip } from './components/Chip';
+export type { ChipProps } from './components/Chip';
+
+export { EmptyState } from './components/EmptyState';
+export type { EmptyStateProps } from './components/EmptyState';
+
+export { Avatar } from './components/Avatar';
+export type { AvatarProps, AvatarSize } from './components/Avatar';
+
+export { Switch } from './components/Switch';
+export type { SwitchProps } from './components/Switch';
+
+export { Checkbox } from './components/Checkbox';
+export type { CheckboxProps } from './components/Checkbox';
+
+export { Label } from './components/Label';
+export type { LabelProps } from './components/Label';
+
+// Utilities
+export { cn } from './utils/cn';
+
+// Theming
+export { palettes } from './theming/color-palettes';
+export type { SprinklesTheme, SprinklesColorPalette, Tone } from './theming/types';