@axzydev/axzy_ui_system 1.4.8 → 1.5.1

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

@@ -1,140 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './table.stories';
-
-<Meta of={StoriesData} />
-
-# ITTable
-
-Basic data table with column definitions, sorting, and configurable visual variants.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `columns` | `Column<T>[]` | — | Column definitions: key, label, type, sortable, filter, render, actions, plus layout fields `width` (`number` px or CSS `string`), `minWidth` (px), `align` (`"left" \| "center" \| "right"`), `truncate` (ellipsis + native `title`), and `pinned` (`"left" \| "right"`). |
-| `data` | `T[]` | `[]` | Row data array. |
-| `variant` | `"default" \| "striped" \| "bordered"` | `"default"` | Visual style variant. |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Font-size preset (does not change padding). |
-| `containerClassName` | `string` | — | CSS classes for the outermost container. |
-| `className` | `string` | — | Declared for API compatibility but **currently not applied** by ITTable. Use `containerClassName` for the outer wrapper. |
-| `itemsPerPageOptions` | `number[]` | `[5, 10, 20]` | Page-size options shown in the paginator. |
-| `defaultItemsPerPage` | `number` | `10` | Initial rows per page. |
-| `title` | `string` | — | Optional heading rendered above the table. |
-| `renderCard` | `(row: T) => ReactNode` | — | Custom card renderer for the cards view. |
-| `defaultView` | `"table" \| "cards"` | `"table"` | Initial view mode. |
-| `showVerticalBorder` | `boolean` | `true` | Show vertical borders between columns. |
-| `verticalBorderClassname` | `string` | — | Custom class for the vertical borders. |
-| `onRowClick` | `(row: T, event: MouseEvent<HTMLElement> \| KeyboardEvent<HTMLElement>) => void` | — | Row/card activation. `MouseEvent` for pointer, `KeyboardEvent` for Enter/Space. Skipped when the interaction starts inside an interactive child. |
-| `layout` | `"auto" \| "fixed"` | `"auto"` | Table layout algorithm. `"fixed"` honors column `width` values and drops the `min-w-max` / `min-w-[150px]` floors so content no longer forces horizontal scrolling. |
-| `density` | `"compact" \| "normal" \| "comfortable"` | `"normal"` | Cell padding / row-height preset. Independent of `size`, which only controls font-size. |
-| `autoCardBreakpoint` | `number` | `0` | Container width (px) below which the table automatically falls back to the cards view. `0` disables the fallback. |
-| `virtualized` | `boolean` | `false` | Renders only the visible row window with spacer rows preserving scroll height. Table view only; cards view is never virtualized. |
-| `virtualizedMaxHeight` | `number` | `400` | Max height (px) of the virtualized scroll container. Only used when `virtualized` is true. |
-| `rowHeight` | `number` | `getRowHeight(size, density)` | Assumed uniform row height (px). Size-aware: `size="md"` baseline is 33 / 45 / 53 for compact / normal / comfortable; `size` shifts it by the font-size line box (sm 16px / md 20px / lg 28px). |
-| `overscan` | `number` | `5` | Extra rows rendered above and below the viewport to avoid blank gaps. |
-| `stickyHeader` | `boolean` | `false` | Keeps header cells sticky while the virtualized body scrolls. Only effective when `virtualized` is true. |
-| `showViewToggle` | `boolean` | `true` | Renders the Table\|Cards switcher in the toolbar. Hiding it does not disable `defaultView` or `autoCardBreakpoint`. |
-| `colors` | `TableColors` | — | Per-instance color overrides (`headerBg`, `headerText`, `rowBg`, `rowText`, `rowHover`). Written as local `--color-table-*` variables, so they beat the global theme for this instance only. |
-| `design` | `TableDesign` | — | Per-region overrides. Each region (`container`, `card`, `toolbar`, `header`, `headerCell`, `row`, `cell`, `cards`, `footer`) accepts `className` and `style`. |
-| `containerStyle` | `CSSProperties` | — | Inline styles for the outermost wrapper. |
-| `cardClassName` / `cardStyle` | `string` / `CSSProperties` | — | The rounded card surface that wraps toolbar, table and footer. |
-| `toolbarClassName` / `toolbarStyle` | `string` / `CSSProperties` | — | The toolbar strip holding the title and/or the view toggle. |
-| `headerClassName` / `headerStyle` | `string` / `CSSProperties` | — | The `<thead>` row. |
-| `headerCellClassName` / `headerCellStyle` | `string` / `CSSProperties` | — | Every `<th>` header cell. |
-| `rowClassName` / `rowStyle` | `string` / `CSSProperties` | — | Every body `<tr>`. |
-| `cellClassName` / `cellStyle` | `string` / `CSSProperties` | — | Every body `<td>`. |
-| `cardsClassName` / `cardsStyle` | `string` / `CSSProperties` | — | The cards-view scroll wrapper. |
-| `footerClassName` / `footerStyle` | `string` / `CSSProperties` | — | The pagination footer strip. |
-
-> When both `design.<region>` and its flat shortcut are passed, the flat shortcut wins.
-
-### Column fields
-
-| Field | Type | Default | Description |
-|-------|------|---------|-------------|
-| `width` | `number \| string` | — | Fixed column width. `number` = px, `string` = any CSS length (e.g. `"20%"`). A `<colgroup>` is only emitted when at least one column sets it. |
-| `minWidth` | `number` | — | Minimum column width in px, applied to header and body cells via inline style. |
-| `align` | `"left" \| "center" \| "right"` | `"left"` | Horizontal alignment of the column's header and cells. |
-| `truncate` | `boolean` | `false` | Truncates overflowing cell content with an ellipsis and exposes the raw string/number via the native `title` attribute. |
-| `pinned` | `"left" \| "right"` | `undefined` | Freezes the column to the given horizontal edge while the table scrolls sideways. `"left"` keeps it flush to the left edge, `"right"` to the right edge. Omit to leave the column unpinned (identical to the previous behavior). Offsets accumulate from each preceding pinned column's pixel `width` / `minWidth`, so give every pinned column of a side a pixel `width`. The pinned cell gets an opaque background (row background + row hover) and a 1px separator shadow on its frozen edge. One pinned column per side is the supported contract. |
-| `headerClassName` / `headerStyle` | `string` / `CSSProperties` | — | Extra classes / inline styles for this column's `<th>` only (merged after `design.headerCell`). |
-| `cellClassName` / `cellStyle` | `string` / `CSSProperties` | — | Extra classes / inline styles for this column's `<td>` only (merged after `design.cell`). |
-| `filter` | `true \| "catalog" \| "search" \| "date" \| "date-range"` | `false` | Filter control rendered in the header. `true` = text/number input (or boolean toggle when `type: "boolean"`); `"catalog"` = `ITSelect` fed by `catalogOptions.data`; `"search"` = `ITSearchSelect` typeahead fed by `catalogOptions.data` (optional `catalogOptions.onSearch` for server-side search); `"date"` / `"date-range"` = `ITDatePicker` single/range, bounded by `dateFilterOptions`. |
-
-## Usage
-
-```tsx
-import { ITTable } from '@axzydev/axzy_ui_system';
-
-const columns = [
-  { key: 'name', label: 'Name', type: 'string', sortable: true, filter: true },
-  { key: 'role', label: 'Role', type: 'string', filter: 'catalog', catalogOptions: { data: roles } },
-  { key: 'status', label: 'Status', type: 'boolean', filter: true },
-];
-const data = [
-  { name: 'Alice', role: 'ADMIN', status: true },
-  { name: 'Bob', role: 'EDITOR', status: false },
-];
-
-<ITTable columns={columns} data={data} title="Users" />
-<ITTable columns={columns} data={data} variant="striped" size="sm" defaultItemsPerPage={5} />
-<ITTable
-  columns={columns}
-  data={data}
-  defaultView="cards"
-  onRowClick={(row, event) => console.log(row, event.type)}
-/>
-
-// Filter modes: ITSearchSelect typeahead + ITDatePicker single / range
-const filterColumns = [
-  { key: 'role', label: 'Role', type: 'string', filter: 'search', catalogOptions: { data: roles } },
-  { key: 'lastLogin', label: 'Last login', type: 'date', filter: 'date', dateFilterOptions: { maxDate: new Date() } },
-  { key: 'hiredAt', label: 'Hired', type: 'date', filter: 'date-range', dateFilterOptions: { maxDate: new Date() } },
-];
-
-<ITTable columns={filterColumns} data={data} />
-
-// No horizontal scroll: fixed layout + per-column widths + truncation
-const fixedColumns = [
-  { key: 'name',  label: 'Name',  type: 'string', width: '30%', truncate: true },
-  { key: 'email', label: 'Email', type: 'string', width: 220,    truncate: true },
-  { key: 'role',  label: 'Role',  type: 'string', width: 140,    align: 'center' },
-];
-
-<ITTable columns={fixedColumns} data={data} layout="fixed" density="compact" />
-
-// Pinned columns: freeze the first column left and the last one right
-const pinnedColumns = [
-  { key: 'id',      label: 'ID',      type: 'number',  width: 72,  pinned: 'left' },
-  { key: 'name',    label: 'Name',    type: 'string',  width: 240, truncate: true },
-  { key: 'actions', label: 'Actions', type: 'actions', width: 104, pinned: 'right' },
-];
-
-<ITTable columns={pinnedColumns} data={data} layout="fixed" density="compact" />
-```
-
-## Notes
-
-- `columns[].render` provides custom cell rendering via render function
-- `columns[].sortable` enables column header sort toggles
-- `columns[].filter` supports `true` (text/number input, or boolean toggle for `type: "boolean"`), `"catalog"` (`ITSelect`), `"search"` (`ITSearchSelect` typeahead; add `catalogOptions.onSearch` for server-side search), and `"date"` / `"date-range"` (`ITDatePicker`; bound with `dateFilterOptions: { minDate, maxDate }`). Filtering is client-side: `"date"` matches the whole day, `"date-range"` includes both ends (`startOfDay` / `endOfDay`).
-- `onRowClick` fires in **both** the table and cards views. The event is a `MouseEvent` for pointer interaction and a `KeyboardEvent` for Enter/Space activation.
-- Clicks/keys that start inside an interactive child (`button`, `a`, `input`, `select`, `textarea`, `[role="button"]`, `[role="link"]`, `[data-row-click-ignore]`) do **not** trigger `onRowClick`.
-- When `onRowClick` is omitted no `cursor-pointer`, focus ring, `tabIndex`, or `role` is added.
-- `density` controls padding/row height (`compact` 33px / `normal` 45px / `comfortable` 53px at `size="md"`); `size` changes font-size and shifts the row height by the line box (sm 16px / md 20px / lg 28px).
-- **Anti horizontal scroll recipe:** `layout="fixed"` + a `width` on every column + `truncate` on long text + `density="compact"`. `width` accepts a `number` (px) or any CSS length string (`"20%"`, `"12rem"`). A `<colgroup>` is only emitted when at least one column defines a `width`.
-- **Pinned columns:** set `columns[].pinned: "left" | "right"` to freeze a column to that edge during horizontal scroll (`position: sticky`; the wrapper needs no `relative`). Omitting `pinned` renders exactly as before. Sticky offsets accumulate from each preceding pinned column's pixel `width` / `minWidth`; a non-px width contributes `minWidth ?? 0`, so give every pinned column of a side a pixel `width`. The pinned cell gets an opaque background (`--color-table-rowBg`, row hover `--color-table-rowHover`) and a 1px separator shadow on its frozen edge. Z-layering: pinned body cell `z-[1]` < sticky header `z-10` < pinned header `z-[15]`; it composes with `stickyHeader` and `virtualized`. One pinned column per side is the supported contract. Known limitation: with `variant="striped"` the opaque pinned background covers that column's stripe tint.
-- With the default `layout="auto"`, `min-w-max` stays active so column widths can still reflow as different cell content enters the window during vertical scroll. Use `layout="fixed"` + column `width` for stable widths.
-- `autoCardBreakpoint` swaps to the cards view when the container (not the viewport) is narrower than the given px value; the Table toggle is disabled while forced, the Cards toggle stays enabled. It is measured in px in both directions.
-- **Design props:** `design` (or the flat `<slot>ClassName` / `<slot>Style` shortcuts, which win when both are passed) styles `container`, `card`, `toolbar`, `header`, `headerCell`, `row`, `cell`, `cards` and `footer`; `columns[]` adds `headerClassName` / `cellClassName` (+ their `*Style`). `colors` writes local `--color-table-*` variables and overrides the global `ITThemeProvider` palette for that instance only. Because the theme pins its table colors with `!important` on `thead tr` / `tbody tr` / `th span` / `td div`, use `colors` (not `style`) to change colors, and `showViewToggle={false}` to hide the Table\|Cards switch.
-- **Virtualization** applies to the **table view only** — the cards view is never virtualized. It only pays off with a large page size: raise `defaultItemsPerPage` and `itemsPerPageOptions` (defaults are `10` and `[5, 10, 20]`). Rows are assumed to have a uniform `rowHeight`; use `truncate` + `layout="fixed"` for predictable heights.
-- Scroll resets to the top on page or items-per-page change, but **not** on filter change (known limitation). `aria-rowcount` reflects the current page (+1), not the whole dataset, because pagination is independent.
-- `virtualizedMaxHeight`, `rowHeight`, `overscan`, and `stickyHeader` only take effect when `virtualized` is true. `stickyHeader` makes each `<th>` sticky using the `--color-table-headerBg` token (fallback `#f8fafc`).
-- `TableDensity` is exported from the package. `ITSearchTable` does **not** support `layout`, `density`, `autoCardBreakpoint`, `virtualized`, or per-column `width` — do not assume parity.
-- Three visual variants: default (no borders), striped (alternating rows), bordered (full grid)
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

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

@@ -1,402 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITTable from "@/components/molecules/table/table";
-import { Column } from "./table.props";
-import ITBadget from "@/components/atoms/badget/badget";
-import ITButton from "@/components/atoms/button/button";
-import { FaTrash } from "react-icons/fa";
-import { useState } from "react";
-
-const meta: Meta<typeof ITTable> = {
-  title: "Components/Data Display/ITTable",
-  component: ITTable,
-  parameters: {
-    layout: "padded", // Tables need more space
-  },
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["default", "striped", "bordered"],
-    },
-    size: {
-      control: "select",
-      options: ["sm", "md", "lg"],
-    },
-    density: {
-      control: "select",
-      options: ["compact", "normal", "comfortable"],
-    },
-    layout: {
-      control: "select",
-      options: ["auto", "fixed"],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ITTable>;
-
-// --- MOCK DATA & COLUMNS ---
-
-interface User {
-  id: number;
-  name: string;
-  email: string;
-  roleId: number;
-  balance: number;
-  isActive: boolean;
-  lastLogin: string;
-}
-
-const mockRoles = [
-  { id: 1, name: "Administrator" },
-  { id: 2, name: "Editor" },
-  { id: 3, name: "Viewer" },
-];
-
-const generateMockData = (count: number): User[] => {
-  return Array.from({ length: count }, (_, i) => ({
-    id: i + 1,
-    name: `User ${i + 1}`,
-    email: `user${i + 1}@example.com`,
-    roleId: (i % 3) + 1,
-    balance: Math.random() * 10000,
-    isActive: i % 4 !== 0,
-    lastLogin: new Date(Date.now() - Math.random() * 10000000000).toISOString(),
-  }));
-};
-
-const mockData = generateMockData(25);
-
-const basicColumns: Column<User>[] = [
-  { key: "id", label: "ID", type: "number" },
-  { key: "name", label: "Name", type: "string" },
-  { key: "email", label: "Email", type: "string" },
-];
-
-const advancedColumns: Column<User>[] = [
-  { key: "id", label: "ID", type: "number", sortable: true, filter: true },
-  { key: "name", label: "Name", type: "string", sortable: true, filter: true },
-  { key: "email", label: "Email", type: "string", sortable: true, filter: true },
-  { 
-    key: "roleId", 
-    label: "Role", 
-    type: "catalog", 
-    sortable: true, 
-    filter: "catalog",
-    catalogOptions: { data: mockRoles } 
-  },
-  { 
-    key: "balance", 
-    label: "Balance", 
-    type: "number", 
-    sortable: true, 
-    currencyMX: true 
-  },
-  { 
-    key: "isActive", 
-    label: "Status", 
-    type: "boolean", 
-    sortable: true, 
-    filter: true,
-    render: (row) => (
-      <ITBadget 
-        label={row.isActive ? "Active" : "Inactive"} 
-        color={row.isActive ? "success" : "danger"} 
-      />
-    )
-  },
-];
-
-
-// --- STORIES ---
-
-export const Default: Story = {
-  args: {
-    columns: basicColumns,
-    data: mockData.slice(0, 5), // Just a few
-    title: "Basic Users Table",
-  } as any,
-};
-
-export const WithPagination: Story = {
-  args: {
-    columns: basicColumns,
-    data: mockData,
-    title: "Paginated Table",
-    defaultItemsPerPage: 5,
-    itemsPerPageOptions: [5, 10, 20],
-  } as any,
-};
-
-export const WithSortingAndFiltering: Story = {
-    args: {
-      columns: advancedColumns.map(col => ({ ...col, render: undefined })), // Remove custom render to show raw formatting
-      data: mockData,
-      title: "Data Management (Sort & Filter)",
-    } as any,
-};
-
-export const CustomRendering: Story = {
-    args: {
-      columns: advancedColumns,
-      data: mockData,
-      title: "Custom Rendering (Badges & Catalogs)",
-    } as any,
-};
-
-// Wrapper for interactive actions
-const ActionsTableWrapper = (args: any) => {
-    const [data, setData] = useState(mockData.slice(0, 5));
-    
-    const actions: Column<User> = {
-        key: "actions",
-        label: "Actions",
-        type: "actions",
-        actions: (row) => (
-          <>
-            <ITButton size="sm" variant="text" color="danger" ariaLabel="Delete" onClick={() => setData(d => d.filter(item => item.id !== row.id))}>
-              <FaTrash />
-            </ITButton>
-          </>
-        ),
-      };
-
-    return <ITTable {...args} data={data} columns={[...basicColumns, actions]} />;
-};
-
-export const WithActions: Story = {
-    render: (args) => <ActionsTableWrapper {...args} />,
-    args: {
-      title: "Table with Actions",
-    } as any,
-};
-
-export const EmptyState: Story = {
-    args: {
-      columns: basicColumns,
-      data: [],
-      title: "No Data Available",
-    } as any,
-};
-
-// Wrapper for clickable rows/cards
-const RowClickWrapper = (args: any) => {
-    const [selected, setSelected] = useState<User | null>(null);
-
-    return (
-      <div className="space-y-3">
-        <p className="text-sm font-medium text-slate-500">
-          {selected
-            ? `Selected: ${selected.name} (id ${selected.id})`
-            : "Click a row/card or press Enter/Space while focused"}
-        </p>
-        <ITTable
-          {...args}
-          onRowClick={(row: User) => setSelected(row)}
-        />
-      </div>
-    );
-};
-
-export const WithRowClick: Story = {
-    render: (args) => <RowClickWrapper {...args} />,
-    args: {
-      columns: basicColumns,
-      data: mockData.slice(0, 5),
-      title: "Clickable Rows",
-    } as any,
-};
-
-export const WithRowClickCards: Story = {
-    render: (args) => <RowClickWrapper {...args} />,
-    args: {
-      columns: basicColumns,
-      data: mockData.slice(0, 5),
-      title: "Clickable Cards",
-      defaultView: "cards",
-    } as any,
-};
-
-// --- CONFIGURABLE LAYOUT / DENSITY ---
-
-const longCellData: User[] = [
-  {
-    id: 1,
-    name: "Extraordinariamente Largo Nombre de Usuario Que No Cabe",
-    email: "usuario.con.un.correo.extremadamente.largo@example-enterprise-domain.com",
-    roleId: 1,
-    balance: 28400,
-    isActive: true,
-    lastLogin: "2026-07-18T09:30:00",
-  },
-  {
-    id: 2,
-    name: "Otra Persona Con Un Nombre Bastante Extenso Para Probar",
-    email: "otra.persona.con.correo.extenso@example-enterprise-domain.com",
-    roleId: 2,
-    balance: 15200,
-    isActive: false,
-    lastLogin: "2026-07-17T14:22:00",
-  },
-];
-
-const fixedColumns: Column<User>[] = [
-  { key: "id", label: "ID", type: "number", width: 64, minWidth: 48, align: "center" },
-  { key: "name", label: "Name", type: "string", width: "35%", truncate: true },
-  { key: "email", label: "Email", type: "string", width: "45%", truncate: true },
-];
-
-export const CompactDensity: Story = {
-  args: {
-    columns: advancedColumns.map(col => ({ ...col, render: undefined })),
-    data: mockData,
-    title: "Compact Density",
-    density: "compact",
-    defaultItemsPerPage: 8,
-  } as any,
-};
-
-export const FixedLayoutWithWidths: Story = {
-  render: (args: any) => (
-    <div style={{ width: 480 }} className="rounded-lg border border-dashed border-slate-300">
-      <ITTable {...args} />
-    </div>
-  ),
-  args: {
-    columns: fixedColumns,
-    data: longCellData,
-    title: "Fixed layout · no horizontal scroll",
-    layout: "fixed",
-    density: "compact",
-    defaultItemsPerPage: 5,
-  } as any,
-};
-
-// Pixel widths force the total past the 520px wrapper, so the ID (left) and
-// Actions (right) columns stay frozen while the middle scrolls sideways.
-const pinnedColumns: Column<User>[] = [
-  { key: "id", label: "ID", type: "number", width: 72, minWidth: 56, align: "center", pinned: "left" },
-  { key: "name", label: "Name", type: "string", width: 240, truncate: true },
-  { key: "email", label: "Email", type: "string", width: 280, truncate: true },
-  { key: "balance", label: "Balance", type: "number", width: 160, currencyMX: true },
-  { key: "lastLogin", label: "Last login", type: "string", width: 160, truncate: true },
-  {
-    key: "isActive",
-    label: "Status",
-    type: "boolean",
-    width: 104,
-    align: "center",
-  },
-  {
-    key: "actions",
-    label: "Actions",
-    type: "actions",
-    width: 104,
-    pinned: "right",
-    actions: () => (
-      <ITButton size="sm" variant="text" color="danger" ariaLabel="Delete">
-        <FaTrash />
-      </ITButton>
-    ),
-  },
-];
-
-export const PinnedColumns: Story = {
-  render: (args: any) => (
-    <div style={{ width: 520 }} className="rounded-lg border border-dashed border-slate-300">
-      <ITTable {...args} />
-    </div>
-  ),
-  args: {
-    columns: pinnedColumns,
-    data: mockData.slice(0, 6),
-    title: "Pinned left (ID) & right (Actions)",
-    layout: "fixed",
-    density: "compact",
-    defaultItemsPerPage: 6,
-  } as any,
-};
-
-export const AutoCardsNarrowContainer: Story = {
-  render: (args: any) => (
-    <div style={{ width: 420 }} className="rounded-lg border border-dashed border-slate-300">
-      <ITTable {...args} />
-    </div>
-  ),
-  args: {
-    columns: basicColumns,
-    data: mockData.slice(0, 6),
-    title: "Auto cards under 640px",
-    autoCardBreakpoint: 640,
-    defaultItemsPerPage: 6,
-  } as any,
-};
-
-// --- VIRTUALIZATION ---
-
-const virtualColumns: Column<User>[] = [
-  { key: "id", label: "ID", type: "number", width: 72, minWidth: 56, align: "center" },
-  { key: "name", label: "Name", type: "string", width: "30%", truncate: true },
-  { key: "email", label: "Email", type: "string", width: "40%", truncate: true },
-  {
-    key: "roleId",
-    label: "Role",
-    type: "catalog",
-    width: "30%",
-    truncate: true,
-    catalogOptions: { data: mockRoles },
-  },
-];
-
-export const VirtualizedLargeDataset: Story = {
-  render: (args: any) => (
-    <div className="space-y-2">
-      <p className="text-xs text-slate-500">
-        250 rows · only the visible window is mounted (~10–20 &lt;tr&gt; + at most 2 spacer rows)
-      </p>
-      <ITTable {...args} />
-    </div>
-  ),
-  args: {
-    columns: virtualColumns,
-    data: generateMockData(250),
-    title: "Virtualized · 250 rows",
-    virtualized: true,
-    stickyHeader: true,
-    layout: "fixed",
-    density: "compact",
-    virtualizedMaxHeight: 360,
-    defaultItemsPerPage: 250,
-    itemsPerPageOptions: [50, 100, 250],
-  } as any,
-};
-
-// --- COLUMN FILTER MODES ---
-
-const filterModeColumns: Column<User>[] = [
-  { key: "name", label: "Name", type: "string", filter: true },
-  {
-    key: "roleId",
-    label: "Role (ITSearchSelect)",
-    type: "catalog",
-    filter: "search",
-    catalogOptions: { data: mockRoles },
-  },
-  {
-    key: "lastLogin",
-    label: "Last login (ITDatePicker range)",
-    type: "date",
-    filter: "date-range",
-    dateFilterOptions: { maxDate: new Date() },
-    render: (row) => new Date(row.lastLogin).toLocaleDateString("es-MX"),
-  },
-];
-
-export const WithSearchAndDateFilters: Story = {
-  args: {
-    columns: filterModeColumns,
-    data: generateMockData(25),
-    title: "Filtros: ITSearchSelect + ITDatePicker (rango)",
-    defaultItemsPerPage: 8,
-  } as any,
-};

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

@@ -1,52 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './tabs.stories';
-
-<Meta of={StoriesData} />
-
-# ITTabs
-
-Tab navigation component with multiple visual variants, orientation options, and color themes.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `tabs` | `{ label: string; icon?: ReactNode; disabled?: boolean }[]` | — | Tab definitions |
-| `activeTab` | `number` | `0` | Zero-indexed active tab |
-| `onChange` | `(index: number) => void` | — | Tab change handler |
-| `variant` | `'default' \| 'pills' \| 'underline' \| 'enclosed'` | `'default'` | Visual style variant |
-| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Tab layout orientation |
-| `fullWidth` | `boolean` | `false` | Stretch tabs to fill container |
-| `color` | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral'` | `'primary'` | Color theme |
-
-## Usage
-
-```tsx
-import { ITTabs } from '@axzydev/axzy_ui_system';
-
-const tabs = [
-  { label: 'General' },
-  { label: 'Security', icon: <LockIcon /> },
-  { label: 'Billing', disabled: true },
-];
-
-<ITTabs tabs={tabs} activeTab={0} onChange={(i) => console.log(i)} />
-<ITTabs tabs={tabs} variant="pills" fullWidth />
-<ITTabs tabs={tabs} variant="underline" orientation="vertical" color="success" />
-<ITTabs tabs={tabs} variant="enclosed" />
-```
-
-## Notes
-
-- Four visual variants: default, pills, underline, enclosed
-- Horizontal or vertical tab layout
-- `fullWidth` makes tabs span the full container width
-- Icons rendered alongside tab labels via the `icon` prop
-- Individual tabs can be disabled
-- Seven color themes available
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

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

@@ -1,31 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ITTabs from '@/components/molecules/tabs/tabs';
-
-const meta: Meta<typeof ITTabs> = {
-  title: 'Components/ITTabs',
-  component: ITTabs,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITTabs>;
-
-export const Line: Story = {
-  args: {
-    variant: 'line',
-    items: [
-      { id: '1', label: 'Tab 1', content: <div className="p-4">Content 1</div> },
-      { id: '2', label: 'Tab 2', content: <div className="p-4">Content 2</div> },
-      { id: '3', label: 'Disabled', content: <div>X</div>, disabled: true },
-    ],
-  },
-};
-
-export const Pill: Story = {
-  args: {
-    variant: 'pill',
-    items: [
-      { id: '1', label: 'Overview', content: <div className="p-4">Dashboard Overview</div> },
-      { id: '2', label: 'Settings', content: <div className="p-4">Account Settings</div> },
-    ],
-  },
-};