hazo_ui 2.7.1 → 2.7.2

package/README.md

@@ -174,6 +174,8 @@ The following components support both global config and prop-level color overrid
 
 - **[HazoUiFlexRadio](#hazouiflexradio)** - 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.
 
+- **[HazoUiPillRadio](#hazouipillradio)** - Pill-shaped radio selection buttons with optional icons, customizable accent colors, size variants, and equal-width support. Ideal for action choices, status selection, and compact option groups.
+
 - **[HazoUiFlexInput](#hazouiflexinput)** - An enhanced input component with type validation, character restrictions, and error messaging. Supports numeric, alpha, email, and mixed input types with built-in validation and formatting guides.
 
 - **[HazoUiRte](#hazouirte)** - A comprehensive rich text editor for email template generation with variable insertion support, file attachments, and full formatting controls. Built on Tiptap with support for tables, lists, images, and multiple view modes (HTML, Plain Text, Raw HTML).
@@ -884,6 +886,122 @@ The component supports the following react-icons packages:
 
 ---
 
+## HazoUiPillRadio
+
+Pill-shaped radio selection buttons with optional icons, customizable accent colors per pill, size variants, and equal-width support. Ideal for action choices, status selection, and compact option groups.
+
+#### Features
+
+- **Pill Design**: Rounded-full pill buttons with border, selected state shows accent color tint
+- **Icon Support**: Integration with react-icons library (same icon sets as HazoUiFlexRadio)
+- **Custom Colors**: Each pill can have its own accent color for the selected state
+- **Size Variants**: Three sizes — `sm`, `md` (default), `lg`
+- **Layout Options**: Horizontal (default) or vertical arrangement
+- **Equal Width**: Optional `equal_width` prop makes all pills the same width
+- **Auto-fit Vertical**: Vertical layout auto-fits to the widest pill instead of stretching full-width
+- **Tooltips**: Hover tooltips with 1-second delay
+- **Accessible**: Uses `role="radiogroup"` and `role="radio"` with `aria-checked`
+
+#### Props
+
+```typescript
+interface HazoUiPillRadioItem {
+  label: string;       // Text displayed in the pill
+  value: string;       // Unique value identifier
+  icon?: string;       // react-icons icon name (e.g., "FaFolder")
+  color?: string;      // Accent color when selected (default: "#3b82f6" blue)
+}
+
+interface HazoUiPillRadioProps {
+  layout?: 'horizontal' | 'vertical';  // Layout direction (default: 'horizontal')
+  icon_set?: string;                    // Icon set package name (default: 'fa')
+  data: HazoUiPillRadioItem[];          // Array of pill options
+  value: string;                        // Controlled selected value
+  onChange: (value: string) => void;     // Change handler
+  className?: string;                   // Additional CSS classes
+  pill_size?: 'sm' | 'md' | 'lg';      // Pill size variant (default: 'md')
+  equal_width?: boolean;                // Make all pills equal width (default: false)
+}
+```
+
+#### Usage
+
+**Basic Horizontal Pills**
+
+```tsx
+import { HazoUiPillRadio, type HazoUiPillRadioItem } from 'hazo_ui';
+import { useState } from 'react';
+
+function ResponseSelector() {
+  const [selected, setSelected] = useState<string>('');
+
+  const options: HazoUiPillRadioItem[] = [
+    { value: 'upload', label: 'Upload corrected document', icon: 'FaFolder' },
+    { value: 'comment', label: 'Provide comment', icon: 'FaComment' },
+  ];
+
+  return (
+    <HazoUiPillRadio
+      data={options}
+      value={selected}
+      onChange={setSelected}
+    />
+  );
+}
+```
+
+**Vertical Layout**
+
+```tsx
+<HazoUiPillRadio
+  data={options}
+  value={selected}
+  onChange={setSelected}
+  layout="vertical"
+/>
+```
+
+**Custom Colors per Pill**
+
+```tsx
+const priority_options: HazoUiPillRadioItem[] = [
+  { value: 'low', label: 'Low', icon: 'FaArrowDown', color: '#22c55e' },
+  { value: 'medium', label: 'Medium', icon: 'FaMinus', color: '#f59e0b' },
+  { value: 'high', label: 'High', icon: 'FaArrowUp', color: '#ef4444' },
+];
+
+<HazoUiPillRadio
+  data={priority_options}
+  value={selected}
+  onChange={setSelected}
+/>
+```
+
+**Equal Width Pills**
+
+```tsx
+<HazoUiPillRadio
+  data={options}
+  value={selected}
+  onChange={setSelected}
+  equal_width
+/>
+```
+
+**Different Icon Set and Size**
+
+```tsx
+<HazoUiPillRadio
+  data={options}
+  value={selected}
+  onChange={setSelected}
+  icon_set="md"
+  pill_size="lg"
+/>
+```
+
+---
+
 ## HazoUiFlexInput
 
 An enhanced input component with type validation, character restrictions, and error messaging. Extends shadcn Input component with additional validation props for numeric, alpha, email, and mixed input types.

package/dist/index.cjs

@@ -1739,6 +1739,109 @@ function HazoUiFlexRadio({
     }
   }
 }
+var icon_set_map = {
+  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,
+  ci: CiIcons__namespace
+};
+function get_icon_component(icon_set, icon_name) {
+  if (!icon_set || !icon_name) return null;
+  const library = icon_set_map[icon_set.toLowerCase()];
+  if (!library) return null;
+  return library[icon_name] || null;
+}
+var DEFAULT_COLOR = "#3b82f6";
+function color_with_opacity(color2, opacity) {
+  if (color2.startsWith("#")) {
+    const hex = color2.replace("#", "");
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+  return color2;
+}
+var size_classes = {
+  sm: "px-3 py-1.5 text-xs gap-1.5",
+  md: "px-4 py-2 text-sm gap-2",
+  lg: "px-5 py-2.5 text-base gap-2.5"
+};
+var icon_size_classes = {
+  sm: "h-3.5 w-3.5",
+  md: "h-4 w-4",
+  lg: "h-5 w-5"
+};
+function HazoUiPillRadio({
+  layout = "horizontal",
+  icon_set = "fa",
+  data,
+  value,
+  onChange,
+  className,
+  pill_size = "md",
+  equal_width = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 1e3, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "cls_hazo_ui_pill_radio",
+        layout === "horizontal" ? "flex flex-row flex-wrap gap-3" : "inline-flex flex-col gap-3",
+        className
+      ),
+      role: "radiogroup",
+      children: data.map((item) => {
+        const is_selected = value === item.value;
+        const accent = item.color || DEFAULT_COLOR;
+        const IconComponent = get_icon_component(icon_set, item.icon);
+        return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { delayDuration: 1e3, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": is_selected,
+              onClick: () => onChange(item.value),
+              className: cn(
+                "cls_pill_radio_item",
+                "inline-flex items-center rounded-full border cursor-pointer",
+                "transition-all duration-200 font-medium whitespace-nowrap",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                size_classes[pill_size],
+                equal_width && "justify-center flex-1",
+                !is_selected && "border-border bg-card text-muted-foreground hover:bg-accent/50"
+              ),
+              style: is_selected ? {
+                borderColor: accent,
+                backgroundColor: color_with_opacity(accent, 0.08),
+                color: accent
+              } : void 0,
+              children: [
+                IconComponent && /* @__PURE__ */ jsxRuntime.jsx(
+                  IconComponent,
+                  {
+                    className: cn("cls_pill_radio_icon shrink-0", icon_size_classes[pill_size])
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_pill_radio_label", children: item.label })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "cls_tooltip_text", children: item.label }) })
+        ] }, item.value);
+      })
+    }
+  ) });
+}
 function validateInput(value, input_type, text_len_min, text_len_max, num_min, num_max, regex, num_decimals) {
   if (value === "") {
     return { isValid: true };
@@ -6937,6 +7040,7 @@ exports.HazoUiFlexInput = HazoUiFlexInput;
 exports.HazoUiFlexRadio = HazoUiFlexRadio;
 exports.HazoUiMultiFilterDialog = HazoUiMultiFilterDialog;
 exports.HazoUiMultiSortDialog = HazoUiMultiSortDialog;
+exports.HazoUiPillRadio = HazoUiPillRadio;
 exports.HazoUiRte = HazoUiRte;
 exports.HazoUiTextarea = HazoUiTextarea;
 exports.HazoUiTextbox = HazoUiTextbox;