@axzydev/axzy_ui_system 1.4.7 → 1.5.0

package/src/components/atoms/slider/slider.doc.mdx

@@ -1,49 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './slider.stories';
-
-<Meta of={StoriesData} />
-
-# ITSlider
-
-Range slider with configurable min, max, and step values. Displays the current value.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `number` | — | Current slider value |
-| `defaultValue` | `number` | — | Default uncontrolled value |
-| `min` | `number` | `0` | Minimum value |
-| `max` | `number` | `100` | Maximum value |
-| `step` | `number` | `1` | Step increment |
-| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Slider orientation |
-| `showValue` | `boolean` | `true` | Show current value label |
-| `ticks` | `boolean` | `false` | Show tick marks |
-| `tickLabels` | `string[]` | — | Custom labels for tick marks |
-| `color` | `string` | `'primary'` | Semantic color theme |
-| `disabled` | `boolean` | `false` | Disables the slider |
-
-## Usage
-
-```tsx
-import { ITSlider } from '@axzydev/axzy_ui_system';
-
-<ITSlider />
-<ITSlider min={0} max={100} step={10} defaultValue={50} />
-<ITSlider orientation="vertical" showValue ticks color="success" />
-<ITSlider tickLabels={['Low', 'Mid', 'High']} step={50} max={100} />
-```
-
-## Notes
-
-- Current value displayed by default; set `showValue={false}` to hide
-- `ticks` renders tick marks at each step interval
-- `tickLabels` provides custom string labels for tick positions
-- Orientation supports horizontal and vertical layouts
-- All semantic color themes supported
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/atoms/slider/slider.stories.tsx

@@ -1,29 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITSlider from "@/components/atoms/slider/slider";
-import { useState } from "react";
-
-const meta: Meta<typeof ITSlider> = {
-  title: "Components/Inputs/ITSlider",
-  component: ITSlider,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITSlider>;
-
-export const Default: Story = {
-  render: () => {
-    const [val, setVal] = useState(50);
-    return <ITSlider value={val} onChange={setVal} min={0} max={100} label="Volume" />;
-  },
-};
-
-export const WithRange: Story = {
-  render: () => {
-    const [val, setVal] = useState(3);
-    return <ITSlider value={val} onChange={setVal} min={1} max={10} step={1} label="Items per page" />;
-  },
-};
-
-export const Disabled: Story = {
-  render: () => <ITSlider value={40} onChange={() => {}} disabled label="Disabled" />,
-};

package/src/components/atoms/stack/stack.doc.mdx

@@ -1,126 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './stack.stories';
-
-<Meta of={StoriesData} />
-
-# ITStack
-
-ITStack is a simplified flexbox layout primitive for consistent spacing and alignment. It controls direction, gap, cross-axis alignment, main-axis justification, and flex wrapping in a single component, with optional dividers between children.
-
-ITStack powers most internal layouts across the AXZY UI System — from button toolbars and form rows to card lists and centered hero sections.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | — | Stack children elements. |
-| `direction` | `"column" \| "row" \| "row-reverse" \| "column-reverse"` | `"column"` | Flex direction. |
-| `spacing` | `number` (0–12) | `0` | Gap between children in `0.25rem` units. `spacing={4}` = `1rem` gap. |
-| `alignItems` | `"start" \| "end" \| "center" \| "stretch" \| "baseline"` | — | Cross-axis alignment: vertical in row, horizontal in column. |
-| `justifyContent` | `"start" \| "end" \| "center" \| "between" \| "around" \| "evenly"` | — | Main-axis distribution of children. |
-| `flexWrap` | `"nowrap" \| "wrap" \| "wrap-reverse"` | — | Whether children wrap to the next line. |
-| `divider` | `ReactNode` | — | Optional element rendered between each pair of children via `cloneElement`. |
-| `className` | `string` | — | Additional CSS classes on the container. |
-| `style` | `CSSProperties` | — | Inline styles on the container. |
-| `as` | `ElementType` | `"div"` | HTML element to render as — `"section"`, `"nav"`, `"ul"`, `"form"`, etc. |
-
-## Usage
-
-```tsx
-import { ITStack } from '@axzydev/axzy_ui_system';
-
-// ── Vertical (default) ──
-<ITStack spacing={4}>
-  <h2>Section Title</h2>
-  <p>Section content goes here.</p>
-</ITStack>
-
-// ── Horizontal toolbar ──
-<ITStack direction="row" spacing={2} alignItems="center" justifyContent="between">
-  <ITButton>Cancel</ITButton>
-  <ITButton color="primary">Save</ITButton>
-</ITStack>
-
-// ── Form row with wrap ──
-<ITStack direction="row" spacing={3} flexWrap="wrap">
-  <ITInput name="first" label="First Name" />
-  <ITInput name="last" label="Last Name" />
-  <ITInput name="email" label="Email" />
-</ITStack>
-
-// ── Card list with dividers ──
-<ITStack spacing={0} divider={<hr />}>
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-</ITStack>
-
-// ── Tag cloud ──
-<ITStack direction="row" spacing={1} flexWrap="wrap">
-  {tags.map((t) => <ITBadget key={t} label={t} />)}
-</ITStack>
-
-// ── Centered hero ──
-<ITStack spacing={4} alignItems="center" justifyContent="center" className="h-64">
-  <h1>Hero Title</h1>
-  <p>Subtitle text</p>
-  <ITButton label="CTA" />
-</ITStack>
-
-// ── Semantic list (as="ul") ──
-<ITStack as="ul" spacing={2}>
-  <li>First item</li>
-  <li>Second item</li>
-</ITStack>
-```
-
-## Variants & Patterns
-
-### Direction
-- **column** — default; stacks children vertically.
-- **row** — stacks children horizontally (toolbars, button groups).
-- **row-reverse** / **column-reverse** — reverse the visual order.
-
-### Spacing
-- Measured in 0.25rem units (Tailwind spacing scale).
-- `spacing={0}` = no gap (compact).
-- `spacing={4}` = 1rem (comfortable).
-- `spacing={8}` = 2rem (breathing room).
-
-### Justify Content (main axis)
-- **start** — children packed at the start.
-- **center** — children centered.
-- **end** — children packed at the end.
-- **between** — first/last at edges, others spaced evenly.
-- **around** — equal space around each child.
-- **evenly** — equal space between all items and edges.
-
-### Align Items (cross axis)
-- **start** — align to the start of the cross axis.
-- **center** — center on the cross axis.
-- **end** — align to the end.
-- **stretch** — stretch to fill (default CSS flex behavior).
-- **baseline** — align text baselines.
-
-### Wrap
-- **nowrap** — default; overflow if needed.
-- **wrap** — children wrap to the next line when out of space (great for tags, chips).
-- **wrap-reverse** — wrap in reverse order.
-
-### Divider
-- Takes a single React element, cloned between each pair of children.
-- Common dividers: `<hr />`, `<div className="h-px bg-slate-200" />`, vertical bars for row direction.
-
-## Notes
-
-- ITStack is **always** `display: flex` — use `direction` to switch between vertical/horizontal.
-- For complex multi-axis layouts (direction + wrap + alignment simultaneously), prefer **ITFlex**.
-- For CSS Grid layouts (columns), use **ITGrid**.
-- Spacing is applied via the CSS `gap` property, cleanly separating layout from children.
-- Set `as="ul"` and wrap children in `<li>` for semantic list rendering.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/atoms/stack/stack.stories.tsx

@@ -1,283 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import ITStack from "@/components/atoms/stack/stack";
-
-const meta: Meta<typeof ITStack> = {
-  title: "Layout/ITStack",
-  component: ITStack,
-  argTypes: {
-    direction: {
-      control: "select",
-      options: ["row", "column", "row-reverse", "column-reverse"],
-      description: "Flex direction. Default: column.",
-    },
-    spacing: {
-      control: { type: "range", min: 0, max: 16, step: 1 },
-      description: "Gap between children in 0.25rem units. Default: 0.",
-    },
-    alignItems: {
-      control: "select",
-      options: [undefined, "start", "end", "center", "stretch", "baseline"],
-      description: "Cross-axis alignment.",
-    },
-    justifyContent: {
-      control: "select",
-      options: [undefined, "start", "end", "center", "between", "around", "evenly"],
-      description: "Main-axis justification.",
-    },
-    flexWrap: {
-      control: "select",
-      options: [undefined, "nowrap", "wrap", "wrap-reverse"],
-      description: "Flex wrap behavior.",
-    },
-    as: {
-      control: "select",
-      options: ["div", "section", "nav", "ul", "ol", "main", "article", "header", "footer", "aside", "form"],
-      description: "HTML element to render.",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ITStack>;
-
-const Box = ({ children, className = "" }: { children: string; className?: string }) => (
-  <div className={`bg-primary-100 text-primary-800 rounded-lg p-4 text-center font-medium ${className}`}>
-    {children}
-  </div>
-);
-
-// ── Basic direction examples ──
-
-export const Vertical: Story = {
-  args: { direction: "column", spacing: 2 },
-  render: (args) => (
-    <ITStack {...args}>
-      <Box>Item 1</Box>
-      <Box>Item 2</Box>
-      <Box>Item 3</Box>
-    </ITStack>
-  ),
-};
-
-export const Horizontal: Story = {
-  args: { direction: "row", spacing: 2 },
-  render: (args) => (
-    <ITStack {...args}>
-      <Box>Item 1</Box>
-      <Box>Item 2</Box>
-      <Box>Item 3</Box>
-    </ITStack>
-  ),
-};
-
-// ── All direction variants ──
-
-export const AllDirections: Story = {
-  render: () => (
-    <ITStack spacing={6}>
-      {(["column", "row", "column-reverse", "row-reverse"] as const).map((dir) => (
-        <div key={dir}>
-          <p className="text-xs font-semibold text-slate-400 mb-1.5 uppercase tracking-wider">{dir}</p>
-          <div className="bg-slate-50 dark:bg-slate-900/50 rounded-xl p-4 border border-dashed border-slate-200 dark:border-slate-700">
-            <ITStack direction={dir} spacing={2}>
-              <Box>First</Box>
-              <Box>Second</Box>
-              <Box>Third</Box>
-            </ITStack>
-          </div>
-        </div>
-      ))}
-    </ITStack>
-  ),
-};
-
-// ── Spacing variants ──
-
-export const SpacingVariants: Story = {
-  render: () => (
-    <ITStack spacing={4}>
-      {[0, 1, 2, 4, 6, 8, 10, 12].map((gap) => (
-        <div key={gap}>
-          <p className="text-xs font-semibold text-slate-400 mb-1.5">spacing={gap} — {gap * 0.25}rem</p>
-          <div className="bg-slate-50 dark:bg-slate-900/50 rounded-xl p-4">
-            <ITStack direction="row" spacing={gap}>
-              <Box>Item 1</Box>
-              <Box>Item 2</Box>
-              <Box>Item 3</Box>
-            </ITStack>
-          </div>
-        </div>
-      ))}
-    </ITStack>
-  ),
-};
-
-// ── Justify Content showcase ──
-
-export const JustifyContent: Story = {
-  render: () => (
-    <ITStack spacing={2}>
-      {(["start", "center", "end", "between", "around", "evenly"] as const).map((j) => (
-        <div key={j}>
-          <p className="text-xs font-semibold text-slate-400 mb-1.5">{j}</p>
-          <div className="bg-slate-50 dark:bg-slate-900/50 rounded-xl p-4">
-            <ITStack direction="row" spacing={2} justifyContent={j} className="w-full">
-              <div className="w-10 h-10 rounded-lg bg-primary-400/60" />
-              <div className="w-10 h-10 rounded-lg bg-cyan-400/60" />
-              <div className="w-10 h-10 rounded-lg bg-violet-400/60" />
-            </ITStack>
-          </div>
-        </div>
-      ))}
-    </ITStack>
-  ),
-};
-
-// ── Align Items showcase ──
-
-export const AlignItems: Story = {
-  render: () => (
-    <ITStack spacing={2}>
-      {(["start", "center", "end", "stretch", "baseline"] as const).map((a) => (
-        <div key={a}>
-          <p className="text-xs font-semibold text-slate-400 mb-1.5">{a}</p>
-          <div className="bg-slate-50 dark:bg-slate-900/50 rounded-xl p-4">
-            <ITStack direction="row" spacing={2} alignItems={a} className="h-20 border border-dashed border-slate-300 dark:border-slate-600 rounded-lg">
-              <div className="w-10 h-6 rounded bg-primary-400/60" />
-              <div className="w-10 h-12 rounded bg-cyan-400/60" />
-              <div className="w-10 h-8 rounded bg-violet-400/60" />
-            </ITStack>
-          </div>
-        </div>
-      ))}
-    </ITStack>
-  ),
-};
-
-// ── With interactive controls ──
-
-export const Playground: Story = {
-  render: function PlaygroundStory() {
-    const [direction, setDirection] = useState<"row" | "column">("column");
-    const [spacing, setSpacing] = useState(3);
-    const [showDivider, setShowDivider] = useState(false);
-
-    return (
-      <ITStack spacing={6}>
-        <ITStack direction="row" spacing={3} flexWrap="wrap">
-          <label className="flex items-center gap-2 text-sm">
-            <span className="text-slate-500">Direction:</span>
-            <select value={direction} onChange={(e) => setDirection(e.target.value as any)} className="rounded border px-2 py-1 text-sm bg-white dark:bg-slate-800">
-              <option value="column">Column</option>
-              <option value="row">Row</option>
-            </select>
-          </label>
-          <label className="flex items-center gap-2 text-sm">
-            <span className="text-slate-500">Spacing:</span>
-            <input type="range" min={0} max={12} value={spacing} onChange={(e) => setSpacing(Number(e.target.value))} className="w-24" />
-            <span className="text-xs font-mono">{spacing}</span>
-          </label>
-          <label className="flex items-center gap-2 text-sm">
-            <input type="checkbox" checked={showDivider} onChange={(e) => setShowDivider(e.target.checked)} />
-            <span className="text-slate-500">Divider</span>
-          </label>
-        </ITStack>
-        <div className="bg-slate-50 dark:bg-slate-900/50 rounded-xl p-6 border border-dashed border-slate-200 dark:border-slate-700">
-          <ITStack
-            direction={direction}
-            spacing={spacing}
-            divider={showDivider ? <div className={`${direction === "row" ? "w-px h-8" : "h-px w-full"} bg-slate-300 dark:bg-slate-600 self-center`} /> : undefined}
-          >
-            <Box>Item 1</Box>
-            <Box>Item 2</Box>
-            <Box>Item 3</Box>
-          </ITStack>
-        </div>
-        <pre className="text-xs bg-slate-950 text-slate-200 rounded-lg p-3 overflow-x-auto">
-{`<ITStack direction="${direction}" spacing={${spacing}}${showDivider ? `\n  divider={${direction === "row" ? '<div className="w-px h-8" />' : '<div className="h-px w-full" />'}}` : ""}>
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</ITStack>`}
-        </pre>
-      </ITStack>
-    );
-  },
-};
-
-// ── Real-world examples ──
-
-export const ToolbarExample: Story = {
-  render: () => (
-    <div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4 w-full max-w-lg">
-      <ITStack direction="row" spacing={2} justifyContent="between" alignItems="center">
-        <ITStack direction="row" spacing={1} alignItems="center">
-          <p className="text-sm font-bold text-slate-700 dark:text-slate-200">Document</p>
-          <span className="text-xs text-slate-400">• Saved</span>
-        </ITStack>
-        <ITStack direction="row" spacing={1}>
-          <div className="px-3 py-1.5 rounded-md bg-primary-500 text-white text-xs font-medium cursor-pointer">Save</div>
-          <div className="px-3 py-1.5 rounded-md bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 text-xs cursor-pointer">Cancel</div>
-        </ITStack>
-      </ITStack>
-    </div>
-  ),
-};
-
-export const FormRowExample: Story = {
-  render: () => (
-    <div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4 w-full max-w-xl">
-      <ITStack direction="row" spacing={3} flexWrap="wrap">
-        {["First Name", "Last Name", "Email"].map((label) => (
-          <div key={label} className="flex-1 min-w-[140px]">
-            <p className="text-xs font-semibold text-slate-500 mb-1">{label}</p>
-            <input className="w-full h-9 rounded-md border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-800/50 px-3 text-sm" placeholder={label} readOnly />
-          </div>
-        ))}
-      </ITStack>
-    </div>
-  ),
-};
-
-export const TagCloudExample: Story = {
-  render: () => {
-    const tags = ["React", "TypeScript", "Tailwind CSS", "Vite", "Storybook", "CSS Variables", "Flexbox", "Accessibility", "Dark Mode", "Theming", "Responsive"];
-    return (
-      <div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4 w-full max-w-lg">
-        <ITStack direction="row" spacing={1} flexWrap="wrap">
-          {tags.map((tag) => (
-            <span key={tag} className="px-2.5 py-1 rounded-full text-xs font-medium bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400 border border-primary-200 dark:border-primary-800">
-              {tag}
-            </span>
-          ))}
-        </ITStack>
-      </div>
-    );
-  },
-};
-
-export const SectionWithDividers: Story = {
-  render: () => (
-    <div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 w-full max-w-sm">
-      <ITStack spacing={0} divider={<div className="h-px bg-slate-100 dark:bg-slate-700" />}>
-        {["Profile Settings", "Security & Privacy", "Notifications", "Billing & Plans", "API Keys"].map((item) => (
-          <div key={item} className="flex items-center justify-between py-3 px-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 cursor-pointer transition-colors">
-            <span className="text-sm text-slate-700 dark:text-slate-200">{item}</span>
-            <span className="text-slate-300 dark:text-slate-600">→</span>
-          </div>
-        ))}
-      </ITStack>
-    </div>
-  ),
-};
-
-export const CenteredHero: Story = {
-  render: () => (
-    <ITStack spacing={4} alignItems="center" justifyContent="center" className="h-64 bg-slate-50 dark:bg-slate-900/50 rounded-xl border border-dashed border-slate-200 dark:border-slate-700">
-      <h2 className="text-2xl font-bold text-slate-800 dark:text-white">Welcome back</h2>
-      <p className="text-slate-500 dark:text-slate-400 text-sm">Select a workspace to continue</p>
-      <div className="px-4 py-2 rounded-lg bg-primary-500 text-white text-sm font-medium cursor-pointer">Get Started</div>
-    </ITStack>
-  ),
-};

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

@@ -1,41 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './text.stories';
-
-<Meta of={StoriesData} />
-
-# 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/atoms/text/text.stories.tsx

@@ -1,66 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ITText from '@/components/atoms/text/text';
-
-const meta = {
-  title: 'Components/Layout & Navigation/ITText',
-  component: ITText,
-  parameters: { layout: 'centered' },
-  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/atoms/textarea/textarea.doc.mdx

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