@trycompai/design-system 1.0.0

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,5 @@
+function Skeleton({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return <div data-slot="skeleton" className="bg-muted rounded-md animate-pulse" {...props} />;
+}
+
+export { Skeleton };

package/src/components/ui/slider.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { Slider as SliderPrimitive } from '@base-ui/react/slider';
+import * as React from 'react';
+
+function Slider({
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: Omit<SliderPrimitive.Root.Props, 'className'>) {
+  const _values = React.useMemo(
+    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
+    [value, defaultValue, min, max],
+  );
+
+  return (
+    <SliderPrimitive.Root
+      className="data-horizontal:w-full data-vertical:h-full"
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      thumbAlignment="edge"
+      {...props}
+    >
+      <SliderPrimitive.Control className="data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col">
+        <SliderPrimitive.Track
+          data-slot="slider-track"
+          className="bg-muted rounded-full data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5 relative overflow-hidden select-none"
+        >
+          <SliderPrimitive.Indicator
+            data-slot="slider-range"
+            className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+          />
+        </SliderPrimitive.Track>
+        {Array.from({ length: _values.length }, (_, index) => (
+          <SliderPrimitive.Thumb
+            data-slot="slider-thumb"
+            key={index}
+            className="border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50"
+          />
+        ))}
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  );
+}
+
+export { Slider };

package/src/components/ui/sonner.tsx

@@ -0,0 +1,43 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner, type ToasterProps } from 'sonner';
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
+          '--border-radius': 'var(--radius)',
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: 'cn-toast',
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

package/src/components/ui/spinner.tsx

@@ -0,0 +1,14 @@
+import { Loader2Icon } from 'lucide-react';
+
+function Spinner({ ...props }: Omit<React.ComponentProps<'svg'>, 'className'>) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className="size-4 shrink-0 animate-spin"
+      {...props}
+    />
+  );
+}
+
+export { Spinner };

package/src/components/ui/stack.tsx

@@ -0,0 +1,72 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+const stackVariants = cva('flex', {
+  variants: {
+    direction: {
+      row: 'flex-row',
+      column: 'flex-col',
+      'row-reverse': 'flex-row-reverse',
+      'column-reverse': 'flex-col-reverse',
+    },
+    align: {
+      start: 'items-start',
+      center: 'items-center',
+      end: 'items-end',
+      stretch: 'items-stretch',
+      baseline: 'items-baseline',
+    },
+    textAlign: {
+      left: 'text-left',
+      center: 'text-center',
+      right: 'text-right',
+    },
+    justify: {
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      between: 'justify-between',
+      around: 'justify-around',
+      evenly: 'justify-evenly',
+    },
+    gap: {
+      '0': 'gap-0',
+      '0.5': 'gap-0.5',
+      '1': 'gap-1',
+      '1.5': 'gap-1.5',
+      '2': 'gap-2',
+      '2.5': 'gap-2.5',
+      '3': 'gap-3',
+      '4': 'gap-4',
+      '5': 'gap-5',
+      '6': 'gap-6',
+      '8': 'gap-8',
+      '10': 'gap-10',
+      '12': 'gap-12',
+    },
+    wrap: {
+      true: 'flex-wrap',
+      false: 'flex-nowrap',
+    },
+  },
+  defaultVariants: {
+    direction: 'column',
+    gap: '0',
+    wrap: false,
+  },
+});
+
+interface StackProps
+  extends Omit<React.ComponentProps<'div'>, 'className'>, VariantProps<typeof stackVariants> {}
+
+function Stack({ direction, align, justify, gap, wrap, textAlign, ...props }: StackProps) {
+  return (
+    <div
+      data-slot="stack"
+      className={stackVariants({ direction, align, justify, gap, wrap, textAlign })}
+      {...props}
+    />
+  );
+}
+
+export { Stack, stackVariants };

package/src/components/ui/switch.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
+
+function Switch({
+  size = 'default',
+  ...props
+}: Omit<SwitchPrimitive.Root.Props, 'className'> & {
+  size?: 'sm' | 'default';
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className="data-checked:bg-primary data-unchecked:bg-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 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50"
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform"
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

package/src/components/ui/table.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+
+function Table({ ...props }: Omit<React.ComponentProps<'table'>, 'className'>) {
+  return (
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
+      <table data-slot="table" className="w-full caption-bottom text-sm" {...props} />
+    </div>
+  );
+}
+
+function TableHeader({ ...props }: Omit<React.ComponentProps<'thead'>, 'className'>) {
+  return <thead data-slot="table-header" className="[&_tr]:border-b" {...props} />;
+}
+
+function TableBody({ ...props }: Omit<React.ComponentProps<'tbody'>, 'className'>) {
+  return <tbody data-slot="table-body" className="[&_tr:last-child]:border-0" {...props} />;
+}
+
+function TableFooter({ ...props }: Omit<React.ComponentProps<'tfoot'>, 'className'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className="bg-muted/50 border-t font-medium [&>tr]:last:border-b-0"
+      {...props}
+    />
+  );
+}
+
+function TableRow({ ...props }: Omit<React.ComponentProps<'tr'>, 'className'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className="hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors"
+      {...props}
+    />
+  );
+}
+
+function TableHead({ ...props }: Omit<React.ComponentProps<'th'>, 'className'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0"
+      {...props}
+    />
+  );
+}
+
+function TableCell({ ...props }: Omit<React.ComponentProps<'td'>, 'className'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className="p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0"
+      {...props}
+    />
+  );
+}
+
+function TableCaption({ ...props }: Omit<React.ComponentProps<'caption'>, 'className'>) {
+  return (
+    <caption data-slot="table-caption" className="text-muted-foreground mt-4 text-sm" {...props} />
+  );
+}
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/src/components/ui/tabs.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+function Tabs({
+  orientation = 'horizontal',
+  ...props
+}: Omit<TabsPrimitive.Root.Props, 'className'>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className="gap-2 group/tabs flex data-[orientation=horizontal]:flex-col"
+      {...props}
+    />
+  );
+}
+
+const tabsListVariants = cva(
+  'rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
+  {
+    variants: {
+      variant: {
+        default: 'bg-muted',
+        line: 'gap-1 bg-transparent',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function TabsList({
+  variant = 'default',
+  ...props
+}: Omit<TabsPrimitive.List.Props, 'className'> & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={tabsListVariants({ variant })}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({ ...props }: Omit<TabsPrimitive.Tab.Props, 'className'>) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100"
+      {...props}
+    />
+  );
+}
+
+function TabsContent({ ...props }: Omit<TabsPrimitive.Panel.Props, 'className'>) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className="text-sm flex-1 outline-none"
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsContent, TabsList, tabsListVariants, TabsTrigger };

package/src/components/ui/text.tsx

@@ -0,0 +1,59 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+const textVariants = cva('', {
+  variants: {
+    size: {
+      xs: 'text-xs',
+      sm: 'text-sm',
+      base: 'text-base',
+      lg: 'text-lg',
+    },
+    variant: {
+      default: 'text-foreground',
+      muted: 'text-muted-foreground',
+      primary: 'text-primary',
+      destructive: 'text-destructive',
+      success: 'text-green-600 dark:text-green-400',
+    },
+    weight: {
+      normal: 'font-normal',
+      medium: 'font-medium',
+      semibold: 'font-semibold',
+    },
+    leading: {
+      tight: 'leading-tight',
+      snug: 'leading-snug',
+      normal: 'leading-normal',
+      relaxed: 'leading-relaxed',
+    },
+    font: {
+      sans: 'font-sans',
+      mono: 'font-mono tabular-nums',
+    },
+  },
+  defaultVariants: {
+    size: 'base',
+    variant: 'default',
+    weight: 'normal',
+    leading: 'normal',
+    font: 'sans',
+  },
+});
+
+interface TextProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, 'className'>, VariantProps<typeof textVariants> {
+  as?: 'p' | 'span' | 'div';
+}
+
+function Text({ as: Component = 'p', size, variant, weight, leading, font, ...props }: TextProps) {
+  return (
+    <Component
+      data-slot="text"
+      className={textVariants({ size, variant, weight, leading, font })}
+      {...props}
+    />
+  );
+}
+
+export { Text, textVariants };

package/src/components/ui/textarea.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+function Textarea({ ...props }: Omit<React.ComponentProps<'textarea'>, 'className'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className="border-input dark:bg-input/30 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 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] 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"
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

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

@@ -0,0 +1,87 @@
+'use client';
+
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+import { toggleVariants } from './toggle';
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+    orientation?: 'horizontal' | 'vertical';
+  }
+>({
+  size: 'default',
+  variant: 'default',
+  spacing: 0,
+  orientation: 'horizontal',
+});
+
+type ToggleGroupProps = Omit<ToggleGroupPrimitive.Props, 'className'> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+    orientation?: 'horizontal' | 'vertical';
+  };
+
+function ToggleGroup({
+  variant,
+  size,
+  spacing = 0,
+  orientation = 'horizontal',
+  children,
+  ...props
+}: ToggleGroupProps) {
+  return (
+    <ToggleGroupPrimitive
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      data-orientation={orientation}
+      style={{ '--gap': spacing } as React.CSSProperties}
+      className="rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch"
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing, orientation }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  );
+}
+
+type ToggleGroupItemProps = Omit<TogglePrimitive.Props, 'className'> &
+  VariantProps<typeof toggleVariants>;
+
+function ToggleGroupItem({
+  children,
+  variant = 'default',
+  size = 'default',
+  ...props
+}: ToggleGroupItemProps) {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <TogglePrimitive
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        'data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+      )}
+      {...props}
+    >
+      {children}
+    </TogglePrimitive>
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };
+export type { ToggleGroupItemProps, ToggleGroupProps };

package/src/components/ui/toggle.tsx

@@ -0,0 +1,42 @@
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+
+const toggleVariants = cva(
+  "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border-input hover:bg-muted border bg-transparent shadow-xs',
+      },
+      size: {
+        default: 'h-9 min-w-9 px-2',
+        sm: 'h-8 min-w-8 px-1.5',
+        lg: 'h-10 min-w-10 px-2.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+function Toggle({
+  className,
+  variant = 'default',
+  size = 'default',
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Toggle, toggleVariants };

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+
+function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({ ...props }: Omit<TooltipPrimitive.Trigger.Props, 'className'>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  side = 'top',
+  sideOffset = 4,
+  align = 'center',
+  alignOffset = 0,
+  children,
+  ...props
+}: Omit<TooltipPrimitive.Popup.Props, 'className'> &
+  Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className="data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-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 rounded-md px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)"
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/index.ts

@@ -0,0 +1,3 @@
+export { cn } from '../lib/utils';
+
+export * from './components/ui';