npm - @mantine/core - Versions diffs - 9.1.0 → 9.2.0 - Mend

@mantine/core 9.1.0 → 9.2.0

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 (236) hide show

package/cjs/components/PinInput/PinInput.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PinInput.cjs","names":["createVarsResolver","getSize","factory","useProps","useStyles","useResolvedStylesApi","createPinArray","Group","Input","classes","InputBase"],"sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { assignRef, useId, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n Factory,\n factory,\n getSize,\n MantineRadius,\n MantineSize,\n MantineSpacing,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport { Group } from '../Group';\nimport { Input, InputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { createPinArray } from './create-pin-array/create-pin-array';\nimport classes from './PinInput.module.css';\n\nconst regex = {\n number: /^[0-9]+$/,\n alphanumeric: /^[a-zA-Z0-9]+$/i,\n};\n\nexport type PinInputStylesNames = 'root' \| 'pinInput' \| 'input';\n\nexport type PinInputCssVariables = {\n root: '--pin-input-size';\n};\n\nexport interface PinInputProps\n extends BoxProps, StylesApiProps<PinInputFactory>, ElementProps<'div', 'onChange' \| 'ref'> {\n ref?: React.Ref<HTMLInputElement>;\n\n /** Hidden input `name` attribute /\n name?: string;\n\n /* Hidden input `form` attribute /\n form?: string;\n\n /* Key of `theme.spacing` or any valid CSS value to set `gap` between inputs, numbers are converted to rem @default 'md' /\n gap?: MantineSpacing;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* Controls inputs `width` and `height` @default 'sm' /\n size?: MantineSize;\n\n /* If set, the first input is focused when component is mounted @default false /\n autoFocus?: boolean;\n\n /* Controlled component value /\n value?: string;\n\n /* Uncontrolled component default value /\n defaultValue?: string;\n\n /* Called when value changes /\n onChange?: (value: string) => void;\n\n /* Called when all inputs have value /\n onComplete?: (value: string) => void;\n\n /* Inputs placeholder @default '○' /\n placeholder?: string;\n\n /* Determines whether focus should be moved automatically to the next input once filled @default true /\n manageFocus?: boolean;\n\n /* Determines whether `autocomplete=\"one-time-code\"` attribute should be set on all inputs @default true /\n oneTimeCode?: boolean;\n\n /* Base id used to generate unique ids for inputs /\n id?: string;\n\n /* Adds disabled attribute to all inputs /\n disabled?: boolean;\n\n /* Sets `aria-invalid` attribute and applies error styles to all inputs /\n error?: boolean;\n\n /* Determines which values can be entered @default 'alphanumeric' /\n type?: 'alphanumeric' \| 'number' \| RegExp;\n\n /* Changes input type to `\"password\"` @default false /\n mask?: boolean;\n\n /* Number of inputs @default 4 /\n length?: number;\n\n /* If set, the user cannot edit the value /\n readOnly?: boolean;\n\n /* Inputs `type` attribute, inferred from the `type` prop if not specified /\n inputType?: React.HTMLInputTypeAttribute;\n\n /* `inputmode` attribute, inferred from the `type` prop if not specified /\n inputMode?:\n \| 'none'\n \| 'text'\n \| 'tel'\n \| 'url'\n \| 'email'\n \| 'numeric'\n \| 'decimal'\n \| 'search'\n \| undefined;\n\n /* `aria-label` attribute /\n ariaLabel?: string;\n\n /* Props passed down to the hidden input /\n hiddenInputProps?: React.ComponentProps<'input'>;\n\n /* Assigns ref of the root element /\n rootRef?: React.Ref<HTMLDivElement>;\n\n /* Props added to the input element depending on its index */\n getInputProps?: (index: number) => InputProps & ElementProps<'input', 'size'> & DataAttributes;\n}\n\nexport type PinInputFactory = Factory<{\n props: PinInputProps;\n ref: HTMLDivElement;\n stylesNames: PinInputStylesNames;\n vars: PinInputCssVariables;\n}>;\n\nconst defaultProps = {\n gap: 'sm',\n length: 4,\n manageFocus: true,\n oneTimeCode: true,\n placeholder: '○',\n type: 'alphanumeric',\n ariaLabel: 'PinInput',\n size: 'sm',\n} satisfies Partial<PinInputProps>;\n\nconst varsResolver = createVarsResolver<PinInputFactory>((_, { size }) => ({\n root: {\n '--pin-input-size': getSize(size ?? 'sm', 'pin-input-size'),\n },\n}));\n\nexport const PinInput = factory<PinInputFactory>((props) => {\n const {\n name,\n form,\n className,\n value,\n defaultValue,\n variant,\n gap,\n style,\n size,\n classNames,\n styles,\n unstyled,\n length,\n onChange,\n onComplete,\n manageFocus,\n autoFocus,\n error,\n radius,\n disabled,\n oneTimeCode,\n placeholder,\n type,\n mask,\n readOnly,\n inputType,\n inputMode,\n ariaLabel,\n vars,\n id,\n hiddenInputProps,\n rootRef,\n getInputProps,\n attributes,\n ref,\n ...others\n } = useProps('PinInput', defaultProps, props);\n\n const uuid = useId(id);\n\n const getStyles = useStyles<PinInputFactory>({\n name: 'PinInput',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PinInputFactory>({\n classNames,\n styles,\n props,\n });\n\n const [focusedIndex, setFocusedIndex] = useState(-1);\n const inputsRef = useRef<Array<HTMLInputElement>>([]);\n const currentLength = length ?? 4;\n\n const completedRef = useRef(false);\n\n const [_value, setValues] = useUncontrolled<string[]>({\n value: value !== undefined ? createPinArray(currentLength, value) : undefined,\n defaultValue: defaultValue?.split('').slice(0, currentLength),\n finalValue: createPinArray(currentLength, ''),\n onChange: (val) => {\n const stringValue = val.join('').trim();\n onChange?.(stringValue);\n if (stringValue.length === currentLength && !completedRef.current) {\n completedRef.current = true;\n onComplete?.(stringValue);\n } else if (stringValue.length < currentLength) {\n completedRef.current = false;\n }\n },\n });\n\n const currentValue =\n _value.length !== currentLength ? createPinArray(currentLength, _value.join('')) : _value;\n\n const _valueToString = currentValue.join('').trim();\n\n const validate = (code: string) => {\n const re = type instanceof RegExp ? type : type && type in regex ? regex[type] : null;\n return re?.test(code);\n };\n\n const focusInputField = (dir: 'next' \| 'prev', index: number) => {\n if (!manageFocus) {\n return;\n }\n\n if (dir === 'next') {\n const nextIndex = index + 1;\n if (nextIndex < currentLength) {\n inputsRef.current[nextIndex]?.focus();\n }\n } else if (dir === 'prev') {\n const prevIndex = index - 1;\n if (prevIndex >= 0) {\n inputsRef.current[prevIndex]?.focus();\n }\n }\n };\n\n const setFieldValue = (val: string, index: number) => {\n const values = [...currentValue];\n values[index] = val;\n setValues(values);\n return values;\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {\n const inputValue = event.target.value;\n\n if (inputValue.length > 1) {\n const isPaste = inputValue.length > 2;\n if (isPaste) {\n const isValid = validate(inputValue);\n if (isValid) {\n setValues(createPinArray(currentLength, inputValue));\n const filledCount = Math.min(inputValue.length, currentLength);\n if (filledCount < currentLength) {\n focusInputField('next', filledCount - 1);\n }\n }\n return;\n }\n\n const newChar = inputValue.split('')[inputValue.length - 1];\n if (validate(newChar)) {\n setFieldValue(newChar, index);\n focusInputField('next', index);\n }\n return;\n }\n\n if (inputValue.length === 1) {\n if (validate(inputValue)) {\n setFieldValue(inputValue, index);\n focusInputField('next', index);\n } else {\n setFieldValue('', index);\n }\n } else if (inputValue.length === 0) {\n setFieldValue('', index);\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, index: number) => {\n const { ctrlKey, metaKey, key, shiftKey, target } = event;\n const inputValue = (target as HTMLInputElement).value;\n\n if (inputMode === 'numeric') {\n const allowedKeys = ['Backspace', 'Tab', 'Control', 'Delete', 'ArrowLeft', 'ArrowRight'];\n const isPasteShortcut = (ctrlKey \|\| metaKey) && key === 'v';\n const isAllowedKey =\n allowedKeys.includes(key) \|\| isPasteShortcut \|\| !Number.isNaN(Number(key));\n\n if (!isAllowedKey) {\n event.preventDefault();\n return;\n }\n }\n\n switch (key) {\n case 'ArrowLeft':\n event.preventDefault();\n focusInputField('prev', index);\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n focusInputField('next', index);\n break;\n\n case 'Tab':\n if (shiftKey) {\n if (index > 0 && manageFocus) {\n event.preventDefault();\n focusInputField('prev', index);\n }\n }\n break;\n\n case ' ':\n event.preventDefault();\n focusInputField('next', index);\n break;\n\n case 'Delete':\n event.preventDefault();\n setFieldValue('', index);\n break;\n\n case 'Backspace':\n if (inputValue === '') {\n event.preventDefault();\n focusInputField('prev', index);\n } else {\n setFieldValue('', index);\n if (index < currentLength - 1) {\n event.preventDefault();\n focusInputField('prev', index);\n }\n }\n break;\n\n default:\n if (inputValue.length > 0 && key === currentValue[index]) {\n event.preventDefault();\n focusInputField('next', index);\n }\n }\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>, index: number) => {\n event.target.select();\n setFocusedIndex(index);\n };\n\n const handleBlur = () => {\n setFocusedIndex(-1);\n };\n\n const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n event.preventDefault();\n const pasteData = event.clipboardData.getData('text/plain').replace(/[\\n\\r\\s]+/g, '');\n const isValid = validate(pasteData.trim());\n\n if (isValid) {\n const pasteArray = createPinArray(currentLength, pasteData);\n setValues(pasteArray);\n const filledCount = pasteArray.filter((val) => val !== '').length;\n if (filledCount >= currentLength) {\n inputsRef.current[currentLength - 1]?.focus();\n } else {\n inputsRef.current[filledCount]?.focus();\n }\n }\n };\n\n return (\n <>\n <Group\n {...others}\n {...getStyles('root')}\n ref={rootRef}\n role=\"group\"\n id={uuid}\n gap={gap}\n unstyled={unstyled}\n wrap=\"nowrap\"\n variant={variant}\n __size={size}\n dir=\"ltr\"\n >\n {currentValue.map((char: string, index: number) => (\n <Input\n component=\"input\"\n {...getStyles('pinInput', {\n style: {\n '--input-padding': '0',\n '--input-text-align': 'center',\n } as React.CSSProperties,\n })}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n size={size}\n __staticSelector=\"PinInput\"\n id={`${uuid}-${index + 1}`}\n key={`${uuid}-${index}`}\n inputMode={inputMode \|\| (type === 'number' ? 'numeric' : 'text')}\n onChange={(event) => handleChange(event, index)}\n onKeyDown={(event) => handleKeyDown(event, index)}\n onFocus={(event) => handleFocus(event, index)}\n onBlur={handleBlur}\n onPaste={handlePaste}\n type={inputType \|\| (mask ? 'password' : type === 'number' ? 'tel' : 'text')}\n radius={radius}\n error={error}\n variant={variant}\n disabled={disabled}\n ref={(node) => {\n if (node) {\n index === 0 && assignRef(ref, node);\n inputsRef.current[index] = node;\n }\n }}\n autoComplete={oneTimeCode ? 'one-time-code' : 'off'}\n placeholder={focusedIndex === index ? '' : placeholder}\n value={char}\n autoFocus={autoFocus && index === 0}\n unstyled={unstyled}\n aria-label={ariaLabel}\n readOnly={readOnly}\n {...getInputProps?.(index)}\n />\n ))}\n </Group>\n\n <input type=\"hidden\" name={name} form={form} value={_valueToString} {...hiddenInputProps} />\n </>\n );\n});\n\nPinInput.classes = { ...classes, ...InputBase.classes };\nPinInput.varsResolver = varsResolver;\nPinInput.displayName = '@mantine/core/PinInput';\n\nexport namespace PinInput {\n export type Props = PinInputProps;\n export type StylesNames = PinInputStylesNames;\n export type Factory = PinInputFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAwBA,MAAM,QAAQ;CACZ,QAAQ;CACR,cAAc;CACf;AA2GD,MAAM,eAAe;CACnB,KAAK;CACL,QAAQ;CACR,aAAa;CACb,aAAa;CACb,aAAa;CACb,MAAM;CACN,WAAW;CACX,MAAM;CACP;AAED,MAAM,eAAeA,6BAAAA,oBAAqC,GAAG,EAAE,YAAY,EACzE,MAAM,EACJ,oBAAoBC,iBAAAA,QAAQ,QAAQ,MAAM,iBAAiB,EAC5D,EACF,EAAE;AAEH,MAAa,WAAWC,gBAAAA,SAA0B,UAAU;CAC1D,MAAM,EACJ,MACA,MACA,WACA,OACA,cACA,SACA,KACA,OACA,MACA,YACA,QACA,UACA,QACA,UACA,YACA,aACA,WACA,OACA,QACA,UACA,aACA,aACA,MACA,MACA,UACA,WACA,WACA,WACA,MACA,IACA,kBACA,SACA,eACA,YACA,KACA,GAAG,WACDC,kBAAAA,SAAS,YAAY,cAAc,MAAM;CAE7C,MAAM,QAAA,GAAA,eAAA,OAAa,GAAG;CAEtB,MAAM,YAAYC,mBAAAA,UAA2B;EAC3C,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,oBAAoB,mBAAmBC,gCAAAA,qBAAsC;EACnF;EACA;EACA;EACD,CAAC;CAEF,MAAM,CAAC,cAAc,oBAAA,GAAA,MAAA,UAA4B,GAAG;CACpD,MAAM,aAAA,GAAA,MAAA,QAA4C,EAAE,CAAC;CACrD,MAAM,gBAAgB,UAAU;CAEhC,MAAM,gBAAA,GAAA,MAAA,QAAsB,MAAM;CAElC,MAAM,CAAC,QAAQ,cAAA,GAAA,eAAA,iBAAuC;EACpD,OAAO,UAAU,KAAA,IAAYC,yBAAAA,eAAe,eAAe,MAAM,GAAG,KAAA;EACpE,cAAc,cAAc,MAAM,GAAG,CAAC,MAAM,GAAG,cAAc;EAC7D,YAAYA,yBAAAA,eAAe,eAAe,GAAG;EAC7C,WAAW,QAAQ;GACjB,MAAM,cAAc,IAAI,KAAK,GAAG,CAAC,MAAM;AACvC,cAAW,YAAY;AACvB,OAAI,YAAY,WAAW,iBAAiB,CAAC,aAAa,SAAS;AACjE,iBAAa,UAAU;AACvB,iBAAa,YAAY;cAChB,YAAY,SAAS,cAC9B,cAAa,UAAU;;EAG5B,CAAC;CAEF,MAAM,eACJ,OAAO,WAAW,gBAAgBA,yBAAAA,eAAe,eAAe,OAAO,KAAK,GAAG,CAAC,GAAG;CAErF,MAAM,iBAAiB,aAAa,KAAK,GAAG,CAAC,MAAM;CAEnD,MAAM,YAAY,SAAiB;AAEjC,UADW,gBAAgB,SAAS,OAAO,QAAQ,QAAQ,QAAQ,MAAM,QAAQ,OACtE,KAAK,KAAK;;CAGvB,MAAM,mBAAmB,KAAsB,UAAkB;AAC/D,MAAI,CAAC,YACH;AAGF,MAAI,QAAQ,QAAQ;GAClB,MAAM,YAAY,QAAQ;AAC1B,OAAI,YAAY,cACd,WAAU,QAAQ,YAAY,OAAO;aAE9B,QAAQ,QAAQ;GACzB,MAAM,YAAY,QAAQ;AAC1B,OAAI,aAAa,EACf,WAAU,QAAQ,YAAY,OAAO;;;CAK3C,MAAM,iBAAiB,KAAa,UAAkB;EACpD,MAAM,SAAS,CAAC,GAAG,aAAa;AAChC,SAAO,SAAS;AAChB,YAAU,OAAO;AACjB,SAAO;;CAGT,MAAM,gBAAgB,OAA4C,UAAkB;EAClF,MAAM,aAAa,MAAM,OAAO;AAEhC,MAAI,WAAW,SAAS,GAAG;AAEzB,OADgB,WAAW,SAAS,GACvB;AAEX,QADgB,SAAS,WAAW,EACvB;AACX,eAAUA,yBAAAA,eAAe,eAAe,WAAW,CAAC;KACpD,MAAM,cAAc,KAAK,IAAI,WAAW,QAAQ,cAAc;AAC9D,SAAI,cAAc,cAChB,iBAAgB,QAAQ,cAAc,EAAE;;AAG5C;;GAGF,MAAM,UAAU,WAAW,MAAM,GAAG,CAAC,WAAW,SAAS;AACzD,OAAI,SAAS,QAAQ,EAAE;AACrB,kBAAc,SAAS,MAAM;AAC7B,oBAAgB,QAAQ,MAAM;;AAEhC;;AAGF,MAAI,WAAW,WAAW,EACxB,KAAI,SAAS,WAAW,EAAE;AACxB,iBAAc,YAAY,MAAM;AAChC,mBAAgB,QAAQ,MAAM;QAE9B,eAAc,IAAI,MAAM;WAEjB,WAAW,WAAW,EAC/B,eAAc,IAAI,MAAM;;CAI5B,MAAM,iBAAiB,OAA8C,UAAkB;EACrF,MAAM,EAAE,SAAS,SAAS,KAAK,UAAU,WAAW;EACpD,MAAM,aAAc,OAA4B;AAEhD,MAAI,cAAc,WAAW;GAC3B,MAAM,cAAc;IAAC;IAAa;IAAO;IAAW;IAAU;IAAa;IAAa;GACxF,MAAM,mBAAmB,WAAW,YAAY,QAAQ;AAIxD,OAAI,EAFF,YAAY,SAAS,IAAI,IAAI,mBAAmB,CAAC,OAAO,MAAM,OAAO,IAAI,CAAC,GAEzD;AACjB,UAAM,gBAAgB;AACtB;;;AAIJ,UAAQ,KAAR;GACE,KAAK;AACH,UAAM,gBAAgB;AACtB,oBAAgB,QAAQ,MAAM;AAC9B;GAEF,KAAK;AACH,UAAM,gBAAgB;AACtB,oBAAgB,QAAQ,MAAM;AAC9B;GAEF,KAAK;AACH,QAAI;SACE,QAAQ,KAAK,aAAa;AAC5B,YAAM,gBAAgB;AACtB,sBAAgB,QAAQ,MAAM;;;AAGlC;GAEF,KAAK;AACH,UAAM,gBAAgB;AACtB,oBAAgB,QAAQ,MAAM;AAC9B;GAEF,KAAK;AACH,UAAM,gBAAgB;AACtB,kBAAc,IAAI,MAAM;AACxB;GAEF,KAAK;AACH,QAAI,eAAe,IAAI;AACrB,WAAM,gBAAgB;AACtB,qBAAgB,QAAQ,MAAM;WACzB;AACL,mBAAc,IAAI,MAAM;AACxB,SAAI,QAAQ,gBAAgB,GAAG;AAC7B,YAAM,gBAAgB;AACtB,sBAAgB,QAAQ,MAAM;;;AAGlC;GAEF,QACE,KAAI,WAAW,SAAS,KAAK,QAAQ,aAAa,QAAQ;AACxD,UAAM,gBAAgB;AACtB,oBAAgB,QAAQ,MAAM;;;;CAKtC,MAAM,eAAe,OAA2C,UAAkB;AAChF,QAAM,OAAO,QAAQ;AACrB,kBAAgB,MAAM;;CAGxB,MAAM,mBAAmB;AACvB,kBAAgB,GAAG;;CAGrB,MAAM,eAAe,UAAkD;AACrE,QAAM,gBAAgB;EACtB,MAAM,YAAY,MAAM,cAAc,QAAQ,aAAa,CAAC,QAAQ,cAAc,GAAG;AAGrF,MAFgB,SAAS,UAAU,MAAM,CAAC,EAE7B;GACX,MAAM,aAAaA,yBAAAA,eAAe,eAAe,UAAU;AAC3D,aAAU,WAAW;GACrB,MAAM,cAAc,WAAW,QAAQ,QAAQ,QAAQ,GAAG,CAAC;AAC3D,OAAI,eAAe,cACjB,WAAU,QAAQ,gBAAgB,IAAI,OAAO;OAE7C,WAAU,QAAQ,cAAc,OAAO;;;AAK7C,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;EACE,GAAI;EACJ,GAAI,UAAU,OAAO;EACrB,KAAK;EACL,MAAK;EACL,IAAI;EACC;EACK;EACV,MAAK;EACI;EACT,QAAQ;EACR,KAAI;YAEH,aAAa,KAAK,MAAc,UAC/B,iBAAA,GAAA,MAAA,eAACC,cAAAA,OAAD;GACE,WAAU;GACV,GAAI,UAAU,YAAY,EACxB,OAAO;IACL,mBAAmB;IACnB,sBAAsB;IACvB,EACF,CAAC;GACF,YAAY;GACZ,QAAQ;GACF;GACN,kBAAiB;GACjB,IAAI,GAAG,KAAK,GAAG,QAAQ;GACvB,KAAK,GAAG,KAAK,GAAG;GAChB,WAAW,cAAc,SAAS,WAAW,YAAY;GACzD,WAAW,UAAU,aAAa,OAAO,MAAM;GAC/C,YAAY,UAAU,cAAc,OAAO,MAAM;GACjD,UAAU,UAAU,YAAY,OAAO,MAAM;GAC7C,QAAQ;GACR,SAAS;GACT,MAAM,cAAc,OAAO,aAAa,SAAS,WAAW,QAAQ;GAC5D;GACD;GACE;GACC;GACV,MAAM,SAAS;AACb,QAAI,MAAM;AACR,eAAU,MAAA,GAAA,eAAA,WAAe,KAAK,KAAK;AACnC,eAAU,QAAQ,SAAS;;;GAG/B,cAAc,cAAc,kBAAkB;GAC9C,aAAa,iBAAiB,QAAQ,KAAK;GAC3C,OAAO;GACP,WAAW,aAAa,UAAU;GACxB;GACV,cAAY;GACF;GACV,GAAI,gBAAgB,MAAM;GAC1B,CAAA,CACF;EACI,CAAA,EAER,iBAAA,GAAA,kBAAA,KAAC,SAAD;EAAO,MAAK;EAAe;EAAY;EAAM,OAAO;EAAgB,GAAI;EAAoB,CAAA,CAC3F,EAAA,CAAA;EAEL;AAEF,SAAS,UAAU;CAAE,GAAGC,wBAAAA;CAAS,GAAGC,kBAAAA,UAAU;CAAS;AACvD,SAAS,eAAe;AACxB,SAAS,cAAc"}
1	+ {"version":3,"file":"PinInput.cjs","names":["createVarsResolver","getSize","factory","useProps","useStyles","useResolvedStylesApi","createPinArray","Group","Input","classes","InputBase"],"sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { assignRef, useId, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n Factory,\n factory,\n getSize,\n MantineRadius,\n MantineSize,\n MantineSpacing,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport { Group } from '../Group';\nimport { Input, InputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { createPinArray } from './create-pin-array/create-pin-array';\nimport classes from './PinInput.module.css';\n\nconst regex = {\n number: /^[0-9]+$/,\n alphanumeric: /^[a-zA-Z0-9]+$/i,\n};\n\nexport type PinInputStylesNames = 'root' \| 'pinInput' \| 'input';\n\nexport type PinInputCssVariables = {\n root: '--pin-input-size';\n};\n\nexport interface PinInputProps\n extends BoxProps, StylesApiProps<PinInputFactory>, ElementProps<'div', 'onChange' \| 'ref'> {\n ref?: React.Ref<HTMLInputElement>;\n\n /** Hidden input `name` attribute /\n name?: string;\n\n /* Hidden input `form` attribute /\n form?: string;\n\n /* Key of `theme.spacing` or any valid CSS value to set `gap` between inputs, numbers are converted to rem @default 'md' /\n gap?: MantineSpacing;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* Controls inputs `width` and `height` @default 'sm' /\n size?: MantineSize;\n\n /* If set, the first input is focused when component is mounted @default false /\n autoFocus?: boolean;\n\n /* Controlled component value /\n value?: string;\n\n /* Uncontrolled component default value /\n defaultValue?: string;\n\n /* Called when value changes /\n onChange?: (value: string) => void;\n\n /* Called when all inputs have value /\n onComplete?: (value: string) => void;\n\n /* Inputs placeholder @default '○' /\n placeholder?: string;\n\n /* Determines whether focus should be moved automatically to the next input once filled @default true /\n manageFocus?: boolean;\n\n /* Determines whether `autocomplete=\"one-time-code\"` attribute should be set on all inputs @default true /\n oneTimeCode?: boolean;\n\n /* Base id used to generate unique ids for inputs /\n id?: string;\n\n /* Adds disabled attribute to all inputs /\n disabled?: boolean;\n\n /* Sets `aria-invalid` attribute and applies error styles to all inputs /\n error?: boolean;\n\n /* Determines which values can be entered @default 'alphanumeric' /\n type?: 'alphanumeric' \| 'number' \| RegExp;\n\n /* Changes input type to `\"password\"` @default false /\n mask?: boolean;\n\n /* Number of inputs @default 4 /\n length?: number;\n\n /* If set, the user cannot edit the value /\n readOnly?: boolean;\n\n /* Inputs `type` attribute, inferred from the `type` prop if not specified /\n inputType?: React.HTMLInputTypeAttribute;\n\n /* `inputmode` attribute, inferred from the `type` prop if not specified /\n inputMode?:\n \| 'none'\n \| 'text'\n \| 'tel'\n \| 'url'\n \| 'email'\n \| 'numeric'\n \| 'decimal'\n \| 'search'\n \| undefined;\n\n /* `aria-label` attribute /\n ariaLabel?: string;\n\n /* Props passed down to the hidden input /\n hiddenInputProps?: React.ComponentProps<'input'>;\n\n /* Assigns ref of the root element /\n rootRef?: React.Ref<HTMLDivElement>;\n\n /* Props added to the input element depending on its index */\n getInputProps?: (index: number) => InputProps & ElementProps<'input', 'size'> & DataAttributes;\n}\n\nexport type PinInputFactory = Factory<{\n props: PinInputProps;\n ref: HTMLDivElement;\n stylesNames: PinInputStylesNames;\n vars: PinInputCssVariables;\n}>;\n\nconst defaultProps = {\n gap: 'sm',\n length: 4,\n manageFocus: true,\n oneTimeCode: true,\n placeholder: '○',\n type: 'alphanumeric',\n ariaLabel: 'PinInput',\n size: 'sm',\n} satisfies Partial<PinInputProps>;\n\nconst varsResolver = createVarsResolver<PinInputFactory>((_, { size }) => ({\n root: {\n '--pin-input-size': getSize(size ?? 'sm', 'pin-input-size'),\n },\n}));\n\nexport const PinInput = factory<PinInputFactory>((props) => {\n const {\n name,\n form,\n className,\n value,\n defaultValue,\n variant,\n gap,\n style,\n size,\n classNames,\n styles,\n unstyled,\n length,\n onChange,\n onComplete,\n manageFocus,\n autoFocus,\n error,\n radius,\n disabled,\n oneTimeCode,\n placeholder,\n type,\n mask,\n readOnly,\n inputType,\n inputMode,\n ariaLabel,\n vars,\n id,\n hiddenInputProps,\n rootRef,\n getInputProps,\n attributes,\n ref,\n ...others\n } = useProps(['Input', 'PinInput'], defaultProps, props);\n\n const uuid = useId(id);\n\n const getStyles = useStyles<PinInputFactory>({\n name: 'PinInput',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PinInputFactory>({\n classNames,\n styles,\n props,\n });\n\n const [focusedIndex, setFocusedIndex] = useState(-1);\n const inputsRef = useRef<Array<HTMLInputElement>>([]);\n const currentLength = length ?? 4;\n\n const completedRef = useRef(false);\n\n const [_value, setValues] = useUncontrolled<string[]>({\n value: value !== undefined ? createPinArray(currentLength, value) : undefined,\n defaultValue: defaultValue?.split('').slice(0, currentLength),\n finalValue: createPinArray(currentLength, ''),\n onChange: (val) => {\n const stringValue = val.join('').trim();\n onChange?.(stringValue);\n if (stringValue.length === currentLength && !completedRef.current) {\n completedRef.current = true;\n onComplete?.(stringValue);\n } else if (stringValue.length < currentLength) {\n completedRef.current = false;\n }\n },\n });\n\n const currentValue =\n _value.length !== currentLength ? createPinArray(currentLength, _value.join('')) : _value;\n\n const _valueToString = currentValue.join('').trim();\n\n const validate = (code: string) => {\n const re = type instanceof RegExp ? type : type && type in regex ? regex[type] : null;\n return re?.test(code);\n };\n\n const focusInputField = (dir: 'next' \| 'prev', index: number) => {\n if (!manageFocus) {\n return;\n }\n\n if (dir === 'next') {\n const nextIndex = index + 1;\n if (nextIndex < currentLength) {\n inputsRef.current[nextIndex]?.focus();\n }\n } else if (dir === 'prev') {\n const prevIndex = index - 1;\n if (prevIndex >= 0) {\n inputsRef.current[prevIndex]?.focus();\n }\n }\n };\n\n const setFieldValue = (val: string, index: number) => {\n const values = [...currentValue];\n values[index] = val;\n setValues(values);\n return values;\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {\n const inputValue = event.target.value;\n\n if (inputValue.length > 1) {\n const isPaste = inputValue.length > 2;\n if (isPaste) {\n const isValid = validate(inputValue);\n if (isValid) {\n setValues(createPinArray(currentLength, inputValue));\n const filledCount = Math.min(inputValue.length, currentLength);\n if (filledCount < currentLength) {\n focusInputField('next', filledCount - 1);\n }\n }\n return;\n }\n\n const newChar = inputValue.split('')[inputValue.length - 1];\n if (validate(newChar)) {\n setFieldValue(newChar, index);\n focusInputField('next', index);\n }\n return;\n }\n\n if (inputValue.length === 1) {\n if (validate(inputValue)) {\n setFieldValue(inputValue, index);\n focusInputField('next', index);\n } else {\n setFieldValue('', index);\n }\n } else if (inputValue.length === 0) {\n setFieldValue('', index);\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, index: number) => {\n const { ctrlKey, metaKey, key, shiftKey, target } = event;\n const inputValue = (target as HTMLInputElement).value;\n\n if (inputMode === 'numeric') {\n const allowedKeys = ['Backspace', 'Tab', 'Control', 'Delete', 'ArrowLeft', 'ArrowRight'];\n const isPasteShortcut = (ctrlKey \|\| metaKey) && key === 'v';\n const isAllowedKey =\n allowedKeys.includes(key) \|\| isPasteShortcut \|\| !Number.isNaN(Number(key));\n\n if (!isAllowedKey) {\n event.preventDefault();\n return;\n }\n }\n\n switch (key) {\n case 'ArrowLeft':\n event.preventDefault();\n focusInputField('prev', index);\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n focusInputField('next', index);\n break;\n\n case 'Tab':\n if (shiftKey) {\n if (index > 0 && manageFocus) {\n event.preventDefault();\n focusInputField('prev', index);\n }\n }\n break;\n\n case ' ':\n event.preventDefault();\n focusInputField('next', index);\n break;\n\n case 'Delete':\n event.preventDefault();\n setFieldValue('', index);\n break;\n\n case 'Backspace':\n if (inputValue === '') {\n event.preventDefault();\n focusInputField('prev', index);\n } else {\n setFieldValue('', index);\n if (index < currentLength - 1) {\n event.preventDefault();\n focusInputField('prev', index);\n }\n }\n break;\n\n default:\n if (inputValue.length > 0 && key === currentValue[index]) {\n event.preventDefault();\n focusInputField('next', index);\n }\n }\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>, index: number) => {\n event.target.select();\n setFocusedIndex(index);\n };\n\n const handleBlur = () => {\n setFocusedIndex(-1);\n };\n\n const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n event.preventDefault();\n const pasteData = event.clipboardData.getData('text/plain').replace(/[\\n\\r\\s]+/g, '');\n const isValid = validate(pasteData.trim());\n\n if (isValid) {\n const pasteArray = createPinArray(currentLength, pasteData);\n setValues(pasteArray);\n const filledCount = pasteArray.filter((val) => val !== '').length;\n if (filledCount >= currentLength) {\n inputsRef.current[currentLength - 1]?.focus();\n } else {\n inputsRef.current[filledCount]?.focus();\n }\n }\n };\n\n return (\n <>\n <Group\n {...others}\n {...getStyles('root')}\n ref={rootRef}\n role=\"group\"\n id={uuid}\n gap={gap}\n unstyled={unstyled}\n wrap=\"nowrap\"\n variant={variant}\n __size={size}\n dir=\"ltr\"\n >\n {currentValue.map((char: string, index: number) => (\n <Input\n component=\"input\"\n {...getStyles('pinInput', {\n style: {\n '--input-padding': '0',\n '--input-text-align': 'center',\n } as React.CSSProperties,\n })}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n size={size}\n __staticSelector=\"PinInput\"\n id={`${uuid}-${index + 1}`}\n key={`${uuid}-${index}`}\n inputMode={inputMode \|\| (type === 'number' ? 'numeric' : 'text')}\n onChange={(event) => handleChange(event, index)}\n onKeyDown={(event) => handleKeyDown(event, index)}\n onFocus={(event) => handleFocus(event, index)}\n onBlur={handleBlur}\n onPaste={handlePaste}\n type={inputType \|\| (mask ? 'password' : type === 'number' ? 'tel' : 'text')}\n radius={radius}\n error={error}\n variant={variant}\n disabled={disabled}\n ref={(node) => {\n if (node) {\n index === 0 && assignRef(ref, node);\n inputsRef.current[index] = node;\n }\n }}\n autoComplete={oneTimeCode ? 'one-time-code' : 'off'}\n placeholder={focusedIndex === index ? '' : placeholder}\n value={char}\n autoFocus={autoFocus && index === 0}\n unstyled={unstyled}\n aria-label={ariaLabel}\n readOnly={readOnly}\n {...getInputProps?.(index)}\n />\n ))}\n </Group>\n\n <input type=\"hidden\" name={name} form={form} value={_valueToString} {...hiddenInputProps} />\n </>\n );\n});\n\nPinInput.classes = { ...classes, ...InputBase.classes };\nPinInput.varsResolver = varsResolver;\nPinInput.displayName = '@mantine/core/PinInput';\n\nexport namespace PinInput {\n export type Props = PinInputProps;\n export type StylesNames = PinInputStylesNames;\n export type Factory = PinInputFactory;\n}\n"],"mappings":"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"}

package/cjs/components/Popover/Popover.context.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.context.cjs","names":["createSafeContext"],"sources":["../../../src/components/Popover/Popover.context.ts"],"sourcesContent":["import {\n ClassNames,\n createSafeContext,\n GetStylesApi,\n MantineRadius,\n MantineShadow,\n Styles,\n} from '../../core';\nimport { ArrowPosition, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { BasePortalProps } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport type { PopoverFactory } from './Popover';\nimport { PopoverWidth } from './Popover.types';\n\nexport interface PopoverContextValue {\n x: number;\n y: number;\n arrowX: number \| undefined;\n arrowY: number \| undefined;\n arrowRef: React.RefObject<HTMLDivElement \| null>;\n opened: boolean;\n transitionProps?: TransitionOverride;\n reference: (node: HTMLElement) => void;\n floating: (node: HTMLElement) => void;\n width?: PopoverWidth;\n withArrow: boolean \| undefined;\n arrowSize: number;\n arrowOffset: number;\n arrowRadius: number;\n arrowPosition: ArrowPosition;\n trapFocus: boolean \| undefined;\n placement: FloatingPosition;\n withinPortal: boolean \| undefined;\n portalProps?: BasePortalProps;\n closeOnEscape: boolean \| undefined;\n zIndex: string \| number \| undefined;\n radius?: MantineRadius \| undefined;\n shadow?: MantineShadow \| undefined;\n onClose?: () => void;\n onDismiss?: () => void;\n getDropdownId: () => string;\n getTargetId: () => string;\n controlled: boolean;\n onToggle: () => void;\n withRoles: boolean \| undefined;\n targetProps: Record<string, any>;\n disabled: boolean \| undefined;\n returnFocus: boolean \| undefined;\n classNames: ClassNames<PopoverFactory> \| undefined;\n styles: Styles<PopoverFactory> \| undefined;\n unstyled: boolean \| undefined;\n __staticSelector: string;\n variant: string \| undefined;\n keepMounted: boolean \| undefined;\n getStyles: GetStylesApi<PopoverFactory>;\n resolvedStyles: Record<string, any~~>;\~~n floatingStrategy: FloatingStrategy \| undefined;\n referenceHidden: boolean \| undefined;\n}\n\nexport const [PopoverContextProvider, usePopoverContext] = createSafeContext<PopoverContextValue>(\n 'Popover component was not found in the tree'\n);\n"],"mappings":";;AA4DA,MAAa,CAAC,wBAAwB,6FAAqBA,kBACzD,8CACD"}
1	+ {"version":3,"file":"Popover.context.cjs","names":["createSafeContext"],"sources":["../../../src/components/Popover/Popover.context.ts"],"sourcesContent":["import {\n ClassNames,\n createSafeContext,\n GetStylesApi,\n MantineRadius,\n MantineShadow,\n Styles,\n} from '../../core';\nimport { ArrowPosition, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { BasePortalProps } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport type { PopoverFactory } from './Popover';\nimport { PopoverWidth } from './Popover.types';\n\nexport interface PopoverContextValue {\n x: number;\n y: number;\n arrowX: number \| undefined;\n arrowY: number \| undefined;\n arrowRef: React.RefObject<HTMLDivElement \| null>;\n opened: boolean;\n transitionProps?: TransitionOverride;\n reference: (node: HTMLElement) => void;\n floating: (node: HTMLElement) => void;\n width?: PopoverWidth;\n withArrow: boolean \| undefined;\n arrowSize: number;\n arrowOffset: number;\n arrowRadius: number;\n arrowPosition: ArrowPosition;\n trapFocus: boolean \| undefined;\n placement: FloatingPosition;\n withinPortal: boolean \| undefined;\n portalProps?: BasePortalProps;\n closeOnEscape: boolean \| undefined;\n zIndex: string \| number \| undefined;\n radius?: MantineRadius \| undefined;\n shadow?: MantineShadow \| undefined;\n onClose?: () => void;\n onDismiss?: () => void;\n getDropdownId: () => string;\n getTargetId: () => string;\n controlled: boolean;\n onToggle: () => void;\n withRoles: boolean \| undefined;\n targetProps: Record<string, any>;\n disabled: boolean \| undefined;\n returnFocus: boolean \| undefined;\n classNames: ClassNames<PopoverFactory> \| undefined;\n styles: Styles<PopoverFactory> \| undefined;\n unstyled: boolean \| undefined;\n __staticSelector: string;\n variant: string \| undefined;\n keepMounted: boolean \| undefined;\n getStyles: GetStylesApi<PopoverFactory>;\n resolvedStyles: Record<string, any> \| undefined;\n floatingStrategy: FloatingStrategy \| undefined;\n referenceHidden: boolean \| undefined;\n}\n\nexport const [PopoverContextProvider, usePopoverContext] = createSafeContext<PopoverContextValue>(\n 'Popover component was not found in the tree'\n);\n"],"mappings":";;AA4DA,MAAa,CAAC,wBAAwB,6FAAqBA,kBACzD,8CACD"}

package/cjs/components/Popover/PopoverDropdown/PopoverDropdown.cjs CHANGED Viewed

@@ -71,7 +71,7 @@ const PopoverDropdown = require_factory.factory((_props) => {
 								width: ctx.width === "target" ? void 0 : require_rem.rem(ctx.width),
 								...ctx.referenceHidden ? { display: "none" } : null
 							},
-							ctx.resolvedStyles.dropdown,
+							ctx.resolvedStyles?.dropdown,
 							styles?.dropdown,
 							style
 						]

package/cjs/components/Popover/PopoverDropdown/PopoverDropdown.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PopoverDropdown.cjs","names":["factory","useProps","usePopoverContext","OptionalPortal","Transition","FocusTrap","Box","closeOnEscape","rem","FloatingArrow","classes"],"sources":["../../../../src/components/Popover/PopoverDropdown/PopoverDropdown.tsx"],"sourcesContent":["import { useFocusReturn, useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n closeOnEscape,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n rem,\n useProps,\n} from '../../../core';\nimport { FloatingArrow } from '../../../utils/Floating';\nimport { FocusTrap } from '../../FocusTrap';\nimport { OptionalPortal } from '../../Portal';\nimport { Transition } from '../../Transition';\nimport type { PopoverStylesNames } from '../Popover';\nimport { usePopoverContext } from '../Popover.context';\nimport classes from '../Popover.module.css';\n\nexport interface PopoverDropdownProps\n extends BoxProps, CompoundStylesApiProps<PopoverDropdownFactory>, ElementProps<'div'> {}\n\nexport type PopoverDropdownFactory = Factory<{\n props: PopoverDropdownProps;\n ref: HTMLDivElement;\n stylesNames: PopoverStylesNames;\n compound: true;\n}>;\n\nexport const PopoverDropdown = factory<PopoverDropdownFactory>((_props) => {\n const props = useProps('PopoverDropdown', null, _props);\n const {\n className,\n style,\n vars,\n children,\n onKeyDownCapture,\n variant,\n classNames,\n styles,\n ref,\n ...others\n } = props;\n\n const ctx = usePopoverContext();\n\n const returnFocus = useFocusReturn({\n opened: ctx.opened,\n shouldReturnFocus: ctx.returnFocus,\n });\n\n const accessibleProps = ctx.withRoles\n ? {\n 'aria-labelledby': ctx.getTargetId(),\n id: ctx.getDropdownId(),\n role: 'dialog',\n tabIndex: -1,\n }\n : {};\n\n const mergedRef = useMergedRef(ref, ctx.floating);\n\n if (ctx.disabled) {\n return null;\n }\n\n return (\n <OptionalPortal {...ctx.portalProps} withinPortal={ctx.withinPortal}>\n <Transition\n mounted={ctx.opened}\n {...ctx.transitionProps}\n transition={ctx.transitionProps?.transition \|\| 'fade'}\n duration={ctx.transitionProps?.duration ?? 150}\n keepMounted={ctx.keepMounted}\n exitDuration={\n typeof ctx.transitionProps?.exitDuration === 'number'\n ? ctx.transitionProps.exitDuration\n : ctx.transitionProps?.duration\n }\n >\n {(transitionStyles) => (\n <FocusTrap active={ctx.trapFocus && ctx.opened} innerRef={mergedRef}>\n <Box\n {...accessibleProps}\n {...others}\n variant={variant}\n onKeyDownCapture={closeOnEscape(\n () => {\n ctx.onClose?.();\n ctx.onDismiss?.();\n },\n {\n active: ctx.closeOnEscape,\n onTrigger: returnFocus,\n onKeyDown: onKeyDownCapture,\n }\n )}\n data-position={ctx.placement}\n data-fixed={ctx.floatingStrategy === 'fixed' \|\| undefined}\n {...ctx.getStyles('dropdown', {\n className,\n props,\n classNames,\n styles,\n style: [\n {\n ...transitionStyles,\n zIndex: ctx.zIndex as React.CSSProperties['zIndex'],\n top: ctx.y ?? 0,\n left: ctx.x ?? 0,\n width: ctx.width === 'target' ? undefined : rem(ctx.width),\n ...(ctx.referenceHidden ? { display: 'none' } : null),\n },\n ctx.resolvedStyles.dropdown,\n styles?.dropdown,\n style,\n ],\n })}\n >\n {children}\n\n <FloatingArrow\n ref={ctx.arrowRef}\n arrowX={ctx.arrowX}\n arrowY={ctx.arrowY}\n visible={ctx.withArrow}\n position={ctx.placement}\n arrowSize={ctx.arrowSize}\n arrowRadius={ctx.arrowRadius}\n arrowOffset={ctx.arrowOffset}\n arrowPosition={ctx.arrowPosition}\n {...ctx.getStyles('arrow', {\n props,\n classNames,\n styles,\n })}\n />\n </Box>\n </FocusTrap>\n )}\n </Transition>\n </OptionalPortal>\n );\n});\n\nPopoverDropdown.classes = classes;\nPopoverDropdown.displayName = '@mantine/core/PopoverDropdown';\n"],"mappings":";;;;;;;;;;;;;;;;AA8BA,MAAa,kBAAkBA,gBAAAA,SAAiC,WAAW;CACzE,MAAM,QAAQC,kBAAAA,SAAS,mBAAmB,MAAM,OAAO;CACvD,MAAM,EACJ,WACA,OACA,MACA,UACA,kBACA,SACA,YACA,QACA,KACA,GAAG,WACD;CAEJ,MAAM,MAAMC,wBAAAA,mBAAmB;CAE/B,MAAM,eAAA,GAAA,eAAA,gBAA6B;EACjC,QAAQ,IAAI;EACZ,mBAAmB,IAAI;EACxB,CAAC;CAEF,MAAM,kBAAkB,IAAI,YACxB;EACE,mBAAmB,IAAI,aAAa;EACpC,IAAI,IAAI,eAAe;EACvB,MAAM;EACN,UAAU;EACX,GACD,EAAE;CAEN,MAAM,aAAA,GAAA,eAAA,cAAyB,KAAK,IAAI,SAAS;AAEjD,KAAI,IAAI,SACN,QAAO;AAGT,QACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD;EAAgB,GAAI,IAAI;EAAa,cAAc,IAAI;YACrD,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;GACE,SAAS,IAAI;GACb,GAAI,IAAI;GACR,YAAY,IAAI,iBAAiB,cAAc;GAC/C,UAAU,IAAI,iBAAiB,YAAY;GAC3C,aAAa,IAAI;GACjB,cACE,OAAO,IAAI,iBAAiB,iBAAiB,WACzC,IAAI,gBAAgB,eACpB,IAAI,iBAAiB;cAGzB,qBACA,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;IAAW,QAAQ,IAAI,aAAa,IAAI;IAAQ,UAAU;cACxD,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;KACE,GAAI;KACJ,GAAI;KACK;KACT,kBAAkBC,wBAAAA,oBACV;AACJ,UAAI,WAAW;AACf,UAAI,aAAa;QAEnB;MACE,QAAQ,IAAI;MACZ,WAAW;MACX,WAAW;MACZ,CACF;KACD,iBAAe,IAAI;KACnB,cAAY,IAAI,qBAAqB,WAAW,KAAA;KAChD,GAAI,IAAI,UAAU,YAAY;MAC5B;MACA;MACA;MACA;MACA,OAAO;OACL;QACE,GAAG;QACH,QAAQ,IAAI;QACZ,KAAK,IAAI,KAAK;QACd,MAAM,IAAI,KAAK;QACf,OAAO,IAAI,UAAU,WAAW,KAAA,IAAYC,YAAAA,IAAI,IAAI,MAAM;QAC1D,GAAI,IAAI,kBAAkB,EAAE,SAAS,QAAQ,GAAG;QACjD;OACD,IAAI,~~eAAe~~;~~OACnB~~,QAAQ;OACR;OACD;MACF,CAAC;eAnCJ,CAqCG,UAED,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,eAAD;MACE,KAAK,IAAI;MACT,QAAQ,IAAI;MACZ,QAAQ,IAAI;MACZ,SAAS,IAAI;MACb,UAAU,IAAI;MACd,WAAW,IAAI;MACf,aAAa,IAAI;MACjB,aAAa,IAAI;MACjB,eAAe,IAAI;MACnB,GAAI,IAAI,UAAU,SAAS;OACzB;OACA;OACA;OACD,CAAC;MACF,CAAA,CACE;;IACI,CAAA;GAEH,CAAA;EACE,CAAA;EAEnB;AAEF,gBAAgB,UAAUC,uBAAAA;AAC1B,gBAAgB,cAAc"}
1	+ {"version":3,"file":"PopoverDropdown.cjs","names":["factory","useProps","usePopoverContext","OptionalPortal","Transition","FocusTrap","Box","closeOnEscape","rem","FloatingArrow","classes"],"sources":["../../../../src/components/Popover/PopoverDropdown/PopoverDropdown.tsx"],"sourcesContent":["import { useFocusReturn, useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n closeOnEscape,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n rem,\n useProps,\n} from '../../../core';\nimport { FloatingArrow } from '../../../utils/Floating';\nimport { FocusTrap } from '../../FocusTrap';\nimport { OptionalPortal } from '../../Portal';\nimport { Transition } from '../../Transition';\nimport type { PopoverStylesNames } from '../Popover';\nimport { usePopoverContext } from '../Popover.context';\nimport classes from '../Popover.module.css';\n\nexport interface PopoverDropdownProps\n extends BoxProps, CompoundStylesApiProps<PopoverDropdownFactory>, ElementProps<'div'> {}\n\nexport type PopoverDropdownFactory = Factory<{\n props: PopoverDropdownProps;\n ref: HTMLDivElement;\n stylesNames: PopoverStylesNames;\n compound: true;\n}>;\n\nexport const PopoverDropdown = factory<PopoverDropdownFactory>((_props) => {\n const props = useProps('PopoverDropdown', null, _props);\n const {\n className,\n style,\n vars,\n children,\n onKeyDownCapture,\n variant,\n classNames,\n styles,\n ref,\n ...others\n } = props;\n\n const ctx = usePopoverContext();\n\n const returnFocus = useFocusReturn({\n opened: ctx.opened,\n shouldReturnFocus: ctx.returnFocus,\n });\n\n const accessibleProps = ctx.withRoles\n ? {\n 'aria-labelledby': ctx.getTargetId(),\n id: ctx.getDropdownId(),\n role: 'dialog',\n tabIndex: -1,\n }\n : {};\n\n const mergedRef = useMergedRef(ref, ctx.floating);\n\n if (ctx.disabled) {\n return null;\n }\n\n return (\n <OptionalPortal {...ctx.portalProps} withinPortal={ctx.withinPortal}>\n <Transition\n mounted={ctx.opened}\n {...ctx.transitionProps}\n transition={ctx.transitionProps?.transition \|\| 'fade'}\n duration={ctx.transitionProps?.duration ?? 150}\n keepMounted={ctx.keepMounted}\n exitDuration={\n typeof ctx.transitionProps?.exitDuration === 'number'\n ? ctx.transitionProps.exitDuration\n : ctx.transitionProps?.duration\n }\n >\n {(transitionStyles) => (\n <FocusTrap active={ctx.trapFocus && ctx.opened} innerRef={mergedRef}>\n <Box\n {...accessibleProps}\n {...others}\n variant={variant}\n onKeyDownCapture={closeOnEscape(\n () => {\n ctx.onClose?.();\n ctx.onDismiss?.();\n },\n {\n active: ctx.closeOnEscape,\n onTrigger: returnFocus,\n onKeyDown: onKeyDownCapture,\n }\n )}\n data-position={ctx.placement}\n data-fixed={ctx.floatingStrategy === 'fixed' \|\| undefined}\n {...ctx.getStyles('dropdown', {\n className,\n props,\n classNames,\n styles,\n style: [\n {\n ...transitionStyles,\n zIndex: ctx.zIndex as React.CSSProperties['zIndex'],\n top: ctx.y ?? 0,\n left: ctx.x ?? 0,\n width: ctx.width === 'target' ? undefined : rem(ctx.width),\n ...(ctx.referenceHidden ? { display: 'none' } : null),\n },\n ctx.resolvedStyles?.dropdown,\n styles?.dropdown,\n style,\n ],\n })}\n >\n {children}\n\n <FloatingArrow\n ref={ctx.arrowRef}\n arrowX={ctx.arrowX}\n arrowY={ctx.arrowY}\n visible={ctx.withArrow}\n position={ctx.placement}\n arrowSize={ctx.arrowSize}\n arrowRadius={ctx.arrowRadius}\n arrowOffset={ctx.arrowOffset}\n arrowPosition={ctx.arrowPosition}\n {...ctx.getStyles('arrow', {\n props,\n classNames,\n styles,\n })}\n />\n </Box>\n </FocusTrap>\n )}\n </Transition>\n </OptionalPortal>\n );\n});\n\nPopoverDropdown.classes = classes;\nPopoverDropdown.displayName = '@mantine/core/PopoverDropdown';\n"],"mappings":";;;;;;;;;;;;;;;;AA8BA,MAAa,kBAAkBA,gBAAAA,SAAiC,WAAW;CACzE,MAAM,QAAQC,kBAAAA,SAAS,mBAAmB,MAAM,OAAO;CACvD,MAAM,EACJ,WACA,OACA,MACA,UACA,kBACA,SACA,YACA,QACA,KACA,GAAG,WACD;CAEJ,MAAM,MAAMC,wBAAAA,mBAAmB;CAE/B,MAAM,eAAA,GAAA,eAAA,gBAA6B;EACjC,QAAQ,IAAI;EACZ,mBAAmB,IAAI;EACxB,CAAC;CAEF,MAAM,kBAAkB,IAAI,YACxB;EACE,mBAAmB,IAAI,aAAa;EACpC,IAAI,IAAI,eAAe;EACvB,MAAM;EACN,UAAU;EACX,GACD,EAAE;CAEN,MAAM,aAAA,GAAA,eAAA,cAAyB,KAAK,IAAI,SAAS;AAEjD,KAAI,IAAI,SACN,QAAO;AAGT,QACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD;EAAgB,GAAI,IAAI;EAAa,cAAc,IAAI;YACrD,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;GACE,SAAS,IAAI;GACb,GAAI,IAAI;GACR,YAAY,IAAI,iBAAiB,cAAc;GAC/C,UAAU,IAAI,iBAAiB,YAAY;GAC3C,aAAa,IAAI;GACjB,cACE,OAAO,IAAI,iBAAiB,iBAAiB,WACzC,IAAI,gBAAgB,eACpB,IAAI,iBAAiB;cAGzB,qBACA,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;IAAW,QAAQ,IAAI,aAAa,IAAI;IAAQ,UAAU;cACxD,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;KACE,GAAI;KACJ,GAAI;KACK;KACT,kBAAkBC,wBAAAA,oBACV;AACJ,UAAI,WAAW;AACf,UAAI,aAAa;QAEnB;MACE,QAAQ,IAAI;MACZ,WAAW;MACX,WAAW;MACZ,CACF;KACD,iBAAe,IAAI;KACnB,cAAY,IAAI,qBAAqB,WAAW,KAAA;KAChD,GAAI,IAAI,UAAU,YAAY;MAC5B;MACA;MACA;MACA;MACA,OAAO;OACL;QACE,GAAG;QACH,QAAQ,IAAI;QACZ,KAAK,IAAI,KAAK;QACd,MAAM,IAAI,KAAK;QACf,OAAO,IAAI,UAAU,WAAW,KAAA,IAAYC,YAAAA,IAAI,IAAI,MAAM;QAC1D,GAAI,IAAI,kBAAkB,EAAE,SAAS,QAAQ,GAAG;QACjD;OACD,IAAI,gBAAgB;OACpB,QAAQ;OACR;OACD;MACF,CAAC;eAnCJ,CAqCG,UAED,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,eAAD;MACE,KAAK,IAAI;MACT,QAAQ,IAAI;MACZ,QAAQ,IAAI;MACZ,SAAS,IAAI;MACb,UAAU,IAAI;MACd,WAAW,IAAI;MACf,aAAa,IAAI;MACjB,aAAa,IAAI;MACjB,eAAe,IAAI;MACnB,GAAI,IAAI,UAAU,SAAS;OACzB;OACA;OACA;OACD,CAAC;MACF,CAAA,CACE;;IACI,CAAA;GAEH,CAAA;EACE,CAAA;EAEnB;AAEF,gBAAgB,UAAUC,uBAAAA;AAC1B,gBAAgB,cAAc"}

package/cjs/components/Radio/Radio.module.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.module.cjs","names":[],"sources":["../../../src/components/Radio/Radio.module.css"],"sourcesContent":[".root {\n --radio-size-xs: 16px;\n --radio-size-sm: 20px;\n --radio-size-md: 24px;\n --radio-size-lg: 30px;\n --radio-size-xl: 36px;\n --radio-size: var(--radio-size-sm);\n\n --radio-icon-size-xs: 6px;\n --radio-icon-size-sm: 8px;\n --radio-icon-size-md: 10px;\n --radio-icon-size-lg: 14px;\n --radio-icon-size-xl: 16px;\n --radio-icon-size: var(--radio-icon-size-sm);\n --radio-icon-color: var(--mantine-color-white);\n}\n\n.inner {\n position: relative;\n width: var(--radio-size);\n height: var(--radio-size);\n order: 1;\n\n &:where([data-label-position='left']) {\n order: 2;\n }\n}\n\n.icon {\n color: var(--radio-icon-color);\n opacity: var(--radio-icon-opacity, 0);\n transform: var(--radio-icon-transform, scale(0.2) translateY(rem(10px)));\n transition:\n opacity 100ms ease,\n transform 200ms ease;\n pointer-events: none;\n width: var(--radio-icon-size);\n height: var(--radio-icon-size);\n position: absolute;\n top: ~~calc(~~50~~% - var(--radio-icon-size) / 2);\~~n left: ~~calc(~~50~~% - var(--radio-icon-size) / 2);\~~n}\n\n.radio {\n border: 1px solid;\n position: relative;\n appearance: none;\n width: var(--radio-size);\n height: var(--radio-size);\n border-radius: var(--radio-radius, var(--radio-size));\n margin: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition-property: background-color, border-color;\n transition-timing-function: ease;\n transition-duration: 100ms;\n cursor: var(--mantine-cursor-type);\n -webkit-tap-highlight-color: transparent;\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n border-color: var(--mantine-color-dark-4);\n }\n\n &:checked {\n background-color: var(--radio-color, var(--mantine-primary-color-filled));\n border-color: var(--radio-color, var(--mantine-primary-color-filled));\n\n & + .icon {\n --radio-icon-opacity: 1;\n --radio-icon-transform: scale(1);\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n background-color: var(--mantine-color-disabled);\n border-color: var(--mantine-color-disabled-border);\n\n & + .icon {\n --radio-icon-color: var(--mantine-color-disabled-color);\n }\n }\n\n &:where([data-with-error-styles][data-error]) {\n border-color: var(--mantine-color-error);\n }\n}\n\n.radio--outline {\n & + .icon {\n --radio-icon-color: var(--radio-color);\n }\n\n &:checked:not(:disabled) {\n background-color: transparent;\n border-color: var(--radio-color);\n\n & + .icon {\n --radio-icon-color: var(--radio-color);\n --radio-icon-opacity: 1;\n --radio-icon-transform: none;\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Radio.module.cjs","names":[],"sources":["../../../src/components/Radio/Radio.module.css"],"sourcesContent":[".root {\n --radio-size-xs: 16px;\n --radio-size-sm: 20px;\n --radio-size-md: 24px;\n --radio-size-lg: 30px;\n --radio-size-xl: 36px;\n --radio-size: var(--radio-size-sm);\n\n --radio-icon-size-xs: 6px;\n --radio-icon-size-sm: 8px;\n --radio-icon-size-md: 10px;\n --radio-icon-size-lg: 14px;\n --radio-icon-size-xl: 16px;\n --radio-icon-size: var(--radio-icon-size-sm);\n --radio-icon-color: var(--mantine-color-white);\n}\n\n.inner {\n position: relative;\n width: var(--radio-size);\n height: var(--radio-size);\n order: 1;\n\n &:where([data-label-position='left']) {\n order: 2;\n }\n}\n\n.icon {\n color: var(--radio-icon-color);\n opacity: var(--radio-icon-opacity, 0);\n translate: -50% -50%;\n transform: var(--radio-icon-transform, scale(0.2) translateY(rem(10px)));\n transition:\n opacity 100ms ease,\n transform 200ms ease;\n pointer-events: none;\n width: var(--radio-icon-size);\n height: var(--radio-icon-size);\n position: absolute;\n top: 50%;\n left: 50%;\n}\n\n.radio {\n border: 1px solid;\n position: relative;\n appearance: none;\n width: var(--radio-size);\n height: var(--radio-size);\n border-radius: var(--radio-radius, var(--radio-size));\n margin: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition-property: background-color, border-color;\n transition-timing-function: ease;\n transition-duration: 100ms;\n cursor: var(--mantine-cursor-type);\n -webkit-tap-highlight-color: transparent;\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n border-color: var(--mantine-color-dark-4);\n }\n\n &:checked {\n background-color: var(--radio-color, var(--mantine-primary-color-filled));\n border-color: var(--radio-color, var(--mantine-primary-color-filled));\n\n & + .icon {\n --radio-icon-opacity: 1;\n --radio-icon-transform: scale(1);\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n background-color: var(--mantine-color-disabled);\n border-color: var(--mantine-color-disabled-border);\n\n & + .icon {\n --radio-icon-color: var(--mantine-color-disabled-color);\n }\n }\n\n &:where([data-with-error-styles][data-error]) {\n border-color: var(--mantine-color-error);\n }\n}\n\n.radio--outline {\n & + .icon {\n --radio-icon-color: var(--radio-color);\n }\n\n &:checked:not(:disabled) {\n background-color: transparent;\n border-color: var(--radio-color);\n\n & + .icon {\n --radio-icon-color: var(--radio-color);\n --radio-icon-opacity: 1;\n --radio-icon-transform: none;\n }\n }\n}\n"],"mappings":""}

package/cjs/components/RollingNumber/DigitColumn.cjs ADDED Viewed

@@ -0,0 +1,46 @@
+"use client";
+require("../../_virtual/_rolldown/runtime.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/core/src/components/RollingNumber/DigitColumn.tsx
+const STRIP_CELLS = [
+	"0",
+	"1",
+	"2",
+	"3",
+	"4",
+	"5",
+	"6",
+	"7",
+	"8",
+	"9",
+	"0",
+	"1"
+];
+function DigitColumn({ digit, getStyles, previousDigit, empty, valueDirection }) {
+	const digitIndex = parseInt(digit, 10);
+	const previousDigitIndex = previousDigit !== null ? parseInt(previousDigit, 10) : digitIndex;
+	const animateToIndex = valueDirection === "up" && previousDigit !== null && digitIndex < previousDigitIndex && digitIndex <= 1 ? digitIndex + 10 : digitIndex;
+	const direction = digitIndex >= previousDigitIndex ? "up" : "down";
+	const digitStyles = getStyles("digit");
+	const columnStyles = getStyles("digitColumn");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		...digitStyles,
+		"data-empty": empty || void 0,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			...columnStyles,
+			style: {
+				...columnStyles.style,
+				transform: `translateY(${-digitIndex}em)`,
+				["--rn-roll-from"]: `translateY(${-previousDigitIndex}em)`,
+				["--rn-roll-to"]: `translateY(${-animateToIndex}em)`
+			},
+			"data-direction": direction,
+			children: STRIP_CELLS.map((d, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: d }, i))
+		}, digit)
+	});
+}
+//#endregion
+exports.DigitColumn = DigitColumn;
+//# sourceMappingURL=DigitColumn.cjs.map

package/cjs/components/RollingNumber/DigitColumn.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DigitColumn.cjs","names":[],"sources":["../../../src/components/RollingNumber/DigitColumn.tsx"],"sourcesContent":["import { useStyles } from '../../core';\nimport type { RollingNumberFactory } from './RollingNumber';\n\nconst STRIP_CELLS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '1'];\n\ninterface DigitColumnProps {\n digit: string;\n getStyles: ReturnType<typeof useStyles<RollingNumberFactory>>;\n previousDigit: string | null;\n empty?: boolean;\n valueDirection: 'up' | 'down';\n}\n\nexport function DigitColumn({\n digit,\n getStyles,\n previousDigit,\n empty,\n valueDirection,\n}: DigitColumnProps) {\n const digitIndex = parseInt(digit, 10);\n const previousDigitIndex = previousDigit !== null ? parseInt(previousDigit, 10) : digitIndex;\n\n const wrapsForward =\n valueDirection === 'up' &&\n previousDigit !== null &&\n digitIndex < previousDigitIndex &&\n digitIndex <= 1;\n\n const animateToIndex = wrapsForward ? digitIndex + 10 : digitIndex;\n const direction = digitIndex >= previousDigitIndex ? 'up' : 'down';\n\n const digitStyles = getStyles('digit');\n const columnStyles = getStyles('digitColumn');\n\n return (\n \n <span\n key={digit}\n {...columnStyles}\n style={{\n ...columnStyles.style,\n transform: `translateY(${-digitIndex}em)`,\n ['--rn-roll-from' as any]: `translateY(${-previousDigitIndex}em)`,\n ['--rn-roll-to' as any]: `translateY(${-animateToIndex}em)`,\n }}\n data-direction={direction}\n >\n {STRIP_CELLS.map((d, i) => (\n {d}\n ))}\n \n \n );\n}\n"],"mappings":";;;;AAGA,MAAM,cAAc;CAAC;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAI;AAUhF,SAAgB,YAAY,EAC1B,OACA,WACA,eACA,OACA,kBACmB;CACnB,MAAM,aAAa,SAAS,OAAO,GAAG;CACtC,MAAM,qBAAqB,kBAAkB,OAAO,SAAS,eAAe,GAAG,GAAG;CAQlF,MAAM,iBALJ,mBAAmB,QACnB,kBAAkB,QAClB,aAAa,sBACb,cAAc,IAEsB,aAAa,KAAK;CACxD,MAAM,YAAY,cAAc,qBAAqB,OAAO;CAE5D,MAAM,cAAc,UAAU,QAAQ;CACtC,MAAM,eAAe,UAAU,cAAc;AAE7C,QACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,GAAI;EAAa,cAAY,SAAS,KAAA;EAAW,eAAY;YACjE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAEE,GAAI;GACJ,OAAO;IACL,GAAG,aAAa;IAChB,WAAW,cAAc,CAAC,WAAW;KACpC,mBAA0B,cAAc,CAAC,mBAAmB;KAC5D,iBAAwB,cAAc,CAAC,eAAe;IACxD;GACD,kBAAgB;aAEf,YAAY,KAAK,GAAG,MACnB,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAe,GAAS,EAAb,EAAa,CACxB;GACG,EAbA,MAaA;EACF,CAAA"}

package/cjs/components/RollingNumber/RollingNumber.cjs ADDED Viewed

@@ -0,0 +1,102 @@
+"use client";
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
+const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
+const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
+const require_factory = require("../../core/factory/factory.cjs");
+const require_Box = require("../../core/Box/Box.cjs");
+const require_get_digit_parts = require("./get-digit-parts.cjs");
+const require_build_value = require("./build-value.cjs");
+const require_DigitColumn = require("./DigitColumn.cjs");
+const require_get_render_slots = require("./get-render-slots.cjs");
+const require_RollingNumber_module = require("./RollingNumber.module.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/core/src/components/RollingNumber/RollingNumber.tsx
+const defaultProps = {
+	animationDuration: 600,
+	timingFunction: "ease",
+	decimalSeparator: ".",
+	tabularNumbers: true
+};
+const varsResolver = require_create_vars_resolver.createVarsResolver((_, { animationDuration, timingFunction }) => ({ root: {
+	"--rn-duration": `${animationDuration}ms`,
+	"--rn-timing-function": timingFunction
+} }));
+const RollingNumber = require_factory.factory((_props) => {
+	const props = require_use_props.useProps("RollingNumber", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, value, prefix, suffix, decimalSeparator, thousandSeparator, decimalScale, fixedDecimalScale, animationDuration, timingFunction, tabularNumbers, withLiveRegion, mod, attributes, ...others } = props;
+	const getStyles = require_use_styles.useStyles({
+		name: "RollingNumber",
+		classes: require_RollingNumber_module.default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
+	const previousValueRef = (0, react.useRef)(value);
+	const previousValue = previousValueRef.current;
+	(0, react.useEffect)(() => {
+		previousValueRef.current = value;
+	});
+	const valueDirection = value >= previousValue ? "up" : "down";
+	const slots = require_get_render_slots.getRenderSlots({
+		current: require_get_digit_parts.getDigitParts({
+			value,
+			decimalScale,
+			fixedDecimalScale
+		}),
+		previous: require_get_digit_parts.getDigitParts({
+			value: previousValue,
+			decimalScale,
+			fixedDecimalScale
+		}),
+		prefix,
+		suffix,
+		decimalSeparator,
+		thousandSeparator
+	});
+	const accessibleValue = require_build_value.buildValue({
+		value,
+		prefix,
+		suffix,
+		decimalSeparator,
+		thousandSeparator,
+		decimalScale,
+		fixedDecimalScale
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+		...getStyles("root"),
+		mod: [{ "tabular-numbers": tabularNumbers }, mod],
+		role: withLiveRegion ? "status" : "img",
+		"aria-label": accessibleValue,
+		...others,
+		children: slots.map((slot) => {
+			if (slot.type === "digit") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DigitColumn.DigitColumn, {
+				digit: slot.digit,
+				previousDigit: slot.previousDigit,
+				getStyles,
+				empty: slot.empty,
+				valueDirection
+			}, slot.key);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				...getStyles("char"),
+				"data-empty": slot.empty || void 0,
+				"aria-hidden": "true",
+				children: slot.char
+			}, slot.key);
+		})
+	});
+});
+RollingNumber.classes = require_RollingNumber_module.default;
+RollingNumber.varsResolver = varsResolver;
+RollingNumber.displayName = "@mantine/core/RollingNumber";
+//#endregion
+exports.RollingNumber = RollingNumber;
+//# sourceMappingURL=RollingNumber.cjs.map

package/cjs/components/RollingNumber/RollingNumber.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"RollingNumber.cjs","names":["createVarsResolver","factory","useProps","useStyles","getRenderSlots","getDigitParts","buildValue","Box","DigitColumn","classes"],"sources":["../../../src/components/RollingNumber/RollingNumber.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { buildValue } from './build-value';\nimport { DigitColumn } from './DigitColumn';\nimport { getDigitParts } from './get-digit-parts';\nimport { getRenderSlots } from './get-render-slots';\nimport classes from './RollingNumber.module.css';\n\nexport type RollingNumberStylesNames = 'root' | 'digit' | 'digitColumn' | 'char';\nexport type RollingNumberCssVariables = {\n root: '--rn-duration' | '--rn-timing-function';\n};\n\nexport interface RollingNumberProps\n extends BoxProps, StylesApiProps<RollingNumberFactory>, ElementProps<'div'> {\n /** Number value to display */\n value: number;\n\n /** Prefix added before the value */\n prefix?: string;\n\n /** Suffix added after the value */\n suffix?: string;\n\n /** Character used as a decimal separator @default '.' */\n decimalSeparator?: string;\n\n /** Character used to separate thousands, set to `true` for `,` @default false */\n thousandSeparator?: string | boolean;\n\n /** Number of decimal places to display */\n decimalScale?: number;\n\n /** If set, trailing zeros are added to match `decimalScale` @default false */\n fixedDecimalScale?: boolean;\n\n /** Animation duration in milliseconds @default 600 */\n animationDuration?: number;\n\n /** CSS timing function for animation @default 'ease' */\n timingFunction?: string;\n\n /** If set, use tabular (monospace) numbers @default true */\n tabularNumbers?: boolean;\n\n /** If set, the root element acts as an `aria-live=\"polite\"` region (`role=\"status\"`) and screen readers announce every value change. When `false`, the root uses `role=\"img\"` so the current value is still accessible but updates are not announced. @default false */\n withLiveRegion?: boolean;\n}\n\nexport type RollingNumberFactory = Factory<{\n props: RollingNumberProps;\n ref: HTMLDivElement;\n stylesNames: RollingNumberStylesNames;\n vars: RollingNumberCssVariables;\n}>;\n\nconst defaultProps = {\n animationDuration: 600,\n timingFunction: 'ease',\n decimalSeparator: '.',\n tabularNumbers: true,\n} satisfies Partial<RollingNumberProps>;\n\nconst varsResolver = createVarsResolver<RollingNumberFactory>(\n (_, { animationDuration, timingFunction }) => ({\n root: {\n '--rn-duration': `${animationDuration}ms`,\n '--rn-timing-function': timingFunction,\n },\n })\n);\n\nexport const RollingNumber = factory<RollingNumberFactory>((_props) => {\n const props = useProps('RollingNumber', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n value,\n prefix,\n suffix,\n decimalSeparator,\n thousandSeparator,\n decimalScale,\n fixedDecimalScale,\n animationDuration,\n timingFunction,\n tabularNumbers,\n withLiveRegion,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<RollingNumberFactory>({\n name: 'RollingNumber',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const previousValueRef = useRef(value);\n const previousValue = previousValueRef.current;\n\n useEffect(() => {\n previousValueRef.current = value;\n });\n\n const valueDirection: 'up' | 'down' = value >= previousValue ? 'up' : 'down';\n\n const current = getDigitParts({ value, decimalScale, fixedDecimalScale });\n const prev = getDigitParts({ value: previousValue, decimalScale, fixedDecimalScale });\n\n const slots = getRenderSlots({\n current,\n previous: prev,\n prefix,\n suffix,\n decimalSeparator,\n thousandSeparator,\n });\n\n const accessibleValue = buildValue({\n value,\n prefix,\n suffix,\n decimalSeparator,\n thousandSeparator,\n decimalScale,\n fixedDecimalScale,\n });\n\n return (\n <Box\n {...getStyles('root')}\n mod={[{ 'tabular-numbers': tabularNumbers }, mod]}\n role={withLiveRegion ? 'status' : 'img'}\n aria-label={accessibleValue}\n {...others}\n >\n {slots.map((slot) => {\n if (slot.type === 'digit') {\n return (\n <DigitColumn\n key={slot.key}\n digit={slot.digit}\n previousDigit={slot.previousDigit}\n getStyles={getStyles}\n empty={slot.empty}\n valueDirection={valueDirection}\n />\n );\n }\n\n return (\n <span\n key={slot.key}\n {...getStyles('char')}\n data-empty={slot.empty || undefined}\n aria-hidden=\"true\"\n >\n {slot.char}\n \n );\n })}\n </Box>\n );\n});\n\nRollingNumber.classes = classes;\nRollingNumber.varsResolver = varsResolver;\nRollingNumber.displayName = '@mantine/core/RollingNumber';\n"],"mappings":";;;;;;;;;;;;;;;AAkEA,MAAM,eAAe;CACnB,mBAAmB;CACnB,gBAAgB;CAChB,kBAAkB;CAClB,gBAAgB;CACjB;AAED,MAAM,eAAeA,6BAAAA,oBAClB,GAAG,EAAE,mBAAmB,sBAAsB,EAC7C,MAAM;CACJ,iBAAiB,GAAG,kBAAkB;CACtC,wBAAwB;CACzB,EACF,EACF;AAED,MAAa,gBAAgBC,gBAAAA,SAA+B,WAAW;CACrE,MAAM,QAAQC,kBAAAA,SAAS,iBAAiB,cAAc,OAAO;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,QACA,QACA,kBACA,mBACA,cACA,mBACA,mBACA,gBACA,gBACA,gBACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAgC;EAChD,MAAM;EACN,SAAA,6BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,oBAAA,GAAA,MAAA,QAA0B,MAAM;CACtC,MAAM,gBAAgB,iBAAiB;AAEvC,EAAA,GAAA,MAAA,iBAAgB;AACd,mBAAiB,UAAU;GAC3B;CAEF,MAAM,iBAAgC,SAAS,gBAAgB,OAAO;CAKtE,MAAM,QAAQC,yBAAAA,eAAe;EAC3B,SAJcC,wBAAAA,cAAc;GAAE;GAAO;GAAc;GAAmB,CAAC;EAKvE,UAJWA,wBAAAA,cAAc;GAAE,OAAO;GAAe;GAAc;GAAmB,CAAC;EAKnF;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,kBAAkBC,oBAAAA,WAAW;EACjC;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,UAAU,OAAO;EACrB,KAAK,CAAC,EAAE,mBAAmB,gBAAgB,EAAE,IAAI;EACjD,MAAM,iBAAiB,WAAW;EAClC,cAAY;EACZ,GAAI;YAEH,MAAM,KAAK,SAAS;AACnB,OAAI,KAAK,SAAS,QAChB,QACE,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;IAEE,OAAO,KAAK;IACZ,eAAe,KAAK;IACT;IACX,OAAO,KAAK;IACI;IAChB,EANK,KAAK,IAMV;AAIN,UACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAEE,GAAI,UAAU,OAAO;IACrB,cAAY,KAAK,SAAS,KAAA;IAC1B,eAAY;cAEX,KAAK;IACD,EANA,KAAK,IAML;IAET;EACE,CAAA;EAER;AAEF,cAAc,UAAUC,6BAAAA;AACxB,cAAc,eAAe;AAC7B,cAAc,cAAc"}

package/cjs/components/RollingNumber/RollingNumber.module.cjs ADDED Viewed

@@ -0,0 +1,13 @@
+"use client";
+//#region packages/@mantine/core/src/components/RollingNumber/RollingNumber.module.css
+var RollingNumber_module_default = {
+	"root": "m_47dd3981",
+	"digit": "m_b301d46e",
+	"digitColumn": "m_8ae40964",
+	"mantine-rolling-number-roll": "m_18d73873",
+	"char": "m_47d64bf5"
+};
+//#endregion
+exports.default = RollingNumber_module_default;
+//# sourceMappingURL=RollingNumber.module.cjs.map

package/cjs/components/RollingNumber/RollingNumber.module.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"RollingNumber.module.cjs","names":[],"sources":["../../../src/components/RollingNumber/RollingNumber.module.css"],"sourcesContent":[".root {\n display: inline-flex;\n align-items: baseline;\n overflow: hidden;\n\n &[data-tabular-numbers] {\n font-variant-numeric: tabular-nums;\n }\n}\n\n.digit {\n display: inline-block;\n width: 1ch;\n height: 1em;\n overflow: hidden;\n line-height: 1;\n transition:\n width var(--rn-duration) var(--rn-timing-function),\n opacity var(--rn-duration) var(--rn-timing-function);\n\n &[data-empty] {\n width: 0;\n opacity: 0;\n }\n}\n\n.digitColumn {\n display: flex;\n flex-direction: column;\n animation: mantine-rolling-number-roll var(--rn-duration) var(--rn-timing-function);\n\n & > span {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 1em;\n }\n}\n\n.char {\n display: inline-block;\n overflow: hidden;\n white-space: pre;\n transition: opacity var(--rn-duration) var(--rn-timing-function);\n\n &[data-empty] {\n width: 0;\n opacity: 0;\n }\n}\n\n@keyframes mantine-rolling-number-roll {\n from {\n transform: var(--rn-roll-from);\n }\n\n to {\n transform: var(--rn-roll-to);\n }\n}\n"],"mappings":""}

package/cjs/components/RollingNumber/build-value.cjs ADDED Viewed

@@ -0,0 +1,22 @@
+"use client";
+const require_get_digit_parts = require("./get-digit-parts.cjs");
+//#region packages/@mantine/core/src/components/RollingNumber/build-value.ts
+function buildValue({ value, prefix, suffix, decimalSeparator = ".", thousandSeparator, decimalScale, fixedDecimalScale }) {
+	const parts = require_get_digit_parts.getDigitParts({
+		value,
+		decimalScale,
+		fixedDecimalScale
+	});
+	let intStr = parts.intDigits.join("");
+	if (thousandSeparator) {
+		const sep = typeof thousandSeparator === "string" ? thousandSeparator : ",";
+		intStr = intStr.replace(/\B(?=(\d{3})+(?!\d))/g, sep);
+	}
+	let result = parts.negative ? `-${intStr}` : intStr;
+	if (parts.fracDigits.length > 0) result += `${decimalSeparator}${parts.fracDigits.join("")}`;
+	return `${prefix || ""}${result}${suffix || ""}`;
+}
+//#endregion
+exports.buildValue = buildValue;
+//# sourceMappingURL=build-value.cjs.map

package/cjs/components/RollingNumber/build-value.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"build-value.cjs","names":["getDigitParts"],"sources":["../../../src/components/RollingNumber/build-value.ts"],"sourcesContent":["import { getDigitParts } from './get-digit-parts';\n\nexport interface BuildValueInput {\n value: number;\n prefix?: string;\n suffix?: string;\n decimalSeparator?: string;\n thousandSeparator?: string | boolean;\n decimalScale?: number;\n fixedDecimalScale?: boolean;\n}\n\nexport function buildValue({\n value,\n prefix,\n suffix,\n decimalSeparator = '.',\n thousandSeparator,\n decimalScale,\n fixedDecimalScale,\n}: BuildValueInput): string {\n const parts = getDigitParts({ value, decimalScale, fixedDecimalScale });\n let intStr = parts.intDigits.join('');\n\n if (thousandSeparator) {\n const sep = typeof thousandSeparator === 'string' ? thousandSeparator : ',';\n intStr = intStr.replace(/\\B(?=(\\d{3})+(?!\\d))/g, sep);\n }\n\n let result = parts.negative ? `-${intStr}` : intStr;\n if (parts.fracDigits.length > 0) {\n result += `${decimalSeparator}${parts.fracDigits.join('')}`;\n }\n\n return `${prefix || ''}${result}${suffix || ''}`;\n}\n"],"mappings":";;;AAYA,SAAgB,WAAW,EACzB,OACA,QACA,QACA,mBAAmB,KACnB,mBACA,cACA,qBAC0B;CAC1B,MAAM,QAAQA,wBAAAA,cAAc;EAAE;EAAO;EAAc;EAAmB,CAAC;CACvE,IAAI,SAAS,MAAM,UAAU,KAAK,GAAG;AAErC,KAAI,mBAAmB;EACrB,MAAM,MAAM,OAAO,sBAAsB,WAAW,oBAAoB;AACxE,WAAS,OAAO,QAAQ,yBAAyB,IAAI;;CAGvD,IAAI,SAAS,MAAM,WAAW,IAAI,WAAW;AAC7C,KAAI,MAAM,WAAW,SAAS,EAC5B,WAAU,GAAG,mBAAmB,MAAM,WAAW,KAAK,GAAG;AAG3D,QAAO,GAAG,UAAU,KAAK,SAAS,UAAU"}

package/cjs/components/RollingNumber/get-digit-parts.cjs ADDED Viewed

@@ -0,0 +1,40 @@
+"use client";
+//#region packages/@mantine/core/src/components/RollingNumber/get-digit-parts.ts
+const PLAIN_FORMAT = new Intl.NumberFormat("en-US", {
+	useGrouping: false,
+	maximumFractionDigits: 20
+});
+function toPlainString(num, decimalScale) {
+	if (!Number.isFinite(num)) return "0";
+	if (decimalScale !== void 0) return new Intl.NumberFormat("en-US", {
+		useGrouping: false,
+		minimumFractionDigits: decimalScale,
+		maximumFractionDigits: decimalScale
+	}).format(num);
+	const str = String(num);
+	if (!str.includes("e") && !str.includes("E")) return str;
+	return PLAIN_FORMAT.format(num);
+}
+function getDigitParts({ value, decimalScale, fixedDecimalScale }) {
+	let str = toPlainString(Math.abs(value), decimalScale);
+	if (!fixedDecimalScale && decimalScale !== void 0) {
+		const parts = str.split(".");
+		if (parts[1]) {
+			const trimmed = parts[1].replace(/0+$/, "");
+			str = trimmed ? `${parts[0]}.${trimmed}` : parts[0];
+		}
+	}
+	const dotIdx = str.indexOf(".");
+	const intStr = dotIdx >= 0 ? str.slice(0, dotIdx) : str;
+	const fracStr = dotIdx >= 0 ? str.slice(dotIdx + 1) : "";
+	return {
+		negative: value < 0,
+		intDigits: intStr.split(""),
+		fracDigits: fracStr ? fracStr.split("") : [],
+		hasDecimal: dotIdx >= 0
+	};
+}
+//#endregion
+exports.getDigitParts = getDigitParts;
+//# sourceMappingURL=get-digit-parts.cjs.map

package/cjs/components/RollingNumber/get-digit-parts.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"get-digit-parts.cjs","names":[],"sources":["../../../src/components/RollingNumber/get-digit-parts.ts"],"sourcesContent":["export interface DigitParts {\n negative: boolean;\n intDigits: string[];\n fracDigits: string[];\n hasDecimal: boolean;\n}\n\nexport interface GetDigitPartsInput {\n value: number;\n decimalScale?: number;\n fixedDecimalScale?: boolean;\n}\n\nconst PLAIN_FORMAT = new Intl.NumberFormat('en-US', {\n useGrouping: false,\n maximumFractionDigits: 20,\n});\n\nfunction toPlainString(num: number, decimalScale?: number): string {\n if (!Number.isFinite(num)) {\n return '0';\n }\n\n if (decimalScale !== undefined) {\n return new Intl.NumberFormat('en-US', {\n useGrouping: false,\n minimumFractionDigits: decimalScale,\n maximumFractionDigits: decimalScale,\n }).format(num);\n }\n\n const str = String(num);\n if (!str.includes('e') && !str.includes('E')) {\n return str;\n }\n\n return PLAIN_FORMAT.format(num);\n}\n\nexport function getDigitParts({\n value,\n decimalScale,\n fixedDecimalScale,\n}: GetDigitPartsInput): DigitParts {\n const abs = Math.abs(value);\n let str = toPlainString(abs, decimalScale);\n\n if (!fixedDecimalScale && decimalScale !== undefined) {\n const parts = str.split('.');\n if (parts[1]) {\n const trimmed = parts[1].replace(/0+$/, '');\n str = trimmed ? `${parts[0]}.${trimmed}` : parts[0];\n }\n }\n\n const dotIdx = str.indexOf('.');\n const intStr = dotIdx >= 0 ? str.slice(0, dotIdx) : str;\n const fracStr = dotIdx >= 0 ? str.slice(dotIdx + 1) : '';\n\n return {\n negative: value < 0,\n intDigits: intStr.split(''),\n fracDigits: fracStr ? fracStr.split('') : [],\n hasDecimal: dotIdx >= 0,\n };\n}\n"],"mappings":";;AAaA,MAAM,eAAe,IAAI,KAAK,aAAa,SAAS;CAClD,aAAa;CACb,uBAAuB;CACxB,CAAC;AAEF,SAAS,cAAc,KAAa,cAA+B;AACjE,KAAI,CAAC,OAAO,SAAS,IAAI,CACvB,QAAO;AAGT,KAAI,iBAAiB,KAAA,EACnB,QAAO,IAAI,KAAK,aAAa,SAAS;EACpC,aAAa;EACb,uBAAuB;EACvB,uBAAuB;EACxB,CAAC,CAAC,OAAO,IAAI;CAGhB,MAAM,MAAM,OAAO,IAAI;AACvB,KAAI,CAAC,IAAI,SAAS,IAAI,IAAI,CAAC,IAAI,SAAS,IAAI,CAC1C,QAAO;AAGT,QAAO,aAAa,OAAO,IAAI;;AAGjC,SAAgB,cAAc,EAC5B,OACA,cACA,qBACiC;CAEjC,IAAI,MAAM,cADE,KAAK,IAAI,MAAM,EACE,aAAa;AAE1C,KAAI,CAAC,qBAAqB,iBAAiB,KAAA,GAAW;EACpD,MAAM,QAAQ,IAAI,MAAM,IAAI;AAC5B,MAAI,MAAM,IAAI;GACZ,MAAM,UAAU,MAAM,GAAG,QAAQ,OAAO,GAAG;AAC3C,SAAM,UAAU,GAAG,MAAM,GAAG,GAAG,YAAY,MAAM;;;CAIrD,MAAM,SAAS,IAAI,QAAQ,IAAI;CAC/B,MAAM,SAAS,UAAU,IAAI,IAAI,MAAM,GAAG,OAAO,GAAG;CACpD,MAAM,UAAU,UAAU,IAAI,IAAI,MAAM,SAAS,EAAE,GAAG;AAEtD,QAAO;EACL,UAAU,QAAQ;EAClB,WAAW,OAAO,MAAM,GAAG;EAC3B,YAAY,UAAU,QAAQ,MAAM,GAAG,GAAG,EAAE;EAC5C,YAAY,UAAU;EACvB"}

package/cjs/components/RollingNumber/get-render-slots.cjs ADDED Viewed

@@ -0,0 +1,78 @@
+"use client";
+//#region packages/@mantine/core/src/components/RollingNumber/get-render-slots.ts
+function padLeft(arr, length) {
+	return [...Array(length - arr.length).fill(null), ...arr];
+}
+function padRight(arr, length) {
+	return [...arr, ...Array(length - arr.length).fill(null)];
+}
+function getRenderSlots({ current, previous, prefix, suffix, decimalSeparator = ".", thousandSeparator }) {
+	const maxIntLen = Math.max(current.intDigits.length, previous.intDigits.length);
+	const maxFracLen = Math.max(current.fracDigits.length, previous.fracDigits.length);
+	const currIntPadded = padLeft(current.intDigits, maxIntLen);
+	const prevIntPadded = padLeft(previous.intDigits, maxIntLen);
+	const currFracPadded = padRight(current.fracDigits, maxFracLen);
+	const prevFracPadded = padRight(previous.fracDigits, maxFracLen);
+	const sep = thousandSeparator ? typeof thousandSeparator === "string" ? thousandSeparator : "," : null;
+	const slots = [];
+	if (prefix) for (let i = 0; i < prefix.length; i++) slots.push({
+		type: "char",
+		key: `prefix-${i}`,
+		char: prefix[i],
+		empty: false
+	});
+	if (current.negative || previous.negative) slots.push({
+		type: "char",
+		key: "sign",
+		char: "-",
+		empty: !current.negative
+	});
+	for (let i = 0; i < maxIntLen; i++) {
+		const posFromRight = maxIntLen - 1 - i;
+		const currDigit = currIntPadded[i];
+		const prevDigit = prevIntPadded[i];
+		const isEmpty = currDigit === null;
+		slots.push({
+			type: "digit",
+			key: `int-${posFromRight}`,
+			digit: currDigit ?? "0",
+			previousDigit: prevDigit,
+			empty: isEmpty
+		});
+		if (sep && posFromRight > 0 && posFromRight % 3 === 0) slots.push({
+			type: "char",
+			key: `sep-${posFromRight}`,
+			char: sep,
+			empty: isEmpty
+		});
+	}
+	if (current.hasDecimal || previous.hasDecimal) slots.push({
+		type: "char",
+		key: "dec",
+		char: decimalSeparator,
+		empty: !current.hasDecimal
+	});
+	for (let i = 0; i < maxFracLen; i++) {
+		const currDigit = currFracPadded[i];
+		const prevDigit = prevFracPadded[i];
+		const isEmpty = currDigit === null;
+		slots.push({
+			type: "digit",
+			key: `frac-${i}`,
+			digit: currDigit ?? "0",
+			previousDigit: prevDigit,
+			empty: isEmpty
+		});
+	}
+	if (suffix) for (let i = 0; i < suffix.length; i++) slots.push({
+		type: "char",
+		key: `suffix-${i}`,
+		char: suffix[i],
+		empty: false
+	});
+	return slots;
+}
+//#endregion
+exports.getRenderSlots = getRenderSlots;
+//# sourceMappingURL=get-render-slots.cjs.map

package/cjs/components/RollingNumber/get-render-slots.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"get-render-slots.cjs","names":[],"sources":["../../../src/components/RollingNumber/get-render-slots.ts"],"sourcesContent":["import { getDigitParts, type DigitParts } from './get-digit-parts';\n\nexport interface DigitSlot {\n type: 'digit';\n key: string;\n digit: string;\n previousDigit: string | null;\n empty: boolean;\n}\n\nexport interface CharSlot {\n type: 'char';\n key: string;\n char: string;\n empty: boolean;\n}\n\nexport type RenderSlot = DigitSlot | CharSlot;\n\nexport interface GetRenderSlotsInput {\n current: DigitParts;\n previous: DigitParts;\n prefix?: string;\n suffix?: string;\n decimalSeparator?: string;\n thousandSeparator?: string | boolean;\n}\n\nfunction padLeft(arr: string[], length: number): (string | null)[] {\n return [...Array(length - arr.length).fill(null), ...arr];\n}\n\nfunction padRight(arr: string[], length: number): (string | null)[] {\n return [...arr, ...Array(length - arr.length).fill(null)];\n}\n\nexport function getRenderSlots({\n current,\n previous,\n prefix,\n suffix,\n decimalSeparator = '.',\n thousandSeparator,\n}: GetRenderSlotsInput): RenderSlot[] {\n const maxIntLen = Math.max(current.intDigits.length, previous.intDigits.length);\n const maxFracLen = Math.max(current.fracDigits.length, previous.fracDigits.length);\n\n const currIntPadded = padLeft(current.intDigits, maxIntLen);\n const prevIntPadded = padLeft(previous.intDigits, maxIntLen);\n const currFracPadded = padRight(current.fracDigits, maxFracLen);\n const prevFracPadded = padRight(previous.fracDigits, maxFracLen);\n\n const sep = thousandSeparator\n ? typeof thousandSeparator === 'string'\n ? thousandSeparator\n : ','\n : null;\n\n const slots: RenderSlot[] = [];\n\n if (prefix) {\n for (let i = 0; i < prefix.length; i++) {\n slots.push({ type: 'char', key: `prefix-${i}`, char: prefix[i], empty: false });\n }\n }\n\n if (current.negative || previous.negative) {\n slots.push({ type: 'char', key: 'sign', char: '-', empty: !current.negative });\n }\n\n for (let i = 0; i < maxIntLen; i++) {\n const posFromRight = maxIntLen - 1 - i;\n const currDigit = currIntPadded[i];\n const prevDigit = prevIntPadded[i];\n const isEmpty = currDigit === null;\n\n slots.push({\n type: 'digit',\n key: `int-${posFromRight}`,\n digit: currDigit ?? '0',\n previousDigit: prevDigit,\n empty: isEmpty,\n });\n\n if (sep && posFromRight > 0 && posFromRight % 3 === 0) {\n slots.push({ type: 'char', key: `sep-${posFromRight}`, char: sep, empty: isEmpty });\n }\n }\n\n if (current.hasDecimal || previous.hasDecimal) {\n slots.push({\n type: 'char',\n key: 'dec',\n char: decimalSeparator,\n empty: !current.hasDecimal,\n });\n }\n\n for (let i = 0; i < maxFracLen; i++) {\n const currDigit = currFracPadded[i];\n const prevDigit = prevFracPadded[i];\n const isEmpty = currDigit === null;\n\n slots.push({\n type: 'digit',\n key: `frac-${i}`,\n digit: currDigit ?? '0',\n previousDigit: prevDigit,\n empty: isEmpty,\n });\n }\n\n if (suffix) {\n for (let i = 0; i < suffix.length; i++) {\n slots.push({ type: 'char', key: `suffix-${i}`, char: suffix[i], empty: false });\n }\n }\n\n return slots;\n}\n\nexport interface GetRenderSlotsFromValuesInput {\n value: number;\n previousValue: number;\n prefix?: string;\n suffix?: string;\n decimalSeparator?: string;\n thousandSeparator?: string | boolean;\n decimalScale?: number;\n fixedDecimalScale?: boolean;\n}\n\nexport function getRenderSlotsFromValues({\n value,\n previousValue,\n prefix,\n suffix,\n decimalSeparator,\n thousandSeparator,\n decimalScale,\n fixedDecimalScale,\n}: GetRenderSlotsFromValuesInput): RenderSlot[] {\n const current = getDigitParts({ value, decimalScale, fixedDecimalScale });\n const prev = getDigitParts({ value: previousValue, decimalScale, fixedDecimalScale });\n\n return getRenderSlots({\n current,\n previous: prev,\n prefix,\n suffix,\n decimalSeparator,\n thousandSeparator,\n });\n}\n"],"mappings":";;AA4BA,SAAS,QAAQ,KAAe,QAAmC;AACjE,QAAO,CAAC,GAAG,MAAM,SAAS,IAAI,OAAO,CAAC,KAAK,KAAK,EAAE,GAAG,IAAI;;AAG3D,SAAS,SAAS,KAAe,QAAmC;AAClE,QAAO,CAAC,GAAG,KAAK,GAAG,MAAM,SAAS,IAAI,OAAO,CAAC,KAAK,KAAK,CAAC;;AAG3D,SAAgB,eAAe,EAC7B,SACA,UACA,QACA,QACA,mBAAmB,KACnB,qBACoC;CACpC,MAAM,YAAY,KAAK,IAAI,QAAQ,UAAU,QAAQ,SAAS,UAAU,OAAO;CAC/E,MAAM,aAAa,KAAK,IAAI,QAAQ,WAAW,QAAQ,SAAS,WAAW,OAAO;CAElF,MAAM,gBAAgB,QAAQ,QAAQ,WAAW,UAAU;CAC3D,MAAM,gBAAgB,QAAQ,SAAS,WAAW,UAAU;CAC5D,MAAM,iBAAiB,SAAS,QAAQ,YAAY,WAAW;CAC/D,MAAM,iBAAiB,SAAS,SAAS,YAAY,WAAW;CAEhE,MAAM,MAAM,oBACR,OAAO,sBAAsB,WAC3B,oBACA,MACF;CAEJ,MAAM,QAAsB,EAAE;AAE9B,KAAI,OACF,MAAK,IAAI,IAAI,GAAG,IAAI,OAAO,QAAQ,IACjC,OAAM,KAAK;EAAE,MAAM;EAAQ,KAAK,UAAU;EAAK,MAAM,OAAO;EAAI,OAAO;EAAO,CAAC;AAInF,KAAI,QAAQ,YAAY,SAAS,SAC/B,OAAM,KAAK;EAAE,MAAM;EAAQ,KAAK;EAAQ,MAAM;EAAK,OAAO,CAAC,QAAQ;EAAU,CAAC;AAGhF,MAAK,IAAI,IAAI,GAAG,IAAI,WAAW,KAAK;EAClC,MAAM,eAAe,YAAY,IAAI;EACrC,MAAM,YAAY,cAAc;EAChC,MAAM,YAAY,cAAc;EAChC,MAAM,UAAU,cAAc;AAE9B,QAAM,KAAK;GACT,MAAM;GACN,KAAK,OAAO;GACZ,OAAO,aAAa;GACpB,eAAe;GACf,OAAO;GACR,CAAC;AAEF,MAAI,OAAO,eAAe,KAAK,eAAe,MAAM,EAClD,OAAM,KAAK;GAAE,MAAM;GAAQ,KAAK,OAAO;GAAgB,MAAM;GAAK,OAAO;GAAS,CAAC;;AAIvF,KAAI,QAAQ,cAAc,SAAS,WACjC,OAAM,KAAK;EACT,MAAM;EACN,KAAK;EACL,MAAM;EACN,OAAO,CAAC,QAAQ;EACjB,CAAC;AAGJ,MAAK,IAAI,IAAI,GAAG,IAAI,YAAY,KAAK;EACnC,MAAM,YAAY,eAAe;EACjC,MAAM,YAAY,eAAe;EACjC,MAAM,UAAU,cAAc;AAE9B,QAAM,KAAK;GACT,MAAM;GACN,KAAK,QAAQ;GACb,OAAO,aAAa;GACpB,eAAe;GACf,OAAO;GACR,CAAC;;AAGJ,KAAI,OACF,MAAK,IAAI,IAAI,GAAG,IAAI,OAAO,QAAQ,IACjC,OAAM,KAAK;EAAE,MAAM;EAAQ,KAAK,UAAU;EAAK,MAAM,OAAO;EAAI,OAAO;EAAO,CAAC;AAInF,QAAO"}

package/cjs/components/ScrollArea/ScrollArea.cjs CHANGED Viewed

@@ -58,20 +58,27 @@ const ScrollArea = require_factory.factory((_props) => {
 		varsResolver
 	});
 	const localViewportRef = (0, react.useRef)(null);
-	const combinedViewportRef = (0, _floating_ui_react.useMergeRefs)([viewportRef, localViewportRef]);
-	(0, _mantine_hooks.useIsomorphicEffect)(() => {
-		if (startScrollPosition && localViewportRef.current) localViewportRef.current.scrollTo({
-			left: startScrollPosition.x ?? 0,
-			top: startScrollPosition.y ?? 0
-		});
-	}, []);
-	require_use_resize_observer.useResizeObserver(offsetScrollbars === "present" ? localViewportRef.current : null, () => {
+	const [viewportElement, setViewportElement] = (0, react.useState)(null);
+	const combinedViewportRef = (0, _floating_ui_react.useMergeRefs)([
+		viewportRef,
+		localViewportRef,
+		(0, react.useCallback)((node) => {
+			setViewportElement((current) => current === node ? current : node);
+		}, [])
+	]);
+	require_use_resize_observer.useResizeObserver(offsetScrollbars === "present" ? viewportElement : null, () => {
 		const element = localViewportRef.current;
 		if (element) {
 			setVerticalThumbVisible(element.scrollHeight > element.clientHeight);
 			setHorizontalThumbVisible(element.scrollWidth > element.clientWidth);
 		}
 	});
+	(0, _mantine_hooks.useIsomorphicEffect)(() => {
+		if (startScrollPosition && localViewportRef.current) localViewportRef.current.scrollTo({
+			left: startScrollPosition.x ?? 0,
+			top: startScrollPosition.y ?? 0
+		});
+	}, []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ScrollAreaRoot.ScrollAreaRoot, {
 		getStyles,
 		type: type === "never" ? "always" : type,
@@ -140,7 +147,14 @@ ScrollArea.displayName = "@mantine/core/ScrollArea";
 const ScrollAreaAutosize = require_factory.factory((props) => {
 	const { children, classNames, styles, scrollbarSize, scrollHideDelay, type, dir, offsetScrollbars, overscrollBehavior, viewportRef, onScrollPositionChange, unstyled, variant, viewportProps, scrollbars, style, vars, onBottomReached, onTopReached, startScrollPosition, onOverflowChange, ...others } = require_use_props.useProps("ScrollAreaAutosize", defaultProps, props);
 	const viewportObserverRef = (0, react.useRef)(null);
-	const combinedViewportRef = (0, _floating_ui_react.useMergeRefs)([viewportRef, viewportObserverRef]);
+	const [viewportObserverElement, setViewportObserverElement] = (0, react.useState)(null);
+	const combinedViewportRef = (0, _floating_ui_react.useMergeRefs)([
+		viewportRef,
+		viewportObserverRef,
+		(0, react.useCallback)((node) => {
+			setViewportObserverElement((current) => current === node ? current : node);
+		}, [])
+	]);
 	const overflowingRef = (0, react.useRef)(false);
 	const didMountRef = (0, react.useRef)(false);
 	const handleOverflowCheck = (0, react.useEffectEvent)(() => {
@@ -156,7 +170,7 @@ const ScrollAreaAutosize = require_factory.factory((props) => {
 			overflowingRef.current = isOverflowing;
 		}
 	});
-	require_use_resize_observer.useResizeObserver(onOverflowChange ? viewportObserverRef.current : null, handleOverflowCheck);
+	require_use_resize_observer.useResizeObserver(onOverflowChange ? viewportObserverElement : null, handleOverflowCheck);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		...others,
 		variant,