@tallyui/components 1.0.0 → 2.0.0

package/src/ui/context-menu/index.tsx

@@ -0,0 +1,159 @@
+import * as React from 'react';
+import { ContextMenu as ContextMenuPrimitive, TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const ContextMenu = ContextMenuPrimitive.Root;
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+const ContextMenuContent = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(function ContextMenuContent({ className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.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}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+});
+ContextMenuContent.displayName = 'ContextMenuContent';
+
+const ContextMenuItem = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & { inset?: boolean }
+>(function ContextMenuItem({ className, inset, ...props }, ref) {
+  return (
+    <TextClassContext.Provider value="select-none text-sm">
+      <ContextMenuPrimitive.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',
+          inset && 'pl-8',
+          className,
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+});
+ContextMenuItem.displayName = 'ContextMenuItem';
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(function ContextMenuCheckboxItem({ className, children, checked, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      ref={ref}
+      checked={checked}
+      className={cn(
+        'relative flex 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}
+    >
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+});
+ContextMenuCheckboxItem.displayName = 'ContextMenuCheckboxItem';
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(function ContextMenuRadioItem({ className, children, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      ref={ref}
+      className={cn(
+        'relative flex 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}
+    >
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+});
+ContextMenuRadioItem.displayName = 'ContextMenuRadioItem';
+
+const ContextMenuLabel = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & { inset?: boolean }
+>(function ContextMenuLabel({ className, inset, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Label
+      ref={ref}
+      className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+      {...props}
+    />
+  );
+});
+ContextMenuLabel.displayName = 'ContextMenuLabel';
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(function ContextMenuSeparator({ className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
+  );
+});
+ContextMenuSeparator.displayName = 'ContextMenuSeparator';
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & { inset?: boolean }
+>(function ContextMenuSubTrigger({ className, inset, children, ...props }, ref) {
+  return (
+    <TextClassContext.Provider value="select-none text-sm">
+      <ContextMenuPrimitive.SubTrigger
+        ref={ref}
+        className={cn(
+          'flex cursor-default select-none flex-row items-center rounded-sm px-2 py-1.5 text-sm outline-none web:focus:bg-accent',
+          inset && 'pl-8',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </ContextMenuPrimitive.SubTrigger>
+    </TextClassContext.Provider>
+  );
+});
+ContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger';
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(function ContextMenuSubContent({ className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      ref={ref}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+ContextMenuSubContent.displayName = 'ContextMenuSubContent';
+
+export {
+  ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem,
+  ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel,
+  ContextMenuSeparator, ContextMenuGroup, ContextMenuPortal,
+  ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};

package/src/ui/dialog/index.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { Dialog as DialogPrimitive, TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(function DialogOverlay({ className, ...props }, ref) {
+  return (
+    <DialogPrimitive.Overlay
+      ref={ref}
+      className={cn('fixed inset-0 z-50 bg-black/80', className)}
+      {...props}
+    />
+  );
+});
+DialogOverlay.displayName = 'DialogOverlay';
+
+const DialogContent = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(function DialogContent({ className, children, ...props }, ref) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.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}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+});
+DialogContent.displayName = 'DialogContent';
+
+function DialogHeader({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) {
+  return (
+    <View className={cn('flex flex-col gap-1.5 text-center sm:text-left', className)} {...props} />
+  );
+}
+
+function DialogFooter({ 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 DialogTitle = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(function DialogTitle({ className, ...props }, ref) {
+  return (
+    <TextClassContext.Provider value="text-lg font-semibold leading-none text-foreground">
+      <DialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold leading-none text-foreground', className)} {...props} />
+    </TextClassContext.Provider>
+  );
+});
+DialogTitle.displayName = 'DialogTitle';
+
+const DialogDescription = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(function DialogDescription({ className, ...props }, ref) {
+  return (
+    <DialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  );
+});
+DialogDescription.displayName = 'DialogDescription';
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+};

package/src/ui/dropdown-menu/index.tsx

@@ -0,0 +1,161 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { DropdownMenu as DropdownMenuPrimitive, TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(function DropdownMenuContent({ className, sideOffset = 4, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        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}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+});
+DropdownMenuContent.displayName = 'DropdownMenuContent';
+
+const DropdownMenuItem = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & { inset?: boolean }
+>(function DropdownMenuItem({ className, inset, ...props }, ref) {
+  return (
+    <TextClassContext.Provider value="select-none text-sm">
+      <DropdownMenuPrimitive.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',
+          inset && 'pl-8',
+          className,
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+});
+DropdownMenuItem.displayName = 'DropdownMenuItem';
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(function DropdownMenuCheckboxItem({ className, children, checked, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      ref={ref}
+      checked={checked}
+      className={cn(
+        'relative flex 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}
+    >
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+});
+DropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem';
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(function DropdownMenuRadioItem({ className, children, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      ref={ref}
+      className={cn(
+        'relative flex 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}
+    >
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+});
+DropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem';
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & { inset?: boolean }
+>(function DropdownMenuLabel({ className, inset, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.Label
+      ref={ref}
+      className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+      {...props}
+    />
+  );
+});
+DropdownMenuLabel.displayName = 'DropdownMenuLabel';
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(function DropdownMenuSeparator({ className, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
+  );
+});
+DropdownMenuSeparator.displayName = 'DropdownMenuSeparator';
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean }
+>(function DropdownMenuSubTrigger({ className, inset, children, ...props }, ref) {
+  return (
+    <TextClassContext.Provider value="select-none text-sm">
+      <DropdownMenuPrimitive.SubTrigger
+        ref={ref}
+        className={cn(
+          'flex cursor-default select-none flex-row items-center rounded-sm px-2 py-1.5 text-sm outline-none web:focus:bg-accent',
+          inset && 'pl-8',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </DropdownMenuPrimitive.SubTrigger>
+    </TextClassContext.Provider>
+  );
+});
+DropdownMenuSubTrigger.displayName = 'DropdownMenuSubTrigger';
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(function DropdownMenuSubContent({ className, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      ref={ref}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+DropdownMenuSubContent.displayName = 'DropdownMenuSubContent';
+
+export {
+  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem,
+  DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel,
+  DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuPortal,
+  DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

package/src/ui/hover-card/index.tsx

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

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