@trycompai/design-system 1.0.0 → 1.0.2

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

@@ -7,12 +7,12 @@ import { useRender } from '@base-ui/react/use-render';
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
-import { PanelLeftIcon } from 'lucide-react';
+import { SidePanelOpen } from '@carbon/icons-react';
 import { useIsMobile } from '../../../hooks/use-mobile';
 import { cn } from '../../../lib/utils';
-import { buttonVariants } from './button';
+import { buttonVariants } from '../atoms/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../molecules/tooltip';
 import { Sheet } from './sheet';
-import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
 
 const SIDEBAR_COOKIE_NAME = 'sidebar_state';
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -46,11 +46,10 @@ function SidebarProvider({
   defaultOpen = true,
   open: openProp,
   onOpenChange: setOpenProp,
-  className,
   style,
   children,
   ...props
-}: React.ComponentProps<'div'> & {
+}: Omit<React.ComponentProps<'div'>, 'className'> & {
   defaultOpen?: boolean;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
@@ -123,10 +122,7 @@ function SidebarProvider({
             ...style,
           } as React.CSSProperties
         }
-        className={cn(
-          'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
-          className,
-        )}
+        className="group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full"
         {...props}
       >
         {children}
@@ -139,10 +135,9 @@ function Sidebar({
   side = 'left',
   variant = 'sidebar',
   collapsible = 'offExamples',
-  className,
   children,
   ...props
-}: React.ComponentProps<'div'> & {
+}: Omit<React.ComponentProps<'div'>, 'className'> & {
   side?: 'left' | 'right';
   variant?: 'sidebar' | 'floating' | 'inset';
   collapsible?: 'offExamples' | 'icon' | 'none';
@@ -153,10 +148,7 @@ function Sidebar({
     return (
       <div
         data-slot="sidebar"
-        className={cn(
-          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
-          className,
-        )}
+        className="bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col"
         {...props}
       >
         {children}
@@ -211,7 +203,7 @@ function Sidebar({
 
   return (
     <div
-      className="group peer text-sidebar-foreground hidden md:block"
+      className="group peer text-sidebar-foreground hidden w-fit md:block"
       data-state={state}
       data-collapsible={state === 'collapsed' ? collapsible : ''}
       data-variant={variant}
@@ -241,7 +233,6 @@ function Sidebar({
           variant === 'floating' || variant === 'inset'
             ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
             : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
-          className,
         )}
         {...props}
       >
@@ -271,13 +262,13 @@ function SidebarTrigger({ onClick, ...props }: Omit<ButtonPrimitive.Props, 'clas
       }}
       {...props}
     >
-      <PanelLeftIcon />
+      <SidePanelOpen />
       <span className="sr-only">Toggle Sidebar</span>
     </ButtonPrimitive>
   );
 }
 
-function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
+function SidebarRail({ ...props }: Omit<React.ComponentProps<'button'>, 'className'>) {
   const { toggleSidebar } = useSidebar();
 
   return (
@@ -288,28 +279,17 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
       tabIndex={-1}
       onClick={toggleSidebar}
       title="Toggle Sidebar"
-      className={cn(
-        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
-        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
-        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-        'hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full',
-        '[[data-side=left][data-collapsible=offExamples]_&]:-right-2',
-        '[[data-side=right][data-collapsible=offExamples]_&]:-left-2',
-        className,
-      )}
+      className="hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize [[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full [[data-side=left][data-collapsible=offExamples]_&]:-right-2 [[data-side=right][data-collapsible=offExamples]_&]:-left-2"
       {...props}
     />
   );
 }
 
-function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
+function SidebarInset({ ...props }: Omit<React.ComponentProps<'main'>, 'className'>) {
   return (
     <main
       data-slot="sidebar-inset"
-      className={cn(
-        'bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col',
-        className,
-      )}
+      className="bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col"
       {...props}
     />
   );
@@ -326,23 +306,23 @@ function SidebarInput({ ...props }: Omit<React.ComponentProps<'input'>, 'classNa
   );
 }
 
-function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarHeader({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       data-slot="sidebar-header"
       data-sidebar="header"
-      className={cn('gap-2 p-2 flex flex-col', className)}
+      className="gap-2 p-2 flex flex-col"
       {...props}
     />
   );
 }
 
-function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarFooter({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       data-slot="sidebar-footer"
       data-sidebar="footer"
-      className={cn('gap-2 p-2 flex flex-col', className)}
+      className="gap-2 p-2 flex flex-col"
       {...props}
     />
   );
@@ -359,44 +339,53 @@ function SidebarSeparator({ ...props }: Omit<SeparatorPrimitive.Props, 'classNam
   );
 }
 
-function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarContent({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       data-slot="sidebar-content"
       data-sidebar="content"
-      className={cn(
-        'no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden',
-        className,
-      )}
+      className="no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden"
       {...props}
     />
   );
 }
 
-function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+const sidebarGroupVariants = cva('relative flex w-full min-w-0 flex-col', {
+  variants: {
+    padding: {
+      default: 'p-2',
+      none: 'p-0',
+    },
+  },
+  defaultVariants: {
+    padding: 'default',
+  },
+});
+
+function SidebarGroup({
+  padding = 'default',
+  ...props
+}: Omit<React.ComponentProps<'div'>, 'className'> & VariantProps<typeof sidebarGroupVariants>) {
   return (
     <div
       data-slot="sidebar-group"
       data-sidebar="group"
-      className={cn('p-2 relative flex w-full min-w-0 flex-col', className)}
+      className={sidebarGroupVariants({ padding })}
       {...props}
     />
   );
 }
 
 function SidebarGroupLabel({
-  className,
   render,
   ...props
-}: useRender.ComponentProps<'div'> & React.ComponentProps<'div'>) {
+}: Omit<useRender.ComponentProps<'div'>, 'className'> & Omit<React.ComponentProps<'div'>, 'className'>) {
   return useRender({
     defaultTagName: 'div',
     props: mergeProps<'div'>(
       {
-        className: cn(
+        className:
           'text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0',
-          className,
-        ),
       },
       props,
     ),
@@ -409,18 +398,15 @@ function SidebarGroupLabel({
 }
 
 function SidebarGroupAction({
-  className,
   render,
   ...props
-}: useRender.ComponentProps<'button'> & React.ComponentProps<'button'>) {
+}: Omit<useRender.ComponentProps<'button'>, 'className'> & Omit<React.ComponentProps<'button'>, 'className'>) {
   return useRender({
     defaultTagName: 'button',
     props: mergeProps<'button'>(
       {
-        className: cn(
+        className:
           'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden',
-          className,
-        ),
       },
       props,
     ),
@@ -432,34 +418,34 @@ function SidebarGroupAction({
   });
 }
 
-function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarGroupContent({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       data-slot="sidebar-group-content"
       data-sidebar="group-content"
-      className={cn('text-sm w-full', className)}
+      className="text-sm w-full"
       {...props}
     />
   );
 }
 
-function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
+function SidebarMenu({ ...props }: Omit<React.ComponentProps<'ul'>, 'className'>) {
   return (
     <ul
       data-slot="sidebar-menu"
       data-sidebar="menu"
-      className={cn('gap-1 flex w-full min-w-0 flex-col', className)}
+      className="gap-1 flex w-full min-w-0 flex-col"
       {...props}
     />
   );
 }
 
-function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
+function SidebarMenuItem({ ...props }: Omit<React.ComponentProps<'li'>, 'className'>) {
   return (
     <li
       data-slot="sidebar-menu-item"
       data-sidebar="menu-item"
-      className={cn('group/menu-item relative', className)}
+      className="group/menu-item relative"
       {...props}
     />
   );
@@ -493,10 +479,9 @@ function SidebarMenuButton({
   variant = 'default',
   size = 'default',
   tooltip,
-  className,
   ...props
-}: useRender.ComponentProps<'button'> &
-  React.ComponentProps<'button'> & {
+}: Omit<useRender.ComponentProps<'button'>, 'className'> &
+  Omit<React.ComponentProps<'button'>, 'className'> & {
     isActive?: boolean;
     tooltip?: string | React.ComponentProps<typeof TooltipContent>;
   } & VariantProps<typeof sidebarMenuButtonVariants>) {
@@ -505,7 +490,7 @@ function SidebarMenuButton({
     defaultTagName: 'button',
     props: mergeProps<'button'>(
       {
-        className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+        className: sidebarMenuButtonVariants({ variant, size }),
       },
       props,
     ),
@@ -542,12 +527,11 @@ function SidebarMenuButton({
 }
 
 function SidebarMenuAction({
-  className,
   render,
   showOnHover = false,
   ...props
-}: useRender.ComponentProps<'button'> &
-  React.ComponentProps<'button'> & {
+}: Omit<useRender.ComponentProps<'button'>, 'className'> &
+  Omit<React.ComponentProps<'button'>, 'className'> & {
     showOnHover?: boolean;
   }) {
   return useRender({
@@ -558,7 +542,6 @@ function SidebarMenuAction({
           'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0',
           showOnHover &&
             'peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0',
-          className,
         ),
       },
       props,
@@ -571,15 +554,12 @@ function SidebarMenuAction({
   });
 }
 
-function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarMenuBadge({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
-      className={cn(
-        'text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden',
-        className,
-      )}
+      className="text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden"
       {...props}
     />
   );
@@ -622,26 +602,23 @@ function SidebarMenuSkeleton({
   );
 }
 
-function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
+function SidebarMenuSub({ ...props }: Omit<React.ComponentProps<'ul'>, 'className'>) {
   return (
     <ul
       data-slot="sidebar-menu-sub"
       data-sidebar="menu-sub"
-      className={cn(
-        'border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col',
-        className,
-      )}
+      className="border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col"
       {...props}
     />
   );
 }
 
-function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {
+function SidebarMenuSubItem({ ...props }: Omit<React.ComponentProps<'li'>, 'className'>) {
   return (
     <li
       data-slot="sidebar-menu-sub-item"
       data-sidebar="menu-sub-item"
-      className={cn('group/menu-sub-item relative', className)}
+      className="group/menu-sub-item relative"
       {...props}
     />
   );
@@ -651,10 +628,9 @@ function SidebarMenuSubButton({
   render,
   size = 'md',
   isActive = false,
-  className,
   ...props
-}: useRender.ComponentProps<'a'> &
-  React.ComponentProps<'a'> & {
+}: Omit<useRender.ComponentProps<'a'>, 'className'> &
+  Omit<React.ComponentProps<'a'>, 'className'> & {
     size?: 'sm' | 'md';
     isActive?: boolean;
   }) {
@@ -662,10 +638,8 @@ function SidebarMenuSubButton({
     defaultTagName: 'a',
     props: mergeProps<'a'>(
       {
-        className: cn(
+        className:
           'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0',
-          className,
-        ),
       },
       props,
     ),
@@ -684,6 +658,7 @@ export {
   SidebarContent,
   SidebarFooter,
   SidebarGroup,
+  sidebarGroupVariants,
   SidebarGroupAction,
   SidebarGroupContent,
   SidebarGroupLabel,

package/src/components/organisms/sonner.tsx

@@ -0,0 +1,41 @@
+import {
+  CheckmarkFilled,
+  Information,
+  Misuse,
+  Renew,
+  Warning,
+} from '@carbon/icons-react';
+import { Toaster as Sonner, type ToasterProps } from 'sonner';
+
+const Toaster = ({ theme = 'system', ...props }: ToasterProps) => {
+  return (
+    <Sonner
+      theme={theme}
+      className="toaster group"
+      icons={{
+        success: <CheckmarkFilled className="size-4 text-success" />,
+        info: <Information className="size-4 text-info" />,
+        warning: <Warning className="size-4 text-warning" />,
+        error: <Misuse className="size-4 text-destructive" />,
+        loading: <Renew 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',
+          description: '!text-muted-foreground',
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

package/src/components/ui/index.ts

@@ -1,61 +1,3 @@
-export * from './accordion';
-export * from './alert';
-export * from './alert-dialog';
-export * from './aspect-ratio';
-export * from './avatar';
-export * from './badge';
-export * from './breadcrumb';
-export * from './button';
-export * from './button-group';
-export * from './calendar';
-export * from './card';
-export * from './carousel';
-export * from './chart';
-export * from './checkbox';
-export * from './collapsible';
-export * from './combobox';
-export * from './command';
-export * from './container';
-export * from './context-menu';
-export * from './dialog';
-export * from './drawer';
-export * from './dropdown-menu';
-export * from './empty';
-export * from './field';
-export * from './grid';
-export * from './heading';
-export * from './hover-card';
-export * from './input';
-export * from './input-group';
-export * from './input-otp';
-export * from './item';
-export * from './kbd';
-export * from './label';
-export * from './menubar';
-export * from './navigation-menu';
-export * from './page-header';
-export * from './page-layout';
-export * from './pagination';
-export * from './popover';
-export * from './progress';
-export * from './radio-group';
-export * from './resizable';
-export * from './scroll-area';
-export * from './section';
-export * from './select';
-export * from './separator';
-export * from './sheet';
-export * from './sidebar';
-export * from './skeleton';
-export * from './slider';
-export * from './sonner';
-export * from './spinner';
-export * from './stack';
-export * from './switch';
-export * from './table';
-export * from './tabs';
-export * from './text';
-export * from './textarea';
-export * from './toggle';
-export * from './toggle-group';
-export * from './tooltip';
+export * from '../atoms';
+export * from '../molecules';
+export * from '../organisms';