@hyddenlabs/hydn-ui 0.3.0-alpha.166 → 0.3.0-alpha.167

package/dist/index.cjs

@@ -1010,7 +1010,8 @@ function Container({
   minWidth = "none",
   maxWidth = "none",
   minHeight = "none",
-  maxHeight = "none"
+  maxHeight = "none",
+  gap = "none"
 }) {
   const alignClasses2 = {
     start: "mr-auto",
@@ -1031,6 +1032,7 @@ function Container({
   const maxWidthClass = maxWidth !== "none" ? containerMaxWidths[maxWidth] : "";
   const minHeightClass = minHeight !== "none" ? containerMinHeights[minHeight] : "";
   const maxHeightClass = maxHeight !== "none" ? containerMaxHeights[maxHeight] : "";
+  const gapClass = gap !== "none" ? gapSizes[gap] : "";
   const dimensionClasses = [widthClass, heightClass, minWidthClass, minHeightClass, maxWidthClass, maxHeightClass].join(" ").trim();
   const alignClass = mX === "none" || mX === "auto" ? alignClasses2[align] : "";
   const alignItemsClass = alignItems ? alignItemsClasses[alignItems] : "";
@@ -1044,7 +1046,7 @@ function Container({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: `${dimensionClasses} ${paddingClass} ${marginXClass} ${marginYClass} ${alignClass} ${alignItemsClass} ${className}`,
+      className: `${dimensionClasses} ${paddingClass} ${marginXClass} ${marginYClass} ${alignClass} ${alignItemsClass} ${gapClass} ${className}`,
       style: Object.keys(inlineStyles).length > 0 ? inlineStyles : void 0,
       id,
       children
@@ -4985,6 +4987,31 @@ function Input({
 }
 Input.displayName = "Input";
 var input_default = Input;
+function useDebounce(callback, delay) {
+  const timeoutRef = React4.useRef(null);
+  const callbackRef = React4.useRef(callback);
+  React4.useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  React4.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return React4.useCallback(
+    (...args) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        callbackRef.current(...args);
+      }, delay);
+    },
+    [delay]
+  );
+}
 function FormInput({
   // FormField props
   label,
@@ -4999,8 +5026,14 @@ function FormInput({
   width,
   align = "center",
   reserveMessageSpace = false,
+  debounce,
+  onChange,
   ...inputProps
 }) {
+  const debouncedOnChange = useDebounce((e) => {
+    onChange?.(e);
+  }, debounce ?? 0);
+  const handleChange = debounce ? debouncedOnChange : onChange;
   return /* @__PURE__ */ jsxRuntime.jsx(
     form_field_default,
     {
@@ -5014,7 +5047,18 @@ function FormInput({
       width,
       align,
       reserveMessageSpace,
-      children: /* @__PURE__ */ jsxRuntime.jsx(input_default, { ...inputProps, required, disabled, id, pattern, title })
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        input_default,
+        {
+          ...inputProps,
+          onChange: handleChange,
+          required,
+          disabled,
+          id,
+          pattern,
+          title
+        }
+      )
     }
   );
 }
@@ -5153,9 +5197,14 @@ function FormTextarea({
   required,
   disabled,
   id,
-  // Textarea props
+  debounce,
+  onChange,
   ...textareaProps
 }) {
+  const debouncedOnChange = useDebounce((e) => {
+    onChange?.(e);
+  }, debounce ?? 0);
+  const handleChange = debounce ? debouncedOnChange : onChange;
   return /* @__PURE__ */ jsxRuntime.jsx(
     form_field_default,
     {
@@ -5166,7 +5215,7 @@ function FormTextarea({
       required,
       disabled,
       id,
-      children: /* @__PURE__ */ jsxRuntime.jsx(textarea_default, { ...textareaProps, required, disabled, id })
+      children: /* @__PURE__ */ jsxRuntime.jsx(textarea_default, { ...textareaProps, onChange: handleChange, required, disabled, id })
     }
   );
 }
@@ -5187,7 +5236,8 @@ function InputGroup({
   prefix,
   suffix,
   validationState = "default",
-  disabled = false
+  disabled = false,
+  className
 }) {
   const isTextPrefix = typeof prefix === "string" || typeof prefix === "number";
   const isTextSuffix = typeof suffix === "string" || typeof suffix === "number";
@@ -5197,7 +5247,7 @@ function InputGroup({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `${containerBaseClasses} ${borderClass} ${inputResetClasses} ${buttonResetClasses} ${disabledClass}`.trim(),
+      className: `${containerBaseClasses} ${borderClass} ${inputResetClasses} ${buttonResetClasses} ${disabledClass} ${className ?? ""}`.trim(),
       children: [
         prefix && /* @__PURE__ */ jsxRuntime.jsx(
           "div",