npm - @react-spectrum/s2 - Versions diffs - 3.0.0-nightly-bebc9764a-241010 → 3.0.0-nightly-db60babaf-241012 - Mend

@react-spectrum/s2 3.0.0-nightly-bebc9764a-241010 → 3.0.0-nightly-db60babaf-241012

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/dist/Meter.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"~~ACkDgB~~;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAII;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtBH;EAII;;;;EAAA;;;;;AAJJ;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAII;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AALA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAaD;;;;;;AAbC;EAAA;IAAA;;;;;;AAaD","sources":["9248845643c61064","packages/@react-spectrum/s2/src/Meter.tsx"],"sourcesContent":["@import \"a82baabbcb8c2181\";\n@import \"387ba29f17cbbc9f\";\n@import \"ae93cf6195cc0b20\";\n@import \"c4a3f6bd0d23c6e6\";\n","/\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 {\n Meter as AriaMeter,\n MeterProps as AriaMeterProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {size, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n /* The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n * @default 'informative'\n /\n variant?: 'informative' \| 'positive' \| 'notice' \| 'negative',\n /\n The size of the Meter.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL',\n /* The static color style to apply. Useful when the button appears over a color background. /\n staticColor?: 'white' \| 'black'\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' \| 'className' \| 'style'>, MeterStyleProps, StyleProps {\n /* The content to display as the label. /\n label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: size(6),\n size: {\n S: 4, // progress-bar-thickness-small\n M: size(6), // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: size(10) // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fillStyles = style<MeterStyleProps>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: 'informative',\n variant: {\n positive: 'positive',\n notice: 'notice',\n negative: 'negative'\n },\n staticColor: {\n white: {\n default: 'transparent-white-900'\n },\n // TODO: Is there a black static color in S2?\n black: {\n default: 'transparent-black-900'\n }\n },\n forcedColors: 'ButtonText'\n }\n});\n\nfunction Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n size = 'M',\n staticColor,\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n variant = 'informative',\n ...groupProps\n } = props;\n\n return (\n <AriaMeter\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size,\n variant,\n staticColor,\n labelPosition~~: 'top'~~\n }, styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition~~=\"top\"~~ staticColor={staticColor}>{label}</FieldLabel>}\n {label && <Text styles={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</Text>}\n <SkeletonWrapper>\n <div className={trackStyles({staticColor, size})}>\n <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />\n </div>\n </SkeletonWrapper>\n </>\n )}\n </AriaMeter>\n );\n}\n\n/\n Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nlet _Meter = forwardRef(Meter);\nexport {_Meter as Meter};\n"],"names":[],"version":3,"file":"Meter.css.map"}
1	+ {"mappings":"ACyDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAII;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtBH;EAII;;;;EAAA;;;;;AAJJ;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAII;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AALA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAaD;;;;;;AAbC;EAAA;IAAA;;;;;;AAaD","sources":["9248845643c61064","packages/@react-spectrum/s2/src/Meter.tsx"],"sourcesContent":["@import \"a82baabbcb8c2181\";\n@import \"387ba29f17cbbc9f\";\n@import \"ae93cf6195cc0b20\";\n@import \"c4a3f6bd0d23c6e6\";\n","/\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 {\n Meter as AriaMeter,\n MeterProps as AriaMeterProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {size, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n /* The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n * @default 'informative'\n /\n variant?: 'informative' \| 'positive' \| 'notice' \| 'negative',\n /\n The size of the Meter.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL',\n /* \n * The static color style to apply. Useful when the button appears over a color background. \n /\n staticColor?: 'white' \| 'black',\n /\n The label's overall position relative to the element it is labeling.\n * @default 'top'\n /\n labelPosition?: LabelPosition\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' \| 'className' \| 'style'>, MeterStyleProps, StyleProps {\n /* The content to display as the label. /\n label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: size(6),\n size: {\n S: 4, // progress-bar-thickness-small\n M: size(6), // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: size(10) // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fillStyles = style<MeterStyleProps>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: 'informative',\n variant: {\n positive: 'positive',\n notice: 'notice',\n negative: 'negative'\n },\n staticColor: {\n white: {\n default: 'transparent-white-900'\n },\n // TODO: Is there a black static color in S2?\n black: {\n default: 'transparent-black-900'\n }\n },\n forcedColors: 'ButtonText'\n }\n});\n\nfunction Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n size = 'M',\n staticColor,\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n variant = 'informative',\n labelPosition = 'top',\n ...groupProps\n } = props;\n\n return (\n <AriaMeter\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size,\n variant,\n staticColor,\n labelPosition\n }, styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n {label && <Text styles={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</Text>}\n <SkeletonWrapper>\n <div className={trackStyles({staticColor, size})}>\n <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />\n </div>\n </SkeletonWrapper>\n </>\n )}\n </AriaMeter>\n );\n}\n\n/\n Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nlet _Meter = forwardRef(Meter);\nexport {_Meter as Meter};\n"],"names":[],"version":3,"file":"Meter.css.map"}

package/dist/Meter.mjs CHANGED Viewed

@@ -226,7 +226,7 @@ const $bb56943300b294c6$var$fillStyles = function anonymous(props) {
 function $bb56943300b294c6$var$Meter(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $bb56943300b294c6$export$8b645da15a96b44f);
     let domRef = (0, $blcZa$useDOMRef)(ref);
-    let { label: label, size: size = 'M', staticColor: staticColor, styles: styles, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, variant: variant = 'informative', ...groupProps } = props;
+    let { label: label, size: size = 'M', staticColor: staticColor, styles: styles, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, variant: variant = 'informative', labelPosition: labelPosition = 'top', ...groupProps } = props;
     return /*#__PURE__*/ (0, $blcZa$jsx)((0, $blcZa$Meter), {
         ...groupProps,
         ref: domRef,
@@ -235,14 +235,14 @@ function $bb56943300b294c6$var$Meter(props, ref) {
             size: size,
             variant: variant,
             staticColor: staticColor,
-            labelPosition: 'top'
+            labelPosition: labelPosition
         }, styles),
         children: ({ percentage: percentage, valueText: valueText })=>/*#__PURE__*/ (0, $blcZa$jsxs)((0, $blcZa$Fragment), {
                 children: [
                     label && /*#__PURE__*/ (0, $blcZa$jsx)((0, $9afd80978c252040$export$1acdcf5a973a8414), {
                         size: size,
                         labelAlign: "start",
-                        labelPosition: "top",
+                        labelPosition: labelPosition,
                         staticColor: staticColor,
                         children: label
                     }),

package/dist/Meter.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;~~AAsCM~~,MAAM,0DAAe,CAAA,GAAA,oBAAY,EAAyD;AAEjG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,UACX,MAAM,oBACN,mBAAmB,kBACnB,YAAY,WACZ,UAAU,~~eACV~~,GAAG,YACJ,GAAG;IAEJ,qBACE,gBAAC,CAAA,GAAA,YAAQ;QACN,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBACpC;qBACA;yBACA;~~YACA,eAAe~~;~~QACjB~~,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gBAAC,CAAA,GAAA,yCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,~~eAAc~~;~~wBAAM~~,aAAa;kCAAc;;~~oBACnG~~,uBAAS,gBAAC,CAAA,GAAA,yCAAG;wBAAE,QAAQ,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCAC9E,gBAAC,CAAA,GAAA,yCAAc;kCACb,cAAA,gBAAC;4BAAI,WAAW,kCAAY;6CAAC;sCAAa;4BAAI;sCAC5C,cAAA,gBAAC;gCAAI,WAAW,iCAAW;iDAAC;6CAAa;gCAAO;gCAAI,OAAO;oCAAC,OAAO,aAAa;gCAAG;;;;;;;AAOjG;AAEA;;;CAGC,GACD,IAAI,0DAAS,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Meter.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 {\n Meter as AriaMeter,\n MeterProps as AriaMeterProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {size, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n /* The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n * @default 'informative'\n /\n variant?: 'informative' \| 'positive' \| 'notice' \| 'negative',\n /\n The size of the Meter.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL',\n /* The static color style to apply. Useful when the button appears over a color background. /\n staticColor?: 'white' \| 'black'\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' \| 'className' \| 'style'>, MeterStyleProps, StyleProps {\n /* The content to display as the label. /\n label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: size(6),\n size: {\n S: 4, // progress-bar-thickness-small\n M: size(6), // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: size(10) // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fillStyles = style<MeterStyleProps>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: 'informative',\n variant: {\n positive: 'positive',\n notice: 'notice',\n negative: 'negative'\n },\n staticColor: {\n white: {\n default: 'transparent-white-900'\n },\n // TODO: Is there a black static color in S2?\n black: {\n default: 'transparent-black-900'\n }\n },\n forcedColors: 'ButtonText'\n }\n});\n\nfunction Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n size = 'M',\n staticColor,\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n variant = 'informative',\n ...groupProps\n } = props;\n\n return (\n <AriaMeter\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size,\n variant,\n staticColor,\n labelPosition~~: 'top'~~\n }, styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition~~=\"top\"~~ staticColor={staticColor}>{label}</FieldLabel>}\n {label && <Text styles={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</Text>}\n <SkeletonWrapper>\n <div className={trackStyles({staticColor, size})}>\n <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />\n </div>\n </SkeletonWrapper>\n </>\n )}\n </AriaMeter>\n );\n}\n\n/\n Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nlet _Meter = forwardRef(Meter);\nexport {_Meter as Meter};\n"],"names":[],"version":3,"file":"Meter.mjs.map"}
1	+ {"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA6CM,MAAM,0DAAe,CAAA,GAAA,oBAAY,EAAyD;AAEjG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,UACX,MAAM,oBACN,mBAAmB,kBACnB,YAAY,WACZ,UAAU,8BACV,gBAAgB,OAChB,GAAG,YACJ,GAAG;IAEJ,qBACE,gBAAC,CAAA,GAAA,YAAQ;QACN,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBACpC;qBACA;yBACA;2BACA;QACF,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gBAAC,CAAA,GAAA,yCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,uBAAS,gBAAC,CAAA,GAAA,yCAAG;wBAAE,QAAQ,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCAC9E,gBAAC,CAAA,GAAA,yCAAc;kCACb,cAAA,gBAAC;4BAAI,WAAW,kCAAY;6CAAC;sCAAa;4BAAI;sCAC5C,cAAA,gBAAC;gCAAI,WAAW,iCAAW;iDAAC;6CAAa;gCAAO;gCAAI,OAAO;oCAAC,OAAO,aAAa;gCAAG;;;;;;;AAOjG;AAEA;;;CAGC,GACD,IAAI,0DAAS,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Meter.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 {\n Meter as AriaMeter,\n MeterProps as AriaMeterProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {size, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n /* The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n * @default 'informative'\n /\n variant?: 'informative' \| 'positive' \| 'notice' \| 'negative',\n /\n The size of the Meter.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL',\n /* \n * The static color style to apply. Useful when the button appears over a color background. \n /\n staticColor?: 'white' \| 'black',\n /\n The label's overall position relative to the element it is labeling.\n * @default 'top'\n /\n labelPosition?: LabelPosition\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' \| 'className' \| 'style'>, MeterStyleProps, StyleProps {\n /* The content to display as the label. /\n label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: size(6),\n size: {\n S: 4, // progress-bar-thickness-small\n M: size(6), // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: size(10) // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fillStyles = style<MeterStyleProps>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: 'informative',\n variant: {\n positive: 'positive',\n notice: 'notice',\n negative: 'negative'\n },\n staticColor: {\n white: {\n default: 'transparent-white-900'\n },\n // TODO: Is there a black static color in S2?\n black: {\n default: 'transparent-black-900'\n }\n },\n forcedColors: 'ButtonText'\n }\n});\n\nfunction Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n size = 'M',\n staticColor,\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n variant = 'informative',\n labelPosition = 'top',\n ...groupProps\n } = props;\n\n return (\n <AriaMeter\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size,\n variant,\n staticColor,\n labelPosition\n }, styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n {label && <Text styles={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</Text>}\n <SkeletonWrapper>\n <div className={trackStyles({staticColor, size})}>\n <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />\n </div>\n </SkeletonWrapper>\n </>\n )}\n </AriaMeter>\n );\n}\n\n/\n Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nlet _Meter = forwardRef(Meter);\nexport {_Meter as Meter};\n"],"names":[],"version":3,"file":"Meter.mjs.map"}

package/dist/Slider.cjs CHANGED Viewed

@@ -132,38 +132,6 @@ let $e937566cb5c6349c$export$6b2a7d5132615086 = function anonymous(props) {
     rules += ' __b-4ka10a';
     rules += ' __c-4ka10a';
     rules += ' __d-4ka10a';
-    if (props.size === "XL") {
-        rules += ' qby';
-        rules += ' qx';
-    } else if (props.size === "L") {
-        rules += ' qbu';
-        rules += ' qr';
-    } else if (props.size === "S") {
-        rules += ' qbn';
-        rules += ' qm';
-    } else if (props.size === "XS") {
-        rules += ' qbl';
-        rules += ' qk';
-    } else {
-        rules += ' qbr';
-        rules += ' qq';
-    }
-    if (props.isQuiet) rules += ' __ma';
-    else rules += ' __m-1s8glxue';
-    if (props.size === "XL") {
-        rules += ' -usygro_l-bV';
-        rules += ' -usygro_l-Q';
-    } else if (props.size === "L") {
-        rules += ' -usygro_l-bU';
-        rules += ' -usygro_l-T';
-    } else if (props.size === "S") {
-        rules += ' -usygro_l-bQ';
-        rules += ' -usygro_l-P';
-    } else {
-        rules += ' -usygro_l-bS';
-        rules += ' -usygro_l-R';
-    }
-    rules += ' m-rwozxi';
     rules += ' Uc';
     rules += ' l4';
     if (props.size === "XL") {
@@ -574,6 +542,38 @@ function $e937566cb5c6349c$export$9418495bb635ebde(props1) {
                             rules += ' __b-4cfph1';
                             rules += ' __c-4cfph1';
                             rules += ' __d-4cfph1';
+                            if (props.size === "XL") {
+                                rules += ' qby';
+                                rules += ' qx';
+                            } else if (props.size === "L") {
+                                rules += ' qbu';
+                                rules += ' qr';
+                            } else if (props.size === "S") {
+                                rules += ' qbn';
+                                rules += ' qm';
+                            } else if (props.size === "XS") {
+                                rules += ' qbl';
+                                rules += ' qk';
+                            } else {
+                                rules += ' qbr';
+                                rules += ' qq';
+                            }
+                            if (props.isQuiet) rules += ' __ma';
+                            else rules += ' __m-1s8glxue';
+                            if (props.size === "XL") {
+                                rules += ' -usygro_l-bV';
+                                rules += ' -usygro_l-Q';
+                            } else if (props.size === "L") {
+                                rules += ' -usygro_l-bU';
+                                rules += ' -usygro_l-T';
+                            } else if (props.size === "S") {
+                                rules += ' -usygro_l-bQ';
+                                rules += ' -usygro_l-P';
+                            } else {
+                                rules += ' -usygro_l-bS';
+                                rules += ' -usygro_l-R';
+                            }
+                            rules += ' m-rwozxi';
                             rules += ' _Ze';
                             rules += ' _1c';
                             if (props.size === "XL") rules += ' ih';
@@ -616,7 +616,7 @@ function $e937566cb5c6349c$var$Slider(props, ref) {
                 isInForm: !!formContext
             }),
             children: ({ state: state, isDisabled: isDisabled })=>{
-                fillOffset = fillOffset !== undefined ? (0, $5DeaH$reactariautils.clamp)(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : 0;
+                fillOffset = fillOffset !== undefined ? (0, $5DeaH$reactariautils.clamp)(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : state.getThumbMinValue(0);
                 let fillWidth = state.getThumbPercent(0) - state.getValuePercent(fillOffset);
                 let isRightOfOffset = fillWidth > 0;
                 let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);

package/dist/Slider.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Slider.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 {\n Slider as AriaSlider,\n SliderProps as AriaSliderProps,\n ContextValue,\n SliderOutput,\n SliderThumb,\n SliderTrack\n} from 'react-aria-components';\nimport {clamp} from '@react-aria/utils';\nimport {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel} from './Field';\nimport {FocusableRef, FocusableRefValue, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {focusRing, size, style} from '../style' with {type: 'macro'};\nimport {FormContext, useFormProps} from './Form';\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocale, useNumberFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'children' \| 'style' \| 'className' \| 'orientation'>, Omit<SpectrumLabelableProps, 'necessityIndicator' \| 'isRequired'>, StyleProps {\n children?: ReactNode,\n /\n The size of the Slider.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL',\n /\n Whether the Slider should be displayed with an emphasized style.\n /\n isEmphasized?: boolean,\n /\n The style of the Slider's track.\n \n @default 'thin'\n /\n trackStyle?: 'thin' \| 'thick', // TODO: add ramp\n /\n The style of the Slider's thumb.\n \n @default 'default'\n /\n thumbStyle?: 'default' \| 'precise'\n // TODO\n // isEditable?: boolean,\n}\n\nexport interface SliderProps extends Omit<SliderBaseProps<number>, 'children'>, InputDOMProps {\n /\n The offset from which to start the fill.\n /\n fillOffset?: number\n}\n\nexport const SliderContext = createContext<ContextValue<SliderProps, FocusableRefValue<HTMLDivElement>>>(null);\n\nconst slider = style({\n font: 'control',\n alignItems: {\n labelPosition: {\n side: 'center'\n }\n },\n color: {\n default: 'neutral-subdued',\n isDisabled: 'disabled'\n },\n columnGap: {\n size: {\n S: 16,\n M: 16,\n L: 20,\n XL: 24\n },\n isInForm: 12\n }\n}, getAllowedOverrides());\n\nconst labelContainer = style({\n display: {\n labelPosition: {\n top: 'grid'\n }\n },\n gridArea: 'label',\n width: 'full',\n gridTemplateAreas: {\n labelPosition: {\n top: ['label output']\n }\n },\n gridTemplateColumns: {\n labelPosition: {\n top: [\n '1fr auto'\n ]\n }\n },\n textAlign: {\n labelPosition: {\n side: {\n labelAlign: {\n start: 'start',\n end: 'end'\n }\n }\n }\n },\n '--field-gap': {\n type: 'paddingBottom',\n value: 0\n }\n});\n\nconst output = style({\n gridArea: 'output',\n textAlign: {\n labelPosition: {\n top: {\n direction: {\n ltr: 'end',\n rtl: 'start'\n }\n },\n side: {\n direction: {\n ltr: 'start',\n rtl: 'end'\n },\n isInForm: 'end'\n }\n }\n }\n});\n\nexport let track = style({\n ...fieldInput(),\n gridArea: 'track',\n position: 'relative',\n width: 'full',\n height: {\n size: {\n S: 24,\n M: 32,\n L: 40,\n XL: 48\n }\n }\n});\n\nexport let thumbContainer = style({\n size: {\n size: {\n S: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n display: 'inline-block',\n position: 'absolute',\n top: '[50%]'\n});\n\n// if precision thumb should have a smaller hit area, then remove this\nexport let thumbHitArea = style({\n size: {\n thumbStyle: {\n default: {\n size: {\n S: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n precise: {\n size: {\n S: 20,\n M: size(22),\n L: 24,\n XL: size(26)\n }\n }\n }\n }\n});\n\nexport let thumb = style({\n ...focusRing(),\n display: 'inline-block',\n boxSizing: 'border-box',\n position: 'absolute',\n top: '[50%]',\n left: '[50%]',\n transform: 'translateY(-50%) translateX(-50%)',\n width: {\n thumbStyle: {\n default: {\n size: {\n S: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n precise: size(6)\n }\n },\n height: {\n thumbStyle: {\n default: {\n size: {\n S: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n precise: {\n size: {\n S: 20,\n M: size(22),\n L: 24,\n XL: size(26)\n }\n }\n }\n },\n borderRadius: 'full',\n borderStyle: 'solid',\n borderWidth: '[2px]',\n borderColor: {\n default: 'gray-800',\n isHovered: 'gray-900',\n isDragging: 'gray-900',\n isDisabled: 'disabled',\n forcedColors: {\n isDisabled: 'GrayText'\n }\n },\n backgroundColor: 'gray-25'\n});\n\nconst trackStyling = {\n height: {\n trackStyle: {\n thin: 4,\n thick: 16\n }\n },\n top: '[50%]',\n borderRadius: {\n trackStyle: {\n thin: 'lg',\n thick: 'sm'\n }\n }\n} as const;\n\nexport let upperTrack = style({\n ...trackStyling,\n position: 'absolute',\n backgroundColor: {\n default: 'gray-300',\n isDisabled: 'disabled'\n },\n translateY: '[-50%]',\n width: 'full',\n boxSizing: 'border-box',\n borderStyle: 'solid',\n borderWidth: '[.5px]',\n borderColor: {\n default: 'transparent',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n});\n\nexport let filledTrack = style({\n ...trackStyling,\n position: 'absolute',\n backgroundColor: {\n default: 'gray-700',\n isEmphasized: 'accent-900',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n boxSizing: 'border-box',\n borderStyle: 'solid',\n borderWidth: '[.5px]',\n borderColor: {\n default: 'transparent',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n translateY: '[-50%]'\n});\n\nexport function SliderBase<T extends number \| number[]>(props: SliderBaseProps<T> & {sliderRef: RefObject<HTMLDivElement \| null>}) {\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n label,\n labelPosition = 'top',\n labelAlign = 'start',\n size = 'M',\n minValue = 0,\n maxValue = 100,\n formatOptions\n } = props;\n let formatter = useNumberFormatter(formatOptions);\n let {direction} = useLocale();\n\n return (\n <AriaSlider\n {...props}\n ref={props.sliderRef}\n className={renderProps => (props.UNSAFE_className \|\| '') + mergeStyles(style(field())({labelPosition, isInForm: !!formContext}), slider({...renderProps, labelPosition, size, isInForm: !!formContext}, props.styles))}>\n {({state}) => {\n let maxLabelLength = Math.max([...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);\n switch (state.values.length) {\n case 1:\n break;\n case 2:\n // This should really use the NumberFormat#formatRange proposal...\n // https://github.com/tc39/ecma402/issues/393\n // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393\n // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatRange\n maxLabelLength = 3 + 2 Math.max(\n maxLabelLength,\n [...formatter.format(minValue)].length, [...formatter.format(maxValue)].length\n );\n break;\n default:\n throw new Error('Only sliders with 1 or 2 handles are supported!');\n }\n\n let outputValue = (\n <SliderOutput\n style={{width: `${maxLabelLength}ch`, minWidth: `${maxLabelLength}ch`, fontVariantNumeric: 'tabular-nums'}}\n className={output({direction, labelPosition, isInForm: !!formContext})}>\n {({state}) =>\n state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}\n </SliderOutput>\n );\n\n return (\n <>\n <div className={labelContainer({labelPosition, labelAlign})}>\n <FieldLabel\n isDisabled={props.isDisabled}\n size={props.size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n {labelPosition === 'top' && outputValue}\n </div>\n <div className={style({gridArea: 'input', display: 'inline-flex', alignItems: 'center', gap: {default: 16, size: {L: 20, XL: 24}}})({size})}>\n {props.children}\n {labelPosition === 'side' && outputValue}\n </div>\n </>\n );\n }}\n </AriaSlider>\n );\n}\n\nfunction Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, SliderContext);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n labelPosition = 'top',\n size = 'M',\n fillOffset,\n isEmphasized,\n trackStyle = 'thin',\n thumbStyle = 'default'\n } = props;\n let thumbRef = useRef(null);\n let inputRef = useRef(null); // TODO: need to pass inputRef to SliderThumb when we release the next version of RAC 1.3.0\n let domRef = useFocusableRef(ref, inputRef);\n let {direction} = useLocale();\n let cssDirection = direction === 'rtl' ? 'right' : 'left';\n\n return (\n <SliderBase\n {...props}\n sliderRef={domRef}>\n <SliderTrack\n className={track({size, labelPosition, isInForm: !!formContext})}>\n {({state, isDisabled}) => {\n\n fillOffset = fillOffset !== undefined ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : 0;\n\n let fillWidth = state.getThumbPercent(0) - state.getValuePercent(fillOffset);\n let isRightOfOffset = fillWidth > 0;\n let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);\n\n return (\n <>\n <div className={upperTrack({isDisabled, trackStyle})} />\n <div style={{width: `${Math.abs(fillWidth) * 100}%`, [cssDirection]: `${offset * 100}%`}} className={filledTrack({isDisabled, isEmphasized, trackStyle})} />\n <SliderThumb className={thumbContainer} index={0} name={props.name} ref={thumbRef} style={(renderProps) => pressScale(thumbRef, {transform: 'translate(-50%, -50%)'})({...renderProps, isPressed: renderProps.isDragging})}>\n {(renderProps) => (\n <div className={thumbHitArea({size})}>\n <div\n className={thumb({\n ...renderProps,\n size,\n thumbStyle\n })} />\n </div>\n )}\n </SliderThumb>\n </>\n );\n }}\n </SliderTrack>\n </SliderBase>\n );\n}\n\nlet _Slider = /#__PURE__/ forwardRef(Slider);\nexport {_Slider as Slider};\n"],"names":[],"version":3,"file":"Slider.cjs.map"}
1	+ {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Slider.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 {\n Slider as AriaSlider,\n SliderProps as AriaSliderProps,\n ContextValue,\n SliderOutput,\n SliderThumb,\n SliderTrack\n} from 'react-aria-components';\nimport {clamp} from '@react-aria/utils';\nimport {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel} from './Field';\nimport {FocusableRef, FocusableRefValue, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {focusRing, size, style} from '../style' with {type: 'macro'};\nimport {FormContext, useFormProps} from './Form';\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocale, useNumberFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'children' \| 'style' \| 'className' \| 'orientation'>, Omit<SpectrumLabelableProps, 'necessityIndicator' \| 'isRequired'>, StyleProps {\n children?: ReactNode,\n /\n The size of the Slider.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL',\n /\n Whether the Slider should be displayed with an emphasized style.\n /\n isEmphasized?: boolean,\n /\n The style of the Slider's track.\n \n @default 'thin'\n /\n trackStyle?: 'thin' \| 'thick', // TODO: add ramp\n /\n The style of the Slider's thumb.\n \n @default 'default'\n /\n thumbStyle?: 'default' \| 'precise'\n // TODO\n // isEditable?: boolean,\n}\n\nexport interface SliderProps extends Omit<SliderBaseProps<number>, 'children'>, InputDOMProps {\n /\n The offset from which to start the fill.\n /\n fillOffset?: number\n}\n\nexport const SliderContext = createContext<ContextValue<SliderProps, FocusableRefValue<HTMLDivElement>>>(null);\n\nconst slider = style({\n font: 'control',\n alignItems: {\n labelPosition: {\n side: 'center'\n }\n },\n color: {\n default: 'neutral-subdued',\n isDisabled: 'disabled'\n },\n columnGap: {\n size: {\n S: 16,\n M: 16,\n L: 20,\n XL: 24\n },\n isInForm: 12\n }\n}, getAllowedOverrides());\n\nconst labelContainer = style({\n display: {\n labelPosition: {\n top: 'grid'\n }\n },\n gridArea: 'label',\n width: 'full',\n gridTemplateAreas: {\n labelPosition: {\n top: ['label output']\n }\n },\n gridTemplateColumns: {\n labelPosition: {\n top: [\n '1fr auto'\n ]\n }\n },\n textAlign: {\n labelPosition: {\n side: {\n labelAlign: {\n start: 'start',\n end: 'end'\n }\n }\n }\n },\n '--field-gap': {\n type: 'paddingBottom',\n value: 0\n }\n});\n\nconst output = style({\n gridArea: 'output',\n textAlign: {\n labelPosition: {\n top: {\n direction: {\n ltr: 'end',\n rtl: 'start'\n }\n },\n side: {\n direction: {\n ltr: 'start',\n rtl: 'end'\n },\n isInForm: 'end'\n }\n }\n }\n});\n\nexport let track = style({\n gridArea: 'track',\n position: 'relative',\n width: 'full',\n height: {\n size: {\n S: 24,\n M: 32,\n L: 40,\n XL: 48\n }\n }\n});\n\nexport let thumbContainer = style({\n size: {\n size: {\n S: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n display: 'inline-block',\n position: 'absolute',\n top: '[50%]'\n});\n\n// if precision thumb should have a smaller hit area, then remove this\nexport let thumbHitArea = style({\n size: {\n thumbStyle: {\n default: {\n size: {\n S: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n precise: {\n size: {\n S: 20,\n M: size(22),\n L: 24,\n XL: size(26)\n }\n }\n }\n }\n});\n\nexport let thumb = style({\n ...focusRing(),\n display: 'inline-block',\n boxSizing: 'border-box',\n position: 'absolute',\n top: '[50%]',\n left: '[50%]',\n transform: 'translateY(-50%) translateX(-50%)',\n width: {\n thumbStyle: {\n default: {\n size: {\n S: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n precise: size(6)\n }\n },\n height: {\n thumbStyle: {\n default: {\n size: {\n S: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n precise: {\n size: {\n S: 20,\n M: size(22),\n L: 24,\n XL: size(26)\n }\n }\n }\n },\n borderRadius: 'full',\n borderStyle: 'solid',\n borderWidth: '[2px]',\n borderColor: {\n default: 'gray-800',\n isHovered: 'gray-900',\n isDragging: 'gray-900',\n isDisabled: 'disabled',\n forcedColors: {\n isDisabled: 'GrayText'\n }\n },\n backgroundColor: 'gray-25'\n});\n\nconst trackStyling = {\n height: {\n trackStyle: {\n thin: 4,\n thick: 16\n }\n },\n top: '[50%]',\n borderRadius: {\n trackStyle: {\n thin: 'lg',\n thick: 'sm'\n }\n }\n} as const;\n\nexport let upperTrack = style({\n ...trackStyling,\n position: 'absolute',\n backgroundColor: {\n default: 'gray-300',\n isDisabled: 'disabled'\n },\n translateY: '[-50%]',\n width: 'full',\n boxSizing: 'border-box',\n borderStyle: 'solid',\n borderWidth: '[.5px]',\n borderColor: {\n default: 'transparent',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n});\n\nexport let filledTrack = style({\n ...trackStyling,\n position: 'absolute',\n backgroundColor: {\n default: 'gray-700',\n isEmphasized: 'accent-900',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n boxSizing: 'border-box',\n borderStyle: 'solid',\n borderWidth: '[.5px]',\n borderColor: {\n default: 'transparent',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n translateY: '[-50%]'\n});\n\nexport function SliderBase<T extends number \| number[]>(props: SliderBaseProps<T> & {sliderRef: RefObject<HTMLDivElement \| null>}) {\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n label,\n labelPosition = 'top',\n labelAlign = 'start',\n size = 'M',\n minValue = 0,\n maxValue = 100,\n formatOptions\n } = props;\n let formatter = useNumberFormatter(formatOptions);\n let {direction} = useLocale();\n\n return (\n <AriaSlider\n {...props}\n ref={props.sliderRef}\n className={renderProps => (props.UNSAFE_className \|\| '') + mergeStyles(style(field())({labelPosition, isInForm: !!formContext}), slider({...renderProps, labelPosition, size, isInForm: !!formContext}, props.styles))}>\n {({state}) => {\n let maxLabelLength = Math.max([...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);\n switch (state.values.length) {\n case 1:\n break;\n case 2:\n // This should really use the NumberFormat#formatRange proposal...\n // https://github.com/tc39/ecma402/issues/393\n // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393\n // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatRange\n maxLabelLength = 3 + 2 Math.max(\n maxLabelLength,\n [...formatter.format(minValue)].length, [...formatter.format(maxValue)].length\n );\n break;\n default:\n throw new Error('Only sliders with 1 or 2 handles are supported!');\n }\n\n let outputValue = (\n <SliderOutput\n style={{width: `${maxLabelLength}ch`, minWidth: `${maxLabelLength}ch`, fontVariantNumeric: 'tabular-nums'}}\n className={output({direction, labelPosition, isInForm: !!formContext})}>\n {({state}) =>\n state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}\n </SliderOutput>\n );\n\n return (\n <>\n <div className={labelContainer({labelPosition, labelAlign})}>\n <FieldLabel\n isDisabled={props.isDisabled}\n size={props.size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n {labelPosition === 'top' && outputValue}\n </div>\n <div className={style({...fieldInput(), display: 'inline-flex', alignItems: 'center', gap: {default: 16, size: {L: 20, XL: 24}}})({size})}>\n {props.children}\n {labelPosition === 'side' && outputValue}\n </div>\n </>\n );\n }}\n </AriaSlider>\n );\n}\n\nfunction Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, SliderContext);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n labelPosition = 'top',\n size = 'M',\n fillOffset,\n isEmphasized,\n trackStyle = 'thin',\n thumbStyle = 'default'\n } = props;\n let thumbRef = useRef(null);\n let inputRef = useRef(null); // TODO: need to pass inputRef to SliderThumb when we release the next version of RAC 1.3.0\n let domRef = useFocusableRef(ref, inputRef);\n let {direction} = useLocale();\n let cssDirection = direction === 'rtl' ? 'right' : 'left';\n\n return (\n <SliderBase\n {...props}\n sliderRef={domRef}>\n <SliderTrack\n className={track({size, labelPosition, isInForm: !!formContext})}>\n {({state, isDisabled}) => {\n\n fillOffset = fillOffset !== undefined ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : state.getThumbMinValue(0);\n\n let fillWidth = state.getThumbPercent(0) - state.getValuePercent(fillOffset);\n let isRightOfOffset = fillWidth > 0;\n let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);\n\n return (\n <>\n <div className={upperTrack({isDisabled, trackStyle})} />\n <div style={{width: `${Math.abs(fillWidth) * 100}%`, [cssDirection]: `${offset * 100}%`}} className={filledTrack({isDisabled, isEmphasized, trackStyle})} />\n <SliderThumb className={thumbContainer} index={0} name={props.name} ref={thumbRef} style={(renderProps) => pressScale(thumbRef, {transform: 'translate(-50%, -50%)'})({...renderProps, isPressed: renderProps.isDragging})}>\n {(renderProps) => (\n <div className={thumbHitArea({size})}>\n <div\n className={thumb({\n ...renderProps,\n size,\n thumbStyle\n })} />\n </div>\n )}\n </SliderThumb>\n </>\n );\n }}\n </SliderTrack>\n </SliderBase>\n );\n}\n\nlet _Slider = /#__PURE__/ forwardRef(Slider);\nexport {_Slider as Slider};\n"],"names":[],"version":3,"file":"Slider.cjs.map"}

package/dist/Slider.css CHANGED Viewed

@@ -99,50 +99,6 @@
     grid-row-end: track;
   }
-  .qq {
-    min-width: 2rem;
-  }
-  .qk {
-    min-width: 1.25rem;
-  }
-  .qm {
-    min-width: 1.5rem;
-  }
-  .qr {
-    min-width: 2.5rem;
-  }
-  .qx {
-    min-width: 3rem;
-  }
-  .__ma {
-    contain: none;
-  }
-  .-usygro_l-R {
-    --defaultWidth: 13rem;
-  }
-  .-usygro_l-P {
-    --defaultWidth: 12rem;
-  }
-  .-usygro_l-T {
-    --defaultWidth: 14rem;
-  }
-  .-usygro_l-Q {
-    --defaultWidth: 15rem;
-  }
-  .m-rwozxi {
-    contain-intrinsic-width: calc(var(--defaultWidth)  - var(--C, 0px)  - var(--D, 0px)  - var(--s, 0px)  - var(--t, 0px));
-  }
   .Uc {
     position: relative;
   }
@@ -503,6 +459,50 @@
     grid-row-end: input;
   }
+  .qq {
+    min-width: 2rem;
+  }
+  .qk {
+    min-width: 1.25rem;
+  }
+  .qm {
+    min-width: 1.5rem;
+  }
+  .qr {
+    min-width: 2.5rem;
+  }
+  .qx {
+    min-width: 3rem;
+  }
+  .__ma {
+    contain: none;
+  }
+  .-usygro_l-R {
+    --defaultWidth: 13rem;
+  }
+  .-usygro_l-P {
+    --defaultWidth: 12rem;
+  }
+  .-usygro_l-T {
+    --defaultWidth: 14rem;
+  }
+  .-usygro_l-Q {
+    --defaultWidth: 15rem;
+  }
+  .m-rwozxi {
+    contain-intrinsic-width: calc(var(--defaultWidth)  - var(--C, 0px)  - var(--D, 0px)  - var(--s, 0px)  - var(--t, 0px));
+  }
   ._Ze {
     display: inline-flex;
   }
@@ -586,42 +586,6 @@
 @layer _.b.b {
   @media not ((hover: hover) and (pointer: fine)) {
-    .qbr {
-      min-width: 2.5rem;
-    }
-    .qbl {
-      min-width: 1.5625rem;
-    }
-    .qbn {
-      min-width: 1.875rem;
-    }
-    .qbu {
-      min-width: 3.125rem;
-    }
-    .qby {
-      min-width: 3.75rem;
-    }
-    .-usygro_l-bS {
-      --defaultWidth: 16.25rem;
-    }
-    .-usygro_l-bQ {
-      --defaultWidth: 15rem;
-    }
-    .-usygro_l-bU {
-      --defaultWidth: 17.5rem;
-    }
-    .-usygro_l-bV {
-      --defaultWidth: 18.75rem;
-    }
     .kbr {
       height: 2.5rem;
     }
@@ -725,13 +689,41 @@
     .-aqrvqh_k-by {
       --field-height: 3.75rem;
     }
-  }
-}
-@layer _.b.-_1s8glxu {
-  @supports (contain-intrinsic-width: 1px) {
-    .__m-1s8glxue {
-      contain: inline-size;
+    .qbr {
+      min-width: 2.5rem;
+    }
+    .qbl {
+      min-width: 1.5625rem;
+    }
+    .qbn {
+      min-width: 1.875rem;
+    }
+    .qbu {
+      min-width: 3.125rem;
+    }
+    .qby {
+      min-width: 3.75rem;
+    }
+    .-usygro_l-bS {
+      --defaultWidth: 16.25rem;
+    }
+    .-usygro_l-bQ {
+      --defaultWidth: 15rem;
+    }
+    .-usygro_l-bU {
+      --defaultWidth: 17.5rem;
+    }
+    .-usygro_l-bV {
+      --defaultWidth: 18.75rem;
     }
   }
 }
@@ -763,4 +755,12 @@
 .\.:not(#a#b) {
   all: revert-layer;
 }
+@layer _.b.-_1s8glxu {
+  @supports (contain-intrinsic-width: 1px) {
+    .__m-1s8glxue {
+      contain: inline-size;
+    }
+  }
+}
 /*# sourceMappingURL=Slider.css.map */

package/dist/Slider.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"ACsEe;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoCR;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAqBI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8BO;;;;EAuBP;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwEK;;;;EAAA;;;;EAqBC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EA4CoD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0CjD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAvTb;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IA+EI;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA8BO;;;;IAuBP;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA6FM;;;;IAAA;;;;IA4CoD;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA9L1D;EAAA;IAAA;;;;;;AAqDA;EAAA;IAAA;;;;IA6FM;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AArBD","sources":["ac662f3d1cc9df76","packages/@react-spectrum/s2/src/Slider.tsx"],"sourcesContent":["@import \"08b0e2dddac244ec\";\n@import \"a216064bff7feb94\";\n@import \"0e026599f927ff3c\";\n@import \"1cb0b30bc0f5a958\";\n@import \"edc162e184e119d3\";\n@import \"b86a124969f6f615\";\n@import \"9b5953d83288c51e\";\n@import \"d1e50ca165bdf4c3\";\n@import \"da42e21b823e7a9c\";\n@import \"6f133df38f9a43ae\";\n@import \"5a00966d61027041\";\n","/\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 {\n Slider as AriaSlider,\n SliderProps as AriaSliderProps,\n ContextValue,\n SliderOutput,\n SliderThumb,\n SliderTrack\n} from 'react-aria-components';\nimport {clamp} from '@react-aria/utils';\nimport {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel} from './Field';\nimport {FocusableRef, FocusableRefValue, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {focusRing, size, style} from '../style' with {type: 'macro'};\nimport {FormContext, useFormProps} from './Form';\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocale, useNumberFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'children' \| 'style' \| 'className' \| 'orientation'>, Omit<SpectrumLabelableProps, 'necessityIndicator' \| 'isRequired'>, StyleProps {\n children?: ReactNode,\n /\n The size of the Slider.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL',\n /\n Whether the Slider should be displayed with an emphasized style.\n /\n isEmphasized?: boolean,\n /\n The style of the Slider's track.\n \n @default 'thin'\n /\n trackStyle?: 'thin' \| 'thick', // TODO: add ramp\n /\n The style of the Slider's thumb.\n \n @default 'default'\n /\n thumbStyle?: 'default' \| 'precise'\n // TODO\n // isEditable?: boolean,\n}\n\nexport interface SliderProps extends Omit<SliderBaseProps<number>, 'children'>, InputDOMProps {\n /\n The offset from which to start the fill.\n /\n fillOffset?: number\n}\n\nexport const SliderContext = createContext<ContextValue<SliderProps, FocusableRefValue<HTMLDivElement>>>(null);\n\nconst slider = style({\n font: 'control',\n alignItems: {\n labelPosition: {\n side: 'center'\n }\n },\n color: {\n default: 'neutral-subdued',\n isDisabled: 'disabled'\n },\n columnGap: {\n size: {\n S: 16,\n M: 16,\n L: 20,\n XL: 24\n },\n isInForm: 12\n }\n}, getAllowedOverrides());\n\nconst labelContainer = style({\n display: {\n labelPosition: {\n top: 'grid'\n }\n },\n gridArea: 'label',\n width: 'full',\n gridTemplateAreas: {\n labelPosition: {\n top: ['label output']\n }\n },\n gridTemplateColumns: {\n labelPosition: {\n top: [\n '1fr auto'\n ]\n }\n },\n textAlign: {\n labelPosition: {\n side: {\n labelAlign: {\n start: 'start',\n end: 'end'\n }\n }\n }\n },\n '--field-gap': {\n type: 'paddingBottom',\n value: 0\n }\n});\n\nconst output = style({\n gridArea: 'output',\n textAlign: {\n labelPosition: {\n top: {\n direction: {\n ltr: 'end',\n rtl: 'start'\n }\n },\n side: {\n direction: {\n ltr: 'start',\n rtl: 'end'\n },\n isInForm: 'end'\n }\n }\n }\n});\n\nexport let track = style({\n ...fieldInput(),\n gridArea: 'track',\n position: 'relative',\n width: 'full',\n height: {\n size: {\n S: 24,\n M: 32,\n L: 40,\n XL: 48\n }\n }\n});\n\nexport let thumbContainer = style({\n size: {\n size: {\n S: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n display: 'inline-block',\n position: 'absolute',\n top: '[50%]'\n});\n\n// if precision thumb should have a smaller hit area, then remove this\nexport let thumbHitArea = style({\n size: {\n thumbStyle: {\n default: {\n size: {\n S: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n precise: {\n size: {\n S: 20,\n M: size(22),\n L: 24,\n XL: size(26)\n }\n }\n }\n }\n});\n\nexport let thumb = style({\n ...focusRing(),\n display: 'inline-block',\n boxSizing: 'border-box',\n position: 'absolute',\n top: '[50%]',\n left: '[50%]',\n transform: 'translateY(-50%) translateX(-50%)',\n width: {\n thumbStyle: {\n default: {\n size: {\n S: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n precise: size(6)\n }\n },\n height: {\n thumbStyle: {\n default: {\n size: {\n S: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n precise: {\n size: {\n S: 20,\n M: size(22),\n L: 24,\n XL: size(26)\n }\n }\n }\n },\n borderRadius: 'full',\n borderStyle: 'solid',\n borderWidth: '[2px]',\n borderColor: {\n default: 'gray-800',\n isHovered: 'gray-900',\n isDragging: 'gray-900',\n isDisabled: 'disabled',\n forcedColors: {\n isDisabled: 'GrayText'\n }\n },\n backgroundColor: 'gray-25'\n});\n\nconst trackStyling = {\n height: {\n trackStyle: {\n thin: 4,\n thick: 16\n }\n },\n top: '[50%]',\n borderRadius: {\n trackStyle: {\n thin: 'lg',\n thick: 'sm'\n }\n }\n} as const;\n\nexport let upperTrack = style({\n ...trackStyling,\n position: 'absolute',\n backgroundColor: {\n default: 'gray-300',\n isDisabled: 'disabled'\n },\n translateY: '[-50%]',\n width: 'full',\n boxSizing: 'border-box',\n borderStyle: 'solid',\n borderWidth: '[.5px]',\n borderColor: {\n default: 'transparent',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n});\n\nexport let filledTrack = style({\n ...trackStyling,\n position: 'absolute',\n backgroundColor: {\n default: 'gray-700',\n isEmphasized: 'accent-900',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n boxSizing: 'border-box',\n borderStyle: 'solid',\n borderWidth: '[.5px]',\n borderColor: {\n default: 'transparent',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n translateY: '[-50%]'\n});\n\nexport function SliderBase<T extends number \| number[]>(props: SliderBaseProps<T> & {sliderRef: RefObject<HTMLDivElement \| null>}) {\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n label,\n labelPosition = 'top',\n labelAlign = 'start',\n size = 'M',\n minValue = 0,\n maxValue = 100,\n formatOptions\n } = props;\n let formatter = useNumberFormatter(formatOptions);\n let {direction} = useLocale();\n\n return (\n <AriaSlider\n {...props}\n ref={props.sliderRef}\n className={renderProps => (props.UNSAFE_className \|\| '') + mergeStyles(style(field())({labelPosition, isInForm: !!formContext}), slider({...renderProps, labelPosition, size, isInForm: !!formContext}, props.styles))}>\n {({state}) => {\n let maxLabelLength = Math.max([...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);\n switch (state.values.length) {\n case 1:\n break;\n case 2:\n // This should really use the NumberFormat#formatRange proposal...\n // https://github.com/tc39/ecma402/issues/393\n // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393\n // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatRange\n maxLabelLength = 3 + 2 Math.max(\n maxLabelLength,\n [...formatter.format(minValue)].length, [...formatter.format(maxValue)].length\n );\n break;\n default:\n throw new Error('Only sliders with 1 or 2 handles are supported!');\n }\n\n let outputValue = (\n <SliderOutput\n style={{width: `${maxLabelLength}ch`, minWidth: `${maxLabelLength}ch`, fontVariantNumeric: 'tabular-nums'}}\n className={output({direction, labelPosition, isInForm: !!formContext})}>\n {({state}) =>\n state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}\n </SliderOutput>\n );\n\n return (\n <>\n <div className={labelContainer({labelPosition, labelAlign})}>\n <FieldLabel\n isDisabled={props.isDisabled}\n size={props.size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n {labelPosition === 'top' && outputValue}\n </div>\n <div className={style({gridArea: 'input', display: 'inline-flex', alignItems: 'center', gap: {default: 16, size: {L: 20, XL: 24}}})({size})}>\n {props.children}\n {labelPosition === 'side' && outputValue}\n </div>\n </>\n );\n }}\n </AriaSlider>\n );\n}\n\nfunction Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, SliderContext);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n labelPosition = 'top',\n size = 'M',\n fillOffset,\n isEmphasized,\n trackStyle = 'thin',\n thumbStyle = 'default'\n } = props;\n let thumbRef = useRef(null);\n let inputRef = useRef(null); // TODO: need to pass inputRef to SliderThumb when we release the next version of RAC 1.3.0\n let domRef = useFocusableRef(ref, inputRef);\n let {direction} = useLocale();\n let cssDirection = direction === 'rtl' ? 'right' : 'left';\n\n return (\n <SliderBase\n {...props}\n sliderRef={domRef}>\n <SliderTrack\n className={track({size, labelPosition, isInForm: !!formContext})}>\n {({state, isDisabled}) => {\n\n fillOffset = fillOffset !== undefined ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : 0;\n\n let fillWidth = state.getThumbPercent(0) - state.getValuePercent(fillOffset);\n let isRightOfOffset = fillWidth > 0;\n let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);\n\n return (\n <>\n <div className={upperTrack({isDisabled, trackStyle})} />\n <div style={{width: `${Math.abs(fillWidth) * 100}%`, [cssDirection]: `${offset * 100}%`}} className={filledTrack({isDisabled, isEmphasized, trackStyle})} />\n <SliderThumb className={thumbContainer} index={0} name={props.name} ref={thumbRef} style={(renderProps) => pressScale(thumbRef, {transform: 'translate(-50%, -50%)'})({...renderProps, isPressed: renderProps.isDragging})}>\n {(renderProps) => (\n <div className={thumbHitArea({size})}>\n <div\n className={thumb({\n ...renderProps,\n size,\n thumbStyle\n })} />\n </div>\n )}\n </SliderThumb>\n </>\n );\n }}\n </SliderTrack>\n </SliderBase>\n );\n}\n\nlet _Slider = /#__PURE__/ forwardRef(Slider);\nexport {_Slider as Slider};\n"],"names":[],"version":3,"file":"Slider.css.map"}
1	+ {"mappings":"ACsEe;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoCR;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAqBI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6BO;;;;EAuBP;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwEK;;;;EAAA;;;;EAqBC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EA4CoD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0CjD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtTb;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IA+EI;;;;IAAA;;;;IAAA;;;;IA6BO;;;;IAuBP;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA6FM;;;;IAAA;;;;IA4CoD;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA0CjD;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAnLT;EAAA;IAAA;;;;IA6FM;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AArBD;;;;AA2GI;EAAA;IAAA","sources":["ac662f3d1cc9df76","packages/@react-spectrum/s2/src/Slider.tsx"],"sourcesContent":["@import \"08b0e2dddac244ec\";\n@import \"a216064bff7feb94\";\n@import \"0e026599f927ff3c\";\n@import \"1cb0b30bc0f5a958\";\n@import \"edc162e184e119d3\";\n@import \"b86a124969f6f615\";\n@import \"9b5953d83288c51e\";\n@import \"d1e50ca165bdf4c3\";\n@import \"da42e21b823e7a9c\";\n@import \"6f133df38f9a43ae\";\n@import \"5a00966d61027041\";\n","/\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 {\n Slider as AriaSlider,\n SliderProps as AriaSliderProps,\n ContextValue,\n SliderOutput,\n SliderThumb,\n SliderTrack\n} from 'react-aria-components';\nimport {clamp} from '@react-aria/utils';\nimport {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel} from './Field';\nimport {FocusableRef, FocusableRefValue, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {focusRing, size, style} from '../style' with {type: 'macro'};\nimport {FormContext, useFormProps} from './Form';\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocale, useNumberFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'children' \| 'style' \| 'className' \| 'orientation'>, Omit<SpectrumLabelableProps, 'necessityIndicator' \| 'isRequired'>, StyleProps {\n children?: ReactNode,\n /\n The size of the Slider.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL',\n /\n Whether the Slider should be displayed with an emphasized style.\n /\n isEmphasized?: boolean,\n /\n The style of the Slider's track.\n \n @default 'thin'\n /\n trackStyle?: 'thin' \| 'thick', // TODO: add ramp\n /\n The style of the Slider's thumb.\n \n @default 'default'\n /\n thumbStyle?: 'default' \| 'precise'\n // TODO\n // isEditable?: boolean,\n}\n\nexport interface SliderProps extends Omit<SliderBaseProps<number>, 'children'>, InputDOMProps {\n /\n The offset from which to start the fill.\n /\n fillOffset?: number\n}\n\nexport const SliderContext = createContext<ContextValue<SliderProps, FocusableRefValue<HTMLDivElement>>>(null);\n\nconst slider = style({\n font: 'control',\n alignItems: {\n labelPosition: {\n side: 'center'\n }\n },\n color: {\n default: 'neutral-subdued',\n isDisabled: 'disabled'\n },\n columnGap: {\n size: {\n S: 16,\n M: 16,\n L: 20,\n XL: 24\n },\n isInForm: 12\n }\n}, getAllowedOverrides());\n\nconst labelContainer = style({\n display: {\n labelPosition: {\n top: 'grid'\n }\n },\n gridArea: 'label',\n width: 'full',\n gridTemplateAreas: {\n labelPosition: {\n top: ['label output']\n }\n },\n gridTemplateColumns: {\n labelPosition: {\n top: [\n '1fr auto'\n ]\n }\n },\n textAlign: {\n labelPosition: {\n side: {\n labelAlign: {\n start: 'start',\n end: 'end'\n }\n }\n }\n },\n '--field-gap': {\n type: 'paddingBottom',\n value: 0\n }\n});\n\nconst output = style({\n gridArea: 'output',\n textAlign: {\n labelPosition: {\n top: {\n direction: {\n ltr: 'end',\n rtl: 'start'\n }\n },\n side: {\n direction: {\n ltr: 'start',\n rtl: 'end'\n },\n isInForm: 'end'\n }\n }\n }\n});\n\nexport let track = style({\n gridArea: 'track',\n position: 'relative',\n width: 'full',\n height: {\n size: {\n S: 24,\n M: 32,\n L: 40,\n XL: 48\n }\n }\n});\n\nexport let thumbContainer = style({\n size: {\n size: {\n S: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n display: 'inline-block',\n position: 'absolute',\n top: '[50%]'\n});\n\n// if precision thumb should have a smaller hit area, then remove this\nexport let thumbHitArea = style({\n size: {\n thumbStyle: {\n default: {\n size: {\n S: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n precise: {\n size: {\n S: 20,\n M: size(22),\n L: 24,\n XL: size(26)\n }\n }\n }\n }\n});\n\nexport let thumb = style({\n ...focusRing(),\n display: 'inline-block',\n boxSizing: 'border-box',\n position: 'absolute',\n top: '[50%]',\n left: '[50%]',\n transform: 'translateY(-50%) translateX(-50%)',\n width: {\n thumbStyle: {\n default: {\n size: {\n S: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n precise: size(6)\n }\n },\n height: {\n thumbStyle: {\n default: {\n size: {\n S: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n precise: {\n size: {\n S: 20,\n M: size(22),\n L: 24,\n XL: size(26)\n }\n }\n }\n },\n borderRadius: 'full',\n borderStyle: 'solid',\n borderWidth: '[2px]',\n borderColor: {\n default: 'gray-800',\n isHovered: 'gray-900',\n isDragging: 'gray-900',\n isDisabled: 'disabled',\n forcedColors: {\n isDisabled: 'GrayText'\n }\n },\n backgroundColor: 'gray-25'\n});\n\nconst trackStyling = {\n height: {\n trackStyle: {\n thin: 4,\n thick: 16\n }\n },\n top: '[50%]',\n borderRadius: {\n trackStyle: {\n thin: 'lg',\n thick: 'sm'\n }\n }\n} as const;\n\nexport let upperTrack = style({\n ...trackStyling,\n position: 'absolute',\n backgroundColor: {\n default: 'gray-300',\n isDisabled: 'disabled'\n },\n translateY: '[-50%]',\n width: 'full',\n boxSizing: 'border-box',\n borderStyle: 'solid',\n borderWidth: '[.5px]',\n borderColor: {\n default: 'transparent',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n});\n\nexport let filledTrack = style({\n ...trackStyling,\n position: 'absolute',\n backgroundColor: {\n default: 'gray-700',\n isEmphasized: 'accent-900',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n boxSizing: 'border-box',\n borderStyle: 'solid',\n borderWidth: '[.5px]',\n borderColor: {\n default: 'transparent',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n translateY: '[-50%]'\n});\n\nexport function SliderBase<T extends number \| number[]>(props: SliderBaseProps<T> & {sliderRef: RefObject<HTMLDivElement \| null>}) {\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n label,\n labelPosition = 'top',\n labelAlign = 'start',\n size = 'M',\n minValue = 0,\n maxValue = 100,\n formatOptions\n } = props;\n let formatter = useNumberFormatter(formatOptions);\n let {direction} = useLocale();\n\n return (\n <AriaSlider\n {...props}\n ref={props.sliderRef}\n className={renderProps => (props.UNSAFE_className \|\| '') + mergeStyles(style(field())({labelPosition, isInForm: !!formContext}), slider({...renderProps, labelPosition, size, isInForm: !!formContext}, props.styles))}>\n {({state}) => {\n let maxLabelLength = Math.max([...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);\n switch (state.values.length) {\n case 1:\n break;\n case 2:\n // This should really use the NumberFormat#formatRange proposal...\n // https://github.com/tc39/ecma402/issues/393\n // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393\n // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatRange\n maxLabelLength = 3 + 2 Math.max(\n maxLabelLength,\n [...formatter.format(minValue)].length, [...formatter.format(maxValue)].length\n );\n break;\n default:\n throw new Error('Only sliders with 1 or 2 handles are supported!');\n }\n\n let outputValue = (\n <SliderOutput\n style={{width: `${maxLabelLength}ch`, minWidth: `${maxLabelLength}ch`, fontVariantNumeric: 'tabular-nums'}}\n className={output({direction, labelPosition, isInForm: !!formContext})}>\n {({state}) =>\n state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}\n </SliderOutput>\n );\n\n return (\n <>\n <div className={labelContainer({labelPosition, labelAlign})}>\n <FieldLabel\n isDisabled={props.isDisabled}\n size={props.size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n {labelPosition === 'top' && outputValue}\n </div>\n <div className={style({...fieldInput(), display: 'inline-flex', alignItems: 'center', gap: {default: 16, size: {L: 20, XL: 24}}})({size})}>\n {props.children}\n {labelPosition === 'side' && outputValue}\n </div>\n </>\n );\n }}\n </AriaSlider>\n );\n}\n\nfunction Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, SliderContext);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n labelPosition = 'top',\n size = 'M',\n fillOffset,\n isEmphasized,\n trackStyle = 'thin',\n thumbStyle = 'default'\n } = props;\n let thumbRef = useRef(null);\n let inputRef = useRef(null); // TODO: need to pass inputRef to SliderThumb when we release the next version of RAC 1.3.0\n let domRef = useFocusableRef(ref, inputRef);\n let {direction} = useLocale();\n let cssDirection = direction === 'rtl' ? 'right' : 'left';\n\n return (\n <SliderBase\n {...props}\n sliderRef={domRef}>\n <SliderTrack\n className={track({size, labelPosition, isInForm: !!formContext})}>\n {({state, isDisabled}) => {\n\n fillOffset = fillOffset !== undefined ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : state.getThumbMinValue(0);\n\n let fillWidth = state.getThumbPercent(0) - state.getValuePercent(fillOffset);\n let isRightOfOffset = fillWidth > 0;\n let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);\n\n return (\n <>\n <div className={upperTrack({isDisabled, trackStyle})} />\n <div style={{width: `${Math.abs(fillWidth) * 100}%`, [cssDirection]: `${offset * 100}%`}} className={filledTrack({isDisabled, isEmphasized, trackStyle})} />\n <SliderThumb className={thumbContainer} index={0} name={props.name} ref={thumbRef} style={(renderProps) => pressScale(thumbRef, {transform: 'translate(-50%, -50%)'})({...renderProps, isPressed: renderProps.isDragging})}>\n {(renderProps) => (\n <div className={thumbHitArea({size})}>\n <div\n className={thumb({\n ...renderProps,\n size,\n thumbStyle\n })} />\n </div>\n )}\n </SliderThumb>\n </>\n );\n }}\n </SliderTrack>\n </SliderBase>\n );\n}\n\nlet _Slider = /#__PURE__/ forwardRef(Slider);\nexport {_Slider as Slider};\n"],"names":[],"version":3,"file":"Slider.css.map"}

package/dist/Slider.mjs CHANGED Viewed

@@ -118,38 +118,6 @@ let $8128d8480e67c400$export$6b2a7d5132615086 = function anonymous(props) {
     rules += ' __b-4ka10a';
     rules += ' __c-4ka10a';
     rules += ' __d-4ka10a';
-    if (props.size === "XL") {
-        rules += ' qby';
-        rules += ' qx';
-    } else if (props.size === "L") {
-        rules += ' qbu';
-        rules += ' qr';
-    } else if (props.size === "S") {
-        rules += ' qbn';
-        rules += ' qm';
-    } else if (props.size === "XS") {
-        rules += ' qbl';
-        rules += ' qk';
-    } else {
-        rules += ' qbr';
-        rules += ' qq';
-    }
-    if (props.isQuiet) rules += ' __ma';
-    else rules += ' __m-1s8glxue';
-    if (props.size === "XL") {
-        rules += ' -usygro_l-bV';
-        rules += ' -usygro_l-Q';
-    } else if (props.size === "L") {
-        rules += ' -usygro_l-bU';
-        rules += ' -usygro_l-T';
-    } else if (props.size === "S") {
-        rules += ' -usygro_l-bQ';
-        rules += ' -usygro_l-P';
-    } else {
-        rules += ' -usygro_l-bS';
-        rules += ' -usygro_l-R';
-    }
-    rules += ' m-rwozxi';
     rules += ' Uc';
     rules += ' l4';
     if (props.size === "XL") {
@@ -560,6 +528,38 @@ function $8128d8480e67c400$export$9418495bb635ebde(props1) {
                             rules += ' __b-4cfph1';
                             rules += ' __c-4cfph1';
                             rules += ' __d-4cfph1';
+                            if (props.size === "XL") {
+                                rules += ' qby';
+                                rules += ' qx';
+                            } else if (props.size === "L") {
+                                rules += ' qbu';
+                                rules += ' qr';
+                            } else if (props.size === "S") {
+                                rules += ' qbn';
+                                rules += ' qm';
+                            } else if (props.size === "XS") {
+                                rules += ' qbl';
+                                rules += ' qk';
+                            } else {
+                                rules += ' qbr';
+                                rules += ' qq';
+                            }
+                            if (props.isQuiet) rules += ' __ma';
+                            else rules += ' __m-1s8glxue';
+                            if (props.size === "XL") {
+                                rules += ' -usygro_l-bV';
+                                rules += ' -usygro_l-Q';
+                            } else if (props.size === "L") {
+                                rules += ' -usygro_l-bU';
+                                rules += ' -usygro_l-T';
+                            } else if (props.size === "S") {
+                                rules += ' -usygro_l-bQ';
+                                rules += ' -usygro_l-P';
+                            } else {
+                                rules += ' -usygro_l-bS';
+                                rules += ' -usygro_l-R';
+                            }
+                            rules += ' m-rwozxi';
                             rules += ' _Ze';
                             rules += ' _1c';
                             if (props.size === "XL") rules += ' ih';
@@ -602,7 +602,7 @@ function $8128d8480e67c400$var$Slider(props, ref) {
                 isInForm: !!formContext
             }),
             children: ({ state: state, isDisabled: isDisabled })=>{
-                fillOffset = fillOffset !== undefined ? (0, $c5w2x$clamp)(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : 0;
+                fillOffset = fillOffset !== undefined ? (0, $c5w2x$clamp)(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : state.getThumbMinValue(0);
                 let fillWidth = state.getThumbPercent(0) - state.getValuePercent(fillOffset);
                 let isRightOfOffset = fillWidth > 0;
                 let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);