@octavius2929-personal/design-system 0.21.0 → 0.22.0

package/dist/index.cjs

@@ -979,7 +979,8 @@ function useStyles8({
 
 // src/components/chip/index.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var Chip = (0, import_react21.forwardRef)(function Chip2({ selected: selected3, tone: tone4, onDelete, onClick, children, testId, ...rest }, ref) {
+var ICON_SIZE2 = 13;
+var Chip = (0, import_react21.forwardRef)(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);
@@ -997,6 +998,7 @@ var Chip = (0, import_react21.forwardRef)(function Chip2({ selected: selected3,
       "data-state": states({ selected: selected3 }),
       ...rest,
       children: [
+        StartIcon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StartIcon, { size: ICON_SIZE2 }) : null,
         children,
         onDelete && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "button",
@@ -1006,7 +1008,7 @@ var Chip = (0, import_react21.forwardRef)(function Chip2({ selected: selected3,
             "aria-label": "Remove",
             onClick: handleDelete,
             "data-testid": slot("delete"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(XIcon, { size: 13 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(XIcon, { size: ICON_SIZE2 })
           }
         )
       ]
@@ -2504,6 +2506,7 @@ function useStyles24() {
 
 // src/components/tabs/index.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
+var ICON_SIZE3 = 16;
 var Tabs = (0, import_react55.forwardRef)(function Tabs2({ items, value, onChange, testId, ...rest }, ref) {
   const { root: root24, tabClass, panel: panel3 } = useStyles24();
   const { testId: dataTestId, slot } = useTestId("nav", testId);
@@ -2544,7 +2547,8 @@ var Tabs = (0, import_react55.forwardRef)(function Tabs2({ items, value, onChang
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("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__ */ (0, import_jsx_runtime39.jsx)(
+      const ItemIcon = item3.icon;
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
         "button",
         {
           ref: (el) => {
@@ -2561,7 +2565,10 @@ var Tabs = (0, import_react55.forwardRef)(function Tabs2({ items, value, onChang
           "data-state": states({ selected: active2 }),
           onClick: () => onChange?.(item3.value),
           onKeyDown: (event) => onKeyDown(event, index),
-          children: item3.label
+          children: [
+            ItemIcon ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ItemIcon, { size: ICON_SIZE3 }) : null,
+            item3.label
+          ]
         },
         item3.value
       );
@@ -2611,6 +2618,7 @@ function useStyles25() {
 
 // src/components/menu/index.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
+var ICON_SIZE4 = 16;
 function assignRef(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
@@ -2733,22 +2741,28 @@ var Menu = (0, import_react57.forwardRef)(function Menu2({ trigger: trigger2, it
             "data-align": alignEnd ? "end" : "start",
             "data-testid": slot("list"),
             onKeyDown: onMenuKeyDown,
-            children: items.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-              "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__ */ (0, import_jsx_runtime40.jsxs)(
+                "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__ */ (0, import_jsx_runtime40.jsx)(ItemIcon, { size: ICON_SIZE4 }) : null,
+                    entry.label
+                  ]
                 },
-                children: entry.label
-              },
-              index
-            ))
+                index
+              );
+            })
           }
         )
       ]