@axzydev/axzy_ui_system 1.4.8 → 1.5.0

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

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

@@ -1,53 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './popover.stories';
-
-<Meta of={StoriesData} />
-
-# ITPopover
-
-Floating content panel triggered by click on a trigger element. Supports four position placements and offers both uncontrolled (click toggle) and controlled (`isOpen`/`onClose`) modes.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `trigger` | `ReactNode` | — | Element that triggers the popover when clicked. |
-| `children` | `ReactNode` | — | Content rendered inside the popover panel. |
-| `position` | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` | Position of the popover relative to the trigger element. |
-| `isOpen` | `boolean` | — | Controlled open state. When provided, the component acts in controlled mode. |
-| `onClose` | `() => void` | — | Callback fired when the popover is closed in controlled mode. |
-| `className` | `string` | — | Additional CSS classes for the container. |
-
-## Usage
-
-```tsx
-import { ITPopover } from '@axzydev/axzy_ui_system';
-
-<ITPopover trigger={<ITButton label="Abrir" />}>
-  <button>Editar</button>
-  <button>Eliminar</button>
-</ITPopover>
-
-<ITPopover
-  trigger={<ITButton label="Controlled" />}
-  position="top"
-  isOpen={open}
-  onClose={() => setOpen(false)}
->
-  <p>Contenido controlado</p>
-</ITPopover>
-```
-
-## Notes
-
-- Default mode is uncontrolled: clicking the trigger toggles the popover open/closed.
-- Controlled mode via `isOpen` and `onClose` allows external state management.
-- Four positions available: `top`, `bottom`, `left`, `right` relative to the trigger element.
-- Popover is dismissed automatically when clicking outside the panel.
-- Ideal for dropdown menus, action lists, and contextual tool panels.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

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

@@ -1,24 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITPopover from "@/components/atoms/popover/popover";
-import ITButton from "@/components/atoms/button/button";
-import ITStack from "@/components/atoms/stack/stack";
-
-const meta: Meta<typeof ITPopover> = {
-  title: "Components/Overlay/ITPopover",
-  component: ITPopover,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITPopover>;
-
-export const Default: Story = {
-  render: () => (
-    <ITPopover trigger={<ITButton label="Abrir Popover" />}>
-      <ITStack spacing={2}>
-        <p className="text-sm font-semibold">Opciones</p>
-        <button className="text-sm text-left text-slate-600 hover:text-slate-800">Editar</button>
-        <button className="text-sm text-left text-slate-600 hover:text-slate-800">Eliminar</button>
-      </ITStack>
-    </ITPopover>
-  ),
-};

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

@@ -1,48 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './progress.stories';
-
-<Meta of={StoriesData} />
-
-# ITProgress
-
-Progress indicator with determinate and indeterminate variants. Supports multiple semantic colors and three sizes for indicating completion or loading states.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `number` | `0` | Current progress value. |
-| `max` | `number` | `100` | Maximum progress value. |
-| `variant` | `"determinate" \| "indeterminate"` | `"determinate"` | Progress variant. `"determinate"` shows a fixed-width fill, `"indeterminate"` shows an animated pulsing bar. |
-| `color` | `"primary" \| "secondary" \| "success" \| "danger" \| "warning" \| "info" \| "purple" \| "error" \| "gray"` | `"primary"` | Semantic color for the progress fill. |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Height and visual scale of the progress bar. |
-| `className` | `string` | — | Additional CSS classes for the container. |
-| `style` | `CSSProperties` | — | Inline styles applied to the container. |
-
-## Usage
-
-```tsx
-import { ITProgress } from '@axzydev/axzy_ui_system';
-
-<ITProgress value={70} />
-
-<ITProgress value={45} color="success" size="lg" />
-
-<ITProgress variant="indeterminate" />
-
-<ITProgress value={90} color="danger" size="sm" />
-```
-
-## Notes
-
-- `determinate` mode shows a solid fill proportional to `value / max`.
-- `indeterminate` mode renders a continuous animated bar for loading states where progress is unknown.
-- All nine semantic colors are available for the fill.
-- Sizes `sm`, `md`, and `lg` control bar height and overall scale.
-- Use `style` for custom width or container-level overrides.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

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

@@ -1,39 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import ITProgress from "@/components/atoms/progress/progress";
-import ITButton from "@/components/atoms/button/button";
-
-const meta: Meta<typeof ITProgress> = {
-  title: "Components/Feedback/ITProgress",
-  component: ITProgress,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITProgress>;
-
-export const Determinate: Story = {
-  render: () => {
-    const [val, setVal] = useState(0);
-    return (
-      <div className="space-y-3">
-        <ITProgress value={val} />
-        <ITButton label="+10%" onClick={() => setVal(v => Math.min(v + 10, 100))} />
-      </div>
-    );
-  },
-};
-
-export const Indeterminate: Story = {
-  args: { variant: "indeterminate" },
-};
-
-export const Colors: Story = {
-  render: () => (
-    <div className="space-y-3">
-      <ITProgress value={70} color="primary" />
-      <ITProgress value={70} color="success" />
-      <ITProgress value={70} color="danger" />
-      <ITProgress value={70} color="warning" />
-    </div>
-  ),
-};