@axzydev/axzy_ui_system 1.4.8 → 1.5.0

package/src/components/molecules/time-picker/timePicker.doc.mdx

@@ -1,68 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './timePicker.stories';
-
-<Meta of={StoriesData} />
-
-# ITTimePicker
-
-Time selection input with a dual-column dropdown (hours / minutes). Supports manual typing with auto-formatting to `HH:MM`, validation, 12h and 24h format display, configurable minute steps, and keyboard-friendly picker navigation.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `name` | `string` | — | Form field name attribute and key for the change event. |
-| `value` | `string` | — | Controlled time value in `"HH:MM"` format. |
-| `label` | `string` | — | Label text displayed above the input. |
-| `placeholder` | `string` | `"HH:MM"` | Placeholder text when no value is set. |
-| `onChange` | `(e: any) => void` | — | Callback fired on valid time selection, receives event-like object with `target.name` and `target.value`. |
-| `onBlur` | `(e: any) => void` | — | Callback fired when the input loses focus. |
-| `required` | `boolean` | — | Marks the field as required. |
-| `touched` | `boolean` | — | Whether the input has been interacted with. |
-| `error` | `string \| boolean` | — | Validation error message or boolean to show error state. |
-| `disabled` | `boolean` | `false` | Disables the time picker when true. |
-| `className` | `string` | — | Additional CSS classes for the wrapper. |
-| `size` | `SizesTypes` | `"md"` | Size preset: `"sm"`, `"md"`, `"lg"`. |
-| `variant` | `"primary" \| "secondary" \| "danger" \| "success" \| "warning" \| "info" \| "purple"` | `"primary"` | Style variant for the input. |
-| `color` | `"primary" \| "secondary" \| "danger" \| "success" \| "warning" \| "info" \| "purple" \| string` | `"primary"` | Theme color used for the dropdown highlight and confirm button. Accepts semantic keys or raw hex. |
-
-## Usage
-
-```tsx
-import { ITTimePicker } from '@axzydev/axzy_ui_system';
-
-<ITTimePicker
-  name="startTime"
-  label="Start Time"
-  value={startTime}
-  onChange={(e) => setStartTime(e.target.value)}
-  color="primary"
-/>
-
-<ITTimePicker
-  name="endTime"
-  label="End Time"
-  value={endTime}
-  onChange={(e) => setEndTime(e.target.value)}
-  error={isInvalid ? "Invalid time range" : undefined}
-  touched={true}
-/>
-```
-
-## Notes
-
-- The dropdown opens on input focus and can be navigated via scroll or keyboard.
-- Hour and minute columns scroll independently for quick selection.
-- A **Set** button at the bottom of the dropdown confirms the selection.
-- Supports both 12-hour and 24-hour format display via the internal formatting logic.
-- **minuteStep** is available internally (1, 5, 10, 15, 30 minutes) for granular control over the minute column.
-- Invalid times (e.g., "25:99") trigger validation and display an error state.
-- **touched** prop combined with an empty value or bad time forces error visibility.
-- Clearable via clearing the input field; the dropdown resets accordingly.
-- Colors available: primary, secondary, success, danger, warning, info, purple — plus any raw hex string.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/molecules/time-picker/timePicker.stories.tsx

@@ -1,130 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITTimePicker from "./timePicker";
-import { useState } from "react";
-
-const meta: Meta<typeof ITTimePicker> = {
-  title: "Components/Form Elements/ITTimePicker",
-  component: ITTimePicker,
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-    color: {
-      control: "select",
-      options: ["primary", "secondary", "success", "danger", "warning", "info", "purple"],
-    },
-    size: {
-      control: "select",
-      options: ["small", "medium", "large"],
-    },
-    variant: {
-      control: "select",
-      options: ["primary", "secondary"],
-    },
-    disabled: {
-      control: "boolean",
-    },
-    required: {
-      control: "boolean",
-    },
-    error: {
-      control: "text",
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div className="w-[300px]">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof ITTimePicker>;
-
-// Helper to wrap uncontrolled behavior
-const TimePickerWrapper = (args: any) => {
-  const [value, setValue] = useState(args.value || "");
-  const [touched, setTouched] = useState(false);
-
-  return (
-    <ITTimePicker
-      {...args}
-      value={value}
-      touched={touched}
-      onChange={(e) => {
-        setValue(e.target.value);
-        if (args.onChange) args.onChange(e);
-      }}
-      onBlur={(e) => {
-        setTouched(true);
-        if (args.onBlur) args.onBlur(e);
-      }}
-    />
-  );
-};
-
-export const Default: Story = {
-  render: (args) => <TimePickerWrapper {...args} />,
-  args: {
-    name: "default_time",
-    label: "Select Time",
-    placeholder: "HH:MM",
-    color: "primary",
-  },
-};
-
-export const WithPredefinedValue: Story = {
-  render: (args) => <TimePickerWrapper {...args} />,
-  args: {
-    name: "predefined_time",
-    label: "Meeting Time",
-    value: "14:30",
-    color: "success",
-  },
-};
-
-export const Disabled: Story = {
-  render: (args) => <TimePickerWrapper {...args} />,
-  args: {
-    name: "disabled_time",
-    label: "Unavailable Time",
-    value: "09:00",
-    disabled: true,
-  },
-};
-
-export const Validation: Story = {
-  render: (args) => <TimePickerWrapper {...args} />,
-  args: {
-    name: "validation_time",
-    label: "End Time",
-    value: "25:99", // Invalid time string to trigger intrinsic validation
-    touched: true, // Force validation display
-    error: "Custom error message if passed explicitly",
-  },
-};
-
-export const Sizes: Story = {
-  render: (args) => (
-    <div className="flex flex-col gap-6">
-      <TimePickerWrapper {...args} size="sm" label="Small TimePicker" name="sm" />
-      <TimePickerWrapper {...args} size="md" label="Medium TimePicker" name="md" />
-      <TimePickerWrapper {...args} size="lg" label="Large TimePicker" name="lg" />
-    </div>
-  ),
-  args: {
-    value: "10:15",
-  },
-};
-
-export const Colors: Story = {
-  render: (args) => (
-    <div className="flex flex-col gap-6">
-      <TimePickerWrapper {...args} color="primary" label="Primary Theme Highlight" name="c1" value="12:00" />
-      <TimePickerWrapper {...args} color="danger" label="Danger Theme Highlight" name="c2" value="13:15" />
-      <TimePickerWrapper {...args} color="purple" label="Purple Theme Highlight" name="c3" value="14:45" />
-    </div>
-  ),
-};

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

@@ -1,95 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import ITWysiwyg from '@/components/molecules/wysiwyg/wysiwyg';
-
-const meta = {
-  title: 'Components/Form/ITWysiwyg',
-  component: ITWysiwyg,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-    },
-    toolbar: {
-      control: 'select',
-      options: [
-        ['bold', 'italic', 'underline', 'highlight', 'ul', 'ol', 'clear'],
-        ['bold', 'italic', 'underline'],
-        ['ul', 'ol'],
-      ],
-    },
-  },
-} satisfies Meta<typeof ITWysiwyg>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    placeholder: 'Escribe algo...',
-    minHeight: 140,
-  },
-};
-
-export const WithLabel: Story = {
-  args: {
-    label: 'Descripción',
-    placeholder: 'Texto libre...',
-  },
-};
-
-export const WithValue: Story = {
-  args: {
-    value: '<div>Texto con <strong>negrita</strong>, <em>itálica</em> y <u>subrayado</u>.</div><div><mark style="background-color:#fde68a">Con marcador</mark> y:</div><ul><li>Elemento uno</li><li>Elemento dos</li></ul>',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    value: '<div>Contenido bloqueado para edición.</div>',
-  },
-};
-
-export const ReadOnly: Story = {
-  args: {
-    readOnly: true,
-    label: 'Vista previa',
-    value: '<div>Solo lectura, sin toolbar activo.</div>',
-  },
-};
-
-export const WithError: Story = {
-  args: {
-    label: 'Descripción',
-    error: 'Este campo es obligatorio.',
-    value: '',
-  },
-};
-
-export const CustomHighlight: Story = {
-  args: {
-    highlightColor: '#a7f3d0',
-    label: 'Marcador verde',
-  },
-};
-
-export const LiveValue: Story = {
-  render: (args) => {
-    const [html, setHtml] = useState<string>(
-      '<div>Edita aquí y mira el HTML generado abajo.</div>'
-    );
-    return (
-      <div className="w-96 space-y-4">
-        <ITWysiwyg {...args} value={html} onChange={setHtml} />
-        <pre className="max-h-40 overflow-auto rounded-lg bg-slate-950 p-3 text-[10px] text-emerald-300">
-          <code>{html}</code>
-        </pre>
-      </div>
-    );
-  },
-  args: {},
-};

package/src/components/organisms/confirm-dialog/confirm-dialog.doc.mdx

@@ -1,60 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './confirm-dialog.stories';
-
-<Meta of={StoriesData} />
-
-# ITConfirmDialog
-
-Confirmation modal dialog for destructive or critical actions. Renders a centered overlay with a warning icon, title, message body, and confirm/cancel buttons. Supports loading state and configurable button colors.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `isOpen` | `boolean` | — | Controls whether the confirmation dialog is visible. |
-| `onClose` | `() => void` | — | Callback fired when the user cancels or closes the dialog (overlay click or cancel button). |
-| `onConfirm` | `() => void` | — | Callback fired when the user confirms the action. |
-| `title` | `string` | `"Confirmar acción"` | Heading text displayed at the top of the dialog. |
-| `message` | `ReactNode` | `"¿Estás seguro de que deseas continuar?"` | Body content — accepts plain strings or React nodes. |
-| `confirmLabel` | `string` | `"Confirmar"` | Label for the confirm button. |
-| `cancelLabel` | `string` | `"Cancelar"` | Label for the cancel button. |
-| `variant` | `ColorsTypes` | `"primary"` | Color variant applied to the confirm button. Accepts `primary`, `danger`, `warning`, `info`, etc. |
-| `loading` | `boolean` | `false` | Disables all buttons and signals a loading state. |
-
-## Usage
-
-```tsx
-import { ITConfirmDialog } from '@axzydev/axzy_ui_system';
-import { useState } from 'react';
-
-const [open, setOpen] = useState(false);
-
-<ITButton label="Eliminar" color="danger" onClick={() => setOpen(true)} />
-
-<ITConfirmDialog
-  isOpen={open}
-  onClose={() => setOpen(false)}
-  onConfirm={() => { handleDelete(); setOpen(false); }}
-  title="Eliminar usuario"
-  message="Esta acción no se puede deshacer. ¿Deseas eliminar este usuario?"
-  confirmLabel="Eliminar"
-  variant="danger"
-  loading={isDeleting}
-/>
-```
-
-## Notes
-
-- The dialog renders `null` when `isOpen` is `false`, so it does not remain in the DOM.
-- A semi-transparent **backdrop** (`bg-black/40 backdrop-blur-sm`) covers the screen; clicking it triggers `onClose`.
-- The dialog card has rounded corners (`rounded-2xl`), a light border, and a subtle shadow.
-- A warning icon (`FaExclamationTriangle` in amber) is always displayed alongside the title and message.
-- **variant** controls the confirm button color via the `color` prop on `ITButton`; the cancel button always uses the `outlined` variant.
-- **loading** disables both buttons to prevent double-submission during async operations.
-- By default, spans and text use dark mode–aware colors (`dark:text-white`, `dark:text-slate-400`).
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/organisms/confirm-dialog/confirm-dialog.stories.tsx

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import ITConfirmDialog from "@/components/organisms/confirm-dialog/confirm-dialog";
-import ITButton from "@/components/atoms/button/button";
-
-const meta: Meta<typeof ITConfirmDialog> = {
-  title: "Components/Overlay/ITConfirmDialog",
-  component: ITConfirmDialog,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITConfirmDialog>;
-
-export const Default: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-    return (
-      <>
-        <ITButton label="Eliminar" color="danger" onClick={() => setOpen(true)} />
-        <ITConfirmDialog
-          isOpen={open}
-          onClose={() => setOpen(false)}
-          onConfirm={() => { alert("Confirmado"); setOpen(false); }}
-          title="Eliminar usuario"
-          message="Esta acción no se puede deshacer. ¿Deseas eliminar este usuario?"
-          confirmLabel="Eliminar"
-          variant="danger"
-        />
-      </>
-    );
-  },
-};

package/src/components/organisms/data-table/ITDataTable.doc.mdx

@@ -1,132 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './ITDataTable.stories';
-
-<Meta of={StoriesData} />
-
-# ITDataTable
-
-Advanced server-side data table with automatic pagination, column sorting, and filtering. Communicates via a `fetchData` callback that receives page, limit, filters, and sort parameters, and returns paginated data with a total count. Built on top of the internal table hooks for cohesive state management.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `columns` | `Column<T>[]` | — | Column definitions with key, label, type, sortable, filter, render, plus layout fields: `width` (`number` px or CSS `string`), `minWidth` (px), `align` (`"left" \| "center" \| "right"`), `truncate` (ellipsis + native `title`), and `pinned` (`"left" \| "right"`). |
-| `fetchData` | `(params: ITDataTableFetchParams) => Promise<ITDataTableResponse<T>>` | — | Async callback triggered on pagination, filter, or sort change. Must return `{ data, total }`. |
-| `debounceMs` | `number` | `500` | Delay in ms before firing fetch after filter state changes. |
-| `externalFilters` | `ColumnFilters` | `{}` | Filters managed outside the table (e.g., date pickers) merged with internal column filters. Values may be scalars, a `Date`, or a `[start, end]` tuple. |
-| `loadingIndicator` | `ReactNode` | `<FaSpinner />` | Custom element shown while loading. |
-| `fetchOnMount` | `boolean` | `true` | Whether to fetch data on initial mount. |
-| `reloadTrigger` | `number \| string \| boolean` | — | Changing this value forces a re-fetch. Use after mutations. |
-| `containerClassName` | `string` | — | CSS classes for the outer wrapper. |
-| `className` | `string` | — | CSS classes applied to the `<table>` element. |
-| `variant` | `"default" \| "striped" \| "bordered" \| "minimal"` | `"default"` | Visual style variant. `"minimal"` is accepted by the type but has no styles (renders like `"default"`). |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Font-size preset (does not change padding; use `density` for that). |
-| `itemsPerPageOptions` | `number[]` | `[5, 10, 20]` | Selectable page-size options. |
-| `defaultItemsPerPage` | `number` | `10` | Initial rows per page. |
-| `title` | `string \| ReactNode` | — | Heading displayed 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. |
-
-Columns also accept `headerClassName`, `headerStyle`, `cellClassName` and `cellStyle` for per-column design.
-
-> When both `design.<region>` and its flat shortcut are passed, the flat shortcut wins.
-
-## Usage
-
-```tsx
-import { ITDataTable } from '@axzydev/axzy_ui_system';
-
-<ITDataTable
-  title="Users"
-  columns={[
-    { key: 'id', label: 'ID', type: 'number', sortable: true },
-    { key: 'name', label: 'Name', type: 'string', sortable: true, filter: true },
-    { key: 'role', label: 'Role', type: 'string', filter: 'catalog', catalogOptions: { data: roles } },
-    { key: 'active', label: 'Status', type: 'boolean', filter: true, sortable: true },
-  ]}
-  fetchData={async (params) => api.fetchItems(params)}
-  variant="bordered"
-/>
-
-// Search + date filters (values arrive in params.filters)
-<ITDataTable
-  columns={[
-    { key: 'role', label: 'Role', type: 'string', filter: 'search', catalogOptions: { data: roles, onSearch: (q) => api.searchRoles(q) } },
-    { key: 'hiredAt', label: 'Hired', type: 'date', filter: 'date-range', dateFilterOptions: { maxDate: new Date() } },
-  ]}
-  fetchData={async (params) => api.fetchItems(params)}
-/>
-
-// No horizontal scroll: fixed layout + per-column widths + truncation
-<ITDataTable
-  columns={[
-    { 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' },
-  ]}
-  fetchData={async (params) => api.fetchItems(params)}
-  layout="fixed"
-  density="compact"
-/>
-
-// Pinned columns: freeze ID left and the last column right during horizontal scroll
-<ITDataTable
-  columns={[
-    { key: 'id',     label: 'ID',     type: 'number',  width: 72,  pinned: 'left' },
-    { key: 'name',   label: 'Name',   type: 'string',  width: 240, truncate: true },
-    { key: 'active', label: 'Active', type: 'boolean', width: 120, pinned: 'right' },
-  ]}
-  fetchData={async (params) => api.fetchItems(params)}
-  layout="fixed"
-  density="compact"
-/>
-```
-
-## Notes
-
-- Column filters support `true` (text/number input, or boolean tri-state toggle for `type: "boolean"`), `"catalog"` (`ITSelect`), `"search"` (`ITSearchSelect` typeahead; add `catalogOptions.onSearch` for server-side search), and `"date"` / `"date-range"` (`ITDatePicker`, bounded by `dateFilterOptions`). In `fetchData(params)`, `params.filters[key]` is a `Date` for `"date"`, a `[start, end]` tuple for `"date-range"`, and the scalar/id otherwise.
-- The `externalFilters` prop allows integrating external filter controls like date pickers without building filter UI into the table itself.
-- Debounce prevents excessive API calls while the user types in filter inputs.
-- A loading skeleton overlay covers the table body while fetching, keeping the header visible.
-- Empty state is shown automatically when no results match the current filters.
-- `onRowClick` fires in **both** the table and cards views. The event is a `MouseEvent` for pointer interaction and a `KeyboardEvent` for Enter/Space activation. It is not fired while `isLoading`, and interactions that start inside an interactive child (button, link, input, or `[data-row-click-ignore]`) are ignored.
-- `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]` < the loading overlay `z-20`; 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.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />