hazo_ui 2.1.1 → 2.2.0

package/README.md

@@ -12,25 +12,25 @@ npm install hazo_ui
 
 ### Component Overview
 
-- **[MultiFilterDialog](#multifilterdialog)** - A powerful dialog component for multi-field filtering with support for text, number, combobox, boolean, and date fields. Includes operator support, validation, and visual feedback.
+- **[HazoUiMultiFilterDialog](#hazouimultifilterdialog)** - A powerful dialog component for multi-field filtering with support for text, number, combobox, boolean, and date fields. Includes operator support, validation, and visual feedback.
 
-- **[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.
+- **[HazoUiMultiSortDialog](#hazouimultisortdialog)** - 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.
+- **[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.
 
 ---
 
-## MultiFilterDialog
+## HazoUiMultiFilterDialog
 
 A powerful, flexible dialog component for multi-field filtering with support for various input types. Perfect for table headers, grid views, or any interface where users need to apply multiple filters simultaneously.
 
-![MultiFilterDialog - Filter Button with Active Filters Tooltip](https://github.com/pub12/hazo_ui/raw/main/docs/multifilterdialog/filter-button-tooltip.png)
+![HazoUiMultiFilterDialog - Filter Button with Active Filters Tooltip](https://github.com/pub12/hazo_ui/raw/main/docs/multifilterdialog/filter-button-tooltip.png)
 
-![MultiFilterDialog - Dialog with Multiple Filters](https://github.com/pub12/hazo_ui/raw/main/docs/multifilterdialog/filter-dialog.png)
+![HazoUiMultiFilterDialog - Dialog with Multiple Filters](https://github.com/pub12/hazo_ui/raw/main/docs/multifilterdialog/filter-dialog.png)
 
-![MultiFilterDialog - Calendar Date Picker](https://github.com/pub12/hazo_ui/raw/main/docs/multifilterdialog/filter-dialog-calendar.png)
+![HazoUiMultiFilterDialog - Calendar Date Picker](https://github.com/pub12/hazo_ui/raw/main/docs/multifilterdialog/filter-dialog-calendar.png)
 
-![MultiFilterDialog - Filter Output Example](https://github.com/pub12/hazo_ui/raw/main/docs/multifilterdialog/filter-output.png)
+![HazoUiMultiFilterDialog - Filter Output Example](https://github.com/pub12/hazo_ui/raw/main/docs/multifilterdialog/filter-output.png)
 
 #### Features
 
@@ -71,7 +71,7 @@ A powerful, flexible dialog component for multi-field filtering with support for
 #### Usage
 
 ```tsx
-import { MultiFilterDialog, type FilterField, type FilterConfig } from 'hazo_ui';
+import { HazoUiMultiFilterDialog, type FilterField, type FilterConfig } from 'hazo_ui';
 import { useState } from 'react';
 
 function DataTable() {
@@ -145,7 +145,7 @@ function DataTable() {
 
   return (
     <div>
-      <MultiFilterDialog
+      <HazoUiMultiFilterDialog
         availableFields={availableFields}
         onFilterChange={handleFilterChange}
         initialFilters={filters}
@@ -239,17 +239,17 @@ When users apply filters, the `onFilterChange` callback receives an array of `Fi
 
 ---
 
-## MultiSortDialog
+## HazoUiMultiSortDialog
 
 A powerful dialog component for multi-field sorting with drag-and-drop reordering. Allows users to select multiple fields for sorting, reorder them by priority, and set ascending/descending direction for each field.
 
-![MultiSortDialog - Sort Button with Active Sorts Tooltip](https://github.com/pub12/hazo_ui/raw/main/docs/multisortdialog/sort-button-tooltip.png)
+![HazoUiMultiSortDialog - Sort Button with Active Sorts Tooltip](https://github.com/pub12/hazo_ui/raw/main/docs/multisortdialog/sort-button-tooltip.png)
 
-![MultiSortDialog - Dialog with Multiple Sort Fields](https://github.com/pub12/hazo_ui/raw/main/docs/multisortdialog/sort-dialog.png)
+![HazoUiMultiSortDialog - Dialog with Multiple Sort Fields](https://github.com/pub12/hazo_ui/raw/main/docs/multisortdialog/sort-dialog.png)
 
-![MultiSortDialog - Drag and Drop Reordering](https://github.com/pub12/hazo_ui/raw/main/docs/multisortdialog/sort-drag-drop.png)
+![HazoUiMultiSortDialog - Drag and Drop Reordering](https://github.com/pub12/hazo_ui/raw/main/docs/multisortdialog/sort-drag-drop.png)
 
-![MultiSortDialog - Sort Output Example](https://github.com/pub12/hazo_ui/raw/main/docs/multisortdialog/sort-output.png)
+![HazoUiMultiSortDialog - Sort Output Example](https://github.com/pub12/hazo_ui/raw/main/docs/multisortdialog/sort-output.png)
 
 #### Features
 
@@ -278,7 +278,7 @@ The component returns an array of sort configurations in priority order, where t
 #### Usage
 
 ```tsx
-import { MultiSortDialog, type SortField, type SortConfig } from 'hazo_ui';
+import { HazoUiMultiSortDialog, type SortField, type SortConfig } from 'hazo_ui';
 import { useState } from 'react';
 
 function DataTable() {
@@ -319,7 +319,7 @@ function DataTable() {
 
   return (
     <div>
-      <MultiSortDialog
+      <HazoUiMultiSortDialog
         availableFields={availableFields}
         onSortChange={handleSortChange}
         initialSortFields={sorts}
@@ -446,7 +446,7 @@ const sortedData = applySorts(originalData, sorts);
 
 ---
 
-## MultiStateRadio
+## 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.
 
@@ -466,19 +466,19 @@ A flexible radio button/icon selection component with support for single and mul
 #### Props
 
 ```typescript
-interface MultiStateRadioItem {
+interface HazoUiFlexRadioItem {
   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 {
+interface HazoUiFlexRadioProps {
   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
+  data: HazoUiFlexRadioItem[];          // 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
@@ -491,13 +491,13 @@ interface MultiStateRadioProps {
 **Basic Single Selection (Radio Style)**
 
 ```tsx
-import { MultiStateRadio, type MultiStateRadioItem } from 'hazo_ui';
+import { HazoUiFlexRadio, type HazoUiFlexRadioItem } from 'hazo_ui';
 import { useState } from 'react';
 
 function SettingsPanel() {
   const [selectedOption, setSelectedOption] = useState<string>('option1');
 
-  const options: MultiStateRadioItem[] = [
+  const options: HazoUiFlexRadioItem[] = [
     { label: 'Option 1', value: 'option1' },
     { label: 'Option 2', value: 'option2' },
     { label: 'Option 3', value: 'option3' },
@@ -505,7 +505,7 @@ function SettingsPanel() {
   ];
 
   return (
-    <MultiStateRadio
+    <HazoUiFlexRadio
       data={options}
       value={selectedOption}
       onChange={setSelectedOption}
@@ -521,13 +521,13 @@ function SettingsPanel() {
 **Icon Style with React Icons**
 
 ```tsx
-import { MultiStateRadio, type MultiStateRadioItem } from 'hazo_ui';
+import { HazoUiFlexRadio, type HazoUiFlexRadioItem } from 'hazo_ui';
 import { useState } from 'react';
 
 function IconSelector() {
   const [selectedIcon, setSelectedIcon] = useState<string>('home');
 
-  const iconOptions: MultiStateRadioItem[] = [
+  const iconOptions: HazoUiFlexRadioItem[] = [
     {
       label: 'Home',
       value: 'home',
@@ -549,7 +549,7 @@ function IconSelector() {
   ];
 
   return (
-    <MultiStateRadio
+    <HazoUiFlexRadio
       data={iconOptions}
       value={selectedIcon}
       onChange={setSelectedIcon}
@@ -566,13 +566,13 @@ function IconSelector() {
 **Multi-Selection Mode**
 
 ```tsx
-import { MultiStateRadio, type MultiStateRadioItem } from 'hazo_ui';
+import { HazoUiFlexRadio, type HazoUiFlexRadioItem } from 'hazo_ui';
 import { useState } from 'react';
 
 function MultiSelectExample() {
   const [selectedOptions, setSelectedOptions] = useState<string[]>(['option1', 'option3']);
 
-  const options: MultiStateRadioItem[] = [
+  const options: HazoUiFlexRadioItem[] = [
     { label: 'Option 1', value: 'option1' },
     { label: 'Option 2', value: 'option2' },
     { label: 'Option 3', value: 'option3' },
@@ -580,7 +580,7 @@ function MultiSelectExample() {
   ];
 
   return (
-    <MultiStateRadio
+    <HazoUiFlexRadio
       data={options}
       value={selectedOptions}
       onChange={setSelectedOptions}
@@ -596,13 +596,13 @@ function MultiSelectExample() {
 **Vertical Layout with Icons Only (No Labels)**
 
 ```tsx
-import { MultiStateRadio, type MultiStateRadioItem } from 'hazo_ui';
+import { HazoUiFlexRadio, type HazoUiFlexRadioItem } from 'hazo_ui';
 import { useState } from 'react';
 
 function VerticalIconSelector() {
   const [selected, setSelected] = useState<string>('favorite');
 
-  const options: MultiStateRadioItem[] = [
+  const options: HazoUiFlexRadioItem[] = [
     {
       label: 'Favorite',
       value: 'favorite',
@@ -618,7 +618,7 @@ function VerticalIconSelector() {
   ];
 
   return (
-    <MultiStateRadio
+    <HazoUiFlexRadio
       data={options}
       value={selected}
       onChange={setSelected}

package/dist/index.cjs

@@ -28,6 +28,7 @@ var FiIcons = require('react-icons/fi');
 var IoIcons = require('react-icons/io5');
 var RiIcons = require('react-icons/ri');
 var TbIcons = require('react-icons/tb');
+var CiIcons = require('react-icons/ci');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -64,6 +65,7 @@ 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 CiIcons__namespace = /*#__PURE__*/_interopNamespace(CiIcons);
 
 var ExampleComponent = ({ children, className = "" }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `cls_example_component ${className}`, children });
@@ -660,7 +662,7 @@ function FilterFieldItem({
     )
   ] });
 }
-function MultiFilterDialog({
+function HazoUiMultiFilterDialog({
   availableFields,
   onFilterChange,
   initialFilters = []
@@ -980,7 +982,7 @@ function SortableSortFieldItem({
     }
   );
 }
-function MultiSortDialog({
+function HazoUiMultiSortDialog({
   availableFields,
   onSortChange,
   initialSortFields = []
@@ -1230,7 +1232,8 @@ var iconSetMap = {
   io: IoIcons__namespace,
   io5: IoIcons__namespace,
   ri: RiIcons__namespace,
-  tb: TbIcons__namespace
+  tb: TbIcons__namespace,
+  ci: CiIcons__namespace
 };
 function getIconLibrary(iconSet) {
   if (!iconSet) return null;
@@ -1244,7 +1247,7 @@ function getIconComponent(iconSet, iconName) {
   const IconComponent = iconLibrary[iconName];
   return IconComponent || null;
 }
-function MultiStateRadio({
+function HazoUiFlexRadio({
   layout = "horizontal",
   style = "radio",
   display_label = true,
@@ -1376,6 +1379,10 @@ function MultiStateRadio({
     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 buttonStyles = {};
+    if (item.bgcolor) {
+      buttonStyles.backgroundColor = item.bgcolor;
+    }
     const buttonContent = /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
       {
@@ -1386,9 +1393,11 @@ function MultiStateRadio({
           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"
+          // Only apply default colors if custom colors are not provided
+          !item.bgcolor && selected && "bg-primary text-primary-foreground",
+          !item.bgcolor && !selected && "hover:bg-accent"
         ),
+        style: Object.keys(buttonStyles).length > 0 ? buttonStyles : void 0,
         onClick: () => {
           if (selection === "single") {
             handleSingleSelection(item.value);
@@ -1399,8 +1408,21 @@ function MultiStateRadio({
         "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 })
+          IconComponent && /* @__PURE__ */ jsxRuntime.jsx(
+            IconComponent,
+            {
+              className: "cls_icon h-4 w-4 sm:h-5 sm:w-5",
+              style: item.fgcolor ? { color: item.fgcolor } : void 0
+            }
+          ),
+          display_label && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "cls_icon_label text-sm font-medium",
+              style: item.fgcolor ? { color: item.fgcolor } : void 0,
+              children: item.label
+            }
+          )
         ]
       }
     );
@@ -1410,7 +1432,7 @@ function MultiStateRadio({
     ] }, item.value);
   };
   const containerClasses = cn(
-    "cls_multi_state_radio border border-input rounded-md",
+    "cls_hazo_ui_flex_radio border border-input rounded-md",
     compressed ? "" : "p-2 sm:p-3",
     layout === "horizontal" ? cn(
       "flex flex-row flex-wrap",
@@ -1444,10 +1466,208 @@ function MultiStateRadio({
     }
   }
 }
+function validateInput(value, input_type, text_len_min, text_len_max, num_min, num_max, regex, num_decimals) {
+  if (value === "") {
+    return { isValid: true };
+  }
+  switch (input_type) {
+    case "numeric": {
+      const numValue = parseFloat(value);
+      if (isNaN(numValue)) {
+        return { isValid: false, errorMessage: "Must be a valid number" };
+      }
+      if (num_decimals !== void 0) {
+        const decimalPlaces = value.split(".")[1]?.length || 0;
+        if (decimalPlaces > num_decimals) {
+          return {
+            isValid: false,
+            errorMessage: `Maximum ${num_decimals} decimal place${num_decimals !== 1 ? "s" : ""} allowed`
+          };
+        }
+      }
+      if (num_min !== void 0 && numValue < num_min) {
+        return { isValid: false, errorMessage: `Must be at least ${num_min}` };
+      }
+      if (num_max !== void 0 && numValue > num_max) {
+        return { isValid: false, errorMessage: `Must be at most ${num_max}` };
+      }
+      break;
+    }
+    case "alpha": {
+      const alphaRegex = /^[A-Za-z\s]*$/;
+      if (!alphaRegex.test(value)) {
+        return { isValid: false, errorMessage: "Only letters are allowed" };
+      }
+      break;
+    }
+    case "email": {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (!emailRegex.test(value)) {
+        return { isValid: false, errorMessage: "Must be a valid email address" };
+      }
+      break;
+    }
+    case "mixed": {
+      if (text_len_min !== void 0 && value.length < text_len_min) {
+        return {
+          isValid: false,
+          errorMessage: `Must be at least ${text_len_min} character${text_len_min !== 1 ? "s" : ""}`
+        };
+      }
+      if (text_len_max !== void 0 && value.length > text_len_max) {
+        return {
+          isValid: false,
+          errorMessage: `Must be at most ${text_len_max} character${text_len_max !== 1 ? "s" : ""}`
+        };
+      }
+      break;
+    }
+  }
+  if (regex) {
+    const regexPattern = typeof regex === "string" ? new RegExp(regex) : regex;
+    if (!regexPattern.test(value)) {
+      return { isValid: false, errorMessage: "Invalid format" };
+    }
+  }
+  return { isValid: true };
+}
+function filterInputValue(value, input_type, num_decimals) {
+  switch (input_type) {
+    case "numeric": {
+      let filtered = value.replace(/[^\d.-]/g, "");
+      const parts = filtered.split(".");
+      if (parts.length > 2) {
+        filtered = parts[0] + "." + parts.slice(1).join("");
+      }
+      if (num_decimals === 0 && filtered.includes(".")) {
+        filtered = filtered.replace(".", "");
+      }
+      if (num_decimals !== void 0 && num_decimals > 0) {
+        const parts2 = filtered.split(".");
+        if (parts2.length === 2 && parts2[1].length > num_decimals) {
+          filtered = parts2[0] + "." + parts2[1].substring(0, num_decimals);
+        }
+      }
+      return filtered;
+    }
+    case "alpha": {
+      return value.replace(/[^A-Za-z\s]/g, "");
+    }
+    case "email":
+    case "mixed":
+    default: {
+      return value;
+    }
+  }
+}
+var HazoUiFlexInput = React6__namespace.forwardRef(
+  ({
+    className,
+    input_type = "mixed",
+    text_len_min,
+    text_len_max,
+    num_min,
+    num_max,
+    regex,
+    num_decimals,
+    format_guide,
+    format_guide_info = false,
+    value: controlledValue,
+    onChange,
+    onBlur,
+    ...props
+  }, ref) => {
+    const [internalValue, setInternalValue] = React6__namespace.useState(
+      typeof controlledValue === "string" ? controlledValue : typeof controlledValue === "number" ? String(controlledValue) : ""
+    );
+    const [errorMessage, setErrorMessage] = React6__namespace.useState();
+    const isControlled = controlledValue !== void 0;
+    const currentValue = isControlled ? typeof controlledValue === "string" ? controlledValue : String(controlledValue || "") : internalValue;
+    React6__namespace.useEffect(() => {
+      if (isControlled) {
+        const newValue = typeof controlledValue === "string" ? controlledValue : String(controlledValue || "");
+        if (newValue !== internalValue) {
+          setInternalValue(newValue);
+        }
+      }
+    }, [controlledValue, isControlled]);
+    const handleChange = (e) => {
+      let newValue = e.target.value;
+      if (input_type === "numeric" || input_type === "alpha") {
+        newValue = filterInputValue(newValue, input_type, num_decimals);
+      }
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      if (errorMessage) {
+        setErrorMessage(void 0);
+      }
+      if (onChange) {
+        const syntheticEvent = {
+          ...e,
+          target: { ...e.target, value: newValue }
+        };
+        onChange(syntheticEvent);
+      }
+    };
+    const handleBlur = (e) => {
+      const validation = validateInput(
+        currentValue,
+        input_type,
+        text_len_min,
+        text_len_max,
+        num_min,
+        num_max,
+        regex,
+        num_decimals
+      );
+      if (!validation.isValid) {
+        setErrorMessage(validation.errorMessage || format_guide || "Invalid input");
+      } else {
+        setErrorMessage(void 0);
+      }
+      if (onBlur) {
+        onBlur(e);
+      }
+    };
+    const htmlInputType = input_type === "email" ? "email" : input_type === "numeric" ? "text" : "text";
+    const hasError = errorMessage !== void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_hazo_ui_flex_input_container w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          ref,
+          type: htmlInputType,
+          value: currentValue,
+          onChange: handleChange,
+          onBlur: handleBlur,
+          className: cn(
+            hasError && "border-destructive focus-visible:ring-destructive",
+            className
+          ),
+          ...props
+        }
+      ),
+      hasError && errorMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "cls_error_message mt-1 text-sm text-destructive", children: errorMessage }),
+      format_guide_info && format_guide && /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: cn(
+            "cls_format_guide_info mt-1 text-xs italic text-muted-foreground",
+            hasError && "mt-0"
+          ),
+          children: format_guide
+        }
+      )
+    ] });
+  }
+);
+HazoUiFlexInput.displayName = "HazoUiFlexInput";
 
 exports.ExampleComponent = ExampleComponent;
-exports.MultiFilterDialog = MultiFilterDialog;
-exports.MultiSortDialog = MultiSortDialog;
-exports.MultiStateRadio = MultiStateRadio;
+exports.HazoUiFlexInput = HazoUiFlexInput;
+exports.HazoUiFlexRadio = HazoUiFlexRadio;
+exports.HazoUiMultiFilterDialog = HazoUiMultiFilterDialog;
+exports.HazoUiMultiSortDialog = HazoUiMultiSortDialog;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map