@octavius2929-personal/design-system 1.2.0 → 1.3.0

package/dist/index.d.cts

@@ -1680,6 +1680,12 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     startIcon?: Icon;
     endIcon?: Icon;
     full?: boolean;
+    /** No interactivo mientras carga: no dispara onClick, expone aria-busy y muestra un
+     *  spinner sin cambiar el tamaño del botón (el label queda reservado, solo oculto). */
+    loading?: boolean;
+    /** Estado "elegido" persistente (p.ej. una opción de quiz ya marcada). Distinto del hover/
+     *  focus transitorios; expone aria-pressed. */
+    selected?: boolean;
     /** Segmento de contexto para el data-testid (no es un override del id completo). */
     testId?: string;
 }

package/dist/index.d.ts

@@ -1680,6 +1680,12 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     startIcon?: Icon;
     endIcon?: Icon;
     full?: boolean;
+    /** No interactivo mientras carga: no dispara onClick, expone aria-busy y muestra un
+     *  spinner sin cambiar el tamaño del botón (el label queda reservado, solo oculto). */
+    loading?: boolean;
+    /** Estado "elegido" persistente (p.ej. una opción de quiz ya marcada). Distinto del hover/
+     *  focus transitorios; expone aria-pressed. */
+    selected?: boolean;
     /** Segmento de contexto para el data-testid (no es un override del id completo). */
     testId?: string;
 }

package/dist/index.js

@@ -664,10 +664,15 @@ function states(map) {
 import { useMemo as useMemo7 } from "react";
 
 // src/components/button/use-styles.css.ts
-var full = "use-styles_full__1pbtill4";
+var content = "use-styles_content__1pbtillg";
+var contentHidden = "use-styles_contentHidden__1pbtillh";
+var full = "use-styles_full__1pbtill5";
+var loadingRoot = "use-styles_loadingRoot__1pbtill1";
 var root = "use-styles_root__1pbtill0";
-var size = { sm: "use-styles_size_sm__1pbtill1", md: "use-styles_size_md__1pbtill2", lg: "use-styles_size_lg__1pbtill3" };
-var tone = { filledInk: "use-styles_tone_filledInk__1pbtill5", filledAccent: "use-styles_tone_filledAccent__1pbtill6", outlineInk: "use-styles_tone_outlineInk__1pbtill7", outlineAccent: "use-styles_tone_outlineAccent__1pbtill8", ghostInk: "use-styles_tone_ghostInk__1pbtill9", ghostAccent: "use-styles_tone_ghostAccent__1pbtilla", filledDanger: "use-styles_tone_filledDanger__1pbtillb", outlineDanger: "use-styles_tone_outlineDanger__1pbtillc", ghostDanger: "use-styles_tone_ghostDanger__1pbtilld" };
+var selected = "use-styles_selected__1pbtillf";
+var size = { sm: "use-styles_size_sm__1pbtill2", md: "use-styles_size_md__1pbtill3", lg: "use-styles_size_lg__1pbtill4" };
+var spinner = "use-styles_spinner__1pbtillj";
+var tone = { filledInk: "use-styles_tone_filledInk__1pbtill6", filledAccent: "use-styles_tone_filledAccent__1pbtill7", outlineInk: "use-styles_tone_outlineInk__1pbtill8", outlineAccent: "use-styles_tone_outlineAccent__1pbtill9", ghostInk: "use-styles_tone_ghostInk__1pbtilla", ghostAccent: "use-styles_tone_ghostAccent__1pbtillb", filledDanger: "use-styles_tone_filledDanger__1pbtillc", outlineDanger: "use-styles_tone_outlineDanger__1pbtilld", ghostDanger: "use-styles_tone_ghostDanger__1pbtille" };
 
 // src/components/button/use-styles.ts
 function toneKey(variant2, tone4) {
@@ -679,7 +684,9 @@ function useStyles4({
   tone: tone4 = "ink",
   size: size3 = "md",
   full: full2,
-  className
+  className,
+  selected: selected4,
+  loading
 }) {
   const { themeClass } = useTheme();
   const container = useMemo7(
@@ -687,13 +694,19 @@ function useStyles4({
       themeClass,
       root,
       size[size3],
-      tone[toneKey(variant2, tone4)],
+      // `selected` pisa el tono en vez de combinarse con él (ver comentario en use-styles.css.ts).
+      selected4 ? selected : tone[toneKey(variant2, tone4)],
       full2 && full,
+      loading && loadingRoot,
       className
     ].filter(Boolean).join(" "),
-    [themeClass, variant2, tone4, size3, full2, className]
+    [themeClass, variant2, tone4, size3, full2, loading, selected4, className]
   );
-  return { container };
+  return {
+    container,
+    content: loading ? contentHidden : content,
+    spinner
+  };
 }
 
 // src/components/button/index.tsx
@@ -709,12 +722,27 @@ var Button = forwardRef4(function Button2({
   className,
   type = "button",
   testId,
+  loading,
+  selected: selected4,
   children,
+  onClick,
   ...rest
 }, ref) {
-  const { container } = useStyles4({ variant: variant2, tone: tone4, size: size3, full: full2, className });
-  const { testId: dataTestId } = useTestId("button", testId);
+  const { container, content: content4, spinner: spinner3 } = useStyles4({
+    variant: variant2,
+    tone: tone4,
+    size: size3,
+    full: full2,
+    className,
+    selected: selected4,
+    loading
+  });
+  const { testId: dataTestId, slot } = useTestId("button", testId);
   const iconSize = ICON_SIZE[size3];
+  const handleClick = (event) => {
+    if (loading) return;
+    onClick?.(event);
+  };
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -722,12 +750,19 @@ var Button = forwardRef4(function Button2({
       type,
       className: container,
       "data-testid": dataTestId,
-      "data-state": states({ disabled: rest.disabled }),
+      "data-state": states({ disabled: rest.disabled, loading, selected: selected4 }),
+      "aria-busy": loading || void 0,
+      "aria-disabled": loading || void 0,
+      "aria-pressed": selected4 === void 0 ? void 0 : selected4,
+      onClick: handleClick,
       ...rest,
       children: [
-        StartIcon && /* @__PURE__ */ jsx6(StartIcon, { size: iconSize }),
-        children,
-        EndIcon && /* @__PURE__ */ jsx6(EndIcon, { size: iconSize })
+        /* @__PURE__ */ jsxs("span", { className: content4, children: [
+          StartIcon && /* @__PURE__ */ jsx6(StartIcon, { size: iconSize }),
+          children,
+          EndIcon && /* @__PURE__ */ jsx6(EndIcon, { size: iconSize })
+        ] }),
+        loading && /* @__PURE__ */ jsx6("span", { className: spinner3, "aria-hidden": "true", "data-testid": slot("spinner") })
       ]
     }
   );
@@ -861,7 +896,7 @@ import { useMemo as useMemo11 } from "react";
 // src/components/progress/use-styles.css.ts
 var bar = "use-styles_bar__kbop7v3";
 var indeterminate = "use-styles_indeterminate__kbop7v4";
-var spinner = "use-styles_spinner__kbop7v5";
+var spinner2 = "use-styles_spinner__kbop7v5";
 var track = "use-styles_track__kbop7v2";
 
 // src/components/progress/use-styles.ts
@@ -875,7 +910,7 @@ function useStyles8({
   return useMemo11(() => {
     const root24 = (...classes) => [themeClass, ...classes, className].filter(Boolean).join(" ");
     if (variant2 === "circular") {
-      return { track: "", bar: "", spinner: root24(spinner) };
+      return { track: "", bar: "", spinner: root24(spinner2) };
     }
     return {
       track: root24(track),
@@ -888,7 +923,7 @@ function useStyles8({
 // src/components/progress/index.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
 var Progress = forwardRef8(function Progress2({ variant: variant2 = "linear", value, size: size3 = 20, className, testId, ...rest }, ref) {
-  const { track: track4, bar: bar2, spinner: spinner2 } = useStyles8({ variant: variant2, value, className });
+  const { track: track4, bar: bar2, spinner: spinner3 } = useStyles8({ variant: variant2, value, className });
   const indeterminate2 = value === void 0;
   const { testId: dataTestId, slot } = useTestId("media", testId);
   if (variant2 === "circular") {
@@ -896,7 +931,7 @@ var Progress = forwardRef8(function Progress2({ variant: variant2 = "linear", va
       "span",
       {
         ref,
-        className: spinner2,
+        className: spinner3,
         role: "progressbar",
         "aria-valuenow": indeterminate2 ? void 0 : value,
         "aria-valuemin": indeterminate2 ? void 0 : 0,
@@ -967,12 +1002,12 @@ import { useMemo as useMemo12 } from "react";
 var clickable = "use-styles_clickable__1axilf44";
 var deleteBtn = "use-styles_deleteBtn__1axilf45";
 var root5 = "use-styles_root__1axilf40";
-var selected = "use-styles_selected__1axilf43";
+var selected2 = "use-styles_selected__1axilf43";
 var tone3 = { ink: "use-styles_tone_ink__1axilf41", accent: "use-styles_tone_accent__1axilf42" };
 
 // src/components/chip/use-styles.ts
 function useStyles9({
-  selected: selected3,
+  selected: selected4,
   tone: tone4 = "ink",
   clickable: clickable2
 }) {
@@ -981,10 +1016,10 @@ function useStyles9({
     () => [
       themeClass,
       root5,
-      selected3 ? selected : tone3[tone4],
+      selected4 ? selected2 : tone3[tone4],
       clickable2 && clickable
     ].filter(Boolean).join(" "),
-    [themeClass, selected3, tone4, clickable2]
+    [themeClass, selected4, tone4, clickable2]
   );
   return { root: root24, deleteBtn };
 }
@@ -992,9 +1027,9 @@ function useStyles9({
 // src/components/chip/index.tsx
 import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var ICON_SIZE2 = 13;
-var Chip = forwardRef9(function Chip2({ selected: selected3, tone: tone4, onDelete, onClick, startIcon: StartIcon, children, testId, ...rest }, ref) {
+var Chip = forwardRef9(function Chip2({ selected: selected4, tone: tone4, onDelete, onClick, startIcon: StartIcon, children, testId, ...rest }, ref) {
   const clickable2 = Boolean(onClick);
-  const { root: root24, deleteBtn: deleteBtn2 } = useStyles9({ selected: selected3, tone: tone4, clickable: clickable2 });
+  const { root: root24, deleteBtn: deleteBtn2 } = useStyles9({ selected: selected4, tone: tone4, clickable: clickable2 });
   const { testId: dataTestId, slot } = useTestId("media", testId);
   const handleDelete = (event) => {
     event.stopPropagation();
@@ -1007,7 +1042,7 @@ var Chip = forwardRef9(function Chip2({ selected: selected3, tone: tone4, onDele
       className: root24,
       onClick,
       "data-testid": dataTestId,
-      "data-state": states({ selected: selected3 }),
+      "data-state": states({ selected: selected4 }),
       ...rest,
       children: [
         StartIcon ? /* @__PURE__ */ jsx12(StartIcon, { size: ICON_SIZE2 }) : null,
@@ -1765,7 +1800,7 @@ function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, title, ...res
 import { useMemo as useMemo21 } from "react";
 
 // src/components/alert/use-styles.css.ts
-var content = "use-styles_content__ivsh6u6";
+var content2 = "use-styles_content__ivsh6u6";
 var iconSlot = "use-styles_iconSlot__ivsh6u5";
 var root12 = "use-styles_root__ivsh6u0";
 var severity = { info: "use-styles_severity_info__ivsh6u1", ok: "use-styles_severity_ok__ivsh6u2", warn: "use-styles_severity_warn__ivsh6u3", danger: "use-styles_severity_danger__ivsh6u4" };
@@ -1783,7 +1818,7 @@ function useStyles17({
   return {
     root: root24,
     iconSlot,
-    content
+    content: content2
   };
 }
 
@@ -1983,7 +2018,7 @@ function useStyles19({
       placeholder,
       chevron: chevron3,
       menu,
-      optionClass: (selected3, active2) => [option, selected3 && optionSelected, active2 && optionActive].filter(Boolean).join(" ")
+      optionClass: (selected4, active2) => [option, selected4 && optionSelected, active2 && optionActive].filter(Boolean).join(" ")
     };
   }, [themeClass, open]);
 }
@@ -2032,7 +2067,7 @@ var Select = forwardRef21(function Select2({
     document.addEventListener("mousedown", onPointerDown);
     return () => document.removeEventListener("mousedown", onPointerDown);
   }, [open]);
-  const selected3 = options.find((option2) => option2.value === value);
+  const selected4 = options.find((option2) => option2.value === value);
   const selectAt = (index) => {
     const option2 = options[index];
     if (option2) onChange?.(option2.value);
@@ -2105,7 +2140,7 @@ var Select = forwardRef21(function Select2({
         },
         onKeyDown: handleKeyDown,
         children: [
-          selected3 ? selected3.label : /* @__PURE__ */ jsx32("span", { className: placeholderClass, children: placeholder2 }),
+          selected4 ? selected4.label : /* @__PURE__ */ jsx32("span", { className: placeholderClass, children: placeholder2 }),
           /* @__PURE__ */ jsx32("span", { className: chevron3, children: /* @__PURE__ */ jsx32(ChevronDownIcon, { size: 18 }) })
         ]
       }
@@ -3140,29 +3175,29 @@ import { forwardRef as forwardRef33 } from "react";
 import { useMemo as useMemo35 } from "react";
 
 // src/components/list-item/use-styles.css.ts
-var content2 = "use-styles_content__kbreq13";
+var content3 = "use-styles_content__kbreq13";
 var leading = "use-styles_leading__kbreq12";
 var root23 = "use-styles_root__kbreq10";
-var selected2 = "use-styles_selected__kbreq11";
+var selected3 = "use-styles_selected__kbreq11";
 var trailing = "use-styles_trailing__kbreq14";
 
 // src/components/list-item/use-styles.ts
 function useStyles31({
-  selected: selected3,
+  selected: selected4,
   className
 }) {
   const { themeClass } = useTheme();
   const root24 = useMemo35(
-    () => [themeClass, root23, selected3 && selected2, className].filter(Boolean).join(" "),
-    [themeClass, selected3, className]
+    () => [themeClass, root23, selected4 && selected3, className].filter(Boolean).join(" "),
+    [themeClass, selected4, className]
   );
-  return { root: root24, leading, content: content2, trailing };
+  return { root: root24, leading, content: content3, trailing };
 }
 
 // src/components/list-item/index.tsx
 import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
-var ListItem = forwardRef33(function ListItem2({ leading: leading2, trailing: trailing2, selected: selected3, className, testId, children, ...rest }, ref) {
-  const styles = useStyles31({ selected: selected3, className });
+var ListItem = forwardRef33(function ListItem2({ leading: leading2, trailing: trailing2, selected: selected4, className, testId, children, ...rest }, ref) {
+  const styles = useStyles31({ selected: selected4, className });
   const { testId: dataTestId, slot } = useTestId("list", testId);
   return /* @__PURE__ */ jsxs30(
     "div",
@@ -3170,7 +3205,7 @@ var ListItem = forwardRef33(function ListItem2({ leading: leading2, trailing: tr
       ref,
       className: styles.root,
       "data-testid": dataTestId,
-      "data-state": states({ selected: selected3 }),
+      "data-state": states({ selected: selected4 }),
       ...rest,
       children: [
         leading2 != null && /* @__PURE__ */ jsx46("span", { className: styles.leading, "data-testid": slot("leading"), children: leading2 }),