@trycompai/design-system 1.0.1 → 1.0.3

package/src/components/molecules/breadcrumb.tsx

@@ -2,7 +2,7 @@ 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 { ArrowRight, ChevronRight, OverflowMenuHorizontal } from '@carbon/icons-react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -26,9 +26,10 @@ interface BreadcrumbItemData {
 type BreadcrumbSeparatorType = 'chevron' | 'slash' | 'arrow';
 
 const separatorIcons: Record<BreadcrumbSeparatorType, React.ReactNode> = {
-  chevron: <ChevronRightIcon />,
-  slash: <SlashIcon />,
-  arrow: <ArrowRightIcon />,
+  chevron: <ChevronRight />,
+  // Carbon doesn't ship a slash glyph icon; render it as text.
+  slash: <span className="text-xs leading-none">/</span>,
+  arrow: <ArrowRight />,
 };
 
 interface BreadcrumbProps extends Omit<React.ComponentProps<'nav'>, 'children' | 'className'> {
@@ -201,7 +202,7 @@ function BreadcrumbSeparator({
       className="[&>svg]:size-3.5"
       {...props}
     >
-      {children ?? <ChevronRightIcon />}
+      {children ?? <ChevronRight />}
     </li>
   );
 }
@@ -215,7 +216,7 @@ function BreadcrumbEllipsis({ ...props }: Omit<React.ComponentProps<'span'>, 'cl
       className="size-5 [&>svg]:size-4 flex items-center justify-center"
       {...props}
     >
-      <MoreHorizontalIcon />
+      <OverflowMenuHorizontal />
       <span className="sr-only">More</span>
     </span>
   );
@@ -229,7 +230,7 @@ function BreadcrumbEllipsisMenu({ collapsedItems }: { collapsedItems?: Breadcrum
   return (
     <DropdownMenu>
       <DropdownMenuTrigger variant="ellipsis" aria-label="Show hidden breadcrumb items">
-        <MoreHorizontalIcon />
+        <OverflowMenuHorizontal />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start">
         {collapsedItems.map((item, index) => (

package/src/components/molecules/card.tsx

@@ -2,7 +2,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
 const cardVariants = cva(
-  'ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col',
+  'bg-card text-card-foreground border border-border/40 shadow-[0_1px_3px_0_rgb(0_0_0/0.06)] overflow-hidden rounded-xl py-4 text-sm has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col',
   {
     variants: {
       width: {
@@ -25,14 +25,18 @@ const cardVariants = cva(
         full: 'max-w-full',
       },
       spacing: {
-        default: '',
-        tight: 'gap-3',
-        relaxed: 'gap-6',
+        default: 'gap-4 data-[size=sm]:gap-3',
+        tight: 'gap-3 data-[size=sm]:gap-2.5',
+        relaxed: 'gap-6 data-[size=sm]:gap-4',
+      },
+      disabled: {
+        true: 'opacity-60 pointer-events-none select-none',
       },
     },
     defaultVariants: {
       width: 'auto',
       spacing: 'default',
+      disabled: undefined,
     },
   },
 );
@@ -56,6 +60,8 @@ function Card({
   size = 'default',
   width,
   maxWidth,
+  spacing,
+  disabled,
   title,
   description,
   headerAction,
@@ -68,6 +74,13 @@ function Card({
   // Check if children contain compound components (have data-slot)
   const hasCompoundChildren = React.Children.toArray(children).some((child) => {
     if (React.isValidElement(child)) {
+      // Prefer checking component identity. `data-slot` is applied inside the component render,
+      // so it won't exist on `child.props` unless manually passed in.
+      if (child.type === CardHeader || child.type === CardContent || child.type === CardFooter) {
+        return true;
+      }
+
+      // Fallback for direct DOM usage.
       const props = child.props as Record<string, unknown>;
       return (
         props['data-slot'] === 'card-header' ||
@@ -79,7 +92,13 @@ function Card({
   });
 
   return (
-    <div data-slot="card" data-size={size} className={cardVariants({ width, maxWidth })} {...props}>
+    <div
+      data-slot="card"
+      data-size={size}
+      data-disabled={disabled ? '' : undefined}
+      className={cardVariants({ width, maxWidth, spacing, disabled: disabled ? true : undefined })}
+      {...props}
+    >
       {hasHeader && (
         <CardHeader>
           {title && <CardTitle>{title}</CardTitle>}

package/src/components/molecules/command-search.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import * as React from 'react';
+import { Search } from '@carbon/icons-react';
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from '../organisms/command';
+import { Kbd } from '../atoms/kbd';
+
+// ============ TYPES ============
+
+export interface CommandSearchItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  shortcut?: string;
+  onSelect?: () => void;
+  keywords?: string[];
+}
+
+export interface CommandSearchGroup {
+  id: string;
+  label: string;
+  items: CommandSearchItem[];
+}
+
+export interface CommandSearchProps {
+  /** Placeholder text for the search input */
+  placeholder?: string;
+  /** Text shown when no results are found */
+  emptyText?: string;
+  /** Groups of searchable items */
+  groups?: CommandSearchGroup[];
+  /** Flat list of items (alternative to groups) */
+  items?: CommandSearchItem[];
+  /** Callback when an item is selected */
+  onSelect?: (item: CommandSearchItem) => void;
+  /** Controlled open state */
+  open?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Whether to show the trigger input */
+  showTrigger?: boolean;
+  /** Width of the trigger input */
+  triggerWidth?: 'sm' | 'md' | 'lg' | 'full';
+}
+
+// ============ COMPONENT ============
+
+function CommandSearch({
+  placeholder = 'Search...',
+  emptyText = 'No results found.',
+  groups = [],
+  items = [],
+  onSelect,
+  open: openProp,
+  onOpenChange,
+  showTrigger = true,
+  triggerWidth = 'md',
+}: CommandSearchProps) {
+  const [_open, _setOpen] = React.useState(false);
+  const open = openProp ?? _open;
+  const setOpen = onOpenChange ?? _setOpen;
+
+  // Listen for Cmd+K / Ctrl+K
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen(!open);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [open, setOpen]);
+
+  const handleSelect = (item: CommandSearchItem) => {
+    setOpen(false);
+    item.onSelect?.();
+    onSelect?.(item);
+  };
+
+  const widthClasses = {
+    sm: 'w-48 md:w-56',
+    md: 'w-56 md:w-72',
+    lg: 'w-72 md:w-96',
+    full: 'w-full max-w-md',
+  };
+
+  // Combine flat items into a default group if provided
+  const allGroups = items.length > 0
+    ? [{ id: 'default', label: '', items }, ...groups]
+    : groups;
+
+  return (
+    <>
+      {showTrigger && (
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          className={`${widthClasses[triggerWidth]} inline-flex items-center gap-2 rounded-lg border border-input/50 bg-background/50 px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-background hover:border-input focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
+        >
+          <Search className="size-4" />
+          <span className="flex-1 text-left">{placeholder}</span>
+          <Kbd>⌘K</Kbd>
+        </button>
+      )}
+
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <Command>
+          <CommandInput placeholder={placeholder} />
+          <CommandList>
+            <CommandEmpty>{emptyText}</CommandEmpty>
+            {allGroups.map((group) => (
+              <CommandGroup key={group.id} heading={group.label || undefined}>
+                {group.items.map((item) => (
+                  <CommandItem
+                    key={item.id}
+                    value={item.label}
+                    keywords={item.keywords}
+                    onSelect={() => handleSelect(item)}
+                  >
+                    {item.icon}
+                    <span>{item.label}</span>
+                    {item.shortcut && (
+                      <CommandShortcut>{item.shortcut}</CommandShortcut>
+                    )}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            ))}
+          </CommandList>
+        </Command>
+      </CommandDialog>
+    </>
+  );
+}
+
+export { CommandSearch };

package/src/components/molecules/index.ts

@@ -1,9 +1,11 @@
 export * from './accordion';
+export * from './ai-chat';
 export * from './alert';
 export * from './breadcrumb';
 export * from './button-group';
 export * from './card';
 export * from './collapsible';
+export * from './command-search';
 export * from './empty';
 export * from './field';
 export * from './grid';
@@ -19,8 +21,9 @@ export * from './resizable';
 export * from './scroll-area';
 export * from './section';
 export * from './select';
-export * from './stack';
+export * from './settings';
 export * from './table';
 export * from './tabs';
+export * from './theme-switcher';
 export * from './toggle-group';
 export * from './tooltip';

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

@@ -1,7 +1,7 @@
 import { OTPInput, OTPInputContext } from 'input-otp';
 import * as React from 'react';
 
-import { MinusIcon } from 'lucide-react';
+import { Subtract } from '@carbon/icons-react';
 
 function InputOTP({
   className: _className,
@@ -62,7 +62,7 @@ function InputOTPSeparator({ ...props }: Omit<React.ComponentProps<'div'>, 'clas
       role="separator"
       {...props}
     >
-      <MinusIcon />
+      <Subtract />
     </div>
   );
 }

package/src/components/molecules/page-header.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { Heading } from '../atoms/heading';
 import { Text } from '../atoms/text';
-import { Stack } from './stack';
+import { Stack } from '../atoms/stack';
 
 interface PageHeaderProps extends Omit<React.ComponentProps<'div'>, 'className'> {
   title: string;
@@ -13,8 +13,29 @@ interface PageHeaderProps extends Omit<React.ComponentProps<'div'>, 'className'>
 }
 
 function PageHeader({ title, description, meta, actions, children, ...props }: PageHeaderProps) {
+  const childArray = React.Children.toArray(children);
+  const extractedActionChildren: React.ReactNode[] = [];
+  const nonActionChildren: React.ReactNode[] = [];
+
+  childArray.forEach((child) => {
+    if (
+      React.isValidElement(child) &&
+      (child.type === PageHeaderActions ||
+        (typeof child.type === 'function' &&
+          (child.type as unknown as { __pageHeaderSlot?: string }).__pageHeaderSlot === 'actions'))
+    ) {
+      extractedActionChildren.push((child.props as { children?: React.ReactNode }).children);
+      return;
+    }
+    nonActionChildren.push(child);
+  });
+
+  const resolvedActions =
+    actions ??
+    (extractedActionChildren.length > 0 ? extractedActionChildren : undefined);
+
   return (
-    <div data-slot="page-header" className="flex items-center justify-between gap-4" {...props}>
+    <div data-slot="page-header" className="flex items-start justify-between gap-4" {...props}>
       <Stack gap="1">
         <Heading level="1">{title}</Heading>
         {description && (
@@ -27,9 +48,14 @@ function PageHeader({ title, description, meta, actions, children, ...props }: P
             {meta}
           </Text>
         )}
-        {children}
+        {nonActionChildren}
       </Stack>
-      {actions && <div className="flex shrink-0 items-center gap-3">{actions}</div>}
+      {resolvedActions &&
+        (React.isValidElement(resolvedActions) && resolvedActions.type === PageHeaderActions ? (
+          resolvedActions
+        ) : (
+          <PageHeaderActions>{resolvedActions}</PageHeaderActions>
+        ))}
     </div>
   );
 }
@@ -48,4 +74,7 @@ function PageHeaderActions({ ...props }: Omit<React.ComponentProps<'div'>, 'clas
   );
 }
 
+// Mark compound slots so PageHeader can detect them even if module instances differ.
+(PageHeaderActions as unknown as { __pageHeaderSlot?: string }).__pageHeaderSlot = 'actions';
+
 export { PageHeader, PageHeaderActions, PageHeaderDescription, PageHeaderTitle };

package/src/components/molecules/pagination.tsx

@@ -1,6 +1,6 @@
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
 
-import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
+import { ChevronLeft, ChevronRight, OverflowMenuHorizontal } from '@carbon/icons-react';
 import { buttonVariants } from '../atoms/button';
 
 function Pagination({ ...props }: Omit<React.ComponentProps<'nav'>, 'className'>) {
@@ -52,7 +52,7 @@ function PaginationPrevious({ ...props }: Omit<PaginationLinkProps, 'size'>) {
       className={`${buttonVariants({ variant: 'ghost', size: 'default' })} pl-2`}
       render={<a aria-label="Go to previous page" data-slot="pagination-link" {...props} />}
     >
-      <ChevronLeftIcon data-icon="inline-start" />
+      <ChevronLeft data-icon="inline-start" />
       <span className="hidden sm:block">Previous</span>
     </ButtonPrimitive>
   );
@@ -65,7 +65,7 @@ function PaginationNext({ ...props }: Omit<PaginationLinkProps, 'size'>) {
       render={<a aria-label="Go to next page" data-slot="pagination-link" {...props} />}
     >
       <span className="hidden sm:block">Next</span>
-      <ChevronRightIcon data-icon="inline-end" />
+      <ChevronRight data-icon="inline-end" />
     </ButtonPrimitive>
   );
 }
@@ -78,7 +78,7 @@ function PaginationEllipsis({ ...props }: Omit<React.ComponentProps<'span'>, 'cl
       className="size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center"
       {...props}
     >
-      <MoreHorizontalIcon />
+      <OverflowMenuHorizontal />
       <span className="sr-only">More pages</span>
     </span>
   );

package/src/components/molecules/popover.tsx

@@ -1,12 +1,14 @@
 import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
 import * as React from 'react';
 
+import { cn } from '../../../lib/utils';
+
 function Popover({ ...props }: PopoverPrimitive.Root.Props) {
   return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
-function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+function PopoverTrigger({ className, ...props }: PopoverPrimitive.Trigger.Props) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" className={cn(className)} {...props} />;
 }
 
 function PopoverContent({

package/src/components/molecules/radio-group.tsx

@@ -1,7 +1,7 @@
 import { Radio as RadioPrimitive } from '@base-ui/react/radio';
 import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
 
-import { CircleIcon } from 'lucide-react';
+import { CircleFilled } from '@carbon/icons-react';
 
 function RadioGroup({ ...props }: Omit<RadioGroupPrimitive.Props, 'className'>) {
   return (
@@ -24,7 +24,7 @@ function RadioGroupItem({ ...props }: Omit<RadioPrimitive.Root.Props, 'className
         data-slot="radio-group-indicator"
         className="group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center"
       >
-        <CircleIcon className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current" />
+        <CircleFilled className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
       </RadioPrimitive.Indicator>
     </RadioPrimitive.Root>
   );

package/src/components/molecules/section.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { Heading } from '../atoms/heading';
 import { Text } from '../atoms/text';
-import { Stack } from './stack';
+import { Stack } from '../atoms/stack';
 
 interface SectionProps extends Omit<React.ComponentProps<'section'>, 'className'> {
   title?: string;

package/src/components/molecules/select.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Select as SelectPrimitive } from '@base-ui/react/select';
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { Checkmark, ChevronDown, ChevronUp } from '@carbon/icons-react';
 import * as React from 'react';
 
 const Select = SelectPrimitive.Root;
@@ -52,7 +52,7 @@ function SelectTrigger({
     >
       {children}
       <SelectPrimitive.Icon
-        render={<ChevronDownIcon className="text-muted-foreground size-4 pointer-events-none" />}
+        render={<ChevronDown className="text-muted-foreground size-4 pointer-events-none" />}
       />
     </SelectPrimitive.Trigger>
   );
@@ -120,7 +120,7 @@ function SelectItem({ children, ...props }: Omit<SelectPrimitive.Item.Props, 'cl
           <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
         }
       >
-        <CheckIcon className="pointer-events-none" />
+        <Checkmark className="pointer-events-none" />
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
   );
@@ -145,7 +145,7 @@ function SelectScrollUpButton({
       className="bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full"
       {...props}
     >
-      <ChevronUpIcon />
+      <ChevronUp />
     </SelectPrimitive.ScrollUpArrow>
   );
 }
@@ -159,7 +159,7 @@ function SelectScrollDownButton({
       className="bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full"
       {...props}
     >
-      <ChevronDownIcon />
+      <ChevronDown />
     </SelectPrimitive.ScrollDownArrow>
   );
 }

package/src/components/molecules/settings.tsx

@@ -0,0 +1,169 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { Heading } from '../atoms/heading';
+import { Stack } from '../atoms/stack';
+import { Text } from '../atoms/text';
+
+const settingRowVariants = cva(
+  'flex w-full items-start justify-between gap-4 py-4 first:pt-0 last:pb-0',
+  {
+    variants: {
+      size: {
+        default: 'py-4',
+        sm: 'py-3',
+        lg: 'py-5',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  }
+);
+
+interface SettingRowProps
+  extends Omit<React.ComponentProps<'div'>, 'className'>,
+    VariantProps<typeof settingRowVariants> {
+  /** The setting label */
+  label: string;
+  /** Optional description text */
+  description?: string;
+  /** Whether the setting is disabled */
+  disabled?: boolean;
+}
+
+/**
+ * A horizontal row for a single setting with label/description on the left
+ * and a control (switch, button, select, etc.) on the right.
+ */
+function SettingRow({
+  label,
+  description,
+  disabled,
+  size,
+  children,
+  ...props
+}: SettingRowProps) {
+  return (
+    <div
+      data-slot="setting-row"
+      data-disabled={disabled || undefined}
+      className={settingRowVariants({ size })}
+      {...props}
+    >
+      <div className="min-w-0 flex-1">
+        <Stack gap="1">
+          <Text weight="medium" variant={disabled ? 'muted' : undefined}>
+            {label}
+          </Text>
+          {description && (
+            <Text size="sm" variant="muted">
+              {description}
+            </Text>
+          )}
+        </Stack>
+      </div>
+      <div className="flex shrink-0 items-center">{children}</div>
+    </div>
+  );
+}
+
+interface SettingGroupProps extends Omit<React.ComponentProps<'div'>, 'className'> {
+  /** Whether to show dividers between rows */
+  divided?: boolean;
+}
+
+/**
+ * Groups multiple SettingRow components together, optionally with dividers.
+ */
+function SettingGroup({ divided = true, children, ...props }: SettingGroupProps) {
+  return (
+    <div
+      data-slot="setting-group"
+      data-divided={divided || undefined}
+      className={
+        divided
+          ? '[&>[data-slot=setting-row]:not(:last-child)]:border-border [&>[data-slot=setting-row]:not(:last-child)]:border-b'
+          : ''
+      }
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface SettingLabelProps extends Omit<React.ComponentProps<'div'>, 'className'> {}
+
+/**
+ * Custom label area for complex setting rows. Use when you need more than just text.
+ */
+function SettingLabel({ children, ...props }: SettingLabelProps) {
+  return (
+    <div data-slot="setting-label" className="min-w-0 flex-1" {...props}>
+      {children}
+    </div>
+  );
+}
+
+interface SettingControlProps extends Omit<React.ComponentProps<'div'>, 'className'> {}
+
+/**
+ * Control area for setting rows. Use when you need multiple controls or custom layout.
+ */
+function SettingControl({ children, ...props }: SettingControlProps) {
+  return (
+    <div data-slot="setting-control" className="flex shrink-0 items-center gap-2" {...props}>
+      {children}
+    </div>
+  );
+}
+
+interface SettingsCardProps extends Omit<React.ComponentProps<'div'>, 'className'> {
+  /** Card title */
+  title: string;
+  /** Optional description */
+  description?: string;
+  /** Hint text shown in footer (left side) */
+  hint?: React.ReactNode;
+  /** Action button/content shown in footer (right side) */
+  action?: React.ReactNode;
+}
+
+/**
+ * A self-contained settings card with title, description, content area, and footer.
+ * Footer shows hint text on left and action button on right.
+ */
+function SettingsCard({ title, description, hint, action, children, ...props }: SettingsCardProps) {
+  const hasFooter = hint || action;
+
+  return (
+    <div
+      data-slot="settings-card"
+      className="bg-card text-card-foreground rounded-xl border shadow-sm"
+      {...props}
+    >
+      <div className="px-6 pt-6 pb-4">
+        <Stack gap="1">
+          <Text weight="semibold">{title}</Text>
+          {description && (
+            <Text size="sm" variant="muted">
+              {description}
+            </Text>
+          )}
+        </Stack>
+      </div>
+      <div className="px-6 pb-6">{children}</div>
+      {hasFooter && (
+        <div className="border-t bg-muted/30 px-6 py-4">
+          <div className="flex items-center justify-between gap-4">
+            <div className="text-muted-foreground text-sm">{hint}</div>
+            <div className="flex shrink-0 items-center gap-2">{action}</div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { SettingControl, SettingGroup, SettingLabel, SettingRow, SettingsCard };

package/src/components/molecules/table.tsx

@@ -12,7 +12,11 @@ function Table({
       data-variant={variant}
       className="relative w-full overflow-x-auto data-[variant=bordered]:border data-[variant=bordered]:rounded-lg"
     >
-      <table data-slot="table" className="w-full caption-bottom text-sm" {...props} />
+      <table
+        data-slot="table"
+        className="w-full caption-bottom text-sm [&_[data-slot=text][data-default-size=true]]:text-sm"
+        {...props}
+      />
     </div>
   );
 }