hazo_ui 2.1.1 → 2.1.2

package/dist/index.d.ts

@@ -66,6 +66,8 @@ interface MultiStateRadioItem {
     value: string;
     icon_selected?: string;
     icon_unselected?: string;
+    fgcolor?: string;
+    bgcolor?: string;
 }
 interface MultiStateRadioProps {
     layout?: "horizontal" | "vertical";

package/dist/index.js

@@ -27,6 +27,7 @@ import * as FiIcons from 'react-icons/fi';
 import * as IoIcons from 'react-icons/io5';
 import * as RiIcons from 'react-icons/ri';
 import * as TbIcons from 'react-icons/tb';
+import * as CiIcons from 'react-icons/ci';
 
 var ExampleComponent = ({ children, className = "" }) => {
   return /* @__PURE__ */ jsx("div", { className: `cls_example_component ${className}`, children });
@@ -1193,7 +1194,8 @@ var iconSetMap = {
   io: IoIcons,
   io5: IoIcons,
   ri: RiIcons,
-  tb: TbIcons
+  tb: TbIcons,
+  ci: CiIcons
 };
 function getIconLibrary(iconSet) {
   if (!iconSet) return null;
@@ -1339,6 +1341,10 @@ function MultiStateRadio({
     const SelectedIcon = icon_set && item.icon_selected ? getIconComponent(icon_set, item.icon_selected) : null;
     const UnselectedIcon = icon_set && item.icon_unselected ? getIconComponent(icon_set, item.icon_unselected) : null;
     const IconComponent = selected && SelectedIcon ? SelectedIcon : UnselectedIcon || SelectedIcon;
+    const buttonStyles = {};
+    if (item.bgcolor) {
+      buttonStyles.backgroundColor = item.bgcolor;
+    }
     const buttonContent = /* @__PURE__ */ jsxs(
       Button,
       {
@@ -1349,9 +1355,11 @@ function MultiStateRadio({
           layout === "horizontal" ? "flex-row" : "flex-col",
           "gap-2 h-auto",
           compressed ? "py-0 px-0" : "py-2 px-3 sm:py-3 sm:px-4",
-          selected && "bg-primary text-primary-foreground",
-          !selected && "hover:bg-accent"
+          // Only apply default colors if custom colors are not provided
+          !item.bgcolor && selected && "bg-primary text-primary-foreground",
+          !item.bgcolor && !selected && "hover:bg-accent"
         ),
+        style: Object.keys(buttonStyles).length > 0 ? buttonStyles : void 0,
         onClick: () => {
           if (selection === "single") {
             handleSingleSelection(item.value);
@@ -1362,8 +1370,21 @@ function MultiStateRadio({
         "aria-label": item.label,
         "aria-pressed": selected,
         children: [
-          IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: "cls_icon h-4 w-4 sm:h-5 sm:w-5" }),
-          display_label && /* @__PURE__ */ jsx("span", { className: "cls_icon_label text-sm font-medium", children: item.label })
+          IconComponent && /* @__PURE__ */ jsx(
+            IconComponent,
+            {
+              className: "cls_icon h-4 w-4 sm:h-5 sm:w-5",
+              style: item.fgcolor ? { color: item.fgcolor } : void 0
+            }
+          ),
+          display_label && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "cls_icon_label text-sm font-medium",
+              style: item.fgcolor ? { color: item.fgcolor } : void 0,
+              children: item.label
+            }
+          )
         ]
       }
     );