@serendie/ui/dist/components/Slider/Slider.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsxs as i, jsx as r } from "react/jsx-runtime";
import { slider_exports as o } from "../../node_modules/@ark-ui/react/dist/components/slider/slider.js";
import { forwardRef as S } from "react";
import { Tooltip as R } from "../Tooltip/Tooltip.js";
import { cx as u } from "../../styled-system/css/cx.js";
import { sva as w } from "../../styled-system/css/sva.js";
const p = w({
  slots: [
    "root",
    "labels",
    "label",
    "labelEnd",
    "control",
    "track",
    "range",
    "thumb",
    "markerGroup",
    "marker",
    "markerInRange",
    "markerAfterRange"
  ],
  base: {
    root: {
      display: "flex",
      flexDirection: "column",
      gap: "sd.system.dimension.spacing.small",
      width: "100%"
    },
    labels: {
      display: "flex",
      justifyContent: "space-between",
      width: "100%"
    },
    label: {
      color: "sd.system.color.component.onSurface",
      textStyle: "sd.system.typography.body.medium_compact",
      _disabled: {
        color: "sd.system.color.interaction.disabledOnSurface"
      }
    },
    labelEnd: {
      color: "sd.system.color.component.onSurface",
      textStyle: "sd.system.typography.body.medium_compact",
      "[data-disabled] &": {
        color: "sd.system.color.interaction.disabledOnSurface"
      }
    },
    control: {
      position: "relative",
      width: "100%"
    },
    track: {
      position: "relative",
      width: "100%",
      backgroundColor: "sd.system.color.component.outlineBright",
      borderRadius: "sd.system.dimension.radius.full",
      cursor: "pointer",
      zIndex: 0,
      _disabled: {
        backgroundColor: "sd.system.color.interaction.disabled",
        cursor: "default"
      }
    },
    range: {
      position: "absolute",
      top: 0,
      left: 0,
      backgroundColor: "sd.system.color.impression.secondary",
      borderRadius: "sd.system.dimension.radius.full",
      height: "100%",
      zIndex: 1,
      _disabled: {
        backgroundColor: "sd.system.color.interaction.disabledOnSurface"
      }
    },
    thumb: {
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      top: "50%",
      "--slider-thumb-transform": "translate(-50%, -50%)",
      backgroundColor: "sd.system.color.impression.primary",
      borderRadius: "sd.system.dimension.radius.full",
      borderWidth: 0,
      cursor: "pointer",
      outline: "none",
      zIndex: 2,
      "&:hover:not(:focus-visible):not([data-disabled]), &[data-dragging]:not([data-disabled])": {
        backgroundImage: "linear-gradient(0deg, {colors.sd.system.color.interaction.hovered} 0%, {colors.sd.system.color.interaction.hovered} 100%)"
      },
      "&:focus": {
        outline: "none"
      },
      "&:focus-visible": {
        backgroundColor: "sd.system.color.component.surface",
        borderWidth: 1,
        borderColor: "sd.system.color.impression.primary",
        boxShadow: "none",
        outline: "none"
      },
      _disabled: {
        backgroundColor: "sd.system.color.interaction.disabledOnSurface",
        cursor: "default"
      }
    },
    markerGroup: {
      position: "absolute",
      top: 0,
      left: 0,
      width: "100%",
      height: "100%",
      pointerEvents: "none",
      zIndex: 2
    },
    marker: {
      position: "absolute",
      width: 2,
      height: 2,
      borderRadius: "sd.system.dimension.radius.full",
      transform: "translate(-50%, -50%)",
      top: "50%"
    },
    markerInRange: {
      backgroundColor: "sd.system.color.impression.primary",
      _disabled: {
        backgroundColor: "sd.system.color.interaction.disabledOnSurface"
      }
    },
    markerAfterRange: {
      backgroundColor: "sd.system.color.interaction.disabledOnSurface"
    }
  },
  variants: {
    size: {
      medium: {
        track: {
          height: 4
        },
        thumb: {
          width: 16,
          height: 16
        },
        marker: {
          width: 2,
          height: 2
        }
      },
      large: {
        track: {
          height: 8
        },
        thumb: {
          width: 24,
          height: 24
        },
        marker: {
          width: 4,
          height: 4
        }
      }
    }
  },
  defaultVariants: {
    size: "medium"
  }
}), v = S(
  ({
    startLabel: d,
    endLabel: l,
    markerValues: a,
    showMarkers: b = !0,
    step: h = 1,
    className: g,
    min: n = 0,
    max: c = 100,
    ...y
  }, f) => {
    const [k, m] = p.splitVariantProps(y), e = p(k), x = a != null && a.length ? a.filter((s) => s > n && s < c) : Array.from({ length: 9 }, (s, t) => n + (c - n) * (t + 1) / 10);
    return /* @__PURE__ */ i(
      o.Root,
      {
        ref: f,
        className: u(e.root, g),
        min: n,
        max: c,
        step: h,
        ...m,
        children: [
          (d || l) && /* @__PURE__ */ i("div", { className: e.labels, children: [
            d && /* @__PURE__ */ r(o.Label, { className: e.label, children: d }),
            l && /* @__PURE__ */ r("span", { className: e.labelEnd, children: l })
          ] }),
          /* @__PURE__ */ i(o.Control, { className: e.control, children: [
            /* @__PURE__ */ i(o.Track, { className: e.track, children: [
              /* @__PURE__ */ r(o.Range, { className: e.range }),
              b && /* @__PURE__ */ r(o.Context, { children: (s) => /* @__PURE__ */ r(o.MarkerGroup, { className: e.markerGroup, children: x.map((t) => {
                const C = t <= s.value[0];
                return /* @__PURE__ */ r(
                  o.Marker,
                  {
                    value: t,
                    className: u(
                      e.marker,
                      C ? e.markerInRange : e.markerAfterRange
                    )
                  },
                  t
                );
              }) }) })
            ] }),
            /* @__PURE__ */ r(o.Context, { children: (s) => /* @__PURE__ */ r(
              R,
              {
                content: String(s.value[0]),
                placement: "top",
                openDelay: 0,
                closeDelay: 0,
                disabled: m.disabled || s.dragging,
                children: /* @__PURE__ */ r(o.Thumb, { index: 0, className: e.thumb, children: /* @__PURE__ */ r(o.HiddenInput, {}) })
              }
            ) })
          ] })
        ]
      }
    );
  }
);
v.displayName = "Slider";
export {
  v as Slider,
  p as SliderStyle
};