@axzydev/axzy_ui_system 1.2.16 → 1.3.1

package/src/showcases/NavigationShowcases.tsx

@@ -1,12 +1,14 @@
 import React, { useState } from "react";
-import { FaInfoCircle, FaSlidersH, FaRegBell, FaSync } from "react-icons/fa";
+import { FaInfoCircle, FaSlidersH, FaRegBell, FaSync, FaEdit, FaCopy, FaTrash, FaDownload } from "react-icons/fa";
 import {
   ITTabs,
   ITStepper,
   ITPagination,
   ITTripleFilter,
   ITSelect,
-  ITSlideToggle
+  ITSlideToggle,
+  ITDropdownMenu,
+  ITCard
 } from "../index";
 import { ShowcaseLayout } from "./ShowcaseLayout";
 
@@ -191,3 +193,71 @@ export const TripleFilterShowcase = () => {
     />
   );
 };
+
+// ITDropdownMenu Showcase
+export const DropdownMenuShowcase = () => {
+  const [lastAction, setLastAction] = useState<string>("—");
+
+  const items = [
+    { id: "edit", label: "Editar", icon: <FaEdit />, onClick: () => setLastAction("Editar") },
+    { id: "copy", label: "Duplicar", icon: <FaCopy />, shortcut: "⌘D", onClick: () => setLastAction("Duplicar") },
+    { id: "download", label: "Descargar", icon: <FaDownload />, disabled: true },
+    { id: "delete", label: "Eliminar", icon: <FaTrash />, danger: true, divider: true, onClick: () => setLastAction("Eliminar") },
+  ];
+
+  const code = `<ITDropdownMenu\n  items={[\n    { id: 'edit', label: 'Editar', icon: <FaEdit />, onClick: edit },\n    { id: 'delete', label: 'Eliminar', icon: <FaTrash />, danger: true, divider: true, onClick: remove },\n  ]}\n/>`;
+
+  return (
+    <ShowcaseLayout
+      title="ITDropdownMenu"
+      description="Menú de acciones con navegación por teclado y semántica ARIA. Se renderiza en portal, por lo que no lo recorta un ITCard ni ancestros con overflow: hidden."
+      code={code}
+      demo={
+        <div className="w-full max-w-md">
+          <ITCard title="Acciones de fila">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-semibold text-slate-700 dark:text-slate-200">Reporte Q3.pdf</p>
+                <p className="text-xs text-slate-500">Última acción: {lastAction}</p>
+              </div>
+              <ITDropdownMenu items={items} />
+            </div>
+          </ITCard>
+        </div>
+      }
+      controls={
+        <p className="text-xs text-slate-500">
+          Teclado: flechas para navegar, Enter para activar, Esc para cerrar. El menú se abre dentro del ITCard sin recortarse.
+        </p>
+      }
+      gallery={
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <div className="w-full max-w-xs">
+            <p className="mb-3 text-[10px] font-bold uppercase tracking-wider text-slate-400">Trigger personalizado</p>
+            <ITDropdownMenu items={items} trigger={<span className="text-sm font-semibold px-1">Acciones</span>} triggerLabel="Acciones" placement="bottom-start" />
+          </div>
+          <div className="w-full max-w-xs">
+            <p className="mb-3 text-[10px] font-bold uppercase tracking-wider text-slate-400">Placement top-start</p>
+            <ITDropdownMenu items={items.slice(0, 3)} placement="top-start" />
+          </div>
+        </div>
+      }
+      doc={{
+        summary: "Menú de acciones accesible (role=menu) en portal, con teclado y flip automático.",
+        examples: [
+          "<ITDropdownMenu items={items} />",
+          "<ITDropdownMenu items={items} trigger={<span>Acciones</span>} placement=\"bottom-start\" />",
+        ],
+        props: [
+          { name: "items", type: "ITDropdownMenuItem[]", required: true, description: "Acciones { id, label, icon?, shortcut?, onClick?, disabled?, danger?, divider? }." },
+          { name: "trigger", type: "ReactNode", default: "icono elipsis", description: "Contenido del trigger." },
+          { name: "triggerLabel", type: "string", default: '"Abrir menú"', description: "Etiqueta accesible del trigger." },
+          { name: "placement", type: '"bottom-start" | "bottom-end" | "top-start" | "top-end"', default: '"bottom-end"', description: "Posición del menú." },
+          { name: "onSelect", type: "(id, item) => void", description: "Se dispara al activar un item." },
+          { name: "disabled", type: "boolean", default: "false", description: "Deshabilita el trigger." },
+        ],
+        notes: ["El panel voltea arriba cuando no hay espacio abajo.", "role=menu / menuitem + aria-haspopup / aria-expanded."],
+      }}
+    />
+  );
+};

package/src/showcases/StructureShowcases.tsx

@@ -30,6 +30,7 @@ import {
   ITDivider,
   ITProgress,
   ITSelect,
+  ITAccordion,
 } from "../index";
 import { ShowcaseLayout, CodeViewer } from "./ShowcaseLayout";
 
@@ -1090,3 +1091,66 @@ export const LayoutShowcase = () => {
     />
   );
 };
+
+// ─────────────────────────────────────────
+// ITAccordion Showcase
+// ─────────────────────────────────────────
+export const AccordionShowcase = () => {
+  const [allowMultiple, setAllowMultiple] = useState(false);
+
+  const items = [
+    { id: "what", title: "¿Qué es AXZY UI System?", content: "Una librería de componentes React + TypeScript con Tailwind CSS v4." },
+    { id: "install", title: "¿Cómo lo instalo?", content: "pnpm add @axzydev/axzy_ui_system" },
+    { id: "theme", title: "¿Puedo personalizar el tema?", content: "Sí, usa ITThemeProvider para definir la paleta y los tokens." },
+    { id: "disabled", title: "Sección deshabilitada", content: "No se puede abrir.", disabled: true },
+  ];
+
+  const code = `<ITAccordion\n  allowMultiple={${allowMultiple}}\n  defaultOpenIds={['what']}\n  items={[\n    { id: 'what', title: '¿Qué es AXZY?', content: '...' },\n    { id: 'install', title: '¿Cómo lo instalo?', content: '...' },\n  ]}\n/>`;
+
+  return (
+    <ShowcaseLayout
+      title="ITAccordion"
+      description="Secciones plegables para FAQs, paneles de configuración y contenido largo. Controlado o no controlado, single o multiple, con animación CSS grid-rows."
+      code={code}
+      demo={
+        <div className="w-full max-w-xl">
+          <ITAccordion items={items} allowMultiple={allowMultiple} defaultOpenIds={["what"]} />
+        </div>
+      }
+      controls={
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-semibold text-gray-700">Permitir múltiples abiertas</span>
+          <ITSlideToggle isOn={allowMultiple} onToggle={setAllowMultiple} size="sm" />
+        </div>
+      }
+      gallery={
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <div>
+            <p className="mb-3 text-[10px] font-bold uppercase tracking-wider text-slate-400">Bordered</p>
+            <ITAccordion items={items.slice(0, 3)} variant="bordered" defaultOpenIds={["install"]} />
+          </div>
+          <div>
+            <p className="mb-3 text-[10px] font-bold uppercase tracking-wider text-slate-400">Separated (default)</p>
+            <ITAccordion items={items.slice(0, 3)} defaultOpenIds={["theme"]} />
+          </div>
+        </div>
+      }
+      doc={{
+        summary: "Secciones plegables (FAQ, settings) controladas o no controladas.",
+        examples: [
+          "<ITAccordion items={items} defaultOpenIds={['a']} />",
+          "<ITAccordion items={items} allowMultiple variant=\"bordered\" />",
+        ],
+        props: [
+          { name: "items", type: "ITAccordionItem[]", required: true, description: "Secciones { id, title, content, icon?, disabled? }." },
+          { name: "allowMultiple", type: "boolean", default: "false", description: "Permite varias abiertas." },
+          { name: "defaultOpenIds", type: "string[]", default: "[]", description: "Abiertas al inicio (no controlado)." },
+          { name: "openIds", type: "string[]", description: "Abiertas (modo controlado)." },
+          { name: "onChange", type: "(openIds: string[]) => void", description: "Devuelve las abiertas." },
+          { name: "variant", type: '"default" | "separated" | "bordered"', default: '"separated"', description: "Estilo visual." },
+        ],
+        notes: ["Los headers exponen aria-expanded / aria-controls; el cuerpo es un region etiquetado."],
+      }}
+    />
+  );
+};

package/src/types/chip.types.ts

@@ -0,0 +1,13 @@
+/** Visual styles available for {@link ITChip}. */
+export const chipVariants = {
+  soft: "soft",
+  filled: "filled",
+  outlined: "outlined",
+} as const;
+
+/** Padding / font-size scale shared by all chip sizes. */
+export const chipSizes = {
+  sm: "text-[11px] px-2 py-0.5 gap-1",
+  md: "text-xs px-2.5 py-1 gap-1.5",
+  lg: "text-sm px-3 py-1.5 gap-2",
+} as const;