@trycompai/design-system 1.0.18 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycompai/design-system",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "Design system for Comp AI - shadcn-style components with Tailwind CSS",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/atoms/text.tsx

@@ -15,6 +15,8 @@ const textVariants = cva('', {
       primary: 'text-primary',
       destructive: 'text-destructive',
       success: 'text-green-600 dark:text-green-400',
+      warning: 'text-warning',
+      info: 'text-info',
     },
     weight: {
       normal: 'font-normal',

package/src/components/molecules/index.ts

@@ -23,6 +23,7 @@ export * from './scroll-area';
 export * from './section';
 export * from './select';
 export * from './settings';
+export * from './split-button';
 export * from './table';
 export * from './tabs';
 export * from './theme-switcher';

package/src/components/molecules/select.tsx

@@ -136,6 +136,16 @@ function SelectSeparator({ ...props }: Omit<SelectPrimitive.Separator.Props, 'cl
   );
 }
 
+function SelectEmpty({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="select-empty"
+      className="text-muted-foreground py-6 text-center text-sm"
+      {...props}
+    />
+  );
+}
+
 function SelectScrollUpButton({
   ...props
 }: Omit<React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>, 'className'>) {
@@ -167,6 +177,7 @@ function SelectScrollDownButton({
 export {
   Select,
   SelectContent,
+  SelectEmpty,
   SelectGroup,
   SelectItem,
   SelectLabel,

package/src/components/molecules/split-button.tsx

@@ -0,0 +1,190 @@
+import * as React from 'react';
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ChevronDown } from '@carbon/icons-react';
+
+import { Spinner } from '../atoms/spinner';
+import {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from '../organisms/dropdown-menu';
+
+const splitButtonVariants = cva(
+  'inline-flex items-stretch rounded-md',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [&_[data-slot=split-button-divider]]:bg-primary-foreground/20',
+        outline: 'border border-border bg-background [&_[data-slot=split-button-divider]]:bg-border',
+        secondary: 'bg-secondary text-secondary-foreground [&_[data-slot=split-button-divider]]:bg-secondary-foreground/20',
+        ghost: '[&_[data-slot=split-button-divider]]:bg-border',
+        destructive: 'bg-destructive/10 text-destructive [&_[data-slot=split-button-divider]]:bg-destructive/20',
+      },
+      size: {
+        xs: 'h-5 text-[11px]',
+        sm: 'h-6 text-xs',
+        default: 'h-7 text-[13px]',
+        lg: 'h-8 text-[13px]',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+const splitButtonMainVariants = cva(
+  'inline-flex items-center justify-center gap-1 font-medium leading-none rounded-l-md transition-all duration-200 ease-out outline-none select-none cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-primary/90 active:bg-primary/80',
+        outline: 'hover:bg-muted active:bg-muted/80',
+        secondary: 'hover:bg-secondary/80 active:bg-secondary/70',
+        ghost: 'hover:bg-accent active:bg-accent/80',
+        destructive: 'hover:bg-destructive/15 active:bg-destructive/20',
+      },
+      size: {
+        xs: "px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "px-2 [&_svg:not([class*='size-'])]:size-3.5",
+        default: "px-2 [&_svg:not([class*='size-'])]:size-4",
+        lg: "px-2.5 [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+const splitButtonTriggerVariants = cva(
+  'inline-flex items-center justify-center rounded-r-md transition-all duration-200 ease-out outline-none select-none cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-primary/90 active:bg-primary/80',
+        outline: 'hover:bg-muted active:bg-muted/80',
+        secondary: 'hover:bg-secondary/80 active:bg-secondary/70',
+        ghost: 'hover:bg-accent active:bg-accent/80',
+        destructive: 'hover:bg-destructive/15 active:bg-destructive/20',
+      },
+      size: {
+        xs: "w-5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "w-6 [&_svg:not([class*='size-'])]:size-3.5",
+        default: "w-7 [&_svg:not([class*='size-'])]:size-4",
+        lg: "w-8 [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+type SplitButtonAction = {
+  /** Unique identifier for the action */
+  id: string;
+  /** Label to display in the dropdown */
+  label: React.ReactNode;
+  /** Callback when action is clicked */
+  onClick?: () => void;
+  /** Whether the action is destructive */
+  variant?: 'default' | 'destructive';
+  /** Icon to show before the label */
+  icon?: React.ReactNode;
+  /** Whether to show a separator after this item */
+  separator?: boolean;
+  /** Whether this action is disabled */
+  disabled?: boolean;
+};
+
+type SplitButtonProps = VariantProps<typeof splitButtonVariants> & {
+  /** Content of the main button */
+  children: React.ReactNode;
+  /** Additional actions shown in the dropdown */
+  actions: SplitButtonAction[];
+  /** Callback when main button is clicked */
+  onClick?: () => void;
+  /** Whether the button is disabled */
+  disabled?: boolean;
+  /** Show loading spinner and disable button */
+  loading?: boolean;
+  /** Icon to show on the left side of the button */
+  iconLeft?: React.ReactNode;
+  /** Dropdown menu alignment */
+  menuAlign?: 'start' | 'center' | 'end';
+  /** Side of the trigger to show the dropdown */
+  menuSide?: 'top' | 'bottom';
+};
+
+function SplitButton({
+  children,
+  actions,
+  onClick,
+  variant = 'default',
+  size = 'default',
+  menuAlign = 'end',
+  menuSide = 'bottom',
+  disabled,
+  loading,
+  iconLeft,
+}: SplitButtonProps) {
+  const isDisabled = disabled || loading;
+
+  return (
+    <div
+      data-slot="split-button"
+      className={splitButtonVariants({ variant, size })}
+    >
+      <button
+        type="button"
+        data-slot="split-button-main"
+        onClick={onClick}
+        disabled={isDisabled}
+        className={splitButtonMainVariants({ variant, size })}
+      >
+        {loading ? (
+          <Spinner />
+        ) : iconLeft ? (
+          <span data-icon="inline-start">{iconLeft}</span>
+        ) : null}
+        {children}
+      </button>
+      <span
+        data-slot="split-button-divider"
+        className="w-px self-stretch"
+        aria-hidden="true"
+      />
+      <MenuPrimitive.Root>
+        <MenuPrimitive.Trigger
+          disabled={isDisabled}
+          className={splitButtonTriggerVariants({ variant, size })}
+        >
+          <ChevronDown />
+        </MenuPrimitive.Trigger>
+        <DropdownMenuContent align={menuAlign} side={menuSide}>
+          {actions.map((action) => (
+            <React.Fragment key={action.id}>
+              <DropdownMenuItem
+                onClick={action.onClick}
+                variant={action.variant}
+                disabled={action.disabled}
+              >
+                {action.icon}
+                {action.label}
+              </DropdownMenuItem>
+              {action.separator && <DropdownMenuSeparator />}
+            </React.Fragment>
+          ))}
+        </DropdownMenuContent>
+      </MenuPrimitive.Root>
+    </div>
+  );
+}
+
+export { SplitButton };
+export type { SplitButtonProps, SplitButtonAction };

package/src/components/organisms/alert-dialog.tsx

@@ -79,7 +79,7 @@ function AlertDialogTitle({
   return (
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
-      className="text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2"
+      className="text-sm font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2"
       {...props}
     />
   );
@@ -91,7 +91,7 @@ function AlertDialogDescription({
   return (
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
-      className="text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3"
+      className="text-muted-foreground font-normal *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3"
       {...props}
     />
   );

package/src/components/organisms/approval-banner.tsx

@@ -0,0 +1,369 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  Time,
+  Information,
+  CheckmarkOutline,
+  Checkmark,
+  Close,
+} from '@carbon/icons-react';
+
+import { Button } from '../atoms/button';
+import { Stack, HStack } from '../atoms/stack';
+import { Text } from '../atoms/text';
+import { SplitButton, type SplitButtonAction } from '../molecules/split-button';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from './alert-dialog';
+
+const approvalBannerVariants = cva(
+  'rounded-lg border border-l-4 bg-background p-4',
+  {
+    variants: {
+      variant: {
+        warning: 'border-l-warning border-border',
+        info: 'border-l-info border-border',
+        default: 'border-l-primary border-border',
+      },
+      layout: {
+        stacked: '',
+        inline:
+          '[&>[data-slot=stack]]:flex-row [&>[data-slot=stack]]:items-center [&>[data-slot=stack]]:justify-between [&_[data-slot=approval-banner-content]]:min-w-0 [&_[data-slot=approval-banner-content]]:flex-1 [&_[data-slot=approval-banner-actions]]:shrink-0 [&_[data-slot=approval-banner-description]]:truncate',
+      },
+    },
+    defaultVariants: {
+      variant: 'warning',
+      layout: 'stacked',
+    },
+  }
+);
+
+const textVariantMap = {
+  warning: 'warning',
+  info: 'info',
+  default: 'primary',
+} as const;
+
+const iconMap = {
+  warning: Time,
+  info: Information,
+  default: CheckmarkOutline,
+};
+
+type ConfirmationConfig = {
+  /** Title of the confirmation dialog */
+  title: string;
+  /** Description of the confirmation dialog */
+  description?: string;
+  /** Custom content to render in the dialog body (below description) */
+  content?: React.ReactNode;
+  /** Confirm button text */
+  confirmText?: string;
+  /** Cancel button text */
+  cancelText?: string;
+  /** Called when the dialog is cancelled/dismissed */
+  onCancel?: () => void;
+};
+
+type ApprovalBannerProps = VariantProps<typeof approvalBannerVariants> & {
+  /** Title of the approval banner */
+  title: string;
+  /** Description text */
+  description: React.ReactNode;
+  /** Callback when approve is confirmed */
+  onApprove?: () => void | Promise<void>;
+  /** Callback when reject is confirmed */
+  onReject?: () => void | Promise<void>;
+  /** Custom approve button text */
+  approveText?: string;
+  /** Custom reject button text */
+  rejectText?: string;
+  /** Whether approve action is loading */
+  approveLoading?: boolean;
+  /** Whether reject action is loading */
+  rejectLoading?: boolean;
+  /** Custom icon to display */
+  icon?: React.ReactNode;
+  /** Hide the reject button */
+  hideReject?: boolean;
+  /** Additional actions to show in dropdown (inline layout only) */
+  additionalActions?: SplitButtonAction[];
+  /** Confirmation dialog config for approve action. If provided, shows dialog before calling onApprove */
+  approveConfirmation?: ConfirmationConfig;
+  /** Confirmation dialog config for reject action. If provided, shows dialog before calling onReject */
+  rejectConfirmation?: ConfirmationConfig;
+};
+
+function ApprovalBanner({
+  variant = 'warning',
+  layout = 'stacked',
+  title,
+  description,
+  onApprove,
+  onReject,
+  approveText = 'Approve',
+  rejectText = 'Reject',
+  approveLoading = false,
+  rejectLoading = false,
+  icon,
+  hideReject = false,
+  additionalActions = [],
+  approveConfirmation,
+  rejectConfirmation,
+}: ApprovalBannerProps) {
+  const [approveDialogOpen, setApproveDialogOpen] = React.useState(false);
+  const [rejectDialogOpen, setRejectDialogOpen] = React.useState(false);
+  const [isApproving, setIsApproving] = React.useState(false);
+  const [isRejecting, setIsRejecting] = React.useState(false);
+
+  const IconComponent = iconMap[variant ?? 'warning'];
+  const textVariant = textVariantMap[variant ?? 'warning'];
+  const isLoading = approveLoading || rejectLoading || isApproving || isRejecting;
+
+  const handleApproveClick = () => {
+    if (approveConfirmation) {
+      setApproveDialogOpen(true);
+    } else {
+      onApprove?.();
+    }
+  };
+
+  const handleRejectClick = () => {
+    if (rejectConfirmation) {
+      setRejectDialogOpen(true);
+    } else {
+      onReject?.();
+    }
+  };
+
+  const handleApproveConfirm = async () => {
+    setIsApproving(true);
+    try {
+      await onApprove?.();
+    } finally {
+      setIsApproving(false);
+      setApproveDialogOpen(false);
+    }
+  };
+
+  const handleRejectConfirm = async () => {
+    setIsRejecting(true);
+    try {
+      await onReject?.();
+    } finally {
+      setIsRejecting(false);
+      setRejectDialogOpen(false);
+    }
+  };
+
+  const handleApproveDialogChange = (open: boolean) => {
+    setApproveDialogOpen(open);
+    if (!open && !isApproving) {
+      approveConfirmation?.onCancel?.();
+    }
+  };
+
+  const handleRejectDialogChange = (open: boolean) => {
+    setRejectDialogOpen(open);
+    if (!open && !isRejecting) {
+      rejectConfirmation?.onCancel?.();
+    }
+  };
+
+  // Build dropdown actions for inline layout
+  const dropdownActions: SplitButtonAction[] = React.useMemo(() => {
+    const actions: SplitButtonAction[] = [];
+
+    if (!hideReject) {
+      actions.push({
+        id: 'reject',
+        label: rejectText,
+        icon: <Close size={16} />,
+        onClick: handleRejectClick,
+        variant: 'destructive',
+        separator: additionalActions.length > 0,
+      });
+    }
+
+    return [...actions, ...additionalActions];
+  }, [hideReject, rejectText, additionalActions, rejectConfirmation]);
+
+  const isInline = layout === 'inline';
+
+  const bannerContent = isInline ? (
+    <div
+      data-slot="approval-banner"
+      className={approvalBannerVariants({ variant, layout })}
+    >
+      <HStack gap="3" align="start">
+        <HStack gap="3" align="start" data-slot="approval-banner-content">
+          <Text as="span" variant={textVariant}>
+            {icon ?? <IconComponent size={20} />}
+          </Text>
+          <Stack gap="0">
+            <Text
+              size="sm"
+              weight="medium"
+              leading="tight"
+              variant={textVariant}
+            >
+              {title}
+            </Text>
+            <Text
+              as="span"
+              size="sm"
+              variant="muted"
+              data-slot="approval-banner-description"
+            >
+              {description}
+            </Text>
+          </Stack>
+        </HStack>
+        <HStack data-slot="approval-banner-actions">
+          {dropdownActions.length > 0 ? (
+            <SplitButton
+              onClick={handleApproveClick}
+              disabled={isLoading}
+              loading={approveLoading || isApproving}
+              iconLeft={<Checkmark size={16} />}
+              actions={dropdownActions}
+            >
+              {approveText}
+            </SplitButton>
+          ) : (
+            <Button
+              onClick={handleApproveClick}
+              disabled={isLoading}
+              loading={approveLoading || isApproving}
+              iconLeft={<Checkmark size={16} />}
+            >
+              {approveText}
+            </Button>
+          )}
+        </HStack>
+      </HStack>
+    </div>
+  ) : (
+    <div
+      data-slot="approval-banner"
+      className={approvalBannerVariants({ variant, layout })}
+    >
+      <HStack gap="3" align="start">
+        <Text as="span" variant={textVariant}>
+          {icon ?? <IconComponent size={20} />}
+        </Text>
+        <Stack gap="3">
+          <Stack gap="1">
+            <Text
+              size="sm"
+              weight="medium"
+              leading="tight"
+              variant={textVariant}
+            >
+              {title}
+            </Text>
+            <Text size="sm" variant="muted">
+              {description}
+            </Text>
+          </Stack>
+          <HStack gap="3">
+            {!hideReject && (
+              <Button
+                variant="outline"
+                onClick={handleRejectClick}
+                disabled={isLoading}
+                loading={rejectLoading || isRejecting}
+                iconLeft={<Close size={16} />}
+              >
+                {rejectText}
+              </Button>
+            )}
+            <Button
+              onClick={handleApproveClick}
+              disabled={isLoading}
+              loading={approveLoading || isApproving}
+              iconLeft={<Checkmark size={16} />}
+            >
+              {approveText}
+            </Button>
+          </HStack>
+        </Stack>
+      </HStack>
+    </div>
+  );
+
+  return (
+    <>
+      {bannerContent}
+
+      {/* Approve Confirmation Dialog */}
+      <AlertDialog open={approveDialogOpen} onOpenChange={handleApproveDialogChange}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {approveConfirmation?.title ?? 'Confirm Approval'}
+            </AlertDialogTitle>
+            {approveConfirmation?.description && (
+              <AlertDialogDescription>
+                {approveConfirmation.description}
+              </AlertDialogDescription>
+            )}
+          </AlertDialogHeader>
+          {approveConfirmation?.content}
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isApproving}>
+              {approveConfirmation?.cancelText ?? 'Cancel'}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleApproveConfirm}
+              loading={isApproving}
+              disabled={isApproving}
+            >
+              {approveConfirmation?.confirmText ?? 'Approve'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Reject Confirmation Dialog */}
+      <AlertDialog open={rejectDialogOpen} onOpenChange={handleRejectDialogChange}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {rejectConfirmation?.title ?? 'Confirm Rejection'}
+            </AlertDialogTitle>
+            {rejectConfirmation?.description && (
+              <AlertDialogDescription>
+                {rejectConfirmation.description}
+              </AlertDialogDescription>
+            )}
+          </AlertDialogHeader>
+          {rejectConfirmation?.content}
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isRejecting}>
+              {rejectConfirmation?.cancelText ?? 'Cancel'}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              variant="destructive"
+              onClick={handleRejectConfirm}
+              loading={isRejecting}
+              disabled={isRejecting}
+            >
+              {rejectConfirmation?.confirmText ?? 'Reject'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
+
+export { ApprovalBanner };
+export type { ApprovalBannerProps, ConfirmationConfig };

package/src/components/organisms/index.ts

@@ -1,4 +1,5 @@
 export * from './alert-dialog';
+export * from './approval-banner';
 export * from './app-shell';
 export * from './calendar';
 export * from './carousel';