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/esm/components/NumberInput/NumberInput.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberInput.mjs","names":["classes"],"sources":["../../../src/components/NumberInput/NumberInput.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport cx from 'clsx';\nimport { NumberFormatValues, NumericFormat, OnValueChange } from 'react-number-format';\nimport { assignRef, clamp, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n Factory,\n genericFactory,\n getSize,\n noop,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { UnstyledButton } from '../UnstyledButton';\nimport { NumberInputChevron } from './NumberInputChevron';\nimport classes from './NumberInput.module.css';\n\n// Re for negative -0, -0., -0.0, -0.00, -0.000 ... strings\n// And for positive 0., 0.0, 0.00, 0.000 ... strings\nconst leadingDecimalZeroPattern = /^(0\\.0\|-0(\\.0)?)$/;\n\n// Re for 01, 006, 00.02, -0010, -000.293 ... and negative counterparts\nconst leadingZerosPattern = /^-?0\\d+(\\.\\d+)?\\.?$/;\n\n// Re for decimal numbers with trailing zeros like 13.0, 13.00, 5.10 ... strings\nconst trailingZerosPattern = /\\.\\d0$/;\n\n// Re for numbers with trailing decimal separator like 10. or -3.\nconst trailingDecimalSeparatorPattern = /^-?\\d+\\.$/;\n\nexport interface NumberInputHandlers {\n increment: () => void;\n decrement: () => void;\n}\n\nexport type NumberInputMode = 'number' \| 'bigint';\nexport type NumberInputNumericType = number \| bigint;\nexport type NumberInputValue<T extends NumberInputNumericType = number> = T \| string;\ntype NumberInputNumericValue<T extends NumberInputNumericType = number> = T;\ntype InternalNumberInputValue = string \| number \| bigint;\n\nfunction isNumberString(value: unknown) {\n return typeof value === 'string' && value !== '' && !Number.isNaN(Number(value));\n}\n\nfunction isBigIntValue(value: unknown): value is bigint {\n return typeof value === 'bigint';\n}\n\nfunction canStep(value: number \| string) {\n if (typeof value === 'number') {\n return value < Number.MAX_SAFE_INTEGER;\n }\n\n return value === '' \|\| (isNumberString(value) && Number(value) < Number.MAX_SAFE_INTEGER);\n}\n\nfunction isValidBigIntString(value: string, allowNegative: boolean) {\n if (value === '') {\n return false;\n }\n\n if (value === '-') {\n return false;\n }\n\n if (!allowNegative && value.startsWith('-')) {\n return false;\n }\n\n return /^-?\\d+$/.test(value);\n}\n\nfunction canStepBigInt(value: bigint \| string, allowNegative: boolean) {\n if (typeof value === 'bigint') {\n return true;\n }\n\n return value === '' \|\| isValidBigIntString(value, allowNegative);\n}\n\nfunction parseBigIntFromString(value: string): bigint \| null {\n if (!/^-?\\d+$/.test(value)) {\n return null;\n }\n\n try {\n return BigInt(value);\n } catch {\n return null;\n }\n}\n\nfunction toBigIntOrUndefined(value: unknown): bigint \| undefined {\n if (typeof value === 'bigint') {\n return value;\n }\n\n if (typeof value === 'number' && Number.isFinite(value) && Number.isInteger(value)) {\n return BigInt(value);\n }\n\n return undefined;\n}\n\nfunction clampBigInt(value: bigint, min?: bigint, max?: bigint) {\n if (min !== undefined && value < min) {\n return min;\n }\n\n if (max !== undefined && value > max) {\n return max;\n }\n\n return value;\n}\n\nfunction getTotalDigits(inputValue: string \| number): number {\n // All digits must be counted, parseFloat precision depends\n // on the number of digits in the input, not only on the decimal scale\n return inputValue.toString().replace('.', '').length;\n}\n\nfunction isValidNumber(floatValue: number \| undefined, value: string): floatValue is number {\n return (\n (typeof floatValue === 'number'\n ? floatValue < Number.MAX_SAFE_INTEGER\n : !Number.isNaN(Number(floatValue))) &&\n !Number.isNaN(floatValue) &&\n getTotalDigits(value) < 14 &&\n value !== ''\n );\n}\n\nfunction isInRange(value: number \| undefined, min: number \| undefined, max: number \| undefined) {\n if (value === undefined) {\n return true;\n }\n\n const minValid = min === undefined \|\| value >= min;\n const maxValid = max === undefined \|\| value <= max;\n\n return minValid && maxValid;\n}\n\nexport type NumberInputStylesNames = 'controls' \| 'control' \| __InputStylesNames;\nexport type NumberInputCssVariables = {\n controls: '--ni-chevron-size';\n};\n\nexport interface NumberInputProps<T extends NumberInputNumericType = number>\n extends\n BoxProps,\n Omit<__BaseInputProps, 'pointer'>,\n StylesApiProps<NumberInputFactory>,\n ElementProps<\n 'input',\n 'size' \| 'type' \| 'onChange' \| 'value' \| 'defaultValue' \| 'min' \| 'max' \| 'step'\n > {\n /* Controlled component value /\n value?: NumberInputValue<T>;\n\n /* Uncontrolled component default value /\n defaultValue?: NumberInputValue<T>;\n\n /* Called when value changes /\n onChange?: (value: NumberInputValue<T>) => void;\n\n /* Called when value changes with `react-number-format` payload /\n onValueChange?: OnValueChange;\n\n /* Determines whether leading zeros are allowed during input. If `false`, leading zeros are removed as you type (e.g., typing `007` results in `7`). Works in conjunction with `trimLeadingZeroesOnBlur`. @default true /\n allowLeadingZeros?: boolean;\n\n /* Determines whether negative numbers are allowed. If `false`, the input will not accept negative values, and the decrement button will stop at `0` (when `min` is not set). @default true /\n allowNegative?: boolean;\n\n /* Characters which when pressed result in a decimal separator. These characters will be replaced by the `decimalSeparator` in the input value. @default ['.', ','] /\n allowedDecimalSeparators?: string[];\n\n /* Limits the number of digits that can be entered after the decimal point @default Infinity /\n decimalScale?: number;\n\n /* Character used as a decimal separator. Generally used with `allowedDecimalSeparators` prop. @default '.' /\n decimalSeparator?: string;\n\n /* If `true`, automatically pads the decimal part with zeros to match `decimalScale` (e.g., with `decimalScale={2}`, typing `5.1` displays as `5.10`). Requires `decimalScale` to be set. @default false /\n fixedDecimalScale?: boolean;\n\n /* Prefix added before the input value /\n prefix?: string;\n\n /* Suffix added after the input value /\n suffix?: string;\n\n /* Defines the thousand grouping style. 'thousand' (1,000), 'lakh' (1,00,000), 'wan' (1,0000), 'none'. /\n thousandsGroupStyle?: 'thousand' \| 'lakh' \| 'wan' \| 'none';\n\n /* A function to validate the input value. If this function returns `false`, the `onChange` will not be called and the input value will not change. /\n isAllowed?: (values: NumberFormatValues) => boolean;\n\n /* Advanced: Set to `true` if you're passing numeric strings (e.g., `\"12345\"`) and using formatting props like `prefix` or `suffix`. In most cases, you don't need this prop. See [react-number-format docs](https://www.npmjs.com/package/react-number-format) for details. @default false /\n valueIsNumericString?: boolean;\n\n /* Controls input `type` attribute @default 'text' /\n type?: 'text' \| 'tel' \| 'password';\n\n /* A character used to separate thousands /\n thousandSeparator?: string \| boolean;\n\n /* Minimum possible value /\n min?: NumberInputNumericValue<T>;\n\n /* Maximum possible value /\n max?: NumberInputNumericValue<T>;\n\n /* Number by which value will be incremented/decremented with up/down controls and keyboard arrows @default 1 /\n step?: NumberInputNumericValue<T>;\n\n /* If set, the up/down controls are hidden @default false /\n hideControls?: boolean;\n\n /* Controls how values are clamped to the `min`/`max` range:\n * - `'blur'` (default): User can type any value, but it's clamped when the input loses focus\n * - `'strict'`: User cannot type values outside the range\n * - `'none'`: No clamping; `min`/`max` only apply to increment/decrement controls and arrow keys\n /\n clampBehavior?: 'strict' \| 'blur' \| 'none';\n\n /* If set, decimal values are allowed @default true /\n allowDecimal?: boolean;\n\n /* Increment/decrement handlers /\n handlersRef?: React.Ref<NumberInputHandlers \| undefined>;\n\n /* Value used when incrementing/decrementing an empty input. If `min` is set and `startValue < min`, `min` is used instead. @default 0 /\n startValue?: NumberInputNumericValue<T>;\n\n /* Interval in milliseconds between value steps when increment/decrement button is held down. Can be a number or a function `(stepCount) => number` for dynamic intervals. Requires `stepHoldDelay` to be set. @default undefined /\n stepHoldInterval?: number \| ((stepCount: number) => number);\n\n /* Initial delay in milliseconds before stepping the value. /\n stepHoldDelay?: number;\n\n /* If set, up/down keyboard events increment/decrement value @default true /\n withKeyboardEvents?: boolean;\n\n /* If set, leading zeros are removed on blur. For example, `00100` -> `100` @default true /\n trimLeadingZeroesOnBlur?: boolean;\n\n /* If set, all text is selected when the input receives focus @default false /\n selectAllOnFocus?: boolean;\n\n /* Called when the increment button or arrow up key is pressed and the value has reached the maximum /\n onMinReached?: () => void;\n\n /* Called when the decrement button or arrow down key is pressed and the value has reached the minimum /\n onMaxReached?: () => void;\n}\n\nexport type NumberInputFactory = Factory<{\n props: NumberInputProps;\n ref: HTMLInputElement;\n stylesNames: NumberInputStylesNames;\n vars: NumberInputCssVariables;\n variant: InputVariant;\n signature: <T extends NumberInputNumericType = number>(\n props: NumberInputProps<T>\n ) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n size: 'sm',\n step: 1,\n clampBehavior: 'blur',\n allowDecimal: true,\n allowNegative: true,\n withKeyboardEvents: true,\n allowLeadingZeros: true,\n trimLeadingZeroesOnBlur: true,\n startValue: 0,\n allowedDecimalSeparators: ['.', ','],\n} satisfies Partial<NumberInputProps<number \| bigint>>;\n\nconst varsResolver = createVarsResolver<NumberInputFactory>((_, { size }) => ({\n controls: {\n '--ni-chevron-size': getSize(size, 'ni-chevron-size'),\n },\n}));\n\nfunction clampAndSanitizeInput(sanitizedValue: string \| number, max?: number, min?: number) {\n const stringValue = sanitizedValue.toString();\n const hasTrailingDecimalSeparator = trailingDecimalSeparatorPattern.test(stringValue);\n\n const replaced = stringValue.replace(/^0+(?=\\d)/, '');\n const parsedValue = parseFloat(replaced);\n\n if (Number.isNaN(parsedValue)) {\n return replaced;\n }\n\n if (parsedValue > Number.MAX_SAFE_INTEGER) {\n return max !== undefined ? max : replaced;\n }\n\n const clamped = clamp(parsedValue, min, max);\n\n if (hasTrailingDecimalSeparator) {\n const clampedString = clamped.toString().replace(/^0+(?=\\d)/, '');\n return `${clampedString}.`;\n }\n\n return clamped;\n}\n\nfunction clampAndSanitizeBigIntInput(\n sanitizedValue: string,\n options: { min?: bigint; max?: bigint; clampBehavior: NumberInputProps['clampBehavior'] }\n) {\n if (sanitizedValue === '' \|\| sanitizedValue === '-') {\n return sanitizedValue;\n }\n\n const parsed = parseBigIntFromString(sanitizedValue);\n\n if (parsed === null) {\n return sanitizedValue;\n }\n\n return options.clampBehavior === 'blur' ? clampBigInt(parsed, options.min, options.max) : parsed;\n}\n\nexport const NumberInput = genericFactory<NumberInputFactory>(\n <T extends NumberInputNumericType = number>(_props: NumberInputProps<T>) => {\n const props = useProps(\n 'NumberInput',\n defaultProps as Partial<NumberInputProps>,\n _props as unknown as NumberInputProps\n );\n const {\n className,\n classNames,\n styles,\n unstyled,\n vars,\n onChange,\n onValueChange,\n value,\n defaultValue,\n max,\n min,\n step,\n hideControls,\n rightSection,\n isAllowed,\n clampBehavior,\n onBlur,\n allowDecimal,\n decimalScale,\n onKeyDown,\n onKeyDownCapture,\n handlersRef,\n startValue,\n disabled,\n rightSectionPointerEvents,\n allowNegative,\n readOnly,\n size,\n rightSectionWidth,\n stepHoldInterval,\n stepHoldDelay,\n allowLeadingZeros,\n withKeyboardEvents,\n trimLeadingZeroesOnBlur,\n allowedDecimalSeparators,\n selectAllOnFocus,\n onMinReached,\n onMaxReached,\n onFocus,\n attributes,\n ref,\n ...others\n } = props;\n const allowNegativeResolved = allowNegative ?? true;\n const allowLeadingZerosResolved = allowLeadingZeros ?? true;\n\n const getStyles = useStyles<NumberInputFactory>({\n name: 'NumberInput',\n classes,\n props: props as NumberInputProps,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<NumberInputFactory>({\n classNames,\n styles,\n props: props as NumberInputProps,\n });\n\n const valueModeRef = useRef<NumberInputMode>(\n isBigIntValue(value) \|\| isBigIntValue(defaultValue) ? 'bigint' : 'number'\n );\n\n if (isBigIntValue(value)) {\n valueModeRef.current = 'bigint';\n } else if (typeof value === 'number') {\n valueModeRef.current = 'number';\n }\n\n const isBigIntMode = valueModeRef.current === 'bigint';\n\n const [_value, setValue] = useUncontrolled<InternalNumberInputValue>({\n value: value as InternalNumberInputValue \| undefined,\n defaultValue: defaultValue as InternalNumberInputValue \| undefined,\n finalValue: '',\n onChange: onChange as ((value: InternalNumberInputValue) => void) \| undefined,\n });\n\n const shouldUseStepInterval = stepHoldDelay !== undefined && stepHoldInterval !== undefined;\n const inputRef = useRef<HTMLInputElement>(null);\n const onStepTimeoutRef = useRef<number \| null>(null);\n const stepCountRef = useRef<number>(0);\n\n const minNumber = typeof min === 'number' ? min : undefined;\n const maxNumber = typeof max === 'number' ? max : undefined;\n const stepNumber = typeof step === 'number' ? step : defaultProps.step;\n const startValueNumber = typeof startValue === 'number' ? startValue : defaultProps.startValue;\n\n const minBigInt = toBigIntOrUndefined(min);\n const maxBigInt = toBigIntOrUndefined(max);\n const stepBigInt = toBigIntOrUndefined(step) ?? BigInt(1);\n const startValueBigInt = toBigIntOrUndefined(startValue) ?? BigInt(0);\n\n const parseBigIntOrString = (inputValue: string): bigint \| string => {\n if (\n !isValidBigIntString(inputValue, allowNegativeResolved) \|\|\n (allowLeadingZerosResolved && leadingZerosPattern.test(inputValue))\n ) {\n return inputValue;\n }\n\n const parsed = parseBigIntFromString(inputValue);\n return parsed ?? inputValue;\n };\n\n const getBigIntFloatValue = (inputValue: bigint) => {\n const numericValue = Number(inputValue);\n return Number.isSafeInteger(numericValue) ? numericValue : undefined;\n };\n\n const handleValueChange: OnValueChange = (payload, event) => {\n if (event.source === 'event') {\n if (isBigIntMode) {\n setValue(parseBigIntOrString(payload.value));\n } else {\n setValue(\n isValidNumber(payload.floatValue, payload.value) &&\n !leadingDecimalZeroPattern.test(payload.value) &&\n !(allowLeadingZerosResolved ? leadingZerosPattern.test(payload.value) : false) &&\n !trailingZerosPattern.test(payload.value) &&\n !trailingDecimalSeparatorPattern.test(payload.value)\n ? payload.floatValue\n : payload.value\n );\n }\n }\n onValueChange?.(payload, event);\n };\n\n const getDecimalPlaces = (inputValue: number \| string): number => {\n const match = String(inputValue).match(/(?:\\.(\\d+))?(?:[eE]([+-]?\\d+))?$/);\n if (!match) {\n return 0;\n }\n return Math.max(0, (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0));\n };\n\n const adjustCursor = (position?: number) => {\n if (inputRef.current && typeof position !== 'undefined') {\n inputRef.current.setSelectionRange(position, position);\n }\n };\n\n const incrementRef = useRef<() => void>(noop);\n incrementRef.current = () => {\n if (isBigIntMode) {\n if (!canStepBigInt(_value as bigint \| string, allowNegativeResolved)) {\n return;\n }\n\n let val: bigint;\n const currentValue = _value;\n\n if (typeof currentValue === 'bigint') {\n const incrementedValue = currentValue + stepBigInt;\n if (maxBigInt !== undefined && incrementedValue > maxBigInt) {\n onMaxReached?.();\n }\n val =\n maxBigInt !== undefined && incrementedValue > maxBigInt ? maxBigInt : incrementedValue;\n } else if (typeof currentValue === 'string' && currentValue !== '') {\n const parsed = parseBigIntFromString(currentValue);\n if (parsed === null) {\n return;\n }\n\n const incrementedValue = parsed + stepBigInt;\n if (maxBigInt !== undefined && incrementedValue > maxBigInt) {\n onMaxReached?.();\n }\n val =\n maxBigInt !== undefined && incrementedValue > maxBigInt ? maxBigInt : incrementedValue;\n } else {\n val = clampBigInt(startValueBigInt, minBigInt, maxBigInt);\n }\n\n const formattedValue = val.toString();\n setValue(val);\n onValueChange?.(\n { floatValue: getBigIntFloatValue(val), formattedValue, value: formattedValue },\n { source: 'increment' as any }\n );\n setTimeout(() => adjustCursor(inputRef.current?.value.length), 0);\n return;\n }\n\n if (!canStep(_value as number \| string)) {\n return;\n }\n\n let val: number;\n const currentValuePrecision = getDecimalPlaces(_value as number \| string);\n const stepPrecision = getDecimalPlaces(stepNumber);\n const maxPrecision = Math.max(currentValuePrecision, stepPrecision);\n const factor = 10 * maxPrecision;\n\n if (!isNumberString(_value) && (typeof _value !== 'number' \|\| Number.isNaN(_value))) {\n val = clamp(startValueNumber, minNumber, maxNumber);\n } else if (maxNumber !== undefined) {\n const incrementedValue =\n (Math.round(Number(_value) * factor) + Math.round(stepNumber * factor)) / factor;\n if (incrementedValue > maxNumber) {\n onMaxReached?.();\n }\n val = incrementedValue <= maxNumber ? incrementedValue : maxNumber;\n } else {\n val = (Math.round(Number(_value) * factor) + Math.round(stepNumber * factor)) / factor;\n }\n\n const formattedValue = val.toFixed(maxPrecision);\n setValue(parseFloat(formattedValue));\n onValueChange?.(\n { floatValue: parseFloat(formattedValue), formattedValue, value: formattedValue },\n { source: 'increment' as any }\n );\n setTimeout(() => adjustCursor(inputRef.current?.value.length), 0);\n };\n\n const decrementRef = useRef<() => void>(noop);\n decrementRef.current = () => {\n if (isBigIntMode) {\n if (!canStepBigInt(_value as bigint \| string, allowNegativeResolved)) {\n return;\n }\n\n let val: bigint;\n const minValue =\n minBigInt !== undefined ? minBigInt : !allowNegativeResolved ? BigInt(0) : undefined;\n const currentValue = _value;\n\n if (typeof currentValue === 'bigint') {\n const decrementedValue = currentValue - stepBigInt;\n if (minValue !== undefined && decrementedValue < minValue) {\n onMinReached?.();\n }\n val = minValue !== undefined && decrementedValue < minValue ? minValue : decrementedValue;\n } else if (typeof currentValue === 'string' && currentValue !== '') {\n const parsed = parseBigIntFromString(currentValue);\n if (parsed === null) {\n return;\n }\n\n const decrementedValue = parsed - stepBigInt;\n if (minValue !== undefined && decrementedValue < minValue) {\n onMinReached?.();\n }\n val = minValue !== undefined && decrementedValue < minValue ? minValue : decrementedValue;\n } else {\n val = clampBigInt(startValueBigInt, minValue, maxBigInt);\n }\n\n const formattedValue = val.toString();\n setValue(val);\n onValueChange?.(\n { floatValue: getBigIntFloatValue(val), formattedValue, value: formattedValue },\n { source: 'decrement' as any }\n );\n setTimeout(() => adjustCursor(inputRef.current?.value.length), 0);\n return;\n }\n\n if (!canStep(_value as number \| string)) {\n return;\n }\n\n let val: number;\n const minValue =\n minNumber !== undefined ? minNumber : !allowNegativeResolved ? 0 : Number.MIN_SAFE_INTEGER;\n const currentValuePrecision = getDecimalPlaces(_value as number \| string);\n const stepPrecision = getDecimalPlaces(stepNumber);\n const maxPrecision = Math.max(currentValuePrecision, stepPrecision);\n const factor = 10 ** maxPrecision;\n\n if ((!isNumberString(_value) && typeof _value !== 'number') \|\| Number.isNaN(_value)) {\n val = clamp(startValueNumber, minValue, maxNumber);\n } else {\n const decrementedValue =\n (Math.round(Number(_value) * factor) - Math.round(stepNumber * factor)) / factor;\n if (minValue !== undefined && decrementedValue < minValue) {\n onMinReached?.();\n }\n val = minValue !== undefined && decrementedValue < minValue ? minValue : decrementedValue;\n }\n\n const formattedValue = val.toFixed(maxPrecision);\n setValue(parseFloat(formattedValue));\n onValueChange?.(\n { floatValue: parseFloat(formattedValue), formattedValue, value: formattedValue },\n { source: 'decrement' as any }\n );\n setTimeout(() => adjustCursor(inputRef.current?.value.length), 0);\n };\n\n const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n const pastedText = event.clipboardData.getData('text');\n const _decimalSeparator = others.decimalSeparator \|\| '.';\n const separatorsToReplace = (allowedDecimalSeparators \|\| ['.', ',']).filter(\n (s) => s !== _decimalSeparator\n );\n\n if (separatorsToReplace.some((s) => pastedText.includes(s))) {\n event.preventDefault();\n let modifiedText = pastedText;\n separatorsToReplace.forEach((s) => {\n modifiedText = modifiedText.split(s).join(_decimalSeparator);\n });\n\n const input = inputRef.current;\n if (input) {\n const start = input.selectionStart ?? 0;\n const end = input.selectionEnd ?? 0;\n const currentValue = input.value;\n const newValue =\n currentValue.substring(0, start) + modifiedText + currentValue.substring(end);\n\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value'\n )?.set;\n nativeInputValueSetter?.call(input, newValue);\n input.dispatchEvent(new Event('change', { bubbles: true }));\n\n const cursorPos = start + modifiedText.length;\n setTimeout(() => adjustCursor(cursorPos), 0);\n }\n }\n\n others.onPaste?.(event as any);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n\n if (readOnly \|\| !withKeyboardEvents) {\n return;\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n incrementRef.current?.();\n }\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n decrementRef.current?.();\n }\n };\n\n const handleKeyDownCapture = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDownCapture?.(event);\n if (event.key === 'Backspace') {\n const input = inputRef.current;\n if (input && input.selectionStart === 0 && input.selectionStart === input.selectionEnd) {\n event.preventDefault();\n window.setTimeout(() => adjustCursor(0), 0);\n }\n }\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (selectAllOnFocus) {\n setTimeout(() => event.currentTarget.select(), 0);\n }\n onFocus?.(event);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n let sanitizedValue = _value;\n\n if (isBigIntMode) {\n if (clampBehavior === 'blur' && typeof sanitizedValue === 'bigint') {\n sanitizedValue = clampBigInt(sanitizedValue, minBigInt, maxBigInt);\n }\n\n if (trimLeadingZeroesOnBlur && typeof sanitizedValue === 'string') {\n sanitizedValue = clampAndSanitizeBigIntInput(sanitizedValue, {\n min: minBigInt,\n max: maxBigInt,\n clampBehavior,\n });\n }\n } else {\n if (clampBehavior === 'blur' && typeof sanitizedValue === 'number') {\n sanitizedValue = clamp(sanitizedValue, minNumber, maxNumber);\n }\n\n if (\n trimLeadingZeroesOnBlur &&\n typeof sanitizedValue === 'string' &&\n getDecimalPlaces(sanitizedValue) < 15\n ) {\n sanitizedValue = clampAndSanitizeInput(sanitizedValue, maxNumber, minNumber);\n }\n }\n\n if (_value !== sanitizedValue) {\n setValue(sanitizedValue);\n }\n\n onBlur?.(event);\n };\n\n assignRef(handlersRef, { increment: incrementRef.current, decrement: decrementRef.current });\n\n const onStepHandleChange = (isIncrement: boolean) => {\n if (isIncrement) {\n incrementRef.current?.();\n } else {\n decrementRef.current?.();\n }\n stepCountRef.current += 1;\n };\n\n const onStepLoop = (isIncrement: boolean) => {\n onStepHandleChange(isIncrement);\n\n if (shouldUseStepInterval) {\n const interval =\n typeof stepHoldInterval === 'number'\n ? stepHoldInterval\n : stepHoldInterval(stepCountRef.current);\n onStepTimeoutRef.current = window.setTimeout(() => onStepLoop(isIncrement), interval);\n }\n };\n\n const onStep = (\n event: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>,\n isIncrement: boolean\n ) => {\n event.preventDefault();\n inputRef.current?.focus();\n onStepHandleChange(isIncrement);\n if (shouldUseStepInterval) {\n onStepTimeoutRef.current = window.setTimeout(() => onStepLoop(isIncrement), stepHoldDelay);\n }\n };\n\n const onStepDone = () => {\n if (onStepTimeoutRef.current) {\n window.clearTimeout(onStepTimeoutRef.current);\n }\n onStepTimeoutRef.current = null;\n stepCountRef.current = 0;\n };\n\n const controls = (\n <div {...getStyles('controls')}>\n <UnstyledButton\n {...getStyles('control')}\n tabIndex={-1}\n aria-hidden\n disabled={\n disabled \|\|\n (typeof _value === 'number' && maxNumber !== undefined && _value >= maxNumber) \|\|\n (typeof _value === 'bigint' && maxBigInt !== undefined && _value >= maxBigInt)\n }\n mod={{ direction: 'up' }}\n onMouseDown={(event) => event.preventDefault()}\n onPointerDown={(event) => {\n onStep(event, true);\n }}\n onPointerUp={onStepDone}\n onPointerLeave={onStepDone}\n >\n <NumberInputChevron direction=\"up\" />\n </UnstyledButton>\n <UnstyledButton\n {...getStyles('control')}\n tabIndex={-1}\n aria-hidden\n disabled={\n disabled \|\|\n (typeof _value === 'number' && minNumber !== undefined && _value <= minNumber) \|\|\n (typeof _value === 'bigint' && minBigInt !== undefined && _value <= minBigInt)\n }\n mod={{ direction: 'down' }}\n onMouseDown={(event) => event.preventDefault()}\n onPointerDown={(event) => {\n onStep(event, false);\n }}\n onPointerUp={onStepDone}\n onPointerLeave={onStepDone}\n >\n <NumberInputChevron direction=\"down\" />\n </UnstyledButton>\n </div>\n );\n\n return (\n <InputBase\n component={NumericFormat}\n allowNegative={allowNegative}\n className={cx(classes.root, className)}\n size={size}\n {...others}\n inputMode={isBigIntMode ? 'numeric' : 'decimal'}\n readOnly={readOnly}\n disabled={disabled}\n value={typeof _value === 'bigint' ? _value.toString() : _value}\n getInputRef={useMergedRef(ref, inputRef)}\n onValueChange={handleValueChange}\n rightSection={\n hideControls \|\|\n readOnly \|\|\n !(isBigIntMode\n ? canStepBigInt(_value as bigint \| string, allowNegativeResolved)\n : canStep(_value as number \| string))\n ? rightSection\n : rightSection \|\| controls\n }\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n __staticSelector=\"NumberInput\"\n decimalScale={isBigIntMode ? 0 : allowDecimal ? decimalScale : 0}\n onPaste={handlePaste}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onKeyDownCapture={handleKeyDownCapture}\n rightSectionPointerEvents={rightSectionPointerEvents ?? (disabled ? 'none' : undefined)}\n rightSectionWidth={rightSectionWidth ?? `var(--ni-right-section-width-${size \|\| 'sm'})`}\n allowLeadingZeros={allowLeadingZeros}\n allowedDecimalSeparators={allowedDecimalSeparators}\n onBlur={handleBlur}\n attributes={attributes}\n isAllowed={(val) => {\n const userAllowed = isAllowed ? isAllowed(val) : true;\n if (!userAllowed) {\n return false;\n }\n\n if (clampBehavior !== 'strict') {\n return true;\n }\n\n if (!isBigIntMode) {\n return isInRange(val.floatValue, minNumber, maxNumber);\n }\n\n if (val.value === '' \|\| val.value === '-') {\n return true;\n }\n\n const parsed = parseBigIntFromString(val.value);\n\n if (parsed === null) {\n return true;\n }\n\n return (\n (minBigInt === undefined \|\| parsed >= minBigInt) &&\n (maxBigInt === undefined \|\| parsed <= maxBigInt)\n );\n }}\n />\n );\n }\n);\n\nNumberInput.classes = { ...InputBase.classes, ...classes };\nNumberInput.varsResolver = varsResolver;\nNumberInput.displayName = '@mantine/core/NumberInput';\n\nexport namespace NumberInput {\n export type Props<T extends NumberInputNumericType = number> = NumberInputProps<T>;\n export type StylesNames = NumberInputStylesNames;\n export type Factory = NumberInputFactory;\n export type CssVariables = NumberInputCssVariables;\n export type Handlers = NumberInputHandlers;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"NumberInput.mjs","names":["classes"],"sources":["../../../src/components/NumberInput/NumberInput.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport cx from 'clsx';\nimport { NumberFormatValues, NumericFormat, OnValueChange } from 'react-number-format';\nimport { assignRef, clamp, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n Factory,\n genericFactory,\n getSize,\n noop,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { UnstyledButton } from '../UnstyledButton';\nimport { NumberInputChevron } from './NumberInputChevron';\nimport classes from './NumberInput.module.css';\n\n// Re for negative -0, -0., -0.0, -0.00, -0.000 ... strings\n// And for positive 0., 0.0, 0.00, 0.000 ... strings\nconst leadingDecimalZeroPattern = /^(0\\.0\|-0(\\.0)?)$/;\n\n// Re for 01, 006, 00.02, -0010, -000.293 ... and negative counterparts\nconst leadingZerosPattern = /^-?0\\d+(\\.\\d+)?\\.?$/;\n\n// Re for decimal numbers with trailing zeros like 13.0, 13.00, 5.10 ... strings\nconst trailingZerosPattern = /\\.\\d0$/;\n\n// Re for numbers with trailing decimal separator like 10. or -3.\nconst trailingDecimalSeparatorPattern = /^-?\\d+\\.$/;\n\nexport interface NumberInputHandlers {\n increment: () => void;\n decrement: () => void;\n}\n\nexport type NumberInputMode = 'number' \| 'bigint';\nexport type NumberInputNumericType = number \| bigint;\nexport type NumberInputValue<T extends NumberInputNumericType = number> = T \| string;\ntype NumberInputNumericValue<T extends NumberInputNumericType = number> = T;\ntype InternalNumberInputValue = string \| number \| bigint;\n\nfunction isNumberString(value: unknown) {\n return typeof value === 'string' && value !== '' && !Number.isNaN(Number(value));\n}\n\nfunction isBigIntValue(value: unknown): value is bigint {\n return typeof value === 'bigint';\n}\n\nfunction canStep(value: number \| string) {\n if (typeof value === 'number') {\n return value < Number.MAX_SAFE_INTEGER;\n }\n\n return value === '' \|\| (isNumberString(value) && Number(value) < Number.MAX_SAFE_INTEGER);\n}\n\nfunction isValidBigIntString(value: string, allowNegative: boolean) {\n if (value === '') {\n return false;\n }\n\n if (value === '-') {\n return false;\n }\n\n if (!allowNegative && value.startsWith('-')) {\n return false;\n }\n\n return /^-?\\d+$/.test(value);\n}\n\nfunction canStepBigInt(value: bigint \| string, allowNegative: boolean) {\n if (typeof value === 'bigint') {\n return true;\n }\n\n return value === '' \|\| isValidBigIntString(value, allowNegative);\n}\n\nfunction parseBigIntFromString(value: string): bigint \| null {\n if (!/^-?\\d+$/.test(value)) {\n return null;\n }\n\n try {\n return BigInt(value);\n } catch {\n return null;\n }\n}\n\nfunction toBigIntOrUndefined(value: unknown): bigint \| undefined {\n if (typeof value === 'bigint') {\n return value;\n }\n\n if (typeof value === 'number' && Number.isFinite(value) && Number.isInteger(value)) {\n return BigInt(value);\n }\n\n return undefined;\n}\n\nfunction clampBigInt(value: bigint, min?: bigint, max?: bigint) {\n if (min !== undefined && value < min) {\n return min;\n }\n\n if (max !== undefined && value > max) {\n return max;\n }\n\n return value;\n}\n\nfunction getTotalDigits(inputValue: string \| number): number {\n // All digits must be counted, parseFloat precision depends\n // on the number of digits in the input, not only on the decimal scale\n return inputValue.toString().replace('.', '').length;\n}\n\nfunction isValidNumber(floatValue: number \| undefined, value: string): floatValue is number {\n return (\n (typeof floatValue === 'number'\n ? floatValue < Number.MAX_SAFE_INTEGER\n : !Number.isNaN(Number(floatValue))) &&\n !Number.isNaN(floatValue) &&\n getTotalDigits(value) < 14 &&\n value !== ''\n );\n}\n\nfunction isInRange(value: number \| undefined, min: number \| undefined, max: number \| undefined) {\n if (value === undefined) {\n return true;\n }\n\n const minValid = min === undefined \|\| value >= min;\n const maxValid = max === undefined \|\| value <= max;\n\n return minValid && maxValid;\n}\n\nexport type NumberInputStylesNames = 'controls' \| 'control' \| __InputStylesNames;\nexport type NumberInputCssVariables = {\n controls: '--ni-chevron-size';\n};\n\nexport interface NumberInputProps<T extends NumberInputNumericType = number>\n extends\n BoxProps,\n Omit<__BaseInputProps, 'pointer'>,\n StylesApiProps<NumberInputFactory>,\n ElementProps<\n 'input',\n 'size' \| 'type' \| 'onChange' \| 'value' \| 'defaultValue' \| 'min' \| 'max' \| 'step'\n > {\n /* Controlled component value /\n value?: NumberInputValue<T>;\n\n /* Uncontrolled component default value /\n defaultValue?: NumberInputValue<T>;\n\n /* Called when value changes /\n onChange?: (value: NumberInputValue<T>) => void;\n\n /* Called when value changes with `react-number-format` payload /\n onValueChange?: OnValueChange;\n\n /* Determines whether leading zeros are allowed during input. If `false`, leading zeros are removed as you type (e.g., typing `007` results in `7`). Works in conjunction with `trimLeadingZeroesOnBlur`. @default true /\n allowLeadingZeros?: boolean;\n\n /* Determines whether negative numbers are allowed. If `false`, the input will not accept negative values, and the decrement button will stop at `0` (when `min` is not set). @default true /\n allowNegative?: boolean;\n\n /* Characters which when pressed result in a decimal separator. These characters will be replaced by the `decimalSeparator` in the input value. @default ['.', ','] /\n allowedDecimalSeparators?: string[];\n\n /* Limits the number of digits that can be entered after the decimal point @default Infinity /\n decimalScale?: number;\n\n /* Character used as a decimal separator. Generally used with `allowedDecimalSeparators` prop. @default '.' /\n decimalSeparator?: string;\n\n /* If `true`, automatically pads the decimal part with zeros to match `decimalScale` (e.g., with `decimalScale={2}`, typing `5.1` displays as `5.10`). Requires `decimalScale` to be set. @default false /\n fixedDecimalScale?: boolean;\n\n /* Prefix added before the input value /\n prefix?: string;\n\n /* Suffix added after the input value /\n suffix?: string;\n\n /* Defines the thousand grouping style. 'thousand' (1,000), 'lakh' (1,00,000), 'wan' (1,0000), 'none'. /\n thousandsGroupStyle?: 'thousand' \| 'lakh' \| 'wan' \| 'none';\n\n /* A function to validate the input value. If this function returns `false`, the `onChange` will not be called and the input value will not change. /\n isAllowed?: (values: NumberFormatValues) => boolean;\n\n /* Advanced: Set to `true` if you're passing numeric strings (e.g., `\"12345\"`) and using formatting props like `prefix` or `suffix`. In most cases, you don't need this prop. See [react-number-format docs](https://www.npmjs.com/package/react-number-format) for details. @default false /\n valueIsNumericString?: boolean;\n\n /* Controls input `type` attribute @default 'text' /\n type?: 'text' \| 'tel' \| 'password';\n\n /* A character used to separate thousands /\n thousandSeparator?: string \| boolean;\n\n /* Minimum possible value /\n min?: NumberInputNumericValue<T>;\n\n /* Maximum possible value /\n max?: NumberInputNumericValue<T>;\n\n /* Number by which value will be incremented/decremented with up/down controls and keyboard arrows @default 1 /\n step?: NumberInputNumericValue<T>;\n\n /* If set, the up/down controls are hidden @default false /\n hideControls?: boolean;\n\n /* Controls how values are clamped to the `min`/`max` range:\n * - `'blur'` (default): User can type any value, but it's clamped when the input loses focus\n * - `'strict'`: User cannot type values outside the range\n * - `'none'`: No clamping; `min`/`max` only apply to increment/decrement controls and arrow keys\n /\n clampBehavior?: 'strict' \| 'blur' \| 'none';\n\n /* If set, decimal values are allowed @default true /\n allowDecimal?: boolean;\n\n /* Increment/decrement handlers /\n handlersRef?: React.Ref<NumberInputHandlers \| undefined>;\n\n /* Value used when incrementing/decrementing an empty input. If `min` is set and `startValue < min`, `min` is used instead. @default 0 /\n startValue?: NumberInputNumericValue<T>;\n\n /* Interval in milliseconds between value steps when increment/decrement button is held down. Can be a number or a function `(stepCount) => number` for dynamic intervals. Requires `stepHoldDelay` to be set. @default undefined /\n stepHoldInterval?: number \| ((stepCount: number) => number);\n\n /* Initial delay in milliseconds before stepping the value. /\n stepHoldDelay?: number;\n\n /* If set, up/down keyboard events increment/decrement value @default true /\n withKeyboardEvents?: boolean;\n\n /* If set, leading zeros are removed on blur. For example, `00100` -> `100` @default true /\n trimLeadingZeroesOnBlur?: boolean;\n\n /* If set, all text is selected when the input receives focus @default false /\n selectAllOnFocus?: boolean;\n\n /* Called when the increment button or arrow up key is pressed and the value has reached the maximum /\n onMinReached?: () => void;\n\n /* Called when the decrement button or arrow down key is pressed and the value has reached the minimum /\n onMaxReached?: () => void;\n}\n\nexport type NumberInputFactory = Factory<{\n props: NumberInputProps;\n ref: HTMLInputElement;\n stylesNames: NumberInputStylesNames;\n vars: NumberInputCssVariables;\n variant: InputVariant;\n signature: <T extends NumberInputNumericType = number>(\n props: NumberInputProps<T>\n ) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n size: 'sm',\n step: 1,\n clampBehavior: 'blur',\n allowDecimal: true,\n allowNegative: true,\n withKeyboardEvents: true,\n allowLeadingZeros: true,\n trimLeadingZeroesOnBlur: true,\n startValue: 0,\n allowedDecimalSeparators: ['.', ','],\n} satisfies Partial<NumberInputProps<number \| bigint>>;\n\nconst varsResolver = createVarsResolver<NumberInputFactory>((_, { size }) => ({\n controls: {\n '--ni-chevron-size': getSize(size, 'ni-chevron-size'),\n },\n}));\n\nfunction clampAndSanitizeInput(sanitizedValue: string \| number, max?: number, min?: number) {\n const stringValue = sanitizedValue.toString();\n const hasTrailingDecimalSeparator = trailingDecimalSeparatorPattern.test(stringValue);\n\n const replaced = stringValue.replace(/^0+(?=\\d)/, '');\n const parsedValue = parseFloat(replaced);\n\n if (Number.isNaN(parsedValue)) {\n return replaced;\n }\n\n if (parsedValue > Number.MAX_SAFE_INTEGER) {\n return max !== undefined ? max : replaced;\n }\n\n const clamped = clamp(parsedValue, min, max);\n\n if (hasTrailingDecimalSeparator) {\n const clampedString = clamped.toString().replace(/^0+(?=\\d)/, '');\n return `${clampedString}.`;\n }\n\n return clamped;\n}\n\nfunction clampAndSanitizeBigIntInput(\n sanitizedValue: string,\n options: { min?: bigint; max?: bigint; clampBehavior: NumberInputProps['clampBehavior'] }\n) {\n if (sanitizedValue === '' \|\| sanitizedValue === '-') {\n return sanitizedValue;\n }\n\n const parsed = parseBigIntFromString(sanitizedValue);\n\n if (parsed === null) {\n return sanitizedValue;\n }\n\n return options.clampBehavior === 'blur' ? clampBigInt(parsed, options.min, options.max) : parsed;\n}\n\nexport const NumberInput = genericFactory<NumberInputFactory>(\n <T extends NumberInputNumericType = number>(_props: NumberInputProps<T>) => {\n const props = useProps(\n ['Input', 'InputWrapper', 'NumberInput'],\n defaultProps as Partial<NumberInputProps>,\n _props as unknown as NumberInputProps\n );\n const {\n className,\n classNames,\n styles,\n unstyled,\n vars,\n onChange,\n onValueChange,\n value,\n defaultValue,\n max,\n min,\n step,\n hideControls,\n rightSection,\n isAllowed,\n clampBehavior,\n onBlur,\n allowDecimal,\n decimalScale,\n onKeyDown,\n onKeyDownCapture,\n handlersRef,\n startValue,\n disabled,\n rightSectionPointerEvents,\n allowNegative,\n readOnly,\n size,\n rightSectionWidth,\n stepHoldInterval,\n stepHoldDelay,\n allowLeadingZeros,\n withKeyboardEvents,\n trimLeadingZeroesOnBlur,\n allowedDecimalSeparators,\n selectAllOnFocus,\n onMinReached,\n onMaxReached,\n onFocus,\n attributes,\n ref,\n ...others\n } = props;\n const allowNegativeResolved = allowNegative ?? true;\n const allowLeadingZerosResolved = allowLeadingZeros ?? true;\n\n const getStyles = useStyles<NumberInputFactory>({\n name: 'NumberInput',\n classes,\n props: props as NumberInputProps,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<NumberInputFactory>({\n classNames,\n styles,\n props: props as NumberInputProps,\n });\n\n const valueModeRef = useRef<NumberInputMode>(\n isBigIntValue(value) \|\| isBigIntValue(defaultValue) ? 'bigint' : 'number'\n );\n\n if (isBigIntValue(value)) {\n valueModeRef.current = 'bigint';\n } else if (typeof value === 'number') {\n valueModeRef.current = 'number';\n }\n\n const isBigIntMode = valueModeRef.current === 'bigint';\n\n const [_value, setValue] = useUncontrolled<InternalNumberInputValue>({\n value: value as InternalNumberInputValue \| undefined,\n defaultValue: defaultValue as InternalNumberInputValue \| undefined,\n finalValue: '',\n onChange: onChange as ((value: InternalNumberInputValue) => void) \| undefined,\n });\n\n const shouldUseStepInterval = stepHoldDelay !== undefined && stepHoldInterval !== undefined;\n const inputRef = useRef<HTMLInputElement>(null);\n const onStepTimeoutRef = useRef<number \| null>(null);\n const stepCountRef = useRef<number>(0);\n\n const minNumber = typeof min === 'number' ? min : undefined;\n const maxNumber = typeof max === 'number' ? max : undefined;\n const stepNumber = typeof step === 'number' ? step : defaultProps.step;\n const startValueNumber = typeof startValue === 'number' ? startValue : defaultProps.startValue;\n\n const minBigInt = toBigIntOrUndefined(min);\n const maxBigInt = toBigIntOrUndefined(max);\n const stepBigInt = toBigIntOrUndefined(step) ?? BigInt(1);\n const startValueBigInt = toBigIntOrUndefined(startValue) ?? BigInt(0);\n\n const parseBigIntOrString = (inputValue: string): bigint \| string => {\n if (\n !isValidBigIntString(inputValue, allowNegativeResolved) \|\|\n (allowLeadingZerosResolved && leadingZerosPattern.test(inputValue))\n ) {\n return inputValue;\n }\n\n const parsed = parseBigIntFromString(inputValue);\n return parsed ?? inputValue;\n };\n\n const getBigIntFloatValue = (inputValue: bigint) => {\n const numericValue = Number(inputValue);\n return Number.isSafeInteger(numericValue) ? numericValue : undefined;\n };\n\n const handleValueChange: OnValueChange = (payload, event) => {\n if (event.source === 'event') {\n if (isBigIntMode) {\n setValue(parseBigIntOrString(payload.value));\n } else {\n setValue(\n isValidNumber(payload.floatValue, payload.value) &&\n !leadingDecimalZeroPattern.test(payload.value) &&\n !(allowLeadingZerosResolved ? leadingZerosPattern.test(payload.value) : false) &&\n !trailingZerosPattern.test(payload.value) &&\n !trailingDecimalSeparatorPattern.test(payload.value)\n ? payload.floatValue\n : payload.value\n );\n }\n }\n onValueChange?.(payload, event);\n };\n\n const getDecimalPlaces = (inputValue: number \| string): number => {\n const match = String(inputValue).match(/(?:\\.(\\d+))?(?:[eE]([+-]?\\d+))?$/);\n if (!match) {\n return 0;\n }\n return Math.max(0, (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0));\n };\n\n const adjustCursor = (position?: number) => {\n if (inputRef.current && typeof position !== 'undefined') {\n inputRef.current.setSelectionRange(position, position);\n }\n };\n\n const incrementRef = useRef<() => void>(noop);\n incrementRef.current = () => {\n if (isBigIntMode) {\n if (!canStepBigInt(_value as bigint \| string, allowNegativeResolved)) {\n return;\n }\n\n let val: bigint;\n const currentValue = _value;\n\n if (typeof currentValue === 'bigint') {\n const incrementedValue = currentValue + stepBigInt;\n if (maxBigInt !== undefined && incrementedValue > maxBigInt) {\n onMaxReached?.();\n }\n val =\n maxBigInt !== undefined && incrementedValue > maxBigInt ? maxBigInt : incrementedValue;\n } else if (typeof currentValue === 'string' && currentValue !== '') {\n const parsed = parseBigIntFromString(currentValue);\n if (parsed === null) {\n return;\n }\n\n const incrementedValue = parsed + stepBigInt;\n if (maxBigInt !== undefined && incrementedValue > maxBigInt) {\n onMaxReached?.();\n }\n val =\n maxBigInt !== undefined && incrementedValue > maxBigInt ? maxBigInt : incrementedValue;\n } else {\n val = clampBigInt(startValueBigInt, minBigInt, maxBigInt);\n }\n\n const formattedValue = val.toString();\n setValue(val);\n onValueChange?.(\n { floatValue: getBigIntFloatValue(val), formattedValue, value: formattedValue },\n { source: 'increment' as any }\n );\n setTimeout(() => adjustCursor(inputRef.current?.value.length), 0);\n return;\n }\n\n if (!canStep(_value as number \| string)) {\n return;\n }\n\n let val: number;\n const currentValuePrecision = getDecimalPlaces(_value as number \| string);\n const stepPrecision = getDecimalPlaces(stepNumber);\n const maxPrecision = Math.max(currentValuePrecision, stepPrecision);\n const factor = 10 * maxPrecision;\n\n if (!isNumberString(_value) && (typeof _value !== 'number' \|\| Number.isNaN(_value))) {\n val = clamp(startValueNumber, minNumber, maxNumber);\n } else if (maxNumber !== undefined) {\n const incrementedValue =\n (Math.round(Number(_value) * factor) + Math.round(stepNumber * factor)) / factor;\n if (incrementedValue > maxNumber) {\n onMaxReached?.();\n }\n val = incrementedValue <= maxNumber ? incrementedValue : maxNumber;\n } else {\n val = (Math.round(Number(_value) * factor) + Math.round(stepNumber * factor)) / factor;\n }\n\n const formattedValue = val.toFixed(maxPrecision);\n setValue(parseFloat(formattedValue));\n onValueChange?.(\n { floatValue: parseFloat(formattedValue), formattedValue, value: formattedValue },\n { source: 'increment' as any }\n );\n setTimeout(() => adjustCursor(inputRef.current?.value.length), 0);\n };\n\n const decrementRef = useRef<() => void>(noop);\n decrementRef.current = () => {\n if (isBigIntMode) {\n if (!canStepBigInt(_value as bigint \| string, allowNegativeResolved)) {\n return;\n }\n\n let val: bigint;\n const minValue =\n minBigInt !== undefined ? minBigInt : !allowNegativeResolved ? BigInt(0) : undefined;\n const currentValue = _value;\n\n if (typeof currentValue === 'bigint') {\n const decrementedValue = currentValue - stepBigInt;\n if (minValue !== undefined && decrementedValue < minValue) {\n onMinReached?.();\n }\n val = minValue !== undefined && decrementedValue < minValue ? minValue : decrementedValue;\n } else if (typeof currentValue === 'string' && currentValue !== '') {\n const parsed = parseBigIntFromString(currentValue);\n if (parsed === null) {\n return;\n }\n\n const decrementedValue = parsed - stepBigInt;\n if (minValue !== undefined && decrementedValue < minValue) {\n onMinReached?.();\n }\n val = minValue !== undefined && decrementedValue < minValue ? minValue : decrementedValue;\n } else {\n val = clampBigInt(startValueBigInt, minValue, maxBigInt);\n }\n\n const formattedValue = val.toString();\n setValue(val);\n onValueChange?.(\n { floatValue: getBigIntFloatValue(val), formattedValue, value: formattedValue },\n { source: 'decrement' as any }\n );\n setTimeout(() => adjustCursor(inputRef.current?.value.length), 0);\n return;\n }\n\n if (!canStep(_value as number \| string)) {\n return;\n }\n\n let val: number;\n const minValue =\n minNumber !== undefined ? minNumber : !allowNegativeResolved ? 0 : Number.MIN_SAFE_INTEGER;\n const currentValuePrecision = getDecimalPlaces(_value as number \| string);\n const stepPrecision = getDecimalPlaces(stepNumber);\n const maxPrecision = Math.max(currentValuePrecision, stepPrecision);\n const factor = 10 ** maxPrecision;\n\n if ((!isNumberString(_value) && typeof _value !== 'number') \|\| Number.isNaN(_value)) {\n val = clamp(startValueNumber, minValue, maxNumber);\n } else {\n const decrementedValue =\n (Math.round(Number(_value) * factor) - Math.round(stepNumber * factor)) / factor;\n if (minValue !== undefined && decrementedValue < minValue) {\n onMinReached?.();\n }\n val = minValue !== undefined && decrementedValue < minValue ? minValue : decrementedValue;\n }\n\n const formattedValue = val.toFixed(maxPrecision);\n setValue(parseFloat(formattedValue));\n onValueChange?.(\n { floatValue: parseFloat(formattedValue), formattedValue, value: formattedValue },\n { source: 'decrement' as any }\n );\n setTimeout(() => adjustCursor(inputRef.current?.value.length), 0);\n };\n\n const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n const pastedText = event.clipboardData.getData('text');\n const _decimalSeparator = others.decimalSeparator \|\| '.';\n const separatorsToReplace = (allowedDecimalSeparators \|\| ['.', ',']).filter(\n (s) => s !== _decimalSeparator\n );\n\n if (separatorsToReplace.some((s) => pastedText.includes(s))) {\n event.preventDefault();\n let modifiedText = pastedText;\n separatorsToReplace.forEach((s) => {\n modifiedText = modifiedText.split(s).join(_decimalSeparator);\n });\n\n const input = inputRef.current;\n if (input) {\n const start = input.selectionStart ?? 0;\n const end = input.selectionEnd ?? 0;\n const currentValue = input.value;\n const newValue =\n currentValue.substring(0, start) + modifiedText + currentValue.substring(end);\n\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value'\n )?.set;\n nativeInputValueSetter?.call(input, newValue);\n input.dispatchEvent(new Event('change', { bubbles: true }));\n\n const cursorPos = start + modifiedText.length;\n setTimeout(() => adjustCursor(cursorPos), 0);\n }\n }\n\n others.onPaste?.(event as any);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n\n if (readOnly \|\| !withKeyboardEvents) {\n return;\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n incrementRef.current?.();\n }\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n decrementRef.current?.();\n }\n };\n\n const handleKeyDownCapture = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDownCapture?.(event);\n if (event.key === 'Backspace') {\n const input = inputRef.current;\n if (input && input.selectionStart === 0 && input.selectionStart === input.selectionEnd) {\n event.preventDefault();\n window.setTimeout(() => adjustCursor(0), 0);\n }\n }\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (selectAllOnFocus) {\n setTimeout(() => event.currentTarget.select(), 0);\n }\n onFocus?.(event);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n let sanitizedValue = _value;\n\n if (isBigIntMode) {\n if (clampBehavior === 'blur' && typeof sanitizedValue === 'bigint') {\n sanitizedValue = clampBigInt(sanitizedValue, minBigInt, maxBigInt);\n }\n\n if (trimLeadingZeroesOnBlur && typeof sanitizedValue === 'string') {\n sanitizedValue = clampAndSanitizeBigIntInput(sanitizedValue, {\n min: minBigInt,\n max: maxBigInt,\n clampBehavior,\n });\n }\n } else {\n if (clampBehavior === 'blur' && typeof sanitizedValue === 'number') {\n sanitizedValue = clamp(sanitizedValue, minNumber, maxNumber);\n }\n\n if (\n trimLeadingZeroesOnBlur &&\n typeof sanitizedValue === 'string' &&\n getDecimalPlaces(sanitizedValue) < 15\n ) {\n sanitizedValue = clampAndSanitizeInput(sanitizedValue, maxNumber, minNumber);\n }\n }\n\n if (_value !== sanitizedValue) {\n setValue(sanitizedValue);\n }\n\n onBlur?.(event);\n };\n\n assignRef(handlersRef, { increment: incrementRef.current, decrement: decrementRef.current });\n\n const onStepHandleChange = (isIncrement: boolean) => {\n if (isIncrement) {\n incrementRef.current?.();\n } else {\n decrementRef.current?.();\n }\n stepCountRef.current += 1;\n };\n\n const onStepLoop = (isIncrement: boolean) => {\n onStepHandleChange(isIncrement);\n\n if (shouldUseStepInterval) {\n const interval =\n typeof stepHoldInterval === 'number'\n ? stepHoldInterval\n : stepHoldInterval(stepCountRef.current);\n onStepTimeoutRef.current = window.setTimeout(() => onStepLoop(isIncrement), interval);\n }\n };\n\n const onStep = (\n event: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>,\n isIncrement: boolean\n ) => {\n event.preventDefault();\n inputRef.current?.focus();\n onStepHandleChange(isIncrement);\n if (shouldUseStepInterval) {\n onStepTimeoutRef.current = window.setTimeout(() => onStepLoop(isIncrement), stepHoldDelay);\n }\n };\n\n const onStepDone = () => {\n if (onStepTimeoutRef.current) {\n window.clearTimeout(onStepTimeoutRef.current);\n }\n onStepTimeoutRef.current = null;\n stepCountRef.current = 0;\n };\n\n const controls = (\n <div {...getStyles('controls')}>\n <UnstyledButton\n {...getStyles('control')}\n tabIndex={-1}\n aria-hidden\n disabled={\n disabled \|\|\n (typeof _value === 'number' && maxNumber !== undefined && _value >= maxNumber) \|\|\n (typeof _value === 'bigint' && maxBigInt !== undefined && _value >= maxBigInt)\n }\n mod={{ direction: 'up' }}\n onMouseDown={(event) => event.preventDefault()}\n onPointerDown={(event) => {\n onStep(event, true);\n }}\n onPointerUp={onStepDone}\n onPointerLeave={onStepDone}\n >\n <NumberInputChevron direction=\"up\" />\n </UnstyledButton>\n <UnstyledButton\n {...getStyles('control')}\n tabIndex={-1}\n aria-hidden\n disabled={\n disabled \|\|\n (typeof _value === 'number' && minNumber !== undefined && _value <= minNumber) \|\|\n (typeof _value === 'bigint' && minBigInt !== undefined && _value <= minBigInt)\n }\n mod={{ direction: 'down' }}\n onMouseDown={(event) => event.preventDefault()}\n onPointerDown={(event) => {\n onStep(event, false);\n }}\n onPointerUp={onStepDone}\n onPointerLeave={onStepDone}\n >\n <NumberInputChevron direction=\"down\" />\n </UnstyledButton>\n </div>\n );\n\n return (\n <InputBase\n component={NumericFormat}\n allowNegative={allowNegative}\n className={cx(classes.root, className)}\n size={size}\n {...others}\n inputMode={isBigIntMode ? 'numeric' : 'decimal'}\n readOnly={readOnly}\n disabled={disabled}\n value={typeof _value === 'bigint' ? _value.toString() : _value}\n getInputRef={useMergedRef(ref, inputRef)}\n onValueChange={handleValueChange}\n rightSection={\n hideControls \|\|\n readOnly \|\|\n !(isBigIntMode\n ? canStepBigInt(_value as bigint \| string, allowNegativeResolved)\n : canStep(_value as number \| string))\n ? rightSection\n : rightSection \|\| controls\n }\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n __staticSelector=\"NumberInput\"\n decimalScale={isBigIntMode ? 0 : allowDecimal ? decimalScale : 0}\n onPaste={handlePaste}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onKeyDownCapture={handleKeyDownCapture}\n rightSectionPointerEvents={rightSectionPointerEvents ?? (disabled ? 'none' : undefined)}\n rightSectionWidth={rightSectionWidth ?? `var(--ni-right-section-width-${size \|\| 'sm'})`}\n allowLeadingZeros={allowLeadingZeros}\n allowedDecimalSeparators={allowedDecimalSeparators}\n onBlur={handleBlur}\n attributes={attributes}\n isAllowed={(val) => {\n const userAllowed = isAllowed ? isAllowed(val) : true;\n if (!userAllowed) {\n return false;\n }\n\n if (clampBehavior !== 'strict') {\n return true;\n }\n\n if (!isBigIntMode) {\n return isInRange(val.floatValue, minNumber, maxNumber);\n }\n\n if (val.value === '' \|\| val.value === '-') {\n return true;\n }\n\n const parsed = parseBigIntFromString(val.value);\n\n if (parsed === null) {\n return true;\n }\n\n return (\n (minBigInt === undefined \|\| parsed >= minBigInt) &&\n (maxBigInt === undefined \|\| parsed <= maxBigInt)\n );\n }}\n />\n );\n }\n);\n\nNumberInput.classes = { ...InputBase.classes, ...classes };\nNumberInput.varsResolver = varsResolver;\nNumberInput.displayName = '@mantine/core/NumberInput';\n\nexport namespace NumberInput {\n export type Props<T extends NumberInputNumericType = number> = NumberInputProps<T>;\n export type StylesNames = NumberInputStylesNames;\n export type Factory = NumberInputFactory;\n export type CssVariables = NumberInputCssVariables;\n export type Handlers = NumberInputHandlers;\n}\n"],"mappings":"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"}

package/esm/components/PasswordInput/PasswordInput.mjs CHANGED Viewed

@@ -24,7 +24,11 @@ const varsResolver = createVarsResolver((_, { size }) => ({ root: {
 	"--psi-button-size": getSize(size, "psi-button-size")
 } }));
 const PasswordInput = factory((_props) => {
-	const props = useProps("PasswordInput", defaultProps, _props);
+	const props = useProps([
+		"Input",
+		"InputWrapper",
+		"PasswordInput"
+	], defaultProps, _props);
 	const { classNames, className, style, styles, unstyled, vars, required, error, leftSection, disabled, id, variant, inputContainer, description, label, size, errorProps, descriptionProps, labelProps, withAsterisk, inputWrapperOrder, wrapperProps, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, leftSectionWidth, visible, defaultVisible, onVisibilityChange, visibilityToggleIcon: VisibilityToggleIcon, visibilityToggleButtonProps, rightSectionProps, leftSectionProps, leftSectionPointerEvents, withErrorStyles, mod, attributes, ...others } = props;
 	const uuid = useId(id);
 	const [_visible, setVisibility] = useUncontrolled({
@@ -127,7 +131,7 @@ const PasswordInput = factory((_props) => {
 			size,
 			classNames: {
 				...resolvedClassNames,
-				input: cx(PasswordInput_module_default.input, resolvedClassNames.input)
+				input: cx(PasswordInput_module_default.input, resolvedClassNames?.input)
 			},
 			styles: resolvedStyles,
 			radius,

package/esm/components/PasswordInput/PasswordInput.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordInput.mjs","names":["classes"],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n getSize,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { PasswordToggleIcon } from './PasswordToggleIcon';\nimport classes from './PasswordInput.module.css';\n\nexport type PasswordInputStylesNames =\n \| 'root'\n \| 'visibilityToggle'\n \| 'innerInput'\n \| __InputStylesNames;\nexport type PasswordInputCssVariables = {\n root: '--psi-icon-size' \| '--psi-button-size';\n};\n\nexport interface PasswordInputProps\n extends\n BoxProps,\n Omit<__BaseInputProps, 'pointer'>,\n StylesApiProps<PasswordInputFactory>,\n ElementProps<'input', 'size'> {\n /** A component to replace the visibility toggle icon /\n visibilityToggleIcon?: React.FC<{ reveal: boolean }>;\n\n /* Props passed down to the visibility toggle button /\n visibilityToggleButtonProps?: Record<string, any>;\n\n /* If set, the input value is visible /\n visible?: boolean;\n\n /* If set, the input value is visible by default /\n defaultVisible?: boolean;\n\n /* Called when visibility changes */\n onVisibilityChange?: (visible: boolean) => void;\n}\n\nexport type PasswordInputFactory = Factory<{\n props: PasswordInputProps;\n ref: HTMLInputElement;\n stylesNames: PasswordInputStylesNames;\n vars: PasswordInputCssVariables;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n visibilityToggleIcon: PasswordToggleIcon,\n size: 'sm',\n} satisfies Partial<PasswordInputProps>;\n\nconst varsResolver = createVarsResolver<PasswordInputFactory>((_, { size }) => ({\n root: {\n '--psi-icon-size': getSize(size, 'psi-icon-size'),\n '--psi-button-size': getSize(size, 'psi-button-size'),\n },\n}));\n\nexport const PasswordInput = factory<PasswordInputFactory>((_props) => {\n const props = useProps('PasswordInput', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n required,\n error,\n leftSection,\n disabled,\n id,\n variant,\n inputContainer,\n description,\n label,\n size,\n errorProps,\n descriptionProps,\n labelProps,\n withAsterisk,\n inputWrapperOrder,\n wrapperProps,\n radius,\n rightSection,\n rightSectionWidth,\n rightSectionPointerEvents,\n leftSectionWidth,\n visible,\n defaultVisible,\n onVisibilityChange,\n visibilityToggleIcon: VisibilityToggleIcon,\n visibilityToggleButtonProps,\n rightSectionProps,\n leftSectionProps,\n leftSectionPointerEvents,\n withErrorStyles,\n mod,\n attributes,\n ...others\n } = props;\n\n const uuid = useId(id);\n\n const [_visible, setVisibility] = useUncontrolled({\n value: visible,\n defaultValue: defaultVisible,\n finalValue: false,\n onChange: onVisibilityChange,\n });\n\n const toggleVisibility = () => setVisibility(!_visible);\n\n const getStyles = useStyles<PasswordInputFactory>({\n name: 'PasswordInput',\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<PasswordInputFactory>({\n classNames,\n styles,\n props,\n });\n\n const { styleProps, rest } = extractStyleProps(others);\n const errorId = errorProps?.id \|\| `${uuid}-error`;\n const descriptionId = descriptionProps?.id \|\| `${uuid}-description`;\n const hasError = !!error && typeof error !== 'boolean';\n const hasDescription = !!description;\n const _describedBy = `${hasError ? errorId : ''} ${hasDescription ? descriptionId : ''}`;\n const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n\n const visibilityToggleButton = (\n <ActionIcon<'button'>\n {...getStyles('visibilityToggle')}\n disabled={disabled}\n radius={radius}\n aria-pressed={_visible}\n tabIndex={-1}\n aria-label=\"Toggle password visibility\"\n {...visibilityToggleButtonProps}\n variant={visibilityToggleButtonProps?.variant ?? 'subtle'}\n color=\"gray\"\n unstyled={unstyled}\n onTouchEnd={(event) => {\n event.preventDefault();\n visibilityToggleButtonProps?.onTouchEnd?.(event);\n toggleVisibility();\n }}\n onMouseDown={(event) => {\n event.preventDefault();\n visibilityToggleButtonProps?.onMouseDown?.(event);\n toggleVisibility();\n }}\n onKeyDown={(event) => {\n visibilityToggleButtonProps?.onKeyDown?.(event);\n if (event.key === ' ') {\n event.preventDefault();\n toggleVisibility();\n }\n }}\n >\n <VisibilityToggleIcon reveal={_visible} />\n </ActionIcon>\n );\n\n return (\n <Input.Wrapper\n required={required}\n id={uuid}\n label={label}\n error={error}\n description={description}\n size={size}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n __staticSelector=\"PasswordInput\"\n __stylesApiProps={props}\n unstyled={unstyled}\n withAsterisk={withAsterisk}\n inputWrapperOrder={inputWrapperOrder}\n inputContainer={inputContainer}\n variant={variant}\n labelProps={{ ...labelProps, htmlFor: uuid }}\n descriptionProps={{ ...descriptionProps, id: descriptionId }}\n errorProps={{ ...errorProps, id: errorId }}\n mod={mod}\n attributes={attributes}\n {...getStyles('root')}\n {...styleProps}\n {...wrapperProps}\n >\n <Input\n component=\"div\"\n error={error}\n leftSection={leftSection}\n size={size}\n classNames={{ ...resolvedClassNames, input: cx(classes.input, resolvedClassNames.input) }}\n styles={resolvedStyles}\n radius={radius}\n disabled={disabled}\n __staticSelector=\"PasswordInput\"\n __stylesApiProps={props}\n rightSectionWidth={rightSectionWidth}\n rightSection={rightSection ?? visibilityToggleButton}\n variant={variant}\n unstyled={unstyled}\n leftSectionWidth={leftSectionWidth}\n rightSectionPointerEvents={rightSectionPointerEvents \|\| 'all'}\n rightSectionProps={rightSectionProps}\n leftSectionProps={leftSectionProps}\n leftSectionPointerEvents={leftSectionPointerEvents}\n withAria={false}\n withErrorStyles={withErrorStyles}\n attributes={attributes}\n >\n <input\n required={required}\n data-invalid={!!error \|\| undefined}\n data-with-left-section={!!leftSection \|\| undefined}\n {...getStyles('innerInput')}\n disabled={disabled}\n id={uuid}\n {...rest}\n aria-describedby={describedBy}\n autoComplete={rest.autoComplete \|\| 'off'}\n type={_visible ? 'text' : 'password'}\n />\n </Input>\n </Input.Wrapper>\n );\n});\n\nPasswordInput.classes = { ...InputBase.classes, ...classes };\nPasswordInput.varsResolver = varsResolver;\nPasswordInput.displayName = '@mantine/core/PasswordInput';\n\nexport namespace PasswordInput {\n export type Props = PasswordInputProps;\n export type StylesNames = PasswordInputStylesNames;\n export type CssVariables = PasswordInputCssVariables;\n export type Factory = PasswordInputFactory;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"PasswordInput.mjs","names":["classes"],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n getSize,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { PasswordToggleIcon } from './PasswordToggleIcon';\nimport classes from './PasswordInput.module.css';\n\nexport type PasswordInputStylesNames =\n \| 'root'\n \| 'visibilityToggle'\n \| 'innerInput'\n \| __InputStylesNames;\nexport type PasswordInputCssVariables = {\n root: '--psi-icon-size' \| '--psi-button-size';\n};\n\nexport interface PasswordInputProps\n extends\n BoxProps,\n Omit<__BaseInputProps, 'pointer'>,\n StylesApiProps<PasswordInputFactory>,\n ElementProps<'input', 'size'> {\n /** A component to replace the visibility toggle icon /\n visibilityToggleIcon?: React.FC<{ reveal: boolean }>;\n\n /* Props passed down to the visibility toggle button /\n visibilityToggleButtonProps?: Record<string, any>;\n\n /* If set, the input value is visible /\n visible?: boolean;\n\n /* If set, the input value is visible by default /\n defaultVisible?: boolean;\n\n /* Called when visibility changes */\n onVisibilityChange?: (visible: boolean) => void;\n}\n\nexport type PasswordInputFactory = Factory<{\n props: PasswordInputProps;\n ref: HTMLInputElement;\n stylesNames: PasswordInputStylesNames;\n vars: PasswordInputCssVariables;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n visibilityToggleIcon: PasswordToggleIcon,\n size: 'sm',\n} satisfies Partial<PasswordInputProps>;\n\nconst varsResolver = createVarsResolver<PasswordInputFactory>((_, { size }) => ({\n root: {\n '--psi-icon-size': getSize(size, 'psi-icon-size'),\n '--psi-button-size': getSize(size, 'psi-button-size'),\n },\n}));\n\nexport const PasswordInput = factory<PasswordInputFactory>((_props) => {\n const props = useProps(['Input', 'InputWrapper', 'PasswordInput'], defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n required,\n error,\n leftSection,\n disabled,\n id,\n variant,\n inputContainer,\n description,\n label,\n size,\n errorProps,\n descriptionProps,\n labelProps,\n withAsterisk,\n inputWrapperOrder,\n wrapperProps,\n radius,\n rightSection,\n rightSectionWidth,\n rightSectionPointerEvents,\n leftSectionWidth,\n visible,\n defaultVisible,\n onVisibilityChange,\n visibilityToggleIcon: VisibilityToggleIcon,\n visibilityToggleButtonProps,\n rightSectionProps,\n leftSectionProps,\n leftSectionPointerEvents,\n withErrorStyles,\n mod,\n attributes,\n ...others\n } = props;\n\n const uuid = useId(id);\n\n const [_visible, setVisibility] = useUncontrolled({\n value: visible,\n defaultValue: defaultVisible,\n finalValue: false,\n onChange: onVisibilityChange,\n });\n\n const toggleVisibility = () => setVisibility(!_visible);\n\n const getStyles = useStyles<PasswordInputFactory>({\n name: 'PasswordInput',\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<PasswordInputFactory>({\n classNames,\n styles,\n props,\n });\n\n const { styleProps, rest } = extractStyleProps(others);\n const errorId = errorProps?.id \|\| `${uuid}-error`;\n const descriptionId = descriptionProps?.id \|\| `${uuid}-description`;\n const hasError = !!error && typeof error !== 'boolean';\n const hasDescription = !!description;\n const _describedBy = `${hasError ? errorId : ''} ${hasDescription ? descriptionId : ''}`;\n const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n\n const visibilityToggleButton = (\n <ActionIcon<'button'>\n {...getStyles('visibilityToggle')}\n disabled={disabled}\n radius={radius}\n aria-pressed={_visible}\n tabIndex={-1}\n aria-label=\"Toggle password visibility\"\n {...visibilityToggleButtonProps}\n variant={visibilityToggleButtonProps?.variant ?? 'subtle'}\n color=\"gray\"\n unstyled={unstyled}\n onTouchEnd={(event) => {\n event.preventDefault();\n visibilityToggleButtonProps?.onTouchEnd?.(event);\n toggleVisibility();\n }}\n onMouseDown={(event) => {\n event.preventDefault();\n visibilityToggleButtonProps?.onMouseDown?.(event);\n toggleVisibility();\n }}\n onKeyDown={(event) => {\n visibilityToggleButtonProps?.onKeyDown?.(event);\n if (event.key === ' ') {\n event.preventDefault();\n toggleVisibility();\n }\n }}\n >\n <VisibilityToggleIcon reveal={_visible} />\n </ActionIcon>\n );\n\n return (\n <Input.Wrapper\n required={required}\n id={uuid}\n label={label}\n error={error}\n description={description}\n size={size}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n __staticSelector=\"PasswordInput\"\n __stylesApiProps={props}\n unstyled={unstyled}\n withAsterisk={withAsterisk}\n inputWrapperOrder={inputWrapperOrder}\n inputContainer={inputContainer}\n variant={variant}\n labelProps={{ ...labelProps, htmlFor: uuid }}\n descriptionProps={{ ...descriptionProps, id: descriptionId }}\n errorProps={{ ...errorProps, id: errorId }}\n mod={mod}\n attributes={attributes}\n {...getStyles('root')}\n {...styleProps}\n {...wrapperProps}\n >\n <Input\n component=\"div\"\n error={error}\n leftSection={leftSection}\n size={size}\n classNames={{ ...resolvedClassNames, input: cx(classes.input, resolvedClassNames?.input) }}\n styles={resolvedStyles}\n radius={radius}\n disabled={disabled}\n __staticSelector=\"PasswordInput\"\n __stylesApiProps={props}\n rightSectionWidth={rightSectionWidth}\n rightSection={rightSection ?? visibilityToggleButton}\n variant={variant}\n unstyled={unstyled}\n leftSectionWidth={leftSectionWidth}\n rightSectionPointerEvents={rightSectionPointerEvents \|\| 'all'}\n rightSectionProps={rightSectionProps}\n leftSectionProps={leftSectionProps}\n leftSectionPointerEvents={leftSectionPointerEvents}\n withAria={false}\n withErrorStyles={withErrorStyles}\n attributes={attributes}\n >\n <input\n required={required}\n data-invalid={!!error \|\| undefined}\n data-with-left-section={!!leftSection \|\| undefined}\n {...getStyles('innerInput')}\n disabled={disabled}\n id={uuid}\n {...rest}\n aria-describedby={describedBy}\n autoComplete={rest.autoComplete \|\| 'off'}\n type={_visible ? 'text' : 'password'}\n />\n </Input>\n </Input.Wrapper>\n );\n});\n\nPasswordInput.classes = { ...InputBase.classes, ...classes };\nPasswordInput.varsResolver = varsResolver;\nPasswordInput.displayName = '@mantine/core/PasswordInput';\n\nexport namespace PasswordInput {\n export type Props = PasswordInputProps;\n export type StylesNames = PasswordInputStylesNames;\n export type CssVariables = PasswordInputCssVariables;\n export type Factory = PasswordInputFactory;\n}\n"],"mappings":"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"}

package/esm/components/Pill/Pill.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pill.module.mjs","names":[],"sources":["../../../src/components/Pill/Pill.module.css"],"sourcesContent":[".root {\n --pill-fz-xs: 10px;\n --pill-fz-sm: 12px;\n --pill-fz-md: 14px;\n --pill-fz-lg: 16px;\n --pill-fz-xl: 18px;\n\n --pill-height-xs: 18px;\n --pill-height-sm: 22px;\n --pill-height-md: 25px;\n --pill-height-lg: 28px;\n --pill-height-xl: 32px;\n\n --pill-fz: var(--pill-fz-sm);\n --pill-height: var(--pill-height-sm);\n\n font-size: var(--pill-fz);\n flex: 0;\n height: var(--pill-height);\n padding-inline: 0.8em;\n display: inline-flex;\n align-items: center;\n border-radius: var(--pill-radius, 1000rem);\n line-height: 1;\n white-space: nowrap;\n user-select: none;\n -webkit-user-select: none;\n max-width: 100%;\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-7);\n color: var(--mantine-color-dark-0);\n }\n\n @mixin where-light {\n color: var(--mantine-color-black);\n }\n\n &:where([data-with-remove]:not(:has(button:disabled))) {\n padding-inline-end: 0;\n }\n\n &:where([data-disabled], :has(button:disabled)) {\n cursor: not-allowed;\n }\n}\n\n.root--default {\n @mixin where-light {\n background-color: var(--mantine-color-gray-1);\n\n &:where([data-disabled], :has(button:disabled)) {\n background-color: var(--mantine-color-disabled);\n }\n }\n}\n\n.root--contrast {\n @mixin where-light {\n background-color: var(--mantine-color-white);\n\n &:where([data-disabled], :has(button:disabled)) {\n background-color: var(--mantine-color-disabled);\n }\n }\n}\n\n.label {\n cursor: inherit;\n overflow: hidden;\n text-overflow: ellipsis;\n display: flex;\n align-items: center;\n height: 100%;\n text-box-trim: trim-both;\n text-box-edge: cap alphabetic;\n}\n\n.remove {\n color: inherit;\n font-size: inherit;\n height: 100%;\n min-height: unset;\n min-width: 2em;\n width: unset;\n border-radius: 0;\n padding-inline-start: 0.1em;\n padding-inline-end: 0.3em;\n flex: 0;\n border-end-end-radius: var(--pill-radius, 50%);\n border-start-end-radius: var(--pill-radius, 50%);\n\n .root[data-disabled] > &,\n &:disabled {\n display: none;\n background-color: transparent;\n width: 0.8em;\n min-width: 0.8em;\n padding: 0;\n cursor: not-allowed;\n\n & > svg {\n display: none;\n }\n }\n\n & > svg {\n pointer-events: none;\n }\n}\n\n.group {\n --pg-gap-xs: 6px;\n --pg-gap-sm: 8px;\n --pg-gap-md: 10px;\n --pg-gap-lg: 12px;\n --pg-gap-xl: 12px;\n --pg-gap: var(--pg-gap-sm);\n\n display: flex;\n align-items: center;\n gap: var(--pg-gap);\n flex-wrap: wrap;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Pill.module.mjs","names":[],"sources":["../../../src/components/Pill/Pill.module.css"],"sourcesContent":[".root {\n --pill-fz-xs: 10px;\n --pill-fz-sm: 12px;\n --pill-fz-md: 14px;\n --pill-fz-lg: 16px;\n --pill-fz-xl: 18px;\n\n --pill-height-xs: 18px;\n --pill-height-sm: 22px;\n --pill-height-md: 25px;\n --pill-height-lg: 28px;\n --pill-height-xl: 32px;\n\n --pill-fz: var(--pill-fz-sm);\n --pill-height: var(--pill-height-sm);\n\n font-size: var(--pill-fz);\n flex: 0;\n height: var(--pill-height);\n padding-inline: 0.8em;\n display: inline-flex;\n align-items: center;\n border-radius: var(--pill-radius, 1000rem);\n line-height: 1;\n white-space: nowrap;\n user-select: none;\n -webkit-user-select: none;\n max-width: 100%;\n position: relative;\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-7);\n color: var(--mantine-color-dark-0);\n }\n\n @mixin where-light {\n color: var(--mantine-color-black);\n }\n\n &:where([data-with-remove]:not(:has(button:disabled))) {\n padding-inline-end: 0;\n }\n\n &:where([data-disabled], :has(button:disabled)) {\n cursor: not-allowed;\n }\n\n &:where([draggable='true']) {\n cursor: grab;\n }\n\n &:where([draggable='true']):focus-visible {\n outline: 2px solid var(--mantine-primary-color-filled);\n outline-offset: 2px;\n }\n\n &:where([data-dragging]) {\n opacity: 0.4;\n cursor: grabbing;\n }\n\n &:where([data-drag-over='before'])::before,\n &:where([data-drag-over='after'])::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n width: rem(2px);\n background-color: var(--mantine-primary-color-filled);\n pointer-events: none;\n z-index: 1;\n }\n\n &:where([data-drag-over='before'])::before {\n inset-inline-start: rem(-4px);\n }\n\n &:where([data-drag-over='after'])::after {\n inset-inline-end: rem(-4px);\n }\n}\n\n.root--default {\n @mixin where-light {\n background-color: var(--mantine-color-gray-1);\n\n &:where([data-disabled], :has(button:disabled)) {\n background-color: var(--mantine-color-disabled);\n }\n }\n}\n\n.root--contrast {\n @mixin where-light {\n background-color: var(--mantine-color-white);\n\n &:where([data-disabled], :has(button:disabled)) {\n background-color: var(--mantine-color-disabled);\n }\n }\n}\n\n.label {\n cursor: inherit;\n overflow: hidden;\n text-overflow: ellipsis;\n display: flex;\n align-items: center;\n height: 100%;\n text-box-trim: trim-both;\n text-box-edge: cap alphabetic;\n}\n\n.remove {\n color: inherit;\n font-size: inherit;\n height: 100%;\n min-height: unset;\n min-width: 2em;\n width: unset;\n border-radius: 0;\n padding-inline-start: 0.1em;\n padding-inline-end: 0.3em;\n flex: 0;\n border-end-end-radius: var(--pill-radius, 50%);\n border-start-end-radius: var(--pill-radius, 50%);\n\n .root[data-disabled] > &,\n &:disabled {\n display: none;\n background-color: transparent;\n width: 0.8em;\n min-width: 0.8em;\n padding: 0;\n cursor: not-allowed;\n\n & > svg {\n display: none;\n }\n }\n\n & > svg {\n pointer-events: none;\n }\n}\n\n.group {\n --pg-gap-xs: 6px;\n --pg-gap-sm: 8px;\n --pg-gap-md: 10px;\n --pg-gap-lg: 12px;\n --pg-gap-xl: 12px;\n --pg-gap: var(--pg-gap-sm);\n\n display: flex;\n align-items: center;\n gap: var(--pg-gap);\n flex-wrap: wrap;\n}\n"],"mappings":""}

package/esm/components/PillsInput/PillsInput.mjs CHANGED Viewed

@@ -9,7 +9,11 @@ import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/PillsInput/PillsInput.tsx
 const defaultProps = { size: "sm" };
 const PillsInput = factory((_props) => {
-	const { children, onMouseDown, onClick, size, disabled, __staticSelector, error, variant, ...others } = useProps("PillsInput", defaultProps, _props);
+	const { children, onMouseDown, onClick, size, disabled, __staticSelector, error, variant, ...others } = useProps([
+		"Input",
+		"InputWrapper",
+		"PillsInput"
+	], defaultProps, _props);
 	const fieldRef = useRef(null);
 	return /* @__PURE__ */ jsx(PillsInputContext, {
 		value: {

package/esm/components/PillsInput/PillsInput.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PillsInput.mjs","names":[],"sources":["../../../src/components/PillsInput/PillsInput.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { BoxProps, ElementProps, factory, Factory, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps, __InputStylesNames } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { PillsInputContext, type PillsInputContextValue } from './PillsInput.context';\nimport {\n PillsInputField,\n type PillsInputFieldProps,\n type PillsInputFieldFactory,\n type PillsInputFieldStylesNames,\n} from './PillsInputField/PillsInputField';\nexport interface PillsInputProps\n extends\n BoxProps,\n __BaseInputProps,\n StylesApiProps<PillsInputFactory>,\n ElementProps<'div', 'size'> {\n __stylesApiProps?: Record<string, any>;\n __staticSelector?: string;\n}\n\nexport type PillsInputFactory = Factory<{\n props: PillsInputProps;\n ref: HTMLDivElement;\n stylesNames: __InputStylesNames;\n staticComponents: {\n Field: typeof PillsInputField;\n };\n}>;\n\nconst defaultProps = {\n size: 'sm',\n} satisfies Partial<PillsInputProps>;\n\nexport const PillsInput = factory<PillsInputFactory>((_props) => {\n const props = useProps('PillsInput', defaultProps, _props);\n const {\n children,\n onMouseDown,\n onClick,\n size,\n disabled,\n __staticSelector,\n error,\n variant,\n ...others\n } = props;\n\n const fieldRef = useRef<HTMLInputElement>(null);\n\n return (\n <PillsInputContext value={{ fieldRef, size, disabled, hasError: !!error, variant }}>\n <InputBase\n size={size}\n error={error}\n variant={variant}\n component=\"div\"\n data-no-overflow\n onMouseDown={(event) => {\n event.preventDefault();\n onMouseDown?.(event);\n fieldRef.current?.focus();\n }}\n onClick={(event) => {\n event.preventDefault();\n const fieldset = event.currentTarget.closest('fieldset');\n if (!fieldset?.disabled) {\n fieldRef.current?.focus();\n onClick?.(event);\n }\n }}\n {...others}\n multiline\n disabled={disabled}\n __staticSelector={__staticSelector \|\| 'PillsInput'}\n withAria={false}\n >\n {children}\n </InputBase>\n </PillsInputContext>\n );\n});\n\nPillsInput.displayName = '@mantine/core/PillsInput';\nPillsInput.classes = InputBase.classes;\nPillsInput.Field = PillsInputField;\n\nexport namespace PillsInput {\n export type Props = PillsInputProps;\n export type Factory = PillsInputFactory;\n export type ContextValue = PillsInputContextValue;\n\n export namespace Field {\n export type Props = PillsInputFieldProps;\n export type Factory = PillsInputFieldFactory;\n export type StylesNames = PillsInputFieldStylesNames;\n }\n}\n"],"mappings":";;;;;;;;;AA8BA,MAAM,eAAe,EACnB,MAAM,MACP;AAED,MAAa,aAAa,SAA4B,WAAW;CAE/D,MAAM,EACJ,UACA,aACA,SACA,MACA,UACA,kBACA,OACA,SACA,GAAG,WAVS,SAAS,~~cAAc~~,cAAc,OAAO;~~CAa1D~~,MAAM,WAAW,OAAyB,KAAK;AAE/C,QACE,oBAAC,mBAAD;EAAmB,OAAO;GAAE;GAAU;GAAM;GAAU,UAAU,CAAC,CAAC;GAAO;GAAS;YAChF,oBAAC,WAAD;GACQ;GACC;GACE;GACT,WAAU;GACV,oBAAA;GACA,cAAc,UAAU;AACtB,UAAM,gBAAgB;AACtB,kBAAc,MAAM;AACpB,aAAS,SAAS,OAAO;;GAE3B,UAAU,UAAU;AAClB,UAAM,gBAAgB;AAEtB,QAAI,CADa,MAAM,cAAc,QAAQ,WAAW,EACzC,UAAU;AACvB,cAAS,SAAS,OAAO;AACzB,eAAU,MAAM;;;GAGpB,GAAI;GACJ,WAAA;GACU;GACV,kBAAkB,oBAAoB;GACtC,UAAU;GAET;GACS,CAAA;EACM,CAAA;EAEtB;AAEF,WAAW,cAAc;AACzB,WAAW,UAAU,UAAU;AAC/B,WAAW,QAAQ"}
1	+ {"version":3,"file":"PillsInput.mjs","names":[],"sources":["../../../src/components/PillsInput/PillsInput.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { BoxProps, ElementProps, factory, Factory, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps, __InputStylesNames } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { PillsInputContext, type PillsInputContextValue } from './PillsInput.context';\nimport {\n PillsInputField,\n type PillsInputFieldProps,\n type PillsInputFieldFactory,\n type PillsInputFieldStylesNames,\n} from './PillsInputField/PillsInputField';\nexport interface PillsInputProps\n extends\n BoxProps,\n __BaseInputProps,\n StylesApiProps<PillsInputFactory>,\n ElementProps<'div', 'size'> {\n __stylesApiProps?: Record<string, any>;\n __staticSelector?: string;\n}\n\nexport type PillsInputFactory = Factory<{\n props: PillsInputProps;\n ref: HTMLDivElement;\n stylesNames: __InputStylesNames;\n staticComponents: {\n Field: typeof PillsInputField;\n };\n}>;\n\nconst defaultProps = {\n size: 'sm',\n} satisfies Partial<PillsInputProps>;\n\nexport const PillsInput = factory<PillsInputFactory>((_props) => {\n const props = useProps(['Input', 'InputWrapper', 'PillsInput'], defaultProps, _props);\n const {\n children,\n onMouseDown,\n onClick,\n size,\n disabled,\n __staticSelector,\n error,\n variant,\n ...others\n } = props;\n\n const fieldRef = useRef<HTMLInputElement>(null);\n\n return (\n <PillsInputContext value={{ fieldRef, size, disabled, hasError: !!error, variant }}>\n <InputBase\n size={size}\n error={error}\n variant={variant}\n component=\"div\"\n data-no-overflow\n onMouseDown={(event) => {\n event.preventDefault();\n onMouseDown?.(event);\n fieldRef.current?.focus();\n }}\n onClick={(event) => {\n event.preventDefault();\n const fieldset = event.currentTarget.closest('fieldset');\n if (!fieldset?.disabled) {\n fieldRef.current?.focus();\n onClick?.(event);\n }\n }}\n {...others}\n multiline\n disabled={disabled}\n __staticSelector={__staticSelector \|\| 'PillsInput'}\n withAria={false}\n >\n {children}\n </InputBase>\n </PillsInputContext>\n );\n});\n\nPillsInput.displayName = '@mantine/core/PillsInput';\nPillsInput.classes = InputBase.classes;\nPillsInput.Field = PillsInputField;\n\nexport namespace PillsInput {\n export type Props = PillsInputProps;\n export type Factory = PillsInputFactory;\n export type ContextValue = PillsInputContextValue;\n\n export namespace Field {\n export type Props = PillsInputFieldProps;\n export type Factory = PillsInputFieldFactory;\n export type StylesNames = PillsInputFieldStylesNames;\n }\n}\n"],"mappings":";;;;;;;;;AA8BA,MAAM,eAAe,EACnB,MAAM,MACP;AAED,MAAa,aAAa,SAA4B,WAAW;CAE/D,MAAM,EACJ,UACA,aACA,SACA,MACA,UACA,kBACA,OACA,SACA,GAAG,WAVS,SAAS;EAAC;EAAS;EAAgB;EAAa,EAAE,cAAc,OAAO;CAarF,MAAM,WAAW,OAAyB,KAAK;AAE/C,QACE,oBAAC,mBAAD;EAAmB,OAAO;GAAE;GAAU;GAAM;GAAU,UAAU,CAAC,CAAC;GAAO;GAAS;YAChF,oBAAC,WAAD;GACQ;GACC;GACE;GACT,WAAU;GACV,oBAAA;GACA,cAAc,UAAU;AACtB,UAAM,gBAAgB;AACtB,kBAAc,MAAM;AACpB,aAAS,SAAS,OAAO;;GAE3B,UAAU,UAAU;AAClB,UAAM,gBAAgB;AAEtB,QAAI,CADa,MAAM,cAAc,QAAQ,WAAW,EACzC,UAAU;AACvB,cAAS,SAAS,OAAO;AACzB,eAAU,MAAM;;;GAGpB,GAAI;GACJ,WAAA;GACU;GACV,kBAAkB,oBAAoB;GACtC,UAAU;GAET;GACS,CAAA;EACM,CAAA;EAEtB;AAEF,WAAW,cAAc;AACzB,WAAW,UAAU,UAAU;AAC/B,WAAW,QAAQ"}

package/esm/components/PinInput/PinInput.mjs CHANGED Viewed

@@ -30,7 +30,7 @@ const defaultProps = {
 };
 const varsResolver = createVarsResolver((_, { size }) => ({ root: { "--pin-input-size": getSize(size ?? "sm", "pin-input-size") } }));
 const PinInput = factory((props) => {
-	const { name, form, className, value, defaultValue, variant, gap, style, size, classNames, styles, unstyled, length, onChange, onComplete, manageFocus, autoFocus, error, radius, disabled, oneTimeCode, placeholder, type, mask, readOnly, inputType, inputMode, ariaLabel, vars, id, hiddenInputProps, rootRef, getInputProps, attributes, ref, ...others } = useProps("PinInput", defaultProps, props);
+	const { name, form, className, value, defaultValue, variant, gap, style, size, classNames, styles, unstyled, length, onChange, onComplete, manageFocus, autoFocus, error, radius, disabled, oneTimeCode, placeholder, type, mask, readOnly, inputType, inputMode, ariaLabel, vars, id, hiddenInputProps, rootRef, getInputProps, attributes, ref, ...others } = useProps(["Input", "PinInput"], defaultProps, props);
 	const uuid = useId$1(id);
 	const getStyles = useStyles({
 		name: "PinInput",

package/esm/components/PinInput/PinInput.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PinInput.mjs","names":["useId","classes"],"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":"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"}
1	+ {"version":3,"file":"PinInput.mjs","names":["useId","classes"],"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":";;;;;;;;;;;;;;;;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,eAAe,oBAAqC,GAAG,EAAE,YAAY,EACzE,MAAM,EACJ,oBAAoB,QAAQ,QAAQ,MAAM,iBAAiB,EAC5D,EACF,EAAE;AAEH,MAAa,WAAW,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,WACD,SAAS,CAAC,SAAS,WAAW,EAAE,cAAc,MAAM;CAExD,MAAM,OAAOA,QAAM,GAAG;CAEtB,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,oBAAoB,mBAAmB,qBAAsC;EACnF;EACA;EACA;EACD,CAAC;CAEF,MAAM,CAAC,cAAc,mBAAmB,SAAS,GAAG;CACpD,MAAM,YAAY,OAAgC,EAAE,CAAC;CACrD,MAAM,gBAAgB,UAAU;CAEhC,MAAM,eAAe,OAAO,MAAM;CAElC,MAAM,CAAC,QAAQ,aAAa,gBAA0B;EACpD,OAAO,UAAU,KAAA,IAAY,eAAe,eAAe,MAAM,GAAG,KAAA;EACpE,cAAc,cAAc,MAAM,GAAG,CAAC,MAAM,GAAG,cAAc;EAC7D,YAAY,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,gBAAgB,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,eAAU,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,aAAa,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,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,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,8BAAC,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,KAAK,UAAU,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,oBAAC,SAAD;EAAO,MAAK;EAAe;EAAY;EAAM,OAAO;EAAgB,GAAI;EAAoB,CAAA,CAC3F,EAAA,CAAA;EAEL;AAEF,SAAS,UAAU;CAAE,GAAGC;CAAS,GAAG,UAAU;CAAS;AACvD,SAAS,eAAe;AACxB,SAAS,cAAc"}

package/esm/components/Popover/Popover.context.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.context.mjs","names":[],"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,qBAAqB,kBACzD,8CACD"}
1	+ {"version":3,"file":"Popover.context.mjs","names":[],"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,qBAAqB,kBACzD,8CACD"}

package/esm/components/Popover/PopoverDropdown/PopoverDropdown.mjs CHANGED Viewed

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

package/esm/components/Popover/PopoverDropdown/PopoverDropdown.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PopoverDropdown.mjs","names":["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,kBAAkB,SAAiC,WAAW;CACzE,MAAM,QAAQ,SAAS,mBAAmB,MAAM,OAAO;CACvD,MAAM,EACJ,WACA,OACA,MACA,UACA,kBACA,SACA,YACA,QACA,KACA,GAAG,WACD;CAEJ,MAAM,MAAM,mBAAmB;CAE/B,MAAM,cAAc,eAAe;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,YAAY,aAAa,KAAK,IAAI,SAAS;AAEjD,KAAI,IAAI,SACN,QAAO;AAGT,QACE,oBAAC,gBAAD;EAAgB,GAAI,IAAI;EAAa,cAAc,IAAI;YACrD,oBAAC,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,oBAAC,WAAD;IAAW,QAAQ,IAAI,aAAa,IAAI;IAAQ,UAAU;cACxD,qBAAC,KAAD;KACE,GAAI;KACJ,GAAI;KACK;KACT,kBAAkB,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,IAAY,IAAI,IAAI,MAAM;QAC1D,GAAI,IAAI,kBAAkB,EAAE,SAAS,QAAQ,GAAG;QACjD;OACD,IAAI,~~eAAe~~;~~OACnB~~,QAAQ;OACR;OACD;MACF,CAAC;eAnCJ,CAqCG,UAED,oBAAC,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,UAAUA;AAC1B,gBAAgB,cAAc"}
1	+ {"version":3,"file":"PopoverDropdown.mjs","names":["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,kBAAkB,SAAiC,WAAW;CACzE,MAAM,QAAQ,SAAS,mBAAmB,MAAM,OAAO;CACvD,MAAM,EACJ,WACA,OACA,MACA,UACA,kBACA,SACA,YACA,QACA,KACA,GAAG,WACD;CAEJ,MAAM,MAAM,mBAAmB;CAE/B,MAAM,cAAc,eAAe;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,YAAY,aAAa,KAAK,IAAI,SAAS;AAEjD,KAAI,IAAI,SACN,QAAO;AAGT,QACE,oBAAC,gBAAD;EAAgB,GAAI,IAAI;EAAa,cAAc,IAAI;YACrD,oBAAC,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,oBAAC,WAAD;IAAW,QAAQ,IAAI,aAAa,IAAI;IAAQ,UAAU;cACxD,qBAAC,KAAD;KACE,GAAI;KACJ,GAAI;KACK;KACT,kBAAkB,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,IAAY,IAAI,IAAI,MAAM;QAC1D,GAAI,IAAI,kBAAkB,EAAE,SAAS,QAAQ,GAAG;QACjD;OACD,IAAI,gBAAgB;OACpB,QAAQ;OACR;OACD;MACF,CAAC;eAnCJ,CAqCG,UAED,oBAAC,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,UAAUA;AAC1B,gBAAgB,cAAc"}

package/esm/components/Radio/Radio.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.module.mjs","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.mjs","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/esm/components/RollingNumber/DigitColumn.mjs ADDED Viewed

@@ -0,0 +1,45 @@
+"use client";
+import { jsx } from "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__ */ jsx("span", {
+		...digitStyles,
+		"data-empty": empty || void 0,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ 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__ */ jsx("span", { children: d }, i))
+		}, digit)
+	});
+}
+//#endregion
+export { DigitColumn };
+//# sourceMappingURL=DigitColumn.mjs.map

package/esm/components/RollingNumber/DigitColumn.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DigitColumn.mjs","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,oBAAC,QAAD;EAAM,GAAI;EAAa,cAAY,SAAS,KAAA;EAAW,eAAY;YACjE,oBAAC,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,oBAAC,QAAD,EAAA,UAAe,GAAS,EAAb,EAAa,CACxB;GACG,EAbA,MAaA;EACF,CAAA"}