hazo_ui 2.0.1 → 2.1.0

package/dist/index.js

@@ -6,7 +6,7 @@ import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X, ChevronDown, ChevronUp, Check, Filter, Plus, ChevronsUpDown, ArrowUpDown, Trash2, GripVertical, Calendar as Calendar$1, ChevronRight, ChevronLeft } from 'lucide-react';
+import { X, ChevronDown, ChevronUp, Check, Circle, Filter, Plus, ChevronsUpDown, ArrowUpDown, Trash2, GripVertical, Calendar as Calendar$1, ChevronRight, ChevronLeft } from 'lucide-react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -16,6 +16,17 @@ import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as FaIcons from 'react-icons/fa';
+import * as MdIcons from 'react-icons/md';
+import * as HiIcons from 'react-icons/hi';
+import * as BiIcons from 'react-icons/bi';
+import * as AiIcons from 'react-icons/ai';
+import * as BsIcons from 'react-icons/bs';
+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';
 
 var ExampleComponent = ({ children, className = "" }) => {
   return /* @__PURE__ */ jsx("div", { className: `cls_example_component ${className}`, children });
@@ -1145,7 +1156,247 @@ function MultiSortDialog({
     ] })
   ] });
 }
+var RadioGroup = React6.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      className: cn("grid gap-2", className),
+      ...props,
+      ref
+    }
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+var RadioGroupItem = React6.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.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__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
+    }
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+var iconSetMap = {
+  fa: FaIcons,
+  md: MdIcons,
+  hi: HiIcons,
+  bi: BiIcons,
+  ai: AiIcons,
+  bs: BsIcons,
+  fi: FiIcons,
+  io: IoIcons,
+  io5: IoIcons,
+  ri: RiIcons,
+  tb: TbIcons
+};
+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
+}) {
+  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__ */ jsxs(
+        "div",
+        {
+          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",
+            selected && "bg-accent"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              RadioGroupItem,
+              {
+                value: item.value,
+                id: `radio-${item.value}`,
+                className: "cls_radio_item shrink-0"
+              }
+            ),
+            display_label && /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: `radio-${item.value}`,
+                className: "cls_radio_label text-sm font-medium cursor-pointer flex-1",
+                children: item.label
+              }
+            )
+          ]
+        }
+      );
+      return /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 1e3, children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: optionContent }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { className: "cls_tooltip_text", children: item.label }) })
+      ] }, item.value);
+    } else {
+      const optionContent = /* @__PURE__ */ jsxs(
+        "div",
+        {
+          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",
+            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__ */ 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__ */ 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__ */ jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "M5 13l4 4L19 7"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            display_label && /* @__PURE__ */ jsx("span", { className: "cls_checkbox_label text-sm font-medium flex-1", children: item.label })
+          ]
+        }
+      );
+      return /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 1e3, children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: optionContent }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ 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__ */ 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 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__ */ 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 })
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 1e3, children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: buttonContent }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { className: "cls_tooltip_text", children: item.label }) })
+    ] }, 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",
+    className
+  );
+  const radioGroupClasses = cn(
+    containerClasses,
+    "!flex !flex-row !flex-wrap"
+    // Override RadioGroup's default grid
+  );
+  if (style === "icons") {
+    return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 1e3, children: /* @__PURE__ */ jsx("div", { className: containerClasses, role: selection === "single" ? "radiogroup" : "group", children: data.map((item) => renderIconOption(item)) }) });
+  } else {
+    if (selection === "single") {
+      return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 1e3, children: /* @__PURE__ */ 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__ */ jsx(TooltipProvider, { delayDuration: 1e3, children: /* @__PURE__ */ jsx("div", { className: containerClasses, role: "group", children: data.map((item) => renderRadioOption(item)) }) });
+    }
+  }
+}
 
-export { ExampleComponent, MultiFilterDialog, MultiSortDialog };
+export { ExampleComponent, MultiFilterDialog, MultiSortDialog, MultiStateRadio };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map