@trycompai/design-system 1.0.0

package/src/components/ui/heading.tsx

@@ -0,0 +1,56 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+const headingVariants = cva('font-semibold', {
+  variants: {
+    level: {
+      '1': 'text-2xl tracking-tight',
+      '2': 'text-xl',
+      '3': 'text-lg font-medium',
+      '4': 'text-base font-medium',
+      '5': 'text-sm font-medium',
+      '6': 'text-sm font-medium',
+    },
+    variant: {
+      default: 'text-foreground',
+      muted: 'text-muted-foreground',
+    },
+    tracking: {
+      default: '',
+      tight: 'tracking-tight',
+    },
+  },
+  defaultVariants: {
+    level: '1',
+    variant: 'default',
+    tracking: 'default',
+  },
+});
+
+type HeadingLevel = '1' | '2' | '3' | '4' | '5' | '6';
+
+type HeadingProps<T extends HeadingLevel = '1'> = {
+  level?: T;
+  as?: `h${HeadingLevel}`;
+} & Omit<VariantProps<typeof headingVariants>, 'level'> &
+  Omit<React.ComponentProps<`h${T}`>, 'className'>;
+
+function Heading<T extends HeadingLevel = '1'>({
+  level = '1' as T,
+  as,
+  variant,
+  tracking,
+  ...props
+}: HeadingProps<T>) {
+  const Component = as ?? (`h${level}` as `h${T}`);
+
+  return (
+    <Component
+      data-slot="heading"
+      className={headingVariants({ level, variant, tracking })}
+      {...props}
+    />
+  );
+}
+
+export { Heading, headingVariants };

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

@@ -0,0 +1,46 @@
+'use client';
+
+import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
+
+import { cn } from '../../../lib/utils';
+
+function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
+  return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
+  return <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
+}
+
+function HoverCardContent({
+  className,
+  side = 'bottom',
+  sideOffset = 4,
+  align = 'center',
+  alignOffset = 4,
+  ...props
+}: PreviewCardPrimitive.Popup.Props &
+  Pick<PreviewCardPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
+  return (
+    <PreviewCardPrimitive.Portal data-slot="hover-card-portal">
+      <PreviewCardPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PreviewCardPrimitive.Popup
+          data-slot="hover-card-content"
+          className={cn(
+            'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-4 text-sm shadow-md ring-1 duration-100 z-50 origin-(--transform-origin) outline-hidden',
+            className,
+          )}
+          {...props}
+        />
+      </PreviewCardPrimitive.Positioner>
+    </PreviewCardPrimitive.Portal>
+  );
+}
+
+export { HoverCard, HoverCardContent, HoverCardTrigger };

package/src/components/ui/index.ts

@@ -0,0 +1,61 @@
+export * from './accordion';
+export * from './alert';
+export * from './alert-dialog';
+export * from './aspect-ratio';
+export * from './avatar';
+export * from './badge';
+export * from './breadcrumb';
+export * from './button';
+export * from './button-group';
+export * from './calendar';
+export * from './card';
+export * from './carousel';
+export * from './chart';
+export * from './checkbox';
+export * from './collapsible';
+export * from './combobox';
+export * from './command';
+export * from './container';
+export * from './context-menu';
+export * from './dialog';
+export * from './drawer';
+export * from './dropdown-menu';
+export * from './empty';
+export * from './field';
+export * from './grid';
+export * from './heading';
+export * from './hover-card';
+export * from './input';
+export * from './input-group';
+export * from './input-otp';
+export * from './item';
+export * from './kbd';
+export * from './label';
+export * from './menubar';
+export * from './navigation-menu';
+export * from './page-header';
+export * from './page-layout';
+export * from './pagination';
+export * from './popover';
+export * from './progress';
+export * from './radio-group';
+export * from './resizable';
+export * from './scroll-area';
+export * from './section';
+export * from './select';
+export * from './separator';
+export * from './sheet';
+export * from './sidebar';
+export * from './skeleton';
+export * from './slider';
+export * from './sonner';
+export * from './spinner';
+export * from './stack';
+export * from './switch';
+export * from './table';
+export * from './tabs';
+export * from './text';
+export * from './textarea';
+export * from './toggle';
+export * from './toggle-group';
+export * from './tooltip';

package/src/components/ui/input-group.tsx

@@ -0,0 +1,128 @@
+import { Button as ButtonPrimitive } from '@base-ui/react/button';
+import { Input as InputPrimitive } from '@base-ui/react/input';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+import { buttonVariants } from './button';
+
+function InputGroup({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className="border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto"
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+  {
+    variants: {
+      align: {
+        'inline-start': 'pl-2 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first',
+        'inline-end': 'pr-2 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem] order-last',
+        'block-start':
+          'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
+        'block-end':
+          'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
+      },
+    },
+    defaultVariants: {
+      align: 'inline-start',
+    },
+  },
+);
+
+function InputGroupAddon({
+  align = 'inline-start',
+  ...props
+}: Omit<React.ComponentProps<'div'>, 'className'> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={inputGroupAddonVariants({ align })}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest('button')) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector('input')?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+const inputGroupButtonVariants = cva('gap-2 text-sm shadow-none flex items-center', {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: '',
+      'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+      'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+    },
+  },
+  defaultVariants: {
+    size: 'xs',
+  },
+});
+
+function InputGroupButton({
+  type = 'button',
+  variant = 'ghost',
+  size = 'xs',
+  ...props
+}: Omit<ButtonPrimitive.Props, 'className' | 'type'> &
+  VariantProps<typeof inputGroupButtonVariants> & {
+    variant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link';
+    type?: 'button' | 'submit' | 'reset';
+  }) {
+  return (
+    <ButtonPrimitive
+      type={type}
+      data-size={size}
+      className={cn(buttonVariants({ variant }), inputGroupButtonVariants({ size }))}
+      {...props}
+    />
+  );
+}
+
+function InputGroupText({
+  align = 'inline-start',
+  ...props
+}: Omit<React.ComponentProps<'div'>, 'className'> & VariantProps<typeof inputGroupAddonVariants>) {
+  return <InputGroupAddon align={align} {...props} />;
+}
+
+function InputGroupInput({ ...props }: Omit<React.ComponentProps<'input'>, 'className'>) {
+  return (
+    <InputPrimitive
+      data-slot="input-group-control"
+      className="h-8 rounded-none border-0 bg-transparent px-2.5 py-1 text-base shadow-none ring-0 transition-colors focus-visible:ring-0 aria-invalid:ring-0 md:text-sm placeholder:text-muted-foreground w-full min-w-0 outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-transparent flex-1"
+      {...props}
+    />
+  );
+}
+
+function InputGroupTextarea({ ...props }: Omit<React.ComponentProps<'textarea'>, 'className'>) {
+  return (
+    <textarea
+      data-slot="input-group-control"
+      className="rounded-none border-0 bg-transparent px-2.5 py-2 text-base shadow-none ring-0 transition-colors focus-visible:ring-0 aria-invalid:ring-0 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-transparent flex-1 resize-none"
+      {...props}
+    />
+  );
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+};

package/src/components/ui/input-otp.tsx

@@ -0,0 +1,84 @@
+import { OTPInput, OTPInputContext } from 'input-otp';
+import * as React from 'react';
+
+import { MinusIcon } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string;
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        'cn-input-otp flex items-center has-disabled:opacity-50',
+        containerClassName,
+      )}
+      spellCheck={false}
+      className={cn('disabled:cursor-not-allowed', className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn(
+        'has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[3px] flex items-center',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  index: number;
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        'dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10',
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-otp-separator"
+      className="[&_svg:not([class*='size-'])]:size-4 flex items-center"
+      role="separator"
+      {...props}
+    >
+      <MinusIcon />
+    </div>
+  );
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/src/components/ui/input.tsx

@@ -0,0 +1,15 @@
+import { Input as InputPrimitive } from '@base-ui/react/input';
+import * as React from 'react';
+
+function Input({ type, ...props }: Omit<React.ComponentProps<'input'>, 'className'>) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className="dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+      {...props}
+    />
+  );
+}
+
+export { Input };

package/src/components/ui/item.tsx

@@ -0,0 +1,188 @@
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
+import { cn } from '../../../lib/utils';
+
+function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn(
+        'gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemSeparator({ ...props }: Omit<SeparatorPrimitive.Props, 'className'>) {
+  return (
+    <SeparatorPrimitive
+      data-slot="item-separator"
+      orientation="horizontal"
+      className="bg-border shrink-0 h-px w-full my-2"
+      {...props}
+    />
+  );
+}
+
+const itemVariants = cva(
+  '[a]:hover:bg-muted rounded-md border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent',
+        outline: 'border-border',
+        muted: 'bg-muted/50 border-transparent',
+      },
+      size: {
+        default: 'gap-3.5 px-4 py-3.5',
+        sm: 'gap-2.5 px-3 py-2.5',
+        xs: 'gap-2 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+function Item({
+  className,
+  variant = 'default',
+  size = 'default',
+  render,
+  ...props
+}: useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>) {
+  return useRender({
+    defaultTagName: 'div',
+    props: mergeProps<'div'>(
+      {
+        className: cn(itemVariants({ variant, size, className })),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'item',
+      variant,
+      size,
+    },
+  });
+}
+
+const itemMediaVariants = cva(
+  'gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_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',
+    },
+  },
+);
+
+function ItemMedia({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        'gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        'gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        'text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="item-actions" className={cn('gap-2 flex items-center', className)} {...props} />
+  );
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn('gap-2 flex basis-full items-center justify-between', className)}
+      {...props}
+    />
+  );
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn('gap-2 flex basis-full items-center justify-between', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+};

package/src/components/ui/kbd.tsx

@@ -0,0 +1,26 @@
+import { cn } from '../../../lib/utils';
+
+function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn('gap-1 inline-flex items-center', className)}
+      {...props}
+    />
+  );
+}
+
+export { Kbd, KbdGroup };

package/src/components/ui/label.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import * as React from 'react';
+
+function Label({ ...props }: Omit<React.ComponentProps<'label'>, 'className'>) {
+  return (
+    <label
+      data-slot="label"
+      className="gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed"
+      {...props}
+    />
+  );
+}
+
+export { Label };