@coopdigital/react 1.4.0 → 1.5.0

package/dist/components/AlertBanner/AlertBanner.d.ts

@@ -15,13 +15,23 @@ interface AlertBannerHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     /** **(Optional)** Specify additional CSS classes to be applied to the Heading. */
     className?: string;
 }
-export declare const AlertBanner: {
+declare const AlertBanner: {
     ({ children, className, ref, variant, ...props }: AlertBannerProps): JSX.Element;
+    slot: {
+        name: string;
+    };
     Heading: {
         ({ children, className }: AlertBannerHeadingProps): JSX.Element;
-        config: {
+        slot: {
             name: string;
         };
     };
 };
+declare const AlertBannerHeading: {
+    ({ children, className }: AlertBannerHeadingProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
 export default AlertBanner;
+export { AlertBanner, AlertBannerHeading };

package/dist/components/AlertBanner/AlertBanner.js

@@ -12,7 +12,8 @@ const AlertBanner = ({ children, className, ref, variant = "default", ...props }
 const AlertBannerHeading = ({ children, className }) => {
     return jsx("h2", { className: className, children: children });
 };
-AlertBannerHeading.config = { name: "AlertBannerHeading" };
+AlertBanner.slot = { name: "AlertBanner" };
+AlertBannerHeading.slot = { name: "AlertBannerHeading" };
 AlertBanner.Heading = AlertBannerHeading;
 
-export { AlertBanner, AlertBanner as default };
+export { AlertBanner, AlertBannerHeading, AlertBanner as default };

package/dist/components/Author/Author.d.ts

@@ -16,5 +16,11 @@ export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specify the Author size. */
     size?: "sm" | "md";
 }
-export declare const Author: ({ author, className, date, datePrefix, image, ref, size, ...props }: AuthorProps) => JSX.Element;
+declare const Author: {
+    ({ author, className, date, datePrefix, image, ref, size, ...props }: AuthorProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
 export default Author;
+export { Author };

package/dist/components/Author/Author.js

@@ -17,5 +17,6 @@ const Author = ({ author = "Co-op team", className, date, datePrefix = "", image
     };
     return (jsxs("div", { ...componentProps, ref: ref, children: [image && jsx(Image, { ...imageProps }), jsxs("div", { className: "coop-author--content", children: [jsxs("span", { children: [jsx("span", { children: datePrefix ? datePrefix + " " : "" }), jsx("span", { className: "coop-author--date", children: date })] }), jsxs("span", { children: ["by ", author] })] })] }));
 };
+Author.slot = { name: "Author" };
 
 export { Author, Author as default };

package/dist/components/Button/Button.d.ts

@@ -26,5 +26,11 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** **(Optional)** Specify the Button variant. */
     variant?: "solid" | "ghost" | "text";
 }
-export declare const Button: ({ as, children, className, href, isDisabled, isFullWidth, isLoading, loadingText, onClick, ref, size, variant, ...props }: ButtonProps) => JSX.Element;
+declare const Button: {
+    ({ as, children, className, href, isDisabled, isFullWidth, isLoading, loadingText, onClick, ref, size, variant, ...props }: ButtonProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
 export default Button;
+export { Button };

package/dist/components/Button/Button.js

@@ -34,5 +34,6 @@ const Button = ({ as, children, className, href, isDisabled = false, isFullWidth
     const finalChildren = isPending || isLoading ? (jsxs(Fragment, { children: [loadingText, jsx(LoadingIcon, { stroke: "currentColor", strokeWidth: "1px" })] })) : (children);
     return React.createElement(element, { ...componentProps, ref }, finalChildren);
 };
+Button.slot = { name: "Button" };
 
 export { Button, Button as default };

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

@@ -48,37 +48,71 @@ interface CardBadgeProps extends HTMLAttributes<HTMLDivElement> {
     position?: "inset" | "popout";
 }
 type CardImageProps = ImageProps;
-export declare const Card: {
+declare const Card: {
     ({ chevron, children, className, href, hrefAs, imagePosition, orientation, ref, ...props }: CardProps): JSX.Element;
+    slot: {
+        name: string;
+    };
     Label: {
         ({ children, className }: CardLabelProps): JSX.Element;
-        config: {
+        slot: {
             name: string;
         };
     };
     Heading: {
         ({ as, children, className }: CardHeadingProps): JSX.Element;
-        config: {
+        slot: {
             name: string;
         };
     };
     Badge: {
         ({ align, children, position, ...props }: CardBadgeProps): JSX.Element;
-        config: {
+        slot: {
             name: string;
         };
     };
     Body: {
         ({ children }: CardBodyProps): JSX.Element;
-        config: {
+        slot: {
             name: string;
         };
     };
     Image: {
         (props: CardImageProps): import("react/jsx-runtime").JSX.Element;
-        config: {
+        slot: {
             name: string;
         };
     };
 };
+declare const CardHeading: {
+    ({ as, children, className }: CardHeadingProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
+declare const CardLabel: {
+    ({ children, className }: CardLabelProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
+declare const CardBadge: {
+    ({ align, children, position, ...props }: CardBadgeProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
+declare const CardBody: {
+    ({ children }: CardBodyProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
+declare const CardImage: {
+    (props: CardImageProps): import("react/jsx-runtime").JSX.Element;
+    slot: {
+        name: string;
+    };
+};
 export default Card;
+export { Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel };

package/dist/components/Card/Card.js

@@ -55,15 +55,16 @@ const CardImage = (props) => {
     var _a;
     return jsx(Image, { ...props, crop: (_a = props.crop) !== null && _a !== void 0 ? _a : "wide" });
 };
-CardLabel.config = { name: "CardLabel" };
-CardHeading.config = { name: "CardHeading" };
-CardBadge.config = { name: "CardBadge" };
-CardBody.config = { name: "CardBody" };
-CardImage.config = { name: "CardImage" };
+Card.slot = { name: "Card" };
+CardLabel.slot = { name: "CardLabel" };
+CardHeading.slot = { name: "CardHeading" };
+CardBadge.slot = { name: "CardBadge" };
+CardBody.slot = { name: "CardBody" };
+CardImage.slot = { name: "CardImage" };
 Card.Label = CardLabel;
 Card.Heading = CardHeading;
 Card.Badge = CardBadge;
 Card.Body = CardBody;
 Card.Image = CardImage;
 
-export { Card, Card as default };
+export { Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel, Card as default };

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

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

package/dist/components/Checkbox/Checkbox.js

@@ -1,24 +1,27 @@
+
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId } from '../../hooks/useId.js';
+import { useField } from '../Field/Field.context.js';
 
 const Checkbox = ({ className, disabled, error = false, id, name, ref, size, ...props }) => {
-    const uid = useId(id);
+    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: uid,
+        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 });
 };
-Checkbox.config = {
-    isField: true,
-    isInline: true,
+Checkbox.slot = {
+    field: true,
+    inline: true,
+    name: "Checkbox",
 };
 
 export { Checkbox, Checkbox as default };

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

@@ -1,6 +1,6 @@
 import type { InputHTMLAttributes, JSX, Ref } from "react";
 import type { DayPickerProps, Mode } from "react-day-picker";
-import type { ComponentConfig, StandardSizes } from "../../types";
+import type { StandardSizes } from "../../types";
 import type { DateRange } from "./datepicker-utils";
 type OnDateSelectHandler = (selected: string | string[] | {
     from?: string;
@@ -55,8 +55,13 @@ export interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputEleme
      */
     startDate?: Date;
 }
-export declare const DatePicker: {
+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;
+    slot: {
+        field: boolean;
+        name: string;
+        suffix: string;
+    };
 };
 export default DatePicker;
+export { DatePicker };

package/dist/components/DatePicker/DatePicker.js

@@ -4,8 +4,8 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useMemo, useReducer, useCallback } from 'react';
 import { DayPicker } from 'react-day-picker';
-import { useId } from '../../hooks/useId.js';
 import { Button } from '../Button/Button.js';
+import { useField } from '../Field/Field.context.js';
 import { CalendarIcon } from '../icons/CalendarIcon.js';
 import { CrossIcon } from '../icons/CrossIcon.js';
 import { TickIcon } from '../icons/TickIcon.js';
@@ -14,10 +14,6 @@ import { TextInput } from '../TextInput/TextInput.js';
 import { getInitialDate, getStartDate, getEndDate, getDefaultMonth, getDateValues, shouldClose, shouldSkipParsing } from './datepicker-utils.js';
 
 const now = new Date();
-const componentConfig = {
-    fieldSuffix: "_display",
-    isField: true,
-};
 const baseValueProps = {
     readOnly: true,
     type: "hidden",
@@ -42,7 +38,7 @@ const Calendar = ({ captionLayout = "label", className, disabled, endMonth, form
 };
 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, startDate, ...props }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
-    const uid = useId(id);
+    const field = useField();
     initialDate = getInitialDate(mode, initialDate);
     const startDateProp = startDate;
     const endDateProp = endDate;
@@ -113,7 +109,7 @@ const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy"
     };
     const valueProps = {
         ...baseValueProps,
-        id: uid,
+        id: id !== null && id !== void 0 ? id : field === null || field === void 0 ? void 0 : field.id,
         name: name,
     };
     const getPlaceholder = () => {
@@ -127,9 +123,9 @@ const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy"
                 return lowerCaseDateFormat;
         }
     };
-    return (jsxs("div", { ...componentProps, children: [jsxs(Popover, { onOpenChange: setOpen, open: state.open, children: [jsx(Popover.Anchor, { className: "coop-datepicker-inner", children: jsx(TextInput, { autoComplete: "off", className: "coop-datepicker-input", disabled: disabled, id: uid + componentConfig.fieldSuffix, 
+    return (jsxs("div", { ...componentProps, children: [jsxs(Popover, { onOpenChange: setOpen, open: state.open, children: [jsx(Popover.Anchor, { className: "coop-datepicker-inner", children: jsx(TextInput, { autoComplete: "off", className: "coop-datepicker-input", disabled: disabled, id: valueProps.id + "_display", 
                             //maxLength={dateFormat.length}
-                            name: name + componentConfig.fieldSuffix, onChange: updateFromInput, placeholder: getPlaceholder(), ref: ref, required: required, size: size, suffix: disabled ? (jsx("span", { className: "coop-datepicker-trigger", children: jsx(CalendarIcon, { width: 24 }) })) : (jsx(Popover.Trigger, { "aria-label": "Choose date", className: "coop-datepicker-trigger", children: jsx(CalendarIcon, { width: 24 }) })), suffixInline: true, 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 : "" }) }), jsxs(Popover.Content, { "aria-label": "Date picker", className: "coop-datepicker-calendar bg-white", collisionPadding: 16, sideOffset: 4, children: [jsx(Calendar
+                            name: name + "_display", onChange: updateFromInput, placeholder: getPlaceholder(), ref: ref, required: required, size: size, suffix: disabled ? (jsx("span", { className: "coop-datepicker-trigger", children: jsx(CalendarIcon, { width: 24 }) })) : (jsx(Popover.Trigger, { "aria-label": "Choose date", className: "coop-datepicker-trigger", children: jsx(CalendarIcon, { width: 24 }) })), suffixInline: true, 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 : "" }) }), jsxs(Popover.Content, { "aria-label": "Date picker", className: "coop-datepicker-calendar bg-white", 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.
@@ -141,8 +137,12 @@ const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy"
                                 // 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", className: "bg-tint-grey", onClick: resetState, size: "sm", children: ["Clear ", jsx(CrossIcon, { 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: (_l = (_j = (_h = state.single) === null || _h === void 0 ? void 0 : _h.field) !== null && _j !== void 0 ? _j : (_k = state.single) === null || _k === void 0 ? void 0 : _k.input) !== null && _l !== void 0 ? _l : "" })), mode === "multiple" && (jsx("input", { ...valueProps, value: (_q = (_o = (_m = state.multiple) === null || _m === void 0 ? void 0 : _m.field) !== null && _o !== void 0 ? _o : (_p = state.multiple) === null || _p === void 0 ? void 0 : _p.input) !== null && _q !== void 0 ? _q : "" })), mode === "range" && (jsxs(Fragment, { children: [jsx("input", { ...baseValueProps, id: `${uid}_start`, name: `${name}_start`, value: (_v = (_t = (_s = (_r = state.range) === null || _r === void 0 ? void 0 : _r.field) === null || _s === void 0 ? void 0 : _s.from) !== null && _t !== void 0 ? _t : (_u = state.range) === null || _u === void 0 ? void 0 : _u.input) !== null && _v !== void 0 ? _v : "" }), jsx("input", { ...baseValueProps, id: `${uid}_end`, name: `${name}_end`, value: (_0 = (_y = (_x = (_w = state.range) === null || _w === void 0 ? void 0 : _w.field) === null || _x === void 0 ? void 0 : _x.to) !== null && _y !== void 0 ? _y : (_z = state.range) === null || _z === void 0 ? void 0 : _z.input) !== null && _0 !== void 0 ? _0 : "" })] }))] }));
+                                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", className: "bg-tint-grey", onClick: resetState, size: "sm", children: ["Clear ", jsx(CrossIcon, { 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: (_l = (_j = (_h = state.single) === null || _h === void 0 ? void 0 : _h.field) !== null && _j !== void 0 ? _j : (_k = state.single) === null || _k === void 0 ? void 0 : _k.input) !== null && _l !== void 0 ? _l : "" })), mode === "multiple" && (jsx("input", { ...valueProps, value: (_q = (_o = (_m = state.multiple) === null || _m === void 0 ? void 0 : _m.field) !== null && _o !== void 0 ? _o : (_p = state.multiple) === null || _p === void 0 ? void 0 : _p.input) !== null && _q !== void 0 ? _q : "" })), mode === "range" && (jsxs(Fragment, { children: [jsx("input", { ...baseValueProps, id: `${valueProps.id}_start`, name: `${name}_start`, value: (_v = (_t = (_s = (_r = state.range) === null || _r === void 0 ? void 0 : _r.field) === null || _s === void 0 ? void 0 : _s.from) !== null && _t !== void 0 ? _t : (_u = state.range) === null || _u === void 0 ? void 0 : _u.input) !== null && _v !== void 0 ? _v : "" }), jsx("input", { ...baseValueProps, id: `${valueProps.id}_end`, name: `${name}_end`, value: (_0 = (_y = (_x = (_w = state.range) === null || _w === void 0 ? void 0 : _w.field) === null || _x === void 0 ? void 0 : _x.to) !== null && _y !== void 0 ? _y : (_z = state.range) === null || _z === void 0 ? void 0 : _z.input) !== null && _0 !== void 0 ? _0 : "" })] }))] }));
+};
+DatePicker.slot = {
+    field: true,
+    name: "DatePicker",
+    suffix: "_display",
 };
-DatePicker.config = componentConfig;
 
 export { DatePicker, DatePicker as default };

package/dist/components/Expandable/Expandable.d.ts

@@ -19,19 +19,35 @@ interface ExpandableContentProps extends HTMLAttributes<HTMLElement> {
     /** **(Optional)** Specify additional CSS classes to be applied to the content wrapper. */
     className?: string;
 }
-export declare const Expandable: {
+declare const Expandable: {
     ({ children, className, ref, ...props }: ExpandableProps): JSX.Element;
+    slot: {
+        name: string;
+    };
     Summary: {
         ({ children, className, ...props }: ExpandableSummaryProps): import("react/jsx-runtime").JSX.Element;
-        config: {
+        slot: {
             name: string;
         };
     };
     Content: {
         ({ children, className, ...props }: ExpandableContentProps): import("react/jsx-runtime").JSX.Element;
-        config: {
+        slot: {
             name: string;
         };
     };
 };
+declare const ExpandableSummary: {
+    ({ children, className, ...props }: ExpandableSummaryProps): import("react/jsx-runtime").JSX.Element;
+    slot: {
+        name: string;
+    };
+};
+declare const ExpandableContent: {
+    ({ children, className, ...props }: ExpandableContentProps): import("react/jsx-runtime").JSX.Element;
+    slot: {
+        name: string;
+    };
+};
 export default Expandable;
+export { Expandable, ExpandableContent, ExpandableSummary };

package/dist/components/Expandable/Expandable.js

@@ -26,9 +26,10 @@ const ExpandableSummary = ({ children, className, ...props }) => {
 const ExpandableContent = ({ children, className, ...props }) => {
     return (jsx("div", { className: clsx("coop-expandable--content", className), ...props, children: children }));
 };
-ExpandableSummary.config = { name: "ExpandableSummary" };
-ExpandableContent.config = { name: "ExpandableContent" };
+Expandable.slot = { name: "Expandable" };
+ExpandableSummary.slot = { name: "ExpandableSummary" };
+ExpandableContent.slot = { name: "ExpandableContent" };
 Expandable.Summary = ExpandableSummary;
 Expandable.Content = ExpandableContent;
 
-export { Expandable, Expandable as default };
+export { Expandable, ExpandableContent, ExpandableSummary, Expandable as default };

package/dist/components/Field/Field.context.d.ts

@@ -0,0 +1,14 @@
+export interface FieldConfig {
+    disabled: boolean;
+    id: string;
+    inline?: boolean;
+    suffix?: string;
+}
+export interface FieldContextValue {
+    disabled?: boolean;
+    id?: string;
+    inline?: boolean;
+    suffix?: string;
+}
+export declare const FieldContext: import("react").Context<FieldContextValue | null>;
+export declare const useField: () => FieldContextValue | null;

package/dist/components/Field/Field.context.js

@@ -0,0 +1,14 @@
+
+"use client";
+import { createContext, useContext } from 'react';
+
+const FieldContext = createContext(null);
+const useField = () => {
+    const context = useContext(FieldContext);
+    if (!context) {
+        return null;
+    }
+    return context;
+};
+
+export { FieldContext, useField };

package/dist/components/Field/Field.d.ts

@@ -19,25 +19,47 @@ interface FieldProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specify a custom React ref for this component. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare const Field: {
+declare const Field: {
     ({ boxed, children, className, error, hideErrorBar, ref, ...props }: FieldProps): import("react/jsx-runtime").JSX.Element;
+    slot: {
+        name: string;
+    };
     Label: {
         (props: LabelProps): import("react/jsx-runtime").JSX.Element;
-        config: {
+        slot: {
             name: string;
         };
     };
     Hint: {
         (props: HintProps): import("react/jsx-runtime").JSX.Element;
-        config: {
+        slot: {
             name: string;
         };
     };
     Error: {
         (props: ErrorProps): import("react/jsx-runtime").JSX.Element;
-        config: {
+        slot: {
             name: string;
         };
     };
 };
+declare const FieldLabel: {
+    (props: LabelProps): import("react/jsx-runtime").JSX.Element;
+    slot: {
+        name: string;
+    };
+};
+declare const FieldHint: {
+    (props: HintProps): import("react/jsx-runtime").JSX.Element;
+    slot: {
+        name: string;
+    };
+};
+declare const FieldError: {
+    (props: ErrorProps): import("react/jsx-runtime").JSX.Element;
+    slot: {
+        name: string;
+    };
+};
 export default Field;
+export { Field, FieldError, FieldHint, FieldLabel };

package/dist/components/Field/Field.js

@@ -1,11 +1,14 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React from 'react';
 import { useId } from '../../hooks/useId.js';
 import { useSlots } from '../../hooks/useSlots.js';
+import { getSlotProp } from '../../utils/index.js';
 import { Error } from '../FieldMarkers/Error.js';
 import { Hint } from '../FieldMarkers/Hint.js';
 import { Label } from '../FieldMarkers/Label.js';
+import { FieldContext } from './Field.context.js';
 
 const componentSlots = {
     Children: null,
@@ -15,57 +18,53 @@ const componentSlots = {
     FieldLabel: null,
 };
 const Field = ({ boxed = false, children, className, error = false, hideErrorBar = false, ref, ...props }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b;
     const slots = { ...useSlots(componentSlots, children) };
     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;
+    const internalId = useId();
+    const controlProps = {
+        disabled: false,
+        id: internalId,
+    };
     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;
+            //resolveComponentName(child)
+            var _a, _b, _c, _d;
+            if (child && typeof child === "object" && "type" in child) {
+                if (typeof (child === null || child === void 0 ? void 0 : child.type) === "function" && "slot" in child.type) {
+                    const { slot } = child === null || child === void 0 ? void 0 : child.type;
+                    slots.Control = child;
+                    if (slots.Control.props) {
+                        controlProps.inline = (_a = slot.inline) !== null && _a !== void 0 ? _a : false;
+                        controlProps.disabled = (_b = getSlotProp(slots.Control, "disabled")) !== null && _b !== void 0 ? _b : false;
+                        controlProps.id = (_c = getSlotProp(slots.Control, "id")) !== null && _c !== void 0 ? _c : controlProps.id;
+                        controlProps.suffix = (_d = slot.suffix) !== null && _d !== void 0 ? _d : undefined;
+                    }
+                    return false;
+                }
             }
             return true;
         });
     }
-    if (React.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.cloneElement(control, { id: controlId });
-    }
-    if (React.isValidElement(slots.FieldLabel) && !slots.FieldLabel.props.htmlFor) {
-        slots.FieldLabel = React.cloneElement(slots.FieldLabel, {
-            htmlFor: controlId + controlSuffix,
-        });
-    }
     const componentProps = {
         ...props,
-        "aria-disabled": controlDisabled || undefined,
-        className: clsx("coop-field", isInline && "coop-field-inline", className),
+        "aria-disabled": controlProps.disabled || undefined,
+        className: clsx("coop-field", controlProps.inline && "coop-field-inline", className),
         "data-boxed": boxed || undefined,
         "data-error": error || undefined,
         "data-hide-error": hideErrorBar || undefined,
     };
-    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] }));
+    return (jsx(FieldContext.Provider, { value: { ...controlProps }, children: jsxs("div", { ...componentProps, ref: ref, children: [!(controlProps === null || controlProps === void 0 ? void 0 : controlProps.inline) && 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, (controlProps === null || controlProps === void 0 ? void 0 : controlProps.inline) && hasMarkers && (jsxs("div", { className: "coop-field-markers", children: [slots.FieldLabel, slots.FieldHint, slots.FieldError] }))] })), slots.Children] }) }));
 };
 const FieldLabel = (props) => jsx(Label, { ...props });
 const FieldHint = (props) => jsx(Hint, { ...props });
 const FieldError = (props) => jsx(Error, { ...props });
-FieldLabel.config = { name: "FieldLabel" };
-FieldHint.config = { name: "FieldHint" };
-FieldError.config = { name: "FieldError" };
+Field.slot = { name: "Field" };
+FieldLabel.slot = { name: "FieldLabel" };
+FieldHint.slot = { name: "FieldHint" };
+FieldError.slot = { name: "FieldError" };
 Field.Label = FieldLabel;
 Field.Hint = FieldHint;
 Field.Error = FieldError;
 
-export { Field, Field as default };
+export { Field, FieldError, FieldHint, FieldLabel, Field as default };

package/dist/components/Field/index.js

@@ -1,4 +1,5 @@
 import { Field } from './Field.js';
+export { FieldError, FieldHint, FieldLabel } from './Field.js';
 
 
 

package/dist/components/FieldMarkers/Label.js

@@ -1,9 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
+import { useField } from '../Field/Field.context.js';
 
 const Label = ({ children, className, isVisible = true, ref, ...props }) => {
+    var _a, _b;
+    const field = useField();
     const componentProps = {
         className: clsx("coop-field-label", !isVisible && "sr-only", className),
+        htmlFor: (_a = props.htmlFor) !== null && _a !== void 0 ? _a : ((field === null || field === void 0 ? void 0 : field.id) ? field.id + ((_b = field === null || field === void 0 ? void 0 : field.suffix) !== null && _b !== void 0 ? _b : "") : undefined),
         ...props,
     };
     return (jsx("label", { ...componentProps, ref: ref, children: jsx("span", { children: children }) }));