laif-ds/dist/components/ui/slider.js

Design System di Laif con componenti React basati su principi di Atomic Design

"use client";
import { jsxs as u, jsx as l, Fragment as k } from "react/jsx-runtime";
import * as F from "react";
import { Root as y, Track as M, Range as P, Thumb as b } from "../../node_modules/@radix-ui/react-slider/dist/index.js";
import { Badge as x } from "./badge.js";
import { cn as c } from "../../lib/utils.js";
import { cva as w } from "../../node_modules/class-variance-authority/dist/index.js";
const S = w(
  "relative w-full grow overflow-hidden rounded-full bg-d-primary/20",
  {
    variants: {
      size: {
        base: "h-1.5",
        medium: "h-2",
        large: "h-2.5"
      }
    },
    defaultVariants: {
      size: "base"
    }
  }
), N = w(
  "block rounded-full ring-d-primary bg-d-background shadow transition-colors focus-visible:outline-none focus-visible:ring-d-primary transition-all duration-200 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      size: {
        base: "h-4 w-4 ring-[1.5px] focus-visible:ring-[4px]",
        medium: "h-5 w-5 ring-[1.5px] focus-visible:ring-[4.5px]",
        large: "h-6 w-6 ring-2 focus-visible:ring-[6px]"
      }
    },
    defaultVariants: {
      size: "base"
    }
  }
), B = F.forwardRef(
  ({
    className: C,
    size: m,
    formatValue: i,
    showValues: $ = !1,
    showStickyLabel: r = !1,
    stickyLabelSuffix: h = "",
    fillOffset: o = !1,
    offsetValue: v,
    steps: d,
    showStepMarkers: z = !1,
    ...e
  }, R) => {
    const s = v !== void 0 ? v : e.min !== void 0 && e.max !== void 0 ? (e.min + e.max) / 2 : 50, f = () => {
      if (!o) return 0;
      const a = e.min || 0, t = (e.max || 100) - a;
      return (s - a) / t * 100;
    }, g = (a) => d ? d.reduce((n, t) => Math.abs(t - a) < Math.abs(n - a) ? t : n) : a, T = (a) => {
      if (!d || !e.onValueChange) {
        e.onValueChange && e.onValueChange(a);
        return;
      }
      const n = g(a[0]), t = a.length > 1 ? [n, g(a[1])] : [n];
      e.onValueChange(t);
    }, j = (a) => {
      const n = e.min || 0, t = e.max || 100;
      return (a - n) / (t - n) * 100;
    };
    return /* @__PURE__ */ u("div", { className: "flex w-full flex-col gap-1", children: [
      /* @__PURE__ */ u(
        y,
        {
          ref: R,
          className: c(
            "relative flex w-full touch-none items-center select-none",
            C
          ),
          ...e,
          onValueChange: void 0,
          onValueChange: d ? T : e.onValueChange,
          children: [
            /* @__PURE__ */ u(M, { className: c(S({ size: m })), children: [
              d && z && /* @__PURE__ */ l("div", { className: "absolute h-full w-full", children: d.map((a, n) => /* @__PURE__ */ l(
                "div",
                {
                  className: "bg-d-muted-foreground/50 absolute -mt-1.5 h-4 w-1 rounded-full",
                  style: {
                    left: `calc(${j(a)}% - 2px)`,
                    top: "50%",
                    transform: "translateY(-50%)"
                  }
                },
                n
              )) }),
              o && e.value ? /* @__PURE__ */ u(k, { children: [
                /* @__PURE__ */ l("div", { className: "bg-d-muted/30 absolute h-full w-full" }),
                /* @__PURE__ */ l(
                  "div",
                  {
                    className: "bg-d-primary absolute h-full",
                    style: {
                      left: e.value[0] < s ? `${(e.value[0] - (e.min || 0)) / ((e.max || 100) - (e.min || 0)) * 100}%` : `${f()}%`,
                      right: e.value[0] > s ? `${100 - (e.value[0] - (e.min || 0)) / ((e.max || 100) - (e.min || 0)) * 100}%` : `${100 - f()}%`
                    }
                  }
                )
              ] }) : /* @__PURE__ */ l(P, { className: "bg-d-primary absolute h-full" })
            ] }),
            /* @__PURE__ */ l(
              b,
              {
                className: c(N({ size: m }), "relative"),
                children: r && e.value && /* @__PURE__ */ l(
                  x,
                  {
                    variant: "default",
                    className: "absolute -top-5 left-1/2 z-10 -translate-x-1/2 -translate-y-1/2",
                    children: i ? i(e.value[0]) : `${e.value[0]}${h}`
                  }
                )
              }
            ),
            e.value && e.value.length > 1 && /* @__PURE__ */ l(
              b,
              {
                className: c(N({ size: m }), "relative"),
                children: r && /* @__PURE__ */ l(
                  x,
                  {
                    variant: "default",
                    className: "absolute -top-5 left-1/2 z-10 -translate-x-1/2 -translate-y-1/2",
                    children: i ? i(e.value[1]) : `${e.value[1]}${h}`
                  }
                )
              }
            )
          ]
        }
      ),
      $ && e.value && /* @__PURE__ */ u("div", { className: "text-d-muted-foreground flex justify-between text-xs font-medium", children: [
        /* @__PURE__ */ l("span", { children: i ? i(e.value[0]) : e.value[0] }),
        e.value.length > 1 ? /* @__PURE__ */ l("span", { children: i ? i(e.value[1]) : e.value[1] }) : e.max !== void 0 ? /* @__PURE__ */ l("span", { children: i ? i(e.max) : e.max }) : null
      ] })
    ] });
  }
);
B.displayName = y.displayName;
export {
  B as Slider
};