@tallyui/components 1.0.0 → 3.0.0-next.0

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

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