@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.81

package/dist/lib/components/DateRangePicker/utils/disabled-dates.d.ts

@@ -0,0 +1,26 @@
+import { BlockedMonth } from '../contexts';
+export type DateRestrictions = {
+    blockedDays: Date[];
+    blockedMonths: BlockedMonth[];
+    minDate?: Date;
+    maxDate?: Date;
+};
+/**
+ * Checks if a date is selectable based on all restrictions.
+ */
+export declare const isDateSelectable: (date: Date, restrictions: DateRestrictions) => boolean;
+/**
+ * Creates a matcher function for react-day-picker's disabled prop.
+ * Returns undefined if no restrictions are set.
+ */
+export declare const createDisabledMatcher: (restrictions: DateRestrictions) => ((date: Date) => boolean) | undefined;
+/**
+ * Checks if navigation to the previous month should be allowed.
+ * Returns false if the previous month would be entirely before minDate.
+ */
+export declare const canNavigateToPrevMonth: (currentLeftMonth: Date, minDate?: Date) => boolean;
+/**
+ * Checks if navigation to the next month should be allowed.
+ * Returns false if the next month would be entirely after maxDate.
+ */
+export declare const canNavigateToNextMonth: (currentRightMonth: Date, maxDate?: Date) => boolean;

package/dist/lib/components/DateRangePicker/utils/index.d.ts

@@ -0,0 +1,6 @@
+export { calculatePresetRange } from './presets';
+export { PRESET_OPTIONS } from '../constants';
+export type { PresetOption } from '../constants';
+export { autoFormatDateInput, combineDateAndTime, formatDateToDisplayString, formatDateToString, formatTimeToString, getMonthName, isValidTimeString, parseDateString, parseDisplayDateString, parseTimeString, } from './validation';
+export { createDisabledMatcher, isDateSelectable, canNavigateToPrevMonth, canNavigateToNextMonth, } from './disabled-dates';
+export type { DateRestrictions } from './disabled-dates';

package/dist/lib/components/DateRangePicker/utils/presets.d.ts

@@ -0,0 +1,5 @@
+import { DateRange, DateRangePreset } from '../DateRangePicker.types';
+/**
+ * Calculates the date range for a given preset.
+ */
+export declare const calculatePresetRange: (preset: DateRangePreset) => DateRange;

package/dist/lib/components/DateRangePicker/utils/validation.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Combines a date and time into an ISO string.
+ */
+export declare const combineDateAndTime: (date?: Date, time?: Date) => string;
+/**
+ * Auto-formats a date input value as MM/DD/YYYY while typing.
+ * Inserts slashes after month (2 digits) and day (2 more digits).
+ */
+export declare const autoFormatDateInput: (rawValue: string, previousValue: string) => string;
+/**
+ * Validates a time string in HH:MM format.
+ * Returns true if valid, false otherwise.
+ */
+export declare const isValidTimeString: (timeString: string, format?: "12" | "24") => boolean;
+/**
+ * Parses a time string into a Date object.
+ * Returns undefined if invalid.
+ */
+export declare const parseTimeString: (timeString: string, format?: "12" | "24", period?: "AM" | "PM") => Date | undefined;
+/**
+ * Formats a Date object to a time string in HH:MM format.
+ */
+export declare const formatTimeToString: (date: Date | undefined, format?: "12" | "24") => string;
+/**
+ * Formats a Date object to a readable date string like "6 February 2025".
+ */
+export declare const formatDateToDisplayString: (date: Date | undefined) => string;
+/**
+ * Formats a Date object to a date string in MM/DD/YYYY format.
+ */
+export declare const formatDateToString: (date: Date | undefined) => string;
+/**
+ * Parses a display date string like "6 February 2025" to a Date object.
+ */
+export declare const parseDisplayDateString: (dateString: string) => Date | undefined;
+/**
+ * Parses a date string in MM/DD/YYYY format to a Date object.
+ */
+export declare const parseDateString: (dateString: string) => Date | undefined;
+/**
+ * Gets the month name from index
+ */
+export declare const getMonthName: (monthIndex: number) => string;

package/dist/lib/components/Datepicker/DatePicker.d.ts

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import { Props } from './DatePicker.types';
+/**
+ * A date picker component built on react-day-picker.
+ * Allows single date selection with calendar navigation.
+ *
+ * @example
+ * ```tsx
+ * // Basic date picker
+ * <DatePicker
+ *   defaultSelected={new Date()}
+ *   onSelect={(date) => console.log(date)}
+ * />
+ *
+ * // With custom styling
+ * <DatePicker
+ *   defaultSelected={startDate}
+ *   onSelect={setStartDate}
+ *   monthsClassName="custom-months"
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-datepicker--docs Storybook}
+ */
+declare const DatePicker: FC<Props>;
+export { DatePicker };

package/dist/lib/components/Datepicker/DatePicker.types.d.ts

@@ -0,0 +1,31 @@
+import { VariantProps } from 'class-variance-authority';
+import { getAllTimezones } from 'countries-and-timezones';
+import { DayPickerProps as DayPickerPrimitiveProps } from 'react-day-picker';
+import { datePickerVariants } from './DatePicker.variants';
+type TimeZone = keyof ReturnType<typeof getAllTimezones>;
+/**
+ * Props for the DatePicker component.
+ *
+ * @example
+ * ```tsx
+ * <DatePicker
+ *   defaultSelected={new Date()}
+ *   onSelect={(date) => setSelectedDate(date)}
+ * />
+ * ```
+ */
+export type Props = Omit<DayPickerPrimitiveProps, 'mode'> & VariantProps<typeof datePickerVariants> & {
+    /** CSS classes for the navigation arrows */
+    arrowClassName?: string;
+    /** CSS classes for the months container */
+    monthsClassName?: string;
+    /** Timezone for date display */
+    timeZone?: TimeZone;
+    /** Initial selected date */
+    defaultSelected?: Date;
+    /** Callback when a date is selected */
+    onSelect?: (date: Date) => void;
+};
+/** @deprecated Use Props instead */
+export type DatePickerProps = Props;
+export {};

package/dist/lib/components/Datepicker/DatePicker.variants.d.ts

@@ -0,0 +1 @@
+export declare const datePickerVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/lib/components/Divider/Divider.d.ts

@@ -0,0 +1,17 @@
+import { FC, HTMLAttributes } from 'react';
+/**
+ * A horizontal divider/separator line.
+ *
+ * @example
+ * ```tsx
+ * <div>
+ *   <p>Section 1</p>
+ *   <Divider />
+ *   <p>Section 2</p>
+ * </div>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-divider--docs Storybook}
+ */
+declare const Divider: FC<HTMLAttributes<HTMLDivElement>>;
+export { Divider };

package/dist/lib/components/Divider/Divider.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const dividerVariants: (props?: ({
+    variant?: "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/lib/components/Drawer/Drawer.d.ts

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import { BodyProps, FooterProps, HeaderProps } from './components';
+import { Props } from './Drawer.types';
+/**
+ * A drawer/panel component that slides in from the side of the screen.
+ * Supports Header, Body, and Footer sub-components, keyboard navigation (Escape to close),
+ * and optional resizing.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
+ *
+ * <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <Drawer.Header>Panel Title</Drawer.Header>
+ *   <Drawer.Body>
+ *     Panel content goes here.
+ *   </Drawer.Body>
+ *   <Drawer.Footer>
+ *     <Button variant="secondary" onClick={() => setIsOpen(false)}>
+ *       Cancel
+ *     </Button>
+ *     <Button onClick={handleConfirm}>Confirm</Button>
+ *   </Drawer.Footer>
+ * </Drawer>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-drawer--docs Storybook}
+ */
+declare const Drawer: FC<Props> & {
+    Header: FC<HeaderProps>;
+    Body: FC<BodyProps>;
+    Footer: FC<FooterProps>;
+};
+export { Drawer };

package/dist/lib/components/Drawer/Drawer.types.d.ts

@@ -0,0 +1,67 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { drawerVariants } from './Drawer.variants';
+import { Theme } from '../../../domain/theme';
+/**
+ * Custom class names for each Drawer element.
+ */
+export type ClassNames = {
+    /** Class for the drawer body section */
+    body?: string;
+    /** Class for the close button */
+    closeButton?: string;
+    /** Class for the content wrapper (contains header, body, footer) */
+    content?: string;
+    /** Class for the drawer footer section */
+    footer?: string;
+    /** Class for the drawer header section */
+    header?: string;
+    /** Class for the background overlay */
+    overlay?: string;
+    /** Class for the drawer panel */
+    panel?: string;
+    /** Class for the resize handle */
+    resizeHandle?: string;
+    /** Class for the root wrapper */
+    root?: string;
+};
+/**
+ * Props for the Drawer component.
+ *
+ * @example
+ * ```tsx
+ * <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <Drawer.Header>Title</Drawer.Header>
+ *   <Drawer.Body>Content</Drawer.Body>
+ *   <Drawer.Footer>
+ *     <Button onClick={() => setIsOpen(false)}>Close</Button>
+ *   </Drawer.Footer>
+ * </Drawer>
+ * ```
+ */
+export type Props = PropsWithChildren & VariantProps<typeof drawerVariants> & {
+    /** Enable resizable drawer */
+    canResize?: boolean;
+    /** Default width of the drawer in pixels (default: 500) */
+    defaultWidth?: number;
+    /** Additional CSS classes for the drawer panel */
+    className?: string;
+    /** Custom class names for each element */
+    classNames?: ClassNames;
+    /** DOM element to portal the drawer into (defaults to document.body) */
+    container?: Element | DocumentFragment;
+    /** Whether the drawer is open */
+    isOpen?: boolean;
+    /** Maximum width when resizable (default: 800) */
+    maxWidth?: number;
+    /** Minimum width when resizable (default: 400) */
+    minWidth?: number;
+    /** Position of the drawer */
+    position?: 'left' | 'right';
+    /** Show the X close button in the corner */
+    showCloseButton?: boolean;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Callback when drawer is closed (Escape key, overlay click, or close button) */
+    onClose?: () => void;
+};

package/dist/lib/components/Drawer/Drawer.variants.d.ts

@@ -0,0 +1,8 @@
+export declare const drawerVariants: (props?: ({
+    position?: "left" | "right" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const overlayVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const buttonCloseVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const resizeHandleVariants: (props?: ({
+    position?: "left" | "right" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/lib/components/Drawer/components/Body/Body.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './Body.types';
+export declare const Body: FC<Props>;

package/dist/lib/components/Drawer/components/Body/Body.types.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export type Props = {
+    /** Content of the body section */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};

package/dist/lib/components/Drawer/components/Body/index.d.ts

@@ -0,0 +1,2 @@
+export { Body } from './Body';
+export type { Props as BodyProps } from './Body.types';

package/dist/lib/components/Drawer/components/Footer/Footer.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './Footer.types';
+export declare const Footer: FC<Props>;

package/dist/lib/components/Drawer/components/Footer/Footer.types.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export type Props = {
+    /** Content of the footer section */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};

package/dist/lib/components/Drawer/components/Footer/index.d.ts

@@ -0,0 +1,2 @@
+export { Footer } from './Footer';
+export type { Props as FooterProps } from './Footer.types';

package/dist/lib/components/Drawer/components/Header/Header.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './Header.types';
+export declare const Header: FC<Props>;

package/dist/lib/components/Drawer/components/Header/Header.types.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export type Props = {
+    /** Content of the header section */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** ID for accessibility (aria-labelledby) */
+    id?: string;
+};

package/dist/lib/components/Drawer/components/Header/index.d.ts

@@ -0,0 +1,2 @@
+export { Header } from './Header';
+export type { Props as HeaderProps } from './Header.types';

package/dist/lib/components/Drawer/components/index.d.ts

@@ -0,0 +1,3 @@
+export { Header, type HeaderProps } from './Header';
+export { Body, type BodyProps } from './Body';
+export { Footer, type FooterProps } from './Footer';

package/dist/lib/components/Drawer/constants/index.d.ts

@@ -0,0 +1,6 @@
+export declare const DEFAULT_WIDTH = 500;
+export declare const DEFAULT_MIN_WIDTH = 400;
+export declare const DEFAULT_MAX_WIDTH = 800;
+export declare const ANIMATION_DELAY_MS = 10;
+export declare const ANIMATION_DURATION_MS = 300;
+export declare const KEYBOARD_RESIZE_STEP = 20;

package/dist/lib/components/Drawer/contexts/Drawer.context.d.ts

@@ -0,0 +1,7 @@
+import { ClassNames } from '../Drawer.types';
+export type ContextValue = {
+    classNames?: ClassNames;
+    headerId?: string;
+};
+export declare const DrawerContext: import('react').Context<ContextValue>;
+export declare const useDrawerContext: () => ContextValue;

package/dist/lib/components/Drawer/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export { DrawerContext, useDrawerContext } from './Drawer.context';
+export type { ContextValue } from './Drawer.context';

package/dist/lib/components/Drawer/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useDrawer } from './useDrawer';
+export type { UseDrawerProps, UseDrawerReturn } from './useDrawer.types';

package/dist/lib/components/Drawer/hooks/useDrawer.d.ts

@@ -0,0 +1,2 @@
+import { UseDrawerProps, UseDrawerReturn } from './useDrawer.types';
+export declare const useDrawer: ({ canResize, defaultWidth, isOpen, maxWidth, minWidth, position, onClose, }: UseDrawerProps) => UseDrawerReturn;

package/dist/lib/components/Drawer/hooks/useDrawer.types.d.ts

@@ -0,0 +1,30 @@
+export type UseDrawerProps = {
+    /** Enable resizable drawer */
+    canResize?: boolean;
+    /** Default width */
+    defaultWidth?: number;
+    /** Whether the drawer is open */
+    isOpen?: boolean;
+    /** Maximum width when resizable */
+    maxWidth?: number;
+    /** Minimum width when resizable */
+    minWidth?: number;
+    /** Position of the drawer */
+    position?: 'left' | 'right';
+    /** Callback when drawer is closed */
+    onClose?: () => void;
+};
+export type UseDrawerReturn = {
+    /** Whether the drawer is animating (for CSS transitions) */
+    isAnimating: boolean;
+    /** Whether the drawer is visible in the DOM */
+    isVisible: boolean;
+    /** Current width of the drawer */
+    width: number;
+    /** The translate class based on animation state */
+    translateClass: string;
+    /** Handler for resize mouse down event */
+    handleMouseDown: () => void;
+    /** Handler for resize keyboard events */
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+};

package/dist/lib/components/DropdownButton/DropdownButton.d.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { Props } from './DropdownButton.types';
+/**
+ * A button with an attached dropdown menu for selecting actions.
+ * Closes automatically on outside click, Escape key, or tab visibility change.
+ *
+ * @example
+ * ```tsx
+ * <DropdownButton
+ *   options={[
+ *     { label: 'Download PDF', onClick: handlePdf },
+ *     { label: 'Download CSV', onClick: handleCsv },
+ *   ]}
+ *   buttonClassName="w-64"
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-dropdownbutton--docs Storybook}
+ */
+export declare const DropdownButton: FC<Props>;

package/dist/lib/components/DropdownButton/DropdownButton.types.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+/**
+ * Configuration for a dropdown menu option.
+ */
+export type Option = {
+    /** The text or element displayed for this option */
+    label: string | ReactNode;
+    /** Callback fired when this option is selected */
+    onClick?: VoidFunction;
+};
+/**
+ * Props for the DropdownButton component.
+ *
+ * @example
+ * ```tsx
+ * <DropdownButton
+ *   options={[
+ *     { label: 'PDF', onClick: () => downloadPdf() },
+ *     { label: 'CSV', onClick: () => downloadCsv() },
+ *     { label: 'Excel', onClick: () => downloadExcel() },
+ *   ]}
+ * />
+ * ```
+ */
+export type Props = {
+    /** Additional CSS classes for the trigger button */
+    buttonClassName?: string;
+    /** Additional CSS classes for the wrapper container */
+    className?: string;
+    /** Additional CSS classes for each dropdown item */
+    itemClassName?: string;
+    /** Additional CSS classes for the dropdown list */
+    listClassName?: string;
+    /** Array of options to display in the dropdown */
+    options: Option[];
+};

package/dist/lib/components/Filter/Filter.d.ts

@@ -0,0 +1,26 @@
+import { FilterComponentProps } from './Filter.types';
+import { BadgeMultiSelect, DateFilterDropdown, DateRangeFilterDropdown, TextMultiSelect, TimeFilterDropdown } from './components';
+/**
+ * A compound component for building filter interfaces.
+ * Includes sub-components for badge multi-select, date filtering, and reset actions.
+ *
+ * @example
+ * ```tsx
+ * <Filter theme="civo">
+ *   <Filter.BadgeMultiSelect
+ *     label="Status"
+ *     options={[
+ *       { id: 'active', label: 'Active', variant: 'success' },
+ *       { id: 'pending', label: 'Pending', variant: 'warning' },
+ *     ]}
+ *     selectedValues={selected}
+ *     onChange={setSelected}
+ *   />
+ *   <Filter.ResetButton onClick={() => setSelected([])} />
+ * </Filter>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-filter--docs Storybook}
+ */
+declare const Filter: FilterComponentProps;
+export { Filter, BadgeMultiSelect, TextMultiSelect, DateFilterDropdown, DateRangeFilterDropdown, TimeFilterDropdown, };

package/dist/lib/components/Filter/Filter.types.d.ts

@@ -0,0 +1,65 @@
+import { VariantProps } from 'class-variance-authority';
+import { FC, PropsWithChildren } from 'react';
+import { Theme } from '../../../domain/theme';
+import { Props as BadgeProps } from '../Badge/Badge.types';
+import { filterVariants } from './Filter.variants';
+import { BadgeMultiSelectProps, DateFilterDropdownProps, DateRangeFilterDropdownProps, ResetButtonProps, TextMultiSelectProps, TimeFilterDropdownProps } from './components';
+/**
+ * Configuration for a filter option.
+ */
+export type Option = {
+    /** Unique identifier for the option */
+    id: string;
+    /** Display label for the option */
+    label: string;
+    /** Visual variant for the badge */
+    variant?: BadgeProps['variant'];
+    /** Icon displayed on the left of the badge */
+    leftIcon?: BadgeProps['leftIcon'];
+    /** Icon displayed on the right of the badge */
+    rightIcon?: BadgeProps['rightIcon'];
+    /** Show loading spinner in the badge */
+    loading?: BadgeProps['loading'];
+};
+/**
+ * Props for the Filter component.
+ * A compound component for building filter interfaces.
+ *
+ * @example
+ * ```tsx
+ * <Filter theme="civo">
+ *   <Filter.BadgeMultiSelect
+ *     label="Status"
+ *     options={statusOptions}
+ *     selectedValues={selectedStatuses}
+ *     onChange={setSelectedStatuses}
+ *   />
+ *   <Filter.DateFilterDropdown
+ *     label="Date"
+ *     onDateChange={setDateRange}
+ *   />
+ *   <Filter.ResetButton onClick={resetFilters} />
+ * </Filter>
+ * ```
+ */
+export type Props = VariantProps<typeof filterVariants> & PropsWithChildren & {
+    /** Additional CSS classes for the filter wrapper */
+    className?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Whether to close the filter dropdown automatically when Apply is clicked. Defaults to true. */
+    closeOnApply?: boolean;
+};
+/** @deprecated Use Props instead */
+export type FilterProps = Props;
+/**
+ * Filter compound component type with sub-components.
+ */
+export type FilterComponentProps = FC<Props> & {
+    BadgeMultiSelect: FC<BadgeMultiSelectProps>;
+    TextMultiSelect: FC<TextMultiSelectProps>;
+    DateFilterDropdown: FC<DateFilterDropdownProps>;
+    DateRangeFilterDropdown: FC<DateRangeFilterDropdownProps>;
+    TimeFilterDropdown: FC<TimeFilterDropdownProps>;
+    ResetButton: FC<ResetButtonProps>;
+};

package/dist/lib/components/Filter/Filter.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const filterVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const filterButtonVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const filterButtonIconVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/lib/components/Filter/components/BadgeDropdown/BadgeMultiSelect.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { BadgeMultiSelectProps } from './BadgeMultiSelect.types';
+export declare const BadgeMultiSelect: FC<BadgeMultiSelectProps>;

package/dist/lib/components/Filter/components/BadgeDropdown/BadgeMultiSelect.hook.d.ts

@@ -0,0 +1,14 @@
+import { Option } from '../../../../../components/Filter/Filter.types';
+import { BadgeMultiSelectProps, SelectedOptions } from './BadgeMultiSelect.types';
+export declare const useBadgeMultiSelect: ({ onApply, options, }: Pick<BadgeMultiSelectProps, "onApply" | "options">) => {
+    isOpen: boolean;
+    isAllSelected: boolean;
+    selectedCount: SelectedOptions[];
+    selectedOptions: SelectedOptions[];
+    wrapperRef: import('react').RefObject<HTMLDivElement | null>;
+    handleApplyOptions: () => void;
+    handleOpen: () => void;
+    handleResetOptions: () => void;
+    handleSelectAll: (allOptions: Option[], checked: boolean) => void;
+    handleSelectOption: (option: Option, checked: boolean) => void;
+};

package/dist/lib/components/Filter/components/BadgeDropdown/BadgeMultiSelect.types.d.ts

@@ -0,0 +1,13 @@
+import { Option } from '../../Filter.types';
+export type SelectedOptions = Option & {
+    isApplied?: boolean;
+    isRemoved?: boolean;
+};
+export type BadgeMultiSelectProps = {
+    label: string;
+    options: Option[];
+    position?: 'left' | 'right';
+    onApply?: (selectedOptions: Option[]) => void;
+    showSelectAll?: boolean;
+    selectAllLabel?: string;
+};

package/dist/lib/components/Filter/components/DateFilterDropdown/DateFilterDropdown.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { DateFilterDropdownProps } from './DateFilterDropdown.types';
+export declare const DateFilterDropdown: FC<DateFilterDropdownProps>;

package/dist/lib/components/Filter/components/DateFilterDropdown/DateFilterDropdown.hook.d.ts

@@ -0,0 +1,12 @@
+import { DateFilterDropdownProps } from './DateFilterDropdown.types';
+export declare const useDateFilterDropdown: ({ onApply, countryCode, }: Pick<DateFilterDropdownProps, "onApply" | "countryCode">) => {
+    id: string;
+    appliedDay: string | undefined;
+    isOpen: boolean;
+    selectedDay: Date | undefined;
+    wrapperRef: import('react').RefObject<HTMLDivElement | null>;
+    handleApply: () => void;
+    handleOpen: () => void;
+    handleSelect: (date: Date) => void;
+    handleReset: () => void;
+};

package/dist/lib/components/Filter/components/DateFilterDropdown/DateFilterDropdown.types.d.ts

@@ -0,0 +1,7 @@
+export type DateFilterDropdownProps = {
+    label: string;
+    position?: 'left' | 'right';
+    onApply?: (date?: Date) => void;
+    /** Country code for locale formatting (default: 'US') */
+    countryCode?: string;
+};

package/dist/lib/components/Filter/components/DateRangeFilterDropdown/DateRangeFilterDropdown.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { DateRangeFilterDropdownProps } from './DateRangeFilterDropdown.types';
+export declare const DateRangeFilterDropdown: FC<DateRangeFilterDropdownProps>;

package/dist/lib/components/Filter/components/DateRangeFilterDropdown/DateRangeFilterDropdown.hook.d.ts

@@ -0,0 +1,13 @@
+import { DateRange, DateRangeWithTime } from '../../../../../components/DateRangePicker/DateRangePicker.types';
+import { DateRangeFilterDropdownProps } from './DateRangeFilterDropdown.types';
+export declare const useDateRangeFilterDropdown: ({ defaultRange, onApply, countryCode, }: Pick<DateRangeFilterDropdownProps, "defaultRange" | "onApply" | "countryCode">) => {
+    id: string;
+    appliedRange: string | undefined;
+    isOpen: boolean;
+    selectedRange: DateRange | undefined;
+    wrapperRef: import('react').RefObject<HTMLDivElement | null>;
+    handleApply: () => void;
+    handleOpen: () => void;
+    handleRangeChange: (range: DateRangeWithTime) => void;
+    handleReset: () => void;
+};