@udixio/mcp 0.3.2

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

@@ -0,0 +1,172 @@
+---
+---
+
+
+
+
+
+import { CodePreview } from '@/components/CodePreview.js';
+
+## Usage
+
+Checkboxes allow users to select one or more items from a set.
+
+```bash
+import { Checkbox } from "@udixio/ui-react"
+```
+
+## Select one or more options in a list
+
+```jsx
+function Example() {
+  const [selected, setSelected] = React.useState({
+    news: true,
+    design: false,
+    dev: false,
+  });
+
+  return (
+    <ul className="space-y-2">
+      <li className="flex items-center gap-3">
+        <Checkbox
+          id="opt-news"
+          name="topics"
+          value="news"
+          checked={selected.news}
+          onChange={(e) =>
+            setSelected((prev) => ({ ...prev, news: e.target.checked }))
+          }
+        />
+        <label htmlFor="opt-news">News</label>
+      </li>
+      <li className="flex items-center gap-3">
+        <Checkbox
+          id="opt-design"
+          name="topics"
+          value="design"
+          checked={selected.design}
+          onChange={(e) =>
+            setSelected((prev) => ({ ...prev, design: e.target.checked }))
+          }
+        />
+        <label htmlFor="opt-design">Design</label>
+      </li>
+      <li className="flex items-center gap-3">
+        <Checkbox
+          id="opt-dev"
+          name="topics"
+          value="dev"
+          checked={selected.dev}
+          onChange={(e) =>
+            setSelected((prev) => ({ ...prev, dev: e.target.checked }))
+          }
+        />
+        <label htmlFor="opt-dev">Development</label>
+      </li>
+    </ul>
+  );
+}
+```
+
+## Present a list with sub-selections
+
+Use `indeterminate` for a parent checkbox when only some children are selected.
+
+```jsx
+function Example() {
+  const [children, setChildren] = React.useState({
+    email: true,
+    sms: false,
+  });
+
+  const allChecked = children.email && children.sms;
+  const isIndeterminate = (children.email || children.sms) && !allChecked;
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center gap-3">
+        <Checkbox
+          id="notif-all"
+          checked={allChecked}
+          indeterminate={isIndeterminate}
+          onChange={(e) =>
+            setChildren({
+              email: e.target.checked,
+              sms: e.target.checked,
+            })
+          }
+        />
+        <label htmlFor="notif-all">Notifications</label>
+      </div>
+      <div className="ml-6 space-y-2">
+        <div className="flex items-center gap-3">
+          <Checkbox
+            id="notif-email"
+            checked={children.email}
+            onChange={(e) =>
+              setChildren((prev) => ({ ...prev, email: e.target.checked }))
+            }
+          />
+          <label htmlFor="notif-email">Email</label>
+        </div>
+        <div className="flex items-center gap-3">
+          <Checkbox
+            id="notif-sms"
+            checked={children.sms}
+            onChange={(e) =>
+              setChildren((prev) => ({ ...prev, sms: e.target.checked }))
+            }
+          />
+          <label htmlFor="notif-sms">SMS</label>
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+## Enable or disable a desktop option
+
+```jsx
+<div className="flex items-center gap-3">
+  <Checkbox id="launch-startup" defaultChecked />
+  <label htmlFor="launch-startup">Launch on system startup</label>
+</div>
+```
+
+## Visually group similar options
+
+```jsx
+<div className="space-y-4">
+  <div>
+    <div className="text-xs uppercase tracking-wide text-muted-foreground">
+      Privacy
+    </div>
+    <div className="mt-2 space-y-2">
+      <div className="flex items-center gap-3">
+        <Checkbox id="privacy-ads" />
+        <label htmlFor="privacy-ads">Personalized ads</label>
+      </div>
+      <div className="flex items-center gap-3">
+        <Checkbox id="privacy-analytics" defaultChecked />
+        <label htmlFor="privacy-analytics">Analytics sharing</label>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div className="text-xs uppercase tracking-wide text-muted-foreground">
+      Emails
+    </div>
+    <div className="mt-2 space-y-2">
+      <div className="flex items-center gap-3">
+        <Checkbox id="email-product" defaultChecked />
+        <label htmlFor="email-product">Product updates</label>
+      </div>
+      <div className="flex items-center gap-3">
+        <Checkbox id="email-marketing" />
+        <label htmlFor="email-marketing">Marketing tips</label>
+      </div>
+    </div>
+  </div>
+</div>
+```

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

@@ -0,0 +1,216 @@
+---
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+import { CodePreview } from '@/components/CodePreview.js';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+
+## Chip — aperçu et usage
+
+Les Chips sont de petits composants interactifs qui représentent une action, un choix ou une entrée compacte. Ils suivent les principes de Material 3 et se déclinent en quatre grands types d’usage :
+
+- Assist (déclenche une action rapide, proche d’un bouton)
+- Filter (sélection on/off ou multi‑sélection)
+- Input (représente une valeur saisie par l’utilisateur, ex. un tag)
+- Suggestion (propose des options contextuelles)
+
+Cette page explique comment utiliser `Chip` dans Udixio, avec des exemples pratiques. Le code du composant pourra évoluer, mais les concepts et bonnes pratiques restent valables.
+
+## Installation et import
+
+```bash
+import { Chip } from "@udixio/ui-react"
+```
+
+## Exemple minimal
+
+```tsx
+<Chip label="Option" />
+```
+
+Vous pouvez aussi fournir le texte via les enfants :
+
+```tsx
+<Chip>Option</Chip>
+```
+
+## Types d’usage
+
+### Assist chip (action rapide)
+
+Un assist chip déclenche une action immédiate : ouvrir une vue, copier un texte, appliquer un filtre temporaire, etc.
+
+<CodePreview
+  client:load
+  code={`
+<Chip label="Nouveau" icon={faPlus} onClick={() => console.log('nouveau')} />
+  `}
+  scope={{ faPlus }}
+/>
+
+
+### Filter chip (sélection)
+
+Rendez un chip sélectionnable avec `onToggle`. Contrôlez l’état via `activated` si nécessaire.
+
+```jsx
+function Filters() {
+  const [selected, setSelected] = React.useState({ jazz: false, rock: true });
+  return (
+    <div className="flex flex-wrap gap-3">
+      <Chip
+        variant="outlined"
+        activated={selected.jazz}
+        onToggle={(v) => setSelected((s) => ({ ...s, jazz: v }))}
+      >Jazz</Chip>
+      <Chip
+        variant="outlined"
+        activated={selected.rock}
+        onToggle={(v) => setSelected((s) => ({ ...s, rock: v }))}
+      >Rock</Chip>
+    </div>
+  );
+}
+```
+
+### Suggestion chip (proposition)
+
+Présentez des suggestions contextuelles (réponses rapides, filtres de recherche). Gardez des libellés courts (idéalement ≤ 20 caractères).
+
+Cas standard (fond neutre) :
+
+```jsx
+<div className="flex flex-wrap gap-2">
+  <Chip variant="outlined">Près de moi</Chip>
+  <Chip variant="outlined">Ouvert maintenant</Chip>
+  <Chip variant="outlined">4★ et +</Chip>
+</div>
+```
+
+Sur image ou fond chargé, utilisez `elevated` pour améliorer le contraste :
+
+```jsx
+<div class={"relative"}>
+  <img src="https://images.unsplash.com/photo-1520975916090-3105956dac38?q=80&w=1200&auto=format&fit=crop" alt="Image" className="max-w-sm"/>
+  <div className="flex flex-wrap gap-2 absolute bottom-4 left-2">
+    <Chip variant="elevated">Près de moi</Chip>
+    <Chip variant="elevated">Ouvert</Chip>
+    <Chip variant="elevated">4★ et +</Chip>
+  </div>
+</div>
+```
+
+### Input chip (valeur saisie)
+
+Représente des entrées d’utilisateur (ex. tags). L’ajout/retrait est géré par votre logique applicative.
+
+```jsx
+function Inputs() {
+  const [tags, setTags] = React.useState(["React", "TypeScript", "Next.js", "Tailwind"]);
+  const onRemove = (tag) => setTags((arr) => arr.filter((t) => t !== tag));
+  return (
+    <div className="flex flex-wrap gap-2">
+      {tags.map((t) => (
+        <Chip key={t} variant="outlined" label={t} onRemove={() => onRemove(t)} />
+      ))}
+    </div>
+  );
+}
+```
+
+## Icône
+
+Vous pouvez afficher une icône (FontAwesome) dans le chip.
+
+<CodePreview
+  client:load
+  code={`
+    <div className="flex gap-3">
+      <Chip label="Ajouter" icon={faPlus} />
+    </div>
+  `}
+  scope={{ faPlus }}
+/>
+
+
+## Lien ou action
+
+Si `href` est fourni, le composant peut se comporter comme un lien. Sinon, il agit comme un contrôle interactif (click/toggle).
+
+```jsx
+<div className="flex gap-3">
+  <Chip onClick={() => console.log('clic')}>Action</Chip>
+  <Chip href="https://udixio.dev">Lien</Chip>
+</div>
+```
+
+
+## États et accessibilité
+
+- `disabled` rend le chip inactif.
+- Les chips commutables (`onToggle`) exposent `aria-pressed` automatiquement.
+- Conservez une cible tactile d’au moins 48 dp et un contraste suffisant selon le thème.
+
+```jsx
+<div className="flex flex-wrap gap-3">
+  <Chip disabled variant="outlined">Indisponible</Chip>
+</div>
+```
+
+## Chips (liste)
+
+Le composant conteneur `Chips` ne supporte pas le mode `children`. Il rend exclusivement une liste à partir de `items` et notifie les changements via `onItemsChange`.
+
+Note: vous n'avez pas besoin de fournir un `id` pour chaque item — `Chips` assigne automatiquement des identifiants internes stables pour les clés de rendu.
+
+Exemple contrôlé:
+
+```jsx
+function Contacts() {
+  const [items, setItems] = React.useState([
+    { label: 'Alice Dupont', draggable: true },
+    { label: 'Bob Martin' },
+    { label: 'Clara Lopez' },
+  ]);
+
+  return (
+    <div className="border border-outline px-4 py-3 rounded-md w-full max-w-xl space-y-3">
+      <Chips
+        items={items}
+        onItemsChange={setItems}
+      />
+    </div>
+  );
+}
+```
+
+## Édition (variant="input")
+
+- Double‑clic (ou F2/Enter quand le chip a le focus et n’est pas togglable) met un chip en édition directement.
+- Cliquer dans une zone vide du conteneur ajoute un nouveau chip à la fin et l’ouvre immédiatement en édition.
+- L’édition est inline via `contenteditable` (pas de champ d’entrée séparé). Appuyez sur Enter pour valider, Échap pour annuler, ou sortez du focus pour valider.
+- Si vous validez une étiquette vide (ou annulez une création vide), le chip est retiré.
+- Les raccourcis existants demeurent: Enter/Espace pour `onToggle`, Retour/Suppr pour `onRemove` quand le chip est sélectionné et non en édition.
+

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

@@ -0,0 +1,102 @@
+---
+---
+
+import { CodePreview } from '@/components/CodePreview.js';
+
+## Usage
+
+DatePicker allow users to select a date or a range of dates.
+
+```bash
+import { DatePicker } from "@udixio/ui-react"
+```
+
+## Basic usage
+
+```jsx
+function Example() {
+  const [date, setDate] = React.useState(new Date());
+
+  return (
+    <div className="flex flex-col items-center">
+      <DatePicker value={date} onChange={setDate} />
+      <p className="mt-4 text-body-medium">
+        Selected: {date.toLocaleDateString()}
+      </p>
+    </div>
+  );
+}
+```
+
+## Select a range
+
+Use `mode="range"` to select a date range.
+
+```jsx
+function Example() {
+  const [range, setRange] = React.useState([
+    new Date(2023, 5, 1),
+    new Date(2023, 5, 10),
+  ]);
+
+  return (
+    <div className="flex flex-col items-center">
+      <DatePicker mode="range" value={range} onChange={setRange} />
+      <p className="mt-4 text-body-medium text-center">
+        Start: {range[0]?.toLocaleDateString() || '-'} <br />
+        End: {range[1]?.toLocaleDateString() || '-'}
+      </p>
+    </div>
+  );
+}
+```
+
+## Uncontrolled
+
+You can use `defaultValue` for uncontrolled usage.
+
+```jsx
+<DatePicker
+  defaultValue={new Date(2023, 5, 15)}
+  onChange={(date) => console.log('Selected:', date)}
+/>
+```
+
+## Min and Max dates
+
+Limit the selectable range.
+
+```jsx
+<DatePicker
+  minDate={new Date(2023, 0, 1)}
+  maxDate={new Date(2023, 11, 31)}
+  defaultValue={new Date(2023, 5, 1)}
+/>
+```
+
+## Disable specific dates
+
+Disable weekends for example.
+
+```jsx
+<DatePicker
+  shouldDisableDate={(date) => {
+    const day = date.getDay();
+    return day === 0 || day === 6; // Disable Sunday and Saturday
+  }}
+  defaultValue={new Date()}
+/>
+```
+
+## Localization
+
+Use `locale` to format the calendar.
+
+```jsx
+<div className="flex flex-wrap gap-8">
+  {/* Default (English) */}
+  <DatePicker locale="en-US" defaultValue={new Date()} />
+  {/* French (Monday start) */}
+  <DatePicker locale="fr-FR" weekStartDay={1} defaultValue={new Date()} />
+</div>
+```

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

@@ -0,0 +1,54 @@
+---
+---
+
+## Usage
+
+Use Divider to separate content sections.
+
+```bash
+import { Divider } from "@udixio/ui-react"
+```
+
+```tsx
+<Divider />
+```
+
+## Orientation
+
+Use `orientation` to switch between horizontal and vertical.
+
+```jsx
+<div className="flex items-center gap-4">
+  <div>
+    <p>Section A</p>
+    <Divider />
+    <p>Section B</p>
+  </div>
+  <Divider orientation="vertical" className="h-12" />
+  <div>
+    <p>Section C</p>
+  </div>
+</div>
+```
+
+## Spacing and sizing
+
+Control spacing and length with your utility classes.
+
+```jsx
+<div className="space-y-6">
+  <div>
+    <p className="mb-2">Tight spacing</p>
+    <Divider className="my-1" />
+  </div>
+  <div>
+    <p className="mb-2">Wide spacing</p>
+    <Divider className="my-6" />
+  </div>
+  <div className="flex items-center gap-4">
+    <span>Left</span>
+    <Divider orientation="vertical" className="h-8" />
+    <span>Right</span>
+  </div>
+</div>
+```

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

@@ -0,0 +1,69 @@
+---
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+import { CodePreview } from '@/components/CodePreview.js';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+
+## Usage
+
+Floating Action Button (Fab) represents the primary action on a screen. Import it from @udixio/ui-react.
+
+```bash
+import { Fab } from "@udixio/ui-react"
+```
+
+<CodePreview client:load
+             code={`
+  <div className="flex items-end gap-4 h-96">
+    <FabMenu size="large" label="Create" icon={faPlus} >
+      <Button variant="filled">Filled</Button>
+      <Button variant="elevated">Elevated</Button>
+      <Button variant="tonal">Tonal</Button>
+      <Button variant="outlined">Outlined</Button>
+      <Button variant="text">Text</Button>
+    </FabMenu>
+  </div>`}
+             scope={{ faPlus }}
+/>
+
+<CodePreview client:load
+             code={`
+  <div className="flex items-end gap-4 h-96">
+    <FabMenu extended variant="secondary" size="large" label="Create" icon={faPlus} >
+      <Button variant="filled">Filled</Button>
+      <Button variant="elevated">Elevated</Button>
+      <Button variant="tonal">Tonal</Button>
+      <Button variant="outlined">Outlined</Button>
+      <Button variant="text">Text</Button>
+    </FabMenu>
+  </div>`}
+             scope={{ faPlus }}
+/>
+
+
+<CodePreview client:load
+             code={`
+  <div className="flex items-end gap-4 h-96">
+    <FabMenu variant="tertiary" size="large" label="Create" icon={faPlus} >
+      <Button variant="filled">Filled</Button>
+      <Button variant="elevated">Elevated</Button>
+      <Button variant="tonal">Tonal</Button>
+      <Button variant="outlined">Outlined</Button>
+      <Button variant="text">Text</Button>
+    </FabMenu>
+  </div>`}
+             scope={{ faPlus }}
+/>
+

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

@@ -0,0 +1,80 @@
+---
+---
+
+
+
+import { CodePreview } from '@/components/CodePreview.js';
+import { faPen, faPlus, faShare } from '@fortawesome/free-solid-svg-icons';
+
+## Usage
+
+Floating Action Button (Fab) represents the primary action on a screen. Import it from @udixio/ui-react.
+
+```bash
+import { Fab } from "@udixio/ui-react"
+```
+
+<CodePreview client:load
+             code={`
+  <div className="flex items-end gap-4">
+    <Fab label="Create" icon={faPlus} />
+    <Fab label="Create" icon={faPlus} isExtended />
+  </div>`}
+             scope={{ faPlus }}
+/>
+
+## Variants
+
+- primary (default)
+- secondary
+- tertiary
+- surface
+
+<CodePreview client:load
+             code={`
+  <div className="flex items-end gap-4">
+    <Fab label="Primary" icon={faPlus} variant="primary" />
+    <Fab label="Secondary" icon={faPlus} variant="secondary" />
+    <Fab label="Tertiary" icon={faPlus} variant="tertiary" />
+    <Fab label="Surface" icon={faPlus} variant="surface" />
+  </div>`}
+             scope={{ faPlus }}
+/>
+
+## Sizes
+
+Available sizes: small, medium (default), large.
+
+<CodePreview client:load
+             code={`
+  <div className="flex items-end gap-4">
+    <Fab label="Edit" icon={faPen} size="small" />
+    <Fab label="Edit" icon={faPen} size="medium" />
+    <Fab label="Edit" icon={faPen} size="large" />
+  </div>`}
+             scope={{ faPen }}
+/>
+
+## Extended vs. regular
+
+Use `isExtended` to show the label next to the icon.
+
+<CodePreview client:load
+             code={`
+  <div className="flex items-end gap-4">
+    <Fab label="Share" icon={faShare} />
+    <Fab label="Share" icon={faShare} isExtended />
+  </div>`}
+             scope={{ faShare }}
+/>
+
+## Link or action
+
+If `href` is provided, the component renders an anchor; otherwise it renders a button. The `label` is used as aria-label for the non-extended Fab.
+
+<CodePreview client:load
+             code={`
+  <Fab label="Create" icon={faPlus} href="https://udixio.dev" />
+`}
+             scope={{ faPlus }}
+/>