@axzydev/axzy_ui_system 1.4.7 → 1.5.0

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>,
-};

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

@@ -1,70 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './input.stories';
-
-<Meta of={StoriesData} />
-
-# ITInput
-
-A versatile form input component supporting text, password, email, number, textarea, checkbox, and radio types. Features labels, validation errors, left/right icons, helper text with character count, currency formatting, and configurable sizes.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `name` | `string` | required | Field name used for form identification. |
-| `type` | `'text' \| 'password' \| 'number' \| 'email' \| 'checkbox' \| 'radio' \| 'textarea'` | `'text'` | Input type. |
-| `label` | `string` | `undefined` | Label displayed above the input. |
-| `placeholder` | `string` | `undefined` | Placeholder text. |
-| `value` | `any` | `undefined` | Current input value. |
-| `onChange` | `(event: any) => void` | required | Change event handler. |
-| `onBlur` | `(event) => void` | `undefined` | Blur event handler. |
-| `onKeyDown` | `(event) => void` | `undefined` | Keydown event handler. |
-| `error` | `string \| boolean` | `undefined` | Validation error message. Pass `true` for generic error styling. |
-| `touched` | `boolean` | `undefined` | Whether the field has been touched by the user. |
-| `required` | `boolean` | `false` | Mark the field as required (adds asterisk to label). |
-| `disabled` | `boolean` | `false` | Disable the input. |
-| `size` | `SizesTypes` | `'md'` | Size preset: `"sm"`, `"md"`, `"lg"`. |
-| `variant` | `ColorsTypes` | `undefined` | Color variant from the theme palette. |
-| `iconLeft` | `ReactNode` | `undefined` | Icon element rendered on the left side. |
-| `iconRight` | `ReactNode` | `undefined` | Icon element rendered on the right side. |
-| `maxLength` | `number` | `undefined` | Maximum allowed character length. |
-| `minLength` | `number` | `undefined` | Minimum allowed character length. |
-| `showHintLength` | `boolean` | `false` | Show character count hint below the input. |
-| `currencyFormat` | `boolean` | `false` | Enable currency formatting for number inputs (MX locale). |
-| `formatNumber` | `boolean` | `false` | Enable number formatting on blur. |
-| `autoFocus` | `boolean` | `false` | Auto-focus the input on mount. |
-| `focusContent` | `boolean` | `false` | Select all content on click/focus. |
-| `readOnly` | `boolean` | `false` | Render the input in read-only mode. |
-| `min` | `number` | `undefined` | Minimum numeric value for number inputs. |
-| `max` | `number` | `undefined` | Maximum numeric value for number inputs. |
-| `rows` | `number` | `undefined` | Number of visible rows for textarea. |
-| `checked` | `boolean` | `undefined` | Checked state for checkbox and radio types. |
-| `containerClassName` | `string` | `undefined` | Additional CSS classes for the outer container. |
-| `labelClassName` | `string` | `undefined` | Additional CSS classes for the label. |
-| `className` | `string` | `undefined` | Additional CSS classes for the input element. |
-| `onClick` | `() => void` | `undefined` | Click handler for the input. |
-
-## Usage
-
-```tsx
-import { ITInput } from '@axzydev/axzy_ui_system';
-
-<ITInput name="email" label="Email" type="email" placeholder="example@mail.com" />
-<ITInput name="password" label="Password" type="password" iconLeft={<FaLock />} />
-<ITInput name="bio" label="Bio" type="textarea" rows={4} />
-<ITInput name="qty" label="Quantity" type="number" min={0} max={100} />
-```
-
-## Notes
-
-- Error message only displays when both `error` and `touched` are truthy.
-- `showHintLength` with `maxLength` displays a counter (e.g. "45/200").
-- Currency formatting uses MX locale by default when `currencyFormat` is true.
-- Icons rendered via `iconLeft`/`iconRight` can be clickable React nodes (e.g. a toggle visibility button).
-- Checkbox and radio types render inline labels instead of stacked layout.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

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

@@ -1,113 +0,0 @@
-import type { Meta } from '@storybook/react';
-import ITInput from '@/components/atoms/input/input';
-import { FaUser, FaLock, FaEnvelope } from 'react-icons/fa';
-
-const meta = {
-  title: 'Components/Form Elements/ITInput',
-  component: ITInput,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    type: {
-      control: 'select',
-      options: ['text', 'password', 'number', 'email', 'textarea'],
-    },
-    disabled: { control: 'boolean' },
-    error: { control: 'text' },
-  },
-} satisfies Meta<typeof ITInput>;
-
-export default meta;
-
-export const Default: any = {
-  args: {
-    name: 'default-input',
-    placeholder: 'Type something...',
-  },
-};
-
-export const WithLabel: any = {
-  args: {
-    name: 'labeled-input',
-    label: 'Username',
-    placeholder: 'Enter your username',
-  },
-};
-
-export const WithIcons: any = {
-  args: {
-    name: 'icon-input',
-    label: 'Email',
-    type: 'email',
-    placeholder: 'example@mail.com',
-    iconLeft: <FaEnvelope className="text-gray-400" />,
-  },
-};
-
-export const ClickableIcons: any = {
-  args: {
-    name: 'search-input',
-    label: 'Search',
-    placeholder: 'Search...',
-    iconRight: (
-      <button 
-        onClick={() => alert('Search clicked!')}
-        className="text-gray-500 hover:text-blue-500 transition-colors"
-      >
-        <FaUser />
-      </button>
-    ),
-  },
-};
-
-export const Password: any = {
-  args: {
-    name: 'password-input',
-    label: 'Password',
-    type: 'password',
-    placeholder: '••••••••',
-    iconLeft: <FaLock className="text-gray-400" />,
-  },
-};
-
-export const WithError: any = {
-  args: {
-    name: 'error-input',
-    label: 'Email',
-    value: 'invalid-email',
-    touched: true,
-    error: 'Please enter a valid email address',
-    iconLeft: <FaEnvelope className="text-gray-400" />,
-  },
-};
-
-export const Disabled: any = {
-  args: {
-    name: 'disabled-input',
-    label: 'Disabled Input',
-    value: 'Cannot edit this',
-    disabled: true,
-  },
-};
-
-export const TextArea: any = {
-  args: {
-    name: 'textarea',
-    label: 'Description',
-    type: 'textarea',
-    placeholder: 'Write a detailed description...',
-    rows: 4,
-  },
-};
-
-export const NumberInput: any = {
-  args: {
-    name: 'number-input',
-    label: 'Quantity',
-    type: 'number',
-    placeholder: '0',
-    min: 0,
-    max: 100,
-  },
-};

package/src/components/atoms/input-number/input-number.doc.mdx

@@ -1,74 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './input-number.stories';
-
-<Meta of={StoriesData} />
-
-# ITInputNumber
-
-Numeric field that always renders currency-style formatting (thousand separators + fixed decimals) and emits a real `number` through `onChange` / `onBlur`. Built on top of `ITInput`, so it inherits label, validation, sizes, icons and theming.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `name` | `string` | required | Field name used for form identification. |
-| `value` | `number \| null` | `undefined` | Current numeric value. |
-| `onChange` | `(value: number \| undefined, event) => void` | required | Called with the parsed value on every change. |
-| `onBlur` | `(value: number \| undefined, event) => void` | `undefined` | Called on blur with the parsed (and clamped) value. |
-| `decimals` | `number` | `2` | Decimal places allowed. `0` restricts to integers. |
-| `prefix` | `string` | `undefined` | Text prefix rendered inside the field (e.g. `"$"`). Ignored when `iconLeft` is set. |
-| `label` | `string` | `undefined` | Label displayed above the input. |
-| `placeholder` | `string` | `undefined` | Placeholder text. |
-| `min` | `number` | `undefined` | Minimum value; lower values are clamped on blur. |
-| `max` | `number` | `undefined` | Maximum value; higher values are clamped on blur. |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Size preset. |
-| `disabled` | `boolean` | `false` | Disable the input. |
-| `readOnly` | `boolean` | `false` | Render the input in read-only mode. |
-| `required` | `boolean` | `false` | Mark the field as required. |
-| `touched` | `boolean` | `undefined` | Whether the field has been touched by the user. |
-| `error` | `string \| boolean` | `undefined` | Validation error (`true` = generic message). |
-| `iconLeft` / `iconRight` | `ReactNode` | `undefined` | Icons rendered inside the field. |
-| `containerClassName` | `string` | `undefined` | Additional classes for the outer container. |
-| `labelClassName` | `string` | `undefined` | Additional classes for the label. |
-| `className` | `string` | `undefined` | Additional classes for the input element. |
-| `autoFocus` | `boolean` | `false` | Auto-focus on mount. |
-| `focusContent` | `boolean` | `false` | Select all content on click. |
-| `onKeyDown` | `(event) => void` | `undefined` | Keydown handler for the underlying input. |
-
-## Usage
-
-```tsx
-import { ITInputNumber } from '@axzydev/axzy_ui_system';
-
-<ITInputNumber
-  name="amount"
-  label="Monto"
-  value={amount}
-  prefix="$"
-  onChange={(value) => setAmount(value)}
-/>
-
-<ITInputNumber
-  name="qty"
-  label="Cantidad"
-  decimals={0}
-  min={1}
-  max={99}
-  value={qty}
-  onChange={(value) => setQty(value)}
-/>
-```
-
-## Notes
-
-- The emitted value is a `number` (or `undefined` when the field is empty) — no `parseFloat` needed by the consumer.
-- Formatting is always on: thousand separators while blurred, raw digits while typing.
-- Use `decimals={0}` for integers only.
-- Values are clamped to `min`/`max` on blur.
-- `prefix` is a convenience over `iconLeft`; pass `iconLeft` directly for any custom node.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/atoms/input-number/input-number.stories.tsx

@@ -1,111 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { FaDollarSign } from 'react-icons/fa';
-import ITInputNumber from '@/components/atoms/input-number/input-number';
-import { ITInputNumberProps } from './input-number.props';
-
-const meta: Meta<typeof ITInputNumber> = {
-  title: 'Components/Form Elements/ITInputNumber',
-  component: ITInputNumber,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    decimals: { control: 'number' },
-    disabled: { control: 'boolean' },
-    error: { control: 'text' },
-    min: { control: 'number' },
-    max: { control: 'number' },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ITInputNumber>;
-
-/** Wrapper that keeps the value in state so the story reflects real usage. */
-const Interactive = (props: Partial<ITInputNumberProps> & Pick<ITInputNumberProps, 'name'>) => {
-  const [value, setValue] = useState<number | null>(null);
-  return (
-    <div className="w-80">
-      <ITInputNumber
-        label="Monto"
-        placeholder="0.00"
-        {...props}
-        value={value}
-        onChange={(next) => setValue(next ?? null)}
-      />
-      <p className="mt-2 text-xs font-mono text-slate-500">
-        value: {value === null ? 'null' : `${value} (${typeof value})`}
-      </p>
-    </div>
-  );
-};
-
-export const Default: Story = {
-  render: () => <Interactive name="amount" />,
-};
-
-export const WithPrefix: Story = {
-  render: () => <Interactive name="amount-prefix" prefix="$" />,
-};
-
-export const WithIcon: Story = {
-  render: () => (
-    <Interactive name="amount-icon" iconLeft={<FaDollarSign className="text-slate-400" />} />
-  ),
-};
-
-export const InitialValue: Story = {
-  render: () => {
-    const [value, setValue] = useState<number | null>(1234.5);
-    return (
-      <div className="w-80">
-        <ITInputNumber
-          name="amount-initial"
-          label="Monto inicial"
-          prefix="$"
-          value={value}
-          onChange={(next) => setValue(next ?? null)}
-        />
-        <p className="mt-2 text-xs font-mono text-slate-500">value: {value === null ? 'null' : value}</p>
-      </div>
-    );
-  },
-};
-
-export const IntegersOnly: Story = {
-  render: () => <Interactive name="quantity" label="Cantidad" decimals={0} />,
-};
-
-export const WithBounds: Story = {
-  render: () => <Interactive name="bounded" label="Entre 10 y 500" min={10} max={500} />,
-};
-
-export const WithError: Story = {
-  render: () => (
-    <Interactive
-      name="amount-error"
-      label="Monto"
-      prefix="$"
-      touched
-      error="El monto es obligatorio"
-    />
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <div className="w-80">
-      <ITInputNumber name="amount-disabled" label="Monto" value={1234.5} disabled onChange={() => {}} />
-    </div>
-  ),
-};
-
-export const ReadOnly: Story = {
-  render: () => (
-    <div className="w-80">
-      <ITInputNumber name="amount-readonly" label="Monto" prefix="$" value={98765.43} readOnly onChange={() => {}} />
-    </div>
-  ),
-};

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

@@ -1,43 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './loader.stories';
-
-<Meta of={StoriesData} />
-
-# ITLoader
-
-A loading indicator with four animation variants and customizable sizing and color. Useful for async operations, data fetching states, and any in-progress feedback.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `'spinner' \| 'dots' \| 'bar' \| 'pulse'` | `'spinner'` | Animation style. |
-| `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Size preset. |
-| `color` | `string` | `'primary'` | Color value. Accepts theme semantic keys (`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `purple`), hex, rgb, or CSS class. |
-| `className` | `string` | `undefined` | Additional CSS classes. |
-
-## Usage
-
-```tsx
-import { ITLoader } from '@axzydev/axzy_ui_system';
-
-<ITLoader />
-<ITLoader variant="dots" color="secondary" size="lg" />
-<ITLoader variant="bar" color="success" />
-<ITLoader variant="pulse" color="danger" size="xl" />
-```
-
-## Notes
-
-- `spinner` — rotating circular indicator.
-- `dots` — bouncing dots sequence.
-- `pulse` — pulsing circle with scaling animation.
-- `bar` — horizontal indeterminate progress bar (intended for use in a container with explicit width).
-- Color mapping is handled through the theme system; semantic keys resolve to CSS custom properties.
-- All animations use CSS keyframes with GPU-accelerated transforms where possible.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

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

@@ -1,104 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITLoader from "@/components/atoms/loader/loader";
-
-const meta: Meta<typeof ITLoader> = {
-  title: "Components/Feedback/ITLoader",
-  component: ITLoader,
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-    size: {
-      control: "select",
-      options: ["sm", "md", "lg", "xl"],
-      description: "Size of the loader",
-    },
-    variant: {
-      control: "select",
-      options: ["spinner", "dots", "bar", "pulse"],
-      description: "Visual style of the loader",
-    },
-    color: {
-      control: "select",
-      options: ["primary", "secondary", "success", "danger", "warning", "info", "purple"],
-      description: "Semantic color from theme",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ITLoader>;
-
-export const Spinner: Story = {
-  args: {
-    variant: "spinner",
-    color: "primary",
-    size: "md",
-  },
-};
-
-export const Dots: Story = {
-  args: {
-    variant: "dots",
-    color: "secondary",
-    size: "md",
-  },
-};
-
-export const Pulse: Story = {
-  args: {
-    variant: "pulse",
-    color: "danger",
-    size: "lg",
-  },
-};
-
-export const Bar: Story = {
-  render: (args) => (
-    <div className="w-[300px]">
-      <ITLoader {...args} />
-    </div>
-  ),
-  args: {
-    variant: "bar",
-    color: "success",
-    size: "md",
-  },
-};
-
-export const AllColors: Story = {
-  render: (args) => (
-    <div className="flex gap-4 items-center">
-      {(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'purple'] as const).map((color) => (
-        <ITLoader key={color} {...args} color={color} />
-      ))}
-    </div>
-  ),
-  args: {
-    variant: "spinner",
-    size: "md",
-  },
-};
-
-export const AllVariants: Story = {
-    render: () => (
-      <div className="flex flex-col gap-8 items-center">
-        <div className="flex gap-4 items-center">
-             <span className="w-20 text-sm font-bold text-gray-500">Spinner</span>
-             <ITLoader variant="spinner" color="primary" />
-        </div>
-        <div className="flex gap-4 items-center">
-             <span className="w-20 text-sm font-bold text-gray-500">Dots</span>
-             <ITLoader variant="dots" color="primary" />
-        </div>
-        <div className="flex gap-4 items-center">
-             <span className="w-20 text-sm font-bold text-gray-500">Pulse</span>
-             <ITLoader variant="pulse" color="primary" />
-        </div>
-         <div className="flex gap-4 items-center w-[300px]">
-             <span className="w-20 text-sm font-bold text-gray-500">Bar</span>
-             <ITLoader variant="bar" color="primary" />
-        </div>
-      </div>
-    ),
-  };