@axzydev/axzy_ui_system 1.4.8 → 1.5.0

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 />

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

@@ -1,26 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import ITTextarea from "@/components/atoms/textarea/textarea";
-
-const meta: Meta<typeof ITTextarea> = {
-  title: "Components/Inputs/ITTextarea",
-  component: ITTextarea,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITTextarea>;
-
-export const Default: Story = {
-  render: () => {
-    const [val, setVal] = useState("");
-    return <ITTextarea value={val} onChange={setVal} label="Descripción" placeholder="Escribe aquí..." />;
-  },
-};
-
-export const WithError: Story = {
-  args: { label: "Comentarios", value: "Mal", error: "Debe tener al menos 10 caracteres" },
-};
-
-export const Disabled: Story = {
-  args: { label: "Bloqueado", value: "No editable", disabled: true },
-};

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

@@ -1,47 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './tooltip.stories';
-
-<Meta of={StoriesData} />
-
-# ITTooltip
-
-Hover and focus tooltip that wraps a trigger element and displays contextual information in a small popup. Supports four placement positions with a triangular arrow pointing toward the trigger, configurable show delay, and customizable max-width.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `content` | `ReactNode` | — | The tooltip content to display on hover/focus. Accepts text or any ReactNode. |
-| `children` | `ReactNode` | — | The trigger element that reveals the tooltip on interaction. |
-| `position` | `"top" \| "bottom" \| "left" \| "right"` | `"top"` | Placement relative to children. |
-| `delay` | `number` | `200` | Delay in milliseconds before the tooltip becomes visible. |
-| `className` | `string` | — | Additional CSS classes applied to the wrapper element. |
-
-## Usage
-
-```tsx
-import { ITTooltip } from '@axzydev/axzy_ui_system';
-
-<ITTooltip content="Click to save" position="bottom">
-  <button>Save</button>
-</ITTooltip>
-
-<ITTooltip content={<span>Delete this item?</span>} position="top" delay={500}>
-  <IconButton icon={TrashIcon} />
-</ITTooltip>
-```
-
-## Notes
-
-- The tooltip appears after a **delay** (default 200ms) once the mouse enters the trigger, and disappears immediately on mouse leave.
-- **position** controls both the popup placement and the arrow direction: `top` (tooltip above, arrow pointing down), `bottom` (below, arrow up), `left` (to the left, arrow right), `right` (to the right, arrow left).
-- An optional triangular **arrow** is always rendered, styled with CSS borders pointing toward the trigger.
-- Tooltip body uses dark slate (`slate-800`) background with white text and rounded corners.
-- The wrapper is `inline-flex` by default, so it only takes as much width as the trigger — add `className` to constrain max-width on the tooltip content.
-- Supports keyboard focus: the tooltip also appears when the trigger element receives focus.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

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

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITTooltip from "@/components/atoms/tooltip/tooltip";
-import ITButton from "@/components/atoms/button/button";
-
-const meta: Meta<typeof ITTooltip> = {
-  title: "Components/Overlay/ITTooltip",
-  component: ITTooltip,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITTooltip>;
-
-export const Top: Story = {
-  args: { content: "Tooltip arriba", position: "top", children: <ITButton label="Hover me" /> },
-};
-
-export const Bottom: Story = {
-  args: { content: "Tooltip abajo", position: "bottom", children: <ITButton label="Hover me" /> },
-};