@payfit/unity-components 2.46.12 → 2.46.13

package/dist/esm/hooks/use-form.d.ts

@@ -1,50 +0,0 @@
-import { StandardSchemaV1 } from '@standard-schema/spec';
-import { JSX, PropsWithChildren } from 'react';
-import { UseFormProps as UseHookFormProps, UseFormReturn as UseHookFormReturn } from 'react-hook-form';
-import { FormFieldProps } from '../components/form-field/FormField.js';
-import { FormProps } from '../components/form/Form.js';
-import { Schema } from './use-form.types.js';
-export type UseUnityFormReturn<TSchema extends Schema> = {
-    methods: UseHookFormReturn<StandardSchemaV1.InferInput<TSchema>, any, StandardSchemaV1.InferOutput<TSchema>>;
-    Form: (props: Omit<FormProps<TSchema, StandardSchemaV1.InferInput<TSchema>, StandardSchemaV1.InferOutput<TSchema>>, 'form' | 'schema'>) => JSX.Element;
-    FormField: (props: PropsWithChildren<Omit<FormFieldProps<StandardSchemaV1.InferOutput<TSchema>>, 'control'>>) => JSX.Element;
-};
-/**
- * A hook to create `Form` and `FormField` components that are bound to a specific schema definition and form controller. The resulting components will have full type-safety based on the provided schema type.
- * @param `schema` a Zod schema definition to validate the form data, {@link [Zod](https://zod.dev)}
- * @param `options` the options to pass to the `react-hook-form` hook. See the official documentation for more details. {@link [React Hook Form](https://react-hook-form.com/api/useform)}
- * @returns an object containing the bounded  `Form` and `FormField` components, as well as the form controller methods {@link UseUnityFormReturn}
- * @example
- * ```tsx
- * import { useUnityForm } from '@payfit/unity-components'
- * import * as z from 'zod'
- *
- * const schema = z.object({
- *  foo: z.string().min(3),
- *  bar: z.string().optional(),
- * })
- *
- * function DemoForm() {
- *   const { Form, FormField } = useUnityForm(schema, {
- *     defaultValues: { foo: 'Hello world', bar: '' },
- *   })
- *
- *   return (
- *    <Form action={() => ...}>
- *      <FormField name="foo" type="text">
- *        // ...
- *      </FormField>
- *      // Type Error: "baz" is not assignable to "foo" | "bar".
- *      <FormField name="baz" type="text">
- *        // ...
- *      </FormField>
- *    </Form>
- *   )
- * }
- * ```
- * @remarks
- * [API]() • [Demo]()
- * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
- * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
- */
-export declare function useUnityForm<TSchema extends Schema>(schema: TSchema, options?: Omit<UseHookFormProps<StandardSchemaV1.InferInput<TSchema>, any, StandardSchemaV1.InferOutput<TSchema>>, 'resolver'>): UseUnityFormReturn<TSchema>;

package/dist/esm/hooks/use-form.js

@@ -1,32 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useMemo as n } from "react";
-import { standardSchemaResolver as l } from "@hookform/resolvers/standard-schema";
-import { useForm as c } from "react-hook-form";
-import { FormField as a } from "../components/form-field/FormField.js";
-import { Form as u } from "../components/form/Form.js";
-function S(m, i = {
-  mode: "onTouched",
-  reValidateMode: "onChange"
-}) {
-  const r = c({
-    ...i,
-    resolver: l(m)
-  }), d = n(() => {
-    const o = (e) => /* @__PURE__ */ t(u, { ...e, form: r, schema: m, children: e.children });
-    return o.displayName = "FormWithSchema", o;
-  }, [r, m]), F = n(() => {
-    const o = (e) => (
-      // @ts-expect-error: REACT-18-MIGRATION
-      /* @__PURE__ */ t(a, { ...e, control: r.control, children: e.children })
-    );
-    return o.displayName = "FormFieldWithSchema", o;
-  }, [r]);
-  return {
-    methods: r,
-    Form: d,
-    FormField: F
-  };
-}
-export {
-  S as useUnityForm
-};

package/dist/esm/hooks/use-form.types.d.ts

@@ -1,3 +0,0 @@
-import { StandardSchemaV1 } from '@standard-schema/spec';
-export type TFormValues = Record<string, unknown>;
-export type Schema = StandardSchemaV1<TFormValues>;

package/dist/esm/hooks/use-has-scroll.d.ts

@@ -1,71 +0,0 @@
-import { RefObject } from 'react';
-import { ScrollDetectionResult, ScrollDetectionStrategy } from '../utils/scroll-detection.js';
-/**
- * Configuration options for the useHasScroll hook
- */
-export interface UseHasScrollOptions {
-    /**
-     * Detection strategy to use:
-     * - 'size': Compare scrollHeight/scrollWidth vs clientHeight/clientWidth (default)
-     *   Use when you need to detect actual scrollable content
-     * - 'style': Check computed overflow styles (overflow, overflowX, overflowY)
-     *   Use when you need to check if element is configured for scrolling
-     * - 'both': Element must satisfy both size and style conditions
-     *   Use for strict validation that element both has overflow style AND exceeds bounds
-     * @default 'size'
-     */
-    strategy?: ScrollDetectionStrategy;
-    /**
-     * Debounce delay in milliseconds for scroll detection updates
-     * Higher values improve performance but reduce responsiveness
-     * Set to 0 to disable debouncing
-     * @default 100
-     */
-    debounceMs?: number;
-    /**
-     * Watch for DOM mutations (content changes) in the element
-     * Disable for static content to improve performance
-     * @default true
-     */
-    watchMutations?: boolean;
-    /**
-     * Watch for element resize events
-     * Disable if element size is fixed to improve performance
-     * @default true
-     */
-    watchResize?: boolean;
-}
-/**
- * React hook to detect if an element has scrollable content
- * This hook monitors a DOM element and determines whether it has scrollable content
- * using configurable detection strategies. It automatically updates when the element's
- * size changes or its content is modified.
- * @param {RefObject<HTMLElement>} ref - React ref to the element to monitor
- * @param {UseHasScrollOptions} options - Configuration options
- * @returns {ScrollDetectionResult} Current scroll detection state
- * @example
- * ```tsx
- * // Basic usage with default size-based detection
- * const containerRef = useRef<HTMLDivElement>(null);
- * const { hasVerticalScroll } = useHasScroll(containerRef);
- * ```
- * @example
- * ```tsx
- * // Style-based detection
- * const { hasVerticalScroll } = useHasScroll(containerRef, { strategy: 'style' });
- * ```
- * @example
- * ```tsx
- * // Strict detection with both methods
- * const { hasVerticalScroll } = useHasScroll(containerRef, { strategy: 'both' });
- * ```
- * @example
- * ```tsx
- * // Performance optimized for static content
- * const scrollState = useHasScroll(containerRef, {
- *   watchMutations: false,
- *   debounceMs: 0
- * });
- * ```
- */
-export declare function useHasScroll(ref: RefObject<HTMLElement>, options?: UseHasScrollOptions): ScrollDetectionResult;

package/dist/esm/hooks/use-has-scroll.js

@@ -1,75 +0,0 @@
-import { useState as p, useCallback as z, useLayoutEffect as F, useEffect as y } from "react";
-import { detectScroll as A } from "../utils/scroll-detection.js";
-function E(r, b = {}) {
-  const {
-    strategy: a = "size",
-    debounceMs: u = 100,
-    watchMutations: i = !0,
-    watchResize: m = !0
-  } = b, [d, v] = p({
-    hasVerticalScroll: !1,
-    hasHorizontalScroll: !1,
-    hasAnyScroll: !1,
-    detectionMethod: {
-      size: { vertical: !1, horizontal: !1 },
-      style: { vertical: !1, horizontal: !1 }
-    }
-  }), e = z(() => {
-    const s = r.current;
-    if (!s)
-      return;
-    const o = A(s, a);
-    v(o);
-  }, [r, a]);
-  return F(() => {
-    if (!r.current) return;
-    e();
-    const o = requestAnimationFrame(() => {
-      e();
-    });
-    return () => {
-      cancelAnimationFrame(o);
-    };
-  }, [e]), y(() => {
-    let s = !0, o;
-    const S = () => {
-      const n = r.current;
-      if (!n) return;
-      let c;
-      const h = () => {
-        clearTimeout(c), c = setTimeout(e, u);
-      };
-      e(), requestAnimationFrame(() => {
-        e();
-      });
-      const l = [];
-      if (m) {
-        const t = new ResizeObserver(h);
-        t.observe(n), l.push(t);
-      }
-      if (i) {
-        const t = new MutationObserver(h);
-        t.observe(n, {
-          childList: !0,
-          subtree: !0,
-          characterData: !0,
-          attributes: !0,
-          attributeFilter: ["style", "class"]
-        }), l.push(t);
-      }
-      o = () => {
-        clearTimeout(c), l.forEach((t) => {
-          t.disconnect();
-        });
-      };
-    }, f = () => {
-      s && (r.current ? S() : requestAnimationFrame(f));
-    };
-    return f(), () => {
-      s = !1, o?.();
-    };
-  }, [r, e, u, m, i]), d;
-}
-export {
-  E as useHasScroll
-};

package/dist/esm/hooks/use-id.d.ts

@@ -1,2 +0,0 @@
-declare function useId(): string;
-export default useId;

package/dist/esm/hooks/use-id.js

@@ -1,28 +0,0 @@
-import { useState as o } from "react";
-function* a(n = Date.now()) {
-  let t = n;
-  for (; ; )
-    t = (t * 1664525 + 1013904223) % 2 ** 32, yield t / 2 ** 32;
-}
-const i = a();
-function l(n) {
-  const t = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  let e = "";
-  for (let r = 0; r < n; r++)
-    e += t.charAt(Math.floor(i.next().value * t.length));
-  return e;
-}
-let u = 0;
-function c() {
-  return u++;
-}
-function d() {
-  const [n] = o(() => {
-    const t = c().toString(36), e = l(4);
-    return `:r${t}:${e}`;
-  });
-  return n;
-}
-export {
-  d as default
-};

package/dist/esm/hooks/use-media-query.d.ts

@@ -1,8 +0,0 @@
-/**
- * An hook to create and listen to media query on the fly.
- * For performance consideration, whenever possible, consume it globally.
- * @param query A query representing the media to listen
- * @param fallbackValue A default value used as a fallback in unsupported media query environment (such as server)
- * @returns Matching state: true if the document matches the media query, false otherwise
- */
-export declare function useMediaQuery(query: string, fallbackValue?: boolean): boolean;

package/dist/esm/hooks/use-media-query.js

@@ -1,19 +0,0 @@
-import { useMemo as u, useState as i, useCallback as o, useLayoutEffect as d } from "react";
-import { isBrowser as M } from "../utils/platform.js";
-const m = (t) => M() ? window.matchMedia(t) : null, a = (t) => t.matches;
-function l(t, n = !1) {
-  const e = u(() => m(t), [t]), [s, c] = i(
-    e ? a(e) : n
-  ), r = o(() => {
-    e && c(a(e));
-  }, [e]);
-  return d(() => {
-    if (e)
-      return e.addEventListener("change", r), () => {
-        e.removeEventListener("change", r);
-      };
-  }), s;
-}
-export {
-  l as useMediaQuery
-};

package/dist/esm/hooks/use-resizable.d.ts

@@ -1,13 +0,0 @@
-import { RefObject } from 'react';
-interface UseResizableOptions {
-    minWidth?: number;
-    minHeight?: number;
-    isDisabled?: boolean;
-}
-interface UseResizableReturn {
-    containerRef: RefObject<HTMLDivElement>;
-    handleResizeStart: (e: React.MouseEvent) => void;
-    isResizing: boolean;
-}
-export declare function useResizable({ isDisabled, minWidth, minHeight, }?: UseResizableOptions): UseResizableReturn;
-export {};

package/dist/esm/hooks/use-resizable.js

@@ -1,50 +0,0 @@
-import { useRef as R, useState as z, useEffect as g } from "react";
-function x({
-  isDisabled: c = !1,
-  minWidth: i,
-  minHeight: a
-} = {}) {
-  const e = R(null), [t, o] = z({
-    isResizing: !1,
-    startX: 0,
-    startY: 0,
-    startWidth: 0,
-    startHeight: 0
-  }), l = (s) => {
-    if (c) return;
-    s.preventDefault();
-    const r = e.current?.querySelector("textarea");
-    !e.current || !r || o({
-      isResizing: !0,
-      startX: s.clientX,
-      startY: s.clientY,
-      startWidth: e.current.offsetWidth,
-      startHeight: r.offsetHeight
-    });
-  };
-  return g(() => {
-    if (!t.isResizing) return;
-    const s = (n) => {
-      if (!e.current) return;
-      const u = e.current.querySelector("textarea");
-      if (!u) return;
-      const d = n.clientX - t.startX, f = n.clientY - t.startY, h = Math.max(t.startWidth + d, i ?? 0), m = Math.max(
-        t.startHeight + f,
-        a ?? 0
-      );
-      e.current.style.width = `${h}px`, u.style.height = `${m}px`;
-    }, r = () => {
-      o((n) => ({ ...n, isResizing: !1 }));
-    };
-    return document.addEventListener("mousemove", s), document.addEventListener("mouseup", r), () => {
-      document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", r);
-    };
-  }, [t, i, a]), {
-    containerRef: e,
-    handleResizeStart: l,
-    isResizing: t.isResizing
-  };
-}
-export {
-  x as useResizable
-};

package/dist/esm/hooks/use-responsive-value.d.ts

@@ -1,11 +0,0 @@
-import { Breakpoint } from './use-breakpoint-listener.js';
-/**
- * A value that can be specified per breakpoint.
- * At minimum, `base` (the mobile-first default) must be provided.
- * @example
- * { base: 1, md: 2, lg: 3 }
- */
-export type ResponsiveValue<TValue> = {
-    base: TValue;
-} & Partial<Record<Exclude<Breakpoint, 'xs'>, TValue>>;
-export declare function useResponsiveValue<TValue>(value: TValue | ResponsiveValue<TValue>): TValue;

package/dist/esm/hooks/use-responsive-value.js

@@ -1,29 +0,0 @@
-import { useBreakpointListener as s } from "./use-breakpoint-listener.js";
-function p(n) {
-  return typeof n == "object" && n !== null && "base" in n;
-}
-const i = [
-  "sm",
-  "md",
-  "lg",
-  "xl"
-];
-function c(n) {
-  const r = s();
-  if (!p(n))
-    return n;
-  if (r === "xs")
-    return n.base;
-  if (r in n)
-    return n[r];
-  const o = i.indexOf(r);
-  for (let t = o; t >= 0; t--) {
-    const e = i[t];
-    if (e && e in n)
-      return n[e];
-  }
-  return n.base;
-}
-export {
-  c as useResponsiveValue
-};

package/dist/esm/hooks/use-scroll-direction.d.ts

@@ -1,13 +0,0 @@
-import { MutableRefObject, RefObject } from 'react';
-export type ScrollDirection = 'up' | 'down' | 'idle';
-/**
- * Detects the scroll direction from the nearest scrollable ancestor.
- * @param scrollContainerRef - Optional explicit scroll container. If omitted, the
- *   hook walks the DOM from the returned `elementRef` to find the nearest scrollable
- *   ancestor, falling back to `window`.
- * @returns A tuple of `[elementRef, direction]`. Attach `elementRef` to the
- *   component's root element to enable auto-detection.
- * @remarks
- * - When `prefers-reduced-motion` is active, direction is always `'idle'`.
- */
-export declare function useScrollDirection(scrollContainerRef?: RefObject<Element | null>): [MutableRefObject<Element | null>, ScrollDirection];

package/dist/esm/hooks/use-scroll-direction.js

@@ -1,56 +0,0 @@
-import { useState as m, useRef as s, useEffect as a } from "react";
-import { useMediaQuery as S } from "./use-media-query.js";
-const f = 10;
-function E(r) {
-  let e = r.parentElement;
-  for (; e; ) {
-    const c = getComputedStyle(e).overflowY;
-    if (c === "auto" || c === "scroll")
-      return e;
-    e = e.parentElement;
-  }
-  return null;
-}
-function p(r) {
-  return r === window ? window.scrollY : r.scrollTop;
-}
-function h(r) {
-  if (r === window)
-    return window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 1;
-  const e = r;
-  return e.scrollTop + e.clientHeight >= e.scrollHeight - 1;
-}
-function T(r) {
-  const e = S("(prefers-reduced-motion: reduce)"), [c, u] = m("idle"), i = s(null), l = s(0), t = s(0);
-  return a(() => {
-    if (e) {
-      u("idle");
-      return;
-    }
-    const o = (() => {
-      if (r?.current) return r.current;
-      if (i.current) {
-        const n = E(i.current);
-        if (n) return n;
-      }
-      return window;
-    })();
-    l.current = p(o), t.current = 0;
-    const d = () => {
-      const n = p(o);
-      if (n < 0) return;
-      if (h(o)) {
-        t.current = 0, l.current = n, u("up");
-        return;
-      }
-      const w = n - l.current;
-      t.current += w, l.current = n, t.current > f ? (t.current = 0, u("down")) : t.current < -f && (t.current = 0, u("up"));
-    };
-    return o.addEventListener("scroll", d, { passive: !0 }), () => {
-      o.removeEventListener("scroll", d);
-    };
-  }, [e, r]), [i, e ? "idle" : c];
-}
-export {
-  T as useScrollDirection
-};