hazo_ui 2.1.0 → 2.1.2

package/dist/index.cjs

@@ -28,6 +28,7 @@ var FiIcons = require('react-icons/fi');
 var IoIcons = require('react-icons/io5');
 var RiIcons = require('react-icons/ri');
 var TbIcons = require('react-icons/tb');
+var CiIcons = require('react-icons/ci');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -64,6 +65,7 @@ var FiIcons__namespace = /*#__PURE__*/_interopNamespace(FiIcons);
 var IoIcons__namespace = /*#__PURE__*/_interopNamespace(IoIcons);
 var RiIcons__namespace = /*#__PURE__*/_interopNamespace(RiIcons);
 var TbIcons__namespace = /*#__PURE__*/_interopNamespace(TbIcons);
+var CiIcons__namespace = /*#__PURE__*/_interopNamespace(CiIcons);
 
 var ExampleComponent = ({ children, className = "" }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `cls_example_component ${className}`, children });
@@ -1230,7 +1232,8 @@ var iconSetMap = {
   io: IoIcons__namespace,
   io5: IoIcons__namespace,
   ri: RiIcons__namespace,
-  tb: TbIcons__namespace
+  tb: TbIcons__namespace,
+  ci: CiIcons__namespace
 };
 function getIconLibrary(iconSet) {
   if (!iconSet) return null;
@@ -1253,7 +1256,8 @@ function MultiStateRadio({
   selection = "single",
   value,
   onChange,
-  className
+  className,
+  compressed = false
 }) {
   const handleSingleSelection = (selectedValue) => {
     onChange(selectedValue);
@@ -1284,7 +1288,8 @@ function MultiStateRadio({
           className: cn(
             "cls_radio_option flex items-center gap-2",
             layout === "horizontal" ? "flex-row" : "flex-col",
-            "p-2 rounded-md hover:bg-accent transition-colors",
+            compressed ? "" : "p-2 rounded-md",
+            "hover:bg-accent transition-colors",
             selected && "bg-accent"
           ),
           children: [
@@ -1318,7 +1323,8 @@ function MultiStateRadio({
           className: cn(
             "cls_radio_option flex items-center gap-2 cursor-pointer",
             layout === "horizontal" ? "flex-row" : "flex-col",
-            "p-2 rounded-md hover:bg-accent transition-colors",
+            compressed ? "" : "p-2 rounded-md",
+            "hover:bg-accent transition-colors",
             selected && "bg-accent"
           ),
           onClick: () => handleMultiSelection(item.value),
@@ -1373,6 +1379,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__ */ jsxRuntime.jsxs(
       Button,
       {
@@ -1381,10 +1391,13 @@ function MultiStateRadio({
         className: cn(
           "cls_icon_option border-0",
           layout === "horizontal" ? "flex-row" : "flex-col",
-          "gap-2 h-auto py-2 px-3 sm:py-3 sm:px-4",
-          selected && "bg-primary text-primary-foreground",
-          !selected && "hover:bg-accent"
+          "gap-2 h-auto",
+          compressed ? "py-0 px-0" : "py-2 px-3 sm:py-3 sm:px-4",
+          // 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);
@@ -1395,8 +1408,21 @@ function MultiStateRadio({
         "aria-label": item.label,
         "aria-pressed": selected,
         children: [
-          IconComponent && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "cls_icon h-4 w-4 sm:h-5 sm:w-5" }),
-          display_label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_icon_label text-sm font-medium", children: item.label })
+          IconComponent && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "cls_icon_label text-sm font-medium",
+              style: item.fgcolor ? { color: item.fgcolor } : void 0,
+              children: item.label
+            }
+          )
         ]
       }
     );
@@ -1406,8 +1432,15 @@ function MultiStateRadio({
     ] }, item.value);
   };
   const containerClasses = cn(
-    "cls_multi_state_radio border border-input rounded-md p-2 sm:p-3",
-    layout === "horizontal" ? "flex flex-row flex-wrap gap-2 sm:gap-3" : "flex flex-col gap-2 sm:gap-3",
+    "cls_multi_state_radio border border-input rounded-md",
+    compressed ? "" : "p-2 sm:p-3",
+    layout === "horizontal" ? cn(
+      "flex flex-row flex-wrap",
+      compressed ? "gap-0" : "gap-2 sm:gap-3"
+    ) : cn(
+      "flex flex-col",
+      compressed ? "gap-0" : "gap-2 sm:gap-3"
+    ),
     className
   );
   const radioGroupClasses = cn(