hazo_ui 2.7.1 → 2.7.3

package/README.md

@@ -49,11 +49,23 @@ If you're using **Tailwind CSS v4**, you must add the `@source` directive to ens
 
 ```css
 @import "tailwindcss";
+@import "tw-animate-css";
 
 /* REQUIRED for Tailwind v4: Enable scanning of hazo_ui components */
 @source "../node_modules/hazo_ui/dist";
 ```
 
+**PostCSS** (Tailwind v4):
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+```
+
 **Why is this needed?**
 
 Tailwind v4 uses JIT compilation and only generates CSS for classes found in scanned files. By default, it doesn't scan `node_modules/`. Without the `@source` directive:
@@ -61,7 +73,9 @@ Tailwind v4 uses JIT compilation and only generates CSS for classes found in sca
 - Colors will be missing
 - Layouts may break
 
-**Note:** Tailwind v3 users do NOT need this directive - the `content` configuration is sufficient.
+The `tw-animate-css` import replaces the legacy `tailwindcss-animate` plugin (used by hazo_ui's accordion/collapse animations) for Tailwind v4 consumers.
+
+**Note:** Tailwind v3 users do NOT need this directive — the `content` configuration plus `tailwindcss-animate@^1.0.7` is sufficient.
 
 ---
 
@@ -174,6 +188,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 +900,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.
@@ -2841,9 +2973,10 @@ function FormDialog() {
 
 If you're using Tailwind CSS v4 and components appear unstyled:
 
-1. Add the `@source` directive to your globals.css:
+1. Add the `@source` directive (and `tw-animate-css`) to your globals.css:
    ```css
    @import "tailwindcss";
+   @import "tw-animate-css";
    @source "../node_modules/hazo_ui/dist";
    ```
 

package/dist/index.cjs

@@ -152,7 +152,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 
 // ../node_modules/@babel/runtime/helpers/extends.js
 var require_extends = __commonJS({
-  "../node_modules/@babel/runtime/helpers/extends.js"(exports$1, module) {
+  "../node_modules/@babel/runtime/helpers/extends.js"(exports, module) {
     function _extends11() {
       return module.exports = _extends11 = Object.assign ? Object.assign.bind() : function(n) {
         for (var e = 1; e < arguments.length; e++) {
@@ -168,7 +168,7 @@ var require_extends = __commonJS({
 
 // ../node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
 var require_objectWithoutPropertiesLoose = __commonJS({
-  "../node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports$1, module) {
+  "../node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports, module) {
     function _objectWithoutPropertiesLoose10(r, e) {
       if (null == r) return {};
       var t = {};
@@ -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;