@tallyui/components 1.0.0 → 3.0.0-next.0

package/src/ui/hstack/index.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from '@tallyui/theme';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const hstackVariants = cva('flex-row items-center', {
+  variants: {
+    space: {
+      none: 'gap-0',
+      xs: 'gap-1',
+      sm: 'gap-2',
+      md: 'gap-3',
+      lg: 'gap-4',
+      xl: 'gap-6',
+    },
+    reversed: {
+      true: 'flex-row-reverse',
+    },
+  },
+  defaultVariants: {
+    space: 'md',
+  },
+});
+
+type HStackProps = ViewProps & VariantProps<typeof hstackVariants>;
+
+const HStack = React.forwardRef<View, HStackProps>(function HStack(
+  { className, space, reversed, ...props },
+  ref
+) {
+  return (
+    <View
+      ref={ref}
+      className={cn(hstackVariants({ space, reversed }), className)}
+      {...props}
+    />
+  );
+});
+
+HStack.displayName = 'HStack';
+
+export { HStack, hstackVariants };
+export type { HStackProps };

package/src/ui/icon/index.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const iconVariants = cva('items-center justify-center', {
+  variants: {
+    size: {
+      xs: 'h-3 w-3',
+      sm: 'h-4 w-4',
+      md: 'h-5 w-5',
+      lg: 'h-6 w-6',
+      xl: 'h-8 w-8',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+type IconProps = ViewProps & VariantProps<typeof iconVariants>;
+
+const Icon = React.forwardRef<View, IconProps>(function Icon(
+  { className, size, children, ...props },
+  ref
+) {
+  const textClass = React.useContext(TextClassContext);
+
+  return (
+    <View
+      ref={ref}
+      className={cn(iconVariants({ size }), textClass, className)}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+});
+
+Icon.displayName = 'Icon';
+
+export { Icon, iconVariants };
+export type { IconProps };

package/src/ui/icon/search-icon.tsx

@@ -0,0 +1,9 @@
+import { Circle, Line } from 'react-native-svg';
+import { createSvgIcon } from './svg-icon';
+
+export const SearchIcon = createSvgIcon('SearchIcon', () => (
+  <>
+    <Circle cx={11} cy={11} r={7} />
+    <Line x1={16.5} y1={16.5} x2={21} y2={21} />
+  </>
+));

package/src/ui/icon/svg-icon.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import Svg, { type SvgProps } from 'react-native-svg';
+
+export type SvgIconProps = {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+  accessibilityLabel?: string;
+} & Omit<SvgProps, 'width' | 'height' | 'color'>;
+
+export function createSvgIcon(name: string, render: (props: { strokeWidth: number }) => React.ReactNode) {
+  function SvgIcon({ size = 16, color, strokeWidth = 2, accessibilityLabel, ...props }: SvgIconProps) {
+    return (
+      <Svg
+        {...props}
+        viewBox="0 0 24 24"
+        width={size}
+        height={size}
+        fill="none"
+        stroke={color ?? 'currentColor'}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        color={color}
+        aria-hidden={accessibilityLabel === undefined}
+        role={accessibilityLabel === undefined ? undefined : 'img'}
+        aria-label={accessibilityLabel}
+      >
+        {render({ strokeWidth })}
+      </Svg>
+    );
+  }
+
+  SvgIcon.displayName = name;
+  return SvgIcon;
+}

package/src/ui/icon-button/index.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { Slot } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const iconButtonVariants = cva(
+  'inline-flex items-center justify-center rounded-md web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring',
+  {
+    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',
+      },
+      size: {
+        sm: 'h-8 w-8',
+        md: 'h-10 w-10',
+        lg: 'h-12 w-12',
+      },
+    },
+    defaultVariants: {
+      variant: 'ghost',
+      size: 'md',
+    },
+  }
+);
+
+type IconButtonProps = PressableProps & VariantProps<typeof iconButtonVariants> & {
+  asChild?: boolean;
+};
+
+const IconButton = React.forwardRef<React.ComponentRef<typeof Pressable>, IconButtonProps>(
+  function IconButton({ className, variant, size, asChild = false, disabled, ...props }, ref) {
+    const Component = asChild ? Slot : Pressable;
+
+    return (
+      <Component
+        ref={ref}
+        role="button"
+        disabled={disabled}
+        className={cn(
+          iconButtonVariants({ variant, size }),
+          disabled && 'opacity-50 web:pointer-events-none',
+          className,
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+IconButton.displayName = 'IconButton';
+
+export { IconButton, iconButtonVariants };
+export type { IconButtonProps };

package/src/ui/index.ts

@@ -0,0 +1,99 @@
+// Core
+export { Text, TextClassContext, textVariants, type TextProps } from './text';
+export { HStack, hstackVariants, type HStackProps } from './hstack';
+export { VStack, vstackVariants, type VStackProps } from './vstack';
+
+// Visual
+export { Icon, iconVariants, type IconProps } from './icon';
+export { createSvgIcon, type SvgIconProps } from './icon/svg-icon';
+export { SearchIcon } from './icon/search-icon';
+export { Loader, loaderVariants, type LoaderProps } from './loader';
+export { Badge, badgeVariants, badgeTextVariants, type BadgeProps } from './badge';
+export { Avatar, avatarVariants, type AvatarProps } from './avatar';
+
+// Interactive
+export { Button, buttonVariants, buttonTextVariants, type ButtonProps } from './button';
+export { IconButton, iconButtonVariants, type IconButtonProps } from './icon-button';
+
+// Containers & Form
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './card';
+export { Separator, type SeparatorProps } from './separator';
+export { Label, type LabelProps } from './label';
+export { Input, InputRoot, InputField, InputSlot, useInputContext, type InputRootProps } from './input';
+export { Textarea, type TextareaProps } from './textarea';
+
+// Tabs
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
+
+// Dialog
+export {
+  Dialog, DialogTrigger, DialogPortal, DialogOverlay, DialogContent,
+  DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose,
+} from './dialog';
+
+// Alert Dialog
+export {
+  AlertDialog, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay,
+  AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle,
+  AlertDialogDescription, AlertDialogAction, AlertDialogCancel,
+} from './alert-dialog';
+
+// Select
+export {
+  Select, SelectGroup, SelectValue, SelectTrigger, SelectContent,
+  SelectLabel, SelectItem, SelectSeparator,
+} from './select';
+
+// Combobox
+export {
+  Combobox, ComboboxTrigger, ComboboxInput, ComboboxContent,
+  ComboboxItem, ComboboxEmpty,
+} from './combobox';
+
+// Dropdown Menu
+export {
+  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem,
+  DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel,
+  DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuPortal,
+  DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from './dropdown-menu';
+
+// Context Menu
+export {
+  ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem,
+  ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel,
+  ContextMenuSeparator, ContextMenuGroup, ContextMenuPortal,
+  ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+} from './context-menu';
+
+// Popover
+export { Popover, PopoverTrigger, PopoverContent } from './popover';
+
+// Tooltip
+export { Tooltip, TooltipTrigger, TooltipContent } from './tooltip';
+
+// Hover Card
+export { HoverCard, HoverCardTrigger, HoverCardContent } from './hover-card';
+
+// Accordion
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './accordion';
+
+// Collapsible
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './collapsible';
+
+// Form Controls
+export { Checkbox } from './checkbox';
+export { Switch } from './switch';
+export { RadioGroup, RadioGroupItem } from './radio-group';
+export { Toggle, toggleVariants, toggleTextVariants, type ToggleProps } from './toggle';
+export { ToggleGroup, ToggleGroupItem, type ToggleGroupProps, type ToggleGroupItemProps } from './toggle-group';
+export { Progress, type ProgressProps } from './progress';
+export { Slider, type SliderProps } from './slider';
+
+// Toast
+export { Toast, ToastTitle, ToastDescription, ToastClose, toastVariants, type ToastProps } from './toast';
+
+// Table
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell } from './table';

package/src/ui/input/index.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { TextInput, View, type TextInputProps, type ViewProps } from 'react-native';
+import { cn } from '@tallyui/theme';
+
+interface InputContextType {
+  focused: boolean;
+  disabled: boolean;
+}
+
+const InputContext = React.createContext<InputContextType>({
+  focused: false,
+  disabled: false,
+});
+
+function useInputContext() {
+  return React.useContext(InputContext);
+}
+
+// Root container
+interface InputRootProps extends ViewProps {
+  disabled?: boolean;
+}
+
+const InputRoot = React.forwardRef<View, InputRootProps>(
+  function InputRoot({ className, disabled = false, children, ...props }, ref) {
+    const [focused, setFocused] = React.useState(false);
+
+    return (
+      <InputContext.Provider value={{ focused, disabled }}>
+        <View
+          ref={ref}
+          className={cn(
+            'flex h-10 flex-row items-center rounded-md border border-input bg-background px-3',
+            focused && 'ring-2 ring-ring ring-offset-2',
+            disabled && 'opacity-50',
+            className,
+          )}
+          {...props}
+        >
+          {React.Children.map(children, (child) => {
+            if (React.isValidElement(child) && child.type === InputField) {
+              return React.cloneElement(child as React.ReactElement<any>, {
+                onFocus: (e: any) => {
+                  setFocused(true);
+                  (child.props as any).onFocus?.(e);
+                },
+                onBlur: (e: any) => {
+                  setFocused(false);
+                  (child.props as any).onBlur?.(e);
+                },
+              });
+            }
+            return child;
+          })}
+        </View>
+      </InputContext.Provider>
+    );
+  }
+);
+InputRoot.displayName = 'InputRoot';
+
+// Left/Right slots
+const InputSlot = React.forwardRef<View, ViewProps>(
+  function InputSlot({ className, ...props }, ref) {
+    return (
+      <View ref={ref} className={cn('justify-center', className)} {...props} />
+    );
+  }
+);
+InputSlot.displayName = 'InputSlot';
+
+// The actual text input
+const InputField = React.forwardRef<TextInput, TextInputProps>(
+  function InputField({ className, ...props }, ref) {
+    const { disabled } = useInputContext();
+
+    return (
+      <TextInput
+        ref={ref}
+        editable={!disabled}
+        className={cn(
+          'flex-1 text-sm text-foreground web:outline-none placeholder:text-muted-foreground',
+          className,
+        )}
+        {...props}
+      />
+    );
+  }
+);
+InputField.displayName = 'InputField';
+
+// Convenience compound component
+const Input = Object.assign(InputRoot, {
+  Left: InputSlot,
+  Field: InputField,
+  Right: InputSlot,
+});
+
+export { Input, InputRoot, InputField, InputSlot, useInputContext };
+export type { InputRootProps };

package/src/ui/label/index.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+import { Label as LabelPrimitive } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;
+
+const Label = React.forwardRef<React.ComponentRef<typeof Text>, LabelProps>(
+  function Label({ className, ...props }, ref) {
+    return (
+      <LabelPrimitive.Root
+        ref={ref}
+        className={cn(
+          'text-sm font-medium leading-none text-foreground web:peer-disabled:cursor-not-allowed web:peer-disabled:opacity-70',
+          className,
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Label.displayName = 'Label';
+
+export { Label };
+export type { LabelProps };

package/src/ui/loader/index.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const loaderVariants = cva('animate-spin', {
+  variants: {
+    size: {
+      sm: 'h-4 w-4',
+      md: 'h-5 w-5',
+      lg: 'h-8 w-8',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+type LoaderProps = Omit<ViewProps, 'children'> & VariantProps<typeof loaderVariants>;
+
+function Loader({ className, size, ...props }: LoaderProps) {
+  const textClass = React.useContext(TextClassContext);
+
+  return (
+    <View
+      className={cn(loaderVariants({ size }), textClass, className)}
+      role="progressbar"
+      {...props}
+    >
+      <View className="h-full w-full rounded-full border-2 border-current border-t-transparent" />
+    </View>
+  );
+}
+
+export { Loader, loaderVariants };
+export type { LoaderProps };

package/src/ui/popover/index.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Popover as PopoverPrimitive, TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ComponentRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(function PopoverContent({ className, align = 'center', sideOffset = 4, ...props }, ref) {
+  return (
+    <PopoverPrimitive.Portal>
+      <TextClassContext.Provider value="text-popover-foreground">
+        <PopoverPrimitive.Content
+          ref={ref}
+          align={align}
+          sideOffset={sideOffset}
+          className={cn(
+            'z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none',
+            className,
+          )}
+          {...props}
+        />
+      </TextClassContext.Provider>
+    </PopoverPrimitive.Portal>
+  );
+});
+PopoverContent.displayName = 'PopoverContent';
+
+export { Popover, PopoverTrigger, PopoverContent };

package/src/ui/progress/index.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Progress as ProgressPrimitive } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+type ProgressProps = React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>;
+
+const Progress = React.forwardRef<
+  React.ComponentRef<typeof ProgressPrimitive.Root>,
+  ProgressProps
+>(function Progress({ className, value, ...props }, ref) {
+  return (
+    <ProgressPrimitive.Root
+      ref={ref}
+      className={cn('relative h-4 w-full overflow-hidden rounded-full bg-secondary', className)}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        className="h-full w-full flex-1 rounded-full bg-primary web:transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  );
+});
+Progress.displayName = 'Progress';
+
+export { Progress };
+export type { ProgressProps };

package/src/ui/radio-group/index.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { RadioGroup as RadioGroupPrimitive } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const RadioGroup = React.forwardRef<
+  React.ComponentRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(function RadioGroup({ className, ...props }, ref) {
+  return (
+    <RadioGroupPrimitive.Root ref={ref} className={cn('grid gap-2', className)} {...props} />
+  );
+});
+RadioGroup.displayName = 'RadioGroup';
+
+const RadioGroupItem = React.forwardRef<
+  React.ComponentRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(function RadioGroupItem({ className, ...props }, ref) {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary web:ring-offset-background web:focus:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+        props.disabled && 'web:cursor-not-allowed opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <View className="h-2.5 w-2.5 rounded-full bg-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = 'RadioGroupItem';
+
+export { RadioGroup, RadioGroupItem };

package/src/ui/select/index.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Select as SelectPrimitive } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(function SelectTrigger({ className, children, ...props }, ref) {
+  return (
+    <SelectPrimitive.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 text-foreground web:ring-offset-background web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </SelectPrimitive.Trigger>
+  );
+});
+SelectTrigger.displayName = 'SelectTrigger';
+
+const SelectContent = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(function SelectContent({ className, children, ...props }, ref) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
+        className={cn(
+          'relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+});
+SelectContent.displayName = 'SelectContent';
+
+const SelectLabel = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(function SelectLabel({ className, ...props }, ref) {
+  return (
+    <SelectPrimitive.Label ref={ref} className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)} {...props} />
+  );
+});
+SelectLabel.displayName = 'SelectLabel';
+
+const SelectItem = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(function SelectItem({ className, ...props }, ref) {
+  return (
+    <SelectPrimitive.Item
+      ref={ref}
+      className={cn(
+        'relative flex w-full cursor-default select-none flex-row items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none web:focus:bg-accent web:focus:text-accent-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SelectItem.displayName = 'SelectItem';
+
+const SelectSeparator = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(function SelectSeparator({ className, ...props }, ref) {
+  return (
+    <SelectPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
+  );
+});
+SelectSeparator.displayName = 'SelectSeparator';
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+};

package/src/ui/separator/index.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Separator as SeparatorPrimitive } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+type SeparatorProps = React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>;
+
+const Separator = React.forwardRef<React.ComponentRef<typeof View>, SeparatorProps>(
+  function Separator({ className, orientation = 'horizontal', decorative = true, ...props }, ref) {
+    return (
+      <SeparatorPrimitive.Root
+        ref={ref}
+        decorative={decorative}
+        orientation={orientation}
+        className={cn(
+          'shrink-0 bg-border',
+          orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+          className,
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Separator.displayName = 'Separator';
+
+export { Separator };
+export type { SeparatorProps };