@dktunited-techoff/techoff-suite-ui 1.5.6 → 1.6.0

package/esm/components/TsCheckbox/TsCheckbox.css

@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   cursor: pointer;
+  margin-left: -3px;
 }
 /* ########## */
 /* DISABLED   */

package/esm/components/TsDropdown/TsDropdown/TsDropdown.css

@@ -0,0 +1,83 @@
+.ts-dropdown-container {
+  position: relative;
+  width: 100%;
+}
+.ts-dropdown-input {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 32px;
+  padding-left: 10px;
+  border: 1px solid #949494;
+  cursor: pointer;
+}
+.ts-dropdown-input--disabled {
+  background: #fafafa;
+  cursor: not-allowed;
+}
+.ts-dropdown-input--placeholder {
+  flex: 1;
+  color: #7a7a7a;
+  font-weight: 400;
+}
+.ts-dropdown-input--value {
+  flex: 1;
+  font-weight: 600;
+}
+.ts-dropdown-input--chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+/* ####### */
+/* LABEL   */
+.ts-dropdown-label {
+  padding-bottom: 6px;
+}
+/* ###### */
+/* MENU   */
+.ts-dropdown-menu-container {
+  position: absolute;
+  top: calc(100%+8px);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 320px;
+  max-height: 250px;
+  padding: 12px;
+  box-shadow: 0px 8px 9px 0px #1010101a;
+  background: #ffffff;
+  overflow: hidden;
+  z-index: 10;
+}
+.ts-dropdown-search {
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid #d9dde1;
+}
+.ts-dropdown-menu {
+  overflow: auto;
+}
+.ts-dropdown-menu-item {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  padding: 0 12px;
+  cursor: pointer;
+}
+.ts-dropdown-menu-item:hover {
+  background: #e1e3f5;
+  color: #3643ba;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/esm/components/TsDropdown/TsDropdown/TsDropdown.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TsDropdownProps } from './TsDropdown.types';
+import './TsDropdown.css';
+export declare const TsDropdown: <T extends unknown>({ label, options, placeholder, searchPlaceholder, value, disabled, searchable, getOptionValue, getOptionLabel, onChange, }: TsDropdownProps<T>) => React.JSX.Element;

package/esm/components/TsDropdown/TsDropdown/TsDropdown.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { TsIcon } from '../../TsIcon/TsIcon';
+import { TsInput } from '../../TsInput/TsInput/TsInput';
+import { useClickOutside } from '../../../hooks/use-click-outside';
+import { capitalize } from '../../../utils/string.utils';
+import './TsDropdown.css';
+export const TsDropdown = ({ label, options, placeholder, searchPlaceholder, value, disabled, searchable, getOptionValue, getOptionLabel, onChange, }) => {
+    const [showDropdownMenu, setShowDropdownMenu] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+    const [items, setItems] = useState(options ?? []);
+    const [selectedItem, setSelectedItem] = useState(value);
+    const ref = useClickOutside(() => setShowDropdownMenu(false));
+    // ########
+    // Handlers
+    const handleSelectItem = (item) => {
+        setSelectedItem(item);
+        setShowDropdownMenu(false);
+        onChange(item);
+    };
+    const handleShowDropdownMenu = () => !disabled && setShowDropdownMenu(true);
+    // ########
+    // Watchers
+    useEffect(() => {
+        if (searchable && options) {
+            setItems(options.filter(option => getOptionLabel(option).toLowerCase().includes(searchValue.toLowerCase())));
+        }
+    }, [searchValue]);
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-dropdown-container", ref: ref },
+        React.createElement("div", { className: "ts-dropdown-input-container" },
+            label && React.createElement("div", { className: "ts-dropdown-label" }, label),
+            React.createElement("div", { className: `ts-dropdown-input ${disabled ? 'ts-dropdown-input--disabled' : ''}`, onClick: handleShowDropdownMenu },
+                !selectedItem && placeholder && React.createElement("div", { className: "ts-dropdown-input--placeholder" }, placeholder),
+                selectedItem && React.createElement("div", { className: "ts-dropdown-input--value" }, getOptionLabel(selectedItem)),
+                React.createElement("div", { className: "ts-dropdown-input--chevron" },
+                    React.createElement(TsIcon, { name: "chevron-down" })))),
+        !disabled && showDropdownMenu && (React.createElement("div", { className: "ts-dropdown-menu-container" },
+            searchable && (React.createElement("div", { className: "ts-dropdown-search" },
+                React.createElement(TsInput, { icon: "search", placeholder: searchPlaceholder, value: searchValue, autoFocus: true, onChange: setSearchValue }))),
+            React.createElement("div", { className: "ts-dropdown-menu" }, items.map(item => (React.createElement("div", { key: getOptionValue(item), className: "ts-dropdown-menu-item", onClick: () => handleSelectItem(item) }, capitalize(getOptionLabel(item))))))))));
+};
+//# sourceMappingURL=TsDropdown.js.map

package/esm/components/TsDropdown/TsDropdown/TsDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsDropdown.js","sourceRoot":"","sources":["../../../../src/components/TsDropdown/TsDropdown/TsDropdown.tsx"],"names":[],"mappings":"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"}

package/esm/components/TsDropdown/TsDropdown/TsDropdown.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { TsDropdownProps } from './TsDropdown.types';
+import { TsIcon } from '../../TsIcon/TsIcon';
+import { TsInput } from '../../TsInput/TsInput/TsInput';
+import { useClickOutside } from '../../../hooks/use-click-outside';
+import { capitalize } from '../../../utils/string.utils';
+import './TsDropdown.css';
+
+export const TsDropdown = <T extends unknown>({
+  label,
+  options,
+  placeholder,
+  searchPlaceholder,
+  value,
+  disabled,
+  searchable,
+  getOptionValue,
+  getOptionLabel,
+  onChange,
+}: TsDropdownProps<T>) => {
+  const [showDropdownMenu, setShowDropdownMenu] = useState<boolean>(false);
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [items, setItems] = useState<T[]>(options ?? []);
+  const [selectedItem, setSelectedItem] = useState<T | undefined>(value);
+  const ref = useClickOutside(() => setShowDropdownMenu(false));
+
+  // ########
+  // Handlers
+  const handleSelectItem = (item: T) => {
+    setSelectedItem(item);
+    setShowDropdownMenu(false);
+    onChange(item);
+  };
+  const handleShowDropdownMenu = () => !disabled && setShowDropdownMenu(true);
+
+  // ########
+  // Watchers
+  useEffect(() => {
+    if (searchable && options) {
+      setItems(options.filter(option => getOptionLabel(option).toLowerCase().includes(searchValue.toLowerCase())));
+    }
+  }, [searchValue]);
+
+  // #########
+  // Rendering
+  return (
+    <div className="ts-dropdown-container" ref={ref}>
+      <div className="ts-dropdown-input-container">
+        {label && <div className="ts-dropdown-label">{label}</div>}
+        <div
+          className={`ts-dropdown-input ${disabled ? 'ts-dropdown-input--disabled' : ''}`}
+          onClick={handleShowDropdownMenu}
+        >
+          {!selectedItem && placeholder && <div className="ts-dropdown-input--placeholder">{placeholder}</div>}
+          {selectedItem && <div className="ts-dropdown-input--value">{getOptionLabel(selectedItem)}</div>}
+          <div className="ts-dropdown-input--chevron">
+            <TsIcon name="chevron-down" />
+          </div>
+        </div>
+      </div>
+
+      {!disabled && showDropdownMenu && (
+        <div className="ts-dropdown-menu-container">
+          {searchable && (
+            <div className="ts-dropdown-search">
+              <TsInput
+                icon="search"
+                placeholder={searchPlaceholder}
+                value={searchValue}
+                autoFocus
+                onChange={setSearchValue}
+              />
+            </div>
+          )}
+
+          <div className="ts-dropdown-menu">
+            {items.map(item => (
+              <div key={getOptionValue(item)} className="ts-dropdown-menu-item" onClick={() => handleSelectItem(item)}>
+                {capitalize(getOptionLabel(item))}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/esm/components/TsDropdown/TsDropdown/TsDropdown.types.d.ts

@@ -0,0 +1,12 @@
+export type TsDropdownProps<T> = {
+    label?: string;
+    options?: T[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    value?: T;
+    disabled?: boolean;
+    searchable?: boolean;
+    getOptionLabel: (option: T) => string;
+    getOptionValue: (option: T) => string;
+    onChange: (value?: T) => void;
+};

package/esm/components/TsDropdown/TsDropdown/TsDropdown.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TsDropdown.types.js.map

package/esm/components/TsDropdown/TsDropdown/TsDropdown.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsDropdown.types.js","sourceRoot":"","sources":["../../../../src/components/TsDropdown/TsDropdown/TsDropdown.types.ts"],"names":[],"mappings":""}

package/esm/components/TsDropdown/TsDropdown/TsDropdown.types.ts

@@ -0,0 +1,12 @@
+export type TsDropdownProps<T> = {
+  label?: string;
+  options?: T[];
+  placeholder?: string;
+  searchPlaceholder?: string;
+  value?: T;
+  disabled?: boolean;
+  searchable?: boolean;
+  getOptionLabel: (option: T) => string;
+  getOptionValue: (option: T) => string;
+  onChange: (value?: T) => void;
+};

package/esm/components/TsDropdown/TsDropdown/__stories__/TsDropdown.stories.mdx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsDropdown } from '../TsDropdown';
+import { fruits } from './fruits';
+
+<Meta title="Components/Dropdown" />
+
+export const dropdownArgTypes = {
+  label: {
+    control: 'text',
+    description: 'Label of the dropdown.',
+  },
+  placeholder: {
+    control: 'text',
+    description: 'Placeholder of the dropdown.',
+  },
+  searchPlaceholder: {
+    control: 'text',
+    description: 'Placeholder of the option search (only for searchable dropdowns).',
+  },
+  searchable: {
+    control: 'boolean',
+    description: 'Enable search on dropdown items.',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  disabled: {
+    control: 'boolean',
+    description: 'Enable state of the dropdown.',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when clicking on the dropdown.',
+  },
+};
+
+# Dropdown
+
+Dropdowns show a list of options that can be used to select, filter or sort content.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      label: 'Label',
+      options: fruits,
+      searchPlaceholder: '',
+      placeholder: 'Select an item',
+      disabled: false,
+      searchable: false,
+      getOptionLabel: function ol(fruit) {
+        return fruit.name;
+      },
+      getOptionValue: function ov(fruit) {
+        return fruit.id;
+      },
+    }}
+    argTypes={dropdownArgTypes}
+  >
+    {args => <TsDropdown {...args}>{args.children}</TsDropdown>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsDropdown} />

package/esm/components/TsDropdown/TsDropdown/__stories__/fruits.d.ts

@@ -0,0 +1,4 @@
+export declare const fruits: {
+    name: string;
+    id: number;
+}[];

package/esm/components/TsDropdown/TsDropdown/__stories__/fruits.js

@@ -0,0 +1,48 @@
+export const fruits = [
+    { name: 'Persimmon', id: 52 },
+    { name: 'Strawberry', id: 3 },
+    { name: 'Banana', id: 1 },
+    { name: 'Tomato', id: 5 },
+    { name: 'Pear', id: 4 },
+    { name: 'Durian', id: 60 },
+    { name: 'Blackberry', id: 64 },
+    { name: 'Lingonberry', id: 65 },
+    { name: 'Kiwi', id: 66 },
+    { name: 'Lychee', id: 67 },
+    { name: 'Pineapple', id: 10 },
+    { name: 'Fig', id: 68 },
+    { name: 'Gooseberry', id: 69 },
+    { name: 'Passionfruit', id: 70 },
+    { name: 'Plum', id: 71 },
+    { name: 'Orange', id: 2 },
+    { name: 'GreenApple', id: 72 },
+    { name: 'Raspberry', id: 23 },
+    { name: 'Watermelon', id: 25 },
+    { name: 'Lemon', id: 26 },
+    { name: 'Mango', id: 27 },
+    { name: 'Blueberry', id: 33 },
+    { name: 'Apple', id: 6 },
+    { name: 'Guava', id: 37 },
+    { name: 'Apricot', id: 35 },
+    { name: 'Papaya', id: 42 },
+    { name: 'Melon', id: 41 },
+    { name: 'Tangerine', id: 77 },
+    { name: 'Pitahaya', id: 78 },
+    { name: 'Lime', id: 44 },
+    { name: 'Pomegranate', id: 79 },
+    { name: 'Dragonfruit', id: 80 },
+    { name: 'Grape', id: 81 },
+    { name: 'Morus', id: 82 },
+    { name: 'Feijoa', id: 76 },
+    { name: 'Avocado', id: 84 },
+    { name: 'Kiwifruit', id: 85 },
+    { name: 'Cranberry', id: 87 },
+    { name: 'Cherry', id: 9 },
+    { name: 'Peach', id: 86 },
+    { name: 'Jackfruit', id: 94 },
+    { name: 'Horned Melon', id: 95 },
+    { name: 'Hazelnut', id: 96 },
+    { name: 'Pomelo', id: 98 },
+    { name: 'Mangosteen', id: 99 },
+];
+//# sourceMappingURL=fruits.js.map

package/esm/components/TsDropdown/TsDropdown/__stories__/fruits.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fruits.js","sourceRoot":"","sources":["../../../../../src/components/TsDropdown/TsDropdown/__stories__/fruits.ts"],"names":[],"mappings":"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"}

package/esm/components/TsDropdown/TsDropdown/__stories__/fruits.ts

@@ -0,0 +1,47 @@
+export const fruits = [
+  { name: 'Persimmon', id: 52 },
+  { name: 'Strawberry', id: 3 },
+  { name: 'Banana', id: 1 },
+  { name: 'Tomato', id: 5 },
+  { name: 'Pear', id: 4 },
+  { name: 'Durian', id: 60 },
+  { name: 'Blackberry', id: 64 },
+  { name: 'Lingonberry', id: 65 },
+  { name: 'Kiwi', id: 66 },
+  { name: 'Lychee', id: 67 },
+  { name: 'Pineapple', id: 10 },
+  { name: 'Fig', id: 68 },
+  { name: 'Gooseberry', id: 69 },
+  { name: 'Passionfruit', id: 70 },
+  { name: 'Plum', id: 71 },
+  { name: 'Orange', id: 2 },
+  { name: 'GreenApple', id: 72 },
+  { name: 'Raspberry', id: 23 },
+  { name: 'Watermelon', id: 25 },
+  { name: 'Lemon', id: 26 },
+  { name: 'Mango', id: 27 },
+  { name: 'Blueberry', id: 33 },
+  { name: 'Apple', id: 6 },
+  { name: 'Guava', id: 37 },
+  { name: 'Apricot', id: 35 },
+  { name: 'Papaya', id: 42 },
+  { name: 'Melon', id: 41 },
+  { name: 'Tangerine', id: 77 },
+  { name: 'Pitahaya', id: 78 },
+  { name: 'Lime', id: 44 },
+  { name: 'Pomegranate', id: 79 },
+  { name: 'Dragonfruit', id: 80 },
+  { name: 'Grape', id: 81 },
+  { name: 'Morus', id: 82 },
+  { name: 'Feijoa', id: 76 },
+  { name: 'Avocado', id: 84 },
+  { name: 'Kiwifruit', id: 85 },
+  { name: 'Cranberry', id: 87 },
+  { name: 'Cherry', id: 9 },
+  { name: 'Peach', id: 86 },
+  { name: 'Jackfruit', id: 94 },
+  { name: 'Horned Melon', id: 95 },
+  { name: 'Hazelnut', id: 96 },
+  { name: 'Pomelo', id: 98 },
+  { name: 'Mangosteen', id: 99 },
+];

package/esm/components/TsInput/TsInput/TsInput.css

@@ -5,14 +5,14 @@
   position: relative;
   width: 100%;
 }
-input {
+.ts-input-container input {
   width: 100%;
   height: 32px;
-  padding: 0 10px;
   border: 1px solid #949494;
   font-weight: 600;
 }
 input::placeholder {
+  color: #7a7a7a;
   font-weight: 400;
 }
 input:disabled {
@@ -21,6 +21,9 @@ input:disabled {
 input:focus {
   border: 1.5px solid #3643ba;
 }
+.ts-input--padding-0 input {
+  padding: 0 10px;
+}
 .ts-input--padding-1 input {
   padding: 0 30px 0 10px;
 }

package/esm/components/TsInput/TsInput/TsInput.js

@@ -4,7 +4,7 @@ import './TsInput.css';
 export const TsInput = ({ icon, label, value, onChange, ...props }) => {
     // #########
     // Rendering
-    return (React.createElement("div", { className: `ts-input ${icon ? 'ts-input--padding-1' : ''}` },
+    return (React.createElement("div", { className: `ts-input ${icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}` },
         label && React.createElement("div", { className: "ts-input-label" }, label),
         React.createElement("div", { className: "ts-input-container" },
             React.createElement("input", { type: "text", value: value, onChange: e => onChange(e.target.value), ...props }),

package/esm/components/TsInput/TsInput/TsInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAClF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,EAAE;QAC5D,KAAK,IAAI,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;QACvD,6BAAK,SAAS,EAAC,oBAAoB;YACjC,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;YACtF,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;gBAC5B,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAClF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE;QAC/E,KAAK,IAAI,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;QACvD,6BAAK,SAAS,EAAC,oBAAoB;YACjC,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;YACtF,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;gBAC5B,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/components/TsInput/TsInput/TsInput.tsx

@@ -7,7 +7,7 @@ export const TsInput = ({ icon, label, value, onChange, ...props }: TsInputProps
   // #########
   // Rendering
   return (
-    <div className={`ts-input ${icon ? 'ts-input--padding-1' : ''}`}>
+    <div className={`ts-input ${icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}`}>
       {label && <div className="ts-input-label">{label}</div>}
       <div className="ts-input-container">
         <input type="text" value={value} onChange={e => onChange(e.target.value)} {...props} />

package/esm/components/TsInput/TsInput/__stories__/TsInput.stories.mdx

@@ -19,6 +19,11 @@ export const inputArgTypes = {
     control: 'text',
     description: 'Placeholder of the input.',
   },
+  disabled: {
+    control: 'boolean',
+    description: 'Enable state of the input.',
+    table: { defaultValue: { summary: 'false' } },
+  },
 };
 
 # Input
@@ -30,7 +35,7 @@ Input allows the user to enter content and data when the expected user input is
 <Canvas>
   <Story
     name="Overview"
-    args={{ label: '', placeholder: 'Enter some text', onChange: () => {} }}
+    args={{ label: 'Label', placeholder: 'Enter some text', disabled: false, onChange: () => {} }}
     argTypes={inputArgTypes}
   >
     {args => <TsInput {...args} />}

package/esm/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components/TsButton/TsButton';
 export * from './components/TsCheckbox/TsCheckbox';
+export * from './components/TsDropdown/TsDropdown/TsDropdown';
 export * from './components/TsIcon/TsIcon';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';

package/esm/index.js

@@ -1,5 +1,6 @@
 export * from './components/TsButton/TsButton';
 export * from './components/TsCheckbox/TsCheckbox';
+export * from './components/TsDropdown/TsDropdown/TsDropdown';
 export * from './components/TsIcon/TsIcon';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC"}

package/lib/components/TsCheckbox/TsCheckbox.css

@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   cursor: pointer;
+  margin-left: -3px;
 }
 /* ########## */
 /* DISABLED   */

package/lib/components/TsDropdown/TsDropdown/TsDropdown.css

@@ -0,0 +1,83 @@
+.ts-dropdown-container {
+  position: relative;
+  width: 100%;
+}
+.ts-dropdown-input {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 32px;
+  padding-left: 10px;
+  border: 1px solid #949494;
+  cursor: pointer;
+}
+.ts-dropdown-input--disabled {
+  background: #fafafa;
+  cursor: not-allowed;
+}
+.ts-dropdown-input--placeholder {
+  flex: 1;
+  color: #7a7a7a;
+  font-weight: 400;
+}
+.ts-dropdown-input--value {
+  flex: 1;
+  font-weight: 600;
+}
+.ts-dropdown-input--chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+/* ####### */
+/* LABEL   */
+.ts-dropdown-label {
+  padding-bottom: 6px;
+}
+/* ###### */
+/* MENU   */
+.ts-dropdown-menu-container {
+  position: absolute;
+  top: calc(100%+8px);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 320px;
+  max-height: 250px;
+  padding: 12px;
+  box-shadow: 0px 8px 9px 0px #1010101a;
+  background: #ffffff;
+  overflow: hidden;
+  z-index: 10;
+}
+.ts-dropdown-search {
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid #d9dde1;
+}
+.ts-dropdown-menu {
+  overflow: auto;
+}
+.ts-dropdown-menu-item {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  padding: 0 12px;
+  cursor: pointer;
+}
+.ts-dropdown-menu-item:hover {
+  background: #e1e3f5;
+  color: #3643ba;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/lib/components/TsDropdown/TsDropdown/TsDropdown.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TsDropdownProps } from './TsDropdown.types';
+import './TsDropdown.css';
+export declare const TsDropdown: <T extends unknown>({ label, options, placeholder, searchPlaceholder, value, disabled, searchable, getOptionValue, getOptionLabel, onChange, }: TsDropdownProps<T>) => React.JSX.Element;