@trycompai/design-system 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycompai/design-system",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Design system for Comp AI - shadcn-style components with Tailwind CSS",
   "type": "module",
   "main": "./src/index.ts",
@@ -48,7 +48,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/trycompai/comp.git",
-    "directory": "packages/ui-shadcn"
+    "directory": "packages/design-system"
   },
   "license": "MIT",
   "keywords": [

package/src/components/atoms/index.ts

@@ -0,0 +1,19 @@
+export * from './aspect-ratio';
+export * from './avatar';
+export * from './badge';
+export * from './button';
+export * from './checkbox';
+export * from './container';
+export * from './heading';
+export * from './input';
+export * from './kbd';
+export * from './label';
+export * from './progress';
+export * from './separator';
+export * from './skeleton';
+export * from './slider';
+export * from './spinner';
+export * from './switch';
+export * from './text';
+export * from './textarea';
+export * from './toggle';

package/src/components/atoms/kbd.tsx

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

package/src/components/{ui → atoms}/slider.tsx

@@ -17,7 +17,7 @@ function Slider({
 
   return (
     <SliderPrimitive.Root
-      className="data-horizontal:w-full data-vertical:h-full"
+      className="data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full"
       data-slot="slider"
       defaultValue={defaultValue}
       value={value}
@@ -26,14 +26,14 @@ function Slider({
       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.Control className="data-[orientation=vertical]:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=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"
+          className="bg-border rounded-full h-1.5 w-full data-[orientation=vertical]:h-full data-[orientation=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"
+            className="bg-primary select-none h-full data-[orientation=vertical]:w-full"
           />
         </SliderPrimitive.Track>
         {Array.from({ length: _values.length }, (_, index) => (

package/src/components/{ui → atoms}/textarea.tsx

@@ -1,10 +1,16 @@
 import * as React from 'react';
 
-function Textarea({ ...props }: Omit<React.ComponentProps<'textarea'>, 'className'>) {
+function Textarea({
+  size = 'default',
+  ...props
+}: Omit<React.ComponentProps<'textarea'>, 'className'> & {
+  size?: 'sm' | 'default' | 'lg' | 'full';
+}) {
   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"
+      data-size={size}
+      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 outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=sm]:w-xs data-[size=default]:w-md data-[size=lg]:w-xl data-[size=full]:w-full"
       {...props}
     />
   );

package/src/components/{ui → atoms}/toggle.tsx

@@ -1,8 +1,6 @@
 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",
   {
@@ -25,15 +23,14 @@ const toggleVariants = cva(
 );
 
 function Toggle({
-  className,
   variant = 'default',
   size = 'default',
   ...props
-}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+}: Omit<TogglePrimitive.Props, 'className'> & VariantProps<typeof toggleVariants>) {
   return (
     <TogglePrimitive
       data-slot="toggle"
-      className={cn(toggleVariants({ variant, size, className }))}
+      className={toggleVariants({ variant, size })}
       {...props}
     />
   );

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

@@ -8,7 +8,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from './dropdown-menu';
+} from '../organisms/dropdown-menu';
 
 interface BreadcrumbItemData {
   /** The text label for the breadcrumb item */

package/src/components/molecules/empty.tsx

@@ -0,0 +1,82 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+function Empty({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="empty"
+      className="gap-4 rounded-lg border-dashed p-12 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance"
+      {...props}
+    />
+  );
+}
+
+function EmptyHeader({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="empty-header"
+      className="gap-2 flex max-w-sm flex-col items-center"
+      {...props}
+    />
+  );
+}
+
+const emptyMediaVariants = cva(
+  'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function EmptyMedia({
+  variant = 'default',
+  ...props
+}: Omit<React.ComponentProps<'div'>, 'className'> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={emptyMediaVariants({ variant })}
+      {...props}
+    />
+  );
+}
+
+function EmptyTitle({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="empty-title"
+      className="text-lg font-medium tracking-tight"
+      {...props}
+    />
+  );
+}
+
+function EmptyDescription({ ...props }: Omit<React.ComponentProps<'p'>, 'className'>) {
+  return (
+    <div
+      data-slot="empty-description"
+      className="text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4"
+      {...props}
+    />
+  );
+}
+
+function EmptyContent({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="empty-content"
+      className="gap-4 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance"
+      {...props}
+    />
+  );
+}
+
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

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

@@ -4,47 +4,36 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { useMemo } from 'react';
 
 import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
-import { cn } from '../../../lib/utils';
 
-function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
+function FieldSet({ ...props }: Omit<React.ComponentProps<'fieldset'>, 'className'>) {
   return (
     <fieldset
       data-slot="field-set"
-      className={cn(
-        'gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col',
-        className,
-      )}
+      className="gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col"
       {...props}
     />
   );
 }
 
 function FieldLegend({
-  className,
   variant = 'legend',
   ...props
-}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
+}: Omit<React.ComponentProps<'legend'>, 'className'> & { variant?: 'legend' | 'label' }) {
   return (
     <legend
       data-slot="field-legend"
       data-variant={variant}
-      className={cn(
-        'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
-        className,
-      )}
+      className="mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base"
       {...props}
     />
   );
 }
 
-function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
+function FieldGroup({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       data-slot="field-group"
-      className={cn(
-        'gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col',
-        className,
-      )}
+      className="gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col"
       {...props}
     />
   );
@@ -66,26 +55,25 @@ const fieldVariants = cva('data-[invalid=true]:text-destructive gap-2 group/fiel
 });
 
 function Field({
-  className,
   orientation = 'vertical',
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
+}: Omit<React.ComponentProps<'div'>, 'className'> & VariantProps<typeof fieldVariants>) {
   return (
     <div
       role="group"
       data-slot="field"
       data-orientation={orientation}
-      className={cn(fieldVariants({ orientation }), className)}
+      className={fieldVariants({ orientation })}
       {...props}
     />
   );
 }
 
-function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
+function FieldContent({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       data-slot="field-content"
-      className={cn('gap-0.5 group/field-content flex flex-1 flex-col leading-snug', className)}
+      className="gap-0.5 group/field-content flex flex-1 flex-col leading-snug"
       {...props}
     />
   );
@@ -101,29 +89,21 @@ function FieldLabel({ ...props }: Omit<React.ComponentProps<'label'>, 'className
   );
 }
 
-function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
+function FieldTitle({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       data-slot="field-label"
-      className={cn(
-        'gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug',
-        className,
-      )}
+      className="gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug"
       {...props}
     />
   );
 }
 
-function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
+function FieldDescription({ ...props }: Omit<React.ComponentProps<'p'>, 'className'>) {
   return (
     <p
       data-slot="field-description"
-      className={cn(
-        'text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
-        'last:mt-0 nth-last-2:-mt-1',
-        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
-        className,
-      )}
+      className="text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4"
       {...props}
     />
   );
@@ -156,11 +136,10 @@ function FieldSeparator({
 }
 
 function FieldError({
-  className,
   children,
   errors,
   ...props
-}: React.ComponentProps<'div'> & {
+}: Omit<React.ComponentProps<'div'>, 'className'> & {
   errors?: Array<{ message?: string } | undefined>;
 }) {
   const content = useMemo(() => {
@@ -193,7 +172,7 @@ function FieldError({
     <div
       role="alert"
       data-slot="field-error"
-      className={cn('text-destructive text-sm font-normal', className)}
+      className="text-destructive text-sm font-normal"
       {...props}
     >
       {content}

package/src/components/{ui → molecules}/hover-card.tsx

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

package/src/components/molecules/index.ts

@@ -0,0 +1,26 @@
+export * from './accordion';
+export * from './alert';
+export * from './breadcrumb';
+export * from './button-group';
+export * from './card';
+export * from './collapsible';
+export * from './empty';
+export * from './field';
+export * from './grid';
+export * from './hover-card';
+export * from './input-group';
+export * from './input-otp';
+export * from './item';
+export * from './page-header';
+export * from './pagination';
+export * from './popover';
+export * from './radio-group';
+export * from './resizable';
+export * from './scroll-area';
+export * from './section';
+export * from './select';
+export * from './stack';
+export * from './table';
+export * from './tabs';
+export * from './toggle-group';
+export * from './tooltip';

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

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
 import { cn } from '../../../lib/utils';
-import { buttonVariants } from './button';
+import { buttonVariants } from '../atoms/button';
 
 function InputGroup({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (

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

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

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

@@ -1,20 +1,15 @@
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
 import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
 
 import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
-import { cn } from '../../../lib/utils';
 
-function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
+function ItemGroup({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       role="list"
       data-slot="item-group"
-      className={cn(
-        'gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col',
-        className,
-      )}
+      className="gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col"
       {...props}
     />
   );
@@ -54,17 +49,16 @@ const itemVariants = cva(
 );
 
 function Item({
-  className,
   variant = 'default',
   size = 'default',
   render,
   ...props
-}: useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>) {
+}: Omit<useRender.ComponentProps<'div'>, 'className'> & VariantProps<typeof itemVariants>) {
   return useRender({
     defaultTagName: 'div',
     props: mergeProps<'div'>(
       {
-        className: cn(itemVariants({ variant, size, className })),
+        className: itemVariants({ variant, size }),
       },
       props,
     ),
@@ -95,80 +89,68 @@ const itemMediaVariants = cva(
 );
 
 function ItemMedia({
-  className,
   variant = 'default',
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
+}: Omit<React.ComponentProps<'div'>, 'className'> & VariantProps<typeof itemMediaVariants>) {
   return (
     <div
       data-slot="item-media"
       data-variant={variant}
-      className={cn(itemMediaVariants({ variant, className }))}
+      className={itemMediaVariants({ variant })}
       {...props}
     />
   );
 }
 
-function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
+function ItemContent({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       data-slot="item-content"
-      className={cn(
-        'gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none',
-        className,
-      )}
+      className="gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none"
       {...props}
     />
   );
 }
 
-function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
+function ItemTitle({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       data-slot="item-title"
-      className={cn(
-        'gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center',
-        className,
-      )}
+      className="gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center"
       {...props}
     />
   );
 }
 
-function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
+function ItemDescription({ ...props }: Omit<React.ComponentProps<'p'>, 'className'>) {
   return (
     <p
       data-slot="item-description"
-      className={cn(
-        'text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4',
-        className,
-      )}
+      className="text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4"
       {...props}
     />
   );
 }
 
-function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div data-slot="item-actions" className={cn('gap-2 flex items-center', className)} {...props} />
-  );
+function ItemActions({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return <div data-slot="item-actions" className="gap-2 flex items-center" {...props} />;
 }
 
-function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function ItemHeader({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       data-slot="item-header"
-      className={cn('gap-2 flex basis-full items-center justify-between', className)}
+      className="gap-2 flex basis-full items-center justify-between"
       {...props}
     />
   );
 }
 
-function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function ItemFooter({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       data-slot="item-footer"
-      className={cn('gap-2 flex basis-full items-center justify-between', className)}
+      className="gap-2 flex basis-full items-center justify-between"
       {...props}
     />
   );

package/src/components/{ui → molecules}/page-header.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 PageHeaderProps extends Omit<React.ComponentProps<'div'>, 'className'> {
   title: string;