@axzydev/axzy_ui_system 1.4.8 → 1.5.0

package/src/components/atoms/checkbox/checkbox.doc.mdx

@@ -1,54 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './checkbox.stories';
-
-<Meta of={StoriesData} />
-
-# ITCheckbox
-
-A checkbox input component with a custom visual style and a visually hidden native `<input>` for full accessibility. Supports checked, unchecked, and indeterminate states with an optional label. The disabled state reduces opacity and prevents interaction.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `checked` | `boolean` | `false` | Controlled checked state. |
-| `onChange` | `(checked: boolean) => void` | — | Callback fired when the checkbox value changes. |
-| `label` | `ReactNode` | — | Label text or element rendered next to the checkbox. |
-| `disabled` | `boolean` | `false` | Disables interaction and applies reduced opacity. |
-| `indeterminate` | `boolean` | `false` | Renders a dash indicator for partial selection. No effect when `checked` is `true`. |
-| `className` | `string` | — | Additional CSS class names for the label wrapper. |
-| `name` | `string` | — | HTML name attribute for the native `<input>` element. |
-
-## Usage
-
-```tsx
-import { ITCheckbox } from '@axzydev/axzy_ui_system';
-
-<ITCheckbox
-  checked={agreed}
-  onChange={setAgreed}
-  label="Acepto los términos y condiciones"
-/>
-
-<ITCheckbox
-  indeterminate={someChecked && !allChecked}
-  onChange={toggleAll}
-  label="Seleccionar todo"
-/>
-```
-
-## Variants / Notes
-
-- **Checked** — Blue filled square with a white checkmark SVG icon.
-- **Unchecked** — White background with a slate gray border.
-- **Indeterminate** — A horizontal dash line rendered when `indeterminate` is `true` and `checked` is `false`. Useful for "select all" parent checkboxes.
-- The native `<input>` is visually hidden (`sr-only`) but remains interactive via the parent `<label>`, ensuring keyboard navigation and screen reader support.
-- When disabled, the entire label wrapper gets `opacity-50` and `cursor-not-allowed`.
-- Renders a focus ring (`ring-2 ring-primary-200`) on the custom visual element when the input is focused (unless disabled).
-- Uses a `ref` callback to set `indeterminate` on the underlying DOM input for compliance with the HTML spec.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/atoms/checkbox/checkbox.stories.tsx

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import ITCheckbox from "@/components/atoms/checkbox/checkbox";
-import ITStack from "@/components/atoms/stack/stack";
-
-const meta: Meta<typeof ITCheckbox> = {
-  title: "Components/Inputs/ITCheckbox",
-  component: ITCheckbox,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITCheckbox>;
-
-export const Default: Story = {
-  render: () => {
-    const [val, setVal] = useState(false);
-    return <ITCheckbox checked={val} onChange={setVal} label="Acepto términos" />;
-  },
-};
-
-export const Indeterminate: Story = {
-  args: { indeterminate: true, label: "Selección parcial" },
-};
-
-export const Disabled: Story = {
-  args: { checked: true, disabled: true, label: "Opción bloqueada" },
-};
-
-export const Group: Story = {
-  render: () => {
-    const [vals, setVals] = useState<Record<string, boolean>>({ a: true, b: false, c: false });
-    const all = Object.values(vals).every(Boolean);
-    const some = Object.values(vals).some(Boolean) && !all;
-    return (
-      <ITStack spacing={2}>
-        <ITCheckbox
-          checked={all}
-          indeterminate={some}
-          onChange={(v) => setVals({ a: v, b: v, c: v })}
-          label="Seleccionar todo"
-        />
-        {Object.entries(vals).map(([k, v]) => (
-          <ITCheckbox
-            key={k}
-            checked={v}
-            onChange={(val) => setVals(p => ({ ...p, [k]: val }))}
-            label={`Opción ${k.toUpperCase()}`}
-          />
-        ))}
-      </ITStack>
-    );
-  },
-};

package/src/components/atoms/chip/chip.doc.mdx

@@ -1,47 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './chip.stories';
-
-<Meta of={StoriesData} />
-
-# ITChip
-
-Compact tag / pill for labels, active filters, and multi-value selections.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | `string` | — | Text label. Overridden by `children`. |
-| `children` | `ReactNode` | — | Custom content inside the chip. |
-| `color` | semantic color key | `"secondary"` | Palette color. |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Chip size. |
-| `variant` | `"soft" \| "filled" \| "outlined"` | `"soft"` | Visual style. |
-| `icon` | `ReactNode` | — | Icon before the label. |
-| `removable` | `boolean` | `false` | Shows an (X) button. |
-| `onRemove` | `() => void` | — | Fired when the remove button is pressed. |
-| `onClick` | `() => void` | — | Makes the chip clickable (filter/toggle). |
-| `selected` | `boolean` | `false` | Highlights the chip as selected. |
-| `disabled` | `boolean` | `false` | Disables interactions. |
-| `className` | `string` | — | Extra CSS classes. |
-
-## Usage
-
-```tsx
-import { ITChip } from '@axzydev/axzy_ui_system';
-
-<ITChip label="React" color="primary" />
-<ITChip label="México" color="success" variant="outlined" removable onRemove={remove} />
-<ITChip label="Activos" selected onClick={toggle} />
-```
-
-## Notes
-
-- Colors come from `theme.colors`, so they follow the active theme/dark mode.
-- Interactive chips (`onClick`) expose `role="button"` and keyboard support (Enter/Space).
-- The remove button is a nested `<button>`; keep `onClick` on the chip for selection toggles.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/atoms/chip/chip.stories.tsx

@@ -1,64 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITChip from "@/components/atoms/chip/chip";
-
-const meta: Meta<typeof ITChip> = {
-  title: "Components/Data Display/ITChip",
-  component: ITChip,
-  parameters: { layout: "centered" },
-  argTypes: {
-    color: {
-      control: "select",
-      options: ["primary", "secondary", "success", "danger", "warning", "info", "purple"],
-    },
-    size: { control: "select", options: ["sm", "md", "lg"] },
-    variant: { control: "select", options: ["soft", "filled", "outlined"] },
-    selected: { control: "boolean" },
-    disabled: { control: "boolean" },
-    removable: { control: "boolean" },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ITChip>;
-
-export const Default: Story = {
-  args: { label: "React", color: "primary" },
-};
-
-export const Variants: Story = {
-  render: () => (
-    <div className="flex flex-wrap items-center gap-3">
-      <ITChip label="Soft" variant="soft" color="primary" />
-      <ITChip label="Filled" variant="filled" color="primary" />
-      <ITChip label="Outlined" variant="outlined" color="primary" />
-    </div>
-  ),
-};
-
-export const Colors: Story = {
-  render: () => (
-    <div className="flex flex-wrap items-center gap-3">
-      {["primary", "secondary", "success", "danger", "warning", "info", "purple"].map((c) => (
-        <ITChip key={c} label={c} color={c as never} />
-      ))}
-    </div>
-  ),
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <div className="flex flex-wrap items-center gap-3">
-      <ITChip label="Small" size="sm" />
-      <ITChip label="Medium" size="md" />
-      <ITChip label="Large" size="lg" />
-    </div>
-  ),
-};
-
-export const Removable: Story = {
-  args: { label: "México", color: "success", removable: true },
-};
-
-export const Selected: Story = {
-  args: { label: "Activos", color: "primary", selected: true, onClick: () => {} },
-};

package/src/components/atoms/divider/divider.doc.mdx

@@ -1,42 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './divider.stories';
-
-<Meta of={StoriesData} />
-
-# ITDivider
-
-A thin horizontal or vertical separator line for visually dividing content sections. Supports custom color and thickness via Tailwind utility classes.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Direction the divider flows. |
-| `className` | `string` | — | Additional CSS classes. |
-| `color` | `string` | `"bg-slate-200 dark:bg-slate-700"` | Tailwind background color class(es). |
-| `thickness` | `string` | `"h-px"` (horizontal) / `"w-px"` (vertical) | Tailwind width/height utility. |
-
-## Usage
-
-```tsx
-import { ITDivider } from '@axzydev/axzy_ui_system';
-
-<ITDivider />
-
-<ITDivider orientation="vertical" color="bg-red-500" thickness="w-1" />
-
-<ITDivider color="bg-primary-300" thickness="h-0.5" />
-```
-
-## Notes
-
-- Horizontal divider is full-width by default; vertical divider is full-height of its parent.
-- Use in combination with ITStack or ITFlex for consistent layout spacing between sections.
-- Auto-detects orientation for default thickness: `h-px` for horizontal, `w-px` for vertical.
-- The `color` prop accepts any valid Tailwind background color class, including dark mode variants.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/atoms/divider/divider.stories.tsx

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITDivider from "@/components/atoms/divider/divider";
-import ITStack from "@/components/atoms/stack/stack";
-import ITFlex from "@/components/atoms/flex/flex";
-
-const meta: Meta<typeof ITDivider> = {
-  title: "Components/Layout/ITDivider",
-  component: ITDivider,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITDivider>;
-
-export const Horizontal: Story = {
-  args: { orientation: "horizontal" },
-};
-
-export const Vertical: Story = {
-  decorators: [(Story) => <ITFlex gap={3} className="h-12"><span>Left</span><Story /><span>Right</span></ITFlex>],
-  args: { orientation: "vertical" },
-};
-
-export const InStack: Story = {
-  render: () => (
-    <ITStack spacing={3}>
-      <div className="p-3 bg-slate-50 rounded-lg text-sm">Sección 1</div>
-      <ITDivider />
-      <div className="p-3 bg-slate-50 rounded-lg text-sm">Sección 2</div>
-      <ITDivider />
-      <div className="p-3 bg-slate-50 rounded-lg text-sm">Sección 3</div>
-    </ITStack>
-  ),
-};

package/src/components/atoms/flex/flex.doc.mdx

@@ -1,59 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './flex.stories';
-
-<Meta of={StoriesData} />
-
-# ITFlex
-
-A complete flexbox layout container exposing the full CSS Flexbox API through React props. Supports direction, wrap, alignment, justification, gap, grow, shrink, basis, and custom element rendering.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | — | Child elements inside the flex container. |
-| `direction` | `"row" \| "column" \| "row-reverse" \| "column-reverse"` | — | Main axis direction. |
-| `align` | `"start" \| "end" \| "center" \| "stretch" \| "baseline"` | — | Cross-axis alignment. |
-| `justify` | `"start" \| "end" \| "center" \| "between" \| "around" \| "evenly"` | — | Main-axis justification. |
-| `wrap` | `"nowrap" \| "wrap" \| "wrap-reverse"` | — | Wrapping behavior. |
-| `gap` | `number` | — | Gap between children in units of `0.25rem`. |
-| `grow` | `boolean \| number` | — | Flex grow factor. `true` = 1, `false` = 0, or pass a number. |
-| `shrink` | `boolean \| number` | — | Flex shrink factor. Works like `grow`. |
-| `basis` | `string \| number` | — | Flex basis value. Numbers multiplied by `0.25rem`; strings used as-is. |
-| `className` | `string` | — | Additional CSS classes. |
-| `style` | `CSSProperties` | — | Inline styles. |
-| `as` | `ElementType` | `"div"` | Custom HTML element type to render. |
-| `onClick` | `(e: React.MouseEvent) => void` | — | Click handler. |
-
-## Usage
-
-```tsx
-import { ITFlex } from '@axzydev/axzy_ui_system';
-
-<ITFlex direction="row" gap={3} justify="between" align="center">
-  <div>Left</div>
-  <div>Center</div>
-  <div>Right</div>
-</ITFlex>
-
-<ITFlex direction="column" gap={2} className="h-60">
-  <ITFlex grow className="bg-primary-100 rounded-lg p-4">
-    <span>Grow (flex: 1)</span>
-  </ITFlex>
-  <div className="w-full">Fixed height</div>
-</ITFlex>
-```
-
-## Notes
-
-- `gap` accepts an integer where `1` = `0.25rem` (4px), `4` = `1rem` (16px), etc., matching Tailwind's spacing scale.
-- The `as` prop allows rendering as a `<section>`, `<nav>`, `<form>`, or any other semantic HTML element.
-- `grow` and `shrink` accept `boolean` for quick on/off or `number` for precise flex factor control.
-- Combine `basis`, `grow`, and `shrink` for complete flex item control on the container itself.
-- All flex props are optional — the component renders as a standard `div` when no layout props are set.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/atoms/flex/flex.stories.tsx

@@ -1,70 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITFlex from "@/components/atoms/flex/flex";
-
-const meta: Meta<typeof ITFlex> = {
-  title: "Layout/ITFlex",
-  component: ITFlex,
-  argTypes: {
-    direction: {
-      control: "select",
-      options: ["row", "column", "row-reverse", "column-reverse"],
-    },
-    align: {
-      control: "select",
-      options: [undefined, "start", "end", "center", "stretch", "baseline"],
-    },
-    justify: {
-      control: "select",
-      options: [undefined, "start", "end", "center", "between", "around", "evenly"],
-    },
-    wrap: {
-      control: "select",
-      options: [undefined, "nowrap", "wrap", "wrap-reverse"],
-    },
-    gap: { control: { type: "range", min: 0, max: 16, step: 1 } },
-    grow: { control: "boolean" },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ITFlex>;
-
-const Box = ({ children, className = "" }: { children: string; className?: string }) => (
-  <div className={`bg-primary-100 text-primary-800 rounded-lg p-4 text-center font-medium ${className}`}>
-    {children}
-  </div>
-);
-
-export const Row: Story = {
-  args: { direction: "row", gap: 3 },
-  render: (args) => (
-    <ITFlex {...args}>
-      <Box>Flex 1</Box>
-      <Box>Flex 2</Box>
-      <Box>Flex 3</Box>
-    </ITFlex>
-  ),
-};
-
-export const SpaceBetween: Story = {
-  args: { justify: "between", align: "center", className: "w-full" },
-  render: (args) => (
-    <ITFlex {...args}>
-      <Box>Left</Box>
-      <Box>Center</Box>
-      <Box>Right</Box>
-    </ITFlex>
-  ),
-};
-
-export const ColumnGrow: Story = {
-  args: { direction: "column", gap: 2, className: "h-60" },
-  render: (args) => (
-    <ITFlex {...args}>
-      <ITFlex grow className="bg-primary-100 rounded-lg p-4">
-        <Box>Grow (flex: 1)</Box>
-      </ITFlex>
-      <Box className="w-full">Fixed height</Box>
-    </ITFlex>
-  ),
-};

package/src/components/atoms/grid/grid.doc.mdx

@@ -1,54 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './grid.stories';
-
-<Meta of={StoriesData} />
-
-# ITGrid
-
-A responsive 12-column CSS grid system for building flexible layouts. Supports grid container and item modes, configurable column spans per breakpoint, and customizable gap spacing.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | `undefined` | Child elements rendered inside the grid. |
-| `container` | `boolean` | `false` | When true, renders as a CSS grid parent. |
-| `item` | `boolean` | `false` | When true, renders as a CSS grid child with column span. |
-| `spacing` | `number` | `undefined` | Gap between children in units of 0.25rem. Container only. |
-| `columns` | `number` | `12` | Number of grid columns (1-12). Container only. |
-| `xs` | `number` | `undefined` | Column span at base breakpoint (mobile). Falls back to `sm`. |
-| `sm` | `number` | `undefined` | Column span at the `sm` breakpoint. |
-| `md` | `number` | `undefined` | Column span at the `md` breakpoint. |
-| `lg` | `number` | `undefined` | Column span at the `lg` breakpoint. |
-| `xl` | `number` | `undefined` | Column span at the `xl` breakpoint. |
-| `className` | `string` | `undefined` | Additional CSS classes. |
-| `style` | `CSSProperties` | `undefined` | Inline styles. |
-| `as` | `ElementType` | `'div'` | Custom HTML element type to render instead of div. |
-
-## Usage
-
-```tsx
-import { ITGrid } from '@axzydev/axzy_ui_system';
-
-<ITGrid container spacing={3}>
-  <ITGrid item xs={12} md={8}>
-    <div>Main content</div>
-  </ITGrid>
-  <ITGrid item xs={12} md={4}>
-    <div>Sidebar</div>
-  </ITGrid>
-</ITGrid>
-```
-
-## Notes
-
-- Uses CSS Grid under the hood with responsive breakpoint classes.
-- Omitting both `container` and `item` renders a plain `div` with no grid behavior.
-- Breakpoint spans cascade down: if `lg` is not set, it inherits `md`, then `sm`, then `xs`.
-- `spacing` multiplies by 0.25rem internally (spacing={2} = 0.5rem gap).
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/atoms/grid/grid.stories.tsx

@@ -1,71 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITGrid from "@/components/atoms/grid/grid";
-
-const meta: Meta<typeof ITGrid> = {
-  title: "Layout/ITGrid",
-  component: ITGrid,
-  argTypes: {
-    spacing: { control: { type: "range", min: 0, max: 8, step: 1 } },
-    columns: { control: { type: "number", min: 1, max: 12 } },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ITGrid>;
-
-const Cell = ({ children }: { children: string }) => (
-  <div className="bg-primary-100 text-primary-800 rounded-lg p-4 text-center font-medium h-full flex items-center justify-center">
-    {children}
-  </div>
-);
-
-export const ThreeColumns: Story = {
-  args: { container: true, spacing: 2 },
-  render: (args) => (
-    <ITGrid {...args}>
-      <ITGrid item xs={4}>
-        <Cell>1/3</Cell>
-      </ITGrid>
-      <ITGrid item xs={4}>
-        <Cell>1/3</Cell>
-      </ITGrid>
-      <ITGrid item xs={4}>
-        <Cell>1/3</Cell>
-      </ITGrid>
-    </ITGrid>
-  ),
-};
-
-export const Responsive: Story = {
-  args: { container: true, spacing: 3 },
-  render: (args) => (
-    <ITGrid {...args}>
-      <ITGrid item xs={12} sm={6} md={4} lg={3}>
-        <Cell>xs=12 sm=6 md=4 lg=3</Cell>
-      </ITGrid>
-      <ITGrid item xs={12} sm={6} md={4} lg={3}>
-        <Cell>xs=12 sm=6 md=4 lg=3</Cell>
-      </ITGrid>
-      <ITGrid item xs={12} sm={6} md={4} lg={3}>
-        <Cell>xs=12 sm=6 md=4 lg=3</Cell>
-      </ITGrid>
-      <ITGrid item xs={12} sm={6} md={4} lg={3}>
-        <Cell>xs=12 sm=6 md=4 lg=3</Cell>
-      </ITGrid>
-    </ITGrid>
-  ),
-};
-
-export const SidebarContent: Story = {
-  args: { container: true, spacing: 4, columns: 12 },
-  render: (args) => (
-    <ITGrid {...args}>
-      <ITGrid item xs={12} md={3}>
-        <Cell>Sidebar (md: 3/12)</Cell>
-      </ITGrid>
-      <ITGrid item xs={12} md={9}>
-        <Cell>Main Content (md: 9/12)</Cell>
-      </ITGrid>
-    </ITGrid>
-  ),
-};

package/src/components/atoms/image/image.doc.mdx

@@ -1,44 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './image.stories';
-
-<Meta of={StoriesData} />
-
-# ITImage
-
-An image component with automatic fallback on load error. Uses a native `<img>` element with an error boundary that swaps the source to a fallback URL when the primary image fails to load.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `src` | `string` | required | Source URL of the image. |
-| `alt` | `string` | `undefined` | Alt text for accessibility. |
-| `className` | `string` | `undefined` | Additional CSS classes for the wrapper. |
-| `fallback` | `string` | `undefined` | Fallback image URL shown when `src` fails to load. |
-| `onClick` | `() => void` | `undefined` | Click handler on the image. |
-
-## Usage
-
-```tsx
-import { ITImage } from '@axzydev/axzy_ui_system';
-
-<ITImage
-  src="https://example.com/photo.jpg"
-  alt="Profile photo"
-  fallback="https://example.com/default-avatar.jpg"
-/>
-<ITImage src="https://example.com/logo.png" />
-```
-
-## Notes
-
-- Handles `onerror` internally to swap to the `fallback` URL.
-- The wrapper is an inline-block `div` with full width/height for responsive sizing within a sized parent.
-- If no `fallback` is provided and the image errors, the broken image icon is shown.
-- Uses `object-cover` to fill the container while maintaining aspect ratio.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/atoms/image/image.stories.tsx

@@ -1,48 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ITImage from '@/components/atoms/image/image';
-
-const meta = {
-  title: 'Components/Data Display/ITImage',
-  component: ITImage,
-  parameters: { layout: 'centered' },
-  argTypes: {
-    src: { control: 'text', description: 'Image source URL' },
-    alt: { control: 'text', description: 'Alternative text for accessibility' },
-    fallback: { control: 'text', description: 'Fallback image URL shown when the primary src fails to load' },
-    className: { control: 'text', description: 'Additional CSS classes for the wrapper' },
-    onClick: { control: false, description: 'Click handler' },
-  },
-} satisfies Meta<typeof ITImage>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const containerStyle = { width: 256, height: 192 };
-
-export const Default: Story = {
-  args: {
-    src: 'https://picsum.photos/256/192',
-    alt: 'Random image',
-    className: 'rounded-lg overflow-hidden',
-  },
-  render: (args) => <div style={containerStyle}><ITImage {...args} /></div>,
-};
-
-export const WithFallbackError: Story = {
-  args: {
-    src: 'https://invalid-url/does-not-exist.jpg',
-    alt: 'Broken image',
-    fallback: 'https://picsum.photos/256/192?grayscale',
-    className: 'rounded-lg overflow-hidden',
-  },
-  render: (args) => <div style={containerStyle}><ITImage {...args} /></div>,
-};
-
-export const SquareAspectRatio: Story = {
-  args: {
-    src: 'https://picsum.photos/200/200',
-    alt: 'Square image',
-    className: 'rounded-full overflow-hidden',
-  },
-  render: (args) => <div style={{ width: 128, height: 128 }}><ITImage {...args} /></div>,
-};