feishin/src/renderer/components/date-picker/index.tsx

import type { DatePickerProps as MantineDatePickerProps } from '@mantine/dates';
import { DatePicker as MantineDatePicker } from '@mantine/dates';
import styled from 'styled-components';

interface DatePickerProps extends MantineDatePickerProps {
  maxWidth?: number | string;
  width?: number | string;
}

const StyledDatePicker = styled(MantineDatePicker)<DatePickerProps>`
  & .mantine-DatePicker-input {
    color: var(--input-fg);
    background: var(--input-bg);

    &::placeholder {
      color: var(--input-placeholder-fg);
    }
  }

  & .mantine-DatePicker-icon {
    color: var(--input-placeholder-fg);
  }

  & .mantine-DatePicker-required {
    color: var(--secondary-color);
  }

  & .mantine-DatePicker-label {
    font-family: var(--label-font-family);
  }

  & .mantine-DateRangePicker-disabled {
    opacity: 0.6;
  }
`;

export const DatePicker = ({ width, maxWidth, ...props }: DatePickerProps) => {
  return (
    <StyledDatePicker
      {...props}
      sx={{ maxWidth, width }}
    />
  );
};

DatePicker.defaultProps = {
  maxWidth: undefined,
  width: undefined,
};