@trycompai/design-system 1.0.0

package/src/components/ui/avatar.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
+import * as React from 'react';
+
+type AvatarSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';
+
+function Avatar({
+  size = 'default',
+  ...props
+}: Omit<AvatarPrimitive.Root.Props, 'className'> & {
+  size?: AvatarSize;
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className="size-8 rounded-full after:rounded-full data-[size=xs]:size-5 data-[size=sm]:size-6 data-[size=lg]:size-10 data-[size=xl]:size-14 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten"
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({ ...props }: Omit<AvatarPrimitive.Image.Props, 'className'>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className="rounded-full aspect-square size-full object-cover"
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({ ...props }: Omit<AvatarPrimitive.Fallback.Props, 'className'>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className="bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-xs group-data-[size=xs]/avatar:text-[8px] group-data-[size=sm]/avatar:text-[10px] group-data-[size=lg]/avatar:text-sm group-data-[size=xl]/avatar:text-base"
+      {...props}
+    />
+  );
+}
+
+function AvatarBadge({ ...props }: Omit<React.ComponentProps<'span'>, 'className'>) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className="bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none group-data-[size=xs]/avatar:size-1.5 group-data-[size=xs]/avatar:[&>svg]:hidden group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2 group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2 group-data-[size=xl]/avatar:size-3.5 group-data-[size=xl]/avatar:[&>svg]:size-2.5"
+      {...props}
+    />
+  );
+}
+
+function AvatarGroup({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className="*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2"
+      {...props}
+    />
+  );
+}
+
+function AvatarGroupCount({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className="bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=xs]/avatar-group:size-5 group-has-data-[size=xs]/avatar-group:text-[10px] group-has-data-[size=sm]/avatar-group:size-6 group-has-data-[size=sm]/avatar-group:text-xs group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=lg]/avatar-group:text-base group-has-data-[size=xl]/avatar-group:size-14 group-has-data-[size=xl]/avatar-group:text-lg ring-background relative flex shrink-0 items-center justify-center ring-2"
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

package/src/components/ui/badge.tsx

@@ -0,0 +1,48 @@
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const badgeVariants = cva(
+  'h-5 gap-1 rounded-4xl border px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
+        outline:
+          'border-border bg-transparent text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+        ghost:
+          'border-transparent bg-transparent hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+        link: 'border-transparent bg-transparent text-primary underline-offset-4 hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+type BadgeProps = Omit<useRender.ComponentProps<'span'>, 'className'> &
+  VariantProps<typeof badgeVariants>;
+
+function Badge({ variant = 'default', render, ...props }: BadgeProps) {
+  return useRender({
+    defaultTagName: 'span',
+    props: mergeProps<'span'>(
+      {
+        className: badgeVariants({ variant }),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'badge',
+      variant,
+    },
+  });
+}
+
+export { Badge, badgeVariants };

package/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,254 @@
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import * as React from 'react';
+
+import { ArrowRightIcon, ChevronRightIcon, MoreHorizontalIcon, SlashIcon } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './dropdown-menu';
+
+interface BreadcrumbItemData {
+  /** The text label for the breadcrumb item */
+  label?: React.ReactNode;
+  /** The href for the link. If omitted on the last item, it becomes the current page */
+  href?: string;
+  /** Whether this item is the current page (auto-detected if last item has no href) */
+  isCurrent?: boolean;
+  /** Render as ellipsis (collapsed items indicator) */
+  isEllipsis?: boolean;
+  /** Additional props to pass to the link or page element */
+  props?: Record<string, unknown>;
+}
+
+type BreadcrumbSeparatorType = 'chevron' | 'slash' | 'arrow';
+
+const separatorIcons: Record<BreadcrumbSeparatorType, React.ReactNode> = {
+  chevron: <ChevronRightIcon />,
+  slash: <SlashIcon />,
+  arrow: <ArrowRightIcon />,
+};
+
+interface BreadcrumbProps extends Omit<React.ComponentProps<'nav'>, 'children' | 'className'> {
+  /** Simple API: Array of breadcrumb items */
+  items?: BreadcrumbItemData[];
+  /** Separator style: 'chevron' (default), 'slash', or 'arrow' */
+  separator?: BreadcrumbSeparatorType;
+  /** Max visible items (including ellipsis). Default: 4. Set to 0 to disable auto-collapse. */
+  maxItems?: number;
+  /** Number of items to show at the start before ellipsis. Default: 1 */
+  itemsBeforeCollapse?: number;
+  /** Children for compound component pattern */
+  children?: React.ReactNode;
+}
+
+interface CollapseResult {
+  displayItems: Array<BreadcrumbItemData & { collapsedItems?: BreadcrumbItemData[] }>;
+  hasCollapsed: boolean;
+}
+
+function collapseItems({
+  items,
+  maxItems,
+  itemsBeforeCollapse,
+}: {
+  items: BreadcrumbItemData[];
+  maxItems: number;
+  itemsBeforeCollapse: number;
+}): CollapseResult {
+  // If maxItems is 0 or items already fit, return as-is
+  if (maxItems === 0 || items.length <= maxItems) {
+    return { displayItems: items, hasCollapsed: false };
+  }
+
+  // Ensure we have at least 1 item before ellipsis
+  const before = Math.max(1, Math.min(itemsBeforeCollapse, maxItems - 2));
+
+  // Calculate items after ellipsis: maxItems - before - 1 (for ellipsis)
+  const after = maxItems - before - 1;
+
+  // If we can't fit at least 1 after, no point collapsing
+  if (after < 1) {
+    return { displayItems: items, hasCollapsed: false };
+  }
+
+  // If before + after >= items.length, no need to collapse
+  if (before + after >= items.length) {
+    return { displayItems: items, hasCollapsed: false };
+  }
+
+  const startItems = items.slice(0, before);
+  const collapsedItems = items.slice(before, items.length - after);
+  const endItems = items.slice(items.length - after);
+
+  return {
+    displayItems: [...startItems, { isEllipsis: true, collapsedItems }, ...endItems],
+    hasCollapsed: true,
+  };
+}
+
+function Breadcrumb({
+  items,
+  separator = 'chevron',
+  maxItems = 4,
+  itemsBeforeCollapse = 1,
+  children,
+  ...props
+}: BreadcrumbProps) {
+  // If items prop is provided, render simple API
+  if (items && items.length > 0) {
+    const separatorIcon = separatorIcons[separator];
+
+    // Auto-collapse if needed
+    const { displayItems } = collapseItems({
+      items,
+      maxItems,
+      itemsBeforeCollapse,
+    });
+
+    return (
+      <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props}>
+        <BreadcrumbList>
+          {displayItems.map((item, index) => {
+            const isLast = index === displayItems.length - 1;
+            const isCurrent = item.isCurrent ?? (isLast && !item.href && !item.isEllipsis);
+            const collapsedItems = 'collapsedItems' in item ? item.collapsedItems : undefined;
+
+            return (
+              <React.Fragment key={index}>
+                <BreadcrumbItem>
+                  {item.isEllipsis ? (
+                    <BreadcrumbEllipsisMenu collapsedItems={collapsedItems} />
+                  ) : isCurrent ? (
+                    <BreadcrumbPage {...item.props}>{item.label}</BreadcrumbPage>
+                  ) : (
+                    <BreadcrumbLink href={item.href} {...item.props}>
+                      {item.label}
+                    </BreadcrumbLink>
+                  )}
+                </BreadcrumbItem>
+                {!isLast && <BreadcrumbSeparator>{separatorIcon}</BreadcrumbSeparator>}
+              </React.Fragment>
+            );
+          })}
+        </BreadcrumbList>
+      </nav>
+    );
+  }
+
+  // Otherwise, render compound component pattern
+  return (
+    <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props}>
+      {children}
+    </nav>
+  );
+}
+
+function BreadcrumbList({ ...props }: Omit<React.ComponentProps<'ol'>, 'className'>) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className="text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center break-words"
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ ...props }: Omit<React.ComponentProps<'li'>, 'className'>) {
+  return <li data-slot="breadcrumb-item" className="gap-1.5 inline-flex items-center" {...props} />;
+}
+
+function BreadcrumbLink({ render, ...props }: Omit<useRender.ComponentProps<'a'>, 'className'>) {
+  return useRender({
+    defaultTagName: 'a',
+    props: mergeProps<'a'>(
+      {
+        className: 'hover:text-foreground transition-colors',
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'breadcrumb-link',
+    },
+  });
+}
+
+function BreadcrumbPage({ ...props }: Omit<React.ComponentProps<'span'>, 'className'>) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className="text-foreground font-normal"
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  ...props
+}: Omit<React.ComponentProps<'li'>, 'className'>) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className="[&>svg]:size-3.5"
+      {...props}
+    >
+      {children ?? <ChevronRightIcon />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({ ...props }: Omit<React.ComponentProps<'span'>, 'className'>) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className="size-5 [&>svg]:size-4 flex items-center justify-center"
+      {...props}
+    >
+      <MoreHorizontalIcon />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+function BreadcrumbEllipsisMenu({ collapsedItems }: { collapsedItems?: BreadcrumbItemData[] }) {
+  if (!collapsedItems || collapsedItems.length === 0) {
+    return <BreadcrumbEllipsis />;
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger variant="ellipsis" aria-label="Show hidden breadcrumb items">
+        <MoreHorizontalIcon />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        {collapsedItems.map((item, index) => (
+          <DropdownMenuItem key={index} render={item.href ? <a href={item.href} /> : undefined}>
+            {item.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+};
+export type { BreadcrumbItemData, BreadcrumbSeparatorType };

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

@@ -0,0 +1,89 @@
+import { mergeProps } from '@base-ui/react/merge-props';
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
+import { useRender } from '@base-ui/react/use-render';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const buttonGroupVariants = cva(
+  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          '[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 [&>[data-slot]]:rounded-r-none',
+        vertical:
+          '[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]]:rounded-b-none',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  },
+);
+
+const buttonGroupTextVariants = cva(
+  "gap-2 rounded-md border px-2.5 text-sm font-medium shadow-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: 'bg-muted',
+        display: 'bg-background border-y border-x-0 min-w-[60px] justify-center tabular-nums',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function ButtonGroup({
+  orientation,
+  ...props
+}: Omit<React.ComponentProps<'div'>, 'className'> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={buttonGroupVariants({ orientation })}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupText({
+  variant,
+  render,
+  ...props
+}: Omit<useRender.ComponentProps<'div'>, 'className'> &
+  VariantProps<typeof buttonGroupTextVariants>) {
+  return useRender({
+    defaultTagName: 'div',
+    props: mergeProps<'div'>(
+      {
+        className: buttonGroupTextVariants({ variant }),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'button-group-text',
+      variant,
+    },
+  });
+}
+
+function ButtonGroupSeparator({
+  orientation = 'vertical',
+  ...props
+}: Omit<SeparatorPrimitive.Props, 'className'>) {
+  return (
+    <SeparatorPrimitive
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className="bg-input shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch relative data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto"
+      {...props}
+    />
+  );
+}
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/src/components/ui/button.tsx

@@ -0,0 +1,122 @@
+import { Button as ButtonPrimitive } from '@base-ui/react/button';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { Spinner } from './spinner';
+
+const buttonVariants = cva(
+  "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 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/80',
+        outline:
+          'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+        ghost:
+          'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        destructive:
+          'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      width: {
+        auto: '',
+        full: 'w-full',
+      },
+      size: {
+        default:
+          'h-8 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
+        icon: 'size-8',
+        'icon-xs':
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm':
+          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+        'icon-lg': 'size-9',
+        // Calendar day button - special size for calendar day cells
+        'calendar-day': [
+          // Base sizing
+          'relative isolate z-10 aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal',
+          // Selection states
+          'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground',
+          'data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-middle=true]:rounded-none',
+          'data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius)',
+          'data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius)',
+          // Focus states (from parent day cell)
+          'group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 group-data-[focused=true]/day:ring-[3px]',
+          // Dark mode hover
+          'dark:hover:text-foreground',
+          // Nested span styling for additional content
+          '[&>span]:text-xs [&>span]:opacity-70',
+        ].join(' '),
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      width: 'auto',
+      size: 'default',
+    },
+  },
+);
+
+type ButtonProps = Omit<ButtonPrimitive.Props, 'className'> &
+  VariantProps<typeof buttonVariants> & {
+    /** Show loading spinner and disable button */
+    loading?: boolean;
+    /** Icon to show on the left side of the button */
+    iconLeft?: React.ReactNode;
+    /** Icon to show on the right side of the button */
+    iconRight?: React.ReactNode;
+  };
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = 'default',
+      width = 'auto',
+      size = 'default',
+      loading = false,
+      iconLeft,
+      iconRight,
+      disabled,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const isDisabled = disabled || loading;
+
+    return (
+      <ButtonPrimitive
+        ref={ref}
+        data-slot="button"
+        data-loading={loading || undefined}
+        disabled={isDisabled}
+        className={buttonVariants({ variant, width, size })}
+        {...props}
+      >
+        {loading ? (
+          <Spinner />
+        ) : iconLeft ? (
+          <span data-icon="inline-start" className="shrink-0">
+            {iconLeft}
+          </span>
+        ) : null}
+        {children}
+        {!loading && iconRight ? (
+          <span data-icon="inline-end" className="shrink-0">
+            {iconRight}
+          </span>
+        ) : null}
+      </ButtonPrimitive>
+    );
+  },
+);
+
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
+export type { ButtonProps };