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

Spark (Leboncoin design system) components.

"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-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
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,
    {
      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, { 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