@simpli-route/apollo-ds 0.1.42 → 0.1.43

package/dist/index.es99.js

@@ -1,59 +1,4 @@
-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 { Tooltip as c } from "./index.es34.js";
-import { TooltipTrigger as d } from "./index.es35.js";
-const y = ({
-  index: o,
-  valuePercent: n,
-  value: a,
-  suffix: p,
-  modeTooltip: g,
-  positionTooltip: t,
-  showTypeValue: s,
-  classNameThumb: e,
-  isHiddenValue: l
-}) => /* @__PURE__ */ r.jsx(
-  "div",
-  {
-    className: i("absolute", s === "tooltip" && !l ? "top-[-6px]" : "top-1/2"),
-    style: { left: `${n * 100}%`, transform: "translate(-50%, -50%)" },
-    children: s === "tooltip" && !l ? /* @__PURE__ */ r.jsxs(d, { closeDelay: 100, delay: 100, children: [
-      /* @__PURE__ */ r.jsx("div", { children: /* @__PURE__ */ r.jsx(
-        m,
-        {
-          index: o,
-          className: i(
-            "dragging:bg-primary-100 size-5 rounded-full bg-primary-500 outline-none ring-black transition focus-visible:ring-2",
-            e
-          )
-        }
-      ) }),
-      /* @__PURE__ */ r.jsxs(
-        c,
-        {
-          mode: g,
-          placement: t,
-          size: "sm",
-          className: i("!text-sm", t === "top" ? "!mb-6" : "!mt-6"),
-          children: [
-            a,
-            p
-          ]
-        }
-      )
-    ] }) : /* @__PURE__ */ r.jsx(
-      m,
-      {
-        index: o,
-        className: i(
-          "dragging:bg-primary-100 size-5 rounded-full bg-primary-500 outline-none ring-black transition focus-visible:ring-2",
-          e
-        )
-      }
-    )
-  }
-);
+var r = {};
 export {
-  y as SliderThumb
+  r as __exports
 };

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,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;
 }
@@ -940,15 +920,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 +1014,9 @@ select {
 .h-1 {
   height: 0.25rem;
 }
+.h-10 {
+  height: 2.5rem;
+}
 .h-12 {
   height: 3rem;
 }
@@ -1085,21 +1062,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 +1074,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 +1172,6 @@ select {
   width: -moz-max-content;
   width: max-content;
 }
-.\!min-w-\[150px\] {
-  min-width: 150px !important;
-}
 .min-w-0 {
   min-width: 0px;
 }
@@ -1404,6 +1381,11 @@ select {
 .overflow-y-auto {
   overflow-y: auto;
 }
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .whitespace-normal {
   white-space: normal;
 }
@@ -1431,6 +1413,9 @@ select {
 .border {
   border-width: 1px;
 }
+.border-0 {
+  border-width: 0px;
+}
 .border-2 {
   border-width: 2px;
 }
@@ -1876,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;
@@ -1924,9 +1913,6 @@ select {
   padding-top: 2px;
   padding-bottom: 2px;
 }
-.\!pr-2 {
-  padding-right: 0.5rem !important;
-}
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -1936,9 +1922,6 @@ select {
 .pl-1 {
   padding-left: 0.25rem;
 }
-.pl-1\.5 {
-  padding-left: 0.375rem;
-}
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -2290,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);
@@ -2442,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 */
 
@@ -2666,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));
@@ -2808,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));
@@ -2828,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 {
@@ -2840,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.42",
+  "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';

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;
-}