hazo_ui 2.1.1 → 2.2.0

package/dist/index.d.cts

@@ -1,4 +1,5 @@
-import React from 'react';
+import * as React from 'react';
+import React__default from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -6,8 +7,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
  * @param props - Component props
  * @returns React component
  */
-declare const ExampleComponent: React.FC<{
-    children?: React.ReactNode;
+declare const ExampleComponent: React__default.FC<{
+    children?: React__default.ReactNode;
     className?: string;
 }>;
 
@@ -39,12 +40,12 @@ interface FilterConfig {
     operator?: string;
     value: any;
 }
-interface MultiFilterDialogProps {
+interface HazoUiMultiFilterDialogProps {
     availableFields: FilterField[];
     onFilterChange: (filterConfig: FilterConfig[]) => void;
     initialFilters?: FilterConfig[];
 }
-declare function MultiFilterDialog({ availableFields, onFilterChange, initialFilters, }: MultiFilterDialogProps): react_jsx_runtime.JSX.Element;
+declare function HazoUiMultiFilterDialog({ availableFields, onFilterChange, initialFilters, }: HazoUiMultiFilterDialogProps): react_jsx_runtime.JSX.Element;
 
 interface SortField {
     value: string;
@@ -54,25 +55,27 @@ interface SortConfig {
     field: string;
     direction: 'asc' | 'desc';
 }
-interface MultiSortDialogProps {
+interface HazoUiMultiSortDialogProps {
     availableFields: SortField[];
     onSortChange: (sortConfig: SortConfig[]) => void;
     initialSortFields?: SortConfig[];
 }
-declare function MultiSortDialog({ availableFields, onSortChange, initialSortFields, }: MultiSortDialogProps): react_jsx_runtime.JSX.Element;
+declare function HazoUiMultiSortDialog({ availableFields, onSortChange, initialSortFields, }: HazoUiMultiSortDialogProps): react_jsx_runtime.JSX.Element;
 
-interface MultiStateRadioItem {
+interface HazoUiFlexRadioItem {
     label: string;
     value: string;
     icon_selected?: string;
     icon_unselected?: string;
+    fgcolor?: string;
+    bgcolor?: string;
 }
-interface MultiStateRadioProps {
+interface HazoUiFlexRadioProps {
     layout?: "horizontal" | "vertical";
     style?: "radio" | "icons";
     display_label?: boolean;
     icon_set?: string;
-    data: MultiStateRadioItem[];
+    data: HazoUiFlexRadioItem[];
     selection: "single" | "multi";
     value: string | string[];
     onChange: (value: string | string[]) => void;
@@ -80,9 +83,32 @@ interface MultiStateRadioProps {
     compressed?: boolean;
 }
 /**
- * Multi State Radio Component
+ * Hazo UI Flex Radio Component
  * Supports single and multi-selection with radio buttons or icons
  */
-declare function MultiStateRadio({ layout, style, display_label, icon_set, data, selection, value, onChange, className, compressed, }: MultiStateRadioProps): react_jsx_runtime.JSX.Element;
+declare function HazoUiFlexRadio({ layout, style, display_label, icon_set, data, selection, value, onChange, className, compressed, }: HazoUiFlexRadioProps): react_jsx_runtime.JSX.Element;
 
-export { ExampleComponent, type FilterConfig, type FilterField, MultiFilterDialog, MultiSortDialog, MultiStateRadio, type MultiStateRadioItem, type MultiStateRadioProps, type SortConfig, type SortField };
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+
+/**
+ * Hazo UI Flex Input Component
+ *
+ * Enhanced input component with type validation, character restrictions, and error messaging.
+ * Extends shadcn Input component with additional validation props.
+ */
+
+interface HazoUiFlexInputProps extends Omit<InputProps, "type"> {
+    input_type?: "mixed" | "numeric" | "email" | "alpha";
+    text_len_min?: number;
+    text_len_max?: number;
+    num_min?: number;
+    num_max?: number;
+    regex?: string | RegExp;
+    num_decimals?: number;
+    format_guide?: string;
+    format_guide_info?: boolean;
+}
+declare const HazoUiFlexInput: React.ForwardRefExoticComponent<HazoUiFlexInputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { ExampleComponent, type FilterConfig, type FilterField, HazoUiFlexInput, type HazoUiFlexInputProps, HazoUiFlexRadio, type HazoUiFlexRadioItem, type HazoUiFlexRadioProps, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, type SortConfig, type SortField };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import * as React from 'react';
+import React__default from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -6,8 +7,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
  * @param props - Component props
  * @returns React component
  */
-declare const ExampleComponent: React.FC<{
-    children?: React.ReactNode;
+declare const ExampleComponent: React__default.FC<{
+    children?: React__default.ReactNode;
     className?: string;
 }>;
 
@@ -39,12 +40,12 @@ interface FilterConfig {
     operator?: string;
     value: any;
 }
-interface MultiFilterDialogProps {
+interface HazoUiMultiFilterDialogProps {
     availableFields: FilterField[];
     onFilterChange: (filterConfig: FilterConfig[]) => void;
     initialFilters?: FilterConfig[];
 }
-declare function MultiFilterDialog({ availableFields, onFilterChange, initialFilters, }: MultiFilterDialogProps): react_jsx_runtime.JSX.Element;
+declare function HazoUiMultiFilterDialog({ availableFields, onFilterChange, initialFilters, }: HazoUiMultiFilterDialogProps): react_jsx_runtime.JSX.Element;
 
 interface SortField {
     value: string;
@@ -54,25 +55,27 @@ interface SortConfig {
     field: string;
     direction: 'asc' | 'desc';
 }
-interface MultiSortDialogProps {
+interface HazoUiMultiSortDialogProps {
     availableFields: SortField[];
     onSortChange: (sortConfig: SortConfig[]) => void;
     initialSortFields?: SortConfig[];
 }
-declare function MultiSortDialog({ availableFields, onSortChange, initialSortFields, }: MultiSortDialogProps): react_jsx_runtime.JSX.Element;
+declare function HazoUiMultiSortDialog({ availableFields, onSortChange, initialSortFields, }: HazoUiMultiSortDialogProps): react_jsx_runtime.JSX.Element;
 
-interface MultiStateRadioItem {
+interface HazoUiFlexRadioItem {
     label: string;
     value: string;
     icon_selected?: string;
     icon_unselected?: string;
+    fgcolor?: string;
+    bgcolor?: string;
 }
-interface MultiStateRadioProps {
+interface HazoUiFlexRadioProps {
     layout?: "horizontal" | "vertical";
     style?: "radio" | "icons";
     display_label?: boolean;
     icon_set?: string;
-    data: MultiStateRadioItem[];
+    data: HazoUiFlexRadioItem[];
     selection: "single" | "multi";
     value: string | string[];
     onChange: (value: string | string[]) => void;
@@ -80,9 +83,32 @@ interface MultiStateRadioProps {
     compressed?: boolean;
 }
 /**
- * Multi State Radio Component
+ * Hazo UI Flex Radio Component
  * Supports single and multi-selection with radio buttons or icons
  */
-declare function MultiStateRadio({ layout, style, display_label, icon_set, data, selection, value, onChange, className, compressed, }: MultiStateRadioProps): react_jsx_runtime.JSX.Element;
+declare function HazoUiFlexRadio({ layout, style, display_label, icon_set, data, selection, value, onChange, className, compressed, }: HazoUiFlexRadioProps): react_jsx_runtime.JSX.Element;
 
-export { ExampleComponent, type FilterConfig, type FilterField, MultiFilterDialog, MultiSortDialog, MultiStateRadio, type MultiStateRadioItem, type MultiStateRadioProps, type SortConfig, type SortField };
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+
+/**
+ * Hazo UI Flex Input Component
+ *
+ * Enhanced input component with type validation, character restrictions, and error messaging.
+ * Extends shadcn Input component with additional validation props.
+ */
+
+interface HazoUiFlexInputProps extends Omit<InputProps, "type"> {
+    input_type?: "mixed" | "numeric" | "email" | "alpha";
+    text_len_min?: number;
+    text_len_max?: number;
+    num_min?: number;
+    num_max?: number;
+    regex?: string | RegExp;
+    num_decimals?: number;
+    format_guide?: string;
+    format_guide_info?: boolean;
+}
+declare const HazoUiFlexInput: React.ForwardRefExoticComponent<HazoUiFlexInputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { ExampleComponent, type FilterConfig, type FilterField, HazoUiFlexInput, type HazoUiFlexInputProps, HazoUiFlexRadio, type HazoUiFlexRadioItem, type HazoUiFlexRadioProps, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, type SortConfig, type SortField };

package/dist/index.js

@@ -27,6 +27,7 @@ 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';
+import * as CiIcons from 'react-icons/ci';
 
 var ExampleComponent = ({ children, className = "" }) => {
   return /* @__PURE__ */ jsx("div", { className: `cls_example_component ${className}`, children });
@@ -623,7 +624,7 @@ function FilterFieldItem({
     )
   ] });
 }
-function MultiFilterDialog({
+function HazoUiMultiFilterDialog({
   availableFields,
   onFilterChange,
   initialFilters = []
@@ -943,7 +944,7 @@ function SortableSortFieldItem({
     }
   );
 }
-function MultiSortDialog({
+function HazoUiMultiSortDialog({
   availableFields,
   onSortChange,
   initialSortFields = []
@@ -1193,7 +1194,8 @@ var iconSetMap = {
   io: IoIcons,
   io5: IoIcons,
   ri: RiIcons,
-  tb: TbIcons
+  tb: TbIcons,
+  ci: CiIcons
 };
 function getIconLibrary(iconSet) {
   if (!iconSet) return null;
@@ -1207,7 +1209,7 @@ function getIconComponent(iconSet, iconName) {
   const IconComponent = iconLibrary[iconName];
   return IconComponent || null;
 }
-function MultiStateRadio({
+function HazoUiFlexRadio({
   layout = "horizontal",
   style = "radio",
   display_label = true,
@@ -1339,6 +1341,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__ */ jsxs(
       Button,
       {
@@ -1349,9 +1355,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);
@@ -1362,8 +1370,21 @@ function MultiStateRadio({
         "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 })
+          IconComponent && /* @__PURE__ */ 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__ */ jsx(
+            "span",
+            {
+              className: "cls_icon_label text-sm font-medium",
+              style: item.fgcolor ? { color: item.fgcolor } : void 0,
+              children: item.label
+            }
+          )
         ]
       }
     );
@@ -1373,7 +1394,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",
@@ -1407,7 +1428,204 @@ 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.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.useState(
+      typeof controlledValue === "string" ? controlledValue : typeof controlledValue === "number" ? String(controlledValue) : ""
+    );
+    const [errorMessage, setErrorMessage] = React6.useState();
+    const isControlled = controlledValue !== void 0;
+    const currentValue = isControlled ? typeof controlledValue === "string" ? controlledValue : String(controlledValue || "") : internalValue;
+    React6.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__ */ jsxs("div", { className: "cls_hazo_ui_flex_input_container w-full", children: [
+      /* @__PURE__ */ 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__ */ jsx("p", { className: "cls_error_message mt-1 text-sm text-destructive", children: errorMessage }),
+      format_guide_info && format_guide && /* @__PURE__ */ 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";
 
-export { ExampleComponent, MultiFilterDialog, MultiSortDialog, MultiStateRadio };
+export { ExampleComponent, HazoUiFlexInput, HazoUiFlexRadio, HazoUiMultiFilterDialog, HazoUiMultiSortDialog };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map