@axzydev/axzy_ui_system 1.2.13 → 1.2.14

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.2.13",
+  "version": "1.2.14",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -31,7 +31,9 @@
     "build": "pnpm bundle",
     "build:app": "tsc -b && vite build -c vite.app.config.ts",
     "build:css": "node scripts/build-css.mjs",
-    "lint": "eslint .",
+    "lint": "eslint . && node scripts/check-atomic-deps.mjs && node scripts/check-css-isolation.mjs",
+    "check:atomic": "node scripts/check-atomic-deps.mjs",
+    "check:css": "node scripts/check-css-isolation.mjs",
     "preview": "vite preview",
     "bundle": "tsup src/index.ts && node scripts/build-css.mjs",
     "watch": "tsup src/index.ts --watch",

package/src/App.tsx

@@ -13,6 +13,7 @@ import "./index.css";
 // Import Showcases
 import { HomeShowcase } from "./showcases/HomeShowcase";
 import { GettingStartedShowcase } from "./showcases/GettingStartedShowcase";
+import { SizesShowcase } from "./showcases/SizesShowcase";
 import {
   CardShowcase,
   LayoutShowcase,
@@ -62,12 +63,93 @@ import {
 
 type ViewMode = "home" | "ui-system";
 
+// Group definitions for the sidebar (UI System showroom). Estático: se define
+// fuera del componente para que su referencia sea estable en los deps del memo.
+const categories = [
+  {
+    id: "general",
+    label: "General",
+    icon: <FaHome />,
+    subitems: [
+      { id: "getting-started", label: "Getting Started" },
+      { id: "sizes", label: "Medidas · sm / md / lg" },
+    ],
+  },
+  {
+    id: "struc",
+    label: "Estructura & Layout",
+    icon: <FaCreditCard />,
+    subitems: [
+      { id: "layout", label: "ITLayout & ITNavbar" },
+      { id: "stack", label: "ITStack" },
+      { id: "flex", label: "ITFlex" },
+      { id: "grid", label: "ITGrid" },
+      { id: "card", label: "ITCard" },
+      { id: "text", label: "ITText" },
+      { id: "pageheader", label: "ITPageHeader" },
+      { id: "page", label: "ITPage" },
+      { id: "screen-dashboard", label: "Dashboard Ejemplo" },
+      { id: "screen-form", label: "Formulario Ejemplo" },
+    ],
+  },
+  {
+    id: "forms",
+    label: "Formularios & Inputs",
+    icon: <FaKeyboard />,
+    subitems: [
+      { id: "button", label: "ITButton" },
+      { id: "input", label: "ITInput" },
+      { id: "select", label: "ITSelect" },
+      { id: "searchselect", label: "ITSearchSelect" },
+      { id: "datepicker", label: "ITDatePicker" },
+      { id: "timepicker", label: "ITTimePicker" },
+      { id: "calendar", label: "ITCalendar" },
+      { id: "slidetoggle", label: "ITSlideToggle" },
+      { id: "dropfile", label: "ITDropfile" },
+      { id: "formbuilder", label: "ITFormBuilder" },
+    ],
+  },
+  {
+    id: "data",
+    label: "Visualización Datos",
+    icon: <FaTable />,
+    subitems: [
+      { id: "table", label: "ITTable" },
+      { id: "datatable", label: "ITDataTable" },
+      { id: "badget", label: "ITBadget" },
+      { id: "image", label: "ITImage" },
+    ],
+  },
+  {
+    id: "nav",
+    label: "Navegación & Control",
+    icon: <FaSlidersH />,
+    subitems: [
+      { id: "tabs", label: "ITTabs" },
+      { id: "stepper", label: "ITStepper" },
+      { id: "pagination", label: "ITPagination" },
+      { id: "triplefilter", label: "ITTripleFilter" },
+    ],
+  },
+  {
+    id: "feed",
+    label: "Feedback & Sistema",
+    icon: <FaRegBell />,
+    subitems: [
+      { id: "dialog", label: "ITDialog" },
+      { id: "toast", label: "ITToast" },
+      { id: "loader", label: "ITLoader" },
+      { id: "themeprovider", label: "ITThemeProvider" },
+    ],
+  },
+];
+
 function App() {
   const [view, setView] = useState<ViewMode>(() => {
     const hash = window.location.hash.replace("#", "");
     return hash.startsWith("ui-system") ? "ui-system" : "home";
   });
-  const [showroomActive, setShowroomActive] = useState("getting-started");
+  const [showroomActive, setShowroomActive] = useState("screen-form");
   const [searchTerm] = useState("");
   const [subitemConnector] = useState<
     "dot" | "|" | "none"
@@ -82,85 +164,6 @@ function App() {
     return () => window.removeEventListener("hashchange", onHashChange);
   }, []);
 
-  // Group definitions for the sidebar (UI System showroom)
-  const categories = [
-    {
-      id: "general",
-      label: "General",
-      icon: <FaHome />,
-      subitems: [
-        { id: "getting-started", label: "Getting Started" },
-      ],
-    },
-    {
-      id: "struc",
-      label: "Estructura & Layout",
-      icon: <FaCreditCard />,
-      subitems: [
-        { id: "layout", label: "ITLayout & ITNavbar" },
-        { id: "stack", label: "ITStack" },
-        { id: "flex", label: "ITFlex" },
-        { id: "grid", label: "ITGrid" },
-        { id: "card", label: "ITCard" },
-        { id: "text", label: "ITText" },
-        { id: "pageheader", label: "ITPageHeader" },
-        { id: "page", label: "ITPage" },
-        { id: "screen-dashboard", label: "Dashboard Ejemplo" },
-        { id: "screen-form", label: "Formulario Ejemplo" },
-      ],
-    },
-    {
-      id: "forms",
-      label: "Formularios & Inputs",
-      icon: <FaKeyboard />,
-      subitems: [
-        { id: "button", label: "ITButton" },
-        { id: "input", label: "ITInput" },
-        { id: "select", label: "ITSelect" },
-        { id: "searchselect", label: "ITSearchSelect" },
-        { id: "datepicker", label: "ITDatePicker" },
-        { id: "timepicker", label: "ITTimePicker" },
-        { id: "calendar", label: "ITCalendar" },
-        { id: "slidetoggle", label: "ITSlideToggle" },
-        { id: "dropfile", label: "ITDropfile" },
-        { id: "formbuilder", label: "ITFormBuilder" },
-      ],
-    },
-    {
-      id: "data",
-      label: "Visualización Datos",
-      icon: <FaTable />,
-      subitems: [
-        { id: "table", label: "ITTable" },
-        { id: "datatable", label: "ITDataTable" },
-        { id: "badget", label: "ITBadget" },
-        { id: "image", label: "ITImage" },
-      ],
-    },
-    {
-      id: "nav",
-      label: "Navegación & Control",
-      icon: <FaSlidersH />,
-      subitems: [
-        { id: "tabs", label: "ITTabs" },
-        { id: "stepper", label: "ITStepper" },
-        { id: "pagination", label: "ITPagination" },
-        { id: "triplefilter", label: "ITTripleFilter" },
-      ],
-    },
-    {
-      id: "feed",
-      label: "Feedback & Sistema",
-      icon: <FaRegBell />,
-      subitems: [
-        { id: "dialog", label: "ITDialog" },
-        { id: "toast", label: "ITToast" },
-        { id: "loader", label: "ITLoader" },
-        { id: "themeprovider", label: "ITThemeProvider" },
-      ],
-    },
-  ];
-
   // Filter sidebar navigation items based on search term
   const filteredNavigationItems = useMemo(() => {
     return categories
@@ -254,6 +257,8 @@ function App() {
         return <ScreenDashboardShowcase />;
       case "screen-form":
         return <ScreenFormShowcase />;
+      case "sizes":
+        return <SizesShowcase />;
       // Forms
       case "button":
         return <ButtonShowcase />;
@@ -308,7 +313,7 @@ function App() {
   };
 
   return (
-    <ITThemeProvider showFab={false}>
+    <ITThemeProvider showFab={false} density={0.98} radius={10} shadow={2}>
       {view === "home" ? (
         <div className="min-h-screen bg-slate-50 dark:bg-slate-950 py-10 px-4 sm:px-6 lg:px-8">
           <div className="max-w-6xl mx-auto">

package/src/components/{avatar → atoms/avatar}/avatar.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './avatar.stories';
+import * as StoriesData from './avatar.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITAvatar
 

package/src/components/{avatar → atoms/avatar}/avatar.stories.tsx

@@ -1,11 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import ITAvatar from "./avatar";
+import ITAvatar from "@/components/atoms/avatar/avatar";
 import { FaCircle } from "react-icons/fa";
 
 const meta: Meta<typeof ITAvatar> = {
   title: "Components/Data Display/ITAvatar",
   component: ITAvatar,
-  tags: ["autodocs"],
 };
 
 export default meta;

package/src/components/{avatar → atoms/avatar}/avatar.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { ITAvatarProps, AvatarSize } from "./avatar.props";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 const sizeMap: Record<AvatarSize, { container: string; text: string }> = {
   xs: { container: "w-6 h-6", text: "text-[10px]" },

package/src/components/{badget → atoms/badget}/badget.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './badget.stories';
+import * as StoriesData from './badget.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITBadget
 
@@ -14,7 +14,7 @@ Small status tags and labels for highlighting metadata, categories, or states. O
 | `label` | `string` | — | Text label displayed inside the badge. Overridden if `children` is provided. |
 | `children` | `ReactNode` | — | Custom content rendered inside the badge. Takes precedence over `label`. |
 | `color` | `ColorsTypes` | `"primary"` | Color theme key (`"primary"`, `"secondary"`, `"success"`, `"danger"`, `"warning"`, `"purple"`, `"info"`). |
-| `size` | `SizesTypes` | `"medium"` | Badge size (`"small"`, `"medium"`, `"large"`). |
+| `size` | `SizesTypes` | `"md"` | Badge size (`"sm"`, `"md"`, `"lg"`). |
 | `variant` | `"filled" \| "outlined"` | `"filled"` | Visual style — solid background or transparent with colored border. |
 | `className` | `string` | — | Additional CSS class names for the badge element. |
 
@@ -25,7 +25,7 @@ import { ITBadget } from '@axzydev/axzy_ui_system';
 
 <ITBadget label="Active" color="success" variant="filled" />
 
-<ITBadget color="danger" variant="outlined" size="small">
+<ITBadget color="danger" variant="outlined" size="sm">
   <span className="flex items-center gap-1">3 new</span>
 </ITBadget>
 ```

package/src/components/{badget → atoms/badget}/badget.props.ts

@@ -9,7 +9,7 @@ export interface ITBadgetProps {
   children?: React.ReactNode;
   /** Color theme key. Values come from the semantic color palette (e.g. `"primary"`, `"secondary"`, `"success"`, `"danger"`, `"warning"`, `"info"`, `"purple"`, `"error"`, `"gray"`). @default "primary" */
   color?: ColorsTypes;
-  /** Badge size. Valid values: `"small"`, `"medium"`, `"large"`. @default "medium" */
+  /** Badge size. Valid values: `"sm"`, `"md"`, `"lg"`. @default "md" */
   size?: SizesTypes;
   /** Badge visual style. Valid values: `"filled"`, `"outlined"`. @default "filled" */
   variant?: keyof typeof badgeVariants;

package/src/components/{badget → atoms/badget}/badget.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ITBadget from './badget';
+import ITBadget from '@/components/atoms/badget/badget';
 
 const meta = {
   title: 'Components/Data Display/ITBadge',
@@ -7,7 +7,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
   argTypes: {
     color: {
       control: 'select',

package/src/components/{badget → atoms/badget}/badget.tsx

@@ -5,7 +5,7 @@ import {
   badgeSizes,
 } from "@/types/badget.types";
 import { theme } from "@/theme/theme";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Small status tag or label with theme-based colors and filled/outlined variants.
@@ -14,7 +14,7 @@ import ITText from "@/components/text/text";
  * <ITBadget label="Active" color="success" variant="filled" />
  *
  * @example
- * <ITBadget color="danger" variant="outlined" size="small">
+ * <ITBadget color="danger" variant="outlined" size="sm">
  *   <span className="flex items-center gap-1">3 new</span>
  * </ITBadget>
  */
@@ -22,7 +22,7 @@ export default function ITBadget({
   children,
   label,
   color = "primary",
-  size = "medium",
+  size = "md",
   variant = "filled",
   className,
 }: ITBadgetProps) {

package/src/components/{button → atoms/button}/button.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './button.stories';
+import * as StoriesData from './button.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITButton
 
@@ -16,7 +16,7 @@ The primary action component for triggering user interactions. Supports 8 distin
 | `icon` | `ReactNode` | — | Icon element rendered before the label. |
 | `onClick` | `() => void` | — | Click handler for the button. |
 | `color` | `ColorsTypes` | `"primary"` | Color theme key (`"primary"`, `"secondary"`, `"success"`, `"danger"`, `"warning"`, `"purple"`, `"info"`). |
-| `size` | `SizesTypes` | `"medium"` | Button size (`"small"`, `"medium"`, `"large"`). |
+| `size` | `SizesTypes` | `"md"` | Button size (`"sm"`, `"md"`, `"lg"`). |
 | `variant` | `"filled" \| "outlined" \| "raised" \| "rounded" \| "text" \| "raised-text" \| "icon-only" \| "link"` | `"filled"` | Visual style variant. |
 | `disabled` | `boolean` | `false` | Disables interaction and applies reduced opacity. |
 | `className` | `string` | — | Additional CSS class names for the button element. |

package/src/components/{button → atoms/button}/button.props.ts

@@ -1,6 +1,6 @@
 import { buttonVariants } from "@/types/button.types";
-import { ColorsTypes } from "@app/types/colors.types";
-import { SizesTypes } from "@app/types/sizes.types";
+import { ColorsTypes } from "@/types/colors.types";
+import { SizesTypes } from "@/types/sizes.types";
 
 export interface ITButtonProps {
   /** Button text label. Overridden if `children` is provided. */
@@ -13,7 +13,7 @@ export interface ITButtonProps {
   onClick?: () => void;
   /** Color theme key. Values come from the semantic color palette (e.g. `"primary"`, `"secondary"`, `"success"`, `"danger"`, `"warning"`, `"info"`, `"purple"`, `"error"`, `"gray"`). @default "primary" */
   color?: ColorsTypes;
-  /** Button size. Valid values: `"small"`, `"medium"`, `"large"`. @default "medium" */
+  /** Button size. Valid values: `"sm"`, `"md"`, `"lg"`. @default "md" */
   size?: SizesTypes;
   /** Button visual style. Valid values: `"filled"`, `"outlined"`, `"raised"`, `"rounded"`, `"text"`, `"raised-text"`, `"icon-only"`, `"link"`. @default "filled" */
   variant?: keyof typeof buttonVariants;

package/src/components/{button → atoms/button}/button.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ITButton from './button';
+import ITButton from '@/components/atoms/button/button';
 
 const meta = {
   title: 'Components/Actions/ITButton',
@@ -7,7 +7,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
   argTypes: {
     color: {
       control: 'select',

package/src/components/{button → atoms/button}/button.tsx

@@ -1,12 +1,12 @@
 import {
   buttonSizes,
   buttonVariants,
-} from "@app/types/button.types";
+} from "@/types/button.types";
 import clsx from "clsx";
 import { useState } from "react";
 import { theme } from "@/theme/theme";
 import { ITButtonProps } from "./button.props";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Highly configurable action button supporting 8 visual variants, theme colors, 3 sizes, icons, and hover/focus states.
@@ -15,7 +15,7 @@ import ITText from "@/components/text/text";
  * <ITButton label="Submit" color="primary" variant="filled" onClick={() => {}} />
  *
  * @example
- * <ITButton color="danger" variant="outlined" size="small" icon={<FaTrash />}>
+ * <ITButton color="danger" variant="outlined" size="sm" icon={<FaTrash />}>
  *   Delete
  * </ITButton>
  */
@@ -26,7 +26,7 @@ export default function ITButton({
   onClick,
   type = "button",
   color = "primary",
-  size = "medium",
+  size = "md",
   disabled = false,
   className,
   variant = "filled",
@@ -52,7 +52,7 @@ export default function ITButton({
     const mainColor = themeConfig.backgroundColor; // The vibrant color
     const textColor = themeConfig.color; // Usually white for filled
 
-    let style: React.CSSProperties = {
+    const style: React.CSSProperties = {
       // fontSize: themeConfig.fontSize, // Removed to allow size prop to control font size
       fontWeight: themeConfig.fontWeight,
       // padding: themeConfig.padding, // Removed to allow size prop to control padding
@@ -82,9 +82,9 @@ export default function ITButton({
       style.backgroundColor = (isHovered && !disabled) ? `${mainColor}10` : "transparent";
       style.color = mainColor;
     } else if (isRaisedText) {
-      style.backgroundColor = "var(--card-bg, #ffffff)";
+      style.backgroundColor = "var(--it-card-bg, #ffffff)";
       style.color = mainColor;
-      if (isHovered && !disabled) style.backgroundColor = "var(--card-header-bg, #f8fafc)"; 
+      if (isHovered && !disabled) style.backgroundColor = "var(--it-card-header-bg, #f8fafc)"; 
     }
 
     // Apply focus style from theme (box-shadow ring)

package/src/components/{checkbox → atoms/checkbox}/checkbox.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './checkbox.stories';
+import * as StoriesData from './checkbox.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITCheckbox
 

package/src/components/{checkbox → atoms/checkbox}/checkbox.stories.tsx

@@ -1,12 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import ITCheckbox from "./checkbox";
-import ITStack from "../stack/stack";
+import ITCheckbox from "@/components/atoms/checkbox/checkbox";
+import ITStack from "@/components/atoms/stack/stack";
 
 const meta: Meta<typeof ITCheckbox> = {
   title: "Components/Inputs/ITCheckbox",
   component: ITCheckbox,
-  tags: ["autodocs"],
 };
 
 export default meta;

package/src/components/{checkbox → atoms/checkbox}/checkbox.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { ITCheckboxProps } from "./checkbox.props";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Checkbox component with label, indeterminate state, and disabled support. Uses a visually hidden native input for accessibility.

package/src/components/{divider → atoms/divider}/divider.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './divider.stories';
+import * as StoriesData from './divider.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITDivider
 

package/src/components/{divider → atoms/divider}/divider.stories.tsx

@@ -1,12 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import ITDivider from "./divider";
-import ITStack from "../stack/stack";
-import ITFlex from "../flex/flex";
+import ITDivider from "@/components/atoms/divider/divider";
+import ITStack from "@/components/atoms/stack/stack";
+import ITFlex from "@/components/atoms/flex/flex";
 
 const meta: Meta<typeof ITDivider> = {
   title: "Components/Layout/ITDivider",
   component: ITDivider,
-  tags: ["autodocs"],
 };
 
 export default meta;

package/src/components/{flex → atoms/flex}/flex.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './flex.stories';
+import * as StoriesData from './flex.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITFlex
 

package/src/components/{flex → atoms/flex}/flex.stories.tsx

@@ -1,10 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import ITFlex from "./flex";
+import ITFlex from "@/components/atoms/flex/flex";
 
 const meta: Meta<typeof ITFlex> = {
   title: "Layout/ITFlex",
   component: ITFlex,
-  tags: ["autodocs"],
   argTypes: {
     direction: {
       control: "select",

package/src/components/{grid → atoms/grid}/grid.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './grid.stories';
+import * as StoriesData from './grid.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITGrid
 

package/src/components/{grid → atoms/grid}/grid.stories.tsx

@@ -1,10 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import ITGrid from "./grid";
+import ITGrid from "@/components/atoms/grid/grid";
 
 const meta: Meta<typeof ITGrid> = {
   title: "Layout/ITGrid",
   component: ITGrid,
-  tags: ["autodocs"],
   argTypes: {
     spacing: { control: { type: "range", min: 0, max: 8, step: 1 } },
     columns: { control: { type: "number", min: 1, max: 12 } },

package/src/components/{image → atoms/image}/image.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './image.stories';
+import * as StoriesData from './image.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITImage
 

package/src/components/{image → atoms/image}/image.stories.tsx

@@ -1,11 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ITImage from './image';
+import ITImage from '@/components/atoms/image/image';
 
 const meta = {
   title: 'Components/Data Display/ITImage',
   component: ITImage,
   parameters: { layout: 'centered' },
-  tags: ['autodocs'],
   argTypes: {
     src: { control: 'text', description: 'Image source URL' },
     alt: { control: 'text', description: 'Alternative text for accessibility' },

package/src/components/{input → atoms/input}/input.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './input.stories';
+import * as StoriesData from './input.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITInput
 
@@ -23,7 +23,7 @@ A versatile form input component supporting text, password, email, number, texta
 | `touched` | `boolean` | `undefined` | Whether the field has been touched by the user. |
 | `required` | `boolean` | `false` | Mark the field as required (adds asterisk to label). |
 | `disabled` | `boolean` | `false` | Disable the input. |
-| `size` | `SizesTypes` | `'md'` | Size preset: `xs`, `sm`, `md`, `lg`, `xl`. |
+| `size` | `SizesTypes` | `'md'` | Size preset: `"sm"`, `"md"`, `"lg"`. |
 | `variant` | `ColorsTypes` | `undefined` | Color variant from the theme palette. |
 | `iconLeft` | `ReactNode` | `undefined` | Icon element rendered on the left side. |
 | `iconRight` | `ReactNode` | `undefined` | Icon element rendered on the right side. |

package/src/components/{input → atoms/input}/input.props.ts

@@ -1,5 +1,5 @@
-import { ColorsTypes } from "@app/types/colors.types";
-import { SizesTypes } from "@app/types/sizes.types";
+import { ColorsTypes } from "@/types/colors.types";
+import { SizesTypes } from "@/types/sizes.types";
 import { ReactNode } from "react";
 
 export interface ITInputProps {
@@ -40,7 +40,7 @@ export interface ITInputProps {
   minLength?: number;
   /** Color variant from the theme palette */
   variant?: ColorsTypes;
-  /** Size preset: "xs" | "sm" | "md" | "lg" | "xl" */
+  /** Size preset: "sm" | "md" | "lg". @default "md" */
   size?: SizesTypes;
   /** Disable the input */
   disabled?: boolean;

package/src/components/{input → atoms/input}/input.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ITInput from './input';
+import type { Meta } from '@storybook/react';
+import ITInput from '@/components/atoms/input/input';
 import { FaUser, FaLock, FaEnvelope } from 'react-icons/fa';
 
 const meta = {
@@ -8,7 +8,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
   argTypes: {
     type: {
       control: 'select',
@@ -20,7 +19,6 @@ const meta = {
 } satisfies Meta<typeof ITInput>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
 export const Default: any = {
   args: {