hazo_ui 2.1.0 → 2.1.2

package/dist/index.d.cts

@@ -66,6 +66,8 @@ interface MultiStateRadioItem {
     value: string;
     icon_selected?: string;
     icon_unselected?: string;
+    fgcolor?: string;
+    bgcolor?: string;
 }
 interface MultiStateRadioProps {
     layout?: "horizontal" | "vertical";
@@ -77,11 +79,12 @@ interface MultiStateRadioProps {
     value: string | string[];
     onChange: (value: string | string[]) => void;
     className?: string;
+    compressed?: boolean;
 }
 /**
  * Multi State Radio Component
  * Supports single and multi-selection with radio buttons or icons
  */
-declare function MultiStateRadio({ layout, style, display_label, icon_set, data, selection, value, onChange, className, }: MultiStateRadioProps): react_jsx_runtime.JSX.Element;
+declare function MultiStateRadio({ layout, style, display_label, icon_set, data, selection, value, onChange, className, compressed, }: MultiStateRadioProps): react_jsx_runtime.JSX.Element;
 
 export { ExampleComponent, type FilterConfig, type FilterField, MultiFilterDialog, MultiSortDialog, MultiStateRadio, type MultiStateRadioItem, type MultiStateRadioProps, type SortConfig, type SortField };

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";
@@ -77,11 +79,12 @@ interface MultiStateRadioProps {
     value: string | string[];
     onChange: (value: string | string[]) => void;
     className?: string;
+    compressed?: boolean;
 }
 /**
  * Multi State Radio Component
  * Supports single and multi-selection with radio buttons or icons
  */
-declare function MultiStateRadio({ layout, style, display_label, icon_set, data, selection, value, onChange, className, }: MultiStateRadioProps): react_jsx_runtime.JSX.Element;
+declare function MultiStateRadio({ layout, style, display_label, icon_set, data, selection, value, onChange, className, compressed, }: MultiStateRadioProps): react_jsx_runtime.JSX.Element;
 
 export { ExampleComponent, type FilterConfig, type FilterField, MultiFilterDialog, MultiSortDialog, MultiStateRadio, type MultiStateRadioItem, type MultiStateRadioProps, type SortConfig, type SortField };

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;
@@ -1216,7 +1218,8 @@ function MultiStateRadio({
   selection = "single",
   value,
   onChange,
-  className
+  className,
+  compressed = false
 }) {
   const handleSingleSelection = (selectedValue) => {
     onChange(selectedValue);
@@ -1247,7 +1250,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: [
@@ -1281,7 +1285,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),
@@ -1336,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,
       {
@@ -1344,10 +1353,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);
@@ -1358,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
+            }
+          )
         ]
       }
     );
@@ -1369,8 +1394,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(