@udixio/mcp 0.3.2 → 0.4.3

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

@@ -1,172 +0,0 @@
----
----
-
-
-
-
-
-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

@@ -1,216 +0,0 @@
----
----
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-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

@@ -1,102 +0,0 @@
----
----
-
-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

@@ -1,54 +0,0 @@
----
----
-
-## 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

@@ -1,69 +0,0 @@
----
----
-
-
-
-
-
-
-
-
-
-
-
-
-
-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

@@ -1,80 +0,0 @@
----
----
-
-
-
-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 }}
-/>