@simpli-route/apollo-ds 0.1.3 → 0.1.4

package/dist/index.es42.js

@@ -1,23 +1,21 @@
-import t from "react";
-const e = t, a = ({
+import n from "react";
+const e = n, l = ({
   title: r,
-  titleId: n,
-  ...l
-}, o) => /* @__PURE__ */ e.createElement("svg", Object.assign({
+  titleId: a,
+  ...o
+}, t) => /* @__PURE__ */ e.createElement("svg", Object.assign({
   fill: "currentColor",
   "aria-hidden": "true",
   viewBox: "0 0 24 24",
   xmlns: "http://www.w3.org/2000/svg",
-  ref: o,
-  "aria-labelledby": n
-}, l), r ? /* @__PURE__ */ e.createElement("title", {
-  id: n
+  ref: t,
+  "aria-labelledby": a
+}, o), r ? /* @__PURE__ */ e.createElement("title", {
+  id: a
 }, r) : null, /* @__PURE__ */ e.createElement("path", {
-  fillRule: "evenodd",
-  d: "M2 11.85c0-.47.35-.85.783-.85h18.434c.432 0 .783.38.783.85s-.35.85-.783.85H2.783c-.432 0-.783-.38-.783-.85",
-  clipRule: "evenodd"
-})), c = e.forwardRef(a);
-var s = c;
+  d: "M11.999 2C17.522 2 22 6.477 22 12s-4.478 10-10.001 10S2 17.523 2 12C1.999 6.478 6.476 2 11.999 2m0 1.5a8.501 8.501 0 1 0 0 17 8.501 8.501 0 0 0 0-17m-.004 6.999a.75.75 0 0 1 .744.648l.007.102.004 5.5a.75.75 0 0 1-1.494.103l-.006-.101-.004-5.501a.75.75 0 0 1 .75-.75zM12 7.002A1 1 0 1 1 12.063 9 1 1 0 0 1 12 7.002"
+})), c = e.forwardRef(l);
+var f = c;
 export {
-  s as M
+  f as I
 };

package/dist/index.es43.js

@@ -1,7 +1,7 @@
 import t from "react";
-const e = t, n = ({
+const e = t, a = ({
   title: r,
-  titleId: a,
+  titleId: n,
   ...l
 }, o) => /* @__PURE__ */ e.createElement("svg", Object.assign({
   fill: "currentColor",
@@ -9,15 +9,15 @@ const e = t, n = ({
   viewBox: "0 0 24 24",
   xmlns: "http://www.w3.org/2000/svg",
   ref: o,
-  "aria-labelledby": a
+  "aria-labelledby": n
 }, l), r ? /* @__PURE__ */ e.createElement("title", {
-  id: a
+  id: n
 }, r) : null, /* @__PURE__ */ e.createElement("path", {
   fillRule: "evenodd",
-  d: "M11.885 2c.433 0 .783.35.783.783v8.434h8.549a.783.783 0 1 1 0 1.566h-8.549v8.434a.783.783 0 1 1-1.567 0v-8.434H2.783a.783.783 0 1 1 0-1.566h8.318V2.783c0-.432.351-.783.784-.783",
+  d: "M2 11.85c0-.47.35-.85.783-.85h18.434c.432 0 .783.38.783.85s-.35.85-.783.85H2.783c-.432 0-.783-.38-.783-.85",
   clipRule: "evenodd"
-})), c = e.forwardRef(n);
-var d = c;
+})), c = e.forwardRef(a);
+var s = c;
 export {
-  d as P
+  s as M
 };

package/dist/index.es44.js

@@ -1,21 +1,23 @@
-import l from "react";
-const e = l, n = ({
+import t from "react";
+const e = t, n = ({
   title: r,
   titleId: a,
-  ...o
-}, t) => /* @__PURE__ */ e.createElement("svg", Object.assign({
+  ...l
+}, o) => /* @__PURE__ */ e.createElement("svg", Object.assign({
   fill: "currentColor",
   "aria-hidden": "true",
   viewBox: "0 0 24 24",
   xmlns: "http://www.w3.org/2000/svg",
-  ref: t,
+  ref: o,
   "aria-labelledby": a
-}, o), r ? /* @__PURE__ */ e.createElement("title", {
+}, l), r ? /* @__PURE__ */ e.createElement("title", {
   id: a
 }, r) : null, /* @__PURE__ */ e.createElement("path", {
-  d: "M2 15.892a.83.83 0 0 1 .242-.591l6.807-6.807a4.166 4.166 0 0 1 5.899 0l6.807 6.806a.835.835 0 0 1-.912 1.365.8.8 0 0 1-.271-.181l-6.807-6.807a2.5 2.5 0 0 0-3.533 0l-6.807 6.806A.833.833 0 0 1 2 15.893Z"
+  fillRule: "evenodd",
+  d: "M11.885 2c.433 0 .783.35.783.783v8.434h8.549a.783.783 0 1 1 0 1.566h-8.549v8.434a.783.783 0 1 1-1.567 0v-8.434H2.783a.783.783 0 1 1 0-1.566h8.318V2.783c0-.432.351-.783.784-.783",
+  clipRule: "evenodd"
 })), c = e.forwardRef(n);
-var i = c;
+var d = c;
 export {
-  i as U
+  d as P
 };

package/dist/index.es45.js

@@ -0,0 +1,21 @@
+import l from "react";
+const e = l, n = ({
+  title: r,
+  titleId: a,
+  ...o
+}, t) => /* @__PURE__ */ e.createElement("svg", Object.assign({
+  fill: "currentColor",
+  "aria-hidden": "true",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg",
+  ref: t,
+  "aria-labelledby": a
+}, o), r ? /* @__PURE__ */ e.createElement("title", {
+  id: a
+}, r) : null, /* @__PURE__ */ e.createElement("path", {
+  d: "M2 15.892a.83.83 0 0 1 .242-.591l6.807-6.807a4.166 4.166 0 0 1 5.899 0l6.807 6.806a.835.835 0 0 1-.912 1.365.8.8 0 0 1-.271-.181l-6.807-6.807a2.5 2.5 0 0 0-3.533 0l-6.807 6.806A.833.833 0 0 1 2 15.893Z"
+})), c = e.forwardRef(n);
+var i = c;
+export {
+  i as U
+};

package/dist/index.es46.js

@@ -0,0 +1,58 @@
+import { j as r } from "./index.es16.js";
+import { SliderThumb as l } from "react-aria-components";
+import { cn as i } from "./index.es17.js";
+import { Tooltip as d } from "./index.es12.js";
+import { TooltipTrigger as g } from "./index.es13.js";
+const j = ({
+  index: e,
+  valuePercent: m,
+  value: n,
+  suffix: a,
+  modeTooltip: p,
+  positionTooltip: o,
+  showTypeValue: s,
+  classNameThumb: t
+}) => /* @__PURE__ */ r.jsx(
+  "div",
+  {
+    className: i("absolute", s === "tooltip" ? "top-[-6px]" : "top-1/2"),
+    style: { left: `${m * 100}%`, transform: "translate(-50%, -50%)" },
+    children: s === "tooltip" ? /* @__PURE__ */ r.jsxs(g, { closeDelay: 100, delay: 100, children: [
+      /* @__PURE__ */ r.jsx("div", { children: /* @__PURE__ */ r.jsx(
+        l,
+        {
+          index: e,
+          className: i(
+            "dragging:bg-primary-100 size-5 rounded-full bg-primary-500 outline-none ring-black transition focus-visible:ring-2",
+            t
+          )
+        }
+      ) }),
+      /* @__PURE__ */ r.jsxs(
+        d,
+        {
+          mode: p,
+          placement: o,
+          size: "sm",
+          className: i("!text-sm", o === "top" ? "!mb-6" : "!mt-6"),
+          children: [
+            n,
+            a
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ r.jsx(
+      l,
+      {
+        index: e,
+        className: i(
+          "dragging:bg-primary-100 size-5 rounded-full bg-primary-500 outline-none ring-black transition focus-visible:ring-2",
+          t
+        )
+      }
+    )
+  }
+);
+export {
+  j as SliderThumb
+};

package/dist/index.es47.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/dist/index.es48.js

@@ -0,0 +1,4 @@
+var e = {};
+export {
+  e as __exports
+};

package/dist/index.es5.js

@@ -1,40 +1,41 @@
-import { j as s } from "./index.es15.js";
+import { j as o } from "./index.es16.js";
 import { forwardRef as h } from "react";
-import { useContextProps as j, ButtonContext as B, Button as w } from "react-aria-components";
-import { cn as C } from "./index.es16.js";
-import { buttonVariants as N } from "./index.es32.js";
-function g(r, i) {
-  const [c, a] = j(r, i, B), {
+import { useContextProps as B, ButtonContext as j, Button as N } from "react-aria-components";
+import { cn as w } from "./index.es17.js";
+import { buttonVariants as C } from "./index.es29.js";
+function I(r, i) {
+  const [a, c] = B(r, i, j), {
     intent: m = "secondary",
     size: f = "lg",
-    isDisabled: o = !1,
+    isDisabled: s = !1,
     isActive: l = !1,
     children: t,
     className: p,
     ...u
-  } = c, n = "flex h-full items-center overflow-hidden whitespace-nowrap";
-  return /* @__PURE__ */ s.jsx(
-    w,
+  } = a, n = "flex h-full items-center overflow-hidden whitespace-nowrap";
+  return /* @__PURE__ */ o.jsx(
+    N,
     {
-      ref: a,
-      className: ({ isPressed: e, isHovered: d, isFocusVisible: x }) => C(
-        N({
+      ref: c,
+      className: ({ isPressed: e, isHovered: d, isFocusVisible: x }) => w(
+        C({
           intent: m,
           size: f,
-          isDisabled: o,
+          isDisabled: s,
           isActive: l || e,
           isHovered: d,
           isFocused: x
         }),
         p
       ),
-      isDisabled: o,
+      isDisabled: s,
       ...u,
-      children: typeof t == "function" ? (e) => /* @__PURE__ */ s.jsx("span", { className: n + "p-2.", children: t(e) }) : /* @__PURE__ */ s.jsx("span", { className: n, children: t })
+      children: typeof t == "function" ? (e) => /* @__PURE__ */ o.jsx("span", { className: n + "p-2.", children: t(e) }) : /* @__PURE__ */ o.jsx("span", { className: n, children: t })
     }
   );
 }
-const A = h(g);
+const g = h(I);
+g.displayName = "IconButton";
 export {
-  A as IconButton
+  g as IconButton
 };

package/dist/index.es6.js

@@ -1,33 +1,34 @@
-import { j as t } from "./index.es15.js";
-import { InfoIcon as p } from "./index.es33.js";
+import { j as t } from "./index.es16.js";
+import { InfoIcon as p } from "./index.es26.js";
 import { forwardRef as u } from "react";
 import { useContextProps as d, LabelContext as b, Label as j } from "react-aria-components";
-import { cn as g } from "./index.es16.js";
-import { Tooltip as h } from "./index.es11.js";
-import { TooltipTrigger as L } from "./index.es12.js";
-function T(r, n) {
-  const { labelClassName: a } = r, [o, m] = d(r, n, b), { children: s, tooltipText: l, tooltipSupportText: i, tooltipProps: e, isRequired: c = !1, ...x } = o;
-  if (!s)
+import { cn as L } from "./index.es17.js";
+import { Tooltip as g } from "./index.es12.js";
+import { TooltipTrigger as h } from "./index.es13.js";
+function T(l, a) {
+  const { labelClassName: n } = l, [m, o] = d(l, a, b), { children: r, tooltipText: s, tooltipSupportText: i, tooltipProps: e, isRequired: c = !1, ...x } = m;
+  if (!r)
     return null;
-  const f = g("flex select-none items-center text-sm leading-6 text-neutral-900", a);
-  return /* @__PURE__ */ t.jsxs(j, { className: f, ...x, ref: m, children: [
-    s,
+  const f = L("flex select-none items-center text-sm leading-6 text-neutral-900", n);
+  return /* @__PURE__ */ t.jsxs(j, { className: f, ...x, ref: o, children: [
+    r,
     c ? /* @__PURE__ */ t.jsx("span", { className: "ml-1 text-neutral-900", children: "*" }) : null,
-    l ? /* @__PURE__ */ t.jsxs(L, { delay: 100, children: [
+    s ? /* @__PURE__ */ t.jsxs(h, { delay: 100, children: [
       /* @__PURE__ */ t.jsx(p, { className: "ml-1 size-4 text-primary-600" }),
       /* @__PURE__ */ t.jsx(
-        h,
+        g,
         {
           placement: (e == null ? void 0 : e.placement) || "right",
           supportText: i,
           size: (e == null ? void 0 : e.size) || "sm",
-          children: l
+          children: s
         }
       )
     ] }) : null
   ] });
 }
-const w = u(T);
+const N = u(T);
+N.displayName = "Label";
 export {
-  w as Label
+  N as Label
 };

package/dist/index.es7.js

@@ -1,6 +1,6 @@
-import { j as e } from "./index.es15.js";
+import { j as e } from "./index.es16.js";
 import { useVisuallyHidden as a } from "react-aria";
-import { cn as l } from "./index.es16.js";
+import { cn as l } from "./index.es17.js";
 const d = ({ className: s, label: r, size: t = "sm" }) => {
   const i = (() => {
     switch (t) {

package/dist/index.es8.js

@@ -1,10 +1,10 @@
-import { j as r } from "./index.es15.js";
+import { j as r } from "./index.es16.js";
 import { NumberField as g, Group as w, Input as B } from "react-aria-components";
-import { cn as l } from "./index.es16.js";
+import { cn as l } from "./index.es17.js";
 import { Label as E } from "./index.es6.js";
-import { CaptionNumberField as G } from "./index.es25.js";
-import { StepperButton as S } from "./index.es26.js";
-import { inputNumberVariant as V } from "./index.es20.js";
+import { CaptionNumberField as G } from "./index.es27.js";
+import { StepperButton as S } from "./index.es28.js";
+import { inputNumberVariant as V } from "./index.es21.js";
 const H = ({
   size: o = "sm",
   label: i,

package/dist/index.es9.js

@@ -1,80 +1,73 @@
-import { j as o } from "./index.es15.js";
-import { Switch as u } from "react-aria-components";
-import { cn as c } from "./index.es16.js";
-import { ContentSwitch as L } from "./index.es27.js";
-import { SwitchIndicator as v } from "./index.es28.js";
-import { switchVariants as b } from "./index.es21.js";
-const E = ({
-  children: f,
-  label: m,
-  description: n,
-  errorMessage: s,
-  validationState: e,
-  size: a = "md",
-  isDisabled: r = !1,
-  isSelected: t = !1,
-  onChange: h,
-  renderLabelIcon: x = null,
-  "aria-label": p,
-  "aria-describedby": l
+import { j as m } from "./index.es16.js";
+import { useState as $, useEffect as x } from "react";
+import { Slider as b, SliderTrack as q } from "react-aria-components";
+import { cn as z } from "./index.es17.js";
+import { SliderContainerTrack as B } from "./index.es32.js";
+import { validateMinDistance as F } from "./index.es33.js";
+const O = ({
+  type: r = "single",
+  showTypeValue: A = "default",
+  positionTooltip: S = "top",
+  modeTooltip: j = "dark",
+  maxValue: w = 100,
+  minValue: T = 0,
+  value: f = r === "range" ? [0, 5] : 0,
+  onChangeValue: i,
+  className: k,
+  classNameFilled: p,
+  classNameUnfilled: v,
+  classNameThumb: N,
+  suffix: E = "%",
+  step: M = 1,
+  minDistance: d = 2,
+  ...P
 }) => {
-  const j = e === "invalid" && !r, w = a === "sm" ? { offLeft: 3, onLeft: 19 } : { offLeft: 4, onLeft: 28 };
-  return /* @__PURE__ */ o.jsxs(
-    "label",
+  const [l, R] = $(r);
+  return x(() => {
+    if (r === "range" && Array.isArray(f)) {
+      const [s, c] = f;
+      if (c - s < d) {
+        const t = [s, s + d];
+        (t[0] !== f[0] || t[1] !== f[1]) && (i == null || i(t));
+      }
+    }
+  }, [r, f, i, d]), x(() => {
+    l !== r && (R(r), i == null || i(r === "range" ? [0, 5] : 0));
+  }, [r, i, l]), /* @__PURE__ */ m.jsx("div", { className: "flex w-full flex-col py-4", children: /* @__PURE__ */ m.jsx(
+    b,
     {
-      className: c("group flex flex-row gap-2", (m || f) && n ? "items-start" : "items-center"),
-      children: [
-        /* @__PURE__ */ o.jsx(
-          u,
-          {
-            isDisabled: r,
-            isSelected: t,
-            "aria-checked": t,
-            "aria-label": p,
-            "aria-describedby": l,
-            onChange: h,
-            children: ({ isFocusVisible: d, isHovered: i }) => /* @__PURE__ */ o.jsx(
-              "div",
-              {
-                className: c(
-                  b({
-                    isSelected: t,
-                    isDisabled: r,
-                    isFocusVisible: d,
-                    size: a,
-                    isHoveredWhenOff: i && !t
-                  })
-                ),
-                children: /* @__PURE__ */ o.jsx(
-                  v,
-                  {
-                    isSelected: t,
-                    isDisabled: r,
-                    isHovered: i,
-                    size: a,
-                    dimensions: w
-                  }
-                )
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ o.jsx(
-          L,
-          {
-            label: m,
-            description: n,
-            errorMessage: s,
-            isDisabled: r,
-            isInvalid: j,
-            renderLabelIcon: x,
-            children: f
-          }
-        )
-      ]
+      value: f,
+      step: M,
+      maxValue: w,
+      minValue: T,
+      className: z("w-full", k),
+      onChange: (s) => {
+        const c = s;
+        if (c !== void 0) {
+          const t = Array.isArray(c), o = r === "range" && t ? F(c, r, d) : c;
+          i == null || i(
+            r === "range" ? o : Array.isArray(o) ? o[0] || 0 : o
+          );
+        }
+      },
+      ...P,
+      children: /* @__PURE__ */ m.jsx(q, { className: "relative h-3 w-full cursor-pointer", children: ({ state: s }) => /* @__PURE__ */ m.jsx(
+        B,
+        {
+          state: s,
+          type: r,
+          showTypeValue: A,
+          suffix: E,
+          classNameFilled: p,
+          classNameUnfilled: v,
+          modeTooltip: j,
+          positionTooltip: S,
+          classNameThumb: N
+        }
+      ) })
     }
-  );
+  ) });
 };
 export {
-  E as Switch
+  O as Slider
 };

package/dist/stories/Checkbox.stories.d.ts

@@ -12,6 +12,11 @@ declare const meta: {
             control: "text";
         };
     };
+    args: {
+        isSelected: false;
+        isDisabled: false;
+        isIndeterminate: false;
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/style.css

@@ -775,12 +775,28 @@ select {
 .top-1\/2 {
   top: 50%;
 }
+.top-4 {
+  top: 1rem;
+}
+.top-\[-6px\] {
+  top: -6px;
+}
 .top-full {
   top: 100%;
 }
 .z-20 {
   z-index: 20;
 }
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+.\!mb-6 {
+  margin-bottom: 1.5rem !important;
+}
+.\!mt-6 {
+  margin-top: 1.5rem !important;
+}
 .mb-0 {
   margin-bottom: 0px;
 }
@@ -860,6 +876,12 @@ select {
 .h-16 {
   height: 4rem;
 }
+.h-2 {
+  height: 0.5rem;
+}
+.h-3 {
+  height: 0.75rem;
+}
 .h-4 {
   height: 1rem;
 }
@@ -997,6 +1019,9 @@ select {
 .justify-center {
   justify-content: center;
 }
+.justify-between {
+  justify-content: space-between;
+}
 .gap-1 {
   gap: 0.25rem;
 }
@@ -1526,6 +1551,10 @@ select {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+.ring-black {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
+}
 .ring-sky-400 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(38 157 217 / var(--tw-ring-opacity));
@@ -1830,6 +1859,11 @@ select {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.focus-visible\:ring-2:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
 .group:active .group-active\:border-primary-500 {
   --tw-border-opacity: 1;
   border-color: rgb(76 59 239 / var(--tw-border-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simpli-route/apollo-ds",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "files": [
     "dist"