@trycompai/design-system 1.0.13 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycompai/design-system",
-  "version": "1.0.13",
+  "version": "1.0.16",
   "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/atoms/textarea.tsx

@@ -10,7 +10,7 @@ function Textarea({
     <textarea
       data-slot="textarea"
       data-size={size}
-      className="border-input dark:bg-input/30 focus-visible:border-primary focus-visible:ring-primary/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-sm border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 max-w-full outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=sm]:w-xs data-[size=default]:w-md data-[size=lg]:w-xl data-[size=full]:w-full"
+      className="border-input dark:bg-input/30 focus-visible:border-primary focus-visible:ring-primary/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-sm border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 min-w-0 w-full resize-y outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=sm]:max-w-xs data-[size=default]:max-w-md data-[size=lg]:max-w-xl"
       {...props}
     />
   );

package/src/components/molecules/data-table-header.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { Search } from '@carbon/icons-react';
+import * as React from 'react';
+
+// ============================================================================
+// DataTableHeader
+// ============================================================================
+
+export interface DataTableHeaderProps {
+  children?: React.ReactNode;
+}
+
+function DataTableHeader({ children }: DataTableHeaderProps) {
+  return (
+    <div
+      data-slot="data-table-header"
+      className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between"
+    >
+      {children}
+    </div>
+  );
+}
+
+// ============================================================================
+// DataTableSearch
+// ============================================================================
+
+export interface DataTableSearchProps {
+  /** Placeholder text for the search input */
+  placeholder?: string;
+  /** Current search value */
+  value?: string;
+  /** Callback when search value changes */
+  onChange?: (value: string) => void;
+}
+
+function DataTableSearch({
+  placeholder = 'Search...',
+  value,
+  onChange,
+}: DataTableSearchProps) {
+  return (
+    <div
+      data-slot="data-table-search"
+      className="relative flex-1 max-w-sm"
+    >
+      <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground pointer-events-none" />
+      <input
+        type="text"
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
+        className="w-full h-9 pl-9 pr-3 rounded-lg border border-input bg-transparent text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring/50 focus:border-ring transition-colors"
+      />
+    </div>
+  );
+}
+
+// ============================================================================
+// DataTableFilters
+// ============================================================================
+
+export interface DataTableFiltersProps {
+  children?: React.ReactNode;
+}
+
+function DataTableFilters({ children }: DataTableFiltersProps) {
+  return (
+    <div
+      data-slot="data-table-filters"
+      className="flex items-center gap-2 shrink-0"
+    >
+      {children}
+    </div>
+  );
+}
+
+export { DataTableHeader, DataTableSearch, DataTableFilters };

package/src/components/molecules/index.ts

@@ -6,6 +6,7 @@ export * from './button-group';
 export * from './card';
 export * from './collapsible';
 export * from './command-search';
+export * from './data-table-header';
 export * from './empty';
 export * from './field';
 export * from './grid';
@@ -22,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/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/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';
@@ -11,6 +12,7 @@ export * from './drawer';
 export * from './dropdown-menu';
 export * from './menubar';
 export * from './navigation-menu';
+export * from './organization-selector';
 export * from './page-layout';
 export * from './sheet';
 export * from './sidebar';

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

@@ -0,0 +1,198 @@
+'use client';
+
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+import { Checkmark, ChevronDown, Search } from '@carbon/icons-react';
+import * as React from 'react';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface Organization {
+  /** Unique organization identifier (searchable) */
+  id: string;
+  /** Organization display name (searchable) */
+  name: string;
+  /** Optional icon or avatar to display */
+  icon?: React.ReactNode;
+  /** Optional brand color for the indicator dot (e.g., "#10b981" or "bg-green-500") */
+  color?: string;
+}
+
+export interface OrganizationSelectorProps {
+  /** List of organizations to display */
+  organizations: Organization[];
+  /** Currently selected organization ID (controlled) */
+  value?: string;
+  /** Default selected organization ID (uncontrolled) */
+  defaultValue?: string;
+  /** Callback when selection changes */
+  onValueChange?: (organizationId: string) => void;
+  /** Placeholder text when nothing is selected */
+  placeholder?: string;
+  /** Search input placeholder */
+  searchPlaceholder?: string;
+  /** Text shown when no results match search */
+  emptyText?: string;
+  /** Whether the selector is disabled */
+  disabled?: boolean;
+  /** Size variant for the trigger */
+  size?: 'sm' | 'default';
+}
+
+// ============================================================================
+// 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';
+
+  return <span className={className} style={style} />;
+}
+
+function OrganizationItemContent({ org }: { org: Organization }) {
+  return (
+    <>
+      {org.icon ? (
+        <span className="shrink-0">{org.icon}</span>
+      ) : (
+        <OrganizationColorDot color={org.color} />
+      )}
+      <span className="truncate">{org.name}</span>
+    </>
+  );
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+function OrganizationSelector({
+  organizations,
+  value,
+  defaultValue,
+  onValueChange,
+  placeholder = 'Select organization',
+  searchPlaceholder = 'Search by name or ID...',
+  emptyText = 'No organizations found',
+  disabled = false,
+  size = 'default',
+}: OrganizationSelectorProps) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue ?? '');
+  const [searchQuery, setSearchQuery] = React.useState('');
+
+  const selectedValue = value ?? internalValue;
+  const selectedOrg = organizations.find((org) => org.id === selectedValue);
+
+  // Filter organizations by ID or name (case-insensitive)
+  const filteredOrganizations = React.useMemo(() => {
+    if (!searchQuery.trim()) return organizations;
+    const query = searchQuery.toLowerCase();
+    return organizations.filter(
+      (org) =>
+        org.id.toLowerCase().includes(query) ||
+        org.name.toLowerCase().includes(query)
+    );
+  }, [organizations, searchQuery]);
+
+  const handleValueChange = React.useCallback(
+    (newValue: string | null) => {
+      const orgId = newValue ?? '';
+      if (value === undefined) {
+        setInternalValue(orgId);
+      }
+      onValueChange?.(orgId);
+      setSearchQuery(''); // Clear search on selection
+    },
+    [value, onValueChange]
+  );
+
+  const triggerSizeClass = size === 'sm' ? 'h-7' : 'h-8';
+
+  return (
+    <ComboboxPrimitive.Root value={selectedValue} onValueChange={handleValueChange}>
+      <ComboboxPrimitive.Trigger
+        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}`}
+      >
+        <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" />
+      </ComboboxPrimitive.Trigger>
+
+      <ComboboxPrimitive.Portal>
+        <ComboboxPrimitive.Positioner
+          side="bottom"
+          sideOffset={4}
+          align="start"
+          className="isolate z-50"
+        >
+          <ComboboxPrimitive.Popup
+            data-slot="organization-selector-content"
+            className="bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 max-h-80 min-w-56 overflow-hidden rounded-lg shadow-md ring-1 duration-100 group/org-selector relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin)"
+          >
+            {/* Search Input */}
+            <div className="border-b border-border p-2">
+              <div className="bg-muted/50 flex items-center gap-2 rounded-md px-2.5">
+                <Search className="text-muted-foreground size-4 shrink-0" />
+                <ComboboxPrimitive.Input
+                  data-slot="organization-selector-input"
+                  placeholder={searchPlaceholder}
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="h-8 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+                />
+              </div>
+            </div>
+
+            {/* Organization List */}
+            <ComboboxPrimitive.List
+              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>
+              ) : (
+                filteredOrganizations.map((org) => (
+                  <ComboboxPrimitive.Item
+                    key={org.id}
+                    data-slot="organization-selector-item"
+                    value={org.id}
+                    className="data-highlighted:bg-accent data-highlighted:text-accent-foreground gap-2 rounded-md py-1.5 pr-8 pl-2 text-sm relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+                  >
+                    <OrganizationItemContent org={org} />
+                    <ComboboxPrimitive.ItemIndicator
+                      render={
+                        <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+                      }
+                    >
+                      <Checkmark className="size-4" />
+                    </ComboboxPrimitive.ItemIndicator>
+                  </ComboboxPrimitive.Item>
+                ))
+              )}
+            </ComboboxPrimitive.List>
+          </ComboboxPrimitive.Popup>
+        </ComboboxPrimitive.Positioner>
+      </ComboboxPrimitive.Portal>
+    </ComboboxPrimitive.Root>
+  );
+}
+
+export { OrganizationSelector };