@trycompai/design-system 1.0.17 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycompai/design-system",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "Design system for Comp AI - shadcn-style components with Tailwind CSS",
   "type": "module",
   "main": "./src/index.ts",
@@ -97,7 +97,6 @@
     "tailwindcss": "^4.0.0"
   },
   "devDependencies": {
-    "@repo/typescript-config": "workspace:*",
     "@tailwindcss/postcss": "^4.1.10",
     "@types/node": "^22.18.0",
     "@types/react": "^19.2.7",

package/src/components/atoms/text.tsx

@@ -15,8 +15,6 @@ 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,7 +23,6 @@ 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/organisms/alert-dialog.tsx

@@ -79,7 +79,7 @@ function AlertDialogTitle({
   return (
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
-      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"
+      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"
       {...props}
     />
   );
@@ -91,7 +91,7 @@ function AlertDialogDescription({
   return (
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
-      className="text-muted-foreground font-normal *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3"
+      className="text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3"
       {...props}
     />
   );

package/src/components/organisms/index.ts

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

package/src/components/organisms/organization-selector.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { Command as CommandPrimitive } from 'cmdk';
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
 import { Combobox as ComboboxPrimitive } from '@base-ui/react';
 import { Checkmark, ChevronDown, Search } from '@carbon/icons-react';
 import * as React from 'react';
@@ -33,39 +35,70 @@ export interface OrganizationSelectorProps {
   /** Search input placeholder */
   searchPlaceholder?: string;
   /** Text shown when no results match search */
-  emptyText?: string;
+  emptySearchText?: string;
+  /** Text shown when organizations list is empty */
+  emptyListText?: string;
   /** Whether the selector is disabled */
   disabled?: boolean;
+  /** Whether organizations are being loaded */
+  loading?: boolean;
+  /** Text shown while loading */
+  loadingText?: string;
+  /** Error message to display */
+  error?: string;
   /** Size variant for the trigger */
   size?: 'sm' | 'default';
+  /** Max width for the organization name in trigger (e.g., '150px') */
+  maxWidth?: string;
+  /** Keyboard shortcut to open (e.g., 'o' for Cmd+O). Set to null to disable. */
+  hotkey?: string | null;
+  /** Whether to open as a full-screen modal (like Cmd+K) instead of dropdown */
+  modal?: boolean;
 }
 
 // ============================================================================
 // Internal Components
 // ============================================================================
 
-function OrganizationColorDot({ color }: { color?: string }) {
-  if (!color) return null;
-
-  // Support both hex colors and Tailwind classes
-  const isTailwindClass = color.startsWith('bg-');
-  const style = isTailwindClass ? undefined : { backgroundColor: color };
-  const className = isTailwindClass
-    ? `size-2 shrink-0 rounded-full ${color}`
-    : 'size-2 shrink-0 rounded-full';
+function LoadingSpinner() {
+  return (
+    <svg
+      className="size-4 animate-spin text-muted-foreground"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  );
+}
 
-  return <span className={className} style={style} />;
+function EmptyState({ icon, text }: { icon?: React.ReactNode; text: string }) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-2 py-6 text-center">
+      {icon && <span className="text-muted-foreground">{icon}</span>}
+      <span className="text-muted-foreground text-sm">{text}</span>
+    </div>
+  );
 }
 
-function OrganizationItemContent({ org }: { org: Organization }) {
+function OrganizationItemContent({ org, maxWidth }: { org: Organization; maxWidth?: string }) {
   return (
     <>
-      {org.icon ? (
-        <span className="shrink-0">{org.icon}</span>
-      ) : (
-        <OrganizationColorDot color={org.color} />
-      )}
-      <span className="truncate">{org.name}</span>
+      {org.icon && <span className="shrink-0">{org.icon}</span>}
+      <span className="truncate" style={maxWidth ? { maxWidth } : undefined}>{org.name}</span>
     </>
   );
 }
@@ -81,16 +114,44 @@ function OrganizationSelector({
   onValueChange,
   placeholder = 'Select organization',
   searchPlaceholder = 'Search by name or ID...',
-  emptyText = 'No organizations found',
+  emptySearchText = 'No organizations found',
+  emptyListText = 'No organizations available',
   disabled = false,
+  loading = false,
+  loadingText = 'Loading organizations...',
+  error,
   size = 'default',
+  maxWidth = '150px',
+  hotkey = 'o',
+  modal = false,
 }: OrganizationSelectorProps) {
   const [internalValue, setInternalValue] = React.useState(defaultValue ?? '');
   const [searchQuery, setSearchQuery] = React.useState('');
+  const [open, setOpen] = React.useState(false);
+  const triggerRef = React.useRef<HTMLButtonElement>(null);
 
   const selectedValue = value ?? internalValue;
   const selectedOrg = organizations.find((org) => org.id === selectedValue);
 
+  // Keyboard shortcut to open (Cmd/Ctrl + hotkey)
+  React.useEffect(() => {
+    if (!hotkey || disabled || loading) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key.toLowerCase() === hotkey.toLowerCase() && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        if (modal) {
+          setOpen(true);
+        } else {
+          triggerRef.current?.click();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [hotkey, disabled, loading, modal]);
+
   // Filter organizations by ID or name (case-insensitive)
   const filteredOrganizations = React.useMemo(() => {
     if (!searchQuery.trim()) return organizations;
@@ -110,28 +171,154 @@ function OrganizationSelector({
       }
       onValueChange?.(orgId);
       setSearchQuery(''); // Clear search on selection
+      setOpen(false); // Close modal on selection
     },
     [value, onValueChange]
   );
 
   const triggerSizeClass = size === 'sm' ? 'h-7' : 'h-8';
 
+  // Determine content state
+  const hasError = Boolean(error);
+  const isEmpty = organizations.length === 0;
+  const hasNoResults = filteredOrganizations.length === 0 && !isEmpty;
+
+  const triggerButton = (
+    <button
+      ref={triggerRef}
+      type="button"
+      data-slot="organization-selector-trigger"
+      data-size={size}
+      disabled={disabled || loading}
+      onClick={modal ? () => setOpen(true) : undefined}
+      className={`gap-1.5 rounded-lg border border-transparent bg-transparent py-2 pr-2.5 pl-2.5 text-sm transition-colors select-none hover:bg-accent [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 ${triggerSizeClass}`}
+    >
+      {loading ? (
+        <>
+          <LoadingSpinner />
+          <span className="text-muted-foreground">Loading...</span>
+        </>
+      ) : selectedOrg ? (
+        <OrganizationItemContent org={selectedOrg} maxWidth={maxWidth} />
+      ) : (
+        <span className="text-muted-foreground">{placeholder}</span>
+      )}
+      {!loading && <ChevronDown className="text-muted-foreground size-3.5 shrink-0" />}
+    </button>
+  );
+
+  // Modal mode: full-screen dialog like Cmd+K
+  if (modal) {
+    return (
+      <>
+        {triggerButton}
+        <DialogPrimitive.Root open={open} onOpenChange={setOpen}>
+          <DialogPrimitive.Portal>
+            <DialogPrimitive.Backdrop
+              data-slot="dialog-overlay"
+              className="data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50"
+            />
+            <DialogPrimitive.Popup
+              data-slot="command-dialog-content"
+              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 bg-background ring-foreground/10 rounded-xl p-0 ring-1 duration-100 sm:max-w-lg group/dialog-content fixed top-1/2 left-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-hidden outline-none"
+            >
+              <div className="sr-only">
+                <DialogPrimitive.Title>Select Organization</DialogPrimitive.Title>
+                <DialogPrimitive.Description>
+                  Search and select an organization from the list
+                </DialogPrimitive.Description>
+              </div>
+              <CommandPrimitive
+                data-slot="command"
+                className="bg-popover text-popover-foreground rounded-xl p-1 flex size-full flex-col overflow-hidden"
+                filter={(value, search) => {
+                  const org = organizations.find((o) => o.id === value);
+                  if (!org) return 0;
+                  const query = search.toLowerCase();
+                  if (org.id.toLowerCase().includes(query)) return 1;
+                  if (org.name.toLowerCase().includes(query)) return 1;
+                  return 0;
+                }}
+              >
+                {/* Search Input */}
+                <div data-slot="command-input-wrapper" className="p-1 pb-0">
+                  <div
+                    data-slot="input-group"
+                    role="group"
+                    className="border-input/30 bg-input/30 h-8 rounded-lg border shadow-none transition-[color,box-shadow] has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] group/input-group relative flex w-full min-w-0 items-center outline-none"
+                  >
+                    <CommandPrimitive.Input
+                      data-slot="command-input"
+                      placeholder={searchPlaceholder}
+                      className="w-full flex-1 bg-transparent px-2.5 py-1 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
+                    />
+                    <div
+                      data-slot="input-group-addon"
+                      data-align="inline-end"
+                      className="text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 pr-2 text-sm font-medium select-none"
+                    >
+                      <Search className="size-4 shrink-0 opacity-50" />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Organization List */}
+                <CommandPrimitive.List
+                  data-slot="command-list"
+                  className="no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto"
+                >
+                  {loading ? (
+                    <EmptyState icon={<LoadingSpinner />} text={loadingText} />
+                  ) : hasError ? (
+                    <EmptyState text={error!} />
+                  ) : isEmpty ? (
+                    <EmptyState text={emptyListText} />
+                  ) : (
+                    <CommandPrimitive.Group data-slot="command-group" className="text-foreground overflow-hidden p-1">
+                      <CommandPrimitive.Empty data-slot="command-empty" className="py-6 text-center text-sm">
+                        {emptySearchText}
+                      </CommandPrimitive.Empty>
+                      {organizations.map((org) => (
+                        <CommandPrimitive.Item
+                          key={org.id}
+                          data-slot="command-item"
+                          value={org.id}
+                          onSelect={() => handleValueChange(org.id)}
+                          className="data-[selected=true]:bg-muted data-[selected=true]:text-foreground relative flex cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+                        >
+                          <OrganizationItemContent org={org} />
+                          {selectedValue === org.id && (
+                            <Checkmark className="ml-auto size-4" />
+                          )}
+                        </CommandPrimitive.Item>
+                      ))}
+                    </CommandPrimitive.Group>
+                  )}
+                </CommandPrimitive.List>
+              </CommandPrimitive>
+            </DialogPrimitive.Popup>
+          </DialogPrimitive.Portal>
+        </DialogPrimitive.Root>
+      </>
+    );
+  }
+
+  // Dropdown mode (default): inline combobox
   return (
     <ComboboxPrimitive.Root value={selectedValue} onValueChange={handleValueChange}>
       <ComboboxPrimitive.Trigger
+        ref={triggerRef}
         data-slot="organization-selector-trigger"
         data-size={size}
         disabled={disabled}
-        className={`border-input dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-2 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] [&_svg:not([class*='size-'])]:size-4 flex w-full items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 ${triggerSizeClass}`}
+        className={`gap-1.5 rounded-lg border border-transparent bg-transparent py-2 pr-2.5 pl-2.5 text-sm transition-colors select-none hover:bg-accent [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 ${triggerSizeClass}`}
       >
-        <span className="flex flex-1 items-center gap-2 truncate">
-          {selectedOrg ? (
-            <OrganizationItemContent org={selectedOrg} />
-          ) : (
-            <span className="text-muted-foreground">{placeholder}</span>
-          )}
-        </span>
-        <ChevronDown className="text-muted-foreground size-4 shrink-0" />
+        {selectedOrg ? (
+          <OrganizationItemContent org={selectedOrg} maxWidth={maxWidth} />
+        ) : (
+          <span className="text-muted-foreground">{placeholder}</span>
+        )}
+        <ChevronDown className="text-muted-foreground size-3.5 shrink-0" />
       </ComboboxPrimitive.Trigger>
 
       <ComboboxPrimitive.Portal>
@@ -164,10 +351,14 @@ function OrganizationSelector({
               data-slot="organization-selector-list"
               className="no-scrollbar max-h-64 scroll-py-1 overflow-y-auto p-1 overscroll-contain"
             >
-              {filteredOrganizations.length === 0 ? (
-                <div className="text-muted-foreground flex w-full justify-center py-6 text-center text-sm">
-                  {emptyText}
-                </div>
+              {loading ? (
+                <EmptyState icon={<LoadingSpinner />} text={loadingText} />
+              ) : hasError ? (
+                <EmptyState text={error!} />
+              ) : isEmpty ? (
+                <EmptyState text={emptyListText} />
+              ) : hasNoResults ? (
+                <EmptyState text={emptySearchText} />
               ) : (
                 filteredOrganizations.map((org) => (
                   <ComboboxPrimitive.Item

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

@@ -3,6 +3,7 @@ import * as React from 'react';
 
 import { cn } from '../../../lib/utils';
 import { Stack } from '../atoms/stack';
+import { Skeleton } from '../atoms/skeleton';
 
 const pageLayoutVariants = cva('min-h-full bg-background text-foreground', {
   variants: {
@@ -48,6 +49,29 @@ interface PageLayoutProps
   maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   /** Vertical gap between children. Defaults to 'lg' (gap-6). */
   gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '0' | '1' | '2' | '3' | '4' | '6' | '8';
+  /** Whether the page is loading. Shows skeleton placeholder when true. */
+  loading?: boolean;
+}
+
+function PageLayoutSkeleton() {
+  return (
+    <Stack gap="lg">
+      {/* Header skeleton */}
+      <div className="space-y-2">
+        <Skeleton style={{ width: '30%', height: 24 }} />
+        <Skeleton style={{ width: '50%', height: 16 }} />
+      </div>
+      {/* Content skeleton */}
+      <div className="space-y-4">
+        <Skeleton style={{ width: '100%', height: 200 }} />
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <Skeleton style={{ width: '100%', height: 120 }} />
+          <Skeleton style={{ width: '100%', height: 120 }} />
+          <Skeleton style={{ width: '100%', height: 120 }} />
+        </div>
+      </div>
+    </Stack>
+  );
 }
 
 function PageLayout({
@@ -56,13 +80,16 @@ function PageLayout({
   container = true,
   maxWidth,
   gap = 'lg',
+  loading = false,
   children,
   ...props
 }: PageLayoutProps) {
   // For center variant, default to smaller max-width (sm) for auth-style pages
   const resolvedMaxWidth = maxWidth ?? (variant === 'center' ? 'sm' : 'xl');
 
-  const content = (
+  const content = loading ? (
+    <PageLayoutSkeleton />
+  ) : (
     <Stack gap={gap}>
       {children}
     </Stack>
@@ -72,6 +99,7 @@ function PageLayout({
     <div
       data-slot="page-layout"
       data-variant={variant}
+      data-loading={loading || undefined}
       className={pageLayoutVariants({ variant, padding })}
       {...props}
     >

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

@@ -1,190 +0,0 @@
-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/approval-banner.tsx

@@ -1,369 +0,0 @@
-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 };