@pibit.ai/cure-design-system 0.6.24 → 0.6.26

package/dist/primitives/slider/range-slider.js

@@ -0,0 +1,115 @@
+import { jsxs as a, jsx as e, Fragment as S } from "react/jsx-runtime";
+import { Slider as $, SliderTrack as j, SliderThumb as V } from "react-aria-components";
+import { cx as s } from "../../utils/cn.js";
+function M({
+  minValue: m,
+  maxValue: u,
+  step: f = 1,
+  value: d,
+  onChange: h,
+  isDisabled: o = !1,
+  marks: r,
+  zoneLabels: t,
+  leftSegmentClassName: x = "bg-utility-error-300",
+  middleSegmentClassName: p = "bg-[#DEE1E8]",
+  rightSegmentClassName: g = "bg-utility-success-300",
+  trackClassName: N = "bg-[#DEE1E8]"
+}) {
+  const [y, b] = d, w = y < b;
+  return /* @__PURE__ */ a("div", { className: "flex flex-col gap-4", children: [
+    t ? /* @__PURE__ */ a("div", { className: "grid grid-cols-3 gap-2 text-center", children: [
+      /* @__PURE__ */ a("div", { className: "flex flex-col gap-0.5 items-start", children: [
+        /* @__PURE__ */ e("span", { className: "text-xs text-tertiary font-medium", children: t.left.title }),
+        /* @__PURE__ */ e("span", { className: "text-md font-bold text-primary", children: t.left.value })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "flex flex-col gap-0.5 items-center", children: [
+        /* @__PURE__ */ e("span", { className: "text-xs text-tertiary font-medium", children: t.middle.title }),
+        /* @__PURE__ */ e("span", { className: "text-md font-bold text-primary", children: t.middle.value })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "flex flex-col gap-0.5 items-end", children: [
+        /* @__PURE__ */ e("span", { className: "text-xs text-tertiary font-medium", children: t.right.title }),
+        /* @__PURE__ */ e("span", { className: "text-md font-bold text-primary", children: t.right.value })
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ e(
+      $,
+      {
+        minValue: m,
+        maxValue: u,
+        step: f,
+        value: d,
+        onChange: (l) => h(l),
+        isDisabled: o,
+        className: "w-full",
+        children: /* @__PURE__ */ e(j, { className: "relative h-8 w-full", children: ({ state: { getThumbPercent: l } }) => {
+          const i = l(0), n = l(1);
+          return /* @__PURE__ */ a(S, { children: [
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: s(
+                  "absolute top-1/2 h-2 w-full -translate-y-1/2 rounded-full",
+                  N
+                )
+              }
+            ),
+            i > 0 ? /* @__PURE__ */ e(
+              "span",
+              {
+                className: s(
+                  "absolute top-1/2 h-2 -translate-y-1/2 rounded-l-full",
+                  x
+                ),
+                style: {
+                  left: 0,
+                  width: `${i * 100}%`
+                }
+              }
+            ) : null,
+            w ? /* @__PURE__ */ e(
+              "span",
+              {
+                className: s("absolute top-1/2 h-2 -translate-y-1/2", p),
+                style: {
+                  left: `${i * 100}%`,
+                  width: `${(n - i) * 100}%`
+                }
+              }
+            ) : null,
+            n < 1 ? /* @__PURE__ */ e(
+              "span",
+              {
+                className: s(
+                  "absolute top-1/2 h-2 -translate-y-1/2 rounded-r-full",
+                  g
+                ),
+                style: {
+                  left: `${n * 100}%`,
+                  width: `${(1 - n) * 100}%`
+                }
+              }
+            ) : null,
+            [0, 1].map((c) => /* @__PURE__ */ e(
+              V,
+              {
+                index: c,
+                className: ({ isFocusVisible: v, isDragging: E }) => s(
+                  "top-1/2 box-border size-5 cursor-grab rounded-full bg-white shadow-md ring-1 ring-secondary",
+                  c === 0 ? "z-[2]" : "z-[1]",
+                  v && "outline-2 outline-offset-2 outline-focus-ring",
+                  E && "cursor-grabbing",
+                  o && "cursor-not-allowed opacity-60"
+                )
+              },
+              c
+            ))
+          ] });
+        } })
+      }
+    ),
+    r != null && r.length ? /* @__PURE__ */ e("div", { className: "flex justify-between px-0.5", children: r.map((l) => /* @__PURE__ */ e("span", { className: "w-5 text-center text-xs font-medium text-tertiary", children: l }, l)) }) : null
+  ] });
+}
+export {
+  M as RangeSlider
+};

package/dist/primitives/slider/slider.d.ts

@@ -0,0 +1,13 @@
+import { SliderProps as AriaSliderProps } from 'react-aria-components';
+declare const styles: {
+    default: string;
+    bottom: string;
+    "top-floating": string;
+};
+export interface SliderProps extends AriaSliderProps {
+    labelPosition?: keyof typeof styles;
+    labelFormatter?: (value: number) => string;
+}
+export declare const Slider: ({ labelPosition, minValue, maxValue, labelFormatter, formatOptions, ...rest }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=slider.d.ts.map

package/dist/primitives/slider/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/primitives/slider/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAU5E,QAAA,MAAM,MAAM;;;;CAKV,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,eAAe;IAChD,aAAa,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IACpC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC9C;AAED,eAAO,MAAM,MAAM,GAAI,+EAOpB,WAAW,4CAqDb,CAAC"}

package/dist/primitives/slider/slider.js

@@ -0,0 +1,55 @@
+import { jsxs as s, jsx as t, Fragment as y } from "react/jsx-runtime";
+import { Slider as x, Label as w, SliderTrack as S, SliderThumb as N, SliderOutput as O } from "react-aria-components";
+import { cx as n, sortCx as F } from "../../utils/cn.js";
+const $ = F({
+  default: "hidden",
+  bottom: "absolute top-2 left-1/2 -translate-x-1/2 translate-y-full text-md font-medium text-primary",
+  "top-floating": "absolute -top-2 left-1/2 -translate-x-1/2 -translate-y-full rounded-lg bg-primary px-2 py-1.5 text-xs font-semibold text-secondary shadow-lg ring-1 ring-secondary_alt"
+}), D = ({
+  labelPosition: i = "default",
+  minValue: d = 0,
+  maxValue: u = 100,
+  labelFormatter: a,
+  formatOptions: f,
+  ...m
+}) => /* @__PURE__ */ s(x, { ...m, minValue: d, maxValue: u, formatOptions: f ?? {
+  style: "percent",
+  maximumFractionDigits: 0
+}, children: [
+  /* @__PURE__ */ t(w, {}),
+  /* @__PURE__ */ t(S, { className: "relative h-6 w-full", children: ({ state: { values: e, getThumbValue: p, getThumbPercent: l, getFormattedValue: c } }) => {
+    const o = e.length === 1 ? 0 : l(0), g = e.length === 1 ? l(0) : l(1) - o;
+    return /* @__PURE__ */ s(y, { children: [
+      /* @__PURE__ */ t("span", { className: "absolute top-1/2 h-2 w-full -translate-y-1/2 rounded-full bg-tertiary" }),
+      /* @__PURE__ */ t(
+        "span",
+        {
+          className: "absolute top-1/2 h-2 w-full -translate-y-1/2 rounded-full bg-brand-solid",
+          style: {
+            left: `${o * 100}%`,
+            width: `${g * 100}%`
+          }
+        }
+      ),
+      e.map((_, r) => /* @__PURE__ */ t(
+        N,
+        {
+          index: r,
+          className: ({ isFocusVisible: b, isDragging: h }) => n(
+            "top-1/2 box-border size-6 cursor-grab rounded-full bg-slider-handle-bg shadow-md ring-2 ring-slider-handle-border ring-inset",
+            b && "outline-2 outline-offset-2 outline-focus-ring",
+            h && "cursor-grabbing"
+          ),
+          children: /* @__PURE__ */ t(O, { className: n("whitespace-nowrap", $[i]), children: a ? a(p(r)) : (
+            // The default format is a percent, so pass the thumb's 0–1 position in the range.
+            c(l(r))
+          ) })
+        },
+        r
+      ))
+    ] });
+  } })
+] });
+export {
+  D as Slider
+};