@gamecrafters/base-ui 0.0.38 → 0.0.39

package/build/components/date-input/DateInput.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import type { DateInputProps } from "./DateInput.types";
+declare const _default: (props: DateInputProps & React.RefAttributes<any>) => React.ReactNode;
+export default _default;

package/build/components/date-input/DateInput.types.d.ts

@@ -0,0 +1,137 @@
+import type * as React from "react";
+import type { CalendarDateInput, CalendarDateMatcher, CalendarMode, CalendarRange, CalendarRangeInput } from "../calendar/Calendar.types";
+import type { TextInputSize } from "../text-input/TextInput.types";
+export type DateInputGranularity = "day" | "hour" | "minute" | "second";
+export type DateInputHourCycle = 12 | 24;
+export type DateInputEditableSegmentType = "year" | "month" | "day" | "hour" | "minute" | "second" | "dayPeriod";
+export type DateInputSegmentType = DateInputEditableSegmentType | "literal";
+export type DateInputSegmentDetails = {
+    type: DateInputSegmentType;
+    text: string;
+    value?: number;
+    minValue?: number;
+    maxValue?: number;
+    placeholder: string;
+    placeholderShown: boolean;
+    entered: boolean;
+    filled: boolean;
+    editable: boolean;
+};
+export type DateInputIds = {
+    root?: string;
+    label?: string;
+    control?: string;
+    segmentGroup?: (index: number) => string;
+    hiddenInput?: (index: number) => string;
+};
+export type DateInputSegmentLabels = Partial<Record<DateInputEditableSegmentType, string>>;
+export type DateInputPropsForOneDay = {
+    mode?: "single";
+    value?: CalendarDateInput | null;
+    defaultValue?: CalendarDateInput | null;
+    onChange?: (date: Date | null) => void;
+};
+export type DateInputPropsForARange = {
+    mode: "range";
+    value?: CalendarRangeInput | null;
+    defaultValue?: CalendarRangeInput | null;
+    onChange?: (range: CalendarRange) => void;
+};
+export type DateInputSelectionConfig = DateInputPropsForOneDay | DateInputPropsForARange;
+type DateInputStoreProps = {
+    locale?: string;
+    granularity?: DateInputGranularity;
+    hourCycle?: DateInputHourCycle;
+    leadingZeros?: boolean;
+    placeholderValue?: CalendarDateInput;
+    min?: CalendarDateInput;
+    max?: CalendarDateInput;
+    isDateUnavailable?: CalendarDateMatcher;
+    format?: string;
+    segmentLabels?: DateInputSegmentLabels;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    name?: string;
+    form?: string;
+    id?: string;
+    ids?: DateInputIds;
+    onFocusChange?: (focused: boolean) => void;
+};
+export type UseDateInputProps = DateInputStoreProps & DateInputSelectionConfig;
+export type UseDateInputElementProps = DateInputStoreProps & {
+    mode?: CalendarMode;
+    value?: CalendarDateInput | CalendarRangeInput | null;
+    defaultValue?: CalendarDateInput | CalendarRangeInput | null;
+    onChange?: ((date: Date | null) => void) | ((range: CalendarRange) => void);
+};
+export type UseDateInputReturn = {
+    mode: CalendarMode;
+    locale: string;
+    value: (Date | null)[];
+    valueAsString: string[];
+    placeholderValue: Date;
+    focused: boolean;
+    activeIndex: number;
+    disabled: boolean;
+    readOnly: boolean;
+    required: boolean;
+    invalid: boolean;
+    name?: string;
+    form?: string;
+    ids: Required<DateInputIds>;
+    describedBy?: string;
+    segmentLabels: Record<DateInputEditableSegmentType, string>;
+    focus: (index?: number) => void;
+    setValue: (value: (CalendarDateInput | null)[]) => void;
+    clearValue: () => void;
+    getSegments: (index?: number) => DateInputSegmentDetails[];
+    rootRef: React.RefObject<HTMLDivElement | null>;
+    handleSegmentFocus: (index: number, event: React.FocusEvent<HTMLElement>) => void;
+    handleSegmentPointerDown: () => void;
+    handleSegmentBlur: (event: React.FocusEvent<HTMLElement>) => void;
+    handleSegmentKeyDown: (index: number, event: React.KeyboardEvent<HTMLElement>) => void;
+    handleSegmentInput: (index: number, event: React.InputEvent<HTMLElement>) => void;
+    handleSegmentPaste: (index: number, event: React.ClipboardEvent<HTMLElement>) => void;
+};
+type DateInputFieldProps = {
+    size?: TextInputSize;
+    block?: boolean;
+    contrast?: boolean;
+    className?: string;
+};
+export type DateInputProps = Omit<React.ComponentPropsWithoutRef<"div">, keyof UseDateInputElementProps> & UseDateInputProps & DateInputFieldProps;
+export type DateInputElementProps = Omit<React.ComponentPropsWithoutRef<"div">, keyof UseDateInputElementProps> & UseDateInputElementProps & DateInputFieldProps;
+export type DateInputRootProviderProps = Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue"> & DateInputFieldProps & {
+    value: UseDateInputReturn;
+};
+export type DateInputLabelProps = React.ComponentPropsWithoutRef<"label"> & {
+    className?: string;
+};
+export type DateInputControlProps = React.ComponentPropsWithoutRef<"div"> & {
+    className?: string;
+};
+export type DateInputSegmentGroupChildren = React.ReactNode | ((segments: DateInputSegmentDetails[]) => React.ReactNode);
+export type DateInputSegmentGroupProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
+    index?: number;
+    children?: DateInputSegmentGroupChildren;
+    className?: string;
+};
+export type DateInputSegmentProps = Omit<React.ComponentPropsWithoutRef<"span">, "children"> & {
+    segment: DateInputSegmentDetails;
+    className?: string;
+};
+export type DateInputHiddenInputProps = Omit<React.ComponentPropsWithoutRef<"input">, "type" | "value" | "defaultValue"> & {
+    index?: number;
+    name?: string;
+    className?: string;
+};
+export type DateInputContextValue = Partial<UseDateInputReturn> & Omit<DateInputFieldProps, "className"> & {
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+};
+export type DateInputSegmentGroupContextValue = {
+    index: number;
+};
+export {};

package/build/components/date-input/DateInputContext.d.ts

@@ -0,0 +1,11 @@
+import type { DateInputContextValue, DateInputSegmentGroupContextValue } from "./DateInput.types";
+export declare const DateInputContext: import("react").Context<DateInputContextValue>;
+export declare const useDateInputContext: () => DateInputContextValue;
+export declare const DateInputSegmentGroupContext: import("react").Context<DateInputSegmentGroupContextValue>;
+export declare const useDateInputSegmentGroupContext: () => DateInputSegmentGroupContextValue;
+export declare const getStateAttributes: ({ disabled, readOnly, required, invalid, }: DateInputContextValue) => {
+    "data-disabled": true | undefined;
+    "data-readonly": true | undefined;
+    "data-required": true | undefined;
+    "data-invalid": true | undefined;
+};

package/build/components/date-input/DateInputControl.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+declare const _default: (props: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    className?: string;
+} & React.RefAttributes<any>) => React.ReactNode;
+export default _default;

package/build/components/date-input/DateInputHiddenInput.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+declare const _default: (props: Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "defaultValue" | "type"> & {
+    index?: number;
+    name?: string;
+    className?: string;
+} & React.RefAttributes<any>) => React.ReactNode;
+export default _default;

package/build/components/date-input/DateInputLabel.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+declare const _default: (props: Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+    className?: string;
+} & React.RefAttributes<any>) => React.ReactNode;
+export default _default;

package/build/components/date-input/DateInputRootProvider.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare const _default: (props: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange" | "defaultValue"> & {
+    size?: import("..").TextInputSize;
+    block?: boolean;
+    contrast?: boolean;
+    className?: string;
+} & {
+    value: import("./DateInput.types").UseDateInputReturn;
+} & React.RefAttributes<any>) => React.ReactNode;
+export default _default;

package/build/components/date-input/DateInputSegment.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+declare const _default: (props: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children"> & {
+    segment: import("./DateInput.types").DateInputSegmentDetails;
+    className?: string;
+} & React.RefAttributes<any>) => React.ReactNode;
+export default _default;

package/build/components/date-input/DateInputSegmentGroup.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+declare const _default: (props: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & {
+    index?: number;
+    children?: import("./DateInput.types").DateInputSegmentGroupChildren;
+    className?: string;
+} & React.RefAttributes<any>) => React.ReactNode;
+export default _default;

package/build/components/date-input/dateInputFields.d.ts

@@ -0,0 +1,49 @@
+import type { Dayjs } from "dayjs";
+import type { DateInputEditableSegmentType, DateInputSegmentDetails, DateInputSegmentType } from "./DateInput.types";
+export type DateInputHourCycleId = "h11" | "h12" | "h23" | "h24";
+export type DateInputFields = {
+    year: number | null;
+    month: number | null;
+    day: number | null;
+    hour: number | null;
+    minute: number | null;
+    second: number | null;
+    dayPeriod: number | null;
+};
+export type DateInputFieldLimits = {
+    minValue: number;
+    maxValue: number;
+};
+export declare const createFields: () => DateInputFields;
+export declare const toHourCycle: (hour: number, hourCycle: DateInputHourCycleId) => [dayPeriod: number | null, hour: number];
+export declare const fromHourCycle: (hour: number, dayPeriod: number, hourCycle: DateInputHourCycleId) => number;
+export declare const getFieldLimits: (type: DateInputEditableSegmentType, hourCycle: DateInputHourCycleId) => DateInputFieldLimits;
+export declare const fieldsFromDate: (date: Dayjs, hourCycle: DateInputHourCycleId) => DateInputFields;
+export declare const fieldsToDate: (fields: DateInputFields, base: Dayjs, hourCycle: DateInputHourCycleId) => Dayjs;
+export declare const withHourCycle: (fields: DateInputFields, from: DateInputHourCycleId, to: DateInputHourCycleId) => DateInputFields;
+export declare const isComplete: (fields: DateInputFields, types: DateInputEditableSegmentType[]) => boolean;
+export declare const isCleared: (fields: DateInputFields, types: DateInputEditableSegmentType[]) => boolean;
+export declare const setField: (fields: DateInputFields, type: DateInputEditableSegmentType, value: number, base: Dayjs, hourCycle: DateInputHourCycleId) => DateInputFields;
+export declare const clearField: (fields: DateInputFields, type: DateInputEditableSegmentType) => DateInputFields;
+export declare const cycleValue: (value: number, amount: number, min: number, max: number, round?: boolean) => number;
+export declare const cycleField: (fields: DateInputFields, type: DateInputEditableSegmentType, amount: number, base: Dayjs, hourCycle: DateInputHourCycleId) => DateInputFields;
+export declare const constrainDate: (date: Dayjs, min: Dayjs | null, max: Dayjs | null) => Dayjs;
+export type TypedInputOptions = {
+    fields: DateInputFields;
+    segment: DateInputSegmentDetails;
+    input: string;
+    enteredKeys: string;
+    base: Dayjs;
+    hourCycle: DateInputHourCycleId;
+    hour12: boolean;
+    dayPeriodNames: [am: string, pm: string];
+};
+export type TypedInputResult = {
+    fields: DateInputFields | null;
+    enteredKeys: string;
+    advance: boolean;
+};
+export declare const readTypedInput: ({ fields, segment, input, enteredKeys, base, hourCycle, hour12, dayPeriodNames, }: TypedInputOptions) => TypedInputResult | null;
+export declare const parsePastedDate: (text: string, formats: string[]) => Dayjs | null;
+export declare const isFocusableSegment: (segment: DateInputSegmentDetails) => boolean;
+export declare const isEditableType: (type: DateInputSegmentType) => type is DateInputEditableSegmentType;

package/build/components/date-input/dateInputSegments.d.ts

@@ -0,0 +1,26 @@
+import type { Dayjs } from "dayjs";
+import type { DateInputFields, DateInputHourCycleId } from "./dateInputFields";
+import type { DateInputEditableSegmentType, DateInputGranularity, DateInputHourCycle, DateInputSegmentDetails } from "./DateInput.types";
+export declare const DEFAULT_SEGMENT_LABELS: Record<DateInputEditableSegmentType, string>;
+export declare const PAGE_STEPS: Partial<Record<DateInputEditableSegmentType, number>>;
+export declare const DEFAULT_FORMATS: Record<DateInputGranularity, string>;
+export declare const getPastedFormats: (format: string) => string[];
+export declare const getPlaceholders: (locale: string) => Record<DateInputEditableSegmentType, string>;
+export type SegmentFormatterOptions = {
+    granularity: DateInputGranularity;
+    leadingZeros: boolean;
+    hourCycle?: DateInputHourCycle;
+};
+export declare const createSegmentFormatter: (locale: string, options: SegmentFormatterOptions) => Intl.DateTimeFormat;
+export declare const resolveHourCycle: (formatter: Intl.DateTimeFormat) => DateInputHourCycleId;
+export declare const getDayPeriodNames: (locale: string) => [am: string, pm: string];
+export declare const getSegmentTypes: (formatter: Intl.DateTimeFormat) => DateInputEditableSegmentType[];
+export type BuildSegmentsOptions = {
+    fields: DateInputFields;
+    date: Dayjs;
+    formatter: Intl.DateTimeFormat;
+    placeholders: Record<DateInputEditableSegmentType, string>;
+    granularity: DateInputGranularity;
+    hourCycle: DateInputHourCycleId;
+};
+export declare const buildSegments: ({ fields, date, formatter, placeholders, granularity, hourCycle, }: BuildSegmentsOptions) => DateInputSegmentDetails[];

package/build/components/date-input/index.d.ts

@@ -0,0 +1,41 @@
+import DateInputControl from "./DateInputControl";
+import DateInputHiddenInput from "./DateInputHiddenInput";
+import DateInputLabel from "./DateInputLabel";
+import DateInputRootProvider from "./DateInputRootProvider";
+import DateInputSegment from "./DateInputSegment";
+import DateInputSegmentGroup from "./DateInputSegmentGroup";
+export declare const DateInput: ((props: import("./DateInput.types").DateInputProps & import("react").RefAttributes<any>) => React.ReactNode) & {
+    Root: (props: import("./DateInput.types").DateInputProps & import("react").RefAttributes<any>) => React.ReactNode;
+    RootProvider: (props: Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange" | "defaultValue"> & {
+        size?: import("..").TextInputSize;
+        block?: boolean;
+        contrast?: boolean;
+        className?: string;
+    } & {
+        value: import("./DateInput.types").UseDateInputReturn;
+    } & import("react").RefAttributes<any>) => React.ReactNode;
+    Label: (props: Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+        className?: string;
+    } & import("react").RefAttributes<any>) => React.ReactNode;
+    Control: (props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        className?: string;
+    } & import("react").RefAttributes<any>) => React.ReactNode;
+    SegmentGroup: (props: Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & {
+        index?: number;
+        children?: import("./DateInput.types").DateInputSegmentGroupChildren;
+        className?: string;
+    } & import("react").RefAttributes<any>) => React.ReactNode;
+    Segment: (props: Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children"> & {
+        segment: import("./DateInput.types").DateInputSegmentDetails;
+        className?: string;
+    } & import("react").RefAttributes<any>) => React.ReactNode;
+    HiddenInput: (props: Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "defaultValue" | "type"> & {
+        index?: number;
+        name?: string;
+        className?: string;
+    } & import("react").RefAttributes<any>) => React.ReactNode;
+};
+export { DateInputRootProvider, DateInputLabel, DateInputControl, DateInputSegmentGroup, DateInputSegment, DateInputHiddenInput, };
+export { DateInputContext, DateInputSegmentGroupContext, useDateInputContext, useDateInputSegmentGroupContext, } from "./DateInputContext";
+export { useDateInput } from "./useDateInput";
+export * from "./DateInput.types";

package/build/components/date-input/useDateInput.d.ts

@@ -0,0 +1,2 @@
+import type { UseDateInputProps, UseDateInputReturn } from "./DateInput.types";
+export declare const useDateInput: (props?: UseDateInputProps) => UseDateInputReturn;

package/build/components/index.d.ts

@@ -36,6 +36,7 @@ export * from "./confirmation-dialog";
 export * from "./context-menu";
 export * from "./counter-label";
 export * from "./data-table";
+export * from "./date-input";
 export * from "./date-picker";
 export * from "./details";
 export * from "./dialog";