npm - @spark-ui/components - Versions diffs - 10.18.0 → 10.18.1 - Mend

@spark-ui/components 10.18.0 → 10.18.1

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

package/dist/stepper/index.js +2 -0
package/dist/stepper/index.js.map +1 -1
package/dist/stepper/index.mjs +2 -0
package/dist/stepper/index.mjs.map +1 -1
package/package.json +5 -5

package/dist/stepper/index.js CHANGED Viewed

@@ -208,6 +208,8 @@ var Input = ({ className, ...props }) => {
       className: (0, import_class_variance_authority3.cx)(
         // Base styles
         "bg-surface text-on-surface h-sz-44 border-y-sm border-outline text-center",
+        "first:border-l-sm first:rounded-l-lg",
+        "last:border-r-sm last:rounded-r-lg",
         // State styles
         "group-data-[field-state=error]:border-error",
         "group-data-[field-state=alert]:border-alert",

package/dist/stepper/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/stepper/index.ts","../../src/stepper/Buttons.tsx","../../src/icon/Icon.tsx","../../src/slot/Slot.tsx","../../src/visually-hidden/VisuallyHidden.tsx","../../src/icon/Icon.styles.tsx","../../src/stepper/useRenderSlot.tsx","../../src/stepper/Input.tsx","../../src/stepper/Root.tsx"],"sourcesContent":["import { Decrement as DecrementButton, Increment as IncrementButton } from './Buttons'\nimport { Input } from './Input'\nimport { Root } from './Root'\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","import { NumberField } from '@base-ui-components/react/number-field'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nimport { Icon } from '../icon'\nimport { useRenderSlot } from './useRenderSlot'\n\nconst styles = cva(\n [\n // Base styles\n 'border-outline border-sm min-w-sz-44 text-on-surface flex cursor-pointer items-center justify-center bg-clip-padding select-none',\n 'hover:bg-neutral/dim-5',\n // Disabled and ReadOnly styles\n 'disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3 disabled:cursor-not-allowed',\n 'data-[disabled]:bg-on-surface/dim-5 data-[disabled]:text-on-surface/dim-3 data-[disabled]:cursor-not-allowed',\n 'data-[readonly]:bg-on-surface/dim-5 data-[readonly]:text-on-surface/dim-3 data-[readonly]:cursor-not-allowed',\n // State styles\n 'group-data-[field-state=error]:border-error',\n 'group-data-[field-state=alert]:border-alert',\n 'group-data-[field-state=success]:border-success',\n ],\n {\n variants: {\n placement: {\n left: 'rounded-l-lg',\n right: 'rounded-r-lg',\n },\n },\n }\n)\n\ninterface DecrementProps extends Omit<ComponentProps<typeof NumberField.Decrement>, 'render'> {\n children?: ReactNode\n asChild?: boolean\n}\n\ninterface IncrementProps extends Omit<ComponentProps<typeof NumberField.Increment>, 'render'> {\n children?: ReactNode\n asChild?: boolean\n}\n\nexport const Decrement = ({ children, className, asChild = false, ...props }: DecrementProps) => {\n const render = useRenderSlot(asChild, 'div')\n\n return (\n <NumberField.Decrement\n data-spark-component=\"stepper-decrement-button\"\n className={styles({\n placement: 'left',\n className,\n })}\n render={render}\n {...props}\n >\n {children \|\| (\n <Icon>\n <Minus />\n </Icon>\n )}\n </NumberField.Decrement>\n )\n}\n\nexport const Increment = ({ children, className, asChild = false, ...props }: IncrementProps) => {\n const render = useRenderSlot(asChild, 'div')\n\n return (\n <NumberField.Increment\n data-spark-component=\"stepper-increment-button\"\n className={styles({\n placement: 'right',\n className,\n })}\n render={render}\n {...props}\n >\n {children \|\| (\n <Icon>\n <Plus />\n </Icon>\n )}\n </NumberField.Increment>\n )\n}\n\nDecrement.displayName = 'Stepper.DecrementButton'\nIncrement.displayName = 'Stepper.IncrementButton'\n","import { Children, cloneElement, ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { iconStyles, IconVariantsProps } from './Icon.styles'\n\nexport interface IconProps extends IconVariantsProps, ComponentPropsWithoutRef<'svg'> {\n /*\n The svg icon that will be wrapped\n /\n children: ReactNode\n /\n The accessible label for the icon. This label will be visually hidden but announced to screen\n * reader users, similar to `alt` text for `img` tags.\n /\n label?: string\n}\n\nexport const Icon = ({\n label,\n className,\n size = 'current',\n intent = 'current',\n children,\n ...others\n}: IconProps) => {\n const child = Children.only(children)\n\n return (\n <>\n {cloneElement(child as ReactElement<Record<string, any>>, {\n className: iconStyles({ className, size, intent }),\n 'data-spark-component': 'icon',\n 'aria-hidden': 'true',\n focusable: 'false',\n ...others,\n })}\n\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\n </>\n )\n}\n\nIcon.displayName = 'Icon'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n PropsWithChildren,\n ReactNode,\n Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/\n When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n /\nexport const wrapPolymorphicSlot = (\n asChild: boolean \| undefined,\n children: ReactNode,\n callback: (children: ReactNode) => ReactNode\n) => {\n if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n return isValidElement(children)\n ? cloneElement(\n children,\n undefined,\n callback((children.props as { children: ReactNode }).children)\n )\n : null\n}\n","import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n /\n Change the default rendered element for the one passed as a child, merging their props and behavior.\n /\n asChild?: boolean\n ref?: Ref<HTMLElement>\n}\n\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n {...props}\n ref={ref}\n style={{\n // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n position: 'absolute',\n border: 0,\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n wordWrap: 'normal',\n ...props.style,\n }}\n />\n )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const iconStyles = cva(['fill-current shrink-0'], {\n variants: {\n /\n Color scheme of the icon.\n /\n intent: makeVariants<\n 'intent',\n [\n 'current',\n 'main',\n 'support',\n 'accent',\n 'basic',\n 'success',\n 'alert',\n 'error',\n 'info',\n 'neutral',\n ]\n >({\n current: ['text-current'],\n main: ['text-main'],\n support: ['text-support'],\n accent: ['text-accent'],\n basic: ['text-basic'],\n success: ['text-success'],\n alert: ['text-alert'],\n error: ['text-error'],\n info: ['text-info'],\n neutral: ['text-neutral'],\n }),\n /\n Sets the size of the icon.\n /\n size: makeVariants<'size', ['current', 'sm', 'md', 'lg', 'xl']>({\n current: ['u-current-font-size'],\n sm: ['w-sz-16', 'h-sz-16'],\n md: ['w-sz-24', 'h-sz-24'],\n lg: ['w-sz-32', 'h-sz-32'],\n xl: ['w-sz-40', 'h-sz-40'],\n }),\n },\n})\n\nexport type IconVariantsProps = VariantProps<typeof iconStyles>\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n const Component = asChild ? Slot : defaultTag\n\n return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { NumberField } from '@base-ui-components/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\ninterface Props extends Omit<ComponentProps<typeof NumberField.Input>, 'render'> {\n children?: ReactNode\n}\n\nexport const Input = ({ className, ...props }: Props) => {\n const field = useFormFieldControl()\n\n return (\n <NumberField.Input\n data-spark-component=\"stepper-input\"\n className={cx(\n // Base styles\n 'bg-surface text-on-surface h-sz-44 border-y-sm border-outline text-center',\n // State styles\n 'group-data-[field-state=error]:border-error',\n 'group-data-[field-state=alert]:border-alert',\n 'group-data-[field-state=success]:border-success',\n '',\n // Disabled and ReadOnly styles\n 'data-[disabled]:bg-on-surface/dim-5 data-[disabled]:text-on-surface/dim-3 data-[disabled]:cursor-not-allowed',\n 'data-[readonly]:bg-on-surface/dim-5',\n // Focus styles\n 'focus:outline-outline-high focus:z-raised focus:outline-2 focus:-outline-offset-1',\n className\n )}\n {...(field.description && { 'aria-describedby': field.description })}\n {...(field.isRequired && { required: true })}\n {...(field.state === 'error' && { 'aria-invalid': true })}\n {...props}\n />\n )\n}\n\nInput.displayName = 'Stepper.InputButton'\n","import { NumberField } from '@base-ui-components/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\n\nimport { StepperProps } from './types'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport const Root = ({\n children,\n allowWheelScrub = true,\n state: stateProp,\n minValue,\n maxValue,\n formatOptions,\n step: stepProp,\n className,\n ...props\n}: StepperProps) => {\n const render = useRenderSlot(true, 'div')\n\n const field = useFormFieldControl()\n const state = field.state ?? stateProp\n\n /\n By default, a percent format will increment in steps of 1 (100% on each increment)\n */\n const step = stepProp == null && formatOptions?.style === 'percent' ? 0.01 : stepProp\n\n return (\n <NumberField.Root\n data-spark-component=\"stepper\"\n allowWheelScrub={allowWheelScrub}\n render={render}\n min={minValue}\n max={maxValue}\n format={formatOptions}\n step={step}\n {...(field.id && { id: field.id })}\n {...props}\n >\n <NumberField.Group className={cx('group flex', className)} data-field-state={state}>\n {children}\n </NumberField.Group>\n </NumberField.Root>\n )\n}\n\nRoot.displayName = 'Stepper'\n"],"mappings":"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","names":["import_class_variance_authority","import_react","RadixSlot","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_number_field","import_class_variance_authority","import_jsx_runtime","import_number_field","import_form_field","import_class_variance_authority","import_jsx_runtime"]}
1	+ {"version":3,"sources":["../../src/stepper/index.ts","../../src/stepper/Buttons.tsx","../../src/icon/Icon.tsx","../../src/slot/Slot.tsx","../../src/visually-hidden/VisuallyHidden.tsx","../../src/icon/Icon.styles.tsx","../../src/stepper/useRenderSlot.tsx","../../src/stepper/Input.tsx","../../src/stepper/Root.tsx"],"sourcesContent":["import { Decrement as DecrementButton, Increment as IncrementButton } from './Buttons'\nimport { Input } from './Input'\nimport { Root } from './Root'\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","import { NumberField } from '@base-ui-components/react/number-field'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nimport { Icon } from '../icon'\nimport { useRenderSlot } from './useRenderSlot'\n\nconst styles = cva(\n [\n // Base styles\n 'border-outline border-sm min-w-sz-44 text-on-surface flex cursor-pointer items-center justify-center bg-clip-padding select-none',\n 'hover:bg-neutral/dim-5',\n // Disabled and ReadOnly styles\n 'disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3 disabled:cursor-not-allowed',\n 'data-[disabled]:bg-on-surface/dim-5 data-[disabled]:text-on-surface/dim-3 data-[disabled]:cursor-not-allowed',\n 'data-[readonly]:bg-on-surface/dim-5 data-[readonly]:text-on-surface/dim-3 data-[readonly]:cursor-not-allowed',\n // State styles\n 'group-data-[field-state=error]:border-error',\n 'group-data-[field-state=alert]:border-alert',\n 'group-data-[field-state=success]:border-success',\n ],\n {\n variants: {\n placement: {\n left: 'rounded-l-lg',\n right: 'rounded-r-lg',\n },\n },\n }\n)\n\ninterface DecrementProps extends Omit<ComponentProps<typeof NumberField.Decrement>, 'render'> {\n children?: ReactNode\n asChild?: boolean\n}\n\ninterface IncrementProps extends Omit<ComponentProps<typeof NumberField.Increment>, 'render'> {\n children?: ReactNode\n asChild?: boolean\n}\n\nexport const Decrement = ({ children, className, asChild = false, ...props }: DecrementProps) => {\n const render = useRenderSlot(asChild, 'div')\n\n return (\n <NumberField.Decrement\n data-spark-component=\"stepper-decrement-button\"\n className={styles({\n placement: 'left',\n className,\n })}\n render={render}\n {...props}\n >\n {children \|\| (\n <Icon>\n <Minus />\n </Icon>\n )}\n </NumberField.Decrement>\n )\n}\n\nexport const Increment = ({ children, className, asChild = false, ...props }: IncrementProps) => {\n const render = useRenderSlot(asChild, 'div')\n\n return (\n <NumberField.Increment\n data-spark-component=\"stepper-increment-button\"\n className={styles({\n placement: 'right',\n className,\n })}\n render={render}\n {...props}\n >\n {children \|\| (\n <Icon>\n <Plus />\n </Icon>\n )}\n </NumberField.Increment>\n )\n}\n\nDecrement.displayName = 'Stepper.DecrementButton'\nIncrement.displayName = 'Stepper.IncrementButton'\n","import { Children, cloneElement, ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { iconStyles, IconVariantsProps } from './Icon.styles'\n\nexport interface IconProps extends IconVariantsProps, ComponentPropsWithoutRef<'svg'> {\n /*\n The svg icon that will be wrapped\n /\n children: ReactNode\n /\n The accessible label for the icon. This label will be visually hidden but announced to screen\n * reader users, similar to `alt` text for `img` tags.\n /\n label?: string\n}\n\nexport const Icon = ({\n label,\n className,\n size = 'current',\n intent = 'current',\n children,\n ...others\n}: IconProps) => {\n const child = Children.only(children)\n\n return (\n <>\n {cloneElement(child as ReactElement<Record<string, any>>, {\n className: iconStyles({ className, size, intent }),\n 'data-spark-component': 'icon',\n 'aria-hidden': 'true',\n focusable: 'false',\n ...others,\n })}\n\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\n </>\n )\n}\n\nIcon.displayName = 'Icon'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n PropsWithChildren,\n ReactNode,\n Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/\n When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n /\nexport const wrapPolymorphicSlot = (\n asChild: boolean \| undefined,\n children: ReactNode,\n callback: (children: ReactNode) => ReactNode\n) => {\n if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n return isValidElement(children)\n ? cloneElement(\n children,\n undefined,\n callback((children.props as { children: ReactNode }).children)\n )\n : null\n}\n","import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n /\n Change the default rendered element for the one passed as a child, merging their props and behavior.\n /\n asChild?: boolean\n ref?: Ref<HTMLElement>\n}\n\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n {...props}\n ref={ref}\n style={{\n // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n position: 'absolute',\n border: 0,\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n wordWrap: 'normal',\n ...props.style,\n }}\n />\n )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const iconStyles = cva(['fill-current shrink-0'], {\n variants: {\n /\n Color scheme of the icon.\n /\n intent: makeVariants<\n 'intent',\n [\n 'current',\n 'main',\n 'support',\n 'accent',\n 'basic',\n 'success',\n 'alert',\n 'error',\n 'info',\n 'neutral',\n ]\n >({\n current: ['text-current'],\n main: ['text-main'],\n support: ['text-support'],\n accent: ['text-accent'],\n basic: ['text-basic'],\n success: ['text-success'],\n alert: ['text-alert'],\n error: ['text-error'],\n info: ['text-info'],\n neutral: ['text-neutral'],\n }),\n /\n Sets the size of the icon.\n /\n size: makeVariants<'size', ['current', 'sm', 'md', 'lg', 'xl']>({\n current: ['u-current-font-size'],\n sm: ['w-sz-16', 'h-sz-16'],\n md: ['w-sz-24', 'h-sz-24'],\n lg: ['w-sz-32', 'h-sz-32'],\n xl: ['w-sz-40', 'h-sz-40'],\n }),\n },\n})\n\nexport type IconVariantsProps = VariantProps<typeof iconStyles>\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n const Component = asChild ? Slot : defaultTag\n\n return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { NumberField } from '@base-ui-components/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\ninterface Props extends Omit<ComponentProps<typeof NumberField.Input>, 'render'> {\n children?: ReactNode\n}\n\nexport const Input = ({ className, ...props }: Props) => {\n const field = useFormFieldControl()\n\n return (\n <NumberField.Input\n data-spark-component=\"stepper-input\"\n className={cx(\n // Base styles\n 'bg-surface text-on-surface h-sz-44 border-y-sm border-outline text-center',\n 'first:border-l-sm first:rounded-l-lg',\n 'last:border-r-sm last:rounded-r-lg',\n // State styles\n 'group-data-[field-state=error]:border-error',\n 'group-data-[field-state=alert]:border-alert',\n 'group-data-[field-state=success]:border-success',\n '',\n // Disabled and ReadOnly styles\n 'data-[disabled]:bg-on-surface/dim-5 data-[disabled]:text-on-surface/dim-3 data-[disabled]:cursor-not-allowed',\n 'data-[readonly]:bg-on-surface/dim-5',\n // Focus styles\n 'focus:outline-outline-high focus:z-raised focus:outline-2 focus:-outline-offset-1',\n className\n )}\n {...(field.description && { 'aria-describedby': field.description })}\n {...(field.isRequired && { required: true })}\n {...(field.state === 'error' && { 'aria-invalid': true })}\n {...props}\n />\n )\n}\n\nInput.displayName = 'Stepper.InputButton'\n","import { NumberField } from '@base-ui-components/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\n\nimport { StepperProps } from './types'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport const Root = ({\n children,\n allowWheelScrub = true,\n state: stateProp,\n minValue,\n maxValue,\n formatOptions,\n step: stepProp,\n className,\n ...props\n}: StepperProps) => {\n const render = useRenderSlot(true, 'div')\n\n const field = useFormFieldControl()\n const state = field.state ?? stateProp\n\n /\n By default, a percent format will increment in steps of 1 (100% on each increment)\n */\n const step = stepProp == null && formatOptions?.style === 'percent' ? 0.01 : stepProp\n\n return (\n <NumberField.Root\n data-spark-component=\"stepper\"\n allowWheelScrub={allowWheelScrub}\n render={render}\n min={minValue}\n max={maxValue}\n format={formatOptions}\n step={step}\n {...(field.id && { id: field.id })}\n {...props}\n >\n <NumberField.Group className={cx('group flex', className)} data-field-state={state}>\n {children}\n </NumberField.Group>\n </NumberField.Root>\n )\n}\n\nRoot.displayName = 'Stepper'\n"],"mappings":"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","names":["import_class_variance_authority","import_react","RadixSlot","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_number_field","import_class_variance_authority","import_jsx_runtime","import_number_field","import_form_field","import_class_variance_authority","import_jsx_runtime"]}

package/dist/stepper/index.mjs CHANGED Viewed

@@ -93,6 +93,8 @@ var Input = ({ className, ...props }) => {
       className: cx(
         // Base styles
         "bg-surface text-on-surface h-sz-44 border-y-sm border-outline text-center",
+        "first:border-l-sm first:rounded-l-lg",
+        "last:border-r-sm last:rounded-r-lg",
         // State styles
         "group-data-[field-state=error]:border-error",
         "group-data-[field-state=alert]:border-alert",

package/dist/stepper/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/stepper/Buttons.tsx","../../src/stepper/useRenderSlot.tsx","../../src/stepper/Input.tsx","../../src/stepper/Root.tsx","../../src/stepper/index.ts"],"sourcesContent":["import { NumberField } from '@base-ui-components/react/number-field'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nimport { Icon } from '../icon'\nimport { useRenderSlot } from './useRenderSlot'\n\nconst styles = cva(\n [\n // Base styles\n 'border-outline border-sm min-w-sz-44 text-on-surface flex cursor-pointer items-center justify-center bg-clip-padding select-none',\n 'hover:bg-neutral/dim-5',\n // Disabled and ReadOnly styles\n 'disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3 disabled:cursor-not-allowed',\n 'data-[disabled]:bg-on-surface/dim-5 data-[disabled]:text-on-surface/dim-3 data-[disabled]:cursor-not-allowed',\n 'data-[readonly]:bg-on-surface/dim-5 data-[readonly]:text-on-surface/dim-3 data-[readonly]:cursor-not-allowed',\n // State styles\n 'group-data-[field-state=error]:border-error',\n 'group-data-[field-state=alert]:border-alert',\n 'group-data-[field-state=success]:border-success',\n ],\n {\n variants: {\n placement: {\n left: 'rounded-l-lg',\n right: 'rounded-r-lg',\n },\n },\n }\n)\n\ninterface DecrementProps extends Omit<ComponentProps<typeof NumberField.Decrement>, 'render'> {\n children?: ReactNode\n asChild?: boolean\n}\n\ninterface IncrementProps extends Omit<ComponentProps<typeof NumberField.Increment>, 'render'> {\n children?: ReactNode\n asChild?: boolean\n}\n\nexport const Decrement = ({ children, className, asChild = false, ...props }: DecrementProps) => {\n const render = useRenderSlot(asChild, 'div')\n\n return (\n <NumberField.Decrement\n data-spark-component=\"stepper-decrement-button\"\n className={styles({\n placement: 'left',\n className,\n })}\n render={render}\n {...props}\n >\n {children \|\| (\n <Icon>\n <Minus />\n </Icon>\n )}\n </NumberField.Decrement>\n )\n}\n\nexport const Increment = ({ children, className, asChild = false, ...props }: IncrementProps) => {\n const render = useRenderSlot(asChild, 'div')\n\n return (\n <NumberField.Increment\n data-spark-component=\"stepper-increment-button\"\n className={styles({\n placement: 'right',\n className,\n })}\n render={render}\n {...props}\n >\n {children \|\| (\n <Icon>\n <Plus />\n </Icon>\n )}\n </NumberField.Increment>\n )\n}\n\nDecrement.displayName = 'Stepper.DecrementButton'\nIncrement.displayName = 'Stepper.IncrementButton'\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n const Component = asChild ? Slot : defaultTag\n\n return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { NumberField } from '@base-ui-components/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\ninterface Props extends Omit<ComponentProps<typeof NumberField.Input>, 'render'> {\n children?: ReactNode\n}\n\nexport const Input = ({ className, ...props }: Props) => {\n const field = useFormFieldControl()\n\n return (\n <NumberField.Input\n data-spark-component=\"stepper-input\"\n className={cx(\n // Base styles\n 'bg-surface text-on-surface h-sz-44 border-y-sm border-outline text-center',\n // State styles\n 'group-data-[field-state=error]:border-error',\n 'group-data-[field-state=alert]:border-alert',\n 'group-data-[field-state=success]:border-success',\n '',\n // Disabled and ReadOnly styles\n 'data-[disabled]:bg-on-surface/dim-5 data-[disabled]:text-on-surface/dim-3 data-[disabled]:cursor-not-allowed',\n 'data-[readonly]:bg-on-surface/dim-5',\n // Focus styles\n 'focus:outline-outline-high focus:z-raised focus:outline-2 focus:-outline-offset-1',\n className\n )}\n {...(field.description && { 'aria-describedby': field.description })}\n {...(field.isRequired && { required: true })}\n {...(field.state === 'error' && { 'aria-invalid': true })}\n {...props}\n />\n )\n}\n\nInput.displayName = 'Stepper.InputButton'\n","import { NumberField } from '@base-ui-components/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\n\nimport { StepperProps } from './types'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport const Root = ({\n children,\n allowWheelScrub = true,\n state: stateProp,\n minValue,\n maxValue,\n formatOptions,\n step: stepProp,\n className,\n ...props\n}: StepperProps) => {\n const render = useRenderSlot(true, 'div')\n\n const field = useFormFieldControl()\n const state = field.state ?? stateProp\n\n /*\n By default, a percent format will increment in steps of 1 (100% on each increment)\n */\n const step = stepProp == null && formatOptions?.style === 'percent' ? 0.01 : stepProp\n\n return (\n <NumberField.Root\n data-spark-component=\"stepper\"\n allowWheelScrub={allowWheelScrub}\n render={render}\n min={minValue}\n max={maxValue}\n format={formatOptions}\n step={step}\n {...(field.id && { id: field.id })}\n {...props}\n >\n <NumberField.Group className={cx('group flex', className)} data-field-state={state}>\n {children}\n </NumberField.Group>\n </NumberField.Root>\n )\n}\n\nRoot.displayName = 'Stepper'\n","import { Decrement as DecrementButton, Increment as IncrementButton } from './Buttons'\nimport { Input } from './Input'\nimport { Root } from './Root'\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":";;;;;;;;;AAAA,SAAS,mBAAmB;AAC5B,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,WAAW;;;ACEiB;AAH9B,SAAS,cAAc,SAAkB,YAAoB;AAClE,QAAM,YAAY,UAAU,OAAO;AAEnC,SAAO,UAAU,CAAC,EAAE,GAAG,MAAM,MAAM,oBAAC,aAAW,GAAG,OAAO,IAAK;AAChE;;;ADoDU,gBAAAA,YAAA;AAjDV,IAAM,SAAS;AAAA,EACb;AAAA;AAAA,IAEE;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,WAAW;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF;AAYO,IAAM,YAAY,CAAC,EAAE,UAAU,WAAW,UAAU,OAAO,GAAG,MAAM,MAAsB;AAC/F,QAAM,SAAS,cAAc,SAAS,KAAK;AAE3C,SACE,gBAAAA;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACC,wBAAqB;AAAA,MACrB,WAAW,OAAO;AAAA,QAChB,WAAW;AAAA,QACX;AAAA,MACF,CAAC;AAAA,MACD;AAAA,MACC,GAAG;AAAA,MAEH,sBACC,gBAAAA,KAAC,QACC,0BAAAA,KAAC,SAAM,GACT;AAAA;AAAA,EAEJ;AAEJ;AAEO,IAAM,YAAY,CAAC,EAAE,UAAU,WAAW,UAAU,OAAO,GAAG,MAAM,MAAsB;AAC/F,QAAM,SAAS,cAAc,SAAS,KAAK;AAE3C,SACE,gBAAAA;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACC,wBAAqB;AAAA,MACrB,WAAW,OAAO;AAAA,QAChB,WAAW;AAAA,QACX;AAAA,MACF,CAAC;AAAA,MACD;AAAA,MACC,GAAG;AAAA,MAEH,sBACC,gBAAAA,KAAC,QACC,0BAAAA,KAAC,QAAK,GACR;AAAA;AAAA,EAEJ;AAEJ;AAEA,UAAU,cAAc;AACxB,UAAU,cAAc;;;AExFxB,SAAS,eAAAC,oBAAmB;AAC5B,SAAS,2BAA2B;AACpC,SAAS,UAAU;AAWf,gBAAAC,YAAA;AAJG,IAAM,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,MAAa;AACvD,QAAM,QAAQ,oBAAoB;AAElC,SACE,gBAAAA;AAAA,IAACD,aAAY;AAAA,IAAZ;AAAA,MACC,wBAAqB;AAAA,MACrB,WAAW;AAAA;AAAA,QAET;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAI,MAAM,eAAe,EAAE,oBAAoB,MAAM,YAAY;AAAA,MACjE,GAAI,MAAM,cAAc,EAAE,UAAU,KAAK;AAAA,MACzC,GAAI,MAAM,UAAU,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACtD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,MAAM,cAAc;;;~~ACtCpB~~,SAAS,eAAAE,oBAAmB;AAC5B,SAAS,uBAAAC,4BAA2B;AACpC,SAAS,MAAAC,WAAU;AAsCb,gBAAAC,YAAA;AAjCC,IAAM,OAAO,CAAC;AAAA,EACnB;AAAA,EACA,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA,GAAG;AACL,MAAoB;AAClB,QAAM,SAAS,cAAc,MAAM,KAAK;AAExC,QAAM,QAAQC,qBAAoB;AAClC,QAAM,QAAQ,MAAM,SAAS;AAK7B,QAAM,OAAO,YAAY,QAAQ,eAAe,UAAU,YAAY,OAAO;AAE7E,SACE,gBAAAD;AAAA,IAACE,aAAY;AAAA,IAAZ;AAAA,MACC,wBAAqB;AAAA,MACrB;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,KAAK;AAAA,MACL,QAAQ;AAAA,MACR;AAAA,MACC,GAAI,MAAM,MAAM,EAAE,IAAI,MAAM,GAAG;AAAA,MAC/B,GAAG;AAAA,MAEJ,0BAAAF,KAACE,aAAY,OAAZ,EAAkB,WAAWC,IAAG,cAAc,SAAS,GAAG,oBAAkB,OAC1E,UACH;AAAA;AAAA,EACF;AAEJ;AAEA,KAAK,cAAc;;;AC3CZ,IAAM,UAIT,OAAO,OAAO,MAAM,EAAE,4BAAiB,4BAAiB,MAAM,CAAC;AAEnE,QAAQ,cAAc;AACtB,UAAgB,cAAc;AAC9B,UAAgB,cAAc;AAC9B,MAAM,cAAc;","names":["jsx","NumberField","jsx","NumberField","useFormFieldControl","cx","jsx","useFormFieldControl","NumberField","cx"]}
1	+ {"version":3,"sources":["../../src/stepper/Buttons.tsx","../../src/stepper/useRenderSlot.tsx","../../src/stepper/Input.tsx","../../src/stepper/Root.tsx","../../src/stepper/index.ts"],"sourcesContent":["import { NumberField } from '@base-ui-components/react/number-field'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nimport { Icon } from '../icon'\nimport { useRenderSlot } from './useRenderSlot'\n\nconst styles = cva(\n [\n // Base styles\n 'border-outline border-sm min-w-sz-44 text-on-surface flex cursor-pointer items-center justify-center bg-clip-padding select-none',\n 'hover:bg-neutral/dim-5',\n // Disabled and ReadOnly styles\n 'disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3 disabled:cursor-not-allowed',\n 'data-[disabled]:bg-on-surface/dim-5 data-[disabled]:text-on-surface/dim-3 data-[disabled]:cursor-not-allowed',\n 'data-[readonly]:bg-on-surface/dim-5 data-[readonly]:text-on-surface/dim-3 data-[readonly]:cursor-not-allowed',\n // State styles\n 'group-data-[field-state=error]:border-error',\n 'group-data-[field-state=alert]:border-alert',\n 'group-data-[field-state=success]:border-success',\n ],\n {\n variants: {\n placement: {\n left: 'rounded-l-lg',\n right: 'rounded-r-lg',\n },\n },\n }\n)\n\ninterface DecrementProps extends Omit<ComponentProps<typeof NumberField.Decrement>, 'render'> {\n children?: ReactNode\n asChild?: boolean\n}\n\ninterface IncrementProps extends Omit<ComponentProps<typeof NumberField.Increment>, 'render'> {\n children?: ReactNode\n asChild?: boolean\n}\n\nexport const Decrement = ({ children, className, asChild = false, ...props }: DecrementProps) => {\n const render = useRenderSlot(asChild, 'div')\n\n return (\n <NumberField.Decrement\n data-spark-component=\"stepper-decrement-button\"\n className={styles({\n placement: 'left',\n className,\n })}\n render={render}\n {...props}\n >\n {children \|\| (\n <Icon>\n <Minus />\n </Icon>\n )}\n </NumberField.Decrement>\n )\n}\n\nexport const Increment = ({ children, className, asChild = false, ...props }: IncrementProps) => {\n const render = useRenderSlot(asChild, 'div')\n\n return (\n <NumberField.Increment\n data-spark-component=\"stepper-increment-button\"\n className={styles({\n placement: 'right',\n className,\n })}\n render={render}\n {...props}\n >\n {children \|\| (\n <Icon>\n <Plus />\n </Icon>\n )}\n </NumberField.Increment>\n )\n}\n\nDecrement.displayName = 'Stepper.DecrementButton'\nIncrement.displayName = 'Stepper.IncrementButton'\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n const Component = asChild ? Slot : defaultTag\n\n return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { NumberField } from '@base-ui-components/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\ninterface Props extends Omit<ComponentProps<typeof NumberField.Input>, 'render'> {\n children?: ReactNode\n}\n\nexport const Input = ({ className, ...props }: Props) => {\n const field = useFormFieldControl()\n\n return (\n <NumberField.Input\n data-spark-component=\"stepper-input\"\n className={cx(\n // Base styles\n 'bg-surface text-on-surface h-sz-44 border-y-sm border-outline text-center',\n 'first:border-l-sm first:rounded-l-lg',\n 'last:border-r-sm last:rounded-r-lg',\n // State styles\n 'group-data-[field-state=error]:border-error',\n 'group-data-[field-state=alert]:border-alert',\n 'group-data-[field-state=success]:border-success',\n '',\n // Disabled and ReadOnly styles\n 'data-[disabled]:bg-on-surface/dim-5 data-[disabled]:text-on-surface/dim-3 data-[disabled]:cursor-not-allowed',\n 'data-[readonly]:bg-on-surface/dim-5',\n // Focus styles\n 'focus:outline-outline-high focus:z-raised focus:outline-2 focus:-outline-offset-1',\n className\n )}\n {...(field.description && { 'aria-describedby': field.description })}\n {...(field.isRequired && { required: true })}\n {...(field.state === 'error' && { 'aria-invalid': true })}\n {...props}\n />\n )\n}\n\nInput.displayName = 'Stepper.InputButton'\n","import { NumberField } from '@base-ui-components/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\n\nimport { StepperProps } from './types'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport const Root = ({\n children,\n allowWheelScrub = true,\n state: stateProp,\n minValue,\n maxValue,\n formatOptions,\n step: stepProp,\n className,\n ...props\n}: StepperProps) => {\n const render = useRenderSlot(true, 'div')\n\n const field = useFormFieldControl()\n const state = field.state ?? stateProp\n\n /*\n By default, a percent format will increment in steps of 1 (100% on each increment)\n */\n const step = stepProp == null && formatOptions?.style === 'percent' ? 0.01 : stepProp\n\n return (\n <NumberField.Root\n data-spark-component=\"stepper\"\n allowWheelScrub={allowWheelScrub}\n render={render}\n min={minValue}\n max={maxValue}\n format={formatOptions}\n step={step}\n {...(field.id && { id: field.id })}\n {...props}\n >\n <NumberField.Group className={cx('group flex', className)} data-field-state={state}>\n {children}\n </NumberField.Group>\n </NumberField.Root>\n )\n}\n\nRoot.displayName = 'Stepper'\n","import { Decrement as DecrementButton, Increment as IncrementButton } from './Buttons'\nimport { Input } from './Input'\nimport { Root } from './Root'\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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","names":["jsx","NumberField","jsx","NumberField","useFormFieldControl","cx","jsx","useFormFieldControl","NumberField","cx"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "10.18.0",
+  "version": "10.18.1",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -51,9 +51,9 @@
     "@react-aria/button": "3.13.0",
     "@react-aria/toast": "^3.0.0-beta.18",
     "@react-stately/toast": "^3.0.0-beta.7",
-    "@spark-ui/hooks": "^10.18.0",
-    "@spark-ui/icons": "^10.18.0",
-    "@spark-ui/internal-utils": "^10.18.0",
+    "@spark-ui/hooks": "^10.18.1",
+    "@spark-ui/icons": "^10.18.1",
+    "@spark-ui/internal-utils": "^10.18.1",
     "@zag-js/pagination": "1.25.0",
     "@zag-js/react": "1.25.0",
     "class-variance-authority": "0.7.1",
@@ -80,5 +80,5 @@
     "url": "https://github.com/leboncoin/spark-web/issues?q=is%3Aopen+label%3A%22Component%3A+button%22"
   },
   "homepage": "https://sparkui.vercel.app",
-  "gitHead": "d8749d130451b72b1a499f1f175c7a6457635614"
+  "gitHead": "ae59cad6c7182d318131ea4e66dfe06b7be7a5fb"
 }