@axzydev/axzy_ui_system 1.2.6 → 1.2.8

package/src/components/table/table.tsx

@@ -1,11 +1,13 @@
 import { useTableState } from "@/hooks/useTableState";
 import { sizeStyles, variantStyles } from "@/types/table.types";
 import clsx from "clsx";
-import React from "react";
+import React, { useState } from "react";
 import {
   FaCheck,
   FaSpinner,
-  FaTimes
+  FaTimes,
+  FaTable,
+  FaThLarge
 } from "react-icons/fa";
 import { MdOutlineSwapVert } from "react-icons/md";
 import ITInput from "../input/input";
@@ -23,6 +25,23 @@ export const formatCurrencyMX = (value: number) => {
     currency: "MXN",
   });
 };
+
+/**
+ * A feature-rich data table with per-column filtering, sortable columns,
+ * pagination, boolean/catalog type support, and currency formatting.
+ *
+ * @example
+ * <ITTable
+ *   columns={[
+ *     { key: "name", label: "Name", type: "string", sortable: true },
+ *     { key: "active", label: "Active", type: "boolean", filter: true },
+ *     { key: "actions", label: "", type: "actions", actions: (row) => <ITButton>Edit</ITButton> },
+ *   ]}
+ *   data={users}
+ *   title="User List"
+ *   size="sm"
+ * />
+ */
 export default function ITTable<T extends Record<string, unknown>>({
   columns,
   data = [],
@@ -33,7 +52,13 @@ export default function ITTable<T extends Record<string, unknown>>({
   itemsPerPageOptions = [5, 10, 20],
   defaultItemsPerPage = 10,
   title,
+  renderCard,
+  defaultView = "table",
+  showVerticalBorder = true,
+  verticalBorderClassname,
 }: ITTableProps<T>) {
+  const [viewMode, setViewMode] = useState<"table" | "cards">(defaultView);
+
   const {
     currentPage,
     itemsPerPage,
@@ -261,103 +286,193 @@ export default function ITTable<T extends Record<string, unknown>>({
     }
   };
 
+  const renderDefaultCard = (row: T) => {
+    const dataCols = columns.filter((c) => c.type !== "actions");
+    const actionCol = columns.find((c) => c.type === "actions");
+    return (
+      <div className="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 p-3 space-y-2 shadow-sm">
+        {dataCols.map((col) => (
+          <div key={col.key} className="flex items-center justify-between gap-2">
+            <span className="text-[10px] font-bold uppercase tracking-wider text-slate-400 whitespace-nowrap flex-shrink-0 min-w-[70px]">
+              {col.label}
+            </span>
+            <span className="text-sm font-medium text-slate-800 dark:text-white text-right truncate">
+              {renderCellContent(col, row) as React.ReactNode}
+            </span>
+          </div>
+        ))}
+        {actionCol?.actions && (
+          <div className="flex items-center justify-end gap-2 pt-2 border-t border-slate-100 dark:border-slate-700">
+            {actionCol.actions(row)}
+          </div>
+        )}
+      </div>
+    );
+  };
+
   return (
     <div className={clsx("space-y-4 w-full", containerClassName)}>
       <div className="rounded-xl shadow-sm overflow-hidden" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
         {/* Header outside overflow */}
         {title && (
-          <div className="px-6 py-5 border-b border-secondary-100" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
+          <div className="px-6 py-5 flex items-center justify-between" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
             <ITText as="h2" className="text-xl font-bold text-secondary-900 leading-tight">{title}</ITText>
+            <div className="flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50">
+              <button
+                onClick={() => setViewMode("table")}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${
+                  viewMode === "table"
+                    ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700"
+                    : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
+                }`}
+              >
+                <FaTable size={11} />
+                Table
+              </button>
+              <button
+                onClick={() => setViewMode("cards")}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${
+                  viewMode === "cards"
+                    ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700"
+                    : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
+                }`}
+              >
+                <FaThLarge size={11} />
+                Cards
+              </button>
+            </div>
           </div>
         )}
 
-        {/* Scrollable Table */}
-        <div className="overflow-x-auto">
-          <table
-            className={clsx(
-              "min-w-max w-full text-sm text-left text-secondary-600",
-              variantStyles[variant],
-              sizeStyles[size]
-            )}
-          >
+        {!title && (
+          <div className="flex justify-end px-4 pt-3">
+            <div className="flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50">
+              <button
+                onClick={() => setViewMode("table")}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${
+                  viewMode === "table"
+                    ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700"
+                    : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
+                }`}
+              >
+                <FaTable size={11} />
+                Table
+              </button>
+              <button
+                onClick={() => setViewMode("cards")}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${
+                  viewMode === "cards"
+                    ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700"
+                    : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
+                }`}
+              >
+                <FaThLarge size={11} />
+                Cards
+              </button>
+            </div>
+          </div>
+        )}
 
-            <thead>
-              <tr className="bg-secondary-50 border-b border-secondary-200 text-xs uppercase tracking-wider font-semibold text-secondary-500">
-                {columns.map((col) => (
-                  <th
-                    key={col.key}
-                    scope="col"
-                    className={clsx("px-4 py-4 align-top", col.className)}
-                  >
-                    <div className="flex flex-col gap-3 min-w-[150px]">
-                      {/* Column header */}
-                      <div className="flex items-center justify-between gap-2">
-                        <ITText as="span" className="text-secondary-700 font-bold">{col.label}</ITText>
-                        {col.sortable && col.type !== "actions" && (
-                          <button
-                            onClick={() => handleSort(col.key)}
-                            className={`p-1 rounded-md transition-colors ${sortConfig?.key === col.key
-                                ? "bg-secondary-200 text-secondary-900"
-                                : "hover:bg-secondary-200 text-secondary-400 hover:text-secondary-700"
-                              }`}
-                            title={`Ordenar por ${col.label}`}
-                          >
-                            <MdOutlineSwapVert className="w-4 h-4" aria-hidden="true" />
-                          </button>
-                        )}
+        {viewMode === "cards" ? (
+          <div className="p-4 space-y-3 max-h-[400px] overflow-y-auto">
+            {currentData.length > 0 ? (
+              currentData.map((row, i) => (
+                <div key={i}>
+                  {renderCard ? renderCard(row) : renderDefaultCard(row)}
+                </div>
+              ))
+            ) : (
+              <div className="flex flex-col items-center justify-center py-12 text-secondary-400">
+                <ITText as="span" className="text-lg">No se encontraron resultados</ITText>
+                <ITText as="span" className="text-sm mt-1">Intenta ajustar los filtros</ITText>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table
+              className={clsx(
+                "min-w-max w-full text-sm text-left text-secondary-600",
+                showVerticalBorder && "[&_th]:border-r [&_th:last-child]:border-r-0 [&_td]:border-r [&_td:last-child]:border-r-0",
+                showVerticalBorder && (verticalBorderClassname || "[&_th]:border-slate-100 dark:[&_th]:border-slate-700/30 [&_td]:border-slate-100 dark:[&_td]:border-slate-700/30"),
+                variantStyles[variant],
+                sizeStyles[size]
+              )}
+            >
+              <thead>
+                <tr className="bg-secondary-50 text-xs uppercase tracking-wider font-semibold text-slate-700 dark:text-slate-200">
+                  {columns.map((col) => (
+                    <th
+                      key={col.key}
+                      scope="col"
+                      className={clsx("px-4 py-4 align-top", col.className)}
+                    >
+                      <div className="flex flex-col gap-3 min-w-[150px]">
+                        <div className="flex items-center justify-between gap-2">
+                            <ITText as="span" className="text-slate-900 dark:text-white font-bold">{col.label}</ITText>
+                          {col.sortable && col.type !== "actions" && (
+                            <button
+                              onClick={() => handleSort(col.key)}
+                              className={`p-1 rounded-md transition-colors ${sortConfig?.key === col.key
+                                  ? "bg-secondary-200 text-secondary-900"
+                                  : "hover:bg-secondary-200 text-secondary-400 hover:text-secondary-700"
+                                }`}
+                              title={`Ordenar por ${col.label}`}
+                            >
+                              <MdOutlineSwapVert className="w-4 h-4" aria-hidden="true" />
+                            </button>
+                          )}
+                        </div>
+                        <div className="w-full">
+                          {col.filter ? renderFilterInput(col) : null}
+                        </div>
                       </div>
-
-                      {/* Filter section */}
-                      <div className="w-full">
-                        {col.filter ? renderFilterInput(col) : null}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-100 dark:divide-slate-700/30">
+                {currentData.length > 0 ? (
+                  currentData.map((row, rowIndex) => (
+                    <tr
+                      key={rowIndex}
+                      className={clsx("hover:bg-secondary-50/50 transition-colors duration-150 group", variant === "striped" && "odd:bg-secondary-50/40 dark:odd:bg-slate-800/20")}
+                    >
+                      {columns.map((col) => (
+                        <td
+                          key={`${rowIndex}-${col.key}`}
+                          className={clsx("px-4 py-3 align-middle", col.className)}
+                        >
+                          {col.type === "actions" ? (
+                            <div className="flex items-center justify-center gap-2">
+                              {renderCellContent(col, row) as React.ReactNode}
+                            </div>
+                          ) : (
+                            <div className="text-secondary-700 font-medium">
+                              {renderCellContent(col, row) as React.ReactNode}
+                            </div>
+                          )}
+                        </td>
+                      ))}
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td colSpan={columns.length} className="px-6 py-12 text-center">
+                      <div className="flex flex-col items-center justify-center text-secondary-400">
+                        <ITText as="span" className="text-lg">No se encontraron resultados</ITText>
+                        <ITText as="span" className="text-sm mt-1">Intenta ajustar los filtros</ITText>
                       </div>
-                    </div>
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-secondary-100">
-              {currentData.length > 0 ? (
-                currentData.map((row, rowIndex) => (
-                  <tr
-                    key={rowIndex}
-                    className="hover:bg-secondary-50/50 transition-colors duration-150 group"
-                  >
-                    {columns.map((col) => (
-                      <td
-                        key={`${rowIndex}-${col.key}`}
-                        className={clsx("px-4 py-3 align-middle", col.className)}
-                      >
-                        {col.type === "actions" ? (
-                          <div className="flex items-center justify-center gap-2">
-                            {renderCellContent(col, row) as React.ReactNode}
-                          </div>
-                        ) : (
-                          <div className="text-secondary-700 font-medium">
-                            {renderCellContent(col, row) as React.ReactNode}
-                          </div>
-                        )}
-                      </td>
-                    ))}
+                    </td>
                   </tr>
-                ))
-              ) : (
-                <tr>
-                  <td colSpan={columns.length} className="px-6 py-12 text-center">
-                    <div className="flex flex-col items-center justify-center text-secondary-400">
-                      <ITText as="span" className="text-lg">No se encontraron resultados</ITText>
-                      <ITText as="span" className="text-sm mt-1">Intenta ajustar los filtros</ITText>
-                    </div>
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </table>
-        </div>
-
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
 
         {/* Pagination */}
-        <div className="rounded-b-xl border-t border-secondary-200 px-6 py-4" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
+        <div className="rounded-b-xl px-6 py-4" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
           <ITPagination
             currentPage={currentPage}
             totalPages={computedTotalPages}

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

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

@@ -1,18 +1,29 @@
 import { ReactNode } from "react";
 
 export interface ITTabItem {
+  /** Unique identifier for the tab. */
   id: string;
+  /** Display label shown on the tab button. */
   label: string;
+  /** Content rendered when this tab is active. */
   content: ReactNode;
+  /** Optional icon rendered beside the label. */
   icon?: ReactNode;
+  /** Whether the tab is disabled and non-interactive. */
   disabled?: boolean;
 }
 
 export interface ITTabsProps {
+  /** Array of tab definitions: id, label, content, icon, and disabled state. */
   items: ITTabItem[];
+  /** The id of the tab active by default (first item if omitted). */
   defaultActiveId?: string;
+  /** Callback fired when the active tab changes, receiving the new tab id. */
   onChange?: (id: string) => void;
+  /** Visual variant: "line" (underline indicator) or "pill" (rounded background). */
   variant?: 'line' | 'pill';
+  /** Additional CSS classes for the tab header row. */
   className?: string;
+  /** Additional CSS classes for the outermost wrapper. */
   containerClassName?: string;
 }

package/src/components/tabs/tabs.tsx

@@ -3,6 +3,20 @@ import { ITTabsProps } from './tabs.props';
 import { clsx } from 'clsx';
 import ITText from "@/components/text/text";
 
+/**
+ * Tabbed navigation component with "line" and "pill" visual variants.
+ * Manages its own active state internally via a defaultActiveId.
+ *
+ * @example
+ * <ITTabs
+ *   items={[
+ *     { id: "tab1", label: "General", content: <GeneralPanel /> },
+ *     { id: "tab2", label: "Settings", content: <SettingsPanel />, disabled: true },
+ *   ]}
+ *   defaultActiveId="tab1"
+ *   onChange={(id) => console.log("Active tab:", id)}
+ * />
+ */
 const ITTabs: React.FC<ITTabsProps> = ({
   items,
   defaultActiveId,

package/src/components/text/text.doc.mdx

@@ -0,0 +1,41 @@
+import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as Stories from './text.stories';
+
+<Meta of={Stories} />
+
+# ITText
+
+Semantic typography wrapper rendering any HTML text element. Foundation for all text in the system.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `as` | `'p' \| 'span' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'small' \| 'label' \| 'strong' \| 'em'` | `'p'` | HTML element to render |
+| `muted` | `boolean` | `false` | Apply muted style via CSS variable |
+| `children` | `ReactNode` | — | Text content |
+
+## Usage
+
+```tsx
+import { ITText } from '@axzydev/axzy_ui_system';
+
+<ITText>Default paragraph text</ITText>
+<ITText as="h1">Heading level 1</ITText>
+<ITText as="span" muted>Muted secondary text</ITText>
+<ITText as="small">Small print</ITText>
+<ITText as="strong">Bold emphasis</ITText>
+```
+
+## Notes
+
+- Polymorphic `as` prop renders any HTML text-level element
+- `muted` toggles a CSS variable for reduced-importance text
+- Used as the foundational text component throughout the system
+- Renders default paragraph (`<p>`) when no `as` specified
+
+## Stories
+
+<Primary />
+<Controls />
+<Stories />

package/src/components/text/text.props.ts

@@ -1,9 +1,14 @@
 import { ReactNode, ElementType, HTMLAttributes } from "react";
 
 export interface ITTextProps extends HTMLAttributes<HTMLElement> {
+  /** The content rendered inside the element. */
   children?: ReactNode;
+  /** Additional CSS classes applied to the element. */
   className?: string;
+  /** HTML element type to render (e.g. "p", "span", "h1", "label"). */
   as?: ElementType;
+  /** Applies muted text color (--color-text-muted) when true. */
   muted?: boolean;
+  /** Associates a label with a form element (rendered as `htmlFor` when `as` is "label"). */
   htmlFor?: string;
 }

package/src/components/text/text.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ITText from './text';
+
+const meta = {
+  title: 'Components/Layout & Navigation/ITText',
+  component: ITText,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+  argTypes: {
+    as: {
+      control: 'select',
+      options: ['p', 'span', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'small', 'strong', 'em', 'label'],
+      description: 'HTML element to render',
+    },
+    children: { control: 'text', description: 'Text content' },
+    muted: { control: 'boolean', description: 'Apply muted text color' },
+    className: { control: 'text', description: 'Additional CSS classes' },
+  },
+} satisfies Meta<typeof ITText>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Paragraph: Story = {
+  args: {
+    as: 'p',
+    children: 'This is a paragraph of text rendered via ITText.',
+    className: 'text-base',
+  },
+};
+
+export const Headings: Story = {
+  render: () => (
+    <div className="space-y-3">
+      <ITText as="h1" className="text-4xl font-bold">Heading 1</ITText>
+      <ITText as="h2" className="text-3xl font-bold">Heading 2</ITText>
+      <ITText as="h3" className="text-2xl font-semibold">Heading 3</ITText>
+      <ITText as="h4" className="text-xl font-semibold">Heading 4</ITText>
+      <ITText as="h5" className="text-lg font-medium">Heading 5</ITText>
+      <ITText as="h6" className="text-base font-medium">Heading 6</ITText>
+    </div>
+  ),
+};
+
+export const Muted: Story = {
+  args: {
+    as: 'p',
+    children: 'This text appears muted / secondary.',
+    muted: true,
+    className: 'text-sm',
+  },
+};
+
+export const InlineElements: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <ITText as="p">
+        This is <ITText as="strong" className="font-bold">bold</ITText>,{' '}
+        <ITText as="em" className="italic">italic</ITText>, and{' '}
+        <ITText as="small" className="text-xs">small</ITText> text.
+      </ITText>
+      <ITText as="p">
+        A <ITText as="span" className="text-primary-600 font-mono">span</ITText> can be used for inline styling.
+      </ITText>
+    </div>
+  ),
+};

package/src/components/text/text.tsx

@@ -1,5 +1,15 @@
 import { ITTextProps } from "./text.props";
 
+/**
+ * Semantic typography wrapper that renders any HTML element.
+ * Supports muted styling via the `muted` prop and passes through all standard HTML attributes.
+ *
+ * @example
+ * <ITText as="h1" className="text-2xl font-bold">Welcome</ITText>
+ *
+ * @example
+ * <ITText as="label" htmlFor="email" muted>Email Address</ITText>
+ */
 export default function ITText({
   children,
   as: Tag = "p",

package/src/components/textarea/textarea.doc.mdx

@@ -0,0 +1,64 @@
+import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as Stories from './textarea.stories';
+
+<Meta of={Stories} />
+
+# ITTextarea
+
+Multi-line text input with label, validation error display, character limit, and configurable resize behavior. Built on native `<textarea>` with consistent styling and focus ring effects.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | — | Controlled value of the textarea. |
+| `onChange` | `(value: string) => void` | — | Callback fired when the value changes, receiving the new string. |
+| `label` | `string` | — | Label text rendered above the textarea. |
+| `placeholder` | `string` | — | Placeholder text shown when the textarea is empty. |
+| `rows` | `number` | `4` | Number of visible text rows. |
+| `disabled` | `boolean` | `false` | Disables the textarea when true. |
+| `error` | `string` | — | Validation error message displayed below the textarea. |
+| `className` | `string` | — | Additional CSS classes for the wrapper. |
+| `name` | `string` | — | Name attribute for form submission and label association via `htmlFor`. |
+| `maxLength` | `number` | — | Maximum number of characters allowed. |
+| `resize` | `"none" \| "vertical" \| "horizontal" \| "both"` | `"vertical"` | Resize behavior of the textarea. |
+
+## Usage
+
+```tsx
+import { ITTextarea } from '@axzydev/axzy_ui_system';
+
+<ITTextarea
+  name="bio"
+  label="Biography"
+  value={bio}
+  onChange={setBio}
+  maxLength={500}
+  rows={6}
+  resize="vertical"
+  error={bio.length > 500 ? "Max 500 characters" : undefined}
+/>
+
+<ITTextarea
+  name="comments"
+  label="Comments"
+  placeholder="Write your feedback..."
+  rows={3}
+  resize="none"
+  disabled
+/>
+```
+
+## Notes
+
+- **resize** controls the native CSS resize property: `none` (no resize handle), `vertical` (height only), `horizontal` (width only), or `both`.
+- **error** renders a red error message below the textarea and applies red border/ring styling.
+- **maxLength** enforces a hard character limit via the native `maxLength` attribute — no visual counter included.
+- **rows** only sets the initial visible height; combined with `resize`, the user can adjust as needed.
+- Disabled state applies `opacity-50` and `cursor-not-allowed` with a gray background.
+
+## Stories
+
+<Primary />
+<Controls />
+<Stories />