@axzydev/axzy_ui_system 1.4.8 → 1.5.0

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

@@ -1,62 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './radio.stories';
-
-<Meta of={StoriesData} />
-
-# ITRadioGroup
-
-Radio button group for selecting a single option from a set. Supports horizontal and vertical layouts, disabled state, and an options-array API for declarative rendering.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `name` | `string` | — | Name attribute for the radio input group. Used for form accessibility. |
-| `value` | `string` | — | Currently selected value (controlled). |
-| `onChange` | `(value: string) => void` | — | Callback fired when a radio option is selected. |
-| `options` | `ITRadioOption[]` | — | Array of radio options: `{ value: string, label: ReactNode }`. |
-| `disabled` | `boolean` | `false` | Whether the entire radio group is disabled. |
-| `direction` | `"row" \| "column"` | `"column"` | Layout direction of the radio options. |
-| `className` | `string` | — | Additional CSS classes for the container. |
-
-## Usage
-
-```tsx
-import { ITRadioGroup } from '@axzydev/axzy_ui_system';
-
-<ITRadioGroup
-  name="size"
-  value={selected}
-  onChange={setSelected}
-  options={[
-    { value: "sm", label: "Small" },
-    { value: "md", label: "Medium" },
-    { value: "lg", label: "Large" },
-  ]}
-/>
-
-<ITRadioGroup
-  name="layout"
-  value={selected}
-  onChange={setSelected}
-  direction="row"
-  options={[
-    { value: "option1", label: "Option 1" },
-    { value: "option2", label: "Option 2" },
-  ]}
-/>
-```
-
-## Notes
-
-- Fully controlled component: `value` and `onChange` must be provided.
-- `direction="column"` stacks options vertically; `direction="row"` lays them out horizontally.
-- `disabled` disables all radio inputs in the group at once.
-- Label accepts `ReactNode`, allowing rich content like icons or custom markup.
-- Group uses a shared `name` attribute, ensuring mutual exclusivity across options.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

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

@@ -1,48 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import ITRadioGroup from "@/components/atoms/radio/radio";
-
-const meta: Meta<typeof ITRadioGroup> = {
-  title: "Components/Inputs/ITRadioGroup",
-  component: ITRadioGroup,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITRadioGroup>;
-
-export const Default: Story = {
-  render: () => {
-    const [val, setVal] = useState("option1");
-    return (
-      <ITRadioGroup
-        name="example"
-        value={val}
-        onChange={setVal}
-        options={[
-          { value: "option1", label: "Opción 1" },
-          { value: "option2", label: "Opción 2" },
-          { value: "option3", label: "Opción 3" },
-        ]}
-      />
-    );
-  },
-};
-
-export const Row: Story = {
-  render: () => {
-    const [val, setVal] = useState("sm");
-    return (
-      <ITRadioGroup
-        name="size"
-        value={val}
-        onChange={setVal}
-        direction="row"
-        options={[
-          { value: "sm", label: "Chico" },
-          { value: "md", label: "Mediano" },
-          { value: "lg", label: "Grande" },
-        ]}
-      />
-    );
-  },
-};

package/src/components/atoms/segmented-control/segmented-control.doc.mdx

@@ -1,60 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './segmented-control.stories';
-
-<Meta of={StoriesData} />
-
-# ITSegmentedControl
-
-iOS-style segmented toggle for mutually exclusive options with optional icons. Supports two sizes and a disabled state. Ideal for filter and view switching.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `options` | `ISegmentedOption[]` | — | Array of mutually exclusive options: `{ value: string, label: string, icon?: ReactNode }`. |
-| `value` | `string` | — | Currently selected value (controlled). |
-| `onChange` | `(value: string) => void` | — | Callback fired when the user selects a different option. |
-| `size` | `"sm" \| "md"` | `"md"` | Control size. |
-| `className` | `string` | — | Additional CSS classes on the container. |
-| `disabled` | `boolean` | `false` | Whether the entire control is disabled. |
-
-## Usage
-
-```tsx
-import { ITSegmentedControl } from '@axzydev/axzy_ui_system';
-
-<ITSegmentedControl
-  options={[
-    { value: "day", label: "Day" },
-    { value: "week", label: "Week" },
-    { value: "month", label: "Month" },
-  ]}
-  value={selected}
-  onChange={setSelected}
-/>
-
-<ITSegmentedControl
-  size="sm"
-  options={[
-    { value: "list", label: "List", icon: <FaList /> },
-    { value: "grid", label: "Grid", icon: <FaTh /> },
-  ]}
-  value={view}
-  onChange={setView}
-/>
-```
-
-## Notes
-
-- Only one option can be selected at a time — mutually exclusive by design.
-- Each option may include an optional `icon` rendered alongside the label.
-- Two sizes available: `sm` (compact) and `md` (default).
-- `disabled` applies to all segments simultaneously.
-- Commonly used for view toggling (list/grid), date range selection (day/week/month), and filter switching.
-- Fully controlled component: `value` and `onChange` are required.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/atoms/segmented-control/segmented-control.stories.tsx

@@ -1,62 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import { FaList, FaTh } from "react-icons/fa";
-import ITSegmentedControl from "@/components/atoms/segmented-control/segmented-control";
-
-const meta: Meta<typeof ITSegmentedControl> = {
-  title: "Components/Inputs/ITSegmentedControl",
-  component: ITSegmentedControl,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITSegmentedControl>;
-
-export const Default: Story = {
-  render: () => {
-    const [val, setVal] = useState("day");
-    return (
-      <ITSegmentedControl
-        options={[
-          { value: "day", label: "Día" },
-          { value: "week", label: "Semana" },
-          { value: "month", label: "Mes" },
-        ]}
-        value={val}
-        onChange={setVal}
-      />
-    );
-  },
-};
-
-export const WithIcons: Story = {
-  render: () => {
-    const [val, setVal] = useState("list");
-    return (
-      <ITSegmentedControl
-        options={[
-          { value: "list", label: "Lista", icon: <FaList size={10} /> },
-          { value: "grid", label: "Grid", icon: <FaTh size={10} /> },
-        ]}
-        value={val}
-        onChange={setVal}
-      />
-    );
-  },
-};
-
-export const Small: Story = {
-  render: () => {
-    const [val, setVal] = useState("sm");
-    return (
-      <ITSegmentedControl
-        size="sm"
-        options={[
-          { value: "sm", label: "Chico" },
-          { value: "md", label: "Mediano" },
-        ]}
-        value={val}
-        onChange={setVal}
-      />
-    );
-  },
-};

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

@@ -1,43 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './skeleton.stories';
-
-<Meta of={StoriesData} />
-
-# ITSkeleton
-
-Content placeholder loaders used during data loading to indicate upcoming content.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `'text' \| 'circular' \| 'rectangular' \| 'rounded'` | `'text'` | Shape of the skeleton placeholder |
-| `animation` | `'pulse' \| 'wave' \| 'none'` | `'pulse'` | Animation style |
-| `width` | `number \| string` | — | Width of the skeleton |
-| `height` | `number \| string` | — | Height of the skeleton |
-| `count` | `number` | `1` | Number of skeleton items to render |
-
-## Usage
-
-```tsx
-import { ITSkeleton } from '@axzydev/axzy_ui_system';
-
-<ITSkeleton />
-<ITSkeleton variant="circular" width={40} height={40} />
-<ITSkeleton variant="rectangular" width="100%" height={200} animation="wave" />
-<ITSkeleton variant="text" count={3} />
-```
-
-## Notes
-
-- Use during data loading to reduce perceived wait time
-- `count` prop repeats the skeleton for placeholder lists or paragraphs
-- `rectangular` variant suits image or card placeholders
-- `circular` variant suits avatar or icon placeholders
-- Set `animation="none"` for static placeholders
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

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

@@ -1,29 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITSkeleton from "@/components/atoms/skeleton/skeleton";
-import ITStack from "@/components/atoms/stack/stack";
-
-const meta: Meta<typeof ITSkeleton> = {
-  title: "Components/Feedback/ITSkeleton",
-  component: ITSkeleton,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITSkeleton>;
-
-export const Text: Story = {
-  render: () => (
-    <ITStack spacing={2}>
-      <ITSkeleton variant="text" width="60%" />
-      <ITSkeleton variant="text" />
-      <ITSkeleton variant="text" width="80%" />
-    </ITStack>
-  ),
-};
-
-export const Circular: Story = {
-  args: { variant: "circular", width: 48, height: 48 },
-};
-
-export const Rectangular: Story = {
-  args: { variant: "rectangular", width: "100%", height: 160 },
-};

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

@@ -1,46 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './slide.stories';
-
-<Meta of={StoriesData} />
-
-# ITSlideToggle
-
-iOS-style toggle switch for boolean settings. Supports controlled and uncontrolled modes.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `checked` | `boolean` | — | Controlled checked state |
-| `defaultChecked` | `boolean` | `false` | Uncontrolled default state |
-| `onChange` | `(checked: boolean) => void` | — | Change handler |
-| `label` | `string` | — | Label text |
-| `labelPosition` | `'left' \| 'right'` | `'right'` | Label placement |
-| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Toggle size |
-| `color` | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral'` | `'primary'` | Color theme when checked |
-| `disabled` | `boolean` | `false` | Disables the toggle |
-
-## Usage
-
-```tsx
-import { ITSlideToggle } from '@axzydev/axzy_ui_system';
-
-<ITSlideToggle />
-<ITSlideToggle label="Enable notifications" defaultChecked />
-<ITSlideToggle label="Dark mode" labelPosition="left" size="sm" color="success" />
-<ITSlideToggle disabled label="Locked" />
-```
-
-## Notes
-
-- Controlled mode via `checked` + `onChange`
-- Uncontrolled mode via `defaultChecked`
-- Label renders alongside the toggle with configurable position
-- Seven semantic color themes available
-- Three sizes: sm (small), md (medium), lg (large)
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

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

@@ -1,120 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITSlideToggle from "@/components/atoms/slide/slide";
-import { useState } from "react";
-
-const meta: Meta<typeof ITSlideToggle> = {
-  title: "Components/Form Elements/ITSlideToggle",
-  component: ITSlideToggle,
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-    activeColor: {
-      control: "select",
-      options: ["primary", "secondary", "success", "danger", "warning", "info", "purple"],
-    },
-    size: {
-      control: "select",
-      options: ["sm", "md", "lg"],
-    },
-    disabled: {
-      control: "boolean",
-    },
-    isOn: {
-      control: "boolean",
-    },
-    initialState: {
-      control: "boolean",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ITSlideToggle>;
-
-export const Default: Story = {
-  args: {
-    activeColor: "success",
-    size: "md",
-  },
-};
-
-export const CheckedUncontrolled: Story = {
-  args: {
-    initialState: true,
-    activeColor: "primary",
-  },
-};
-
-const ControlledSlideWrapper = (args: any) => {
-  const [isOn, setIsOn] = useState(false);
-  return (
-    <div className="flex flex-col gap-4 items-center">
-      <ITSlideToggle {...args} isOn={isOn} onToggle={setIsOn} />
-      <span className="text-sm font-medium text-gray-500">
-        External State: {isOn ? "ON" : "OFF"}
-      </span>
-    </div>
-  );
-};
-
-export const Controlled: Story = {
-  render: (args) => <ControlledSlideWrapper {...args} />,
-  args: {
-    activeColor: "info",
-    size: "lg",
-  },
-};
-
-export const Sizes: Story = {
-  render: (args) => (
-    <div className="flex flex-col gap-6 items-center">
-      <div className="flex items-center gap-4">
-        <span className="w-16 text-sm text-gray-500 font-bold">Small</span>
-        <ITSlideToggle {...args} size="sm" initialState={true} />
-      </div>
-      <div className="flex items-center gap-4">
-        <span className="w-16 text-sm text-gray-500 font-bold">Medium</span>
-        <ITSlideToggle {...args} size="md" initialState={true} />
-      </div>
-      <div className="flex items-center gap-4">
-        <span className="w-16 text-sm text-gray-500 font-bold">Large</span>
-        <ITSlideToggle {...args} size="lg" initialState={true} />
-      </div>
-    </div>
-  ),
-  args: {
-     activeColor: "primary"
-  }
-};
-
-export const Disabled: Story = {
-  render: (args) => (
-    <div className="flex gap-8">
-      <div className="flex flex-col gap-2 items-center">
-        <span className="text-sm text-gray-500">Off</span>
-        <ITSlideToggle {...args} initialState={false} />
-      </div>
-      <div className="flex flex-col gap-2 items-center">
-        <span className="text-sm text-gray-500">On</span>
-        <ITSlideToggle {...args} initialState={true} />
-      </div>
-    </div>
-  ),
-  args: {
-    disabled: true,
-  },
-};
-
-export const Colors: Story = {
-  render: (args) => (
-    <div className="flex flex-col gap-4">
-      {(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'purple'] as const).map((col) => (
-        <div key={col} className="flex items-center gap-4">
-          <span className="w-24 text-sm text-gray-500 font-bold capitalize">{col}</span>
-          <ITSlideToggle {...args} activeColor={col} initialState={true} />
-        </div>
-      ))}
-    </div>
-  ),
-};

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

@@ -1,49 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './slider.stories';
-
-<Meta of={StoriesData} />
-
-# ITSlider
-
-Range slider with configurable min, max, and step values. Displays the current value.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `number` | — | Current slider value |
-| `defaultValue` | `number` | — | Default uncontrolled value |
-| `min` | `number` | `0` | Minimum value |
-| `max` | `number` | `100` | Maximum value |
-| `step` | `number` | `1` | Step increment |
-| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Slider orientation |
-| `showValue` | `boolean` | `true` | Show current value label |
-| `ticks` | `boolean` | `false` | Show tick marks |
-| `tickLabels` | `string[]` | — | Custom labels for tick marks |
-| `color` | `string` | `'primary'` | Semantic color theme |
-| `disabled` | `boolean` | `false` | Disables the slider |
-
-## Usage
-
-```tsx
-import { ITSlider } from '@axzydev/axzy_ui_system';
-
-<ITSlider />
-<ITSlider min={0} max={100} step={10} defaultValue={50} />
-<ITSlider orientation="vertical" showValue ticks color="success" />
-<ITSlider tickLabels={['Low', 'Mid', 'High']} step={50} max={100} />
-```
-
-## Notes
-
-- Current value displayed by default; set `showValue={false}` to hide
-- `ticks` renders tick marks at each step interval
-- `tickLabels` provides custom string labels for tick positions
-- Orientation supports horizontal and vertical layouts
-- All semantic color themes supported
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

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

@@ -1,29 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITSlider from "@/components/atoms/slider/slider";
-import { useState } from "react";
-
-const meta: Meta<typeof ITSlider> = {
-  title: "Components/Inputs/ITSlider",
-  component: ITSlider,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITSlider>;
-
-export const Default: Story = {
-  render: () => {
-    const [val, setVal] = useState(50);
-    return <ITSlider value={val} onChange={setVal} min={0} max={100} label="Volume" />;
-  },
-};
-
-export const WithRange: Story = {
-  render: () => {
-    const [val, setVal] = useState(3);
-    return <ITSlider value={val} onChange={setVal} min={1} max={10} step={1} label="Items per page" />;
-  },
-};
-
-export const Disabled: Story = {
-  render: () => <ITSlider value={40} onChange={() => {}} disabled label="Disabled" />,
-};

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

@@ -1,126 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './stack.stories';
-
-<Meta of={StoriesData} />
-
-# ITStack
-
-ITStack is a simplified flexbox layout primitive for consistent spacing and alignment. It controls direction, gap, cross-axis alignment, main-axis justification, and flex wrapping in a single component, with optional dividers between children.
-
-ITStack powers most internal layouts across the AXZY UI System — from button toolbars and form rows to card lists and centered hero sections.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | — | Stack children elements. |
-| `direction` | `"column" \| "row" \| "row-reverse" \| "column-reverse"` | `"column"` | Flex direction. |
-| `spacing` | `number` (0–12) | `0` | Gap between children in `0.25rem` units. `spacing={4}` = `1rem` gap. |
-| `alignItems` | `"start" \| "end" \| "center" \| "stretch" \| "baseline"` | — | Cross-axis alignment: vertical in row, horizontal in column. |
-| `justifyContent` | `"start" \| "end" \| "center" \| "between" \| "around" \| "evenly"` | — | Main-axis distribution of children. |
-| `flexWrap` | `"nowrap" \| "wrap" \| "wrap-reverse"` | — | Whether children wrap to the next line. |
-| `divider` | `ReactNode` | — | Optional element rendered between each pair of children via `cloneElement`. |
-| `className` | `string` | — | Additional CSS classes on the container. |
-| `style` | `CSSProperties` | — | Inline styles on the container. |
-| `as` | `ElementType` | `"div"` | HTML element to render as — `"section"`, `"nav"`, `"ul"`, `"form"`, etc. |
-
-## Usage
-
-```tsx
-import { ITStack } from '@axzydev/axzy_ui_system';
-
-// ── Vertical (default) ──
-<ITStack spacing={4}>
-  <h2>Section Title</h2>
-  <p>Section content goes here.</p>
-</ITStack>
-
-// ── Horizontal toolbar ──
-<ITStack direction="row" spacing={2} alignItems="center" justifyContent="between">
-  <ITButton>Cancel</ITButton>
-  <ITButton color="primary">Save</ITButton>
-</ITStack>
-
-// ── Form row with wrap ──
-<ITStack direction="row" spacing={3} flexWrap="wrap">
-  <ITInput name="first" label="First Name" />
-  <ITInput name="last" label="Last Name" />
-  <ITInput name="email" label="Email" />
-</ITStack>
-
-// ── Card list with dividers ──
-<ITStack spacing={0} divider={<hr />}>
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-</ITStack>
-
-// ── Tag cloud ──
-<ITStack direction="row" spacing={1} flexWrap="wrap">
-  {tags.map((t) => <ITBadget key={t} label={t} />)}
-</ITStack>
-
-// ── Centered hero ──
-<ITStack spacing={4} alignItems="center" justifyContent="center" className="h-64">
-  <h1>Hero Title</h1>
-  <p>Subtitle text</p>
-  <ITButton label="CTA" />
-</ITStack>
-
-// ── Semantic list (as="ul") ──
-<ITStack as="ul" spacing={2}>
-  <li>First item</li>
-  <li>Second item</li>
-</ITStack>
-```
-
-## Variants & Patterns
-
-### Direction
-- **column** — default; stacks children vertically.
-- **row** — stacks children horizontally (toolbars, button groups).
-- **row-reverse** / **column-reverse** — reverse the visual order.
-
-### Spacing
-- Measured in 0.25rem units (Tailwind spacing scale).
-- `spacing={0}` = no gap (compact).
-- `spacing={4}` = 1rem (comfortable).
-- `spacing={8}` = 2rem (breathing room).
-
-### Justify Content (main axis)
-- **start** — children packed at the start.
-- **center** — children centered.
-- **end** — children packed at the end.
-- **between** — first/last at edges, others spaced evenly.
-- **around** — equal space around each child.
-- **evenly** — equal space between all items and edges.
-
-### Align Items (cross axis)
-- **start** — align to the start of the cross axis.
-- **center** — center on the cross axis.
-- **end** — align to the end.
-- **stretch** — stretch to fill (default CSS flex behavior).
-- **baseline** — align text baselines.
-
-### Wrap
-- **nowrap** — default; overflow if needed.
-- **wrap** — children wrap to the next line when out of space (great for tags, chips).
-- **wrap-reverse** — wrap in reverse order.
-
-### Divider
-- Takes a single React element, cloned between each pair of children.
-- Common dividers: `<hr />`, `<div className="h-px bg-slate-200" />`, vertical bars for row direction.
-
-## Notes
-
-- ITStack is **always** `display: flex` — use `direction` to switch between vertical/horizontal.
-- For complex multi-axis layouts (direction + wrap + alignment simultaneously), prefer **ITFlex**.
-- For CSS Grid layouts (columns), use **ITGrid**.
-- Spacing is applied via the CSS `gap` property, cleanly separating layout from children.
-- Set `as="ul"` and wrap children in `<li>` for semantic list rendering.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />