@verma-consulting/design-library 0.1.53 → 0.1.54

package/dist/index.d.mts

@@ -7,6 +7,7 @@ import MuiTablePagination, { LabelDisplayedRowsArgs } from '@mui/material/TableP
 import { SxProps, Theme } from '@mui/material/styles';
 export { ThemeProvider, createTheme, styled, useTheme } from '@mui/material/styles';
 export { makeStyles } from '@mui/styles';
+import { ButtonProps } from '@mui/material/Button';
 import { SwitchProps } from '@mui/material/Switch';
 import { userStatus, GenericPayload } from '@verma-consulting/common-library';
 
@@ -127,14 +128,15 @@ declare const EmptyState: React__default.FC<EmptyStateProps>;
 
 type PillProps = {
     label?: string;
-    leftIcon?: string;
-    rightIcon?: string;
-    color?: string;
+    leftIcon?: React__default.ReactNode;
+    rightIcon?: React__default.ReactNode;
+    color?: ButtonProps["color"];
     isSelected?: boolean;
     onClick?: () => void;
     disabled?: boolean;
+    variant?: string;
 };
-declare const Pill: ({ variant, leftIcon, rightIcon, color, isSelected, onClick, label, disabled, }: PillProps) => react_jsx_runtime.JSX.Element;
+declare const Pill: ({ variant: _variant, leftIcon, rightIcon, color, isSelected, onClick, label, disabled, }: PillProps) => react_jsx_runtime.JSX.Element;
 
 declare const IOSSwitch: React__default.FC<SwitchProps>;
 

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import MuiTablePagination, { LabelDisplayedRowsArgs } from '@mui/material/TableP
 import { SxProps, Theme } from '@mui/material/styles';
 export { ThemeProvider, createTheme, styled, useTheme } from '@mui/material/styles';
 export { makeStyles } from '@mui/styles';
+import { ButtonProps } from '@mui/material/Button';
 import { SwitchProps } from '@mui/material/Switch';
 import { userStatus, GenericPayload } from '@verma-consulting/common-library';
 
@@ -127,14 +128,15 @@ declare const EmptyState: React__default.FC<EmptyStateProps>;
 
 type PillProps = {
     label?: string;
-    leftIcon?: string;
-    rightIcon?: string;
-    color?: string;
+    leftIcon?: React__default.ReactNode;
+    rightIcon?: React__default.ReactNode;
+    color?: ButtonProps["color"];
     isSelected?: boolean;
     onClick?: () => void;
     disabled?: boolean;
+    variant?: string;
 };
-declare const Pill: ({ variant, leftIcon, rightIcon, color, isSelected, onClick, label, disabled, }: PillProps) => react_jsx_runtime.JSX.Element;
+declare const Pill: ({ variant: _variant, leftIcon, rightIcon, color, isSelected, onClick, label, disabled, }: PillProps) => react_jsx_runtime.JSX.Element;
 
 declare const IOSSwitch: React__default.FC<SwitchProps>;
 

package/dist/index.js

@@ -1124,11 +1124,42 @@ var EmptyState_default = EmptyState;
 var import_material10 = require("@mui/material");
 var import_styles9 = require("@mui/material/styles");
 var import_jsx_runtime11 = require("react/jsx-runtime");
+function renderIconSlot(node, side) {
+  if (node == null) return null;
+  const spacing = side === "left" ? { pr: 1 } : { ml: 1 };
+  if (typeof node === "string") {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_material10.Icon,
+      {
+        baseClassName: "material-icons",
+        fontSize: "small",
+        color: "inherit",
+        sx: spacing,
+        "data-testid": side === "left" ? "pill-left-icon" : "pill-right-icon",
+        children: node
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_material10.Box,
+    {
+      component: "span",
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        color: "inherit",
+        ...spacing
+      },
+      "data-testid": side === "left" ? "pill-left-icon" : "pill-right-icon",
+      children: node
+    }
+  );
+}
 var Pill = ({
-  variant = "filter",
+  variant: _variant = "filter",
   leftIcon = null,
   rightIcon = null,
-  color = null,
+  color,
   isSelected = false,
   onClick = () => null,
   label = "",
@@ -1139,7 +1170,7 @@ var Pill = ({
     import_material10.Button,
     {
       variant: isSelected ? "contained" : "outlined",
-      color: color || "primary",
+      color: color != null ? color : "primary",
       sx: {
         ...glassSurface(theme),
         borderRadius: 16,
@@ -1156,27 +1187,9 @@ var Pill = ({
       onClick,
       disabled,
       children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
-        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_material10.Icon,
-          {
-            className: leftIcon,
-            fontSize: 14,
-            color: "inherit",
-            style: { paddingRight: 8 },
-            "data-testid": "pill-left-icon"
-          }
-        ),
+        renderIconSlot(leftIcon, "left"),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material10.Typography, { variant: "subtitle2", color: "inherit", fontWeight: 700, children: label }),
-        rightIcon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_material10.Icon,
-          {
-            className: rightIcon,
-            fontSize: 14,
-            color: "inherit",
-            style: { marginLeft: 8 },
-            "data-testid": "pill-right-icon"
-          }
-        )
+        renderIconSlot(rightIcon, "right")
       ] })
     }
   );