@trycompai/design-system 1.0.0 → 1.0.2

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,29 @@
+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';
+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 './settings';
+export * from './table';
+export * from './tabs';
+export * from './theme-switcher';
+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 { Subtract } from '@carbon/icons-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}
+    >
+      <Subtract />
+    </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/molecules/page-header.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+
+import { Heading } from '../atoms/heading';
+import { Text } from '../atoms/text';
+import { Stack } from '../atoms/stack';
+
+interface PageHeaderProps extends Omit<React.ComponentProps<'div'>, 'className'> {
+  title: string;
+  description?: string;
+  /** Additional descriptive text below description */
+  meta?: string;
+  actions?: React.ReactNode;
+}
+
+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-start justify-between gap-4" {...props}>
+      <Stack gap="1">
+        <Heading level="1">{title}</Heading>
+        {description && (
+          <Text size="sm" variant="muted">
+            {description}
+          </Text>
+        )}
+        {meta && (
+          <Text size="xs" variant="muted">
+            {meta}
+          </Text>
+        )}
+        {nonActionChildren}
+      </Stack>
+      {resolvedActions &&
+        (React.isValidElement(resolvedActions) && resolvedActions.type === PageHeaderActions ? (
+          resolvedActions
+        ) : (
+          <PageHeaderActions>{resolvedActions}</PageHeaderActions>
+        ))}
+    </div>
+  );
+}
+
+function PageHeaderTitle({ ...props }: Omit<React.ComponentProps<typeof Heading>, 'className'>) {
+  return <Heading data-slot="page-header-title" level="1" {...props} />;
+}
+
+function PageHeaderDescription({ ...props }: Omit<React.ComponentProps<typeof Text>, 'className'>) {
+  return <Text data-slot="page-header-description" size="sm" variant="muted" {...props} />;
+}
+
+function PageHeaderActions({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div data-slot="page-header-actions" className="flex shrink-0 items-center gap-3" {...props} />
+  );
+}
+
+// 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/{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 { ChevronLeft, ChevronRight, OverflowMenuHorizontal } from '@carbon/icons-react';
+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,10 +49,10 @@ 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" />
+      <ChevronLeft data-icon="inline-start" />
       <span className="hidden sm:block">Previous</span>
     </ButtonPrimitive>
   );
@@ -67,27 +61,24 @@ 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>
-      <ChevronRightIcon data-icon="inline-end" />
+      <ChevronRight data-icon="inline-end" />
     </ButtonPrimitive>
   );
 }
 
-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 />
+      <OverflowMenuHorizontal />
       <span className="sr-only">More pages</span>
     </span>
   );

package/src/components/{ui → 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

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