@trycompai/design-system 1.0.0 → 1.0.1

package/src/components/{ui → molecules}/pagination.tsx

@@ -1,33 +1,27 @@
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
-import * as React from 'react';
 
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
-import { cn } from '../../../lib/utils';
-import { buttonVariants } from './button';
+import { buttonVariants } from '../atoms/button';
 
-function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
+function Pagination({ ...props }: Omit<React.ComponentProps<'nav'>, 'className'>) {
   return (
     <nav
       role="navigation"
       aria-label="pagination"
       data-slot="pagination"
-      className={cn('mx-auto flex w-full justify-center', className)}
+      className="mx-auto flex w-full justify-center"
       {...props}
     />
   );
 }
 
-function PaginationContent({ className, ...props }: React.ComponentProps<'ul'>) {
+function PaginationContent({ ...props }: Omit<React.ComponentProps<'ul'>, 'className'>) {
   return (
-    <ul
-      data-slot="pagination-content"
-      className={cn('gap-1 flex items-center', className)}
-      {...props}
-    />
+    <ul data-slot="pagination-content" className="gap-1 flex items-center" {...props} />
   );
 }
 
-function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
+function PaginationItem({ ...props }: Omit<React.ComponentProps<'li'>, 'className'>) {
   return <li data-slot="pagination-item" {...props} />;
 }
 
@@ -55,7 +49,7 @@ function PaginationLink({ isActive, size = 'icon', ...props }: PaginationLinkPro
 function PaginationPrevious({ ...props }: Omit<PaginationLinkProps, 'size'>) {
   return (
     <ButtonPrimitive
-      className={cn(buttonVariants({ variant: 'ghost', size: 'default' }), 'pl-2')}
+      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" />
@@ -67,7 +61,7 @@ function PaginationPrevious({ ...props }: Omit<PaginationLinkProps, 'size'>) {
 function PaginationNext({ ...props }: Omit<PaginationLinkProps, 'size'>) {
   return (
     <ButtonPrimitive
-      className={cn(buttonVariants({ variant: 'ghost', size: 'default' }), 'pr-2')}
+      className={`${buttonVariants({ variant: 'ghost', size: 'default' })} pr-2`}
       render={<a aria-label="Go to next page" data-slot="pagination-link" {...props} />}
     >
       <span className="hidden sm:block">Next</span>
@@ -76,15 +70,12 @@ function PaginationNext({ ...props }: Omit<PaginationLinkProps, 'size'>) {
   );
 }
 
-function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
+function PaginationEllipsis({ ...props }: Omit<React.ComponentProps<'span'>, 'className'>) {
   return (
     <span
       aria-hidden
       data-slot="pagination-ellipsis"
-      className={cn(
-        "size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center",
-        className,
-      )}
+      className="size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center"
       {...props}
     >
       <MoreHorizontalIcon />

package/src/components/{ui → molecules}/radio-group.tsx

@@ -2,26 +2,22 @@ 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 { cn } from '../../../lib/utils';
 
-function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
+function RadioGroup({ ...props }: Omit<RadioGroupPrimitive.Props, 'className'>) {
   return (
     <RadioGroupPrimitive
       data-slot="radio-group"
-      className={cn('grid gap-2 w-full', className)}
+      className="grid gap-2 w-full"
       {...props}
     />
   );
 }
 
-function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
+function RadioGroupItem({ ...props }: Omit<RadioPrimitive.Root.Props, 'className'>) {
   return (
     <RadioPrimitive.Root
       data-slot="radio-group-item"
-      className={cn(
-        'border-input text-primary 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 flex size-4 rounded-full shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
-        className,
-      )}
+      className="border-input text-primary 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 flex size-4 rounded-full shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50"
       {...props}
     >
       <RadioPrimitive.Indicator

package/src/components/{ui → molecules}/scroll-area.tsx

@@ -1,17 +1,18 @@
 import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
 
-import { cn } from '../../../lib/utils';
-
-function ScrollArea({ className, children, ...props }: ScrollAreaPrimitive.Root.Props) {
+function ScrollArea({
+  children,
+  ...props
+}: Omit<ScrollAreaPrimitive.Root.Props, 'className'>) {
   return (
     <ScrollAreaPrimitive.Root
       data-slot="scroll-area"
-      className={cn('relative', className)}
+      className="relative overflow-hidden size-full"
       {...props}
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className="focus-visible:ring-ring/50 size-full overflow-auto rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
@@ -22,19 +23,15 @@ function ScrollArea({ className, children, ...props }: ScrollAreaPrimitive.Root.
 }
 
 function ScrollBar({
-  className,
   orientation = 'vertical',
   ...props
-}: ScrollAreaPrimitive.Scrollbar.Props) {
+}: Omit<ScrollAreaPrimitive.Scrollbar.Props, 'className'>) {
   return (
     <ScrollAreaPrimitive.Scrollbar
       data-slot="scroll-area-scrollbar"
       data-orientation={orientation}
       orientation={orientation}
-      className={cn(
-        'data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none',
-        className,
-      )}
+      className="data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none"
       {...props}
     >
       <ScrollAreaPrimitive.Thumb

package/src/components/{ui → molecules}/section.tsx

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

package/src/components/{ui → molecules}/select.tsx

@@ -18,9 +18,21 @@ function SelectValue({
   placeholder?: string;
 }) {
   return (
-    <SelectPrimitive.Value data-slot="select-value" className="flex flex-1 text-left" {...props}>
-      {placeholder}
-    </SelectPrimitive.Value>
+    <>
+      <SelectPrimitive.Value
+        data-slot="select-value"
+        className="flex-1 text-left data-[placeholder]:hidden"
+        {...props}
+      />
+      {placeholder && (
+        <span
+          data-slot="select-placeholder"
+          className="text-muted-foreground [[data-slot=select-value]:not([data-placeholder])~&]:hidden"
+        >
+          {placeholder}
+        </span>
+      )}
+    </>
   );
 }
 
@@ -35,7 +47,7 @@ function SelectTrigger({
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
       data-size={size}
-      className="border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 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 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0"
+      className="border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 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 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:data-[placeholder]:absolute *:data-[slot=select-value]:data-[placeholder]:w-0 *:data-[slot=select-value]:data-[placeholder]:overflow-hidden *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-full items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0"
       {...props}
     >
       {children}
@@ -71,7 +83,7 @@ function SelectContent({
       >
         <SelectPrimitive.Popup
           data-slot="select-content"
-          className="bg-popover text-popover-foreground 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 min-w-36 rounded-lg shadow-md ring-1 duration-100 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto"
+          className="bg-popover text-popover-foreground 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 min-w-(--anchor-width) max-w-80 rounded-lg p-1 shadow-md ring-1 duration-100 relative isolate z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto"
           {...props}
         >
           <SelectScrollUpButton />

package/src/components/{ui → molecules}/table.tsx

@@ -1,8 +1,17 @@
 import * as React from 'react';
 
-function Table({ ...props }: Omit<React.ComponentProps<'table'>, 'className'>) {
+function Table({
+  variant = 'default',
+  ...props
+}: Omit<React.ComponentProps<'table'>, 'className'> & {
+  variant?: 'default' | 'bordered';
+}) {
   return (
-    <div data-slot="table-container" className="relative w-full overflow-x-auto">
+    <div
+      data-slot="table-container"
+      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} />
     </div>
   );

package/src/components/{ui → molecules}/toggle-group.tsx

@@ -6,7 +6,7 @@ import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
 import { cn } from '../../../lib/utils';
-import { toggleVariants } from './toggle';
+import { toggleVariants } from '../atoms/toggle';
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants> & {

package/src/components/organisms/alert-dialog.tsx

@@ -0,0 +1,135 @@
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+
+import { Button } from '../atoms/button';
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({ ...props }: Omit<AlertDialogPrimitive.Backdrop.Props, 'className'>) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className="data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  size = 'default',
+  ...props
+}: Omit<AlertDialogPrimitive.Popup.Props, 'className'> & {
+  size?: 'default' | 'sm';
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className="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 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none"
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className="grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className="bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className="bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  ...props
+}: Omit<React.ComponentProps<typeof AlertDialogPrimitive.Title>, 'className'>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className="text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  ...props
+}: Omit<React.ComponentProps<typeof AlertDialogPrimitive.Description>, 'className'>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className="text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  variant = 'default',
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, 'className'>) {
+  return <Button data-slot="alert-dialog-action" variant={variant} {...props} />;
+}
+
+function AlertDialogCancel({
+  variant = 'secondary',
+  size = 'default',
+  ...props
+}: Omit<AlertDialogPrimitive.Close.Props, 'className'> &
+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/src/components/{ui → organisms}/calendar.tsx

@@ -10,7 +10,7 @@ import {
 
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import { cn } from '../../../lib/utils';
-import { Button, buttonVariants } from './button';
+import { Button, buttonVariants } from '../atoms/button';
 
 type CalendarButtonVariant = 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link';
 
@@ -158,9 +158,8 @@ function Calendar({
 function CalendarDayButton({
   day,
   modifiers,
-  className: _className,
   ...props
-}: React.ComponentProps<typeof DayButton>) {
+}: Omit<React.ComponentProps<typeof DayButton>, 'className'>) {
   const ref = React.useRef<HTMLButtonElement>(null);
   React.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();

package/src/components/{ui → organisms}/carousel.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import { cn } from '../../../lib/utils';
-import { buttonVariants } from './button';
+import { buttonVariants } from '../atoms/button';
 
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
@@ -44,10 +44,9 @@ function Carousel({
   opts,
   setApi,
   plugins,
-  className,
   children,
   ...props
-}: React.ComponentProps<'div'> & CarouselProps) {
+}: Omit<React.ComponentProps<'div'>, 'className'> & CarouselProps) {
   const [carouselRef, api] = useEmblaCarousel(
     {
       ...opts,
@@ -116,7 +115,7 @@ function Carousel({
     >
       <div
         onKeyDownCapture={handleKeyDown}
-        className={cn('relative', className)}
+        className="relative"
         role="region"
         aria-roledescription="carousel"
         data-slot="carousel"
@@ -128,20 +127,20 @@ function Carousel({
   );
 }
 
-function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
+function CarouselContent({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   const { carouselRef, orientation } = useCarousel();
 
   return (
     <div ref={carouselRef} className="overflow-hidden" data-slot="carousel-content">
       <div
-        className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}
+        className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col')}
         {...props}
       />
     </div>
   );
 }
 
-function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
+function CarouselItem({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   const { orientation } = useCarousel();
 
   return (
@@ -152,7 +151,6 @@ function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
       className={cn(
         'min-w-0 shrink-0 grow-0 basis-full',
         orientation === 'horizontal' ? 'pl-4' : 'pt-4',
-        className,
       )}
       {...props}
     />

package/src/components/{ui → organisms}/chart.tsx

@@ -36,11 +36,10 @@ function useChart() {
 
 function ChartContainer({
   id,
-  className,
   children,
   config,
   ...props
-}: React.ComponentProps<'div'> & {
+}: Omit<React.ComponentProps<'div'>, 'className'> & {
   config: ChartConfig;
   children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
 }) {
@@ -52,10 +51,7 @@ function ChartContainer({
       <div
         data-slot="chart"
         data-chart={chartId}
-        className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className,
-        )}
+        className="[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden"
         {...props}
       >
         <ChartStyle id={chartId} config={config} />
@@ -99,19 +95,17 @@ const ChartTooltip = RechartsPrimitive.Tooltip;
 function ChartTooltipContent({
   active,
   payload,
-  className,
   indicator = 'dot',
   hideLabel = false,
   hideIndicator = false,
   label,
   labelFormatter,
-  labelClassName,
   formatter,
   color,
   nameKey,
   labelKey,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<'div'> & {
+}: Omit<React.ComponentProps<typeof RechartsPrimitive.Tooltip>, 'className'> &
+  Omit<React.ComponentProps<'div'>, 'className'> & {
     hideLabel?: boolean;
     hideIndicator?: boolean;
     indicator?: 'line' | 'dot' | 'dashed';
@@ -134,17 +128,15 @@ function ChartTooltipContent({
         : itemConfig?.label;
 
     if (labelFormatter) {
-      return (
-        <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>
-      );
+      return <div className="font-medium">{labelFormatter(value, payload)}</div>;
     }
 
     if (!value) {
       return null;
     }
 
-    return <div className={cn('font-medium', labelClassName)}>{value}</div>;
-  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+    return <div className="font-medium">{value}</div>;
+  }, [label, labelFormatter, payload, hideLabel, config, labelKey]);
 
   if (!active || !payload?.length) {
     return null;
@@ -153,12 +145,7 @@ function ChartTooltipContent({
   const nestLabel = payload.length === 1 && indicator !== 'dot';
 
   return (
-    <div
-      className={cn(
-        'border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-[8rem] items-start',
-        className,
-      )}
-    >
+    <div className="border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-[8rem] items-start">
       {!nestLabel ? tooltipLabel : null}
       <div className="grid gap-1.5">
         {payload
@@ -235,12 +222,11 @@ function ChartTooltipContent({
 const ChartLegend = RechartsPrimitive.Legend;
 
 function ChartLegendContent({
-  className,
   hideIcon = false,
   payload,
   verticalAlign = 'bottom',
   nameKey,
-}: React.ComponentProps<'div'> &
+}: Omit<React.ComponentProps<'div'>, 'className'> &
   Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
     hideIcon?: boolean;
     nameKey?: string;
@@ -256,7 +242,6 @@ function ChartLegendContent({
       className={cn(
         'flex items-center justify-center gap-4',
         verticalAlign === 'top' ? 'pb-3' : 'pt-3',
-        className,
       )}
     >
       {payload

package/src/components/{ui → organisms}/combobox.tsx

@@ -4,8 +4,8 @@ import { Combobox as ComboboxPrimitive } from '@base-ui/react';
 import { CheckIcon, ChevronDownIcon, XIcon } from 'lucide-react';
 import * as React from 'react';
 
-import { Button } from './button';
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './input-group';
+import { Button } from '../atoms/button';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '../molecules/input-group';
 
 const Combobox = ComboboxPrimitive.Root;