@coopdigital/react 1.11.0 → 1.13.0

package/dist/components/Card/Card.js

@@ -1,59 +1,92 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import React from 'react';
-import { useSlots } from '../../hooks/useSlots.js';
-import { hasUserBg } from '../../utils/index.js';
-import { ChevronRightIcon } from '../icons/ChevronRightIcon.js';
-import { Image } from '../Image/Image.js';
-
+import { Image } from "../Image/Image.js";
+import { hasUserBg } from "../../utils/index.js";
+import { ChevronRightIcon } from "../icons/ChevronRightIcon.js";
+import { useSlots } from "../../hooks/useSlots.js";
+import clsx from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+//#region src/components/Card/Card.tsx
 const componentSlots = {
-    CardBadge: null,
-    CardBody: null,
-    CardHeading: null,
-    CardImage: null,
-    CardLabel: null,
-    Children: null,
+	CardBadge: null,
+	CardBody: null,
+	CardHeading: null,
+	CardImage: null,
+	CardLabel: null,
+	Children: null
 };
 function getCardLinkElement(as, href) {
-    return {
-        element: as !== null && as !== void 0 ? as : "a",
-        props: {
-            className: "coop-card--link",
-            href,
-        },
-    };
+	return {
+		element: as ?? "a",
+		props: {
+			className: "coop-card--link",
+			href
+		}
+	};
 }
 const Card = ({ chevron = false, children, className, href, hrefAs, imagePosition = "left", orientation = "vertical", ref, ...props }) => {
-    const { element: linkElement, props: linkProps } = getCardLinkElement(hrefAs, href);
-    const slots = { ...useSlots(componentSlots, children) };
-    const innerProps = { className: "coop-card--inner" };
-    const hasLinkWrapper = href && !slots.CardHeading;
-    const componentProps = {
-        className: clsx("coop-card", !hasUserBg(className) && "bg-white", className),
-        "data-image-pos": imagePosition,
-        "data-orientation": orientation !== "vertical" ? orientation : undefined,
-        ...props,
-    };
-    if (href && slots.CardHeading) {
-        slots.CardHeading = React.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, {}) })))] }));
+	const { element: linkElement, props: linkProps } = getCardLinkElement(hrefAs, href);
+	const slots = { ...useSlots(componentSlots, children) };
+	const innerProps = { className: "coop-card--inner" };
+	const hasLinkWrapper = href && !slots.CardHeading;
+	const componentProps = {
+		className: clsx("coop-card", !hasUserBg(className) && "bg-white", className),
+		"data-image-pos": imagePosition,
+		"data-orientation": orientation !== "vertical" ? orientation : void 0,
+		...props
+	};
+	if (href && slots.CardHeading) slots.CardHeading = React.createElement(linkElement, linkProps, slots.CardHeading);
+	return /* @__PURE__ */ jsxs("article", {
+		...componentProps,
+		ref,
+		children: [
+			slots.CardImage,
+			slots.CardBadge,
+			React.createElement(hasLinkWrapper ? linkElement : "div", hasLinkWrapper ? {
+				href,
+				...innerProps
+			} : innerProps, /* @__PURE__ */ jsxs("div", {
+				className: "coop-card--content",
+				children: [
+					slots.CardLabel,
+					slots.CardHeading,
+					slots.CardBody,
+					slots.Children
+				]
+			}), chevron && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "coop-card--icon",
+				role: "presentation",
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+			}))
+		]
+	});
 };
 const CardHeading = ({ as = "h3", children, className }) => {
-    return React.createElement(as, { className: clsx("coop-card--heading", className) }, children);
+	return React.createElement(as, { className: clsx("coop-card--heading", className) }, children);
 };
 const CardLabel = ({ children, className }) => {
-    return jsx("span", { className: clsx("coop-card--label", className), children: children });
+	return /* @__PURE__ */ jsx("span", {
+		className: clsx("coop-card--label", className),
+		children
+	});
 };
 const CardBadge = ({ align = "right", children, position = "popout", ...props }) => {
-    return (jsx("div", { className: "coop-card--badge", "data-align": align, "data-position": position, ...props, children: children }));
+	return /* @__PURE__ */ jsx("div", {
+		className: "coop-card--badge",
+		"data-align": align,
+		"data-position": position,
+		...props,
+		children
+	});
 };
 const CardBody = ({ children }) => {
-    return jsx(Fragment, { children: children });
+	return /* @__PURE__ */ jsx(Fragment, { children });
 };
 const CardImage = (props) => {
-    var _a;
-    return jsx(Image, { ...props, crop: (_a = props.crop) !== null && _a !== void 0 ? _a : "wide" });
+	return /* @__PURE__ */ jsx(Image, {
+		...props,
+		crop: props.crop ?? "wide"
+	});
 };
 Card.slot = { name: "Card" };
 CardLabel.slot = { name: "CardLabel" };
@@ -66,5 +99,5 @@ Card.Heading = CardHeading;
 Card.Badge = CardBadge;
 Card.Body = CardBody;
 Card.Image = CardImage;
-
-export { Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel, Card as default };
+//#endregion
+export { Card, Card as default, CardBadge, CardBody, CardHeading, CardImage, CardLabel };

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

@@ -1,4 +1,2 @@
-import Card from "./Card";
-export default Card;
-export { Card };
-export * from "./Card";
+import { Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel, CardProps } from "./Card.js";
+export { Card, Card as default, CardBadge, CardBody, CardHeading, CardImage, CardLabel, CardProps };

package/dist/components/Card/index.js

@@ -0,0 +1,5 @@
+import { Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel } from "./Card.js";
+//#region src/components/Card/index.ts
+var Card_default = Card;
+//#endregion
+export { Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel, Card_default as default };

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

@@ -1,28 +1,29 @@
-import type { InputHTMLAttributes, JSX, Ref } from "react";
-import { StandardSizes } from "../../../src/types";
-export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-    /** **(Optional)** Specify whether the Checkbox should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
-    disabled?: boolean;
-    /** **(Optional)** Specify the Checkbox error state. */
-    error?: boolean;
-    /** **(Optional)** Specify the Checkbox id. Will be auto-generated if not set. */
-    id?: string;
-    /** Specify the Checkbox name. */
-    name: string;
-    /** **(Optional)** Specify a custom React ref for this component. */
-    ref?: Ref<HTMLInputElement>;
-    /** **(Optional)** Specify the Checkbox size. */
-    size?: StandardSizes;
+import { StandardSizes } from "../../types/index.js";
+import { InputHTMLAttributes, JSX, Ref } from "react";
+//#region src/components/Checkbox/Checkbox.d.ts
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string;
+  /** **(Optional)** Specify whether the Checkbox should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+  disabled?: boolean;
+  /** **(Optional)** Specify the Checkbox error state. */
+  error?: boolean;
+  /** **(Optional)** Specify the Checkbox id. Will be auto-generated if not set. */
+  id?: string;
+  /** Specify the Checkbox name. */
+  name: string;
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLInputElement>;
+  /** **(Optional)** Specify the Checkbox size. */
+  size?: StandardSizes;
 }
 declare const Checkbox: {
-    ({ className, disabled, error, id, name, ref, size, ...props }: CheckboxProps): JSX.Element;
-    slot: {
-        field: boolean;
-        inline: boolean;
-        name: string;
-    };
+  ({ className, disabled, error, id, name, ref, size, ...props }: CheckboxProps): JSX.Element;
+  slot: {
+    field: boolean;
+    inline: boolean;
+    name: string;
+  };
 };
-export default Checkbox;
-export { Checkbox };
+//#endregion
+export { Checkbox, Checkbox as default, CheckboxProps };

package/dist/components/Checkbox/Checkbox.js

@@ -1,26 +1,26 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { useField } from '../Field/Field.context.js';
-
+import { useField } from "../Field/Field.context.js";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Checkbox/Checkbox.tsx
 const Checkbox = ({ className, disabled, error = false, id, name, ref, size, ...props }) => {
-    const field = useField();
-    const componentProps = {
-        className: clsx("coop-checkbox", "coop-field-element", className),
-        "data-error": error || undefined,
-        "data-size": size !== null && size !== void 0 ? size : undefined,
-        disabled,
-        id: id !== null && id !== void 0 ? id : field === null || field === void 0 ? void 0 : field.id,
-        name,
-        type: "checkbox",
-        ...props,
-    };
-    return jsx("input", { ...componentProps, ref: ref });
+	const field = useField();
+	return /* @__PURE__ */ jsx("input", {
+		className: clsx("coop-checkbox", "coop-field-element", className),
+		"data-error": error || void 0,
+		"data-size": size ?? void 0,
+		disabled,
+		id: id ?? field?.id,
+		name,
+		type: "checkbox",
+		...props,
+		ref
+	});
 };
 Checkbox.slot = {
-    field: true,
-    inline: true,
-    name: "Checkbox",
+	field: true,
+	inline: true,
+	name: "Checkbox"
 };
-
+//#endregion
 export { Checkbox, Checkbox as default };

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

@@ -1,4 +1,2 @@
-import Checkbox from "./Checkbox";
-export default Checkbox;
-export { Checkbox };
-export * from "./Checkbox";
+import { Checkbox, CheckboxProps } from "./Checkbox.js";
+export { Checkbox, Checkbox as default, CheckboxProps };

package/dist/components/Checkbox/index.js

@@ -0,0 +1,5 @@
+import { Checkbox } from "./Checkbox.js";
+//#region src/components/Checkbox/index.ts
+var Checkbox_default = Checkbox;
+//#endregion
+export { Checkbox, Checkbox_default as default };

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

@@ -1,67 +1,68 @@
-import type { InputHTMLAttributes, JSX, Ref } from "react";
-import type { DayPickerProps, Mode } from "react-day-picker";
-import type { StandardSizes } from "../../types";
-import type { DateRange } from "./datepicker-utils";
+import { StandardSizes } from "../../types/index.js";
+import { DateRange } from "./datepicker-utils.js";
+import { InputHTMLAttributes, JSX, Ref } from "react";
+import { DayPickerProps, Mode } from "react-day-picker";
+//#region src/components/DatePicker/DatePicker.d.ts
 type OnDateSelectHandler = (selected: string | string[] | {
-    from?: string;
-    to?: 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. Combine with `initialSelected` to pre-select a date.
-     *
-     * Default: today.
-     */
-    initialDate?: Date | DateRange;
-    /** **(Optional)** Specify whether the initial date should be pre-selected. */
-    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;
+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. Combine with `initialSelected` to pre-select a date.
+   *
+   * Default: today.
+   */
+  initialDate?: Date | DateRange;
+  /** **(Optional)** Specify whether the initial date should be pre-selected. */
+  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;
 }
 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;
-    slot: {
-        field: boolean;
-        name: string;
-        suffix: string;
-    };
+  ({ className, closeOnSelect, dateFormat, disabled, disabledDates, endDate, error, id, initialDate, initialSelected, mode, name, onChange, onSelect, ref, required, size, startDate, ...props }: DatePickerProps): JSX.Element;
+  slot: {
+    field: boolean;
+    name: string;
+    suffix: string;
+  };
 };
-export default DatePicker;
-export { DatePicker };
+//#endregion
+export { DatePicker, DatePicker as default, DatePickerProps };