@frontify/fondue-components 27.0.0 → 28.0.0

package/dist/index.d.ts

@@ -13,6 +13,7 @@ import { HTMLAttributeAnchorTarget } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { KeyboardEvent as KeyboardEvent_2 } from 'react';
 import { KeyboardEventHandler } from 'react';
+import { Locale } from 'date-fns';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { MouseEventHandler } from 'react';
 import * as RadioGroupPrimitve from '@radix-ui/react-radio-group';
@@ -513,6 +514,57 @@ declare type CommonAriaProps = {
     'aria-haspopup'?: boolean;
 };
 
+export declare const DatePicker: typeof ForwardedRefSingleDatePicker & {
+    Range: typeof ForwardedRefRangeDatePicker;
+    Input: typeof ForwardedRefDatePickerInput;
+};
+
+declare type DatePickerBaseProps = {
+    /** The days to be disabled. */
+    disabledDates?: DisabledDates | DisabledDates[];
+    /** The test id applied to the wrapper and forwarded to DayPicker. */
+    'data-test-id'?: string;
+};
+
+declare type DatePickerDate = {
+    year: number;
+    month: number;
+    day: number;
+} | undefined;
+
+declare type DatePickerDateRange = {
+    from: DatePickerDate;
+    to: DatePickerDate;
+} | undefined;
+
+declare type DatePickerInputProps = {
+    id?: string;
+    /**
+     * The active date or date range in the date picker
+     */
+    selected?: DatePickerDateRange | DatePickerDate;
+    /**
+     * The open state of the date picker used to determine arrow state
+     */
+    isOpen?: boolean;
+    /**
+     * Whether the date picker input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * callback for clearing the date
+     */
+    onClear?: () => void;
+    /**
+     * Event handler called when the date picker input is clicked
+     */
+    onClick?: () => void;
+    /**
+     * The test id of the date picker input
+     */
+    'data-test-id'?: string;
+} & CommonAriaAttrs;
+
 export declare const Dialog: {
     Root: {
         ({ children, modal, onOpenChange, open }: DialogRootProps): JSX_2.Element;
@@ -672,6 +724,12 @@ declare type DialogTriggerProps = {
     'data-test-id'?: string;
 };
 
+declare type DisabledDates = {
+    before: Date;
+} | {
+    after: Date;
+};
+
 export declare const Divider: ForwardRefExoticComponent<DividerProps & RefAttributes<HTMLDivElement>>;
 
 declare type DividerColor = 'weak' | 'default' | 'strong';
@@ -861,29 +919,33 @@ declare type DropdownTriggerProps = {
 declare type DropdownViewportCollisionPadding = 'compact' | 'spacious';
 
 declare const enUS: {
-    ColorPicker_selectColor: string;
-    ColorPicker_selectFormat: string;
-    ColorPicker_hexValue: string;
-    ColorPicker_redChannel: string;
-    ColorPicker_greenChannel: string;
-    ColorPicker_blueChannel: string;
-    ColorPicker_opacity: string;
-    Dialog_close: string;
-    Flyout_close: string;
-    Select_clear: string;
-    Select_toggleMenu: string;
-    Select_error: string;
-    Select_selectedCount: string;
-    Select_singleItemSelected: string;
-    Select_multipleItemsSelected: string;
-    Select_additionalItemsSelected: string;
-    Switch_defaultLabel: string;
-    Table_sortByDescending: string;
-    Table_sortByAscending: string;
-    Table_sortDescending: string;
-    Table_sortAscending: string;
-    Badge_dismiss: string;
-    Notice_dismiss: string;
+    translationStrings: {
+        ColorPicker_selectColor: string;
+        ColorPicker_selectFormat: string;
+        ColorPicker_hexValue: string;
+        ColorPicker_redChannel: string;
+        ColorPicker_greenChannel: string;
+        ColorPicker_blueChannel: string;
+        ColorPicker_opacity: string;
+        DatePicker_selectDate: string;
+        Dialog_close: string;
+        Flyout_close: string;
+        Select_clear: string;
+        Select_toggleMenu: string;
+        Select_error: string;
+        Select_selectedCount: string;
+        Select_singleItemSelected: string;
+        Select_multipleItemsSelected: string;
+        Select_additionalItemsSelected: string;
+        Switch_defaultLabel: string;
+        Table_sortByDescending: string;
+        Table_sortByAscending: string;
+        Table_sortDescending: string;
+        Table_sortAscending: string;
+        Badge_dismiss: string;
+        Notice_dismiss: string;
+    };
+    dateLocale: Locale;
 };
 
 /**
@@ -1067,12 +1129,24 @@ declare type FlyoutTriggerProps = {
 
 declare type FlyoutViewportCollisionPadding = 'compact' | 'spacious';
 
+declare const ForwardedRefDatePickerInput: ForwardRefExoticComponent<DatePickerInputProps & RefAttributes<HTMLDivElement>>;
+
+declare const ForwardedRefRangeDatePicker: ForwardRefExoticComponent<    {
+selected?: DatePickerDateRange;
+onChange?: (dateRange: DatePickerDateRange) => void;
+} & DatePickerBaseProps & RefAttributes<HTMLDivElement>>;
+
 declare const ForwardedRefSelectItem: ForwardRefExoticComponent<SelectItemProps & RefAttributes<HTMLLIElement>>;
 
 declare const ForwardedRefSelectItemGroup: ForwardRefExoticComponent<SelectItemGroupProps & RefAttributes<HTMLDivElement>>;
 
 declare const ForwardedRefSelectSlot: ForwardRefExoticComponent<SelectSlotProps & RefAttributes<HTMLDivElement>>;
 
+declare const ForwardedRefSingleDatePicker: ForwardRefExoticComponent<    {
+selected?: DatePickerDate;
+onChange?: (date?: DatePickerDate) => void;
+} & DatePickerBaseProps & RefAttributes<HTMLDivElement>>;
+
 declare const ForwardedRefTextareaRoot: ForwardRefExoticComponent<TextareaProps & RefAttributes<HTMLTextAreaElement>>;
 
 declare const ForwardedRefTextareaSlot: ForwardRefExoticComponent<TextareaSlotProps & RefAttributes<HTMLDivElement>>;
@@ -2750,7 +2824,10 @@ declare type TooltipTriggerProps = {
     'data-test-id'?: string;
 };
 
-declare type Translations = typeof enUS;
+declare type Translations = {
+    translationStrings: typeof enUS.translationStrings;
+    dateLocale: Locale;
+};
 
 export declare const useFondueTheme: () => {
     dir: "ltr" | "rtl";