@spark-ui/components 17.5.6-beta.2 → 17.5.6-beta.3
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.
|
@@ -3,9 +3,11 @@ import { StepperProps } from './types';
|
|
|
3
3
|
interface StepperContextValue {
|
|
4
4
|
inputRef: RefObject<HTMLInputElement | null>;
|
|
5
5
|
fieldId?: string;
|
|
6
|
+
fieldLabelId?: string;
|
|
6
7
|
fieldIsInvalid?: boolean;
|
|
7
8
|
fieldIsRequired?: boolean;
|
|
8
9
|
state?: 'error' | 'alert' | 'success';
|
|
10
|
+
ariaLabel?: string;
|
|
9
11
|
}
|
|
10
12
|
export declare const Stepper: {
|
|
11
13
|
({ children, formatOptions, minValue, maxValue, ref: forwardedRef, onValueChange, locale, name: nameProp, ...stepperProps }: PropsWithChildren<StepperProps>): import("react/jsx-runtime").JSX.Element;
|
package/dist/stepper/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../icon-button-CYz_Fitz.js`),n=require(`../input-Cx5cfgE8.js`);let r=require(`class-variance-authority`),i=require(`react`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/hooks/use-merge-refs`),s=require(`@spark-ui/components/form-field`),c=require(`@spark-ui/icons/Minus`),l=require(`@base-ui/react/number-field`),u=require(`@spark-ui/icons/Plus`);var d=(0,i.createContext)(null),f=({children:e,formatOptions:t,minValue:o,maxValue:c,ref:u,onValueChange:f,locale:p=`fr`,name:m,...h})=>{let g=(0,i.useRef)(null),_=(0,s.useFormFieldControl)(),v=(0,i.useRef)(null),y=_.name??m,b=_.disabled??h.disabled,x=_.readOnly??h.readOnly,S=_.isRequired??h.required,C=e=>{f&&e!==null&&e!==v.current&&(v.current=e,f(e))};return(0,a.jsx)(d.Provider,{value:{inputRef:g,fieldId:_.id,fieldIsInvalid:_.isInvalid,fieldIsRequired:S,state:h.state},children:(0,a.jsx)(l.NumberField.Root,{...
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../icon-button-CYz_Fitz.js`),n=require(`../input-Cx5cfgE8.js`);let r=require(`class-variance-authority`),i=require(`react`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/hooks/use-merge-refs`),s=require(`@spark-ui/components/form-field`),c=require(`@spark-ui/icons/Minus`),l=require(`@base-ui/react/number-field`),u=require(`@spark-ui/icons/Plus`);var d=(0,i.createContext)(null),f=({children:e,formatOptions:t,minValue:o,maxValue:c,ref:u,onValueChange:f,locale:p=`fr`,name:m,...h})=>{let g=(0,i.useRef)(null),_=(0,s.useFormFieldControl)(),v=(0,i.useRef)(null),y=_.name??m,b=_.disabled??h.disabled,x=_.readOnly??h.readOnly,S=_.isRequired??h.required,C=e=>{f&&e!==null&&e!==v.current&&(v.current=e,f(e))},{"aria-label":w,...T}=h;return(0,a.jsx)(d.Provider,{value:{inputRef:g,fieldId:_.id,fieldLabelId:_.labelId,fieldIsInvalid:_.isInvalid,fieldIsRequired:S,state:h.state,ariaLabel:w},children:(0,a.jsx)(l.NumberField.Root,{...T,format:t,min:o,max:c,locale:p,disabled:b,readOnly:x,required:S,name:y,inputRef:g,onValueCommitted:C,"aria-describedby":_.description,children:(0,a.jsx)(`div`,{"data-spark-component":`stepper`,ref:u,className:(0,r.cx)(n.r({disabled:b,readOnly:x}),h.className),children:e})})})};f.displayName=`Stepper`;var p=()=>{let e=(0,i.useContext)(d);if(!e)throw Error(`useStepperContext must be used within a Stepper provider`);return e},m=({children:n,design:i=`ghost`,intent:o=`neutral`,className:s,ref:c,disabled:d,...f})=>{let{fieldId:m,state:h}=p();return(0,a.jsx)(l.NumberField.Increment,{render:l=>{let p=d||`disabled`in l&&l.disabled,g=`readOnly`in l&&l.readOnly;return(0,a.jsx)(`div`,{className:(0,r.cx)(`rounded-r-lg`,p||g?`bg-on-surface/dim-5`:null),"data-spark-component":`stepper-increment-button`,children:(0,a.jsx)(t.t,{ref:c,design:i,intent:o,className:(0,r.cx)(`overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0`,`rounded-l-0! -ml-px rounded-r-lg`,h===`error`&&`border-error`,h===`alert`&&`border-alert`,h===`success`&&`border-success`,!h&&`border-outline`,s),...f,...l,"aria-label":f[`aria-label`]||l[`aria-label`],"aria-controls":m,disabled:p,children:n||(0,a.jsx)(e.t,{children:(0,a.jsx)(u.Plus,{})})})})}})},h=({children:n,design:i=`ghost`,intent:o=`neutral`,className:s,ref:u,disabled:d,...f})=>{let{fieldId:m,state:h}=p();return(0,a.jsx)(l.NumberField.Decrement,{render:l=>{let p=d||`disabled`in l&&l.disabled,g=`readOnly`in l&&l.readOnly;return(0,a.jsx)(`div`,{className:(0,r.cx)(`rounded-l-lg`,p||g?`bg-on-surface/dim-5`:null),"data-spark-component":`stepper-decrement-button`,children:(0,a.jsx)(t.t,{ref:u,design:i,intent:o,className:(0,r.cx)(`overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0`,`rounded-r-0! -mr-px rounded-l-lg`,h===`error`&&`border-error`,h===`alert`&&`border-alert`,h===`success`&&`border-success`,!h&&`border-outline`,s),...f,...l,"aria-label":f[`aria-label`]||l[`aria-label`],"aria-controls":m,disabled:p,children:n||(0,a.jsx)(e.t,{children:(0,a.jsx)(c.Minus,{})})})})}})},g=m,_=h;m.displayName=`Stepper.IncrementButton`,h.displayName=`Stepper.DecrementButton`;var v=({ref:e,...t})=>{let{inputRef:r,fieldId:i,fieldLabelId:s,fieldIsInvalid:c,fieldIsRequired:u,ariaLabel:d}=p(),f=(0,o.useMergeRefs)(e,r),{className:m=``,...h}=t,g=!!s;return(0,a.jsx)(`div`,{className:`relative inline-flex w-full`,children:(0,a.jsx)(l.NumberField.Input,{render:e=>{let t;u===void 0?`required`in e&&(t=e.required):t=u;let r=c===void 0?e[`aria-invalid`]:c;return(0,a.jsx)(n.n,{ref:f,...e,...h,id:i||e.id,required:t,"aria-invalid":r,"aria-label":g?void 0:d,className:`min-w-sz-56 text-center rounded-none! ${m}`})}})})},y=v;v.displayName=`Stepper.Input`;var b=Object.assign(f,{IncrementButton:g,DecrementButton:_,Input:y});b.displayName=`Stepper`,g.displayName=`Stepper.IncrementButton`,_.displayName=`Stepper.DecrementButton`,y.displayName=`Stepper.Input`,exports.Stepper=b;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/stepper/Stepper.tsx","../../src/stepper/StepperButton.tsx","../../src/stepper/StepperInput.tsx","../../src/stepper/index.ts"],"sourcesContent":["import { NumberField } from '@base-ui/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { createContext, type PropsWithChildren, RefObject, useContext, useRef } from 'react'\n\nimport { inputGroupStyles } from '../input/InputGroup.styles'\nimport type { StepperProps } from './types'\n\ninterface StepperContextValue {\n inputRef: RefObject<HTMLInputElement | null>\n fieldId?: string\n fieldIsInvalid?: boolean\n fieldIsRequired?: boolean\n state?: 'error' | 'alert' | 'success'\n}\n\nconst StepperContext = createContext<StepperContextValue | null>(null)\n\nexport const Stepper = ({\n children,\n formatOptions,\n minValue,\n maxValue,\n ref: forwardedRef,\n onValueChange,\n locale = 'fr',\n name: nameProp,\n ...stepperProps\n}: PropsWithChildren<StepperProps>) => {\n const inputRef = useRef<HTMLInputElement>(null)\n const formFieldControlProps = useFormFieldControl()\n const lastCommittedValueRef = useRef<number | null>(null)\n\n const name = formFieldControlProps.name ?? nameProp\n const disabled = formFieldControlProps.disabled ?? stepperProps.disabled\n const readOnly = formFieldControlProps.readOnly ?? stepperProps.readOnly\n const required = formFieldControlProps.isRequired ?? stepperProps.required\n\n // Base UI calls onValueChange on every keystroke, but react-aria only called it on blur.\n // We use onValueCommitted to preserve the old behavior where onValueChange is only called on blur for input changes,\n // but immediately for button clicks.\n const handleValueCommit = (value: number | null) => {\n if (onValueChange && value !== null && value !== lastCommittedValueRef.current) {\n lastCommittedValueRef.current = value\n onValueChange(value)\n }\n }\n\n return (\n <StepperContext.Provider\n value={{\n inputRef,\n fieldId: formFieldControlProps.id,\n fieldIsInvalid: formFieldControlProps.isInvalid,\n fieldIsRequired: required,\n state: stepperProps.state,\n }}\n >\n <NumberField.Root\n {...stepperProps}\n format={formatOptions}\n min={minValue}\n max={maxValue}\n locale={locale}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n name={name}\n inputRef={inputRef}\n onValueCommitted={handleValueCommit}\n aria-describedby={formFieldControlProps.description}\n >\n <div\n data-spark-component=\"stepper\"\n ref={forwardedRef}\n className={cx(inputGroupStyles({ disabled, readOnly }), stepperProps.className)}\n >\n {children}\n </div>\n </NumberField.Root>\n </StepperContext.Provider>\n )\n}\n\nStepper.displayName = 'Stepper'\n\nexport const useStepperContext = () => {\n const context = useContext(StepperContext)\n\n if (!context) {\n throw Error('useStepperContext must be used within a Stepper provider')\n }\n\n return context\n}\n","import { NumberField } from '@base-ui/react/number-field'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { cx } from 'class-variance-authority'\nimport { type PropsWithChildren } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { useStepperContext } from './Stepper'\nimport type { StepperButtonProps } from './types'\n\nconst IncrementButton = ({\n children,\n design = 'ghost',\n intent = 'neutral',\n className,\n ref: forwardedRef,\n disabled,\n ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n const { fieldId, state } = useStepperContext()\n\n return (\n <NumberField.Increment\n render={buttonProps => {\n const isDisabled = disabled || ('disabled' in buttonProps && (buttonProps as any).disabled)\n const isReadOnly = 'readOnly' in buttonProps && (buttonProps as any).readOnly\n const isInactive = isDisabled || isReadOnly\n\n return (\n <div\n className={cx('rounded-r-lg', isInactive ? 'bg-on-surface/dim-5' : null)}\n data-spark-component=\"stepper-increment-button\"\n >\n <IconButton\n ref={forwardedRef}\n design={design}\n intent={intent}\n className={cx(\n 'overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0',\n 'rounded-l-0! -ml-px rounded-r-lg',\n state === 'error' && 'border-error',\n state === 'alert' && 'border-alert',\n state === 'success' && 'border-success',\n !state && 'border-outline',\n className\n )}\n {...rest}\n {...buttonProps}\n aria-label={rest['aria-label'] || (buttonProps['aria-label'] as string)}\n aria-controls={fieldId}\n disabled={isDisabled}\n >\n {children || (\n <Icon>\n <Plus />\n </Icon>\n )}\n </IconButton>\n </div>\n )\n }}\n />\n )\n}\n\nconst DecrementButton = ({\n children,\n design = 'ghost',\n intent = 'neutral',\n className,\n ref: forwardedRef,\n disabled,\n ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n const { fieldId, state } = useStepperContext()\n\n return (\n <NumberField.Decrement\n render={buttonProps => {\n const isDisabled = disabled || ('disabled' in buttonProps && (buttonProps as any).disabled)\n const isReadOnly = 'readOnly' in buttonProps && (buttonProps as any).readOnly\n const isInactive = isDisabled || isReadOnly\n\n return (\n <div\n className={cx('rounded-l-lg', isInactive ? 'bg-on-surface/dim-5' : null)}\n data-spark-component=\"stepper-decrement-button\"\n >\n <IconButton\n ref={forwardedRef}\n design={design}\n intent={intent}\n className={cx(\n 'overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0',\n 'rounded-r-0! -mr-px rounded-l-lg',\n state === 'error' && 'border-error',\n state === 'alert' && 'border-alert',\n state === 'success' && 'border-success',\n !state && 'border-outline',\n className\n )}\n {...rest}\n {...buttonProps}\n aria-label={rest['aria-label'] || (buttonProps['aria-label'] as string)}\n aria-controls={fieldId}\n disabled={isDisabled}\n >\n {children || (\n <Icon>\n <Minus />\n </Icon>\n )}\n </IconButton>\n </div>\n )\n }}\n />\n )\n}\n\nexport const StepperIncrementButton = IncrementButton\n\nexport const StepperDecrementButton = DecrementButton\n\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\n","import { NumberField } from '@base-ui/react/number-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\n\nimport { Input as SparkInput } from '../input'\nimport { useStepperContext } from './Stepper'\nimport type { StepperInputProps } from './types'\n\nconst Input = ({ ref: forwardedRef, ...props }: StepperInputProps) => {\n const { inputRef, fieldId, fieldIsInvalid, fieldIsRequired } = useStepperContext()\n const ref = useMergeRefs(forwardedRef, inputRef)\n const { className = '', ...remainingProps } = props\n\n return (\n <div className=\"relative inline-flex w-full\">\n <NumberField.Input\n render={inputProps => {\n // Determine required attribute\n let required: boolean | undefined = undefined\n if (fieldIsRequired !== undefined) {\n required = fieldIsRequired\n } else if ('required' in inputProps) {\n required = (inputProps as any).required\n }\n\n // Determine aria-invalid attribute\n const ariaInvalid =\n fieldIsInvalid !== undefined ? fieldIsInvalid : inputProps['aria-invalid']\n\n return (\n <SparkInput\n ref={ref}\n {...inputProps}\n {...remainingProps}\n id={fieldId || inputProps.id}\n required={required}\n aria-invalid={ariaInvalid}\n className={`min-w-sz-56 text-center rounded-none! ${className}`}\n />\n )\n }}\n />\n </div>\n )\n}\n\nexport const StepperInput = Input\n\nInput.displayName = 'Stepper.Input'\n","import { Stepper as Root } from './Stepper'\nimport {\n StepperDecrementButton as DecrementButton,\n StepperIncrementButton as IncrementButton,\n} from './StepperButton'\nimport { StepperInput as Input } from './StepperInput'\n\n/**\n * A numeric input component with increment and decrement buttons for adjusting values.\n */\nexport const Stepper: typeof Root & {\n IncrementButton: typeof IncrementButton\n DecrementButton: typeof DecrementButton\n Input: typeof Input\n} = Object.assign(Root, { IncrementButton, DecrementButton, Input })\n\nStepper.displayName = 'Stepper'\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\nInput.displayName = 'Stepper.Input'\n\nexport type { StepperProps, StepperButtonProps, StepperInputProps } from './types'\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/stepper/Stepper.tsx","../../src/stepper/StepperButton.tsx","../../src/stepper/StepperInput.tsx","../../src/stepper/index.ts"],"sourcesContent":["import { NumberField } from '@base-ui/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { createContext, type PropsWithChildren, RefObject, useContext, useRef } from 'react'\n\nimport { inputGroupStyles } from '../input/InputGroup.styles'\nimport type { StepperProps } from './types'\n\ninterface StepperContextValue {\n inputRef: RefObject<HTMLInputElement | null>\n fieldId?: string\n fieldLabelId?: string\n fieldIsInvalid?: boolean\n fieldIsRequired?: boolean\n state?: 'error' | 'alert' | 'success'\n ariaLabel?: string\n}\n\nconst StepperContext = createContext<StepperContextValue | null>(null)\n\nexport const Stepper = ({\n children,\n formatOptions,\n minValue,\n maxValue,\n ref: forwardedRef,\n onValueChange,\n locale = 'fr',\n name: nameProp,\n ...stepperProps\n}: PropsWithChildren<StepperProps>) => {\n const inputRef = useRef<HTMLInputElement>(null)\n const formFieldControlProps = useFormFieldControl()\n const lastCommittedValueRef = useRef<number | null>(null)\n\n const name = formFieldControlProps.name ?? nameProp\n const disabled = formFieldControlProps.disabled ?? stepperProps.disabled\n const readOnly = formFieldControlProps.readOnly ?? stepperProps.readOnly\n const required = formFieldControlProps.isRequired ?? stepperProps.required\n\n // Base UI calls onValueChange on every keystroke, but react-aria only called it on blur.\n // We use onValueCommitted to preserve the old behavior where onValueChange is only called on blur for input changes,\n // but immediately for button clicks.\n const handleValueCommit = (value: number | null) => {\n if (onValueChange && value !== null && value !== lastCommittedValueRef.current) {\n lastCommittedValueRef.current = value\n onValueChange(value)\n }\n }\n\n // Extract aria-label to pass to input, not to NumberField.Root\n const { 'aria-label': ariaLabel, ...restStepperProps } = stepperProps\n\n return (\n <StepperContext.Provider\n value={{\n inputRef,\n fieldId: formFieldControlProps.id,\n fieldLabelId: formFieldControlProps.labelId,\n fieldIsInvalid: formFieldControlProps.isInvalid,\n fieldIsRequired: required,\n state: stepperProps.state,\n ariaLabel,\n }}\n >\n <NumberField.Root\n {...restStepperProps}\n format={formatOptions}\n min={minValue}\n max={maxValue}\n locale={locale}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n name={name}\n inputRef={inputRef}\n onValueCommitted={handleValueCommit}\n aria-describedby={formFieldControlProps.description}\n >\n <div\n data-spark-component=\"stepper\"\n ref={forwardedRef}\n className={cx(inputGroupStyles({ disabled, readOnly }), stepperProps.className)}\n >\n {children}\n </div>\n </NumberField.Root>\n </StepperContext.Provider>\n )\n}\n\nStepper.displayName = 'Stepper'\n\nexport const useStepperContext = () => {\n const context = useContext(StepperContext)\n\n if (!context) {\n throw Error('useStepperContext must be used within a Stepper provider')\n }\n\n return context\n}\n","import { NumberField } from '@base-ui/react/number-field'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { cx } from 'class-variance-authority'\nimport { type PropsWithChildren } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { useStepperContext } from './Stepper'\nimport type { StepperButtonProps } from './types'\n\nconst IncrementButton = ({\n children,\n design = 'ghost',\n intent = 'neutral',\n className,\n ref: forwardedRef,\n disabled,\n ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n const { fieldId, state } = useStepperContext()\n\n return (\n <NumberField.Increment\n render={buttonProps => {\n const isDisabled = disabled || ('disabled' in buttonProps && (buttonProps as any).disabled)\n const isReadOnly = 'readOnly' in buttonProps && (buttonProps as any).readOnly\n const isInactive = isDisabled || isReadOnly\n\n return (\n <div\n className={cx('rounded-r-lg', isInactive ? 'bg-on-surface/dim-5' : null)}\n data-spark-component=\"stepper-increment-button\"\n >\n <IconButton\n ref={forwardedRef}\n design={design}\n intent={intent}\n className={cx(\n 'overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0',\n 'rounded-l-0! -ml-px rounded-r-lg',\n state === 'error' && 'border-error',\n state === 'alert' && 'border-alert',\n state === 'success' && 'border-success',\n !state && 'border-outline',\n className\n )}\n {...rest}\n {...buttonProps}\n aria-label={rest['aria-label'] || (buttonProps['aria-label'] as string)}\n aria-controls={fieldId}\n disabled={isDisabled}\n >\n {children || (\n <Icon>\n <Plus />\n </Icon>\n )}\n </IconButton>\n </div>\n )\n }}\n />\n )\n}\n\nconst DecrementButton = ({\n children,\n design = 'ghost',\n intent = 'neutral',\n className,\n ref: forwardedRef,\n disabled,\n ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n const { fieldId, state } = useStepperContext()\n\n return (\n <NumberField.Decrement\n render={buttonProps => {\n const isDisabled = disabled || ('disabled' in buttonProps && (buttonProps as any).disabled)\n const isReadOnly = 'readOnly' in buttonProps && (buttonProps as any).readOnly\n const isInactive = isDisabled || isReadOnly\n\n return (\n <div\n className={cx('rounded-l-lg', isInactive ? 'bg-on-surface/dim-5' : null)}\n data-spark-component=\"stepper-decrement-button\"\n >\n <IconButton\n ref={forwardedRef}\n design={design}\n intent={intent}\n className={cx(\n 'overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0',\n 'rounded-r-0! -mr-px rounded-l-lg',\n state === 'error' && 'border-error',\n state === 'alert' && 'border-alert',\n state === 'success' && 'border-success',\n !state && 'border-outline',\n className\n )}\n {...rest}\n {...buttonProps}\n aria-label={rest['aria-label'] || (buttonProps['aria-label'] as string)}\n aria-controls={fieldId}\n disabled={isDisabled}\n >\n {children || (\n <Icon>\n <Minus />\n </Icon>\n )}\n </IconButton>\n </div>\n )\n }}\n />\n )\n}\n\nexport const StepperIncrementButton = IncrementButton\n\nexport const StepperDecrementButton = DecrementButton\n\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\n","import { NumberField } from '@base-ui/react/number-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\n\nimport { Input as SparkInput } from '../input'\nimport { useStepperContext } from './Stepper'\nimport type { StepperInputProps } from './types'\n\nconst Input = ({ ref: forwardedRef, ...props }: StepperInputProps) => {\n const { inputRef, fieldId, fieldLabelId, fieldIsInvalid, fieldIsRequired, ariaLabel } =\n useStepperContext()\n const ref = useMergeRefs(forwardedRef, inputRef)\n const { className = '', ...remainingProps } = props\n\n // Only use aria-label if not wrapped in a FormField with a label (fieldLabelId would be set by FormField.Label)\n const hasFormFieldLabel = !!fieldLabelId\n\n return (\n <div className=\"relative inline-flex w-full\">\n <NumberField.Input\n render={inputProps => {\n // Determine required attribute\n let required: boolean | undefined = undefined\n if (fieldIsRequired !== undefined) {\n required = fieldIsRequired\n } else if ('required' in inputProps) {\n required = (inputProps as any).required\n }\n\n // Determine aria-invalid attribute\n const ariaInvalid =\n fieldIsInvalid !== undefined ? fieldIsInvalid : inputProps['aria-invalid']\n\n return (\n <SparkInput\n ref={ref}\n {...inputProps}\n {...remainingProps}\n id={fieldId || inputProps.id}\n required={required}\n aria-invalid={ariaInvalid}\n aria-label={hasFormFieldLabel ? undefined : ariaLabel}\n className={`min-w-sz-56 text-center rounded-none! ${className}`}\n />\n )\n }}\n />\n </div>\n )\n}\n\nexport const StepperInput = Input\n\nInput.displayName = 'Stepper.Input'\n","import { Stepper as Root } from './Stepper'\nimport {\n StepperDecrementButton as DecrementButton,\n StepperIncrementButton as IncrementButton,\n} from './StepperButton'\nimport { StepperInput as Input } from './StepperInput'\n\n/**\n * A numeric input component with increment and decrement buttons for adjusting values.\n */\nexport const Stepper: typeof Root & {\n IncrementButton: typeof IncrementButton\n DecrementButton: typeof DecrementButton\n Input: typeof Input\n} = Object.assign(Root, { IncrementButton, DecrementButton, Input })\n\nStepper.displayName = 'Stepper'\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\nInput.displayName = 'Stepper.Input'\n\nexport type { StepperProps, StepperButtonProps, StepperInputProps } from './types'\n"],"mappings":"ufAkBA,IAAM,GAAA,EAAA,EAAA,eAA2D,KAAK,CAEzD,GAAW,CACtB,WACA,gBACA,WACA,WACA,IAAK,EACL,gBACA,SAAS,KACT,KAAM,EACN,GAAG,KACkC,CACrC,IAAM,GAAA,EAAA,EAAA,QAAoC,KAAK,CACzC,GAAA,EAAA,EAAA,sBAA6C,CAC7C,GAAA,EAAA,EAAA,QAA8C,KAAK,CAEnD,EAAO,EAAsB,MAAQ,EACrC,EAAW,EAAsB,UAAY,EAAa,SAC1D,EAAW,EAAsB,UAAY,EAAa,SAC1D,EAAW,EAAsB,YAAc,EAAa,SAK5D,EAAqB,GAAyB,CAC9C,GAAiB,IAAU,MAAQ,IAAU,EAAsB,UACrE,EAAsB,QAAU,EAChC,EAAc,EAAM,GAKlB,CAAE,aAAc,EAAW,GAAG,GAAqB,EAEzD,OACE,EAAA,EAAA,KAAC,EAAe,SAAhB,CACE,MAAO,CACL,WACA,QAAS,EAAsB,GAC/B,aAAc,EAAsB,QACpC,eAAgB,EAAsB,UACtC,gBAAiB,EACjB,MAAO,EAAa,MACpB,YACD,WAED,EAAA,EAAA,KAAC,EAAA,YAAY,KAAb,CACE,GAAI,EACJ,OAAQ,EACR,IAAK,EACL,IAAK,EACG,SACE,WACA,WACA,WACJ,OACI,WACV,iBAAkB,EAClB,mBAAkB,EAAsB,sBAExC,EAAA,EAAA,KAAC,MAAD,CACE,uBAAqB,UACrB,IAAK,EACL,WAAA,EAAA,EAAA,IAAc,EAAA,EAAiB,CAAE,WAAU,WAAU,CAAC,CAAE,EAAa,UAAU,CAE9E,WACG,CAAA,CACW,CAAA,CACK,CAAA,EAI9B,EAAQ,YAAc,UAEtB,IAAa,MAA0B,CACrC,IAAM,GAAA,EAAA,EAAA,YAAqB,EAAe,CAE1C,GAAI,CAAC,EACH,MAAM,MAAM,2DAA2D,CAGzE,OAAO,GCzFH,GAAmB,CACvB,WACA,SAAS,QACT,SAAS,UACT,YACA,IAAK,EACL,WACA,GAAG,KACwC,CAC3C,GAAM,CAAE,UAAS,SAAU,GAAmB,CAE9C,OACE,EAAA,EAAA,KAAC,EAAA,YAAY,UAAb,CACE,OAAQ,GAAe,CACrB,IAAM,EAAa,GAAa,aAAc,GAAgB,EAAoB,SAC5E,EAAa,aAAc,GAAgB,EAAoB,SAGrE,OACE,EAAA,EAAA,KAAC,MAAD,CACE,WAAA,EAAA,EAAA,IAAc,eAJC,GAAc,EAIc,sBAAwB,KAAK,CACxE,uBAAqB,qCAErB,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,IAAK,EACG,SACA,SACR,WAAA,EAAA,EAAA,IACE,+FACA,mCACA,IAAU,SAAW,eACrB,IAAU,SAAW,eACrB,IAAU,WAAa,iBACvB,CAAC,GAAS,iBACV,EACD,CACD,GAAI,EACJ,GAAI,EACJ,aAAY,EAAK,eAAkB,EAAY,cAC/C,gBAAe,EACf,SAAU,WAET,IACC,EAAA,EAAA,KAAC,EAAA,EAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,KAAD,EAAQ,CAAA,CACH,CAAA,CAEE,CAAA,CACT,CAAA,EAGV,CAAA,EAIA,GAAmB,CACvB,WACA,SAAS,QACT,SAAS,UACT,YACA,IAAK,EACL,WACA,GAAG,KACwC,CAC3C,GAAM,CAAE,UAAS,SAAU,GAAmB,CAE9C,OACE,EAAA,EAAA,KAAC,EAAA,YAAY,UAAb,CACE,OAAQ,GAAe,CACrB,IAAM,EAAa,GAAa,aAAc,GAAgB,EAAoB,SAC5E,EAAa,aAAc,GAAgB,EAAoB,SAGrE,OACE,EAAA,EAAA,KAAC,MAAD,CACE,WAAA,EAAA,EAAA,IAAc,eAJC,GAAc,EAIc,sBAAwB,KAAK,CACxE,uBAAqB,qCAErB,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,IAAK,EACG,SACA,SACR,WAAA,EAAA,EAAA,IACE,+FACA,mCACA,IAAU,SAAW,eACrB,IAAU,SAAW,eACrB,IAAU,WAAa,iBACvB,CAAC,GAAS,iBACV,EACD,CACD,GAAI,EACJ,GAAI,EACJ,aAAY,EAAK,eAAkB,EAAY,cAC/C,gBAAe,EACf,SAAU,WAET,IACC,EAAA,EAAA,KAAC,EAAA,EAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,MAAD,EAAS,CAAA,CACJ,CAAA,CAEE,CAAA,CACT,CAAA,EAGV,CAAA,EAIO,EAAyB,EAEzB,EAAyB,EAEtC,EAAgB,YAAc,0BAC9B,EAAgB,YAAc,0BCvH9B,IAAM,GAAS,CAAE,IAAK,EAAc,GAAG,KAA+B,CACpE,GAAM,CAAE,WAAU,UAAS,eAAc,iBAAgB,kBAAiB,aACxE,GAAmB,CACf,GAAA,EAAA,EAAA,cAAmB,EAAc,EAAS,CAC1C,CAAE,YAAY,GAAI,GAAG,GAAmB,EAGxC,EAAoB,CAAC,CAAC,EAE5B,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,wCACb,EAAA,EAAA,KAAC,EAAA,YAAY,MAAb,CACE,OAAQ,GAAc,CAEpB,IAAI,EACA,IAAoB,IAAA,GAEb,aAAc,IACvB,EAAY,EAAmB,UAF/B,EAAW,EAMb,IAAM,EACJ,IAAmB,IAAA,GAA6B,EAAW,gBAA5B,EAEjC,OACE,EAAA,EAAA,KAAC,EAAA,EAAD,CACO,MACL,GAAI,EACJ,GAAI,EACJ,GAAI,GAAW,EAAW,GAChB,WACV,eAAc,EACd,aAAY,EAAoB,IAAA,GAAY,EAC5C,UAAW,yCAAyC,IACpD,CAAA,EAGN,CAAA,CACE,CAAA,EAIG,EAAe,EAE5B,EAAM,YAAc,gBC1CpB,IAAa,EAIT,OAAO,OAAO,EAAM,CAAE,gBAAA,EAAiB,gBAAA,EAAiB,MAAA,EAAO,CAAC,CAEpE,EAAQ,YAAc,UACtB,EAAgB,YAAc,0BAC9B,EAAgB,YAAc,0BAC9B,EAAM,YAAc"}
|
package/dist/stepper/index.mjs
CHANGED
|
@@ -13,17 +13,19 @@ import { Plus as p } from "@spark-ui/icons/Plus";
|
|
|
13
13
|
var m = a(null), h = ({ children: e, formatOptions: t, minValue: n, maxValue: a, ref: o, onValueChange: l, locale: d = "fr", name: p, ...h }) => {
|
|
14
14
|
let g = s(null), _ = u(), v = s(null), y = _.name ?? p, b = _.disabled ?? h.disabled, x = _.readOnly ?? h.readOnly, S = _.isRequired ?? h.required, C = (e) => {
|
|
15
15
|
l && e !== null && e !== v.current && (v.current = e, l(e));
|
|
16
|
-
};
|
|
16
|
+
}, { "aria-label": w, ...T } = h;
|
|
17
17
|
return /* @__PURE__ */ c(m.Provider, {
|
|
18
18
|
value: {
|
|
19
19
|
inputRef: g,
|
|
20
20
|
fieldId: _.id,
|
|
21
|
+
fieldLabelId: _.labelId,
|
|
21
22
|
fieldIsInvalid: _.isInvalid,
|
|
22
23
|
fieldIsRequired: S,
|
|
23
|
-
state: h.state
|
|
24
|
+
state: h.state,
|
|
25
|
+
ariaLabel: w
|
|
24
26
|
},
|
|
25
27
|
children: /* @__PURE__ */ c(f.Root, {
|
|
26
|
-
...
|
|
28
|
+
...T,
|
|
27
29
|
format: t,
|
|
28
30
|
min: n,
|
|
29
31
|
max: a,
|
|
@@ -99,21 +101,22 @@ _.displayName = "Stepper.IncrementButton", v.displayName = "Stepper.DecrementBut
|
|
|
99
101
|
//#endregion
|
|
100
102
|
//#region src/stepper/StepperInput.tsx
|
|
101
103
|
var x = ({ ref: e, ...t }) => {
|
|
102
|
-
let { inputRef: r, fieldId: i,
|
|
104
|
+
let { inputRef: r, fieldId: i, fieldLabelId: a, fieldIsInvalid: o, fieldIsRequired: s, ariaLabel: u } = g(), d = l(e, r), { className: p = "", ...m } = t, h = !!a;
|
|
103
105
|
return /* @__PURE__ */ c("div", {
|
|
104
106
|
className: "relative inline-flex w-full",
|
|
105
107
|
children: /* @__PURE__ */ c(f.Input, { render: (e) => {
|
|
106
108
|
let t;
|
|
107
|
-
|
|
108
|
-
let r =
|
|
109
|
+
s === void 0 ? "required" in e && (t = e.required) : t = s;
|
|
110
|
+
let r = o === void 0 ? e["aria-invalid"] : o;
|
|
109
111
|
return /* @__PURE__ */ c(n, {
|
|
110
|
-
ref:
|
|
112
|
+
ref: d,
|
|
111
113
|
...e,
|
|
112
|
-
...
|
|
114
|
+
...m,
|
|
113
115
|
id: i || e.id,
|
|
114
116
|
required: t,
|
|
115
117
|
"aria-invalid": r,
|
|
116
|
-
|
|
118
|
+
"aria-label": h ? void 0 : u,
|
|
119
|
+
className: `min-w-sz-56 text-center rounded-none! ${p}`
|
|
117
120
|
});
|
|
118
121
|
} })
|
|
119
122
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/stepper/Stepper.tsx","../../src/stepper/StepperButton.tsx","../../src/stepper/StepperInput.tsx","../../src/stepper/index.ts"],"sourcesContent":["import { NumberField } from '@base-ui/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { createContext, type PropsWithChildren, RefObject, useContext, useRef } from 'react'\n\nimport { inputGroupStyles } from '../input/InputGroup.styles'\nimport type { StepperProps } from './types'\n\ninterface StepperContextValue {\n inputRef: RefObject<HTMLInputElement | null>\n fieldId?: string\n fieldIsInvalid?: boolean\n fieldIsRequired?: boolean\n state?: 'error' | 'alert' | 'success'\n}\n\nconst StepperContext = createContext<StepperContextValue | null>(null)\n\nexport const Stepper = ({\n children,\n formatOptions,\n minValue,\n maxValue,\n ref: forwardedRef,\n onValueChange,\n locale = 'fr',\n name: nameProp,\n ...stepperProps\n}: PropsWithChildren<StepperProps>) => {\n const inputRef = useRef<HTMLInputElement>(null)\n const formFieldControlProps = useFormFieldControl()\n const lastCommittedValueRef = useRef<number | null>(null)\n\n const name = formFieldControlProps.name ?? nameProp\n const disabled = formFieldControlProps.disabled ?? stepperProps.disabled\n const readOnly = formFieldControlProps.readOnly ?? stepperProps.readOnly\n const required = formFieldControlProps.isRequired ?? stepperProps.required\n\n // Base UI calls onValueChange on every keystroke, but react-aria only called it on blur.\n // We use onValueCommitted to preserve the old behavior where onValueChange is only called on blur for input changes,\n // but immediately for button clicks.\n const handleValueCommit = (value: number | null) => {\n if (onValueChange && value !== null && value !== lastCommittedValueRef.current) {\n lastCommittedValueRef.current = value\n onValueChange(value)\n }\n }\n\n return (\n <StepperContext.Provider\n value={{\n inputRef,\n fieldId: formFieldControlProps.id,\n fieldIsInvalid: formFieldControlProps.isInvalid,\n fieldIsRequired: required,\n state: stepperProps.state,\n }}\n >\n <NumberField.Root\n {...stepperProps}\n format={formatOptions}\n min={minValue}\n max={maxValue}\n locale={locale}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n name={name}\n inputRef={inputRef}\n onValueCommitted={handleValueCommit}\n aria-describedby={formFieldControlProps.description}\n >\n <div\n data-spark-component=\"stepper\"\n ref={forwardedRef}\n className={cx(inputGroupStyles({ disabled, readOnly }), stepperProps.className)}\n >\n {children}\n </div>\n </NumberField.Root>\n </StepperContext.Provider>\n )\n}\n\nStepper.displayName = 'Stepper'\n\nexport const useStepperContext = () => {\n const context = useContext(StepperContext)\n\n if (!context) {\n throw Error('useStepperContext must be used within a Stepper provider')\n }\n\n return context\n}\n","import { NumberField } from '@base-ui/react/number-field'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { cx } from 'class-variance-authority'\nimport { type PropsWithChildren } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { useStepperContext } from './Stepper'\nimport type { StepperButtonProps } from './types'\n\nconst IncrementButton = ({\n children,\n design = 'ghost',\n intent = 'neutral',\n className,\n ref: forwardedRef,\n disabled,\n ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n const { fieldId, state } = useStepperContext()\n\n return (\n <NumberField.Increment\n render={buttonProps => {\n const isDisabled = disabled || ('disabled' in buttonProps && (buttonProps as any).disabled)\n const isReadOnly = 'readOnly' in buttonProps && (buttonProps as any).readOnly\n const isInactive = isDisabled || isReadOnly\n\n return (\n <div\n className={cx('rounded-r-lg', isInactive ? 'bg-on-surface/dim-5' : null)}\n data-spark-component=\"stepper-increment-button\"\n >\n <IconButton\n ref={forwardedRef}\n design={design}\n intent={intent}\n className={cx(\n 'overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0',\n 'rounded-l-0! -ml-px rounded-r-lg',\n state === 'error' && 'border-error',\n state === 'alert' && 'border-alert',\n state === 'success' && 'border-success',\n !state && 'border-outline',\n className\n )}\n {...rest}\n {...buttonProps}\n aria-label={rest['aria-label'] || (buttonProps['aria-label'] as string)}\n aria-controls={fieldId}\n disabled={isDisabled}\n >\n {children || (\n <Icon>\n <Plus />\n </Icon>\n )}\n </IconButton>\n </div>\n )\n }}\n />\n )\n}\n\nconst DecrementButton = ({\n children,\n design = 'ghost',\n intent = 'neutral',\n className,\n ref: forwardedRef,\n disabled,\n ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n const { fieldId, state } = useStepperContext()\n\n return (\n <NumberField.Decrement\n render={buttonProps => {\n const isDisabled = disabled || ('disabled' in buttonProps && (buttonProps as any).disabled)\n const isReadOnly = 'readOnly' in buttonProps && (buttonProps as any).readOnly\n const isInactive = isDisabled || isReadOnly\n\n return (\n <div\n className={cx('rounded-l-lg', isInactive ? 'bg-on-surface/dim-5' : null)}\n data-spark-component=\"stepper-decrement-button\"\n >\n <IconButton\n ref={forwardedRef}\n design={design}\n intent={intent}\n className={cx(\n 'overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0',\n 'rounded-r-0! -mr-px rounded-l-lg',\n state === 'error' && 'border-error',\n state === 'alert' && 'border-alert',\n state === 'success' && 'border-success',\n !state && 'border-outline',\n className\n )}\n {...rest}\n {...buttonProps}\n aria-label={rest['aria-label'] || (buttonProps['aria-label'] as string)}\n aria-controls={fieldId}\n disabled={isDisabled}\n >\n {children || (\n <Icon>\n <Minus />\n </Icon>\n )}\n </IconButton>\n </div>\n )\n }}\n />\n )\n}\n\nexport const StepperIncrementButton = IncrementButton\n\nexport const StepperDecrementButton = DecrementButton\n\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\n","import { NumberField } from '@base-ui/react/number-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\n\nimport { Input as SparkInput } from '../input'\nimport { useStepperContext } from './Stepper'\nimport type { StepperInputProps } from './types'\n\nconst Input = ({ ref: forwardedRef, ...props }: StepperInputProps) => {\n const { inputRef, fieldId, fieldIsInvalid, fieldIsRequired } = useStepperContext()\n const ref = useMergeRefs(forwardedRef, inputRef)\n const { className = '', ...remainingProps } = props\n\n return (\n <div className=\"relative inline-flex w-full\">\n <NumberField.Input\n render={inputProps => {\n // Determine required attribute\n let required: boolean | undefined = undefined\n if (fieldIsRequired !== undefined) {\n required = fieldIsRequired\n } else if ('required' in inputProps) {\n required = (inputProps as any).required\n }\n\n // Determine aria-invalid attribute\n const ariaInvalid =\n fieldIsInvalid !== undefined ? fieldIsInvalid : inputProps['aria-invalid']\n\n return (\n <SparkInput\n ref={ref}\n {...inputProps}\n {...remainingProps}\n id={fieldId || inputProps.id}\n required={required}\n aria-invalid={ariaInvalid}\n className={`min-w-sz-56 text-center rounded-none! ${className}`}\n />\n )\n }}\n />\n </div>\n )\n}\n\nexport const StepperInput = Input\n\nInput.displayName = 'Stepper.Input'\n","import { Stepper as Root } from './Stepper'\nimport {\n StepperDecrementButton as DecrementButton,\n StepperIncrementButton as IncrementButton,\n} from './StepperButton'\nimport { StepperInput as Input } from './StepperInput'\n\n/**\n * A numeric input component with increment and decrement buttons for adjusting values.\n */\nexport const Stepper: typeof Root & {\n IncrementButton: typeof IncrementButton\n DecrementButton: typeof DecrementButton\n Input: typeof Input\n} = Object.assign(Root, { IncrementButton, DecrementButton, Input })\n\nStepper.displayName = 'Stepper'\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\nInput.displayName = 'Stepper.Input'\n\nexport type { StepperProps, StepperButtonProps, StepperInputProps } from './types'\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/stepper/Stepper.tsx","../../src/stepper/StepperButton.tsx","../../src/stepper/StepperInput.tsx","../../src/stepper/index.ts"],"sourcesContent":["import { NumberField } from '@base-ui/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { createContext, type PropsWithChildren, RefObject, useContext, useRef } from 'react'\n\nimport { inputGroupStyles } from '../input/InputGroup.styles'\nimport type { StepperProps } from './types'\n\ninterface StepperContextValue {\n inputRef: RefObject<HTMLInputElement | null>\n fieldId?: string\n fieldLabelId?: string\n fieldIsInvalid?: boolean\n fieldIsRequired?: boolean\n state?: 'error' | 'alert' | 'success'\n ariaLabel?: string\n}\n\nconst StepperContext = createContext<StepperContextValue | null>(null)\n\nexport const Stepper = ({\n children,\n formatOptions,\n minValue,\n maxValue,\n ref: forwardedRef,\n onValueChange,\n locale = 'fr',\n name: nameProp,\n ...stepperProps\n}: PropsWithChildren<StepperProps>) => {\n const inputRef = useRef<HTMLInputElement>(null)\n const formFieldControlProps = useFormFieldControl()\n const lastCommittedValueRef = useRef<number | null>(null)\n\n const name = formFieldControlProps.name ?? nameProp\n const disabled = formFieldControlProps.disabled ?? stepperProps.disabled\n const readOnly = formFieldControlProps.readOnly ?? stepperProps.readOnly\n const required = formFieldControlProps.isRequired ?? stepperProps.required\n\n // Base UI calls onValueChange on every keystroke, but react-aria only called it on blur.\n // We use onValueCommitted to preserve the old behavior where onValueChange is only called on blur for input changes,\n // but immediately for button clicks.\n const handleValueCommit = (value: number | null) => {\n if (onValueChange && value !== null && value !== lastCommittedValueRef.current) {\n lastCommittedValueRef.current = value\n onValueChange(value)\n }\n }\n\n // Extract aria-label to pass to input, not to NumberField.Root\n const { 'aria-label': ariaLabel, ...restStepperProps } = stepperProps\n\n return (\n <StepperContext.Provider\n value={{\n inputRef,\n fieldId: formFieldControlProps.id,\n fieldLabelId: formFieldControlProps.labelId,\n fieldIsInvalid: formFieldControlProps.isInvalid,\n fieldIsRequired: required,\n state: stepperProps.state,\n ariaLabel,\n }}\n >\n <NumberField.Root\n {...restStepperProps}\n format={formatOptions}\n min={minValue}\n max={maxValue}\n locale={locale}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n name={name}\n inputRef={inputRef}\n onValueCommitted={handleValueCommit}\n aria-describedby={formFieldControlProps.description}\n >\n <div\n data-spark-component=\"stepper\"\n ref={forwardedRef}\n className={cx(inputGroupStyles({ disabled, readOnly }), stepperProps.className)}\n >\n {children}\n </div>\n </NumberField.Root>\n </StepperContext.Provider>\n )\n}\n\nStepper.displayName = 'Stepper'\n\nexport const useStepperContext = () => {\n const context = useContext(StepperContext)\n\n if (!context) {\n throw Error('useStepperContext must be used within a Stepper provider')\n }\n\n return context\n}\n","import { NumberField } from '@base-ui/react/number-field'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { cx } from 'class-variance-authority'\nimport { type PropsWithChildren } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { useStepperContext } from './Stepper'\nimport type { StepperButtonProps } from './types'\n\nconst IncrementButton = ({\n children,\n design = 'ghost',\n intent = 'neutral',\n className,\n ref: forwardedRef,\n disabled,\n ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n const { fieldId, state } = useStepperContext()\n\n return (\n <NumberField.Increment\n render={buttonProps => {\n const isDisabled = disabled || ('disabled' in buttonProps && (buttonProps as any).disabled)\n const isReadOnly = 'readOnly' in buttonProps && (buttonProps as any).readOnly\n const isInactive = isDisabled || isReadOnly\n\n return (\n <div\n className={cx('rounded-r-lg', isInactive ? 'bg-on-surface/dim-5' : null)}\n data-spark-component=\"stepper-increment-button\"\n >\n <IconButton\n ref={forwardedRef}\n design={design}\n intent={intent}\n className={cx(\n 'overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0',\n 'rounded-l-0! -ml-px rounded-r-lg',\n state === 'error' && 'border-error',\n state === 'alert' && 'border-alert',\n state === 'success' && 'border-success',\n !state && 'border-outline',\n className\n )}\n {...rest}\n {...buttonProps}\n aria-label={rest['aria-label'] || (buttonProps['aria-label'] as string)}\n aria-controls={fieldId}\n disabled={isDisabled}\n >\n {children || (\n <Icon>\n <Plus />\n </Icon>\n )}\n </IconButton>\n </div>\n )\n }}\n />\n )\n}\n\nconst DecrementButton = ({\n children,\n design = 'ghost',\n intent = 'neutral',\n className,\n ref: forwardedRef,\n disabled,\n ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n const { fieldId, state } = useStepperContext()\n\n return (\n <NumberField.Decrement\n render={buttonProps => {\n const isDisabled = disabled || ('disabled' in buttonProps && (buttonProps as any).disabled)\n const isReadOnly = 'readOnly' in buttonProps && (buttonProps as any).readOnly\n const isInactive = isDisabled || isReadOnly\n\n return (\n <div\n className={cx('rounded-l-lg', isInactive ? 'bg-on-surface/dim-5' : null)}\n data-spark-component=\"stepper-decrement-button\"\n >\n <IconButton\n ref={forwardedRef}\n design={design}\n intent={intent}\n className={cx(\n 'overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0',\n 'rounded-r-0! -mr-px rounded-l-lg',\n state === 'error' && 'border-error',\n state === 'alert' && 'border-alert',\n state === 'success' && 'border-success',\n !state && 'border-outline',\n className\n )}\n {...rest}\n {...buttonProps}\n aria-label={rest['aria-label'] || (buttonProps['aria-label'] as string)}\n aria-controls={fieldId}\n disabled={isDisabled}\n >\n {children || (\n <Icon>\n <Minus />\n </Icon>\n )}\n </IconButton>\n </div>\n )\n }}\n />\n )\n}\n\nexport const StepperIncrementButton = IncrementButton\n\nexport const StepperDecrementButton = DecrementButton\n\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\n","import { NumberField } from '@base-ui/react/number-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\n\nimport { Input as SparkInput } from '../input'\nimport { useStepperContext } from './Stepper'\nimport type { StepperInputProps } from './types'\n\nconst Input = ({ ref: forwardedRef, ...props }: StepperInputProps) => {\n const { inputRef, fieldId, fieldLabelId, fieldIsInvalid, fieldIsRequired, ariaLabel } =\n useStepperContext()\n const ref = useMergeRefs(forwardedRef, inputRef)\n const { className = '', ...remainingProps } = props\n\n // Only use aria-label if not wrapped in a FormField with a label (fieldLabelId would be set by FormField.Label)\n const hasFormFieldLabel = !!fieldLabelId\n\n return (\n <div className=\"relative inline-flex w-full\">\n <NumberField.Input\n render={inputProps => {\n // Determine required attribute\n let required: boolean | undefined = undefined\n if (fieldIsRequired !== undefined) {\n required = fieldIsRequired\n } else if ('required' in inputProps) {\n required = (inputProps as any).required\n }\n\n // Determine aria-invalid attribute\n const ariaInvalid =\n fieldIsInvalid !== undefined ? fieldIsInvalid : inputProps['aria-invalid']\n\n return (\n <SparkInput\n ref={ref}\n {...inputProps}\n {...remainingProps}\n id={fieldId || inputProps.id}\n required={required}\n aria-invalid={ariaInvalid}\n aria-label={hasFormFieldLabel ? undefined : ariaLabel}\n className={`min-w-sz-56 text-center rounded-none! ${className}`}\n />\n )\n }}\n />\n </div>\n )\n}\n\nexport const StepperInput = Input\n\nInput.displayName = 'Stepper.Input'\n","import { Stepper as Root } from './Stepper'\nimport {\n StepperDecrementButton as DecrementButton,\n StepperIncrementButton as IncrementButton,\n} from './StepperButton'\nimport { StepperInput as Input } from './StepperInput'\n\n/**\n * A numeric input component with increment and decrement buttons for adjusting values.\n */\nexport const Stepper: typeof Root & {\n IncrementButton: typeof IncrementButton\n DecrementButton: typeof DecrementButton\n Input: typeof Input\n} = Object.assign(Root, { IncrementButton, DecrementButton, Input })\n\nStepper.displayName = 'Stepper'\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\nInput.displayName = 'Stepper.Input'\n\nexport type { StepperProps, StepperButtonProps, StepperInputProps } from './types'\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-ui/components",
|
|
3
|
-
"version": "17.5.6-beta.
|
|
3
|
+
"version": "17.5.6-beta.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Spark (Leboncoin design system) components.",
|
|
6
6
|
"exports": {
|
|
@@ -48,9 +48,9 @@
|
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
50
|
"@base-ui/react": "1.0.0",
|
|
51
|
-
"@spark-ui/hooks": "17.5.6-beta.
|
|
52
|
-
"@spark-ui/icons": "17.5.6-beta.
|
|
53
|
-
"@spark-ui/internal-utils": "17.5.6-beta.
|
|
51
|
+
"@spark-ui/hooks": "17.5.6-beta.3",
|
|
52
|
+
"@spark-ui/icons": "17.5.6-beta.3",
|
|
53
|
+
"@spark-ui/internal-utils": "17.5.6-beta.3",
|
|
54
54
|
"@zag-js/pagination": "1.30.0",
|
|
55
55
|
"@zag-js/react": "1.30.0",
|
|
56
56
|
"class-variance-authority": "0.7.1",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"react-snap-carousel": "0.5.1"
|
|
63
63
|
},
|
|
64
64
|
"peerDependencies": {
|
|
65
|
-
"@spark-ui/theme-utils": "17.5.6-beta.
|
|
65
|
+
"@spark-ui/theme-utils": "17.5.6-beta.3",
|
|
66
66
|
"react": "19.2.4",
|
|
67
67
|
"react-dom": "19.2.4",
|
|
68
68
|
"tailwindcss": "4.1.18"
|