Initial commit for project Spoon!

2026-06-21 17:52:02 -05:00
commit cf7ff2ee4e
268 changed files with 32981 additions and 0 deletions
@@ -0,0 +1,181 @@
+import type { VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+
+import { cn, Separator } from '@spoon/ui';
+
+const ItemGroup = ({ className, ...props }: React.ComponentProps<'div'>) => (
+  <div
+    role='list'
+    data-slot='item-group'
+    className={cn(
+      'group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2',
+      className,
+    )}
+    {...props}
+  />
+);
+
+const ItemSeparator = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) => (
+  <Separator
+    data-slot='item-separator'
+    orientation='horizontal'
+    className={cn('my-2', className)}
+    {...props}
+  />
+);
+
+const itemVariants = cva(
+  '[a]:hover:bg-muted group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent',
+        outline: 'border-border',
+        muted: 'bg-muted/50 border-transparent',
+      },
+      size: {
+        default: 'gap-2.5 px-3 py-2.5',
+        sm: 'gap-2.5 px-3 py-2.5',
+        xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+const Item = ({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'div'> &
+  VariantProps<typeof itemVariants> & { asChild?: boolean }) => {
+  const Comp = asChild ? Slot.Root : 'div';
+  return (
+    <Comp
+      data-slot='item'
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+};
+
+const itemMediaVariants = cva(
+  'flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image:
+          'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+const ItemMedia = ({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) => (
+  <div
+    data-slot='item-media'
+    data-variant={variant}
+    className={cn(itemMediaVariants({ variant, className }))}
+    {...props}
+  />
+);
+
+const ItemContent = ({ className, ...props }: React.ComponentProps<'div'>) => (
+  <div
+    data-slot='item-content'
+    className={cn(
+      'flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none',
+      className,
+    )}
+    {...props}
+  />
+);
+
+const ItemTitle = ({ className, ...props }: React.ComponentProps<'div'>) => (
+  <div
+    data-slot='item-title'
+    className={cn(
+      'line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4',
+      className,
+    )}
+    {...props}
+  />
+);
+
+const ItemDescription = ({
+  className,
+  ...props
+}: React.ComponentProps<'p'>) => (
+  <p
+    data-slot='item-description'
+    className={cn(
+      'text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4',
+      className,
+    )}
+    {...props}
+  />
+);
+
+const ItemActions = ({ className, ...props }: React.ComponentProps<'div'>) => (
+  <div
+    data-slot='item-actions'
+    className={cn('flex items-center gap-2', className)}
+    {...props}
+  />
+);
+
+const ItemHeader = ({ className, ...props }: React.ComponentProps<'div'>) => (
+  <div
+    data-slot='item-header'
+    className={cn(
+      'flex basis-full items-center justify-between gap-2',
+      className,
+    )}
+    {...props}
+  />
+);
+
+const ItemFooter = ({ className, ...props }: React.ComponentProps<'div'>) => (
+  <div
+    data-slot='item-footer'
+    className={cn(
+      'flex basis-full items-center justify-between gap-2',
+      className,
+    )}
+    {...props}
+  />
+);
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+};