@os-design/core 1.0.254 → 1.0.256

package/dist/ButtonLink/index.js

@@ -0,0 +1,81 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef } from 'react';
+import { StyledButton } from '../Button';
+import ButtonContent from '../Button/ButtonContent';
+import useButtonColors from '../Button/utils/useButtonColors';
+import { DisabledWrapper } from '../Link';
+import { jsx as _jsx } from "react/jsx-runtime";
+const disabledStyles = p => p.disabled && css`
+    pointer-events: none;
+  `;
+const StyledButtonLink = styled(StyledButton.withComponent('a'), omitEmotionProps('as', 'disabled'))`
+  text-decoration: none;
+  display: inline-flex;
+  ${disabledStyles};
+`;
+
+/**
+ * The button that is rendered as a link.
+ */
+const ButtonLink = /*#__PURE__*/forwardRef(({
+  type = 'primary',
+  danger = false,
+  left,
+  right,
+  wide = 'default',
+  loading = false,
+  disabled = false,
+  size,
+  as,
+  onMouseDown = () => {},
+  onKeyDown = () => {},
+  children,
+  ...rest
+}, ref) => {
+  const {
+    buttonColors,
+    loadingColors
+  } = useButtonColors({
+    type,
+    danger,
+    disabled
+  });
+  const link = /*#__PURE__*/_jsx(StyledButtonLink, {
+    btnType: type,
+    colors: buttonColors,
+    wide: wide,
+    loading: loading,
+    disabled: disabled || loading,
+    size: size,
+    as: as,
+    onMouseDown: e => {
+      onMouseDown(e);
+      e.preventDefault();
+    },
+    onKeyDown: e => {
+      onKeyDown(e);
+      if (disabled || loading) e.preventDefault();
+    },
+    "aria-disabled": disabled || loading,
+    "aria-busy": loading,
+    ...rest,
+    ref: ref,
+    children: /*#__PURE__*/_jsx(ButtonContent, {
+      left: left,
+      right: right,
+      loading: loading,
+      loadingColors: loadingColors,
+      children: children
+    })
+  });
+  if (disabled || loading) {
+    return /*#__PURE__*/_jsx(DisabledWrapper, {
+      children: link
+    });
+  }
+  return link;
+});
+ButtonLink.displayName = 'ButtonLink';
+export default ButtonLink;

package/dist/Checkbox/index.d.ts

@@ -0,0 +1,30 @@
+import { type WithSize } from '@os-design/styles';
+type JsxLabelProps = Omit<JSX.IntrinsicElements['label'], 'defaultValue' | 'onChange' | 'onClick' | 'ref'>;
+export interface CheckboxProps extends JsxLabelProps, WithSize {
+    /**
+     * Whether the checkbox is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the checkbox is checked.
+     * @default false
+     */
+    value?: boolean;
+    /**
+     * The default value.
+     * @default undefined
+     */
+    defaultValue?: boolean;
+    /**
+     * The change event handler.
+     * @default undefined
+     */
+    onChange?: (value: boolean) => void;
+}
+/**
+ * The checkbox that can be enabled or disabled.
+ */
+declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLLabelElement>>;
+export default Checkbox;
+//# sourceMappingURL=index.d.ts.map

package/dist/Checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Checkbox/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAC;AAK3B,KAAK,aAAa,GAAG,IAAI,CACvB,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAC9B,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,KAAK,CAChD,CAAC;AACF,MAAM,WAAW,aAAc,SAAQ,aAAa,EAAE,QAAQ;IAC5D;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AA0HD;;GAEG;AACH,QAAA,MAAM,QAAQ,4GAyDb,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/dist/Checkbox/index.js

@@ -0,0 +1,144 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Check } from '@os-design/icons';
+import { resetFocusStyles, sizeStyles, transitionStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps, useForwardedState } from '@os-design/utils';
+import { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const uncheckedIconStyles = p => !p.checked && css`
+    background-color: ${clr(p.theme.checkboxUncheckedColorBg)};
+    border-color: ${clr(p.theme.checkboxUncheckedColorBorder)};
+  `;
+const checkedIconStyles = p => p.checked && css`
+    background-color: ${clr(p.theme.checkboxCheckedColorBg)};
+    border-color: ${clr(p.theme.checkboxCheckedColorBg)};
+  `;
+const disabledIconStyles = p => p.disabled && css`
+    background-color: ${clr(p.theme.checkboxDisabledColorBg)};
+    color: ${clr(p.theme.checkboxDisabledColorIcon)};
+    border-color: ${clr(p.theme.checkboxDisabledColorBorder)};
+  `;
+const IconContainer = styled('span', omitEmotionProps('disabled', 'checked'))`
+  width: ${p => p.theme.checkboxSize}em;
+  height: ${p => p.theme.checkboxSize}em;
+  min-width: ${p => p.theme.checkboxSize}em;
+  min-height: ${p => p.theme.checkboxSize}em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  box-sizing: border-box;
+  line-height: 1;
+
+  border: 1px solid transparent;
+  border-radius: ${p => p.theme.borderRadius}em;
+  color: ${p => clr(p.theme.checkboxCheckedColorIcon)};
+  margin-top: ${p => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;
+
+  ${uncheckedIconStyles};
+  ${checkedIconStyles};
+  ${disabledIconStyles};
+  ${transitionStyles('background-color', 'color', 'border-color')};
+`;
+const hoverUncheckedIconStyles = p => !p.checked && css`
+    background-color: ${clr(p.theme.checkboxUncheckedColorBgHover)};
+  `;
+const hoverCheckedIconStyles = p => p.checked && css`
+    background-color: ${clr(p.theme.checkboxCheckedColorBgHover)};
+    border-color: ${clr(p.theme.checkboxCheckedColorBgHover)};
+  `;
+const hoverStyles = p => !p.disabled && css`
+    @media (hover: hover) {
+      &:hover,
+      &:focus {
+        & > span {
+          ${hoverUncheckedIconStyles(p)};
+          ${hoverCheckedIconStyles(p)};
+        }
+      }
+    }
+  `;
+const disabledContainerStyles = p => p.disabled && css`
+    cursor: not-allowed;
+  `;
+const Container = styled('label', omitEmotionProps('disabled', 'size', 'checked'))`
+  ${resetFocusStyles};
+  cursor: pointer;
+  user-select: none;
+
+  display: flex;
+  margin: ${p => p.theme.checkboxVerticalIndent}em 0;
+
+  ${hoverStyles};
+  ${disabledContainerStyles};
+  ${sizeStyles};
+  ${transitionStyles('color')};
+`;
+const disabledTextStyles = p => p.disabled && css`
+    color: ${clr(p.theme.checkboxDisabledColorText)};
+  `;
+const Text = styled('div', omitEmotionProps('disabled'))`
+  margin-left: 0.4em;
+  color: ${p => clr(p.theme.colorText)};
+  ${disabledTextStyles};
+`;
+
+/**
+ * The checkbox that can be enabled or disabled.
+ */
+const Checkbox = /*#__PURE__*/forwardRef(({
+  disabled = false,
+  value,
+  defaultValue,
+  onChange = () => {},
+  size,
+  onKeyDown = () => {},
+  onMouseDown = () => {},
+  children,
+  ...rest
+}, ref) => {
+  const [forwardedValue, setForwardedValue] = useForwardedState({
+    value,
+    defaultValue,
+    onChange
+  });
+  return /*#__PURE__*/_jsxs(Container, {
+    disabled: disabled,
+    checked: forwardedValue,
+    size: size,
+    tabIndex: !disabled ? 0 : -1,
+    onClick: () => {
+      if (disabled) return;
+      setForwardedValue(!forwardedValue);
+    },
+    onKeyDown: e => {
+      if (disabled) return;
+      if (['Enter', ' '].includes(e.key)) {
+        setForwardedValue(!forwardedValue);
+        e.preventDefault();
+      }
+      onKeyDown(e);
+    },
+    onMouseDown: e => {
+      onMouseDown(e);
+      e.preventDefault();
+    },
+    role: "checkbox",
+    "aria-checked": forwardedValue,
+    "aria-disabled": disabled,
+    ...rest,
+    ref: ref,
+    children: [/*#__PURE__*/_jsx(IconContainer, {
+      disabled: disabled,
+      checked: forwardedValue,
+      children: forwardedValue && /*#__PURE__*/_jsx(Check, {})
+    }), children && /*#__PURE__*/_jsx(Text, {
+      disabled: disabled,
+      children: children
+    })]
+  });
+});
+Checkbox.displayName = 'Checkbox';
+export default Checkbox;

package/dist/CheckboxSkeleton/index.d.ts

@@ -0,0 +1,15 @@
+import { type WithSize } from '@os-design/styles';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface CheckboxSkeletonProps extends JsxDivProps, WithSize {
+    /**
+     * The width of the skeleton.
+     * @default 100%
+     */
+    width?: string;
+}
+/**
+ * Provides a checkbox placeholder while a user waits for the content to load.
+ */
+declare const CheckboxSkeleton: import("react").ForwardRefExoticComponent<CheckboxSkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
+export default CheckboxSkeleton;
+//# sourceMappingURL=index.d.ts.map

package/dist/CheckboxSkeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CheckboxSkeleton/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAM9D,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,qBAAsB,SAAQ,WAAW,EAAE,QAAQ;IAClE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8BD;;GAEG;AACH,QAAA,MAAM,gBAAgB,kHAOrB,CAAC;AAIF,eAAe,gBAAgB,CAAC"}

package/dist/CheckboxSkeleton/index.js

@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+import { sizeStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef } from 'react';
+import Skeleton from '../Skeleton';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Container = styled('div', omitEmotionProps('size'))`
+  user-select: none;
+  display: flex;
+  margin: ${p => p.theme.checkboxVerticalIndent}em 0;
+  ${sizeStyles};
+`;
+const ImageSkeleton = styled(Skeleton)`
+  width: ${p => p.theme.checkboxSize}em;
+  height: ${p => p.theme.checkboxSize}em;
+  min-width: ${p => p.theme.checkboxSize}em;
+  min-height: ${p => p.theme.checkboxSize}em;
+
+  border-radius: ${p => p.theme.borderRadius}em;
+  margin-top: ${p => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;
+`;
+const Text = styled.div`
+  margin-left: 0.4em;
+  color: ${p => clr(p.theme.colorText)};
+`;
+const TextSkeleton = styled(Skeleton)`
+  margin-left: 0.4em;
+  margin-top: ${p => (p.theme.lineHeight - 1) / 2}em;
+  margin-bottom: ${p => (p.theme.lineHeight - 1) / 2}em;
+`;
+
+/**
+ * Provides a checkbox placeholder while a user waits for the content to load.
+ */
+const CheckboxSkeleton = /*#__PURE__*/forwardRef(({
+  width = '100%',
+  children,
+  ...rest
+}, ref) => /*#__PURE__*/_jsxs(Container, {
+  role: "checkbox",
+  "aria-busy": true,
+  ...rest,
+  ref: ref,
+  children: [/*#__PURE__*/_jsx(ImageSkeleton, {}), children ? /*#__PURE__*/_jsx(Text, {
+    children: children
+  }) : /*#__PURE__*/_jsx(TextSkeleton, {
+    width: width
+  })]
+}));
+CheckboxSkeleton.displayName = 'CheckboxSkeleton';
+export default CheckboxSkeleton;

package/dist/DatePicker/DatePickerCalendar.d.ts

@@ -0,0 +1,11 @@
+import { type DatePickerLocale } from '@os-design/date-picker-utils';
+import React from 'react';
+interface DatePickerCalendarProps {
+    firstDayOfWeek: 'monday' | 'saturday' | 'sunday';
+    locale: DatePickerLocale;
+    value?: Date | [Date, Date] | null;
+    onSelect?: (value: Date) => void;
+}
+declare const DatePickerCalendar: React.FC<DatePickerCalendarProps>;
+export default DatePickerCalendar;
+//# sourceMappingURL=DatePickerCalendar.d.ts.map

package/dist/DatePicker/DatePickerCalendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerCalendar.d.ts","sourceRoot":"","sources":["../../src/DatePicker/DatePickerCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,gBAAgB,EAGtB,MAAM,8BAA8B,CAAC;AAQtC,OAAO,KAKN,MAAM,OAAO,CAAC;AAGf,UAAU,uBAAuB;IAC/B,cAAc,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,CAAC;IACjD,MAAM,EAAE,gBAAgB,CAAC;IACzB,KAAK,CAAC,EAAE,IAAI,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;CAClC;AAuFD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAkHzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/DatePicker/DatePickerCalendar.js

@@ -0,0 +1,178 @@
+import styled from '@emotion/styled';
+import { getAccessibilityDateLabel, useDatePickerCalendar } from '@os-design/date-picker-utils';
+import { Left, Right } from '@os-design/icons';
+import { ellipsisStyles, resetFocusStyles, transitionStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import React, { useCallback, useEffect, useRef } from 'react';
+import Button from '../Button';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const MonthContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5em;
+`;
+const Month = styled.div`
+  flex-grow: 1;
+  font-weight: 500;
+  text-align: center;
+  padding: 0 0.4em;
+  ${ellipsisStyles};
+`;
+const Calendar = styled.div`
+  display: grid;
+  grid-template-columns: repeat(7, ${p => p.theme.datePickerCellSize}em);
+  grid-auto-rows: ${p => p.theme.datePickerCellSize}em;
+  justify-content: space-between;
+  overflow-x: auto;
+`;
+const DayOfWeek = styled.div`
+  justify-self: center;
+  align-self: center;
+  color: ${p => clr(p.theme.datePickerDayOfWeekColorText)};
+  font-size: ${p => p.theme.sizes.small}em;
+`;
+const Day = styled.div`
+  ${resetFocusStyles};
+  justify-self: center;
+  align-self: center;
+
+  width: ${p => p.theme.datePickerDaySize}em;
+  height: ${p => p.theme.datePickerDaySize}em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: ${p => p.theme.borderRadius}em;
+  cursor: pointer;
+
+  @media (hover: hover) {
+    &:hover,
+    &:focus {
+      background-color: ${p => clr(p.theme.datePickerDayColorBgHover)};
+      color: ${p => clr(p.theme.datePickerDayColorTextHover)};
+    }
+  }
+
+  ${transitionStyles('background-color', 'color')};
+`;
+const DayAnotherMonth = styled(Day)`
+  color: ${p => clr(p.theme.datePickerDayAnotherMonthColorText)};
+`;
+const Today = styled(Day)`
+  background-color: ${p => clr(p.theme.datePickerTodayColorBg)};
+  color: ${p => clr(p.theme.datePickerTodayColorText)};
+  border: 1px solid ${p => clr(p.theme.datePickerTodayColorBorder)};
+  box-sizing: border-box;
+`;
+const SelectedDay = styled(Day)`
+  background-color: ${p => clr(p.theme.datePickerSelectedDayColorBg)};
+  color: ${p => clr(p.theme.datePickerSelectedDayColorText)};
+`;
+const DayInRange = styled(Day)`
+  background-color: ${p => clr([...p.theme.colorText.slice(0, 3), (p.theme.colorText[3] || 1) * 0.05])};
+`;
+const firstDayOfWeekIndexesMap = {
+  monday: [6, 0, 1, 2, 3, 4, 5],
+  saturday: [1, 2, 3, 4, 5, 6, 0],
+  sunday: [0, 1, 2, 3, 4, 5, 6]
+};
+const DatePickerCalendar = ({
+  firstDayOfWeek,
+  locale,
+  value,
+  onSelect = () => {}
+}) => {
+  const valueRef = useRef(value);
+  useEffect(() => {
+    valueRef.current = value;
+  }, [value]);
+  const onSelectRef = useRef(onSelect);
+  useEffect(() => {
+    onSelectRef.current = onSelect;
+  }, [onSelect]);
+  const {
+    selectedMonth,
+    updateMonth,
+    days
+  } = useDatePickerCalendar({
+    value,
+    firstDayOfWeek
+  });
+  const getDayProps = useCallback(date => ({
+    tabIndex: 0,
+    role: 'button',
+    'aria-label': getAccessibilityDateLabel(date, locale),
+    onClick: () => {
+      onSelectRef.current(date);
+    },
+    onKeyDown: e => {
+      if (['Enter', ' '].includes(e.key)) {
+        onSelectRef.current(date);
+        e.preventDefault();
+      }
+    },
+    onMouseDown: e => e.preventDefault()
+  }), [locale]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(MonthContainer, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        type: "ghost",
+        wide: "never",
+        size: "small",
+        onClick: () => updateMonth(-1),
+        "aria-label": locale.prevMonthLabel,
+        children: /*#__PURE__*/_jsx(Left, {})
+      }), /*#__PURE__*/_jsxs(Month, {
+        children: [locale.months[selectedMonth.month], " ", selectedMonth.year]
+      }), /*#__PURE__*/_jsx(Button, {
+        type: "ghost",
+        wide: "never",
+        size: "small",
+        onClick: () => updateMonth(1),
+        "aria-label": locale.nextMonthLabel,
+        children: /*#__PURE__*/_jsx(Right, {})
+      })]
+    }), /*#__PURE__*/_jsxs(Calendar, {
+      children: [Array(7).fill(0).map((_, index) => {
+        const item = firstDayOfWeekIndexesMap[firstDayOfWeek][index];
+        return /*#__PURE__*/_jsx(DayOfWeek, {
+          children: item
+        }, item);
+      }), days.map(({
+        type,
+        date
+      }) => {
+        if (type === 'dayAnotherMonth') {
+          return /*#__PURE__*/_jsx(DayAnotherMonth, {
+            ...getDayProps(date),
+            children: date.getDate()
+          }, date.toISOString());
+        }
+        if (type === 'selectedDay') {
+          return /*#__PURE__*/_jsx(SelectedDay, {
+            ...getDayProps(date),
+            children: date.getDate()
+          }, date.toISOString());
+        }
+        if (type === 'dayInRange') {
+          return /*#__PURE__*/_jsx(DayInRange, {
+            ...getDayProps(date),
+            children: date.getDate()
+          }, date.toISOString());
+        }
+        if (type === 'today') {
+          return /*#__PURE__*/_jsx(Today, {
+            ...getDayProps(date),
+            children: date.getDate()
+          }, date.toISOString());
+        }
+        return /*#__PURE__*/_jsx(Day, {
+          ...getDayProps(date),
+          children: date.getDate()
+        }, date.toISOString());
+      })]
+    })]
+  });
+};
+export default DatePickerCalendar;

package/dist/DatePicker/index.d.ts

@@ -0,0 +1,114 @@
+import { type DatePickerLocale } from '@os-design/date-picker-utils';
+import type { WithSize } from '@os-design/styles';
+import React from 'react';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'value' | 'defaultValue' | 'onChange' | 'ref'>;
+interface BaseDatePickerProps<T> extends JsxDivProps, WithSize {
+    /**
+     * The component located on the left side.
+     * @default undefined
+     */
+    left?: React.ReactNode;
+    /**
+     * Adds padding to the left component.
+     * It can be useful when passing an icon or text in the left component.
+     * @default false
+     */
+    leftHasPadding?: boolean;
+    /**
+     * The component located on the right side.
+     * @default undefined
+     */
+    right?: React.ReactNode;
+    /**
+     * Adds padding to the right component.
+     * It can be useful when passing an icon or text in the right component.
+     * @default false
+     */
+    rightHasPadding?: boolean;
+    /**
+     * The placeholder of the date picker.
+     * @default undefined
+     */
+    placeholder?: string;
+    /**
+     * Whether the date picker is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the component have a focus.
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * Whether the component opens the popup calendar.
+     * @default false
+     */
+    autoOpen?: boolean;
+    /**
+     * The format of the date.
+     * @default undefined
+     */
+    format?: (value: T) => string;
+    /**
+     * The first day of the week.
+     * @default sunday
+     */
+    firstDayOfWeek?: 'monday' | 'saturday' | 'sunday';
+    /**
+     * The locale of the date picker.
+     * @default undefined
+     */
+    locale?: DatePickerLocale;
+    /**
+     * Whether the time is shown.
+     * @default false
+     */
+    showTime?: boolean;
+    /**
+     * The time notation.
+     * @default 12-hour
+     */
+    timeNotation?: '12-hour' | '24-hour';
+    /**
+     * Selected date.
+     * @default undefined
+     */
+    value?: T | null;
+    /**
+     * The default value.
+     * @default undefined
+     */
+    defaultValue?: T | null;
+    /**
+     * The change event handler.
+     * @default undefined
+     */
+    onChange?: (value: T | null) => void;
+    /**
+     * The event handler that is called whenever a popup closes.
+     * @default undefined
+     */
+    onClose?: () => void;
+}
+export interface DateNotRangePickerProps extends BaseDatePickerProps<Date> {
+    /**
+     * Whether the value is a range.
+     * @default false
+     */
+    range?: false;
+}
+export interface DateRangePickerProps extends BaseDatePickerProps<[Date, Date]> {
+    /**
+     * Whether the value is a range.
+     * @default false
+     */
+    range: true;
+}
+export type DatePickerProps = DateNotRangePickerProps | DateRangePickerProps;
+/**
+ * The component to choose a date.
+ */
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+export default DatePicker;
+//# sourceMappingURL=index.d.ts.map

package/dist/DatePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DatePicker/index.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,gBAAgB,EAItB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAOlD,OAAO,KAON,MAAM,OAAO,CAAC;AAiBf,KAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,UAAU,mBAAmB,CAAC,CAAC,CAAE,SAAQ,WAAW,EAAE,QAAQ;IAC5D;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,CAAC;IAClD;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACrC;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACjB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AACD,MAAM,WAAW,uBAAwB,SAAQ,mBAAmB,CAAC,IAAI,CAAC;IACxE;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AACD,MAAM,WAAW,oBACf,SAAQ,mBAAmB,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACzC;;;OAGG;IACH,KAAK,EAAE,IAAI,CAAC;CACb;AACD,MAAM,MAAM,eAAe,GAAG,uBAAuB,GAAG,oBAAoB,CAAC;AAsC7E;;GAEG;AACH,QAAA,MAAM,UAAU,wFAwXf,CAAC;AAIF,eAAe,UAAU,CAAC"}