@coopdigital/react 0.49.1 → 0.51.0

package/dist/components/Button/Button.js

@@ -2,7 +2,7 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React, { useState, useCallback } from 'react';
+import React__default, { useState, useCallback } from 'react';
 import { LoadingIcon } from '../Icon/LoadingIcon.js';
 
 const Button = ({ as, children, className, href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, ref, size = "md", variant = "green", ...props }) => {
@@ -32,7 +32,7 @@ const Button = ({ as, children, className, href, isDisabled = false, isFullWidth
         ...props,
     };
     const finalChildren = isPending || isLoading ? (jsxs(Fragment, { children: [loadingText, jsx(LoadingIcon, {})] })) : (children);
-    return React.createElement(element, { ...componentProps, ref }, finalChildren);
+    return React__default.createElement(element, { ...componentProps, ref }, finalChildren);
 };
 
 export { Button, Button as default };

package/dist/components/Button/index.js

@@ -0,0 +1,5 @@
+import { Button } from './Button.js';
+
+
+
+export { Button, Button as default };

package/dist/components/Card/Card.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React from 'react';
+import React__default from 'react';
 import { useSlots } from '../../hooks/useSlots.js';
 import { ChevronRightIcon } from '../Icon/ChevronRightIcon.js';
 import { Image } from '../Image/Image.js';
@@ -34,12 +34,12 @@ const Card = ({ chevron = false, children, className, href, hrefAs, imagePositio
         ...props,
     };
     if (href && slots.CardHeading) {
-        slots.CardHeading = React.createElement(linkElement, linkProps, slots.CardHeading);
+        slots.CardHeading = React__default.createElement(linkElement, linkProps, slots.CardHeading);
     }
-    return (jsxs("article", { ...componentProps, ref: ref, children: [slots.CardImage, slots.CardBadge, React.createElement(hasLinkWrapper ? linkElement : "div", hasLinkWrapper ? { href, ...innerProps } : innerProps, jsxs("div", { className: "coop-card--content", children: [slots.CardLabel, slots.CardHeading, slots.CardBody, slots.Children] }), chevron && (jsx("span", { "aria-hidden": "true", className: "coop-card--icon", role: "presentation", children: jsx(ChevronRightIcon, {}) })))] }));
+    return (jsxs("article", { ...componentProps, ref: ref, children: [slots.CardImage, slots.CardBadge, React__default.createElement(hasLinkWrapper ? linkElement : "div", hasLinkWrapper ? { href, ...innerProps } : innerProps, jsxs("div", { className: "coop-card--content", children: [slots.CardLabel, slots.CardHeading, slots.CardBody, slots.Children] }), chevron && (jsx("span", { "aria-hidden": "true", className: "coop-card--icon", role: "presentation", children: jsx(ChevronRightIcon, {}) })))] }));
 };
 const CardHeading = ({ as = "h3", children, className }) => {
-    return React.createElement(as, { className: clsx("coop-card--heading", className) }, children);
+    return React__default.createElement(as, { className: clsx("coop-card--heading", className) }, children);
 };
 CardHeading.displayName = "Card.Heading";
 const CardLabel = ({ children, className }) => {

package/dist/components/Checkbox/Checkbox.d.ts

@@ -16,5 +16,11 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
     /** **(Optional)** Specify the Checkbox size. */
     size?: StandardSizes;
 }
-export declare const Checkbox: ({ className, disabled, error, id, name, ref, size, ...props }: CheckboxProps) => JSX.Element;
+export declare const Checkbox: {
+    ({ className, disabled, error, id, name, ref, size, ...props }: CheckboxProps): JSX.Element;
+    config: {
+        isField: true;
+        isInline: true;
+    };
+};
 export default Checkbox;

package/dist/components/Checkbox/Checkbox.js

@@ -16,5 +16,9 @@ const Checkbox = ({ className, disabled, error = false, id, name, ref, size = "m
     };
     return jsx("input", { ...componentProps, ref: ref });
 };
+Checkbox.config = {
+    isField: true,
+    isInline: true,
+};
 
 export { Checkbox, Checkbox as default };

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

@@ -0,0 +1,61 @@
+import type { InputHTMLAttributes, JSX, Ref } from "react";
+import type { DayPickerProps, Mode } from "react-day-picker";
+import type { ComponentConfig, StandardSizes } from "../../types";
+import type { DateRange } from "./datepicker-utils";
+type OnDateSelectHandler = (selected: string | string[] | {
+    from?: string;
+    to?: string;
+} | undefined) => void;
+export interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onSelect" | "onChange" | "onChangeCapture" | "size" | "type"> {
+    /** **(Optional)** Specify additional CSS classes to be applied to the wrapper. */
+    className?: string;
+    /** **(Optional)** Specify whether the picker should close when selecting a date. Has no effect in range mode. */
+    closeOnSelect?: boolean;
+    /** **(Optional)** Specify the date format. This affects the values displayed to users and the accepted format for manual inputs. */
+    dateFormat?: string;
+    /** **(Optional)** Specify whether the Date Picker should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+    disabled?: boolean;
+    /** **(Optional)** Specify dates to be disabled. Refer to react-daypicker docs for full configuration. */
+    disabledDates?: DayPickerProps["disabled"];
+    /** **(Optional)** Specify the upper bound for the picker.
+     *
+     * Default: today plus one year.
+     */
+    endDate?: Date;
+    /** **(Optional)** Specify the Date Picker error state. */
+    error?: boolean;
+    /** **(Optional)** Specify the Date Picker id. Will be auto-generated if not set. */
+    id?: string;
+    /** **(Optional)** Specify the initial month view for the picker.
+     *
+     * Default: today.
+     */
+    initialDate?: Date | DateRange;
+    initialSelected?: boolean;
+    /** **(Optional)** Specify the picker mode. */
+    mode?: Mode;
+    /** Specify the Datepicker name. */
+    name: string;
+    /** Provided only for compatibility with form libraries. Use `onSelect` instead. */
+    onChange?: OnDateSelectHandler;
+    /** **(Optional)** Callback to run when a date is selected and validated.
+     *
+     * Contains the selected value, which is either an ISO-8601 formatted date string, or an object with from and to values. */
+    onSelect?: OnDateSelectHandler;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLInputElement>;
+    /** **(Optional)** Specify whether this is a required field. */
+    required?: boolean;
+    /** **(Optional)** Specify the DatePicker size. */
+    size?: StandardSizes;
+    /** **(Optional)** Specify the lower bound for the picker.
+     *
+     * Default: today minus one year.
+     */
+    startDate?: Date;
+}
+export declare const DatePicker: {
+    ({ className, closeOnSelect, dateFormat, disabled, disabledDates, endDate, error, id, initialDate, initialSelected, mode, name, onChange, onSelect, ref, required, size, startDate, ...props }: DatePickerProps): JSX.Element;
+    config: ComponentConfig;
+};
+export default DatePicker;

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,135 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useMemo, useReducer, useCallback } from 'react';
+import { useId } from '../../hooks/useId.js';
+import { Button } from '../Button/Button.js';
+import { CloseIcon } from '../Icon/CloseIcon.js';
+import { TickIcon } from '../Icon/TickIcon.js';
+import { Popover } from '../Popover/Popover.js';
+import { TextInput } from '../TextInput/TextInput.js';
+import { getInitialDate, getStartDate, getEndDate, getDefaultMonth, getDateValues, shouldClose, shouldSkipParsing } from './datepicker-utils.js';
+import { DayPicker } from '../../node_modules/react-day-picker/dist/esm/DayPicker.js';
+
+const now = new Date();
+const componentConfig = {
+    fieldSuffix: "_display",
+    isField: true,
+};
+const baseValueProps = {
+    readOnly: true,
+    type: "hidden",
+};
+const footerMessage = {
+    multiple: "Pick one or more dates.",
+    range: "Pick a date range.",
+    single: "Pick a date.",
+};
+const initialState = {
+    message: undefined,
+    validated: false,
+};
+const defaultFormatters = {
+    formatWeekdayName: (d) => d.toLocaleDateString("default", { weekday: "short" }).slice(0, 2),
+};
+const Calendar = ({ captionLayout = "label", className, disabled, endMonth, formatters, showOutsideDays = true, startMonth, ...props }) => {
+    return (jsx(DayPicker, { captionLayout: captionLayout, className: className, disabled: disabled, endMonth: endMonth, formatters: {
+            ...defaultFormatters,
+            ...formatters,
+        }, navLayout: "around", showOutsideDays: showOutsideDays, startMonth: startMonth, weekStartsOn: 1, ...props }));
+};
+const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy", disabled, disabledDates, endDate, error = false, id, initialDate = now, initialSelected = false, mode = "single", name, onChange, onSelect, ref, required = false, size = "md", startDate, ...props }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    const uid = useId(id);
+    initialDate = getInitialDate(mode, initialDate);
+    startDate = useMemo(() => startDate !== null && startDate !== void 0 ? startDate : getStartDate(initialDate), [initialDate, startDate]);
+    endDate = useMemo(() => endDate !== null && endDate !== void 0 ? endDate : getEndDate(initialDate), [initialDate, endDate]);
+    const defaultMonth = useMemo(() => getDefaultMonth(initialDate), [initialDate]);
+    let initialValues = {
+        state: undefined,
+        view: defaultMonth,
+    };
+    if (initialSelected) {
+        initialValues = (_a = getDateValues(mode, initialDate, dateFormat, now)) !== null && _a !== void 0 ? _a : {};
+    }
+    const [state, setState] = useReducer((stale, fresh) => ({ ...stale, ...fresh }), { ...initialState, [mode]: initialValues.state, open: false, view: initialValues.view });
+    const updateValues = useCallback((selected) => {
+        var _a;
+        const values = getDateValues(mode, selected, dateFormat, now);
+        if (values) {
+            setState({
+                message: values.message,
+                [mode]: values.state,
+                validated: values.validated,
+                view: values.view,
+                ...(shouldClose(mode, (_a = values.state) === null || _a === void 0 ? void 0 : _a.value, closeOnSelect) && {
+                    open: false,
+                }),
+            });
+            if (values.validated && values.state) {
+                typeof onChange === "function" && onChange(values.state.field);
+                typeof onSelect === "function" && onSelect(values.state.field);
+            }
+        }
+    }, [dateFormat, mode, onChange, onSelect, closeOnSelect]);
+    const updateFromInput = useCallback((e) => {
+        var _a;
+        if (shouldSkipParsing(e.currentTarget.value)) {
+            setState({
+                message: undefined,
+                [mode]: { input: e.currentTarget.value },
+                validated: false,
+            });
+        }
+        else {
+            updateValues((_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.value);
+        }
+    }, [updateValues, mode]);
+    const setOpen = useCallback((open) => setState({ open }), []);
+    const setView = useCallback((view) => setState({ view }), []);
+    const resetState = useCallback(() => setState({ ...initialState, [mode]: undefined }), [mode]);
+    const componentProps = {
+        className: clsx("coop-datepicker", className),
+        "data-error": error || undefined,
+        "data-mode": mode,
+        ...props,
+    };
+    const calendarProps = {
+        multiple: { mode: "multiple", selected: (_b = state.multiple) === null || _b === void 0 ? void 0 : _b.value },
+        range: { mode: "range", selected: (_c = state.range) === null || _c === void 0 ? void 0 : _c.value },
+        single: { mode: "single", selected: (_d = state.single) === null || _d === void 0 ? void 0 : _d.value },
+    };
+    const valueProps = {
+        ...baseValueProps,
+        id: uid,
+        name: name,
+    };
+    const getPlaceholder = () => {
+        const lowerCaseDateFormat = dateFormat.toLowerCase();
+        switch (mode) {
+            case "range":
+                return lowerCaseDateFormat + " - " + lowerCaseDateFormat;
+            case "multiple":
+                return lowerCaseDateFormat + ", " + lowerCaseDateFormat;
+            default:
+                return lowerCaseDateFormat;
+        }
+    };
+    return (jsxs("div", { ...componentProps, children: [jsxs(Popover, { onOpenChange: setOpen, open: state.open, children: [jsxs(Popover.Anchor, { className: "coop-datepicker-inner", children: [jsx(TextInput, { autoComplete: "off", className: "coop-datepicker-input", disabled: disabled, id: uid + componentConfig.fieldSuffix, 
+                                //maxLength={dateFormat.length}
+                                name: name + componentConfig.fieldSuffix, onChange: updateFromInput, placeholder: getPlaceholder(), ref: ref, required: required, size: size, value: (_f = (_e = state === null || state === void 0 ? void 0 : state[mode]) === null || _e === void 0 ? void 0 : _e.input) !== null && _f !== void 0 ? _f : "" }), jsx(Popover.Trigger, { asChild: true, children: jsx(Button, { className: "coop-datepicker-button", disabled: disabled, size: size, children: "Select" }) })] }), jsxs(Popover.Content, { "aria-label": "Date picker", className: "coop-datepicker-calendar", collisionPadding: 16, sideOffset: 4, children: [jsx(Calendar
+                            // jsx-ally throws here because we set autoFocus, but this
+                            // is not a standard element. Daypicker uses this value to
+                            // focus the day rather than the nav when it renders.
+                            // eslint-disable-next-line jsx-a11y/no-autofocus
+                            , { 
+                                // jsx-ally throws here because we set autoFocus, but this
+                                // is not a standard element. Daypicker uses this value to
+                                // focus the day rather than the nav when it renders.
+                                // eslint-disable-next-line jsx-a11y/no-autofocus
+                                autoFocus: true, captionLayout: "dropdown", 
+                                //defaultMonth={defaultMonth}
+                                disabled: disabledDates, endMonth: endDate, month: state.view, onMonthChange: setView, onSelect: updateValues, startMonth: startDate, ...calendarProps[mode] }), jsxs("div", { className: "coop-datepicker-actions", children: [jsxs(Button, { "aria-label": "Cancel", onClick: resetState, size: "sm", variant: "grey", children: ["Clear ", jsx(CloseIcon, { stroke: "black", strokeWidth: 1 })] }), jsx(Popover.Close, { asChild: true, children: jsxs(Button, { "aria-label": "Accept", size: "sm", children: ["OK ", jsx(TickIcon, { stroke: "white", strokeWidth: 1 })] }) })] })] })] }), jsx("div", { "aria-live": "assertive", className: "sr-only coop-datepicker-status", role: "status", children: (_g = state.message) !== null && _g !== void 0 ? _g : footerMessage[mode] }), mode === "single" && jsx("input", { ...valueProps, value: (_j = (_h = state.single) === null || _h === void 0 ? void 0 : _h.field) !== null && _j !== void 0 ? _j : "" }), mode === "multiple" && jsx("input", { ...valueProps, value: (_l = (_k = state.multiple) === null || _k === void 0 ? void 0 : _k.field) !== null && _l !== void 0 ? _l : "" }), mode === "range" && (jsxs(Fragment, { children: [jsx("input", { ...baseValueProps, id: `${uid}_start`, name: `${name}_start`, value: (_p = (_o = (_m = state.range) === null || _m === void 0 ? void 0 : _m.field) === null || _o === void 0 ? void 0 : _o.from) !== null && _p !== void 0 ? _p : "" }), jsx("input", { ...baseValueProps, id: `${uid}_end`, name: `${name}_end`, value: (_s = (_r = (_q = state.range) === null || _q === void 0 ? void 0 : _q.field) === null || _r === void 0 ? void 0 : _r.to) !== null && _s !== void 0 ? _s : "" })] }))] }));
+};
+DatePicker.config = componentConfig;
+
+export { DatePicker, DatePicker as default };

package/dist/components/DatePicker/datepicker-utils.d.ts

@@ -0,0 +1,68 @@
+import { Mode } from "react-day-picker";
+interface DateRangeStr {
+    from?: string;
+    to?: string;
+}
+export interface DateRange {
+    from: Date | undefined;
+    to?: Date | undefined;
+}
+interface DateReturn {
+    message?: string;
+    validated?: boolean;
+    view?: Date;
+}
+export type DateBase = string | undefined;
+export type DateType = Date | Date[] | DateRange | string | undefined;
+export interface TDateSingle {
+    event?: string;
+    field?: string;
+    input: string;
+    value?: Date;
+}
+export interface TDateMultiple {
+    event?: string[];
+    field?: string;
+    input: string;
+    value?: Date[];
+}
+export interface TDateRange {
+    event?: DateRangeStr;
+    field?: DateRangeStr;
+    input: string;
+    value?: DateRange;
+}
+type RDateSingle = DateReturn & {
+    state?: TDateSingle;
+};
+type RDateMultiple = DateReturn & {
+    state?: TDateMultiple;
+};
+type RDateRange = DateReturn & {
+    state?: TDateRange;
+};
+export declare function isValidDate(date: unknown): date is Date;
+export declare function isValidRangeFrom(date: unknown): date is {
+    from: Date;
+    to?: Date;
+};
+export declare function isValidRangeTo(date: unknown): date is {
+    from?: Date;
+    to: Date;
+};
+export declare function getISODateString(date: Date): string;
+export declare function getRangeFromString(input: string): DateRangeStr;
+export declare const getStartDate: (date: Date | Partial<DateRange>) => Date | undefined;
+export declare const getEndDate: (date: Date | Partial<DateRange>) => Date | undefined;
+export declare const getDefaultMonth: (date: Date | DateRange) => Date | undefined;
+export declare const getInitialDate: (mode: Mode, date: Date | DateRange) => Date | DateRange;
+export declare function getSingleDate(date: Date | DateBase, df: string, now: Date): RDateSingle;
+export declare function getMultipleDate(date: Date[] | DateBase, df: string, now: Date): RDateMultiple;
+export declare function getRangeDate(date: DateRange | DateBase, df: string, now: Date): RDateRange;
+export declare const getDateValues: (mode: Mode, selected: DateType, dateFormat: string, now: Date) => RDateSingle | RDateMultiple | RDateRange | undefined;
+export declare const shouldSkipParsing: (value: string) => boolean;
+export declare const shouldClose: (mode: Mode, value: DateType, closeOnSelect?: boolean) => boolean;
+export declare const isSingle: (m: Mode, d: DateType) => d is Date & DateBase;
+export declare const isMultiple: (m: Mode, d: DateType) => d is Date[] & DateBase;
+export declare const isRange: (m: Mode, d: DateType) => d is DateRange & DateBase;
+export {};

package/dist/components/DatePicker/datepicker-utils.js

@@ -0,0 +1,215 @@
+import { isValid } from '../../node_modules/date-fns/isValid.js';
+import { parse } from '../../node_modules/date-fns/parse.js';
+import { addYears } from '../../node_modules/date-fns/addYears.js';
+import { formatDate as format } from '../../node_modules/date-fns/format.js';
+import { isBefore } from '../../node_modules/date-fns/isBefore.js';
+
+function isValidDate(date) {
+    return !!date && typeof date !== "string" && typeof date !== "number" && isValid(date);
+}
+function isValidRangeFrom(date) {
+    return !!date && typeof date === "object" && "from" in date && isValid(date.from);
+}
+function isValidRangeTo(date) {
+    return !!date && typeof date === "object" && "to" in date && isValid(date.to);
+}
+function getISODateString(date) {
+    return format(date, "yyyy-MM-dd");
+}
+function getRangeFromString(input) {
+    if (input.includes("-")) {
+        const [from, to] = input.split("-");
+        return { from: from.trim(), to: to.trim() };
+    }
+    return { from: undefined, to: undefined };
+}
+const getStartDate = (date) => {
+    if (isValidDate(date))
+        return addYears(date, -1);
+    else if (isValidRangeFrom(date))
+        return addYears(date.from, -1);
+    return undefined;
+};
+const getEndDate = (date) => {
+    if (isValidDate(date))
+        return addYears(date, 1);
+    else if (isValidRangeTo(date))
+        return addYears(date.to, 1);
+    return undefined;
+};
+const getDefaultMonth = (date) => {
+    if (isValid(date))
+        return date;
+    else if (isValidRangeFrom(date))
+        return date.from;
+    return undefined;
+};
+const getInitialDate = (mode, date) => {
+    var _a;
+    let initialDate = date;
+    if (mode === "range") {
+        let from, to;
+        if ("from" in date) {
+            from = date.from;
+            to = (_a = date.to) !== null && _a !== void 0 ? _a : date.from;
+        }
+        else {
+            from = to = date;
+        }
+        initialDate = { from, to };
+    }
+    return initialDate;
+};
+/**
+ * Each getter returns an object with the following shape:
+ *
+ * message ........... read out by screen readers in the picker live region
+ * state.event ....... attached to the onChange / onSelect event when it fires
+ * state.field ....... value(s) for the hidden input field(s)
+ * state.input ....... value for the visible input field
+ * state.value ....... parsed date object(s)
+ * validated ......... boolean indicating dates are valid
+ * view .............. date (month) to show in the picker window
+ */
+const initialState = {
+    state: { input: "" },
+    validated: false,
+};
+function getSingleDate(date, df, now) {
+    var _a;
+    if (!date)
+        return initialState;
+    let parsed;
+    let input = "";
+    if (typeof date === "string") {
+        input = (_a = date.toString()) !== null && _a !== void 0 ? _a : "";
+        parsed = parse(date, df, now);
+    }
+    else if (isValidDate(date)) {
+        input = format(date, df);
+        parsed = date;
+    }
+    else {
+        return initialState;
+    }
+    if (isValidDate(parsed)) {
+        const isoString = getISODateString(parsed);
+        return {
+            message: `Selected ${input}`,
+            state: { event: isoString, field: isoString, input, value: parsed },
+            validated: true,
+            view: parsed,
+        };
+    }
+    return { state: { input: date.toString() }, validated: false };
+}
+function getMultipleDate(date, df, now) {
+    if (!date)
+        return initialState;
+    let parsed = [];
+    let input = "";
+    if (typeof date === "string") {
+        parsed = date
+            .split(",")
+            .map((d) => parse(d.trim(), df, now))
+            .filter((d) => isValid(d));
+        input = date;
+    }
+    else if (Array.isArray(date)) {
+        parsed = date.filter((d) => isValid(d));
+        input = parsed.map((d) => format(d, df)).join(", ");
+    }
+    if (parsed.length > 0) {
+        const formattedArray = parsed.map((d) => format(d, df));
+        const isoString = parsed.map((d) => getISODateString(d));
+        return {
+            message: `Selected ${formattedArray.join(", ")}`,
+            state: {
+                event: isoString,
+                field: isoString.join(","),
+                input,
+                value: parsed,
+            },
+            validated: true,
+            view: parsed.at(-1),
+        };
+    }
+    return { state: { input }, validated: false };
+}
+function getRangeDate(date, df, now) {
+    if (!date)
+        return initialState;
+    const parsed = { from: undefined, to: undefined };
+    const formatted = {};
+    let input = "";
+    if (typeof date === "string") {
+        if (date.includes("-")) {
+            const { from, to } = getRangeFromString(date);
+            if (from && to) {
+                parsed.from = parse(from, df, now);
+                parsed.to = parse(to, df, now);
+                formatted.from = from;
+                formatted.to = to;
+            }
+            input = `${from} - ${to}`;
+        }
+        else {
+            input = date;
+        }
+    }
+    else if ((date === null || date === void 0 ? void 0 : date.from) && (date === null || date === void 0 ? void 0 : date.to) && isValid(date.from) && isValid(date.to)) {
+        parsed.from = date.from;
+        parsed.to = date.to;
+        formatted.from = format(parsed.from, df);
+        formatted.to = format(parsed.to, df);
+        input = `${formatted.from} - ${formatted.to}`;
+    }
+    else {
+        return initialState;
+    }
+    if (isValidDate(parsed.from) && isValidDate(parsed.to)) {
+        if (isBefore(parsed.to, parsed.from)) {
+            const { from: pf, to: pt } = parsed;
+            parsed.from = pt;
+            parsed.to = pf;
+        }
+        const isoString = {
+            from: getISODateString(parsed.from),
+            to: getISODateString(parsed.to),
+        };
+        return {
+            message: `Selected ${formatted.from} to ${formatted.to}`,
+            state: { event: isoString, field: isoString, input, value: parsed },
+            validated: true,
+            view: parsed.to,
+        };
+    }
+    return { state: { input }, validated: false };
+}
+const getDateValues = (mode, selected, dateFormat, now) => {
+    if (isSingle(mode))
+        return getSingleDate(selected, dateFormat, now);
+    else if (isMultiple(mode))
+        return getMultipleDate(selected, dateFormat, now);
+    else if (isRange(mode))
+        return getRangeDate(selected, dateFormat, now);
+};
+const shouldSkipParsing = (value) => {
+    return typeof value !== "string" ? true : !!(value.length < 8 || value.split("/").length < 3);
+};
+const shouldClose = (mode, value, closeOnSelect) => {
+    var _a, _b;
+    if (!closeOnSelect || !value)
+        return false;
+    else if (isSingle(mode))
+        return true;
+    else if (isRange(mode) && ((_a = value === null || value === void 0 ? void 0 : value.to) === null || _a === void 0 ? void 0 : _a.getTime()) !== ((_b = value === null || value === void 0 ? void 0 : value.from) === null || _b === void 0 ? void 0 : _b.getTime()))
+        return true;
+    else
+        return false;
+};
+const isSingle = (m, d) => m === "single";
+const isMultiple = (m, d) => m === "multiple";
+const isRange = (m, d) => m === "range";
+
+export { getDateValues, getDefaultMonth, getEndDate, getISODateString, getInitialDate, getMultipleDate, getRangeDate, getRangeFromString, getSingleDate, getStartDate, isMultiple, isRange, isSingle, isValidDate, isValidRangeFrom, isValidRangeTo, shouldClose, shouldSkipParsing };

package/dist/components/DatePicker/index.d.ts

@@ -0,0 +1,4 @@
+import DatePicker from "./DatePicker";
+export default DatePicker;
+export { DatePicker };
+export * from "./DatePicker";

package/dist/components/Field/Field.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React from 'react';
+import React__default from 'react';
 import { useId } from '../../hooks/useId.js';
 import { useSlots } from '../../hooks/useSlots.js';
 import { Error } from '../FieldMarkers/Error.js';
@@ -8,52 +8,55 @@ import { Hint } from '../FieldMarkers/Hint.js';
 import { Label } from '../FieldMarkers/Label.js';
 
 const componentSlots = {
-    Checkbox: null,
     Children: null,
     Control: null,
     FieldError: null,
     FieldHint: null,
     FieldLabel: null,
-    Radio: null,
-    Select: null,
-    Textarea: null,
-    TextInput: null,
 };
-const standardFields = ["Children", "FieldError", "FieldHint", "FieldLabel"];
-const inlineFields = ["Checkbox", "Radio"];
 const Root = ({ boxed = false, children, className, error = false, hideErrorBar = false, ref, ...props }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const slots = { ...useSlots(componentSlots, children) };
-    const slotsArray = Object.entries(slots);
-    const isInlineControl = slotsArray.some((s) => s[1] !== null && inlineFields.includes(s[0]));
-    const hasFieldMarkers = !!((_b = (_a = slots.FieldLabel) !== null && _a !== void 0 ? _a : slots.FieldError) !== null && _b !== void 0 ? _b : slots.FieldHint);
-    const [, control] = (_c = slotsArray.find((s) => (!standardFields.includes(s[0]) && s[1] !== null ? s : null))) !== null && _c !== void 0 ? _c : [];
+    const hasMarkers = !!((_b = (_a = slots.FieldLabel) !== null && _a !== void 0 ? _a : slots.FieldError) !== null && _b !== void 0 ? _b : slots.FieldHint);
+    let isInline = false;
+    let control;
+    let controlSuffix = "";
     let controlId = useId();
     let controlDisabled = false;
-    if (control) {
-        if (typeof control === "object" && "props" in control) {
-            const controlProps = control.props;
-            controlId = (_d = controlProps.id) !== null && _d !== void 0 ? _d : controlId;
-            controlDisabled = (_e = controlProps.disabled) !== null && _e !== void 0 ? _e : false;
-        }
-        slots.Control = React.cloneElement(control, {
-            id: controlId,
+    if (Array.isArray(slots.Children)) {
+        slots.Children = slots.Children.filter((child) => {
+            var _a, _b;
+            if ((_b = (_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.isField) {
+                control = child;
+                return false;
+            }
+            return true;
         });
     }
-    if (slots.FieldLabel && React.isValidElement(slots.FieldLabel)) {
-        slots.FieldLabel = React.cloneElement(slots.FieldLabel, {
-            htmlFor: (_f = slots.FieldLabel.props.htmlFor) !== null && _f !== void 0 ? _f : controlId,
+    if (React__default.isValidElement(control)) {
+        const controlProps = control.props;
+        controlId = (_c = controlProps.id) !== null && _c !== void 0 ? _c : controlId;
+        controlDisabled = (_d = controlProps.disabled) !== null && _d !== void 0 ? _d : false;
+        controlSuffix = (_g = (_f = (_e = control === null || control === void 0 ? void 0 : control.type) === null || _e === void 0 ? void 0 : _e.config) === null || _f === void 0 ? void 0 : _f.fieldSuffix) !== null && _g !== void 0 ? _g : "";
+        isInline = (_k = (_j = (_h = control === null || control === void 0 ? void 0 : control.type) === null || _h === void 0 ? void 0 : _h.config) === null || _j === void 0 ? void 0 : _j.isInline) !== null && _k !== void 0 ? _k : false;
+        slots.Control = controlProps.id
+            ? control
+            : React__default.cloneElement(control, { id: controlId });
+    }
+    if (React__default.isValidElement(slots.FieldLabel) && !slots.FieldLabel.props.htmlFor) {
+        slots.FieldLabel = React__default.cloneElement(slots.FieldLabel, {
+            htmlFor: controlId + controlSuffix,
         });
     }
     const componentProps = {
         ...props,
         "aria-disabled": controlDisabled || undefined,
-        className: clsx("coop-field", isInlineControl && "coop-field-inline", className),
+        className: clsx("coop-field", isInline && "coop-field-inline", className),
         "data-boxed": boxed || undefined,
         "data-error": error || undefined,
         "data-hide-error": hideErrorBar || undefined,
     };
-    return (jsxs("div", { ...componentProps, ref: ref, children: [!isInlineControl && hasFieldMarkers && (jsxs("div", { className: "coop-field-markers", children: [slots.FieldLabel, slots.FieldHint, slots.FieldError] })), slots.Control && (jsxs("div", { className: "coop-field-control", children: [slots.Control, isInlineControl && hasFieldMarkers && (jsxs("div", { className: "coop-field-markers", children: [slots.FieldLabel, slots.FieldHint, slots.FieldError] }))] })), slots.Children] }));
+    return (jsxs("div", { ...componentProps, ref: ref, children: [!isInline && hasMarkers && (jsxs("div", { className: "coop-field-markers", children: [slots.FieldLabel, slots.FieldHint, slots.FieldError] })), slots.Control && (jsxs("div", { className: "coop-field-control", children: [slots.Control, isInline && hasMarkers && (jsxs("div", { className: "coop-field-markers", children: [slots.FieldLabel, slots.FieldHint, slots.FieldError] }))] })), slots.Children] }));
 };
 const FieldControl = ({ children, className, ...props }) => {
     return (jsx("div", { className: clsx("coop-field-control ", className), ...props, children: children }));

package/dist/components/Field/index.js

@@ -0,0 +1,6 @@
+import { Field } from './Field.js';
+export { FieldControl } from './Field.js';
+
+
+
+export { Field, Field as default };