@udixio/mcp 0.3.2 → 0.4.3

package/dist/bundled/doc-src/data/components/icon-button.overview.mdx

@@ -1,155 +0,0 @@
----
----
-
-
-
-
-
-
-
-
-
-
-
-
-
-import { CodePreview } from '@/components/CodePreview.js';
-import { faPlus, faStar as fasStar } from '@fortawesome/free-solid-svg-icons';
-import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
-
-## Usage
-
-Import IconButton from @udixio/ui-react when an action is best represented by an icon.
-
-```bash
-import { IconButton } from "@udixio/ui-react"
-```
-
-<CodePreview
-  client:load
-  code={`
-  <div className="flex items-center gap-3">
-    <IconButton label="Add item" icon={faPlus} onClick={() => console.log('add')} />
-  </div>`}
-  scope={{ faPlus }}
-/>
-
-## Variants
-
-<CodePreview
-  client:load
-  code={`
-  <div className="flex items-center gap-3">
-    <IconButton label="Standard" icon={faPlus} variant="standard" />
-    <IconButton label="Filled" icon={faPlus} variant="filled" />
-    <IconButton label="Tonal" icon={faPlus} variant="tonal" />
-    <IconButton label="Outlined" icon={faPlus} variant="outlined" />
-  </div>`}
-  scope={{ faPlus }}
-/>
-
-## Sizes
-
-<CodePreview
-  client:load
-  code={`
-  <div className="flex items-center gap-3">
-    <IconButton variant="filled" label="XS" icon={faPlus} size="xSmall" />
-    <IconButton variant="filled" label="S" icon={faPlus} size="small" />
-    <IconButton variant="filled" label="M" icon={faPlus} size="medium" />
-    <IconButton variant="filled" label="L" icon={faPlus} size="large" />
-    <IconButton variant="filled" label="XL" icon={faPlus} size="xLarge" />
-  </div>`}
-  scope={{ faPlus }}
-/>
-
-## Shapes and widths
-
-Control the button outline with `shape` and surface padding with `width`.
-
-<CodePreview
-  client:load
-  code={`
- <>
-  <div className="flex items-center gap-3">
-    <IconButton variant="filled" label="Rounded" icon={faPlus} shape="rounded" width="narrow" />
-    <IconButton variant="filled" label="Squared" icon={faPlus} shape="rounded" width="default" />
-    <IconButton variant="filled" label="Narrow" icon={faPlus} shape="rounded" width="wide" />
-
-              </div>
-              <div className="flex items-center mt-8 gap-3">
-                <IconButton variant="filled" label="Rounded" icon={faPlus} shape="squared" width="narrow" />
-                <IconButton variant="filled" label="Squared" icon={faPlus} shape="squared" width="default" />
-                <IconButton variant="filled" label="Narrow" icon={faPlus} shape="squared" width="wide" />
-              </div>
-             </>
-`}
-  scope={{ faPlus }}
-/>
-
-## States
-
-Use `disabled` to prevent user interaction
-
-<CodePreview
-  client:load
-  code={`
-  <div className="flex items-center gap-3">
-    <IconButton variant="filled" label="Disabled" icon={faPlus} disabled />
-  </div>`}
-  scope={{ faPlus }}
-/>
-
-## Toggle state
-
-Use \`onToggle\` and \`iconSelected\` to turn it into a toggle button.
-
-<CodePreview
-  client:load
-  code={`
-  <div className="flex items-center gap-3">
-    <IconButton
-      label="Standard"
-      icon={farStar}
-      iconSelected={fasStar}
-      onToggle={(active) => console.log('active:', active)}
-    />
-    <IconButton
-      variant="filled"
-      label="Filled"
-      icon={farStar}
-      iconSelected={fasStar}
-      onToggle={(active) => console.log('active:', active)}
-    />
-    <IconButton
-      variant="tonal"
-      label="Tonal"
-      icon={farStar}
-      iconSelected={fasStar}
-      onToggle={(active) => console.log('active:', active)}
-    />
-    <IconButton
-      variant="outlined"
-      label="Outlined"
-      icon={farStar}
-      iconSelected={fasStar}
-      onToggle={(active) => console.log('active:', active)}
-    />
-  </div>
-  `}
-  scope={{ farStar, fasStar }}
-/>
-
-## Link or action
-
-If the `href` prop is provided, it renders an anchor; otherwise it renders a button.
-
-<CodePreview
-  client:load
-  code={`
-  <div className="flex items-center gap-3">
-    <IconButton label="Go to Udixio" icon={faPlus} href="https://udixio.dev" />
-    <IconButton label="Run action" icon={faPlus} onClick={() => console.log('clicked')} />
-  </div>`}
-  scope={{ faPlus }}
-/>

package/dist/bundled/doc-src/data/components/navigation-rail.overview.mdx

@@ -1,142 +0,0 @@
----
----
-
-
-import { CodePreview } from '@/components/CodePreview.js';
-import {
-  faBell,
-  faCalendarDays,
-  faChartLine,
-  faClock,
-  faHourglass,
-  faMusic,
-  faPlus,
-  faStopwatch
-} from '@fortawesome/free-solid-svg-icons';
-
-## Usage
-
-NavigationRail provides primary navigation for an app. Use NavigationRail with NavigationRailItem children. Optionally include a Fab and sections.
-
-```bash
-import { NavigationRail, NavigationRailItem, NavigationRailSection, Fab } from "@udixio/ui-react"
-```
-
-```tsx
-<NavigationRail>
-  <NavigationRailItem icon={faBell} iconSelected={faBell} selected>
-    Alarm
-  </NavigationRailItem>
-  <NavigationRailItem icon={faClock} iconSelected={faClock}>
-    Clock
-  </NavigationRailItem>
-  <NavigationRailItem icon={faHourglass} iconSelected={faHourglass}>
-    Timer
-  </NavigationRailItem>
-  <NavigationRailItem icon={faStopwatch} iconSelected={faStopwatch}>
-    Stopwatch
-  </NavigationRailItem>
-</NavigationRail>
-```
-
-## Alignment
-
-alignment: "top" (default) | "middle"
-
-<CodePreview
-  center={false}
-  client:load
-  code={`<div class="h-[750px] flex gap-8">
-   <NavigationRail className="bg-surface-container-highest" alignment="top">
-        <NavigationRailItem icon={faBell}  iconSelected={faBell} selected >Alarm</NavigationRailItem>
-        <NavigationRailItem icon={faClock}  iconSelected={faClock} >Clock</NavigationRailItem>
-        <NavigationRailItem icon={faHourglass}  iconSelected={faHourglass} >Timer</NavigationRailItem>
-        <NavigationRailItem icon={faStopwatch}  iconSelected={faStopwatch} >Stopwatch</NavigationRailItem>
-  </NavigationRail>
-  <NavigationRail className="bg-surface-container-highest" alignment="middle">
-        <NavigationRailItem icon={faBell}  iconSelected={faBell} label="Alarm" selected />
-        <NavigationRailItem icon={faClock}  iconSelected={faClock} label="Clock" />
-        <NavigationRailItem icon={faHourglass}  iconSelected={faHourglass} label="Timer" />
-        <NavigationRailItem icon={faStopwatch}  iconSelected={faStopwatch} label="Stopwatch" />
-  </NavigationRail>
-</div>
-`}
-  scope={{ faBell, faClock, faHourglass, faStopwatch, faPlus }}
-/>
-
-## Extended rail
-
-Toggle the extended mode to reveal labels and optional sections. You can control it with the `extended` and `onExtendedChange` props.
-
-    <CodePreview
-      center={false}
-      client:load
-      code={`
-    function Example() {
-    const [extended, setExtended] = React.useState(true)
-    return (
-    <NavigationRail className="bg-surface-container-highest h-[750px]" extended={extended}
-
-onExtendedChange={setExtended}>
-
-<Fab label="Add Timer" icon={faPlus} />
-  <NavigationRailItem icon={faBell} iconSelected={faBell} label="Alarm" />
-  <NavigationRailItem icon={faClock} iconSelected={faClock} label="Clock" />
-  <NavigationRailItem icon={faHourglass} iconSelected={faHourglass} label="Timer" />
-  <NavigationRailItem icon={faStopwatch} iconSelected={faStopwatch} label="Stopwatch" />
-  <NavigationRailSection label="Sleep well" />
-  <NavigationRailItem label="Schedule" icon={faCalendarDays} iconSelected={faCalendarDays} />
-  <NavigationRailItem label="Stats" icon={faChartLine} iconSelected={faChartLine} />
-  <NavigationRailItem label="Sleep sound" icon={faMusic} iconSelected={faMusic} />
-</NavigationRail>
-)
-}
-`}
-  scope={{
-    faBell,
-    faClock,
-    faHourglass,
-    faStopwatch,
-    faPlus,
-    faCalendarDays,
-    faChartLine,
-    faMusic,
-  }}
-/>
-
-## Controlled selection
-
-Use `selectedItem` and `setSelectedItem` to control the selected item. `onItemSelected` notifies with index, label, and icon.
-
-<CodePreview
-  client:load
-  center={false}
-  code={`
-function Example() {
-  const [index, setIndex] = React.useState(0)
-  return (
-    <NavigationRail className="bg-surface-container-highest h-[750px]" selectedItem={index} setSelectedItem={setIndex}>
-      <Fab label="Add Timer" icon={faPlus} />
-      <NavigationRailItem icon={faBell} iconSelected={faBell} label="Alarm" />
-      <NavigationRailItem icon={faClock} iconSelected={faClock} label="Clock" />
-      <NavigationRailItem icon={faHourglass} iconSelected={faHourglass} label="Timer" />
-      <NavigationRailItem icon={faStopwatch} iconSelected={faStopwatch} label="Stopwatch" />
-      <NavigationRailSection label="Sleep well" />
-      <NavigationRailItem label="Schedule" icon={faCalendarDays} iconSelected={faCalendarDays} />
-      <NavigationRailItem label="Stats" icon={faChartLine} iconSelected={faChartLine} />
-      <NavigationRailItem label="Sleep sound" icon={faMusic} iconSelected={faMusic} />
-    </NavigationRail>
-  )
-}
-`}
-  scope={{
-    faBell,
-    faClock,
-    faHourglass,
-    faStopwatch,
-    faPlus,
-    faCalendarDays,
-    faChartLine,
-    faMusic,
-  }}
-/>

package/dist/bundled/doc-src/data/components/progress-indicator.overview.mdx

@@ -1,49 +0,0 @@
----
----
-
-## Usage
-
-Import ProgressIndicator to show operation progress.
-
-```bash
-import { ProgressIndicator } from "@udixio/ui-react"
-```
-
-```tsx
-<ProgressIndicator variant="linear-determinate" value={40} />
-```
-
-## Variants
-
-- linear-determinate
-- ~~linear-indeterminate~~
-- ~~circular-determinate~~
-- circular-indeterminate
-
-```jsx
-  () => {
-      const [value, setValue] = React.useState(0);
-      const [resetKey, setResetKey] = React.useState(0);
-
-      React.useEffect(() => {
-        const interval = setInterval(() => {
-          setValue((prev) => {
-            const newValue = prev >= 10 ? 0 : prev + 3;
-            // Si la valeur retourne à 0, on incrémente la clé de réinitialisation
-            if (newValue === 0 && prev > 0) {
-              setResetKey(prevKey => prevKey + 1);
-            }
-            return newValue;
-          });
-        }, 1500);
-
-        return () => clearInterval(interval);
-      }, []);
-
-      return <div className="flex items-center gap-6">
-          <ProgressIndicator transitionDuration={300} key={resetKey} variant="linear-determinate" value={value * 10} className="w-48" />
-          <ProgressIndicator variant="circular-indeterminate" />
-       </div>
-    }
-
-```

package/dist/bundled/doc-src/data/components/slider.overview.mdx

@@ -1,64 +0,0 @@
----
----
-
-## Usage
-
-Use Slider for selecting a value or range along a track.
-
-```bash
-import { Slider } from "@udixio/ui-react"
-```
-
-```tsx
-<Slider name="volume" value={30} step={5} />
-```
-
-## Step and marks
-
-- Provide `step` for incremental movement.
-- Or use `marks` to snap to labeled positions; omit `step` to only allow marks.
-
-```jsx
-<div className="space-y-6">
-  <Slider name="percent" value={50} step={10} />
-  <Slider
-    name="percent"
-    value={25}
-    step={null}
-    marks={[
-      { value: 0, label: '0' },
-      { value: 25, label: '25' },
-      { value: 50, label: '50' },
-      { value: 75, label: '75' },
-      { value: 100, label: '100' },
-    ]}
-  />
-</div>
-```
-
-## Min and max
-
-The slider supports finite and infinite ends. Use -Infinity/Infinity to make the first/last marks open ended.
-
-```jsx
-<Slider
-  name="range"
-  value={0}
-  min={-Infinity}
-  max={Infinity}
-  marks={[
-    { value: -Infinity, label: 'Min' },
-    { value: 0, label: '0' },
-    { value: 100, label: '100' },
-    { value: Infinity, label: 'Max' },
-  ]}
-/>
-```
-
-## Keyboard and change events
-
-The slider is focusable and responds to ArrowLeft/ArrowRight. Listen to `onChange` for value updates.
-
-```jsx
-<Slider name="brightness" value={70} step={10} onChange={(v) => console.log('value', v)} />
-```

package/dist/bundled/doc-src/data/components/snackbar.overview.mdx

@@ -1,37 +0,0 @@
----
----
-
-
-
-import { faCheck } from '@fortawesome/free-solid-svg-icons';
-import { CodePreview } from '@/components/CodePreview.js';
-
-## Usage
-
-Snackbars display brief messages about app processes. They appear above other elements and disappear automatically.
-
-```bash
-import { Snackbar } from "@udixio/ui-react"
-```
-
-```tsx
-<Snackbar message="Message sent" />
-```
-
-## Auto dismiss
-
-Use `duration` (ms) to auto-close the snackbar; pass `onClose` to be notified.
-
-```jsx
-<Snackbar message="Saved" duration={3000} onClose={() => console.log('closed')} />
-```
-
-## Custom close icon
-
-Provide a custom FontAwesome icon via `closeIcon`.
-
-<CodePreview client:load
-             code={`
-  <Snackbar message="Done" closeIcon={faCheck} />
-`} scope={{ faCheck }}
-/>

package/dist/bundled/doc-src/data/components/switch.overview.mdx

@@ -1,41 +0,0 @@
----
----
-
-
-
-
-
-import { CodePreview } from '@/components/CodePreview.js';
-import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
-
-## Usage
-
-Switch toggles a single setting on or off.
-
-```bash
-import { Switch } from "@udixio/ui-react"
-```
-
-```tsx
-<Switch selected={false} onChange={(v) => console.log('selected:', v)} />
-```
-
-## With icons
-
-Provide `activeIcon` and/or `inactiveIcon` to display inside the thumb.
-
-<CodePreview client:load
-             code={`
-  <div className="flex items-center gap-6">
-    <Switch selected inactiveIcon={faMoon} activeIcon={faSun} />
-    <Switch inactiveIcon={faMoon} activeIcon={faSun} />
-  </div>
-`}
-             scope={{ faMoon, faSun }}
-/>
-
-## Disabled
-
-```jsx
-<Switch disabled selected />
-```

package/dist/bundled/doc-src/data/components/tabs.overview.mdx

@@ -1,171 +0,0 @@
----
----
-
-
-
-
-
-import { CodePreview } from '@/components/CodePreview.js';
-import { faGear, faHome, faUser } from '@fortawesome/free-solid-svg-icons';
-
-## Usage
-
-Tabs organize content across different views. Use Tabs with Tab children.
-
-```bash
-import { Tabs, Tab } from "@udixio/ui-react"
-```
-
-<CodePreview client:load
-             code={`
-  <Tabs>
-    <Tab label="Home" icon={faHome} selected />
-    <Tab label="Settings" icon={faGear} />
-    <Tab label="Profile" icon={faUser} />
-  </Tabs>
-`}
-             scope={{ faHome, faGear, faUser }}
-/>
-
-## Variants
-
-- primary (default)
-- secondary
-
-```jsx
-<div class={"space-y-2"}>
-  <Tabs variant="primary">
-    <Tab label="One" selected />
-    <Tab label="Two" />
-  </Tabs>
-  <Tabs variant="secondary">
-    <Tab label="One" selected/>
-    <Tab label="Two" />
-  </Tabs>
-</div>
-
-```
-
-## Controlled selection and scrollable
-
-Use `selectedTab` and `setSelectedTab` for controlled state. Set `scrollable` to true to enable horizontal scroll with automatic centering of the selected tab.
-
-```jsx
-function Example() {
-  const [tab, setTab] = React.useState(0)
-  return (
-    <Tabs selectedTab={tab} setSelectedTab={setTab} scrollable>
-      <Tab label="Overview" />
-      <Tab label="Activity" />
-      <Tab label="Settings" />
-      <Tab label="Billing" />
-      <Tab label="Advanced" />
-    </Tabs>
-  )
-}
-```
-
-## Tab panels with TabGroup
-
-Use `TabGroup` to connect `Tabs` with `TabPanels`. This provides flexibility to place panels anywhere and includes a slide animation.
-
-```bash
-import { TabGroup, Tabs, Tab, TabPanels, TabPanel } from "@udixio/ui-react"
-```
-
-```jsx
-<TabGroup defaultTab={0}>
-  <Tabs>
-    <Tab>Profile</Tab>
-    <Tab>Settings</Tab>
-    <Tab>Notifications</Tab>
-  </Tabs>
-  <TabPanels>
-    <TabPanel>
-      <div className="p-4">
-        <h3 className="text-title-medium">Profile Content</h3>
-        <p>This is the profile panel content.</p>
-      </div>
-    </TabPanel>
-    <TabPanel>
-      <div className="p-4">
-        <h3 className="text-title-medium">Settings Content</h3>
-        <p>Configure your preferences here.</p>
-      </div>
-    </TabPanel>
-    <TabPanel>
-      <div className="p-4">
-        <h3 className="text-title-medium">Notifications</h3>
-        <p>Manage your notification settings.</p>
-      </div>
-    </TabPanel>
-  </TabPanels>
-</TabGroup>
-```
-
-## Flexible layout with TabGroup
-
-Since `TabGroup` uses context, you can place `Tabs` and `TabPanels` anywhere within the group.
-
-```jsx
-<TabGroup>
-  <div className="flex gap-4">
-    <Tabs>
-      <Tab>One</Tab>
-      <Tab>Two</Tab>
-    </Tabs>
-    <div className="flex-1">
-      <TabPanels>
-        <TabPanel>Content for tab one</TabPanel>
-        <TabPanel>Content for tab two</TabPanel>
-      </TabPanels>
-    </div>
-  </div>
-</TabGroup>
-```
-
-## Controlled TabGroup
-
-Control the selected tab externally via `selectedTab` and `setSelectedTab` props on `TabGroup`.
-
-```jsx
-function Example() {
-  const [tab, setTab] = React.useState(0)
-  return (
-    <TabGroup selectedTab={tab} setSelectedTab={setTab}>
-      <Tabs>
-        <Tab>First</Tab>
-        <Tab>Second</Tab>
-      </Tabs>
-      <TabPanels>
-        <TabPanel>First panel</TabPanel>
-        <TabPanel>Second panel</TabPanel>
-      </TabPanels>
-    </TabGroup>
-  )
-}
-```
-
-## Children as label
-
-You can use `children` as an alternative to the `label` prop when providing a string.
-
-```jsx
-<Tabs>
-  <Tab selected>Home</Tab>
-  <Tab>Settings</Tab>
-  <Tab>Profile</Tab>
-</Tabs>
-```
-
-## Link or action
-
-If the `href` prop is provided on a Tab, it renders an `<a>` link; otherwise it renders a `<button>`.
-
-```jsx
-<Tabs>
-  <Tab label="Dashboard" selected />
-  <Tab label="Documentation" href="/docs" />
-  <Tab label="External" href="https://udixio.dev" />
-</Tabs>
-```