@thinkbuff/figma-react/dist/components/slider/slider.mjs

A Figma React UI components for creating plugins and widgets

import { jsx, jsxs } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import * as SliderPrimitive from '@radix-ui/react-slider';
import { cn } from '../../utils/cn.mjs';

const SliderRoot = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  SliderPrimitive.Root,
  {
    className: cn(
      "relative",
      "flex",
      "items-center",
      "w-full",
      "h-3",
      "touch-none",
      "select-none",
      "data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-3 data-[orientation=vertical]:h-full",
      className
    ),
    ...props,
    ref
  }
));
SliderRoot.displayName = SliderPrimitive.Root.displayName;
const SliderTrack = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  SliderPrimitive.Track,
  {
    className: cn(
      "relative",
      "h-0.5",
      "grow",
      "overflow-hidden",
      "rounded-full",
      "bg-figma-tertiary",
      "data-[orientation=vertical]:w-0.5",
      className
    ),
    ...props,
    ref
  }
));
SliderTrack.displayName = SliderPrimitive.Track.displayName;
const SliderRange = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  SliderPrimitive.Range,
  {
    className: cn(
      "absolute",
      "bg-figma-brand",
      "data-[orientation=horizontal]:h-full",
      "data-[orientation=vertical]:w-full",
      "data-[disabled]:bg-figma-icon-disabled",
      className
    ),
    ...props,
    ref
  }
));
SliderRange.displayName = SliderPrimitive.Range.displayName;
const SliderThumb = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  SliderPrimitive.Thumb,
  {
    className: cn(
      "flex",
      "items-center",
      "justify-center",
      "border",
      "border-solid",
      "border-transparent",
      "rounded-full",
      "bg-figma",
      "outline-solid",
      "outline-2",
      "outline-transparent",
      'after:block after:size-2 after:shrink-0 after:rounded-full after:content-[""] after:bg-figma-icon',
      "[&:not(data-disabled)]:focus:outline-figma-border-selected",
      "data-[disabled]:after:bg-figma-icon-disabled",
      "data-[disabled]:pointer-events-none",
      className
    ),
    ...props,
    ref
  }
));
SliderThumb.displayName = SliderPrimitive.Thumb.displayName;
const Slider = forwardRef((props, ref) => {
  const value = props.value ?? props.defaultValue ?? [0];
  return /* @__PURE__ */ jsxs(SliderRoot, { ...props, ref, children: [
    /* @__PURE__ */ jsx(SliderTrack, { children: /* @__PURE__ */ jsx(SliderRange, {}) }),
    value.map((_, index) => /* @__PURE__ */ jsx(SliderThumb, {}, index))
  ] });
});
Slider.displayName = SliderPrimitive.Root.displayName;

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