fix input clearable button styles

src/shared/components/autocomplete/autocomplete.module.css

@@ -17,6 +17,10 @@
         color: var(--theme-colors-foreground);
         background: var(--theme-colors-background);
     }
+
+    &.clearable {
+        padding-right: 4rem;
+    }
 }
 
 .input:focus,
@@ -53,3 +57,20 @@
 .option:hover {
     background: lighten(var(--theme-colors-surface), 5%);
 }
+
+.clear-button {
+    color: var(--theme-colors-foreground) !important;
+    background: transparent !important;
+
+    &:hover,
+    &:active,
+    &:focus-visible {
+        @mixin dark {
+            background-color: lighten(var(--theme-colors-background), 10%) !important;
+        }
+
+        @mixin light {
+            background-color: darken(var(--theme-colors-background), 5%) !important;
+        }
+    }
+}

src/shared/components/autocomplete/autocomplete.tsx

@@ -1,6 +1,7 @@
 import type { AutocompleteProps as MantineAutocompleteProps } from '@mantine/core';
 
 import { Autocomplete as MantineAutocomplete } from '@mantine/core';
+import clsx from 'clsx';
 import { CSSProperties, forwardRef } from 'react';
 
 import styles from './autocomplete.module.css';
@@ -14,6 +15,7 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
     (
         {
             classNames,
+            clearable = false,
             maxWidth,
             size = 'sm',
             style,
@@ -28,13 +30,21 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
                 classNames={{
                     description: styles.description,
                     dropdown: styles.dropdown,
-                    input: styles.input,
+                    input: clsx(styles.input, {
+                        [styles.clearable]: clearable,
+                    }),
                     label: styles.label,
                     option: styles.option,
                     root: styles.root,
                     section: styles.section,
                     ...classNames,
                 }}
+                clearable={clearable}
+                clearButtonProps={{
+                    classNames: {
+                        root: styles.clearButton,
+                    },
+                }}
                 ref={ref}
                 size={size}
                 spellCheck={false}

src/shared/components/date-picker/date-picker.module.css

@@ -8,6 +8,10 @@
     color: var(--theme-colors-surface-foreground);
     background: var(--theme-colors-surface);
     border: 1px solid transparent;
+
+    &.clearable {
+        padding-right: 4rem;
+    }
 }
 
 .section {
@@ -27,3 +31,20 @@
     font-size: var(--theme-font-size-xs);
     color: var(--theme-colors-foreground-muted);
 }
+
+.clear-button {
+    color: var(--theme-colors-foreground) !important;
+    background: transparent !important;
+
+    &:hover,
+    &:active,
+    &:focus-visible {
+        @mixin dark {
+            background-color: lighten(var(--theme-colors-background), 10%) !important;
+        }
+
+        @mixin light {
+            background-color: darken(var(--theme-colors-background), 5%) !important;
+        }
+    }
+}

src/shared/components/date-picker/date-picker.tsx

@@ -7,6 +7,7 @@ import {
     DateInput as MantineDateInput,
     DateTimePicker as MantineDateTimeInput,
 } from '@mantine/dates';
+import clsx from 'clsx';
 
 import styles from './date-picker.module.css';
 
@@ -17,6 +18,7 @@ interface DateInputProps extends MantineDateInputProps {
 
 export const DateInput = ({
     classNames,
+    clearable = false,
     maxWidth,
     size = 'sm',
     style,
@@ -27,13 +29,19 @@ export const DateInput = ({
         <MantineDateInput
             classNames={{
                 description: styles.description,
-                input: styles.input,
+                input: clsx(styles.input, {
+                    [styles.clearable]: clearable,
+                }),
                 label: styles.label,
                 required: styles.required,
                 root: styles.root,
                 section: styles.section,
                 ...classNames,
             }}
+            clearable={clearable}
+            clearButtonProps={{
+                className: styles.clearButton,
+            }}
             size={size}
             style={{ maxWidth, width, ...style }}
             {...props}
@@ -48,6 +56,7 @@ interface DateTimeInputProps extends MantineDateTimeInputProps {
 
 export const DateTimeInput = ({
     classNames,
+    clearable = false,
     maxWidth,
     size = 'sm',
     style,
@@ -58,13 +67,19 @@ export const DateTimeInput = ({
         <MantineDateTimeInput
             classNames={{
                 description: styles.description,
-                input: styles.input,
+                input: clsx(styles.input, {
+                    [styles.clearable]: clearable,
+                }),
                 label: styles.label,
                 required: styles.required,
                 root: styles.root,
                 section: styles.section,
                 ...classNames,
             }}
+            clearable={clearable}
+            clearButtonProps={{
+                className: styles.clearButton,
+            }}
             size={size}
             style={{ maxWidth, width, ...style }}
             {...props}

src/shared/components/date-time-picker/date-time-picker.module.css

@@ -8,6 +8,10 @@
     color: var(--theme-colors-surface-foreground);
     background: var(--theme-colors-surface);
     border: 1px solid transparent;
+
+    &.clearable {
+        padding-right: 4rem;
+    }
 }
 
 .section {
@@ -27,3 +31,20 @@
     font-size: var(--theme-font-size-xs);
     color: var(--theme-colors-foreground-muted);
 }
+
+.clear-button {
+    color: var(--theme-colors-foreground) !important;
+    background: transparent !important;
+
+    &:hover,
+    &:active,
+    &:focus-visible {
+        @mixin dark {
+            background-color: lighten(var(--theme-colors-background), 10%) !important;
+        }
+
+        @mixin light {
+            background-color: darken(var(--theme-colors-background), 5%) !important;
+        }
+    }
+}

src/shared/components/date-time-picker/date-time-picker.tsx

@@ -1,6 +1,7 @@
 import type { DateTimePickerProps as MantineDateTimePickerProps } from '@mantine/dates';
 
 import { DateTimePicker as MantineDateTimePicker } from '@mantine/dates';
+import clsx from 'clsx';
 
 import styles from './date-time-picker.module.css';
 
@@ -11,6 +12,7 @@ interface DateTimePickerProps extends MantineDateTimePickerProps {
 
 export const DateTimePicker = ({
     classNames,
+    clearable = false,
     maxWidth,
     popoverProps,
     size = 'sm',
@@ -22,13 +24,19 @@ export const DateTimePicker = ({
         <MantineDateTimePicker
             classNames={{
                 description: styles.description,
-                input: styles.input,
+                input: clsx(styles.input, {
+                    [styles.clearable]: clearable,
+                }),
                 label: styles.label,
                 required: styles.required,
                 root: styles.root,
                 section: styles.section,
                 ...classNames,
             }}
+            clearable={clearable}
+            clearButtonProps={{
+                className: styles.clearButton,
+            }}
             popoverProps={{ withinPortal: true, ...popoverProps }}
             size={size}
             style={{ maxWidth, width, ...style }}

src/shared/components/file-input/file-input.module.css

@@ -19,6 +19,10 @@
         color: var(--theme-colors-foreground);
         background: var(--theme-colors-background);
     }
+
+    &.clearable {
+        padding-right: 4rem;
+    }
 }
 
 .input:focus,
@@ -44,3 +48,20 @@
     font-size: var(--theme-font-size-xs);
     color: var(--theme-colors-foreground-muted);
 }
+
+.clear-button {
+    color: var(--theme-colors-foreground) !important;
+    background: transparent !important;
+
+    &:hover,
+    &:active,
+    &:focus-visible {
+        @mixin dark {
+            background-color: lighten(var(--theme-colors-background), 10%) !important;
+        }
+
+        @mixin light {
+            background-color: darken(var(--theme-colors-background), 5%) !important;
+        }
+    }
+}

src/shared/components/file-input/file-input.tsx

@@ -2,6 +2,7 @@ import {
     FileInput as MantineFileInput,
     FileInputProps as MantineFileInputProps,
 } from '@mantine/core';
+import clsx from 'clsx';
 import { CSSProperties, forwardRef } from 'react';
 
 import styles from './file-input.module.css';
@@ -16,6 +17,7 @@ export const FileInput = forwardRef<HTMLButtonElement, FileInputProps>(
         {
             children,
             classNames,
+            clearable = false,
             maxWidth,
             size = 'sm',
             style,
@@ -29,7 +31,9 @@ export const FileInput = forwardRef<HTMLButtonElement, FileInputProps>(
             <MantineFileInput
                 classNames={{
                     description: styles.description,
-                    input: styles.input,
+                    input: clsx(styles.input, {
+                        [styles.clearable]: clearable,
+                    }),
                     label: styles.label,
                     required: styles.required,
                     root: styles.root,
@@ -37,6 +41,10 @@ export const FileInput = forwardRef<HTMLButtonElement, FileInputProps>(
                     wrapper: styles.wrapper,
                     ...classNames,
                 }}
+                clearable={clearable}
+                clearButtonProps={{
+                    className: styles.clearButton,
+                }}
                 ref={ref}
                 size={size}
                 style={{ maxWidth, width, ...style }}

src/shared/components/multi-select/multi-select.module.css

@@ -34,6 +34,10 @@
         color: var(--theme-colors-foreground);
         background: var(--theme-colors-background);
     }
+
+    &.clearable {
+        padding-right: 4rem;
+    }
 }
 
 .input:focus,
@@ -75,5 +79,18 @@
 }
 
 .clear-button {
+    color: var(--theme-colors-foreground) !important;
     background: transparent !important;
+
+    &:hover,
+    &:active,
+    &:focus-visible {
+        @mixin dark {
+            background-color: lighten(var(--theme-colors-background), 10%) !important;
+        }
+
+        @mixin light {
+            background-color: darken(var(--theme-colors-background), 5%) !important;
+        }
+    }
 }

src/shared/components/multi-select/multi-select.tsx

@@ -2,6 +2,7 @@ import {
     MultiSelect as MantineMultiSelect,
     MultiSelectProps as MantineMultiSelectProps,
 } from '@mantine/core';
+import clsx from 'clsx';
 import { CSSProperties, useMemo } from 'react';
 
 import styles from './multi-select.module.css';
@@ -11,34 +12,35 @@ export interface MultiSelectProps extends MantineMultiSelectProps {
     width?: CSSProperties['width'];
 }
 
-const defaultClassNames = {
-    description: styles.description,
-    dropdown: styles.dropdown,
-    input: styles.input,
-    label: styles.label,
-    option: styles.option,
-    pill: styles.pill,
-    pillsList: styles.pillsList,
-    root: styles.root,
-};
-
 const defaultClearButtonProps = {
     classNames: {
         root: styles.clearButton,
     },
-    variant: 'transparent' as const,
 };
 
 export const MultiSelect = ({
     classNames,
+    clearable = false,
     maxWidth,
     variant = 'default',
     width,
     ...props
 }: MultiSelectProps) => {
     const mergedClassNames = useMemo(
-        () => (classNames ? { ...defaultClassNames, ...classNames } : defaultClassNames),
+        () => ({
-        [classNames],
+            description: styles.description,
+            dropdown: styles.dropdown,
+            input: clsx(styles.input, {
+                [styles.clearable]: clearable,
+            }),
+            label: styles.label,
+            option: styles.option,
+            pill: styles.pill,
+            pillsList: styles.pillsList,
+            root: styles.root,
+            ...classNames,
+        }),
+        [classNames, clearable],
     );
 
     const style = useMemo(
@@ -49,6 +51,7 @@ export const MultiSelect = ({
     return (
         <MantineMultiSelect
             classNames={mergedClassNames}
+            clearable={clearable}
             clearButtonProps={defaultClearButtonProps}
             style={style}
             variant={variant}

src/shared/components/select/select.module.css

@@ -17,6 +17,10 @@
         color: var(--theme-colors-foreground);
         background: var(--theme-colors-background);
     }
+
+    &.clearable {
+        padding-right: 4rem;
+    }
 }
 
 .input:focus,
@@ -63,3 +67,20 @@
     font-size: var(--theme-font-size-xs);
     color: var(--theme-colors-foreground-muted);
 }
+
+.clear-button {
+    color: var(--theme-colors-foreground) !important;
+    background: transparent !important;
+
+    &:hover,
+    &:active,
+    &:focus-visible {
+        @mixin dark {
+            background-color: lighten(var(--theme-colors-background), 10%) !important;
+        }
+
+        @mixin light {
+            background-color: darken(var(--theme-colors-background), 5%) !important;
+        }
+    }
+}

src/shared/components/select/select.tsx

@@ -1,6 +1,7 @@
 import type { SelectProps as MantineSelectProps } from '@mantine/core';
 
 import { Select as MantineSelect } from '@mantine/core';
+import clsx from 'clsx';
 import { CSSProperties } from 'react';
 
 import styles from './select.module.css';
@@ -25,7 +26,9 @@ export const Select = ({
             classNames={{
                 description: styles.description,
                 dropdown: styles.dropdown,
-                input: styles.input,
+                input: clsx(styles.input, {
+                    [styles.clearable]: clearable,
+                }),
                 label: styles.label,
                 option: styles.option,
                 root: styles.root,
@@ -33,6 +36,11 @@ export const Select = ({
                 ...classNames,
             }}
             clearable={clearable}
+            clearButtonProps={{
+                classNames: {
+                    root: styles.clearButton,
+                },
+            }}
             spellCheck={false}
             style={{ maxWidth, width }}
             variant={variant}

src/shared/components/tags-input/tags-input.module.css

@@ -38,6 +38,10 @@
             background: var(--theme-colors-surface);
         }
     }
+
+    &.clearable {
+        padding-right: 4rem;
+    }
 }
 
 .input:focus-within {
@@ -68,5 +72,18 @@
 }
 
 .clear-button {
+    color: var(--theme-colors-foreground) !important;
     background: transparent !important;
+
+    &:hover,
+    &:active,
+    &:focus-visible {
+        @mixin dark {
+            background-color: lighten(var(--theme-colors-background), 10%) !important;
+        }
+
+        @mixin light {
+            background-color: darken(var(--theme-colors-background), 5%) !important;
+        }
+    }
 }

src/shared/components/tags-input/tags-input.tsx

@@ -2,6 +2,7 @@ import {
     TagsInput as MantineTagsInput,
     TagsInputProps as MantineTagsInputProps,
 } from '@mantine/core';
+import clsx from 'clsx';
 import { CSSProperties, useMemo } from 'react';
 
 import styles from './tags-input.module.css';
@@ -11,35 +12,36 @@ export interface TagsInputProps extends MantineTagsInputProps {
     width?: CSSProperties['width'];
 }
 
-const defaultClassNames = {
-    description: styles.description,
-    dropdown: styles.dropdown,
-    input: styles.input,
-    inputField: styles.inputField,
-    label: styles.label,
-    option: styles.option,
-    pill: styles.pill,
-    pillsList: styles.pillsList,
-    root: styles.root,
-};
-
 const defaultClearButtonProps = {
     classNames: {
         root: styles.clearButton,
     },
-    variant: 'transparent' as const,
 };
 
 export const TagsInput = ({
     classNames,
+    clearable = false,
     maxWidth,
     variant = 'default',
     width,
     ...props
 }: TagsInputProps) => {
     const mergedClassNames = useMemo(
-        () => (classNames ? { ...defaultClassNames, ...classNames } : defaultClassNames),
+        () => ({
-        [classNames],
+            description: styles.description,
+            dropdown: styles.dropdown,
+            input: clsx(styles.input, {
+                [styles.clearable]: clearable,
+            }),
+            inputField: styles.inputField,
+            label: styles.label,
+            option: styles.option,
+            pill: styles.pill,
+            pillsList: styles.pillsList,
+            root: styles.root,
+            ...classNames,
+        }),
+        [classNames, clearable],
     );
 
     const style = useMemo(
@@ -50,6 +52,7 @@ export const TagsInput = ({
     return (
         <MantineTagsInput
             classNames={mergedClassNames}
+            clearable={clearable}
             clearButtonProps={defaultClearButtonProps}
             style={style}
             variant={variant}