@axzydev/axzy_ui_system 1.2.7 → 1.2.8

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

@@ -0,0 +1,75 @@
+import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as Stories from './calendar.stories';
+
+<Meta of={Stories} />
+
+# 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 month/year header to switch to a year selection view (12-year grid).
+- 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/calendar/calendar.props.ts

@@ -1,33 +1,53 @@
 import { ColorsTypes } from "@/types/colors.types";
 
 export interface CalendarEvent {
+  /** Unique identifier for the event. */
   id: string;
+  /** Event display title. */
   title: string;
-  start: Date | string; // Date object or ISO string
+  /** Event start date/time. Accepts a `Date` object or ISO 8601 string. */
+  start: Date | string;
+  /** Event end date/time. Accepts a `Date` object or ISO 8601 string. */
   end: Date | string;
-  color?: string; // Hex or tailwind class
-  data?: any; // Extra data for callbacks
+  /** Event indicator color. Accepts a hex code or CSS color value. */
+  color?: string;
+  /** Arbitrary extra data passed through to event callbacks. */
+  data?: any;
 }
 
 export interface ITCalendarProps {
-  // Scheduler Props
+  /** Array of calendar events to display in the scheduler view. */
   events?: CalendarEvent[];
-  mode?: 'week' | 'day' | 'month'; // 'month' for picker
+  /** Display mode. Valid values: `"week"`, `"day"`, `"month"`. Auto-detected as `"month"` when `onChange` is provided. */
+  mode?: 'week' | 'day' | 'month';
+  /** Callback fired when an event is clicked. */
   onEventClick?: (event: CalendarEvent) => void;
+  /** Callback fired when an empty time slot is clicked. */
   onSlotClick?: (date: Date) => void;
+  /** Callback fired when the mouse enters a time slot. */
   onSlotHover?: (date: Date) => void;
+  /** Callback fired when a time range is selected via drag. */
   onSelectRange?: (start: Date, end: Date) => void;
-  
-  // Picker Props (Legacy/DatePicker support)
+
+  /** Currently selected date (date picker mode). */
   value?: Date;
+  /** Callback fired when a date is selected in picker mode. */
   onChange?: (date: Date) => void;
+  /** Selection mode for the date picker. Valid values: `"single"`, `"range"`. @default "single" */
   selectionMode?: 'single' | 'range';
+  /** Start date for range selection. */
   startDate?: Date;
+  /** End date for range selection. */
   endDate?: Date;
+  /** Minimum selectable date (dates before this are disabled). */
   minDate?: Date;
+  /** Maximum selectable date (dates after this are disabled). */
   maxDate?: Date;
 
+  /** Additional CSS class names for the calendar container. */
   className?: string;
+  /** Whether the calendar is in a disabled state. @default false */
   disabled?: boolean;
+  /** Accent color theme for selection highlights. Uses semantic color keys. @default "primary" */
   variant?: ColorsTypes;
 }

package/src/components/calendar/calendar.tsx

@@ -44,6 +44,19 @@ const TIME_SLOTS = Array.from({ length: HOURS_COUNT + 1 }, (_, i) => START_HOUR
 // Component
 // ----------------------------------------------------------------------
 
+/**
+ * Full-featured calendar and date picker with week/day/month views, event display, range selection, and drag-to-select.
+ *
+ * @example
+ * <ITCalendar mode="month" onChange={(date) => console.log(date)} variant="primary" />
+ *
+ * @example
+ * <ITCalendar
+ *   mode="week"
+ *   events={[{ id: "1", title: "Meeting", start: new Date(), end: new Date() }]}
+ *   onEventClick={(evt) => console.log(evt)}
+ * />
+ */
 export const ITCalendar: React.FC<ITCalendarProps> = ({
   events = [],
   mode: modeProp,

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

@@ -0,0 +1,54 @@
+import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as Stories from './card.stories';
+
+<Meta of={Stories} />
+
+# 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/card/card.props.ts

@@ -1,13 +1,24 @@
 export interface ITCardProps {
+  /** Click handler. When provided, the card becomes interactive with hover shadow effect. */
   onClick?: () => void;
+  /** Card title displayed in the header area. */
   title?: string;
+  /** Image source URL displayed at the top of the card. */
   image?: string;
+  /** Alt text for the card image. @default "Card Image" */
   alt?: string;
+  /** Card body content. Rendered below the title. */
   children?: React.ReactNode;
+  /** Action elements rendered in a footer section separated by a border. */
   actions?: React.ReactNode;
+  /** Additional CSS class names for the card container. */
   className?: string;
+  /** Additional CSS class names for the image element. */
   imageClassName?: string;
+  /** Additional CSS class names for the title element. */
   titleClassName?: string;
+  /** Additional CSS class names for the content wrapper. */
   contentClassName?: string;
+  /** Additional CSS class names for the actions footer. */
   actionClassName?: string;
 }

package/src/components/card/card.tsx

@@ -3,6 +3,19 @@ import { ITCardProps } from "./card.props";
 import { useState } from "react";
 import ITText from "@/components/text/text";
 
+/**
+ * Versatile card container with optional image, title, body content, and action footer. Supports interactive hover states.
+ *
+ * @example
+ * <ITCard title="Welcome" image="/hero.jpg" actions={<ITButton label="Learn more" />}>
+ *   This is the card content.
+ * </ITCard>
+ *
+ * @example
+ * <ITCard onClick={() => {}} className="max-w-sm">
+ *   Clickable card with hover shadow.
+ * </ITCard>
+ */
 export default function ITCard({
   title,
   image,

package/src/components/checkbox/checkbox.doc.mdx

@@ -0,0 +1,54 @@
+import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as Stories from './checkbox.stories';
+
+<Meta of={Stories} />
+
+# ITCheckbox
+
+A checkbox input component with a custom visual style and a visually hidden native `<input>` for full accessibility. Supports checked, unchecked, and indeterminate states with an optional label. The disabled state reduces opacity and prevents interaction.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `checked` | `boolean` | `false` | Controlled checked state. |
+| `onChange` | `(checked: boolean) => void` | — | Callback fired when the checkbox value changes. |
+| `label` | `ReactNode` | — | Label text or element rendered next to the checkbox. |
+| `disabled` | `boolean` | `false` | Disables interaction and applies reduced opacity. |
+| `indeterminate` | `boolean` | `false` | Renders a dash indicator for partial selection. No effect when `checked` is `true`. |
+| `className` | `string` | — | Additional CSS class names for the label wrapper. |
+| `name` | `string` | — | HTML name attribute for the native `<input>` element. |
+
+## Usage
+
+```tsx
+import { ITCheckbox } from '@axzydev/axzy_ui_system';
+
+<ITCheckbox
+  checked={agreed}
+  onChange={setAgreed}
+  label="Acepto los términos y condiciones"
+/>
+
+<ITCheckbox
+  indeterminate={someChecked && !allChecked}
+  onChange={toggleAll}
+  label="Seleccionar todo"
+/>
+```
+
+## Variants / Notes
+
+- **Checked** — Blue filled square with a white checkmark SVG icon.
+- **Unchecked** — White background with a slate gray border.
+- **Indeterminate** — A horizontal dash line rendered when `indeterminate` is `true` and `checked` is `false`. Useful for "select all" parent checkboxes.
+- The native `<input>` is visually hidden (`sr-only`) but remains interactive via the parent `<label>`, ensuring keyboard navigation and screen reader support.
+- When disabled, the entire label wrapper gets `opacity-50` and `cursor-not-allowed`.
+- Renders a focus ring (`ring-2 ring-primary-200`) on the custom visual element when the input is focused (unless disabled).
+- Uses a `ref` callback to set `indeterminate` on the underlying DOM input for compliance with the HTML spec.
+
+## Stories
+
+<Primary />
+<Controls />
+<Stories />

package/src/components/checkbox/checkbox.props.ts

@@ -1,11 +1,18 @@
 import { ReactNode } from "react";
 
 export interface ITCheckboxProps {
+  /** Controlled checked state. @default false */
   checked?: boolean;
+  /** Callback fired when the checkbox value changes. Receives the new checked state. */
   onChange?: (checked: boolean) => void;
+  /** Label text or element rendered next to the checkbox. */
   label?: ReactNode;
+  /** Disables the checkbox interaction and applies reduced opacity. @default false */
   disabled?: boolean;
+  /** Renders the checkbox in an indeterminate (dash) state. Has no effect when `checked` is `true`. @default false */
   indeterminate?: boolean;
+  /** Additional CSS class names for the label wrapper. */
   className?: string;
+  /** HTML name attribute for the native `<input>` element. */
   name?: string;
 }

package/src/components/checkbox/checkbox.tsx

@@ -2,6 +2,15 @@ import clsx from "clsx";
 import { ITCheckboxProps } from "./checkbox.props";
 import ITText from "@/components/text/text";
 
+/**
+ * Checkbox component with label, indeterminate state, and disabled support. Uses a visually hidden native input for accessibility.
+ *
+ * @example
+ * <ITCheckbox label="Accept terms" checked={agreed} onChange={setAgreed} />
+ *
+ * @example
+ * <ITCheckbox label="Select all" indeterminate={someChecked && !allChecked} onChange={toggleAll} />
+ */
 export default function ITCheckbox({
   checked = false,
   onChange,

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

@@ -0,0 +1,60 @@
+import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as Stories from './confirm-dialog.stories';
+
+<Meta of={Stories} />
+
+# 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/confirm-dialog/confirm-dialog.props.ts

@@ -2,13 +2,22 @@ import { ReactNode } from "react";
 import { ColorsTypes } from "@/types/colors.types";
 
 export interface ITConfirmDialogProps {
+  /** Controls whether the confirmation dialog is visible. */
   isOpen: boolean;
+  /** Callback fired when the user cancels or closes the dialog. */
   onClose: () => void;
+  /** Callback fired when the user confirms the destructive action. */
   onConfirm: () => void;
+  /** Heading text displayed at the top of the dialog. @default "Confirmar acción" */
   title?: string;
+  /** Body content — accepts plain strings or React nodes. @default "¿Estás seguro de que deseas continuar?" */
   message?: ReactNode;
+  /** Label for the confirm button. @default "Confirmar" */
   confirmLabel?: string;
+  /** Label for the cancel button. @default "Cancelar" */
   cancelLabel?: string;
+  /** Color variant applied to the confirm button. Accepts any ColorsTypes value (e.g. "primary", "danger", "warning", "info"). @default "primary" */
   variant?: ColorsTypes;
+  /** Disables all buttons and signals a loading state. @default false */
   loading?: boolean;
 }

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

@@ -4,6 +4,25 @@ import ITButton from "../button/button";
 import { FaExclamationTriangle } from "react-icons/fa";
 import ITText from "@/components/text/text";
 
+/**
+ * Confirmation modal dialog for destructive or critical actions.
+ *
+ * Renders a centered overlay with a warning icon, title, message body, and
+ * confirm/cancel buttons. The dialog auto-hides when `isOpen` is false.
+ *
+ * @example
+ * ```tsx
+ * <ITConfirmDialog
+ *   isOpen={showConfirm}
+ *   onClose={() => setShowConfirm(false)}
+ *   onConfirm={handleDelete}
+ *   title="Delete record"
+ *   message="This action is permanent and cannot be undone."
+ *   variant="danger"
+ *   loading={isDeleting}
+ * />
+ * ```
+ */
 export default function ITConfirmDialog({
   isOpen,
   onClose,

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

@@ -0,0 +1,59 @@
+import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as Stories from './ITDataTable.stories';
+
+<Meta of={Stories} />
+
+# 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, and width. |
+| `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` | `Record<string, string \| number \| boolean \| Date>` | `{}` | Filters managed outside the table (e.g., date pickers) merged with internal column filters. |
+| `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. |
+| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Row density preset. |
+| `itemsPerPageOptions` | `number[]` | `[5, 10, 20]` | Selectable page-size options. |
+| `defaultItemsPerPage` | `number` | `10` | Initial rows per page. |
+| `title` | `string \| ReactNode` | — | Heading displayed above the table. |
+
+## 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"
+/>
+```
+
+## Notes
+
+- Column filters support `"catalog"` (dropdown), `true` (text input), and `boolean` (tri-state toggle).
+- 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.
+
+## Stories
+
+<Primary />
+<Controls />
+<Stories />

package/src/components/data-table/dataTable.props.ts

@@ -59,11 +59,26 @@ export interface ITDataTableProps<T extends Record<string, unknown>> {
   reloadTrigger?: number | string | boolean;
 
   // Visual Inherited Props from ITTable
+  /** Additional CSS classes for the outer wrapper element. */
   containerClassName?: string;
+  /** Additional CSS classes applied directly to the `<table>` element. */
   className?: string;
+  /** Visual style variant: "default" | "striped" | "bordered" | "minimal". @default "default" */
   variant?: "default" | "striped" | "bordered" | "minimal";
+  /** Row density preset: "sm" | "md" | "lg". @default "md" */
   size?: "sm" | "md" | "lg";
+  /** Selectable page-size options for the paginator. @default [5, 10, 20] */
   itemsPerPageOptions?: number[];
+  /** Initial number of rows per page. @default 10 */
   defaultItemsPerPage?: number;
+  /** Optional heading displayed above the table. */
   title?: string | ReactNode;
+  /** Custom card renderer for mobile/tablet responsive view. Receives the row data. */
+  renderCard?: (row: T) => React.ReactNode;
+  /** Initial view mode. Defaults to "table". */
+  defaultView?: "table" | "cards";
+  /** Whether to show vertical borders between columns. Defaults to true. */
+  showVerticalBorder?: boolean;
+  /** Custom class for vertical borders (overrides the default subtle gray). */
+  verticalBorderClassname?: string;
 }