@simpli-route/apollo-ds 0.1.54 → 0.1.56

package/dist/index.es9.js

@@ -1,12 +1,12 @@
 import { j as e } from "./index.es40.js";
-import { OptionsIcon as J } from "./index.es42.js";
+import { OptionsIcon as J } from "./index.es41.js";
 import { useState as N } from "react";
 import { useFilter as K, Button as Q, Select as T, Popover as U } from "react-aria-components";
-import { cn as p } from "./index.es41.js";
+import { cn as p } from "./index.es42.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/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/stories/InvisibleTimeField.stories.d.ts

@@ -1,9 +1,10 @@
+import { TimeValue } from 'react-aria-components';
 import { StoryObj } from '@storybook/react';
 import { Time } from '@internationalized/date';
 
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('../components').InvisibleTimeFieldProps<import('react-aria').TimeValue> & import('react').RefAttributes<HTMLDivElement>>;
+    component: import('react').ForwardRefExoticComponent<import('../components').InvisibleTimeFieldProps<TimeValue> & import('react').RefAttributes<HTMLDivElement>>;
     parameters: {
         layout: string;
     };
@@ -75,3 +76,4 @@ export declare const TwelveHourCycle: Story;
 export declare const TwentyFourHourCycle: Story;
 export declare const WithLeadingZeros: Story;
 export declare const WithPlaceholder: Story;
+export declare const ControlledExamples: 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));
 }
@@ -1377,11 +1341,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 +1448,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 +1924,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 +2146,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,12 +2262,6 @@ 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;
 }
@@ -2379,9 +2336,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));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simpli-route/apollo-ds",
-  "version": "0.1.54",
+  "version": "0.1.56",
   "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;