@trycompai/design-system 1.0.0 → 1.0.2

package/src/components/ui/navigation-menu.tsx

@@ -1,147 +0,0 @@
-import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';
-import { cva } from 'class-variance-authority';
-
-import { ChevronDownIcon } from 'lucide-react';
-import { cn } from '../../../lib/utils';
-
-function NavigationMenu({ className, children, ...props }: NavigationMenuPrimitive.Root.Props) {
-  return (
-    <NavigationMenuPrimitive.Root
-      data-slot="navigation-menu"
-      className={cn(
-        'max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <NavigationMenuPositioner />
-    </NavigationMenuPrimitive.Root>
-  );
-}
-
-function NavigationMenuList({ className, ...props }: NavigationMenuPrimitive.List.Props) {
-  return (
-    <NavigationMenuPrimitive.List
-      data-slot="navigation-menu-list"
-      className={cn('gap-0 group flex flex-1 list-none items-center justify-center', className)}
-      {...props}
-    />
-  );
-}
-
-function NavigationMenuItem({ className, ...props }: NavigationMenuPrimitive.Item.Props) {
-  return (
-    <NavigationMenuPrimitive.Item
-      data-slot="navigation-menu-item"
-      className={cn('relative', className)}
-      {...props}
-    />
-  );
-}
-
-const navigationMenuTriggerStyle = cva(
-  'bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-4 py-2 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none',
-);
-
-function NavigationMenuTrigger({
-  className,
-  children,
-  ...props
-}: NavigationMenuPrimitive.Trigger.Props) {
-  return (
-    <NavigationMenuPrimitive.Trigger
-      data-slot="navigation-menu-trigger"
-      className={cn(navigationMenuTriggerStyle(), 'group', className)}
-      {...props}
-    >
-      {children}{' '}
-      <ChevronDownIcon
-        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
-        aria-hidden="true"
-      />
-    </NavigationMenuPrimitive.Trigger>
-  );
-}
-
-function NavigationMenuContent({ className, ...props }: NavigationMenuPrimitive.Content.Props) {
-  return (
-    <NavigationMenuPrimitive.Content
-      data-slot="navigation-menu-content"
-      className={cn(
-        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-2 pr-2.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function NavigationMenuPositioner({
-  className,
-  side = 'bottom',
-  sideOffset = 8,
-  align = 'start',
-  alignOffset = 0,
-  ...props
-}: NavigationMenuPrimitive.Positioner.Props) {
-  return (
-    <NavigationMenuPrimitive.Portal>
-      <NavigationMenuPrimitive.Positioner
-        side={side}
-        sideOffset={sideOffset}
-        align={align}
-        alignOffset={alignOffset}
-        className={cn(
-          'transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] data-[instant]:transition-none',
-          className,
-        )}
-        {...props}
-      >
-        <NavigationMenuPrimitive.Popup className="bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin)">
-          <NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
-        </NavigationMenuPrimitive.Popup>
-      </NavigationMenuPrimitive.Positioner>
-    </NavigationMenuPrimitive.Portal>
-  );
-}
-
-function NavigationMenuLink({ className, ...props }: NavigationMenuPrimitive.Link.Props) {
-  return (
-    <NavigationMenuPrimitive.Link
-      data-slot="navigation-menu-link"
-      className={cn(
-        "data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function NavigationMenuIndicator({ className, ...props }: NavigationMenuPrimitive.Icon.Props) {
-  return (
-    <NavigationMenuPrimitive.Icon
-      data-slot="navigation-menu-indicator"
-      className={cn(
-        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
-        className,
-      )}
-      {...props}
-    >
-      <div className="bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45" />
-    </NavigationMenuPrimitive.Icon>
-  );
-}
-
-export {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuIndicator,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuPositioner,
-  NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
-};

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

@@ -1,51 +0,0 @@
-import * as React from 'react';
-
-import { Heading } from './heading';
-import { Stack } from './stack';
-import { Text } from './text';
-
-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) {
-  return (
-    <div data-slot="page-header" className="flex items-center 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>
-        )}
-        {children}
-      </Stack>
-      {actions && <div className="flex shrink-0 items-center gap-3">{actions}</div>}
-    </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} />
-  );
-}
-
-export { PageHeader, PageHeaderActions, PageHeaderDescription, PageHeaderTitle };

package/src/components/ui/page-layout.tsx

@@ -1,65 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-const pageLayoutVariants = cva('min-h-dvh bg-background text-foreground', {
-  variants: {
-    variant: {
-      default: 'flex flex-col',
-      center: 'flex items-center justify-center',
-    },
-    contentWidth: {
-      auto: '',
-      sm: 'w-full max-w-sm',
-      md: 'w-full max-w-md',
-      lg: 'w-full max-w-lg',
-      xl: 'w-full max-w-xl',
-      '2xl': 'w-full max-w-2xl',
-      '3xl': 'w-full max-w-3xl',
-      full: 'w-full max-w-full',
-    },
-    padding: {
-      none: '',
-      sm: 'px-4 py-6',
-      default: 'px-4 py-10 sm:px-6 lg:px-8',
-      lg: 'px-6 py-12 sm:px-8 lg:px-12',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-    contentWidth: 'auto',
-    padding: 'default',
-  },
-});
-
-interface PageLayoutProps
-  extends
-    Omit<React.ComponentProps<'div'>, 'className' | 'children'>,
-    VariantProps<typeof pageLayoutVariants> {
-  children?: React.ReactNode;
-}
-
-function PageLayout({ variant, padding, contentWidth, children, ...props }: PageLayoutProps) {
-  const resolvedContentWidth = contentWidth ?? (variant === 'center' ? 'lg' : 'auto');
-
-  return (
-    <div
-      data-slot="page-layout"
-      data-variant={variant}
-      className={pageLayoutVariants({ variant, padding })}
-      {...props}
-    >
-      {resolvedContentWidth !== 'auto' ? (
-        <div
-          data-slot="page-layout-content"
-          className={pageLayoutVariants({ contentWidth: resolvedContentWidth })}
-        >
-          {children}
-        </div>
-      ) : (
-        children
-      )}
-    </div>
-  );
-}
-
-export { PageLayout, pageLayoutVariants };

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

@@ -1,37 +0,0 @@
-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) {
-  return (
-    <RadioGroupPrimitive
-      data-slot="radio-group"
-      className={cn('grid gap-2 w-full', className)}
-      {...props}
-    />
-  );
-}
-
-function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
-  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,
-      )}
-      {...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"
-      >
-        <CircleIcon className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current" />
-      </RadioPrimitive.Indicator>
-    </RadioPrimitive.Root>
-  );
-}
-
-export { RadioGroup, RadioGroupItem };

package/src/components/ui/sonner.tsx

@@ -1,43 +0,0 @@
-import {
-  CircleCheckIcon,
-  InfoIcon,
-  Loader2Icon,
-  OctagonXIcon,
-  TriangleAlertIcon,
-} from 'lucide-react';
-import { useTheme } from 'next-themes';
-import { Toaster as Sonner, type ToasterProps } from 'sonner';
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = 'system' } = useTheme();
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps['theme']}
-      className="toaster group"
-      icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
-        loading: <Loader2Icon className="size-4 animate-spin" />,
-      }}
-      style={
-        {
-          '--normal-bg': 'var(--popover)',
-          '--normal-text': 'var(--popover-foreground)',
-          '--normal-border': 'var(--border)',
-          '--border-radius': 'var(--radius)',
-        } as React.CSSProperties
-      }
-      toastOptions={{
-        classNames: {
-          toast: 'cn-toast',
-        },
-      }}
-      {...props}
-    />
-  );
-};
-
-export { Toaster };

package/src/components/ui/stack.tsx

@@ -1,72 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-const stackVariants = cva('flex', {
-  variants: {
-    direction: {
-      row: 'flex-row',
-      column: 'flex-col',
-      'row-reverse': 'flex-row-reverse',
-      'column-reverse': 'flex-col-reverse',
-    },
-    align: {
-      start: 'items-start',
-      center: 'items-center',
-      end: 'items-end',
-      stretch: 'items-stretch',
-      baseline: 'items-baseline',
-    },
-    textAlign: {
-      left: 'text-left',
-      center: 'text-center',
-      right: 'text-right',
-    },
-    justify: {
-      start: 'justify-start',
-      center: 'justify-center',
-      end: 'justify-end',
-      between: 'justify-between',
-      around: 'justify-around',
-      evenly: 'justify-evenly',
-    },
-    gap: {
-      '0': 'gap-0',
-      '0.5': 'gap-0.5',
-      '1': 'gap-1',
-      '1.5': 'gap-1.5',
-      '2': 'gap-2',
-      '2.5': 'gap-2.5',
-      '3': 'gap-3',
-      '4': 'gap-4',
-      '5': 'gap-5',
-      '6': 'gap-6',
-      '8': 'gap-8',
-      '10': 'gap-10',
-      '12': 'gap-12',
-    },
-    wrap: {
-      true: 'flex-wrap',
-      false: 'flex-nowrap',
-    },
-  },
-  defaultVariants: {
-    direction: 'column',
-    gap: '0',
-    wrap: false,
-  },
-});
-
-interface StackProps
-  extends Omit<React.ComponentProps<'div'>, 'className'>, VariantProps<typeof stackVariants> {}
-
-function Stack({ direction, align, justify, gap, wrap, textAlign, ...props }: StackProps) {
-  return (
-    <div
-      data-slot="stack"
-      className={stackVariants({ direction, align, justify, gap, wrap, textAlign })}
-      {...props}
-    />
-  );
-}
-
-export { Stack, stackVariants };

package/src/components/ui/tabs.tsx

@@ -1,69 +0,0 @@
-'use client';
-
-import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-function Tabs({
-  orientation = 'horizontal',
-  ...props
-}: Omit<TabsPrimitive.Root.Props, 'className'>) {
-  return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      data-orientation={orientation}
-      className="gap-2 group/tabs flex data-[orientation=horizontal]:flex-col"
-      {...props}
-    />
-  );
-}
-
-const tabsListVariants = cva(
-  'rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
-  {
-    variants: {
-      variant: {
-        default: 'bg-muted',
-        line: 'gap-1 bg-transparent',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-function TabsList({
-  variant = 'default',
-  ...props
-}: Omit<TabsPrimitive.List.Props, 'className'> & VariantProps<typeof tabsListVariants>) {
-  return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      data-variant={variant}
-      className={tabsListVariants({ variant })}
-      {...props}
-    />
-  );
-}
-
-function TabsTrigger({ ...props }: Omit<TabsPrimitive.Tab.Props, 'className'>) {
-  return (
-    <TabsPrimitive.Tab
-      data-slot="tabs-trigger"
-      className="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100"
-      {...props}
-    />
-  );
-}
-
-function TabsContent({ ...props }: Omit<TabsPrimitive.Panel.Props, 'className'>) {
-  return (
-    <TabsPrimitive.Panel
-      data-slot="tabs-content"
-      className="text-sm flex-1 outline-none"
-      {...props}
-    />
-  );
-}
-
-export { Tabs, TabsContent, TabsList, tabsListVariants, TabsTrigger };