hazo_ui 2.1.0 → 2.1.1

package/dist/index.d.ts

@@ -77,11 +77,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

@@ -1216,7 +1216,8 @@ function MultiStateRadio({
   selection = "single",
   value,
   onChange,
-  className
+  className,
+  compressed = false
 }) {
   const handleSingleSelection = (selectedValue) => {
     onChange(selectedValue);
@@ -1247,7 +1248,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 +1283,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),
@@ -1344,7 +1347,8 @@ 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",
+          "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"
         ),
@@ -1369,8 +1373,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(