@tallyui/components 1.0.0 → 3.0.0-next.0

package/src/ui/slider/index.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Slider as SliderPrimitive } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+type SliderProps = React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>;
+
+const Slider = React.forwardRef<
+  React.ComponentRef<typeof SliderPrimitive.Root>,
+  SliderProps
+>(function Slider({ className, ...props }, ref) {
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      className={cn('relative flex w-full touch-none select-none items-center', className)}
+      {...props}
+    >
+      <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+        <SliderPrimitive.Range className="absolute h-full bg-primary" />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background 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" />
+    </SliderPrimitive.Root>
+  );
+});
+Slider.displayName = 'Slider';
+
+export { Slider };
+export type { SliderProps };

package/src/ui/switch/index.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Switch as SwitchPrimitive } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const Switch = React.forwardRef<
+  React.ComponentRef<typeof SwitchPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(function Switch({ className, ...props }, ref) {
+  return (
+    <SwitchPrimitive.Root
+      ref={ref}
+      className={cn(
+        'web:peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 web:focus-visible:ring-offset-background',
+        props.checked ? 'bg-primary' : 'bg-input',
+        props.disabled && 'web:cursor-not-allowed opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn(
+          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 web:transition-transform',
+          props.checked ? 'translate-x-5' : 'translate-x-0',
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+});
+Switch.displayName = 'Switch';
+
+export { Switch };

package/src/ui/table/index.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { View, Text, Pressable, type ViewProps, type TextProps } from 'react-native';
+import { TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const Table = React.forwardRef<View, ViewProps>(function Table({ className, ...props }, ref) {
+  return <View ref={ref} role="table" className={cn('w-full', className)} {...props} />;
+});
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<View, ViewProps>(function TableHeader({ className, ...props }, ref) {
+  return <View ref={ref} role="rowgroup" className={cn('border-b border-border', className)} {...props} />;
+});
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<View, ViewProps>(function TableBody({ className, ...props }, ref) {
+  return <View ref={ref} role="rowgroup" className={cn('[&>*:last-child]:border-0', className)} {...props} />;
+});
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<View, ViewProps>(function TableFooter({ className, ...props }, ref) {
+  return <View ref={ref} role="rowgroup" className={cn('border-t border-border bg-muted/50 font-medium', className)} {...props} />;
+});
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<View, ViewProps>(function TableRow({ className, ...props }, ref) {
+  return (
+    <View
+      ref={ref}
+      role="row"
+      className={cn('flex flex-row border-b border-border web:transition-colors web:hover:bg-muted/50', className)}
+      {...props}
+    />
+  );
+});
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<View, ViewProps>(function TableHead({ className, ...props }, ref) {
+  return (
+    <TextClassContext.Provider value="text-muted-foreground text-xs uppercase text-left font-medium">
+      <View
+        ref={ref}
+        role="columnheader"
+        className={cn('flex-1 px-4 py-3 text-left font-medium text-muted-foreground', className)}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+});
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<View, ViewProps>(function TableCell({ className, ...props }, ref) {
+  return (
+    <View ref={ref} role="cell" className={cn('flex-1 px-4 py-4', className)} {...props} />
+  );
+});
+TableCell.displayName = 'TableCell';
+
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell };

package/src/ui/tabs/index.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { Tabs as TabsPrimitive, TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const Tabs = TabsPrimitive.Root;
+
+function TabsList({ className, ...props }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      className={cn('inline-flex h-10 items-center justify-center rounded-md bg-muted p-1', className)}
+      {...props}
+    />
+  );
+}
+
+const TabsTrigger = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(function TabsTrigger({ className, ...props }, ref) {
+  const { value } = TabsPrimitive.useRootContext();
+  const isActive = props.value === value;
+
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        'text-sm font-medium',
+        isActive ? 'text-foreground' : 'text-muted-foreground'
+      )}
+    >
+      <TabsPrimitive.Trigger
+        ref={ref}
+        className={cn(
+          'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium web:ring-offset-background web:transition-all web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+          isActive && 'bg-background shadow-sm',
+          className,
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+});
+TabsTrigger.displayName = 'TabsTrigger';
+
+function TabsContent({ className, ...props }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      className={cn('mt-2 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', className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/ui/text/index.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Text as RNText } from 'react-native';
+import { Slot, TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const textVariants = cva('text-foreground web:select-text text-base', {
+  variants: {
+    variant: {
+      default: '',
+      link: 'web:hover:underline web:focus:underline web:hover:cursor-pointer group-active:underline',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+type TextProps = React.ComponentPropsWithoutRef<typeof RNText> &
+  VariantProps<typeof textVariants> & {
+    asChild?: boolean;
+  };
+
+function Text({ className, variant, asChild = false, children, ...props }: TextProps) {
+  const textClass = React.useContext(TextClassContext);
+  const Component = asChild ? Slot : RNText;
+
+  return (
+    <Component className={cn(textVariants({ variant }), textClass, className)} {...props}>
+      {children}
+    </Component>
+  );
+}
+
+export { Text, TextClassContext, textVariants };
+export type { TextProps };

package/src/ui/textarea/index.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { TextInput, type TextInputProps } from 'react-native';
+import { cn } from '@tallyui/theme';
+
+type TextareaProps = TextInputProps & {
+  className?: string;
+};
+
+const Textarea = React.forwardRef<TextInput, TextareaProps>(
+  function Textarea({ className, ...props }, ref) {
+    return (
+      <TextInput
+        ref={ref}
+        multiline
+        textAlignVertical="top"
+        className={cn(
+          'min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground web:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+          className,
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
+export type { TextareaProps };

package/src/ui/toast/index.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { Toast as ToastPrimitive } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full flex-row items-center justify-between gap-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg',
+  {
+    variants: {
+      variant: {
+        default: 'border-border bg-background text-foreground',
+        destructive: 'border-destructive bg-destructive text-destructive-foreground',
+        success: 'border-success bg-success text-success-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof View> & VariantProps<typeof toastVariants>;
+
+function Toast({ className, variant, ...props }: ToastProps) {
+  return <View className={cn(toastVariants({ variant }), className)} {...props} />;
+}
+
+function ToastTitle({ className, ...props }: React.ComponentPropsWithoutRef<typeof Text>) {
+  return <Text className={cn('text-sm font-semibold', className)} {...props} />;
+}
+
+function ToastDescription({ className, ...props }: React.ComponentPropsWithoutRef<typeof Text>) {
+  return <Text className={cn('text-sm opacity-90', className)} {...props} />;
+}
+
+function ToastClose({ className, ...props }: React.ComponentPropsWithoutRef<typeof Pressable>) {
+  return (
+    <Pressable
+      className={cn(
+        'absolute right-2 top-2 rounded-md p-1 opacity-0 web:transition-opacity web:hover:opacity-100 web:focus:opacity-100 web:group-hover:opacity-100',
+        className,
+      )}
+      {...props}
+    >
+      <Text className="text-sm">✕</Text>
+    </Pressable>
+  );
+}
+
+export { Toast, ToastTitle, ToastDescription, ToastClose, toastVariants };
+export type { ToastProps };

package/src/ui/toggle/index.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { Toggle as TogglePrimitive, TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium web:ring-offset-background web:transition-colors web:hover:bg-muted web:hover:text-muted-foreground 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-transparent',
+        outline: 'border border-input bg-transparent web:hover:bg-accent web:hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-10 px-3',
+        sm: 'h-9 px-2.5',
+        lg: 'h-11 px-5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+const toggleTextVariants = cva('text-sm font-medium', {
+  variants: {
+    variant: {
+      default: '',
+      outline: '',
+    },
+    size: {
+      default: '',
+      sm: '',
+      lg: '',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default',
+  },
+});
+
+type ToggleProps = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>;
+
+const Toggle = React.forwardRef<
+  React.ComponentRef<typeof TogglePrimitive.Root>,
+  ToggleProps
+>(function Toggle({ className, variant, size, ...props }, ref) {
+  return (
+    <TextClassContext.Provider value={toggleTextVariants({ variant, size })}>
+      <TogglePrimitive.Root
+        ref={ref}
+        className={cn(
+          toggleVariants({ variant, size }),
+          props.pressed && 'bg-accent text-accent-foreground',
+          className,
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+});
+Toggle.displayName = 'Toggle';
+
+export { Toggle, toggleVariants, toggleTextVariants };
+export type { ToggleProps };

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

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { ToggleGroup as ToggleGroupPrimitive, TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+import { type VariantProps } from 'class-variance-authority';
+import { toggleVariants, toggleTextVariants } from '../toggle';
+
+type ToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>;
+
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+  size: 'default',
+  variant: 'default',
+});
+
+const ToggleGroup = React.forwardRef<
+  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,
+  ToggleGroupProps
+>(function ToggleGroup({ className, variant, size, children, ...props }, ref) {
+  return (
+    <ToggleGroupPrimitive.Root
+      ref={ref}
+      className={cn('flex flex-row items-center justify-center gap-1', className)}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  );
+});
+ToggleGroup.displayName = 'ToggleGroup';
+
+type ToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>;
+
+const ToggleGroupItem = React.forwardRef<
+  React.ComponentRef<typeof ToggleGroupPrimitive.Item>,
+  ToggleGroupItemProps
+>(function ToggleGroupItem({ className, variant, size, ...props }, ref) {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <TextClassContext.Provider
+      value={toggleTextVariants({
+        variant: variant || context.variant,
+        size: size || context.size,
+      })}
+    >
+      <ToggleGroupPrimitive.Item
+        ref={ref}
+        className={cn(
+          toggleVariants({
+            variant: variant || context.variant,
+            size: size || context.size,
+          }),
+          className,
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+});
+ToggleGroupItem.displayName = 'ToggleGroupItem';
+
+export { ToggleGroup, ToggleGroupItem };
+export type { ToggleGroupProps, ToggleGroupItemProps };

package/src/ui/tooltip/index.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Tooltip as TooltipPrimitive, TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ComponentRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(function TooltipContent({ className, sideOffset = 4, ...props }, ref) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TextClassContext.Provider value="text-sm text-popover-foreground">
+        <TooltipPrimitive.Content
+          ref={ref}
+          sideOffset={sideOffset}
+          className={cn(
+            'z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md',
+            className,
+          )}
+          {...props}
+        />
+      </TextClassContext.Provider>
+    </TooltipPrimitive.Portal>
+  );
+});
+TooltipContent.displayName = 'TooltipContent';
+
+export { Tooltip, TooltipTrigger, TooltipContent };

package/src/ui/vstack/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 vstackVariants = cva('flex-col', {
+  variants: {
+    space: {
+      none: 'gap-0',
+      xs: 'gap-1',
+      sm: 'gap-2',
+      md: 'gap-3',
+      lg: 'gap-4',
+      xl: 'gap-6',
+    },
+    reversed: {
+      true: 'flex-col-reverse',
+    },
+  },
+  defaultVariants: {
+    space: 'md',
+  },
+});
+
+type VStackProps = ViewProps & VariantProps<typeof vstackVariants>;
+
+const VStack = React.forwardRef<View, VStackProps>(function VStack(
+  { className, space, reversed, ...props },
+  ref
+) {
+  return (
+    <View
+      ref={ref}
+      className={cn(vstackVariants({ space, reversed }), className)}
+      {...props}
+    />
+  );
+});
+
+VStack.displayName = 'VStack';
+
+export { VStack, vstackVariants };
+export type { VStackProps };

package/src/uniwind-env.d.ts

@@ -2,17 +2,25 @@
  * Type augmentations for React Native components to support className prop.
  * Uniwind provides these at runtime — this file ensures TypeScript accepts them.
  */
-export {};
+import 'react-native';
 
 declare module 'react-native' {
   interface ViewProps {
     className?: string;
+    // react-native-web turns each entry into a data-* DOM attribute (e.g. { print: 'hide' } → data-print="hide").
+    // TV6a's first use: the print-style hook (`dataSet={{ print: 'hide' }}`) that TV6b lifts.
+    dataSet?: { [key: string]: string | number };
   }
 
   interface TextProps {
     className?: string;
   }
 
+  interface TextInputProps {
+    // Uniwind reads an accent-* class for the placeholder colour.
+    placeholderTextColorClassName?: string;
+  }
+
   interface ImagePropsBase {
     className?: string;
   }

package/src/__tests__/cart-line.test.tsx

@@ -1,53 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { ConnectorProvider } from '@tallyui/core';
-import { CartLine } from '../cart/cart-line';
-import { createTestConnector, wooDoc, medusaDoc } from './helpers';
-
-describe('CartLine', () => {
-  it('renders product name and line total for WooCommerce', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <CartLine item={{ doc: wooDoc, quantity: 2 }} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('Espresso Machine Pro')).toBeDefined();
-    expect(screen.getByText('$1299.00 × 2')).toBeDefined();
-    expect(screen.getByText('$2598.00')).toBeDefined();
-  });
-
-  it('renders product name and line total for Medusa', () => {
-    const connector = createTestConnector('medusa');
-    render(
-      <ConnectorProvider connector={connector}>
-        <CartLine item={{ doc: medusaDoc, quantity: 1 }} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('Espresso Machine Pro')).toBeDefined();
-    expect(screen.getByText('$1299.00 × 1')).toBeDefined();
-    expect(screen.getByText('$1299.00')).toBeDefined();
-  });
-
-  it('renders custom currency symbol', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <CartLine item={{ doc: wooDoc, quantity: 1 }} currencySymbol="€" />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('€1299.00 × 1')).toBeDefined();
-    expect(screen.getByText('€1299.00')).toBeDefined();
-  });
-
-  it('handles missing price gracefully', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <CartLine item={{ doc: {}, quantity: 3 }} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('× 3')).toBeDefined();
-    expect(screen.getByText('—')).toBeDefined();
-  });
-});

package/src/__tests__/cart-panel.test.tsx

@@ -1,55 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { Text } from 'react-native';
-import { ConnectorProvider } from '@tallyui/core';
-import { CartPanel } from '../cart/cart-panel';
-import { CartLine } from '../cart/cart-line';
-import { createTestConnector, wooDoc } from './helpers';
-
-describe('CartPanel', () => {
-  const items = [
-    { doc: wooDoc, quantity: 2 },
-    { doc: { ...wooDoc, id: 2, name: 'Grinder', price: '199.99' }, quantity: 1 },
-  ];
-
-  it('renders cart line items', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <CartPanel items={items} renderItem={(item) => <CartLine item={item} />} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('Espresso Machine Pro')).toBeDefined();
-    expect(screen.getByText('Grinder')).toBeDefined();
-  });
-
-  it('renders header and footer slots', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <CartPanel
-          items={items}
-          renderItem={(item) => <CartLine item={item} />}
-          header={<Text>Customer: Jane</Text>}
-          footer={<Text>Total: $1399.97</Text>}
-        />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('Customer: Jane')).toBeDefined();
-    expect(screen.getByText('Total: $1399.97')).toBeDefined();
-  });
-
-  it('renders emptyState when no items', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <CartPanel
-          items={[]}
-          renderItem={() => null}
-          emptyState={<Text>Cart is empty</Text>}
-        />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('Cart is empty')).toBeDefined();
-  });
-});