@graphprotocol/gds-react 0.0.1

package/dist/hooks/useCSSProp.d.ts

@@ -0,0 +1,10 @@
+import { type Ref, type RefCallback } from 'react';
+import { type ComponentCSSPropsConfig, type CSSPropType, type GDSComponent } from '@graphprotocol/gds-css';
+/**
+ * Returns a `ref` to set on an element, and an async function to get the current value of a CSS
+ * prop from said element (or `null` if we can't access the DOM, e.g. on the server).
+ */
+export declare function useCSSProp<C extends GDSComponent, P extends keyof ComponentCSSPropsConfig<C> & string>(component: C, propName: P, options?: {
+    ref?: Ref<HTMLElement>;
+}): readonly [RefCallback<HTMLElement> | null, () => Promise<CSSPropType<ComponentCSSPropsConfig<C>[P]> | null>];
+//# sourceMappingURL=useCSSProp.d.ts.map

package/dist/hooks/useCSSProp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCSSProp.d.ts","sourceRoot":"","sources":["../../src/hooks/useCSSProp.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,GAAG,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAA;AAGvE,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,WAAW,EAChB,KAAK,YAAY,EAClB,MAAM,wBAAwB,CAAA;AAI/B;;;GAGG;AACH,wBAAgB,UAAU,CACxB,CAAC,SAAS,YAAY,EACtB,CAAC,SAAS,MAAM,uBAAuB,CAAC,CAAC,CAAC,GAAG,MAAM,EACnD,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,OAAO,GAAE;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;CAAO,gHAiBpE"}

package/dist/hooks/useCSSProp.js

@@ -0,0 +1,24 @@
+import { useCallback, useRef } from 'react';
+import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';
+import { parseCSSPropValue, } from '@graphprotocol/gds-css';
+import { styleScheduler } from "../utils/styleScheduler.js";
+/**
+ * Returns a `ref` to set on an element, and an async function to get the current value of a CSS
+ * prop from said element (or `null` if we can't access the DOM, e.g. on the server).
+ */
+export function useCSSProp(component, propName, options = {}) {
+    const { ref: passedRef } = options;
+    const elementRef = useRef(null);
+    const callbackRef = useMergedRefs(elementRef, passedRef);
+    const prop = component.getCSSPropByName(propName);
+    const getCSSProp = useCallback(async () => {
+        if (typeof window === 'undefined' || !elementRef.current)
+            return null;
+        const element = elementRef.current;
+        const computedStyle = await styleScheduler.getComputedStyle(element);
+        const rawValue = computedStyle.getPropertyValue(`--gds-${component.kebabName}-${prop.kebabName}`);
+        return parseCSSPropValue(prop, rawValue);
+    }, [component, prop]);
+    return [callbackRef, getCSSProp];
+}
+//# sourceMappingURL=useCSSProp.js.map

package/dist/hooks/useCSSProp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCSSProp.js","sourceRoot":"","sources":["../../src/hooks/useCSSProp.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAA8B,MAAM,OAAO,CAAA;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAA;AAEvE,OAAO,EACL,iBAAiB,GAIlB,MAAM,wBAAwB,CAAA;AAE/B,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAE3D;;;GAGG;AACH,MAAM,UAAU,UAAU,CAGxB,SAAY,EAAE,QAAW,EAAE,UAAsC,EAAE;IACnE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,OAAO,CAAA;IAClC,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAA;IAC5C,MAAM,WAAW,GAAoC,aAAa,CAAC,UAAU,EAAE,SAAS,CAAC,CAAA;IACzF,MAAM,IAAI,GAAG,SAAS,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAA;IAEjD,MAAM,UAAU,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACxC,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,CAAC,UAAU,CAAC,OAAO;YAAE,OAAO,IAAI,CAAA;QACrE,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAA;QAClC,MAAM,aAAa,GAAG,MAAM,cAAc,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAA;QACpE,MAAM,QAAQ,GAAG,aAAa,CAAC,gBAAgB,CAC7C,SAAS,SAAS,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,EAAE,CACjD,CAAA;QACD,OAAO,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAA+C,CAAA;IACxF,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAA;IAErB,OAAO,CAAC,WAAW,EAAE,UAAU,CAAU,CAAA;AAC3C,CAAC"}

package/dist/hooks/useCSSProps.d.ts

@@ -0,0 +1,27 @@
+import type { Ref } from 'react';
+import { type ComponentCSSPropsConfig, type CSSPropType, type GDSComponent } from '@graphprotocol/gds-css';
+export type PassedValues<C extends GDSComponent> = {
+    [K in keyof ComponentCSSPropsConfig<C>]?: CSSPropType<ComponentCSSPropsConfig<C>[K]> | undefined;
+};
+export type PropValues<P extends PassedValues<GDSComponent>> = {
+    [K in keyof P]: NonNullable<P[K]>;
+};
+/**
+ * Hook to observe and track CSS prop values from the DOM. Returns a callback ref, a map of prop
+ * values that updates when CSS properties change, and metadata about each prop.
+ */
+export declare function useCSSProps<C extends GDSComponent, P extends PassedValues<C>>(component: C, passedValues: P, options?: {
+    ref?: Ref<HTMLElement> | undefined;
+    disabled?: boolean;
+}): readonly [import("react").RefCallback<HTMLElement>, PropValues<P>, {
+    name: `${Exclude<keyof P, symbol>}`;
+    passedValue: Required<P>[`${Exclude<keyof P, symbol>}`];
+    cssProp: import("@graphprotocol/gds-css").CSSPropDefinition & {
+        readonly name: string;
+        readonly kebabName: string;
+        readonly initialValue: string | number | boolean;
+    };
+    cssProperty: string;
+    polyfillAttribute: string;
+}[]];
+//# sourceMappingURL=useCSSProps.d.ts.map

package/dist/hooks/useCSSProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCSSProps.d.ts","sourceRoot":"","sources":["../../src/hooks/useCSSProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAGhC,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,WAAW,EAChB,KAAK,YAAY,EAClB,MAAM,wBAAwB,CAAA;AAM/B,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,YAAY,IAAI;KAChD,CAAC,IAAI,MAAM,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS;CACjG,CAAA;AAED,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,YAAY,CAAC,YAAY,CAAC,IAAI;KAC5D,CAAC,IAAI,MAAM,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAClC,CAAA;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,YAAY,EAAE,CAAC,SAAS,YAAY,CAAC,CAAC,CAAC,EAC3E,SAAS,EAAE,CAAC,EACZ,YAAY,EAAE,CAAC,EACf,OAAO,GAAE;IACP,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,GAAG,SAAS,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACd;;;;;;;;;;KA4CP"}

package/dist/hooks/useCSSProps.js

@@ -0,0 +1,39 @@
+import { objectEntries } from 'ts-extras';
+import { parseCSSPropValue, } from '@graphprotocol/gds-css';
+import { useMapWithInit } from "./useMapWithInit.js";
+import { useRefWithInit } from "./useRefWithInit.js";
+import { useStyleObserver } from "./useStyleObserver.js";
+/**
+ * Hook to observe and track CSS prop values from the DOM. Returns a callback ref, a map of prop
+ * values that updates when CSS properties change, and metadata about each prop.
+ */
+export function useCSSProps(component, passedValues, options = {}) {
+    const { ref, disabled = false } = options;
+    const props = useRefWithInit(() => objectEntries(passedValues).map(([propName, passedValue]) => {
+        const cssProp = component.getCSSPropByName(propName);
+        return {
+            name: propName,
+            passedValue,
+            cssProp,
+            cssProperty: `--gds-${component.kebabName}-${cssProp.kebabName}`,
+            polyfillAttribute: `data-gds-prop-polyfill-${cssProp.kebabName}`,
+        };
+    })).current;
+    const propValues = useMapWithInit(() => props.map((prop) => {
+        // Using the initial value for missing passed values could be wrong because it can be overridden in CSS, but it's just for the first render
+        const initialValue = prop.passedValue !== undefined ? prop.passedValue : prop.cssProp.initialValue;
+        return [prop.name, initialValue];
+    }));
+    const cssProperties = useRefWithInit(() => props.map((prop) => prop.cssProperty)).current;
+    const callbackRef = useStyleObserver(cssProperties, (records) => {
+        for (const record of records) {
+            const prop = props.find((prop) => prop.cssProperty === record.property);
+            const value = parseCSSPropValue(prop.cssProp, record.value);
+            if (propValues.get(prop.name) !== value) {
+                propValues.set(prop.name, value);
+            }
+        }
+    }, [], { ...(ref !== undefined && { ref }), immediate: true, disabled });
+    return [callbackRef, Object.fromEntries(propValues), props];
+}
+//# sourceMappingURL=useCSSProps.js.map

package/dist/hooks/useCSSProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCSSProps.js","sourceRoot":"","sources":["../../src/hooks/useCSSProps.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAEzC,OAAO,EACL,iBAAiB,GAIlB,MAAM,wBAAwB,CAAA;AAE/B,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAUxD;;;GAGG;AACH,MAAM,UAAU,WAAW,CACzB,SAAY,EACZ,YAAe,EACf,UAGI,EAAE;IAEN,MAAM,EAAE,GAAG,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,OAAO,CAAA;IAEzC,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,EAAE,CAChC,aAAa,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE,EAAE;QAC1D,MAAM,OAAO,GAAG,SAAS,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAA;QACpD,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,WAAW;YACX,OAAO;YACP,WAAW,EAAE,SAAS,SAAS,CAAC,SAAS,IAAI,OAAO,CAAC,SAAS,EAAE;YAChE,iBAAiB,EAAE,0BAA0B,OAAO,CAAC,SAAS,EAAE;SACjE,CAAA;IACH,CAAC,CAAC,CACH,CAAC,OAAO,CAAA;IAET,MAAM,UAAU,GAAG,cAAc,CAAC,GAAG,EAAE,CACrC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACjB,2IAA2I;QAC3I,MAAM,YAAY,GAChB,IAAI,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAA;QAC/E,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAA;IAClC,CAAC,CAAC,CACH,CAAA;IAED,MAAM,aAAa,GAAG,cAAc,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAA;IAEzF,MAAM,WAAW,GAAG,gBAAgB,CAClC,aAAa,EACb,CAAC,OAAO,EAAE,EAAE;QACV,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;YAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC,QAAQ,CAAE,CAAA;YACxE,MAAM,KAAK,GAAG,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,CAAA;YAC3D,IAAI,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC;gBACxC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;YAClC,CAAC;QACH,CAAC;IACH,CAAC,EACD,EAAE,EACF,EAAE,GAAG,CAAC,GAAG,KAAK,SAAS,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,CACjE,CAAA;IAED,OAAO,CAAC,WAAW,EAAE,MAAM,CAAC,WAAW,CAAC,UAAU,CAAkB,EAAE,KAAK,CAAU,CAAA;AACvF,CAAC"}

package/dist/hooks/useCSSPropsPolyfill.d.ts

@@ -0,0 +1,21 @@
+import { type Ref, type RefCallback } from 'react';
+import { type ComponentCSSPropsConfig, type CSSPropsConfig, type CSSPropType, type GDSComponent } from '@graphprotocol/gds-css';
+import { type PassedValues, type PropValues } from './useCSSProps.ts';
+type ExtractPolyfillValues<P extends CSSPropsConfig> = {
+    [K in keyof P as P[K]['type'] extends 'values' ? K : never]: CSSPropType<P[K]> | undefined;
+};
+type PassedPolyfillValues<C extends GDSComponent> = keyof ExtractPolyfillValues<ComponentCSSPropsConfig<C>> extends never ? never : ExtractPolyfillValues<ComponentCSSPropsConfig<C>>;
+type ReturnedPropValues<C extends GDSComponent, R> = R extends true ? PropValues<PassedPolyfillValues<C>> : R extends PassedValues<C> ? PropValues<R> : never;
+/**
+ * This hook should be called by components with CSS props of type `values`, for the `prop-*`
+ * utility classes to work in browsers that don't support style queries (Firefox).
+ */
+export declare function useCSSPropsPolyfill<C extends GDSComponent>(component: C, passedValues: PassedPolyfillValues<C>, options?: {
+    ref?: Ref<HTMLElement> | undefined;
+}): readonly [RefCallback<HTMLElement>, Record<string, string>];
+export declare function useCSSPropsPolyfill<C extends GDSComponent, R extends PassedValues<C> | true>(component: C, passedValues: PassedPolyfillValues<C>, options: {
+    ref?: Ref<HTMLElement> | undefined;
+    returnPropValues: R;
+}): readonly [RefCallback<HTMLElement>, Record<string, string>, ReturnedPropValues<C, R>];
+export {};
+//# sourceMappingURL=useCSSPropsPolyfill.d.ts.map

package/dist/hooks/useCSSPropsPolyfill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCSSPropsPolyfill.d.ts","sourceRoot":"","sources":["../../src/hooks/useCSSPropsPolyfill.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,GAAG,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAA;AAE3E,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,YAAY,EAClB,MAAM,wBAAwB,CAAA;AAE/B,OAAO,EAAe,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAGlF,KAAK,qBAAqB,CAAC,CAAC,SAAS,cAAc,IAAI;KACpD,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,QAAQ,GAAG,CAAC,GAAG,KAAK,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS;CAC3F,CAAA;AAED,KAAK,oBAAoB,CAAC,CAAC,SAAS,YAAY,IAAI,MAAM,qBAAqB,CAC7E,uBAAuB,CAAC,CAAC,CAAC,CAC3B,SAAS,KAAK,GACX,KAAK,GACL,qBAAqB,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAA;AAErD,KAAK,kBAAkB,CAAC,CAAC,SAAS,YAAY,EAAE,CAAC,IAAI,CAAC,SAAS,IAAI,GAC/D,UAAU,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,GACnC,CAAC,SAAS,YAAY,CAAC,CAAC,CAAC,GACvB,UAAU,CAAC,CAAC,CAAC,GACb,KAAK,CAAA;AAEX;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,YAAY,EACxD,SAAS,EAAE,CAAC,EACZ,YAAY,EAAE,oBAAoB,CAAC,CAAC,CAAC,EACrC,OAAO,CAAC,EAAE;IACR,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,GAAG,SAAS,CAAA;CACnC,GACA,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;AAE9D,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,YAAY,EAAE,CAAC,SAAS,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,EAC1F,SAAS,EAAE,CAAC,EACZ,YAAY,EAAE,oBAAoB,CAAC,CAAC,CAAC,EACrC,OAAO,EAAE;IACP,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,GAAG,SAAS,CAAA;IAClC,gBAAgB,EAAE,CAAC,CAAA;CACpB,GACA,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA"}

package/dist/hooks/useCSSPropsPolyfill.js

@@ -0,0 +1,72 @@
+import { useLayoutEffect, useRef } from 'react';
+import { getCSSPropRawValue, } from '@graphprotocol/gds-css';
+import { useCSSProps } from "./useCSSProps.js";
+import { useForceRerender } from "./useForceRerender.js";
+export function useCSSPropsPolyfill(component, passedValues, options) {
+    const { ref, returnPropValues } = options ?? {};
+    const polyfillEnabled = !getStyleQueriesSupported();
+    // Merge `passedValues` with `returnPropValues` if needed
+    const allPassedValues = (() => {
+        if (!returnPropValues)
+            return passedValues;
+        if (returnPropValues === true)
+            return passedValues;
+        const merged = { ...passedValues };
+        for (const [key, value] of Object.entries(returnPropValues)) {
+            if (key in passedValues && passedValues[key] !== value) {
+                throw new Error(`[useCSSPropsPolyfill] Conflicting values for prop \`${key}\`: ${passedValues[key]} vs ${value}`);
+            }
+            merged[key] = value;
+        }
+        return merged;
+    })();
+    const [callbackRef, propValues, props] = useCSSProps(component, allPassedValues, {
+        ref,
+        disabled: !polyfillEnabled && !returnPropValues,
+    });
+    /**
+     * Always include the polyfill attributes on the first render (even if the polyfill is disabled)
+     * to prevent hydration errors. It would be nice to optimize for the case where the polyfill is
+     * not needed instead (by always excluding the attributes on the first render, thereby not having
+     * to immediately rerender in browsers that support style queries); unfortunately, that would
+     * cause a flash of missing styles in browsers that need the polyfill.
+     */
+    const firstRender = useRef(true);
+    const polyfillAttributes = polyfillEnabled || firstRender.current
+        ? Object.fromEntries(props
+            .filter((prop) => prop.name in passedValues)
+            .map((prop) => {
+            const value = propValues[prop.name];
+            const rawValue = getCSSPropRawValue(prop.cssProp, value);
+            return [prop.polyfillAttribute, rawValue];
+        }))
+        : {};
+    // If the polyfill is not needed, rerender to remove the polyfill attributes
+    const [rerender] = useForceRerender();
+    useLayoutEffect(() => {
+        firstRender.current = false;
+        if (!polyfillEnabled) {
+            rerender();
+        }
+        // oxlint-disable-next-line exhaustive-deps
+    }, []);
+    if (!returnPropValues) {
+        return [callbackRef, polyfillAttributes];
+    }
+    const returnedPropValues = (returnPropValues === true
+        ? propValues
+        : Object.fromEntries(Object.entries(propValues).filter(([key]) => key in returnPropValues)));
+    return [callbackRef, polyfillAttributes, returnedPropValues];
+}
+let privateStyleQueriesSupported = null;
+function getStyleQueriesSupported() {
+    if (typeof window === 'undefined' || typeof document === 'undefined')
+        return false;
+    if (privateStyleQueriesSupported === null) {
+        privateStyleQueriesSupported =
+            window.getComputedStyle(document.body).getPropertyValue('--gds-style-queries-test') ===
+                'success';
+    }
+    return privateStyleQueriesSupported;
+}
+//# sourceMappingURL=useCSSPropsPolyfill.js.map

package/dist/hooks/useCSSPropsPolyfill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCSSPropsPolyfill.js","sourceRoot":"","sources":["../../src/hooks/useCSSPropsPolyfill.ts"],"names":[],"mappings":"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"}

package/dist/hooks/useCSSState.d.ts

@@ -0,0 +1,45 @@
+import type { Ref } from 'react';
+import { cssStateVariables } from '@graphprotocol/gds-css';
+type CSSStateVariableName = keyof typeof cssStateVariables;
+type CSSStateVariableValue<K extends CSSStateVariableName> = (typeof cssStateVariables)[K]['values'][keyof (typeof cssStateVariables)[K]['values']];
+type CSSStateType<T extends Record<string, unknown>> = {
+    [K in keyof T]: K extends CSSStateVariableName ? CSSStateVariableValue<K> : unknown;
+};
+/**
+ * This hook can be used in three different cases (which some components may need simultaneously):
+ *
+ * - Until Firefox supports style queries, every component that uses CSS states internally (i.e.
+ *   contains `@state-*` classes) needs to use this hook and also spread `polyfillAttributes` on the
+ *   root element, regardless of what follows.
+ * - When a component exposes CSS states from a nested element (e.g.
+ *   `u:has-nested-hover/ref:expose-hover` on the root element instead of `u:hover:state-hover`), it
+ *   has to call this hook with all the state variables it exposes, even if it's only a particular
+ *   state in a particular condition. For instance, it may expose the `active` state when a nested
+ *   input is `:active` so it's also triggered with the keyboard, without needing to customize when
+ *   `hover` is exposed; regardless, `{ pointer: undefined }` should be passed as the first
+ *   argument, `variableInitialValues`. The "initial values" in that object are used during SSR and
+ *   on the first render, and should be passed instead of `undefined` for variables whose initial
+ *   state may differ from their default value (often the case for `checked` and `disabled`). Not
+ *   doing so may result in a flash of incorrect styles, since we need to wait for the DOM to get
+ *   style values (including the state variables). The hook returns a tuple with two values: the
+ *   first one is a `ref` which should be passed to the root element, and the second one is an
+ *   object with an `exposedAttributes` property, which you should spread on the root as well. This
+ *   ensures that a class like `active:opacity-50` set by a consumer takes effect when the nested
+ *   element is active, rather than when the root element is.
+ * - When a component needs to know the state of a nested component or element that supports CSS
+ *   states (that is, one that has classes like `u:hover:state-hover` or
+ *   `u:has-nested-hover/ref:expose-hover`), then you can call this hook with the state variables
+ *   you're interested in, pass the returned `ref` to the component/element in question, and check
+ *   the returned `state` (tuple's second value).
+ */
+export declare function useCSSState<T extends {
+    [K in keyof T]: K extends CSSStateVariableName ? CSSStateVariableValue<K> | undefined : unknown;
+}>(variableInitialValues: T, options?: {
+    ref?: Ref<HTMLElement> | undefined;
+    onChange?: (state: CSSStateType<T>) => void;
+}): readonly [import("react").RefCallback<HTMLElement>, CSSStateType<T> & {
+    readonly exposedAttributes: Record<string, string>;
+    readonly polyfillAttributes: Record<string, string>;
+}];
+export {};
+//# sourceMappingURL=useCSSState.d.ts.map

package/dist/hooks/useCSSState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCSSState.d.ts","sourceRoot":"","sources":["../../src/hooks/useCSSState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAM1D,KAAK,oBAAoB,GAAG,MAAM,OAAO,iBAAiB,CAAA;AAC1D,KAAK,qBAAqB,CAAC,CAAC,SAAS,oBAAoB,IACvD,CAAC,OAAO,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAA;AAExF,KAAK,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;KACpD,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,SAAS,oBAAoB,GAAG,qBAAqB,CAAC,CAAC,CAAC,GAAG,OAAO;CACpF,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,WAAW,CACzB,CAAC,SAAS;KACP,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,SAAS,oBAAoB,GAAG,qBAAqB,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,OAAO;CAChG,EAED,qBAAqB,EAAE,CAAC,EACxB,OAAO,GAAE;IACP,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,GAAG,SAAS,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;CACvC;;;GAwFP"}

package/dist/hooks/useCSSState.js

@@ -0,0 +1,92 @@
+import { cssStateVariables } from '@graphprotocol/gds-css';
+import { useMapWithInit } from "./useMapWithInit.js";
+import { useRefWithInit } from "./useRefWithInit.js";
+import { useStyleObserver } from "./useStyleObserver.js";
+/**
+ * This hook can be used in three different cases (which some components may need simultaneously):
+ *
+ * - Until Firefox supports style queries, every component that uses CSS states internally (i.e.
+ *   contains `@state-*` classes) needs to use this hook and also spread `polyfillAttributes` on the
+ *   root element, regardless of what follows.
+ * - When a component exposes CSS states from a nested element (e.g.
+ *   `u:has-nested-hover/ref:expose-hover` on the root element instead of `u:hover:state-hover`), it
+ *   has to call this hook with all the state variables it exposes, even if it's only a particular
+ *   state in a particular condition. For instance, it may expose the `active` state when a nested
+ *   input is `:active` so it's also triggered with the keyboard, without needing to customize when
+ *   `hover` is exposed; regardless, `{ pointer: undefined }` should be passed as the first
+ *   argument, `variableInitialValues`. The "initial values" in that object are used during SSR and
+ *   on the first render, and should be passed instead of `undefined` for variables whose initial
+ *   state may differ from their default value (often the case for `checked` and `disabled`). Not
+ *   doing so may result in a flash of incorrect styles, since we need to wait for the DOM to get
+ *   style values (including the state variables). The hook returns a tuple with two values: the
+ *   first one is a `ref` which should be passed to the root element, and the second one is an
+ *   object with an `exposedAttributes` property, which you should spread on the root as well. This
+ *   ensures that a class like `active:opacity-50` set by a consumer takes effect when the nested
+ *   element is active, rather than when the root element is.
+ * - When a component needs to know the state of a nested component or element that supports CSS
+ *   states (that is, one that has classes like `u:hover:state-hover` or
+ *   `u:has-nested-hover/ref:expose-hover`), then you can call this hook with the state variables
+ *   you're interested in, pass the returned `ref` to the component/element in question, and check
+ *   the returned `state` (tuple's second value).
+ */
+export function useCSSState(variableInitialValues, options = {}) {
+    const { ref, onChange } = options;
+    const variables = useRefWithInit(() => Object.keys(variableInitialValues).map((variableName) => {
+        const defaultValue = variableName in cssStateVariables
+            ? cssStateVariables[variableName].defaultValue
+            : undefined;
+        return {
+            name: variableName,
+            defaultValue,
+            initialValue: variableInitialValues[variableName] ?? defaultValue,
+            observedProperty: `--gds-observed-${variableName}`,
+            exposedProperty: `--gds-exposed-${variableName}`,
+            exposedAttribute: `data-gds-exposed-${variableName}`,
+            polyfillAttribute: `data-gds-state-polyfill-${variableName}`,
+        };
+    })).current;
+    const properties = useRefWithInit(() => variables.flatMap((variable) => [variable.observedProperty, variable.exposedProperty])).current;
+    const propertyValues = useMapWithInit(() => variables.flatMap((variable) => [
+        [variable.observedProperty, String(variable.initialValue ?? '')],
+        [variable.exposedProperty, String(variable.initialValue ?? '')],
+    ]));
+    const getStateValue = (variable, type) => {
+        const value = propertyValues.get(type === 'observed' ? variable.observedProperty : variable.exposedProperty);
+        if (value === 'true')
+            return true;
+        if (value === 'false')
+            return false;
+        if (value === '')
+            return undefined;
+        return value;
+    };
+    const getState = () => Object.fromEntries(variables.map((variable) => [variable.name, getStateValue(variable, 'observed')]));
+    const callbackRef = useStyleObserver(properties, (records) => {
+        let statePropertiesChanged = false;
+        for (const record of records) {
+            if (propertyValues.get(record.property) !== record.value) {
+                propertyValues.set(record.property, record.value);
+                if (record.property.startsWith('--gds-observed-')) {
+                    statePropertiesChanged = true;
+                }
+            }
+        }
+        if (statePropertiesChanged && onChange) {
+            onChange(getState());
+        }
+    }, [], { ...(ref && { ref }), immediate: true });
+    const state = getState();
+    const { exposedAttributes, polyfillAttributes } = variables.reduce((result, variable) => {
+        const exposedValue = getStateValue(variable, 'exposed');
+        if (exposedValue !== undefined) {
+            result.exposedAttributes[variable.exposedAttribute] = String(exposedValue);
+        }
+        const observedValue = getStateValue(variable, 'observed');
+        if (observedValue !== undefined) {
+            result.polyfillAttributes[variable.polyfillAttribute] = String(observedValue);
+        }
+        return result;
+    }, { exposedAttributes: {}, polyfillAttributes: {} });
+    return [callbackRef, { ...state, exposedAttributes, polyfillAttributes }];
+}
+//# sourceMappingURL=useCSSState.js.map

package/dist/hooks/useCSSState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCSSState.js","sourceRoot":"","sources":["../../src/hooks/useCSSState.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAUxD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,WAAW,CAKzB,qBAAwB,EACxB,UAGI,EAAE;IAEN,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAA;IAEjC,MAAM,SAAS,GAAG,cAAc,CAAC,GAAG,EAAE,CACpC,MAAM,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE;QACtD,MAAM,YAAY,GAChB,YAAY,IAAI,iBAAiB;YAC/B,CAAC,CAAC,iBAAiB,CAAC,YAAoC,CAAC,CAAC,YAAY;YACtE,CAAC,CAAC,SAAS,CAAA;QACf,OAAO;YACL,IAAI,EAAE,YAAY;YAClB,YAAY;YACZ,YAAY,EAAE,qBAAqB,CAAC,YAAuB,CAAC,IAAI,YAAY;YAC5E,gBAAgB,EAAE,kBAAkB,YAAY,EAAE;YAClD,eAAe,EAAE,iBAAiB,YAAY,EAAE;YAChD,gBAAgB,EAAE,oBAAoB,YAAY,EAAE;YACpD,iBAAiB,EAAE,2BAA2B,YAAY,EAAE;SAC7D,CAAA;IACH,CAAC,CAAC,CACH,CAAC,OAAO,CAAA;IAET,MAAM,UAAU,GAAG,cAAc,CAAC,GAAG,EAAE,CACrC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC,CACvF,CAAC,OAAO,CAAA;IAET,MAAM,cAAc,GAAG,cAAc,CAAC,GAAG,EAAE,CACzC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC;QAC9B,CAAC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC,QAAQ,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC;QAChE,CAAC,QAAQ,CAAC,eAAe,EAAE,MAAM,CAAC,QAAQ,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC;KAChE,CAAC,CACH,CAAA;IAED,MAAM,aAAa,GAAG,CAAC,QAAoC,EAAE,IAA4B,EAAE,EAAE;QAC3F,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAC9B,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAC3E,CAAA;QACD,IAAI,KAAK,KAAK,MAAM;YAAE,OAAO,IAAI,CAAA;QACjC,IAAI,KAAK,KAAK,OAAO;YAAE,OAAO,KAAK,CAAA;QACnC,IAAI,KAAK,KAAK,EAAE;YAAE,OAAO,SAAS,CAAA;QAClC,OAAO,KAAK,CAAA;IACd,CAAC,CAAA;IAED,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,MAAM,CAAC,WAAW,CAChB,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAC/D,CAAA;IAEtB,MAAM,WAAW,GAAG,gBAAgB,CAClC,UAAU,EACV,CAAC,OAAO,EAAE,EAAE;QACV,IAAI,sBAAsB,GAAG,KAAK,CAAA;QAClC,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;YAC7B,IAAI,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,MAAM,CAAC,KAAK,EAAE,CAAC;gBACzD,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,CAAA;gBACjD,IAAI,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,CAAC;oBAClD,sBAAsB,GAAG,IAAI,CAAA;gBAC/B,CAAC;YACH,CAAC;QACH,CAAC;QACD,IAAI,sBAAsB,IAAI,QAAQ,EAAE,CAAC;YACvC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,EACD,EAAE,EACF,EAAE,GAAG,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CACzC,CAAA;IAED,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAAC,MAAM,CAIhE,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE;QACnB,MAAM,YAAY,GAAG,aAAa,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAA;QACvD,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;YAC/B,MAAM,CAAC,iBAAiB,CAAC,QAAQ,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;QAC5E,CAAC;QACD,MAAM,aAAa,GAAG,aAAa,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAA;QACzD,IAAI,aAAa,KAAK,SAAS,EAAE,CAAC;YAChC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,iBAAiB,CAAC,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;QAC/E,CAAC;QACD,OAAO,MAAM,CAAA;IACf,CAAC,EACD,EAAE,iBAAiB,EAAE,EAAE,EAAE,kBAAkB,EAAE,EAAE,EAAE,CAClD,CAAA;IAED,OAAO,CAAC,WAAW,EAAE,EAAE,GAAG,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,CAAU,CAAA;AACpF,CAAC"}

package/dist/hooks/useControlled.d.ts

@@ -0,0 +1,2 @@
+export declare function useControlled<T, OnChangeValue extends T = T, OnChangeArgs extends unknown[] = []>(controlledValue: T | undefined, defaultValue: T, onChange?: (value: OnChangeValue, ...args: OnChangeArgs) => void): readonly [T, (newValue: OnChangeValue, ...args: OnChangeArgs) => void];
+//# sourceMappingURL=useControlled.d.ts.map

package/dist/hooks/useControlled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlled.d.ts","sourceRoot":"","sources":["../../src/hooks/useControlled.ts"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,CAAC,CAAC,EAAE,aAAa,SAAS,CAAC,GAAG,CAAC,EAAE,YAAY,SAAS,OAAO,EAAE,GAAG,EAAE,EAC/F,eAAe,EAAE,CAAC,GAAG,SAAS,EAC9B,YAAY,EAAE,CAAC,EACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG,IAAI,EAAE,YAAY,KAAK,IAAI,2BAMpC,aAAa,WAAW,YAAY,WAQjE"}

package/dist/hooks/useControlled.js

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+export function useControlled(controlledValue, defaultValue, onChange) {
+    const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue !== undefined ? controlledValue : defaultValue);
+    const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+    const setValue = (newValue, ...args) => {
+        if (newValue === value)
+            return;
+        onChange?.(newValue, ...args);
+        if (controlledValue === undefined) {
+            setUncontrolledValue(newValue);
+        }
+    };
+    return [value, setValue];
+}
+//# sourceMappingURL=useControlled.js.map

package/dist/hooks/useControlled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlled.js","sourceRoot":"","sources":["../../src/hooks/useControlled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,MAAM,UAAU,aAAa,CAC3B,eAA8B,EAC9B,YAAe,EACf,QAAgE;IAEhE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CACxD,eAAe,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,CAC/D,CAAA;IACD,MAAM,KAAK,GAAG,eAAe,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,CAAA;IACjF,MAAM,QAAQ,GAAG,CAAC,QAAuB,EAAE,GAAG,IAAkB,EAAE,EAAE;QAClE,IAAI,QAAQ,KAAK,KAAK;YAAE,OAAM;QAC9B,QAAQ,EAAE,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,CAAA;QAC7B,IAAI,eAAe,KAAK,SAAS,EAAE,CAAC;YAClC,oBAAoB,CAAC,QAAQ,CAAC,CAAA;QAChC,CAAC;IACH,CAAC,CAAA;IACD,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAU,CAAA;AACnC,CAAC"}

package/dist/hooks/useCurrencyInput.d.ts

@@ -0,0 +1,33 @@
+import { type BigIntFormatOptions } from '@graphprotocol/gds-utils';
+import type { CurrencyInputProps } from '../components/CurrencyInput.tsx';
+import { type UseNumberInputError, type UseNumberInputOptions, type UseNumberInputReturnedObject } from './useNumberInput.ts';
+export type UseCurrencyInputCurrency = {
+    code: string;
+    format: BigIntFormatOptions;
+};
+export type UseCurrencyInputOptions<UseBigInt extends boolean = false, T = UseBigInt extends true ? bigint : number> = Omit<UseNumberInputOptions<UseBigInt, T>, 'format'> & {
+    /** @default 0 */
+    min?: T | null | undefined;
+    /** @default 'GRT' */
+    currency?: string | UseCurrencyInputCurrency | undefined;
+    /** @default { code: 'USD', format: { minimumFractionDigits: 2, maximumFractionDigits: 2 } } */
+    convertedCurrency?: string | UseCurrencyInputCurrency | undefined;
+    conversionRate?: T | ((value: T) => T) | undefined;
+};
+export type UseCurrencyInputReturnedObject<T = number | bigint> = {
+    /** `null` means the input is either empty or invalid; check `error` to know which. */
+    value: T | null;
+    setValue: (value: T | null) => void;
+    convertedValue: T | null;
+    error: UseNumberInputError | null;
+    nonValidatedValue: bigint | null;
+    nearestValidValue: T;
+    props: UseNumberInputReturnedObject<T>['props'] & {
+        currency: CurrencyInputProps['currency'];
+        convertedCurrency: CurrencyInputProps['convertedCurrency'];
+        convertedAmount?: CurrencyInputProps['convertedAmount'] | undefined;
+        onMaxClicked?: CurrencyInputProps['onMaxClicked'] | undefined;
+    };
+};
+export declare function useCurrencyInput<UseBigInt extends boolean = false, T = UseBigInt extends true ? bigint : number>({ useBigInt, precision, min, max, currency: passedCurrency, convertedCurrency: passedConvertedCurrency, conversionRate, ...options }?: UseCurrencyInputOptions<UseBigInt>): UseCurrencyInputReturnedObject<T>;
+//# sourceMappingURL=useCurrencyInput.d.ts.map

package/dist/hooks/useCurrencyInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCurrencyInput.d.ts","sourceRoot":"","sources":["../../src/hooks/useCurrencyInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,mBAAmB,EACzB,MAAM,0BAA0B,CAAA;AAEjC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AACzE,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,4BAA4B,EAClC,MAAM,qBAAqB,CAAA;AAE5B,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,mBAAmB,CAAA;CAC5B,CAAA;AASD,MAAM,MAAM,uBAAuB,CACjC,SAAS,SAAS,OAAO,GAAG,KAAK,EACjC,CAAC,GAAG,SAAS,SAAS,IAAI,GAAG,MAAM,GAAG,MAAM,IAC1C,IAAI,CAAC,qBAAqB,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG;IACxD,iBAAiB;IACjB,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,GAAG,SAAS,CAAA;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,wBAAwB,GAAG,SAAS,CAAA;IACxD,+FAA+F;IAC/F,iBAAiB,CAAC,EAAE,MAAM,GAAG,wBAAwB,GAAG,SAAS,CAAA;IACjE,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC,GAAG,SAAS,CAAA;CACnD,CAAA;AAED,MAAM,MAAM,8BAA8B,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM,IAAI;IAChE,sFAAsF;IACtF,KAAK,EAAE,CAAC,GAAG,IAAI,CAAA;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IACnC,cAAc,EAAE,CAAC,GAAG,IAAI,CAAA;IACxB,KAAK,EAAE,mBAAmB,GAAG,IAAI,CAAA;IACjC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC,iBAAiB,EAAE,CAAC,CAAA;IACpB,KAAK,EAAE,4BAA4B,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG;QAChD,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAA;QACxC,iBAAiB,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAA;QAC1D,eAAe,CAAC,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAA;QACnE,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,GAAG,SAAS,CAAA;KAC9D,CAAA;CACF,CAAA;AAED,wBAAgB,gBAAgB,CAC9B,SAAS,SAAS,OAAO,GAAG,KAAK,EACjC,CAAC,GAAG,SAAS,SAAS,IAAI,GAAG,MAAM,GAAG,MAAM,EAC5C,EACA,SAA8B,EAC9B,SAAe,EACf,GAAU,EACV,GAAU,EACV,QAAQ,EAAE,cAAsB,EAChC,iBAAiB,EAAE,uBAGlB,EACD,cAAc,EACd,GAAG,OAAO,EACX,GAAE,uBAAuB,CAAC,SAAS,CAAM,GAAG,8BAA8B,CAAC,CAAC,CAAC,CA+D7E"}

package/dist/hooks/useCurrencyInput.js

@@ -0,0 +1,63 @@
+import { bigIntToNumber, formatBigInt, numberToBigInt, } from '@graphprotocol/gds-utils';
+import { useNumberInput, } from "./useNumberInput.js";
+function normalizeCurrency(currency) {
+    if (typeof currency === 'string') {
+        return { code: currency, format: {} };
+    }
+    return currency;
+}
+export function useCurrencyInput({ useBigInt = false, precision = 18n, min = null, max = null, currency: passedCurrency = 'GRT', convertedCurrency: passedConvertedCurrency = {
+    code: 'USD',
+    format: { minimumFractionDigits: 2, maximumFractionDigits: 2 },
+}, conversionRate, ...options } = {}) {
+    const currency = normalizeCurrency(passedCurrency);
+    const convertedCurrency = normalizeCurrency(passedConvertedCurrency);
+    const numberInput = useNumberInput({
+        useBigInt,
+        precision,
+        min: min ?? (useBigInt ? 0n : 0),
+        max,
+        format: currency.format,
+        ...options,
+    });
+    let convertedAmount = undefined;
+    let convertedValue = null;
+    if (conversionRate !== undefined) {
+        let convert;
+        if (typeof conversionRate === 'number' || typeof conversionRate === 'bigint') {
+            convert = (value) => {
+                if (typeof value === 'bigint') {
+                    const precisionFactor = 10n ** precision;
+                    return ((value * conversionRate) / precisionFactor);
+                }
+                else {
+                    return (value * conversionRate);
+                }
+            };
+        }
+        else {
+            convert = conversionRate;
+        }
+        const valueToConvert = numberInput.nonValidatedValue ?? 0n;
+        const nonValidatedConvertedValue = convert((useBigInt ? valueToConvert : bigIntToNumber(valueToConvert, { precision })));
+        convertedAmount = formatBigInt(typeof nonValidatedConvertedValue === 'number'
+            ? numberToBigInt(nonValidatedConvertedValue, { precision })
+            : nonValidatedConvertedValue, { precision, ...convertedCurrency.format });
+        if (numberInput.value !== null) {
+            convertedValue = nonValidatedConvertedValue;
+        }
+    }
+    const onMaxClicked = max !== null ? () => numberInput.setValue(max) : undefined;
+    return {
+        ...numberInput,
+        convertedValue,
+        props: {
+            ...numberInput.props,
+            currency: currency.code,
+            convertedCurrency: convertedCurrency.code,
+            convertedAmount,
+            onMaxClicked,
+        },
+    };
+}
+//# sourceMappingURL=useCurrencyInput.js.map

package/dist/hooks/useCurrencyInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCurrencyInput.js","sourceRoot":"","sources":["../../src/hooks/useCurrencyInput.ts"],"names":[],"mappings":"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"}

package/dist/hooks/useEffectWithRefDeps.d.ts

@@ -0,0 +1,11 @@
+import { type EffectCallback, type Ref, type RefCallback } from 'react';
+import { type EffectHook } from '@react-hookz/web';
+/**
+ * Hook that combines useEffect with ref dependencies. Runs the effect whenever regular dependencies
+ * change or when ref values change.
+ */
+export declare function useEffectWithRefDeps<T, RefDeps extends readonly Ref<T>[]>(effect: EffectCallback, regularDeps: unknown[], refDeps: [...RefDeps], options?: {
+    deepCompare?: boolean;
+    hook?: EffectHook;
+}): { [K in keyof RefDeps]: RefDeps[K] extends Ref<infer U> ? RefCallback<U> : never; };
+//# sourceMappingURL=useEffectWithRefDeps.d.ts.map

package/dist/hooks/useEffectWithRefDeps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEffectWithRefDeps.d.ts","sourceRoot":"","sources":["../../src/hooks/useEffectWithRefDeps.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,GAAG,EACR,KAAK,WAAW,EACjB,MAAM,OAAO,CAAA;AAEd,OAAO,EAAgD,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAKhG;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,OAAO,SAAS,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,EACvE,MAAM,EAAE,cAAc,EACtB,WAAW,EAAE,OAAO,EAAE,EACtB,OAAO,EAAE,CAAC,GAAG,OAAO,CAAC,EACrB,OAAO,GAAE;IAAE,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,UAAU,CAAA;CAAO,GAkDnC,GACpB,CAAC,IAAI,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,KAAK,GAC/E,CACF"}

package/dist/hooks/useEffectWithRefDeps.js

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useRef, } from 'react';
+import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';
+import { useCustomCompareEffect, useCustomCompareMemo } from '@react-hookz/web';
+import { isEqual } from '@ver0/deep-equal';
+import { useRefWithInit } from "./useRefWithInit.js";
+/**
+ * Hook that combines useEffect with ref dependencies. Runs the effect whenever regular dependencies
+ * change or when ref values change.
+ */
+export function useEffectWithRefDeps(effect, regularDeps, refDeps, options = {}) {
+    const { deepCompare = false, hook = useEffect } = options;
+    const cleanupFunction = useRef(null);
+    const cleanUpIfNeeded = () => {
+        cleanupFunction.current?.();
+        cleanupFunction.current = null;
+    };
+    const runEffectToken = useRef(0);
+    const runEffect = useCustomCompareMemo(() => () => {
+        runEffectToken.current++;
+        cleanUpIfNeeded();
+        cleanupFunction.current = effect() ?? null;
+    }, regularDeps, deepCompare ? isEqual : Object.is);
+    useCustomCompareEffect(() => {
+        runEffect();
+        return cleanUpIfNeeded;
+    }, [runEffect], undefined, hook);
+    const runEffectNextTick = useCallback(() => {
+        const token = ++runEffectToken.current;
+        queueMicrotask(() => {
+            if (runEffectToken.current === token) {
+                runEffect();
+            }
+        });
+    }, [runEffect]);
+    const stableRefDepCount = useRefWithInit(() => refDeps.length).current;
+    const resizedRefDeps = getResizedArray(refDeps, stableRefDepCount);
+    if (resizedRefDeps.some((refDep) => refDep === undefined)) {
+        throw new Error('[useEffectWithRefDeps] Number of passed `refDeps` must be stable');
+    }
+    const callbackRefs = resizedRefDeps.map((refDep) => 
+    // oxlint-disable-next-line react-hooks/rules-of-hooks
+    useMergedRefs(refDep, runEffectNextTick));
+    return callbackRefs;
+}
+function getResizedArray(array, newLength) {
+    return Array.from({ length: newLength }, (_, i) => array[i]);
+}
+//# sourceMappingURL=useEffectWithRefDeps.js.map

package/dist/hooks/useEffectWithRefDeps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEffectWithRefDeps.js","sourceRoot":"","sources":["../../src/hooks/useEffectWithRefDeps.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,SAAS,EACT,MAAM,GAIP,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAA;AACvE,OAAO,EAAE,sBAAsB,EAAE,oBAAoB,EAAmB,MAAM,kBAAkB,CAAA;AAChG,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD;;;GAGG;AACH,MAAM,UAAU,oBAAoB,CAClC,MAAsB,EACtB,WAAsB,EACtB,OAAqB,EACrB,UAAwD,EAAE;IAE1D,MAAM,EAAE,WAAW,GAAG,KAAK,EAAE,IAAI,GAAG,SAAS,EAAE,GAAG,OAAO,CAAA;IAEzD,MAAM,eAAe,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAA;IACzD,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,eAAe,CAAC,OAAO,EAAE,EAAE,CAAA;QAC3B,eAAe,CAAC,OAAO,GAAG,IAAI,CAAA;IAChC,CAAC,CAAA;IAED,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IAChC,MAAM,SAAS,GAAG,oBAAoB,CACpC,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,cAAc,CAAC,OAAO,EAAE,CAAA;QACxB,eAAe,EAAE,CAAA;QACjB,eAAe,CAAC,OAAO,GAAG,MAAM,EAAE,IAAI,IAAI,CAAA;IAC5C,CAAC,EACD,WAAW,EACX,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAClC,CAAA;IAED,sBAAsB,CACpB,GAAG,EAAE;QACH,SAAS,EAAE,CAAA;QACX,OAAO,eAAe,CAAA;IACxB,CAAC,EACD,CAAC,SAAS,CAAC,EACX,SAAS,EACT,IAAI,CACL,CAAA;IAED,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACzC,MAAM,KAAK,GAAG,EAAE,cAAc,CAAC,OAAO,CAAA;QACtC,cAAc,CAAC,GAAG,EAAE;YAClB,IAAI,cAAc,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;gBACrC,SAAS,EAAE,CAAA;YACb,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,MAAM,iBAAiB,GAAG,cAAc,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAA;IACtE,MAAM,cAAc,GAAG,eAAe,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAA;IAClE,IAAI,cAAc,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,KAAK,SAAS,CAAC,EAAE,CAAC;QAC1D,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC,CAAA;IACrF,CAAC;IACD,MAAM,YAAY,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;IACjD,sDAAsD;IACtD,aAAa,CAAC,MAAO,EAAE,iBAAiB,CAAC,CAC1C,CAAA;IAED,OAAO,YAEN,CAAA;AACH,CAAC;AAED,SAAS,eAAe,CAAI,KAAU,EAAE,SAAiB;IACvD,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;AAC9D,CAAC"}

package/dist/hooks/useForceRerender.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Hook that provides a function to force a component to re-render. Returns a tuple of `[rerender
+ * function, rerender count]`.
+ */
+export declare function useForceRerender(): readonly [() => void, number];
+//# sourceMappingURL=useForceRerender.d.ts.map

package/dist/hooks/useForceRerender.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForceRerender.d.ts","sourceRoot":"","sources":["../../src/hooks/useForceRerender.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,gBAAgB,kCAM/B"}