@simpli-route/apollo-ds 0.1.84 → 0.1.85

package/dist/index.es90.js

@@ -1,12 +1,43 @@
-import { j as n } from "./index.es52.js";
-import { cn as x } from "./index.es54.js";
-const m = ({
-  description: t,
-  descriptionClasses: i,
-  errorMessage: r,
-  errorClasses: s,
-  isInvalidField: e
-}) => t && !e ? /* @__PURE__ */ n.jsx("div", { slot: "description", className: x("text-xs leading-3 text-neutral-700", i), children: t }) : r && e ? /* @__PURE__ */ n.jsx("div", { className: x("text-xs leading-3 text-error-500", s), children: r }) : null;
+import { j as e } from "./index.es52.js";
+import { CrossIcon as x, DownChevronIcon as f } from "./index.es81.js";
+import { cn as n } from "./index.es53.js";
+import { IconButton as p } from "./index.es19.js";
+import { Loader as d } from "./index.es28.js";
+function v({
+  hasSelection: o,
+  isOpen: s,
+  isDisabled: i,
+  isReadOnly: a,
+  isLoading: m = !1,
+  iconClassName: r,
+  icon: l = f,
+  onClear: c,
+  onIconPress: u
+}) {
+  return m ? /* @__PURE__ */ e.jsx("div", { className: "mr-2 flex items-center justify-center", "aria-hidden": "true", children: /* @__PURE__ */ e.jsx(d, { size: "xs", className: "mr-0 text-neutral-700" }) }) : o && !i && !a ? /* @__PURE__ */ e.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Clear selection",
+      className: "mr-2 flex items-center justify-center rounded-lg p-1 text-neutral-700 hover:text-primary-500 focus:text-primary-500 focus:outline-none",
+      onPointerDown: (t) => t.preventDefault(),
+      onClick: (t) => {
+        t.stopPropagation(), c();
+      },
+      children: /* @__PURE__ */ e.jsx(x, { className: n("size-3", r) })
+    }
+  ) : /* @__PURE__ */ e.jsx(p, { intent: "minimal", size: "xxs", className: "mr-2", onPress: u, children: ({ isFocusVisible: t }) => /* @__PURE__ */ e.jsx(
+    l,
+    {
+      className: n(
+        "size-4 transition-transform duration-200",
+        s && "rotate-180",
+        t ? "text-primary-500" : "text-neutral-700",
+        r
+      )
+    }
+  ) });
+}
 export {
-  m as CaptionNumberField
+  v as AutocompleteToggle
 };

package/dist/index.es91.js

@@ -1,14 +1,12 @@
-import { j as e } from "./index.es52.js";
-import { UpChevronIcon as n, DownChevronIcon as o } from "./index.es53.js";
-import { Button as s } from "react-aria-components";
-import { cn as c } from "./index.es54.js";
-const x = ({ isDisabled: r }) => {
-  const t = c("flex items-center justify-center", r ? "text-neutral-600" : "text-primary-500");
-  return /* @__PURE__ */ e.jsxs("div", { className: "absolute inset-y-0 right-0 flex flex-col items-center justify-center space-y-0.5 pr-2", children: [
-    /* @__PURE__ */ e.jsx(s, { slot: "increment", className: t, children: /* @__PURE__ */ e.jsx(n, { className: "size-3.5" }) }),
-    /* @__PURE__ */ e.jsx(s, { slot: "decrement", className: t, children: /* @__PURE__ */ e.jsx(o, { className: "size-3.5" }) })
-  ] });
-};
+import { j as n } from "./index.es52.js";
+import { cn as x } from "./index.es53.js";
+const m = ({
+  description: t,
+  descriptionClasses: i,
+  errorMessage: r,
+  errorClasses: s,
+  isInvalidField: e
+}) => t && !e ? /* @__PURE__ */ n.jsx("div", { slot: "description", className: x("text-xs leading-3 text-neutral-700", i), children: t }) : r && e ? /* @__PURE__ */ n.jsx("div", { className: x("text-xs leading-3 text-error-500", s), children: r }) : null;
 export {
-  x as StepperButton
+  m as CaptionNumberField
 };

package/dist/index.es92.js

@@ -1,12 +1,14 @@
-import { j as d } from "./index.es52.js";
-import { forwardRef as p } from "react";
-import { cn as f } from "./index.es54.js";
-import { overlayVariants as v } from "./index.es131.js";
-const y = (e, a) => {
-  const { zIndex: s = 200, opacity: t = "md", blur: o = "sm", children: m, className: c, center: r = !0, fixed: i, ...n } = e, l = f(v({ opacity: t, fixed: i, center: r, blur: o }), `z-[${s}]`, c);
-  return /* @__PURE__ */ d.jsx("div", { ref: a, className: l, "data-center": r || void 0, ...n, children: m });
-}, x = p(y);
-x.displayName = "Overlay";
+import { j as e } from "./index.es52.js";
+import { UpChevronIcon as n, DownChevronIcon as o } from "./index.es81.js";
+import { Button as s } from "react-aria-components";
+import { cn as c } from "./index.es53.js";
+const x = ({ isDisabled: r }) => {
+  const t = c("flex items-center justify-center", r ? "text-neutral-600" : "text-primary-500");
+  return /* @__PURE__ */ e.jsxs("div", { className: "absolute inset-y-0 right-0 flex flex-col items-center justify-center space-y-0.5 pr-2", children: [
+    /* @__PURE__ */ e.jsx(s, { slot: "increment", className: t, children: /* @__PURE__ */ e.jsx(n, { className: "size-3.5" }) }),
+    /* @__PURE__ */ e.jsx(s, { slot: "decrement", className: t, children: /* @__PURE__ */ e.jsx(o, { className: "size-3.5" }) })
+  ] });
+};
 export {
-  x as Overlay
+  x as StepperButton
 };

package/dist/index.es94.js

@@ -1,7 +1,7 @@
 import { j as n } from "./index.es52.js";
 import { useState as _, useMemo as D, useRef as G } from "react";
 import { ComboBox as J, Input as Q } from "react-aria-components";
-import { cn as U } from "./index.es54.js";
+import { cn as U } from "./index.es53.js";
 import { useDebouncedValue as W } from "./index.es93.js";
 import { Badge as X } from "./index.es6.js";
 import "./index.es7.js";
@@ -11,7 +11,7 @@ import { SearchFieldIconContainer as Z } from "./index.es95.js";
 import { SearchFieldMessages as $ } from "./index.es96.js";
 import { SearchFieldPopover as ee } from "./index.es97.js";
 import { getSearchFieldDefaultProps as te, getHighlightedParts as se } from "./index.es98.js";
-import { multiSearchFieldContainerVariants as le } from "./index.es76.js";
+import { multiSearchFieldContainerVariants as le } from "./index.es75.js";
 const we = (b) => {
   const {
     label: w,

package/dist/index.es95.js

@@ -1,5 +1,5 @@
 import { j as r } from "./index.es52.js";
-import { cn as c } from "./index.es54.js";
+import { cn as c } from "./index.es53.js";
 import { ClearIconButton as i } from "./index.es132.js";
 import { SearchIcon as a } from "./index.es133.js";
 const f = ({

package/dist/index.es97.js

@@ -3,7 +3,7 @@ import { useState as m, useEffect as u } from "react";
 import { Popover as v } from "react-aria-components";
 import { NoResultsMessage as a } from "./index.es134.js";
 import { SearchListBox as h } from "./index.es135.js";
-import { popoverVariants as x } from "./index.es76.js";
+import { popoverVariants as x } from "./index.es75.js";
 const z = ({
   triggerRef: o,
   hasNoResults: n,

package/dist/index.es99.js

@@ -1,81 +1,103 @@
-import { j as e } from "./index.es52.js";
-import { Button as d, SelectValue as g } from "react-aria-components";
-import { cn as i } from "./index.es54.js";
-import { Badge as j } from "./index.es6.js";
-import "./index.es7.js";
-import { selectInputButtonVariants as w } from "./index.es64.js";
-const S = ({
-  ref: C,
-  size: o,
-  isDisabled: l,
-  classNameButton: m,
-  selectionMode: x,
-  maxLengthTextOption: p,
-  handleDeleteOptionSelected: c,
-  placeholder: u,
-  validationState: f
-}) => /* @__PURE__ */ e.jsxs(
-  d,
-  {
-    ref: C,
-    className: ({ isFocusVisible: t, isHovered: n, isPressed: a }) => i(
-      "group",
-      w({
-        size: o,
-        isDisabled: l,
-        /** Select root sets isPressed from menu open state; use it so we stay in sync with RAC. */
-        isFocusVisible: t || a,
-        isHovered: n,
-        validationState: f
-      }),
-      m
+import { j as l } from "./index.es52.js";
+import { cn as P } from "./index.es53.js";
+import { SliderThumb as j } from "./index.es136.js";
+const T = ({
+  state: r,
+  type: n,
+  showTypeValue: t,
+  suffix: c,
+  classNameFilled: a,
+  classNameUnfilled: m,
+  modeTooltip: b,
+  positionTooltip: h,
+  classNameThumb: d,
+  isHiddenValue: v,
+  suffixRangeCustom: e
+}) => /* @__PURE__ */ l.jsxs("div", { className: "relative", children: [
+  t === "default" && !v ? /* @__PURE__ */ l.jsxs("div", { className: "flex justify-between", children: [
+    /* @__PURE__ */ l.jsxs(
+      "div",
+      {
+        className: "absolute top-4 text-sm text-neutral-900",
+        style: { left: `${r.getThumbPercent(0) * 100}%`, transform: "translateX(-50%)" },
+        children: [
+          r.values[0],
+          n === "range" && (e == null ? void 0 : e.left) || c
+        ]
+      }
     ),
-    children: [
-      /* @__PURE__ */ e.jsx(g, { className: "flex flex-1 items-center gap-1 overflow-hidden", children: ({ selectedItems: t, selectedText: n, isPlaceholder: a }) => /* @__PURE__ */ e.jsx(e.Fragment, { children: x === "multiple" && t && t.length > 0 ? /* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-1", children: t.filter((r) => r != null).map((r) => {
-        const h = r.label, s = r.value;
-        return /* @__PURE__ */ e.jsx(
-          j,
-          {
-            label: h,
-            size: o,
-            isDisabled: l,
-            maxLength: p,
-            onDelete: () => c(s)
-          },
-          s
-        );
-      }) }) : /* @__PURE__ */ e.jsx(
-        "span",
-        {
-          className: i(
-            "flex-1 truncate text-left",
-            a ? "text-neutral-600" : "",
-            l ? "text-neutral-700" : ""
-          ),
-          children: n || u
-        }
-      ) }) }),
-      /* @__PURE__ */ e.jsx(
-        "svg",
-        {
-          className: "transition-transform duration-100 group-data-[pressed]:rotate-180",
-          width: "20",
-          height: "10",
-          viewBox: "0 0 20 10",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          children: /* @__PURE__ */ e.jsx(
-            "path",
-            {
-              d: "M20 0.838022C20.0006 0.947676 19.9796 1.05638 19.9381 1.15789C19.8967 1.2594 19.8356 1.35173 19.7584 1.42959L12.9512 8.23676C12.5642 8.62472 12.1045 8.93252 11.5984 9.14254C11.0922 9.35256 10.5497 9.46066 10.0017 9.46066C9.45373 9.46066 8.91115 9.35256 8.40502 9.14254C7.8989 8.93252 7.43918 8.62472 7.0522 8.23676L0.245034 1.42959C0.167349 1.3519 0.105725 1.25968 0.0636824 1.15818C0.0216393 1.05667 5.62088e-09 0.947886 0 0.838023C-5.62081e-09 0.728159 0.0216393 0.619372 0.0636824 0.51787C0.105725 0.41637 0.167349 0.324143 0.245034 0.246458C0.32272 0.168773 0.414946 0.107149 0.516447 0.0651056C0.617948 0.0230624 0.726736 0.00142351 0.8366 0.00142351C0.946464 0.00142351 1.05525 0.0230624 1.15675 0.0651055C1.25825 0.107149 1.35048 0.168773 1.42817 0.246458L8.23533 7.05363C8.704 7.52171 9.33931 7.78463 10.0017 7.78463C10.6641 7.78463 11.2994 7.52171 11.7681 7.05363L18.5752 0.246457C18.6527 0.168363 18.7448 0.106378 18.8464 0.0640783C18.9479 0.0217776 19.0568 4.80781e-09 19.1668 0C19.2768 -4.80789e-09 19.3857 0.0217776 19.4872 0.0640782C19.5888 0.106378 19.6809 0.168363 19.7584 0.246457C19.8356 0.324311 19.8967 0.41664 19.9381 0.518154C19.9796 0.619668 20.0006 0.728369 20 0.838022Z",
-              fill: "#73768C"
-            }
-          )
-        }
-      )
-    ]
-  }
-);
+    n === "range" && /* @__PURE__ */ l.jsxs(
+      "div",
+      {
+        className: "absolute top-4 text-sm text-neutral-900",
+        style: { left: `${r.getThumbPercent(1) * 100}%`, transform: "translateX(-50%)" },
+        children: [
+          r.values[1],
+          (e == null ? void 0 : e.right) || c
+        ]
+      }
+    )
+  ] }) : null,
+  /* @__PURE__ */ l.jsx(
+    "div",
+    {
+      className: P("absolute top-1/2 h-2 w-full -translate-y-1/2 rounded-full bg-primary-100", m)
+    }
+  ),
+  /* @__PURE__ */ l.jsx(
+    "div",
+    {
+      className: P("absolute top-1/2 h-2 -translate-y-1/2 rounded-full bg-primary-500", a),
+      style: {
+        width: `${n === "range" ? r.getThumbPercent(1) * 100 - r.getThumbPercent(0) * 100 : r.getThumbPercent(0) * 100}%`,
+        left: n === "range" ? `${r.getThumbPercent(0) * 100}%` : "0%"
+      }
+    }
+  ),
+  n === "range" ? /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
+    /* @__PURE__ */ l.jsx(
+      j,
+      {
+        index: 0,
+        valuePercent: r.getThumbPercent(0),
+        value: r.values[0],
+        suffix: (e == null ? void 0 : e.left) || c,
+        modeTooltip: b,
+        positionTooltip: h,
+        showTypeValue: t,
+        isHiddenValue: v,
+        classNameThumb: d
+      }
+    ),
+    /* @__PURE__ */ l.jsx(
+      j,
+      {
+        index: 1,
+        valuePercent: r.getThumbPercent(1),
+        value: r.values[1],
+        suffix: (e == null ? void 0 : e.right) || c,
+        modeTooltip: b,
+        positionTooltip: h,
+        showTypeValue: t,
+        isHiddenValue: v,
+        classNameThumb: d
+      }
+    )
+  ] }) : /* @__PURE__ */ l.jsx(
+    j,
+    {
+      index: 0,
+      valuePercent: r.getThumbPercent(0),
+      value: r.values[0],
+      suffix: c,
+      modeTooltip: b,
+      positionTooltip: h,
+      showTypeValue: t,
+      isHiddenValue: v,
+      classNameThumb: d
+    }
+  )
+] });
 export {
-  S as SelectContent
+  T as SliderContainerTrack
 };

package/dist/stories/Icons.stories.d.ts

@@ -0,0 +1,12 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: () => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Gallery: Story;

package/dist/style.css

@@ -749,6 +749,9 @@ select {
 .pointer-events-none {
   pointer-events: none;
 }
+.pointer-events-auto {
+  pointer-events: auto;
+}
 .\!visible {
   visibility: visible !important;
 }
@@ -773,13 +776,23 @@ select {
 .relative {
   position: relative;
 }
+.sticky {
+  position: sticky;
+}
 .inset-0 {
   inset: 0px;
 }
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
 .inset-y-0 {
   top: 0px;
   bottom: 0px;
 }
+.bottom-4 {
+  bottom: 1rem;
+}
 .bottom-full {
   bottom: 100%;
 }
@@ -804,6 +817,9 @@ select {
 .top-1\/2 {
   top: 50%;
 }
+.top-2 {
+  top: 0.5rem;
+}
 .top-4 {
   top: 1rem;
 }
@@ -993,6 +1009,10 @@ select {
   width: 0.875rem;
   height: 0.875rem;
 }
+.size-32 {
+  width: 8rem;
+  height: 8rem;
+}
 .size-4 {
   width: 1rem;
   height: 1rem;
@@ -1017,6 +1037,10 @@ select {
   width: 50px;
   height: 50px;
 }
+.size-\[72px\] {
+  width: 72px;
+  height: 72px;
+}
 .size-full {
   width: 100%;
   height: 100%;
@@ -1078,6 +1102,10 @@ select {
 .h-\[34px\] {
   height: 34px;
 }
+.h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .h-full {
   height: 100%;
 }
@@ -1120,6 +1148,9 @@ select {
 .min-h-\[58px\] {
   min-height: 58px;
 }
+.min-h-\[calc\(100vh-2rem\)\] {
+  min-height: calc(100vh - 2rem);
+}
 .min-h-full {
   min-height: 100%;
 }
@@ -1162,9 +1193,6 @@ select {
 .w-8 {
   width: 2rem;
 }
-.w-80 {
-  width: 20rem;
-}
 .w-\[--trigger-width\] {
   width: var(--trigger-width);
 }
@@ -1201,6 +1229,9 @@ select {
 .w-\[56px\] {
   width: 56px;
 }
+.w-\[72px\] {
+  width: 72px;
+}
 .w-fit {
   width: -moz-fit-content;
   width: fit-content;
@@ -1239,6 +1270,9 @@ select {
 .max-w-\[280px\] {
   max-width: 280px;
 }
+.max-w-\[720px\] {
+  max-width: 720px;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1378,6 +1412,10 @@ select {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
 }
+.gap-x-3 {
+  -moz-column-gap: 0.75rem;
+       column-gap: 0.75rem;
+}
 .gap-x-4 {
   -moz-column-gap: 1rem;
        column-gap: 1rem;
@@ -1474,6 +1512,9 @@ select {
 .rounded-sm {
   border-radius: 0.125rem;
 }
+.rounded-xl {
+  border-radius: 0.75rem;
+}
 .rounded-l-full {
   border-top-left-radius: 9999px;
   border-bottom-left-radius: 9999px;
@@ -2046,6 +2087,10 @@ select {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
 .py-\[2px\] {
   padding-top: 2px;
   padding-bottom: 2px;
@@ -2056,6 +2101,9 @@ select {
 .pb-4 {
   padding-bottom: 1rem;
 }
+.pb-\[280px\] {
+  padding-bottom: 280px;
+}
 .pl-1 {
   padding-left: 0.25rem;
 }
@@ -2065,6 +2113,9 @@ select {
 .pr-10 {
   padding-right: 2.5rem;
 }
+.pr-12 {
+  padding-right: 3rem;
+}
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -2107,6 +2158,9 @@ select {
 .text-\[10px\] {
   font-size: 10px;
 }
+.text-\[11px\] {
+  font-size: 11px;
+}
 .text-\[16px\] {
   font-size: 16px;
 }
@@ -2185,6 +2239,9 @@ select {
 .leading-\[19\.07px\] {
   line-height: 19.07px;
 }
+.leading-tight {
+  line-height: 1.25;
+}
 .tracking-wide {
   letter-spacing: 0.025em;
 }
@@ -2602,6 +2659,14 @@ select {
 .first-letter\:uppercase::first-letter {
   text-transform: uppercase;
 }
+.placeholder\:text-neutral-600::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(151 155 180 / var(--tw-text-opacity));
+}
+.placeholder\:text-neutral-600::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(151 155 180 / var(--tw-text-opacity));
+}
 .placeholder\:text-neutral-700::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(115 118 140 / var(--tw-text-opacity));
@@ -2993,6 +3058,10 @@ select {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(80 108 251 / var(--tw-ring-opacity));
 }
+.focus-visible\:ring-primary-400:focus-visible {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(121 108 250 / var(--tw-ring-opacity));
+}
 .focus-visible\:ring-primary-500:focus-visible {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(76 59 239 / var(--tw-ring-opacity));
@@ -3085,6 +3154,14 @@ select {
   .sm\:block {
     display: block;
   }
+
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
+  .sm\:items-center {
+    align-items: center;
+  }
 }
 @media (min-width: 768px) {
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simpli-route/apollo-ds",
-  "version": "0.1.84",
+  "version": "0.1.85",
   "type": "module",
   "files": [
     "dist"
@@ -31,7 +31,8 @@
   "dependencies": {
     "@internationalized/date": "^3.10.0",
     "@react-stately/color": "^3.9.2",
-    "@simpli-route/react-icons": "^1.0.19",
+    "@simpli-route/icons": "^1.0.20",
+    "@simpli-route/react-icons": "^1.0.20",
     "@simpli-route/tailwind-preset": "^0.0.3",
     "@testing-library/user-event": "^14.5.2",
     "class-variance-authority": "^0.7.1",