@axzydev/axzy_ui_system 1.4.7 → 1.5.0

package/src/components/molecules/calendar/calendar.stories.tsx

@@ -1,90 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ITCalendar from '@/components/molecules/calendar/calendar';
-import { addHours, format, startOfDay, addDays } from 'date-fns';
-
-const meta = {
-  title: 'Components/Data Display/ITCalendar',
-  component: ITCalendar,
-  parameters: {
-    layout: 'padded',
-  },
-  argTypes: {
-    mode: {
-        control: 'select',
-        options: ['month', 'week', 'day'],
-        description: 'View mode of the calendar'
-    },
-    value: { control: 'date' },
-    onEventClick: { action: 'event clicked' },
-    onSlotClick: { action: 'slot clicked' },
-    onSelectRange: { action: 'range selected' },
-  },
-} satisfies Meta<typeof ITCalendar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const today = new Date();
-const tomorrow = addDays(today, 1);
-
-const sampleEvents = [
-    {
-        id: '1',
-        title: 'Team Meeting',
-        start: addHours(startOfDay(today), 9), // Today 9:00 AM
-        end: addHours(startOfDay(today), 10.5), // Today 10:30 AM
-        color: '#3b82f6', // Primary
-    },
-    {
-        id: '2',
-        title: 'Lunch Break',
-        start: addHours(startOfDay(today), 13),
-        end: addHours(startOfDay(today), 14),
-        color: '#f97316', // Warning
-    },
-    {
-        id: '3',
-        title: 'Project Review',
-        start: addHours(startOfDay(tomorrow), 11),
-        end: addHours(startOfDay(tomorrow), 12.5),
-        color: '#8b5cf6', // Purple
-    }
-];
-
-export const WeekView: Story = {
-  args: {
-    mode: 'week',
-    events: sampleEvents,
-    className: 'h-[600px]',
-  },
-};
-
-export const DayView: Story = {
-  args: {
-    mode: 'day',
-    events: sampleEvents,
-    className: 'h-[600px]',
-  },
-};
-
-export const MonthView: Story = {
-  args: {
-    mode: 'month',
-    value: today,
-    onChange: (date) => console.log('Date selected:', date),
-    className: 'h-[400px] max-w-md',
-  },
-};
-
-export const WithInteractiveSelection: Story = {
-  render: (args) => {
-      // Mock interactivity could be complex in storybook args, 
-      // but the component handles internal drag state for valid callbacks.
-      return <ITCalendar {...args} onSelectRange={(start, end) => alert(`Selected: ${format(start, 'HH:mm')} - ${format(end, 'HH:mm')}`)} />;
-  },
-  args: {
-      mode: 'week',
-      className: 'h-[600px]',
-      events: [],
-  }
-};

package/src/components/molecules/card/card.doc.mdx

@@ -1,54 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './card.stories';
-
-<Meta of={StoriesData} />
-
-# ITCard
-
-A versatile container component for grouping related content and actions. Supports an optional header image, title, body content, and a footer action area. Cards become interactive with hover shadow animation when an `onClick` handler is provided.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `onClick` | `() => void` | — | Click handler. When provided, the card becomes interactive with hover shadow effect. |
-| `title` | `string` | — | Card title displayed in the header area. |
-| `image` | `string` | — | Image source URL displayed at the top of the card. |
-| `alt` | `string` | `"Card Image"` | Alt text for the card image. |
-| `children` | `ReactNode` | — | Card body content, rendered below the title. |
-| `actions` | `ReactNode` | — | Action elements rendered in a footer section separated by a border. |
-| `className` | `string` | — | Additional CSS class names for the card container. |
-| `imageClassName` | `string` | — | Additional CSS class names for the image element. |
-| `titleClassName` | `string` | — | Additional CSS class names for the title element. |
-| `contentClassName` | `string` | — | Additional CSS class names for the content wrapper. |
-| `actionClassName` | `string` | — | Additional CSS class names for the actions footer. |
-
-## Usage
-
-```tsx
-import { ITCard } from '@axzydev/axzy_ui_system';
-
-<ITCard title="Bienvenido" image="/hero.jpg" actions={<ITButton label="Ver más" />}>
-  Contenido de la tarjeta.
-</ITCard>
-
-<ITCard onClick={() => navigate("/details")} className="max-w-sm">
-  Tarjeta interactiva con sombra al hover.
-</ITCard>
-```
-
-## Variants / Notes
-
-- **Default** — Clean container with theme-driven background, border, and border-radius via CSS custom properties.
-- **Interactive** — When `onClick` is provided, the card gains a subtle base shadow, a stronger shadow on hover, a pointer cursor, and smooth transition animation.
-- **With image** — The `image` prop renders a full-width image at the top with `object-cover` and a fixed height.
-- **With actions** — The `actions` prop renders a footer section with a top border, perfect for button groups.
-- Styling is driven by CSS custom properties (`--card-bg`, `--card-border`, `--card-radius`) for easy theming.
-- All style class names are customizable via the dedicated `*ClassName` props.
-- Card contents are wrapped with `ITText` for consistent typography.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/molecules/card/card.stories.tsx

@@ -1,57 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ITCard from '@/components/molecules/card/card';
-import ITButton from '@/components/atoms/button/button';
-
-const meta = {
-  title: 'Components/Layout & Navigation/ITCard',
-  component: ITCard,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    onClick: { action: 'clicked' },
-  },
-} satisfies Meta<typeof ITCard>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    title: 'Card Title',
-    children: 'This is the body of the card. It has padding defined by the theme.',
-    onClick: undefined,
-  },
-};
-
-export const WithImage: Story = {
-  args: {
-    title: 'Card with Image',
-    image: 'https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80',
-    children: 'A nice gradient image above.',
-    onClick: undefined,
-  },
-};
-
-export const WithActions: Story = {
-  args: {
-    title: 'Card with Actions',
-    children: 'This card has a button action at the bottom.',
-    actions: (
-      <div className="flex justify-end gap-2">
-         <ITButton variant="text" color="secondary" label="Cancel" />
-         <ITButton variant="filled" color="primary" label="Save" />
-      </div>
-    ),
-    onClick: undefined,
-  },
-};
-
-export const Clickable: Story = {
-  args: {
-    title: 'Clickable Card',
-    children: 'Hover over me! I should have a stronger shadow and a pointer cursor.',
-    onClick: () => alert('Card clicked!'),
-    image: 'https://images.unsplash.com/photo-1557683316-973673baf926?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80',
-  },
-};

package/src/components/molecules/chip-input/chip-input.doc.mdx

@@ -1,44 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './chip-input.stories';
-
-<Meta of={StoriesData} />
-
-# ITChipInput
-
-Free-text input that turns entered values into removable tags (chips).
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `string[]` | — | Current tags (controlled). |
-| `onChange` | `(values: string[]) => void` | — | Fired with the next list of tags. |
-| `label` | `string` | — | Label above the control. |
-| `placeholder` | `string` | `"Escribe y presiona Enter"` | Input placeholder. |
-| `delimiters` | `string[]` | `["Enter", ","]` | Keys that commit a tag. |
-| `maxTags` | `number` | — | Maximum number of tags. |
-| `allowDuplicates` | `boolean` | `false` | Allows repeated tags. |
-| `validate` | `(value) => string \| undefined` | — | Rejects a tag with a message. |
-| `color` | semantic color key | `"primary"` | Color of the tag chips. |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Control size. |
-| `disabled` / `required` / `touched` / `error` / `helpText` | — | — | Standard form states. |
-
-## Usage
-
-```tsx
-import { ITChipInput } from '@axzydev/axzy_ui_system';
-
-<ITChipInput label="Etiquetas" value={tags} onChange={setTags} />
-```
-
-## Notes
-
-- Commits tags on `Enter`, `,`, blur, or when pasting delimited text.
-- `Backspace` on an empty input removes the last tag.
-- Local errors (duplicate, max reached, `validate`) are shown inline.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/molecules/chip-input/chip-input.stories.tsx

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import ITChipInput from "@/components/molecules/chip-input/chip-input";
-
-const meta: Meta<typeof ITChipInput> = {
-  title: "Components/Form Elements/ITChipInput",
-  component: ITChipInput,
-  parameters: { layout: "centered" },
-};
-
-export default meta;
-type Story = StoryObj<typeof ITChipInput>;
-
-const Wrapper = (args: any) => {
-  const [value, setValue] = useState<string[]>(args.value ?? []);
-  return (
-    <div className="w-[420px]">
-      <ITChipInput {...args} value={value} onChange={setValue} />
-    </div>
-  );
-};
-
-export const Default: Story = {
-  render: (args) => <Wrapper {...args} />,
-  args: { name: "tags", label: "Etiquetas", value: [] },
-};
-
-export const WithValues: Story = {
-  render: (args) => <Wrapper {...args} />,
-  args: { name: "tags", label: "Etiquetas", value: ["react", "typescript", "tailwind"] },
-};
-
-export const MaxTags: Story = {
-  render: (args) => <Wrapper {...args} />,
-  args: { name: "tags", label: "Máximo 3", value: ["uno", "dos"], maxTags: 3, helpText: "Máximo 3 etiquetas." },
-};
-
-export const WithValidation: Story = {
-  render: (args) => <Wrapper {...args} />,
-  args: {
-    name: "emails",
-    label: "Correos",
-    value: [],
-    placeholder: "correo@dominio.com",
-    validate: (v: string) => (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) ? undefined : "Correo inválido"),
-  },
-};
-
-export const WithError: Story = {
-  render: (args) => <Wrapper {...args} />,
-  args: { name: "tags", label: "Etiquetas", value: [], required: true, touched: true, error: true },
-};

package/src/components/molecules/date-picker/date-picker.doc.mdx

@@ -1,65 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './date-picker.stories';
-
-<Meta of={StoriesData} />
-
-# ITDatePicker
-
-A date picker supporting single date and date range selection. Includes built-in validation error display, min/max date constraints, and placeholder formatting.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `name` | `string` | — | Unique name attribute for the input. |
-| `value` | `Date \| [Date \| null, Date \| null]` | — | Selected date or start–end tuple when `range` is true. |
-| `onChange` | `(event) => void` | — | Callback with `{ target: { name, value } }` on date selection. |
-| `onBlur` | `(event) => void` | — | Callback when the input loses focus. |
-| `range` | `boolean` | `false` | Enable date-range selection mode. |
-| `variant` | `ColorsTypes` | `"primary"` | Color variant from design system. |
-| `size` | `SizesTypes` | `"md"` | Size preset: `"sm"`, `"md"`, `"lg"`. |
-| `className` | `string` | — | CSS classes for the wrapper. |
-| `calendarClassName` | `string` | — | CSS classes for the calendar popover. |
-| `disabled` | `boolean` | `false` | Disables the date picker. |
-| `placeholder` | `string` | — | Placeholder text when no date is selected. |
-| `label` | `string` | — | Accessible label rendered above the input. |
-| `required` | `boolean` | — | Marks the field as required. |
-| `touched` | `boolean` | — | Visually indicates the field has been interacted with. |
-| `error` | `string \| boolean` | — | Error message string or `true` for default error styling. |
-| `minDate` | `Date` | — | Earliest selectable date. |
-| `maxDate` | `Date` | — | Latest selectable date. |
-
-## Usage
-
-```tsx
-import { ITDatePicker } from '@axzydev/axzy_ui_system';
-
-<ITDatePicker
-  name="birthdate"
-  label="Birth Date"
-  placeholder="DD/MM/YYYY"
-  value={date}
-  onChange={(e) => setDate(e.target.value)}
-/>
-
-<ITDatePicker
-  range
-  name="audit_range"
-  label="Audit Range"
-  value={range}
-  onChange={(e) => setRange(e.target.value)}
-/>
-```
-
-## Notes
-
-- When `range` is true, `value` must be a tuple `[startDate, endDate]` and the onChange target value will be the same shape.
-- The component emits a synthetic event with `target.name` and `target.value`, compatible with Formik integration.
-- Error state is shown when both `error` and `touched` are truthy.
-- Date format follows the locale configuration; placeholder text like `DD/MM/YYYY` guides the user.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/molecules/date-picker/date-picker.stories.tsx

@@ -1,88 +0,0 @@
-import type { Meta } from '@storybook/react';
-import ITDatePicker from './datePicker';
-import { useState } from 'react';
-
-const meta = {
-  title: 'Components/Form Elements/ITDatePicker',
-  component: ITDatePicker,
-  parameters: {
-    layout: 'padded',
-  },
-  argTypes: {
-    value: { control: 'date' },
-    minDate: { control: 'date' },
-    maxDate: { control: 'date' },
-    onChange: { action: 'changed' },
-    onBlur: { action: 'blurred' },
-    disabled: { control: 'boolean' },
-    error: { control: 'text' },
-  },
-} satisfies Meta<typeof ITDatePicker>;
-
-export default meta;
-
-// Wrapper for controlled component state
-const DatePickerWrapper = (args: any) => {
-  const [date, setDate] = useState<Date>(args.value || new Date());
-  
-  const handleChange = (e: any) => {
-      // Handle both event types the component might emit
-      if (e.target && e.target.value) {
-          setDate(e.target.value instanceof Date ? e.target.value : new Date(e.target.value));
-      }
-      args.onChange(e);
-  };
-
-  return <ITDatePicker {...args} value={date} onChange={handleChange} />;
-};
-
-export const Default: any = {
-  render: (args) => <DatePickerWrapper {...args} />,
-  args: {
-    name: 'birthdate',
-    label: 'Select Date',
-    placeholder: 'DD/MM/YYYY',
-  } as any,
-};
-
-export const WithError: any = {
-  render: (args) => <DatePickerWrapper {...args} />,
-  args: {
-    name: 'error_date',
-    label: 'Invalid Date',
-    error: 'This field is required',
-    touched: true,
-  } as any,
-};
-
-export const Disabled: any = {
-  args: {
-    name: 'disabled_date',
-    label: 'Disabled Input',
-    value: new Date(),
-    disabled: true,
-  } as any,
-};
-
-// Wrapper for range state
-const RangePickerWrapper = (args: any) => {
-  const [range, setRange] = useState<[Date | null, Date | null]>([null, null]);
-  
-  return (
-    <ITDatePicker 
-      {...args} 
-      value={range} 
-      onChange={(e: any) => setRange(e.target.value)} 
-    />
-  );
-};
-
-export const Range: any = {
-  render: (args) => <RangePickerWrapper {...args} />,
-  args: {
-    range: true,
-    name: 'audit_range',
-    label: 'Select Date Range',
-    placeholder: 'DD/MM/YYYY - DD/MM/YYYY',
-  } as any,
-};

package/src/components/molecules/dropdown-menu/dropdown-menu.doc.mdx

@@ -1,46 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './dropdown-menu.stories';
-
-<Meta of={StoriesData} />
-
-# ITDropdownMenu
-
-Action menu with keyboard navigation and ARIA menu semantics. Rendered through a portal, so it is not clipped by cards or `overflow: hidden` ancestors.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `items` | `ITDropdownMenuItem[]` | — | Actions: `{ id, label, icon?, shortcut?, onClick?, disabled?, danger?, divider? }`. |
-| `trigger` | `ReactNode` | ellipsis icon | Custom trigger content. |
-| `triggerLabel` | `string` | `"Abrir menú"` | Accessible label for the trigger. |
-| `placement` | `"bottom-start" \| "bottom-end" \| "top-start" \| "top-end"` | `"bottom-end"` | Menu placement. |
-| `onSelect` | `(id, item) => void` | — | Fired after an item is activated. |
-| `disabled` | `boolean` | `false` | Disables the trigger. |
-| `className` | `string` | — | Extra CSS classes for the trigger. |
-| `menuClassName` | `string` | — | Extra CSS classes for the menu. |
-
-## Usage
-
-```tsx
-import { ITDropdownMenu } from '@axzydev/axzy_ui_system';
-
-<ITDropdownMenu
-  items={[
-    { id: "edit", label: "Editar", icon: <FaEdit />, onClick: edit },
-    { id: "delete", label: "Eliminar", icon: <FaTrash />, danger: true, divider: true, onClick: remove },
-  ]}
-/>
-```
-
-## Notes
-
-- Keyboard: `ArrowUp`/`ArrowDown` navigate, `Enter`/`Space` activate, `Esc` closes, `Home`/`End` jump.
-- Uses `role="menu"` / `role="menuitem"` and `aria-haspopup` / `aria-expanded` on the trigger.
-- The panel flips above the trigger automatically when there is no room below.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/molecules/dropdown-menu/dropdown-menu.stories.tsx

@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { FaEdit, FaCopy, FaTrash, FaDownload } from "react-icons/fa";
-import ITDropdownMenu from "@/components/molecules/dropdown-menu/dropdown-menu";
-import ITButton from "@/components/atoms/button/button";
-
-const meta: Meta<typeof ITDropdownMenu> = {
-  title: "Components/Navigation/ITDropdownMenu",
-  component: ITDropdownMenu,
-  parameters: { layout: "centered" },
-};
-
-export default meta;
-type Story = StoryObj<typeof ITDropdownMenu>;
-
-const items = [
-  { id: "edit", label: "Editar", icon: <FaEdit />, onClick: () => alert("Editar") },
-  { id: "copy", label: "Duplicar", icon: <FaCopy />, shortcut: "⌘D", onClick: () => alert("Duplicar") },
-  { id: "download", label: "Descargar", icon: <FaDownload />, disabled: true },
-  { id: "delete", label: "Eliminar", icon: <FaTrash />, danger: true, divider: true, onClick: () => alert("Eliminar") },
-];
-
-export const Default: Story = {
-  args: { items },
-};
-
-export const CustomTrigger: Story = {
-  args: {
-    items,
-    trigger: <span className="text-sm font-semibold px-1">Acciones</span>,
-    triggerLabel: "Acciones",
-  },
-};
-
-export const WithLabelButton: Story = {
-  render: () => (
-    <div className="flex items-center gap-4">
-      <ITButton label="Guardar" variant="filled" color="primary" size="sm" />
-      <ITDropdownMenu items={items} />
-    </div>
-  ),
-};

package/src/components/molecules/empty-state/empty-state.doc.mdx

@@ -1,50 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './empty-state.stories';
-
-<Meta of={StoriesData} />
-
-# ITEmptyState
-
-A placeholder component for displaying a message when no data is available. Configurable icon, title, description, and an action slot for contextual buttons.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `icon` | `ReactNode` | `<FaInbox size={40} />` | Icon or illustration displayed above the title. |
-| `title` | `string` | — | Primary heading text (required). |
-| `description` | `string` | — | Secondary explanatory text. |
-| `action` | `ReactNode` | — | Action element (typically a button) rendered below the description. |
-| `className` | `string` | — | Additional CSS classes for the wrapper. |
-
-## Usage
-
-```tsx
-import { ITEmptyState } from '@axzydev/axzy_ui_system';
-
-<ITEmptyState
-  title="No results"
-  description="No data found for the selected filters."
-  action={<ITButton label="Clear filters" variant="outlined" size="sm" />}
-/>
-
-<ITEmptyState
-  icon={<FaDatabase size={48} />}
-  title="No records"
-  description="Create your first record to get started."
-  action={<ITButton label="Create Record" variant="primary" />}
-/>
-```
-
-## Notes
-
-- Default icon is `FaInbox` from react-icons — override with any ReactNode for custom illustrations.
-- The `action` slot accepts any ReactNode, most commonly an `ITButton` for navigation or reset actions.
-- Centers all content vertically and horizontally within its container.
-- Works well as a fallback inside tables, cards, and search result containers.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/molecules/empty-state/empty-state.stories.tsx

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITEmptyState from "@/components/molecules/empty-state/empty-state";
-import ITButton from "@/components/atoms/button/button";
-
-const meta: Meta<typeof ITEmptyState> = {
-  title: "Components/Data Display/ITEmptyState",
-  component: ITEmptyState,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITEmptyState>;
-
-export const Default: Story = {
-  args: {
-    title: "Sin resultados",
-    description: "No se encontraron datos para los filtros seleccionados.",
-    action: <ITButton label="Limpiar filtros" variant="outlined" size="sm" />,
-  },
-};

package/src/components/molecules/field/field.doc.mdx

@@ -1,43 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './field.stories';
-
-<Meta of={StoriesData} />
-
-# ITField
-
-Form-field wrapper that standardizes label, required marker, helper text, and error message around any control.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | `string` | — | Label above the control. |
-| `htmlFor` | `string` | — | `id` the label points to. |
-| `required` | `boolean` | `false` | Shows a red asterisk. |
-| `error` | `string \| boolean` | — | Error message, or `true` for the generic message. |
-| `helpText` | `string` | — | Helper text shown when there is no error. |
-| `children` | `ReactNode` | — | The form control. |
-| `className` | `string` | — | Extra CSS classes for the wrapper. |
-| `labelClassName` | `string` | — | Extra CSS classes for the label. |
-| `contentClassName` | `string` | — | Extra CSS classes for the control container. |
-
-## Usage
-
-```tsx
-import { ITField, ITInput } from '@axzydev/axzy_ui_system';
-
-<ITField label="Email" htmlFor="email" required error={errors.email} helpText="We never share it.">
-  <ITInput name="email" value={email} onChange={onChange} />
-</ITField>
-```
-
-## Notes
-
-- Error text takes precedence over `helpText`; only one is shown at a time.
-- `error={true}` renders the generic "Este campo es requerido" message.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />