@simpli-route/apollo-ds 0.1.53 → 0.1.55

package/dist/index.es80.js

@@ -1,21 +1,12 @@
-import { j as t } from "./index.es40.js";
-import { cn as c } from "./index.es41.js";
-const i = ({
-  label: e,
-  description: x,
-  errorMessage: s,
-  isDisabled: l,
-  isInvalid: r,
-  children: n,
-  renderLabelIcon: m
-}) => !e && !x && !n ? null : /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col", children: [
-  e ? /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-x-1", children: [
-    /* @__PURE__ */ t.jsx("p", { className: c("text-sm font-semibold", l ? "text-neutral-600" : "text-neutral-900"), children: e }),
-    m ? /* @__PURE__ */ t.jsx(t.Fragment, { children: m }) : null
-  ] }) : n,
-  x && !s && /* @__PURE__ */ t.jsx("p", { className: c("text-xs", l ? "text-neutral-600" : "text-neutral-800"), children: x }),
-  r && s && /* @__PURE__ */ t.jsx("p", { className: "text-sm text-red-500", children: s })
-] });
+import { j as m } from "./index.es40.js";
+import { useRef as l } from "react";
+import { useTabPanel as p } from "react-aria";
+import { cn as i } from "./index.es41.js";
+const P = (r) => {
+  var t;
+  const { className: o, state: s, ...n } = r, e = l(null), { tabPanelProps: a } = p(n, s, e), c = i("", o);
+  return /* @__PURE__ */ m.jsx("div", { ...a, ref: e, className: c, children: (t = s.selectedItem) == null ? void 0 : t.props.children });
+};
 export {
-  i as ContentSwitch
+  P as TabPanel
 };

package/dist/index.es81.js

@@ -1,22 +1,47 @@
-import { j as i } from "./index.es40.js";
-import { cn as m } from "./index.es41.js";
-import { indicatorVariants as n } from "./index.es61.js";
-const c = ({ isSelected: r, isDisabled: o, isHovered: f, size: a, dimensions: t }) => /* @__PURE__ */ i.jsx(
-  "div",
-  {
-    className: m(
-      n({
-        isSelected: r,
-        isDisabled: o,
-        size: a,
-        isHoveredWhenOff: f && !r
-      })
-    ),
-    style: {
-      left: r ? `${t.onLeft}px` : `${t.offLeft}px`
+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" }
+    ]
+  }
 );
 export {
-  c as SwitchIndicator
+  a as tabVariants,
+  t as tabsVariants
 };

package/dist/index.es82.js

@@ -1,12 +1,21 @@
-import { j as p } from "./index.es40.js";
-import { useRef as f } from "react";
-import { useTab as u } from "react-aria";
-import { cn as x } from "./index.es41.js";
-import { tabVariants as y } from "./index.es84.js";
-const D = (t) => {
-  const { className: i, item: r, orientation: n, state: s, id: a = void 0 } = t, { key: e, rendered: c } = r, m = s.selectedKey === e, d = s.disabledKeys.has(e) || (s == null ? void 0 : s.isDisabled), o = f(null), { tabProps: l } = u({ key: String(e) }, s, o), b = x(y({ isActive: m, orientation: n, isDisabledTab: d }), i);
-  return /* @__PURE__ */ p.jsx("div", { ...l, ref: o, className: b, id: a, children: c });
-};
+import { j as t } from "./index.es40.js";
+import { cn as c } from "./index.es41.js";
+const i = ({
+  label: e,
+  description: x,
+  errorMessage: s,
+  isDisabled: l,
+  isInvalid: r,
+  children: n,
+  renderLabelIcon: m
+}) => !e && !x && !n ? null : /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col", children: [
+  e ? /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-x-1", children: [
+    /* @__PURE__ */ t.jsx("p", { className: c("text-sm font-semibold", l ? "text-neutral-600" : "text-neutral-900"), children: e }),
+    m ? /* @__PURE__ */ t.jsx(t.Fragment, { children: m }) : null
+  ] }) : n,
+  x && !s && /* @__PURE__ */ t.jsx("p", { className: c("text-xs", l ? "text-neutral-600" : "text-neutral-800"), children: x }),
+  r && s && /* @__PURE__ */ t.jsx("p", { className: "text-sm text-red-500", children: s })
+] });
 export {
-  D as Tab
+  i as ContentSwitch
 };

package/dist/index.es83.js

@@ -1,12 +1,22 @@
-import { j as m } from "./index.es40.js";
-import { useRef as l } from "react";
-import { useTabPanel as p } from "react-aria";
-import { cn as i } from "./index.es41.js";
-const P = (r) => {
-  var t;
-  const { className: o, state: s, ...n } = r, e = l(null), { tabPanelProps: a } = p(n, s, e), c = i("", o);
-  return /* @__PURE__ */ m.jsx("div", { ...a, ref: e, className: c, children: (t = s.selectedItem) == null ? void 0 : t.props.children });
-};
+import { j as i } from "./index.es40.js";
+import { cn as m } from "./index.es41.js";
+import { indicatorVariants as n } from "./index.es65.js";
+const c = ({ isSelected: r, isDisabled: o, isHovered: f, size: a, dimensions: t }) => /* @__PURE__ */ i.jsx(
+  "div",
+  {
+    className: m(
+      n({
+        isSelected: r,
+        isDisabled: o,
+        size: a,
+        isHoveredWhenOff: f && !r
+      })
+    ),
+    style: {
+      left: r ? `${t.onLeft}px` : `${t.offLeft}px`
+    }
+  }
+);
 export {
-  P as TabPanel
+  c as SwitchIndicator
 };

package/dist/index.es84.js

@@ -1,47 +1,42 @@
-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",
+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: {
-      isActive: {
-        true: "bg-primary-50 text-primary-500 ",
-        false: "text-primary-300 hover:text-primary-500 hover:border-primary-500"
+      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"
       },
-      isDisabledTab: {
+      hasSupportText: {
         true: "",
         false: ""
       },
-      orientation: {
-        horizontal: "border-b-2 border-transparent",
-        vertical: "border-r-2 border-transparent"
+      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: [
       {
-        isDisabledTab: !0,
-        orientation: "horizontal",
-        class: "border-b-2 cursor-not-allowed !border-neutral-600 !text-neutral-600 bg-neutral-200"
+        hasSupportText: !0,
+        mode: "dark",
+        class: "text-[16px] text-blue-50 font-semibold leading-5"
       },
       {
-        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" }
+        hasSupportText: !0,
+        mode: "light",
+        class: "text-[16px] text-neutral-900 font-semibold leading-5"
+      }
     ]
   }
 );
 export {
-  a as tabVariants,
-  t as tabsVariants
+  u as tooltipVariants
 };

package/dist/index.es9.js

@@ -5,8 +5,8 @@ import { useFilter as K, Button as Q, Select as T, Popover as U } from "react-ar
 import { cn as p } from "./index.es41.js";
 import { Loader as W } from "./index.es21.js";
 import { PopoverContent as X } from "./index.es67.js";
-import { selectInputPopoverVariants as Y } from "./index.es47.js";
-import { filterButtonVariants as Z, filterButtonBadgeVariants as _ } from "./index.es48.js";
+import { selectInputPopoverVariants as Y } from "./index.es51.js";
+import { filterButtonVariants as Z, filterButtonBadgeVariants as _ } from "./index.es52.js";
 const $ = ({
   renderPosition: t,
   leftIcon: f,

package/dist/stories/Datepicker.stories.d.ts

@@ -31,3 +31,4 @@ export declare const Disabled: Story;
 export declare const WithError: Story;
 export declare const WithErrorHorizontal: Story;
 export declare const SizeBodySm: Story;
+export declare const MaxPast25Days: Story;

package/dist/stories/InvisibleSelect.stories.d.ts

@@ -2,22 +2,27 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: (<T extends object>(props: import('../components').InvisibleSelectProps<T> & {
-        ref?: import('react').Ref<HTMLButtonElement> | undefined;
-    }) => import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>) & {
-        displayName?: string | undefined;
-    };
+    component: import('react').ForwardRefExoticComponent<import('../components').InvisibleSelectProps & import('react').RefAttributes<HTMLButtonElement>>;
     parameters: {
         layout: string;
     };
     tags: string[];
     args: {
-        label: string;
-        captionError: string;
-        placeholder: string;
-        size: "bodyDefault";
+        selectionMode: "single";
+        size: "xs";
+        orientation: "vertical";
     };
     argTypes: {
+        label: {
+            control: "text";
+        };
+        placeholder: {
+            control: "text";
+        };
+        selectionMode: {
+            control: "select";
+            options: string[];
+        };
         size: {
             control: "select";
             options: string[];
@@ -26,83 +31,27 @@ declare const meta: {
             control: "select";
             options: string[];
         };
+        isDisabled: {
+            control: "boolean";
+        };
         validationState: {
             control: "select";
             options: (string | undefined)[];
         };
-        isDisabled: {
-            control: "boolean";
-        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const Hover: Story;
-export declare const Active: Story;
-export declare const Error: Story;
-export declare const Disabled: Story;
-export declare const BodySm: Story;
-export declare const H5: Story;
-export declare const H3: Story;
-export declare const Horizontal: Story;
-export declare const HorizontalWithError: Story;
-export declare const WithSelectedValue: Story;
-export declare const WithDynamicItems: Story;
-export declare const WithTooltip: Story;
-export declare const Required: Story;
-export declare const Controlled: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-};
-/**
- * Multiple Selection Mode Stories
- *
- * These stories demonstrate the InvisibleSelect component with selectionMode="multiple",
- * allowing users to select multiple options from the dropdown list.
- *
- * Key Features:
- * - Users can select multiple items by clicking on them
- * - Selected items are visually indicated with checkmarks
- * - The component displays the count of selected items or the selected items themselves
- * - Each selected item can be individually deselected
- */
+export declare const SingleSelection: Story;
 export declare const MultipleSelection: Story;
-export declare const MultipleSelectionWithDefaults: Story;
-export declare const MultipleSelectionWithError: Story;
-export declare const MultipleSelectionDisabled: Story;
-export declare const MultipleSelectionControlled: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-    parameters: {
-        docs: {
-            description: {
-                story: string;
-            };
-        };
-    };
-};
-export declare const MultipleSelectionWithDynamicItems: Story;
-export declare const MultipleSelectionHorizontal: Story;
-/**
- * Locale and Internationalization Support
- *
- * The InvisibleSelect component supports internationalization through the useLocale hook from react-aria-components.
- * This provides proper locale-aware behavior for:
- *
- * - Date and number formatting
- * - Text direction (RTL/LTR support)
- * - Accessibility announcements
- * - Keyboard navigation patterns
- *
- * The component automatically detects the user's locale and applies appropriate formatting and behavior.
- */
-export declare const LocaleSupport: Story;
-export declare const MultiLanguageExample: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-    parameters: {
-        docs: {
-            description: {
-                story: string;
-            };
-        };
-    };
-};
+export declare const MultipleSelectionWithSearch: Story;
+export declare const SizeXS: Story;
+export declare const SizeSM: Story;
+export declare const SizeMD: Story;
+export declare const SizeLG: Story;
+export declare const Disabled: Story;
+export declare const EmptyState: Story;
+export declare const OrientationHorizontal: Story;
+export declare const WithError: Story;
+export declare const WithErrorHorizontal: Story;
+export declare const WithDisabledItems: Story;

package/dist/style.css

@@ -921,9 +921,6 @@ select {
 .ml-3 {
   margin-left: 0.75rem;
 }
-.ml-4 {
-  margin-left: 1rem;
-}
 .mr-1 {
   margin-right: 0.25rem;
 }
@@ -939,9 +936,6 @@ select {
 .mt-0\.5 {
   margin-top: 0.125rem;
 }
-.mt-1 {
-  margin-top: 0.25rem;
-}
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -1075,9 +1069,6 @@ select {
 .h-full {
   height: 100%;
 }
-.\!max-h-\[300px\] {
-  max-height: 300px !important;
-}
 .max-h-12 {
   max-height: 3rem;
 }
@@ -1099,18 +1090,6 @@ select {
 .min-h-8 {
   min-height: 2rem;
 }
-.min-h-\[28px\] {
-  min-height: 28px;
-}
-.min-h-\[32px\] {
-  min-height: 32px;
-}
-.min-h-\[36px\] {
-  min-height: 36px;
-}
-.min-h-\[44px\] {
-  min-height: 44px;
-}
 .min-h-full {
   min-height: 100%;
 }
@@ -1174,6 +1153,9 @@ select {
 .w-\[300px\] {
   width: 300px;
 }
+.w-\[400px\] {
+  width: 400px;
+}
 .w-\[42px\] {
   width: 42px;
 }
@@ -1197,12 +1179,6 @@ select {
 .min-w-48 {
   min-width: 12rem;
 }
-.min-w-\[--trigger-width\] {
-  min-width: var(--trigger-width);
-}
-.min-w-\[120px\] {
-  min-width: 120px;
-}
 .min-w-\[150px\] {
   min-width: 150px;
 }
@@ -1221,15 +1197,9 @@ select {
 .max-w-\[280px\] {
   max-width: 280px;
 }
-.max-w-\[300px\] {
-  max-width: 300px;
-}
 .flex-1 {
   flex: 1 1 0%;
 }
-.flex-shrink-0 {
-  flex-shrink: 0;
-}
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -1295,12 +1265,6 @@ select {
 .scroll-m-12 {
   scroll-margin: 3rem;
 }
-.list-inside {
-  list-style-position: inside;
-}
-.list-disc {
-  list-style-type: disc;
-}
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1346,9 +1310,6 @@ select {
 .gap-5 {
   gap: 1.25rem;
 }
-.gap-6 {
-  gap: 1.5rem;
-}
 .gap-8 {
   gap: 2rem;
 }
@@ -1377,11 +1338,6 @@ select {
   margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
 }
-.space-y-1 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
-}
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1489,6 +1445,10 @@ select {
 .border-none {
   border-style: none;
 }
+.\!border-blue-500 {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(38 68 217 / var(--tw-border-opacity)) !important;
+}
 .\!border-error-500 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(204 64 51 / var(--tw-border-opacity)) !important;
@@ -1961,6 +1921,10 @@ select {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -2179,10 +2143,6 @@ select {
   --tw-text-opacity: 1;
   color: rgb(61 19 15 / var(--tw-text-opacity));
 }
-.text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
 .text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
@@ -2299,11 +2259,8 @@ select {
   --tw-text-opacity: 1;
   color: rgb(111 87 17 / var(--tw-text-opacity));
 }
-.opacity-0 {
-  opacity: 0;
-}
-.opacity-100 {
-  opacity: 1;
+.opacity-30 {
+  opacity: 0.3;
 }
 .opacity-50 {
   opacity: 0.5;
@@ -2376,9 +2333,6 @@ select {
 .ring-black\/10 {
   --tw-ring-color: rgb(0 0 0 / 0.1);
 }
-.ring-black\/5 {
-  --tw-ring-color: rgb(0 0 0 / 0.05);
-}
 .ring-blue-600 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(27 51 173 / var(--tw-ring-opacity));
@@ -2894,6 +2848,12 @@ select {
 .disabled\:opacity-40:disabled {
   opacity: 0.4;
 }
+.disabled\:opacity-50:disabled {
+  opacity: 0.5;
+}
+.disabled\:hover\:bg-transparent:hover:disabled {
+  background-color: transparent;
+}
 .group:hover .group-hover\:bg-primary-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(76 59 239 / var(--tw-bg-opacity));

package/package.json

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

package/dist/components/InvisibleSelect/InvisibleSelect.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/InvisibleSelect/InvisibleSelectItem.d.ts

@@ -1,25 +0,0 @@
-import { ListBoxItemProps } from 'react-aria-components';
-
-export interface InvisibleSelectItemProps extends Omit<ListBoxItemProps, "id"> {
-    children: React.ReactNode;
-    /**
-     * The unique id of the item.
-     * is necessary for the select component to work and match the selected value
-     */
-    id: string | number;
-    /**
-     * A string representation of the item's contents, used for text-based selection and accessibility.
-     * If not provided, it will try to use children if it's a string.
-     */
-    textValue?: string;
-}
-/**
- * InvisibleSelectItem component to be used within InvisibleSelect
- *
- * ### Usage
- *
- * ```typescript
- * import { InvisibleSelectItem } from "@simpli-route/apollo-ds";
- * ```
- */
-export declare const InvisibleSelectItem: (props: InvisibleSelectItemProps) => import("react/jsx-runtime").JSX.Element;