@bgord/ui 0.2.0 → 0.3.0

package/dist/hooks/index.d.ts

@@ -1,2 +1,4 @@
+export * from "./use-exit-action";
 export * from "./use-field";
+export * from "./use-hover";
 export * from "./use-toggle";

package/dist/hooks/use-exit-action.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+type UseExitActionAnimationType = string;
+type UseExitActionOptionsType = {
+    actionFn: () => void;
+    animation: UseExitActionAnimationType;
+};
+type UseExitActionReturnType = {
+    visible: boolean;
+    trigger: (event: React.MouseEvent) => void;
+    attach: {
+        "data-exit": UseExitActionAnimationType;
+        onAnimationEnd: (event: React.AnimationEvent) => void;
+    } | undefined;
+};
+export declare function useExitAction(options: UseExitActionOptionsType): UseExitActionReturnType;
+export {};

package/dist/hooks/use-field.d.ts

@@ -55,6 +55,8 @@ export type useFieldReturnType<T extends FieldValueAllowedTypes> = {
         props: {
             id: NewFieldNameType;
             name: NewFieldNameType;
+            value: NonNullable<T>;
+            onChange: (event: React.ChangeEvent<FieldElementType>) => void;
         };
     };
     /** Whether field value differs from default */
@@ -113,36 +115,6 @@ export type useFieldReturnType<T extends FieldValueAllowedTypes> = {
  * ```
  */
 export declare function useField<T extends FieldValueAllowedTypes>(config: useFieldConfigType<T>): useFieldReturnType<T>;
-/**
- * Utility class for working with multiple fields
- * @static
- */
-export declare class Fields {
-    /**
-     * Check if all fields are unchanged
-     * @param {Array<{unchanged: boolean}>} fields - Array of field states
-     * @returns {boolean} True if all fields match their default values
-     */
-    static allUnchanged(fields: {
-        unchanged: boolean;
-    }[]): boolean;
-    /**
-     * Check if any field is unchanged
-     * @param {Array<{unchanged: boolean}>} fields - Array of field states
-     * @returns {boolean} True if any field matches its default value
-     */
-    static anyUnchanged(fields: {
-        unchanged: boolean;
-    }[]): boolean;
-    /**
-     * Check if any field has changed
-     * @param {Array<{changed: boolean}>} fields - Array of field states
-     * @returns {boolean} True if any field differs from its default value
-     */
-    static anyChanged(fields: {
-        changed: boolean;
-    }[]): boolean;
-}
 /**
  * Utility class for working with local fields
  * @static

package/dist/hooks/use-hover.d.ts

@@ -0,0 +1,11 @@
+type UseHoverConfigType = {
+    enabled?: boolean;
+};
+export type UseHoverReturnType<T extends HTMLElement> = {
+    attach: {
+        ref: React.RefCallback<T | null>;
+    };
+    isHovering: boolean;
+};
+export declare function useHover<T extends HTMLElement = HTMLElement>({ enabled, }?: UseHoverConfigType): UseHoverReturnType<T>;
+export {};

package/dist/index.js

@@ -6,6 +6,24 @@ function Button() {
     children: "Click"
   }, undefined, false, undefined, this);
 }
+// src/hooks/use-exit-action.ts
+import React from "react";
+function useExitAction(options) {
+  const [phase, setPhase] = React.useState("idle" /* idle */);
+  const trigger = (event) => {
+    event.preventDefault();
+    if (phase === "idle")
+      setPhase("exiting" /* exiting */);
+  };
+  const onAnimationEnd = (event) => {
+    if (event.animationName !== options.animation)
+      return;
+    options.actionFn();
+    setPhase("gone" /* gone */);
+  };
+  const attach = phase === "exiting" ? { "data-exit": options.animation, onAnimationEnd } : undefined;
+  return { visible: phase !== "gone", attach, trigger };
+}
 // src/hooks/use-field.ts
 import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router";
@@ -46,8 +64,8 @@ function useField(config) {
   const givenValue = new Field(params.get(config.name));
   const defaultValue = new Field(config.defaultValue);
   const [currentValue, _setCurrentValue] = useState(givenValue.isEmpty() ? defaultValue.get() : givenValue.get());
-  const setCurrentValue = (value) => {
-    const candidate = new Field(value);
+  const setCurrentValue = (value2) => {
+    const candidate = new Field(value2);
     _setCurrentValue(candidate.get());
   };
   useEffect(() => {
@@ -63,56 +81,53 @@ function useField(config) {
     }
     if (strategy === "local" /* local */) {}
   }, [currentValue, params, setParams, config.name, strategy]);
+  const value = Field.isEmpty(currentValue) ? "" : currentValue;
+  const onChange = (event) => setCurrentValue(event.currentTarget.value);
   return {
     strategy,
     defaultValue: defaultValue.get(),
     currentValue,
-    value: Field.isEmpty(currentValue) ? "" : currentValue,
+    value,
     set: setCurrentValue,
-    handleChange: (event) => setCurrentValue(event.currentTarget.value),
+    handleChange: onChange,
     clear: () => setCurrentValue(defaultValue.get()),
     label: { props: { htmlFor: config.name } },
-    input: { props: { id: config.name, name: config.name } },
+    input: { props: { id: config.name, name: config.name, value, onChange } },
     changed: !Field.compare(currentValue, defaultValue.get()),
     unchanged: Field.compare(currentValue, defaultValue.get()),
     empty: Field.isEmpty(currentValue)
   };
 }
 
-class Fields {
-  static allUnchanged(fields) {
-    return fields.every((field) => field.unchanged);
-  }
-  static anyUnchanged(fields) {
-    return fields.some((field) => field.unchanged);
-  }
-  static anyChanged(fields) {
-    return fields.some((field) => field.changed);
-  }
-}
-
 class LocalFields {
   static clearAll(fields) {
     return () => fields.forEach((field) => field.clear());
   }
 }
+// src/hooks/use-hover.ts
+import { useCallback as useCallback2, useRef } from "react";
+
 // src/hooks/use-toggle.ts
-import { useCallback, useMemo, useState as useState2 } from "react";
+import { useState as useState2 } from "react";
 function useToggle({ name, defaultValue = false }) {
-  const [on, setIsOn] = useState2(defaultValue);
-  const enable = useCallback(() => setIsOn(true), []);
-  const disable = useCallback(() => setIsOn(false), []);
-  const toggle = useCallback(() => setIsOn((v) => !v), []);
-  const off = useMemo(() => !on, [on]);
-  const props = useMemo(() => ({
+  const [on, setOn] = useState2(defaultValue);
+  const enable = () => setOn(true);
+  const disable = () => setOn(false);
+  const toggle = () => setOn((v) => !v);
+  const off = !on;
+  const props = {
     controller: {
       "aria-expanded": on ? "true" : "false",
       "aria-controls": name,
       role: "button",
       tabIndex: 0
     },
-    target: { id: name, role: "region", "aria-hidden": on ? "false" : "true" }
-  }), [on, name]);
+    target: {
+      id: name,
+      role: "region",
+      "aria-hidden": on ? "false" : "true"
+    }
+  };
   return { on, off, enable, disable, toggle, props };
 }
 function extractUseToggle(_props) {
@@ -122,6 +137,50 @@ function extractUseToggle(_props) {
     rest
   };
 }
+
+// src/hooks/use-hover.ts
+function useHover({
+  enabled = true
+} = {}) {
+  const { on: isOn, enable, disable } = useToggle({ name: "is-hovering" });
+  const nodeRef = useRef(null);
+  const enterEvent = typeof window !== "undefined" && "PointerEvent" in window ? "pointerenter" : "mouseenter";
+  const leaveEvent = typeof window !== "undefined" && "PointerEvent" in window ? "pointerleave" : "mouseleave";
+  const ref = useCallback2((node) => {
+    const prev = nodeRef.current;
+    if (prev) {
+      prev.removeEventListener(enterEvent, enable);
+      prev.removeEventListener(leaveEvent, disable);
+    }
+    nodeRef.current = node;
+    if (node && enabled) {
+      node.addEventListener(enterEvent, enable);
+      node.addEventListener(leaveEvent, disable);
+    }
+  }, [enterEvent, leaveEvent, enabled, enable, disable]);
+  return {
+    attach: { ref },
+    isHovering: isOn && enabled
+  };
+}
+// src/services/fields.ts
+class Fields {
+  static allUnchanged(fields) {
+    return fields.every((field) => field.unchanged);
+  }
+  static allEmpty(fields) {
+    return fields.every((field) => field.empty);
+  }
+  static anyEmpty(fields) {
+    return fields.some((field) => field.empty);
+  }
+  static anyUnchanged(fields) {
+    return fields.some((field) => field.unchanged);
+  }
+  static anyChanged(fields) {
+    return fields.some((field) => field.changed);
+  }
+}
 // src/services/form.ts
 class Form {
   static inputPattern(config) {
@@ -178,8 +237,10 @@ function px(number) {
 }
 export {
   useToggle,
+  useHover,
   useFieldStrategyEnum,
   useField,
+  useExitAction,
   extractUseToggle,
   Rhythm,
   LocalFields,

package/dist/services/fields.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Utility class for working with multiple fields
+ * @static
+ */
+export declare class Fields {
+    /**
+     * Check if all fields are unchanged
+     * @param {Array<{unchanged: boolean}>} fields - Array of field states
+     * @returns {boolean} True if all fields match their default values
+     */
+    static allUnchanged(fields: {
+        unchanged: boolean;
+    }[]): boolean;
+    /**
+     * Check if all fields are empty
+     * @param {Array<{empty: boolean}>} fields - Array of field states
+     * @returns {boolean} True if all fields are empty
+     */
+    static allEmpty(fields: {
+        empty: boolean;
+    }[]): boolean;
+    /**
+     * Check if any field is empty
+     * @param {Array<{empty: boolean}>} fields - Array of field states
+     * @returns {boolean} True if any field is empty
+     */
+    static anyEmpty(fields: {
+        empty: boolean;
+    }[]): boolean;
+    /**
+     * Check if any field is unchanged
+     * @param {Array<{unchanged: boolean}>} fields - Array of field states
+     * @returns {boolean} True if any field matches its default value
+     */
+    static anyUnchanged(fields: {
+        unchanged: boolean;
+    }[]): boolean;
+    /**
+     * Check if any field has changed
+     * @param {Array<{changed: boolean}>} fields - Array of field states
+     * @returns {boolean} True if any field differs from its default value
+     */
+    static anyChanged(fields: {
+        changed: boolean;
+    }[]): boolean;
+}

package/dist/services/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./field";
+export * from "./fields";
 export * from "./form";
 export * from "./rhythm";

package/dist/src/components/button.d.ts

@@ -0,0 +1 @@
+export declare function Button(): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/index.d.ts

@@ -0,0 +1 @@
+export * from "./button";

package/dist/src/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./use-field";
+export * from "./use-hover";
+export * from "./use-toggle";

package/dist/src/hooks/use-field.d.ts

@@ -0,0 +1,127 @@
+import { FieldValueAllowedTypes } from "../services/field";
+/** Type for field names */
+type NewFieldNameType = string;
+/** Valid HTML elements that can be used as field inputs */
+export type FieldElementType = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+/**
+ * Defines the strategy for field value persistence
+ * @enum {string}
+ */
+export declare enum useFieldStrategyEnum {
+    /** Store field value in URL parameters */
+    params = "params",
+    /** Store field value in local state */
+    local = "local"
+}
+/**
+ * Configuration options for the useField hook
+ * @template T - Type of the field value
+ */
+export type useFieldConfigType<T extends FieldValueAllowedTypes> = {
+    /** Unique identifier for the field */
+    name: NewFieldNameType;
+    /** Initial value for the field */
+    defaultValue?: T;
+    /** Strategy for value persistence */
+    strategy?: useFieldStrategyEnum;
+};
+/**
+ * Return type for the useField hook
+ * @template T - Type of the field value
+ */
+export type useFieldReturnType<T extends FieldValueAllowedTypes> = {
+    /** Current persistence strategy */
+    strategy: useFieldStrategyEnum;
+    /** Initial field value */
+    defaultValue: T;
+    /** Current field value */
+    currentValue: T;
+    /** Non-nullable field value, empty string for empty values */
+    value: NonNullable<T>;
+    /** Function to set field value */
+    set: (value: T) => void;
+    /** Change event handler for controlled components */
+    handleChange: (event: React.ChangeEvent<FieldElementType>) => void;
+    /** Reset field to default value */
+    clear: () => void;
+    /** Props for field label */
+    label: {
+        props: {
+            htmlFor: NewFieldNameType;
+        };
+    };
+    /** Props for field input */
+    input: {
+        props: {
+            id: NewFieldNameType;
+            name: NewFieldNameType;
+            value: NonNullable<T>;
+            onChange: (event: React.ChangeEvent<FieldElementType>) => void;
+        };
+    };
+    /** Whether field value differs from default */
+    changed: boolean;
+    /** Whether field value equals default */
+    unchanged: boolean;
+    /** Whether field is empty */
+    empty: boolean;
+};
+/**
+ * Hook for managing form field state with URL parameters or local state
+ *
+ * @template T - Type of the field value
+ * @param {useFieldConfigType<T>} config - Field configuration
+ * @returns {useFieldReturnType<T>} Field state and handlers
+ *
+ * @example
+ * ```tsx
+ * // Using local strategy
+ * function NameField() {
+ *   const field = useField({
+ *     name: "username",
+ *     defaultValue: "",
+ *     strategy: useFieldStrategyEnum.local
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <label {...field.label.props}>Username:</label>
+ *       <input
+ *         {...field.input.props}
+ *         type="text"
+ *         value={field.value}
+ *         onChange={field.handleChange}
+ *       />
+ *     </div>
+ *   );
+ * }
+ *
+ * // Using URL parameters strategy
+ * function SearchField() {
+ *   const field = useField({
+ *     name: "q",
+ *     strategy: useFieldStrategyEnum.params
+ *   });
+ *
+ *   return (
+ *     <input
+ *       type="search"
+ *       {...field.input.props}
+ *       value={field.value}
+ *       onChange={field.handleChange}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function useField<T extends FieldValueAllowedTypes>(config: useFieldConfigType<T>): useFieldReturnType<T>;
+/**
+ * Utility class for working with local fields
+ * @static
+ */
+export declare class LocalFields {
+    static clearAll(fields: {
+        clear: VoidFunction;
+    }[]): () => void;
+}
+export {};

package/dist/src/hooks/use-hover.d.ts

@@ -0,0 +1,12 @@
+import { UseToggleReturnType } from "./use-toggle";
+type UseHoverConfigType = {
+    enabled?: boolean;
+};
+type UseHoverReturnType = {
+    attach: {
+        ref: React.RefObject<any>;
+    };
+    isHovering: UseToggleReturnType["on"];
+};
+export declare function useHover(config?: UseHoverConfigType): UseHoverReturnType;
+export {};

package/dist/src/hooks/use-toggle.d.ts

@@ -0,0 +1,32 @@
+export type UseToggleValueType = boolean;
+export type UseToggleConfigType = {
+    name: string;
+    defaultValue?: UseToggleValueType;
+};
+type UseToggleProps = {
+    controller: {
+        "aria-expanded": "true" | "false";
+        "aria-controls": string;
+        role: "button";
+        tabIndex: 0;
+    };
+    target: {
+        id: string;
+        role: "region";
+        "aria-hidden": "true" | "false";
+    };
+};
+export type UseToggleReturnType = {
+    on: UseToggleValueType;
+    off: UseToggleValueType;
+    enable: () => void;
+    disable: () => void;
+    toggle: () => void;
+    props: UseToggleProps;
+};
+export declare function useToggle({ name, defaultValue }: UseToggleConfigType): UseToggleReturnType;
+export declare function extractUseToggle<X>(_props: UseToggleReturnType & X): {
+    toggle: UseToggleReturnType;
+    rest: X;
+};
+export {};

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./components";
+export * from "./hooks";
+export * from "./services";

package/dist/src/services/field.d.ts

@@ -0,0 +1,10 @@
+export type FieldValueAllowedTypes = string | number | undefined | null;
+export declare class Field<T extends FieldValueAllowedTypes> {
+    static readonly emptyValue: undefined;
+    static isEmpty(value: FieldValueAllowedTypes): boolean;
+    static compare(one: FieldValueAllowedTypes, another: FieldValueAllowedTypes): boolean;
+    private readonly value;
+    constructor(value: FieldValueAllowedTypes);
+    get(): T;
+    isEmpty(): boolean;
+}

package/dist/src/services/fields.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Utility class for working with multiple fields
+ * @static
+ */
+export declare class Fields {
+    /**
+     * Check if all fields are unchanged
+     * @param {Array<{unchanged: boolean}>} fields - Array of field states
+     * @returns {boolean} True if all fields match their default values
+     */
+    static allUnchanged(fields: {
+        unchanged: boolean;
+    }[]): boolean;
+    /**
+     * Check if all fields are empty
+     * @param {Array<{empty: boolean}>} fields - Array of field states
+     * @returns {boolean} True if all fields are empty
+     */
+    static allEmpty(fields: {
+        empty: boolean;
+    }[]): boolean;
+    /**
+     * Check if any field is empty
+     * @param {Array<{empty: boolean}>} fields - Array of field states
+     * @returns {boolean} True if any field is empty
+     */
+    static anyEmpty(fields: {
+        empty: boolean;
+    }[]): boolean;
+    /**
+     * Check if any field is unchanged
+     * @param {Array<{unchanged: boolean}>} fields - Array of field states
+     * @returns {boolean} True if any field matches its default value
+     */
+    static anyUnchanged(fields: {
+        unchanged: boolean;
+    }[]): boolean;
+    /**
+     * Check if any field has changed
+     * @param {Array<{changed: boolean}>} fields - Array of field states
+     * @returns {boolean} True if any field differs from its default value
+     */
+    static anyChanged(fields: {
+        changed: boolean;
+    }[]): boolean;
+}

package/dist/src/services/form.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+type PatternConfigType = {
+    min?: number;
+    max?: number;
+    required?: React.JSX.IntrinsicElements["input"]["required"];
+};
+export declare class Form {
+    static inputPattern(config: PatternConfigType): React.ComponentPropsWithoutRef<"input">;
+    static textareaPattern(config: PatternConfigType): React.ComponentPropsWithoutRef<"textarea">;
+}
+export {};

package/dist/src/services/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./field";
+export * from "./fields";
+export * from "./form";
+export * from "./rhythm";

package/dist/src/services/rhythm.d.ts

@@ -0,0 +1,69 @@
+type RhythmBaseType = number;
+type RhythmTimesType = number;
+export declare function Rhythm(base?: RhythmBaseType): {
+    times(times: RhythmTimesType): {
+        height: {
+            height: string;
+        };
+        minHeight: {
+            minHeight: string;
+        };
+        maxHeight: {
+            maxHeight: string;
+        };
+        width: {
+            width: string;
+        };
+        minWidth: {
+            minWidth: string;
+        };
+        maxWidth: {
+            maxWidth: string;
+        };
+        square: {
+            height: string;
+            width: string;
+        };
+        px: string;
+        raw: number;
+        style: {
+            height: {
+                style: {
+                    height: string;
+                };
+            };
+            minHeight: {
+                style: {
+                    minHeight: string;
+                };
+            };
+            maxHeight: {
+                style: {
+                    maxHeight: string;
+                };
+            };
+            width: {
+                style: {
+                    width: string;
+                };
+            };
+            minWidth: {
+                style: {
+                    minWidth: string;
+                };
+            };
+            maxWidth: {
+                style: {
+                    maxWidth: string;
+                };
+            };
+            square: {
+                style: {
+                    height: string;
+                    width: string;
+                };
+            };
+        };
+    };
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bgord/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "exports": {
     ".": {
@@ -38,7 +38,7 @@
     "@commitlint/config-conventional": "19.8.1",
     "cspell": "9.1.3",
     "knip": "5.61.3",
-    "lefthook": "1.11.16",
+    "lefthook": "1.12.1",
     "only-allow": "1.2.1",
     "shellcheck": "3.1.0"
   }