@vela-ui/react/dist/chunk-MNL4FEKJ.mjs

Vela UI React components

import {
  createContext
} from "./chunk-UHLSIXAN.mjs";

// src/components/slider.tsx
import React from "react";
import {
  Slider as AriaSlider,
  SliderOutput as AriaSliderOutput,
  SliderThumb as AriaSliderThumb,
  SliderTrack as AriaSliderTrack,
  composeRenderProps,
  SliderStateContext
} from "react-aria-components";
import { tv } from "tailwind-variants";
import { jsx } from "react/jsx-runtime";
var sliderVariants = tv({
  slots: {
    root: "group relative isolate flex touch-none flex-col gap-2",
    track: "bg-muted relative grow cursor-pointer rounded-full",
    range: "bg-primary absolute rounded-full",
    thumb: "border-primary bg-background ring-ring/50 top-[50%] left-[50%] block shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4",
    output: "text-muted-foreground text-sm"
  },
  variants: {
    orientation: {
      horizontal: {
        root: "",
        track: "w-full",
        range: "h-full"
      },
      vertical: {
        root: "",
        track: "h-full",
        range: "w-full"
      }
    },
    size: {
      sm: {
        track: "data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5",
        thumb: "size-4"
      },
      md: {
        track: "data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2",
        thumb: "size-5"
      },
      lg: {
        track: "data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5",
        thumb: "size-6"
      }
    },
    isDisabled: {
      true: {
        track: "cursor-default",
        range: "bg-primary/15",
        thumb: "pointer-events-none opacity-50"
      }
    },
    isFocusable: {
      true: {
        thumb: "ring-4 outline-hidden"
      }
    }
  },
  defaultVariants: {
    size: "md"
  }
});
var { root, track, range, thumb, output } = sliderVariants();
var [SliderProvider, useSliderContext] = createContext({
  name: "SliderContext"
});
function Slider({ className, size, children, ...props }) {
  return /* @__PURE__ */ jsx(
    AriaSlider,
    {
      "data-slot": "slider",
      className: composeRenderProps(
        className,
        (className2, renderProps) => root({
          ...renderProps,
          className: className2
        })
      ),
      ...props,
      children: composeRenderProps(children, (children2, { orientation }) => /* @__PURE__ */ jsx(SliderProvider, { value: { orientation, size }, children: children2 }))
    }
  );
}
function SliderOutput({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    AriaSliderOutput,
    {
      "data-slot": "slider-output",
      className: composeRenderProps(
        className,
        (className2, renderProps) => output({
          ...renderProps,
          className: className2
        })
      ),
      ...props
    }
  );
}
function SliderTrack({ className, ...props }) {
  const { orientation, size } = useSliderContext();
  return /* @__PURE__ */ jsx(
    AriaSliderTrack,
    {
      "data-slot": "slider-track",
      className: composeRenderProps(
        className,
        (className2, renderProps) => track({ ...renderProps, className: className2, orientation, size })
      ),
      ...props
    }
  );
}
function SliderRange({ className, style, ...props }) {
  const state = React.useContext(SliderStateContext);
  const { orientation, isDisabled, getThumbPercent, values } = state || {};
  const getStyle = () => {
    const percent0 = getThumbPercent ? getThumbPercent(0) * 100 : 0;
    const percent1 = getThumbPercent ? getThumbPercent(1) * 100 : 0;
    if ((values == null ? void 0 : values.length) === 1) {
      return orientation === "horizontal" ? { width: `${percent0}%` } : { height: `${percent0}%` };
    }
    return orientation === "horizontal" ? { left: `${percent0}%`, width: `${Math.abs(percent0 - percent1)}%` } : { bottom: `${percent0}%`, height: `${Math.abs(percent0 - percent1)}%` };
  };
  return /* @__PURE__ */ jsx(
    "div",
    {
      "data-slot": "slider-range",
      style: { ...getStyle(), ...style },
      className: range({ orientation, isDisabled, className }),
      ...props
    }
  );
}
function SliderThumb({ className, ...props }) {
  const { size } = useSliderContext();
  return /* @__PURE__ */ jsx(
    AriaSliderThumb,
    {
      "data-slot": "slider-thumb",
      className: composeRenderProps(
        className,
        (className2, renderProps) => thumb({
          ...renderProps,
          className: className2,
          size
        })
      ),
      ...props
    }
  );
}

export {
  Slider,
  SliderOutput,
  SliderTrack,
  SliderRange,
  SliderThumb
};