@yusufalperendumlu/component-library 0.0.4 → 0.0.6

package/dist/index.d.ts

@@ -1,16 +1,74 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
-type IButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
+type Option = {
+    id: number;
+    name: string;
+};
+interface AutocompleteProps {
+    options: Option[];
+    selected: Option[];
+    setSelected: (options: Option[]) => void;
+    placeholder?: string;
+    showChosen?: boolean;
+    label?: string;
     className?: string;
-    variant?: "primary" | "secondary";
+}
+
+declare const Autocomplete: React$1.FC<AutocompleteProps>;
+
+type IButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    className?: string;
+    variant: 'primary' | 'secondary' | 'outline' | 'danger';
+    size?: 'small' | 'medium' | 'large';
+    border?: 'primary' | 'secondary' | 'outline' | 'danger';
     title: string;
 };
-declare const Button: ({ variant, title, ...props }: IButtonProps) => react_jsx_runtime.JSX.Element;
 
-type InputProps = {
+declare const Button: ({ variant, size, border, title, className, ...props }: IButtonProps) => react_jsx_runtime.JSX.Element;
+
+type DialogProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    className?: string;
+    showCloseIcon?: boolean;
+};
+
+declare const Dialog: React$1.FC<DialogProps> & {
+    Header: React$1.FC<{
+        children: React$1.ReactNode;
+    }>;
+    Body: React$1.FC<{
+        children: React$1.ReactNode;
+    }>;
+    Footer: React$1.FC<{
+        children: React$1.ReactNode;
+    }>;
+};
+
+type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    className?: string;
     placeholder?: string;
+    type: string;
+    label?: string;
 };
-declare const Input: React.FC<InputProps>;
 
-export { Button, Input };
+declare const Input: React$1.FC<InputProps>;
+
+interface TableColumn<T> {
+    key: keyof T;
+    label: string;
+    sortable?: boolean;
+    render?: (value: any, row: T) => React.ReactNode;
+}
+interface TableProps<T> {
+    columns: TableColumn<T>[];
+    data: T[];
+    onRowClick?: (row: T) => void;
+    className?: string;
+}
+
+declare function Table<T extends Record<string, any>>({ columns, data, onRowClick, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+
+export { Autocomplete, Button, Dialog, Input, Table };

package/dist/tailwind.css

@@ -1,3 +1,3 @@
 /*
 ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
-*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.mt-4{margin-top:1rem}.rounded-lg{border-radius:.5rem}.border-2{border-width:2px}.border-blue-600{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.hover\:bg-green-600:hover{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity))}
+*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.right-4{right:1rem}.top-5{top:1.25rem}.z-10{z-index:10}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.h-3{height:.75rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.max-h-60{max-height:15rem}.min-h-\[42px\]{min-height:42px}.w-1\/2{width:50%}.w-3{width:.75rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-\[160px\]{min-width:160px}.min-w-\[70px\]{min-width:70px}.min-w-full{min-width:100%}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.table-fixed{table-layout:fixed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.overflow-auto{overflow:auto}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-t{border-top-width:1px}.border-none{border-style:none}.border-\[\#424242\]{--tw-border-opacity:1;border-color:rgb(66 66 66/var(--tw-border-opacity))}.border-\[\#5876EE\]{--tw-border-opacity:1;border-color:rgb(88 118 238/var(--tw-border-opacity))}.border-\[\#BDC311\]{--tw-border-opacity:1;border-color:rgb(189 195 17/var(--tw-border-opacity))}.border-\[\#FF0000\]{--tw-border-opacity:1;border-color:rgb(255 0 0/var(--tw-border-opacity))}.border-zinc-200{--tw-border-opacity:1;border-color:rgb(228 228 231/var(--tw-border-opacity))}.border-zinc-700{--tw-border-opacity:1;border-color:rgb(63 63 70/var(--tw-border-opacity))}.bg-\[\#1D1B1D\]{--tw-bg-opacity:1;background-color:rgb(29 27 29/var(--tw-bg-opacity))}.bg-\[\#424242\]{--tw-bg-opacity:1;background-color:rgb(66 66 66/var(--tw-bg-opacity))}.bg-\[\#5876EE\]{--tw-bg-opacity:1;background-color:rgb(88 118 238/var(--tw-bg-opacity))}.bg-\[\#BDC311\]{--tw-bg-opacity:1;background-color:rgb(189 195 17/var(--tw-bg-opacity))}.bg-\[\#FF0000\]{--tw-bg-opacity:1;background-color:rgb(255 0 0/var(--tw-bg-opacity))}.bg-black\/50{background-color:rgba(0,0,0,.5)}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-zinc-900{--tw-bg-opacity:1;background-color:rgb(24 24 27/var(--tw-bg-opacity))}.p-2{padding:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.text-left{text-align:left}.font-inter{font-family:Inter,sans-serif}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-\[12px\]{font-weight:12px}.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-\[\#424242\]{--tw-text-opacity:1;color:rgb(66 66 66/var(--tw-text-opacity))}.text-\[\#5876EE\]{--tw-text-opacity:1;color:rgb(88 118 238/var(--tw-text-opacity))}.text-\[\#FF0000\]{--tw-text-opacity:1;color:rgb(255 0 0/var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-zinc-100{--tw-text-opacity:1;color:rgb(244 244 245/var(--tw-text-opacity))}.text-zinc-500{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity))}.text-zinc-900{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring-\[\#5876EE\]{--tw-ring-opacity:1;--tw-ring-color:rgb(88 118 238/var(--tw-ring-opacity))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.placeholder\:text-\[\#3f3f3f\]::-moz-placeholder{--tw-text-opacity:1;color:rgb(63 63 63/var(--tw-text-opacity))}.placeholder\:text-\[\#3f3f3f\]::placeholder{--tw-text-opacity:1;color:rgb(63 63 63/var(--tw-text-opacity))}.focus-within\:ring-2:focus-within{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.hover\:bg-\[\#4a66d9\]:hover{--tw-bg-opacity:1;background-color:rgb(74 102 217/var(--tw-bg-opacity))}.hover\:bg-\[\#E2E2E2\]:hover{--tw-bg-opacity:1;background-color:rgb(226 226 226/var(--tw-bg-opacity))}.hover\:bg-\[\#FF0000\]:hover{--tw-bg-opacity:1;background-color:rgb(255 0 0/var(--tw-bg-opacity))}.hover\:bg-\[\#a8b00e\]:hover{--tw-bg-opacity:1;background-color:rgb(168 176 14/var(--tw-bg-opacity))}.hover\:bg-\[\#d40000\]:hover{--tw-bg-opacity:1;background-color:rgb(212 0 0/var(--tw-bg-opacity))}.hover\:bg-\[\#f5f5f5\]:hover{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\:bg-green-600:hover{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity))}.hover\:text-gray-200:hover{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity))}.hover\:text-gray-800:hover{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.hover\:text-zinc-900:hover{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:hover\:bg-transparent:hover:disabled{background-color:transparent}.disabled\:hover\:text-inherit:hover:disabled{color:inherit}:is(.dark .dark\:border-zinc-700){--tw-border-opacity:1;border-color:rgb(63 63 70/var(--tw-border-opacity))}:is(.dark .dark\:bg-\[\#424242\]){--tw-bg-opacity:1;background-color:rgb(66 66 66/var(--tw-bg-opacity))}:is(.dark .dark\:bg-zinc-800){--tw-bg-opacity:1;background-color:rgb(39 39 42/var(--tw-bg-opacity))}:is(.dark .dark\:text-white){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}:is(.dark .dark\:text-zinc-400){--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-white:hover){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}

package/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+import { globalIgnores } from 'eslint/config';
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+]);

package/jest.config.ts

@@ -0,0 +1,13 @@
+import type { Config } from "jest";
+
+const config: Config = {
+  testEnvironment: "jsdom",
+  transform: {
+    "^.+\\.tsx?$": "ts-jest",
+  },
+  moduleNameMapper: {
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
+  },
+};
+
+export default config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yusufalperendumlu/component-library",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -14,17 +14,12 @@
     "test": "jest --watchAll --verbose",
     "clean": "rm -rf dist",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "jest": {
-    "testEnvironment": "jsdom",
-    "preset": "ts-jest",
-    "setupFilesAfterEnv": [
-      "<rootDir>/src/tests/styleMock.ts"
-    ],
-    "moduleNameMapper": {
-      "\\.(css|less|scss|sass)$": "/src/tests/styleMock.ts"
-    }
+    "build-storybook": "storybook build",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,css,scss}\"",
+    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,md,css,scss}\"",
+    "check": "npm run type-check && npm run lint && npm run format:check"
   },
   "author": "",
   "license": "MIT",
@@ -41,7 +36,6 @@
     "@storybook/addon-docs": "8.0.0",
     "@storybook/builder-vite": "^9.0.18",
     "@storybook/react-vite": "^9.0.18",
-    "@tailwindcss/postcss": "^4.11.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -49,12 +43,23 @@
     "@types/jest": "^30.0.0",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.7",
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
+    "@typescript-eslint/parser": "^8.38.0",
     "autoprefixer": "10.4.15",
     "babel-loader": "^10.0.0",
+    "eslint": "^9.31.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.5.3",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^30.0.5",
     "jest-environment-jsdom": "^30.0.5",
-    "postcss": "8.4.21",
+    "postcss": "^8.5.6",
     "postcss-loader": "^8.1.1",
+    "prettier": "^3.6.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "storybook": "9.0.18",
@@ -70,6 +75,7 @@
     "@rollup/plugin-node-resolve": "^16.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "react-icons": "^5.5.0",
     "rollup": "^4.45.1",
     "rollup-plugin-dts": "^6.2.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",

package/prettier.config.js

@@ -0,0 +1,84 @@
+export default {
+  // Print width
+  printWidth: 80,
+
+  // Tab width
+  tabWidth: 2,
+
+  // Use spaces instead of tabs
+  useTabs: false,
+
+  // Add semicolons at the end of statements
+  semi: true,
+
+  // Use single quotes instead of double quotes
+  singleQuote: true,
+
+  // Use single quotes in JSX
+  jsxSingleQuote: true,
+
+  // Add trailing commas where valid in ES5
+  trailingComma: "es5",
+
+  // Add spaces between brackets in object literals
+  bracketSpacing: true,
+
+  // Put the > of a multi-line JSX element at the end of the last line
+  bracketSameLine: false,
+
+  // Include parentheses around a sole arrow function parameter
+  arrowParens: "avoid",
+
+  // End of line character
+  endOfLine: "lf",
+
+  // Format embedded code if Prettier can identify it
+  embeddedLanguageFormatting: "auto",
+
+  // Respect existing line breaks
+  htmlWhitespaceSensitivity: "css",
+
+  // Insert Pragma
+  insertPragma: false,
+
+  // Require pragma
+  requirePragma: false,
+
+  // Use single quotes in JSX
+  jsxSingleQuote: true,
+
+  // Quote props only when necessary
+  quoteProps: "as-needed",
+
+  // Prose wrap
+  proseWrap: "preserve",
+
+  // Range start
+  rangeStart: 0,
+
+  // Range end
+  rangeEnd: Infinity,
+
+  // Overrides for specific file types
+  overrides: [
+    {
+      files: "*.json",
+      options: {
+        printWidth: 100,
+      },
+    },
+    {
+      files: "*.md",
+      options: {
+        printWidth: 100,
+        proseWrap: "always",
+      },
+    },
+    {
+      files: "*.yml",
+      options: {
+        singleQuote: false,
+      },
+    },
+  ],
+};

package/src/components/Autocomplete/Autocomplete.stories.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import { Meta, StoryObj } from "@storybook/react";
+
+import Autocomplete from "./Autocomplete";
+
+const meta: Meta<typeof Autocomplete> = {
+  title: "Components/Autocomplete",
+  component: Autocomplete,
+  tags: ["autodocs"],
+  argTypes: {
+    placeholder: { control: "text" },
+    className: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Autocomplete>;
+
+const sampleOptions = [
+  { id: 1, name: "JavaScript" },
+  { id: 2, name: "TypeScript" },
+  { id: 3, name: "Python" },
+  { id: 4, name: "Rust" },
+  { id: 5, name: "Go" },
+  { id: 6, name: "Java" },
+];
+
+export const Default: Story = {
+  render: (args) => {
+    const [selected, setSelected] = useState<typeof sampleOptions>([]);
+
+    return (
+      <div className="max-w-md mx-auto mt-10">
+        <Autocomplete
+          {...args}
+          options={sampleOptions}
+          selected={selected}
+          setSelected={setSelected}
+          showChosen={false}
+          placeholder="Choose a language"
+          label="Choose a language"
+        />
+      </div>
+    );
+  },
+};
+
+export const WithChosen: Story = {
+  render: (args) => {
+    const [selected, setSelected] = useState<typeof sampleOptions>([]);
+
+    return (
+      <div className="max-w-md mx-auto mt-10">
+        <Autocomplete
+          {...args}
+          options={sampleOptions}
+          selected={selected}
+          setSelected={setSelected}
+          placeholder="Choose languages"
+          showChosen
+        />
+      </div>
+    );
+  },
+};

package/src/components/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,127 @@
+import clsx from 'clsx';
+import React, { useState, useRef, useEffect } from 'react';
+import { IoMdArrowDropdown } from 'react-icons/io';
+
+import { Option } from './Autocomplete.types';
+import { AutocompleteProps } from './Autocomplete.types';
+
+const Autocomplete: React.FC<AutocompleteProps> = ({
+  options,
+  selected,
+  setSelected,
+  placeholder,
+  showChosen = false,
+  label,
+  className,
+}) => {
+  const [query, setQuery] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const filteredOptions = options.filter(
+    option =>
+      option.name.toLowerCase().includes(query.toLowerCase()) &&
+      (!showChosen || !selected.find(s => s.id === option.id))
+  );
+
+  const handleSelect = (option: Option) => {
+    if (showChosen) {
+      setSelected([...selected, option]);
+    } else {
+      setSelected([option]);
+      setIsOpen(false);
+    }
+    setQuery('');
+  };
+
+  const handleRemove = (option: Option) => {
+    setSelected(selected.filter(s => s.id !== option.id));
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      containerRef.current &&
+      !containerRef.current.contains(event.target as Node)
+    ) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <div ref={containerRef} className={clsx('relative w-full', className)}>
+      {label && (
+        <label className='mb-1 text-sm text-black dark:text-white'>
+          {label}
+        </label>
+      )}
+      <div className='flex flex-wrap gap-1 border  rounded-md p-2 min-h-[42px] items-center focus-within:ring-2 ring-[#5876EE]'>
+        {showChosen ? (
+          selected.map(option => (
+            <span
+              key={option.id}
+              className='flex items-center gap-1 bg-[#5876EE] text-white px-2 py-1 rounded text-xs'
+            >
+              {option.name}
+              <button
+                type='button'
+                onClick={() => handleRemove(option)}
+                className='ml-1 text-white hover:text-gray-200'
+              >
+                &times;
+              </button>
+            </span>
+          ))
+        ) : (
+          <>
+            {selected[0] && (
+              <span className='text-sm text-black dark:text-white mr-2'>
+                {selected[0].name}
+              </span>
+            )}
+          </>
+        )}
+
+        <input
+          type='text'
+          className='flex-1 outline-none  border-none text-sm bg-transparent'
+          placeholder={!selected.length || showChosen ? placeholder : ''}
+          value={query}
+          onChange={e => {
+            setQuery(e.target.value);
+            setIsOpen(true);
+          }}
+          onFocus={() => setIsOpen(true)}
+        />
+
+        <button
+          type='button'
+          className='text-gray-600 hover:text-gray-800'
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          <IoMdArrowDropdown className='w-6 h-6' />
+        </button>
+      </div>
+
+      {isOpen && filteredOptions.length > 0 && (
+        <ul className='absolute z-10 mt-1 w-full max-h-60 overflow-y-auto bg-white border rounded-md shadow-md'>
+          {filteredOptions.map(option => (
+            <li
+              key={option.id}
+              className='cursor-pointer px-4 py-2 hover:bg-gray-100 text-sm'
+              onClick={() => handleSelect(option)}
+            >
+              {option.name}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default Autocomplete;

package/src/components/Autocomplete/Autocomplete.types.ts

@@ -0,0 +1,14 @@
+export type Option = {
+  id: number;
+  name: string;
+};
+
+export interface AutocompleteProps {
+  options: Option[];
+  selected: Option[];
+  setSelected: (options: Option[]) => void;
+  placeholder?: string;
+  showChosen?: boolean;
+  label?: string;
+  className?: string;
+}

package/src/components/Autocomplete/index.ts

@@ -0,0 +1,3 @@
+import Autocomplete from './Autocomplete';
+
+export default Autocomplete;

package/src/components/Button/Button.stories.tsx

@@ -21,15 +21,25 @@ type Story = StoryObj<typeof Button>;
 
 export const Primary: Story = {
   args: {
-    title: "Primary Button",
+    title: "Login",
     variant: "primary",
+    size: "small",
   },
 };
 
 export const Secondary: Story = {
   args: {
-    title: "Secondary Button",
+    title: "Show history",
     variant: "secondary",
+    size: "small",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    title: "Cancel",
+    variant: "danger",
+    size: "small",
   },
 };
 

package/src/components/Button/Button.tsx

@@ -1,38 +1,55 @@
-import React from "react";
-import { cva } from "class-variance-authority";
-import clsx from "clsx";
-
-type IButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-  className?: string;
-  variant?: "primary" | "secondary";
-  title: string;
-};
-
-const buttonVariants = cva(
-  "border-2 rounded-lg transition-all duration-300 ease-in-out",
-  {
-    variants: {
-      variant: {
-        primary:
-          "bg-blue-500 text-white border-blue-600 hover:bg-blue-600 py-2 px-4",
-        secondary: "bg-gray-200 text-gray-800",
-      },
-    },
-    defaultVariants: {
-      variant: "primary",
-    },
-  }
-);
-
-const Button = ({ variant, title, ...props }: IButtonProps) => {
-  return (
-    <button
-      className={clsx(buttonVariants({ variant }), props.className)}
-      {...props}
-    >
-      {title}
-    </button>
-  );
-};
-
-export default Button;
+import { cva } from 'class-variance-authority';
+import clsx from 'clsx';
+import React from 'react';
+
+import { IButtonProps } from './Button.types';
+
+const buttonVariants = cva(
+  'outline-none min-w-[70px] font-inter transition-all font-[12px] px-4 py-2 gap-2 rounded-md duration-300 ease-in-out disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-inherit',
+  {
+    variants: {
+      variant: {
+        primary: 'bg-[#5876EE] text-white shadow-xs hover:bg-[#4a66d9]',
+        secondary: 'bg-[#BDC311] text-[#424242] shadow-xs hover:bg-[#a8b00e]',
+        outline: 'bg-transparent shadow-xs hover:bg-[#f5f5f5]',
+        danger: 'bg-[#FF0000] text-white shadow-xs hover:bg-[#d40000]',
+      },
+      size: {
+        small: 'w-fit px-3 text-sm',
+        medium: 'w-1/2 px-4 text-base',
+        large: 'w-full px-5 text-lg',
+      },
+      border: {
+        primary: 'border border-[#5876EE]  hover:bg-[#4a66d9]',
+        secondary: 'border border-[#BDC311]  hover:bg-[#a8b00e]',
+        outline:
+          'border border-[#424242]  hover:bg-[#E2E2E2] dark:border-[#E2E2E2',
+        danger: 'border border-[#FF0000] text-[#FF0000]  hover:bg-[#FF0000]',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'medium',
+    },
+  }
+);
+
+const Button = ({
+  variant,
+  size,
+  border,
+  title,
+  className,
+  ...props
+}: IButtonProps) => {
+  return (
+    <button
+      className={clsx(buttonVariants({ variant, size, border }), className)}
+      {...props}
+    >
+      {title}
+    </button>
+  );
+};
+
+export default Button;

package/src/components/Button/Button.types.ts

@@ -0,0 +1,7 @@
+export type IButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  className?: string;
+  variant: 'primary' | 'secondary' | 'outline' | 'danger';
+  size?: 'small' | 'medium' | 'large';
+  border?: 'primary' | 'secondary' | 'outline' | 'danger';
+  title: string;
+};

package/src/components/Button/index.ts

@@ -1,3 +1,3 @@
-import Button from "./Button";
-
-export default Button;
+import Button from './Button';
+
+export default Button;