@spark-ui/components 13.2.0 → 14.0.0-beta.2

package/dist/slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/slider/Slider.styles.ts","../../src/slider/SliderContext.tsx","../../src/slider/Slider.tsx","../../src/slider/SliderThumb.styles.ts","../../src/slider/SliderThumb.tsx","../../src/slider/SliderTrack.styles.ts","../../src/slider/SliderTrack.tsx","../../src/slider/index.ts"],"sourcesContent":["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  fieldLabelId?: string\n  fieldId?: string\n}\n\nexport const SliderContext = createContext<SliderContextInterface>({} as SliderContextInterface)\n\nexport const useSliderContext = () => useContext(SliderContext)\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { 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   * If wrapped with a FormField with a name, will be inherited from it.\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   * Sets the slider as interactive or not.\n   */\n  readOnly?: 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  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  name: nameProp,\n  ...rest\n}: SliderProps) => {\n  const field = useFormFieldControl()\n\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const name = field.name ?? nameProp\n\n  console.log('✅ field ', field.disabled)\n\n  return (\n    <SliderContext.Provider\n      value={{\n        intent,\n        shape,\n        fieldLabelId: field.labelId,\n        fieldId: field.id,\n      }}\n    >\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        disabled={disabled || readOnly}\n        name={name}\n        aria-describedby={field.description}\n        aria-invalid={field.isInvalid}\n        {...rest}\n      >\n        {children}\n      </RadixSlider.Root>\n    </SliderContext.Provider>\n  )\n}\n\nSlider.displayName = 'Slider'\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-focus',\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 { 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, fieldLabelId, fieldId } = 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      data-spark-component=\"slider-thumb\"\n      ref={ref}\n      asChild={asChild}\n      id={fieldId}\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      aria-labelledby={fieldLabelId}\n      {...rest}\n    />\n  )\n}\n\nSliderThumb.displayName = 'Slider.Thumb'\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 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\n      data-spark-component=\"slider-track\"\n      ref={ref}\n      asChild={asChild}\n      className={trackVariants({ shape })}\n      {...rest}\n    >\n      <RadixSlider.Range className={rangeVariants({ intent, shape, className })} />\n    </RadixSlider.Track>\n  )\n}\n\nSliderTrack.displayName = 'Slider.Track'\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"],"names":["rootStyles","cva","SliderContext","createContext","useSliderContext","useContext","Slider","asChild","intent","shape","children","className","ref","disabledProp","readOnlyProp","nameProp","rest","field","useFormFieldControl","disabled","readOnly","name","jsx","RadixSlider","thumbVariants","SliderThumb","onPointerDown","onKeyDown","onBlur","forwardedRef","fieldLabelId","fieldId","innerRef","useRef","setInteractionType","trackVariants","rangeVariants","SliderTrack","Root","Thumb","Track"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/slider/Slider.styles.ts","../../src/slider/SliderContext.tsx","../../src/slider/Slider.tsx","../../src/slider/SliderThumb.styles.ts","../../src/slider/SliderThumb.tsx","../../src/slider/SliderTrack.styles.ts","../../src/slider/SliderTrack.tsx","../../src/slider/index.ts"],"sourcesContent":["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 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, 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-focus',\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 { 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      data-spark-component=\"slider-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 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 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\n      data-spark-component=\"slider-track\"\n      ref={ref}\n      asChild={asChild}\n      className={trackVariants({ shape })}\n      {...rest}\n    >\n      <RadixSlider.Range className={rangeVariants({ intent, shape, className })} />\n    </RadixSlider.Track>\n  )\n}\n\nSliderTrack.displayName = 'Slider.Track'\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"],"names":["rootStyles","cva","SliderContext","createContext","useSliderContext","useContext","Slider","asChild","intent","shape","children","className","ref","rest","jsx","RadixSlider","thumbVariants","SliderThumb","onPointerDown","onKeyDown","onBlur","forwardedRef","innerRef","useRef","setInteractionType","trackVariants","rangeVariants","SliderTrack","Root","Thumb","Track"],"mappings":"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"}

package/dist/slider/index.mjs

@@ -1,58 +1,36 @@
-import { jsx as c } from "react/jsx-runtime";
-import { useFormFieldControl as T } from "@spark-ui/components/form-field";
-import { Slider as b } from "radix-ui";
-import { cva as f } from "class-variance-authority";
-import { createContext as w, useContext as N, useRef as x } from "react";
-const z = f([
+import { jsx as i } from "react/jsx-runtime";
+import { Slider as d } from "radix-ui";
+import { cva as l } from "class-variance-authority";
+import { createContext as y, useContext as k, useRef as T } from "react";
+const w = l([
   "flex relative h-sz-24 items-center",
   "touch-none select-none",
   "data-disabled:cursor-not-allowed data-disabled:opacity-dim-3"
-]), y = w({}), S = () => N(y), k = ({
-  asChild: n = !1,
-  intent: s = "basic",
-  shape: i = "square",
-  children: o,
-  className: d,
-  ref: a,
-  disabled: u,
-  readOnly: m,
-  name: p,
-  ...g
-}) => {
-  const r = T(), t = r.disabled ?? u, l = r.readOnly ?? m, e = r.name ?? p;
-  return console.log("✅ field ", r.disabled), /* @__PURE__ */ c(
-    y.Provider,
-    {
-      value: {
-        intent: s,
-        shape: i,
-        fieldLabelId: r.labelId,
-        fieldId: r.id
-      },
-      children: /* @__PURE__ */ c(
-        b.Root,
-        {
-          ref: a,
-          "data-spark-component": "slider",
-          asChild: n,
-          className: z({ className: d }),
-          dir: "ltr",
-          orientation: "horizontal",
-          inverted: !1,
-          minStepsBetweenThumbs: 0,
-          disabled: t || l,
-          name: e,
-          "aria-describedby": r.description,
-          "aria-invalid": r.isInvalid,
-          ...g,
-          children: o
-        }
-      )
-    }
-  );
-};
-k.displayName = "Slider";
-const I = f(
+]), p = y({}), g = () => k(p), h = ({
+  asChild: a = !1,
+  intent: t = "basic",
+  shape: n = "square",
+  children: s,
+  className: o,
+  ref: r,
+  ...b
+}) => /* @__PURE__ */ i(p.Provider, { value: { intent: t, shape: n }, children: /* @__PURE__ */ i(
+  d.Root,
+  {
+    ref: r,
+    "data-spark-component": "slider",
+    asChild: a,
+    className: w({ className: o }),
+    dir: "ltr",
+    orientation: "horizontal",
+    inverted: !1,
+    minStepsBetweenThumbs: 0,
+    ...b,
+    children: s
+  }
+) });
+h.displayName = "Slider";
+const N = l(
   [
     "block h-sz-24 w-sz-24 rounded-full cursor-pointer",
     "outline-hidden",
@@ -81,42 +59,40 @@ const I = f(
       intent: "basic"
     }
   }
-), h = ({
-  asChild: n = !1,
-  className: s,
-  onPointerDown: i,
-  onKeyDown: o,
-  onBlur: d,
-  ref: a,
-  ...u
+), f = ({
+  asChild: a = !1,
+  className: t,
+  onPointerDown: n,
+  onKeyDown: s,
+  onBlur: o,
+  ref: r,
+  ...b
 }) => {
-  const { intent: m, fieldLabelId: p, fieldId: g } = S(), r = x(null), t = a || r, l = (e) => {
-    typeof t == "function" || !t.current || (t.current.dataset.interaction = e.type);
+  const { intent: v } = g(), S = T(null), c = r || S, u = (e) => {
+    typeof c == "function" || !c.current || (c.current.dataset.interaction = e.type);
   };
-  return /* @__PURE__ */ c(
-    b.Thumb,
+  return /* @__PURE__ */ i(
+    d.Thumb,
     {
       "data-spark-component": "slider-thumb",
-      ref: t,
-      asChild: n,
-      id: g,
+      ref: c,
+      asChild: a,
       onPointerDown: (e) => {
-        l(e), i?.(e);
+        u(e), n?.(e);
       },
       onKeyDown: (e) => {
-        l(e), o?.(e);
+        u(e), s?.(e);
       },
       onBlur: (e) => {
-        l(e), d?.(e);
+        u(e), o?.(e);
       },
-      className: I({ intent: m, className: s }),
-      "aria-labelledby": p,
-      ...u
+      className: N({ intent: v, className: t }),
+      ...b
     }
   );
 };
-h.displayName = "Slider.Thumb";
-const V = f(["relative grow h-sz-4 bg-on-background/dim-4"], {
+f.displayName = "Slider.Thumb";
+const x = l(["relative grow h-sz-4 bg-on-background/dim-4"], {
   variants: {
     shape: {
       rounded: "rounded-sm",
@@ -126,7 +102,7 @@ const V = f(["relative grow h-sz-4 bg-on-background/dim-4"], {
   defaultVariants: {
     shape: "square"
   }
-}), q = f(["absolute h-full"], {
+}), z = l(["absolute h-full"], {
   variants: {
     intent: {
       main: ["bg-main"],
@@ -148,29 +124,29 @@ const V = f(["relative grow h-sz-4 bg-on-background/dim-4"], {
     intent: "basic",
     shape: "square"
   }
-}), v = ({ asChild: n = !1, className: s, ref: i, ...o }) => {
-  const { intent: d, shape: a } = S();
-  return /* @__PURE__ */ c(
-    b.Track,
+}), m = ({ asChild: a = !1, className: t, ref: n, ...s }) => {
+  const { intent: o, shape: r } = g();
+  return /* @__PURE__ */ i(
+    d.Track,
     {
       "data-spark-component": "slider-track",
-      ref: i,
-      asChild: n,
-      className: V({ shape: a }),
-      ...o,
-      children: /* @__PURE__ */ c(b.Range, { className: q({ intent: d, shape: a, className: s }) })
+      ref: n,
+      asChild: a,
+      className: x({ shape: r }),
+      ...s,
+      children: /* @__PURE__ */ i(d.Range, { className: z({ intent: o, shape: r, className: t }) })
     }
   );
 };
-v.displayName = "Slider.Track";
-const C = Object.assign(k, {
-  Thumb: h,
-  Track: v
+m.displayName = "Slider.Track";
+const V = Object.assign(h, {
+  Thumb: f,
+  Track: m
 });
-C.displayName = "Slider";
-h.displayName = "Slider.Thumb";
-v.displayName = "Slider.Track";
+V.displayName = "Slider";
+f.displayName = "Slider.Thumb";
+m.displayName = "Slider.Track";
 export {
-  C as Slider
+  V as Slider
 };
 //# sourceMappingURL=index.mjs.map

package/dist/slider/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/slider/Slider.styles.ts","../../src/slider/SliderContext.tsx","../../src/slider/Slider.tsx","../../src/slider/SliderThumb.styles.ts","../../src/slider/SliderThumb.tsx","../../src/slider/SliderTrack.styles.ts","../../src/slider/SliderTrack.tsx","../../src/slider/index.ts"],"sourcesContent":["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  fieldLabelId?: string\n  fieldId?: string\n}\n\nexport const SliderContext = createContext<SliderContextInterface>({} as SliderContextInterface)\n\nexport const useSliderContext = () => useContext(SliderContext)\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { 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   * If wrapped with a FormField with a name, will be inherited from it.\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   * Sets the slider as interactive or not.\n   */\n  readOnly?: 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  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  name: nameProp,\n  ...rest\n}: SliderProps) => {\n  const field = useFormFieldControl()\n\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const name = field.name ?? nameProp\n\n  console.log('✅ field ', field.disabled)\n\n  return (\n    <SliderContext.Provider\n      value={{\n        intent,\n        shape,\n        fieldLabelId: field.labelId,\n        fieldId: field.id,\n      }}\n    >\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        disabled={disabled || readOnly}\n        name={name}\n        aria-describedby={field.description}\n        aria-invalid={field.isInvalid}\n        {...rest}\n      >\n        {children}\n      </RadixSlider.Root>\n    </SliderContext.Provider>\n  )\n}\n\nSlider.displayName = 'Slider'\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-focus',\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 { 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, fieldLabelId, fieldId } = 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      data-spark-component=\"slider-thumb\"\n      ref={ref}\n      asChild={asChild}\n      id={fieldId}\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      aria-labelledby={fieldLabelId}\n      {...rest}\n    />\n  )\n}\n\nSliderThumb.displayName = 'Slider.Thumb'\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 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\n      data-spark-component=\"slider-track\"\n      ref={ref}\n      asChild={asChild}\n      className={trackVariants({ shape })}\n      {...rest}\n    >\n      <RadixSlider.Range className={rangeVariants({ intent, shape, className })} />\n    </RadixSlider.Track>\n  )\n}\n\nSliderTrack.displayName = 'Slider.Track'\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"],"names":["rootStyles","cva","SliderContext","createContext","useSliderContext","useContext","Slider","asChild","intent","shape","children","className","ref","disabledProp","readOnlyProp","nameProp","rest","field","useFormFieldControl","disabled","readOnly","name","jsx","RadixSlider","thumbVariants","SliderThumb","onPointerDown","onKeyDown","onBlur","forwardedRef","fieldLabelId","fieldId","innerRef","useRef","setInteractionType","trackVariants","rangeVariants","SliderTrack","Root","Thumb","Track"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/slider/Slider.styles.ts","../../src/slider/SliderContext.tsx","../../src/slider/Slider.tsx","../../src/slider/SliderThumb.styles.ts","../../src/slider/SliderThumb.tsx","../../src/slider/SliderTrack.styles.ts","../../src/slider/SliderTrack.tsx","../../src/slider/index.ts"],"sourcesContent":["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 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, 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-focus',\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 { 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      data-spark-component=\"slider-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 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 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\n      data-spark-component=\"slider-track\"\n      ref={ref}\n      asChild={asChild}\n      className={trackVariants({ shape })}\n      {...rest}\n    >\n      <RadixSlider.Range className={rangeVariants({ intent, shape, className })} />\n    </RadixSlider.Track>\n  )\n}\n\nSliderTrack.displayName = 'Slider.Track'\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"],"names":["rootStyles","cva","SliderContext","createContext","useSliderContext","useContext","Slider","asChild","intent","shape","children","className","ref","rest","jsx","RadixSlider","thumbVariants","SliderThumb","onPointerDown","onKeyDown","onBlur","forwardedRef","innerRef","useRef","setInteractionType","trackVariants","rangeVariants","SliderTrack","Root","Thumb","Track"],"mappings":"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"}

package/dist/useRenderSlot-DATwjgpo.js

@@ -0,0 +1,2 @@
+"use strict";const r=require("react/jsx-runtime"),s=require("./Slot-DQ8z2zsy.js");function u(e,t){const n=e?s.Slot:t;return e?({...o})=>r.jsx(n,{...o}):void 0}exports.useRenderSlot=u;
+//# sourceMappingURL=useRenderSlot-DATwjgpo.js.map

package/dist/useRenderSlot-DATwjgpo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRenderSlot-DATwjgpo.js","sources":["../src/drawer/useRenderSlot.tsx"],"sourcesContent":["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"],"names":["useRenderSlot","asChild","defaultTag","Component","Slot","props","jsx"],"mappings":"kFAEO,SAASA,EAAcC,EAAkBC,EAAoB,CAClE,MAAMC,EAAYF,EAAUG,EAAAA,KAAOF,EAEnC,OAAOD,EAAU,CAAC,CAAE,GAAGI,CAAA,IAAYC,MAACH,EAAA,CAAW,GAAGE,CAAA,CAAO,EAAK,MAChE"}

package/dist/useRenderSlot-LwWj8QbC.mjs

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+import { a as m } from "./Slot-D2Bbf8Gw.mjs";
+function u(o, t) {
+  const r = o ? m : t;
+  return o ? ({ ...n }) => /* @__PURE__ */ e(r, { ...n }) : void 0;
+}
+export {
+  u
+};
+//# sourceMappingURL=useRenderSlot-LwWj8QbC.mjs.map

package/dist/useRenderSlot-LwWj8QbC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRenderSlot-LwWj8QbC.mjs","sources":["../src/drawer/useRenderSlot.tsx"],"sourcesContent":["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"],"names":["useRenderSlot","asChild","defaultTag","Component","Slot","props","jsx"],"mappings":";;AAEO,SAASA,EAAcC,GAAkBC,GAAoB;AAClE,QAAMC,IAAYF,IAAUG,IAAOF;AAEnC,SAAOD,IAAU,CAAC,EAAE,GAAGI,EAAA,MAAY,gBAAAC,EAACH,GAAA,EAAW,GAAGE,EAAA,CAAO,IAAK;AAChE;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "13.2.0",
+  "version": "14.0.0-beta.2",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -54,9 +54,9 @@
     "@react-aria/toast": "^3.0.0-beta.18",
     "@react-stately/numberfield": "3.9.11",
     "@react-stately/toast": "^3.0.0-beta.7",
-    "@spark-ui/hooks": "^13.2.0",
-    "@spark-ui/icons": "^13.2.0",
-    "@spark-ui/internal-utils": "^13.2.0",
+    "@spark-ui/hooks": "^14.0.0-beta.2",
+    "@spark-ui/icons": "^14.0.0-beta.2",
+    "@spark-ui/internal-utils": "^14.0.0-beta.2",
     "@zag-js/pagination": "1.30.0",
     "@zag-js/react": "1.30.0",
     "class-variance-authority": "0.7.1",

package/dist/DialogContent.styles-B5pR8ECK.js

@@ -1,2 +0,0 @@
-"use strict";const a=require("class-variance-authority"),e=a.cva(["z-modal flex flex-col bg-surface group","focus-visible:outline-hidden focus-visible:u-outline","[&:not(:has(footer))]:pb-lg","[&:not(:has(header))]:pt-lg"],{variants:{size:{fullscreen:"fixed size-full top-0 left-0",sm:"max-w-sz-480",md:"max-w-sz-672",lg:"max-w-sz-864"},isNarrow:{true:[],false:[]}},compoundVariants:[{size:["sm","md","lg"],class:["fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2","max-h-[80%]","shadow-md rounded-lg","data-[state=open]:animate-fade-in","data-[state=closed]:animate-fade-out"]},{size:["sm","md","lg"],isNarrow:!1,class:["w-full"]}],defaultVariants:{size:"md",isNarrow:!1}});exports.dialogContentStyles=e;
-//# sourceMappingURL=DialogContent.styles-B5pR8ECK.js.map

package/dist/DialogContent.styles-B5pR8ECK.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DialogContent.styles-B5pR8ECK.js","sources":["../src/dialog/DialogContent.styles.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const dialogContentStyles = cva(\n  [\n    'z-modal flex flex-col bg-surface group',\n    'focus-visible:outline-hidden focus-visible:u-outline',\n    '[&:not(:has(footer))]:pb-lg',\n    '[&:not(:has(header))]:pt-lg',\n  ],\n  {\n    variants: {\n      size: {\n        fullscreen: 'fixed size-full top-0 left-0',\n        sm: 'max-w-sz-480',\n        md: 'max-w-sz-672',\n        lg: 'max-w-sz-864',\n      },\n      isNarrow: {\n        true: [],\n        false: [],\n      },\n    },\n    compoundVariants: [\n      {\n        size: ['sm', 'md', 'lg'],\n        class: [\n          'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n          'max-h-[80%]',\n          'shadow-md rounded-lg',\n          'data-[state=open]:animate-fade-in',\n          'data-[state=closed]:animate-fade-out',\n        ],\n      },\n      {\n        size: ['sm', 'md', 'lg'],\n        isNarrow: false,\n        class: ['w-full'],\n      },\n    ],\n    defaultVariants: {\n      size: 'md',\n      isNarrow: false,\n    },\n  }\n)\n\nexport type DialogContentStylesProps = VariantProps<typeof dialogContentStyles>\n"],"names":["dialogContentStyles","cva"],"mappings":"yDAEaA,EAAsBC,EAAAA,IACjC,CACE,yCACA,uDACA,8BACA,6BAAA,EAEF,CACE,SAAU,CACR,KAAM,CACJ,WAAY,+BACZ,GAAI,eACJ,GAAI,eACJ,GAAI,cAAA,EAEN,SAAU,CACR,KAAM,CAAA,EACN,MAAO,CAAA,CAAC,CACV,EAEF,iBAAkB,CAChB,CACE,KAAM,CAAC,KAAM,KAAM,IAAI,EACvB,MAAO,CACL,2DACA,cACA,uBACA,oCACA,sCAAA,CACF,EAEF,CACE,KAAM,CAAC,KAAM,KAAM,IAAI,EACvB,SAAU,GACV,MAAO,CAAC,QAAQ,CAAA,CAClB,EAEF,gBAAiB,CACf,KAAM,KACN,SAAU,EAAA,CACZ,CAEJ"}

package/dist/DialogContent.styles-_lRDsl8c.mjs

@@ -1,48 +0,0 @@
-import { cva as a } from "class-variance-authority";
-const s = a(
-  [
-    "z-modal flex flex-col bg-surface group",
-    "focus-visible:outline-hidden focus-visible:u-outline",
-    "[&:not(:has(footer))]:pb-lg",
-    "[&:not(:has(header))]:pt-lg"
-  ],
-  {
-    variants: {
-      size: {
-        fullscreen: "fixed size-full top-0 left-0",
-        sm: "max-w-sz-480",
-        md: "max-w-sz-672",
-        lg: "max-w-sz-864"
-      },
-      isNarrow: {
-        true: [],
-        false: []
-      }
-    },
-    compoundVariants: [
-      {
-        size: ["sm", "md", "lg"],
-        class: [
-          "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
-          "max-h-[80%]",
-          "shadow-md rounded-lg",
-          "data-[state=open]:animate-fade-in",
-          "data-[state=closed]:animate-fade-out"
-        ]
-      },
-      {
-        size: ["sm", "md", "lg"],
-        isNarrow: !1,
-        class: ["w-full"]
-      }
-    ],
-    defaultVariants: {
-      size: "md",
-      isNarrow: !1
-    }
-  }
-);
-export {
-  s as d
-};
-//# sourceMappingURL=DialogContent.styles-_lRDsl8c.mjs.map

package/dist/DialogContent.styles-_lRDsl8c.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"DialogContent.styles-_lRDsl8c.mjs","sources":["../src/dialog/DialogContent.styles.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const dialogContentStyles = cva(\n  [\n    'z-modal flex flex-col bg-surface group',\n    'focus-visible:outline-hidden focus-visible:u-outline',\n    '[&:not(:has(footer))]:pb-lg',\n    '[&:not(:has(header))]:pt-lg',\n  ],\n  {\n    variants: {\n      size: {\n        fullscreen: 'fixed size-full top-0 left-0',\n        sm: 'max-w-sz-480',\n        md: 'max-w-sz-672',\n        lg: 'max-w-sz-864',\n      },\n      isNarrow: {\n        true: [],\n        false: [],\n      },\n    },\n    compoundVariants: [\n      {\n        size: ['sm', 'md', 'lg'],\n        class: [\n          'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n          'max-h-[80%]',\n          'shadow-md rounded-lg',\n          'data-[state=open]:animate-fade-in',\n          'data-[state=closed]:animate-fade-out',\n        ],\n      },\n      {\n        size: ['sm', 'md', 'lg'],\n        isNarrow: false,\n        class: ['w-full'],\n      },\n    ],\n    defaultVariants: {\n      size: 'md',\n      isNarrow: false,\n    },\n  }\n)\n\nexport type DialogContentStylesProps = VariantProps<typeof dialogContentStyles>\n"],"names":["dialogContentStyles","cva"],"mappings":";AAEO,MAAMA,IAAsBC;AAAA,EACjC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,UAAU;AAAA,QACR,MAAM,CAAA;AAAA,QACN,OAAO,CAAA;AAAA,MAAC;AAAA,IACV;AAAA,IAEF,kBAAkB;AAAA,MAChB;AAAA,QACE,MAAM,CAAC,MAAM,MAAM,IAAI;AAAA,QACvB,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,MAAM,CAAC,MAAM,MAAM,IAAI;AAAA,QACvB,UAAU;AAAA,QACV,OAAO,CAAC,QAAQ;AAAA,MAAA;AAAA,IAClB;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ;"}