ai-design-system 0.1.111 → 0.1.112

package/components/composites/ProjectSwitcher/ProjectSwitcher.tsx

@@ -17,33 +17,82 @@ import {
   PopoverTrigger,
 } from "@/components/primitives/Popover"
 
-export interface Project {
+export interface ProjectSwitcherItem {
   id: string
   name: string
+  [key: string]: unknown
 }
 
+// Backwards compatibility alias
+export type Project = ProjectSwitcherItem
+
 export interface ProjectSwitcherProps {
-  projects: Project[]
+  /** List of projects / channels / workspaces to switch between */
+  projects?: ProjectSwitcherItem[]
+  /** Generic alias for projects */
+  items?: ProjectSwitcherItem[]
+  /** ID of the currently selected item */
   selectedProjectId?: string | null
-  onSelectProject: (id: string) => void
-  onCreateProject: () => void
+  /** Generic alias for selectedProjectId */
+  selectedId?: string | null
+  /** Callback fired when an item is selected */
+  onSelectProject?: (id: string) => void
+  /** Generic alias for onSelectProject */
+  onSelect?: (id: string) => void
+  /** Callback fired when creating a new item */
+  onCreateProject?: () => void
+  /** Generic alias for onCreateProject */
+  onCreate?: () => void
+  /** Custom CSS class names */
   className?: string
+  /**
+   * Domain entity name used to automatically derive labels (e.g. "Project", "Channel", "Workspace").
+   * @default "Project"
+   */
+  entityName?: string
+  /** Placeholder when nothing is selected. Defaults to "Select <entityName>..." */
+  placeholder?: string
+  /** Search input placeholder. Defaults to "Find <entityName>..." */
+  searchPlaceholder?: string
+  /** Empty state message. Defaults to "No <entityName.toLowerCase()>s, yet!" */
+  emptyMessage?: string
+  /** Create button label. Defaults to "Create <entityName>" */
+  createButtonText?: string
 }
 
 export const ProjectSwitcher = React.memo<ProjectSwitcherProps>(
   ({
-    projects = [],
+    projects,
+    items,
     selectedProjectId,
-    onSelectProject = () => {},
-    onCreateProject = () => {},
+    selectedId,
+    onSelectProject,
+    onSelect,
+    onCreateProject,
+    onCreate,
     className,
+    entityName = "Project",
+    placeholder,
+    searchPlaceholder,
+    emptyMessage,
+    createButtonText,
   }) => {
     const [open, setOpen] = React.useState(false)
 
-    const selectedProject = projects.find((p) => String(p.id) === String(selectedProjectId))
-    const displayLabel = selectedProject ? selectedProject.name : "Select Project..."
+    const list = items ?? projects ?? []
+    const activeId = selectedId !== undefined ? selectedId : selectedProjectId
+    const handleSelect = onSelect ?? onSelectProject ?? (() => {})
+    const handleCreate = onCreate ?? onCreateProject ?? (() => {})
+
+    const resolvedPlaceholder = placeholder ?? `Select ${entityName}...`
+    const resolvedSearchPlaceholder = searchPlaceholder ?? `Find ${entityName}...`
+    const resolvedEmptyMessage = emptyMessage ?? `No ${entityName.toLowerCase()}s, yet!`
+    const resolvedCreateButtonText = createButtonText ?? `Create ${entityName}`
+
+    const selectedItem = list.find((p) => String(p.id) === String(activeId))
+    const displayLabel = selectedItem ? selectedItem.name : resolvedPlaceholder
 
-    const defaultValue = selectedProject ? `${selectedProject.name}-${selectedProject.id}` : undefined
+    const defaultValue = selectedItem ? `${selectedItem.name}-${selectedItem.id}` : undefined
 
     return (
       <Popover open={open} onOpenChange={setOpen}>
@@ -64,7 +113,7 @@ export const ProjectSwitcher = React.memo<ProjectSwitcherProps>(
           <Command defaultValue={defaultValue}>
             <div className="flex items-center justify-between border-b border-neutral-600 px-3" cmdk-input-wrapper="">
               <CommandPrimitive.Input
-                placeholder="Find Project..."
+                placeholder={resolvedSearchPlaceholder}
                 className="flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
               />
               <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-neutral-700 bg-neutral-800 px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">Esc</kbd>
@@ -72,27 +121,28 @@ export const ProjectSwitcher = React.memo<ProjectSwitcherProps>(
             <CommandList className="max-h-[300px]">
               <CommandEmpty>
                 <div className="flex flex-col items-center justify-center p-6 text-center text-sm text-muted-foreground">
-                  No projects, yet!
+                  {resolvedEmptyMessage}
                 </div>
               </CommandEmpty>
-              {projects.length > 0 && (
+              {list.length > 0 && (
                 <CommandGroup>
-                  {projects.map((project) => (
+                  {list.map((item) => (
                     <CommandItem
-                      key={project.id}
-                      value={`${project.name}-${project.id}`}
+                      key={item.id}
+                      value={`${item.name}-${item.id}`}
                       onSelect={() => {
-                        onSelectProject(project.id)
+                        handleSelect(item.id)
                         setOpen(false)
                       }}
                       className="mb-1 last:mb-0 cursor-pointer flex items-center justify-between"
                     >
                       <div className="flex items-center">
-                        {project.name}
+                        {item.name}
                       </div>
-                      <Icon name="check"
+                      <Icon
+                        name="check"
                         className={`h-4 w-4 ${
-                          String(selectedProjectId) === String(project.id) ? "opacity-100" : "opacity-0"
+                          String(activeId) === String(item.id) ? "opacity-100" : "opacity-0"
                         }`}
                       />
                     </CommandItem>
@@ -107,11 +157,11 @@ export const ProjectSwitcher = React.memo<ProjectSwitcherProps>(
                 className="w-full justify-start text-sm font-normal"
                 onClick={() => {
                   setOpen(false)
-                  onCreateProject()
+                  handleCreate()
                 }}
               >
                 <Icon name="plus" size="sm" className="mr-2 h-4 w-4" />
-                Create Project
+                {resolvedCreateButtonText}
               </Button>
             </div>
           </Command>

package/components/composites/index.ts

@@ -196,7 +196,7 @@ export type { EmptyStateProps } from './EmptyState'
 
 // ProjectSwitcher Composite
 export { ProjectSwitcher } from './ProjectSwitcher'
-export type { ProjectSwitcherProps, Project } from './ProjectSwitcher'
+export type { ProjectSwitcherProps, ProjectSwitcherItem, Project } from './ProjectSwitcher'
 
 // DashboardChart Composite
 export { DashboardChart } from './DashboardChart'

package/components/index.ts

@@ -54,6 +54,7 @@ export type {
   ActionRequest,
   ReviewConfig,
   ProjectSwitcherProps,
+  ProjectSwitcherItem,
   Project,
   FormReportsDrawerFormProps,
   SessionHeaderProps,

package/dist/index.cjs

@@ -2832,18 +2832,36 @@ var Popover2 = (props) => {
 Popover2.displayName = "Popover";
 var ProjectSwitcher = React3__namespace.memo(
   ({
-    projects = [],
+    projects,
+    items,
     selectedProjectId,
-    onSelectProject = () => {
-    },
-    onCreateProject = () => {
-    },
-    className
+    selectedId,
+    onSelectProject,
+    onSelect,
+    onCreateProject,
+    onCreate,
+    className,
+    entityName = "Project",
+    placeholder,
+    searchPlaceholder,
+    emptyMessage,
+    createButtonText
   }) => {
+    var _a, _b, _c;
     const [open, setOpen] = React3__namespace.useState(false);
-    const selectedProject = projects.find((p) => String(p.id) === String(selectedProjectId));
-    const displayLabel = selectedProject ? selectedProject.name : "Select Project...";
-    const defaultValue = selectedProject ? `${selectedProject.name}-${selectedProject.id}` : void 0;
+    const list = (_a = items != null ? items : projects) != null ? _a : [];
+    const activeId = selectedId !== void 0 ? selectedId : selectedProjectId;
+    const handleSelect = (_b = onSelect != null ? onSelect : onSelectProject) != null ? _b : (() => {
+    });
+    const handleCreate = (_c = onCreate != null ? onCreate : onCreateProject) != null ? _c : (() => {
+    });
+    const resolvedPlaceholder = placeholder != null ? placeholder : `Select ${entityName}...`;
+    const resolvedSearchPlaceholder = searchPlaceholder != null ? searchPlaceholder : `Find ${entityName}...`;
+    const resolvedEmptyMessage = emptyMessage != null ? emptyMessage : `No ${entityName.toLowerCase()}s, yet!`;
+    const resolvedCreateButtonText = createButtonText != null ? createButtonText : `Create ${entityName}`;
+    const selectedItem = list.find((p) => String(p.id) === String(activeId));
+    const displayLabel = selectedItem ? selectedItem.name : resolvedPlaceholder;
+    const defaultValue = selectedItem ? `${selectedItem.name}-${selectedItem.id}` : void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(Popover2, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
         Button2,
@@ -2863,35 +2881,35 @@ var ProjectSwitcher = React3__namespace.memo(
           /* @__PURE__ */ jsxRuntime.jsx(
             cmdk.Command.Input,
             {
-              placeholder: "Find Project...",
+              placeholder: resolvedSearchPlaceholder,
               className: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-neutral-700 bg-neutral-800 px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100", children: "Esc" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(CommandList2, { className: "max-h-[300px]", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty2, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center p-6 text-center text-sm text-muted-foreground", children: "No projects, yet!" }) }),
-          projects.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(CommandGroup2, { children: projects.map((project) => /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty2, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center p-6 text-center text-sm text-muted-foreground", children: resolvedEmptyMessage }) }),
+          list.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(CommandGroup2, { children: list.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
             CommandItem2,
             {
-              value: `${project.name}-${project.id}`,
+              value: `${item.name}-${item.id}`,
               onSelect: () => {
-                onSelectProject(project.id);
+                handleSelect(item.id);
                 setOpen(false);
               },
               className: "mb-1 last:mb-0 cursor-pointer flex items-center justify-between",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: project.name }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: item.name }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   Icon,
                   {
                     name: "check",
-                    className: `h-4 w-4 ${String(selectedProjectId) === String(project.id) ? "opacity-100" : "opacity-0"}`
+                    className: `h-4 w-4 ${String(activeId) === String(item.id) ? "opacity-100" : "opacity-0"}`
                   }
                 )
               ]
             },
-            project.id
+            item.id
           )) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(CommandSeparator2, {}),
@@ -2902,11 +2920,11 @@ var ProjectSwitcher = React3__namespace.memo(
             className: "w-full justify-start text-sm font-normal",
             onClick: () => {
               setOpen(false);
-              onCreateProject();
+              handleCreate();
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "plus", size: "sm", className: "mr-2 h-4 w-4" }),
-              "Create Project"
+              resolvedCreateButtonText
             ]
           }
         ) })