@trycompai/design-system 1.0.0

package/src/components/ui/calendar.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import * as React from 'react';
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+  type DayPickerProps,
+} from 'react-day-picker';
+
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+import { Button, buttonVariants } from './button';
+
+type CalendarButtonVariant = 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link';
+
+interface CalendarBaseProps {
+  buttonVariant?: CalendarButtonVariant;
+}
+
+// Calendar accepts all DayPickerProps except className/classNames (we control those internally)
+type CalendarProps = CalendarBaseProps & DayPickerProps;
+
+function Calendar({
+  showOutsideDays = true,
+  captionLayout = 'label',
+  buttonVariant = 'ghost',
+  formatters,
+  components,
+  className: _className,
+  classNames: _classNames,
+  ...props
+}: CalendarProps) {
+  const defaultClassNames = getDefaultClassNames();
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        'p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn('w-fit', defaultClassNames.root),
+        months: cn('flex gap-4 flex-col md:flex-row relative', defaultClassNames.months),
+        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
+        nav: cn(
+          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
+          defaultClassNames.nav,
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          'relative cn-calendar-dropdown-root rounded-(--cell-radius)',
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn('absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown),
+        caption_label: cn(
+          'select-none font-medium',
+          captionLayout === 'label'
+            ? 'text-sm'
+            : 'cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm [&>svg]:text-muted-foreground [&>svg]:size-3.5',
+          defaultClassNames.caption_label,
+        ),
+        table: 'w-full border-collapse',
+        weekdays: cn('flex', defaultClassNames.weekdays),
+        weekday: cn(
+          'text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none',
+          defaultClassNames.weekday,
+        ),
+        week: cn('flex w-full mt-2', defaultClassNames.week),
+        week_number_header: cn('select-none w-(--cell-size)', defaultClassNames.week_number_header),
+        week_number: cn(
+          'text-[0.8rem] select-none text-muted-foreground',
+          defaultClassNames.week_number,
+        ),
+        day: cn(
+          'relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none',
+          props.showWeekNumber
+            ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'
+            : '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)',
+          defaultClassNames.day,
+        ),
+        range_start: cn(
+          'rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate',
+          defaultClassNames.range_start,
+        ),
+        range_middle: cn('rounded-none', defaultClassNames.range_middle),
+        range_end: cn(
+          'rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate',
+          defaultClassNames.range_end,
+        ),
+        today: cn(
+          'bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none',
+          defaultClassNames.today,
+        ),
+        outside: cn(
+          'text-muted-foreground aria-selected:text-muted-foreground',
+          defaultClassNames.outside,
+        ),
+        disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
+        hidden: cn('invisible', defaultClassNames.hidden),
+      }}
+      components={{
+        Root: ({ rootRef, ...componentProps }) => {
+          return <div data-slot="calendar" ref={rootRef} {...componentProps} />;
+        },
+        Chevron: ({ orientation, ...componentProps }) => {
+          if (orientation === 'left') {
+            return <ChevronLeftIcon className="size-4" {...componentProps} />;
+          }
+
+          if (orientation === 'right') {
+            return <ChevronRightIcon className="size-4" {...componentProps} />;
+          }
+
+          return <ChevronDownIcon className="size-4" {...componentProps} />;
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...componentProps }) => {
+          return (
+            <td {...componentProps}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          );
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  );
+}
+
+function CalendarDayButton({
+  day,
+  modifiers,
+  className: _className,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="calendar-day"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      {...props}
+    />
+  );
+}
+
+export { Calendar, CalendarDayButton };
+export type { CalendarProps };

package/src/components/ui/card.tsx

@@ -0,0 +1,155 @@
+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',
+  {
+    variants: {
+      width: {
+        auto: '', // shrink to content (default behavior)
+        full: 'w-full', // fill parent container
+        sm: 'w-sm', // 24rem (384px)
+        md: 'w-md', // 28rem (448px)
+        lg: 'w-lg', // 32rem (512px)
+        xl: 'w-xl', // 36rem (576px)
+        '2xl': 'w-2xl', // 42rem (672px)
+        '3xl': 'w-3xl', // 48rem (768px)
+      },
+      maxWidth: {
+        sm: 'max-w-sm',
+        md: 'max-w-md',
+        lg: 'max-w-lg',
+        xl: 'max-w-xl',
+        '2xl': 'max-w-2xl',
+        '3xl': 'max-w-3xl',
+        full: 'max-w-full',
+      },
+      spacing: {
+        default: '',
+        tight: 'gap-3',
+        relaxed: 'gap-6',
+      },
+    },
+    defaultVariants: {
+      width: 'auto',
+      spacing: 'default',
+    },
+  },
+);
+
+interface CardProps
+  extends
+    Omit<React.ComponentProps<'div'>, 'className' | 'title'>,
+    VariantProps<typeof cardVariants> {
+  size?: 'default' | 'sm';
+  /** Card title - renders in CardHeader */
+  title?: React.ReactNode;
+  /** Card description - renders below title in CardHeader */
+  description?: React.ReactNode;
+  /** Action element(s) in the header (e.g., buttons, badges) */
+  headerAction?: React.ReactNode;
+  /** Footer content */
+  footer?: React.ReactNode;
+}
+
+function Card({
+  size = 'default',
+  width,
+  maxWidth,
+  title,
+  description,
+  headerAction,
+  footer,
+  children,
+  ...props
+}: CardProps) {
+  const hasHeader = title || description || headerAction;
+
+  // Check if children contain compound components (have data-slot)
+  const hasCompoundChildren = React.Children.toArray(children).some((child) => {
+    if (React.isValidElement(child)) {
+      const props = child.props as Record<string, unknown>;
+      return (
+        props['data-slot'] === 'card-header' ||
+        props['data-slot'] === 'card-content' ||
+        props['data-slot'] === 'card-footer'
+      );
+    }
+    return false;
+  });
+
+  return (
+    <div data-slot="card" data-size={size} className={cardVariants({ width, maxWidth })} {...props}>
+      {hasHeader && (
+        <CardHeader>
+          {title && <CardTitle>{title}</CardTitle>}
+          {description && <CardDescription>{description}</CardDescription>}
+          {headerAction && <CardAction>{headerAction}</CardAction>}
+        </CardHeader>
+      )}
+      {hasCompoundChildren ? children : children && <CardContent>{children}</CardContent>}
+      {footer && <CardFooter>{footer}</CardFooter>}
+    </div>
+  );
+}
+
+function CardHeader({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className="gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]"
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className="text-base leading-snug font-medium group-data-[size=sm]/card:text-sm"
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return <div data-slot="card-description" className="text-muted-foreground text-sm" {...props} />;
+}
+
+function CardAction({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className="col-start-2 row-span-2 row-start-1 self-start justify-self-end"
+      {...props}
+    />
+  );
+}
+
+function CardContent({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div data-slot="card-content" className="px-4 group-data-[size=sm]/card:px-3" {...props} />
+  );
+}
+
+function CardFooter({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className="bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center"
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  cardVariants,
+};

package/src/components/ui/carousel.tsx

@@ -0,0 +1,216 @@
+import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';
+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';
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: 'horizontal' | 'vertical';
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />');
+  }
+
+  return context;
+}
+
+function Carousel({
+  orientation = 'horizontal',
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === 'horizontal' ? 'x' : 'y',
+    },
+    plugins,
+  );
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return;
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, []);
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext],
+  );
+
+  React.useEffect(() => {
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
+
+  React.useEffect(() => {
+    if (!api) return;
+    onSelect(api);
+    api.on('reInit', onSelect);
+    api.on('select', onSelect);
+
+    return () => {
+      api?.off('select', onSelect);
+    };
+  }, [api, onSelect]);
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn('relative', className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
+  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)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CarouselPrevious({ ...props }: Omit<ButtonPrimitive.Props, 'className'>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <ButtonPrimitive
+      data-slot="carousel-previous"
+      className={cn(
+        buttonVariants({ variant: 'outline', size: 'icon-sm' }),
+        'rounded-full absolute touch-manipulation',
+        orientation === 'horizontal'
+          ? 'top-1/2 -left-12 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="sr-only">Previous slide</span>
+    </ButtonPrimitive>
+  );
+}
+
+function CarouselNext({ ...props }: Omit<ButtonPrimitive.Props, 'className'>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <ButtonPrimitive
+      data-slot="carousel-next"
+      className={cn(
+        buttonVariants({ variant: 'outline', size: 'icon-sm' }),
+        'rounded-full absolute touch-manipulation',
+        orientation === 'horizontal'
+          ? 'top-1/2 -right-12 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ChevronRightIcon />
+      <span className="sr-only">Next slide</span>
+    </ButtonPrimitive>
+  );
+}
+
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  useCarousel,
+  type CarouselApi,
+};