@simpli-route/apollo-ds 0.1.40 → 0.1.43

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

@@ -0,0 +1,108 @@
+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;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        label: string;
+        captionError: string;
+        placeholder: string;
+        size: "bodyDefault";
+    };
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+        };
+        orientation: {
+            control: "select";
+            options: string[];
+        };
+        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 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;
+            };
+        };
+    };
+};

package/dist/stories/SelectInput.stories.d.ts

@@ -0,0 +1,50 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: <T extends import('../components/SelectInput').SelectInputItem = import('../components/SelectInput').SelectInputItem>(props: import('../components/SelectInput').SelectInputProps<T> & {
+        ref?: import('react').Ref<HTMLButtonElement> | undefined;
+    }) => import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        selectionMode: "single";
+        size: "xs";
+    };
+    argTypes: {
+        label: {
+            control: "text";
+        };
+        placeholder: {
+            control: "text";
+        };
+        selectionMode: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+        isDisabled: {
+            control: "boolean";
+        };
+        isRequired: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SingleSelection: Story;
+export declare const MultipleSelection: Story;
+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 WithTooltip: Story;
+export declare const EmptyState: Story;

package/dist/stories/Slider.stories.d.ts

@@ -0,0 +1,13 @@
+import { Slider } from '../components';
+import { Meta, StoryObj } from '@storybook/react';
+
+declare const meta: Meta<typeof Slider>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SliderSingle: Story;
+export declare const SliderRange: Story;
+export declare const SliderRangeTooltipTop: Story;
+export declare const SliderRangeTooltipBottom: Story;
+export declare const SliderSingleTooltipLightTop: Story;
+export declare const SliderSingleTooltipLightBottom: Story;
+export declare const SliderRangeCustomSuffix: Story;

package/dist/stories/Tabs.stories.d.ts

@@ -0,0 +1,10 @@
+import { Tabs, TabsProps } from '../components/Tabs';
+import { Meta, StoryObj } from '@storybook/react';
+
+declare const meta: Meta<TabsProps<object>>;
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+export declare const Horizontal: Story;
+export declare const Vertical: Story;
+export declare const DisabledSingleTab: Story;
+export declare const DisabledAllTabs: Story;

package/dist/stories/Tooltip.stories.d.ts

@@ -0,0 +1,16 @@
+import { Tooltip } from '../components';
+import { Meta, StoryObj } from '@storybook/react';
+
+declare const meta: Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const None: Story;
+export declare const Top: Story;
+export declare const TopStart: Story;
+export declare const TopEnd: Story;
+export declare const Bottom: Story;
+export declare const BottomStart: Story;
+export declare const BottomEnd: Story;
+export declare const Right: Story;
+export declare const Left: Story;
+export declare const WithSupportText: Story;

package/dist/style.css

@@ -702,58 +702,35 @@ select {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }
-.\!container {
-  width: 100% !important;
-}
 .container {
   width: 100%;
 }
 @media (min-width: 640px) {
 
-  .\!container {
-    max-width: 640px !important;
-  }
-
   .container {
     max-width: 640px;
   }
 }
 @media (min-width: 768px) {
 
-  .\!container {
-    max-width: 768px !important;
-  }
-
   .container {
     max-width: 768px;
   }
 }
 @media (min-width: 1024px) {
 
-  .\!container {
-    max-width: 1024px !important;
-  }
-
   .container {
     max-width: 1024px;
   }
 }
 @media (min-width: 1280px) {
 
-  .\!container {
-    max-width: 1280px !important;
-  }
-
   .container {
     max-width: 1280px;
   }
 }
 @media (min-width: 1536px) {
 
-  .\!container {
-    max-width: 1536px !important;
-  }
-
   .container {
     max-width: 1536px;
   }
@@ -851,6 +828,12 @@ select {
 .z-\[1000px\] {
   z-index: 1000px;
 }
+.m-1 {
+  margin: 0.25rem;
+}
+.m-4 {
+  margin: 1rem;
+}
 .mx-0 {
   margin-left: 0px;
   margin-right: 0px;
@@ -895,9 +878,6 @@ select {
 .-mb-0\.5 {
   margin-bottom: -0.125rem;
 }
-.-mb-2 {
-  margin-bottom: -0.5rem;
-}
 .mb-0 {
   margin-bottom: 0px;
 }
@@ -931,27 +911,27 @@ select {
 .ml-3 {
   margin-left: 0.75rem;
 }
+.ml-4 {
+  margin-left: 1rem;
+}
 .mr-1 {
   margin-right: 0.25rem;
 }
 .mr-2 {
   margin-right: 0.5rem;
 }
-.mr-20 {
-  margin-right: 5rem;
-}
 .mr-3 {
   margin-right: 0.75rem;
 }
-.mr-\[5px\] {
-  margin-right: 5px;
-}
 .mt-0 {
   margin-top: 0px;
 }
 .mt-0\.5 {
   margin-top: 0.125rem;
 }
+.mt-1 {
+  margin-top: 0.25rem;
+}
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -1034,6 +1014,9 @@ select {
 .h-1 {
   height: 0.25rem;
 }
+.h-10 {
+  height: 2.5rem;
+}
 .h-12 {
   height: 3rem;
 }
@@ -1079,20 +1062,11 @@ select {
 .h-\[32px\] {
   height: 32px;
 }
-.h-\[40px\] {
-  height: 40px;
-}
-.h-\[48px\] {
-  height: 48px;
-}
-.h-\[56px\] {
-  height: 56px;
-}
 .h-full {
   height: 100%;
 }
-.\!max-h-\[185px\] {
-  max-height: 185px !important;
+.\!max-h-\[300px\] {
+  max-height: 300px !important;
 }
 .max-h-12 {
   max-height: 3rem;
@@ -1100,6 +1074,33 @@ select {
 .max-h-60 {
   max-height: 15rem;
 }
+.max-h-\[260px\] {
+  max-height: 260px;
+}
+.min-h-10 {
+  min-height: 2.5rem;
+}
+.min-h-12 {
+  min-height: 3rem;
+}
+.min-h-14 {
+  min-height: 3.5rem;
+}
+.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%;
 }
@@ -1171,12 +1172,18 @@ select {
   width: -moz-max-content;
   width: max-content;
 }
-.\!min-w-\[150px\] {
-  min-width: 150px !important;
+.min-w-0 {
+  min-width: 0px;
 }
 .min-w-48 {
   min-width: 12rem;
 }
+.min-w-\[--trigger-width\] {
+  min-width: var(--trigger-width);
+}
+.min-w-\[120px\] {
+  min-width: 120px;
+}
 .min-w-full {
   min-width: 100%;
 }
@@ -1186,9 +1193,15 @@ 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;
 }
@@ -1247,6 +1260,12 @@ 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));
 }
@@ -1292,6 +1311,9 @@ select {
 .gap-5 {
   gap: 1.25rem;
 }
+.gap-6 {
+  gap: 1.5rem;
+}
 .gap-x-1 {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
@@ -1317,6 +1339,11 @@ 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)));
@@ -1354,6 +1381,11 @@ select {
 .overflow-y-auto {
   overflow-y: auto;
 }
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .whitespace-normal {
   white-space: normal;
 }
@@ -1381,6 +1413,9 @@ select {
 .border {
   border-width: 1px;
 }
+.border-0 {
+  border-width: 0px;
+}
 .border-2 {
   border-width: 2px;
 }
@@ -1826,6 +1861,10 @@ select {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1874,9 +1913,6 @@ select {
   padding-top: 2px;
   padding-bottom: 2px;
 }
-.\!pr-2 {
-  padding-right: 0.5rem !important;
-}
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -1886,9 +1922,6 @@ select {
 .pl-1 {
   padding-left: 0.25rem;
 }
-.pl-1\.5 {
-  padding-left: 0.375rem;
-}
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -2072,6 +2105,10 @@ 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));
@@ -2184,6 +2221,12 @@ select {
   --tw-text-opacity: 1;
   color: rgb(111 87 17 / var(--tw-text-opacity));
 }
+.opacity-0 {
+  opacity: 0;
+}
+.opacity-100 {
+  opacity: 1;
+}
 .opacity-50 {
   opacity: 0.5;
 }
@@ -2230,6 +2273,9 @@ select {
 .outline {
   outline-style: solid;
 }
+.outline-0 {
+  outline-width: 0px;
+}
 .ring-0 {
   --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(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2382,16 +2428,6 @@ select {
 .ease-in-out {
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-.no-scrollbar {
-    scrollbar-width: none;
-    * {
-      -webkit-overflow-scrolling: touch !important;
-      scrollbar-width: none !important;
-    }
-    *::-webkit-scrollbar {
-      display: none !important;
-    }
-  }
 .custom-scrollbar {
     scrollbar-width: thin !important; /* Firefox */
 
@@ -2606,6 +2642,9 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(29 13 165 / var(--tw-border-opacity));
 }
+.hover\:bg-black\/\[5\%\]:hover {
+  background-color: rgb(0 0 0 / 5%);
+}
 .hover\:bg-neutral-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(250 250 250 / var(--tw-bg-opacity));
@@ -2748,10 +2787,18 @@ select {
 .focus-visible\:ring-offset-1:focus-visible {
   --tw-ring-offset-width: 1px;
 }
+.group:hover .group-hover\:bg-primary-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(76 59 239 / var(--tw-bg-opacity));
+}
 .group:hover .group-hover\:text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(38 68 217 / var(--tw-text-opacity));
 }
+.group:hover .group-hover\:text-primary-100 {
+  --tw-text-opacity: 1;
+  color: rgb(230 227 255 / var(--tw-text-opacity));
+}
 .group:focus .group-focus\:text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -2768,6 +2815,9 @@ select {
   width: 1.5rem;
   height: 1.5rem;
 }
+.group[data-empty] .group-data-\[empty\]\:invisible {
+  visibility: hidden;
+}
 @media (min-width: 640px) {
 
   .sm\:block {
@@ -2780,6 +2830,16 @@ select {
     width: 400px;
   }
 }
+@media (min-width: 1024px) {
+
+  .lg\:custom-scrollbar {
+    scrollbar-width: thin !important; /* Firefox */
+    margin-right: 1px;
+  }
+}
+.\[\&\:\:-webkit-search-cancel-button\]\:hidden::-webkit-search-cancel-button {
+  display: none;
+}
 .\[\&_svg\]\:h-3 svg {
   height: 0.75rem;
 }

package/package.json

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

package/dist/components/Select/Select.d.ts

@@ -1,12 +0,0 @@
-import { SelectProps } from './types';
-
-/**
- * Select component **version 0.1**  https://www.figma.com/design/h6tZeqNdVEUvrgwOwK4vcY/Design-System---The-Bible?node-id=5862-7802&p=f&t=64UuGkWucIkh7vwn-0
- *
- * ### Usage
- *
- * ```typescript
- * import { Select, SelectItem } from "@simpli-route/apollo-ds";
- * ```
- */
-export declare const Select: ({ mode, keyLabelName, keyIdName, className, selectButtonClassName, placeholder, isDisabled, size, items, renderItem, value, onSelectChange, classNameLabel, isRequired, label, tooltipText, tooltipSupportText, tooltipProps, hiddenDiscardButton, tooltipMode, textAllOption, }: SelectProps<object>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/SelectContent.d.ts

@@ -1,24 +0,0 @@
-import { RefObject } from 'react';
-
-interface SelectContentProps {
-    isDisabled: boolean;
-    size: "xs" | "sm" | "md" | "lg";
-    selectButtonClassName?: string;
-    setIsOpen: (isOpen: boolean) => void;
-    isOpen: boolean;
-    value: string[];
-    placeholder: string;
-    items?: any[];
-    keyIdName: string;
-    keyLabelName: string;
-    visibleItems: number;
-    handleDeleteOptionSelected: (option: string) => void;
-    maxLengthTextOption: number;
-    hiddenDiscardButton: boolean;
-    containerRef: RefObject<HTMLDivElement>;
-    setTooltipMessage: (message: string) => void;
-    hasOverflow: boolean;
-    isCalculatingChips: boolean;
-}
-export declare const SelectContent: ({ isDisabled, size, selectButtonClassName, setIsOpen, isOpen, value, placeholder, items, keyIdName, keyLabelName, visibleItems, handleDeleteOptionSelected, maxLengthTextOption, hiddenDiscardButton, containerRef, setTooltipMessage, hasOverflow, isCalculatingChips, }: SelectContentProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Select/SelectItem.d.ts

@@ -1,13 +0,0 @@
-import { ListBoxItemProps } from 'react-aria-components';
-
-interface SelectItemProps extends Omit<ListBoxItemProps, "id"> {
-    children: React.ReactNode;
-    isSelected?: boolean;
-    /**
-     * The unique id of the item.
-     * is necessary for the select component to work and match the selected value
-     */
-    id: string | number;
-}
-export declare const SelectItem: (props: SelectItemProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Select/TooltipSelect.d.ts

@@ -1,3 +0,0 @@
-import { TooltipProps } from '../Tooltip';
-
-export declare const TooltipSelect: ({ children, supportText, mode, className, placement }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/index.d.ts

@@ -1,3 +0,0 @@
-export { Select } from './Select';
-export { SelectItem } from './SelectItem';
-export type { SelectProps } from './types';