@spark-ui/components 13.1.5 → 13.2.0

package/dist/slider/Slider.d.ts

@@ -25,6 +25,7 @@ export interface SliderProps extends Omit<RadixSlider.SliderProps, 'dir' | 'orie
     onValueCommit?: (value: number[]) => void;
     /**
      * The name of the slider. Submitted with its owning form as part of a name/value pair.
+     * If wrapped with a FormField with a name, will be inherited from it.
      */
     name?: string;
     /**
@@ -32,6 +33,10 @@ export interface SliderProps extends Omit<RadixSlider.SliderProps, 'dir' | 'orie
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Sets the slider as interactive or not.
+     */
+    readOnly?: boolean;
     /**
      * The minimum value for the range.
      * @default 0
@@ -50,6 +55,6 @@ export interface SliderProps extends Omit<RadixSlider.SliderProps, 'dir' | 'orie
     ref?: Ref<HTMLDivElement>;
 }
 export declare const Slider: {
-    ({ asChild, intent, shape, children, className, ref, ...rest }: SliderProps): import("react/jsx-runtime").JSX.Element;
+    ({ asChild, intent, shape, children, className, ref, disabled: disabledProp, readOnly: readOnlyProp, name: nameProp, ...rest }: SliderProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/slider/SliderContext.d.ts

@@ -1,4 +1,7 @@
 import { SliderProps } from './Slider';
-export type SliderContextInterface = Pick<SliderProps, 'intent' | 'shape'>;
+export type SliderContextInterface = Pick<SliderProps, 'intent' | 'shape'> & {
+    fieldLabelId?: string;
+    fieldId?: string;
+};
 export declare const SliderContext: import('react').Context<SliderContextInterface>;
 export declare const useSliderContext: () => SliderContextInterface;

package/dist/slider/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),d=require("radix-ui"),l=require("class-variance-authority"),f=require("react"),T=l.cva(["flex relative h-sz-24 items-center","touch-none select-none","data-disabled:cursor-not-allowed data-disabled:opacity-dim-3"]),m=f.createContext({}),h=()=>f.useContext(m),v=({asChild:a=!1,intent:t="basic",shape:n="square",children:s,className:i,ref:r,...u})=>o.jsx(m.Provider,{value:{intent:t,shape:n},children:o.jsx(d.Slider.Root,{ref:r,"data-spark-component":"slider",asChild:a,className:T({className:i}),dir:"ltr",orientation:"horizontal",inverted:!1,minStepsBetweenThumbs:0,...u,children:s})});v.displayName="Slider";const k=l.cva(["block h-sz-24 w-sz-24 rounded-full cursor-pointer","outline-hidden","focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-focus","data-[interaction=pointerdown]:focus-visible:ring-0!","data-disabled:hover:ring-0 data-disabled:hover:after:w-0 data-disabled:hover:after:h-0 data-disabled:cursor-not-allowed","after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:z-hide","after:w-0 after:h-0 after:rounded-full after:border-solid after:border-sm after:transition-all duration-300","hover:after:w-sz-32 hover:after:h-sz-32"],{variants:{intent:{main:["bg-main","after:bg-main-container after:border-main"],support:["bg-support","after:bg-support-container after:border-support"],accent:["bg-accent","after:bg-accent-container after:border-accent"],basic:["bg-basic","after:bg-basic-container after:border-basic"],info:["bg-info","after:bg-info-container after:border-info"],neutral:["bg-neutral","after:bg-neutral-container after:border-neutral"],success:["bg-success","after:bg-success-container after:border-success"],alert:["bg-alert","after:bg-alert-container after:border-alert"],error:["bg-error","after:bg-error-container after:border-error"]}},defaultVariants:{intent:"basic"}}),g=({asChild:a=!1,className:t,onPointerDown:n,onKeyDown:s,onBlur:i,ref:r,...u})=>{const{intent:y}=h(),x=f.useRef(null),c=r||x,b=e=>{typeof c=="function"||!c.current||(c.current.dataset.interaction=e.type)};return o.jsx(d.Slider.Thumb,{"data-spark-component":"slider-thumb",ref:c,asChild:a,onPointerDown:e=>{b(e),n?.(e)},onKeyDown:e=>{b(e),s?.(e)},onBlur:e=>{b(e),i?.(e)},className:k({intent:y,className:t}),...u})};g.displayName="Slider.Thumb";const w=l.cva(["relative grow h-sz-4 bg-on-background/dim-4"],{variants:{shape:{rounded:"rounded-sm",square:"rounded-0"}},defaultVariants:{shape:"square"}}),N=l.cva(["absolute h-full"],{variants:{intent:{main:["bg-main"],support:["bg-support"],accent:["bg-accent"],basic:["bg-basic"],info:["bg-info"],neutral:["bg-neutral"],success:["bg-success"],alert:["bg-alert"],error:["bg-error"]},shape:{rounded:"rounded-sm",square:"rounded-0"}},defaultVariants:{intent:"basic",shape:"square"}}),p=({asChild:a=!1,className:t,ref:n,...s})=>{const{intent:i,shape:r}=h();return o.jsx(d.Slider.Track,{"data-spark-component":"slider-track",ref:n,asChild:a,className:w({shape:r}),...s,children:o.jsx(d.Slider.Range,{className:N({intent:i,shape:r,className:t})})})};p.displayName="Slider.Track";const S=Object.assign(v,{Thumb:g,Track:p});S.displayName="Slider";g.displayName="Slider.Thumb";p.displayName="Slider.Track";exports.Slider=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),w=require("@spark-ui/components/form-field"),b=require("radix-ui"),u=require("class-variance-authority"),h=require("react"),q=u.cva(["flex relative h-sz-24 items-center","touch-none select-none","data-disabled:cursor-not-allowed data-disabled:opacity-dim-3"]),S=h.createContext({}),x=()=>h.useContext(S),T=({asChild:n=!1,intent:s="basic",shape:i="square",children:o,className:d,ref:a,disabled:f,readOnly:g,name:m,...p})=>{const r=w.useFormFieldControl(),t=r.disabled??f,l=r.readOnly??g,e=r.name??m;return console.log("✅ field ",r.disabled),c.jsx(S.Provider,{value:{intent:s,shape:i,fieldLabelId:r.labelId,fieldId:r.id},children:c.jsx(b.Slider.Root,{ref:a,"data-spark-component":"slider",asChild:n,className:q({className:d}),dir:"ltr",orientation:"horizontal",inverted:!1,minStepsBetweenThumbs:0,disabled:t||l,name:e,"aria-describedby":r.description,"aria-invalid":r.isInvalid,...p,children:o})})};T.displayName="Slider";const N=u.cva(["block h-sz-24 w-sz-24 rounded-full cursor-pointer","outline-hidden","focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-focus","data-[interaction=pointerdown]:focus-visible:ring-0!","data-disabled:hover:ring-0 data-disabled:hover:after:w-0 data-disabled:hover:after:h-0 data-disabled:cursor-not-allowed","after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:z-hide","after:w-0 after:h-0 after:rounded-full after:border-solid after:border-sm after:transition-all duration-300","hover:after:w-sz-32 hover:after:h-sz-32"],{variants:{intent:{main:["bg-main","after:bg-main-container after:border-main"],support:["bg-support","after:bg-support-container after:border-support"],accent:["bg-accent","after:bg-accent-container after:border-accent"],basic:["bg-basic","after:bg-basic-container after:border-basic"],info:["bg-info","after:bg-info-container after:border-info"],neutral:["bg-neutral","after:bg-neutral-container after:border-neutral"],success:["bg-success","after:bg-success-container after:border-success"],alert:["bg-alert","after:bg-alert-container after:border-alert"],error:["bg-error","after:bg-error-container after:border-error"]}},defaultVariants:{intent:"basic"}}),v=({asChild:n=!1,className:s,onPointerDown:i,onKeyDown:o,onBlur:d,ref:a,...f})=>{const{intent:g,fieldLabelId:m,fieldId:p}=x(),r=h.useRef(null),t=a||r,l=e=>{typeof t=="function"||!t.current||(t.current.dataset.interaction=e.type)};return c.jsx(b.Slider.Thumb,{"data-spark-component":"slider-thumb",ref:t,asChild:n,id:p,onPointerDown:e=>{l(e),i?.(e)},onKeyDown:e=>{l(e),o?.(e)},onBlur:e=>{l(e),d?.(e)},className:N({intent:g,className:s}),"aria-labelledby":m,...f})};v.displayName="Slider.Thumb";const j=u.cva(["relative grow h-sz-4 bg-on-background/dim-4"],{variants:{shape:{rounded:"rounded-sm",square:"rounded-0"}},defaultVariants:{shape:"square"}}),z=u.cva(["absolute h-full"],{variants:{intent:{main:["bg-main"],support:["bg-support"],accent:["bg-accent"],basic:["bg-basic"],info:["bg-info"],neutral:["bg-neutral"],success:["bg-success"],alert:["bg-alert"],error:["bg-error"]},shape:{rounded:"rounded-sm",square:"rounded-0"}},defaultVariants:{intent:"basic",shape:"square"}}),y=({asChild:n=!1,className:s,ref:i,...o})=>{const{intent:d,shape:a}=x();return c.jsx(b.Slider.Track,{"data-spark-component":"slider-track",ref:i,asChild:n,className:j({shape:a}),...o,children:c.jsx(b.Slider.Range,{className:z({intent:d,shape:a,className:s})})})};y.displayName="Slider.Track";const k=Object.assign(T,{Thumb:v,Track:y});k.displayName="Slider";v.displayName="Slider.Thumb";y.displayName="Slider.Track";exports.Slider=k;
 //# sourceMappingURL=index.js.map

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\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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"}
+{"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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"}

package/dist/slider/index.mjs

@@ -1,36 +1,58 @@
-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([
+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([
   "flex relative h-sz-24 items-center",
   "touch-none select-none",
   "data-disabled:cursor-not-allowed data-disabled:opacity-dim-3"
-]), 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(
+]), 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(
   [
     "block h-sz-24 w-sz-24 rounded-full cursor-pointer",
     "outline-hidden",
@@ -59,40 +81,42 @@ const N = l(
       intent: "basic"
     }
   }
-), f = ({
-  asChild: a = !1,
-  className: t,
-  onPointerDown: n,
-  onKeyDown: s,
-  onBlur: o,
-  ref: r,
-  ...b
+), h = ({
+  asChild: n = !1,
+  className: s,
+  onPointerDown: i,
+  onKeyDown: o,
+  onBlur: d,
+  ref: a,
+  ...u
 }) => {
-  const { intent: v } = g(), S = T(null), c = r || S, u = (e) => {
-    typeof c == "function" || !c.current || (c.current.dataset.interaction = e.type);
+  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);
   };
-  return /* @__PURE__ */ i(
-    d.Thumb,
+  return /* @__PURE__ */ c(
+    b.Thumb,
     {
       "data-spark-component": "slider-thumb",
-      ref: c,
-      asChild: a,
+      ref: t,
+      asChild: n,
+      id: g,
       onPointerDown: (e) => {
-        u(e), n?.(e);
+        l(e), i?.(e);
       },
       onKeyDown: (e) => {
-        u(e), s?.(e);
+        l(e), o?.(e);
       },
       onBlur: (e) => {
-        u(e), o?.(e);
+        l(e), d?.(e);
       },
-      className: N({ intent: v, className: t }),
-      ...b
+      className: I({ intent: m, className: s }),
+      "aria-labelledby": p,
+      ...u
     }
   );
 };
-f.displayName = "Slider.Thumb";
-const x = l(["relative grow h-sz-4 bg-on-background/dim-4"], {
+h.displayName = "Slider.Thumb";
+const V = f(["relative grow h-sz-4 bg-on-background/dim-4"], {
   variants: {
     shape: {
       rounded: "rounded-sm",
@@ -102,7 +126,7 @@ const x = l(["relative grow h-sz-4 bg-on-background/dim-4"], {
   defaultVariants: {
     shape: "square"
   }
-}), z = l(["absolute h-full"], {
+}), q = f(["absolute h-full"], {
   variants: {
     intent: {
       main: ["bg-main"],
@@ -124,29 +148,29 @@ const x = l(["relative grow h-sz-4 bg-on-background/dim-4"], {
     intent: "basic",
     shape: "square"
   }
-}), m = ({ asChild: a = !1, className: t, ref: n, ...s }) => {
-  const { intent: o, shape: r } = g();
-  return /* @__PURE__ */ i(
-    d.Track,
+}), v = ({ asChild: n = !1, className: s, ref: i, ...o }) => {
+  const { intent: d, shape: a } = S();
+  return /* @__PURE__ */ c(
+    b.Track,
     {
       "data-spark-component": "slider-track",
-      ref: n,
-      asChild: a,
-      className: x({ shape: r }),
-      ...s,
-      children: /* @__PURE__ */ i(d.Range, { className: z({ intent: o, shape: r, className: t }) })
+      ref: i,
+      asChild: n,
+      className: V({ shape: a }),
+      ...o,
+      children: /* @__PURE__ */ c(b.Range, { className: q({ intent: d, shape: a, className: s }) })
     }
   );
 };
-m.displayName = "Slider.Track";
-const V = Object.assign(h, {
-  Thumb: f,
-  Track: m
+v.displayName = "Slider.Track";
+const C = Object.assign(k, {
+  Thumb: h,
+  Track: v
 });
-V.displayName = "Slider";
-f.displayName = "Slider.Thumb";
-m.displayName = "Slider.Track";
+C.displayName = "Slider";
+h.displayName = "Slider.Thumb";
+v.displayName = "Slider.Track";
 export {
-  V as Slider
+  C 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\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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"}
+{"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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "13.1.5",
+  "version": "13.2.0",
   "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.1.5",
-    "@spark-ui/icons": "^13.1.5",
-    "@spark-ui/internal-utils": "^13.1.5",
+    "@spark-ui/hooks": "^13.2.0",
+    "@spark-ui/icons": "^13.2.0",
+    "@spark-ui/internal-utils": "^13.2.0",
     "@zag-js/pagination": "1.30.0",
     "@zag-js/react": "1.30.0",
     "class-variance-authority": "0.7.1",