@octavius2929-personal/design-system 0.20.0 → 0.22.0

package/dist/index.d.cts

@@ -1503,6 +1503,7 @@ interface ChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, "className"> {
     selected?: boolean;
     tone?: ChipTone;
     onDelete?: () => void;
+    startIcon?: Icon;
     /** Segmento de contexto para el data-testid. */
     testId?: string;
 }
@@ -1729,6 +1730,7 @@ declare const Stepper: react.ForwardRefExoticComponent<StepperProps & react.RefA
 interface TabItem {
     value: string;
     label: ReactNode;
+    icon?: Icon;
     /** Contenido del panel asociado. Si algún item lo define, Tabs renderiza los tabpanel cableados. */
     content?: ReactNode;
 }
@@ -1746,6 +1748,7 @@ interface MenuItemDef {
     label: ReactNode;
     onClick?: () => void;
     danger?: boolean;
+    icon?: Icon;
 }
 interface MenuProps {
     trigger: ReactElement;

package/dist/index.d.ts

@@ -1503,6 +1503,7 @@ interface ChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, "className"> {
     selected?: boolean;
     tone?: ChipTone;
     onDelete?: () => void;
+    startIcon?: Icon;
     /** Segmento de contexto para el data-testid. */
     testId?: string;
 }
@@ -1729,6 +1730,7 @@ declare const Stepper: react.ForwardRefExoticComponent<StepperProps & react.RefA
 interface TabItem {
     value: string;
     label: ReactNode;
+    icon?: Icon;
     /** Contenido del panel asociado. Si algún item lo define, Tabs renderiza los tabpanel cableados. */
     content?: ReactNode;
 }
@@ -1746,6 +1748,7 @@ interface MenuItemDef {
     label: ReactNode;
     onClick?: () => void;
     danger?: boolean;
+    icon?: Icon;
 }
 interface MenuProps {
     trigger: ReactElement;

package/dist/index.js

@@ -801,7 +801,8 @@ function useStyles8({
 
 // src/components/chip/index.tsx
 import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
-var Chip = forwardRef8(function Chip2({ selected: selected3, tone: tone4, onDelete, onClick, children, testId, ...rest }, ref) {
+var ICON_SIZE2 = 13;
+var Chip = forwardRef8(function Chip2({ selected: selected3, tone: tone4, onDelete, onClick, startIcon: StartIcon, children, testId, ...rest }, ref) {
   const clickable2 = Boolean(onClick);
   const { root: root24, deleteBtn: deleteBtn2 } = useStyles8({ selected: selected3, tone: tone4, clickable: clickable2 });
   const { testId: dataTestId, slot } = useTestId("media", testId);
@@ -819,6 +820,7 @@ var Chip = forwardRef8(function Chip2({ selected: selected3, tone: tone4, onDele
       "data-state": states({ selected: selected3 }),
       ...rest,
       children: [
+        StartIcon ? /* @__PURE__ */ jsx11(StartIcon, { size: ICON_SIZE2 }) : null,
         children,
         onDelete && /* @__PURE__ */ jsx11(
           "button",
@@ -828,7 +830,7 @@ var Chip = forwardRef8(function Chip2({ selected: selected3, tone: tone4, onDele
             "aria-label": "Remove",
             onClick: handleDelete,
             "data-testid": slot("delete"),
-            children: /* @__PURE__ */ jsx11(XIcon, { size: 13 })
+            children: /* @__PURE__ */ jsx11(XIcon, { size: ICON_SIZE2 })
           }
         )
       ]
@@ -2333,6 +2335,7 @@ function useStyles24() {
 
 // src/components/tabs/index.tsx
 import { Fragment as Fragment3, jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
+var ICON_SIZE3 = 16;
 var Tabs = forwardRef26(function Tabs2({ items, value, onChange, testId, ...rest }, ref) {
   const { root: root24, tabClass, panel: panel3 } = useStyles24();
   const { testId: dataTestId, slot } = useTestId("nav", testId);
@@ -2373,7 +2376,8 @@ var Tabs = forwardRef26(function Tabs2({ items, value, onChange, testId, ...rest
     /* @__PURE__ */ jsx39("div", { ref, role: "tablist", className: root24, "data-testid": dataTestId, ...rest, children: items.map((item3, index) => {
       const active2 = item3.value === value;
       const tabbable = active2 || activeIndex === -1 && index === 0;
-      return /* @__PURE__ */ jsx39(
+      const ItemIcon = item3.icon;
+      return /* @__PURE__ */ jsxs24(
         "button",
         {
           ref: (el) => {
@@ -2390,7 +2394,10 @@ var Tabs = forwardRef26(function Tabs2({ items, value, onChange, testId, ...rest
           "data-state": states({ selected: active2 }),
           onClick: () => onChange?.(item3.value),
           onKeyDown: (event) => onKeyDown(event, index),
-          children: item3.label
+          children: [
+            ItemIcon ? /* @__PURE__ */ jsx39(ItemIcon, { size: ICON_SIZE3 }) : null,
+            item3.label
+          ]
         },
         item3.value
       );
@@ -2447,6 +2454,7 @@ function useStyles25() {
 
 // src/components/menu/index.tsx
 import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
+var ICON_SIZE4 = 16;
 function assignRef(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
@@ -2569,22 +2577,28 @@ var Menu = forwardRef27(function Menu2({ trigger: trigger2, items, testId }, ref
             "data-align": alignEnd ? "end" : "start",
             "data-testid": slot("list"),
             onKeyDown: onMenuKeyDown,
-            children: items.map((entry, index) => /* @__PURE__ */ jsx40(
-              "button",
-              {
-                type: "button",
-                role: "menuitem",
-                tabIndex: -1,
-                className: entry.danger ? dangerItem : item3,
-                "data-testid": slot(`item-${index}`),
-                onClick: () => {
-                  entry.onClick?.();
-                  setOpen(false);
+            children: items.map((entry, index) => {
+              const ItemIcon = entry.icon;
+              return /* @__PURE__ */ jsxs25(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  tabIndex: -1,
+                  className: entry.danger ? dangerItem : item3,
+                  "data-testid": slot(`item-${index}`),
+                  onClick: () => {
+                    entry.onClick?.();
+                    setOpen(false);
+                  },
+                  children: [
+                    ItemIcon ? /* @__PURE__ */ jsx40(ItemIcon, { size: ICON_SIZE4 }) : null,
+                    entry.label
+                  ]
                 },
-                children: entry.label
-              },
-              index
-            ))
+                index
+              );
+            })
           }
         )
       ]