@spark-ui/components 10.19.0 → 10.19.2
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.
package/dist/stepper/index.js
CHANGED
|
@@ -207,7 +207,7 @@ var Input = ({ className, ...props }) => {
|
|
|
207
207
|
"data-spark-component": "stepper-input",
|
|
208
208
|
className: (0, import_class_variance_authority3.cx)(
|
|
209
209
|
// Base styles
|
|
210
|
-
"bg-surface text-on-surface h-sz-44 border-y-sm border-outline text-center",
|
|
210
|
+
"bg-surface text-on-surface px-lg h-sz-44 border-y-sm border-outline relative inline-flex w-full text-center",
|
|
211
211
|
"first:border-l-sm first:rounded-l-lg",
|
|
212
212
|
"last:border-r-sm last:rounded-r-lg",
|
|
213
213
|
// State styles
|
|
@@ -263,7 +263,14 @@ var Root = ({
|
|
|
263
263
|
step,
|
|
264
264
|
...field.id && { id: field.id },
|
|
265
265
|
...props,
|
|
266
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
266
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
267
|
+
import_number_field3.NumberField.Group,
|
|
268
|
+
{
|
|
269
|
+
className: (0, import_class_variance_authority4.cx)("group relative inline-flex w-full", className),
|
|
270
|
+
"data-field-state": state,
|
|
271
|
+
children
|
|
272
|
+
}
|
|
273
|
+
)
|
|
267
274
|
}
|
|
268
275
|
);
|
|
269
276
|
};
|
|
@@ -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 '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"]}
|
|
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 px-lg h-sz-44 border-y-sm border-outline relative inline-flex w-full 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\n className={cx('group relative inline-flex w-full', className)}\n data-field-state={state}\n >\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
|
@@ -92,7 +92,7 @@ var Input = ({ className, ...props }) => {
|
|
|
92
92
|
"data-spark-component": "stepper-input",
|
|
93
93
|
className: cx(
|
|
94
94
|
// Base styles
|
|
95
|
-
"bg-surface text-on-surface h-sz-44 border-y-sm border-outline text-center",
|
|
95
|
+
"bg-surface text-on-surface px-lg h-sz-44 border-y-sm border-outline relative inline-flex w-full text-center",
|
|
96
96
|
"first:border-l-sm first:rounded-l-lg",
|
|
97
97
|
"last:border-r-sm last:rounded-r-lg",
|
|
98
98
|
// State styles
|
|
@@ -148,7 +148,14 @@ var Root = ({
|
|
|
148
148
|
step,
|
|
149
149
|
...field.id && { id: field.id },
|
|
150
150
|
...props,
|
|
151
|
-
children: /* @__PURE__ */ jsx4(
|
|
151
|
+
children: /* @__PURE__ */ jsx4(
|
|
152
|
+
NumberField3.Group,
|
|
153
|
+
{
|
|
154
|
+
className: cx2("group relative inline-flex w-full", className),
|
|
155
|
+
"data-field-state": state,
|
|
156
|
+
children
|
|
157
|
+
}
|
|
158
|
+
)
|
|
152
159
|
}
|
|
153
160
|
);
|
|
154
161
|
};
|
|
@@ -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 '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
|
|
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 px-lg h-sz-44 border-y-sm border-outline relative inline-flex w-full 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\n className={cx('group relative inline-flex w-full', className)}\n data-field-state={state}\n >\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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-ui/components",
|
|
3
|
-
"version": "10.19.
|
|
3
|
+
"version": "10.19.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Spark (Leboncoin design system) components.",
|
|
6
6
|
"exports": {
|
|
@@ -51,9 +51,9 @@
|
|
|
51
51
|
"@react-aria/button": "3.13.0",
|
|
52
52
|
"@react-aria/toast": "^3.0.0-beta.18",
|
|
53
53
|
"@react-stately/toast": "^3.0.0-beta.7",
|
|
54
|
-
"@spark-ui/hooks": "^10.19.
|
|
55
|
-
"@spark-ui/icons": "^10.19.
|
|
56
|
-
"@spark-ui/internal-utils": "^10.19.
|
|
54
|
+
"@spark-ui/hooks": "^10.19.2",
|
|
55
|
+
"@spark-ui/icons": "^10.19.2",
|
|
56
|
+
"@spark-ui/internal-utils": "^10.19.2",
|
|
57
57
|
"@zag-js/pagination": "1.25.0",
|
|
58
58
|
"@zag-js/react": "1.25.0",
|
|
59
59
|
"class-variance-authority": "0.7.1",
|
|
@@ -80,5 +80,5 @@
|
|
|
80
80
|
"url": "https://github.com/leboncoin/spark-web/issues?q=is%3Aopen+label%3A%22Component%3A+button%22"
|
|
81
81
|
},
|
|
82
82
|
"homepage": "https://sparkui.vercel.app",
|
|
83
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "0b8863bcc02bc8385e30992abf96d361c67676ad"
|
|
84
84
|
}
|