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

package/dist/index.d.cts

@@ -850,12 +850,14 @@ type ContainerProps = {
     minHeight?: ContainerMinHeightSize;
     /** Maximum height constraint */
     maxHeight?: ContainerMaxHeightSize;
+    /** Gap spacing between child elements - uses unified size system */
+    gap?: GapSize;
 };
 /**
  * Container layout component with responsive max-width and padding
  * Use align prop to control horizontal alignment (default: center)
  */
-declare function Container({ id, children, className, padding, marginX: mX, marginY: mY, align, alignItems, width, height, minWidth, maxWidth, minHeight, maxHeight }: Readonly<ContainerProps>): react_jsx_runtime.JSX.Element;
+declare function Container({ id, children, className, padding, marginX: mX, marginY: mY, align, alignItems, width, height, minWidth, maxWidth, minHeight, maxHeight, gap }: Readonly<ContainerProps>): react_jsx_runtime.JSX.Element;
 declare namespace Container {
     var displayName: string;
 }
@@ -3508,6 +3510,8 @@ type FormInputProps = Omit<InputProps, 'validationState'> & {
     align?: 'left' | 'center' | 'right';
     /** Reserve space for error message to prevent layout shift */
     reserveMessageSpace?: boolean;
+    /** Debounce delay in milliseconds - when set, onChange will be debounced by this amount */
+    debounce?: number;
 };
 /**
  * FormInput - Input wrapped with FormField for label and error display
@@ -3540,9 +3544,21 @@ type FormInputProps = Omit<InputProps, 'validationState'> & {
  *
  * // Number with range
  * <FormInput label="Age" type="number" min={18} max={120} required />
+ *
+ * // With debounced onChange for search
+ * <FormInput
+ *   label="Search"
+ *   value={searchQuery}
+ *   onChange={(e) => {
+ *     setSearchQuery(e.target.value);
+ *     fetchSearchResults(e.target.value);
+ *   }}
+ *   debounce={500}
+ *   placeholder="Type to search..."
+ * />
  * ```
  */
-declare function FormInput({ label, helperText, spacing, error, required, disabled, id, pattern, title, width, align, reserveMessageSpace, ...inputProps }: Readonly<FormInputProps>): react_jsx_runtime.JSX.Element;
+declare function FormInput({ label, helperText, spacing, error, required, disabled, id, pattern, title, width, align, reserveMessageSpace, debounce, onChange, ...inputProps }: Readonly<FormInputProps>): react_jsx_runtime.JSX.Element;
 declare namespace FormInput {
     var displayName: string;
 }
@@ -3683,6 +3699,8 @@ type FormTextareaProps = Omit<TextareaProps, 'validationState'> & {
     spacing?: FormSpacing;
     /** Error message to display */
     error?: string;
+    /** Debounce delay in milliseconds - when set, onChange will be debounced by this amount */
+    debounce?: number;
 };
 /**
  * FormTextarea - Textarea wrapped with FormField for label and error display
@@ -3695,9 +3713,21 @@ type FormTextareaProps = Omit<TextareaProps, 'validationState'> & {
  *   required
  *   minLength={10}
  * />
+ *
+ * // With debounced onChange for auto-save
+ * <FormTextarea
+ *   label="Notes"
+ *   value={notes}
+ *   onChange={(e) => {
+ *     setNotes(e.target.value);
+ *     autoSaveNotes(e.target.value);
+ *   }}
+ *   debounce={1000}
+ *   placeholder="Type your notes..."
+ * />
  * ```
  */
-declare function FormTextarea({ label, helperText, spacing, error, required, disabled, id, ...textareaProps }: Readonly<FormTextareaProps>): react_jsx_runtime.JSX.Element;
+declare function FormTextarea({ label, helperText, spacing, error, required, disabled, id, debounce, onChange, ...textareaProps }: Readonly<FormTextareaProps>): react_jsx_runtime.JSX.Element;
 declare namespace FormTextarea {
     var displayName: string;
 }
@@ -3713,6 +3743,8 @@ type InputGroupProps = {
     validationState?: ValidationState$2;
     /** Disables the input group */
     disabled?: boolean;
+    /** Additional CSS classes for the input group container */
+    className?: string;
 };
 /**
  * InputGroup - Combines input with prefix/suffix elements
@@ -3735,7 +3767,7 @@ type InputGroupProps = {
  * </InputGroup>
  * ```
  */
-declare function InputGroup({ children, prefix, suffix, validationState, disabled }: Readonly<InputGroupProps>): react_jsx_runtime.JSX.Element;
+declare function InputGroup({ children, prefix, suffix, validationState, disabled, className }: Readonly<InputGroupProps>): react_jsx_runtime.JSX.Element;
 declare namespace InputGroup {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -850,12 +850,14 @@ type ContainerProps = {
     minHeight?: ContainerMinHeightSize;
     /** Maximum height constraint */
     maxHeight?: ContainerMaxHeightSize;
+    /** Gap spacing between child elements - uses unified size system */
+    gap?: GapSize;
 };
 /**
  * Container layout component with responsive max-width and padding
  * Use align prop to control horizontal alignment (default: center)
  */
-declare function Container({ id, children, className, padding, marginX: mX, marginY: mY, align, alignItems, width, height, minWidth, maxWidth, minHeight, maxHeight }: Readonly<ContainerProps>): react_jsx_runtime.JSX.Element;
+declare function Container({ id, children, className, padding, marginX: mX, marginY: mY, align, alignItems, width, height, minWidth, maxWidth, minHeight, maxHeight, gap }: Readonly<ContainerProps>): react_jsx_runtime.JSX.Element;
 declare namespace Container {
     var displayName: string;
 }
@@ -3508,6 +3510,8 @@ type FormInputProps = Omit<InputProps, 'validationState'> & {
     align?: 'left' | 'center' | 'right';
     /** Reserve space for error message to prevent layout shift */
     reserveMessageSpace?: boolean;
+    /** Debounce delay in milliseconds - when set, onChange will be debounced by this amount */
+    debounce?: number;
 };
 /**
  * FormInput - Input wrapped with FormField for label and error display
@@ -3540,9 +3544,21 @@ type FormInputProps = Omit<InputProps, 'validationState'> & {
  *
  * // Number with range
  * <FormInput label="Age" type="number" min={18} max={120} required />
+ *
+ * // With debounced onChange for search
+ * <FormInput
+ *   label="Search"
+ *   value={searchQuery}
+ *   onChange={(e) => {
+ *     setSearchQuery(e.target.value);
+ *     fetchSearchResults(e.target.value);
+ *   }}
+ *   debounce={500}
+ *   placeholder="Type to search..."
+ * />
  * ```
  */
-declare function FormInput({ label, helperText, spacing, error, required, disabled, id, pattern, title, width, align, reserveMessageSpace, ...inputProps }: Readonly<FormInputProps>): react_jsx_runtime.JSX.Element;
+declare function FormInput({ label, helperText, spacing, error, required, disabled, id, pattern, title, width, align, reserveMessageSpace, debounce, onChange, ...inputProps }: Readonly<FormInputProps>): react_jsx_runtime.JSX.Element;
 declare namespace FormInput {
     var displayName: string;
 }
@@ -3683,6 +3699,8 @@ type FormTextareaProps = Omit<TextareaProps, 'validationState'> & {
     spacing?: FormSpacing;
     /** Error message to display */
     error?: string;
+    /** Debounce delay in milliseconds - when set, onChange will be debounced by this amount */
+    debounce?: number;
 };
 /**
  * FormTextarea - Textarea wrapped with FormField for label and error display
@@ -3695,9 +3713,21 @@ type FormTextareaProps = Omit<TextareaProps, 'validationState'> & {
  *   required
  *   minLength={10}
  * />
+ *
+ * // With debounced onChange for auto-save
+ * <FormTextarea
+ *   label="Notes"
+ *   value={notes}
+ *   onChange={(e) => {
+ *     setNotes(e.target.value);
+ *     autoSaveNotes(e.target.value);
+ *   }}
+ *   debounce={1000}
+ *   placeholder="Type your notes..."
+ * />
  * ```
  */
-declare function FormTextarea({ label, helperText, spacing, error, required, disabled, id, ...textareaProps }: Readonly<FormTextareaProps>): react_jsx_runtime.JSX.Element;
+declare function FormTextarea({ label, helperText, spacing, error, required, disabled, id, debounce, onChange, ...textareaProps }: Readonly<FormTextareaProps>): react_jsx_runtime.JSX.Element;
 declare namespace FormTextarea {
     var displayName: string;
 }
@@ -3713,6 +3743,8 @@ type InputGroupProps = {
     validationState?: ValidationState$2;
     /** Disables the input group */
     disabled?: boolean;
+    /** Additional CSS classes for the input group container */
+    className?: string;
 };
 /**
  * InputGroup - Combines input with prefix/suffix elements
@@ -3735,7 +3767,7 @@ type InputGroupProps = {
  * </InputGroup>
  * ```
  */
-declare function InputGroup({ children, prefix, suffix, validationState, disabled }: Readonly<InputGroupProps>): react_jsx_runtime.JSX.Element;
+declare function InputGroup({ children, prefix, suffix, validationState, disabled, className }: Readonly<InputGroupProps>): react_jsx_runtime.JSX.Element;
 declare namespace InputGroup {
     var displayName: string;
 }

package/dist/index.js

@@ -985,7 +985,8 @@ function Container({
   minWidth = "none",
   maxWidth = "none",
   minHeight = "none",
-  maxHeight = "none"
+  maxHeight = "none",
+  gap = "none"
 }) {
   const alignClasses2 = {
     start: "mr-auto",
@@ -1006,6 +1007,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] : "";
@@ -1019,7 +1021,7 @@ function Container({
   return /* @__PURE__ */ 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
@@ -4960,6 +4962,31 @@ function Input({
 }
 Input.displayName = "Input";
 var input_default = Input;
+function useDebounce(callback, delay) {
+  const timeoutRef = useRef(null);
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return useCallback(
+    (...args) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        callbackRef.current(...args);
+      }, delay);
+    },
+    [delay]
+  );
+}
 function FormInput({
   // FormField props
   label,
@@ -4974,8 +5001,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__ */ jsx(
     form_field_default,
     {
@@ -4989,7 +5022,18 @@ function FormInput({
       width,
       align,
       reserveMessageSpace,
-      children: /* @__PURE__ */ jsx(input_default, { ...inputProps, required, disabled, id, pattern, title })
+      children: /* @__PURE__ */ jsx(
+        input_default,
+        {
+          ...inputProps,
+          onChange: handleChange,
+          required,
+          disabled,
+          id,
+          pattern,
+          title
+        }
+      )
     }
   );
 }
@@ -5128,9 +5172,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__ */ jsx(
     form_field_default,
     {
@@ -5141,7 +5190,7 @@ function FormTextarea({
       required,
       disabled,
       id,
-      children: /* @__PURE__ */ jsx(textarea_default, { ...textareaProps, required, disabled, id })
+      children: /* @__PURE__ */ jsx(textarea_default, { ...textareaProps, onChange: handleChange, required, disabled, id })
     }
   );
 }
@@ -5162,7 +5211,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";
@@ -5172,7 +5222,7 @@ function InputGroup({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `${containerBaseClasses} ${borderClass} ${inputResetClasses} ${buttonResetClasses} ${disabledClass}`.trim(),
+      className: `${containerBaseClasses} ${borderClass} ${inputResetClasses} ${buttonResetClasses} ${disabledClass} ${className ?? ""}`.trim(),
       children: [
         prefix && /* @__PURE__ */ jsx(
           "div",