@udixio/mcp 0.3.2

package/dist/bundled/doc-src/components/ComponentPreview.astro

@@ -0,0 +1,218 @@
+---
+import {
+  Button,
+  Card,
+  Carousel,
+  CarouselItem,
+  Checkbox,
+  Chip,
+  Chips,
+  DatePicker,
+  Divider,
+  Fab,
+  FabMenu,
+  IconButton,
+  NavigationRail,
+  NavigationRailItem,
+  ProgressIndicator,
+  SideSheet,
+  Slider,
+  Snackbar,
+  Switch,
+  Tab,
+  TabGroup,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  TextField,
+  Tooltip,
+} from '@udixio/ui-react';
+import {
+  faBell,
+  faGear,
+  faHouse,
+  faPlus,
+  faStar,
+} from '@fortawesome/free-solid-svg-icons';
+
+type PreviewProps = {
+  id: string;
+};
+
+const { id } = Astro.props as PreviewProps;
+---
+
+<div class="w-full flex items-center justify-center gap-4 pointer-events-none">
+  {
+    id === 'button' && (
+      <div class="flex flex-wrap gap-2">
+        <Button label="Primary" />
+        <Button label="Outlined" variant="outlined" />
+        <Button label="Tonal" variant="tonal" />
+      </div>
+    )
+  }
+  {
+    id === 'card' && (
+      <Card className="p-4">
+        <div class="h-4 w-1/2 rounded bg-surface-variant" />
+        <div class="mt-3 h-3 w-full rounded bg-surface-variant/60" />
+        <div class="mt-2 h-3 w-5/6 rounded bg-surface-variant/60" />
+      </Card>
+    )
+  }
+  {
+    id === 'carousel' && (
+      <Carousel gap={12} outputRange={[120, 160]} inputRange={[0.1, 0.8]}>
+        {[0, 1, 2, 3].map((index) => (
+          <CarouselItem index={index} width={140} outputRange={[120, 160]}>
+            <Card className="p-4">Item {index + 1}</Card>
+          </CarouselItem>
+        ))}
+      </Carousel>
+    )
+  }
+  {
+    id === 'chip' && (
+      <div class="flex flex-wrap gap-2">
+        <Chip label="Chip" />
+        <Chip label="Selected" activated />
+        <Chip label="Input" variant="tonal" />
+      </div>
+    )
+  }
+  {
+    id === 'chips' && (
+      <Chips
+        items={[{ label: 'Design' }, { label: 'Research' }, { label: 'QA' }]}
+        onItemsChange={() => {}}
+      />
+    )
+  }
+  {
+    id === 'divider' && (
+      <div class="flex items-center gap-4">
+        <Divider className="flex-1" />
+        <span class="text-label-small text-on-surface-variant">OR</span>
+        <Divider className="flex-1" />
+      </div>
+    )
+  }
+  {
+    id === 'fab' && (
+      <div class="flex items-center gap-3">
+        <Fab label="Create" icon={faPlus} />
+        <Fab label="Add" extended icon={faPlus} />
+      </div>
+    )
+  }
+  {
+    id === 'fab-menu' && (
+      <FabMenu icon={faPlus} label="Create" defaultOpen={true}>
+        <Button label="New doc" />
+        <Button label="Upload" />
+      </FabMenu>
+    )
+  }
+  {
+    id === 'icon-button' && (
+      <div class="flex gap-2">
+        <IconButton label="Favorite" icon={faStar} />
+        <IconButton label="Star" icon={faStar} variant="outlined" />
+      </div>
+    )
+  }
+  {
+    id === 'navigation-rail' && (
+      <NavigationRail>
+        <NavigationRailItem label="Home" icon={faHouse} />
+        <NavigationRailItem label="Updates" icon={faBell} />
+        <NavigationRailItem label="Settings" icon={faGear} />
+      </NavigationRail>
+    )
+  }
+  {
+    id === 'progress-indicator' && (
+      <div class="flex items-center gap-4">
+        <ProgressIndicator variant="linear-determinate" value={70} />
+        <ProgressIndicator variant="circular-indeterminate" />
+      </div>
+    )
+  }
+  {
+    id === 'side-sheet' && (
+      <SideSheet title="Details" extended={true} variant="standard">
+        <p class="text-body-small text-on-surface-variant">Side content</p>
+      </SideSheet>
+    )
+  }
+  {id === 'slider' && <Slider value={70} onChange={() => {}} />}
+  {id === 'snackbar' && <Snackbar message="Message sent" />}
+  {id === 'switch' && <Switch selected />}
+  {
+    (id === 'tabs' || id === 'tab-group' || id === 'tab-panels') && (
+      <TabGroup defaultTab={0}>
+        <Tabs>
+          <Tab label="Overview" />
+          <Tab label="Details" />
+          <Tab label="Settings" />
+        </Tabs>
+        <TabPanels>
+          <TabPanel>Overview content</TabPanel>
+          <TabPanel>Details content</TabPanel>
+          <TabPanel>Settings content</TabPanel>
+        </TabPanels>
+      </TabGroup>
+    )
+  }
+  {
+    id === 'text-field' && (
+      <TextField label="Label" value="Type here" onChange={() => {}} />
+    )
+  }
+  {
+    id === 'tooltip' && (
+      <Tooltip text="Tooltip text">
+        <Button label="Hover me" />
+      </Tooltip>
+    )
+  }
+  {id === 'checkbox' && <Checkbox checked onChange={() => {}} />}
+  {
+    id === 'date-picker' && (
+      <div class="scale-75 origin-top">
+        <DatePicker defaultValue={new Date()} />
+      </div>
+    )
+  }
+  {
+    !(
+      id === 'button' ||
+      id === 'card' ||
+      id === 'carousel' ||
+      id === 'chip' ||
+      id === 'chips' ||
+      id === 'checkbox' ||
+      id === 'date-picker' ||
+      id === 'divider' ||
+      id === 'fab' ||
+      id === 'fab-menu' ||
+      id === 'icon-button' ||
+      id === 'navigation-rail' ||
+      id === 'progress-indicator' ||
+      id === 'side-sheet' ||
+      id === 'slider' ||
+      id === 'snackbar' ||
+      id === 'switch' ||
+      id === 'tabs' ||
+      id === 'tab-group' ||
+      id === 'tab-panels' ||
+      id === 'text-field' ||
+      id === 'tooltip'
+    ) && (
+      <span class="inline-flex items-center rounded-full bg-surface-variant px-3 py-1 text-label-small text-on-surface-variant">
+        Preview pending
+      </span>
+    )
+  }
+</div>

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

@@ -0,0 +1,152 @@
+---
+---
+
+
+
+
+import { CodePreview } from '@/components/CodePreview.js';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+
+## Usage
+
+The Button component can trigger an action or navigate to a link. Import it from the @udixio/ui-react package and provide at least a label via the label prop.
+
+```bash
+import { Button } from "@udixio/ui-react"
+```
+
+```tsx
+<Button>Button</Button>
+```
+
+## Variants
+
+```jsx
+<div className="flex flex-wrap gap-3">
+  <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>
+</div>
+```
+
+## Toggle buttons
+
+Make a button togglable by providing `onToggle` and controlling its state with `activated`.
+
+```jsx
+function ToggleExample() {
+  const [activeStates, setActiveStates] = React.useState({
+    filled: false,
+    elevated: false,
+    tonal: false,
+    outlined: false,
+    text: false,
+  });
+
+  const handleToggle = (buttonType) => (newState) => {
+    setActiveStates((prev) => ({
+      ...prev,
+      [buttonType]: newState,
+    }));
+  };
+
+  return (
+    <div className="flex flex-wrap gap-3">
+      <Button
+        label={activeStates.filled ? 'Active' : 'Inactive'}
+        variant="filled"
+        onToggle={handleToggle('filled')}
+        activated={activeStates.filled}
+      />
+      <Button
+        label="Elevated"
+        variant="elevated"
+        onToggle={handleToggle('elevated')}
+        activated={activeStates.elevated}
+      />
+      <Button
+        label="Filled Tonal"
+        variant="tonal"
+        onToggle={handleToggle('tonal')}
+        activated={activeStates.tonal}
+      />
+      <Button
+        label="Outlined"
+        variant="outlined"
+        onToggle={handleToggle('outlined')}
+        activated={activeStates.outlined}
+      />
+    </div>
+  );
+}
+```
+
+Note: When used as a toggle button, accessibility is handled via `aria-pressed` automatically.
+
+## Disabled state
+
+Use the `disabled` prop to make the button inactive.
+
+```jsx
+<div className="flex flex-wrap gap-3">
+  <Button label="Disabled" disabled />
+  <Button label="Disabled" variant="outlined" disabled />
+</div>
+```
+
+## Sizes
+
+```jsx
+<div className="flex flex-wrap items-end gap-3">
+  <Button label="XS" size="xSmall" />
+  <Button label="S" size="small" />
+  <Button label="M" size="medium" />
+  <Button label="L" size="large" />
+  <Button label="XL" size="xLarge" />
+</div>
+```
+
+## Shapes
+
+Control the button's appearance via the `shape` prop.
+
+```jsx
+<div className="flex flex-wrap gap-3">
+  <Button label="Rounded" shape="rounded" />
+  <Button label="Squared" shape="squared" />
+</div>
+```
+
+## Icon
+
+You can add an icon (FontAwesome) and choose its position.
+
+<CodePreview
+  client:load
+  code={`
+    <div className="flex gap-3">
+      <Button label="Add" icon={faPlus} />
+      <Button label="Next" iconPosition="right" icon={faPlus} />
+    </div>
+  `}
+  scope={{ faPlus }}
+/>
+
+## Loading state
+
+```jsx
+<Button label="Sending..." loading />
+```
+
+## Link or action
+
+If the `href` prop is provided, the component renders an `<a>` link; otherwise it renders a `<button>`.
+
+```jsx
+<div className="flex gap-3">
+  <Button label="Click me" onClick={() => console.log('clicked')} />
+  <Button label="Go to Udixio" href="https://udixio.dev" />
+</div>
+```

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

@@ -0,0 +1,91 @@
+---
+---
+
+## Usage
+
+Import the Card component from @udixio/ui-react to group related content and actions.
+
+```bash
+import { Card } from "@udixio/ui-react"
+```
+
+```tsx
+<Card>
+  <div className="p-4 space-y-2">
+    <h3 className="text-lg font-semibold">Card title</h3>
+    <p>Card body content goes here.</p>
+  </div>
+</Card>
+```
+
+## Variants
+
+```jsx
+<div className="flex flex-wrap gap-4 w-full">
+  <Card className={"flex-1 h-48 min-w-48 flex items-center justify-center"}>
+    <div className="text-display-small text-center">Outlined (default)</div>
+  </Card>
+  <Card className={"flex-1 h-48 min-w-48  flex items-center justify-center"} variant="elevated">
+    <div className="text-display-small">Elevated</div>
+  </Card>
+  <Card className={"flex-1 h-48 min-w-48  flex items-center justify-center"} variant="filled">
+    <div className="text-display-small">Filled</div>
+  </Card>
+</div>
+```
+
+## Interactive state
+
+Enable hover and press feedback by setting `interactive` to true. Use it for clickable cards (e.g., navigation tiles).
+
+```jsx
+<>
+<Card className={"w-full h-48 flex items-center justify-center"} interactive>
+  <div className={"text-display-small"} >Clickable card</div>
+</Card>
+<Card className={"w-full h-48 flex items-center justify-center"} interactive>
+  <div className={"text-display-small"} >Clickable card</div>
+</Card>
+</>
+```
+
+## Composition patterns
+
+Cards are layout containers. Combine simple elements to create common patterns.
+
+### Header + body
+
+```jsx
+<Card>
+  <div className="p-4 space-y-1">
+    <h3 className="text-base font-semibold">Project Aurora</h3>
+    <p className="text-sm text-on-surface-variant">Last updated 2 days ago</p>
+  </div>
+</Card>
+```
+
+### Media + text
+
+```jsx
+<Card>
+  <img className="w-full h-40 object-cover" src="https://picsum.photos/640/240" alt="Cover" />
+  <div className="p-4">
+    <p>Beautiful landscapes collection</p>
+  </div>
+</Card>
+```
+
+### Actions
+
+```jsx
+<Card>
+  <div className="p-4 not-prose px-6 space-y-6">
+    <p class={"not-prose text-headline-small"}>Delete Confirmation</p>
+    <p>Are you sure you want to delete this item?</p>
+    <div className="flex gap-6">
+      <Button disableTextMargins size={"small"} label="Cancel" variant="text" />
+      <Button size={"small"}  label="Delete" variant="filled" />
+    </div>
+  </div>
+</Card>
+```

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

@@ -0,0 +1,108 @@
+Use Carousel with CarouselItem children to create a horizontally scrollable showcase.
+
+```bash
+import { Carousel, CarouselItem } from "@udixio/ui-react"
+```
+
+```tsx
+<Carousel variant="hero" gap={8}>
+  <CarouselItem>
+    <div className="p-6 bg-surface rounded-xl">Slide 1</div>
+  </CarouselItem>
+  <CarouselItem>
+    <div className="p-6 bg-surface rounded-xl">Slide 2</div>
+  </CarouselItem>
+  <CarouselItem>
+    <div className="p-6 bg-surface rounded-xl">Slide 3</div>
+  </CarouselItem>
+</Carousel>
+```
+
+## Behavior and callbacks
+
+- `gap`: spacing between items.
+- `marginPourcent`: outer margins as a percentage of the viewport width.
+- `scrollSensitivity`: adjust scroll/drag responsiveness.
+- `onChange`: called with the active index.
+
+```jsx
+<Carousel
+  variant="hero"
+  gap={16}
+  marginPourcent={12}
+  scrollSensitivity={0.8}
+  onChange={(index) => console.log('Active slide:', index)}
+>
+  {Array.from({length: 15}, (_, i) => i + 1).map((i) => {
+    const fmt = i % 3;
+    const w = fmt === 0 ? 640 : fmt === 1 ? 400 : 240;
+    const h = fmt === 0 ? 240 : fmt === 1 ? 400 : 640;
+    return (
+      <CarouselItem key={i}>
+        <div className="bg-surface rounded-xl h-full flex flex-col">
+          <div className="flex-1 min-h-0">
+            <img className="size-full object-cover rounded-2xl" src={`https://picsum.photos/seed/udx-${i}-fmt-${fmt}/${w}/${h}`} alt="Cover" />
+          </div>
+          <p class={'text-title-large m-8 text-nowrap'}>Slide {i}</p>
+        </div>
+      </CarouselItem>
+    );
+  })}
+</Carousel>
+```
+
+
+### With navigation buttons
+
+```jsx
+() => {
+  const total = 15;
+
+  const [index, setIndex] = React.useState(0);
+  const [step, setStep] = React.useState(1);
+  const [visible, setVisible] = React.useState({ approx: 0, full: 0 });
+
+  const prev = () => setIndex((i) => Math.max(0, i - step));
+  const next = () => setIndex((i) => Math.min(total - 1, i + step));
+
+  return (
+    <div className="w-full">
+      <Carousel
+        variant="hero"
+        scrollSensitivity={0.8}
+        index={index}
+        onChange={setIndex}
+        onMetricsChange={(m) => {
+          setStep(m.stepHalf); // step equals half of visible items
+          setVisible({ approx: m.visibleApprox, full: m.visibleFull });
+        }}
+      >
+        {Array.from({ length: total }, (_, i) => i + 1).map((i) => {
+          const fmt = i % 3;
+          const w = fmt === 0 ? 640 : fmt === 1 ? 400 : 240;
+          const h = fmt === 0 ? 240 : fmt === 1 ? 400 : 640;
+          return (
+            <CarouselItem key={i}>
+              <div className="bg-surface rounded-xl h-full flex flex-col ">
+                <div className="flex-1 min-h-0">
+                  <img className="size-full object-cover rounded-2xl" src={`https://picsum.photos/seed/udx-${i}-fmt-${fmt}/${w}/${h}`} alt="Cover" />
+                </div>
+                <p className={'text-title-large m-8 text-nowrap'}>Slide {i}</p>
+              </div>
+            </CarouselItem>
+          );
+        })}
+      </Carousel>
+      <div className="w-full mt-3 flex items-center justify-between gap-3">
+        <div className="text-on-surface-variant text-body-small">
+          Visible ≈ {visible.approx.toFixed(2)} (full {visible.full}), step: {step}
+        </div>
+        <div className="flex gap-3">
+          <Button variant="text" label="Previous" onClick={prev} />
+          <Button variant="filled" label="Next" onClick={next} />
+        </div>
+      </div>
+    </div>
+  );
+}
+```