@dynamic-framework/ui-react 2.9.0 → 2.11.0

package/dist/esm/components/DInputCounter/DInputCounter.js

@@ -0,0 +1,107 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useCallback, useEffect, useMemo } from 'react';
+import ForwardedDInput from '../DInput/DInput.js';
+import { PREFIX_BS } from '../config.js';
+import useProvidedRefOrCreate from '../../hooks/useProvidedRefOrCreate.js';
+import useControlledState from '../../hooks/useControlledState.js';
+import useDisableInputWheel from '../../hooks/useDisableInputWheel.js';
+import { useDContext } from '../../contexts/DContext.js';
+
+function DInputCounter(_a, ref) {
+    var { minValue, maxValue, value, defaultValue, invalid, iconStart: iconStartProp, iconEnd: iconEndProp, iconStartAriaLabel = 'decrease action', iconEndAriaLabel = 'increase action', style, onChange } = _a, props = __rest(_a, ["minValue", "maxValue", "value", "defaultValue", "invalid", "iconStart", "iconEnd", "iconStartAriaLabel", "iconEndAriaLabel", "style", "onChange"]);
+    const { handleOnWheel, } = useDisableInputWheel(ref);
+    const inputRef = useProvidedRefOrCreate(ref);
+    // See `useControlledState` for why `onChange` takes part in this decision.
+    const isControlled = value !== undefined && onChange !== undefined;
+    const [currentValue, setCurrentValue] = useControlledState(value, isControlled, defaultValue !== null && defaultValue !== void 0 ? defaultValue : minValue);
+    // The step handlers move *from* the current value rather than replacing it,
+    // so they need the latest one even when several clicks land in the same React
+    // batch and no render has happened in between — the functional update this
+    // replaced handled that on its own. Written on every render so it follows the
+    // props, and by `commitValue` so a second step in the same batch starts from
+    // where the first left off instead of collapsing into it.
+    const currentValueRef = useRef(currentValue);
+    currentValueRef.current = currentValue;
+    // `onChange` used to be called from an effect watching the internal value,
+    // which made controlling the counter impossible: a controlled counter never
+    // moves that value, so the effect never fired. Reporting from the handlers
+    // instead works in both modes.
+    const commitValue = useCallback((newValue) => {
+        // Clicking at a bound, or typing the value that is already there, is not a
+        // change. The effect this replaced watched the value itself and so stayed
+        // quiet too; without this a batch of clicks against `minValue` would report
+        // the same number once per click.
+        if (newValue === currentValueRef.current) {
+            return;
+        }
+        // Only the uncontrolled path moves the ref ahead of a render. There the
+        // component owns the value, so a second step in the same batch has to build
+        // on the first. Controlled, the prop is the truth and every step proposes
+        // from it: a parent that rejects without re-rendering — `onChange={() => {}}`,
+        // or a setter returning the previous state — never re-runs the assignment
+        // above, so a speculative ref would climb away from the value on screen and
+        // each further click would report a number further from it.
+        if (!isControlled) {
+            currentValueRef.current = newValue;
+        }
+        setCurrentValue(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    }, [isControlled, setCurrentValue, onChange]);
+    // Consumers have always been handed the starting value through `onChange` on
+    // mount, and some seed their state with it, so that one call stays. The ref
+    // keeps it to the first run: the old effect also re-fired on every render
+    // that passed a fresh inline `onChange`. Nothing is marked as reported until
+    // there is a handler to report to, so a counter mounted without `onChange`
+    // still hands over its starting value once one is attached.
+    const hasReportedInitialValue = useRef(false);
+    useEffect(() => {
+        if (hasReportedInitialValue.current || !onChange) {
+            return;
+        }
+        hasReportedInitialValue.current = true;
+        onChange(currentValue);
+    }, [onChange, currentValue]);
+    // `value` used to default to `minValue`, so a counter left to its own devices
+    // re-seeded — and reported — whenever `minValue` moved. Consumers use it as a
+    // live bound, so that stays; an explicit `value` or `defaultValue` opts out,
+    // exactly as passing `value` did before. The ref keeps this to real changes,
+    // so mounting still reports once and a click is never undone.
+    const hasExplicitStartingValue = value !== undefined || defaultValue !== undefined;
+    const previousMinValue = useRef(minValue);
+    useEffect(() => {
+        if (previousMinValue.current === minValue) {
+            return;
+        }
+        previousMinValue.current = minValue;
+        if (hasExplicitStartingValue) {
+            return;
+        }
+        commitValue(minValue);
+    }, [hasExplicitStartingValue, minValue, commitValue]);
+    const handleOnChange = useCallback((newValue) => {
+        commitValue(Number(newValue || '0'));
+    }, [commitValue]);
+    const handleOnIconStartClick = useCallback(() => {
+        commitValue(Math.max(currentValueRef.current - 1, minValue));
+    }, [commitValue, minValue]);
+    const handleOnIconEndClick = useCallback(() => {
+        commitValue(Math.min(currentValueRef.current + 1, maxValue));
+    }, [commitValue, maxValue]);
+    const generateStyleVariables = useMemo(() => (Object.assign(Object.assign({}, style), { [`--${PREFIX_BS}form-control-component-text-align`]: 'center' })), [style]);
+    const valueString = useMemo(() => (currentValue.toString()), [currentValue]);
+    const internalIsInvalid = useMemo(() => (!(currentValue >= minValue && currentValue <= maxValue)), [currentValue, minValue, maxValue]);
+    const { iconMap: { input } } = useDContext();
+    const iconEnd = useMemo(() => iconEndProp || input.increase, [iconEndProp, input.increase]);
+    const iconStart = useMemo(() => iconStartProp || input.decrease, [iconStartProp, input.decrease]);
+    return (jsx(ForwardedDInput, Object.assign({ ref: inputRef, value: valueString, style: generateStyleVariables, iconStart: iconStart, iconEnd: iconEnd, invalid: internalIsInvalid || invalid, type: "number", onChange: handleOnChange, onWheel: handleOnWheel, onIconStartClick: handleOnIconStartClick, onIconEndClick: handleOnIconEndClick, iconStartAriaLabel: iconStartAriaLabel, iconEndAriaLabel: iconEndAriaLabel }, currentValue === minValue && {
+        iconStartDisabled: true,
+    }, currentValue === maxValue && {
+        iconEndDisabled: true,
+    }, props)));
+}
+const ForwardedDInputCounter = forwardRef(DInputCounter);
+ForwardedDInputCounter.displayName = 'DInputCounter';
+
+export { ForwardedDInputCounter as default };
+//# sourceMappingURL=DInputCounter.js.map

package/dist/esm/components/DInputCounter/DInputCounter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DInputCounter.js","sources":["../../../../dist-transpiled/components/DInputCounter/DInputCounter.js"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useEffect, useMemo, useCallback, useRef, forwardRef, } from 'react';\nimport DInput from '../DInput';\nimport { PREFIX_BS } from '../config';\nimport useProvidedRefOrCreate from '../../hooks/useProvidedRefOrCreate';\nimport { useDContext } from '../../contexts';\nimport { useDisableInputWheel } from '../../hooks';\nimport useControlledState from '../../hooks/useControlledState';\nfunction DInputCounter(_a, ref) {\n    var { minValue, maxValue, value, defaultValue, invalid, iconStart: iconStartProp, iconEnd: iconEndProp, iconStartAriaLabel = 'decrease action', iconEndAriaLabel = 'increase action', style, onChange } = _a, props = __rest(_a, [\"minValue\", \"maxValue\", \"value\", \"defaultValue\", \"invalid\", \"iconStart\", \"iconEnd\", \"iconStartAriaLabel\", \"iconEndAriaLabel\", \"style\", \"onChange\"]);\n    const { handleOnWheel, } = useDisableInputWheel(ref);\n    const inputRef = useProvidedRefOrCreate(ref);\n    // See `useControlledState` for why `onChange` takes part in this decision.\n    const isControlled = value !== undefined && onChange !== undefined;\n    const [currentValue, setCurrentValue] = useControlledState(value, isControlled, defaultValue !== null && defaultValue !== void 0 ? defaultValue : minValue);\n    // The step handlers move *from* the current value rather than replacing it,\n    // so they need the latest one even when several clicks land in the same React\n    // batch and no render has happened in between — the functional update this\n    // replaced handled that on its own. Written on every render so it follows the\n    // props, and by `commitValue` so a second step in the same batch starts from\n    // where the first left off instead of collapsing into it.\n    const currentValueRef = useRef(currentValue);\n    currentValueRef.current = currentValue;\n    // `onChange` used to be called from an effect watching the internal value,\n    // which made controlling the counter impossible: a controlled counter never\n    // moves that value, so the effect never fired. Reporting from the handlers\n    // instead works in both modes.\n    const commitValue = useCallback((newValue) => {\n        // Clicking at a bound, or typing the value that is already there, is not a\n        // change. The effect this replaced watched the value itself and so stayed\n        // quiet too; without this a batch of clicks against `minValue` would report\n        // the same number once per click.\n        if (newValue === currentValueRef.current) {\n            return;\n        }\n        // Only the uncontrolled path moves the ref ahead of a render. There the\n        // component owns the value, so a second step in the same batch has to build\n        // on the first. Controlled, the prop is the truth and every step proposes\n        // from it: a parent that rejects without re-rendering — `onChange={() => {}}`,\n        // or a setter returning the previous state — never re-runs the assignment\n        // above, so a speculative ref would climb away from the value on screen and\n        // each further click would report a number further from it.\n        if (!isControlled) {\n            currentValueRef.current = newValue;\n        }\n        setCurrentValue(newValue);\n        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);\n    }, [isControlled, setCurrentValue, onChange]);\n    // Consumers have always been handed the starting value through `onChange` on\n    // mount, and some seed their state with it, so that one call stays. The ref\n    // keeps it to the first run: the old effect also re-fired on every render\n    // that passed a fresh inline `onChange`. Nothing is marked as reported until\n    // there is a handler to report to, so a counter mounted without `onChange`\n    // still hands over its starting value once one is attached.\n    const hasReportedInitialValue = useRef(false);\n    useEffect(() => {\n        if (hasReportedInitialValue.current || !onChange) {\n            return;\n        }\n        hasReportedInitialValue.current = true;\n        onChange(currentValue);\n    }, [onChange, currentValue]);\n    // `value` used to default to `minValue`, so a counter left to its own devices\n    // re-seeded — and reported — whenever `minValue` moved. Consumers use it as a\n    // live bound, so that stays; an explicit `value` or `defaultValue` opts out,\n    // exactly as passing `value` did before. The ref keeps this to real changes,\n    // so mounting still reports once and a click is never undone.\n    const hasExplicitStartingValue = value !== undefined || defaultValue !== undefined;\n    const previousMinValue = useRef(minValue);\n    useEffect(() => {\n        if (previousMinValue.current === minValue) {\n            return;\n        }\n        previousMinValue.current = minValue;\n        if (hasExplicitStartingValue) {\n            return;\n        }\n        commitValue(minValue);\n    }, [hasExplicitStartingValue, minValue, commitValue]);\n    const handleOnChange = useCallback((newValue) => {\n        commitValue(Number(newValue || '0'));\n    }, [commitValue]);\n    const handleOnIconStartClick = useCallback(() => {\n        commitValue(Math.max(currentValueRef.current - 1, minValue));\n    }, [commitValue, minValue]);\n    const handleOnIconEndClick = useCallback(() => {\n        commitValue(Math.min(currentValueRef.current + 1, maxValue));\n    }, [commitValue, maxValue]);\n    const generateStyleVariables = useMemo(() => (Object.assign(Object.assign({}, style), { [`--${PREFIX_BS}form-control-component-text-align`]: 'center' })), [style]);\n    const valueString = useMemo(() => (currentValue.toString()), [currentValue]);\n    const internalIsInvalid = useMemo(() => (!(currentValue >= minValue && currentValue <= maxValue)), [currentValue, minValue, maxValue]);\n    const { iconMap: { input } } = useDContext();\n    const iconEnd = useMemo(() => iconEndProp || input.increase, [iconEndProp, input.increase]);\n    const iconStart = useMemo(() => iconStartProp || input.decrease, [iconStartProp, input.decrease]);\n    return (_jsx(DInput, Object.assign({ ref: inputRef, value: valueString, style: generateStyleVariables, iconStart: iconStart, iconEnd: iconEnd, invalid: internalIsInvalid || invalid, type: \"number\", onChange: handleOnChange, onWheel: handleOnWheel, onIconStartClick: handleOnIconStartClick, onIconEndClick: handleOnIconEndClick, iconStartAriaLabel: iconStartAriaLabel, iconEndAriaLabel: iconEndAriaLabel }, currentValue === minValue && {\n        iconStartDisabled: true,\n    }, currentValue === maxValue && {\n        iconEndDisabled: true,\n    }, props)));\n}\nconst ForwardedDInputCounter = forwardRef(DInputCounter);\nForwardedDInputCounter.displayName = 'DInputCounter';\nexport default ForwardedDInputCounter;\n//# sourceMappingURL=DInputCounter.js.map"],"names":["_jsx","DInput"],"mappings":"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"}

package/dist/esm/components/DInputCounter/index.js

@@ -0,0 +1,6 @@
+import ForwardedDInputCounter from './DInputCounter.js';
+
+
+
+export { ForwardedDInputCounter as default };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/DInputCounter/index.js.map

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

package/dist/esm/components/DInputCurrency/DInputCurrency.js

@@ -0,0 +1,25 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import ForwardedDInput from '../DInput/DInput.js';
+import useInputCurrency from '../../hooks/useInputCurrency.js';
+import { useDContext } from '../../contexts/DContext.js';
+import useDisableInputWheel from '../../hooks/useDisableInputWheel.js';
+
+function DInputCurrency(_a, ref) {
+    var { value, minValue, maxValue, clamp = true, currencyCode, onFocus, onBlur, onChange, invalid: invalidProp, valid: validProp } = _a, props = __rest(_a, ["value", "minValue", "maxValue", "clamp", "currencyCode", "onFocus", "onBlur", "onChange", "invalid", "valid"]);
+    const { currency: currencyOptions } = useDContext();
+    const { handleOnWheel, } = useDisableInputWheel(ref);
+    const { inputRef, innerValue, innerType, isOverMax, isUnderMin, handleOnFocus, handleOnChange, handleOnBlur, } = useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref, minValue, maxValue, clamp);
+    const outOfRange = !clamp && (isOverMax || isUnderMin);
+    // One validation state: an explicit `invalid` wins; otherwise an
+    // out-of-range value is invalid and can't also be shown as valid.
+    const invalid = invalidProp !== null && invalidProp !== void 0 ? invalidProp : outOfRange;
+    const valid = invalid ? false : validProp;
+    return (jsx(ForwardedDInput, Object.assign({ ref: inputRef, value: innerValue, onChange: handleOnChange, inputMode: "decimal", type: innerType, onFocus: handleOnFocus, onBlur: handleOnBlur, onWheel: handleOnWheel, invalid: invalid, valid: valid, inputStart: (jsx("span", { slot: "input-start", className: "d-input-currency-symbol", children: currencyCode || currencyOptions.symbol })) }, props)));
+}
+const ForwardedDInputCurrency = forwardRef(DInputCurrency);
+ForwardedDInputCurrency.displayName = 'DInputCurrency';
+
+export { ForwardedDInputCurrency as default };
+//# sourceMappingURL=DInputCurrency.js.map

package/dist/esm/components/DInputCurrency/DInputCurrency.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DInputCurrency.js","sources":["../../../../dist-transpiled/components/DInputCurrency/DInputCurrency.js"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { forwardRef } from 'react';\nimport DInput from '../DInput';\nimport useInputCurrency from '../../hooks/useInputCurrency';\nimport { useDContext } from '../../contexts';\nimport { useDisableInputWheel } from '../../hooks';\nfunction DInputCurrency(_a, ref) {\n    var { value, minValue, maxValue, clamp = true, currencyCode, onFocus, onBlur, onChange, invalid: invalidProp, valid: validProp } = _a, props = __rest(_a, [\"value\", \"minValue\", \"maxValue\", \"clamp\", \"currencyCode\", \"onFocus\", \"onBlur\", \"onChange\", \"invalid\", \"valid\"]);\n    const { currency: currencyOptions } = useDContext();\n    const { handleOnWheel, } = useDisableInputWheel(ref);\n    const { inputRef, innerValue, innerType, isOverMax, isUnderMin, handleOnFocus, handleOnChange, handleOnBlur, } = useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref, minValue, maxValue, clamp);\n    const outOfRange = !clamp && (isOverMax || isUnderMin);\n    // One validation state: an explicit `invalid` wins; otherwise an\n    // out-of-range value is invalid and can't also be shown as valid.\n    const invalid = invalidProp !== null && invalidProp !== void 0 ? invalidProp : outOfRange;\n    const valid = invalid ? false : validProp;\n    return (_jsx(DInput, Object.assign({ ref: inputRef, value: innerValue, onChange: handleOnChange, inputMode: \"decimal\", type: innerType, onFocus: handleOnFocus, onBlur: handleOnBlur, onWheel: handleOnWheel, invalid: invalid, valid: valid, inputStart: (_jsx(\"span\", { slot: \"input-start\", className: \"d-input-currency-symbol\", children: currencyCode || currencyOptions.symbol })) }, props)));\n}\nconst ForwardedDInputCurrency = forwardRef(DInputCurrency);\nForwardedDInputCurrency.displayName = 'DInputCurrency';\nexport default ForwardedDInputCurrency;\n//# sourceMappingURL=DInputCurrency.js.map"],"names":["_jsx","DInput"],"mappings":";;;;;;;;AAOA,SAAS,cAAc,CAAC,EAAE,EAAE,GAAG,EAAE;AACjC,IAAI,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,EAAE,KAAK,GAAG,MAAM,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;AAC9Q,IAAI,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,WAAW,EAAE;AACvD,IAAI,MAAM,EAAE,aAAa,GAAG,GAAG,oBAAoB,CAAC,GAAG,CAAC;AACxD,IAAI,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,cAAc,EAAE,YAAY,GAAG,GAAG,gBAAgB,CAAC,eAAe,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC;AACxN,IAAI,MAAM,UAAU,GAAG,CAAC,KAAK,KAAK,SAAS,IAAI,UAAU,CAAC;AAC1D;AACA;AACA,IAAI,MAAM,OAAO,GAAG,WAAW,KAAK,IAAI,IAAI,WAAW,KAAK,MAAM,GAAG,WAAW,GAAG,UAAU;AAC7F,IAAI,MAAM,KAAK,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS;AAC7C,IAAI,QAAQA,GAAI,CAACC,eAAM,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,GAAGD,GAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,yBAAyB,EAAE,QAAQ,EAAE,YAAY,IAAI,eAAe,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;AACxY;AACK,MAAC,uBAAuB,GAAG,UAAU,CAAC,cAAc;AACzD,uBAAuB,CAAC,WAAW,GAAG,gBAAgB;;;;"}

package/dist/esm/components/DInputCurrency/index.js

@@ -0,0 +1,6 @@
+import ForwardedDInputCurrency from './DInputCurrency.js';
+
+
+
+export { ForwardedDInputCurrency as default };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/DInputCurrency/index.js.map

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

package/dist/esm/components/DInputMask/DInputMask.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { InputMask } from '@react-input/mask';
+import ForwardedDInput from '../DInput/DInput.js';
+
+function DInputMask(props, ref) {
+    return (jsx(InputMask, Object.assign({ ref: ref, component: ForwardedDInput }, props)));
+}
+const ForwardedDInputMask = forwardRef(DInputMask);
+ForwardedDInputMask.displayName = 'DInputMask';
+
+export { ForwardedDInputMask as default };
+//# sourceMappingURL=DInputMask.js.map

package/dist/esm/components/DInputMask/DInputMask.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DInputMask.js","sources":["../../../../dist-transpiled/components/DInputMask/DInputMask.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { forwardRef } from 'react';\nimport { InputMask } from '@react-input/mask';\nimport DInput from '../DInput';\nfunction DInputMask(props, ref) {\n    return (_jsx(InputMask, Object.assign({ ref: ref, component: DInput }, props)));\n}\nconst ForwardedDInputMask = forwardRef(DInputMask);\nForwardedDInputMask.displayName = 'DInputMask';\nexport default ForwardedDInputMask;\n//# sourceMappingURL=DInputMask.js.map"],"names":["_jsx","DInput"],"mappings":";;;;;AAIA,SAAS,UAAU,CAAC,KAAK,EAAE,GAAG,EAAE;AAChC,IAAI,QAAQA,GAAI,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAEC,eAAM,EAAE,EAAE,KAAK,CAAC,CAAC;AAClF;AACK,MAAC,mBAAmB,GAAG,UAAU,CAAC,UAAU;AACjD,mBAAmB,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/esm/components/DInputMask/index.js

@@ -0,0 +1,6 @@
+import ForwardedDInputMask from './DInputMask.js';
+
+
+
+export { ForwardedDInputMask as default };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/DInputMask/index.js.map

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

package/dist/esm/components/DInputPassword/DInputPassword.js

@@ -0,0 +1,24 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useCallback, useMemo } from 'react';
+import ForwardedDInput from '../DInput/DInput.js';
+import useProvidedRefOrCreate from '../../hooks/useProvidedRefOrCreate.js';
+import { useDContext } from '../../contexts/DContext.js';
+
+function DInputPassword(_a, ref) {
+    var { onIconEndClick, iconEndAriaLabel = 'show/hide password' } = _a, props = __rest(_a, ["onIconEndClick", "iconEndAriaLabel"]);
+    const inputRef = useProvidedRefOrCreate(ref);
+    const [visible, setVisible] = useState(false);
+    const handleOnIconEndClick = useCallback(() => {
+        setVisible((prevVisible) => !prevVisible);
+        onIconEndClick === null || onIconEndClick === void 0 ? void 0 : onIconEndClick();
+    }, [onIconEndClick]);
+    const { iconMap: { input } } = useDContext();
+    const iconEnd = useMemo(() => (!visible ? input.hide : input.show), [input.hide, input.show, visible]);
+    return (jsx(ForwardedDInput, Object.assign({ ref: inputRef, iconEnd: iconEnd, type: !visible ? 'password' : 'text', onIconEndClick: handleOnIconEndClick, iconEndAriaLabel: iconEndAriaLabel }, props)));
+}
+const ForwardedDInputPassword = forwardRef(DInputPassword);
+ForwardedDInputPassword.displayName = 'DInputPassword';
+
+export { ForwardedDInputPassword as default };
+//# sourceMappingURL=DInputPassword.js.map

package/dist/esm/components/DInputPassword/DInputPassword.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DInputPassword.js","sources":["../../../../dist-transpiled/components/DInputPassword/DInputPassword.js"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { forwardRef, useCallback, useMemo, useState, } from 'react';\nimport DInput from '../DInput';\nimport useProvidedRefOrCreate from '../../hooks/useProvidedRefOrCreate';\nimport { useDContext } from '../../contexts';\nfunction DInputPassword(_a, ref) {\n    var { onIconEndClick, iconEndAriaLabel = 'show/hide password' } = _a, props = __rest(_a, [\"onIconEndClick\", \"iconEndAriaLabel\"]);\n    const inputRef = useProvidedRefOrCreate(ref);\n    const [visible, setVisible] = useState(false);\n    const handleOnIconEndClick = useCallback(() => {\n        setVisible((prevVisible) => !prevVisible);\n        onIconEndClick === null || onIconEndClick === void 0 ? void 0 : onIconEndClick();\n    }, [onIconEndClick]);\n    const { iconMap: { input } } = useDContext();\n    const iconEnd = useMemo(() => (!visible ? input.hide : input.show), [input.hide, input.show, visible]);\n    return (_jsx(DInput, Object.assign({ ref: inputRef, iconEnd: iconEnd, type: !visible ? 'password' : 'text', onIconEndClick: handleOnIconEndClick, iconEndAriaLabel: iconEndAriaLabel }, props)));\n}\nconst ForwardedDInputPassword = forwardRef(DInputPassword);\nForwardedDInputPassword.displayName = 'DInputPassword';\nexport default ForwardedDInputPassword;\n//# sourceMappingURL=DInputPassword.js.map"],"names":["_jsx","DInput"],"mappings":";;;;;;;AAMA,SAAS,cAAc,CAAC,EAAE,EAAE,GAAG,EAAE;AACjC,IAAI,IAAI,EAAE,cAAc,EAAE,gBAAgB,GAAG,oBAAoB,EAAE,GAAG,EAAE,EAAE,KAAK,GAAG,MAAM,CAAC,EAAE,EAAE,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC;AACpI,IAAI,MAAM,QAAQ,GAAG,sBAAsB,CAAC,GAAG,CAAC;AAChD,IAAI,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACjD,IAAI,MAAM,oBAAoB,GAAG,WAAW,CAAC,MAAM;AACnD,QAAQ,UAAU,CAAC,CAAC,WAAW,KAAK,CAAC,WAAW,CAAC;AACjD,QAAQ,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,MAAM,GAAG,MAAM,GAAG,cAAc,EAAE;AACxF,IAAI,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;AACxB,IAAI,MAAM,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,GAAG,WAAW,EAAE;AAChD,IAAI,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;AAC1G,IAAI,QAAQA,GAAI,CAACC,eAAM,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,OAAO,GAAG,UAAU,GAAG,MAAM,EAAE,cAAc,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,EAAE,KAAK,CAAC,CAAC;AACnM;AACK,MAAC,uBAAuB,GAAG,UAAU,CAAC,cAAc;AACzD,uBAAuB,CAAC,WAAW,GAAG,gBAAgB;;;;"}

package/dist/esm/components/DInputPassword/index.js

@@ -0,0 +1,6 @@
+import ForwardedDInputPassword from './DInputPassword.js';
+
+
+
+export { ForwardedDInputPassword as default };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/DInputPassword/index.js.map

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

package/dist/esm/components/DInputPhone/DInputPhone.js

@@ -0,0 +1,108 @@
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useId, useMemo, useCallback } from 'react';
+import classNames from 'classnames';
+import { defaultCountries, parseCountry, usePhoneInput, CountrySelector } from 'react-international-phone';
+import DIcon from '../DIcon/DIcon.js';
+import DFormLabel from '../internal/DFormLabel.js';
+import hasLabelContent from '../../utils/hasLabelContent.js';
+import warnLabelUsage from '../../utils/warnLabelUsage.js';
+import useProvidedRefOrCreate from '../../hooks/useProvidedRefOrCreate.js';
+import { useDContext } from '../../contexts/DContext.js';
+import validatePhoneNumber from '../../utils/validatePhoneNumber.js';
+
+function DInputPhone(_a, ref) {
+    var { id: idProp, style, className, label = '', disabled = false, loading = false, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, iconEnd, iconEndDisabled, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, iconEndMaterialStyle, hint, size, invalid = false, valid = false, floatingLabel = false, inputEnd, value, placeholder = '', dataAttributes, onChange, onIconEndClick, countrySelectorProps, filteredCountries, defaultCountry = 'cl' } = _a, inputProps = __rest(_a, ["id", "style", "className", "label", "disabled", "loading", "iconFamilyClass", "iconFamilyPrefix", "iconMaterialStyle", "iconEnd", "iconEndDisabled", "iconEndFamilyClass", "iconEndFamilyPrefix", "iconEndAriaLabel", "iconEndTabIndex", "iconEndMaterialStyle", "hint", "size", "invalid", "valid", "floatingLabel", "inputEnd", "value", "placeholder", "dataAttributes", "onChange", "onIconEndClick", "countrySelectorProps", "filteredCountries", "defaultCountry"]);
+    const innerRef = useProvidedRefOrCreate(ref);
+    const innerId = useId();
+    const id = useMemo(() => idProp || innerId, [idProp, innerId]);
+    const { icon: { familyClass, familyPrefix, materialStyle, }, } = useDContext();
+    const handleOnIconEndClick = useCallback(() => {
+        onIconEndClick === null || onIconEndClick === void 0 ? void 0 : onIconEndClick(value);
+    }, [onIconEndClick, value]);
+    const ariaDescribedby = useMemo(() => ([
+        (invalid || valid) && !iconEnd && !loading && `${id}State`,
+        (iconEnd && !loading) && `${id}End`,
+        loading && `${id}Loading`,
+        !!inputEnd && `${id}InputEnd`,
+        !!hint && `${id}Hint`,
+    ]
+        .filter(Boolean)
+        .join(' ')), [
+        id,
+        invalid,
+        valid,
+        iconEnd,
+        loading,
+        inputEnd,
+        hint,
+    ]);
+    const countries = useMemo(() => {
+        if (filteredCountries === undefined) {
+            return defaultCountries;
+        }
+        return defaultCountries.filter((country) => {
+            const { iso2 } = parseCountry(country);
+            return filteredCountries.includes(iso2);
+        });
+    }, [filteredCountries]);
+    const { inputValue, handlePhoneValueChange, inputRef, country, setCountry, } = usePhoneInput({
+        inputRef: innerRef,
+        defaultCountry,
+        value,
+        countries,
+        onChange: (data) => {
+            onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, data), { isValid: validatePhoneNumber(data.phone) }));
+        },
+    });
+    const inputComponent = useMemo(() => (jsx("input", Object.assign({ ref: inputRef, id: id, className: classNames('form-control', {
+            'is-invalid': invalid,
+            'is-valid': valid,
+        }), disabled: disabled || loading, value: inputValue, onChange: handlePhoneValueChange, inputMode: "tel" }, (floatingLabel || placeholder) && { placeholder: floatingLabel ? '' : placeholder }, ariaDescribedby && { 'aria-describedby': ariaDescribedby }, inputProps))), [
+        ariaDescribedby,
+        disabled,
+        floatingLabel,
+        handlePhoneValueChange,
+        id,
+        inputProps,
+        inputRef,
+        inputValue,
+        invalid,
+        loading,
+        placeholder,
+        valid,
+    ]);
+    const labelComponent = useMemo(() => (jsx(DFormLabel, { htmlFor: id, children: label })), [
+        id,
+        label,
+    ]);
+    const dynamicComponent = useMemo(() => {
+        if (floatingLabel) {
+            return (jsxs("div", { className: "form-floating", children: [inputComponent, labelComponent] }));
+        }
+        return inputComponent;
+    }, [
+        floatingLabel,
+        inputComponent,
+        labelComponent,
+    ]);
+    if (process.env.NODE_ENV !== 'production') {
+        warnLabelUsage({
+            component: 'DInputPhone',
+            label,
+            hasAccessibleName: !!inputProps['aria-label'] || !!inputProps['aria-labelledby'],
+            accessibleNameProp: 'aria-label',
+            floatingLabel,
+        });
+    }
+    return (jsxs("div", Object.assign({ className: classNames('d-input-phone', className), style: style }, dataAttributes, { children: [hasLabelContent(label) && !floatingLabel && labelComponent, jsxs("div", { className: classNames({
+                    [`input-group-${size}`]: !!size,
+                    'input-group': true,
+                    'has-validation': invalid || valid,
+                }), children: [jsx(CountrySelector, Object.assign({}, countrySelectorProps, { selectedCountry: country.iso2, onSelect: ({ iso2 }) => setCountry(iso2), countries: countries, disabled: disabled || loading, className: classNames('input-group-text', countrySelectorProps === null || countrySelectorProps === void 0 ? void 0 : countrySelectorProps.className) })), dynamicComponent, (iconEnd && !loading) && (jsx("button", { type: "button", className: "input-group-text", id: `${id}End`, onClick: handleOnIconEndClick, disabled: disabled || loading || iconEndDisabled, "aria-label": iconEndAriaLabel, tabIndex: onIconEndClick ? iconEndTabIndex : -1, children: jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass !== null && iconEndFamilyClass !== void 0 ? iconEndFamilyClass : familyClass, familyPrefix: iconEndFamilyPrefix !== null && iconEndFamilyPrefix !== void 0 ? iconEndFamilyPrefix : familyPrefix, materialStyle: iconEndMaterialStyle !== null && iconEndMaterialStyle !== void 0 ? iconEndMaterialStyle : materialStyle }) })), loading && (jsx("div", { className: "input-group-text", id: `${id}Loading`, children: jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsx("span", { className: "visually-hidden", children: "Loading..." }) }) })), !!inputEnd && (jsx("div", { className: "input-group-text", id: `${id}InputEnd`, children: inputEnd }))] }), hint && (jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] })));
+}
+const ForwardedDInputPhone = forwardRef(DInputPhone);
+ForwardedDInputPhone.displayName = 'DInputPhone';
+
+export { ForwardedDInputPhone as default };
+//# sourceMappingURL=DInputPhone.js.map

package/dist/esm/components/DInputPhone/DInputPhone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DInputPhone.js","sources":["../../../../dist-transpiled/components/DInputPhone/DInputPhone.js"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { forwardRef, useCallback, useMemo, useId, } from 'react';\nimport classNames from 'classnames';\nimport { CountrySelector, defaultCountries, parseCountry, usePhoneInput, } from 'react-international-phone';\nimport DIcon from '../DIcon';\nimport DFormLabel from '../internal/DFormLabel';\nimport hasLabelContent from '../../utils/hasLabelContent';\nimport warnLabelUsage from '../../utils/warnLabelUsage';\nimport { useProvidedRefOrCreate } from '../../hooks';\nimport { validatePhoneNumber } from '../../utils';\nimport { useDContext } from '../../contexts';\nfunction DInputPhone(_a, ref) {\n    var { id: idProp, style, className, label = '', disabled = false, loading = false, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, iconEnd, iconEndDisabled, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, iconEndMaterialStyle, hint, size, invalid = false, valid = false, floatingLabel = false, inputEnd, value, placeholder = '', dataAttributes, onChange, onIconEndClick, countrySelectorProps, filteredCountries, defaultCountry = 'cl' } = _a, inputProps = __rest(_a, [\"id\", \"style\", \"className\", \"label\", \"disabled\", \"loading\", \"iconFamilyClass\", \"iconFamilyPrefix\", \"iconMaterialStyle\", \"iconEnd\", \"iconEndDisabled\", \"iconEndFamilyClass\", \"iconEndFamilyPrefix\", \"iconEndAriaLabel\", \"iconEndTabIndex\", \"iconEndMaterialStyle\", \"hint\", \"size\", \"invalid\", \"valid\", \"floatingLabel\", \"inputEnd\", \"value\", \"placeholder\", \"dataAttributes\", \"onChange\", \"onIconEndClick\", \"countrySelectorProps\", \"filteredCountries\", \"defaultCountry\"]);\n    const innerRef = useProvidedRefOrCreate(ref);\n    const innerId = useId();\n    const id = useMemo(() => idProp || innerId, [idProp, innerId]);\n    const { icon: { familyClass, familyPrefix, materialStyle, }, } = useDContext();\n    const handleOnIconEndClick = useCallback(() => {\n        onIconEndClick === null || onIconEndClick === void 0 ? void 0 : onIconEndClick(value);\n    }, [onIconEndClick, value]);\n    const ariaDescribedby = useMemo(() => ([\n        (invalid || valid) && !iconEnd && !loading && `${id}State`,\n        (iconEnd && !loading) && `${id}End`,\n        loading && `${id}Loading`,\n        !!inputEnd && `${id}InputEnd`,\n        !!hint && `${id}Hint`,\n    ]\n        .filter(Boolean)\n        .join(' ')), [\n        id,\n        invalid,\n        valid,\n        iconEnd,\n        loading,\n        inputEnd,\n        hint,\n    ]);\n    const countries = useMemo(() => {\n        if (filteredCountries === undefined) {\n            return defaultCountries;\n        }\n        return defaultCountries.filter((country) => {\n            const { iso2 } = parseCountry(country);\n            return filteredCountries.includes(iso2);\n        });\n    }, [filteredCountries]);\n    const { inputValue, handlePhoneValueChange, inputRef, country, setCountry, } = usePhoneInput({\n        inputRef: innerRef,\n        defaultCountry,\n        value,\n        countries,\n        onChange: (data) => {\n            onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, data), { isValid: validatePhoneNumber(data.phone) }));\n        },\n    });\n    const inputComponent = useMemo(() => (_jsx(\"input\", Object.assign({ ref: inputRef, id: id, className: classNames('form-control', {\n            'is-invalid': invalid,\n            'is-valid': valid,\n        }), disabled: disabled || loading, value: inputValue, onChange: handlePhoneValueChange, inputMode: \"tel\" }, (floatingLabel || placeholder) && { placeholder: floatingLabel ? '' : placeholder }, ariaDescribedby && { 'aria-describedby': ariaDescribedby }, inputProps))), [\n        ariaDescribedby,\n        disabled,\n        floatingLabel,\n        handlePhoneValueChange,\n        id,\n        inputProps,\n        inputRef,\n        inputValue,\n        invalid,\n        loading,\n        placeholder,\n        valid,\n    ]);\n    const labelComponent = useMemo(() => (_jsx(DFormLabel, { htmlFor: id, children: label })), [\n        id,\n        label,\n    ]);\n    const dynamicComponent = useMemo(() => {\n        if (floatingLabel) {\n            return (_jsxs(\"div\", { className: \"form-floating\", children: [inputComponent, labelComponent] }));\n        }\n        return inputComponent;\n    }, [\n        floatingLabel,\n        inputComponent,\n        labelComponent,\n    ]);\n    if (process.env.NODE_ENV !== 'production') {\n        warnLabelUsage({\n            component: 'DInputPhone',\n            label,\n            hasAccessibleName: !!inputProps['aria-label'] || !!inputProps['aria-labelledby'],\n            accessibleNameProp: 'aria-label',\n            floatingLabel,\n        });\n    }\n    return (_jsxs(\"div\", Object.assign({ className: classNames('d-input-phone', className), style: style }, dataAttributes, { children: [hasLabelContent(label) && !floatingLabel && labelComponent, _jsxs(\"div\", { className: classNames({\n                    [`input-group-${size}`]: !!size,\n                    'input-group': true,\n                    'has-validation': invalid || valid,\n                }), children: [_jsx(CountrySelector, Object.assign({}, countrySelectorProps, { selectedCountry: country.iso2, onSelect: ({ iso2 }) => setCountry(iso2), countries: countries, disabled: disabled || loading, className: classNames('input-group-text', countrySelectorProps === null || countrySelectorProps === void 0 ? void 0 : countrySelectorProps.className) })), dynamicComponent, (iconEnd && !loading) && (_jsx(\"button\", { type: \"button\", className: \"input-group-text\", id: `${id}End`, onClick: handleOnIconEndClick, disabled: disabled || loading || iconEndDisabled, \"aria-label\": iconEndAriaLabel, tabIndex: onIconEndClick ? iconEndTabIndex : -1, children: _jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass !== null && iconEndFamilyClass !== void 0 ? iconEndFamilyClass : familyClass, familyPrefix: iconEndFamilyPrefix !== null && iconEndFamilyPrefix !== void 0 ? iconEndFamilyPrefix : familyPrefix, materialStyle: iconEndMaterialStyle !== null && iconEndMaterialStyle !== void 0 ? iconEndMaterialStyle : materialStyle }) })), loading && (_jsx(\"div\", { className: \"input-group-text\", id: `${id}Loading`, children: _jsx(\"span\", { className: \"spinner-border spinner-border-sm\", role: \"status\", \"aria-hidden\": \"true\", children: _jsx(\"span\", { className: \"visually-hidden\", children: \"Loading...\" }) }) })), !!inputEnd && (_jsx(\"div\", { className: \"input-group-text\", id: `${id}InputEnd`, children: inputEnd }))] }), hint && (_jsx(\"div\", { className: \"form-text\", id: `${id}Hint`, children: hint }))] })));\n}\nconst ForwardedDInputPhone = forwardRef(DInputPhone);\nForwardedDInputPhone.displayName = 'DInputPhone';\nexport default ForwardedDInputPhone;\n//# sourceMappingURL=DInputPhone.js.map"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/DInputPhone/index.js

@@ -0,0 +1,6 @@
+import ForwardedDInputPhone from './DInputPhone.js';
+
+
+
+export { ForwardedDInputPhone as default };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/DInputPhone/index.js.map

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

package/dist/esm/components/DInputPin/DInputPin.js

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId, useMemo, useState, useEffect, useCallback } from 'react';
+import classNames from 'classnames';
+import DFormLabel from '../internal/DFormLabel.js';
+import hasLabelContent from '../../utils/hasLabelContent.js';
+
+function DInputPin({ id: idProp, label = '', placeholder, type = 'text', disabled = false, loading = false, secret = false, characters = 4, innerInputMode = 'text', hint, invalid = false, valid = false, className, style, dataAttributes, onChange, 'aria-label': ariaLabel = 'Pin character number', }) {
+    const innerId = useId();
+    const id = useMemo(() => idProp || innerId, [idProp, innerId]);
+    const [pattern, setPattern] = useState('');
+    const [activeInput, setActiveInput] = useState(Array.from({ length: characters }).fill(''));
+    const isInputNum = useMemo(() => type === 'number' || type === 'tel', [type]);
+    useEffect(() => {
+        setPattern(type === 'number' ? '[0-9]+' : '^[a-zA-Z0-9]+$');
+    }, [type]);
+    const handleOTPChange = useCallback((otp) => {
+        const otpValue = otp.join('');
+        onChange === null || onChange === void 0 ? void 0 : onChange(otpValue);
+    }, [onChange]);
+    useEffect(() => {
+        handleOTPChange(activeInput);
+    }, [activeInput, handleOTPChange]);
+    const handlePaste = useCallback((event) => {
+        event.preventDefault();
+        const pastedData = event.clipboardData.getData('text/plain');
+        const cleanData = isInputNum ? pastedData.replace(/[^0-9]/gmi, '') : pastedData;
+        const newInput = Array.from({ length: characters }).map((_, index) => cleanData[index] || '');
+        setActiveInput(newInput);
+        event.currentTarget.blur();
+    }, [characters, isInputNum]);
+    const nextInput = useCallback((event, index) => {
+        var _a;
+        const regex = new RegExp(pattern);
+        const input = event.currentTarget;
+        if (!regex.test(input.value)) {
+            input.value = '';
+        }
+        if (input.value !== '') {
+            setActiveInput((prev) => {
+                const newValue = [...prev];
+                newValue[index] = input.value;
+                return newValue;
+            });
+            if (input.nextSibling) {
+                (_a = input.nextSibling) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                input.blur();
+            }
+        }
+    }, [pattern]);
+    const prevInput = useCallback(({ key, currentTarget }, index) => {
+        var _a;
+        if (key === 'Backspace') {
+            const { value } = currentTarget;
+            setActiveInput((prev) => {
+                const newVal = [...prev];
+                newVal[index] = '';
+                return newVal;
+            });
+            if (currentTarget.previousSibling && value === '') {
+                (_a = currentTarget.previousSibling) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                currentTarget.blur();
+                currentTarget.focus();
+            }
+        }
+    }, []);
+    const focusInput = useCallback((index) => {
+        setActiveInput((prev) => {
+            const newVal = [...prev];
+            newVal[index] = '';
+            return newVal;
+        });
+    }, []);
+    const wheelInput = useCallback((event) => {
+        event.currentTarget.blur();
+    }, []);
+    return (jsxs("div", Object.assign({ className: classNames('d-input-pin', className), style: style }, dataAttributes, { children: [hasLabelContent(label) && (jsx(DFormLabel, { htmlFor: "pinIndex0", children: label })), jsxs("div", { className: "d-input-pin-group", id: id, children: [Array.from({ length: characters }).map((_, index) => (jsx("input", Object.assign({ className: classNames({
+                            'form-control': true,
+                            'is-invalid': invalid,
+                            'is-valid': valid,
+                        }), value: activeInput[index], type: secret ? 'password' : type, "aria-label": `${ariaLabel} ${index + 1} of ${characters}`, inputMode: innerInputMode, id: `pinIndex${index}`, name: `pin-${index}`, maxLength: 1, onInput: (event) => nextInput(event, index), onKeyDown: (event) => prevInput(event, index), onFocus: () => focusInput(index), onWheel: wheelInput, onClick: (event) => event.preventDefault(), onPaste: (event) => handlePaste(event), autoComplete: "off", placeholder: placeholder, disabled: disabled || loading, required: true }, type === 'number' && ({ min: 0, max: 9 })), index))), loading && (jsx("div", { className: "input-group-text", children: jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsx("span", { className: "visually-hidden", children: "Loading..." }) }) }))] }), hint && (jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] })));
+}
+
+export { DInputPin as default };
+//# sourceMappingURL=DInputPin.js.map

package/dist/esm/components/DInputPin/DInputPin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DInputPin.js","sources":["../../../../dist-transpiled/components/DInputPin/DInputPin.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/* eslint-disable no-return-assign */\nimport { useCallback, useEffect, useId, useMemo, useState, } from 'react';\nimport classNames from 'classnames';\nimport DFormLabel from '../internal/DFormLabel';\nimport hasLabelContent from '../../utils/hasLabelContent';\nexport default function DInputPin({ id: idProp, label = '', placeholder, type = 'text', disabled = false, loading = false, secret = false, characters = 4, innerInputMode = 'text', hint, invalid = false, valid = false, className, style, dataAttributes, onChange, 'aria-label': ariaLabel = 'Pin character number', }) {\n    const innerId = useId();\n    const id = useMemo(() => idProp || innerId, [idProp, innerId]);\n    const [pattern, setPattern] = useState('');\n    const [activeInput, setActiveInput] = useState(Array.from({ length: characters }).fill(''));\n    const isInputNum = useMemo(() => type === 'number' || type === 'tel', [type]);\n    useEffect(() => {\n        setPattern(type === 'number' ? '[0-9]+' : '^[a-zA-Z0-9]+$');\n    }, [type]);\n    const handleOTPChange = useCallback((otp) => {\n        const otpValue = otp.join('');\n        onChange === null || onChange === void 0 ? void 0 : onChange(otpValue);\n    }, [onChange]);\n    useEffect(() => {\n        handleOTPChange(activeInput);\n    }, [activeInput, handleOTPChange]);\n    const handlePaste = useCallback((event) => {\n        event.preventDefault();\n        const pastedData = event.clipboardData.getData('text/plain');\n        const cleanData = isInputNum ? pastedData.replace(/[^0-9]/gmi, '') : pastedData;\n        const newInput = Array.from({ length: characters }).map((_, index) => cleanData[index] || '');\n        setActiveInput(newInput);\n        event.currentTarget.blur();\n    }, [characters, isInputNum]);\n    const nextInput = useCallback((event, index) => {\n        var _a;\n        const regex = new RegExp(pattern);\n        const input = event.currentTarget;\n        if (!regex.test(input.value)) {\n            input.value = '';\n        }\n        if (input.value !== '') {\n            setActiveInput((prev) => {\n                const newValue = [...prev];\n                newValue[index] = input.value;\n                return newValue;\n            });\n            if (input.nextSibling) {\n                (_a = input.nextSibling) === null || _a === void 0 ? void 0 : _a.focus();\n            }\n            else {\n                input.blur();\n            }\n        }\n    }, [pattern]);\n    const prevInput = useCallback(({ key, currentTarget }, index) => {\n        var _a;\n        if (key === 'Backspace') {\n            const { value } = currentTarget;\n            setActiveInput((prev) => {\n                const newVal = [...prev];\n                newVal[index] = '';\n                return newVal;\n            });\n            if (currentTarget.previousSibling && value === '') {\n                (_a = currentTarget.previousSibling) === null || _a === void 0 ? void 0 : _a.focus();\n            }\n            else {\n                currentTarget.blur();\n                currentTarget.focus();\n            }\n        }\n    }, []);\n    const focusInput = useCallback((index) => {\n        setActiveInput((prev) => {\n            const newVal = [...prev];\n            newVal[index] = '';\n            return newVal;\n        });\n    }, []);\n    const wheelInput = useCallback((event) => {\n        event.currentTarget.blur();\n    }, []);\n    return (_jsxs(\"div\", Object.assign({ className: classNames('d-input-pin', className), style: style }, dataAttributes, { children: [hasLabelContent(label) && (_jsx(DFormLabel, { htmlFor: \"pinIndex0\", children: label })), _jsxs(\"div\", { className: \"d-input-pin-group\", id: id, children: [Array.from({ length: characters }).map((_, index) => (_jsx(\"input\", Object.assign({ className: classNames({\n                            'form-control': true,\n                            'is-invalid': invalid,\n                            'is-valid': valid,\n                        }), value: activeInput[index], type: secret ? 'password' : type, \"aria-label\": `${ariaLabel} ${index + 1} of ${characters}`, inputMode: innerInputMode, id: `pinIndex${index}`, name: `pin-${index}`, maxLength: 1, onInput: (event) => nextInput(event, index), onKeyDown: (event) => prevInput(event, index), onFocus: () => focusInput(index), onWheel: wheelInput, onClick: (event) => event.preventDefault(), onPaste: (event) => handlePaste(event), autoComplete: \"off\", placeholder: placeholder, disabled: disabled || loading, required: true }, type === 'number' && ({ min: 0, max: 9 })), index))), loading && (_jsx(\"div\", { className: \"input-group-text\", children: _jsx(\"span\", { className: \"spinner-border spinner-border-sm\", role: \"status\", \"aria-hidden\": \"true\", children: _jsx(\"span\", { className: \"visually-hidden\", children: \"Loading...\" }) }) }))] }), hint && (_jsx(\"div\", { className: \"form-text\", id: `${id}Hint`, children: hint }))] })));\n}\n//# sourceMappingURL=DInputPin.js.map"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/DInputPin/index.js

@@ -0,0 +1,6 @@
+import DInputPin from './DInputPin.js';
+
+
+
+export { DInputPin as default };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/DInputPin/index.js.map

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

package/dist/esm/components/DInputRange/DInputRange.js

@@ -0,0 +1,60 @@
+import { __rest } from 'tslib';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useId, useMemo } from 'react';
+import classNames from 'classnames';
+import useProvidedRefOrCreate from '../../hooks/useProvidedRefOrCreate.js';
+import DFormLabel from '../internal/DFormLabel.js';
+import hasLabelContent from '../../utils/hasLabelContent.js';
+import warnLabelUsage from '../../utils/warnLabelUsage.js';
+import { PREFIX_BS } from '../config.js';
+
+function DInputRange(_a, ref) {
+    var { id: idProp, label, ariaLabel, className, style, value = '0', min = '0', max = '100', filledValue = true, onChange } = _a, props = __rest(_a, ["id", "label", "ariaLabel", "className", "style", "value", "min", "max", "filledValue", "onChange"]);
+    const innerRef = useProvidedRefOrCreate(ref);
+    const innerId = useId();
+    const id = useMemo(() => idProp || innerId, [idProp, innerId]);
+    const generateClasses = useMemo(() => ({
+        'form-range': true,
+        'form-range-value-indicator': filledValue,
+    }), [filledValue]);
+    const generateStyleVariables = useMemo(() => {
+        const minNumber = parseFloat(min.toString());
+        const maxNumber = parseFloat(max.toString());
+        const valueNumber = parseFloat(value.toString());
+        const percentage = ((valueNumber - minNumber) / (maxNumber - minNumber)) * 100;
+        return Object.assign(Object.assign({}, style), { [`--${PREFIX_BS}form-range-component-value`]: `${percentage}%` });
+    }, [min, max, value, style]);
+    const inputComponent = useMemo(() => (jsx("input", Object.assign({ id: id, ref: innerRef, className: classNames(generateClasses, className), "aria-label": ariaLabel, type: "range", value: value, min: min, max: max, style: generateStyleVariables, onChange: onChange }, props))), [
+        ariaLabel,
+        className,
+        generateClasses,
+        generateStyleVariables,
+        id,
+        innerRef,
+        max,
+        min,
+        onChange,
+        props,
+        value,
+    ]);
+    if (process.env.NODE_ENV !== 'production') {
+        warnLabelUsage({
+            component: 'DInputRange',
+            label,
+            // `{...props}` is spread after `aria-label={ariaLabel}`, so a native
+            // `aria-label` wins — including when it is explicitly undefined.
+            hasAccessibleName: !!('aria-label' in props ? props['aria-label'] : ariaLabel)
+                || !!props['aria-labelledby'],
+            accessibleNameProp: 'ariaLabel',
+        });
+    }
+    if (!hasLabelContent(label)) {
+        return inputComponent;
+    }
+    return (jsxs(Fragment, { children: [jsx(DFormLabel, { className: "form-label", htmlFor: id, children: label }), inputComponent] }));
+}
+const ForwardedDInputRange = forwardRef(DInputRange);
+ForwardedDInputRange.displayName = 'DInputRange';
+
+export { ForwardedDInputRange as default };
+//# sourceMappingURL=DInputRange.js.map