@axzydev/axzy_ui_system 1.4.7 → 1.5.0

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

@@ -1,173 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ITButton from '@/components/atoms/button/button';
-
-const meta = {
-  title: 'Components/Actions/ITButton',
-  component: ITButton,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    color: {
-      control: 'select',
-      options: ['primary', 'secondary', 'success', 'danger', 'warning', 'purple', 'info'],
-      description: 'The semantic color of the button',
-    },
-    variant: {
-        control: 'select',
-        options: ['filled', 'outlined', 'raised', 'rounded', 'text', 'raised-text', 'icon-only', 'link'],
-        description: 'The visual style variant',
-    },
-    size: {
-        control: 'select',
-        options: ['small', 'medium', 'large'],
-        description: 'Button size (padding/font)',
-    },
-    label: { control: 'text' },
-    disabled: { control: 'boolean' },
-  },
-} satisfies Meta<typeof ITButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// 1. Filled (Default)
-export const Filled: Story = {
-  args: {
-    label: 'Filled Button',
-    color: 'primary',
-    variant: 'filled',
-  },
-};
-
-// 2. Outlined
-export const Outlined: Story = {
-  args: {
-    label: 'Outlined Button',
-    color: 'primary',
-    variant: 'outlined',
-  },
-};
-
-// 3. Raised (Shadow)
-export const Raised: Story = {
-  args: {
-    label: 'Raised Button',
-    color: 'primary',
-    variant: 'raised',
-  },
-};
-
-// 4. Rounded (Pill)
-export const Rounded: Story = {
-  args: {
-    label: 'Rounded Button',
-    color: 'success',
-    variant: 'rounded',
-  },
-};
-
-// 5. Text (Ghost)
-export const Text: Story = {
-  args: {
-    label: 'Text Button',
-    color: 'info',
-    variant: 'text',
-  },
-};
-
-// 6. Raised Text (Elevated White)
-export const RaisedText: Story = {
-  args: {
-    label: 'Raised Text',
-    color: 'warning',
-    variant: 'raised-text',
-  },
-};
-
-// 7. With Icon (icon prop + label)
-export const WithIcon: Story = {
-  args: {
-    label: 'Guardar',
-    color: 'primary',
-    variant: 'filled',
-    icon: <span style={{ fontSize: '1em' }}>💾</span>,
-  },
-};
-
-// 8. Icon Only
-export const IconOnly: Story = {
-  args: {
-    color: 'danger',
-    variant: 'icon-only',
-    children: <span style={{ fontSize: '1.2em' }}>★</span>,
-    ariaLabel: 'Favorite',
-  },
-};
-
-// 8. Link
-export const Link: Story = {
-  args: {
-    label: 'Link Button',
-    color: 'primary',
-    variant: 'link',
-  },
-};
-
-// 9. All Colors Showcase (Kitchen Sink for colors)
-export const AllColors: Story = {
-  render: (args) => (
-    <div className="flex flex-wrap gap-4">
-      {['primary', 'secondary', 'success', 'danger', 'warning', 'purple', 'info'].map((color) => (
-        <ITButton key={color} {...args} color={color as any} label={color.charAt(0).toUpperCase() + color.slice(1)} />
-      ))}
-    </div>
-  ),
-  args: {
-    variant: 'filled',
-  },
-};
-
-// 9. Disabled
-export const Disabled: Story = {
-  args: {
-    label: 'Disabled Button',
-    disabled: true,
-    color: 'primary',
-    variant: 'filled',
-  },
-};
-
-// 10. All Combinations (Matrix)
-export const AllCombinations: Story = {
-  render: (args) => {
-    const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'purple', 'info'];
-    const variants = ['filled', 'outlined', 'raised', 'rounded', 'text', 'raised-text', 'icon-only', 'link'];
-
-    return (
-      <div className="flex flex-col gap-8">
-        {variants.map((variant) => (
-          <div key={variant} className="flex flex-col gap-2">
-            <h3 className="text-sm font-bold uppercase text-gray-400">{variant}</h3>
-            <div className="flex flex-wrap gap-4 items-center">
-              {colors.map((color) => (
-                <ITButton
-                  key={`${variant}-${color}`}
-                  {...args}
-                  color={color as any}
-                  variant={variant as any}
-                  label={variant === 'icon-only' ? undefined : (color.charAt(0).toUpperCase() + color.slice(1))}
-                  ariaLabel={variant === 'icon-only' ? color : undefined}
-                >
-                  {variant === 'icon-only' ? <span style={{ fontSize: '1.2em' }}>★</span> : undefined}
-                </ITButton>
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-    );
-  },
-  args: {},
-};
-

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 />