@octavius2929-personal/design-system 1.2.0 → 1.3.0

package/dist/index.cjs

@@ -844,10 +844,15 @@ function states(map) {
 var import_react12 = require("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) {
@@ -859,7 +864,9 @@ function useStyles4({
   tone: tone4 = "ink",
   size: size3 = "md",
   full: full2,
-  className
+  className,
+  selected: selected4,
+  loading
 }) {
   const { themeClass } = useTheme();
   const container = (0, import_react12.useMemo)(
@@ -867,13 +874,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
@@ -889,12 +902,27 @@ var Button = (0, import_react13.forwardRef)(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__ */ (0, import_jsx_runtime6.jsxs)(
     "button",
     {
@@ -902,12 +930,19 @@ var Button = (0, import_react13.forwardRef)(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__ */ (0, import_jsx_runtime6.jsx)(StartIcon, { size: iconSize }),
-        children,
-        EndIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(EndIcon, { size: iconSize })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: content4, children: [
+          StartIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StartIcon, { size: iconSize }),
+          children,
+          EndIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(EndIcon, { size: iconSize })
+        ] }),
+        loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: spinner3, "aria-hidden": "true", "data-testid": slot("spinner") })
       ]
     }
   );
@@ -1041,7 +1076,7 @@ var import_react20 = require("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
@@ -1055,7 +1090,7 @@ function useStyles8({
   return (0, import_react20.useMemo)(() => {
     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),
@@ -1068,7 +1103,7 @@ function useStyles8({
 // src/components/progress/index.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var Progress = (0, import_react21.forwardRef)(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") {
@@ -1076,7 +1111,7 @@ var Progress = (0, import_react21.forwardRef)(function Progress2({ variant: vari
       "span",
       {
         ref,
-        className: spinner2,
+        className: spinner3,
         role: "progressbar",
         "aria-valuenow": indeterminate2 ? void 0 : value,
         "aria-valuemin": indeterminate2 ? void 0 : 0,
@@ -1147,12 +1182,12 @@ var import_react22 = require("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
 }) {
@@ -1161,10 +1196,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 };
 }
@@ -1172,9 +1207,9 @@ function useStyles9({
 // src/components/chip/index.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var ICON_SIZE2 = 13;
-var Chip = (0, import_react23.forwardRef)(function Chip2({ selected: selected3, tone: tone4, onDelete, onClick, startIcon: StartIcon, children, testId, ...rest }, ref) {
+var Chip = (0, import_react23.forwardRef)(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();
@@ -1187,7 +1222,7 @@ var Chip = (0, import_react23.forwardRef)(function Chip2({ selected: selected3,
       className: root24,
       onClick,
       "data-testid": dataTestId,
-      "data-state": states({ selected: selected3 }),
+      "data-state": states({ selected: selected4 }),
       ...rest,
       children: [
         StartIcon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StartIcon, { size: ICON_SIZE2 }) : null,
@@ -1945,7 +1980,7 @@ function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, title, ...res
 var import_react40 = require("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" };
@@ -1963,7 +1998,7 @@ function useStyles17({
   return {
     root: root24,
     iconSlot,
-    content
+    content: content2
   };
 }
 
@@ -2156,7 +2191,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]);
 }
@@ -2205,7 +2240,7 @@ var Select = (0, import_react45.forwardRef)(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);
@@ -2278,7 +2313,7 @@ var Select = (0, import_react45.forwardRef)(function Select2({
         },
         onKeyDown: handleKeyDown,
         children: [
-          selected3 ? selected3.label : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: placeholderClass, children: placeholder2 }),
+          selected4 ? selected4.label : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: placeholderClass, children: placeholder2 }),
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: chevron3, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevronDownIcon, { size: 18 }) })
         ]
       }
@@ -3301,29 +3336,29 @@ var import_react69 = require("react");
 var import_react68 = require("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 = (0, import_react68.useMemo)(
-    () => [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
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var ListItem = (0, import_react69.forwardRef)(function ListItem2({ leading: leading2, trailing: trailing2, selected: selected3, className, testId, children, ...rest }, ref) {
-  const styles = useStyles31({ selected: selected3, className });
+var ListItem = (0, import_react69.forwardRef)(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__ */ (0, import_jsx_runtime46.jsxs)(
     "div",
@@ -3331,7 +3366,7 @@ var ListItem = (0, import_react69.forwardRef)(function ListItem2({ leading: lead
       ref,
       className: styles.root,
       "data-testid": dataTestId,
-      "data-state": states({ selected: selected3 }),
+      "data-state": states({ selected: selected4 }),
       ...rest,
       children: [
         leading2 != null && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: styles.leading, "data-testid": slot("leading"), children: leading2 }),