ai-design-system 0.1.70 → 0.1.71

package/components/blocks/EvalSessionDetailsPanel/EvalSessionDetailsPanel.tsx

@@ -11,6 +11,7 @@ export interface EvalSessionDetails {
   id: string
   date: string
   goldenEvals: DashboardRow[]
+  recommendations: Array<{ id: number; name: string; rationale: string }>
   systemPrompt?: string
   outputTranscript?: string
 }
@@ -23,12 +24,23 @@ export interface EvalSessionDetailsPanelProps {
 }
 
 export const EvalTriggerButton = ({ onClick, loading }: { onClick: () => void; loading?: boolean }) => (
-  <Button onClick={onClick} variant="default" size="sm" className="h-8" disabled={loading}>
-    <Icon name={loading ? 'loader-2' : 'play'} className={`w-4 h-4 mr-2${loading ? ' animate-spin' : ''}`} />
-    {loading ? 'Evaluating...' : 'Trigger'}
+  <Button onClick={onClick} variant="default" size="sm" className="h-8 w-8 p-0" disabled={loading} title={loading ? 'Evaluating...' : 'Trigger'}>
+    <Icon name={loading ? 'loader-2' : 'play'} className={`w-4 h-4${loading ? ' animate-spin' : ''}`} />
   </Button>
 )
 
+const recommendationTableSchema = dynamicTableSchema.parse({
+  schemaVersion: DYNAMIC_TABLE_SCHEMA_VERSION,
+  rowKey: "name",
+  enableFiltering: true,
+  enablePagination: false,
+  enableRowSelection: false,
+  columns: [
+    { key: "name", label: "Recommendation", renderType: "text" },
+    { key: "rationale", label: "Rationale", renderType: "text" },
+  ],
+})
+
 const goldenEvalTableSchema = dynamicTableSchema.parse({
   schemaVersion: DYNAMIC_TABLE_SCHEMA_VERSION,
   rowKey: "id",
@@ -44,7 +56,7 @@ const goldenEvalTableSchema = dynamicTableSchema.parse({
 })
 
 export const EvalSessionDetailsPanel = React.memo<EvalSessionDetailsPanelProps>(
-  ({ sessionDetails, activeTab, actionHandlers, workflowContent }) => {
+  ({ sessionDetails, activeTab, actionHandlers: _actionHandlers, workflowContent }) => {
     return (
       <div className="flex flex-col h-full bg-background">
         <Tabs value={activeTab} className="flex-1 flex flex-col min-h-0">
@@ -62,6 +74,19 @@ export const EvalSessionDetailsPanel = React.memo<EvalSessionDetailsPanelProps>(
               </div>
             </TabsContent>
 
+            <TabsContent value="recommendations" className="absolute inset-0 m-0 p-0 overflow-hidden flex flex-col">
+              <div className="p-4 flex-1 min-h-0 flex flex-col">
+                {sessionDetails.recommendations && sessionDetails.recommendations.length > 0 ? (
+                  <EnhancedDataTable
+                    data={sessionDetails.recommendations}
+                    tableSchema={recommendationTableSchema}
+                  />
+                ) : (
+                  <div className="text-sm text-muted-foreground flex-1 flex items-center justify-center">No recommendations available.</div>
+                )}
+              </div>
+            </TabsContent>
+
             <TabsContent value="prompts" className="absolute inset-0 m-0 p-0">
               <ScrollArea className="h-full">
                 <div className="p-4">

package/components/blocks/WorkflowCanvas/WorkflowCanvas.tsx

@@ -4,6 +4,7 @@ import {
   ConnectionMode,
   ReactFlowProvider,
   type Connection,
+  type Node,
   useReactFlow,
 } from "@xyflow/react";
 import { useCallback, useEffect } from "react";
@@ -95,8 +96,7 @@ function WorkflowCanvasInner({
         onEdgesChange={onEdgesChange}
         onNodesChange={onNodesChange}
         onPaneClick={onPaneClick}
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        onNodeClick={onNodeClick as any}
+        onNodeClick={onNodeClick as (event: React.MouseEvent, node: Node) => void}
         onEdgeClick={onEdgeClick}
       >
         {topLeft && (

package/components/blocks/WorkflowCanvas/layout-engine.ts

@@ -1,6 +1,26 @@
 import ELK from 'elkjs';
 import type { WorkflowNode, WorkflowEdge } from './interfaces';
 
+interface ElkNode {
+  id: string;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  children?: ElkNode[];
+}
+
+interface ElkGraph {
+  id: string;
+  layoutOptions?: Record<string, string>;
+  children?: ElkNode[];
+  edges?: Array<{
+    id: string;
+    sources: string[];
+    targets: string[];
+  }>;
+}
+
 const NODE_WIDTH = 180;
 const NODE_HEIGHT = 52;
 
@@ -10,7 +30,7 @@ export async function getLayoutedElements(
   nodes: WorkflowNode[],
   edges: WorkflowEdge[],
 ): Promise<{ nodes: WorkflowNode[]; edges: WorkflowEdge[] }> {
-  const graph = {
+  const graph: ElkGraph = {
     id: 'root',
     layoutOptions: {
       'elk.algorithm': 'layered',
@@ -36,12 +56,10 @@ export async function getLayoutedElements(
     }),
   };
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const layout = await elk.layout(graph as any);
+  const layout = await elk.layout(graph);
 
   const layoutedNodes: WorkflowNode[] = nodes.map((n) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const elkNode = (layout.children ?? []).find((c: any) => c.id === n.id);
+    const elkNode = (layout.children ?? []).find((c: ElkNode) => c.id === n.id);
     if (!elkNode || elkNode.x == null || elkNode.y == null) return n;
     return {
       ...n,

package/components/composites/AppHeader/AppHeader.stories.tsx

@@ -144,3 +144,33 @@ export const ManyTabs: Story = {
     </SidebarProvider>
   ),
 }
+
+/**
+ * With Button Switcher
+ *
+ * Header with a button switcher (dropdown) instead of a title.
+ */
+export const WithButtonSwitcher: Story = {
+  render: () => (
+    <SidebarProvider>
+      <Sidebar />
+      <SidebarInset>
+        <AppHeader
+          buttonSwitcherProps={{
+            items: [
+              { id: "1", name: "Alpha Workflow" },
+              { id: "2", name: "Beta Workflow" },
+            ],
+            activeId: "1",
+            onSelect: fn(),
+          }}
+          actions={
+            <Button size="sm">
+              Deploy
+            </Button>
+          }
+        />
+      </SidebarInset>
+    </SidebarProvider>
+  ),
+}

package/components/composites/AppHeader/AppHeader.tsx

@@ -3,7 +3,7 @@ import { SidebarTrigger } from "@/components/primitives/Sidebar"
 import { Separator } from "@/components/primitives/Separator"
 import { Tabs, TabsList, TabsTrigger } from "@/components/primitives/Tabs"
 import { ChatToggleButton } from "@/components/composites/ChatToggleButton"
-import { WorkflowSwitcher } from "@/components/composites/WorkflowSwitcher"
+import { ButtonSwitcher } from "@/components/composites/ButtonSwitcher"
 import type { AppHeaderProps } from "./interfaces"
 
 export const AppHeader = React.memo<AppHeaderProps>(({ 
@@ -16,7 +16,7 @@ export const AppHeader = React.memo<AppHeaderProps>(({
   tabsPosition = 'center',
   showSidebarToggle = true,
   showTitle = true,
-  workflowSwitcherProps,
+  buttonSwitcherProps,
   chatToggleProps
 }) => {
   return (
@@ -24,7 +24,7 @@ export const AppHeader = React.memo<AppHeaderProps>(({
       <div className="grid w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center px-4 lg:px-6">
         <div className="min-w-0 flex items-center gap-1 lg:gap-2">
           {showSidebarToggle && <SidebarTrigger className="-ml-1" />}
-          {showSidebarToggle && (showTitle && title || workflowSwitcherProps || chatToggleProps) && (
+          {showSidebarToggle && (showTitle && title || buttonSwitcherProps || chatToggleProps) && (
             <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
           )}
           {showTitle && title && (
@@ -44,7 +44,7 @@ export const AppHeader = React.memo<AppHeaderProps>(({
               </TabsList>
             </Tabs>
           )}
-          {workflowSwitcherProps && <WorkflowSwitcher {...workflowSwitcherProps} />}
+          {buttonSwitcherProps && <ButtonSwitcher {...buttonSwitcherProps} />}
         </div>
 
         <div className="justify-self-center">

package/components/composites/AppHeader/interfaces.ts

@@ -1,5 +1,5 @@
 import type React from "react";
-import type { WorkflowSwitcherProps } from "@/components/composites/WorkflowSwitcher/WorkflowSwitcher";
+import type { ButtonSwitcherProps } from "@/components/composites/ButtonSwitcher/ButtonSwitcher";
 import type { ChatToggleButtonProps } from "@/components/composites/ChatToggleButton/ChatToggleButton";
 
 export interface TabItem {
@@ -17,6 +17,6 @@ export interface AppHeaderProps {
   className?: string;
   showSidebarToggle?: boolean;
   showTitle?: boolean;
-  workflowSwitcherProps?: WorkflowSwitcherProps;
+  buttonSwitcherProps?: ButtonSwitcherProps;
   chatToggleProps?: ChatToggleButtonProps;
 }

package/components/composites/{WorkflowSwitcher/WorkflowSwitcher.stories.tsx → ButtonSwitcher/ButtonSwitcher.stories.tsx}

@@ -1,26 +1,24 @@
 import * as React from "react"
 import type { Meta, StoryObj } from "@storybook/react"
-import { WorkflowSwitcher } from "./WorkflowSwitcher"
+import { ButtonSwitcher } from "./ButtonSwitcher"
 
-const meta: Meta<typeof WorkflowSwitcher> = {
-  title: "Composites/WorkflowSwitcher",
-  component: WorkflowSwitcher,
-  parameters: {
-    layout: "centered",
-  },
+const meta: Meta<typeof ButtonSwitcher> = {
+  title: "Composites/ButtonSwitcher",
+  component: ButtonSwitcher,
+  tags: ["autodocs"],
   args: {
-    workflows: [
+    items: [
       { id: "1", name: "Alpha Workflow" },
       { id: "2", name: "Beta Workflow" },
       { id: "3", name: "Gamma Workflow" },
     ],
-    currentWorkflowId: "1",
-    onSelectWorkflow: () => {},
+    activeId: "1",
+    onSelect: () => {},
   },
 }
 
 export default meta
-type Story = StoryObj<typeof WorkflowSwitcher>
+type Story = StoryObj<typeof ButtonSwitcher>
 
 export const Default: Story = {}
 

package/components/composites/{WorkflowSwitcher/WorkflowSwitcher.tsx → ButtonSwitcher/ButtonSwitcher.tsx}

@@ -8,21 +8,22 @@ import {
 } from "@/components/primitives/DropdownMenu"
 import { Icon } from "@/components/primitives/Icon"
 
-export interface WorkflowItem {
+export interface ButtonSwitcherItem {
   id: string
   name: string
 }
 
-export interface WorkflowSwitcherProps {
-  workflows: WorkflowItem[]
-  currentWorkflowId?: string | null
-  onSelectWorkflow: (id: string) => void
+export interface ButtonSwitcherProps {
+  items: ButtonSwitcherItem[]
+  activeId?: string | null
+  onSelect: (id: string) => void
   className?: string
+  placeholder?: string
 }
 
-export const WorkflowSwitcher = React.memo<WorkflowSwitcherProps>(
-  ({ workflows, currentWorkflowId, onSelectWorkflow, className }) => {
-    const currentWorkflow = workflows.find((w) => w.id === currentWorkflowId)
+export const ButtonSwitcher = React.memo<ButtonSwitcherProps>(
+  ({ items, activeId, onSelect, className, placeholder = "Select Item" }) => {
+    const currentItem = items.find((w) => w.id === activeId)
 
     return (
       <div className={className}>
@@ -35,25 +36,25 @@ export const WorkflowSwitcher = React.memo<WorkflowSwitcherProps>(
               variant="secondary"
             >
               <span className="truncate max-w-[150px]">
-                {currentWorkflow?.name ?? "Select Workflow"}
+                {currentItem?.name ?? placeholder}
               </span>
               <Icon name="chevron-down" size="xs" className="ml-1 opacity-50 shrink-0" />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start">
-            {workflows.map((w) => (
+            {items.map((w) => (
               <DropdownMenuItem
                 className="flex items-center justify-between"
                 key={w.id}
-                onClick={() => onSelectWorkflow(w.id)}
+                onClick={() => onSelect(w.id)}
               >
                 <span className="truncate pr-4">{w.name}</span>
-                {w.id === currentWorkflowId && <Icon name="check" size="sm" className="ml-auto shrink-0" />}
+                {w.id === activeId && <Icon name="check" size="sm" className="ml-auto shrink-0" />}
               </DropdownMenuItem>
             ))}
-            {workflows.length === 0 && (
+            {items.length === 0 && (
               <div className="px-2 py-1.5 text-sm text-muted-foreground text-center">
-                No workflows found
+                No items found
               </div>
             )}
           </DropdownMenuContent>
@@ -63,4 +64,4 @@ export const WorkflowSwitcher = React.memo<WorkflowSwitcherProps>(
   }
 )
 
-WorkflowSwitcher.displayName = "WorkflowSwitcher"
+ButtonSwitcher.displayName = "ButtonSwitcher"

package/components/composites/ButtonSwitcher/index.ts

@@ -0,0 +1 @@
+export * from "./ButtonSwitcher"

package/components/composites/DashboardChart/DashboardChart.tsx

@@ -1,6 +1,5 @@
 import * as React from "react"
-import { Area, Line, ComposedChart, CartesianGrid, XAxis } from "recharts"
-import type { TooltipContentProps } from "recharts"
+import { Area, CartesianGrid, ComposedChart, Line, XAxis } from "recharts"
 
 import {
   ChartContainer,
@@ -31,10 +30,11 @@ export interface DashboardChartPoint {
   mobile: number
 }
 
-export type DashboardChartTimeRange = string
+export type DashboardChartTimeRange = string;
 
 export interface DashboardChartProps {
   series: DashboardChartPoint[]
+  timeRange?: DashboardChartTimeRange
   onTimeRangeChange?: (range: DashboardChartTimeRange) => void
   title: string
   description: string
@@ -47,8 +47,100 @@ export interface DashboardChartProps {
   chartClassName?: string
 }
 
+interface DashboardTooltipPayloadItem {
+  dataKey?: string | number;
+  value?: number;
+  [key: string]: unknown;
+}
+
+const DashboardTooltipContent = React.memo((props: {
+  active?: boolean;
+  payload?: DashboardTooltipPayloadItem[];
+  label?: string;
+  desktopLabel?: string;
+  mobileLabel?: string;
+  [key: string]: unknown;
+}): React.ReactElement | null => {
+  const { active, payload, desktopLabel, mobileLabel, content: _content, label, ...rest } = props;
+  void _content;
+  if (!active || !payload?.length) return null;
+
+  const uniquePayload = payload.filter(
+    (item: DashboardTooltipPayloadItem, index: number, self: DashboardTooltipPayloadItem[]) =>
+      index === self.findIndex((t: DashboardTooltipPayloadItem) => String(t.dataKey) === String(item.dataKey)),
+  );
+  
+  return (
+    <ChartTooltipContent
+      {...rest}
+      active={active}
+      label={label as string}
+      payload={uniquePayload}
+      labelFormatter={(value, tooltipPayload) => {
+        const typedPayload = tooltipPayload as Array<{ payload: { timestamp?: number } }>;
+        const timestamp = typedPayload?.[0]?.payload?.timestamp;
+        if (!timestamp) return null;
+        const date = new Date(timestamp);
+        if (isNaN(date.getTime())) return ""
+        return date.toLocaleDateString("en-US", {
+          month: "short",
+          year: "numeric",
+        })
+      }}
+      formatter={(value, name, item, index, tooltipPayload) => {
+        const typedPayload = tooltipPayload as { timestamp?: number };
+        const typedItem = item as { color?: string };
+        const labelText = name === "desktop" ? desktopLabel : (name === "mobile" ? mobileLabel : name);
+        const timeStr = typedPayload?.timestamp ? new Date(typedPayload.timestamp).toLocaleTimeString("en-US", {
+          hour: "numeric",
+          minute: "2-digit"
+        }) : null;
+        
+        return (
+          <div className="flex flex-col w-full">
+            <div className="flex w-full items-center gap-2">
+              <div 
+                className="h-2.5 w-2.5 shrink-0 rounded-[2px]" 
+                style={{ backgroundColor: typedItem.color }} 
+              />
+              <div className="flex flex-1 justify-between items-center gap-4">
+                <span className="text-muted-foreground">{labelText as React.ReactNode}</span>
+                <span className="font-mono font-medium tabular-nums text-foreground">{value as React.ReactNode}</span>
+              </div>
+            </div>
+            {timeStr && (
+              <div className="text-[10px] text-muted-foreground self-end mt-0.5">
+                {timeStr}
+              </div>
+            )}
+          </div>
+        )
+      }}
+      indicator="dot"
+    />
+  );
+});
+DashboardTooltipContent.displayName = "DashboardTooltipContent";
+
+const CustomDot = React.memo((props: { cx?: number; cy?: number; stroke?: string }): React.ReactElement => {
+  const { cx, cy, stroke } = props;
+  return (
+    <circle
+      cx={cx}
+      cy={cy}
+      r={4}
+      fill="var(--background)"
+      stroke={stroke}
+      strokeWidth={2}
+      pointerEvents="none"
+    />
+  );
+});
+CustomDot.displayName = "CustomDot";
+
 export const DashboardChart = React.memo<DashboardChartProps>(({ 
   series, 
+  timeRange: propsTimeRange,
   onTimeRangeChange,
   title,
   description,
@@ -60,11 +152,12 @@ export const DashboardChart = React.memo<DashboardChartProps>(({
   className,
   chartClassName
 }) => {
-  const [timeRange, setTimeRange] = React.useState<DashboardChartTimeRange>(timeRanges[0]?.value)
+  const [localTimeRange, setLocalTimeRange] = React.useState<DashboardChartTimeRange>(timeRanges[0]?.value)
+  const timeRange = propsTimeRange ?? localTimeRange
 
   const handleTimeRangeChange = React.useCallback(
     (range: DashboardChartTimeRange) => {
-      setTimeRange(range)
+      setLocalTimeRange(range)
       onTimeRangeChange?.(range)
     },
     [onTimeRangeChange]
@@ -181,63 +274,12 @@ export const DashboardChart = React.memo<DashboardChartProps>(({
               />
               <ChartTooltip
                 cursor={false}
-                content={(props: TooltipContentProps) => {
-                  const { active, payload, content: _content, label: _label, ...rest } = props;
-                  if (!active || !payload?.length) return null;
-
-                  const uniquePayload = payload.filter(
-                    (item, index, self) =>
-                      index === self.findIndex((t) => String(t.dataKey) === String(item.dataKey)),
-                  );
-                  
-                  return (
-                      <ChartTooltipContent
-                      {...rest}
-                      payload={uniquePayload}
-                      labelFormatter={(value, tooltipPayload) => {
-                        const typedPayload = tooltipPayload as Array<{ payload: { timestamp?: number } }>;
-                        const timestamp = typedPayload?.[0]?.payload?.timestamp;
-                        if (!timestamp) return null;
-                        const date = new Date(timestamp);
-                        if (isNaN(date.getTime())) return ""
-                        return date.toLocaleDateString("en-US", {
-                          month: "short",
-                          year: "numeric",
-                        })
-                      }}
-                      formatter={(value, name, item, index, tooltipPayload) => {
-                        const typedPayload = tooltipPayload as { timestamp?: number };
-                        const typedItem = item as { color?: string };
-                        const labelText = name === "desktop" ? desktopLabel : (name === "mobile" ? mobileLabel : name);
-                        const timeStr = typedPayload?.timestamp ? new Date(typedPayload.timestamp).toLocaleTimeString("en-US", {
-                          hour: "numeric",
-                          minute: "2-digit"
-                        }) : null;
-                        
-                        return (
-                          <div className="flex flex-col w-full">
-                            <div className="flex w-full items-center gap-2">
-                              <div 
-                                className="h-2.5 w-2.5 shrink-0 rounded-[2px]" 
-                                style={{ backgroundColor: typedItem.color }} 
-                              />
-                              <div className="flex flex-1 justify-between items-center gap-4">
-                                <span className="text-muted-foreground">{labelText as React.ReactNode}</span>
-                                <span className="font-mono font-medium tabular-nums text-foreground">{value as React.ReactNode}</span>
-                              </div>
-                            </div>
-                            {timeStr && (
-                              <div className="text-[10px] text-muted-foreground self-end mt-0.5">
-                                {timeStr}
-                              </div>
-                            )}
-                          </div>
-                        )
-                      }}
-                      indicator="dot"
-                    />
-                  );
-                }}
+                content={
+                  <DashboardTooltipContent 
+                    desktopLabel={desktopLabel} 
+                    mobileLabel={mobileLabel} 
+                  />
+                }
               />
               {showMobile && (
                 <>
@@ -252,8 +294,8 @@ export const DashboardChart = React.memo<DashboardChartProps>(({
                     type="monotone"
                     stroke="var(--color-mobile)"
                     strokeWidth={2}
-                    dot={false}
-                    activeDot={{ r: 4 }}
+                    dot={<CustomDot />}
+                    activeDot={{ r: 6 }}
                   />
                 </>
               )}
@@ -268,8 +310,8 @@ export const DashboardChart = React.memo<DashboardChartProps>(({
                 type="monotone"
                 stroke="var(--color-desktop)"
                 strokeWidth={2}
-                dot={false}
-                activeDot={{ r: 4 }}
+                dot={<CustomDot />}
+                activeDot={{ r: 6 }}
               />
             </ComposedChart>
           </ChartContainer>

package/components/composites/DefaultSwitcher/DefaultSwitcher.stories.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { DefaultSwitcher, DefaultSwitcherItem } from "./DefaultSwitcher"
+import type { Meta, StoryObj } from "@storybook/react"
+
+const meta = {
+  title: "Composites/DefaultSwitcher",
+  component: DefaultSwitcher,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof DefaultSwitcher>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    themes: [
+      { label: "Light", value: "light" },
+      { label: "Dark", value: "dark" },
+      { label: "System", value: "system" },
+    ],
+    placeholder: "Select theme...",
+  },
+}
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string>()
+    const themes: DefaultSwitcherItem[] = [
+      { label: "Blue", value: "blue" },
+      { label: "Green", value: "green" },
+      { label: "Purple", value: "purple" },
+    ]
+
+    return (
+      <div className="flex flex-col gap-4 min-w-[200px]">
+        <div className="text-sm text-muted-foreground">Selected: {value || "None"}</div>
+        <DefaultSwitcher themes={themes} value={value} onValueChange={setValue} />
+
+        <p style={{ marginTop: '16px', fontSize: '14px' }}>Selected: {value}</p>
+      </div>
+    )
+  },
+}

package/components/composites/{ThemeSelector/ThemeSelector.tsx → DefaultSwitcher/DefaultSwitcher.tsx}

@@ -8,7 +8,7 @@ import {
 } from "@/components/primitives/Select"
 
 /**
- * ThemeSelector Composite
+ * DefaultSwitcher Composite
  *
  * A theme variant selector component that allows users to choose from multiple theme options.
  * Composes Select primitive.
@@ -20,20 +20,20 @@ import {
  *   { label: "Ocean", value: "ocean" },
  *   { label: "Forest", value: "forest" },
  * ]
- * <ThemeSelector themes={themes} value="default" onValueChange={setTheme} />
+ * <DefaultSwitcher themes={themes} value="default" onValueChange={setTheme} />
  * ```
  */
 
-export interface Theme {
+export interface DefaultSwitcherItem {
   label: string
   value: string
 }
 
-export interface ThemeSelectorProps {
+export interface DefaultSwitcherProps {
   /**
    * Available theme options
    */
-  themes: Theme[]
+  themes: DefaultSwitcherItem[]
   /**
    * Currently selected theme value
    */
@@ -53,11 +53,11 @@ export interface ThemeSelectorProps {
 }
 
 /**
- * ThemeSelector component
+ * DefaultSwitcher component
  *
  * Provides a select dropdown to choose from multiple theme variants.
  */
-export const ThemeSelector = React.memo<ThemeSelectorProps>(
+export const DefaultSwitcher = React.memo<DefaultSwitcherProps>(
   ({ themes, value, onValueChange, placeholder = "Select theme", className }) => {
     return (
       <Select value={value} onValueChange={onValueChange}>
@@ -76,4 +76,4 @@ export const ThemeSelector = React.memo<ThemeSelectorProps>(
   }
 )
 
-ThemeSelector.displayName = "ThemeSelector"
+DefaultSwitcher.displayName = "DefaultSwitcher"

package/components/composites/DefaultSwitcher/index.ts

@@ -0,0 +1,2 @@
+export { DefaultSwitcher } from './DefaultSwitcher'
+export type { DefaultSwitcherProps, DefaultSwitcherItem } from './DefaultSwitcher'