@ceed/ads 1.35.0 → 1.36.0

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>
   );
 }