@payfit/unity-components 0.0.0-alpha.8 → 1.0.0

package/dist/esm/components/data-table/parts/ColumnSortHeader.d.ts

@@ -0,0 +1,10 @@
+import { Header } from '@tanstack/react-table';
+import { ActionableProps } from '../../actionable/Actionable.js';
+export interface ColumnSortHeaderProps<TData, TValue> extends ActionableProps {
+    header: Header<TData, TValue>;
+}
+declare function ColumnSortHeader<TData, TValue>({ children, header, ...props }: ColumnSortHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+declare namespace ColumnSortHeader {
+    var displayName: string;
+}
+export { ColumnSortHeader };

package/dist/esm/components/data-table/parts/ColumnSortHeader.js

@@ -0,0 +1,37 @@
+import { jsx as r, jsxs as m, Fragment as s } from "react/jsx-runtime";
+import { Actionable as c } from "../../actionable/Actionable.js";
+import { Icon as i } from "../../icon/Icon.js";
+function u({
+  children: t,
+  header: o,
+  ...n
+}) {
+  return /* @__PURE__ */ r(
+    c,
+    {
+      ...n,
+      className: "uy:flex uy:items-center uy:gap-50",
+      onPress: () => {
+        o.column.getCanSort() && o.column.toggleSorting();
+      },
+      children: ({ isHovered: e }) => {
+        const l = o.column.getCanSort() && (o.column.getIsSorted() || e);
+        return /* @__PURE__ */ m(s, { children: [
+          t,
+          l && /* @__PURE__ */ r(
+            i,
+            {
+              src: o.column.getIsSorted() === "asc" ? "ArrowUpOutlined" : "ArrowDownOutlined",
+              role: "presentation",
+              size: 20
+            }
+          )
+        ] });
+      }
+    }
+  );
+}
+u.displayName = "ColumnSortHeader";
+export {
+  u as ColumnSortHeader
+};

package/dist/esm/components/date-calendar/DateCalendar.d.ts

@@ -0,0 +1,23 @@
+import { DateValue } from '@internationalized/date';
+import { CalendarProps as AriaDateCalendarProps } from 'react-aria-components';
+type PropsFromAriaCalendar<TDate extends DateValue> = AriaDateCalendarProps<TDate>;
+export type DateCalendarProps<TDate extends DateValue> = PropsFromAriaCalendar<TDate>;
+/**
+ * The `DateCalendar` component displays one or more date grids and allows users to navigate through dates select a single date.
+ * @param {DateCalendarProps} props - The props for the `DateCalendar` component
+ * @example
+ * ```tsx
+ * import { DateCalendar } from '@payfit/unity-components'
+ * import { CalendarDate } from '@internationalized/date'
+ *
+ * const [date, setDate] = useState(new CalendatDate(2022, 1, 1))
+ * <DateCalendar value={date} onChange={setDate} />
+ * ```
+ * @see {@link DateCalendarProps} for all available props
+ * @remarks [API and Demos](https://unity-components.payfit.io/?path=/docs/date-and-time-datecalendar--docs)
+ */
+declare function DateCalendar<TDate extends DateValue>({ value, defaultValue, minValue, maxValue, onChange, onFocusChange, ...props }: DateCalendarProps<TDate>): import("react/jsx-runtime").JSX.Element;
+declare namespace DateCalendar {
+    var displayName: string;
+}
+export { DateCalendar };

package/dist/esm/components/date-calendar/DateCalendar.js

@@ -0,0 +1,174 @@
+import { jsx as a, jsxs as r } from "react/jsx-runtime";
+import { useState as m } from "react";
+import { today as I, getLocalTimeZone as p, isToday as k } from "@internationalized/date";
+import { Calendar as B, Heading as M, CalendarGrid as O, CalendarGridHeader as T, CalendarHeaderCell as W, CalendarGridBody as P, CalendarCell as R } from "react-aria-components";
+import { tv as Z } from "tailwind-variants";
+import { IconButton as h } from "../icon-button/IconButton.js";
+import { useMonthsList as $ } from "./hooks/useMonthsList.js";
+import { useYearsList as q } from "./hooks/useYearsList.js";
+import { DateSegmentSelect as v } from "./parts/DateSegmentSelect.js";
+const z = Z({
+  slots: {
+    base: "",
+    calendarWrapper: "uy:flex uy:flex-col uy:gap-100",
+    dialogHeader: "uy:flex uy:items-center uy:h-500 uy:w-full",
+    dialogHeaderGroup: "uy:flex uy:items-center",
+    calendarGrid: "uy:border-separate uy:border-spacing-25 uy:w-full",
+    calendarHeaderCell: "uy:typography-body-strong uy:text-content-neutral-low uy:w-[44px] uy:h-[44px] uy:p-[1px] uy:uppercase",
+    calendarCell: [
+      // base styles
+      "uy:typography-body uy:relative uy:text-content-form-enabled uy:w-[44px] uy:h-[44px] uy:p-[1px] uy:outline-hidden uy:cursor-pointer uy:rounded-circle uy:flex uy:items-center uy:justify-center",
+      // interaction states
+      "uy:hover:bg-surface-neutral-hover uy:active:bg-surface-form-active uy:data-[pressed]:bg-surface-neutral-pressed uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2",
+      // cells outside of current month
+      "uy:data-[outside-month]:text-content-neutral-disabled uy:data-[outside-month]:cursor-not-allowed uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:cursor-not-allowed uy:data-[unavailable]:text-content-neutral-disabled uy:data-[unavailable]:cursor-not-allowed",
+      // selected cells
+      "uy:data-[selected]:bg-surface-form-active uy:data-[selected]:text-content-inverted",
+      // "current day" (today) indicator
+      "uy:data-[today]:after:content-' ' uy:data-[today]:after:absolute uy:data-[today]:after:bottom-150 uy:data-[today]:after:w-100 uy:data-[today]:after:h-25 uy:data-[today]:after:bg-surface-primary-active uy:data-[today]:data-[selected]:after:bg-content-inverted"
+    ]
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        calendarHeaderCell: "uy:text-content-form-disabled"
+      }
+    }
+  },
+  defaultVariants: {
+    isDisabled: !1
+  }
+});
+function A({
+  value: c,
+  defaultValue: l,
+  minValue: d,
+  maxValue: s,
+  onChange: o,
+  onFocusChange: i,
+  ...t
+}) {
+  const f = I(p()), [g, x] = m(
+    c ?? l ?? f
+  ), [n, u] = m(
+    c ?? l ?? f
+  ), D = $(), C = q({
+    startYear: d == null ? void 0 : d.year,
+    endYear: s == null ? void 0 : s.year
+  }), N = (e) => {
+    u(
+      (y) => y.set({ month: parseInt(e, 10) })
+    );
+  }, H = (e) => {
+    u(
+      (y) => y.set({ year: parseInt(e, 10) })
+    );
+  }, {
+    base: w,
+    calendarWrapper: G,
+    dialogHeader: L,
+    dialogHeaderGroup: b,
+    calendarGrid: S,
+    calendarHeaderCell: Y,
+    calendarCell: j
+  } = z({ isDisabled: t.isDisabled });
+  return /* @__PURE__ */ a("div", { className: w(), "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
+    B,
+    {
+      ...t,
+      minValue: d,
+      maxValue: s,
+      value: g,
+      defaultValue: l,
+      onChange: (e) => {
+        x(e), o == null || o(e);
+      },
+      focusedValue: n,
+      onFocusChange: (e) => {
+        u(e), i == null || i(e);
+      },
+      children: /* @__PURE__ */ r("div", { className: G(), children: [
+        /* @__PURE__ */ r("header", { className: L(), children: [
+          /* @__PURE__ */ a(M, { className: "uy:sr-only" }),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: b({
+                className: "uy:pl-100 uy:gap-200"
+              }),
+              children: [
+                /* @__PURE__ */ a(
+                  v,
+                  {
+                    type: "month",
+                    items: D,
+                    value: n.month.toString(),
+                    onChange: N,
+                    isDisabled: t.isDisabled
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  v,
+                  {
+                    type: "year",
+                    items: C,
+                    value: n.year.toString(),
+                    onChange: H,
+                    isDisabled: t.isDisabled
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: b({
+                className: "uy:ml-auto uy:gap-100"
+              }),
+              children: [
+                /* @__PURE__ */ a(
+                  h,
+                  {
+                    slot: "previous",
+                    icon: "CaretLeftOutlined",
+                    color: "neutral",
+                    label: "Previous",
+                    variant: "ghost",
+                    isDisabled: t.isDisabled
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  h,
+                  {
+                    slot: "next",
+                    icon: "CaretRightOutlined",
+                    color: "neutral",
+                    label: "Next",
+                    variant: "ghost",
+                    isDisabled: t.isDisabled
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r(O, { className: S(), weekdayStyle: "short", children: [
+          /* @__PURE__ */ a(T, { children: (e) => /* @__PURE__ */ a(W, { className: Y(), children: e }) }),
+          /* @__PURE__ */ a(P, { children: (e) => /* @__PURE__ */ a(
+            R,
+            {
+              date: e,
+              "data-today": k(e, p()) ? !0 : void 0,
+              className: j()
+            }
+          ) })
+        ] })
+      ] })
+    }
+  ) });
+}
+A.displayName = "DateCalendar";
+export {
+  A as DateCalendar
+};

package/dist/esm/components/date-calendar/parts/DateSegmentSelect.js

@@ -0,0 +1,69 @@
+import { jsxs as v, jsx as n } from "react/jsx-runtime";
+import { useState as $ } from "react";
+import { IconSprite as w } from "@payfit/unity-icons";
+import { useId as x } from "react-aria";
+import { useIntl as I } from "react-intl";
+function N({
+  items: o,
+  value: i,
+  onChange: y,
+  type: e,
+  isDisabled: s = !1
+}) {
+  const l = (t) => () => {
+    const a = o.find((b) => b.id === t);
+    return (a == null ? void 0 : a.name) ?? Array.from({ length: 3 }).join("\0");
+  }, r = x(), c = I(), [p, f] = $(l(i)), d = `${r}-calendar-${e}-select-label`, u = `${r}-calendar-${e}-select`, m = `${r}-calendar-${e}-select-description`, h = e === "month" ? "unity:component:form-field:date-picker:segment-select:month:label" : "unity:component:form-field:date-picker:segment-select:year:label", g = e === "month" ? "unity:component:form-field:date-picker:segment-select:month:description" : "unity:component:form-field:date-picker:segment-select:year:description";
+  return /* @__PURE__ */ v("div", { className: "uy:isolation-isolate uy:relative uy:inline-flex uy:items-center uy:cursor-pointer", children: [
+    /* @__PURE__ */ n(
+      "label",
+      {
+        id: d,
+        htmlFor: u,
+        className: "uy:sr-only",
+        "aria-hidden": "true",
+        children: c.formatMessage({
+          id: h,
+          defaultMessage: `Change current ${e}`
+        })
+      }
+    ),
+    /* @__PURE__ */ n(
+      "select",
+      {
+        id: u,
+        value: i,
+        onChange: (t) => {
+          y(t.target.value), f(l(t.target.value));
+        },
+        disabled: s,
+        className: "uy:appearance-none uy:box-border uy:w-[var(--uy-selected-item-width)] uy:bg-transparent uy:border-none uy:rounded-50 uy:capitalize uy:text-content-form-enabled uy:typography-action-large uy:cursor-pointer uy:pr-300 uy:disabled:text-content-form-disabled uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring [-webkit-tap-highlight-color:transparent] [background-color:transparent]",
+        style: {
+          "--uy-selected-item-width": `calc(var(--uy-spacing-300) + ${p.length}ch)`
+        },
+        "aria-labelledby": d,
+        "aria-describedby": m,
+        children: o.map((t) => /* @__PURE__ */ n("option", { value: t.id, children: t.name }, t.id))
+      }
+    ),
+    /* @__PURE__ */ n("div", { className: "uy:absolute uy:right-0 uy:pointer-events-none uy:text-content-neutral-low", children: /* @__PURE__ */ n(
+      w,
+      {
+        src: "CaretDownOutlined",
+        width: 20,
+        height: 20,
+        color: "inherit",
+        role: "presentation",
+        className: s ? "uy:text-content-form-disabled" : ""
+      }
+    ) }),
+    /* @__PURE__ */ n("span", { id: m, className: "uy:sr-only", "aria-hidden": "true", children: c.formatMessage({
+      id: g,
+      defaultMessage: `Press Enter or Space to change ${e}, then use up and down arrows to select a ${e}`
+    }) })
+  ] });
+}
+N.displayName = "DateSegmentSelect";
+export {
+  N as DateSegmentSelect
+};

package/dist/esm/components/date-picker/DatePicker.d.ts

@@ -0,0 +1,67 @@
+import { CalendarDate } from '@internationalized/date';
+import { DatePickerProps as AriaDatePickerProps } from 'react-aria-components';
+export interface DatePickerProps extends Pick<AriaDatePickerProps<CalendarDate>, 'id' | 'firstDayOfWeek'> {
+    /** The currently selected date */
+    value?: CalendarDate | null;
+    /** The default selected date (uncontrolled) */
+    defaultValue?: CalendarDate | null;
+    /** The minimum allowed date */
+    minValue?: CalendarDate;
+    /** The maximum allowed date */
+    maxValue?: CalendarDate;
+    /** Callback fired when the date value changes */
+    onChange?: (value: CalendarDate | null) => void;
+    /** Callback fired when the clear button is clicked */
+    onClearButtonPress?: () => void;
+    /** Callback fired when the picker loses focus */
+    onBlur?: () => void;
+    /** Callback fired when the picker gains focus */
+    onFocus?: () => void;
+    /** Callback fired when the calendar overlay's open state changes */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Whether the picker is in an invalid state */
+    isInvalid?: boolean;
+    /** Whether the picker is in a loading state */
+    isLoading?: boolean;
+    /** Whether the picker is disabled */
+    isDisabled?: boolean;
+    /** Whether the picker is read-only */
+    isReadOnly?: boolean;
+    /** Function to determine if a date should be disabled */
+    isDateUnavailable?: (date: CalendarDate) => boolean;
+    /** Whether to force leading zeros for days and months */
+    shouldForceLeadingZeros?: boolean;
+    /** Whether to close the calendar after a date is selected */
+    shouldCloseOnSelect?: boolean;
+    /** Whether to open the calendar by default */
+    defaultOpen?: boolean;
+}
+/**
+ * The DatePicker component allows users to select a date either by typing it in directly or choosing from a calendar overlay, providing a standardized way to handle date selection across the application.
+ * @param {DatePickerProps} props - Props for configuring the DatePicker's behavior and appearance
+ * @see {@link DatePickerProps} for all available props
+ * @example
+ * ```tsx
+ * import { DatePicker } from '@payfit/unity-components'
+ * import { parseDate } from '@internationalized/date'
+ *
+ * function Example() {
+ *   const [selectedDate, setSelectedDate] = useState<CalendarDate>()
+ *
+ *   return (
+ *     <DatePicker
+ *       value={selectedDate}
+ *       onChange={setSelectedDate}
+ *       minValue={parseDate('2024-01-01')}  // Restrict dates before Jan 1, 2024
+ *       isDateUnavailable={(date) => date.dayOfWeek === 0}  // Disable Sundays
+ *     />
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API & Docs](https://master--66fe6715241b661107117e47.chromatic.com/?path=/docs/inputs-datepicker--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/719ac2-date-picker)
+ * @note
+ * This component requires `@internationalized/date` as a peer dependency. Make sure to install it in your project: `yarn add @internationalized/date`
+ */
+declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLDivElement>>;
+export { DatePicker };

package/dist/esm/components/date-picker/DatePicker.js

@@ -0,0 +1,164 @@
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { forwardRef as W } from "react";
+import { DatePicker as I, Group as P, Button as U, Popover as j, Dialog as E } from "react-aria-components";
+import { useIntl as M } from "react-intl";
+import { tv as m } from "tailwind-variants";
+import { DateCalendar as O } from "../date-calendar/DateCalendar.js";
+import { Icon as R } from "../icon/Icon.js";
+import { DateInput as G } from "./parts/DateInput.js";
+const $ = m({
+  slots: {
+    base: [
+      "uy:group uy:flex uy:h-500 uy:border uy:border-solid uy:rounded-100",
+      "uy:active:border-border-form-active uy:data-[focus-visible]:border-border-form-active"
+    ],
+    inputWrapper: [
+      "uy:flex uy:grow uy:rounded-75 uy:outline-none",
+      // Show focus styles when input wrapper is focused AND button is not focused
+      "uy:focus-within:outline-2 uy:focus-within:outline-solid uy:focus-within:outline-utility-focus-ring uy:focus-within:outline-offset-2",
+      // Hide focus styles when button is focused
+      "uy:group-[:has(button:focus)]:data-[focus-within]:outline-none uy:group-[:has(button:focus)]:data-[focus-within]:outline-offset-0 uy:group-[:has(button:focus)]:data-[focus-within]:outline-transparent"
+    ],
+    suffix: [
+      "uy:flex-grow-0 uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-100 uy:text-content-neutral-low",
+      "uy:hover:bg-surface-neutral-hover uy:active:bg-surface-neutral-pressed uy:active:border-border-form-active uy:data-[pressed]:bg-surface-neutral-pressed uy:data-[pressed]:border-border-form-active",
+      "uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-[3px]"
+    ]
+  },
+  variants: {
+    isInvalid: {
+      true: {
+        base: "uy:border-border-form-error uy:bg-surface-form-error",
+        suffix: "uy:bg-surface-form-error uy:border-border-form-error"
+      }
+    },
+    isReadOnly: {
+      true: {
+        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+        inputWrapper: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+        suffix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-disabled"
+      }
+    },
+    isDisabled: {
+      true: {
+        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+        inputWrapper: "uy:bg-surface-form-disabled uy:text-content-form-disabled",
+        suffix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-disabled"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      isInvalid: !1,
+      isDisabled: !1,
+      isReadOnly: !1,
+      className: {
+        base: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
+        suffix: "uy:border-border-form-enabled uy:bg-surface-neutral uy:text-content-form-enabled"
+      }
+    }
+  ]
+}), q = m({
+  base: "uy:overflow-auto uy:shadow-floating uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-75",
+  variants: {
+    isEntering: {
+      true: "uy:animate-in uy:fade-in uy:data-[placement-bottom]:slide-in-from-top-1 uy:data-[placement-top]:slide-in-from-bottom-1 uy:duration-200 uy:ease-out"
+    },
+    isExiting: {
+      true: "uy:animate-out uy:fade-out uy:data-[placement-bottom]:slide-out-to-top-1 uy:data-[placement-top]:slide-out-to-bottom-1 uy:duration-150 uy:ease-in"
+    }
+  }
+}), z = W(
+  ({
+    value: f,
+    defaultValue: n,
+    isInvalid: b,
+    isLoading: p,
+    isDisabled: t,
+    isReadOnly: u,
+    onClearButtonPress: d,
+    onBlur: o,
+    onFocus: i,
+    onChange: s,
+    onOpenChange: l,
+    id: v,
+    ...e
+  }, A) => {
+    const g = M(), { base: x, inputWrapper: h, suffix: D } = $({
+      isInvalid: !!b,
+      isReadOnly: !!u,
+      isDisabled: !!t
+    }), y = (r) => {
+      s == null || s(r);
+    }, w = (r) => {
+      l == null || l(r), r ? i == null || i() : o == null || o();
+    }, k = (r) => e.isDateUnavailable ? e.isDateUnavailable(r) : !1, V = () => {
+      d == null || d();
+    };
+    return /* @__PURE__ */ c(
+      I,
+      {
+        "data-dd-privacy": "mask",
+        ...e,
+        className: x(),
+        value: f,
+        defaultValue: n,
+        minValue: e.minValue,
+        maxValue: e.maxValue,
+        isReadOnly: !!u,
+        isDisabled: !!t,
+        onChange: y,
+        onFocus: i,
+        onBlur: o,
+        onOpenChange: w,
+        isDateUnavailable: k,
+        children: [
+          /* @__PURE__ */ c(P, { className: h(), id: v, children: [
+            /* @__PURE__ */ a(
+              G,
+              {
+                isLoading: p,
+                isDisabled: t,
+                isReadOnly: u,
+                isInvalid: b,
+                onClearButtonPress: V
+              }
+            ),
+            /* @__PURE__ */ a(U, { className: D(), isDisabled: u || t, children: /* @__PURE__ */ a(
+              R,
+              {
+                src: "CalendarBlankOutlined",
+                color: "inherit",
+                alt: g.formatMessage({
+                  id: "unity:component:form-field:date-picker:calendar-button",
+                  defaultMessage: "Open Calendar"
+                })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ a(
+            j,
+            {
+              className: ({ isEntering: r, isExiting: N }) => q({ isEntering: r, isExiting: N }),
+              children: /* @__PURE__ */ a(E, { className: "uy:p-150", "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
+                O,
+                {
+                  value: f,
+                  defaultValue: n,
+                  minValue: e.minValue,
+                  maxValue: e.maxValue,
+                  onChange: y,
+                  firstDayOfWeek: e.firstDayOfWeek
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+z.displayName = "DatePicker";
+export {
+  z as DatePicker
+};

package/dist/esm/components/date-picker/parts/DateInput.d.ts

@@ -0,0 +1,87 @@
+import { CalendarDate } from '@internationalized/date';
+import { ReactElement } from 'react';
+import { DateFieldProps } from 'react-aria-components';
+export declare const dateInput: import('tailwind-variants').TVReturnType<{
+    isInvalid: {
+        true: {
+            base: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    state: string;
+}, undefined, {
+    isInvalid: {
+        true: {
+            base: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    state: string;
+}, import('tailwind-variants').TVReturnType<{
+    isInvalid: {
+        true: {
+            base: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    state: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface DateInputProps extends DateFieldProps<CalendarDate> {
+    /** Element to display after the input field */
+    suffix?: ReactElement;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Whether the field is in an invalid state */
+    isInvalid?: boolean;
+    /** Whether the field is in a loading state */
+    isLoading?: boolean;
+    /** Whether the field is disabled */
+    isDisabled?: boolean;
+    /** Whether the field is read-only */
+    isReadOnly?: boolean;
+    /** Clear button click handler */
+    onClearButtonPress?: () => void;
+}
+export declare function DateInput({ isLoading, isInvalid, isReadOnly, isDisabled, onClearButtonPress, }: DateInputProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DateInput {
+    var displayName: string;
+}