@tallyui/components 1.0.0 → 2.0.0

package/src/settings/settings-row.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+export interface SettingsRowProps extends Omit<ViewProps, 'children'> {
+  label: string;
+  description?: string;
+  action?: ReactNode;
+  className?: string;
+}
+
+export function SettingsRow({ label, description, action, className, ...viewProps }: SettingsRowProps) {
+  return (
+    <View className={cn('flex-row items-center gap-3 px-4 py-3', className)} {...viewProps}>
+      <View className="flex-1 gap-0.5">
+        <Text className="text-sm font-medium text-foreground">{label}</Text>
+        {description && <Text className="text-xs text-muted-foreground">{description}</Text>}
+      </View>
+      {action && <View>{action}</View>}
+    </View>
+  );
+}

package/src/ui/accordion/index.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Accordion as AccordionPrimitive, TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ComponentRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(function AccordionItem({ className, ...props }, ref) {
+  return (
+    <AccordionPrimitive.Item ref={ref} className={cn('border-b border-border', className)} {...props} />
+  );
+});
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ComponentRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(function AccordionTrigger({ className, children, ...props }, ref) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <TextClassContext.Provider value="text-sm font-medium">
+        <AccordionPrimitive.Trigger
+          ref={ref}
+          className={cn(
+            'flex flex-1 flex-row items-center justify-between py-4 font-medium web:transition-all web:hover:underline',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </AccordionPrimitive.Trigger>
+      </TextClassContext.Provider>
+    </AccordionPrimitive.Header>
+  );
+});
+AccordionTrigger.displayName = 'AccordionTrigger';
+
+const AccordionContent = React.forwardRef<
+  React.ComponentRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(function AccordionContent({ className, children, ...props }, ref) {
+  return (
+    <TextClassContext.Provider value="text-sm">
+      <AccordionPrimitive.Content
+        ref={ref}
+        className={cn('overflow-hidden text-sm web:transition-all', className)}
+        {...props}
+      >
+        <View className="pb-4 pt-0">{children}</View>
+      </AccordionPrimitive.Content>
+    </TextClassContext.Provider>
+  );
+});
+AccordionContent.displayName = 'AccordionContent';
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/ui/alert-dialog/index.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { AlertDialog as AlertDialogPrimitive, TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(function AlertDialogOverlay({ className, ...props }, ref) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      ref={ref}
+      className={cn('fixed inset-0 z-50 bg-black/80', className)}
+      {...props}
+    />
+  );
+});
+AlertDialogOverlay.displayName = 'AlertDialogOverlay';
+
+const AlertDialogContent = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(function AlertDialogContent({ className, children, ...props }, ref) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          'fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border border-border bg-background p-6 shadow-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </AlertDialogPrimitive.Content>
+    </AlertDialogPortal>
+  );
+});
+AlertDialogContent.displayName = 'AlertDialogContent';
+
+function AlertDialogHeader({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) {
+  return <View className={cn('flex flex-col gap-2', className)} {...props} />;
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) {
+  return <View className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2', className)} {...props} />;
+}
+
+const AlertDialogTitle = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(function AlertDialogTitle({ className, ...props }, ref) {
+  return (
+    <TextClassContext.Provider value="text-lg font-semibold text-foreground">
+      <AlertDialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold text-foreground', className)} {...props} />
+    </TextClassContext.Provider>
+  );
+});
+AlertDialogTitle.displayName = 'AlertDialogTitle';
+
+const AlertDialogDescription = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(function AlertDialogDescription({ className, ...props }, ref) {
+  return (
+    <AlertDialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  );
+});
+AlertDialogDescription.displayName = 'AlertDialogDescription';
+
+const AlertDialogAction = AlertDialogPrimitive.Action;
+const AlertDialogCancel = AlertDialogPrimitive.Cancel;
+
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/ui/avatar/index.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Image, View, Text, type ViewProps } from 'react-native';
+import { cn } from '@tallyui/theme';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const avatarVariants = cva('relative overflow-hidden rounded-full', {
+  variants: {
+    size: {
+      sm: 'h-8 w-8',
+      md: 'h-10 w-10',
+      lg: 'h-12 w-12',
+      xl: 'h-16 w-16',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+type AvatarProps = ViewProps & VariantProps<typeof avatarVariants> & {
+  src?: string;
+  alt?: string;
+  fallback?: string;
+};
+
+function Avatar({ className, size, src, alt, fallback, ...props }: AvatarProps) {
+  const [hasError, setHasError] = React.useState(false);
+
+  return (
+    <View className={cn(avatarVariants({ size }), className)} {...props}>
+      {src && !hasError ? (
+        <Image
+          source={{ uri: src }}
+          accessibilityLabel={alt}
+          onError={() => setHasError(true)}
+          className="h-full w-full"
+        />
+      ) : (
+        <View className="flex h-full w-full items-center justify-center bg-muted">
+          <Text className="text-sm font-medium text-muted-foreground">
+            {fallback ?? alt?.charAt(0)?.toUpperCase() ?? '?'}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+export { Avatar, avatarVariants };
+export type { AvatarProps };

package/src/ui/badge/index.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+import { cn } from '@tallyui/theme';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary',
+        secondary: 'border-transparent bg-secondary',
+        destructive: 'border-transparent bg-destructive',
+        outline: 'border-border',
+        success: 'border-transparent bg-success',
+        warning: 'border-transparent bg-warning',
+        info: 'border-transparent bg-info',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const badgeTextVariants = cva('text-xs font-semibold', {
+  variants: {
+    variant: {
+      default: 'text-primary-foreground',
+      secondary: 'text-secondary-foreground',
+      destructive: 'text-destructive-foreground',
+      outline: 'text-foreground',
+      success: 'text-success-foreground',
+      warning: 'text-warning-foreground',
+      info: 'text-info-foreground',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+type BadgeProps = ViewProps & VariantProps<typeof badgeVariants> & {
+  label?: string;
+};
+
+function Badge({ className, variant, label, children, ...props }: BadgeProps) {
+  return (
+    <View className={cn(badgeVariants({ variant }), className)} {...props}>
+      {label ? (
+        <Text className={badgeTextVariants({ variant })}>{label}</Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+}
+
+export { Badge, badgeVariants, badgeTextVariants };
+export type { BadgeProps };

package/src/ui/button/index.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { TextClassContext, Slot } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const buttonVariants = cva(
+  'inline-flex flex-row items-center justify-center gap-2 rounded-md web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary active:opacity-90',
+        destructive: 'bg-destructive active:opacity-90',
+        outline: 'border border-input bg-background active:bg-accent',
+        secondary: 'bg-secondary active:opacity-80',
+        ghost: 'active:bg-accent',
+        link: 'web:underline-offset-4 web:hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+const buttonTextVariants = cva(
+  'web:whitespace-nowrap text-sm font-medium',
+  {
+    variants: {
+      variant: {
+        default: 'text-primary-foreground',
+        destructive: 'text-destructive-foreground',
+        outline: 'text-foreground',
+        secondary: 'text-secondary-foreground',
+        ghost: 'text-foreground',
+        link: 'text-primary',
+      },
+      size: {
+        default: '',
+        sm: '',
+        lg: 'text-base',
+        icon: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+type ButtonProps = PressableProps & VariantProps<typeof buttonVariants> & {
+  asChild?: boolean;
+};
+
+const Button = React.forwardRef<React.ComponentRef<typeof Pressable>, ButtonProps>(
+  function Button({ className, variant, size, asChild = false, disabled, ...props }, ref) {
+    const Component = asChild ? Slot : Pressable;
+
+    return (
+      <TextClassContext.Provider
+        value={buttonTextVariants({ variant, size })}
+      >
+        <Component
+          ref={ref}
+          role="button"
+          disabled={disabled}
+          className={cn(
+            buttonVariants({ variant, size }),
+            disabled && 'opacity-50 web:pointer-events-none',
+            className,
+          )}
+          {...props}
+        />
+      </TextClassContext.Provider>
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+export { Button, buttonVariants, buttonTextVariants };
+export type { ButtonProps };

package/src/ui/card/index.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Text, View, type TextProps, type ViewProps } from 'react-native';
+import { TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const Card = React.forwardRef<View, ViewProps>(function Card({ className, ...props }, ref) {
+  return (
+    <View
+      ref={ref}
+      className={cn('rounded-lg border border-border bg-card shadow-sm', className)}
+      {...props}
+    />
+  );
+});
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<View, ViewProps>(function CardHeader({ className, ...props }, ref) {
+  return (
+    <View ref={ref} className={cn('flex flex-col gap-1.5 p-6', className)} {...props} />
+  );
+});
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<Text, TextProps>(function CardTitle({ className, ...props }, ref) {
+  return (
+    <Text
+      ref={ref}
+      role="heading"
+      aria-level={3}
+      className={cn('text-2xl font-semibold leading-none text-card-foreground', className)}
+      {...props}
+    />
+  );
+});
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<Text, TextProps>(function CardDescription({ className, ...props }, ref) {
+  return (
+    <Text ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  );
+});
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<View, ViewProps>(function CardContent({ className, ...props }, ref) {
+  return (
+    <TextClassContext.Provider value="text-card-foreground">
+      <View ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+    </TextClassContext.Provider>
+  );
+});
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<View, ViewProps>(function CardFooter({ className, ...props }, ref) {
+  return (
+    <View ref={ref} className={cn('flex flex-row items-center p-6 pt-0', className)} {...props} />
+  );
+});
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

package/src/ui/checkbox/index.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { Checkbox as CheckboxPrimitive } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const Checkbox = React.forwardRef<
+  React.ComponentRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(function Checkbox({ className, ...props }, ref) {
+  return (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      className={cn(
+        'h-4 w-4 shrink-0 rounded-sm border border-primary web:ring-offset-background web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+        props.checked && 'bg-primary',
+        props.disabled && 'web:cursor-not-allowed opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+        <Text className="text-xs text-primary-foreground">{'\u2713'}</Text>
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+});
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };

package/src/ui/collapsible/index.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Collapsible as CollapsiblePrimitive, TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+
+const CollapsibleContent = React.forwardRef<
+  React.ComponentRef<typeof CollapsiblePrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>
+>(function CollapsibleContent({ className, ...props }, ref) {
+  return (
+    <TextClassContext.Provider value="text-sm">
+      <CollapsiblePrimitive.Content
+        ref={ref}
+        className={cn('overflow-hidden web:transition-all', className)}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+});
+CollapsibleContent.displayName = 'CollapsibleContent';
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/src/ui/combobox/index.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { View, TextInput, Pressable, Text, ScrollView } from 'react-native';
+import { Combobox as ComboboxPrimitive, TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const Combobox = ComboboxPrimitive.Root;
+
+const ComboboxTrigger = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Trigger>
+>(function ComboboxTrigger({ className, children, ...props }, ref) {
+  return (
+    <ComboboxPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex h-10 w-full flex-row items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm web:ring-offset-background web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ComboboxPrimitive.Trigger>
+  );
+});
+ComboboxTrigger.displayName = 'ComboboxTrigger';
+
+const ComboboxInput = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Input>
+>(function ComboboxInput({ className, ...props }, ref) {
+  return (
+    <ComboboxPrimitive.Input
+      ref={ref}
+      className={cn(
+        'flex-1 text-sm text-foreground web:outline-none placeholder:text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+ComboboxInput.displayName = 'ComboboxInput';
+
+const ComboboxContent = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Content>
+>(function ComboboxContent({ className, children, ...props }, ref) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <TextClassContext.Provider value="text-popover-foreground">
+        <ComboboxPrimitive.Content
+          ref={ref}
+          className={cn(
+            'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </ComboboxPrimitive.Content>
+      </TextClassContext.Provider>
+    </ComboboxPrimitive.Portal>
+  );
+});
+ComboboxContent.displayName = 'ComboboxContent';
+
+const ComboboxItem = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Item>
+>(function ComboboxItem({ className, ...props }, ref) {
+  return (
+    <ComboboxPrimitive.Item
+      ref={ref}
+      className={cn(
+        'relative flex cursor-default select-none flex-row items-center rounded-sm px-2 py-1.5 text-sm outline-none web:focus:bg-accent web:focus:text-accent-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+ComboboxItem.displayName = 'ComboboxItem';
+
+const ComboboxEmpty = React.forwardRef<
+  View,
+  React.ComponentPropsWithoutRef<typeof View>
+>(function ComboboxEmpty({ className, ...props }, ref) {
+  return (
+    <View ref={ref} className={cn('py-6 text-center', className)} {...props}>
+      <Text className="text-sm text-muted-foreground">No results found.</Text>
+    </View>
+  );
+});
+ComboboxEmpty.displayName = 'ComboboxEmpty';
+
+export {
+  Combobox, ComboboxTrigger, ComboboxInput, ComboboxContent, ComboboxItem, ComboboxEmpty,
+};