hazo_ui 2.0.1 → 2.1.1

package/README.md

@@ -16,6 +16,8 @@ npm install hazo_ui
 
 - **[MultiSortDialog](#multisortdialog)** - A flexible dialog component for multi-field sorting with drag-and-drop reordering. Allows users to set sort priority and direction (ascending/descending) for multiple fields.
 
+- **[MultiStateRadio](#multistateradio)** - A flexible radio button/icon selection component with support for single and multi-selection modes, customizable layouts, and react-icons integration. Perfect for settings panels, preference selection, and option groups.
+
 ---
 
 ## MultiFilterDialog
@@ -444,6 +446,227 @@ const sortedData = applySorts(originalData, sorts);
 
 ---
 
+## MultiStateRadio
+
+A flexible radio button/icon selection component with support for single and multi-selection modes, customizable layouts, and react-icons integration. Perfect for settings panels, preference selection, and option groups.
+
+#### Features
+
+- **Single & Multi-Selection**: Support for both single selection (radio) and multi-selection (checkbox) modes
+- **Layout Options**: Horizontal (default) or vertical arrangement of options
+- **Style Variants**: Radio button style or icon-only button style
+- **Icon Support**: Integration with react-icons library (supports fa, md, hi, bi, ai, bs, fi, io, ri, tb icon sets)
+- **Label Control**: Option to show or hide labels
+- **Tooltips**: Hover tooltips with 1-second delay showing option labels
+- **Responsive Design**: Adaptive spacing and sizing for different screen sizes
+- **Controlled Component**: Fully controlled component with value/onChange pattern
+- **TypeScript Support**: Fully typed with TypeScript interfaces
+- **Accessible**: Built with accessibility in mind using Radix UI primitives
+
+#### Props
+
+```typescript
+interface MultiStateRadioItem {
+  label: string;                    // Display label for the option
+  value: string;                    // Unique value identifier
+  icon_selected?: string;           // Icon name when selected (e.g., "FaHome")
+  icon_unselected?: string;         // Icon name when unselected (e.g., "FaRegHome")
+}
+
+interface MultiStateRadioProps {
+  layout?: 'horizontal' | 'vertical';  // Layout direction (default: 'horizontal')
+  style?: 'radio' | 'icons';           // Display style (default: 'radio')
+  display_label?: boolean;              // Show/hide labels (default: true)
+  icon_set?: string;                    // Icon set package name (e.g., 'fa', 'md')
+  data: MultiStateRadioItem[];          // Array of options
+  selection: 'single' | 'multi';       // Selection mode
+  value: string | string[];             // Controlled value (string for single, array for multi)
+  onChange: (value: string | string[]) => void;  // Change handler
+  className?: string;                   // Additional CSS classes
+}
+```
+
+#### Usage
+
+**Basic Single Selection (Radio Style)**
+
+```tsx
+import { MultiStateRadio, type MultiStateRadioItem } from 'hazo_ui';
+import { useState } from 'react';
+
+function SettingsPanel() {
+  const [selectedOption, setSelectedOption] = useState<string>('option1');
+
+  const options: MultiStateRadioItem[] = [
+    { label: 'Option 1', value: 'option1' },
+    { label: 'Option 2', value: 'option2' },
+    { label: 'Option 3', value: 'option3' },
+    { label: 'Option 4', value: 'option4' },
+  ];
+
+  return (
+    <MultiStateRadio
+      data={options}
+      value={selectedOption}
+      onChange={setSelectedOption}
+      selection="single"
+      layout="horizontal"
+      style="radio"
+      display_label={true}
+    />
+  );
+}
+```
+
+**Icon Style with React Icons**
+
+```tsx
+import { MultiStateRadio, type MultiStateRadioItem } from 'hazo_ui';
+import { useState } from 'react';
+
+function IconSelector() {
+  const [selectedIcon, setSelectedIcon] = useState<string>('home');
+
+  const iconOptions: MultiStateRadioItem[] = [
+    {
+      label: 'Home',
+      value: 'home',
+      icon_selected: 'FaHome',
+      icon_unselected: 'FaRegHome',
+    },
+    {
+      label: 'User',
+      value: 'user',
+      icon_selected: 'FaUser',
+      icon_unselected: 'FaRegUser',
+    },
+    {
+      label: 'Settings',
+      value: 'settings',
+      icon_selected: 'FaCog',
+      icon_unselected: 'FaRegCog',
+    },
+  ];
+
+  return (
+    <MultiStateRadio
+      data={iconOptions}
+      value={selectedIcon}
+      onChange={setSelectedIcon}
+      selection="single"
+      layout="horizontal"
+      style="icons"
+      display_label={true}
+      icon_set="fa"  // FontAwesome icons
+    />
+  );
+}
+```
+
+**Multi-Selection Mode**
+
+```tsx
+import { MultiStateRadio, type MultiStateRadioItem } from 'hazo_ui';
+import { useState } from 'react';
+
+function MultiSelectExample() {
+  const [selectedOptions, setSelectedOptions] = useState<string[]>(['option1', 'option3']);
+
+  const options: MultiStateRadioItem[] = [
+    { label: 'Option 1', value: 'option1' },
+    { label: 'Option 2', value: 'option2' },
+    { label: 'Option 3', value: 'option3' },
+    { label: 'Option 4', value: 'option4' },
+  ];
+
+  return (
+    <MultiStateRadio
+      data={options}
+      value={selectedOptions}
+      onChange={setSelectedOptions}
+      selection="multi"
+      layout="horizontal"
+      style="radio"
+      display_label={true}
+    />
+  );
+}
+```
+
+**Vertical Layout with Icons Only (No Labels)**
+
+```tsx
+import { MultiStateRadio, type MultiStateRadioItem } from 'hazo_ui';
+import { useState } from 'react';
+
+function VerticalIconSelector() {
+  const [selected, setSelected] = useState<string>('favorite');
+
+  const options: MultiStateRadioItem[] = [
+    {
+      label: 'Favorite',
+      value: 'favorite',
+      icon_selected: 'MdFavorite',
+      icon_unselected: 'MdFavoriteBorder',
+    },
+    {
+      label: 'Star',
+      value: 'star',
+      icon_selected: 'MdStar',
+      icon_unselected: 'MdStarBorder',
+    },
+  ];
+
+  return (
+    <MultiStateRadio
+      data={options}
+      value={selected}
+      onChange={setSelected}
+      selection="single"
+      layout="vertical"
+      style="icons"
+      display_label={false}  // Hide labels, show only icons
+      icon_set="md"  // Material Design icons
+    />
+  );
+}
+```
+
+#### Supported Icon Sets
+
+The component supports the following react-icons packages:
+
+- `fa` - FontAwesome (react-icons/fa)
+- `md` - Material Design (react-icons/md)
+- `hi` - Heroicons (react-icons/hi)
+- `bi` - Bootstrap Icons (react-icons/bi)
+- `ai` - Ant Design Icons (react-icons/ai)
+- `bs` - Bootstrap Icons (react-icons/bs)
+- `fi` - Feather Icons (react-icons/fi)
+- `io` / `io5` - Ionicons (react-icons/io5)
+- `ri` - Remix Icon (react-icons/ri)
+- `tb` - Tabler Icons (react-icons/tb)
+
+#### Expected Output
+
+**Single Selection Mode:**
+```typescript
+// onChange receives a string value
+'onChange' => (value: string) => {
+  // value will be the selected option's value, e.g., "option1"
+}
+```
+
+**Multi-Selection Mode:**
+```typescript
+// onChange receives an array of string values
+'onChange' => (value: string[]) => {
+  // value will be an array of selected values, e.g., ["option1", "option3"]
+}
+```
+
+---
+
 ## Styling
 
 Both components use Tailwind CSS and follow shadcn/ui design patterns. Make sure your project has Tailwind CSS configured with the following CSS variables:

package/dist/index.cjs

@@ -17,6 +17,17 @@ var SwitchPrimitives = require('@radix-ui/react-switch');
 var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
+var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
+var FaIcons = require('react-icons/fa');
+var MdIcons = require('react-icons/md');
+var HiIcons = require('react-icons/hi');
+var BiIcons = require('react-icons/bi');
+var AiIcons = require('react-icons/ai');
+var BsIcons = require('react-icons/bs');
+var FiIcons = require('react-icons/fi');
+var IoIcons = require('react-icons/io5');
+var RiIcons = require('react-icons/ri');
+var TbIcons = require('react-icons/tb');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -42,6 +53,17 @@ var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitiv
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
+var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
+var FaIcons__namespace = /*#__PURE__*/_interopNamespace(FaIcons);
+var MdIcons__namespace = /*#__PURE__*/_interopNamespace(MdIcons);
+var HiIcons__namespace = /*#__PURE__*/_interopNamespace(HiIcons);
+var BiIcons__namespace = /*#__PURE__*/_interopNamespace(BiIcons);
+var AiIcons__namespace = /*#__PURE__*/_interopNamespace(AiIcons);
+var BsIcons__namespace = /*#__PURE__*/_interopNamespace(BsIcons);
+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 ExampleComponent = ({ children, className = "" }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `cls_example_component ${className}`, children });
@@ -1171,9 +1193,261 @@ function MultiSortDialog({
     ] })
   ] });
 }
+var RadioGroup = React6__namespace.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadioGroupPrimitive__namespace.Root,
+    {
+      className: cn("grid gap-2", className),
+      ...props,
+      ref
+    }
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive__namespace.Root.displayName;
+var RadioGroupItem = React6__namespace.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadioGroupPrimitive__namespace.Item,
+    {
+      ref,
+      className: cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
+    }
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive__namespace.Item.displayName;
+var iconSetMap = {
+  fa: FaIcons__namespace,
+  md: MdIcons__namespace,
+  hi: HiIcons__namespace,
+  bi: BiIcons__namespace,
+  ai: AiIcons__namespace,
+  bs: BsIcons__namespace,
+  fi: FiIcons__namespace,
+  io: IoIcons__namespace,
+  io5: IoIcons__namespace,
+  ri: RiIcons__namespace,
+  tb: TbIcons__namespace
+};
+function getIconLibrary(iconSet) {
+  if (!iconSet) return null;
+  const normalizedSet = iconSet.toLowerCase();
+  return iconSetMap[normalizedSet] || null;
+}
+function getIconComponent(iconSet, iconName) {
+  if (!iconSet || !iconName) return null;
+  const iconLibrary = getIconLibrary(iconSet);
+  if (!iconLibrary) return null;
+  const IconComponent = iconLibrary[iconName];
+  return IconComponent || null;
+}
+function MultiStateRadio({
+  layout = "horizontal",
+  style = "radio",
+  display_label = true,
+  icon_set,
+  data,
+  selection = "single",
+  value,
+  onChange,
+  className,
+  compressed = false
+}) {
+  const handleSingleSelection = (selectedValue) => {
+    onChange(selectedValue);
+  };
+  const handleMultiSelection = (selectedValue) => {
+    const currentValues = Array.isArray(value) ? value : [];
+    const isSelected2 = currentValues.includes(selectedValue);
+    if (isSelected2) {
+      onChange(currentValues.filter((v) => v !== selectedValue));
+    } else {
+      onChange([...currentValues, selectedValue]);
+    }
+  };
+  const isSelected = (itemValue) => {
+    if (selection === "single") {
+      return value === itemValue;
+    } else {
+      const currentValues = Array.isArray(value) ? value : [];
+      return currentValues.includes(itemValue);
+    }
+  };
+  const renderRadioOption = (item) => {
+    const selected = isSelected(item.value);
+    if (selection === "single") {
+      const optionContent = /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "cls_radio_option flex items-center gap-2",
+            layout === "horizontal" ? "flex-row" : "flex-col",
+            compressed ? "" : "p-2 rounded-md",
+            "hover:bg-accent transition-colors",
+            selected && "bg-accent"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              RadioGroupItem,
+              {
+                value: item.value,
+                id: `radio-${item.value}`,
+                className: "cls_radio_item shrink-0"
+              }
+            ),
+            display_label && /* @__PURE__ */ jsxRuntime.jsx(
+              "label",
+              {
+                htmlFor: `radio-${item.value}`,
+                className: "cls_radio_label text-sm font-medium cursor-pointer flex-1",
+                children: item.label
+              }
+            )
+          ]
+        }
+      );
+      return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { delayDuration: 1e3, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: optionContent }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "cls_tooltip_text", children: item.label }) })
+      ] }, item.value);
+    } else {
+      const optionContent = /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "cls_radio_option flex items-center gap-2 cursor-pointer",
+            layout === "horizontal" ? "flex-row" : "flex-col",
+            compressed ? "" : "p-2 rounded-md",
+            "hover:bg-accent transition-colors",
+            selected && "bg-accent"
+          ),
+          onClick: () => handleMultiSelection(item.value),
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleMultiSelection(item.value);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "cls_checkbox_indicator h-4 w-4 rounded-sm border-2 border-primary flex items-center justify-center transition-colors shrink-0",
+                  selected ? "bg-primary" : "bg-background"
+                ),
+                children: selected && /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    className: "cls_checkmark h-3 w-3 text-primary-foreground",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    strokeWidth: 3,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "M5 13l4 4L19 7"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            display_label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_checkbox_label text-sm font-medium flex-1", children: item.label })
+          ]
+        }
+      );
+      return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { delayDuration: 1e3, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: optionContent }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "cls_tooltip_text", children: item.label }) })
+      ] }, item.value);
+    }
+  };
+  const renderIconOption = (item) => {
+    const selected = isSelected(item.value);
+    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 buttonContent = /* @__PURE__ */ jsxRuntime.jsxs(
+      Button,
+      {
+        variant: selected ? "default" : "ghost",
+        size: "default",
+        className: cn(
+          "cls_icon_option border-0",
+          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"
+        ),
+        onClick: () => {
+          if (selection === "single") {
+            handleSingleSelection(item.value);
+          } else {
+            handleMultiSelection(item.value);
+          }
+        },
+        "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 })
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { delayDuration: 1e3, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: buttonContent }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "cls_tooltip_text", children: item.label }) })
+    ] }, item.value);
+  };
+  const containerClasses = cn(
+    "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(
+    containerClasses,
+    "!flex !flex-row !flex-wrap"
+    // Override RadioGroup's default grid
+  );
+  if (style === "icons") {
+    return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 1e3, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClasses, role: selection === "single" ? "radiogroup" : "group", children: data.map((item) => renderIconOption(item)) }) });
+  } else {
+    if (selection === "single") {
+      return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 1e3, children: /* @__PURE__ */ jsxRuntime.jsx(
+        RadioGroup,
+        {
+          value: typeof value === "string" ? value : "",
+          onValueChange: handleSingleSelection,
+          className: layout === "horizontal" ? cn(radioGroupClasses, "!flex-row") : cn(radioGroupClasses, "!flex-col"),
+          children: data.map((item) => renderRadioOption(item))
+        }
+      ) });
+    } else {
+      return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 1e3, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClasses, role: "group", children: data.map((item) => renderRadioOption(item)) }) });
+    }
+  }
+}
 
 exports.ExampleComponent = ExampleComponent;
 exports.MultiFilterDialog = MultiFilterDialog;
 exports.MultiSortDialog = MultiSortDialog;
+exports.MultiStateRadio = MultiStateRadio;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map