@axzydev/axzy_ui_system 1.2.13 → 1.2.15

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

@@ -3,8 +3,8 @@ import clsx from "clsx";
 import { ITInputProps } from "./input.props";
 import { KeyboardEvent, useState, useEffect, useRef, useCallback } from "react";
 import { theme } from "@/theme/theme";
-import { disabledOverlay, iconAbsoluteLeft, iconAbsoluteRight, inputError, inputLabel } from "@/utils/styles";
-import ITText from "@/components/text/text";
+import { disabledOverlay, iconAbsoluteLeft, iconAbsoluteRight, inputError, inputLabel, inputFieldStyle } from "@/utils/styles";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Text input component with label, validation error display, icon slots,
@@ -65,7 +65,8 @@ export default function ITInput({
   min,
   max,
   readOnly = false,
-  focusContent
+  focusContent,
+  size = "md"
 }: ITInputProps) {
   const isCheckboxOrRadio = type === "checkbox" || type === "radio";
   const isNumberType = type === "number";
@@ -83,17 +84,7 @@ export default function ITInput({
   const inputTheme = (theme as any).input || {};
 
   const getStyle = () => {
-    const style: React.CSSProperties = {
-      backgroundColor: inputTheme.backgroundColor,
-      borderColor: inputTheme.borderColor,
-      borderRadius: inputTheme.borderRadius,
-      padding: inputTheme.padding,
-      fontSize: inputTheme.fontSize,
-      borderWidth: '1px',
-      borderStyle: 'solid',
-      transition: 'all 0.2s',
-      color: 'var(--input-text-color, var(--color-secondary-900))', // Theme-aware text color
-    };
+    const style = inputFieldStyle(inputTheme, size);
 
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;

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

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

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import ITLoader from "./loader";
+import ITLoader from "@/components/atoms/loader/loader";
 
 const meta: Meta<typeof ITLoader> = {
   title: "Components/Feedback/ITLoader",
@@ -7,7 +7,6 @@ const meta: Meta<typeof ITLoader> = {
   parameters: {
     layout: "centered",
   },
-  tags: ["autodocs"],
   argTypes: {
     size: {
       control: "select",
@@ -82,7 +81,7 @@ export const AllColors: Story = {
 };
 
 export const AllVariants: Story = {
-    render: (args) => (
+    render: () => (
       <div className="flex flex-col gap-8 items-center">
         <div className="flex gap-4 items-center">
              <span className="w-20 text-sm font-bold text-gray-500">Spinner</span>

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

@@ -1,7 +1,7 @@
 import { theme } from "@/theme/theme";
 import { LoaderSize, sizeClasses } from "@/types/loader.types";
 import { LoaderProps } from "./loader.props";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Loading indicators with multiple animation types: spinner, dots, pulse,

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

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

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

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

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

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

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

@@ -1,12 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import ITProgress from "./progress";
-import ITButton from "../button/button";
+import ITProgress from "@/components/atoms/progress/progress";
+import ITButton from "@/components/atoms/button/button";
 
 const meta: Meta<typeof ITProgress> = {
   title: "Components/Feedback/ITProgress",
   component: ITProgress,
-  tags: ["autodocs"],
 };
 
 export default meta;

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

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

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

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

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

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { ITRadioGroupProps } from "./radio.props";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Radio button group with configurable layout direction and themed selection styling.

package/src/components/{segmented-control → atoms/segmented-control}/segmented-control.doc.mdx

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

package/src/components/{segmented-control → atoms/segmented-control}/segmented-control.stories.tsx

@@ -1,12 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 import { FaList, FaTh } from "react-icons/fa";
-import ITSegmentedControl from "./segmented-control";
+import ITSegmentedControl from "@/components/atoms/segmented-control/segmented-control";
 
 const meta: Meta<typeof ITSegmentedControl> = {
   title: "Components/Inputs/ITSegmentedControl",
   component: ITSegmentedControl,
-  tags: ["autodocs"],
 };
 
 export default meta;

package/src/components/{segmented-control → atoms/segmented-control}/segmented-control.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { ITSegmentedControlProps } from "./segmented-control.props";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 const sizeMap = {
   sm: { button: "px-2.5 py-1.5 text-[11px]", container: "p-0.5" },

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import ITSlideToggle from "./slide";
+import ITSlideToggle from "@/components/atoms/slide/slide";
 import { useState } from "react";
 
 const meta: Meta<typeof ITSlideToggle> = {
@@ -8,7 +8,6 @@ const meta: Meta<typeof ITSlideToggle> = {
   parameters: {
     layout: "centered",
   },
-  tags: ["autodocs"],
   argTypes: {
     activeColor: {
       control: "select",

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

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

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

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

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

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { ITSliderProps } from "./slider.props";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Range slider control with min/max/step and optional label displaying the current value.

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

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

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

@@ -1,11 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import ITStack from "./stack";
+import ITStack from "@/components/atoms/stack/stack";
 
 const meta: Meta<typeof ITStack> = {
   title: "Layout/ITStack",
   component: ITStack,
-  tags: ["autodocs"],
   argTypes: {
     direction: {
       control: "select",
@@ -262,7 +261,7 @@ 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, i) => (
+        {["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>

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

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

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

@@ -1,11 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ITText from './text';
+import ITText from '@/components/atoms/text/text';
 
 const meta = {
   title: 'Components/Layout & Navigation/ITText',
   component: ITText,
   parameters: { layout: 'centered' },
-  tags: ['autodocs'],
   argTypes: {
     as: {
       control: 'select',

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

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

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

@@ -1,5 +1,3 @@
-import { InputHTMLAttributes } from "react";
-
 export interface ITTextareaProps {
   /** Controlled value of the textarea. */
   value?: string;

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

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

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

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { ITTextareaProps } from "./textarea.props";
 import { inputLabel, inputError } from "@/utils/styles";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 const resizeMap = {
   none: "resize-none",

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

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

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

@@ -1,11 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import ITTooltip from "./tooltip";
-import ITButton from "../button/button";
+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,
-  tags: ["autodocs"],
 };
 
 export default meta;

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

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import clsx from "clsx";
 import { ITTooltipProps, TooltipPosition } from "./tooltip.props";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 const positionClasses: Record<TooltipPosition, string> = {
   top: "bottom-full left-1/2 -translate-x-1/2 mb-2",

package/src/components/isolation/isolation.stories.tsx

@@ -0,0 +1,202 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import ITCard from "@/components/molecules/card/card";
+import ITDatePicker from "@/components/molecules/date-picker/datePicker";
+import ITInput from "@/components/atoms/input/input";
+import ITTextarea from "@/components/atoms/textarea/textarea";
+import ITSelect from "@/components/molecules/select/select";
+import ITButton from "@/components/atoms/button/button";
+import ITTable from "@/components/molecules/table/table";
+import ITDialog from "@/components/organisms/dialog/dialog";
+import ITText from "@/components/atoms/text/text";
+
+/**
+ * Stories de validación de AISLAMIENTO CSS.
+ *
+ * Verifican que anidar componentes (p.ej. ITDatePicker dentro de ITCard) no
+ * produzca interferencia de estilos entre padre e hijo. La arquitectura
+ * garantiza esto porque cada componente estila SOLO su propio subárbol con
+ * clases/utilities propias, nunca con selectores de ancestro genéricos.
+ */
+const meta = {
+  title: "Isolation/CSS Encapsulation",
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "Validación de aislamiento: un componente hijo (ITDatePicker) dentro de un contenedor (ITCard) no debe heredar ni colisionar estilos del padre, y viceversa.",
+      },
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+const DatePickerWrapper = () => {
+  const [date, setDate] = useState<Date>(new Date());
+  return (
+    <ITDatePicker
+      name="inside-card-date"
+      label="Fecha"
+      value={date}
+      onChange={(e: any) => setDate(e.target.value)}
+    />
+  );
+};
+
+const InputWrapper = () => {
+  const [value, setValue] = useState("");
+  return (
+    <ITInput
+      name="name"
+      label="Nombre"
+      placeholder="Escribe tu nombre"
+      value={value}
+      onChange={(e: any) => setValue(e.target.value)}
+    />
+  );
+};
+
+const TextareaWrapper = () => {
+  const [value, setValue] = useState("");
+  return (
+    <ITTextarea
+      name="notes"
+      label="Notas"
+      placeholder="Detalles..."
+      value={value}
+      onChange={(e: any) => setValue(e.target.value)}
+    />
+  );
+};
+
+const SelectWrapper = () => {
+  const [value, setValue] = useState("");
+  return (
+    <ITSelect
+      name="country"
+      label="País"
+      placeholder="Selecciona"
+      value={value}
+      options={[
+        { value: "mx", label: "México" },
+        { value: "us", label: "Estados Unidos" },
+        { value: "es", label: "España" },
+      ]}
+      onChange={(e: any) => setValue(e.target.value)}
+    />
+  );
+};
+
+export const ITDatePickerInsideCard: Story = {
+  render: () => (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <ITCard title="Card A">
+        <p className="mb-4 text-secondary-600">
+          Un ITDatePicker dentro de un ITCard. Sus estilos son independientes:
+          el popover del calendario, el input y el label no se ven afectados por
+          la tipografía/color del card.
+        </p>
+        <DatePickerWrapper />
+      </ITCard>
+      <ITCard title="Card B" onClick={() => {}}>
+        <p className="mb-4 text-secondary-600">
+          Card interactivo (hover). El date picker hermano debe seguir
+          comportándose igual, sin contaminación visual entre ambos cards.
+        </p>
+        <DatePickerWrapper />
+      </ITCard>
+    </div>
+  ),
+};
+
+export const FormControlsInsideCard: Story = {
+  render: () => (
+    <ITCard title="Formulario en Card">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <InputWrapper />
+        <SelectWrapper />
+        <DatePickerWrapper />
+        <TextareaWrapper />
+      </div>
+      <div className="mt-4 flex justify-end gap-2">
+        <ITButton variant="outlined" color="secondary" label="Cancelar" />
+        <ITButton variant="filled" color="primary" label="Guardar" />
+      </div>
+    </ITCard>
+  ),
+};
+
+export const ITDialogInsideCard: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <ITCard title="Card con Diálogo">
+        <p className="mb-4 text-secondary-600">
+          Un ITDialog (fixed overlay) lanzado desde un ITCard. El overlay y su
+          contenido usan su propio stacking context y estilos.
+        </p>
+        <ITButton
+          variant="filled"
+          color="primary"
+          label="Abrir diálogo"
+          onClick={() => setOpen(true)}
+        />
+        <ITDialog
+          isOpen={open}
+          onClose={() => setOpen(false)}
+          title="Diálogo desde Card"
+        >
+          <p className="text-secondary-700">
+            Contenido del diálogo. Estilos propios, sin interferencia del card.
+          </p>
+          <div className="mt-4 flex justify-end">
+            <ITButton
+              variant="outlined"
+              color="secondary"
+              label="Cerrar"
+              onClick={() => setOpen(false)}
+            />
+          </div>
+        </ITDialog>
+      </ITCard>
+    );
+  },
+};
+
+export const ITTableInsideCard: Story = {
+  render: () => (
+    <ITCard title="Tabla en Card">
+      <ITTable
+        data={[
+          { id: 1, name: "Juan Pérez", city: "CDMX" },
+          { id: 2, name: "Ana García", city: "Guadalajara" },
+          { id: 3, name: "Luis Martínez", city: "Monterrey" },
+        ]}
+        columns={[
+          { key: "id", label: "ID", type: "number" },
+          { key: "name", label: "Nombre", type: "string" },
+          { key: "city", label: "Ciudad", type: "string" },
+        ]}
+      />
+      <ITText as="p" className="mt-3 text-sm text-secondary-500">
+        La tabla ocupa todo el ancho del card y conserva su propio estilo.
+      </ITText>
+    </ITCard>
+  ),
+};
+
+export const NestedCards: Story = {
+  render: () => (
+    <ITCard title="Card externo">
+      <p className="mb-4 text-secondary-600">
+        Cards anidados: el interno (interactivo) no altera el externo.
+      </p>
+      <ITCard title="Card interno" onClick={() => {}}>
+        <DatePickerWrapper />
+      </ITCard>
+    </ITCard>
+  ),
+};

package/src/components/{alert → molecules/alert}/alert.doc.mdx

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