@coopdigital/react 1.12.0 → 1.13.0

package/dist/components/Popover/Popover.d.ts

@@ -1,110 +1,111 @@
-import type { PopoverAnchorProps as RadixPopoverAnchorProps, PopoverCloseProps as RadixPopoverCloseProps, PopoverContentProps as RadixPopoverContentProps, PopoverProps as RadixPopoverProps, PopoverTriggerProps as RadixPopoverTriggerProps } from "@radix-ui/react-popover";
-import type { JSX, ReactNode, Ref } from "react";
-export interface PopoverProps extends RadixPopoverProps {
-    /** Content inside the Popover.
-     *
-     * This should be a `Popover.Trigger` and `Popover.Content`, with an optional `Popover.Close`. Other children will be ignored. */
-    children: string | ReactNode;
-    /** **(Optional)** Callback to run when the Popover is opened or closed. */
-    onOpenChange?: RadixPopoverProps["onOpenChange"];
-    /** **(Optional)** Force the Popover state. Must be used together with `onOpenChange`. */
-    open?: RadixPopoverProps["open"];
+import { JSX, ReactNode, Ref } from "react";
+import { PopoverAnchorProps, PopoverCloseProps, PopoverContentProps, PopoverProps, PopoverTriggerProps } from "@radix-ui/react-popover";
+//#region src/components/Popover/Popover.d.ts
+interface PopoverProps$1 extends PopoverProps {
+  /** Content inside the Popover.
+   *
+   * This should be a `Popover.Trigger` and `Popover.Content`, with an optional `Popover.Close`. Other children will be ignored. */
+  children: string | ReactNode;
+  /** **(Optional)** Callback to run when the Popover is opened or closed. */
+  onOpenChange?: PopoverProps["onOpenChange"];
+  /** **(Optional)** Force the Popover state. Must be used together with `onOpenChange`. */
+  open?: PopoverProps["open"];
 }
-interface PopoverTriggerProps extends RadixPopoverTriggerProps {
-    /** **(Optional)** When true, the element passed as a child becomes the trigger root element. */
-    asChild?: RadixPopoverTriggerProps["asChild"];
-    /** **(Optional)** Content inside the Popover Trigger. */
-    children?: React.ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
+interface PopoverTriggerProps$1 extends PopoverTriggerProps {
+  /** **(Optional)** When true, the element passed as a child becomes the trigger root element. */
+  asChild?: PopoverTriggerProps["asChild"];
+  /** **(Optional)** Content inside the Popover Trigger. */
+  children?: React.ReactNode;
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string;
 }
-interface PopoverContentProps extends RadixPopoverContentProps {
-    /** **(Optional)** Specify horizontal alignment of the Popover against the trigger. May change when collisions occur. */
-    align?: RadixPopoverContentProps["align"];
-    /** **(Optional)** Specify pixel offset from the "start" or "end" alignment. */
-    alignOffset?: RadixPopoverContentProps["alignOffset"];
-    /** **(Optional)** Specify whether the Popover should reposition itself if it falls out of the viewport. */
-    avoidCollisions?: RadixPopoverContentProps["avoidCollisions"];
-    /** **(Optional)** Content inside the Popover window. */
-    children?: React.ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-    /** **(Optional)** Specify pixel boundary for collision safe area. */
-    collisionPadding?: RadixPopoverContentProps["collisionPadding"];
-    /** **(Optional)** Specify a custom React ref for this component. */
-    ref?: Ref<HTMLDivElement>;
-    /** **(Optional)** Specify placement of the Popover against the trigger. Will change when collisions occur. */
-    side?: RadixPopoverContentProps["side"];
-    /** **(Optional)** Specify pixel offset from the trigger element. */
-    sideOffset?: RadixPopoverContentProps["sideOffset"];
+interface PopoverContentProps$1 extends PopoverContentProps {
+  /** **(Optional)** Specify horizontal alignment of the Popover against the trigger. May change when collisions occur. */
+  align?: PopoverContentProps["align"];
+  /** **(Optional)** Specify pixel offset from the "start" or "end" alignment. */
+  alignOffset?: PopoverContentProps["alignOffset"];
+  /** **(Optional)** Specify whether the Popover should reposition itself if it falls out of the viewport. */
+  avoidCollisions?: PopoverContentProps["avoidCollisions"];
+  /** **(Optional)** Content inside the Popover window. */
+  children?: React.ReactNode;
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string;
+  /** **(Optional)** Specify pixel boundary for collision safe area. */
+  collisionPadding?: PopoverContentProps["collisionPadding"];
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>;
+  /** **(Optional)** Specify placement of the Popover against the trigger. Will change when collisions occur. */
+  side?: PopoverContentProps["side"];
+  /** **(Optional)** Specify pixel offset from the trigger element. */
+  sideOffset?: PopoverContentProps["sideOffset"];
 }
-interface PopoverCloseProps extends RadixPopoverCloseProps {
-    /** **(Optional)** When true, the element passed as a child becomes the close button root element. */
-    asChild?: RadixPopoverCloseProps["asChild"];
-    /** **(Optional)** Content inside the Popover Close element. */
-    children?: React.ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
+interface PopoverCloseProps$1 extends PopoverCloseProps {
+  /** **(Optional)** When true, the element passed as a child becomes the close button root element. */
+  asChild?: PopoverCloseProps["asChild"];
+  /** **(Optional)** Content inside the Popover Close element. */
+  children?: React.ReactNode;
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string;
 }
-interface PopoverAnchorProps extends RadixPopoverAnchorProps {
-    /** **(Optional)** When true, the element passed as a child becomes the anchor root element. */
-    asChild?: RadixPopoverAnchorProps["asChild"];
-    /** **(Optional)** Content inside the Popover Anchor element. */
-    children?: React.ReactNode;
+interface PopoverAnchorProps$1 extends PopoverAnchorProps {
+  /** **(Optional)** When true, the element passed as a child becomes the anchor root element. */
+  asChild?: PopoverAnchorProps["asChild"];
+  /** **(Optional)** Content inside the Popover Anchor element. */
+  children?: React.ReactNode;
 }
 declare const Popover: {
-    ({ children, ...props }: PopoverProps): JSX.Element;
+  ({ children, ...props }: PopoverProps$1): JSX.Element;
+  slot: {
+    name: string;
+  };
+  Trigger: {
+    ({ asChild, children, className, ...props }: PopoverTriggerProps$1): JSX.Element;
     slot: {
-        name: string;
+      name: string;
     };
-    Trigger: {
-        ({ asChild, children, className, ...props }: PopoverTriggerProps): JSX.Element;
-        slot: {
-            name: string;
-        };
-    };
-    Content: {
-        ({ align, alignOffset, asChild, avoidCollisions, children, className, collisionPadding, ref, side, sideOffset, style, ...props }: PopoverContentProps): JSX.Element;
-        slot: {
-            name: string;
-        };
+  };
+  Content: {
+    ({ align, alignOffset, asChild, avoidCollisions, children, className, collisionPadding, ref, side, sideOffset, style, ...props }: PopoverContentProps$1): JSX.Element;
+    slot: {
+      name: string;
     };
-    Close: {
-        ({ asChild, children, className, ...props }: PopoverCloseProps): JSX.Element;
-        slot: {
-            name: string;
-        };
+  };
+  Close: {
+    ({ asChild, children, className, ...props }: PopoverCloseProps$1): JSX.Element;
+    slot: {
+      name: string;
     };
-    Anchor: {
-        ({ asChild, children, ...props }: PopoverAnchorProps): JSX.Element;
-        slot: {
-            name: string;
-        };
+  };
+  Anchor: {
+    ({ asChild, children, ...props }: PopoverAnchorProps$1): JSX.Element;
+    slot: {
+      name: string;
     };
+  };
 };
 declare const PopoverContent: {
-    ({ align, alignOffset, asChild, avoidCollisions, children, className, collisionPadding, ref, side, sideOffset, style, ...props }: PopoverContentProps): JSX.Element;
-    slot: {
-        name: string;
-    };
+  ({ align, alignOffset, asChild, avoidCollisions, children, className, collisionPadding, ref, side, sideOffset, style, ...props }: PopoverContentProps$1): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
 declare const PopoverTrigger: {
-    ({ asChild, children, className, ...props }: PopoverTriggerProps): JSX.Element;
-    slot: {
-        name: string;
-    };
+  ({ asChild, children, className, ...props }: PopoverTriggerProps$1): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
 declare const PopoverClose: {
-    ({ asChild, children, className, ...props }: PopoverCloseProps): JSX.Element;
-    slot: {
-        name: string;
-    };
+  ({ asChild, children, className, ...props }: PopoverCloseProps$1): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
 declare const PopoverAnchor: {
-    ({ asChild, children, ...props }: PopoverAnchorProps): JSX.Element;
-    slot: {
-        name: string;
-    };
+  ({ asChild, children, ...props }: PopoverAnchorProps$1): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
-export default Popover;
-export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };
+//#endregion
+export { Popover, Popover as default, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps$1 as PopoverProps, PopoverTrigger };

package/dist/components/Popover/Popover.js

@@ -1,67 +1,76 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import * as RadixPopover from '@radix-ui/react-popover';
-import clsx from 'clsx';
-import { useSlots } from '../../hooks/useSlots.js';
-import { hasUserBg, bgClassToColor } from '../../utils/index.js';
-
+import { bgClassToColor, hasUserBg } from "../../utils/index.js";
+import { useSlots } from "../../hooks/useSlots.js";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as RadixPopover from "@radix-ui/react-popover";
+//#region src/components/Popover/Popover.tsx
 const componentSlots = {
-    PopoverAnchor: null,
-    PopoverContent: null,
-    PopoverTrigger: null,
+	PopoverAnchor: null,
+	PopoverContent: null,
+	PopoverTrigger: null
 };
 const Popover = ({ children, ...props }) => {
-    var _a;
-    const slots = useSlots(componentSlots, children);
-    return (jsxs(RadixPopover.Root, { ...props, children: [(_a = slots.PopoverAnchor) !== null && _a !== void 0 ? _a : slots.PopoverTrigger, jsx(RadixPopover.Portal, { children: slots.PopoverContent })] }));
+	const slots = useSlots(componentSlots, children);
+	return /* @__PURE__ */ jsxs(RadixPopover.Root, {
+		...props,
+		children: [slots.PopoverAnchor ?? slots.PopoverTrigger, /* @__PURE__ */ jsx(RadixPopover.Portal, { children: slots.PopoverContent })]
+	});
 };
 const PopoverContent = ({ align = "center", alignOffset = 0, asChild = false, avoidCollisions = true, children, className, collisionPadding = 16, ref, side = "bottom", sideOffset = 4, style, ...props }) => {
-    const componentProps = {
-        align,
-        alignOffset,
-        asChild,
-        avoidCollisions,
-        className: clsx("coop-popover", !hasUserBg(className) && "bg-tint-grey", className),
-        collisionPadding,
-        side,
-        sideOffset,
-        style,
-        ...props,
-    };
-    componentProps.style = {
-        ...style,
-        "--popover-bg": `var(--color-${bgClassToColor(componentProps.className)})`,
-    };
-    return (jsxs(RadixPopover.Content, { ref: ref, ...componentProps, children: [children, jsx(RadixPopover.Arrow, { className: "coop-popover-arrow" })] }));
+	const componentProps = {
+		align,
+		alignOffset,
+		asChild,
+		avoidCollisions,
+		className: clsx("coop-popover", !hasUserBg(className) && "bg-tint-grey", className),
+		collisionPadding,
+		side,
+		sideOffset,
+		style,
+		...props
+	};
+	componentProps.style = {
+		...style,
+		"--popover-bg": `var(--color-${bgClassToColor(componentProps.className)})`
+	};
+	return /* @__PURE__ */ jsxs(RadixPopover.Content, {
+		ref,
+		...componentProps,
+		children: [children, /* @__PURE__ */ jsx(RadixPopover.Arrow, { className: "coop-popover-arrow" })]
+	});
 };
 const PopoverTrigger = ({ asChild = false, children, className, ...props }) => {
-    const componentProps = {
-        // There is a known issue with aria-controls being set to target
-        // elements that do not exist yet. This does not seem to affect
-        // screen readers or fail e2e avt tests, but may display in
-        // storybook as an "inconclusive" axe error.
-        // https://github.com/radix-ui/primitives/pull/3243
-        // https://github.com/radix-ui/primitives/issues/3242
-        // "aria-controls": undefined,
-        asChild,
-        className: clsx("coop-popover-trigger", className),
-        ...props,
-    };
-    return jsx(RadixPopover.Trigger, { ...componentProps, children: children });
+	const componentProps = {
+		asChild,
+		className: clsx("coop-popover-trigger", className),
+		...props
+	};
+	return /* @__PURE__ */ jsx(RadixPopover.Trigger, {
+		...componentProps,
+		children
+	});
 };
 const PopoverClose = ({ asChild = false, children, className, ...props }) => {
-    const componentProps = {
-        asChild,
-        className: clsx("coop-popover-close", className),
-        ...props,
-    };
-    return (jsx(RadixPopover.Close, { "aria-label": "Close", ...componentProps, children: children }));
+	const componentProps = {
+		asChild,
+		className: clsx("coop-popover-close", className),
+		...props
+	};
+	return /* @__PURE__ */ jsx(RadixPopover.Close, {
+		"aria-label": "Close",
+		...componentProps,
+		children
+	});
 };
 const PopoverAnchor = ({ asChild = false, children, ...props }) => {
-    const componentProps = {
-        asChild,
-        ...props,
-    };
-    return jsx(RadixPopover.Anchor, { ...componentProps, children: children });
+	const componentProps = {
+		asChild,
+		...props
+	};
+	return /* @__PURE__ */ jsx(RadixPopover.Anchor, {
+		...componentProps,
+		children
+	});
 };
 Popover.slot = { name: "Popover" };
 PopoverTrigger.slot = { name: "PopoverTrigger" };
@@ -72,5 +81,5 @@ Popover.Trigger = PopoverTrigger;
 Popover.Content = PopoverContent;
 Popover.Close = PopoverClose;
 Popover.Anchor = PopoverAnchor;
-
-export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Popover as default };
+//#endregion
+export { Popover, Popover as default, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };

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

@@ -1,4 +1,2 @@
-import Popover from "./Popover";
-export default Popover;
-export { Popover };
-export * from "./Popover";
+import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, PopoverTrigger } from "./Popover.js";
+export { Popover, Popover as default, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, PopoverTrigger };

package/dist/components/Popover/index.js

@@ -0,0 +1,5 @@
+import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from "./Popover.js";
+//#region src/components/Popover/index.ts
+var Popover_default = Popover;
+//#endregion
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Popover_default as default };

package/dist/components/Radio/Radio.d.ts

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

package/dist/components/Radio/Radio.js

@@ -1,27 +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/Radio/Radio.tsx
 const Radio = ({ className, disabled, error = false, id, name, ref, size, ...props }) => {
-    const field = useField();
-    const componentProps = {
-        className: clsx("coop-radio", "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: "radio",
-        ...props,
-    };
-    //const formItemProps = { "aria-disabled": disabled ? true : undefined }
-    return jsx("input", { ...componentProps, ref: ref });
+	const field = useField();
+	return /* @__PURE__ */ jsx("input", {
+		className: clsx("coop-radio", "coop-field-element", className),
+		"data-error": error || void 0,
+		"data-size": size ?? void 0,
+		disabled,
+		id: id ?? field?.id,
+		name,
+		type: "radio",
+		...props,
+		ref
+	});
 };
 Radio.slot = {
-    field: true,
-    inline: true,
-    name: "Radio",
+	field: true,
+	inline: true,
+	name: "Radio"
 };
-
+//#endregion
 export { Radio, Radio as default };

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

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

package/dist/components/Radio/index.js

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

package/dist/components/RootSVG/RootSVG.d.ts

@@ -1,9 +1,10 @@
 import { JSX } from "react";
+//#region src/components/RootSVG/RootSVG.d.ts
 declare const RootSVG: {
-    (): JSX.Element;
-    slot: {
-        name: string;
-    };
+  (): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
-export default RootSVG;
-export { RootSVG };
+//#endregion
+export { RootSVG, RootSVG as default };

package/dist/components/RootSVG/RootSVG.js

@@ -1,13 +1,23 @@
-import { jsx } from 'react/jsx-runtime';
-
+import { jsx } from "react/jsx-runtime";
+//#region src/components/RootSVG/RootSVG.tsx
 const RootSVG = () => {
-    return (jsx("svg", { height: "0", style: {
-            clip: "rect(0,0,0,0)",
-            clipPath: "inset(50%)",
-            overflow: "hidden",
-            position: "absolute",
-        }, width: "0", xmlns: "http://www.w3.org/2000/svg", children: jsx("defs", { children: jsx("clipPath", { clipPathUnits: "objectBoundingBox", id: "coop-squircle", children: jsx("path", { d: "M0,0.5 C0,0.165,0.165,0,0.5,0 S1,0.165,1,0.5 S0.835,1,0.5,1 S0,0.835,0,0.5" }) }) }) }));
+	return /* @__PURE__ */ jsx("svg", {
+		height: "0",
+		style: {
+			clip: "rect(0,0,0,0)",
+			clipPath: "inset(50%)",
+			overflow: "hidden",
+			position: "absolute"
+		},
+		width: "0",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
+			clipPathUnits: "objectBoundingBox",
+			id: "coop-squircle",
+			children: /* @__PURE__ */ jsx("path", { d: "M0,0.5 C0,0.165,0.165,0,0.5,0 S1,0.165,1,0.5 S0.835,1,0.5,1 S0,0.835,0,0.5" })
+		}) })
+	});
 };
 RootSVG.slot = { name: "RootSVG" };
-
+//#endregion
 export { RootSVG, RootSVG as default };

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

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

package/dist/components/RootSVG/index.js

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

package/dist/components/Searchbox/Searchbox.context.js

@@ -1,11 +1,10 @@
-import { createContext, useContext } from 'react';
-
+import { createContext, useContext } from "react";
+//#region src/components/Searchbox/Searchbox.context.tsx
 const SearchboxContext = createContext({});
 const useSearchbox = () => {
-    const context = useContext(SearchboxContext);
-    if (!context)
-        throw new Error("Searchbox components must be used inside <Searchbox>");
-    return context;
+	const context = useContext(SearchboxContext);
+	if (!context) throw new Error("Searchbox components must be used inside <Searchbox>");
+	return context;
 };
-
+//#endregion
 export { SearchboxContext, useSearchbox };