@spark-ui/components/dist/slider/index.mjs.map

Spark (Leboncoin design system) components.

{"version":3,"sources":["../../src/slider/Slider.tsx","../../src/slider/Slider.styles.ts","../../src/slider/SliderContext.tsx","../../src/slider/SliderThumb.tsx","../../src/slider/SliderThumb.styles.ts","../../src/slider/SliderTrack.tsx","../../src/slider/SliderTrack.styles.ts","../../src/slider/index.ts"],"sourcesContent":["import { Slider as RadixSlider } from 'radix-ui'\nimport { type PropsWithChildren, Ref } from 'react'\n\nimport { rootStyles } from './Slider.styles'\nimport { SliderContext } from './SliderContext'\nimport type { SliderRangeVariantsProps } from './SliderTrack.styles'\n\nexport interface SliderProps\n  extends Omit<\n      RadixSlider.SliderProps,\n      'dir' | 'orientation' | 'inverted' | 'minStepsBetweenThumbs'\n    >,\n    PropsWithChildren<SliderRangeVariantsProps> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.\n   */\n  defaultValue?: number[]\n  /**\n   * The controlled value of the slider. Must be used in conjunction with `onValueChange`.\n   */\n  value?: number[]\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: number[]) => void\n  /**\n   * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  onValueCommit?: (value: number[]) => void\n  /**\n   * The name of the slider. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * When `true`, prevents the user from interacting with the slider.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The minimum value for the range.\n   * @default 0\n   */\n  min?: number\n  /**\n   * The maximum value for the range.\n   * @default 100\n   */\n  max?: number\n  /**\n   * The stepping interval.\n   * @default 1\n   */\n  step?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Slider = ({\n  asChild = false,\n  intent = 'basic',\n  shape = 'square',\n  children,\n  className,\n  ref,\n  ...rest\n}: SliderProps) => (\n  <SliderContext.Provider value={{ intent, shape }}>\n    <RadixSlider.Root\n      ref={ref}\n      data-spark-component=\"slider\"\n      asChild={asChild}\n      className={rootStyles({ className })}\n      dir=\"ltr\"\n      orientation=\"horizontal\"\n      inverted={false}\n      minStepsBetweenThumbs={0}\n      {...rest}\n    >\n      {children}\n    </RadixSlider.Root>\n  </SliderContext.Provider>\n)\n\nSlider.displayName = 'Slider'\n","import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'flex relative h-sz-24 items-center',\n  'touch-none select-none',\n  'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n])\n","import { createContext, useContext } from 'react'\n\nimport type { SliderProps } from './Slider'\n\nexport type SliderContextInterface = Pick<SliderProps, 'intent' | 'shape'>\n\nexport const SliderContext = createContext<SliderContextInterface>({} as SliderContextInterface)\n\nexport const useSliderContext = () => useContext(SliderContext)\n","import { Slider as RadixSlider } from 'radix-ui'\nimport { type FocusEvent, type KeyboardEvent, type PointerEvent, Ref, useRef } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { thumbVariants } from './SliderThumb.styles'\n\nexport interface SliderThumbProps extends RadixSlider.SliderThumbProps {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   * @default false\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const SliderThumb = ({\n  asChild = false,\n  className,\n  onPointerDown,\n  onKeyDown,\n  onBlur,\n  ref: forwardedRef,\n  ...rest\n}: SliderThumbProps) => {\n  const { intent } = useSliderContext()\n\n  const innerRef = useRef(null)\n  const ref = forwardedRef || innerRef\n\n  const setInteractionType = (e: KeyboardEvent | FocusEvent | PointerEvent) => {\n    /**\n     * Radix Slider implementation uses `.focus()` and thus prevent us to handle\n     * distinctively focus/focus-visible styles. So we use a `data-interaction` attribute to stay\n     * aware of the type of event, and adapt styles if needed.\n     */\n    if (typeof ref === 'function' || !ref.current) return\n    ref.current.dataset.interaction = e.type\n  }\n\n  return (\n    <RadixSlider.Thumb\n      ref={ref}\n      asChild={asChild}\n      onPointerDown={(e: PointerEvent<HTMLSpanElement>) => {\n        setInteractionType(e)\n        onPointerDown?.(e)\n      }}\n      onKeyDown={(e: KeyboardEvent<HTMLSpanElement>) => {\n        setInteractionType(e)\n        onKeyDown?.(e)\n      }}\n      onBlur={(e: FocusEvent<HTMLSpanElement>) => {\n        setInteractionType(e)\n        onBlur?.(e)\n      }}\n      className={thumbVariants({ intent, className })}\n      {...rest}\n    />\n  )\n}\n\nSliderThumb.displayName = 'Slider.Thumb'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const thumbVariants = cva(\n  [\n    'block h-sz-24 w-sz-24 rounded-full cursor-pointer',\n    'outline-hidden',\n    'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue',\n    'data-[interaction=pointerdown]:focus-visible:ring-0!',\n    'data-disabled:hover:ring-0 data-disabled:hover:after:w-0 data-disabled:hover:after:h-0 data-disabled:cursor-not-allowed',\n    'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:z-hide',\n    'after:w-0 after:h-0 after:rounded-full after:border-solid after:border-sm after:transition-all duration-300',\n    'hover:after:w-sz-32 hover:after:h-sz-32',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['bg-main', 'after:bg-main-container after:border-main'],\n        support: ['bg-support', 'after:bg-support-container after:border-support'],\n        accent: ['bg-accent', 'after:bg-accent-container after:border-accent'],\n        basic: ['bg-basic', 'after:bg-basic-container after:border-basic'],\n        info: ['bg-info', 'after:bg-info-container after:border-info'],\n        neutral: ['bg-neutral', 'after:bg-neutral-container after:border-neutral'],\n        success: ['bg-success', 'after:bg-success-container after:border-success'],\n        alert: ['bg-alert', 'after:bg-alert-container after:border-alert'],\n        error: ['bg-error', 'after:bg-error-container after:border-error'],\n      },\n    },\n    defaultVariants: {\n      intent: 'basic',\n    },\n  }\n)\n\nexport type SliderThumbVariantsProps = VariantProps<typeof thumbVariants>\n","import { Slider as RadixSlider } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { rangeVariants, trackVariants } from './SliderTrack.styles'\n\nexport interface SliderTrackProps\n  extends RadixSlider.SliderTrackProps,\n    RadixSlider.SliderRangeProps {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   * @default false\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const SliderTrack = ({ asChild = false, className, ref, ...rest }: SliderTrackProps) => {\n  const { intent, shape } = useSliderContext()\n\n  return (\n    <RadixSlider.Track ref={ref} asChild={asChild} className={trackVariants({ shape })} {...rest}>\n      <RadixSlider.Range className={rangeVariants({ intent, shape, className })} />\n    </RadixSlider.Track>\n  )\n}\n\nSliderTrack.displayName = 'Slider.Track'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const trackVariants = cva(['relative grow h-sz-4 bg-on-background/dim-4'], {\n  variants: {\n    shape: {\n      rounded: 'rounded-sm',\n      square: 'rounded-0',\n    },\n  },\n  defaultVariants: {\n    shape: 'square',\n  },\n})\n\nexport const rangeVariants = cva(['absolute h-full'], {\n  variants: {\n    intent: {\n      main: ['bg-main'],\n      support: ['bg-support'],\n      accent: ['bg-accent'],\n      basic: ['bg-basic'],\n      info: ['bg-info'],\n      neutral: ['bg-neutral'],\n      success: ['bg-success'],\n      alert: ['bg-alert'],\n      error: ['bg-error'],\n    },\n    shape: {\n      rounded: 'rounded-sm',\n      square: 'rounded-0',\n    },\n  },\n  defaultVariants: {\n    intent: 'basic',\n    shape: 'square',\n  },\n})\n\nexport type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>\n","import { Slider as Root, type SliderProps } from './Slider'\nimport { SliderThumb as Thumb, type SliderThumbProps } from './SliderThumb'\nimport { SliderTrack as Track, type SliderTrackProps } from './SliderTrack'\n\nexport const Slider: typeof Root & {\n  Thumb: typeof Thumb\n  Track: typeof Track\n} = Object.assign(Root, {\n  Thumb,\n  Track,\n})\n\nSlider.displayName = 'Slider'\nThumb.displayName = 'Slider.Thumb'\nTrack.displayName = 'Slider.Track'\n\nexport type { SliderProps, SliderThumbProps, SliderTrackProps }\n"],"mappings":"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","names":["RadixSlider","cva","jsx","RadixSlider","RadixSlider","cva","jsx","RadixSlider","Slider"]}