@axzydev/axzy_ui_system 1.2.16 → 1.3.0

package/src/components/molecules/accordion/accordion.tsx

@@ -0,0 +1,123 @@
+import clsx from "clsx";
+import { useState } from "react";
+import { FaChevronDown } from "react-icons/fa";
+import { ITAccordionProps } from "./accordion.props";
+import ITText from "@/components/atoms/text/text";
+
+/**
+ * Collapsible sections for FAQs, settings panels, and long content.
+ *
+ * Works uncontrolled (`defaultOpenIds`) or controlled (`openIds` + `onChange`).
+ * Supports single-open (default) or multiple-open mode, and animates the body
+ * with a CSS grid-rows transition (no JS height measurement).
+ *
+ * @example
+ * <ITAccordion
+ *   items={[
+ *     { id: "a", title: "¿Qué es AXZY?", content: "Un sistema de componentes." },
+ *     { id: "b", title: "¿Cómo instalo?", content: "pnpm add @axzydev/axzy_ui_system" },
+ *   ]}
+ *   defaultOpenIds={["a"]}
+ * />
+ */
+export default function ITAccordion({
+  items,
+  allowMultiple = false,
+  defaultOpenIds = [],
+  openIds,
+  onChange,
+  variant = "separated",
+  className,
+  itemClassName,
+}: ITAccordionProps) {
+  const [internalOpen, setInternalOpen] = useState<string[]>(defaultOpenIds);
+  const isControlled = openIds !== undefined;
+  const currentOpen = isControlled ? openIds : internalOpen;
+
+  const toggle = (id: string) => {
+    const isOpen = currentOpen.includes(id);
+    let next: string[];
+    if (isOpen) {
+      next = currentOpen.filter((x) => x !== id);
+    } else {
+      next = allowMultiple ? [...currentOpen, id] : [id];
+    }
+    if (!isControlled) setInternalOpen(next);
+    onChange?.(next);
+  };
+
+  const wrapperClass =
+    variant === "separated"
+      ? clsx("flex flex-col gap-2", className)
+      : clsx(
+          "rounded-xl border border-secondary-200 dark:border-slate-700 overflow-hidden",
+          className
+        );
+
+  return (
+    <div className={wrapperClass}>
+      {items.map((item, index) => {
+        const isOpen = currentOpen.includes(item.id);
+        const panelId = `it-accordion-panel-${item.id}`;
+        const buttonId = `it-accordion-button-${item.id}`;
+        const itemClass = clsx(
+          variant === "separated" &&
+            "rounded-xl border border-secondary-200 dark:border-slate-700 overflow-hidden bg-white dark:bg-slate-900",
+          variant === "bordered" &&
+            index > 0 &&
+            "border-t border-secondary-200 dark:border-slate-700",
+          item.disabled && "opacity-50",
+          itemClassName
+        );
+
+        return (
+          <div key={item.id} className={itemClass}>
+            <h3 className="m-0">
+              <button
+                type="button"
+                id={buttonId}
+                aria-expanded={isOpen}
+                aria-controls={panelId}
+                disabled={item.disabled}
+                onClick={() => toggle(item.id)}
+                className={clsx(
+                  "w-full flex items-center gap-3 px-4 py-3 text-left transition-colors",
+                  "text-sm font-semibold text-secondary-800 dark:text-slate-100",
+                  "hover:bg-secondary-50 dark:hover:bg-slate-800",
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-400",
+                  item.disabled && "cursor-not-allowed hover:bg-transparent"
+                )}
+              >
+                {item.icon && <span className="shrink-0 text-secondary-500">{item.icon}</span>}
+                <ITText as="span" className="flex-1">{item.title}</ITText>
+                <FaChevronDown
+                  size={12}
+                  className={clsx(
+                    "shrink-0 text-secondary-400 transition-transform duration-200",
+                    isOpen && "rotate-180"
+                  )}
+                />
+              </button>
+            </h3>
+
+            <div
+              id={panelId}
+              role="region"
+              aria-labelledby={buttonId}
+              className={clsx(
+                "grid transition-all duration-200 ease-in-out",
+                isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+              )}
+            >
+              <div className="overflow-hidden">
+                <div className="px-4 pb-4 pt-1 text-sm text-secondary-600 dark:text-slate-300">
+                  {item.content}
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/molecules/chip-input/chip-input.doc.mdx

@@ -0,0 +1,44 @@
+import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as StoriesData from './chip-input.stories';
+
+<Meta of={StoriesData} />
+
+# ITChipInput
+
+Free-text input that turns entered values into removable tags (chips).
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string[]` | — | Current tags (controlled). |
+| `onChange` | `(values: string[]) => void` | — | Fired with the next list of tags. |
+| `label` | `string` | — | Label above the control. |
+| `placeholder` | `string` | `"Escribe y presiona Enter"` | Input placeholder. |
+| `delimiters` | `string[]` | `["Enter", ","]` | Keys that commit a tag. |
+| `maxTags` | `number` | — | Maximum number of tags. |
+| `allowDuplicates` | `boolean` | `false` | Allows repeated tags. |
+| `validate` | `(value) => string \| undefined` | — | Rejects a tag with a message. |
+| `color` | semantic color key | `"primary"` | Color of the tag chips. |
+| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Control size. |
+| `disabled` / `required` / `touched` / `error` / `helpText` | — | — | Standard form states. |
+
+## Usage
+
+```tsx
+import { ITChipInput } from '@axzydev/axzy_ui_system';
+
+<ITChipInput label="Etiquetas" value={tags} onChange={setTags} />
+```
+
+## Notes
+
+- Commits tags on `Enter`, `,`, blur, or when pasting delimited text.
+- `Backspace` on an empty input removes the last tag.
+- Local errors (duplicate, max reached, `validate`) are shown inline.
+
+## Stories
+
+<Primary />
+<Controls />
+<Stories />

package/src/components/molecules/chip-input/chip-input.props.ts

@@ -0,0 +1,42 @@
+import { ColorsTypes } from "@/types/colors.types";
+import { SizesTypes } from "@/types/sizes.types";
+
+/** Props for the ITChipInput component. */
+export interface ITChipInputProps {
+  /** Name attribute for form integrations. */
+  name?: string;
+  /** Label displayed above the control. */
+  label?: string;
+  /** Placeholder for the text input. @default "Escribe y presiona Enter" */
+  placeholder?: string;
+  /** Current list of tags (controlled). */
+  value: string[];
+  /** Fired with the next list of tags. */
+  onChange?: (values: string[]) => void;
+  /** Fired when the control loses focus. */
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  /** Keys that commit the current text as a tag. @default ["Enter", ","] */
+  delimiters?: string[];
+  /** Maximum number of tags allowed. */
+  maxTags?: number;
+  /** Allows duplicated tags. @default false */
+  allowDuplicates?: boolean;
+  /** Returns an error string to reject the tag, or undefined if valid. */
+  validate?: (value: string) => string | undefined;
+  /** Color applied to the tag chips. @default "primary" */
+  color?: ColorsTypes;
+  /** Control size. Valid values: `"sm"`, `"md"`, `"lg"`. @default "md" */
+  size?: SizesTypes;
+  /** Disables the control. @default false */
+  disabled?: boolean;
+  /** Marks the field as required (red asterisk). @default false */
+  required?: boolean;
+  /** Whether the field has been touched (form validation). */
+  touched?: boolean;
+  /** Error message or boolean indicating an error state. */
+  error?: string | boolean;
+  /** Helper text shown below the control when there is no error. */
+  helpText?: string;
+  /** Additional CSS classes for the container. */
+  className?: string;
+}

package/src/components/molecules/chip-input/chip-input.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import ITChipInput from "@/components/molecules/chip-input/chip-input";
+
+const meta: Meta<typeof ITChipInput> = {
+  title: "Components/Form Elements/ITChipInput",
+  component: ITChipInput,
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof ITChipInput>;
+
+const Wrapper = (args: any) => {
+  const [value, setValue] = useState<string[]>(args.value ?? []);
+  return (
+    <div className="w-[420px]">
+      <ITChipInput {...args} value={value} onChange={setValue} />
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: (args) => <Wrapper {...args} />,
+  args: { name: "tags", label: "Etiquetas", value: [] },
+};
+
+export const WithValues: Story = {
+  render: (args) => <Wrapper {...args} />,
+  args: { name: "tags", label: "Etiquetas", value: ["react", "typescript", "tailwind"] },
+};
+
+export const MaxTags: Story = {
+  render: (args) => <Wrapper {...args} />,
+  args: { name: "tags", label: "Máximo 3", value: ["uno", "dos"], maxTags: 3, helpText: "Máximo 3 etiquetas." },
+};
+
+export const WithValidation: Story = {
+  render: (args) => <Wrapper {...args} />,
+  args: {
+    name: "emails",
+    label: "Correos",
+    value: [],
+    placeholder: "correo@dominio.com",
+    validate: (v: string) => (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) ? undefined : "Correo inválido"),
+  },
+};
+
+export const WithError: Story = {
+  render: (args) => <Wrapper {...args} />,
+  args: { name: "tags", label: "Etiquetas", value: [], required: true, touched: true, error: true },
+};

package/src/components/molecules/chip-input/chip-input.tsx

@@ -0,0 +1,205 @@
+import clsx from "clsx";
+import { useRef, useState } from "react";
+import { ITChipInputProps } from "./chip-input.props";
+import { theme } from "@/theme/theme";
+import { inputFieldStyle } from "@/utils/styles";
+import ITChip from "@/components/atoms/chip/chip";
+import ITText from "@/components/atoms/text/text";
+
+/**
+ * Free-text input that turns entered values into removable tags (chips).
+ *
+ * Commits a tag on `Enter`/`,` (configurable via `delimiters`), on blur, or on
+ * paste of delimited text. Supports `maxTags`, dedupe control, and per-tag
+ * validation.
+ *
+ * @example
+ * <ITChipInput
+ *   label="Etiquetas"
+ *   value={tags}
+ *   onChange={setTags}
+ *   placeholder="Agrega una etiqueta..."
+ * />
+ */
+export default function ITChipInput({
+  name,
+  label,
+  placeholder = "Escribe y presiona Enter",
+  value,
+  onChange,
+  onBlur,
+  delimiters = ["Enter", ","],
+  maxTags,
+  allowDuplicates = false,
+  validate,
+  color = "primary",
+  size = "md",
+  disabled = false,
+  required = false,
+  touched,
+  error,
+  helpText,
+  className,
+}: ITChipInputProps) {
+  const [inputValue, setInputValue] = useState("");
+  const [localTouched, setLocalTouched] = useState(false);
+  const [localError, setLocalError] = useState<string | undefined>(undefined);
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const inputTheme = (theme as any).input || {};
+
+  const isTouched = touched !== undefined ? touched : localTouched;
+  const externalError =
+    error !== undefined && error !== false
+      ? error === true
+        ? "Este campo es requerido"
+        : error
+      : required && value.length === 0
+      ? "Este campo es requerido"
+      : undefined;
+  const effectiveError = localError || externalError;
+  const hasError = isTouched && !!effectiveError;
+
+  const getControlStyle = (): React.CSSProperties => {
+    const style = inputFieldStyle(inputTheme, size, { width: "100%", cursor: "text" });
+    style.display = "flex";
+    style.flexWrap = "wrap";
+    style.alignItems = "center";
+    style.gap = "0.375rem";
+    style.minHeight = "2.5rem";
+
+    if (disabled) {
+      style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
+      style.borderColor = inputTheme.disabled?.borderColor || style.borderColor;
+      style.opacity = 0.7;
+      style.cursor = "not-allowed";
+    }
+    if (hasError) {
+      style.borderColor = inputTheme.error?.borderColor || "red";
+    } else if (isFocused) {
+      style.boxShadow = inputTheme.focus?.ring;
+      style.borderColor = inputTheme.focus?.borderColor;
+    }
+    return style;
+  };
+
+  const commitTag = (raw: string) => {
+    const tag = raw.trim();
+    if (!tag) return;
+    if (maxTags !== undefined && value.length >= maxTags) {
+      setLocalError(`Máximo ${maxTags} etiquetas`);
+      return;
+    }
+    if (!allowDuplicates && value.includes(tag)) {
+      setLocalError("Etiqueta duplicada");
+      return;
+    }
+    const validationError = validate?.(tag);
+    if (validationError) {
+      setLocalError(validationError);
+      return;
+    }
+    setLocalError(undefined);
+    onChange?.([...value, tag]);
+    setInputValue("");
+  };
+
+  const removeTag = (tag: string) => {
+    if (disabled) return;
+    onChange?.(value.filter((t) => t !== tag));
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (disabled) return;
+    if (delimiters.includes(e.key)) {
+      if (e.key !== "Enter") e.preventDefault();
+      commitTag(inputValue);
+    } else if (e.key === "Backspace" && inputValue === "" && value.length > 0) {
+      removeTag(value[value.length - 1]);
+    } else if (localError) {
+      setLocalError(undefined);
+    }
+  };
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    const text = e.clipboardData.getData("text");
+    const separators = delimiters.filter((d) => d.length === 1);
+    if (separators.length && separators.some((s) => text.includes(s))) {
+      e.preventDefault();
+      const parts = text
+        .split(new RegExp(`[${separators.map((s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("")}]`))
+        .map((p) => p.trim())
+        .filter(Boolean);
+      parts.forEach((p) => commitTag(p));
+    }
+  };
+
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    if (inputValue.trim()) commitTag(inputValue);
+    setIsFocused(false);
+    setLocalTouched(true);
+    onBlur?.(e);
+  };
+
+  const handleContainerClick = () => {
+    if (disabled) return;
+    inputRef.current?.focus();
+  };
+
+  return (
+    <div className={clsx("w-full flex flex-col gap-1.5", className)}>
+      {label && (
+        <ITText
+          as="label"
+          className={clsx("text-sm font-medium text-secondary-700 dark:text-slate-300", {
+            "text-danger-500": hasError,
+          })}
+        >
+          <ITText as="span">{label}</ITText>
+          {required && <ITText as="span" className="text-danger-500 ml-1">*</ITText>}
+        </ITText>
+      )}
+
+      <div
+        onClick={handleContainerClick}
+        className={clsx(disabled && "cursor-not-allowed")}
+        style={getControlStyle()}
+      >
+        {value.map((tag) => (
+          <ITChip
+            key={tag}
+            label={tag}
+            color={color}
+            size="sm"
+            removable={!disabled}
+            onRemove={() => removeTag(tag)}
+          />
+        ))}
+
+        <input
+          ref={inputRef}
+          name={name}
+          type="text"
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
+          onFocus={() => setIsFocused(true)}
+          onBlur={handleBlur}
+          disabled={disabled}
+          placeholder={value.length === 0 ? placeholder : ""}
+          autoComplete="off"
+          className="flex-1 min-w-[100px] bg-transparent outline-none border-none text-sm text-secondary-900 dark:text-slate-100"
+          style={{ padding: 0, fontSize: inputFieldStyle(inputTheme, size).fontSize }}
+        />
+      </div>
+
+      {hasError ? (
+        <ITText as="p" className="text-danger-500 text-xs mt-1">{effectiveError}</ITText>
+      ) : helpText ? (
+        <ITText as="p" className="text-xs text-secondary-500 dark:text-secondary-400">{helpText}</ITText>
+      ) : null}
+    </div>
+  );
+}

package/src/components/molecules/date-picker/datePicker.tsx

@@ -1,10 +1,12 @@
 import clsx from "clsx";
 import React, { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { FaCalendarAlt } from "react-icons/fa";
 import { isBefore } from "date-fns";
 import ITCalendar from "@/components/molecules/calendar/calendar";
 import ITInput from "@/components/atoms/input/input";
 import { ITDatePickerProps } from "./date-picker.props";
+import { useFloatingPanel } from "@/hooks/useFloatingPanel";
 import { theme } from "@/theme/theme";
 
 /**
@@ -64,7 +66,12 @@ export default function ITDatePicker({
   const [internalRange, setInternalRange] = useState<[Date | null, Date | null]>([null, null]);
 
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const [calendarPosition, setCalendarPosition] = useState({ top: 0, left: 0 });
+
+  // Calendar position (rendered in a portal so it escapes overflow/transform ancestors).
+  const { panelRef, style: panelStyle } = useFloatingPanel(wrapperRef, isOpen, {
+    estimatedHeight: 360,
+    matchWidth: false,
+  });
 
   // Normalize single vs range values
   const dateRange = React.useMemo(() => {
@@ -97,10 +104,10 @@ export default function ITDatePicker({
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (
-        wrapperRef.current &&
-        !wrapperRef.current.contains(event.target as Node)
-      ) {
+      const target = event.target as Node;
+      const inWrapper = wrapperRef.current?.contains(target);
+      const inPanel = panelRef.current?.contains(target);
+      if (!inWrapper && !inPanel) {
         setIsOpen(false);
       }
     };
@@ -108,24 +115,6 @@ export default function ITDatePicker({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
-  const calculateCalendarPosition = () => {
-    if (wrapperRef.current) {
-      const inputRect = wrapperRef.current.getBoundingClientRect();
-      const calendarHeight = 300;
-      const viewportHeight = window.innerHeight;
-
-      let top = inputRect.bottom + 4;
-      if (inputRect.bottom + calendarHeight > viewportHeight) {
-        top = inputRect.top - calendarHeight - 4;
-      }
-
-      setCalendarPosition({
-        top,
-        left: inputRect.left,
-      });
-    }
-  };
-
   const handleDateChange = (date: Date) => {
     if (range) {
       let newRange: [Date | null, Date | null];
@@ -177,7 +166,6 @@ export default function ITDatePicker({
 
   const handleIconClick = () => {
     if (!disabled) {
-      calculateCalendarPosition();
       setIsOpen(!isOpen);
     }
   };
@@ -300,38 +288,39 @@ export default function ITDatePicker({
         onClick={handleIconClick}
       />
 
-      {isOpen && (
-        <div
-          className={clsx(
-            "fixed z-[70]",
-            calendarClassName,
-            range ? "w-[320px]" : "w-[280px]"
-          )}
-          style={{
-            top: `${calendarPosition.top}px`,
-            left: `${calendarPosition.left}px`,
-             backgroundColor: theme.card.backgroundColor,
-             borderColor: theme.card.borderColor,
-             borderWidth: '1px',
-             borderStyle: 'solid',
-             borderRadius: theme.card.borderRadius,
-             boxShadow: theme.card.shadow,
-             padding: '0.5rem',
-          }}
-        >
-          <ITCalendar
-            value={!range ? (startDate as Date) : undefined}
-            startDate={startDate as Date}
-            endDate={endDate as Date}
-            selectionMode={range ? 'range' : 'single'}
-            onChange={handleDateChange}
-            minDate={minDate}
-            maxDate={maxDate}
-            variant={variant}
-            className="h-auto border-none shadow-none w-full"
-          />
-        </div>
-      )}
+      {isOpen &&
+        createPortal(
+          <div
+            ref={panelRef}
+            className={clsx(
+              calendarClassName,
+              range ? "w-[320px]" : "w-[280px]"
+            )}
+            style={{
+              ...panelStyle,
+              backgroundColor: theme.card.backgroundColor,
+              borderColor: theme.card.borderColor,
+              borderWidth: "1px",
+              borderStyle: "solid",
+              borderRadius: theme.card.borderRadius,
+              boxShadow: theme.card.shadow,
+              padding: "0.5rem",
+            }}
+          >
+            <ITCalendar
+              value={!range ? (startDate as Date) : undefined}
+              startDate={startDate as Date}
+              endDate={endDate as Date}
+              selectionMode={range ? 'range' : 'single'}
+              onChange={handleDateChange}
+              minDate={minDate}
+              maxDate={maxDate}
+              variant={variant}
+              className="h-auto border-none shadow-none w-full"
+            />
+          </div>,
+          document.body
+        )}
     </div>
   );
 }

package/src/components/molecules/dropdown-menu/dropdown-menu.doc.mdx

@@ -0,0 +1,46 @@
+import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as StoriesData from './dropdown-menu.stories';
+
+<Meta of={StoriesData} />
+
+# ITDropdownMenu
+
+Action menu with keyboard navigation and ARIA menu semantics. Rendered through a portal, so it is not clipped by cards or `overflow: hidden` ancestors.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `ITDropdownMenuItem[]` | — | Actions: `{ id, label, icon?, shortcut?, onClick?, disabled?, danger?, divider? }`. |
+| `trigger` | `ReactNode` | ellipsis icon | Custom trigger content. |
+| `triggerLabel` | `string` | `"Abrir menú"` | Accessible label for the trigger. |
+| `placement` | `"bottom-start" \| "bottom-end" \| "top-start" \| "top-end"` | `"bottom-end"` | Menu placement. |
+| `onSelect` | `(id, item) => void` | — | Fired after an item is activated. |
+| `disabled` | `boolean` | `false` | Disables the trigger. |
+| `className` | `string` | — | Extra CSS classes for the trigger. |
+| `menuClassName` | `string` | — | Extra CSS classes for the menu. |
+
+## Usage
+
+```tsx
+import { ITDropdownMenu } from '@axzydev/axzy_ui_system';
+
+<ITDropdownMenu
+  items={[
+    { id: "edit", label: "Editar", icon: <FaEdit />, onClick: edit },
+    { id: "delete", label: "Eliminar", icon: <FaTrash />, danger: true, divider: true, onClick: remove },
+  ]}
+/>
+```
+
+## Notes
+
+- Keyboard: `ArrowUp`/`ArrowDown` navigate, `Enter`/`Space` activate, `Esc` closes, `Home`/`End` jump.
+- Uses `role="menu"` / `role="menuitem"` and `aria-haspopup` / `aria-expanded` on the trigger.
+- The panel flips above the trigger automatically when there is no room below.
+
+## Stories
+
+<Primary />
+<Controls />
+<Stories />