@axzydev/axzy_ui_system 1.4.8 → 1.5.1

package/src/components/isolation/isolation.stories.tsx

@@ -1,202 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import ITCard from "@/components/molecules/card/card";
-import ITDatePicker from "@/components/molecules/date-picker/datePicker";
-import ITInput from "@/components/atoms/input/input";
-import ITTextarea from "@/components/atoms/textarea/textarea";
-import ITSelect from "@/components/molecules/select/select";
-import ITButton from "@/components/atoms/button/button";
-import ITTable from "@/components/molecules/table/table";
-import ITDialog from "@/components/organisms/dialog/dialog";
-import ITText from "@/components/atoms/text/text";
-
-/**
- * Stories de validación de AISLAMIENTO CSS.
- *
- * Verifican que anidar componentes (p.ej. ITDatePicker dentro de ITCard) no
- * produzca interferencia de estilos entre padre e hijo. La arquitectura
- * garantiza esto porque cada componente estila SOLO su propio subárbol con
- * clases/utilities propias, nunca con selectores de ancestro genéricos.
- */
-const meta = {
-  title: "Isolation/CSS Encapsulation",
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component:
-          "Validación de aislamiento: un componente hijo (ITDatePicker) dentro de un contenedor (ITCard) no debe heredar ni colisionar estilos del padre, y viceversa.",
-      },
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-const DatePickerWrapper = () => {
-  const [date, setDate] = useState<Date>(new Date());
-  return (
-    <ITDatePicker
-      name="inside-card-date"
-      label="Fecha"
-      value={date}
-      onChange={(e: any) => setDate(e.target.value)}
-    />
-  );
-};
-
-const InputWrapper = () => {
-  const [value, setValue] = useState("");
-  return (
-    <ITInput
-      name="name"
-      label="Nombre"
-      placeholder="Escribe tu nombre"
-      value={value}
-      onChange={(e: any) => setValue(e.target.value)}
-    />
-  );
-};
-
-const TextareaWrapper = () => {
-  const [value, setValue] = useState("");
-  return (
-    <ITTextarea
-      name="notes"
-      label="Notas"
-      placeholder="Detalles..."
-      value={value}
-      onChange={(e: any) => setValue(e.target.value)}
-    />
-  );
-};
-
-const SelectWrapper = () => {
-  const [value, setValue] = useState("");
-  return (
-    <ITSelect
-      name="country"
-      label="País"
-      placeholder="Selecciona"
-      value={value}
-      options={[
-        { value: "mx", label: "México" },
-        { value: "us", label: "Estados Unidos" },
-        { value: "es", label: "España" },
-      ]}
-      onChange={(e: any) => setValue(e.target.value)}
-    />
-  );
-};
-
-export const ITDatePickerInsideCard: Story = {
-  render: () => (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-      <ITCard title="Card A">
-        <p className="mb-4 text-secondary-600">
-          Un ITDatePicker dentro de un ITCard. Sus estilos son independientes:
-          el popover del calendario, el input y el label no se ven afectados por
-          la tipografía/color del card.
-        </p>
-        <DatePickerWrapper />
-      </ITCard>
-      <ITCard title="Card B" onClick={() => {}}>
-        <p className="mb-4 text-secondary-600">
-          Card interactivo (hover). El date picker hermano debe seguir
-          comportándose igual, sin contaminación visual entre ambos cards.
-        </p>
-        <DatePickerWrapper />
-      </ITCard>
-    </div>
-  ),
-};
-
-export const FormControlsInsideCard: Story = {
-  render: () => (
-    <ITCard title="Formulario en Card">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <InputWrapper />
-        <SelectWrapper />
-        <DatePickerWrapper />
-        <TextareaWrapper />
-      </div>
-      <div className="mt-4 flex justify-end gap-2">
-        <ITButton variant="outlined" color="secondary" label="Cancelar" />
-        <ITButton variant="filled" color="primary" label="Guardar" />
-      </div>
-    </ITCard>
-  ),
-};
-
-export const ITDialogInsideCard: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-    return (
-      <ITCard title="Card con Diálogo">
-        <p className="mb-4 text-secondary-600">
-          Un ITDialog (fixed overlay) lanzado desde un ITCard. El overlay y su
-          contenido usan su propio stacking context y estilos.
-        </p>
-        <ITButton
-          variant="filled"
-          color="primary"
-          label="Abrir diálogo"
-          onClick={() => setOpen(true)}
-        />
-        <ITDialog
-          isOpen={open}
-          onClose={() => setOpen(false)}
-          title="Diálogo desde Card"
-        >
-          <p className="text-secondary-700">
-            Contenido del diálogo. Estilos propios, sin interferencia del card.
-          </p>
-          <div className="mt-4 flex justify-end">
-            <ITButton
-              variant="outlined"
-              color="secondary"
-              label="Cerrar"
-              onClick={() => setOpen(false)}
-            />
-          </div>
-        </ITDialog>
-      </ITCard>
-    );
-  },
-};
-
-export const ITTableInsideCard: Story = {
-  render: () => (
-    <ITCard title="Tabla en Card">
-      <ITTable
-        data={[
-          { id: 1, name: "Juan Pérez", city: "CDMX" },
-          { id: 2, name: "Ana García", city: "Guadalajara" },
-          { id: 3, name: "Luis Martínez", city: "Monterrey" },
-        ]}
-        columns={[
-          { key: "id", label: "ID", type: "number" },
-          { key: "name", label: "Nombre", type: "string" },
-          { key: "city", label: "Ciudad", type: "string" },
-        ]}
-      />
-      <ITText as="p" className="mt-3 text-sm text-secondary-500">
-        La tabla ocupa todo el ancho del card y conserva su propio estilo.
-      </ITText>
-    </ITCard>
-  ),
-};
-
-export const NestedCards: Story = {
-  render: () => (
-    <ITCard title="Card externo">
-      <p className="mb-4 text-secondary-600">
-        Cards anidados: el interno (interactivo) no altera el externo.
-      </p>
-      <ITCard title="Card interno" onClick={() => {}}>
-        <DatePickerWrapper />
-      </ITCard>
-    </ITCard>
-  ),
-};

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

@@ -1,47 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './accordion.stories';
-
-<Meta of={StoriesData} />
-
-# ITAccordion
-
-Collapsible sections for FAQs, settings panels, and long content.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `items` | `ITAccordionItem[]` | — | Sections to render: `{ id, title, content, icon?, disabled? }`. |
-| `allowMultiple` | `boolean` | `false` | Allows several sections open at once. |
-| `defaultOpenIds` | `string[]` | `[]` | Open ids on first render (uncontrolled). |
-| `openIds` | `string[]` | — | Controlled open ids. |
-| `onChange` | `(openIds: string[]) => void` | — | Fired with the next open ids. |
-| `variant` | `"default" \| "separated" \| "bordered"` | `"separated"` | Visual style. |
-| `className` | `string` | — | Extra CSS classes for the wrapper. |
-| `itemClassName` | `string` | — | Extra CSS classes per item. |
-
-## Usage
-
-```tsx
-import { ITAccordion } from '@axzydev/axzy_ui_system';
-
-<ITAccordion
-  items={[
-    { id: "a", title: "¿Qué es AXZY?", content: "Un sistema de componentes." },
-    { id: "b", title: "¿Cómo instalo?", content: "pnpm add @axzydev/axzy_ui_system" },
-  ]}
-  defaultOpenIds={["a"]}
-/>
-```
-
-## Notes
-
-- Controlled via `openIds` + `onChange`; uncontrolled via `defaultOpenIds`.
-- Single-open by default; pass `allowMultiple` to open several.
-- Header buttons expose `aria-expanded` / `aria-controls`; the body is a labelled `region`.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

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

@@ -1,68 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITAccordion from "@/components/molecules/accordion/accordion";
-import ITBadget from "@/components/atoms/badget/badget";
-
-const meta: Meta<typeof ITAccordion> = {
-  title: "Components/Structure/ITAccordion",
-  component: ITAccordion,
-  parameters: { layout: "centered" },
-};
-
-export default meta;
-type Story = StoryObj<typeof ITAccordion>;
-
-const items = [
-  {
-    id: "what",
-    title: "¿Qué es AXZY UI System?",
-    content: "Una librería de componentes React + TypeScript con Tailwind CSS v4.",
-  },
-  {
-    id: "install",
-    title: "¿Cómo lo instalo?",
-    content: "pnpm add @axzydev/axzy_ui_system",
-  },
-  {
-    id: "theme",
-    title: "¿Puedo personalizar el tema?",
-    content: "Sí, usa ITThemeProvider para definir la paleta y tokens.",
-  },
-];
-
-export const Default: Story = {
-  render: () => (
-    <div className="w-[520px]">
-      <ITAccordion items={items} defaultOpenIds={["what"]} />
-    </div>
-  ),
-};
-
-export const AllowMultiple: Story = {
-  render: () => (
-    <div className="w-[520px]">
-      <ITAccordion items={items} allowMultiple defaultOpenIds={["what", "install"]} />
-    </div>
-  ),
-};
-
-export const Bordered: Story = {
-  render: () => (
-    <div className="w-[520px]">
-      <ITAccordion items={items} variant="bordered" defaultOpenIds={["install"]} />
-    </div>
-  ),
-};
-
-export const WithIconAndBadge: Story = {
-  render: () => (
-    <div className="w-[520px]">
-      <ITAccordion
-        items={[
-          { id: "1", title: "Novedades", icon: <span>✨</span>, content: "3 componentes nuevos." },
-          { id: "2", title: "Pendientes", content: <ITBadget label="2" color="warning" size="sm" /> },
-        ]}
-        defaultOpenIds={["1"]}
-      />
-    </div>
-  ),
-};

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

@@ -1,48 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './alert.stories';
-
-<Meta of={StoriesData} />
-
-# ITAlert
-
-Dismissible alert banners that provide contextual feedback messages to users. Supports four semantic variants — info, success, warning, and error — each with a distinct icon and color scheme. Alerts can optionally include a bold title, a custom icon override, and a dismiss button for user-dismissible notifications.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `"info" \| "success" \| "warning" \| "error"` | `"info"` | Visual style with corresponding icon and color scheme. |
-| `title` | `string` | — | Bold heading text displayed above the message. |
-| `children` | `ReactNode` | — | Alert message content. |
-| `dismissible` | `boolean` | `false` | Whether the alert can be dismissed by the user. |
-| `onDismiss` | `() => void` | — | Callback fired when the dismiss button is clicked. |
-| `icon` | `ReactNode` | — | Custom icon element that overrides the default variant icon. |
-| `className` | `string` | — | Additional CSS class names for the alert container. |
-
-## Usage
-
-```tsx
-import { ITAlert } from '@axzydev/axzy_ui_system';
-
-<ITAlert variant="success" title="Guardado" dismissible onDismiss={() => {}}>
-  Los cambios se guardaron correctamente.
-</ITAlert>
-
-<ITAlert variant="error">Ocurrió un error inesperado.</ITAlert>
-```
-
-## Variants / Notes
-
-- **info** — Neutral blue style for general informational messages.
-- **success** — Green style for positive confirmation and completion messages.
-- **warning** — Amber/yellow style for cautionary messages.
-- **error** — Red style for critical errors and failures.
-- All variants render with `role="alert"` for accessibility.
-- Supports dark mode with appropriate color adjustments.
-- The dismiss button only renders when both `dismissible` and `onDismiss` are set.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

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

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import ITAlert from "@/components/molecules/alert/alert";
-
-const meta: Meta<typeof ITAlert> = {
-  title: "Components/Feedback/ITAlert",
-  component: ITAlert,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITAlert>;
-
-export const Info: Story = {
-  args: { variant: "info", title: "Información", children: "Esto es un mensaje informativo." },
-};
-
-export const Success: Story = {
-  args: { variant: "success", title: "Operación exitosa", children: "Los cambios se guardaron correctamente." },
-};
-
-export const Warning: Story = {
-  args: { variant: "warning", title: "Advertencia", children: "Esta acción no se puede deshacer." },
-};
-
-export const Error: Story = {
-  args: { variant: "error", title: "Error", children: "Ocurrió un error inesperado." },
-};
-
-export const Dismissible: Story = {
-  render: () => {
-    const [visible, setVisible] = useState(true);
-    return visible ? (
-      <ITAlert variant="info" title="Cerrar" dismissible onDismiss={() => setVisible(false)}>
-        Puedes cerrar esta alerta.
-      </ITAlert>
-    ) : (
-      <p className="text-xs text-slate-400">Alerta cerrada.</p>
-    );
-  },
-};

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

@@ -1,57 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './breadcrumbs.stories';
-
-<Meta of={StoriesData} />
-
-# ITBreadcrumbs
-
-Navigation breadcrumb trail component that displays the user's current location within a site hierarchy. Each item can be a link (`href`) or a button (`onClick`), with the last item automatically rendered as plain inactive text. Supports a custom separator between segments.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `items` | `ITBreadcrumbItem[]` | required | Ordered array of breadcrumb segments. The last item is rendered as plain text. |
-| `separator` | `ReactNode` | `<FaChevronRight size={10} />` | Custom separator element rendered between items. |
-| `className` | `string` | — | Additional CSS class names for the `<nav>` container. |
-
-### ITBreadcrumbItem
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | `string` | required | Display text for the breadcrumb segment. |
-| `href` | `string` | — | URL for the breadcrumb link. Renders an `<a>` tag. |
-| `onClick` | `() => void` | — | Click handler. Renders a `<button>` when no `href` is set. |
-
-## Usage
-
-```tsx
-import { ITBreadcrumbs } from '@axzydev/axzy_ui_system';
-
-<ITBreadcrumbs
-  items={[
-    { label: "Inicio", href: "#" },
-    { label: "Usuarios", href: "#" },
-    { label: "Editar Perfil" },
-  ]}
-/>
-
-<ITBreadcrumbs
-  items={[...]}
-  separator={<FaArrowRight size={10} />}
-/>
-```
-
-## Variants / Notes
-
-- The last item in the `items` array is always rendered as plain, non-interactive text representing the current page.
-- Items with an `href` render as anchor tags (`<a>`), while items with only `onClick` render as buttons (`<button>`).
-- Default separator is a chevron-right icon from FontAwesome (`FaChevronRight`).
-- Wrapped in a semantic `<nav>` element for accessibility.
-- The component is purely presentational — routing/navigation logic is handled by `href` or `onClick` props.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

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

@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITBreadcrumbs from "@/components/molecules/breadcrumbs/breadcrumbs";
-
-const meta: Meta<typeof ITBreadcrumbs> = {
-  title: "Components/Navigation/ITBreadcrumbs",
-  component: ITBreadcrumbs,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITBreadcrumbs>;
-
-export const Default: Story = {
-  args: {
-    items: [
-      { label: "Inicio", href: "#" },
-      { label: "Usuarios", href: "#" },
-      { label: "Editar Perfil" },
-    ],
-  },
-};

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

@@ -1,76 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './calendar.stories';
-
-<Meta of={StoriesData} />
-
-# ITCalendar
-
-A full-featured calendar and date picker component with week, day, and month views. Supports event display with colored indicators, date selection (single and range modes), drag-to-select time ranges, and min/max date boundaries with month/year navigation.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `events` | `CalendarEvent[]` | `[]` | Array of calendar events to display in the scheduler view. |
-| `mode` | `"week" \| "day" \| "month"` | auto | Display mode. Auto-detected as `"month"` when `onChange` is provided. |
-| `onEventClick` | `(event: CalendarEvent) => void` | — | Callback fired when an event is clicked. |
-| `onSlotClick` | `(date: Date) => void` | — | Callback fired when an empty time slot is clicked. |
-| `onSlotHover` | `(date: Date) => void` | — | Callback fired when the mouse enters a time slot. |
-| `onSelectRange` | `(start: Date, end: Date) => void` | — | Callback fired when a time range is selected via drag. |
-| `value` | `Date` | — | Currently selected date (picker mode). |
-| `onChange` | `(date: Date) => void` | — | Callback fired when a date is selected in picker mode. |
-| `selectionMode` | `"single" \| "range"` | `"single"` | Selection mode for the date picker. |
-| `startDate` | `Date` | — | Start date for range selection. |
-| `endDate` | `Date` | — | End date for range selection. |
-| `minDate` | `Date` | — | Minimum selectable date (dates before are disabled). |
-| `maxDate` | `Date` | — | Maximum selectable date (dates after are disabled). |
-| `className` | `string` | — | Additional CSS class names for the calendar container. |
-| `disabled` | `boolean` | `false` | Whether the calendar is in a disabled state. |
-| `variant` | `ColorsTypes` | `"primary"` | Accent color theme for selection highlights. |
-
-### CalendarEvent
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `id` | `string` | required | Unique identifier for the event. |
-| `title` | `string` | required | Event display title. |
-| `start` | `Date \| string` | required | Event start date/time. |
-| `end` | `Date \| string` | required | Event end date/time. |
-| `color` | `string` | — | Event indicator color (hex or CSS value). |
-| `data` | `any` | — | Arbitrary extra data passed through to event callbacks. |
-
-## Usage
-
-```tsx
-import { ITCalendar } from '@axzydev/axzy_ui_system';
-
-<ITCalendar mode="month" onChange={(date) => console.log(date)} variant="primary" />
-
-<ITCalendar
-  mode="week"
-  events={[
-    { id: "1", title: "Reunión", start: new Date(), end: new Date(), color: "#3b82f6" }
-  ]}
-  onEventClick={(evt) => console.log(evt)}
-  className="h-[600px]"
-/>
-```
-
-## Variants / Notes
-
-- **month** — Traditional month grid with date picker, single and range selection modes.
-- **week** — 7-column time grid from 6 AM to 10 PM with event overlays and drag-to-select range.
-- **day** — Single-column time grid for focused daily scheduling.
-- **years** — Click the year in the header to switch to a year selection view (12-year grid).
-- **months** — Click the month name in the header (or pick a year) to switch to a month selection view (12-month grid, same style as the year grid). Flow: header → year → month → days.
-- Uses `date-fns` with Spanish locale (`es`) for month and weekday names.
-- Month view supports `minDate`/`maxDate` boundaries — out-of-range dates are disabled and dimmed.
-- Events render as colored bars in week/day views with customizable `color` prop.
-- Week/day views show the current time as a red indicator line when viewing today.
-- Drag-to-select time ranges is enabled when `onSelectRange` is provided.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

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: [],
-  }
-};