@donotdev/cli 0.0.18 → 0.0.20

package/templates/app-demo/src/pages/ShowcasePage.tsx.example

@@ -0,0 +1,93 @@
+// apps/demo/src/pages/ShowcasePage.tsx
+
+import { useMemo, useState } from 'react';
+import { useNavigate } from '@donotdev/ui';
+import { Component } from 'lucide-react';
+
+import {
+  Badge,
+  Card,
+  Grid,
+  Input,
+  Section,
+  Stack,
+  Tabs,
+} from '@donotdev/components';
+
+import {
+  COMPONENT_CONFIGS,
+  getCSSFamilies,
+} from './components/componentConfig';
+
+import type { PageMeta } from '@donotdev/core';
+import type { CSSFamily } from './components/ComponentsData';
+
+export const meta: PageMeta = {
+  icon: <Component />,
+  preset: 'admin',
+};
+
+export default function ShowcasePage() {
+  const navigate = useNavigate();
+  const [selectedTab, setSelectedTab] = useState<CSSFamily | 'all'>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const componentsInTab = useMemo(() => {
+    return COMPONENT_CONFIGS.filter((config) => {
+      if (selectedTab !== 'all' && config.cssFamily !== selectedTab)
+        return false;
+      return (
+        searchQuery === '' ||
+        config.name.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }).sort((a, b) => a.name.localeCompare(b.name));
+  }, [selectedTab, searchQuery]);
+
+  const cssFamilies = getCSSFamilies();
+
+  return (
+    <Stack gap="large">
+      <Stack direction="row" gap="medium" align="end" wrap="wrap">
+        <Input
+          placeholder="Filter components..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
+      </Stack>
+
+      <Tabs
+        items={cssFamilies.map((family) => ({
+          value: family.id,
+          label: family.label,
+          content: null,
+        }))}
+        value={selectedTab}
+        onValueChange={(value) => setSelectedTab(value as CSSFamily | 'all')}
+      />
+
+      <Section
+        title={
+          cssFamilies.find((f) => f.id === selectedTab)?.label || 'Components'
+        }
+      >
+        <Grid cols={[1, 2, 3, 4]} gap="medium">
+          {componentsInTab.map((config) => (
+            <Card
+              key={config.id}
+              title={config.name}
+              clickable
+              onClick={() => navigate(`/showcase/${config.id}`)}
+            >
+              <Stack direction="row" justify="end">
+                <Badge variant="secondary">
+                  {cssFamilies.find((f) => f.id === config.cssFamily)?.label ||
+                    config.cssFamily}
+                </Badge>
+              </Stack>
+            </Card>
+          ))}
+        </Grid>
+      </Section>
+    </Stack>
+  );
+}

package/templates/app-demo/src/pages/components/ComponentRenderer.tsx.example

@@ -46,7 +46,10 @@ const PROP_TYPE_TO_PROP_NAME: Record<string, string> = {
  * Generic state wrapper for controlled components
  * Returns [value, onChange, additionalProps]
  */
-function useComponentState(config: ComponentConfig, variantProps: Record<string, any>): [any, ((val: any) => void) | undefined, Record<string, any>] {
+function useComponentState(
+  config: ComponentConfig,
+  variantProps: Record<string, any>
+): [any, ((val: any) => void) | undefined, Record<string, any>] {
   const { stateType, defaultStateValue } = config;
 
   if (!stateType || stateType === 'custom') {
@@ -55,15 +58,21 @@ function useComponentState(config: ComponentConfig, variantProps: Record<string,
 
   switch (stateType) {
     case 'controlled-value': {
-      const [value, setValue] = useState<string | string[]>(defaultStateValue ?? '');
+      const [value, setValue] = useState<string | string[]>(
+        defaultStateValue ?? ''
+      );
       return [value, setValue, {}];
     }
     case 'controlled-checked': {
-      const [checked, setChecked] = useState<boolean>(defaultStateValue ?? false);
+      const [checked, setChecked] = useState<boolean>(
+        defaultStateValue ?? false
+      );
       return [checked, setChecked, {}];
     }
     case 'controlled-pressed': {
-      const [pressed, setPressed] = useState<boolean>(defaultStateValue ?? false);
+      const [pressed, setPressed] = useState<boolean>(
+        defaultStateValue ?? false
+      );
       return [pressed, setPressed, {}];
     }
     case 'controlled-range': {
@@ -71,7 +80,9 @@ function useComponentState(config: ComponentConfig, variantProps: Record<string,
       return [value, setValue, {}];
     }
     case 'controlled-date': {
-      const [selected, setSelected] = useState<Date | undefined>(defaultStateValue ?? new Date());
+      const [selected, setSelected] = useState<Date | undefined>(
+        defaultStateValue ?? new Date()
+      );
       return [selected, setSelected, { mode: 'single' }];
     }
     case 'controlled-dates': {
@@ -79,7 +90,9 @@ function useComponentState(config: ComponentConfig, variantProps: Record<string,
       return [selected, setSelected, { mode: 'multiple' }];
     }
     case 'controlled-date-range': {
-      const [selected, setSelected] = useState<{ from?: Date; to?: Date }>(defaultStateValue ?? {});
+      const [selected, setSelected] = useState<{ from?: Date; to?: Date }>(
+        defaultStateValue ?? {}
+      );
       return [selected, setSelected, { mode: 'range' }];
     }
     default:
@@ -93,31 +106,43 @@ export function ComponentRenderer({
 }: ComponentRendererProps) {
   const Component = config.component;
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(
-    config.id === 'calendar' && variantProps.mode === 'single' ? new Date() : undefined
+    config.id === 'calendar' && variantProps.mode === 'single'
+      ? new Date()
+      : undefined
   );
   const [selectedDates, setSelectedDates] = useState<Date[]>(
     config.id === 'calendar' && variantProps.mode === 'multiple' ? [] : []
   );
-  const [selectedRange, setSelectedRange] = useState<{ from?: Date; to?: Date }>(
-    config.id === 'calendar' && variantProps.mode === 'range' ? {} : {}
-  );
+  const [selectedRange, setSelectedRange] = useState<{
+    from?: Date;
+    to?: Date;
+  }>(config.id === 'calendar' && variantProps.mode === 'range' ? {} : {});
   const [sheetOpen, setSheetOpen] = useState<boolean>(false);
   const [dialogOpen, setDialogOpen] = useState<boolean>(false);
   const [alertDialogOpen, setAlertDialogOpen] = useState<boolean>(false);
   const [commandDialogOpen, setCommandDialogOpen] = useState<boolean>(false);
   const [tabCount, setTabCount] = useState<number>(2);
-  const [generatedTabsItems, setGeneratedTabsItems] = useState<Array<{ value: string; label: string; content: string }> | null>(null);
-  const [activeOverlayVariant, setActiveOverlayVariant] = useState<string | null>(null);
+  const [generatedTabsItems, setGeneratedTabsItems] = useState<Array<{
+    value: string;
+    label: string;
+    content: string;
+  }> | null>(null);
+  const [activeOverlayVariant, setActiveOverlayVariant] = useState<
+    string | null
+  >(null);
 
   if (config.layoutDescription) {
     return (
       <Card
         title={config.name}
         variant="muted"
-        subtitle={config.layoutDescription || `Layout component: ${config.name}`}
+        subtitle={
+          config.layoutDescription || `Layout component: ${config.name}`
+        }
       >
         <Text variant="muted">
-          {config.notes || 'This is a layout component. Use it to structure your page content.'}
+          {config.notes ||
+            'This is a layout component. Use it to structure your page content.'}
         </Text>
       </Card>
     );
@@ -133,10 +158,15 @@ export function ComponentRenderer({
       const value = PROP_VALUES[propType as keyof typeof PROP_VALUES];
       if (value !== undefined) {
         const propName = PROP_TYPE_TO_PROP_NAME[propType] || propType;
-        
+
         if (propType === 'accordionItems' && Array.isArray(value)) {
           componentProps[propName] = value.map((item) => {
-            if (typeof item === 'object' && item !== null && 'trigger' in item && typeof item.trigger === 'string') {
+            if (
+              typeof item === 'object' &&
+              item !== null &&
+              'trigger' in item &&
+              typeof item.trigger === 'string'
+            ) {
               const triggerContent = config.supportsCommonProps.icon ? (
                 <Stack direction="row" gap="tight" align="center">
                   <PROP_VALUES.icon className="dndev-size-md" />
@@ -154,21 +184,41 @@ export function ComponentRenderer({
           });
         } else if (propType === 'collapsibleContent') {
           componentProps.children = value;
-        } else if (propType === 'commandGroups' && config.id === 'command-dialog') {
+        } else if (
+          propType === 'commandGroups' &&
+          config.id === 'command-dialog'
+        ) {
           // CommandDialog needs Command component as children
           // Type assertion: commandGroups propType always returns CommandGroup[]
-          componentProps.children = <Command groups={value as CommandGroup[]} />;
+          componentProps.children = (
+            <Command groups={value as CommandGroup[]} />
+          );
         } else if (propType === 'tabsItems' && Array.isArray(value)) {
           // Use generated tabs if available, otherwise use default
-          const tabsToUse = generatedTabsItems || (value as Array<{ value: string; label: string; content: string | ReactNode }>);
+          const tabsToUse =
+            generatedTabsItems ||
+            (value as Array<{
+              value: string;
+              label: string;
+              content: string | ReactNode;
+            }>);
           // Tabs needs items with content as ReactNode
           if (tabsToUse && tabsToUse.length > 0) {
             componentProps.items = tabsToUse.map((item) => ({
               ...item,
-              content: typeof item.content === 'string' ? <Text>{item.content}</Text> : item.content,
+              content:
+                typeof item.content === 'string' ? (
+                  <Text>{item.content}</Text>
+                ) : (
+                  item.content
+                ),
             }));
             // Set default value to first tab if not provided
-            if (!componentProps.defaultValue && !componentProps.value && tabsToUse[0]) {
+            if (
+              !componentProps.defaultValue &&
+              !componentProps.value &&
+              tabsToUse[0]
+            ) {
               componentProps.defaultValue = tabsToUse[0].value;
             }
           }
@@ -180,9 +230,22 @@ export function ComponentRenderer({
   }
 
   if (config.supportsCommonProps.content) {
-    const usesChildren = ['button', 'badge', 'toggle', 'label', 'text', 'collapsible', 'dialog', 'sheet', 'popover', 'hover-card'].includes(config.id);
+    const usesChildren = [
+      'button',
+      'badge',
+      'toggle',
+      'label',
+      'text',
+      'collapsible',
+      'dialog',
+      'sheet',
+      'popover',
+      'hover-card',
+    ].includes(config.id);
     const shortLabelComponents = ['badge', 'button'];
-    const contentValue = shortLabelComponents.includes(config.id) ? PROP_VALUES.shortLabel : PROP_VALUES.content;
+    const contentValue = shortLabelComponents.includes(config.id)
+      ? PROP_VALUES.shortLabel
+      : PROP_VALUES.content;
     if (usesChildren) {
       componentProps.children = contentValue;
     } else if (config.id !== 'tooltip') {
@@ -196,10 +259,16 @@ export function ComponentRenderer({
 
   if (config.needsTrigger) {
     const triggerText = config.triggerText || PROP_VALUES.trigger;
-    const buttonVariant = variantProps.variant && config.variants?.variant?.includes(variantProps.variant)
-      ? variantProps.variant
-      : undefined;
-    const triggerButton = <Button icon={PROP_VALUES.icon} variant={buttonVariant}>{triggerText}</Button>;
+    const buttonVariant =
+      variantProps.variant &&
+      config.variants?.variant?.includes(variantProps.variant)
+        ? variantProps.variant
+        : undefined;
+    const triggerButton = (
+      <Button icon={PROP_VALUES.icon} variant={buttonVariant}>
+        {triggerText}
+      </Button>
+    );
 
     if (config.id === 'tooltip') {
       componentProps.children = triggerButton;
@@ -212,7 +281,10 @@ export function ComponentRenderer({
   }
 
   // Generic state management for controlled components
-  const [stateValue, setStateValue, stateProps] = useComponentState(config, variantProps);
+  const [stateValue, setStateValue, stateProps] = useComponentState(
+    config,
+    variantProps
+  );
 
   // Wire up state to component props based on stateType
   if (config.stateType && config.stateType !== 'custom') {
@@ -239,7 +311,7 @@ export function ComponentRenderer({
   if (config.id === 'calendar') {
     const mode = variantProps.mode || 'single';
     componentProps.mode = mode;
-    
+
     if (mode === 'single') {
       componentProps.selected = selectedDate;
       componentProps.onSelect = setSelectedDate;
@@ -278,18 +350,21 @@ export function ComponentRenderer({
       const itemsToAdd = baseItems.slice(currentIndex, currentIndex + 5);
       // If we need more items than available, loop back to start
       const remainingNeeded = 5 - itemsToAdd.length;
-      const loopedItems = remainingNeeded > 0 ? baseItems.slice(0, remainingNeeded) : [];
-      setDisplayedItems(prev => [...prev, ...itemsToAdd, ...loopedItems]);
+      const loopedItems =
+        remainingNeeded > 0 ? baseItems.slice(0, remainingNeeded) : [];
+      setDisplayedItems((prev) => [...prev, ...itemsToAdd, ...loopedItems]);
     };
 
     const renderItem = (item: string, index: number) => (
       <Card title={item} variant="muted">
-        <Text variant="muted">Item #{index + 1}: {item}</Text>
+        <Text variant="muted">
+          Item #{index + 1}: {item}
+        </Text>
       </Card>
     );
 
     const { items: _, renderItem: __, ...restProps } = componentProps;
-    
+
     return (
       <Component
         items={displayedItems}
@@ -326,15 +401,18 @@ export function ComponentRenderer({
     const { toast } = useToast();
     const [message, setMessage] = useState<string>('');
     const [duration, setDuration] = useState<string>('5000');
-    
-    const toastTypes: Array<{ type: 'default' | 'success' | 'error' | 'warning' | 'info'; label: string }> = [
+
+    const toastTypes: Array<{
+      type: 'default' | 'success' | 'error' | 'warning' | 'info';
+      label: string;
+    }> = [
       { type: 'default', label: 'Default' },
       { type: 'success', label: 'Success' },
       { type: 'error', label: 'Error' },
       { type: 'warning', label: 'Warning' },
       { type: 'info', label: 'Info' },
     ];
-    
+
     const durationOptions = [
       { value: '0', label: 'Forever (0ms)' },
       { value: '3000', label: '3 seconds' },
@@ -343,9 +421,9 @@ export function ComponentRenderer({
       { value: '6000', label: '6 seconds' },
       { value: '7000', label: '7 seconds' },
     ];
-    
+
     const durationValue = parseInt(duration, 10);
-    
+
     return (
       <Stack gap="large" align="center" justify="center">
         <Stack className="dndev-w-full dndev-max-w-md">
@@ -356,7 +434,10 @@ export function ComponentRenderer({
               onChange={(e) => setMessage(e.target.value)}
               onKeyDown={(e) => {
                 if (e.key === 'Enter' && message.trim()) {
-                  toast({ ...(message.trim() ? { title: message } : {}), duration: durationValue });
+                  toast({
+                    ...(message.trim() ? { title: message } : {}),
+                    duration: durationValue,
+                  });
                   setMessage('');
                 }
               }}
@@ -364,7 +445,10 @@ export function ComponentRenderer({
             <Button
               onClick={() => {
                 if (message.trim()) {
-                  toast({ ...(message.trim() ? { title: message } : {}), duration: durationValue });
+                  toast({
+                    ...(message.trim() ? { title: message } : {}),
+                    duration: durationValue,
+                  });
                   setMessage('');
                 }
               }}
@@ -385,11 +469,18 @@ export function ComponentRenderer({
             {toastTypes.map(({ type, label }) => (
               <Button
                 key={type}
-                variant={type === 'error' ? 'destructive' : type === 'success' ? 'primary' : 'outline'}
+                variant={
+                  type === 'error'
+                    ? 'destructive'
+                    : type === 'success'
+                      ? 'primary'
+                      : 'outline'
+                }
                 onClick={() => {
                   toast({
                     title: `${label} Toast`,
-                    description: message.trim() || `This is a ${type} notification`,
+                    description:
+                      message.trim() || `This is a ${type} notification`,
                     toastType: type,
                     duration: durationValue,
                   });
@@ -449,11 +540,16 @@ export function ComponentRenderer({
       );
     }
     if (config.id === 'spinner') {
-      const currentVariant = variantProps.variant || componentProps.variant || 'primary';
+      const currentVariant =
+        variantProps.variant || componentProps.variant || 'primary';
       const isActive = activeOverlayVariant === currentVariant;
       return (
         <>
-          <Stack align="center" justify="center" style={{ minHeight: '200px', position: 'relative', zIndex: 10000 }}>
+          <Stack
+            align="center"
+            justify="center"
+            style={{ minHeight: '200px', position: 'relative', zIndex: 10000 }}
+          >
             <Button
               variant="ghost"
               onClick={() => {
@@ -469,7 +565,11 @@ export function ComponentRenderer({
             </Button>
           </Stack>
           {isActive && (
-            <Component {...componentProps} overlay variant={currentVariant as any} />
+            <Component
+              {...componentProps}
+              overlay
+              variant={currentVariant as any}
+            />
           )}
         </>
       );
@@ -487,7 +587,7 @@ export function ComponentRenderer({
       } else if (config.stateType === 'controlled-value') {
         stateLabel = String(stateValue || '');
       }
-      
+
       return (
         <Stack direction="row" align="center">
           <Component {...componentProps} />
@@ -502,10 +602,6 @@ export function ComponentRenderer({
       </Stack>
     );
   } catch (error) {
-    return (
-      <Text variant="destructive">
-        Error: {String(error)}
-      </Text>
-    );
+    return <Text variant="destructive">Error: {String(error)}</Text>;
   }
 }

package/templates/app-demo/src/pages/components/ComponentsData.tsx.example

@@ -7,12 +7,16 @@ import { Button, Collapsible, Text, Badge } from '@donotdev/components';
 export const PROP_VALUES = {
   title: 'Title',
   subtitle: 'Subtitle',
-  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+  description:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+  content:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
   shortLabel: 'Lorem ipsum short',
   collapsibleContent: (
     <div className="dndev-p-md dndev-surface dndev-mt-sm">
-      <Text variant="muted" className="dndev-mb-sm">Advanced Configuration Details:</Text>
+      <Text variant="muted" className="dndev-mb-sm">
+        Advanced Configuration Details:
+      </Text>
       <Text>• Cache policy: 3600s</Text>
       <Text>• Retries: 3</Text>
       <Text>• Timeout: 5000ms</Text>
@@ -27,35 +31,96 @@ export const PROP_VALUES = {
   confirmLabel: 'Confirm',
   cancelLabel: 'Cancel',
   primaryAction: <Button icon={Rocket}>Primary</Button>,
-  secondaryAction: <Button variant="outline" icon={Rocket}>Secondary</Button>,
+  secondaryAction: (
+    <Button variant="outline" icon={Rocket}>
+      Secondary
+    </Button>
+  ),
   items: [
-    { label: 'Item 1', value: '1', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
-    { label: 'Item 2', value: '2', content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.' },
-    { label: 'Item 3', value: '3', content: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error.' },
+    {
+      label: 'Item 1',
+      value: '1',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    },
+    {
+      label: 'Item 2',
+      value: '2',
+      content:
+        'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.',
+    },
+    {
+      label: 'Item 3',
+      value: '3',
+      content:
+        'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error.',
+    },
   ],
   accordionItems: [
-    { value: 'item-1', trigger: 'Trigger: Accordion Item 1', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' },
-    { value: 'item-2', trigger: 'Trigger: Accordion Item 2', content: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' },
-    { value: 'item-3', trigger: 'Trigger: Accordion Item 3', content: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.' },
+    {
+      value: 'item-1',
+      trigger: 'Trigger: Accordion Item 1',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+    },
+    {
+      value: 'item-2',
+      trigger: 'Trigger: Accordion Item 2',
+      content:
+        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+    {
+      value: 'item-3',
+      trigger: 'Trigger: Accordion Item 3',
+      content:
+        'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.',
+    },
   ],
   tabsItems: [
-    { value: 'tab1', label: 'Tab 1', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.' },
-    { value: 'tab2', label: 'Tab 2', content: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.' },
+    {
+      value: 'tab1',
+      label: 'Tab 1',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+    },
+    {
+      value: 'tab2',
+      label: 'Tab 2',
+      content:
+        'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.',
+    },
   ],
   commandGroups: [
     {
       heading: 'Navigation',
       items: [
         { label: 'Home', description: 'Go to home', onSelect: () => {} },
-        { label: 'Components', description: 'Open components page', onSelect: () => {} },
+        {
+          label: 'Components',
+          description: 'Open components page',
+          onSelect: () => {},
+        },
         { label: 'Settings', description: 'Open settings', onSelect: () => {} },
       ],
     },
   ],
   listItems: [
-    { icon: <Check className="dndev-size-md" />, content: 'Feature enabled with icon support' },
-    { icon: <Check className="dndev-size-md" />, content: <Text>Custom ReactNode content with <Badge>Badge</Badge></Text> },
-    { icon: <AlertCircle className="dndev-size-md" />, content: 'Warning item with different icon' },
+    {
+      icon: <Check className="dndev-size-md" />,
+      content: 'Feature enabled with icon support',
+    },
+    {
+      icon: <Check className="dndev-size-md" />,
+      content: (
+        <Text>
+          Custom ReactNode content with <Badge>Badge</Badge>
+        </Text>
+      ),
+    },
+    {
+      icon: <AlertCircle className="dndev-size-md" />,
+      content: 'Warning item with different icon',
+    },
     { content: 'Simple text item without icon' },
   ],
   navigationItems: [
@@ -76,9 +141,21 @@ export const PROP_VALUES = {
     { value: 'option3', label: 'Option 3' },
   ],
   comboboxOptions: [
-    { value: 'tenant1', label: 'Tenant Alpha', description: 'Primary tenant account' },
-    { value: 'tenant2', label: 'Tenant Beta', description: 'Secondary tenant account' },
-    { value: 'tenant3', label: 'Tenant Gamma', description: 'Test tenant account' },
+    {
+      value: 'tenant1',
+      label: 'Tenant Alpha',
+      description: 'Primary tenant account',
+    },
+    {
+      value: 'tenant2',
+      label: 'Tenant Beta',
+      description: 'Secondary tenant account',
+    },
+    {
+      value: 'tenant3',
+      label: 'Tenant Gamma',
+      description: 'Test tenant account',
+    },
     { value: 'owner1', label: 'John Smith', description: 'Owner - Marketing' },
     { value: 'owner2', label: 'Jane Doe', description: 'Owner - Engineering' },
     { value: 'owner3', label: 'Bob Johnson', description: 'Owner - Sales' },
@@ -116,7 +193,13 @@ export const PROP_VALUES = {
   ),
 };
 
-export type CSSFamily = 'surface' | 'floating' | 'interactive' | 'layout' | 'input' | 'other';
+export type CSSFamily =
+  | 'surface'
+  | 'floating'
+  | 'interactive'
+  | 'layout'
+  | 'input'
+  | 'other';
 
 export type PropType =
   | 'title'
@@ -149,4 +232,3 @@ export type PropType =
   | 'footer'
   | 'avatarSrc'
   | 'avatarFallback';
-