@bgord/ui 0.1.1 → 0.2.0

package/dist/hooks/index.d.ts

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

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

@@ -0,0 +1,155 @@
+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;
+        };
+    };
+    /** 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 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
+ */
+export declare class LocalFields {
+    static clearAll(fields: {
+        clear: VoidFunction;
+    }[]): () => void;
+}
+export {};

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,495 +1,110 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __toESM = (mod, isNodeMode, target) => {
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: () => mod[key],
-        enumerable: true
-      });
-  return to;
-};
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, {
-      get: all[name],
-      enumerable: true,
-      configurable: true,
-      set: (newValue) => all[name] = () => newValue
-    });
-};
-var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
-
-// node_modules/react/cjs/react.production.js
-var exports_react_production = {};
-__export(exports_react_production, {
-  version: () => $version,
-  useTransition: () => $useTransition,
-  useSyncExternalStore: () => $useSyncExternalStore,
-  useState: () => $useState,
-  useRef: () => $useRef,
-  useReducer: () => $useReducer,
-  useOptimistic: () => $useOptimistic,
-  useMemo: () => $useMemo,
-  useLayoutEffect: () => $useLayoutEffect,
-  useInsertionEffect: () => $useInsertionEffect,
-  useImperativeHandle: () => $useImperativeHandle,
-  useId: () => $useId,
-  useEffect: () => $useEffect,
-  useDeferredValue: () => $useDeferredValue,
-  useDebugValue: () => $useDebugValue,
-  useContext: () => $useContext,
-  useCallback: () => $useCallback,
-  useActionState: () => $useActionState,
-  use: () => $use,
-  unstable_useCacheRefresh: () => $unstable_useCacheRefresh,
-  startTransition: () => $startTransition,
-  memo: () => $memo,
-  lazy: () => $lazy,
-  isValidElement: () => $isValidElement,
-  forwardRef: () => $forwardRef,
-  createRef: () => $createRef,
-  createElement: () => $createElement,
-  createContext: () => $createContext,
-  cloneElement: () => $cloneElement,
-  cache: () => $cache,
-  __COMPILER_RUNTIME: () => $__COMPILER_RUNTIME,
-  __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE: () => $__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
-  Suspense: () => $Suspense,
-  StrictMode: () => $StrictMode,
-  PureComponent: () => $PureComponent,
-  Profiler: () => $Profiler,
-  Fragment: () => $Fragment,
-  Component: () => $Component,
-  Children: () => $Children
-});
-function getIteratorFn(maybeIterable) {
-  if (maybeIterable === null || typeof maybeIterable !== "object")
-    return null;
-  maybeIterable = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable["@@iterator"];
-  return typeof maybeIterable === "function" ? maybeIterable : null;
-}
-function Component(props, context, updater) {
-  this.props = props;
-  this.context = context;
-  this.refs = emptyObject;
-  this.updater = updater || ReactNoopUpdateQueue;
-}
-function ComponentDummy() {}
-function PureComponent(props, context, updater) {
-  this.props = props;
-  this.context = context;
-  this.refs = emptyObject;
-  this.updater = updater || ReactNoopUpdateQueue;
-}
-function ReactElement(type, key, self, source, owner, props) {
-  self = props.ref;
-  return {
-    $$typeof: REACT_ELEMENT_TYPE,
-    type,
-    key,
-    ref: self !== undefined ? self : null,
-    props
-  };
-}
-function cloneAndReplaceKey(oldElement, newKey) {
-  return ReactElement(oldElement.type, newKey, undefined, undefined, undefined, oldElement.props);
-}
-function isValidElement(object) {
-  return typeof object === "object" && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
-}
-function escape(key) {
-  var escaperLookup = { "=": "=0", ":": "=2" };
-  return "$" + key.replace(/[=:]/g, function(match) {
-    return escaperLookup[match];
-  });
-}
-function getElementKey(element, index) {
-  return typeof element === "object" && element !== null && element.key != null ? escape("" + element.key) : index.toString(36);
+// src/components/button.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+function Button() {
+  return /* @__PURE__ */ jsxDEV("button", {
+    type: "button",
+    children: "Click"
+  }, undefined, false, undefined, this);
 }
-function noop$1() {}
-function resolveThenable(thenable) {
-  switch (thenable.status) {
-    case "fulfilled":
-      return thenable.value;
-    case "rejected":
-      throw thenable.reason;
-    default:
-      switch (typeof thenable.status === "string" ? thenable.then(noop$1, noop$1) : (thenable.status = "pending", thenable.then(function(fulfilledValue) {
-        thenable.status === "pending" && (thenable.status = "fulfilled", thenable.value = fulfilledValue);
-      }, function(error) {
-        thenable.status === "pending" && (thenable.status = "rejected", thenable.reason = error);
-      })), thenable.status) {
-        case "fulfilled":
-          return thenable.value;
-        case "rejected":
-          throw thenable.reason;
-      }
+// src/hooks/use-field.ts
+import { useEffect, useState } from "react";
+import { useSearchParams } from "react-router";
+
+// src/services/field.ts
+class Field {
+  static emptyValue = undefined;
+  static isEmpty(value) {
+    return value === undefined || value === "" || value === null;
   }
-  throw thenable;
-}
-function mapIntoArray(children, array, escapedPrefix, nameSoFar, callback) {
-  var type = typeof children;
-  if (type === "undefined" || type === "boolean")
-    children = null;
-  var invokeCallback = false;
-  if (children === null)
-    invokeCallback = true;
-  else
-    switch (type) {
-      case "bigint":
-      case "string":
-      case "number":
-        invokeCallback = true;
-        break;
-      case "object":
-        switch (children.$$typeof) {
-          case REACT_ELEMENT_TYPE:
-          case REACT_PORTAL_TYPE:
-            invokeCallback = true;
-            break;
-          case REACT_LAZY_TYPE:
-            return invokeCallback = children._init, mapIntoArray(invokeCallback(children._payload), array, escapedPrefix, nameSoFar, callback);
-        }
+  static compare(one, another) {
+    if (Field.isEmpty(one) && Field.isEmpty(another)) {
+      return true;
     }
-  if (invokeCallback)
-    return callback = callback(children), invokeCallback = nameSoFar === "" ? "." + getElementKey(children, 0) : nameSoFar, isArrayImpl(callback) ? (escapedPrefix = "", invokeCallback != null && (escapedPrefix = invokeCallback.replace(userProvidedKeyEscapeRegex, "$&/") + "/"), mapIntoArray(callback, array, escapedPrefix, "", function(c) {
-      return c;
-    })) : callback != null && (isValidElement(callback) && (callback = cloneAndReplaceKey(callback, escapedPrefix + (callback.key == null || children && children.key === callback.key ? "" : ("" + callback.key).replace(userProvidedKeyEscapeRegex, "$&/") + "/") + invokeCallback)), array.push(callback)), 1;
-  invokeCallback = 0;
-  var nextNamePrefix = nameSoFar === "" ? "." : nameSoFar + ":";
-  if (isArrayImpl(children))
-    for (var i = 0;i < children.length; i++)
-      nameSoFar = children[i], type = nextNamePrefix + getElementKey(nameSoFar, i), invokeCallback += mapIntoArray(nameSoFar, array, escapedPrefix, type, callback);
-  else if (i = getIteratorFn(children), typeof i === "function")
-    for (children = i.call(children), i = 0;!(nameSoFar = children.next()).done; )
-      nameSoFar = nameSoFar.value, type = nextNamePrefix + getElementKey(nameSoFar, i++), invokeCallback += mapIntoArray(nameSoFar, array, escapedPrefix, type, callback);
-  else if (type === "object") {
-    if (typeof children.then === "function")
-      return mapIntoArray(resolveThenable(children), array, escapedPrefix, nameSoFar, callback);
-    array = String(children);
-    throw Error("Objects are not valid as a React child (found: " + (array === "[object Object]" ? "object with keys {" + Object.keys(children).join(", ") + "}" : array) + "). If you meant to render a collection of children, use an array instead.");
-  }
-  return invokeCallback;
-}
-function mapChildren(children, func, context) {
-  if (children == null)
-    return children;
-  var result = [], count = 0;
-  mapIntoArray(children, result, "", "", function(child) {
-    return func.call(context, child, count++);
-  });
-  return result;
-}
-function lazyInitializer(payload) {
-  if (payload._status === -1) {
-    var ctor = payload._result;
-    ctor = ctor();
-    ctor.then(function(moduleObject) {
-      if (payload._status === 0 || payload._status === -1)
-        payload._status = 1, payload._result = moduleObject;
-    }, function(error) {
-      if (payload._status === 0 || payload._status === -1)
-        payload._status = 2, payload._result = error;
-    });
-    payload._status === -1 && (payload._status = 0, payload._result = ctor);
+    return one === another;
   }
-  if (payload._status === 1)
-    return payload._result.default;
-  throw payload._result;
-}
-function noop() {}
-var REACT_ELEMENT_TYPE, REACT_PORTAL_TYPE, REACT_FRAGMENT_TYPE, REACT_STRICT_MODE_TYPE, REACT_PROFILER_TYPE, REACT_CONSUMER_TYPE, REACT_CONTEXT_TYPE, REACT_FORWARD_REF_TYPE, REACT_SUSPENSE_TYPE, REACT_MEMO_TYPE, REACT_LAZY_TYPE, MAYBE_ITERATOR_SYMBOL, ReactNoopUpdateQueue, assign, emptyObject, pureComponentPrototype, isArrayImpl, ReactSharedInternals, hasOwnProperty, userProvidedKeyEscapeRegex, reportGlobalError, $Children, $Component, $Fragment, $Profiler, $PureComponent, $StrictMode, $Suspense, $__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, $__COMPILER_RUNTIME, $cache = function(fn) {
-  return function() {
-    return fn.apply(null, arguments);
-  };
-}, $cloneElement = function(element, config, children) {
-  if (element === null || element === undefined)
-    throw Error("The argument must be a React element, but you passed " + element + ".");
-  var props = assign({}, element.props), key = element.key, owner = undefined;
-  if (config != null)
-    for (propName in config.ref !== undefined && (owner = undefined), config.key !== undefined && (key = "" + config.key), config)
-      !hasOwnProperty.call(config, propName) || propName === "key" || propName === "__self" || propName === "__source" || propName === "ref" && config.ref === undefined || (props[propName] = config[propName]);
-  var propName = arguments.length - 2;
-  if (propName === 1)
-    props.children = children;
-  else if (1 < propName) {
-    for (var childArray = Array(propName), i = 0;i < propName; i++)
-      childArray[i] = arguments[i + 2];
-    props.children = childArray;
+  value = Field.emptyValue;
+  constructor(value) {
+    this.value = Field.isEmpty(value) ? Field.emptyValue : value;
   }
-  return ReactElement(element.type, key, undefined, undefined, owner, props);
-}, $createContext = function(defaultValue) {
-  defaultValue = {
-    $$typeof: REACT_CONTEXT_TYPE,
-    _currentValue: defaultValue,
-    _currentValue2: defaultValue,
-    _threadCount: 0,
-    Provider: null,
-    Consumer: null
-  };
-  defaultValue.Provider = defaultValue;
-  defaultValue.Consumer = {
-    $$typeof: REACT_CONSUMER_TYPE,
-    _context: defaultValue
-  };
-  return defaultValue;
-}, $createElement = function(type, config, children) {
-  var propName, props = {}, key = null;
-  if (config != null)
-    for (propName in config.key !== undefined && (key = "" + config.key), config)
-      hasOwnProperty.call(config, propName) && propName !== "key" && propName !== "__self" && propName !== "__source" && (props[propName] = config[propName]);
-  var childrenLength = arguments.length - 2;
-  if (childrenLength === 1)
-    props.children = children;
-  else if (1 < childrenLength) {
-    for (var childArray = Array(childrenLength), i = 0;i < childrenLength; i++)
-      childArray[i] = arguments[i + 2];
-    props.children = childArray;
+  get() {
+    return this.value;
   }
-  if (type && type.defaultProps)
-    for (propName in childrenLength = type.defaultProps, childrenLength)
-      props[propName] === undefined && (props[propName] = childrenLength[propName]);
-  return ReactElement(type, key, undefined, undefined, null, props);
-}, $createRef = function() {
-  return { current: null };
-}, $forwardRef = function(render) {
-  return { $$typeof: REACT_FORWARD_REF_TYPE, render };
-}, $isValidElement, $lazy = function(ctor) {
-  return {
-    $$typeof: REACT_LAZY_TYPE,
-    _payload: { _status: -1, _result: ctor },
-    _init: lazyInitializer
-  };
-}, $memo = function(type, compare) {
-  return {
-    $$typeof: REACT_MEMO_TYPE,
-    type,
-    compare: compare === undefined ? null : compare
-  };
-}, $startTransition = function(scope) {
-  var prevTransition = ReactSharedInternals.T, currentTransition = {};
-  ReactSharedInternals.T = currentTransition;
-  try {
-    var returnValue = scope(), onStartTransitionFinish = ReactSharedInternals.S;
-    onStartTransitionFinish !== null && onStartTransitionFinish(currentTransition, returnValue);
-    typeof returnValue === "object" && returnValue !== null && typeof returnValue.then === "function" && returnValue.then(noop, reportGlobalError);
-  } catch (error) {
-    reportGlobalError(error);
-  } finally {
-    ReactSharedInternals.T = prevTransition;
+  isEmpty() {
+    return Field.isEmpty(this.value);
   }
-}, $unstable_useCacheRefresh = function() {
-  return ReactSharedInternals.H.useCacheRefresh();
-}, $use = function(usable) {
-  return ReactSharedInternals.H.use(usable);
-}, $useActionState = function(action, initialState, permalink) {
-  return ReactSharedInternals.H.useActionState(action, initialState, permalink);
-}, $useCallback = function(callback, deps) {
-  return ReactSharedInternals.H.useCallback(callback, deps);
-}, $useContext = function(Context) {
-  return ReactSharedInternals.H.useContext(Context);
-}, $useDebugValue = function() {}, $useDeferredValue = function(value, initialValue) {
-  return ReactSharedInternals.H.useDeferredValue(value, initialValue);
-}, $useEffect = function(create, createDeps, update) {
-  var dispatcher = ReactSharedInternals.H;
-  if (typeof update === "function")
-    throw Error("useEffect CRUD overload is not enabled in this build of React.");
-  return dispatcher.useEffect(create, createDeps);
-}, $useId = function() {
-  return ReactSharedInternals.H.useId();
-}, $useImperativeHandle = function(ref, create, deps) {
-  return ReactSharedInternals.H.useImperativeHandle(ref, create, deps);
-}, $useInsertionEffect = function(create, deps) {
-  return ReactSharedInternals.H.useInsertionEffect(create, deps);
-}, $useLayoutEffect = function(create, deps) {
-  return ReactSharedInternals.H.useLayoutEffect(create, deps);
-}, $useMemo = function(create, deps) {
-  return ReactSharedInternals.H.useMemo(create, deps);
-}, $useOptimistic = function(passthrough, reducer) {
-  return ReactSharedInternals.H.useOptimistic(passthrough, reducer);
-}, $useReducer = function(reducer, initialArg, init) {
-  return ReactSharedInternals.H.useReducer(reducer, initialArg, init);
-}, $useRef = function(initialValue) {
-  return ReactSharedInternals.H.useRef(initialValue);
-}, $useState = function(initialState) {
-  return ReactSharedInternals.H.useState(initialState);
-}, $useSyncExternalStore = function(subscribe, getSnapshot, getServerSnapshot) {
-  return ReactSharedInternals.H.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-}, $useTransition = function() {
-  return ReactSharedInternals.H.useTransition();
-}, $version = "19.1.0";
-var init_react_production = __esm(() => {
-  REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element");
-  REACT_PORTAL_TYPE = Symbol.for("react.portal");
-  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
-  REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode");
-  REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-  REACT_CONSUMER_TYPE = Symbol.for("react.consumer");
-  REACT_CONTEXT_TYPE = Symbol.for("react.context");
-  REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
-  REACT_SUSPENSE_TYPE = Symbol.for("react.suspense");
-  REACT_MEMO_TYPE = Symbol.for("react.memo");
-  REACT_LAZY_TYPE = Symbol.for("react.lazy");
-  MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
-  ReactNoopUpdateQueue = {
-    isMounted: function() {
-      return false;
-    },
-    enqueueForceUpdate: function() {},
-    enqueueReplaceState: function() {},
-    enqueueSetState: function() {}
-  };
-  assign = Object.assign;
-  emptyObject = {};
-  Component.prototype.isReactComponent = {};
-  Component.prototype.setState = function(partialState, callback) {
-    if (typeof partialState !== "object" && typeof partialState !== "function" && partialState != null)
-      throw Error("takes an object of state variables to update or a function which returns an object of state variables.");
-    this.updater.enqueueSetState(this, partialState, callback, "setState");
-  };
-  Component.prototype.forceUpdate = function(callback) {
-    this.updater.enqueueForceUpdate(this, callback, "forceUpdate");
-  };
-  ComponentDummy.prototype = Component.prototype;
-  pureComponentPrototype = PureComponent.prototype = new ComponentDummy;
-  pureComponentPrototype.constructor = PureComponent;
-  assign(pureComponentPrototype, Component.prototype);
-  pureComponentPrototype.isPureReactComponent = true;
-  isArrayImpl = Array.isArray;
-  ReactSharedInternals = { H: null, A: null, T: null, S: null, V: null };
-  hasOwnProperty = Object.prototype.hasOwnProperty;
-  userProvidedKeyEscapeRegex = /\/+/g;
-  reportGlobalError = typeof reportError === "function" ? reportError : function(error) {
-    if (typeof window === "object" && typeof window.ErrorEvent === "function") {
-      var event = new window.ErrorEvent("error", {
-        bubbles: true,
-        cancelable: true,
-        message: typeof error === "object" && error !== null && typeof error.message === "string" ? String(error.message) : String(error),
-        error
-      });
-      if (!window.dispatchEvent(event))
-        return;
-    } else if (typeof process === "object" && typeof process.emit === "function") {
-      process.emit("uncaughtException", error);
-      return;
-    }
-    console.error(error);
-  };
-  $Children = {
-    map: mapChildren,
-    forEach: function(children, forEachFunc, forEachContext) {
-      mapChildren(children, function() {
-        forEachFunc.apply(this, arguments);
-      }, forEachContext);
-    },
-    count: function(children) {
-      var n = 0;
-      mapChildren(children, function() {
-        n++;
-      });
-      return n;
-    },
-    toArray: function(children) {
-      return mapChildren(children, function(child) {
-        return child;
-      }) || [];
-    },
-    only: function(children) {
-      if (!isValidElement(children))
-        throw Error("React.Children.only expected to receive a single React element child.");
-      return children;
-    }
+}
+
+// src/hooks/use-field.ts
+var useFieldStrategyEnum;
+((useFieldStrategyEnum2) => {
+  useFieldStrategyEnum2["params"] = "params";
+  useFieldStrategyEnum2["local"] = "local";
+})(useFieldStrategyEnum ||= {});
+function useField(config) {
+  const strategy = config.strategy ?? "local" /* local */;
+  const [params, setParams] = useSearchParams();
+  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);
+    _setCurrentValue(candidate.get());
   };
-  $Component = Component;
-  $Fragment = REACT_FRAGMENT_TYPE;
-  $Profiler = REACT_PROFILER_TYPE;
-  $PureComponent = PureComponent;
-  $StrictMode = REACT_STRICT_MODE_TYPE;
-  $Suspense = REACT_SUSPENSE_TYPE;
-  $__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = ReactSharedInternals;
-  $__COMPILER_RUNTIME = {
-    __proto__: null,
-    c: function(size) {
-      return ReactSharedInternals.H.useMemoCache(size);
+  useEffect(() => {
+    const current = new Field(currentValue);
+    if (strategy === "params" /* params */) {
+      if (current.isEmpty()) {
+        params.delete(config.name);
+        setParams(params);
+      } else {
+        params.set(config.name, current.get());
+        setParams(params);
+      }
     }
-  };
-  $isValidElement = isValidElement;
-});
-
-// node_modules/react/index.js
-var require_react = __commonJS((exports, module) => {
-  init_react_production();
-  if (true) {
-    module.exports = exports_react_production;
-  } else {}
-});
-
-// node_modules/react/cjs/react-jsx-runtime.production.js
-var exports_react_jsx_runtime_production = {};
-__export(exports_react_jsx_runtime_production, {
-  jsxs: () => $jsxs,
-  jsx: () => $jsx,
-  Fragment: () => $Fragment2
-});
-function jsxProd(type, config, maybeKey) {
-  var key = null;
-  maybeKey !== undefined && (key = "" + maybeKey);
-  config.key !== undefined && (key = "" + config.key);
-  if ("key" in config) {
-    maybeKey = {};
-    for (var propName in config)
-      propName !== "key" && (maybeKey[propName] = config[propName]);
-  } else
-    maybeKey = config;
-  config = maybeKey.ref;
+    if (strategy === "local" /* local */) {}
+  }, [currentValue, params, setParams, config.name, strategy]);
   return {
-    $$typeof: REACT_ELEMENT_TYPE2,
-    type,
-    key,
-    ref: config !== undefined ? config : null,
-    props: maybeKey
+    strategy,
+    defaultValue: defaultValue.get(),
+    currentValue,
+    value: Field.isEmpty(currentValue) ? "" : currentValue,
+    set: setCurrentValue,
+    handleChange: (event) => setCurrentValue(event.currentTarget.value),
+    clear: () => setCurrentValue(defaultValue.get()),
+    label: { props: { htmlFor: config.name } },
+    input: { props: { id: config.name, name: config.name } },
+    changed: !Field.compare(currentValue, defaultValue.get()),
+    unchanged: Field.compare(currentValue, defaultValue.get()),
+    empty: Field.isEmpty(currentValue)
   };
 }
-var REACT_ELEMENT_TYPE2, REACT_FRAGMENT_TYPE2, $Fragment2, $jsx, $jsxs;
-var init_react_jsx_runtime_production = __esm(() => {
-  REACT_ELEMENT_TYPE2 = Symbol.for("react.transitional.element");
-  REACT_FRAGMENT_TYPE2 = Symbol.for("react.fragment");
-  $Fragment2 = REACT_FRAGMENT_TYPE2;
-  $jsx = jsxProd;
-  $jsxs = jsxProd;
-});
-
-// node_modules/react/jsx-runtime.js
-var require_jsx_runtime = __commonJS((exports, module) => {
-  init_react_jsx_runtime_production();
-  if (true) {
-    module.exports = exports_react_jsx_runtime_production;
-  } else {}
-});
 
-// src/hooks/index.ts
-var exports_hooks = {};
-__export(exports_hooks, {
-  useToggle: () => useToggle,
-  extractUseToggle: () => extractUseToggle
-});
+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-toggle.ts
-var import_react = __toESM(require_react(), 1);
+import { useCallback, useMemo, useState as useState2 } from "react";
 function useToggle({ name, defaultValue = false }) {
-  const [on, setIsOn] = import_react.useState(defaultValue);
-  const enable = import_react.useCallback(() => setIsOn(true), []);
-  const disable = import_react.useCallback(() => setIsOn(false), []);
-  const toggle = import_react.useCallback(() => setIsOn((v) => !v), []);
-  const off = import_react.useMemo(() => !on, [on]);
-  const props = import_react.useMemo(() => ({
+  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(() => ({
     controller: {
       "aria-expanded": on ? "true" : "false",
       "aria-controls": name,
@@ -507,20 +122,69 @@ function extractUseToggle(_props) {
     rest
   };
 }
-// src/components/index.ts
-var exports_components = {};
-__export(exports_components, {
-  Button: () => Button
-});
-
-// src/components/button.tsx
-var jsx_runtime = __toESM(require_jsx_runtime(), 1);
-function Button() {
-  return /* @__PURE__ */ jsx_runtime.jsx("button", {
-    children: "Click"
-  });
+// src/services/form.ts
+class Form {
+  static inputPattern(config) {
+    const required = config.required ?? true;
+    if (config.min && !config.max)
+      return { pattern: `.{${config.min}}`, required };
+    if (config.min && config.max)
+      return { pattern: `.{${config.min},${config.max}}`, required };
+    if (!config.min && config.max)
+      return { pattern: `.{,${config.max}}`, required };
+    return { pattern: undefined, required };
+  }
+  static textareaPattern(config) {
+    const required = config.required ?? true;
+    if (config.min && !config.max)
+      return { minLength: config.min, required };
+    if (config.min && config.max)
+      return { minLength: config.min, maxLength: config.max, required };
+    if (!config.min && config.max)
+      return { maxLength: config.max, required };
+    return { required };
+  }
+}
+// src/services/rhythm.ts
+var DEFAULT_BASE_PX = 12;
+function Rhythm(base = DEFAULT_BASE_PX) {
+  return {
+    times(times) {
+      const result = base * times;
+      const dimensions = {
+        height: { height: px(result) },
+        minHeight: { minHeight: px(result) },
+        maxHeight: { maxHeight: px(result) },
+        width: { width: px(result) },
+        minWidth: { minWidth: px(result) },
+        maxWidth: { maxWidth: px(result) },
+        square: { height: px(result), width: px(result) }
+      };
+      const style = {
+        height: { style: { height: px(result) } },
+        minHeight: { style: { minHeight: px(result) } },
+        maxHeight: { style: { maxHeight: px(result) } },
+        width: { style: { width: px(result) } },
+        minWidth: { style: { minWidth: px(result) } },
+        maxWidth: { style: { maxWidth: px(result) } },
+        square: { style: { height: px(result), width: px(result) } }
+      };
+      return { px: px(result), raw: result, style, ...dimensions };
+    }
+  };
+}
+function px(number) {
+  return `${number}px`;
 }
 export {
-  exports_hooks as hooks,
-  exports_components as Components
+  useToggle,
+  useFieldStrategyEnum,
+  useField,
+  extractUseToggle,
+  Rhythm,
+  LocalFields,
+  Form,
+  Fields,
+  Field,
+  Button
 };

package/dist/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/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/services/index.d.ts

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

package/dist/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,26 +1,23 @@
 {
   "name": "@bgord/ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
   "exports": {
     ".": {
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
       "types": "./dist/index.d.ts"
     }
   },
+  "files": [
+    "dist"
+  ],
   "peerDependencies": {
     "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react-dom": "19.1.0",
+    "react-router": "7.6.3"
   },
   "scripts": {
-    "build:js": "bun build src/index.ts --outdir dist",
+    "build:js": "bun build src/index.ts --format esm --outdir dist --packages external --external react --external react-dom --external react/jsx-runtime --external react-router",
     "build:types": "bunx tsc --emitDeclarationOnly",
     "build": "bun run build:js && bun run build:types"
   },
@@ -28,7 +25,21 @@
     "access": "public"
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "18.0.1",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.3.0",
+    "@testing-library/user-event": "14.6.1",
+    "@types/bun": "1.2.18",
     "@types/react": "19.1.8",
-    "@types/react-dom": "19.1.6"
+    "@types/react-dom": "19.1.6",
+    "@biomejs/biome": "2.0.6",
+    "@commitlint/cli": "19.8.1",
+    "@commitlint/config-conventional": "19.8.1",
+    "cspell": "9.1.3",
+    "knip": "5.61.3",
+    "lefthook": "1.11.16",
+    "only-allow": "1.2.1",
+    "shellcheck": "3.1.0"
   }
 }