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

Spark (Leboncoin design system) components.

// 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([
  "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(
  [
    "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-blue",
    "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
import { jsx as jsx2 } from "react/jsx-runtime";
var SliderThumb = ({
  asChild = false,
  className,
  onPointerDown,
  onKeyDown,
  onBlur,
  ref: forwardedRef,
  ...rest
}) => {
  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;
  };
  return /* @__PURE__ */ jsx2(
    RadixSlider2.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
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"], {
  variants: {
    shape: {
      rounded: "rounded-sm",
      square: "rounded-0"
    }
  },
  defaultVariants: {
    shape: "square"
  }
});
var rangeVariants = cva3(["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
import { jsx as jsx3 } from "react/jsx-runtime";
var SliderTrack = ({ asChild = false, className, ref, ...rest }) => {
  const { intent, shape } = useSliderContext();
  return /* @__PURE__ */ jsx3(RadixSlider3.Track, { ref, asChild, className: trackVariants({ shape }), ...rest, children: /* @__PURE__ */ jsx3(RadixSlider3.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";
export {
  Slider2 as Slider
};
//# sourceMappingURL=index.mjs.map