@react-spectrum/s2 0.2.1-nightly.4979

package/dist/NumberField.cjs

@@ -0,0 +1,551 @@
+require("./NumberField.css");
+var $54686c7c3f031ee2$exports = require("./Add.cjs");
+var $1df9f1c9262ce5df$exports = require("./Chevron.cjs");
+var $84c37b7bd5c1374e$exports = require("./Dash.cjs");
+var $a0b996a550bb0891$exports = require("./Field.cjs");
+var $bfa4962d90c8af48$exports = require("./Form.cjs");
+var $2061c83559b50a66$exports = require("./pressScale.cjs");
+var $fwzUK$reactjsxruntime = require("react/jsx-runtime");
+var $fwzUK$reactariacomponents = require("react-aria-components");
+var $fwzUK$reactspectrumutils = require("@react-spectrum/utils");
+var $fwzUK$react = require("react");
+var $fwzUK$reactariautils = require("@react-aria/utils");
+var $fwzUK$reactaria = require("react-aria");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "NumberField", () => $a366ef8f467b1cb5$export$63c5fa0b2fdccd2e);
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+const $a366ef8f467b1cb5$var$inputButton = function anonymous(props) {
+    let rules = " .";
+    rules += ' _Zd';
+    rules += ' _La';
+    rules += ' _jb';
+    rules += ' wf';
+    if (props.type === "decrementStep") rules += ' _va';
+    else {
+        if (props.size === "XL") rules += ' _v-3762yr';
+        else if (props.size === "L") rules += ' _v-37624i';
+        else if (props.size === "M") rules += ' _v-3761a9';
+        else if (props.size === "S") rules += ' _v-3760g0';
+    }
+    if (props.type === "decrementStep") rules += ' _wa';
+    else {
+        if (props.size === "XL") rules += ' _w-3762yr';
+        else if (props.size === "L") rules += ' _w-37624i';
+        else if (props.size === "M") rules += ' _w-3761a9';
+        else if (props.size === "S") rules += ' _w-3760g0';
+    }
+    if (props.type === "incrementStep") rules += ' _xa';
+    else {
+        if (props.size === "XL") rules += ' _x-3762yr';
+        else if (props.size === "L") rules += ' _x-37624i';
+        else if (props.size === "M") rules += ' _x-3761a9';
+        else if (props.size === "S") rules += ' _x-3760g0';
+    }
+    if (props.type === "incrementStep") rules += ' _ya';
+    else {
+        if (props.size === "XL") rules += ' _y-3762yr';
+        else if (props.size === "L") rules += ' _y-37624i';
+        else if (props.size === "M") rules += ' _y-3761a9';
+        else if (props.size === "S") rules += ' _y-3760g0';
+    }
+    rules += ' _1c';
+    rules += ' _2d';
+    if (props.size === "XL") {
+        if (props.isCollapsed) {
+            rules += ' lbs';
+            rules += ' lp';
+        } else {
+            rules += ' lbp';
+            rules += ' lo';
+        }
+    } else if (props.size === "L") {
+        if (props.isCollapsed) {
+            rules += ' lbp';
+            rules += ' lo';
+        } else {
+            rules += ' lbl';
+            rules += ' lk';
+        }
+    } else if (props.size === "M") {
+        if (props.isCollapsed) {
+            rules += ' lbl';
+            rules += ' lk';
+        } else {
+            rules += ' lbj';
+            rules += ' li';
+        }
+    } else if (props.size === "S") {
+        if (props.isCollapsed) {
+            rules += ' lbl';
+            rules += ' lk';
+        } else {
+            rules += ' lbi';
+            rules += ' lh';
+        }
+    }
+    if (props.isCollapsed) {
+        if (props.size === "XL") {
+            rules += ' kbj';
+            rules += ' ki';
+        } else if (props.size === "L") {
+            rules += ' kbi';
+            rules += ' kh';
+        } else if (props.size === "M") {
+            rules += ' kbg';
+            rules += ' kf';
+        } else if (props.size === "S") {
+            rules += ' kbe';
+            rules += ' kd';
+        }
+    } else rules += ' k1';
+    if (props.type === "increment") rules += ' ya';
+    else rules += ' yE';
+    if (props.isCollapsed) rules += ' _ba';
+    else rules += ' _bb';
+    if (props.isCollapsed) rules += ' _8-3t1y';
+    else rules += ' _8-3t1x';
+    if (props.isCollapsed) {
+        rules += ' oba';
+        rules += ' oa';
+    }
+    rules += ' _Oag';
+    rules += ' _Oa';
+    rules += ' _Qa-375x7f';
+    rules += ' _Q-375x7f';
+    rules += ' _Raa';
+    rules += ' _Ra';
+    if (props.isDisabled) rules += ' ba_____B';
+    else if (props.isHovered) rules += ' ba_____z';
+    else rules += ' ba_____x';
+    if (props.isDisabled) rules += ' bg';
+    else {
+        if (props.isPressed) rules += ' bh';
+        else if (props.isFocusVisible) rules += ' bh';
+        else if (props.isHovered) rules += ' bh';
+        else rules += ' bg';
+    }
+    rules += ' aa_____w';
+    if (props.isDisabled) rules += ' aj';
+    else {
+        if (props.isPressed) rules += ' ao';
+        else if (props.isFocusVisible) rules += ' ao';
+        else if (props.isHovered) rules += ' ao';
+        else rules += ' an';
+    }
+    return rules;
+};
+const $a366ef8f467b1cb5$var$iconStyles = function anonymous(props) {
+    let rules = " .";
+    rules += ' _8-3t1x';
+    if (props.type === "decrementStep") rules += ' R-3hn0u';
+    else if (props.type === "incrementStep") rules += ' R-375y3i';
+    else rules += ' R-3t1x';
+    rules += ' -rwx0fg_e-b';
+    return rules;
+};
+const $a366ef8f467b1cb5$var$stepperContainerStyles = function anonymous(props) {
+    let rules = " .";
+    rules += ' _Zd';
+    if (props.isCollapsed) rules += ' _6d';
+    else rules += ' _6a';
+    if (props.isCollapsed) rules += ' i-375zlr';
+    else {
+        if (props.size === "XL") rules += ' ic';
+        else if (props.size === "L") rules += ' ic';
+        else if (props.size === "M") rules += ' ib';
+        else if (props.size === "S") rules += ' ic';
+    }
+    if (props.isCollapsed) rules += ' j-375zlr';
+    else {
+        if (props.size === "XL") rules += ' jc';
+        else if (props.size === "L") rules += ' jc';
+        else if (props.size === "M") rules += ' jb';
+        else if (props.size === "S") rules += ' jc';
+    }
+    if (props.isCollapsed) {
+        if (props.size === "XL") {
+            rules += ' pbs';
+            rules += ' pp';
+        } else if (props.size === "L") {
+            rules += ' pbp';
+            rules += ' po';
+        } else if (props.size === "M") {
+            rules += ' pbl';
+            rules += ' pk';
+        } else if (props.size === "S") {
+            rules += ' pbi';
+            rules += ' ph';
+        }
+    }
+    if (props.isCollapsed) rules += ' D-375zlr';
+    else {
+        if (props.size === "XL") rules += ' D-3762yr';
+        else if (props.size === "L") rules += ' D-3762yr';
+        else if (props.size === "M") rules += ' D-3761a9';
+        else if (props.size === "S") rules += ' D-375zlr';
+    }
+    return rules;
+};
+const $a366ef8f467b1cb5$var$chevronSize = {
+    S: 'XS',
+    M: 'S',
+    L: 'L',
+    XL: 'XL'
+};
+function $a366ef8f467b1cb5$var$NumberField(props1, ref) {
+    let { label: label, description: descriptionMessage, errorMessage: errorMessage, isCollapsed: isCollapsed, isRequired: isRequired, size: size = 'M', labelPosition: labelPosition = 'top', necessityIndicator: necessityIndicator, labelAlign: labelAlign = 'start', UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, ...numberFieldProps } = props1;
+    let formContext = (0, $fwzUK$react.useContext)((0, $bfa4962d90c8af48$exports.FormContext));
+    let domRef = (0, $fwzUK$reactspectrumutils.useFocusableRef)(ref);
+    let inputRef = (0, $fwzUK$react.useRef)(null);
+    let decrementButtonRef = (0, $fwzUK$react.useRef)(null);
+    let incrementButtonRef = (0, $fwzUK$react.useRef)(null);
+    // Expose imperative interface for ref
+    (0, $fwzUK$react.useImperativeHandle)(ref, ()=>({
+            ...(0, $fwzUK$reactspectrumutils.createFocusableRef)(domRef, inputRef),
+            select () {
+                if (inputRef.current) inputRef.current.select();
+            },
+            getInputElement () {
+                return inputRef.current;
+            }
+        }));
+    return /*#__PURE__*/ (0, $fwzUK$reactjsxruntime.jsx)((0, $fwzUK$reactariacomponents.NumberField), {
+        isRequired: isRequired,
+        ...numberFieldProps,
+        style: UNSAFE_style,
+        className: UNSAFE_className + function anonymous(props, overrides) {
+            let rules = " .";
+            let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|l|q|r|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W)[^\s]+/g) || [];
+            rules += matches.join('');
+            let $__a = false;
+            let $__b = false;
+            for (let p of matches){
+                if (/^\s*__a/.test(p)) $__a = true;
+                if (/^\s*__b/.test(p)) $__b = true;
+            }
+            rules += ' _Zf';
+            if (!$__a) {
+                if (props.isInForm) rules += ' __a-3t1y';
+            }
+            if (!$__b) {
+                if (props.isInForm) {
+                    if (props.labelPosition === "side") rules += ' __b-7u9dhl';
+                }
+            }
+            if (props.isInForm) rules += ' __h-1cwd7ud';
+            else {
+                if (props.labelPosition === "side") rules += ' __h-jyg4vb';
+                else if (props.labelPosition === "top") rules += ' __h-375yi6';
+            }
+            if (props.labelPosition === "side") rules += ' __i-jyg4vb';
+            else if (props.labelPosition === "top") rules += ' __i-fdenls';
+            if (props.labelPosition === "side") rules += ' __j-5eez8j';
+            else if (props.labelPosition === "top") rules += ' __j-xlaqir';
+            if (props.size === "XL") {
+                rules += ' _dbj';
+                rules += ' _di';
+            } else if (props.size === "L") {
+                rules += ' _dbh';
+                rules += ' _dg';
+            } else if (props.size === "S") {
+                rules += ' _dbd';
+                rules += ' _dc';
+            } else if (props.size === "XS") {
+                rules += ' _dbb';
+                rules += ' _da';
+            } else {
+                rules += ' _dbf';
+                rules += ' _de';
+            }
+            rules += ' _1d';
+            rules += ' _f-1x99dlob';
+            rules += ' _fa';
+            if (props.size === "XL") {
+                rules += ' -aqrvqh_k-bw';
+                rules += ' -aqrvqh_k-v';
+            } else if (props.size === "L") {
+                rules += ' -aqrvqh_k-bs';
+                rules += ' -aqrvqh_k-p';
+            } else if (props.size === "S") {
+                rules += ' -aqrvqh_k-bl';
+                rules += ' -aqrvqh_k-k';
+            } else if (props.size === "XS") {
+                rules += ' -aqrvqh_k-bj';
+                rules += ' -aqrvqh_k-i';
+            } else {
+                rules += ' -aqrvqh_k-bp';
+                rules += ' -aqrvqh_k-o';
+            }
+            rules += ' -_1inj1bc_i--prjw07';
+            rules += ' jd';
+            rules += ' __R-yksgrp';
+            return rules;
+        }({
+            isInForm: !!formContext,
+            labelPosition: labelPosition,
+            size: size
+        }, props1.styles),
+        children: ({ isDisabled: isDisabled, isInvalid: isInvalid })=>{
+            return /*#__PURE__*/ (0, $fwzUK$reactjsxruntime.jsxs)((0, $fwzUK$reactjsxruntime.Fragment), {
+                children: [
+                    /*#__PURE__*/ (0, $fwzUK$reactjsxruntime.jsx)((0, $a0b996a550bb0891$exports.FieldLabel), {
+                        isDisabled: isDisabled,
+                        isRequired: isRequired,
+                        size: size,
+                        labelPosition: labelPosition,
+                        labelAlign: labelAlign,
+                        necessityIndicator: necessityIndicator,
+                        children: label
+                    }),
+                    /*#__PURE__*/ (0, $fwzUK$reactjsxruntime.jsxs)((0, $a0b996a550bb0891$exports.FieldGroup), {
+                        role: "presentation",
+                        isDisabled: isDisabled,
+                        isInvalid: isInvalid,
+                        size: size,
+                        styles: function anonymous(props) {
+                            let rules = " .";
+                            rules += ' __a-4cfph1';
+                            rules += ' __b-4cfph1';
+                            rules += ' __c-4cfph1';
+                            rules += ' __d-4cfph1';
+                            if (props.size === "XL") {
+                                rules += ' qbw';
+                                rules += ' qv';
+                            } else if (props.size === "L") {
+                                rules += ' qbs';
+                                rules += ' qp';
+                            } else if (props.size === "S") {
+                                rules += ' qbl';
+                                rules += ' qk';
+                            } else if (props.size === "XS") {
+                                rules += ' qbj';
+                                rules += ' qi';
+                            } else {
+                                rules += ' qbp';
+                                rules += ' qo';
+                            }
+                            rules += ' __m-1s8glxue';
+                            if (props.size === "XL") {
+                                rules += ' -usygro_l-bT';
+                                rules += ' -usygro_l-O';
+                            } else if (props.size === "L") {
+                                rules += ' -usygro_l-bS';
+                                rules += ' -usygro_l-R';
+                            } else if (props.size === "S") {
+                                rules += ' -usygro_l-bO';
+                                rules += ' -usygro_l-N';
+                            } else {
+                                rules += ' -usygro_l-bQ';
+                                rules += ' -usygro_l-P';
+                            }
+                            rules += ' m-rwozxi';
+                            rules += ' C-375tnm';
+                            rules += ' D-375tnn';
+                            rules += ' __Hb';
+                            rules += ' -_375tnm_C-H';
+                            rules += ' -_375tnn_D-a';
+                            return rules;
+                        }({
+                            size: size
+                        }),
+                        children: [
+                            /*#__PURE__*/ (0, $fwzUK$reactjsxruntime.jsx)((0, $fwzUK$reactariacomponents.InputContext).Consumer, {
+                                children: (ctx)=>/*#__PURE__*/ (0, $fwzUK$reactjsxruntime.jsx)((0, $fwzUK$reactariacomponents.InputContext).Provider, {
+                                        value: {
+                                            ...ctx,
+                                            ref: (0, $fwzUK$reactariautils.mergeRefs)(ctx?.ref, inputRef)
+                                        },
+                                        children: /*#__PURE__*/ (0, $fwzUK$reactjsxruntime.jsx)((0, $a0b996a550bb0891$exports.Input), {})
+                                    })
+                            }),
+                            isInvalid && /*#__PURE__*/ (0, $fwzUK$reactjsxruntime.jsx)((0, $a0b996a550bb0891$exports.FieldErrorIcon), {
+                                isDisabled: isDisabled
+                            }),
+                            /*#__PURE__*/ (0, $fwzUK$reactjsxruntime.jsxs)("div", {
+                                className: $a366ef8f467b1cb5$var$stepperContainerStyles({
+                                    isCollapsed: isCollapsed,
+                                    size: size
+                                }),
+                                children: [
+                                    /*#__PURE__*/ (0, $fwzUK$reactjsxruntime.jsx)($a366ef8f467b1cb5$var$StepButton, {
+                                        ref: decrementButtonRef,
+                                        slot: "decrement",
+                                        style: (renderProps)=>(0, $2061c83559b50a66$exports.pressScale)(decrementButtonRef)(renderProps),
+                                        className: (renderProps)=>$a366ef8f467b1cb5$var$inputButton({
+                                                ...renderProps,
+                                                type: isCollapsed ? 'decrementStep' : 'decrement',
+                                                isCollapsed: isCollapsed,
+                                                size: size
+                                            }),
+                                        children: isCollapsed ? /*#__PURE__*/ (0, $fwzUK$reactjsxruntime.jsx)((0, $1df9f1c9262ce5df$exports.default), {
+                                            size: $a366ef8f467b1cb5$var$chevronSize[size],
+                                            className: $a366ef8f467b1cb5$var$iconStyles({
+                                                type: 'decrementStep'
+                                            })
+                                        }) : /*#__PURE__*/ (0, $fwzUK$reactjsxruntime.jsx)((0, $84c37b7bd5c1374e$exports.default), {
+                                            size: size,
+                                            className: $a366ef8f467b1cb5$var$iconStyles({})
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, $fwzUK$reactjsxruntime.jsx)($a366ef8f467b1cb5$var$StepButton, {
+                                        ref: incrementButtonRef,
+                                        slot: "increment",
+                                        style: (renderProps)=>(0, $2061c83559b50a66$exports.pressScale)(incrementButtonRef)(renderProps),
+                                        className: (renderProps)=>$a366ef8f467b1cb5$var$inputButton({
+                                                ...renderProps,
+                                                type: isCollapsed ? 'incrementStep' : 'increment',
+                                                isCollapsed: isCollapsed,
+                                                size: size
+                                            }),
+                                        children: isCollapsed ? /*#__PURE__*/ (0, $fwzUK$reactjsxruntime.jsx)((0, $1df9f1c9262ce5df$exports.default), {
+                                            size: $a366ef8f467b1cb5$var$chevronSize[size],
+                                            className: $a366ef8f467b1cb5$var$iconStyles({
+                                                type: 'incrementStep'
+                                            })
+                                        }) : /*#__PURE__*/ (0, $fwzUK$reactjsxruntime.jsx)((0, $54686c7c3f031ee2$exports.default), {
+                                            size: size,
+                                            className: $a366ef8f467b1cb5$var$iconStyles({})
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    descriptionMessage && /*#__PURE__*/ (0, $fwzUK$reactjsxruntime.jsx)((0, $fwzUK$reactariacomponents.Text), {
+                        slot: "description",
+                        children: descriptionMessage
+                    }),
+                    /*#__PURE__*/ (0, $fwzUK$reactjsxruntime.jsx)((0, $a0b996a550bb0891$exports.HelpText), {
+                        size: size,
+                        isDisabled: isDisabled,
+                        isInvalid: isInvalid,
+                        description: descriptionMessage,
+                        children: errorMessage
+                    })
+                ]
+            });
+        }
+    });
+}
+const $a366ef8f467b1cb5$var$additionalButtonHTMLAttributes = new Set([
+    'form',
+    'formAction',
+    'formEncType',
+    'formMethod',
+    'formNoValidate',
+    'formTarget',
+    'name',
+    'value'
+]);
+let $a366ef8f467b1cb5$var$StepButton = /*#__PURE__*/ (0, $fwzUK$react.forwardRef)((props, ref)=>{
+    [props, ref] = (0, $fwzUK$reactariacomponents.useContextProps)(props, ref, (0, $fwzUK$reactariacomponents.ButtonContext));
+    let ctx = props;
+    /**
+   * Must use div for now because Safari pointer event bugs on disabled form elements.
+   * Link https://bugs.webkit.org/show_bug.cgi?id=219188.
+   */ let { buttonProps: buttonProps, isPressed: isPressed } = (0, $fwzUK$reactaria.useButton)({
+        ...props,
+        elementType: 'div'
+    }, ref);
+    let { focusProps: focusProps, isFocused: isFocused, isFocusVisible: isFocusVisible } = (0, $fwzUK$reactaria.useFocusRing)(props);
+    let { hoverProps: hoverProps, isHovered: isHovered } = (0, $fwzUK$reactaria.useHover)(props);
+    let renderProps = $a366ef8f467b1cb5$var$useRenderProps({
+        ...props,
+        values: {
+            isHovered: isHovered,
+            isPressed: isPressed,
+            isFocused: isFocused,
+            isFocusVisible: isFocusVisible,
+            isDisabled: props.isDisabled || false
+        },
+        defaultClassName: 'react-aria-Button'
+    });
+    return /*#__PURE__*/ (0, $fwzUK$reactjsxruntime.jsx)("div", {
+        ...(0, $fwzUK$reactariautils.filterDOMProps)(props, {
+            propNames: $a366ef8f467b1cb5$var$additionalButtonHTMLAttributes
+        }),
+        ...(0, $fwzUK$reactariautils.mergeProps)(buttonProps, focusProps, hoverProps),
+        ...renderProps,
+        ref: ref,
+        slot: props.slot || undefined,
+        "data-disabled": props.isDisabled || undefined,
+        "data-pressed": ctx.isPressed || isPressed || undefined,
+        "data-hovered": isHovered || undefined,
+        "data-focused": isFocused || undefined,
+        "data-focus-visible": isFocusVisible || undefined
+    });
+});
+/**
+ * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.
+ */ let $a366ef8f467b1cb5$export$63c5fa0b2fdccd2e = /*#__PURE__*/ (0, $fwzUK$react.forwardRef)($a366ef8f467b1cb5$var$NumberField);
+// replace from RAC
+function $a366ef8f467b1cb5$var$useRenderProps(props) {
+    let { className: className, style: style, children: children, defaultClassName: defaultClassName, defaultChildren: defaultChildren, defaultStyle: defaultStyle, values: values } = props;
+    return (0, $fwzUK$react.useMemo)(()=>{
+        let computedClassName;
+        let computedStyle;
+        let computedChildren;
+        if (typeof className === 'function') computedClassName = className({
+            ...values,
+            defaultClassName: defaultClassName
+        });
+        else computedClassName = className;
+        if (typeof style === 'function') computedStyle = style({
+            ...values,
+            defaultStyle: defaultStyle || {}
+        });
+        else computedStyle = style;
+        if (typeof children === 'function') computedChildren = children({
+            ...values,
+            defaultChildren: defaultChildren
+        });
+        else if (children == null) computedChildren = defaultChildren;
+        else computedChildren = children;
+        return {
+            className: computedClassName ?? defaultClassName,
+            style: computedStyle || defaultStyle ? {
+                ...defaultStyle,
+                ...computedStyle
+            } : undefined,
+            children: computedChildren ?? defaultChildren,
+            'data-rac': ''
+        };
+    }, [
+        className,
+        style,
+        children,
+        defaultClassName,
+        defaultChildren,
+        defaultStyle,
+        values
+    ]);
+}
+
+
+//# sourceMappingURL=NumberField.cjs.map

package/dist/NumberField.cjs.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/NumberField.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport Add from '../ui-icons/Add';\nimport {\n  ButtonProps as AriaButtonProps,\n  NumberField as AriaNumberField,\n  NumberFieldProps as AriaNumberFieldProps,\n  ButtonContext,\n  InputContext,\n  Text,\n  useContextProps\n} from 'react-aria-components';\nimport {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {createFocusableRef, useFocusableRef} from '@react-spectrum/utils';\nimport {CSSProperties, ForwardedRef, forwardRef, ReactNode, useContext, useImperativeHandle, useMemo, useRef} from 'react';\nimport Dash from '../ui-icons/Dash';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';\nimport {FocusableRef, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext} from './Form';\nimport {pressScale} from './pressScale';\nimport {useButton, useFocusRing, useHover} from 'react-aria';\n\n\nexport interface NumberFieldProps extends\n  AriaNumberFieldProps,\n  StyleProps,\n  Omit<SpectrumLabelableProps, 'contextualHelp'>,\n  HelpTextProps {\n  /**\n   * Whether the NumberField step buttons should be collapsed into a single column.\n   *\n   * @default \"false\"\n   */\n    isCollapsed?: boolean,\n  /**\n   * The size of the NumberField.\n   *\n   * @default \"M\"\n   */\n    size?: 'S' | 'M' | 'L' | 'XL',\n    label?: ReactNode\n}\n\nconst inputButton = style({\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\n  borderTopRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      decrementStep: 'none'\n    }\n  },\n  borderBottomRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      incrementStep: 'none'\n    }\n  },\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: {\n    size: {\n      S: {\n        default: 16,\n        isCollapsed: 24\n      },\n      M: {\n        default: 20,\n        isCollapsed: 24\n      },\n      L: {\n        default: 24,\n        isCollapsed: 32\n      },\n      XL: {\n        default: 32,\n        isCollapsed: 40\n      }\n    }\n  },\n  height: {\n    default: 'auto',\n    isCollapsed: {\n      size: {\n        S: 8,\n        M: 12,\n        L: 16,\n        XL: 20\n      }\n    }\n  },\n  marginStart: {\n    default: 'text-to-control',\n    type: {\n      increment: 0\n    }\n  },\n  aspectRatio: {\n    default: 'square',\n    isCollapsed: 'auto'\n  },\n  flexShrink: {\n    default: 0,\n    isCollapsed: 1\n  },\n  minHeight: {\n    isCollapsed: 0\n  },\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace'\n    }\n  }\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: {\n    default: 0,\n    type: {\n      incrementStep: 270,\n      decrementStep: 90\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst stepperContainerStyles = style({\n  display: 'flex',\n  flexDirection: {\n    default: 'row',\n    isCollapsed: 'column-reverse'\n  },\n  gap: {\n    default: {\n      size: {\n        S: 8,\n        M: 4,\n        L: 8,\n        XL: 8\n      }\n    },\n    isCollapsed: '[2px]'\n  },\n  maxHeight: {\n    isCollapsed: {\n      size: {\n        S: 16,\n        M: 24,\n        L: 32,\n        XL: 40 // 40\n      }\n    }\n  },\n  paddingEnd: {\n    default: {\n      size: {\n        S: '[2px]',\n        M: '[4px]',\n        L: '[6px]',\n        XL: '[6px]'\n      }\n    },\n    isCollapsed: '[2px]'\n  }\n});\n\ntype Size = 'XS' | 'S' | 'M' | 'L' | 'XL';\nconst chevronSize: Record<'S' | 'M' | 'L' | 'XL', Size> = {\n  S: 'XS',\n  M: 'S',\n  L: 'L',\n  XL: 'XL'\n};\n\nfunction NumberField(props: NumberFieldProps, ref: FocusableRef<HTMLDivElement>) {\n  let {\n    label,\n    description: descriptionMessage,\n    errorMessage,\n    isCollapsed,\n    isRequired,\n    size = 'M',\n    labelPosition = 'top',\n    necessityIndicator,\n    labelAlign = 'start',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...numberFieldProps\n  } = props;\n  let formContext = useContext(FormContext);\n  let domRef = useFocusableRef(ref);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let decrementButtonRef = useRef<HTMLDivElement | null>(null);\n  let incrementButtonRef = useRef<HTMLDivElement | null>(null);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n\n  return (\n    <AriaNumberField\n      isRequired={isRequired}\n      {...numberFieldProps}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {\n          ({isDisabled, isInvalid}) => {\n            return  (\n              <>\n                <FieldLabel\n                  isDisabled={isDisabled}\n                  isRequired={isRequired}\n                  size={size}\n                  labelPosition={labelPosition}\n                  labelAlign={labelAlign}\n                  necessityIndicator={necessityIndicator}>\n                  {label}\n                </FieldLabel>\n                <FieldGroup\n                  role=\"presentation\"\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  size={size}\n                  styles={style({\n                    ...fieldInput(),\n                    paddingStart: 'edge-to-text',\n                    paddingEnd: 0,\n                    cursor: 'default'\n                  })({size})}>\n                  <InputContext.Consumer>\n                    {ctx => (\n                      <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                        <Input />\n                      </InputContext.Provider>\n                    )}\n                  </InputContext.Consumer>\n                  {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n                  <div className={stepperContainerStyles({isCollapsed, size})}>\n                    <StepButton\n                      ref={decrementButtonRef}\n                      slot=\"decrement\"\n                      style={renderProps => pressScale(decrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: isCollapsed ? 'decrementStep' : 'decrement',\n                        isCollapsed,\n                        size\n                      })}>\n                      {\n                        isCollapsed\n                          ? <ChevronIcon size={chevronSize[size]} className={iconStyles({type: 'decrementStep'})} />\n                          : <Dash size={size} className={iconStyles({})} />\n                      }\n                    </StepButton>\n                    <StepButton\n                      ref={incrementButtonRef}\n                      slot=\"increment\"\n                      style={renderProps => pressScale(incrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: isCollapsed ? 'incrementStep' : 'increment',\n                        isCollapsed,\n                        size\n                      })}>\n                      {\n                        isCollapsed\n                          ? <ChevronIcon size={chevronSize[size]} className={iconStyles({type: 'incrementStep'})} />\n                          : <Add size={size} className={iconStyles({})} />\n                      }\n                    </StepButton>\n                  </div>\n                </FieldGroup>\n                {descriptionMessage && <Text slot=\"description\">{descriptionMessage}</Text>}\n                <HelpText\n                  size={size}\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  description={descriptionMessage}>\n                  {errorMessage}\n                </HelpText>\n              </>\n            );\n          }\n        }\n    </AriaNumberField>\n  );\n}\n\ninterface StepButtonProps extends AriaButtonProps {\n}\n\nconst additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);\n\nlet StepButton = forwardRef((props: StepButtonProps, ref: ForwardedRef<HTMLDivElement>) => {\n  [props, ref] = useContextProps(props, ref, ButtonContext as any);\n  let ctx = props as any;\n  /**\n   * Must use div for now because Safari pointer event bugs on disabled form elements.\n   * Link https://bugs.webkit.org/show_bug.cgi?id=219188.\n   */\n  let {buttonProps, isPressed} = useButton({...props, elementType: 'div'}, ref);\n  let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);\n  let {hoverProps, isHovered} = useHover(props);\n  let renderProps = useRenderProps({\n    ...props,\n    values: {isHovered, isPressed, isFocused, isFocusVisible, isDisabled: props.isDisabled || false},\n    defaultClassName: 'react-aria-Button'\n  });\n  return (\n    <div\n      {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}\n      {...mergeProps(buttonProps, focusProps, hoverProps)}\n      {...renderProps}\n      ref={ref}\n      slot={props.slot || undefined}\n      data-disabled={props.isDisabled || undefined}\n      data-pressed={ctx.isPressed || isPressed || undefined}\n      data-hovered={isHovered || undefined}\n      data-focused={isFocused || undefined}\n      data-focus-visible={isFocusVisible || undefined} />\n  );\n});\n\n/**\n * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.\n */\nlet _NumberField = forwardRef(NumberField);\nexport {_NumberField as NumberField};\n\n// replace from RAC\nfunction useRenderProps(props: any) {\n  let {\n    className,\n    style,\n    children,\n    defaultClassName = undefined,\n    defaultChildren = undefined,\n    defaultStyle,\n    values\n  } = props;\n\n  return useMemo(() => {\n    let computedClassName: string | undefined;\n    let computedStyle: CSSProperties | undefined;\n    let computedChildren: ReactNode | undefined;\n\n    if (typeof className === 'function') {\n      computedClassName = className({...values, defaultClassName});\n    } else {\n      computedClassName = className;\n    }\n\n    if (typeof style === 'function') {\n      computedStyle = style({...values, defaultStyle: defaultStyle || {}});\n    } else {\n      computedStyle = style;\n    }\n\n    if (typeof children === 'function') {\n      computedChildren = children({...values, defaultChildren});\n    } else if (children == null) {\n      computedChildren = defaultChildren;\n    } else {\n      computedChildren = children;\n    }\n\n    return {\n      className: computedClassName ?? defaultClassName,\n      style: (computedStyle || defaultStyle) ? {...defaultStyle, ...computedStyle} : undefined,\n      children: computedChildren ?? defaultChildren,\n      'data-rac': ''\n    };\n  }, [className, style, children, defaultClassName, defaultChildren, defaultStyle, values]);\n}\n"],"names":[],"version":3,"file":"NumberField.cjs.map"}