@dynamic-framework/ui-react 2.10.0 → 2.11.0

package/dist/esm/hooks/useControlledState.js

@@ -0,0 +1,51 @@
+import { useState, useEffect, useCallback } from 'react';
+
+/**
+ * Backs a value that the consumer may or may not drive, so a control works in
+ * both modes without a copy of the state drifting away from the props.
+ *
+ * A control counts as controlled only when the consumer passes the value *and*
+ * an `onChange` to push it back. The value on its own has always meant "start
+ * here" in this library — `<DInputCheck type="radio" checked />` inside a radio
+ * group, for one — so treating it as controlled would silently freeze those
+ * controls, and React emits no warning to say why: the components always attach
+ * their own `onChange` handler.
+ *
+ * @param value the value coming from props, or `undefined` when not passed.
+ * @param isControlled whether the consumer can drive the value back.
+ * @param initialValue what to start from when no value is passed.
+ * @returns the value to render, and a setter to call on every user change.
+ */
+function useControlledState(value, isControlled, initialValue) {
+    const [internalValue, setInternalValue] = useState(value === undefined ? initialValue : value);
+    // The internal copy follows `value` in both modes.
+    //
+    // Uncontrolled, `value` without an `onChange` still means "start here", and a
+    // later flip of it from outside must still land — but between flips the
+    // control has to keep moving on its own, which is why this depends on `value`
+    // alone and not on `internalValue`.
+    //
+    // Controlled, the copy is not what gets rendered, but it is what the control
+    // falls back to if the consumer later stops passing a value — `value={locked
+    // ? undefined : x}`, say. Keeping it current means that hand-off carries on
+    // from where the control is instead of snapping back to the mount-time seed.
+    useEffect(() => {
+        if (value === undefined) {
+            return;
+        }
+        setInternalValue(value);
+    }, [value]);
+    const setValue = useCallback((next) => {
+        if (isControlled) {
+            return;
+        }
+        setInternalValue(next);
+    }, [isControlled]);
+    return [
+        isControlled && value !== undefined ? value : internalValue,
+        setValue,
+    ];
+}
+
+export { useControlledState as default };
+//# sourceMappingURL=useControlledState.js.map

package/dist/esm/hooks/useControlledState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlledState.js","sources":["../../../dist-transpiled/hooks/useControlledState.js"],"sourcesContent":["import { useCallback, useEffect, useState, } from 'react';\n/**\n * Backs a value that the consumer may or may not drive, so a control works in\n * both modes without a copy of the state drifting away from the props.\n *\n * A control counts as controlled only when the consumer passes the value *and*\n * an `onChange` to push it back. The value on its own has always meant \"start\n * here\" in this library — `<DInputCheck type=\"radio\" checked />` inside a radio\n * group, for one — so treating it as controlled would silently freeze those\n * controls, and React emits no warning to say why: the components always attach\n * their own `onChange` handler.\n *\n * @param value the value coming from props, or `undefined` when not passed.\n * @param isControlled whether the consumer can drive the value back.\n * @param initialValue what to start from when no value is passed.\n * @returns the value to render, and a setter to call on every user change.\n */\nexport default function useControlledState(value, isControlled, initialValue) {\n    const [internalValue, setInternalValue] = useState(value === undefined ? initialValue : value);\n    // The internal copy follows `value` in both modes.\n    //\n    // Uncontrolled, `value` without an `onChange` still means \"start here\", and a\n    // later flip of it from outside must still land — but between flips the\n    // control has to keep moving on its own, which is why this depends on `value`\n    // alone and not on `internalValue`.\n    //\n    // Controlled, the copy is not what gets rendered, but it is what the control\n    // falls back to if the consumer later stops passing a value — `value={locked\n    // ? undefined : x}`, say. Keeping it current means that hand-off carries on\n    // from where the control is instead of snapping back to the mount-time seed.\n    useEffect(() => {\n        if (value === undefined) {\n            return;\n        }\n        setInternalValue(value);\n    }, [value]);\n    const setValue = useCallback((next) => {\n        if (isControlled) {\n            return;\n        }\n        setInternalValue(next);\n    }, [isControlled]);\n    return [\n        isControlled && value !== undefined ? value : internalValue,\n        setValue,\n    ];\n}\n//# sourceMappingURL=useControlledState.js.map"],"names":[],"mappings":";;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,kBAAkB,CAAC,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE;AAC9E,IAAI,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,KAAK,SAAS,GAAG,YAAY,GAAG,KAAK,CAAC;AAClG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,SAAS,CAAC,MAAM;AACpB,QAAQ,IAAI,KAAK,KAAK,SAAS,EAAE;AACjC,YAAY;AACZ,QAAQ;AACR,QAAQ,gBAAgB,CAAC,KAAK,CAAC;AAC/B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AACf,IAAI,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,IAAI,KAAK;AAC3C,QAAQ,IAAI,YAAY,EAAE;AAC1B,YAAY;AACZ,QAAQ;AACR,QAAQ,gBAAgB,CAAC,IAAI,CAAC;AAC9B,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;AACtB,IAAI,OAAO;AACX,QAAQ,YAAY,IAAI,KAAK,KAAK,SAAS,GAAG,KAAK,GAAG,aAAa;AACnE,QAAQ,QAAQ;AAChB,KAAK;AACL;;;;"}

package/dist/esm/hooks/useInputCurrency.js

@@ -1,4 +1,4 @@
-import { useCallback, useState, useRef, useEffect, useMemo } from 'react';
+import { useRef, useCallback, useState, useEffect, useMemo } from 'react';
 import currency from 'currency.js';
 import useProvidedRefOrCreate from './useProvidedRefOrCreate.js';
 
@@ -8,10 +8,40 @@ function formatValue(value, currencyOptions) {
     }
     return currency(value, Object.assign(Object.assign({}, currencyOptions), { symbol: '' })).format();
 }
-function useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref, minValue, maxValue) {
+/**
+ * State and handlers for a currency input: a formatted string while the field
+ * is idle and the raw number while it is being edited.
+ *
+ * `minValue`/`maxValue` bound the value. With `clamp` (default `true`) an
+ * out-of-range value is brought into range whenever it is not being typed:
+ * on mount, when `value` or the bounds change, and on blur. Every time the
+ * clamp changes the value, `onChange` receives the clamped number, so the
+ * input and the consumer's state never disagree. While the field is focused
+ * the typed number is reported as is, so a partial entry is not rewritten.
+ *
+ * With `clamp: false` the value is never changed: the bounds only feed
+ * `isOverMax` / `isUnderMin`, so the consumer can show its own message (e.g.
+ * "You exceeded the limit") and keep the entered amount.
+ *
+ * Controlled usage follows the same contract as a native controlled input:
+ * reflect `onChange` into `value` in the same event (`setState` in the
+ * handler). The hook keeps showing `value` whenever it isn't being edited, so
+ * a consumer can reject a change by keeping `value` as it was. Deferring the
+ * update (a timer, awaiting a request) makes the hook see a stale `value` in
+ * between: the field can flash the previous amount and a clamp can be
+ * reported again when the deferred value arrives.
+ */
+function useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref, minValue, maxValue, clamp = true) {
     const inputRef = useProvidedRefOrCreate(ref);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    // Last clamp reported through `onChange`, as the value it came from and the
+    // value it produced. StrictMode replays effects, and a consumer may reflect
+    // `onChange` asynchronously, both before `value` catches up: the same clamp
+    // must not be reported twice.
+    const lastReportedClampRef = useRef(null);
     const clampValue = useCallback((newValue) => {
-        if (newValue === undefined) {
+        if (newValue === undefined || !clamp) {
             return newValue;
         }
         let clampedValue = newValue;
@@ -22,10 +52,9 @@ function useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref
             clampedValue = Math.min(clampedValue, maxValue);
         }
         return clampedValue;
-    }, [minValue, maxValue]);
+    }, [minValue, maxValue, clamp]);
     const [innerType, setInnerType] = useState('text');
-    const [innerNumber, setInnerNumber] = useState(clampValue(value));
-    const [innerString, setInnerString] = useState(formatValue(clampValue(value), currencyOptions));
+    const [innerNumber, setInnerNumber] = useState(() => clampValue(value));
     const handleOnFocus = useCallback((event) => {
         event.stopPropagation();
         setInnerType('number');
@@ -37,35 +66,60 @@ function useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref
         const clampedNumber = clampValue(innerNumber);
         if (clampedNumber !== innerNumber) {
             setInnerNumber(clampedNumber);
-            setInnerString(formatValue(clampedNumber, currencyOptions));
+            // Recorded before notifying, so the sync effect that runs when editing
+            // ends doesn't report the same clamp again while `value` still holds the
+            // typed number.
+            lastReportedClampRef.current = { from: value, to: clampedNumber };
             onChange === null || onChange === void 0 ? void 0 : onChange(clampedNumber);
         }
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-    }, [onBlur, innerNumber, clampValue, currencyOptions, onChange]);
+    }, [onBlur, innerNumber, clampValue, onChange, value]);
     const handleOnChange = useCallback((newValue) => {
         const newNumber = (newValue === undefined || newValue === '') ? undefined : Number(newValue);
         if (newNumber !== innerNumber) {
             setInnerNumber(newNumber);
-            setInnerString(formatValue(newNumber, currencyOptions));
             onChange === null || onChange === void 0 ? void 0 : onChange(newNumber);
         }
-    }, [currencyOptions, onChange, innerNumber]);
-    const isMountedRef = useRef(false);
+    }, [onChange, innerNumber]);
+    const isEditing = innerType === 'number';
+    // Keep the inner value in sync with `value` and the bounds. While the user
+    // is typing, the consumer echoes the typed number back through `value`, so
+    // it is taken as is; otherwise it is clamped, and a clamp that changes it is
+    // reported through `onChange`.
     useEffect(() => {
-        if (!isMountedRef.current) {
-            isMountedRef.current = true;
-            return;
+        var _a;
+        const nextNumber = isEditing ? value : clampValue(value);
+        if (nextNumber !== innerNumber) {
+            setInnerNumber(nextNumber);
         }
-        if (value !== innerNumber) {
-            setInnerNumber(value);
-            setInnerString(formatValue(value, currencyOptions));
+        if (nextNumber !== value) {
+            const last = lastReportedClampRef.current;
+            if (!last || last.from !== value || last.to !== nextNumber) {
+                lastReportedClampRef.current = { from: value, to: nextNumber };
+                (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, nextNumber);
+            }
         }
-    }, [value, currencyOptions, innerNumber]);
-    const innerValue = useMemo(() => { var _a; return (innerType === 'number' ? (_a = innerNumber === null || innerNumber === void 0 ? void 0 : innerNumber.toString()) !== null && _a !== void 0 ? _a : '' : innerString !== null && innerString !== void 0 ? innerString : ''); }, [innerType, innerNumber, innerString]);
+        else {
+            lastReportedClampRef.current = null;
+        }
+        // `innerNumber` is read, not tracked: the effect reacts to the consumer's
+        // value and to the bounds, not to its own updates.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value, clampValue, isEditing]);
+    // Derived, not stored: the formatted text always matches the current number
+    // and options, even when both change in the same render. It depends on the
+    // options object itself, so a new custom `format` function is honored too;
+    // formatting is cheap and doesn't feed the synchronization effect.
+    const innerString = useMemo(() => formatValue(innerNumber, currencyOptions), [innerNumber, currencyOptions]);
+    const innerValue = useMemo(() => { var _a; return (innerType === 'number' ? (_a = innerNumber === null || innerNumber === void 0 ? void 0 : innerNumber.toString()) !== null && _a !== void 0 ? _a : '' : innerString); }, [innerType, innerNumber, innerString]);
+    const isOverMax = maxValue !== undefined && innerNumber !== undefined && innerNumber > maxValue;
+    const isUnderMin = minValue !== undefined && innerNumber !== undefined && innerNumber < minValue;
     return {
         inputRef,
         innerValue,
         innerType,
+        isOverMax,
+        isUnderMin,
         handleOnFocus,
         handleOnChange,
         handleOnBlur,

package/dist/esm/hooks/useInputCurrency.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInputCurrency.js","sources":["../../../dist-transpiled/hooks/useInputCurrency.js"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';\nimport currency from 'currency.js';\nimport useProvidedRefOrCreate from './useProvidedRefOrCreate';\nfunction formatValue(value, currencyOptions) {\n    if (value === undefined) {\n        return '';\n    }\n    return currency(value, Object.assign(Object.assign({}, currencyOptions), { symbol: '' })).format();\n}\nexport default function useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref, minValue, maxValue) {\n    const inputRef = useProvidedRefOrCreate(ref);\n    const clampValue = useCallback((newValue) => {\n        if (newValue === undefined) {\n            return newValue;\n        }\n        let clampedValue = newValue;\n        if (minValue !== undefined) {\n            clampedValue = Math.max(clampedValue, minValue);\n        }\n        if (maxValue !== undefined) {\n            clampedValue = Math.min(clampedValue, maxValue);\n        }\n        return clampedValue;\n    }, [minValue, maxValue]);\n    const [innerType, setInnerType] = useState('text');\n    const [innerNumber, setInnerNumber] = useState(clampValue(value));\n    const [innerString, setInnerString] = useState(formatValue(clampValue(value), currencyOptions));\n    const handleOnFocus = useCallback((event) => {\n        event.stopPropagation();\n        setInnerType('number');\n        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);\n    }, [onFocus]);\n    const handleOnBlur = useCallback((event) => {\n        event.stopPropagation();\n        setInnerType('text');\n        const clampedNumber = clampValue(innerNumber);\n        if (clampedNumber !== innerNumber) {\n            setInnerNumber(clampedNumber);\n            setInnerString(formatValue(clampedNumber, currencyOptions));\n            onChange === null || onChange === void 0 ? void 0 : onChange(clampedNumber);\n        }\n        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n    }, [onBlur, innerNumber, clampValue, currencyOptions, onChange]);\n    const handleOnChange = useCallback((newValue) => {\n        const newNumber = (newValue === undefined || newValue === '') ? undefined : Number(newValue);\n        if (newNumber !== innerNumber) {\n            setInnerNumber(newNumber);\n            setInnerString(formatValue(newNumber, currencyOptions));\n            onChange === null || onChange === void 0 ? void 0 : onChange(newNumber);\n        }\n    }, [currencyOptions, onChange, innerNumber]);\n    const isMountedRef = useRef(false);\n    useEffect(() => {\n        if (!isMountedRef.current) {\n            isMountedRef.current = true;\n            return;\n        }\n        if (value !== innerNumber) {\n            setInnerNumber(value);\n            setInnerString(formatValue(value, currencyOptions));\n        }\n    }, [value, currencyOptions, innerNumber]);\n    const innerValue = useMemo(() => { var _a; return (innerType === 'number' ? (_a = innerNumber === null || innerNumber === void 0 ? void 0 : innerNumber.toString()) !== null && _a !== void 0 ? _a : '' : innerString !== null && innerString !== void 0 ? innerString : ''); }, [innerType, innerNumber, innerString]);\n    return {\n        inputRef,\n        innerValue,\n        innerType,\n        handleOnFocus,\n        handleOnChange,\n        handleOnBlur,\n    };\n}\n//# sourceMappingURL=useInputCurrency.js.map"],"names":[],"mappings":";;;;AAGA,SAAS,WAAW,CAAC,KAAK,EAAE,eAAe,EAAE;AAC7C,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE;AAC7B,QAAQ,OAAO,EAAE;AACjB,IAAI;AACJ,IAAI,OAAO,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,eAAe,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE;AACtG;AACe,SAAS,gBAAgB,CAAC,eAAe,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE;AACrH,IAAI,MAAM,QAAQ,GAAG,sBAAsB,CAAC,GAAG,CAAC;AAChD,IAAI,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,QAAQ,KAAK;AACjD,QAAQ,IAAI,QAAQ,KAAK,SAAS,EAAE;AACpC,YAAY,OAAO,QAAQ;AAC3B,QAAQ;AACR,QAAQ,IAAI,YAAY,GAAG,QAAQ;AACnC,QAAQ,IAAI,QAAQ,KAAK,SAAS,EAAE;AACpC,YAAY,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,QAAQ,CAAC;AAC3D,QAAQ;AACR,QAAQ,IAAI,QAAQ,KAAK,SAAS,EAAE;AACpC,YAAY,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,QAAQ,CAAC;AAC3D,QAAQ;AACR,QAAQ,OAAO,YAAY;AAC3B,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC5B,IAAI,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC;AACtD,IAAI,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;AACrE,IAAI,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,eAAe,CAAC,CAAC;AACnG,IAAI,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,KAAK,KAAK;AACjD,QAAQ,KAAK,CAAC,eAAe,EAAE;AAC/B,QAAQ,YAAY,CAAC,QAAQ,CAAC;AAC9B,QAAQ,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC;AACxE,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AACjB,IAAI,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,KAAK,KAAK;AAChD,QAAQ,KAAK,CAAC,eAAe,EAAE;AAC/B,QAAQ,YAAY,CAAC,MAAM,CAAC;AAC5B,QAAQ,MAAM,aAAa,GAAG,UAAU,CAAC,WAAW,CAAC;AACrD,QAAQ,IAAI,aAAa,KAAK,WAAW,EAAE;AAC3C,YAAY,cAAc,CAAC,aAAa,CAAC;AACzC,YAAY,cAAc,CAAC,WAAW,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC;AACvE,YAAY,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC;AACvF,QAAQ;AACR,QAAQ,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC;AACrE,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC;AACpE,IAAI,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,QAAQ,KAAK;AACrD,QAAQ,MAAM,SAAS,GAAG,CAAC,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,EAAE,IAAI,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC;AACpG,QAAQ,IAAI,SAAS,KAAK,WAAW,EAAE;AACvC,YAAY,cAAc,CAAC,SAAS,CAAC;AACrC,YAAY,cAAc,CAAC,WAAW,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;AACnE,YAAY,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC,SAAS,CAAC;AACnF,QAAQ;AACR,IAAI,CAAC,EAAE,CAAC,eAAe,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;AAChD,IAAI,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC;AACtC,IAAI,SAAS,CAAC,MAAM;AACpB,QAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;AACnC,YAAY,YAAY,CAAC,OAAO,GAAG,IAAI;AACvC,YAAY;AACZ,QAAQ;AACR,QAAQ,IAAI,KAAK,KAAK,WAAW,EAAE;AACnC,YAAY,cAAc,CAAC,KAAK,CAAC;AACjC,YAAY,cAAc,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC;AAC/D,QAAQ;AACR,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,WAAW,CAAC,CAAC;AAC7C,IAAI,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,QAAQ,SAAS,KAAK,QAAQ,GAAG,CAAC,EAAE,GAAG,WAAW,KAAK,IAAI,IAAI,WAAW,KAAK,MAAM,GAAG,MAAM,GAAG,WAAW,CAAC,QAAQ,EAAE,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,EAAE,GAAG,EAAE,GAAG,WAAW,KAAK,IAAI,IAAI,WAAW,KAAK,MAAM,GAAG,WAAW,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC;AAC3T,IAAI,OAAO;AACX,QAAQ,QAAQ;AAChB,QAAQ,UAAU;AAClB,QAAQ,SAAS;AACjB,QAAQ,aAAa;AACrB,QAAQ,cAAc;AACtB,QAAQ,YAAY;AACpB,KAAK;AACL;;;;"}
+{"version":3,"file":"useInputCurrency.js","sources":["../../../dist-transpiled/hooks/useInputCurrency.js"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';\nimport currency from 'currency.js';\nimport useProvidedRefOrCreate from './useProvidedRefOrCreate';\nfunction formatValue(value, currencyOptions) {\n    if (value === undefined) {\n        return '';\n    }\n    return currency(value, Object.assign(Object.assign({}, currencyOptions), { symbol: '' })).format();\n}\n/**\n * State and handlers for a currency input: a formatted string while the field\n * is idle and the raw number while it is being edited.\n *\n * `minValue`/`maxValue` bound the value. With `clamp` (default `true`) an\n * out-of-range value is brought into range whenever it is not being typed:\n * on mount, when `value` or the bounds change, and on blur. Every time the\n * clamp changes the value, `onChange` receives the clamped number, so the\n * input and the consumer's state never disagree. While the field is focused\n * the typed number is reported as is, so a partial entry is not rewritten.\n *\n * With `clamp: false` the value is never changed: the bounds only feed\n * `isOverMax` / `isUnderMin`, so the consumer can show its own message (e.g.\n * \"You exceeded the limit\") and keep the entered amount.\n *\n * Controlled usage follows the same contract as a native controlled input:\n * reflect `onChange` into `value` in the same event (`setState` in the\n * handler). The hook keeps showing `value` whenever it isn't being edited, so\n * a consumer can reject a change by keeping `value` as it was. Deferring the\n * update (a timer, awaiting a request) makes the hook see a stale `value` in\n * between: the field can flash the previous amount and a clamp can be\n * reported again when the deferred value arrives.\n */\nexport default function useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref, minValue, maxValue, clamp = true) {\n    const inputRef = useProvidedRefOrCreate(ref);\n    const onChangeRef = useRef(onChange);\n    onChangeRef.current = onChange;\n    // Last clamp reported through `onChange`, as the value it came from and the\n    // value it produced. StrictMode replays effects, and a consumer may reflect\n    // `onChange` asynchronously, both before `value` catches up: the same clamp\n    // must not be reported twice.\n    const lastReportedClampRef = useRef(null);\n    const clampValue = useCallback((newValue) => {\n        if (newValue === undefined || !clamp) {\n            return newValue;\n        }\n        let clampedValue = newValue;\n        if (minValue !== undefined) {\n            clampedValue = Math.max(clampedValue, minValue);\n        }\n        if (maxValue !== undefined) {\n            clampedValue = Math.min(clampedValue, maxValue);\n        }\n        return clampedValue;\n    }, [minValue, maxValue, clamp]);\n    const [innerType, setInnerType] = useState('text');\n    const [innerNumber, setInnerNumber] = useState(() => clampValue(value));\n    const handleOnFocus = useCallback((event) => {\n        event.stopPropagation();\n        setInnerType('number');\n        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);\n    }, [onFocus]);\n    const handleOnBlur = useCallback((event) => {\n        event.stopPropagation();\n        setInnerType('text');\n        const clampedNumber = clampValue(innerNumber);\n        if (clampedNumber !== innerNumber) {\n            setInnerNumber(clampedNumber);\n            // Recorded before notifying, so the sync effect that runs when editing\n            // ends doesn't report the same clamp again while `value` still holds the\n            // typed number.\n            lastReportedClampRef.current = { from: value, to: clampedNumber };\n            onChange === null || onChange === void 0 ? void 0 : onChange(clampedNumber);\n        }\n        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n    }, [onBlur, innerNumber, clampValue, onChange, value]);\n    const handleOnChange = useCallback((newValue) => {\n        const newNumber = (newValue === undefined || newValue === '') ? undefined : Number(newValue);\n        if (newNumber !== innerNumber) {\n            setInnerNumber(newNumber);\n            onChange === null || onChange === void 0 ? void 0 : onChange(newNumber);\n        }\n    }, [onChange, innerNumber]);\n    const isEditing = innerType === 'number';\n    // Keep the inner value in sync with `value` and the bounds. While the user\n    // is typing, the consumer echoes the typed number back through `value`, so\n    // it is taken as is; otherwise it is clamped, and a clamp that changes it is\n    // reported through `onChange`.\n    useEffect(() => {\n        var _a;\n        const nextNumber = isEditing ? value : clampValue(value);\n        if (nextNumber !== innerNumber) {\n            setInnerNumber(nextNumber);\n        }\n        if (nextNumber !== value) {\n            const last = lastReportedClampRef.current;\n            if (!last || last.from !== value || last.to !== nextNumber) {\n                lastReportedClampRef.current = { from: value, to: nextNumber };\n                (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, nextNumber);\n            }\n        }\n        else {\n            lastReportedClampRef.current = null;\n        }\n        // `innerNumber` is read, not tracked: the effect reacts to the consumer's\n        // value and to the bounds, not to its own updates.\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value, clampValue, isEditing]);\n    // Derived, not stored: the formatted text always matches the current number\n    // and options, even when both change in the same render. It depends on the\n    // options object itself, so a new custom `format` function is honored too;\n    // formatting is cheap and doesn't feed the synchronization effect.\n    const innerString = useMemo(() => formatValue(innerNumber, currencyOptions), [innerNumber, currencyOptions]);\n    const innerValue = useMemo(() => { var _a; return (innerType === 'number' ? (_a = innerNumber === null || innerNumber === void 0 ? void 0 : innerNumber.toString()) !== null && _a !== void 0 ? _a : '' : innerString); }, [innerType, innerNumber, innerString]);\n    const isOverMax = maxValue !== undefined && innerNumber !== undefined && innerNumber > maxValue;\n    const isUnderMin = minValue !== undefined && innerNumber !== undefined && innerNumber < minValue;\n    return {\n        inputRef,\n        innerValue,\n        innerType,\n        isOverMax,\n        isUnderMin,\n        handleOnFocus,\n        handleOnChange,\n        handleOnBlur,\n    };\n}\n//# sourceMappingURL=useInputCurrency.js.map"],"names":[],"mappings":"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"}

package/dist/esm/hooks/useMediaBreakpointUp.js

@@ -1,10 +1,49 @@
 import { useMemo } from 'react';
 import { useDContext } from '../contexts/DContext.js';
+import { PREFIX_BS } from '../components/config.js';
 import useMediaQuery from './useMediaQuery.js';
 
-function useMediaBreakpointUp(breakpoint, useListener = false) {
+const BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+// Breakpoints read from the CSS on first use and shared by every component
+// that resolves responsive props: one computed-style read for the page,
+// instead of one per breakpoint per render. `dynamic-ui.css` has to be loaded
+// before rendering; if it isn't, the empty result is kept too, so a
+// misconfigured tree doesn't pay the read on every render (responsive props
+// then keep their default value and useResponsiveProp warns in development).
+let cssBreakpoints = null;
+function readCssBreakpoint(breakpoint) {
+    if (cssBreakpoints)
+        return cssBreakpoints[breakpoint];
+    if (typeof document === 'undefined')
+        return '';
+    const style = getComputedStyle(document.documentElement);
+    const read = Object.fromEntries(BREAKPOINTS.map((name) => [
+        name,
+        style.getPropertyValue(`--${PREFIX_BS}breakpoint-${name}`).trim(),
+    ]));
+    cssBreakpoints = read;
+    return read[breakpoint];
+}
+/** Clears the cached CSS breakpoints. Only meant for tests. */
+function resetCssBreakpointsCache() {
+    cssBreakpoints = null;
+}
+/**
+ * Pixel value of a breakpoint. `DContextProvider` reads them from the CSS and
+ * shares them through the context; outside of it (a tree without the
+ * provider, or its first render) they are read from the same CSS variables
+ * here, so responsive props resolve either way.
+ */
+function useBreakpointValue(breakpoint) {
     const { breakpoints } = useDContext();
-    const mediaQuery = useMemo(() => (`(min-width: ${breakpoints[breakpoint]})`), [breakpoint, breakpoints]);
+    const fromContext = breakpoints[breakpoint];
+    return useMemo(() => fromContext || readCssBreakpoint(breakpoint), [fromContext, breakpoint]);
+}
+function useMediaBreakpointUp(breakpoint, useListener = false) {
+    const value = useBreakpointValue(breakpoint);
+    // Without a breakpoint the query can't match; `not all` keeps it false
+    // instead of an invalid `(min-width: )`.
+    const mediaQuery = value ? `(min-width: ${value})` : 'not all';
     return useMediaQuery(mediaQuery, useListener);
 }
 function useMediaBreakpointUpXs(useListener = false) {
@@ -26,5 +65,5 @@ function useMediaBreakpointUpXxl(useListener = false) {
     return useMediaBreakpointUp('xxl', useListener);
 }
 
-export { useMediaBreakpointUpLg, useMediaBreakpointUpMd, useMediaBreakpointUpSm, useMediaBreakpointUpXl, useMediaBreakpointUpXs, useMediaBreakpointUpXxl };
+export { resetCssBreakpointsCache, useBreakpointValue, useMediaBreakpointUpLg, useMediaBreakpointUpMd, useMediaBreakpointUpSm, useMediaBreakpointUpXl, useMediaBreakpointUpXs, useMediaBreakpointUpXxl };
 //# sourceMappingURL=useMediaBreakpointUp.js.map

package/dist/esm/hooks/useMediaBreakpointUp.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMediaBreakpointUp.js","sources":["../../../dist-transpiled/hooks/useMediaBreakpointUp.js"],"sourcesContent":["import { useMemo } from 'react';\nimport { useDContext } from '../contexts/DContext';\nimport useMediaQuery from './useMediaQuery';\nfunction useMediaBreakpointUp(breakpoint, useListener = false) {\n    const { breakpoints } = useDContext();\n    const mediaQuery = useMemo(() => (`(min-width: ${breakpoints[breakpoint]})`), [breakpoint, breakpoints]);\n    return useMediaQuery(mediaQuery, useListener);\n}\nexport function useMediaBreakpointUpXs(useListener = false) {\n    return useMediaBreakpointUp('xs', useListener);\n}\nexport function useMediaBreakpointUpSm(useListener = false) {\n    return useMediaBreakpointUp('sm', useListener);\n}\nexport function useMediaBreakpointUpMd(useListener = false) {\n    return useMediaBreakpointUp('md', useListener);\n}\nexport function useMediaBreakpointUpLg(useListener = false) {\n    return useMediaBreakpointUp('lg', useListener);\n}\nexport function useMediaBreakpointUpXl(useListener = false) {\n    return useMediaBreakpointUp('xl', useListener);\n}\nexport function useMediaBreakpointUpXxl(useListener = false) {\n    return useMediaBreakpointUp('xxl', useListener);\n}\n//# sourceMappingURL=useMediaBreakpointUp.js.map"],"names":[],"mappings":";;;;AAGA,SAAS,oBAAoB,CAAC,UAAU,EAAE,WAAW,GAAG,KAAK,EAAE;AAC/D,IAAI,MAAM,EAAE,WAAW,EAAE,GAAG,WAAW,EAAE;AACzC,IAAI,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,YAAY,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;AAC5G,IAAI,OAAO,aAAa,CAAC,UAAU,EAAE,WAAW,CAAC;AACjD;AACO,SAAS,sBAAsB,CAAC,WAAW,GAAG,KAAK,EAAE;AAC5D,IAAI,OAAO,oBAAoB,CAAC,IAAI,EAAE,WAAW,CAAC;AAClD;AACO,SAAS,sBAAsB,CAAC,WAAW,GAAG,KAAK,EAAE;AAC5D,IAAI,OAAO,oBAAoB,CAAC,IAAI,EAAE,WAAW,CAAC;AAClD;AACO,SAAS,sBAAsB,CAAC,WAAW,GAAG,KAAK,EAAE;AAC5D,IAAI,OAAO,oBAAoB,CAAC,IAAI,EAAE,WAAW,CAAC;AAClD;AACO,SAAS,sBAAsB,CAAC,WAAW,GAAG,KAAK,EAAE;AAC5D,IAAI,OAAO,oBAAoB,CAAC,IAAI,EAAE,WAAW,CAAC;AAClD;AACO,SAAS,sBAAsB,CAAC,WAAW,GAAG,KAAK,EAAE;AAC5D,IAAI,OAAO,oBAAoB,CAAC,IAAI,EAAE,WAAW,CAAC;AAClD;AACO,SAAS,uBAAuB,CAAC,WAAW,GAAG,KAAK,EAAE;AAC7D,IAAI,OAAO,oBAAoB,CAAC,KAAK,EAAE,WAAW,CAAC;AACnD;;;;"}
+{"version":3,"file":"useMediaBreakpointUp.js","sources":["../../../dist-transpiled/hooks/useMediaBreakpointUp.js"],"sourcesContent":["import { useMemo } from 'react';\nimport { useDContext } from '../contexts/DContext';\nimport { PREFIX_BS } from '../components/config';\nimport useMediaQuery from './useMediaQuery';\nconst BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];\n// Breakpoints read from the CSS on first use and shared by every component\n// that resolves responsive props: one computed-style read for the page,\n// instead of one per breakpoint per render. `dynamic-ui.css` has to be loaded\n// before rendering; if it isn't, the empty result is kept too, so a\n// misconfigured tree doesn't pay the read on every render (responsive props\n// then keep their default value and useResponsiveProp warns in development).\nlet cssBreakpoints = null;\nfunction readCssBreakpoint(breakpoint) {\n    if (cssBreakpoints)\n        return cssBreakpoints[breakpoint];\n    if (typeof document === 'undefined')\n        return '';\n    const style = getComputedStyle(document.documentElement);\n    const read = Object.fromEntries(BREAKPOINTS.map((name) => [\n        name,\n        style.getPropertyValue(`--${PREFIX_BS}breakpoint-${name}`).trim(),\n    ]));\n    cssBreakpoints = read;\n    return read[breakpoint];\n}\n/** Clears the cached CSS breakpoints. Only meant for tests. */\nexport function resetCssBreakpointsCache() {\n    cssBreakpoints = null;\n}\n/**\n * Pixel value of a breakpoint. `DContextProvider` reads them from the CSS and\n * shares them through the context; outside of it (a tree without the\n * provider, or its first render) they are read from the same CSS variables\n * here, so responsive props resolve either way.\n */\nexport function useBreakpointValue(breakpoint) {\n    const { breakpoints } = useDContext();\n    const fromContext = breakpoints[breakpoint];\n    return useMemo(() => fromContext || readCssBreakpoint(breakpoint), [fromContext, breakpoint]);\n}\nfunction useMediaBreakpointUp(breakpoint, useListener = false) {\n    const value = useBreakpointValue(breakpoint);\n    // Without a breakpoint the query can't match; `not all` keeps it false\n    // instead of an invalid `(min-width: )`.\n    const mediaQuery = value ? `(min-width: ${value})` : 'not all';\n    return useMediaQuery(mediaQuery, useListener);\n}\nexport function useMediaBreakpointUpXs(useListener = false) {\n    return useMediaBreakpointUp('xs', useListener);\n}\nexport function useMediaBreakpointUpSm(useListener = false) {\n    return useMediaBreakpointUp('sm', useListener);\n}\nexport function useMediaBreakpointUpMd(useListener = false) {\n    return useMediaBreakpointUp('md', useListener);\n}\nexport function useMediaBreakpointUpLg(useListener = false) {\n    return useMediaBreakpointUp('lg', useListener);\n}\nexport function useMediaBreakpointUpXl(useListener = false) {\n    return useMediaBreakpointUp('xl', useListener);\n}\nexport function useMediaBreakpointUpXxl(useListener = false) {\n    return useMediaBreakpointUp('xxl', useListener);\n}\n//# sourceMappingURL=useMediaBreakpointUp.js.map"],"names":[],"mappings":";;;;;AAIA,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC;AACzD;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,cAAc,GAAG,IAAI;AACzB,SAAS,iBAAiB,CAAC,UAAU,EAAE;AACvC,IAAI,IAAI,cAAc;AACtB,QAAQ,OAAO,cAAc,CAAC,UAAU,CAAC;AACzC,IAAI,IAAI,OAAO,QAAQ,KAAK,WAAW;AACvC,QAAQ,OAAO,EAAE;AACjB,IAAI,MAAM,KAAK,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC;AAC5D,IAAI,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK;AAC9D,QAAQ,IAAI;AACZ,QAAQ,KAAK,CAAC,gBAAgB,CAAC,CAAC,EAAE,EAAE,SAAS,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE;AACzE,KAAK,CAAC,CAAC;AACP,IAAI,cAAc,GAAG,IAAI;AACzB,IAAI,OAAO,IAAI,CAAC,UAAU,CAAC;AAC3B;AACA;AACO,SAAS,wBAAwB,GAAG;AAC3C,IAAI,cAAc,GAAG,IAAI;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAAS,kBAAkB,CAAC,UAAU,EAAE;AAC/C,IAAI,MAAM,EAAE,WAAW,EAAE,GAAG,WAAW,EAAE;AACzC,IAAI,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC;AAC/C,IAAI,OAAO,OAAO,CAAC,MAAM,WAAW,IAAI,iBAAiB,CAAC,UAAU,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;AACjG;AACA,SAAS,oBAAoB,CAAC,UAAU,EAAE,WAAW,GAAG,KAAK,EAAE;AAC/D,IAAI,MAAM,KAAK,GAAG,kBAAkB,CAAC,UAAU,CAAC;AAChD;AACA;AACA,IAAI,MAAM,UAAU,GAAG,KAAK,GAAG,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS;AAClE,IAAI,OAAO,aAAa,CAAC,UAAU,EAAE,WAAW,CAAC;AACjD;AACO,SAAS,sBAAsB,CAAC,WAAW,GAAG,KAAK,EAAE;AAC5D,IAAI,OAAO,oBAAoB,CAAC,IAAI,EAAE,WAAW,CAAC;AAClD;AACO,SAAS,sBAAsB,CAAC,WAAW,GAAG,KAAK,EAAE;AAC5D,IAAI,OAAO,oBAAoB,CAAC,IAAI,EAAE,WAAW,CAAC;AAClD;AACO,SAAS,sBAAsB,CAAC,WAAW,GAAG,KAAK,EAAE;AAC5D,IAAI,OAAO,oBAAoB,CAAC,IAAI,EAAE,WAAW,CAAC;AAClD;AACO,SAAS,sBAAsB,CAAC,WAAW,GAAG,KAAK,EAAE;AAC5D,IAAI,OAAO,oBAAoB,CAAC,IAAI,EAAE,WAAW,CAAC;AAClD;AACO,SAAS,sBAAsB,CAAC,WAAW,GAAG,KAAK,EAAE;AAC5D,IAAI,OAAO,oBAAoB,CAAC,IAAI,EAAE,WAAW,CAAC;AAClD;AACO,SAAS,uBAAuB,CAAC,WAAW,GAAG,KAAK,EAAE;AAC7D,IAAI,OAAO,oBAAoB,CAAC,KAAK,EAAE,WAAW,CAAC;AACnD;;;;"}

package/dist/esm/hooks/useResponsiveProp.js

@@ -1,6 +1,8 @@
 import { useCallback } from 'react';
-import { useMediaBreakpointUpXs, useMediaBreakpointUpSm, useMediaBreakpointUpMd, useMediaBreakpointUpLg, useMediaBreakpointUpXl, useMediaBreakpointUpXxl } from './useMediaBreakpointUp.js';
+import { PREFIX_BS } from '../components/config.js';
+import { useMediaBreakpointUpXs, useMediaBreakpointUpSm, useMediaBreakpointUpMd, useMediaBreakpointUpLg, useMediaBreakpointUpXl, useMediaBreakpointUpXxl, useBreakpointValue } from './useMediaBreakpointUp.js';
 
+let warnedMissingBreakpoints = false;
 /**
  * React hook to resolve a responsive property value based on the current viewport breakpoint.
  *
@@ -26,7 +28,16 @@ function useResponsiveProp(useListener = false) {
     const bpLgUp = useMediaBreakpointUpLg(useListener);
     const bpXlUp = useMediaBreakpointUpXl(useListener);
     const bpXxlUp = useMediaBreakpointUpXxl(useListener);
+    // `xs` is `0` and can't tell a missing variable apart, so `sm` is checked.
+    const hasBreakpoints = !!useBreakpointValue('sm');
     const responsivePropValue = useCallback((prop) => {
+        if (process.env.NODE_ENV !== 'production' && !hasBreakpoints && !warnedMissingBreakpoints) {
+            warnedMissingBreakpoints = true;
+            // eslint-disable-next-line no-console
+            console.warn(`[Dynamic UI] The --${PREFIX_BS}breakpoint-* CSS variables are not available, so a `
+                + 'responsive prop (an object by breakpoint) falls back to its default value. Load '
+                + 'dynamic-ui.css before rendering. It never appears in production builds.');
+        }
         // Pick the highest matched breakpoint value that is defined in prop
         if (prop.xxl !== undefined && bpXxlUp)
             return prop.xxl;
@@ -42,7 +53,7 @@ function useResponsiveProp(useListener = false) {
             return prop.xs;
         // Fallback: return undefined if no breakpoint matches
         return undefined;
-    }, [bpSmUp, bpMdUp, bpLgUp, bpXlUp, bpXxlUp, bpXsUp]);
+    }, [bpSmUp, bpMdUp, bpLgUp, bpXlUp, bpXxlUp, bpXsUp, hasBreakpoints]);
     return { responsivePropValue };
 }
 

package/dist/esm/hooks/useResponsiveProp.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResponsiveProp.js","sources":["../../../dist-transpiled/hooks/useResponsiveProp.js"],"sourcesContent":["import { useCallback } from 'react';\nimport { useMediaBreakpointUpLg, useMediaBreakpointUpMd, useMediaBreakpointUpSm, useMediaBreakpointUpXl, useMediaBreakpointUpXs, useMediaBreakpointUpXxl, } from './useMediaBreakpointUp';\n/**\n * React hook to resolve a responsive property value based on the current viewport breakpoint.\n *\n * Given a `ResponsiveProp` object, this hook returns the value for the highest matching breakpoint.\n * If multiple breakpoints match, the value for the largest (highest) breakpoint is used.\n * If no breakpoints match, `undefined` is returned.\n *\n * @param useListener - Whether to listen for breakpoint changes (default: false).\n * @returns An object with a `responsivePropValue` function that takes a\n * `ResponsiveProp` and returns the resolved value.\n *\n * Usage example:\n * ```ts\n * const { responsivePropValue } = useResponsiveProp();\n * const value = responsivePropValue({ xs: \"A\", md: \"B\", xl: \"C\" });\n * // value will be \"C\" if xl breakpoint is active, \"B\" if md is active, etc.\n * ```\n */\nexport function useResponsiveProp(useListener = false) {\n    const bpXsUp = useMediaBreakpointUpXs(useListener);\n    const bpSmUp = useMediaBreakpointUpSm(useListener);\n    const bpMdUp = useMediaBreakpointUpMd(useListener);\n    const bpLgUp = useMediaBreakpointUpLg(useListener);\n    const bpXlUp = useMediaBreakpointUpXl(useListener);\n    const bpXxlUp = useMediaBreakpointUpXxl(useListener);\n    const responsivePropValue = useCallback((prop) => {\n        // Pick the highest matched breakpoint value that is defined in prop\n        if (prop.xxl !== undefined && bpXxlUp)\n            return prop.xxl;\n        if (prop.xl !== undefined && bpXlUp)\n            return prop.xl;\n        if (prop.lg !== undefined && bpLgUp)\n            return prop.lg;\n        if (prop.md !== undefined && bpMdUp)\n            return prop.md;\n        if (prop.sm !== undefined && bpSmUp)\n            return prop.sm;\n        if (prop.xs !== undefined && bpXsUp)\n            return prop.xs;\n        // Fallback: return undefined if no breakpoint matches\n        return undefined;\n    }, [bpSmUp, bpMdUp, bpLgUp, bpXlUp, bpXxlUp, bpXsUp]);\n    return { responsivePropValue };\n}\n//# sourceMappingURL=useResponsiveProp.js.map"],"names":[],"mappings":";;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAAS,iBAAiB,CAAC,WAAW,GAAG,KAAK,EAAE;AACvD,IAAI,MAAM,MAAM,GAAG,sBAAsB,CAAC,WAAW,CAAC;AACtD,IAAI,MAAM,MAAM,GAAG,sBAAsB,CAAC,WAAW,CAAC;AACtD,IAAI,MAAM,MAAM,GAAG,sBAAsB,CAAC,WAAW,CAAC;AACtD,IAAI,MAAM,MAAM,GAAG,sBAAsB,CAAC,WAAW,CAAC;AACtD,IAAI,MAAM,MAAM,GAAG,sBAAsB,CAAC,WAAW,CAAC;AACtD,IAAI,MAAM,OAAO,GAAG,uBAAuB,CAAC,WAAW,CAAC;AACxD,IAAI,MAAM,mBAAmB,GAAG,WAAW,CAAC,CAAC,IAAI,KAAK;AACtD;AACA,QAAQ,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,OAAO;AAC7C,YAAY,OAAO,IAAI,CAAC,GAAG;AAC3B,QAAQ,IAAI,IAAI,CAAC,EAAE,KAAK,SAAS,IAAI,MAAM;AAC3C,YAAY,OAAO,IAAI,CAAC,EAAE;AAC1B,QAAQ,IAAI,IAAI,CAAC,EAAE,KAAK,SAAS,IAAI,MAAM;AAC3C,YAAY,OAAO,IAAI,CAAC,EAAE;AAC1B,QAAQ,IAAI,IAAI,CAAC,EAAE,KAAK,SAAS,IAAI,MAAM;AAC3C,YAAY,OAAO,IAAI,CAAC,EAAE;AAC1B,QAAQ,IAAI,IAAI,CAAC,EAAE,KAAK,SAAS,IAAI,MAAM;AAC3C,YAAY,OAAO,IAAI,CAAC,EAAE;AAC1B,QAAQ,IAAI,IAAI,CAAC,EAAE,KAAK,SAAS,IAAI,MAAM;AAC3C,YAAY,OAAO,IAAI,CAAC,EAAE;AAC1B;AACA,QAAQ,OAAO,SAAS;AACxB,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;AACzD,IAAI,OAAO,EAAE,mBAAmB,EAAE;AAClC;;;;"}
+{"version":3,"file":"useResponsiveProp.js","sources":["../../../dist-transpiled/hooks/useResponsiveProp.js"],"sourcesContent":["import { useCallback } from 'react';\nimport { PREFIX_BS } from '../components/config';\nimport { useBreakpointValue, useMediaBreakpointUpLg, useMediaBreakpointUpMd, useMediaBreakpointUpSm, useMediaBreakpointUpXl, useMediaBreakpointUpXs, useMediaBreakpointUpXxl, } from './useMediaBreakpointUp';\nlet warnedMissingBreakpoints = false;\n/**\n * React hook to resolve a responsive property value based on the current viewport breakpoint.\n *\n * Given a `ResponsiveProp` object, this hook returns the value for the highest matching breakpoint.\n * If multiple breakpoints match, the value for the largest (highest) breakpoint is used.\n * If no breakpoints match, `undefined` is returned.\n *\n * @param useListener - Whether to listen for breakpoint changes (default: false).\n * @returns An object with a `responsivePropValue` function that takes a\n * `ResponsiveProp` and returns the resolved value.\n *\n * Usage example:\n * ```ts\n * const { responsivePropValue } = useResponsiveProp();\n * const value = responsivePropValue({ xs: \"A\", md: \"B\", xl: \"C\" });\n * // value will be \"C\" if xl breakpoint is active, \"B\" if md is active, etc.\n * ```\n */\nexport function useResponsiveProp(useListener = false) {\n    const bpXsUp = useMediaBreakpointUpXs(useListener);\n    const bpSmUp = useMediaBreakpointUpSm(useListener);\n    const bpMdUp = useMediaBreakpointUpMd(useListener);\n    const bpLgUp = useMediaBreakpointUpLg(useListener);\n    const bpXlUp = useMediaBreakpointUpXl(useListener);\n    const bpXxlUp = useMediaBreakpointUpXxl(useListener);\n    // `xs` is `0` and can't tell a missing variable apart, so `sm` is checked.\n    const hasBreakpoints = !!useBreakpointValue('sm');\n    const responsivePropValue = useCallback((prop) => {\n        if (process.env.NODE_ENV !== 'production' && !hasBreakpoints && !warnedMissingBreakpoints) {\n            warnedMissingBreakpoints = true;\n            // eslint-disable-next-line no-console\n            console.warn(`[Dynamic UI] The --${PREFIX_BS}breakpoint-* CSS variables are not available, so a `\n                + 'responsive prop (an object by breakpoint) falls back to its default value. Load '\n                + 'dynamic-ui.css before rendering. It never appears in production builds.');\n        }\n        // Pick the highest matched breakpoint value that is defined in prop\n        if (prop.xxl !== undefined && bpXxlUp)\n            return prop.xxl;\n        if (prop.xl !== undefined && bpXlUp)\n            return prop.xl;\n        if (prop.lg !== undefined && bpLgUp)\n            return prop.lg;\n        if (prop.md !== undefined && bpMdUp)\n            return prop.md;\n        if (prop.sm !== undefined && bpSmUp)\n            return prop.sm;\n        if (prop.xs !== undefined && bpXsUp)\n            return prop.xs;\n        // Fallback: return undefined if no breakpoint matches\n        return undefined;\n    }, [bpSmUp, bpMdUp, bpLgUp, bpXlUp, bpXxlUp, bpXsUp, hasBreakpoints]);\n    return { responsivePropValue };\n}\n//# sourceMappingURL=useResponsiveProp.js.map"],"names":[],"mappings":";;;;AAGA,IAAI,wBAAwB,GAAG,KAAK;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAAS,iBAAiB,CAAC,WAAW,GAAG,KAAK,EAAE;AACvD,IAAI,MAAM,MAAM,GAAG,sBAAsB,CAAC,WAAW,CAAC;AACtD,IAAI,MAAM,MAAM,GAAG,sBAAsB,CAAC,WAAW,CAAC;AACtD,IAAI,MAAM,MAAM,GAAG,sBAAsB,CAAC,WAAW,CAAC;AACtD,IAAI,MAAM,MAAM,GAAG,sBAAsB,CAAC,WAAW,CAAC;AACtD,IAAI,MAAM,MAAM,GAAG,sBAAsB,CAAC,WAAW,CAAC;AACtD,IAAI,MAAM,OAAO,GAAG,uBAAuB,CAAC,WAAW,CAAC;AACxD;AACA,IAAI,MAAM,cAAc,GAAG,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC;AACrD,IAAI,MAAM,mBAAmB,GAAG,WAAW,CAAC,CAAC,IAAI,KAAK;AACtD,QAAQ,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,IAAI,CAAC,cAAc,IAAI,CAAC,wBAAwB,EAAE;AACnG,YAAY,wBAAwB,GAAG,IAAI;AAC3C;AACA,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC,mBAAmB,EAAE,SAAS,CAAC,mDAAmD;AAC5G,kBAAkB;AAClB,kBAAkB,yEAAyE,CAAC;AAC5F,QAAQ;AACR;AACA,QAAQ,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,OAAO;AAC7C,YAAY,OAAO,IAAI,CAAC,GAAG;AAC3B,QAAQ,IAAI,IAAI,CAAC,EAAE,KAAK,SAAS,IAAI,MAAM;AAC3C,YAAY,OAAO,IAAI,CAAC,EAAE;AAC1B,QAAQ,IAAI,IAAI,CAAC,EAAE,KAAK,SAAS,IAAI,MAAM;AAC3C,YAAY,OAAO,IAAI,CAAC,EAAE;AAC1B,QAAQ,IAAI,IAAI,CAAC,EAAE,KAAK,SAAS,IAAI,MAAM;AAC3C,YAAY,OAAO,IAAI,CAAC,EAAE;AAC1B,QAAQ,IAAI,IAAI,CAAC,EAAE,KAAK,SAAS,IAAI,MAAM;AAC3C,YAAY,OAAO,IAAI,CAAC,EAAE;AAC1B,QAAQ,IAAI,IAAI,CAAC,EAAE,KAAK,SAAS,IAAI,MAAM;AAC3C,YAAY,OAAO,IAAI,CAAC,EAAE;AAC1B;AACA,QAAQ,OAAO,SAAS;AACxB,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,CAAC,CAAC;AACzE,IAAI,OAAO,EAAE,mBAAmB,EAAE;AAClC;;;;"}

package/dist/esm/index.js

@@ -60,6 +60,7 @@ export { default as DStepperDesktop } from './components/DStepperDesktop/DSteppe
 export { default as DStepperMobile } from './components/DStepperMobile/DStepperMobile.js';
 export { default as DTabContent } from './components/DTabs/components/DTabContent.js';
 export { default as DTabs } from './components/DTabs/DTabs.js';
+export { default as DTabsProvider } from './components/DTabs/components/DTabsProvider.js';
 export { useTabContext } from './components/DTabs/TabContext.js';
 export { default as DTimeline } from './components/DTimeline/DTimeline.js';
 export { default as DToast } from './components/DToast/DToast.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/utils/hasLabelContent.js

@@ -0,0 +1,48 @@
+import { isValidElement } from 'react';
+
+/**
+ * Whether a `label` node has something to render.
+ *
+ * The render paths cannot test `label` for truthiness: since the prop widened
+ * to `ReactNode` it also accepts `0`, which React renders as the text "0" and
+ * which `isTextLabel` counts as a text label, yet which a truthiness check
+ * would drop — leaving the control visibly unlabelled.
+ *
+ * Absent (`undefined`, `null`), empty (`''`) and boolean labels render nothing,
+ * so they are the ones that stand for "no label". The empty string matters
+ * because it is the default several components fall back to.
+ *
+ * Arrays are inspected rather than taken at face value: `label={items.map(...)}`
+ * over an empty list yields `[]`, while a list of skipped entries yields
+ * `[false, null]`. Both render nothing, so treating them as content would leave
+ * an empty `<label>` on the page — and make the naming warning fire over a
+ * label that was never there.
+ *
+ * Only arrays, though, even though `ReactNode` admits any iterable. Reading a
+ * one-shot iterator — a generator — would exhaust it here, and the component
+ * goes on to render the same value, so the label would vanish precisely because
+ * we checked for it. An array can be walked as often as needed; anything else
+ * is taken on faith.
+ *
+ * Anything else — an element, a portal, a generator — counts as content: what
+ * it renders is only knowable by rendering it, and an element that draws
+ * nothing visible is the consumer's decision rather than an absent label.
+ */
+function hasLabelContent(label) {
+    if (label === undefined || label === null || typeof label === 'boolean') {
+        return false;
+    }
+    if (typeof label === 'string') {
+        return label !== '';
+    }
+    if (isValidElement(label)) {
+        return true;
+    }
+    if (Array.isArray(label)) {
+        return label.some(hasLabelContent);
+    }
+    return true;
+}
+
+export { hasLabelContent as default };
+//# sourceMappingURL=hasLabelContent.js.map

package/dist/esm/utils/hasLabelContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hasLabelContent.js","sources":["../../../dist-transpiled/utils/hasLabelContent.js"],"sourcesContent":["import { isValidElement } from 'react';\n/**\n * Whether a `label` node has something to render.\n *\n * The render paths cannot test `label` for truthiness: since the prop widened\n * to `ReactNode` it also accepts `0`, which React renders as the text \"0\" and\n * which `isTextLabel` counts as a text label, yet which a truthiness check\n * would drop — leaving the control visibly unlabelled.\n *\n * Absent (`undefined`, `null`), empty (`''`) and boolean labels render nothing,\n * so they are the ones that stand for \"no label\". The empty string matters\n * because it is the default several components fall back to.\n *\n * Arrays are inspected rather than taken at face value: `label={items.map(...)}`\n * over an empty list yields `[]`, while a list of skipped entries yields\n * `[false, null]`. Both render nothing, so treating them as content would leave\n * an empty `<label>` on the page — and make the naming warning fire over a\n * label that was never there.\n *\n * Only arrays, though, even though `ReactNode` admits any iterable. Reading a\n * one-shot iterator — a generator — would exhaust it here, and the component\n * goes on to render the same value, so the label would vanish precisely because\n * we checked for it. An array can be walked as often as needed; anything else\n * is taken on faith.\n *\n * Anything else — an element, a portal, a generator — counts as content: what\n * it renders is only knowable by rendering it, and an element that draws\n * nothing visible is the consumer's decision rather than an absent label.\n */\nexport default function hasLabelContent(label) {\n    if (label === undefined || label === null || typeof label === 'boolean') {\n        return false;\n    }\n    if (typeof label === 'string') {\n        return label !== '';\n    }\n    if (isValidElement(label)) {\n        return true;\n    }\n    if (Array.isArray(label)) {\n        return label.some(hasLabelContent);\n    }\n    return true;\n}\n//# sourceMappingURL=hasLabelContent.js.map"],"names":[],"mappings":";;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,eAAe,CAAC,KAAK,EAAE;AAC/C,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;AAC7E,QAAQ,OAAO,KAAK;AACpB,IAAI;AACJ,IAAI,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AACnC,QAAQ,OAAO,KAAK,KAAK,EAAE;AAC3B,IAAI;AACJ,IAAI,IAAI,cAAc,CAAC,KAAK,CAAC,EAAE;AAC/B,QAAQ,OAAO,IAAI;AACnB,IAAI;AACJ,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AAC9B,QAAQ,OAAO,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;AAC1C,IAAI;AACJ,IAAI,OAAO,IAAI;AACf;;;;"}

package/dist/esm/utils/isTextLabel.js

@@ -0,0 +1,23 @@
+/**
+ * Narrows a `label` node to the plain-text case.
+ *
+ * `label` accepts any `ReactNode` so patterns like a terms-and-conditions link
+ * or an info trigger can live next to the field name. Anything that is not text
+ * cannot be forwarded to a string-only attribute (`aria-label`, `placeholder`)
+ * nor laid out by Bootstrap's `form-floating`, so those paths check this first.
+ *
+ * Numbers and bigints count as text: React renders them as their string form
+ * and so does `String()`, which is what the string-only attributes end up
+ * receiving. `bigint` is part of `ReactNode` under these React types, so
+ * leaving it out made a label React draws as text get treated as a rich node.
+ * React 18 cannot render one, which `DFormLabel` handles by rendering its
+ * string form — the classification stays true for every supported React.
+ */
+function isTextLabel(label) {
+    return typeof label === 'string'
+        || typeof label === 'number'
+        || typeof label === 'bigint';
+}
+
+export { isTextLabel as default };
+//# sourceMappingURL=isTextLabel.js.map

package/dist/esm/utils/isTextLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isTextLabel.js","sources":["../../../dist-transpiled/utils/isTextLabel.js"],"sourcesContent":["/**\n * Narrows a `label` node to the plain-text case.\n *\n * `label` accepts any `ReactNode` so patterns like a terms-and-conditions link\n * or an info trigger can live next to the field name. Anything that is not text\n * cannot be forwarded to a string-only attribute (`aria-label`, `placeholder`)\n * nor laid out by Bootstrap's `form-floating`, so those paths check this first.\n *\n * Numbers and bigints count as text: React renders them as their string form\n * and so does `String()`, which is what the string-only attributes end up\n * receiving. `bigint` is part of `ReactNode` under these React types, so\n * leaving it out made a label React draws as text get treated as a rich node.\n * React 18 cannot render one, which `DFormLabel` handles by rendering its\n * string form — the classification stays true for every supported React.\n */\nexport default function isTextLabel(label) {\n    return typeof label === 'string'\n        || typeof label === 'number'\n        || typeof label === 'bigint';\n}\n//# sourceMappingURL=isTextLabel.js.map"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,WAAW,CAAC,KAAK,EAAE;AAC3C,IAAI,OAAO,OAAO,KAAK,KAAK;AAC5B,WAAW,OAAO,KAAK,KAAK;AAC5B,WAAW,OAAO,KAAK,KAAK,QAAQ;AACpC;;;;"}

package/dist/esm/utils/labelClickGuard.js

@@ -0,0 +1,61 @@
+/**
+ * Descendants the browser already exempts from a label's click forwarding.
+ *
+ * Per the HTML spec a label does nothing for events targeted at its interactive
+ * content descendants, so these need — and must get — no help from us: calling
+ * `preventDefault` on a click targeting a link, or on an image map area, would
+ * cancel the navigation it was meant to perform.
+ *
+ * The list mirrors the spec's interactive content, image maps included, since
+ * one of those carrying a `tabindex` would otherwise fall through to the
+ * pseudo-interactive branch below and be suppressed by mistake.
+ */
+const NATIVE_INTERACTIVE = 'a[href], area[href], button, input, select, textarea, details, summary, img[usemap], object[usemap], audio[controls], video[controls], embed, iframe';
+/**
+ * Descendants that act like controls without being interactive content.
+ *
+ * A tooltip or modal trigger built from a `span` with a role and a tabindex is
+ * the common case. Browsers do not exempt these, so a click on one activates
+ * the labelled control as well.
+ */
+const PSEUDO_INTERACTIVE = '[role="button"], [role="link"], [role="checkbox"], [role="switch"], [role="menuitem"], [tabindex]';
+/**
+ * Stops a click on a non-native trigger inside a `<label>` from also activating
+ * the labelled control.
+ *
+ * Verified against Chromium, which forwards the click for every one of the
+ * `PSEUDO_INTERACTIVE` selectors above while exempting the native ones. Note
+ * that jsdom does not reproduce this: its `isInteractiveContent` counts any
+ * element carrying a `tabindex` as interactive content, so a jsdom test passes
+ * whether or not this guard exists. That is why the guard is unit-tested
+ * directly rather than through a rendered component.
+ *
+ * Native interactive content returns early rather than falling through, since
+ * `preventDefault` on those clicks would cancel the link navigation or the
+ * image map the label is meant to let through.
+ *
+ * `DFormLabel` wires this in the capture phase so a trigger that stops
+ * propagation cannot skip it.
+ */
+function labelClickGuard(event) {
+    const label = event.currentTarget;
+    const target = event.target;
+    if (!(target === null || target === void 0 ? void 0 : target.closest))
+        return;
+    /**
+     * `closest` walks the whole ancestor chain, so a match may sit above the
+     * label — a card with a `role` or a `tabindex` wrapping the control and its
+     * label, say. Acting on one of those would suppress the plain label text's
+     * own click and leave the control unresponsive, so only matches inside the
+     * label count.
+     */
+    const inside = (match) => (!!match && match !== label && label.contains(match));
+    if (inside(target.closest(NATIVE_INTERACTIVE)))
+        return;
+    if (inside(target.closest(PSEUDO_INTERACTIVE))) {
+        event.preventDefault();
+    }
+}
+
+export { labelClickGuard as default };
+//# sourceMappingURL=labelClickGuard.js.map

package/dist/esm/utils/labelClickGuard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"labelClickGuard.js","sources":["../../../dist-transpiled/utils/labelClickGuard.js"],"sourcesContent":["/**\n * Descendants the browser already exempts from a label's click forwarding.\n *\n * Per the HTML spec a label does nothing for events targeted at its interactive\n * content descendants, so these need — and must get — no help from us: calling\n * `preventDefault` on a click targeting a link, or on an image map area, would\n * cancel the navigation it was meant to perform.\n *\n * The list mirrors the spec's interactive content, image maps included, since\n * one of those carrying a `tabindex` would otherwise fall through to the\n * pseudo-interactive branch below and be suppressed by mistake.\n */\nconst NATIVE_INTERACTIVE = 'a[href], area[href], button, input, select, textarea, details, summary, img[usemap], object[usemap], audio[controls], video[controls], embed, iframe';\n/**\n * Descendants that act like controls without being interactive content.\n *\n * A tooltip or modal trigger built from a `span` with a role and a tabindex is\n * the common case. Browsers do not exempt these, so a click on one activates\n * the labelled control as well.\n */\nconst PSEUDO_INTERACTIVE = '[role=\"button\"], [role=\"link\"], [role=\"checkbox\"], [role=\"switch\"], [role=\"menuitem\"], [tabindex]';\n/**\n * Stops a click on a non-native trigger inside a `<label>` from also activating\n * the labelled control.\n *\n * Verified against Chromium, which forwards the click for every one of the\n * `PSEUDO_INTERACTIVE` selectors above while exempting the native ones. Note\n * that jsdom does not reproduce this: its `isInteractiveContent` counts any\n * element carrying a `tabindex` as interactive content, so a jsdom test passes\n * whether or not this guard exists. That is why the guard is unit-tested\n * directly rather than through a rendered component.\n *\n * Native interactive content returns early rather than falling through, since\n * `preventDefault` on those clicks would cancel the link navigation or the\n * image map the label is meant to let through.\n *\n * `DFormLabel` wires this in the capture phase so a trigger that stops\n * propagation cannot skip it.\n */\nexport default function labelClickGuard(event) {\n    const label = event.currentTarget;\n    const target = event.target;\n    if (!(target === null || target === void 0 ? void 0 : target.closest))\n        return;\n    /**\n     * `closest` walks the whole ancestor chain, so a match may sit above the\n     * label — a card with a `role` or a `tabindex` wrapping the control and its\n     * label, say. Acting on one of those would suppress the plain label text's\n     * own click and leave the control unresponsive, so only matches inside the\n     * label count.\n     */\n    const inside = (match) => (!!match && match !== label && label.contains(match));\n    if (inside(target.closest(NATIVE_INTERACTIVE)))\n        return;\n    if (inside(target.closest(PSEUDO_INTERACTIVE))) {\n        event.preventDefault();\n    }\n}\n//# sourceMappingURL=labelClickGuard.js.map"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,kBAAkB,GAAG,sJAAsJ;AACjL;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,kBAAkB,GAAG,mGAAmG;AAC9H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,eAAe,CAAC,KAAK,EAAE;AAC/C,IAAI,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa;AACrC,IAAI,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM;AAC/B,IAAI,IAAI,EAAE,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC;AACzE,QAAQ;AACR;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,MAAM,MAAM,GAAG,CAAC,KAAK,MAAM,CAAC,CAAC,KAAK,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AACnF,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;AAClD,QAAQ;AACR,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,EAAE;AACpD,QAAQ,KAAK,CAAC,cAAc,EAAE;AAC9B,IAAI;AACJ;;;;"}

package/dist/esm/utils/warnLabelUsage.js

@@ -0,0 +1,57 @@
+import hasLabelContent from './hasLabelContent.js';
+import isTextLabel from './isTextLabel.js';
+
+/**
+ * Components already reported, keyed by component and reason, so the same
+ * mistake only warns once per page load however often it re-renders or however
+ * many instances exist.
+ */
+const warnedLabels = new Set();
+function warnOnce(key, message) {
+    if (warnedLabels.has(key))
+        return;
+    warnedLabels.add(key);
+    // eslint-disable-next-line no-console
+    console.warn(`[Dynamic UI] ${message} It never appears in production builds.`);
+}
+/**
+ * Warns, only outside production builds, about the two ways a non-text `label`
+ * goes wrong.
+ *
+ * A text label doubles as the control's accessible name. A `ReactNode` one does
+ * not: the name becomes whatever the subtree happens to compute to, which for a
+ * label carrying a link or an icon trigger reads as the wrong thing or as
+ * nothing at all — so an explicit name is needed. Which prop carries it differs
+ * per component, hence `accessibleNameProp`: naming the wrong one would send
+ * the developer to a prop their component rejects.
+ *
+ * `form-floating` is the second case: it animates a single line of text between
+ * the placeholder and the label position, so a node with its own height or its
+ * own interactive children breaks the layout rather than the semantics.
+ *
+ * Labels the render paths drop are skipped through the same `hasLabelContent`
+ * they use, so `label={condition && <span />}` with a false condition warns
+ * about nothing: there is no label on the page to name.
+ *
+ * The `process.env.NODE_ENV` guard belongs at the call site — that is what
+ * bundlers constant-fold, dropping this module from a consumer's production
+ * bundle.
+ */
+function warnLabelUsage({ component, label, hasAccessibleName, accessibleNameProp, floatingLabel = false, }) {
+    if (!hasLabelContent(label) || isTextLabel(label))
+        return;
+    if (!hasAccessibleName) {
+        warnOnce(`${component}:name`, `${component}: a non-text "label" does not give the control a reliable accessible name. `
+            + `Pass ${accessibleNameProp} with the plain-text name of the field, since the label `
+            + 'subtree may include links, icons or markup that read as the wrong name or as none at all.');
+    }
+    if (floatingLabel) {
+        warnOnce(`${component}:floating`, `${component}: "floatingLabel" expects a text "label". `
+            + 'The floating layout animates a single line of text, so a node with its own height '
+            + 'or its own interactive children overflows the control. '
+            + 'Use the default label layout for rich labels.');
+    }
+}
+
+export { warnLabelUsage as default };
+//# sourceMappingURL=warnLabelUsage.js.map

package/dist/esm/utils/warnLabelUsage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"warnLabelUsage.js","sources":["../../../dist-transpiled/utils/warnLabelUsage.js"],"sourcesContent":["import hasLabelContent from './hasLabelContent';\nimport isTextLabel from './isTextLabel';\n/**\n * Components already reported, keyed by component and reason, so the same\n * mistake only warns once per page load however often it re-renders or however\n * many instances exist.\n */\nconst warnedLabels = new Set();\nfunction warnOnce(key, message) {\n    if (warnedLabels.has(key))\n        return;\n    warnedLabels.add(key);\n    // eslint-disable-next-line no-console\n    console.warn(`[Dynamic UI] ${message} It never appears in production builds.`);\n}\n/**\n * Warns, only outside production builds, about the two ways a non-text `label`\n * goes wrong.\n *\n * A text label doubles as the control's accessible name. A `ReactNode` one does\n * not: the name becomes whatever the subtree happens to compute to, which for a\n * label carrying a link or an icon trigger reads as the wrong thing or as\n * nothing at all — so an explicit name is needed. Which prop carries it differs\n * per component, hence `accessibleNameProp`: naming the wrong one would send\n * the developer to a prop their component rejects.\n *\n * `form-floating` is the second case: it animates a single line of text between\n * the placeholder and the label position, so a node with its own height or its\n * own interactive children breaks the layout rather than the semantics.\n *\n * Labels the render paths drop are skipped through the same `hasLabelContent`\n * they use, so `label={condition && <span />}` with a false condition warns\n * about nothing: there is no label on the page to name.\n *\n * The `process.env.NODE_ENV` guard belongs at the call site — that is what\n * bundlers constant-fold, dropping this module from a consumer's production\n * bundle.\n */\nexport default function warnLabelUsage({ component, label, hasAccessibleName, accessibleNameProp, floatingLabel = false, }) {\n    if (!hasLabelContent(label) || isTextLabel(label))\n        return;\n    if (!hasAccessibleName) {\n        warnOnce(`${component}:name`, `${component}: a non-text \"label\" does not give the control a reliable accessible name. `\n            + `Pass ${accessibleNameProp} with the plain-text name of the field, since the label `\n            + 'subtree may include links, icons or markup that read as the wrong name or as none at all.');\n    }\n    if (floatingLabel) {\n        warnOnce(`${component}:floating`, `${component}: \"floatingLabel\" expects a text \"label\". `\n            + 'The floating layout animates a single line of text, so a node with its own height '\n            + 'or its own interactive children overflows the control. '\n            + 'Use the default label layout for rich labels.');\n    }\n}\n//# sourceMappingURL=warnLabelUsage.js.map"],"names":[],"mappings":";;;AAEA;AACA;AACA;AACA;AACA;AACA,MAAM,YAAY,GAAG,IAAI,GAAG,EAAE;AAC9B,SAAS,QAAQ,CAAC,GAAG,EAAE,OAAO,EAAE;AAChC,IAAI,IAAI,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC;AAC7B,QAAQ;AACR,IAAI,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC;AACzB;AACA,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,aAAa,EAAE,OAAO,CAAC,uCAAuC,CAAC,CAAC;AAClF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,cAAc,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,aAAa,GAAG,KAAK,GAAG,EAAE;AAC5H,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,WAAW,CAAC,KAAK,CAAC;AACrD,QAAQ;AACR,IAAI,IAAI,CAAC,iBAAiB,EAAE;AAC5B,QAAQ,QAAQ,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC,2EAA2E;AAC9H,cAAc,CAAC,KAAK,EAAE,kBAAkB,CAAC,wDAAwD;AACjG,cAAc,2FAA2F,CAAC;AAC1G,IAAI;AACJ,IAAI,IAAI,aAAa,EAAE;AACvB,QAAQ,QAAQ,CAAC,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC,0CAA0C;AACjG,cAAc;AACd,cAAc;AACd,cAAc,+CAA+C,CAAC;AAC9D,IAAI;AACJ;;;;"}