@tallyui/components 1.0.0 → 2.0.0

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();
-  });
-});

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

@@ -1,60 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { ConnectorProvider } from '@tallyui/core';
-import { CartTotal } from '../cart/cart-total';
-import { createTestConnector, wooDoc } from './helpers';
-
-const cartItems = [
-  { doc: wooDoc, quantity: 2 },
-  { doc: { ...wooDoc, name: 'Milk Frother', price: '49.99' }, quantity: 1 },
-];
-
-describe('CartTotal', () => {
-  it('renders subtotal and total labels', () => {
-    const connector = createTestConnector('woo');
-    const { container } = render(
-      <ConnectorProvider connector={connector}>
-        <CartTotal items={cartItems} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('Subtotal')).toBeDefined();
-    expect(screen.getByText('Total')).toBeDefined();
-    // subtotal and total both $2647.99 (no tax), so 2 elements
-    expect(screen.getAllByText('$2647.99')).toHaveLength(2);
-  });
-
-  it('renders tax when taxRate is provided', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <CartTotal items={cartItems} taxRate={0.1} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('Tax')).toBeDefined();
-    expect(screen.getByText('$264.80')).toBeDefined();
-    expect(screen.getByText('$2912.79')).toBeDefined();
-  });
-
-  it('uses custom currency symbol and tax label', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <CartTotal items={cartItems} currencySymbol="€" taxRate={0.2} taxLabel="VAT" />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('VAT')).toBeDefined();
-    // Multiple euro amounts present — just check at least one exists
-    expect(screen.getAllByText(/€/).length).toBeGreaterThan(0);
-  });
-
-  it('handles empty cart', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <CartTotal items={[]} />
-      </ConnectorProvider>
-    );
-    // subtotal and total both $0.00
-    expect(screen.getAllByText('$0.00')).toHaveLength(2);
-  });
-});

package/src/__tests__/customer-card.test.tsx

@@ -1,47 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { ConnectorProvider } from '@tallyui/core';
-import { CustomerCard } from '../customer/customer-card';
-import { createTestConnector, wooCustomerDoc } from './helpers';
-
-describe('CustomerCard', () => {
-  it('renders the customer name', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <CustomerCard doc={wooCustomerDoc} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('Jane Smith')).toBeDefined();
-  });
-
-  it('renders the customer email', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <CustomerCard doc={wooCustomerDoc} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('jane@example.com')).toBeDefined();
-  });
-
-  it('renders the address summary', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <CustomerCard doc={wooCustomerDoc} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('123 Main St, Springfield, IL')).toBeDefined();
-  });
-
-  it('renders gracefully with empty doc', () => {
-    const connector = createTestConnector('woo');
-    const { container } = render(
-      <ConnectorProvider connector={connector}>
-        <CustomerCard doc={{}} />
-      </ConnectorProvider>
-    );
-    expect(container).toBeDefined();
-  });
-});

package/src/__tests__/customer-select.test.tsx

@@ -1,33 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { ConnectorProvider } from '@tallyui/core';
-import { CustomerSelect } from '../customer/customer-select';
-import { createTestConnector, wooCustomerDoc } from './helpers';
-
-describe('CustomerSelect', () => {
-  const customers = [
-    wooCustomerDoc,
-    { ...wooCustomerDoc, id: 2, first_name: 'Bob', last_name: 'Jones', email: 'bob@example.com' },
-  ];
-
-  it('renders customer results', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <CustomerSelect customers={customers} onSelect={() => {}} onSearch={() => {}} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('Jane Smith')).toBeDefined();
-    expect(screen.getByText('Bob Jones')).toBeDefined();
-  });
-
-  it('shows selected customer name', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <CustomerSelect customers={[]} selected={wooCustomerDoc} onSelect={() => {}} onSearch={() => {}} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('Jane Smith')).toBeDefined();
-  });
-});

package/src/__tests__/filter-chip.test.tsx

@@ -1,40 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { FilterChip, FilterChipGroup } from '../input/filter-chip';
-
-describe('FilterChip', () => {
-  it('renders the label', () => {
-    render(<FilterChip label="Equipment" active={false} onPress={() => {}} />);
-    expect(screen.getByText('Equipment')).toBeDefined();
-  });
-
-  it('calls onPress when tapped', () => {
-    const onPress = vi.fn();
-    render(<FilterChip label="Equipment" active={false} onPress={onPress} />);
-    fireEvent.click(screen.getByText('Equipment'));
-    expect(onPress).toHaveBeenCalled();
-  });
-});
-
-describe('FilterChipGroup', () => {
-  it('renders multiple chips', () => {
-    const chips = [
-      { label: 'Equipment', active: true },
-      { label: 'Accessories', active: false },
-    ];
-    render(<FilterChipGroup chips={chips} onChipPress={() => {}} />);
-    expect(screen.getByText('Equipment')).toBeDefined();
-    expect(screen.getByText('Accessories')).toBeDefined();
-  });
-
-  it('calls onChipPress with the chip index', () => {
-    const onChipPress = vi.fn();
-    const chips = [
-      { label: 'Equipment', active: false },
-      { label: 'Accessories', active: false },
-    ];
-    render(<FilterChipGroup chips={chips} onChipPress={onChipPress} />);
-    fireEvent.click(screen.getByText('Accessories'));
-    expect(onChipPress).toHaveBeenCalledWith(1);
-  });
-});