@ceed/ads 1.35.1 → 1.37.0-next.1

package/dist/components/navigation/ProfileMenu.md

@@ -170,39 +170,57 @@ Profile card without any action menu items. The dropdown displays only the user
 
 ## Sizes
 
-ProfileMenu supports `md` (default) and `sm` size variants for use in different layout densities.
+ProfileMenu supports `sm` (default) and `md` size variants for use in different layout densities.
 
 ```tsx
 <Stack direction="row" gap="150px">
-  <ProfileMenu {...args} size="md" profile={{
-    name: 'John Gordon',
-    chip: 'PDT',
-    caption: 'j.gordon@haulla.com'
-  }} menuItems={[{
-    label: 'Menu Item1',
-    onClick: fn()
-  }, {
-    label: 'Menu Item2',
-    onClick: fn()
-  }, {
-    label: 'Menu Item3',
-    onClick: fn()
-  }]} />
-  <ProfileMenu {...args} size="sm" profile={{
-    name: 'John Gordon',
-    chip: 'PDT',
-    caption: 'j.gordon@haulla.com'
-  }} menuItems={[{
-    label: 'Menu Item1',
-    onClick: fn()
-  }, {
-    label: 'Menu Item2',
-    onClick: fn()
-  }, {
-    label: 'Menu Item3',
-    onClick: fn()
-  }]} />
-</Stack>
+    <ProfileMenu
+      {...args}
+      size="md"
+      profile={{
+        name: "John Gordon",
+        chip: "PDT",
+        caption: "j.gordon@haulla.com"
+      }}
+      menuItems={[
+        {
+          label: "Menu Item1",
+          onClick: fn()
+        },
+        {
+          label: "Menu Item2",
+          onClick: fn()
+        },
+        {
+          label: "Menu Item3",
+          onClick: fn()
+        }
+      ]}
+    />
+    <ProfileMenu
+      {...args}
+      size="sm"
+      profile={{
+        name: "John Gordon",
+        chip: "PDT",
+        caption: "j.gordon@haulla.com"
+      }}
+      menuItems={[
+        {
+          label: "Menu Item1",
+          onClick: fn()
+        },
+        {
+          label: "Menu Item2",
+          onClick: fn()
+        },
+        {
+          label: "Menu Item3",
+          onClick: fn()
+        }
+      ]}
+    />
+  </Stack>
 ```
 
 ## Avatar
@@ -241,17 +259,23 @@ ProfileMenu automatically generates initials from various name formats, includin
 
 ```tsx
 <>
-  <ProfileMenu {...args} profile={{
-    name: '홍길동',
-    chip: 'PDT',
-    caption: 'j.gordon@haulla.com'
-  }} />
-  <ProfileMenu {...args} profile={{
-    name: '제갈공명',
-    chip: 'PDT',
-    caption: 'j.gordon@haulla.com'
-  }} />
-</>
+    <ProfileMenu
+      {...args}
+      profile={{
+        name: "홍길동",
+        chip: "PDT",
+        caption: "j.gordon@haulla.com"
+      }}
+    />
+    <ProfileMenu
+      {...args}
+      profile={{
+        name: "제갈공명",
+        chip: "PDT",
+        caption: "j.gordon@haulla.com"
+      }}
+    />
+  </>
 ```
 
 ## Controlled vs Uncontrolled
@@ -381,7 +405,7 @@ function OrgProfileMenu({ user, organization }) {
 | `defaultOpen`  | `boolean`                                                              | `false`         | Initial open state (uncontrolled)                |
 | `onOpenChange` | `(open: boolean) => void`                                              | -               | Callback when open state changes                 |
 | `getInitial`   | `(name: string) => string`                                             | First character | Custom function to extract initials from name    |
-| `size`         | `'sm' \| 'md'`                                                         | `'md'`          | Component size                                   |
+| `size`         | `'sm' \| 'md'`                                                         | `'sm'`          | Component size                                   |
 
 ## Best Practices
 
@@ -404,9 +428,7 @@ function OrgProfileMenu({ user, organization }) {
 
 ```tsx
 // ✅ Good: Clear user context
-<ProfileMenu
-  profile={{ name: 'Jane Smith', caption: 'jane@company.com', chip: 'Admin' }}
-/>
+<ProfileMenu profile={{ name: 'Jane Smith', caption: 'jane@company.com', chip: 'Admin' }} />
 ```
 
 3. **Keep menu items concise**: Limit the number of menu items to 5-7 maximum. Move less common actions to a dedicated settings page.

package/dist/components/navigation/Stepper.md

@@ -144,10 +144,7 @@ function FormWizard() {
       <Box sx={{ mt: 3 }}>
         {/* Step content rendered here based on activeStep */}
         <Stack direction="row" gap={1} sx={{ mt: 2 }}>
-          <Button
-            disabled={activeStep <= 1}
-            onClick={() => setActiveStep((prev) => prev - 1)}
-          >
+          <Button disabled={activeStep <= 1} onClick={() => setActiveStep((prev) => prev - 1)}>
             Back
           </Button>
           <Button onClick={() => setActiveStep((prev) => prev + 1)}>
@@ -191,14 +188,7 @@ function CompactProgress({ currentStep, totalSteps }) {
     indicatorContent: i + 1,
   }));
 
-  return (
-    <Stepper
-      steps={steps}
-      activeStep={currentStep}
-      orientation="horizontal"
-      stepOrientation="vertical"
-    />
-  );
+  return <Stepper steps={steps} activeStep={currentStep} orientation="horizontal" stepOrientation="vertical" />;
 }
 ```
 

package/dist/components/navigation/Tabs.md

@@ -6,21 +6,21 @@ Tabs follow a composition pattern: the `Tabs` container manages state, `TabList`
 
 ```tsx
 <Tabs {...args} defaultValue={0}>
-  <TabList>
-    <Tab color={color} variant={variant}>
-      First Tab
-    </Tab>
-    <Tab color={color} variant={variant}>
-      Second Tab
-    </Tab>
-    <Tab color={color} variant={variant}>
-      Third Tab
-    </Tab>
-  </TabList>
-  <TabPanel value={0}>Content for the first tab panel.</TabPanel>
-  <TabPanel value={1}>Content for the second tab panel.</TabPanel>
-  <TabPanel value={2}>Content for the third tab panel.</TabPanel>
-</Tabs>
+    <TabList>
+      <Tab color={color} variant={variant}>
+        First Tab
+      </Tab>
+      <Tab color={color} variant={variant}>
+        Second Tab
+      </Tab>
+      <Tab color={color} variant={variant}>
+        Third Tab
+      </Tab>
+    </TabList>
+    <TabPanel value={0}>Content for the first tab panel.</TabPanel>
+    <TabPanel value={1}>Content for the second tab panel.</TabPanel>
+    <TabPanel value={2}>Content for the third tab panel.</TabPanel>
+  </Tabs>
 ```
 
 | Field   | Description | Default   |
@@ -56,21 +56,21 @@ Default horizontal tab navigation with tab panels.
 
 ```tsx
 <Tabs {...args}>
-  <TabList>
-    <Tab color={color} variant={variant}>
-      Tab1
-    </Tab>
-    <Tab color={color} variant={variant}>
-      Tab2
-    </Tab>
-    <Tab color={color} variant={variant}>
-      Tab3
-    </Tab>
-  </TabList>
-  <TabPanel value={0}>Tab list1</TabPanel>
-  <TabPanel value={1}>Tab list2</TabPanel>
-  <TabPanel value={2}>Tab list3</TabPanel>
-</Tabs>
+    <TabList>
+      <Tab color={color} variant={variant}>
+        Tab1
+      </Tab>
+      <Tab color={color} variant={variant}>
+        Tab2
+      </Tab>
+      <Tab color={color} variant={variant}>
+        Tab3
+      </Tab>
+    </TabList>
+    <TabPanel value={0}>Tab list1</TabPanel>
+    <TabPanel value={1}>Tab list2</TabPanel>
+    <TabPanel value={2}>Tab list3</TabPanel>
+  </Tabs>
 ```
 
 ## Tab Variants
@@ -78,40 +78,42 @@ Default horizontal tab navigation with tab panels.
 Tabs support `plain`, `outlined`, `soft`, and `solid` visual styles. Apply the variant to both TabList and individual Tab components for a consistent appearance.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 24
-}}>
-<Tabs defaultValue={0}>
-  <TabList variant="plain">
-    <Tab variant="plain">Plain</Tab>
-    <Tab variant="plain">Tabs</Tab>
-    <Tab variant="plain">Example</Tab>
-  </TabList>
-</Tabs>
-<Tabs defaultValue={0}>
-  <TabList variant="outlined">
-    <Tab variant="outlined">Outlined</Tab>
-    <Tab variant="outlined">Tabs</Tab>
-    <Tab variant="outlined">Example</Tab>
-  </TabList>
-</Tabs>
-<Tabs defaultValue={0}>
-  <TabList variant="soft">
-    <Tab variant="soft">Soft</Tab>
-    <Tab variant="soft">Tabs</Tab>
-    <Tab variant="soft">Example</Tab>
-  </TabList>
-</Tabs>
-<Tabs defaultValue={0}>
-  <TabList variant="solid">
-    <Tab variant="solid">Solid</Tab>
-    <Tab variant="solid">Tabs</Tab>
-    <Tab variant="solid">Example</Tab>
-  </TabList>
-</Tabs>
-</div>
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: 24
+    }}
+  >
+    <Tabs defaultValue={0}>
+      <TabList variant="plain">
+        <Tab variant="plain">Plain</Tab>
+        <Tab variant="plain">Tabs</Tab>
+        <Tab variant="plain">Example</Tab>
+      </TabList>
+    </Tabs>
+    <Tabs defaultValue={0}>
+      <TabList variant="outlined">
+        <Tab variant="outlined">Outlined</Tab>
+        <Tab variant="outlined">Tabs</Tab>
+        <Tab variant="outlined">Example</Tab>
+      </TabList>
+    </Tabs>
+    <Tabs defaultValue={0}>
+      <TabList variant="soft">
+        <Tab variant="soft">Soft</Tab>
+        <Tab variant="soft">Tabs</Tab>
+        <Tab variant="soft">Example</Tab>
+      </TabList>
+    </Tabs>
+    <Tabs defaultValue={0}>
+      <TabList variant="solid">
+        <Tab variant="solid">Solid</Tab>
+        <Tab variant="solid">Tabs</Tab>
+        <Tab variant="solid">Example</Tab>
+      </TabList>
+    </Tabs>
+  </div>
 ```
 
 ## Tab Sizes
@@ -119,33 +121,35 @@ Tabs support `plain`, `outlined`, `soft`, and `solid` visual styles. Apply the v
 Tabs come in `sm`, `md`, and `lg` sizes. Set the `size` prop on the Tabs container to affect all child components uniformly.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 24
-}}>
-<Tabs defaultValue={0} size="sm">
-  <TabList>
-    <Tab>Small</Tab>
-    <Tab>Size</Tab>
-    <Tab>Tabs</Tab>
-  </TabList>
-</Tabs>
-<Tabs defaultValue={0} size="md">
-  <TabList>
-    <Tab>Medium</Tab>
-    <Tab>Size</Tab>
-    <Tab>Tabs</Tab>
-  </TabList>
-</Tabs>
-<Tabs defaultValue={0} size="lg">
-  <TabList>
-    <Tab>Large</Tab>
-    <Tab>Size</Tab>
-    <Tab>Tabs</Tab>
-  </TabList>
-</Tabs>
-</div>
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: 24
+    }}
+  >
+    <Tabs defaultValue={0} size="sm">
+      <TabList>
+        <Tab>Small</Tab>
+        <Tab>Size</Tab>
+        <Tab>Tabs</Tab>
+      </TabList>
+    </Tabs>
+    <Tabs defaultValue={0} size="md">
+      <TabList>
+        <Tab>Medium</Tab>
+        <Tab>Size</Tab>
+        <Tab>Tabs</Tab>
+      </TabList>
+    </Tabs>
+    <Tabs defaultValue={0} size="lg">
+      <TabList>
+        <Tab>Large</Tab>
+        <Tab>Size</Tab>
+        <Tab>Tabs</Tab>
+      </TabList>
+    </Tabs>
+  </div>
 ```
 
 ## Tab Colors
@@ -153,42 +157,44 @@ Tabs come in `sm`, `md`, and `lg` sizes. Set the `size` prop on the Tabs contain
 Apply semantic colors (`primary`, `neutral`, `success`, `warning`, `danger`) to individual tabs for color-coded navigation.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 24
-}}>
-<Tabs defaultValue={0}>
-  <TabList>
-    <Tab color="primary">Primary</Tab>
-    <Tab color="primary">Tabs</Tab>
-  </TabList>
-</Tabs>
-<Tabs defaultValue={0}>
-  <TabList>
-    <Tab color="neutral">Neutral</Tab>
-    <Tab color="neutral">Tabs</Tab>
-  </TabList>
-</Tabs>
-<Tabs defaultValue={0}>
-  <TabList>
-    <Tab color="success">Success</Tab>
-    <Tab color="success">Tabs</Tab>
-  </TabList>
-</Tabs>
-<Tabs defaultValue={0}>
-  <TabList>
-    <Tab color="warning">Warning</Tab>
-    <Tab color="warning">Tabs</Tab>
-  </TabList>
-</Tabs>
-<Tabs defaultValue={0}>
-  <TabList>
-    <Tab color="danger">Danger</Tab>
-    <Tab color="danger">Tabs</Tab>
-  </TabList>
-</Tabs>
-</div>
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: 24
+    }}
+  >
+    <Tabs defaultValue={0}>
+      <TabList>
+        <Tab color="primary">Primary</Tab>
+        <Tab color="primary">Tabs</Tab>
+      </TabList>
+    </Tabs>
+    <Tabs defaultValue={0}>
+      <TabList>
+        <Tab color="neutral">Neutral</Tab>
+        <Tab color="neutral">Tabs</Tab>
+      </TabList>
+    </Tabs>
+    <Tabs defaultValue={0}>
+      <TabList>
+        <Tab color="success">Success</Tab>
+        <Tab color="success">Tabs</Tab>
+      </TabList>
+    </Tabs>
+    <Tabs defaultValue={0}>
+      <TabList>
+        <Tab color="warning">Warning</Tab>
+        <Tab color="warning">Tabs</Tab>
+      </TabList>
+    </Tabs>
+    <Tabs defaultValue={0}>
+      <TabList>
+        <Tab color="danger">Danger</Tab>
+        <Tab color="danger">Tabs</Tab>
+      </TabList>
+    </Tabs>
+  </div>
 ```
 
 ## Tabs with Icon Decorators
@@ -197,21 +203,21 @@ Add icons or other elements before or after the tab label using `startDecorator`
 
 ```tsx
 <Tabs {...args}>
-  <TabList>
-    <Tab startDecorator={<Call />} color={color} variant={variant}>
-      Tab1
-    </Tab>
-    <Tab endDecorator={<Sms />} color={color} variant={variant}>
-      Tab2
-    </Tab>
-    <Tab startDecorator={<Email />} endDecorator={<MoreVert />} color={color} variant={variant}>
-      Tab3
-    </Tab>
-  </TabList>
-  <TabPanel value={0}>Tab list1</TabPanel>
-  <TabPanel value={1}>Tab list2</TabPanel>
-  <TabPanel value={2}>Tab list3</TabPanel>
-</Tabs>
+    <TabList>
+      <Tab startDecorator={<Call />} color={color} variant={variant}>
+        Tab1
+      </Tab>
+      <Tab endDecorator={<Sms />} color={color} variant={variant}>
+        Tab2
+      </Tab>
+      <Tab startDecorator={<Email />} endDecorator={<MoreVert />} color={color} variant={variant}>
+        Tab3
+      </Tab>
+    </TabList>
+    <TabPanel value={0}>Tab list1</TabPanel>
+    <TabPanel value={1}>Tab list2</TabPanel>
+    <TabPanel value={2}>Tab list3</TabPanel>
+  </Tabs>
 ```
 
 ## Vertical Tabs
@@ -219,18 +225,22 @@ Add icons or other elements before or after the tab label using `startDecorator`
 Set `orientation="vertical"` on the Tabs container for sidebar-style navigation layouts.
 
 ```tsx
-<Tabs defaultValue={0} orientation="vertical" sx={{
-  minWidth: 300
-}}>
-<TabList>
-  <Tab>Profile</Tab>
-  <Tab>Settings</Tab>
-  <Tab>Notifications</Tab>
-</TabList>
-<TabPanel value={0}>Profile content</TabPanel>
-<TabPanel value={1}>Settings content</TabPanel>
-<TabPanel value={2}>Notifications content</TabPanel>
-</Tabs>
+<Tabs
+    defaultValue={0}
+    orientation="vertical"
+    sx={{
+      minWidth: 300
+    }}
+  >
+    <TabList>
+      <Tab>Profile</Tab>
+      <Tab>Settings</Tab>
+      <Tab>Notifications</Tab>
+    </TabList>
+    <TabPanel value={0}>Profile content</TabPanel>
+    <TabPanel value={1}>Settings content</TabPanel>
+    <TabPanel value={2}>Notifications content</TabPanel>
+  </Tabs>
 ```
 
 ## Disabled Tabs
@@ -239,15 +249,15 @@ Individual tabs can be disabled with the `disabled` prop while keeping other tab
 
 ```tsx
 <Tabs defaultValue={0}>
-  <TabList>
-    <Tab>Active Tab</Tab>
-    <Tab disabled>Disabled Tab</Tab>
-    <Tab>Another Tab</Tab>
-  </TabList>
-  <TabPanel value={0}>First panel content</TabPanel>
-  <TabPanel value={1}>Second panel content (disabled)</TabPanel>
-  <TabPanel value={2}>Third panel content</TabPanel>
-</Tabs>
+    <TabList>
+      <Tab>Active Tab</Tab>
+      <Tab disabled>Disabled Tab</Tab>
+      <Tab>Another Tab</Tab>
+    </TabList>
+    <TabPanel value={0}>First panel content</TabPanel>
+    <TabPanel value={1}>Second panel content (disabled)</TabPanel>
+    <TabPanel value={2}>Third panel content</TabPanel>
+  </Tabs>
 ```
 
 ## Controlled Tabs
@@ -256,20 +266,24 @@ Use the `value` and `onChange` props for programmatic control of the active tab.
 
 ```tsx
 <div>
-  <Tabs value={value} onChange={(event, newValue) => setValue(newValue as number)}>
-    <TabList>
-      <Tab>First</Tab>
-      <Tab>Second</Tab>
-      <Tab>Third</Tab>
-    </TabList>
-    <TabPanel value={0}>First panel</TabPanel>
-    <TabPanel value={1}>Second panel</TabPanel>
-    <TabPanel value={2}>Third panel</TabPanel>
-  </Tabs>
-  <div style={{
-    marginTop: 16
-  }}>Current tab index: {value}</div>
-</div>
+    <Tabs value={value} onChange={(event, newValue) => setValue(newValue as number)}>
+      <TabList>
+        <Tab>First</Tab>
+        <Tab>Second</Tab>
+        <Tab>Third</Tab>
+      </TabList>
+      <TabPanel value={0}>First panel</TabPanel>
+      <TabPanel value={1}>Second panel</TabPanel>
+      <TabPanel value={2}>Third panel</TabPanel>
+    </Tabs>
+    <div
+      style={{
+        marginTop: 16
+      }}
+    >
+      Current tab index: {value}
+    </div>
+  </div>
 ```
 
 ## Tabs for Settings Page
@@ -283,9 +297,15 @@ function SettingsPage() {
         <Tab startDecorator={<SecurityIcon />}>Security</Tab>
         <Tab startDecorator={<NotificationsIcon />}>Notifications</Tab>
       </TabList>
-      <TabPanel value={0}><ProfileSettings /></TabPanel>
-      <TabPanel value={1}><SecuritySettings /></TabPanel>
-      <TabPanel value={2}><NotificationSettings /></TabPanel>
+      <TabPanel value={0}>
+        <ProfileSettings />
+      </TabPanel>
+      <TabPanel value={1}>
+        <SecuritySettings />
+      </TabPanel>
+      <TabPanel value={2}>
+        <NotificationSettings />
+      </TabPanel>
     </Tabs>
   );
 }
@@ -304,9 +324,15 @@ function DashboardTabs() {
         <Tab value="week">This Week</Tab>
         <Tab value="month">This Month</Tab>
       </TabList>
-      <TabPanel value="day"><DailyStats /></TabPanel>
-      <TabPanel value="week"><WeeklyStats /></TabPanel>
-      <TabPanel value="month"><MonthlyStats /></TabPanel>
+      <TabPanel value="day">
+        <DailyStats />
+      </TabPanel>
+      <TabPanel value="week">
+        <WeeklyStats />
+      </TabPanel>
+      <TabPanel value="month">
+        <MonthlyStats />
+      </TabPanel>
     </Tabs>
   );
 }
@@ -342,7 +368,7 @@ function SidebarTabs() {
 | `defaultValue` | `string \| number`                                             | -              | Initial active tab (uncontrolled) |
 | `onChange`     | `(event, value) => void`                                       | -              | Callback when active tab changes  |
 | `orientation`  | `'horizontal' \| 'vertical'`                                   | `'horizontal'` | Tab layout direction              |
-| `size`         | `'sm' \| 'md' \| 'lg'`                                         | `'md'`         | Tab size                          |
+| `size`         | `'sm' \| 'md' \| 'lg'`                                         | `'sm'`         | Tab size                          |
 | `variant`      | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                   | `'plain'`      | Visual style                      |
 | `color`        | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'`    | Color scheme                      |
 | `sx`           | `SxProps`                                                      | -              | Custom styles                     |