@spark-ui/components 13.1.4 → 13.2.0

package/dist/slider/index.js

@@ -1,220 +1,2 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/slider/index.ts
-var slider_exports = {};
-__export(slider_exports, {
-  Slider: () => Slider2
-});
-module.exports = __toCommonJS(slider_exports);
-
-// src/slider/Slider.tsx
-var import_radix_ui = require("radix-ui");
-
-// src/slider/Slider.styles.ts
-var import_class_variance_authority = require("class-variance-authority");
-var rootStyles = (0, import_class_variance_authority.cva)([
-  "flex relative h-sz-24 items-center",
-  "touch-none select-none",
-  "data-disabled:cursor-not-allowed data-disabled:opacity-dim-3"
-]);
-
-// src/slider/SliderContext.tsx
-var import_react = require("react");
-var SliderContext = (0, import_react.createContext)({});
-var useSliderContext = () => (0, import_react.useContext)(SliderContext);
-
-// src/slider/Slider.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var Slider = ({
-  asChild = false,
-  intent = "basic",
-  shape = "square",
-  children,
-  className,
-  ref,
-  ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SliderContext.Provider, { value: { intent, shape }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  import_radix_ui.Slider.Root,
-  {
-    ref,
-    "data-spark-component": "slider",
-    asChild,
-    className: rootStyles({ className }),
-    dir: "ltr",
-    orientation: "horizontal",
-    inverted: false,
-    minStepsBetweenThumbs: 0,
-    ...rest,
-    children
-  }
-) });
-Slider.displayName = "Slider";
-
-// src/slider/SliderThumb.tsx
-var import_radix_ui2 = require("radix-ui");
-var import_react2 = require("react");
-
-// src/slider/SliderThumb.styles.ts
-var import_class_variance_authority2 = require("class-variance-authority");
-var thumbVariants = (0, import_class_variance_authority2.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"
-    }
-  }
-);
-
-// src/slider/SliderThumb.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var SliderThumb = ({
-  asChild = false,
-  className,
-  onPointerDown,
-  onKeyDown,
-  onBlur,
-  ref: forwardedRef,
-  ...rest
-}) => {
-  const { intent } = useSliderContext();
-  const innerRef = (0, import_react2.useRef)(null);
-  const ref = forwardedRef || innerRef;
-  const setInteractionType = (e) => {
-    if (typeof ref === "function" || !ref.current) return;
-    ref.current.dataset.interaction = e.type;
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_radix_ui2.Slider.Thumb,
-    {
-      "data-spark-component": "slider-thumb",
-      ref,
-      asChild,
-      onPointerDown: (e) => {
-        setInteractionType(e);
-        onPointerDown?.(e);
-      },
-      onKeyDown: (e) => {
-        setInteractionType(e);
-        onKeyDown?.(e);
-      },
-      onBlur: (e) => {
-        setInteractionType(e);
-        onBlur?.(e);
-      },
-      className: thumbVariants({ intent, className }),
-      ...rest
-    }
-  );
-};
-SliderThumb.displayName = "Slider.Thumb";
-
-// src/slider/SliderTrack.tsx
-var import_radix_ui3 = require("radix-ui");
-
-// src/slider/SliderTrack.styles.ts
-var import_class_variance_authority3 = require("class-variance-authority");
-var trackVariants = (0, import_class_variance_authority3.cva)(["relative grow h-sz-4 bg-on-background/dim-4"], {
-  variants: {
-    shape: {
-      rounded: "rounded-sm",
-      square: "rounded-0"
-    }
-  },
-  defaultVariants: {
-    shape: "square"
-  }
-});
-var rangeVariants = (0, import_class_variance_authority3.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"
-  }
-});
-
-// src/slider/SliderTrack.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var SliderTrack = ({ asChild = false, className, ref, ...rest }) => {
-  const { intent, shape } = useSliderContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_radix_ui3.Slider.Track,
-    {
-      "data-spark-component": "slider-track",
-      ref,
-      asChild,
-      className: trackVariants({ shape }),
-      ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui3.Slider.Range, { className: rangeVariants({ intent, shape, className }) })
-    }
-  );
-};
-SliderTrack.displayName = "Slider.Track";
-
-// src/slider/index.ts
-var Slider2 = Object.assign(Slider, {
-  Thumb: SliderThumb,
-  Track: SliderTrack
-});
-Slider2.displayName = "Slider";
-SliderThumb.displayName = "Slider.Thumb";
-SliderTrack.displayName = "Slider.Track";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Slider
-});
-//# sourceMappingURL=index.js.map
+"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,"sources":["../../src/slider/index.ts","../../src/slider/Slider.tsx","../../src/slider/Slider.styles.ts","../../src/slider/SliderContext.tsx","../../src/slider/SliderThumb.tsx","../../src/slider/SliderThumb.styles.ts","../../src/slider/SliderTrack.tsx","../../src/slider/SliderTrack.styles.ts"],"sourcesContent":["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","import { Slider as RadixSlider } from 'radix-ui'\nimport { type PropsWithChildren, Ref } from 'react'\n\nimport { rootStyles } from './Slider.styles'\nimport { SliderContext } from './SliderContext'\nimport type { SliderRangeVariantsProps } from './SliderTrack.styles'\n\nexport interface SliderProps\n  extends Omit<\n      RadixSlider.SliderProps,\n      'dir' | 'orientation' | 'inverted' | 'minStepsBetweenThumbs'\n    >,\n    PropsWithChildren<SliderRangeVariantsProps> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.\n   */\n  defaultValue?: number[]\n  /**\n   * The controlled value of the slider. Must be used in conjunction with `onValueChange`.\n   */\n  value?: number[]\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: number[]) => void\n  /**\n   * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  onValueCommit?: (value: number[]) => void\n  /**\n   * The name of the slider. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * When `true`, prevents the user from interacting with the slider.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The minimum value for the range.\n   * @default 0\n   */\n  min?: number\n  /**\n   * The maximum value for the range.\n   * @default 100\n   */\n  max?: number\n  /**\n   * The stepping interval.\n   * @default 1\n   */\n  step?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Slider = ({\n  asChild = false,\n  intent = 'basic',\n  shape = 'square',\n  children,\n  className,\n  ref,\n  ...rest\n}: SliderProps) => (\n  <SliderContext.Provider value={{ intent, shape }}>\n    <RadixSlider.Root\n      ref={ref}\n      data-spark-component=\"slider\"\n      asChild={asChild}\n      className={rootStyles({ className })}\n      dir=\"ltr\"\n      orientation=\"horizontal\"\n      inverted={false}\n      minStepsBetweenThumbs={0}\n      {...rest}\n    >\n      {children}\n    </RadixSlider.Root>\n  </SliderContext.Provider>\n)\n\nSlider.displayName = 'Slider'\n","import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'flex relative h-sz-24 items-center',\n  'touch-none select-none',\n  'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n])\n","import { createContext, useContext } from 'react'\n\nimport type { SliderProps } from './Slider'\n\nexport type SliderContextInterface = Pick<SliderProps, 'intent' | 'shape'>\n\nexport const SliderContext = createContext<SliderContextInterface>({} as SliderContextInterface)\n\nexport const useSliderContext = () => useContext(SliderContext)\n","import { Slider as RadixSlider } from 'radix-ui'\nimport { type FocusEvent, type KeyboardEvent, type PointerEvent, Ref, useRef } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { thumbVariants } from './SliderThumb.styles'\n\nexport interface SliderThumbProps extends RadixSlider.SliderThumbProps {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   * @default false\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const SliderThumb = ({\n  asChild = false,\n  className,\n  onPointerDown,\n  onKeyDown,\n  onBlur,\n  ref: forwardedRef,\n  ...rest\n}: SliderThumbProps) => {\n  const { intent } = useSliderContext()\n\n  const innerRef = useRef(null)\n  const ref = forwardedRef || innerRef\n\n  const setInteractionType = (e: KeyboardEvent | FocusEvent | PointerEvent) => {\n    /**\n     * Radix Slider implementation uses `.focus()` and thus prevent us to handle\n     * distinctively focus/focus-visible styles. So we use a `data-interaction` attribute to stay\n     * aware of the type of event, and adapt styles if needed.\n     */\n    if (typeof ref === 'function' || !ref.current) return\n    ref.current.dataset.interaction = e.type\n  }\n\n  return (\n    <RadixSlider.Thumb\n      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 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 { 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 { 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"],"mappings":"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","names":["Slider","RadixSlider","import_radix_ui","import_react","import_class_variance_authority","import_jsx_runtime","RadixSlider","import_radix_ui","import_class_variance_authority","import_jsx_runtime","RadixSlider","Slider"]}
+{"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,53 +1,58 @@
-// src/slider/Slider.tsx
-import { Slider as RadixSlider } from "radix-ui";
-
-// src/slider/Slider.styles.ts
-import { cva } from "class-variance-authority";
-var rootStyles = cva([
+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"
-]);
-
-// src/slider/SliderContext.tsx
-import { createContext, useContext } from "react";
-var SliderContext = createContext({});
-var useSliderContext = () => useContext(SliderContext);
-
-// src/slider/Slider.tsx
-import { jsx } from "react/jsx-runtime";
-var Slider = ({
-  asChild = false,
-  intent = "basic",
-  shape = "square",
-  children,
-  className,
-  ref,
-  ...rest
-}) => /* @__PURE__ */ jsx(SliderContext.Provider, { value: { intent, shape }, children: /* @__PURE__ */ jsx(
-  RadixSlider.Root,
-  {
-    ref,
-    "data-spark-component": "slider",
-    asChild,
-    className: rootStyles({ className }),
-    dir: "ltr",
-    orientation: "horizontal",
-    inverted: false,
-    minStepsBetweenThumbs: 0,
-    ...rest,
-    children
-  }
-) });
-Slider.displayName = "Slider";
-
-// src/slider/SliderThumb.tsx
-import { Slider as RadixSlider2 } from "radix-ui";
-import { useRef } from "react";
-
-// src/slider/SliderThumb.styles.ts
-import { cva as cva2 } from "class-variance-authority";
-var thumbVariants = cva2(
+]), 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",
@@ -76,57 +81,42 @@ var thumbVariants = cva2(
       intent: "basic"
     }
   }
-);
-
-// src/slider/SliderThumb.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var SliderThumb = ({
-  asChild = false,
-  className,
-  onPointerDown,
-  onKeyDown,
-  onBlur,
-  ref: forwardedRef,
-  ...rest
+), h = ({
+  asChild: n = !1,
+  className: s,
+  onPointerDown: i,
+  onKeyDown: o,
+  onBlur: d,
+  ref: a,
+  ...u
 }) => {
-  const { intent } = useSliderContext();
-  const innerRef = useRef(null);
-  const ref = forwardedRef || innerRef;
-  const setInteractionType = (e) => {
-    if (typeof ref === "function" || !ref.current) return;
-    ref.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__ */ jsx2(
-    RadixSlider2.Thumb,
+  return /* @__PURE__ */ c(
+    b.Thumb,
     {
       "data-spark-component": "slider-thumb",
-      ref,
-      asChild,
+      ref: t,
+      asChild: n,
+      id: g,
       onPointerDown: (e) => {
-        setInteractionType(e);
-        onPointerDown?.(e);
+        l(e), i?.(e);
       },
       onKeyDown: (e) => {
-        setInteractionType(e);
-        onKeyDown?.(e);
+        l(e), o?.(e);
       },
       onBlur: (e) => {
-        setInteractionType(e);
-        onBlur?.(e);
+        l(e), d?.(e);
       },
-      className: thumbVariants({ intent, className }),
-      ...rest
+      className: I({ intent: m, className: s }),
+      "aria-labelledby": p,
+      ...u
     }
   );
 };
-SliderThumb.displayName = "Slider.Thumb";
-
-// src/slider/SliderTrack.tsx
-import { Slider as RadixSlider3 } from "radix-ui";
-
-// src/slider/SliderTrack.styles.ts
-import { cva as cva3 } from "class-variance-authority";
-var trackVariants = cva3(["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",
@@ -136,8 +126,7 @@ var trackVariants = cva3(["relative grow h-sz-4 bg-on-background/dim-4"], {
   defaultVariants: {
     shape: "square"
   }
-});
-var rangeVariants = cva3(["absolute h-full"], {
+}), q = f(["absolute h-full"], {
   variants: {
     intent: {
       main: ["bg-main"],
@@ -159,35 +148,29 @@ var rangeVariants = cva3(["absolute h-full"], {
     intent: "basic",
     shape: "square"
   }
-});
-
-// src/slider/SliderTrack.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var SliderTrack = ({ asChild = false, className, ref, ...rest }) => {
-  const { intent, shape } = useSliderContext();
-  return /* @__PURE__ */ jsx3(
-    RadixSlider3.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,
-      asChild,
-      className: trackVariants({ shape }),
-      ...rest,
-      children: /* @__PURE__ */ jsx3(RadixSlider3.Range, { className: rangeVariants({ intent, shape, className }) })
+      ref: i,
+      asChild: n,
+      className: V({ shape: a }),
+      ...o,
+      children: /* @__PURE__ */ c(b.Range, { className: q({ intent: d, shape: a, className: s }) })
     }
   );
 };
-SliderTrack.displayName = "Slider.Track";
-
-// src/slider/index.ts
-var Slider2 = Object.assign(Slider, {
-  Thumb: SliderThumb,
-  Track: SliderTrack
+v.displayName = "Slider.Track";
+const C = Object.assign(k, {
+  Thumb: h,
+  Track: v
 });
-Slider2.displayName = "Slider";
-SliderThumb.displayName = "Slider.Thumb";
-SliderTrack.displayName = "Slider.Track";
+C.displayName = "Slider";
+h.displayName = "Slider.Thumb";
+v.displayName = "Slider.Track";
 export {
-  Slider2 as Slider
+  C as Slider
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/slider/index.mjs.map

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

@@ -0,0 +1,12 @@
+import { Slot as RadixSlot } from 'radix-ui';
+import { HTMLAttributes, PropsWithChildren, ReactNode, Ref } from 'react';
+export declare const Slottable: typeof RadixSlot.Slottable;
+export type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+    ref?: Ref<HTMLElement>;
+};
+export declare const Slot: ({ ref, ...props }: SlotProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * When using Radix `Slot` component, it will consider its first child to merge its props with.
+ * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.
+ */
+export declare const wrapPolymorphicSlot: (asChild: boolean | undefined, children: ReactNode, callback: (children: ReactNode) => ReactNode) => ReactNode;

package/dist/slot/index.d.mts

@@ -1,16 +1 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Slot as Slot$1 } from 'radix-ui';
-import { PropsWithChildren, HTMLAttributes, Ref, ReactNode } from 'react';
-
-declare const Slottable: typeof Slot$1.Slottable;
-type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
-    ref?: Ref<HTMLElement>;
-};
-declare const Slot: ({ ref, ...props }: SlotProps) => react_jsx_runtime.JSX.Element;
-/**
- * When using Radix `Slot` component, it will consider its first child to merge its props with.
- * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.
- */
-declare const wrapPolymorphicSlot: (asChild: boolean | undefined, children: ReactNode, callback: (children: ReactNode) => ReactNode) => ReactNode;
-
-export { Slot, type SlotProps, Slottable, wrapPolymorphicSlot };
+export * from './Slot';