@axzydev/axzy_ui_system 1.4.7 → 1.5.0

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

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