@simpli-route/apollo-ds 0.1.71 → 0.1.73

package/dist/index.es97.js

@@ -1,47 +1,14 @@
-import { cva as r } from "class-variance-authority";
-const t = r("flex h-full max-h-12", {
-  variants: {
-    orientation: {
-      horizontal: "flex-col",
-      vertical: "flex-row"
-    }
-  }
-}), a = r(
-  "group inline-flex cursor-pointer items-center px-4 py-3 text-sm font-semibold focus-visible:outline-none",
-  {
-    variants: {
-      isActive: {
-        true: "bg-primary-50 text-primary-500 ",
-        false: "text-primary-300 hover:text-primary-500 hover:border-primary-500"
-      },
-      isDisabledTab: {
-        true: "",
-        false: ""
-      },
-      orientation: {
-        horizontal: "border-b-2 border-transparent",
-        vertical: "border-r-2 border-transparent"
-      }
-    },
-    compoundVariants: [
-      {
-        isDisabledTab: !0,
-        orientation: "horizontal",
-        class: "border-b-2 cursor-not-allowed !border-neutral-600 !text-neutral-600 bg-neutral-200"
-      },
-      {
-        isDisabledTab: !0,
-        orientation: "vertical",
-        class: "border-r-2 cursor-not-allowed !border-neutral-600 !text-neutral-600 bg-neutral-200"
-      },
-      { isActive: !0, orientation: "horizontal", class: "border-b-2 border-primary-500" },
-      { isActive: !1, orientation: "horizontal", class: "border-b-2 border-primary-300" },
-      { isActive: !1, orientation: "vertical", class: "border-r-2 border-primary-200" },
-      { isActive: !0, orientation: "vertical", class: "border-r-2 border-primary-500" }
-    ]
-  }
-);
+import { j as r } from "./index.es49.js";
+import { cn as c } from "./index.es50.js";
+import { ClearIconButton as i } from "./index.es128.js";
+import { SearchIcon as a } from "./index.es129.js";
+const f = ({
+  showClearIcon: t,
+  clearIcon: n,
+  searchIcon: e,
+  isDisabled: s,
+  onReset: o
+}) => /* @__PURE__ */ r.jsx("span", { className: c("absolute right-2 top-1/2 flex -translate-y-1/2 items-center"), children: t && o ? /* @__PURE__ */ r.jsx(i, { icon: n, isDisabled: s, onPress: o }) : /* @__PURE__ */ r.jsx(a, { icon: e }) });
 export {
-  a as tabVariants,
-  t as tabsVariants
+  f as SearchFieldIconContainer
 };

package/dist/index.es98.js

@@ -1,42 +1,9 @@
-import { cva as e } from "class-variance-authority";
-const t = 'after:content-[""] after:absolute after:border-8 after:border-x-transparent', o = `${t} after:left-4 after:top-[100%] after:border-b-transparent`, a = `${t} after:left-1/2 after:top-[100%] after:-translate-x-1/2 after:border-b-transparent`, b = `${t} after:right-4 after:top-[100%] after:border-b-transparent`, l = `${t} after:left-4 after:bottom-[100%] after:border-t-transparent`, f = `${t} after:left-1/2 after:bottom-[100%] after:-translate-x-1/2 after:border-t-transparent`, n = `${t} after:right-4 after:bottom-[100%] after:border-t-transparent`, r = 'before:content-[""] before:absolute before:top-1/2 before:-translate-y-1/2 before:border-8 before:border-y-transparent', s = `${r} before:right-[100%] before:border-l-transparent`, p = `${r} before:left-[100%] before:border-r-transparent`, u = e(
-  "absolute z-20 w-max max-w-[250px] whitespace-normal break-words rounded-lg transition duration-150 ease-in-out shadow-[0px_2px_4px_-2px_#22242A0F,0px_4px_8px_-2px_#22242A1A] py-2 px-3",
-  {
-    variants: {
-      mode: {
-        light: "bg-blue-50 text-neutral-900 after:border-t-blue-50 after:border-b-blue-50 before:border-r-blue-50 before:border-l-blue-50",
-        dark: "bg-blue-900 text-blue-50 after:border-t-blue-900 after:border-b-blue-900 before:border-r-blue-900 before:border-l-blue-900"
-      },
-      hasSupportText: {
-        true: "",
-        false: ""
-      },
-      placement: {
-        none: "bottom-full left-1/2 mb-3 -translate-x-1/2",
-        "top-start": `bottom-full left-0 mb-3 ${o}`,
-        top: `bottom-full left-1/2 mb-3 -translate-x-1/2 ${a}`,
-        "top-end": `bottom-full right-0 mb-3 ${b}`,
-        right: `left-full top-1/2 ml-3 -translate-y-1/2 ${s}`,
-        "bottom-start": `left-0 top-full mt-3 ${l}`,
-        bottom: `left-1/2 top-full mt-3 -translate-x-1/2 ${f}`,
-        "bottom-end": `right-0 top-full mt-3 ${n}`,
-        left: `right-full top-1/2 mr-3 -translate-y-1/2 ${p}`
-      }
-    },
-    compoundVariants: [
-      {
-        hasSupportText: !0,
-        mode: "dark",
-        class: "text-[16px] text-blue-50 font-semibold leading-5"
-      },
-      {
-        hasSupportText: !0,
-        mode: "light",
-        class: "text-[16px] text-neutral-900 font-semibold leading-5"
-      }
-    ]
-  }
-);
+import { j as e } from "./index.es49.js";
+import { Text as x, FieldError as l } from "react-aria-components";
+const n = ({ description: t, isInvalid: r, errorMessage: s }) => /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  t && !r && /* @__PURE__ */ e.jsx(x, { slot: "description", className: "text-xs leading-5 text-neutral-700", children: t }),
+  s && r && /* @__PURE__ */ e.jsx(l, { className: "text-sm leading-6 text-error-500", children: s })
+] });
 export {
-  u as tooltipVariants
+  n as SearchFieldMessages
 };

package/dist/index.es99.js

@@ -1,4 +1,44 @@
-var e = { exports: {} };
+import { j as e } from "./index.es49.js";
+import { useState as m, useEffect as u } from "react";
+import { Popover as v } from "react-aria-components";
+import { NoResultsMessage as a } from "./index.es130.js";
+import { SearchListBox as h } from "./index.es131.js";
+import { popoverVariants as x } from "./index.es71.js";
+const z = ({
+  triggerRef: o,
+  hasNoResults: n,
+  noResultsText: i,
+  items: p,
+  onItemSelect: c
+}) => {
+  const [s, d] = m(void 0);
+  return u(() => {
+    if (!(o != null && o.current))
+      return;
+    const r = () => {
+      if (o.current) {
+        const t = o.current.offsetWidth;
+        d(t);
+      }
+    };
+    if (r(), typeof ResizeObserver < "u") {
+      const t = new ResizeObserver(() => {
+        r();
+      });
+      return o.current && t.observe(o.current), () => {
+        t.disconnect();
+      };
+    }
+  }, [o]), /* @__PURE__ */ e.jsx(
+    v,
+    {
+      className: x(),
+      triggerRef: o,
+      style: s !== void 0 ? { width: `${s}px`, minWidth: `${s}px` } : void 0,
+      children: n ? /* @__PURE__ */ e.jsx(a, { text: i }) : /* @__PURE__ */ e.jsx(h, { items: p, onItemSelect: c })
+    }
+  );
+};
 export {
-  e as __module
+  z as SearchFieldPopover
 };

package/dist/stories/Autocomplete.stories.d.ts

@@ -0,0 +1,21 @@
+import { Autocomplete } from '../components/Autocomplete';
+import { Meta, StoryObj } from '@storybook/react';
+
+declare const meta: Meta<typeof Autocomplete>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const StaticItems: Story;
+export declare const ControlledSelection: Story;
+export declare const WithDescription: Story;
+export declare const Invalid: Story;
+export declare const Loading: Story;
+export declare const Disabled: Story;
+export declare const SizeXS: Story;
+export declare const SizeSM: Story;
+export declare const SizeMD: Story;
+export declare const SizeLG: Story;
+export declare const Required: Story;
+export declare const AsyncMovieSearch: Story;
+/** Debounced async search - avoids 1 request per keystroke. Debounce is only in this example, not in the component. */
+export declare const AsyncMovieSearchDebounced: Story;

package/dist/style.css

@@ -918,6 +918,9 @@ select {
 .ml-3 {
   margin-left: 0.75rem;
 }
+.mr-0 {
+  margin-right: 0px;
+}
 .mr-1 {
   margin-right: 0.25rem;
 }
@@ -1063,6 +1066,9 @@ select {
 .h-\[32px\] {
   height: 32px;
 }
+.h-\[34px\] {
+  height: 34px;
+}
 .h-full {
   height: 100%;
 }
@@ -1072,6 +1078,9 @@ select {
 .max-h-60 {
   max-height: 15rem;
 }
+.max-h-80 {
+  max-height: 20rem;
+}
 .max-h-\[260px\] {
   max-height: 260px;
 }
@@ -1090,6 +1099,18 @@ select {
 .min-h-8 {
   min-height: 2rem;
 }
+.min-h-\[28px\] {
+  min-height: 28px;
+}
+.min-h-\[42px\] {
+  min-height: 42px;
+}
+.min-h-\[50px\] {
+  min-height: 50px;
+}
+.min-h-\[58px\] {
+  min-height: 58px;
+}
 .min-h-full {
   min-height: 100%;
 }
@@ -1156,6 +1177,9 @@ select {
 .w-\[300px\] {
   width: 300px;
 }
+.w-\[350px\] {
+  width: 350px;
+}
 .w-\[400px\] {
   width: 400px;
 }
@@ -1506,6 +1530,10 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(171 54 43 / var(--tw-border-opacity));
 }
+.border-error-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(94 27 20 / var(--tw-border-opacity));
+}
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -1538,6 +1566,10 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(10 10 10 / var(--tw-border-opacity));
 }
+.border-orange-warning-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(115 54 0 / var(--tw-border-opacity));
+}
 .border-primary-200 {
   --tw-border-opacity: 1;
   border-color: rgb(212 208 251 / var(--tw-border-opacity));
@@ -1558,6 +1590,10 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(29 13 165 / var(--tw-border-opacity));
 }
+.border-primary-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(23 13 108 / var(--tw-border-opacity));
+}
 .border-purple-200 {
   --tw-border-opacity: 1;
   border-color: rgb(233 213 255 / var(--tw-border-opacity));
@@ -1578,6 +1614,10 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(5 150 89 / var(--tw-border-opacity));
 }
+.border-success-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(2 96 56 / var(--tw-border-opacity));
+}
 .border-transparent {
   border-color: transparent;
 }
@@ -1589,6 +1629,10 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(255 220 115 / var(--tw-border-opacity));
 }
+.border-yellow-warning-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(146 109 0 / var(--tw-border-opacity));
+}
 .\!bg-neutral-50 {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
@@ -1731,6 +1775,10 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(230 126 34 / var(--tw-bg-opacity));
 }
+.bg-orange-warning-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 105 18 / var(--tw-bg-opacity));
+}
 .bg-orange-warning-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(149 70 0 / var(--tw-bg-opacity));
@@ -1821,6 +1869,9 @@ select {
 .bg-white\/50 {
   background-color: rgb(255 255 255 / 0.5);
 }
+.bg-white\/90 {
+  background-color: rgb(255 255 255 / 0.9);
+}
 .bg-yellow-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 245 196 / var(--tw-bg-opacity));
@@ -1849,6 +1900,10 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(255 204 51 / var(--tw-bg-opacity));
 }
+.bg-yellow-warning-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 179 26 / var(--tw-bg-opacity));
+}
 .bg-yellow-warning-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(189 146 15 / var(--tw-bg-opacity));
@@ -2176,6 +2231,10 @@ select {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
 .text-neutral-300 {
   --tw-text-opacity: 1;
   color: rgb(233 233 235 / var(--tw-text-opacity));
@@ -2212,6 +2271,10 @@ select {
   --tw-text-opacity: 1;
   color: rgb(255 248 243 / var(--tw-text-opacity));
 }
+.text-orange-warning-800 {
+  --tw-text-opacity: 1;
+  color: rgb(115 54 0 / var(--tw-text-opacity));
+}
 .text-orange-warning-900 {
   --tw-text-opacity: 1;
   color: rgb(87 41 0 / var(--tw-text-opacity));
@@ -2378,6 +2441,9 @@ select {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(76 59 239 / var(--tw-ring-opacity));
 }
+.ring-primary-500\/10 {
+  --tw-ring-color: rgb(76 59 239 / 0.1);
+}
 .ring-sky-400 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(38 157 217 / var(--tw-ring-opacity));
@@ -2687,6 +2753,9 @@ select {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
 }
+.focus-within\:bg-white\/100:focus-within {
+  background-color: rgb(255 255 255 / 1);
+}
 .focus-within\:ring-1:focus-within {
   --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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2715,6 +2784,10 @@ select {
 .hover\:bg-black\/\[5\%\]:hover {
   background-color: rgb(0 0 0 / 5%);
 }
+.hover\:bg-blue-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(246 248 252 / var(--tw-bg-opacity));
+}
 .hover\:bg-neutral-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(250 250 250 / var(--tw-bg-opacity));
@@ -2731,6 +2804,10 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(212 208 251 / var(--tw-bg-opacity));
 }
+.hover\:bg-primary-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 242 254 / var(--tw-bg-opacity));
+}
 .hover\:bg-primary-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(42 22 218 / var(--tw-bg-opacity));
@@ -2743,6 +2820,14 @@ select {
   --tw-text-opacity: 1;
   color: rgb(38 68 217 / var(--tw-text-opacity));
 }
+.hover\:text-neutral-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(199 201 209 / var(--tw-text-opacity));
+}
+.hover\:text-neutral-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(151 155 180 / var(--tw-text-opacity));
+}
 .hover\:text-neutral-900:hover {
   --tw-text-opacity: 1;
   color: rgb(34 36 42 / var(--tw-text-opacity));
@@ -2779,6 +2864,10 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(76 59 239 / var(--tw-bg-opacity));
 }
+.focus\:text-primary-500:focus {
+  --tw-text-opacity: 1;
+  color: rgb(76 59 239 / var(--tw-text-opacity));
+}
 .focus\:text-white:focus {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));

package/package.json

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