@axzydev/axzy_ui_system 1.3.5 → 1.4.0

package/src/components/organisms/sidebar/sidebar.doc.mdx

@@ -13,13 +13,13 @@ Vertical navigation sidebar with collapsible submenus, tooltips when collapsed,
 |------|------|---------|-------------|
 | `navigationItems` | `ITNavigationItem[]` | — | Navigation structure: top-level items with optional sub-items. |
 | `isCollapsed` | `boolean` | `false` | Whether the sidebar is collapsed to icon-only mode. |
-| `onToggleCollapse` | `() => void` | — | Callback when the user toggles collapse via the toggle button. |
-| `visibleOnMobile` | `boolean` | `false` | Force sidebar visible on mobile breakpoints. |
+| `onToggleCollapse` | `() => void` | — | Accepted for API compatibility but never invoked by `ITSidebar`: the component renders no collapse toggle button (the rail expands on pointer hover). `ITLayout` still passes it through. |
+| `visibleOnMobile` | `boolean` | `false` | When `true`, the sidebar is always fully expanded (the collapsed 88px rail is disabled) and visible at every breakpoint. |
 | `onItemClick` | `(item: ITNavigationItem) => void` | — | Callback when a top-level navigation item is clicked. |
 | `onSubItemClick` | `(subitem: ITNavigationSubItem) => void` | — | Callback when a sub-navigation item is clicked. |
 | `subitemConnector` | `"dot" \| "\|" \| "none"` | `"dot"` | Visual connector style for sub-items. |
 | `className` | `string` | — | Additional CSS classes on the sidebar `<aside>`. |
-| `header` | `ReactNode` | — | Optional content rendered above the navigation list (e.g. a wordmark). Hidden while the sidebar is collapsed, and independent of the collapse toggle button, which is always visible in both states. |
+| `header` | `ReactNode` | — | Optional content rendered above the navigation list (e.g. a wordmark). Hidden while the sidebar is collapsed, so it only appears when the hover-expanded rail is shown. |
 
 ### ITNavigationItem
 
@@ -30,7 +30,7 @@ Vertical navigation sidebar with collapsible submenus, tooltips when collapsed,
 | `icon` | `ReactNode` | Icon rendered left of the label. |
 | `action` | `() => void` | Click handler for top-level items without submenus. |
 | `isActive` | `boolean` | Whether this item is active/highlighted. |
-| `subitems` | `ITNavigationSubItemEntry[]` | Plain sub-items or titled groups. |
+| `subitems` | `ITNavigationSubItemEntry[]` | Array of entries: plain sub-items or titled groups (`ITNavigationSubItemGroup`). |
 | `badge` | `string` | Badge text (e.g. notification count). |
 
 ### ITNavigationSubItem
@@ -77,7 +77,6 @@ const items = [
 <ITSidebar
   navigationItems={items}
   isCollapsed={false}
-  onToggleCollapse={toggleCollapse}
   subitemConnector="dot"
 />
 ```
@@ -104,17 +103,18 @@ const items = [
 ];
 ```
 
+Discriminate entries with `"items" in entry`. The heading style (uppercase, `0.68rem`, weight 700, `0.08em` tracking, `var(--it-sidebar-icon-color, var(--color-secondary-400))`) is applied by the component and cannot be overridden per group.
+
 ## Notes
 
-- The button lives above the scrollable `<nav>` (never inside it), so it stays in the tab order and visible in both states; it is centered in the 88px rail when collapsed and right-aligned when expanded.
-- The toggle is a real `<button type="button">` with `aria-expanded`, `aria-controls` pointing at the `<nav>` it controls, and a state-dependent `aria-label`/`title` ("Expandir/Colapsar barra lateral"). Its chevron rotates 180° when the sidebar is expanded, so one icon signals both directions.
-- There is no collapse toggle button: the collapsed rail expands and collapses automatically on pointer hover.
-- Collapsed mode shrinks to icon-only; tooltips show labels on hover with glassmorphism style.
-- Submenus expand/collapse with smooth transitions when a parent item is clicked.
+- There is no collapse toggle button: the collapsed 88px rail expands and collapses automatically on pointer hover (300 ms leave delay).
+- Collapsed mode shrinks to icon-only; a glassmorphism panel shows the item's sub-items on hover. For an item whose `subitems` contain groups, that panel **flattens** every group into one plain list and renders **no** group headings.
+- Submenus expand/collapse with smooth transitions when a parent item is clicked; the expanded submenu is animated with a `max-h` transition (cap `1000px`).
 - Active item highlighting uses a colored left-border accent and subtle background tint.
 - Badge support renders a notification-style counter on the item.
-- `subitemConnector` styles the visual link between parent and sub-items: `dot` (default), `|` (vertical bar), or `none`.
-- `visibleOnMobile` forces sidebar visibility on smaller screens for responsive layouts.
+- `subitemConnector` styles the visual link between parent and sub-items: `dot` (default), `|` (vertical bar), or `none`. Grouping does not change it: the `|` guide is a single `border-left` on the outer submenu `<ul>` only.
+- An active sub-item inside a group still auto-expands its parent, because auto-expand flattens groups the same way the collapsed flyout does.
+- `visibleOnMobile` forces the sidebar visible at every breakpoint and disables the collapsed rail, so it stays fully expanded.
 - Themed via CSS variables for consistent colors, shadows, and glassmorphism effects across light and dark modes.
 - Accessible by default: the `<nav>` is labelled and carries the `id` referenced by the toggle's `aria-controls`, the toggle exposes `aria-expanded` plus a visible `focus-visible` ring, group toggles expose `aria-expanded`/`aria-controls` and respond to Enter/Space, submenus are labelled `role="group"`, and the active sub-item carries `aria-current="page"`.
 - `subitems` accepts plain sub-items or titled groups (`label` + `items`); the group heading is rendered as a plain `<span>` inside a non-focusable `<div>`, so it is non-interactive and stays out of the tab order.

package/src/hooks/useClickOutside.ts

@@ -14,6 +14,12 @@ const useClickOutside = (
       // child overlay or its contents.
       if (clickedDialog && clickedDialog !== currentDialog) return;
 
+      // Floating panels (select/date/time pickers, menus) are portaled to
+      // <body>, so they sit outside the DOM of the dialog/drawer that opened
+      // them. Picking an option there must not count as an outside click.
+      const clickedFloating = target?.closest("[data-it-floating]");
+      if (clickedFloating && !ref.current?.contains(clickedFloating)) return;
+
       if (ref.current && !ref.current.contains(event.target as Node)) {
         callback();
       }

package/src/hooks/useFloatingPanel.ts

@@ -57,7 +57,10 @@ export function useFloatingPanel(
     const flipAbove = spaceBelow < panelHeight + offset && spaceAbove > spaceBelow;
 
     const width = matchWidth ? rect.width : undefined;
-    const panelWidth = panelRef.current?.offsetWidth ?? width ?? 0;
+    // With matchWidth the final width is the anchor's. Measuring the panel
+    // here would read its pre-style width (a full-width block on first
+    // paint) and clamp `left` to the viewport edge until the next update.
+    const panelWidth = width ?? panelRef.current?.offsetWidth ?? 0;
     let left =
       align === "end" && panelWidth
         ? rect.right - panelWidth

package/src/index.ts

@@ -36,6 +36,7 @@ import ITFormHeader from "./components/molecules/form-header/form-header";
 import ITGrid from "./components/atoms/grid/grid";
 import ITImage from "./components/atoms/image/image";
 import ITInput from "./components/atoms/input/input";
+import ITInputNumber from "./components/atoms/input-number/input-number";
 import ITNavbar from "./components/organisms/navbar/navbar";
 import ITPage from "./components/templates/page/page";
 import ITPageHeader from "./components/organisms/page-header/page-header";
@@ -90,6 +91,7 @@ import type { ITFormHeaderProps } from "./components/molecules/form-header/form-
 import type { ITGridProps } from "./components/atoms/grid/grid.props";
 import type { ITImageProps } from "./components/atoms/image/image.props";
 import type { ITInputProps } from "./components/atoms/input/input.props";
+import type { ITInputNumberProps } from "./components/atoms/input-number/input-number.props";
 import type { ITNavbarProps } from "./components/organisms/navbar/navbar.props";
 import type { ITPageProps } from "./components/templates/page/page.props";
 import type { ITPageHeaderProps } from "./components/organisms/page-header/page-header.props";
@@ -145,7 +147,7 @@ export {
   ITCard, ITCheckbox, ITChip, ITChipInput, ITConfirmDialog, ITDataTable, ITDatePicker,
   ITDropdownMenu, ITField, ITMaskedInput, ITMultiSelect,
   ITDialog, ITDivider, ITDrawer,
-  ITDropfile, ITEmptyState, ITFlex, ITFormBuilder, ITFormHeader, ITGrid, ITImage, ITInput, ITLayout,
+  ITDropfile, ITEmptyState, ITFlex, ITFormBuilder, ITFormHeader, ITGrid, ITImage, ITInput, ITInputNumber, ITLayout,
   ITLoader,   ITNavbar, ITPage, ITPageHeader, ITPagination, ITPopover, ITProgress,
   ITRadioGroup, ITSelect, ITSearchSelect,
   ITSearchTable,
@@ -169,7 +171,7 @@ export {
     ITDialogProps, ITDividerProps, ITDrawerProps,
     ITEmptyStateProps, ITFlexProps,
     ITFormBuilderProps, ITFormHeaderProps,
-    ITGridProps, ITImageProps, ITInputProps,
+    ITGridProps, ITImageProps, ITInputProps, ITInputNumberProps,
     ITLayoutProps, ITLoaderProps, ITNavbarProps,
     ITPageProps, ITPageHeaderProps,
     ITNavigationItem, ITNavigationSubItem,

package/src/sandbox/navigation.ts

@@ -56,6 +56,7 @@ export const SANDBOX_GROUPS: SandboxGroup[] = [
     subitems: [
       { id: "button", label: "ITButton" },
       { id: "input", label: "ITInput" },
+      { id: "inputnumber", label: "ITInputNumber" },
       { id: "select", label: "ITSelect" },
       { id: "searchselect", label: "ITSearchSelect" },
       { id: "multiselect", label: "ITMultiSelect" },
@@ -66,6 +67,7 @@ export const SANDBOX_GROUPS: SandboxGroup[] = [
       { id: "maskedinput", label: "ITMaskedInput" },
       { id: "calendar", label: "ITCalendar" },
       { id: "slidetoggle", label: "ITSlideToggle" },
+      { id: "segmentedcontrol", label: "ITSegmentedControl" },
       { id: "dropfile", label: "ITDropfile" },
       { id: "wysiwyg", label: "ITWysiwyg" },
       { id: "formbuilder", label: "ITFormBuilder" },

package/src/showcases/FeedbackShowcases.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import {
   ITDialog,
   ITButton,
+  ITSearchSelect,
   ITSlideToggle,
   ITToast,
   ITInput,
@@ -18,8 +19,9 @@ import { ShowcaseLayout } from "./ShowcaseLayout";
 export const DialogShowcase = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [useFormHeader, setUseFormHeader] = useState(true);
+  const [auditor, setAuditor] = useState("");
 
-  const code = `<ITDialog\n  isOpen={${isOpen}}\n  onClose={() => setIsOpen(false)}\n  title="Confirmación de Auditoría"\n  useFormHeader={${useFormHeader}}\n>\n  <p>¿Estás seguro de registrar esta auditoría?</p>\n</ITDialog>`;
+  const code = `<ITDialog\n  isOpen={${isOpen}}\n  onClose={() => setIsOpen(false)}\n  title="Confirmación de Auditoría"\n  useFormHeader={${useFormHeader}}\n>\n  <p>¿Estás seguro de registrar esta auditoría?</p>\n  <ITSearchSelect placeholder="Selecciona un auditor" ... />\n</ITDialog>`;
 
   return (
     <ShowcaseLayout
@@ -39,6 +41,19 @@ export const DialogShowcase = () => {
               <p className="text-sm text-slate-600 dark:text-slate-300">
                 Se guardará un registro inmutable en los logs de la blockchain corporativa. Esta acción es irreversible.
               </p>
+              {/* Los paneles flotantes (selects, pickers, menús) se renderizan en
+                  un portal fuera del diálogo: elegir una opción no debe cerrarlo. */}
+              <ITSearchSelect
+                label="Auditor responsable"
+                placeholder="Busca un auditor..."
+                options={[
+                  { value: "ana", label: "Ana Torres" },
+                  { value: "luis", label: "Luis Paredes" },
+                  { value: "marta", label: "Marta Ruiz" },
+                ]}
+                value={auditor}
+                onChange={(next) => setAuditor(String(next))}
+              />
               <div className="flex justify-end gap-3 pt-4 border-t">
                 <ITButton label="Cancelar" variant="ghost" onClick={() => setIsOpen(false)} />
                 <ITButton label="Autorizar" color="success" onClick={() => { alert("Transacción firmada!"); setIsOpen(false); }} />

package/src/showcases/FormShowcases.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { FaSync, FaSave, FaTrash, FaEdit, FaCode, FaCheck } from "react-icons/fa";
+import { FaSync, FaSave, FaTrash, FaEdit, FaCode, FaCheck, FaCalendar } from "react-icons/fa";
 import {
   ITButton,
   ITInput,
+  ITInputNumber,
   ITSelect,
   ITSearchSelect,
   ITDatePicker,
@@ -17,6 +18,7 @@ import {
   ITMultiSelect,
   ITChipInput,
   ITBadget,
+  ITSegmentedControl,
   UploadStatus
 } from "../index";
 import { ShowcaseLayout, CodeViewer } from "./ShowcaseLayout";
@@ -2091,3 +2093,287 @@ export const MaskedInputShowcase = () => {
     />
   );
 };
+
+// 17. ITSegmentedControl Showcase
+export const SegmentedControlShowcase = () => {
+  const [view, setView] = useState("day");
+  const [size, setSize] = useState<any>("md");
+  const [disabled, setDisabled] = useState(false);
+  const [withIcons, setWithIcons] = useState(false);
+
+  const options = withIcons
+    ? [
+        { value: "day", label: "Día", icon: <FaCheck size={10} /> },
+        { value: "week", label: "Semana", icon: <FaCalendar size={10} /> },
+        { value: "month", label: "Mes", icon: <FaSave size={10} /> },
+      ]
+    : [
+        { value: "day", label: "Día" },
+        { value: "week", label: "Semana" },
+        { value: "month", label: "Mes" },
+      ];
+
+  const code = `<ITSegmentedControl\n  options={[\n    { value: "day", label: "Día" },\n    { value: "week", label: "Semana" },\n    { value: "month", label: "Mes" },\n  ]}\n  value="${view}"\n  onChange={(value) => setView(value)}\n  size="${size}"\n  disabled={${disabled}}\n/>`;
+
+  return (
+    <ShowcaseLayout
+      title="ITSegmentedControl"
+      description="Grupo de botones mutuamente excluyentes estilo iOS para alternar vistas o filtros."
+      code={code}
+      demo={
+        <div className="flex flex-col items-center gap-3">
+          <ITSegmentedControl
+            options={options}
+            value={view}
+            onChange={setView}
+            size={size}
+            disabled={disabled}
+          />
+          <span className="text-xs font-mono text-slate-500">Seleccionado: "{view}"</span>
+        </div>
+      }
+      controls={
+        <>
+          <ITSelect
+            name="seg_size_ctrl"
+            label="Tamaño"
+            value={size}
+            onChange={(e: any) => setSize(e.target.value)}
+            options={[
+              { label: "Small", value: "sm" },
+              { label: "Medium", value: "md" },
+            ]}
+          />
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-semibold text-gray-700">Con iconos</span>
+            <ITSlideToggle isOn={withIcons} onToggle={setWithIcons} size="sm" />
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-semibold text-gray-700">Deshabilitado</span>
+            <ITSlideToggle isOn={disabled} onToggle={setDisabled} activeColor="danger" size="sm" />
+          </div>
+        </>
+      }
+      gallery={
+        <div className="flex flex-wrap items-center gap-6">
+          <ITSegmentedControl
+            options={[
+              { value: "list", label: "List" },
+              { value: "grid", label: "Grid" },
+            ]}
+            value="list"
+            onChange={() => {}}
+            size="sm"
+          />
+          <ITSegmentedControl
+            options={[
+              { value: "light", label: "☀️" },
+              { value: "dark", label: "🌙" },
+              { value: "system", label: "💻" },
+            ]}
+            value="dark"
+            onChange={() => {}}
+            size="sm"
+          />
+          <ITSegmentedControl
+            options={[
+              { value: "a", label: "Activo" },
+              { value: "b", label: "Inactivo" },
+            ]}
+            value="a"
+            onChange={() => {}}
+            disabled
+          />
+        </div>
+      }
+      doc={{
+        summary:
+          "Control segmentado: una sola opción activa a la vez. Útil para alternar vistas (lista/grid), rangos (día/semana/mes) o filtros.",
+        description:
+          "Componente totalmente controlado: recibe el valor activo vía value y notifica los cambios vía onChange.",
+        examples: [
+          '<ITSegmentedControl options={[{ value: "day", label: "Day" }, { value: "week", label: "Week" }]} value={view} onChange={setView} />',
+          '<ITSegmentedControl size="sm" options={[{ value: "list", label: "List", icon: <FaList /> }, { value: "grid", label: "Grid", icon: <FaTh /> }]} value={view} onChange={setView} />',
+        ],
+        props: [
+          { name: "options", type: "ISegmentedOption[]", required: true, description: "Opciones excluyentes { value, label, icon? }." },
+          { name: "value", type: "string", required: true, description: "Valor de la opción activa." },
+          { name: "onChange", type: "(value: string) => void", required: true, description: "Se dispara al elegir otra opción." },
+          { name: "size", type: '"sm" | "md"', default: '"md"', description: "Tamaño del control." },
+          { name: "className", type: "string", description: "Clases adicionales en el contenedor." },
+          { name: "disabled", type: "boolean", default: "false", description: "Deshabilita todas las opciones." },
+        ],
+        notes: [
+          "Solo una opción puede estar activa; es mutuamente excluyente por diseño.",
+          "Cada opción acepta un icon opcional junto al label.",
+          "No expone roles ARIA de radiogroup: si se usa en un formulario accesible habría que agregarlos.",
+        ],
+      }}
+    />
+  );
+};
+
+// 18. ITInputNumber Showcase
+export const InputNumberShowcase = () => {
+  const [amount, setAmount] = useState<number | null>(1234.5);
+  const [quantity, setQuantity] = useState<number | null>(3);
+  const [decimals, setDecimals] = useState<any>("2");
+  const [disabled, setDisabled] = useState(false);
+  const [required, setRequired] = useState(false);
+  const [showError, setShowError] = useState(false);
+
+  const code = `<ITInputNumber\n  name="amount"\n  label="Monto"\n  value={${amount === null ? "null" : amount}}\n  prefix="$"\n  decimals={${decimals}}\n  disabled={${disabled}}\n  required={${required}}\n  onChange={(value) => setAmount(value)}\n/>
+
+// El valor que recibes ya es un number (o undefined si está vacío):
+onChange={(value) => console.log(value + 1)} // ${amount === null ? "undefined" : amount + 1}`;
+
+  return (
+    <ShowcaseLayout
+      title="ITInputNumber"
+      description="Campo numérico con formato de moneda que emite un number real (entero o decimal) en onChange."
+      code={code}
+      demo={
+        <div className="w-full max-w-sm space-y-3">
+          <ITInputNumber
+            name="amount"
+            label="Monto"
+            placeholder="0.00"
+            prefix="$"
+            value={amount}
+            onChange={setAmount}
+            decimals={Number(decimals)}
+            disabled={disabled}
+            required={required}
+            touched={showError}
+            error={showError ? "El monto es obligatorio" : undefined}
+          />
+          <p className="text-xs font-mono text-slate-500">
+            value: {amount === null ? "null" : `${amount} (${typeof amount})`}
+          </p>
+          <div className="grid grid-cols-2 gap-3">
+            <ITInputNumber
+              name="quantity"
+              label="Cantidad (enteros)"
+              value={quantity}
+              decimals={0}
+              min={1}
+              max={99}
+              onChange={setQuantity}
+            />
+            <ITInputNumber
+              name="bounded"
+              label="Entre 10 y 500"
+              min={10}
+              max={500}
+              value={null}
+              onChange={() => {}}
+            />
+          </div>
+        </div>
+      }
+      controls={
+        <>
+          <ITSelect
+            name="in_decimals"
+            label="Decimales"
+            value={decimals}
+            onChange={(e: any) => setDecimals(e.target.value)}
+            options={[
+              { label: "0 (enteros)", value: "0" },
+              { label: "1 decimal", value: "1" },
+              { label: "2 decimales", value: "2" },
+            ]}
+          />
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-semibold text-gray-700">Requerido</span>
+            <ITSlideToggle isOn={required} onToggle={setRequired} size="sm" />
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-semibold text-gray-700">Simular error</span>
+            <ITSlideToggle isOn={showError} onToggle={setShowError} activeColor="danger" size="sm" />
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-semibold text-gray-700">Deshabilitado</span>
+            <ITSlideToggle isOn={disabled} onToggle={setDisabled} activeColor="danger" size="sm" />
+          </div>
+        </>
+      }
+      gallery={
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div className="w-full max-w-sm">
+            <ITInputNumber
+              name="g_amount"
+              label="Prefijo $"
+              prefix="$"
+              value={98765.43}
+              readOnly
+              onChange={() => {}}
+            />
+          </div>
+          <div className="w-full max-w-sm">
+            <ITInputNumber
+              name="g_price"
+              label="Precio unitario"
+              prefix="$"
+              value={null}
+              onChange={() => {}}
+            />
+          </div>
+          <div className="w-full max-w-sm">
+            <ITInputNumber
+              name="g_qty"
+              label="Cantidad (decimals=0)"
+              decimals={0}
+              value={12}
+              onChange={() => {}}
+            />
+          </div>
+          <div className="w-full max-w-sm">
+            <ITInputNumber
+              name="g_disabled"
+              label="Deshabilitado"
+              prefix="$"
+              value={1500}
+              disabled
+              onChange={() => {}}
+            />
+          </div>
+        </div>
+      }
+      doc={{
+        summary:
+          "Input numérico con formato de moneda: agrupa miles, fija decimales y entrega un number en onChange/onBlur.",
+        description:
+          "Es un ITInput especializado (misma label, validación, tamaños e iconos). La diferencia es que siempre formatea con currencyFormat y parsea el valor antes de emitirlo, así no hay que hacer parseFloat en el consumidor.",
+        examples: [
+          '<ITInputNumber name="amount" label="Monto" prefix="$" value={amount} onChange={(value) => setAmount(value)} />',
+          '<ITInputNumber name="qty" label="Cantidad" decimals={0} min={1} max={99} value={qty} onChange={setQty} />',
+          '<ITInputNumber name="total" label="Total" value={total} onChange={(value) => setTotal((value ?? 0) + 1)} />',
+        ],
+        props: [
+          { name: "name", type: "string", required: true, description: "Nombre del campo." },
+          { name: "value", type: "number | null", description: "Valor numérico actual." },
+          { name: "onChange", type: "(value, event) => void", required: true, description: "Recibe el number parseado (undefined si está vacío)." },
+          { name: "onBlur", type: "(value, event) => void", description: "Recibe el number parseado y clampeado a min/max." },
+          { name: "decimals", type: "number", default: "2", description: "Decimales permitidos; 0 = solo enteros." },
+          { name: "prefix", type: "string", description: "Prefijo dentro del campo (ej. \"$\"). Se ignora si hay iconLeft." },
+          { name: "min", type: "number", description: "Valor mínimo; se ajusta al salir del campo." },
+          { name: "max", type: "number", description: "Valor máximo; se ajusta al salir del campo." },
+          { name: "size", type: '"sm" | "md" | "lg"', default: '"md"', description: "Tamaño del campo." },
+          { name: "disabled", type: "boolean", default: "false", description: "Deshabilita el campo." },
+          { name: "readOnly", type: "boolean", default: "false", description: "Modo solo lectura." },
+          { name: "required", type: "boolean", default: "false", description: "Marca el campo como requerido." },
+          { name: "touched", type: "boolean", description: "Indica que el campo fue tocado." },
+          { name: "error", type: "string | boolean", description: "Error de validación (true = mensaje genérico)." },
+          { name: "iconLeft / iconRight", type: "ReactNode", description: "Iconos dentro del campo." },
+        ],
+        notes: [
+          "El valor emitido ya es un number; ya no hace falta parseFloat.",
+          "Formatea en blur (miles + decimales) y muestra crudo mientras escribes.",
+          "Usa decimals={0} para forzar enteros.",
+          "min/max se aplican al salir del campo (clamp), no mientras escribes.",
+        ],
+      }}
+    />
+  );
+};