@simpli-route/apollo-ds 0.1.42 → 0.1.44

package/dist/index.es98.js

@@ -1,4 +1,21 @@
-var e = {};
+import l from "react";
+const e = l, n = ({
+  title: r,
+  titleId: a,
+  ...o
+}, t) => /* @__PURE__ */ e.createElement("svg", Object.assign({
+  fill: "currentColor",
+  "aria-hidden": "true",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg",
+  ref: t,
+  "aria-labelledby": a
+}, o), r ? /* @__PURE__ */ e.createElement("title", {
+  id: a
+}, r) : null, /* @__PURE__ */ e.createElement("path", {
+  d: "M2 15.892a.83.83 0 0 1 .242-.591l6.807-6.807a4.166 4.166 0 0 1 5.899 0l6.807 6.806a.835.835 0 0 1-.912 1.365.8.8 0 0 1-.271-.181l-6.807-6.807a2.5 2.5 0 0 0-3.533 0l-6.807 6.806A.833.833 0 0 1 2 15.893Z"
+})), c = e.forwardRef(n);
+var i = c;
 export {
-  e as __exports
+  i as U
 };

package/dist/index.es99.js

@@ -1,6 +1,6 @@
 import { j as r } from "./index.es38.js";
 import { SliderThumb as m } from "react-aria-components";
-import { cn as i } from "./index.es40.js";
+import { cn as i } from "./index.es39.js";
 import { Tooltip as c } from "./index.es34.js";
 import { TooltipTrigger as d } from "./index.es35.js";
 const y = ({

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/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,15 @@ select {
 .z-\[1000px\] {
   z-index: 1000px;
 }
+.m-1 {
+  margin: 0.25rem;
+}
+.m-2 {
+  margin: 0.5rem;
+}
+.m-4 {
+  margin: 1rem;
+}
 .mx-0 {
   margin-left: 0px;
   margin-right: 0px;
@@ -895,9 +881,6 @@ select {
 .-mb-0\.5 {
   margin-bottom: -0.125rem;
 }
-.-mb-2 {
-  margin-bottom: -0.5rem;
-}
 .mb-0 {
   margin-bottom: 0px;
 }
@@ -940,15 +923,9 @@ select {
 .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;
 }
@@ -1040,6 +1017,9 @@ select {
 .h-1 {
   height: 0.25rem;
 }
+.h-10 {
+  height: 2.5rem;
+}
 .h-12 {
   height: 3rem;
 }
@@ -1085,21 +1065,9 @@ 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;
 }
@@ -1109,6 +1077,21 @@ 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;
 }
@@ -1192,9 +1175,6 @@ select {
   width: -moz-max-content;
   width: max-content;
 }
-.\!min-w-\[150px\] {
-  min-width: 150px !important;
-}
 .min-w-0 {
   min-width: 0px;
 }
@@ -1207,6 +1187,9 @@ select {
 .min-w-\[120px\] {
   min-width: 120px;
 }
+.min-w-\[200px\] {
+  min-width: 200px;
+}
 .min-w-full {
   min-width: 100%;
 }
@@ -1404,6 +1387,11 @@ select {
 .overflow-y-auto {
   overflow-y: auto;
 }
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .whitespace-normal {
   white-space: normal;
 }
@@ -1431,6 +1419,9 @@ select {
 .border {
   border-width: 1px;
 }
+.border-0 {
+  border-width: 0px;
+}
 .border-2 {
   border-width: 2px;
 }
@@ -1838,6 +1829,9 @@ select {
 .p-0 {
   padding: 0px;
 }
+.p-0\.5 {
+  padding: 0.125rem;
+}
 .p-1 {
   padding: 0.25rem;
 }
@@ -1876,6 +1870,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;
@@ -1924,9 +1922,6 @@ select {
   padding-top: 2px;
   padding-bottom: 2px;
 }
-.\!pr-2 {
-  padding-right: 0.5rem !important;
-}
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -1936,9 +1931,6 @@ select {
 .pl-1 {
   padding-left: 0.25rem;
 }
-.pl-1\.5 {
-  padding-left: 0.375rem;
-}
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -2290,6 +2282,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);
@@ -2442,16 +2437,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 */
 
@@ -2666,6 +2651,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));
@@ -2808,10 +2796,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));
@@ -2828,6 +2824,9 @@ select {
   width: 1.5rem;
   height: 1.5rem;
 }
+.group[data-empty] .group-data-\[empty\]\:invisible {
+  visibility: hidden;
+}
 @media (min-width: 640px) {
 
   .sm\:block {
@@ -2840,6 +2839,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.42",
+  "version": "0.1.44",
   "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';

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

@@ -1,76 +0,0 @@
-import { TooltipProps } from '../Tooltip';
-import { SelectProps as AriaSelectProps } from 'react-aria-components';
-
-export type BaseOption = {
-    id: string;
-    name: string;
-};
-export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, "children" | "onSelectionChange" | "value"> {
-    label?: string;
-    onSelectChange: (value: string[]) => void;
-    classNameLabel?: string;
-    /**
-     * Key name of the id field. Example: { id: "123", name: "Option 1" } => keyIdName = "id"
-     *
-     */
-    keyIdName: string;
-    /**
-     * Key name of the label field. Example: { id: "123", name: "Option 1" } => keyLabelName = "name"
-     *
-     */
-    keyLabelName: string;
-    /**
-     * Array of options to show in the select
-     */
-    items: T[];
-    /**
-     * Render item function to show options in the select
-     */
-    renderItem: <T extends BaseOption>(item: T) => React.ReactNode | null;
-    /**
-     * Mode of the select
-     * @default "single"
-     */
-    mode?: "single" | "multiple";
-    placeholder?: string;
-    selectButtonClassName?: string;
-    isDisabled?: boolean;
-    /**
-     * Size of the select button
-     * @default "md"
-     */
-    size?: "xs" | "sm" | "md" | "lg";
-    isRequired?: boolean;
-    /**
-     * Optional text to show on a tooltip besides the label
-     */
-    tooltipText?: string;
-    /**
-     * Define additional support text
-     */
-    tooltipSupportText?: string;
-    /** Optional props to pass to the tooltip
-     * @default undefined
-     */
-    tooltipProps?: Omit<TooltipProps, "children">;
-    /**
-     * Current value selected keys of the select
-     * @default []
-     */
-    value?: string[];
-    /**
-     * Hide discard button option
-     * @default false
-     */
-    hiddenDiscardButton?: boolean;
-    /**
-     * Mode of the tooltip
-     * @default "dark"
-     */
-    tooltipMode?: "dark" | "light";
-    /**
-     * Text of the all option
-     * @default "All"
-     */
-    textAllOption?: string;
-}