@mbao01/common 0.0.42 → 0.0.44

package/dist/types/components/DatetimePicker/DatetimeGrid.d.ts

@@ -0,0 +1,26 @@
+export declare const DatetimeGrid: import('react').ForwardRefExoticComponent<{
+    format: import('./types').DatetimeFormatDefaults;
+    disabled?: boolean;
+    className?: string;
+    timescape: Pick<{
+        readonly _manager: import('timescape').TimescapeManager;
+        readonly getInputProps: (type: import('timescape').DateType, opts?: {
+            ref?: import('react').MutableRefObject<HTMLInputElement | null>;
+            autofocus?: boolean;
+        }) => {
+            ref: (element: HTMLInputElement | null) => void;
+        };
+        readonly getRootProps: () => {
+            ref: (element: HTMLElement | null) => void | null;
+        };
+        readonly options: import('timescape/react').Options;
+        readonly update: import('react').Dispatch<import('react').SetStateAction<import('timescape/react').Options>>;
+    }, "getRootProps" | "getInputProps">;
+    placeholders: import('./types').InputPlaceholders;
+} & {
+    variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | undefined;
+    outline?: boolean | undefined;
+    wide?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/DatetimePicker/DatetimePicker.d.ts

@@ -0,0 +1,13 @@
+export declare const DatetimePicker: import('react').ForwardRefExoticComponent<Omit<import('timescape/react').Options, "onChangeDate"> & {
+    format?: import('./types').DatetimeFormatDefaults;
+    disabled?: boolean;
+    placeholders?: import('./types').InputPlaceholders;
+    onChange?: import('timescape/react').Options["onChangeDate"];
+    className?: string;
+} & {
+    variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | undefined;
+    outline?: boolean | undefined;
+    wide?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/DatetimePicker/constants.d.ts

@@ -0,0 +1,15 @@
+import { DateFormat, DatetimeFormatDefaults, InputPlaceholders, TimeFormat } from './types';
+export declare const DEFAULTS: DatetimeFormatDefaults;
+export declare const INPUT_PLACEHOLDERS: InputPlaceholders;
+export declare const getDatetimeGridClasses: (props?: ({
+    variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | null | undefined;
+    outline?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    wide?: boolean | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getDatetimeSeparatorClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getDatetimeInputClasses: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    unit?: DateFormat | TimeFormat | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/components/DatetimePicker/index.d.ts

@@ -0,0 +1 @@
+export { DatetimePicker } from './DatetimePicker';

package/dist/types/components/DatetimePicker/types.d.ts

@@ -0,0 +1,25 @@
+import { Options, useTimescape } from 'timescape/react';
+import { VariantProps } from '../../libs';
+import { getDatetimeGridClasses } from './constants';
+export type DateFormat = "days" | "months" | "years";
+export type TimeFormat = "hours" | "minutes" | "seconds" | "am/pm";
+type TimescapeReturn = ReturnType<typeof useTimescape>;
+type DatetimeArray<T extends DateFormat | TimeFormat> = T[];
+export type DatetimeFormatDefaults = [DatetimeArray<DateFormat>] | [DatetimeArray<TimeFormat>] | [DatetimeArray<DateFormat>, DatetimeArray<TimeFormat>] | [DatetimeArray<TimeFormat>, DatetimeArray<DateFormat>];
+export type InputPlaceholders = Record<DateFormat | TimeFormat, string>;
+type DatetimeGridVariantProps = VariantProps<typeof getDatetimeGridClasses>;
+export type DatetimeGridProps = {
+    format: DatetimeFormatDefaults;
+    disabled?: boolean;
+    className?: string;
+    timescape: Pick<TimescapeReturn, "getRootProps" | "getInputProps">;
+    placeholders: InputPlaceholders;
+} & DatetimeGridVariantProps;
+export type DatetimePickerProps = Omit<Options, "onChangeDate"> & {
+    format?: DatetimeFormatDefaults;
+    disabled?: boolean;
+    placeholders?: InputPlaceholders;
+    onChange?: Options["onChangeDate"];
+    className?: string;
+} & DatetimeGridVariantProps;
+export {};

package/dist/types/components/Form/DatetimeInput/DatetimeCalendar.d.ts

@@ -0,0 +1,5 @@
+import { DatetimeCalendarProps } from './types';
+export declare const DatetimeCalendar: {
+    ({ size, disabled, className, ...props }: DatetimeCalendarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/types/components/Form/DatetimeInput/DatetimeInput.d.ts

@@ -0,0 +1,83 @@
+export declare const DatetimeInput: import('react').ForwardRefExoticComponent<{
+    disabled?: boolean;
+} & {
+    locale?: Intl.LocalesArgument;
+} & Omit<import('../Input/types').InputProps, "type" | "defaultValue" | "onBlur" | "ref" | "disabled" | "value"> & {
+    variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | undefined;
+    outline?: boolean | undefined;
+    wide?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & {
+    date?: Date;
+    calendar?: {
+        className?: string | undefined;
+        autoFocus?: boolean | undefined;
+        dir?: HTMLDivElement["dir"] | undefined;
+        hidden?: import('react-day-picker').Matcher | import('react-day-picker').Matcher[] | undefined;
+        id?: string | undefined;
+        lang?: HTMLDivElement["lang"] | undefined;
+        nonce?: HTMLDivElement["nonce"];
+        style?: React.CSSProperties | undefined;
+        title?: HTMLDivElement["title"] | undefined;
+        footer?: React.ReactNode | string;
+        required?: boolean | undefined;
+        month?: Date | undefined;
+        classNames?: (Partial<import('react-day-picker').ClassNames> & Partial<import('react-day-picker').DeprecatedUI<string>>) | undefined;
+        showOutsideDays?: boolean | undefined;
+        modifiersClassNames?: import('react-day-picker').ModifiersClassNames | undefined;
+        styles?: (Partial<import('react-day-picker').Styles> & Partial<import('react-day-picker').DeprecatedUI<React.CSSProperties>>) | undefined;
+        modifiersStyles?: import('react-day-picker').ModifiersStyles | undefined;
+        defaultMonth?: Date | undefined;
+        numberOfMonths?: number | undefined;
+        startMonth?: Date | undefined;
+        fromDate?: Date | undefined;
+        fromMonth?: Date | undefined;
+        fromYear?: number | undefined;
+        endMonth?: Date | undefined;
+        toDate?: Date | undefined;
+        toMonth?: Date | undefined;
+        toYear?: number | undefined;
+        pagedNavigation?: boolean | undefined;
+        reverseMonths?: boolean | undefined;
+        hideNavigation?: boolean | undefined;
+        disableNavigation?: boolean | undefined;
+        captionLayout?: ("label" | "dropdown" | "dropdown-months" | "dropdown-years") | undefined;
+        fixedWeeks?: boolean | undefined;
+        hideWeekdays?: boolean | undefined;
+        showWeekNumber?: boolean | undefined;
+        ISOWeek?: boolean | undefined;
+        timeZone?: string | undefined;
+        components?: Partial<import('react-day-picker').CustomComponents> | undefined;
+        today?: Date | undefined;
+        modifiers?: Record<string, import('react-day-picker').Matcher | import('react-day-picker').Matcher[] | undefined> | undefined;
+        labels?: Partial<import('react-day-picker').Labels> | undefined;
+        formatters?: Partial<import('react-day-picker').Formatters> | undefined;
+        locale?: Partial<import('react-day-picker').Locale> | undefined;
+        weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+        firstWeekContainsDate?: (1 | 4) | undefined;
+        useAdditionalWeekYearTokens?: boolean | undefined;
+        useAdditionalDayOfYearTokens?: boolean | undefined;
+        onMonthChange?: import('react-day-picker').MonthChangeEventHandler | undefined;
+        onNextClick?: import('react-day-picker').MonthChangeEventHandler | undefined;
+        onPrevClick?: import('react-day-picker').MonthChangeEventHandler | undefined;
+        onWeekNumberClick?: any;
+        onDayClick?: import('react-day-picker').DayEventHandler<React.MouseEvent> | undefined;
+        onDayFocus?: import('react-day-picker').DayEventHandler<React.FocusEvent> | undefined;
+        onDayBlur?: import('react-day-picker').DayEventHandler<React.FocusEvent> | undefined;
+        onDayKeyDown?: import('react-day-picker').DayEventHandler<React.KeyboardEvent> | undefined;
+        onDayMouseEnter?: import('react-day-picker').DayEventHandler<React.MouseEvent> | undefined;
+        onDayMouseLeave?: import('react-day-picker').DayEventHandler<React.MouseEvent> | undefined;
+        dateLib?: Partial<import('react-day-picker').DateLib> | undefined;
+        onDayKeyUp?: import('react-day-picker').DayEventHandler<React.KeyboardEvent> | undefined;
+        onDayKeyPress?: import('react-day-picker').DayEventHandler<React.KeyboardEvent> | undefined;
+        onDayPointerEnter?: import('react-day-picker').DayEventHandler<React.PointerEvent> | undefined;
+        onDayPointerLeave?: import('react-day-picker').DayEventHandler<React.PointerEvent> | undefined;
+        onDayTouchCancel?: import('react-day-picker').DayEventHandler<React.TouchEvent> | undefined;
+        onDayTouchEnd?: import('react-day-picker').DayEventHandler<React.TouchEvent> | undefined;
+        onDayTouchMove?: import('react-day-picker').DayEventHandler<React.TouchEvent> | undefined;
+        onDayTouchStart?: import('react-day-picker').DayEventHandler<React.TouchEvent> | undefined;
+    };
+    defaultDate?: Date;
+    onDateChange?: (date: Date | undefined) => void;
+} & import('react').RefAttributes<HTMLInputElement>>;

package/dist/types/components/Form/DatetimeInput/DatetimeInputContext.d.ts

@@ -0,0 +1,2 @@
+import { DatetimeInputContextProps } from './types';
+export declare const DatetimeInputContext: import('react').Context<DatetimeInputContextProps | null>;

package/dist/types/components/Form/DatetimeInput/NaturalLanguageInput.d.ts

@@ -0,0 +1,5 @@
+export declare const NaturalLanguageInput: import('react').ForwardRefExoticComponent<{
+    disabled?: boolean;
+} & {
+    locale?: Intl.LocalesArgument;
+} & Omit<import('../Input/types').InputProps, "type" | "defaultValue" | "onBlur" | "ref" | "disabled" | "value"> & import('react').RefAttributes<HTMLInputElement>>;

package/dist/types/components/Form/DatetimeInput/TimePicker.d.ts

@@ -0,0 +1 @@
+export declare const TimePicker: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/DatetimeInput/constants.d.ts

@@ -0,0 +1,24 @@
+export declare const DEFAULT_SIZE = 96;
+export declare const getDatetimeInputContainerClasses: (props?: ({
+    variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | null | undefined;
+    outline?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    wide?: boolean | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getDatetimeCalendarTriggerClasses: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getDatetimeCalendarIconClasses: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getTimePickerClasses: (props?: ({
+    selected?: boolean | null | undefined;
+    suggested?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getTimePickerListClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getTimePickerScrollAreaClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getNaturalLanguageInputClasses: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getDatetimeCalendarClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/types/components/Form/DatetimeInput/helpers.d.ts

@@ -0,0 +1,27 @@
+import { TimeString } from './types';
+/**
+ * Utility function that parses dates.
+ * Parses a given date string using the `chrono-node` library.
+ *
+ * @param str - A string representation of a date and time.
+ * @returns A `Date` object representing the parsed date and time, or `null` if the string could not be parsed.
+ */
+export declare const parseDateTime: (str: Date | string) => Date | undefined;
+/**
+ * Converts a given timestamp or the current date and time to a string representation in the local time zone.
+ * format: `HH:mm`, adjusted for the local time zone.
+ *
+ * @param timestamp {Date | string}
+ * @returns A string representation of the timestamp
+ */
+export declare const getDateTimeLocal: (timestamp?: Date) => string;
+/**
+ * Formats a given date and time object or string into a human-readable string representation.
+ * "MMM D, YYYY h:mm A" (e.g. "Jan 1, 2023 12:00 PM").
+ *
+ * @param date - {Date | string}
+ * @returns A string representation of the date and time
+ */
+export declare const formatDateTime: (date: Date | string, locale?: Intl.LocalesArgument) => string;
+export declare const getParsedTime: (date: Date) => TimeString;
+export declare const setDateTime: (date: Date, time: TimeString) => Date;

package/dist/types/components/Form/DatetimeInput/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useDateInput } from './useDateInput';

package/dist/types/components/Form/DatetimeInput/hooks/useDateInput/index.d.ts

@@ -0,0 +1 @@
+export { useDateInput } from './useDateInput';

package/dist/types/components/Form/DatetimeInput/hooks/useDateInput/useDateInput.d.ts

@@ -0,0 +1 @@
+export declare const useDateInput: () => import('../../types').DatetimeInputContextProps;

package/dist/types/components/Form/DatetimeInput/index.d.ts

@@ -0,0 +1 @@
+export { DatetimeInput } from './DatetimeInput';

package/dist/types/components/Form/DatetimeInput/types.d.ts

@@ -0,0 +1,31 @@
+import { VariantProps } from '../../../libs';
+import { CalendarProps } from '../../Calendar/types';
+import { InputProps } from '../Input/types';
+import { getDatetimeInputContainerClasses } from './constants';
+type DisabledType = {
+    disabled?: boolean;
+};
+type VariantType = VariantProps<typeof getDatetimeInputContainerClasses>;
+type NaturalLanguageInputType = DisabledType & {
+    locale?: Intl.LocalesArgument;
+} & Omit<InputProps, "type" | "ref" | "value" | "defaultValue" | "onBlur" | "disabled">;
+type CalendarType = Omit<CalendarProps, "mode" | "disabled">;
+export type DatetimeInputProps = NaturalLanguageInputType & VariantType & {
+    date?: Date;
+    calendar?: CalendarType;
+    defaultDate?: Date;
+    onDateChange?: (date: Date | undefined) => void;
+};
+export type DatetimeInputContextProps = {
+    value?: Date;
+    onDateChange: (date: Date | undefined) => void;
+    time: TimeString;
+    onTimeChange: (time: TimeString) => void;
+};
+export type DatetimeCalendarProps = VariantType & CalendarType & DisabledType;
+export type NaturalLanguageInputProps = NaturalLanguageInputType;
+type Hours = `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`;
+type Minutes = `${0 | 1 | 2 | 3 | 4 | 5}${0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`;
+type PM_AM = "AM" | "PM";
+export type TimeString = `${Hours}:${Minutes} ${PM_AM}` | "";
+export {};

package/dist/types/components/Form/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,46 @@
+import { Item, MultiSelectContentProps, MultiSelectInputProps, MultiSelectProps, MultiSelectTriggerProps } from './types';
+declare const MultiSelect: {
+    ({ values, onValuesChange, loop, className, children, dir, ...props }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+    Trigger: {
+        ({ className, children, size, wide, outline, variant, disabled, ...props }: MultiSelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Input: {
+        ({ className, ...props }: MultiSelectInputProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: import('react').ForwardRefExoticComponent<MultiSelectContentProps & import('react').RefAttributes<HTMLDivElement>>;
+    List: import('react').ForwardRefExoticComponent<Omit<Omit<{
+        children?: React.ReactNode;
+    } & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "asChild" | "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+        label?: string;
+    } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+        size?: "xs" | "sm" | "md" | "lg" | undefined;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Item: import('react').ForwardRefExoticComponent<Item & Omit<Omit<{
+        children?: React.ReactNode;
+    } & Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "asChild" | "key" | keyof import('react').HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
+        disabled?: boolean;
+        onSelect?: (value: string) => void;
+        value?: string;
+        keywords?: string[];
+        forceMount?: boolean;
+    } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+        size?: "xs" | "sm" | "md" | "lg" | undefined;
+        disabled?: boolean | undefined;
+        included?: boolean | undefined;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+};
+export declare const MultiSelectTrigger: {
+    ({ className, children, size, wide, outline, variant, disabled, ...props }: MultiSelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { MultiSelect };

package/dist/types/components/Form/MultiSelect/MultiSelectContext.d.ts

@@ -0,0 +1,2 @@
+import { MultiSelectContextProps } from './types';
+export declare const MultiSelectContext: import('react').Context<MultiSelectContextProps | null>;

package/dist/types/components/Form/MultiSelect/constants.d.ts

@@ -0,0 +1,19 @@
+export declare const getMultiSelectClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getMultiSelectTriggerClasses: (props?: ({
+    variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | null | undefined;
+    outline?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    wide?: boolean | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getMultiSelectItemClasses: (props?: ({
+    included?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getMultiSelectListClasses: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getMultiSelectTagClasses: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/components/Form/MultiSelect/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useMultiSelect } from './useMultiSelect';

package/dist/types/components/Form/MultiSelect/hooks/useMultiSelect/index.d.ts

@@ -0,0 +1 @@
+export { useMultiSelect } from './useMultiSelect';

package/dist/types/components/Form/MultiSelect/hooks/useMultiSelect/useMultiSelect.d.ts

@@ -0,0 +1 @@
+export declare const useMultiSelect: () => import('../../types').MultiSelectContextProps;

package/dist/types/components/Form/MultiSelect/index.d.ts

@@ -0,0 +1 @@
+export { MultiSelect } from './MultiSelect';

package/dist/types/components/Form/MultiSelect/types.d.ts

@@ -0,0 +1,31 @@
+import { ComponentPropsWithoutRef, HTMLAttributes } from 'react';
+import { VariantProps } from '../../../libs';
+import { Command } from '../../Command';
+import { getMultiSelectItemClasses, getMultiSelectListClasses, getMultiSelectTriggerClasses } from './constants';
+export type Item = {
+    value: string;
+    label?: string;
+};
+export type MultiSelectProps = React.ComponentPropsWithoutRef<typeof Command> & {
+    loop?: boolean;
+    values: Item["value"][];
+    onValuesChange: (value: string[]) => void;
+};
+export type MultiSelectContextProps = {
+    values: Item["value"][];
+    onValueChange: (value: Item["value"], label?: Item["label"]) => void;
+    items: Item[];
+    open: boolean;
+    setOpen: (value: boolean) => void;
+    inputValue: string;
+    setInputValue: React.Dispatch<React.SetStateAction<string>>;
+    activeIndex: number;
+    setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
+    ref: React.RefObject<HTMLInputElement>;
+    handleSelect: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+};
+export type MultiSelectTriggerProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof getMultiSelectTriggerClasses>;
+export type MultiSelectInputProps = ComponentPropsWithoutRef<typeof Command.Input>;
+export type MultiSelectContentProps = HTMLAttributes<HTMLDivElement>;
+export type MultiSelectListProps = ComponentPropsWithoutRef<typeof Command.List> & VariantProps<typeof getMultiSelectListClasses>;
+export type MultiSelectItemProps = Item & ComponentPropsWithoutRef<typeof Command.Item> & VariantProps<typeof getMultiSelectItemClasses>;

package/dist/types/components/Form/TagsInput/TagsInput.d.ts

@@ -0,0 +1,13 @@
+export declare const TagsInput: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+    defaultTags?: string[];
+    onChange?: (value: string[], inputValue: string) => void;
+    placeholder?: string;
+    maxItems?: number;
+    minItems?: number;
+} & {
+    variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | undefined;
+    outline?: boolean | undefined;
+    wide?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/Form/TagsInput/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const SPLITTER_REGEX: RegExp;
+export declare const FORMATTING_REGEX: RegExp;
+export declare const getTagsClasses: (props?: ({
+    variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | null | undefined;
+    outline?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    wide?: boolean | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getTagClasses: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getTagsInputClasses: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getTagDeleteClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/types/components/Form/TagsInput/index.d.ts

@@ -0,0 +1 @@
+export { TagsInput } from './TagsInput';

package/dist/types/components/Form/TagsInput/types.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from '../../../libs';
+import { getTagsClasses } from './constants';
+export type TagsInputProps = React.HTMLAttributes<HTMLDivElement> & {
+    defaultTags?: string[];
+    onChange?: (value: string[], inputValue: string) => void;
+    placeholder?: string;
+    maxItems?: number;
+    minItems?: number;
+} & VariantProps<typeof getTagsClasses>;

package/dist/types/components/Form/index.d.ts

@@ -1,3 +1,4 @@
+export { DatetimeInput } from './DatetimeInput';
 export { Input } from './Input';
 export { OtpInput } from './OtpInput';
 export { Phone } from './Phone';
@@ -7,6 +8,7 @@ export { Select } from './Select';
 export { Slider } from './Slider';
 export { Switch } from './Switch';
 export { Checkbox } from './Checkbox';
+export { TagsInput } from './TagsInput';
 export { Textarea } from './Textarea';
 export { TextField } from './TextField';
 export { Label } from './components/Label';

package/dist/types/index.d.ts

@@ -24,6 +24,7 @@ export * from './components/Table';
 export * from './components/Tabs';
 export * from './components/Text';
 /** data input */
+export * from './components/DatetimePicker';
 export * from './components/FileUploader';
 export * from './components/Form';
 export * from './components/Combobox';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.42",
+  "version": "0.0.44",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -62,6 +62,7 @@
     "test:coverage": "vitest run --coverage",
     "test:ui": "vitest --ui",
     "test:visual": "test-storybook --url http://127.0.0.1:6006",
+    "test:visual:coverage": "test-storybook --coverage",
     "test:visual:ci": "test-storybook --ci --verbose --url http://127.0.0.1:6006",
     "test:visual:watch": "test-storybook --watch",
     "test:watch": "vitest"
@@ -92,6 +93,7 @@
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@tailwindcss/typography": "^0.5.15",
+    "chrono-node": "^2.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
@@ -109,6 +111,7 @@
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@storybook/addon-a11y": "^8.3.4",
+    "@storybook/addon-coverage": "^1.0.4",
     "@storybook/addon-essentials": "^8.3.4",
     "@storybook/addon-interactions": "^8.3.4",
     "@storybook/addon-links": "^8.3.4",
@@ -133,6 +136,7 @@
     "@vitest/coverage-v8": "^2.1.1",
     "@vitest/ui": "^2.1.1",
     "autoprefixer": "^10.4.20",
+    "axe-playwright": "^2.0.3",
     "date-fns": "^4.1.0",
     "eslint": "^8.57.1",
     "eslint-plugin-react": "^7.37.0",
@@ -150,6 +154,7 @@
     "react-router-dom": "^6.26.2",
     "storybook": "^8.3.4",
     "tailwindcss": "^3.4.13",
+    "timescape": "^0.5.2",
     "typescript": "^5.6.2",
     "vite": "^5.4.8",
     "vite-plugin-dts": "^4.2.2",
@@ -160,5 +165,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "eeaf76c4b41380b44e7eaed95b0391727e78010f"
+  "gitHead": "8e4871acb249c39327ba4a5b8bdb92770d649b4e"
 }

package/src/components/Calendar/Calendar.tsx

@@ -52,7 +52,8 @@ export const Calendar = ({
         weekdays: "flex",
         weekday: "rounded-md w-9 font-normal text-[0.8rem]",
         week: "flex w-full mt-2",
-        week_number: "flex items-center text-sm italic",
+        week_number: "flex items-center text-sm italic w-6",
+        week_number_header: "w-6",
         ...classNames,
       }}
       components={{

package/src/components/DatetimePicker/DatetimeGrid.tsx

@@ -0,0 +1,59 @@
+import { forwardRef, Fragment } from "react";
+import type { DatetimeGridProps } from "./types";
+import { cn } from "../../utilities";
+import { Input } from "../Form";
+import {
+  getDatetimeGridClasses,
+  getDatetimeInputClasses,
+  getDatetimeSeparatorClasses,
+} from "./constants";
+
+export const DatetimeGrid = forwardRef<HTMLDivElement, DatetimeGridProps>(
+  ({ format, disabled, className, timescape, placeholders, variant, outline, wide, size }, ref) => {
+    return (
+      <div
+        className={cn(
+          getDatetimeGridClasses({ size, wide, outline, variant, disabled }),
+          className
+        )}
+        {...timescape.getRootProps()}
+        ref={ref}
+      >
+        {format?.length
+          ? format.map((group, i) => (
+              <Fragment key={`group-${i}`}>
+                {group?.length
+                  ? group.map((unit, j) => (
+                      <Fragment key={unit}>
+                        <Input
+                          size={size}
+                          disabled={disabled}
+                          className={cn(getDatetimeInputClasses({ size, unit }))}
+                          {...timescape.getInputProps(unit)}
+                          placeholder={placeholders[unit]}
+                        />
+                        {i === 0 && j < group.length - 1 ? (
+                          // date separator
+                          <span className={cn(getDatetimeSeparatorClasses())}>/</span>
+                        ) : (
+                          j < group.length - 2 && (
+                            // time separator
+                            <span className={cn(getDatetimeSeparatorClasses())}>:</span>
+                          )
+                        )}
+                      </Fragment>
+                    ))
+                  : null}
+                {format[1]?.length && !i ? (
+                  // date-time separator - only if both date and time are present
+                  <span className={cn(getDatetimeSeparatorClasses(), "opacity-30 text-xl")}>|</span>
+                ) : null}
+              </Fragment>
+            ))
+          : null}
+      </div>
+    );
+  }
+);
+
+DatetimeGrid.displayName = "DatetimeGrid";