@coopdigital/react 1.4.0 → 1.5.0

package/dist/components/Squircle/Squircle.d.ts

@@ -9,5 +9,11 @@ export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specify the Squircle size. */
     size?: "sm" | "md" | "lg";
 }
-export declare const Squircle: ({ children, className, ref, size, ...props }: SquircleProps) => JSX.Element;
+declare const Squircle: {
+    ({ children, className, ref, size, ...props }: SquircleProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
 export default Squircle;
+export { Squircle };

package/dist/components/Squircle/Squircle.js

@@ -10,5 +10,6 @@ const Squircle = ({ children, className, ref, size = "md", ...props }) => {
     };
     return (jsx("figure", { ...componentProps, ref: ref, children: jsx("figcaption", { children: children }) }));
 };
+Squircle.slot = { name: "Squircle" };
 
 export { Squircle, Squircle as default };

package/dist/components/Tag/Tag.d.ts

@@ -14,5 +14,11 @@ export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specify the Tag size. */
     size?: "sm" | "md";
 }
-export declare const Tag: ({ as, children, className, href, ref, size, ...props }: TagProps) => JSX.Element;
+declare const Tag: {
+    ({ as, children, className, href, ref, size, ...props }: TagProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
 export default Tag;
+export { Tag };

package/dist/components/Tag/Tag.js

@@ -12,5 +12,6 @@ const Tag = ({ as, children, className, href, ref, size = "md", ...props }) => {
     };
     return React.createElement(element, { ...componentProps, ref }, children);
 };
+Tag.slot = { name: "Tag" };
 
 export { Tag, Tag as default };

package/dist/components/TextInput/TextInput.d.ts

@@ -28,10 +28,11 @@ export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     /** **(Optional)** Specify the TextInput type. */
     type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url" | "date" | "datetime-local" | "week" | "month" | "time";
 }
-export declare const TextInput: {
+declare const TextInput: {
     ({ "aria-placeholder": ariaPlaceholder, className, disabled, error, id, name, placeholder, prefix, prefixInline, ref, size, suffix, suffixInline, type, ...props }: TextInputProps): JSX.Element;
-    config: {
-        isField: true;
+    slot: {
+        name: string;
     };
 };
 export default TextInput;
+export { TextInput };

package/dist/components/TextInput/TextInput.js

@@ -1,17 +1,19 @@
+
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId } from '../../hooks/useId.js';
+import { useField } from '../Field/Field.context.js';
 
 const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, error = false, id, name, placeholder, prefix, prefixInline = false, ref, size, suffix, suffixInline = false, type = "text", ...props }) => {
     var _a;
-    const uid = useId(id);
+    const field = useField();
     const componentProps = {
         "aria-placeholder": (_a = placeholder !== null && placeholder !== void 0 ? placeholder : ariaPlaceholder) !== null && _a !== void 0 ? _a : undefined,
         className: clsx("coop-text-input", "coop-field-element", className),
         "data-error": error || undefined,
         "data-size": (size === null || size === void 0 ? void 0 : size.length) ? size : undefined,
         disabled,
-        id: uid,
+        id: id !== null && id !== void 0 ? id : field === null || field === void 0 ? void 0 : field.id,
         name,
         placeholder,
         type,
@@ -26,8 +28,6 @@ const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, e
     //const formItemProps = { "aria-disabled": disabled ? true : undefined }
     return (jsxs("div", { className: "coop-text-input-wrapper", children: [prefix && jsx("span", { ...prefixProps, children: prefix }), jsx("input", { ...componentProps, ref: ref }), suffix && jsx("span", { ...suffixProps, children: suffix })] }));
 };
-TextInput.config = {
-    isField: true,
-};
+TextInput.slot = { name: "TextInput" };
 
 export { TextInput, TextInput as default };

package/dist/components/Textarea/Textarea.d.ts

@@ -31,10 +31,11 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
     /** **(Optional)** Specify the Textarea size. */
     size?: StandardSizes;
 }
-export declare const Textarea: {
+declare const Textarea: {
     ({ "aria-placeholder": ariaPlaceholder, className, cols, counter, cutoff, disabled, error, id, maxLength, name, onChange: userOnChange, placeholder, ref, rows, size, ...props }: TextareaProps): JSX.Element;
-    config: {
-        isField: true;
+    slot: {
+        name: string;
     };
 };
 export default Textarea;
+export { Textarea };

package/dist/components/Textarea/Textarea.js

@@ -4,7 +4,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useState } from 'react';
 import { useDebounce } from '../../hooks/useDebounce.js';
-import { useId } from '../../hooks/useId.js';
+import { useField } from '../Field/Field.context.js';
 
 const DEBOUNCE_DELAY = 750;
 const charCountMessage = (remaining) => {
@@ -12,7 +12,7 @@ const charCountMessage = (remaining) => {
 };
 const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, counter = false, cutoff = false, disabled = false, error = false, id, maxLength, name, onChange: userOnChange = undefined, placeholder, ref, rows = 4, size, ...props }) => {
     var _a;
-    const uid = useId(id);
+    const field = useField();
     const componentProps = {
         "aria-placeholder": (_a = placeholder !== null && placeholder !== void 0 ? placeholder : ariaPlaceholder) !== null && _a !== void 0 ? _a : undefined,
         className: clsx("coop-textarea", "coop-field-element", className),
@@ -20,7 +20,7 @@ const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, c
         "data-error": error !== null && error !== void 0 ? 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,
         maxLength: cutoff ? maxLength : undefined,
         name,
         placeholder,
@@ -37,8 +37,6 @@ const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, c
     // const formItemProps = { "aria-disabled": disabled ? true : undefined }
     return (jsxs("div", { className: "coop-textarea-wrapper", children: [jsx("textarea", { ...componentProps, onChange: handleChange, ref: ref }), showCounter && (jsxs(Fragment, { children: [jsx("small", { "aria-hidden": "true", className: "coop-textarea-counter", ...(remaining < 0 && { "data-error": true }), children: charCountMessage(remaining) }), jsx("span", { "aria-live": "polite", className: "sr-only", children: charCountMessage(debouncedRemaining) })] }))] }));
 };
-Textarea.config = {
-    isField: true,
-};
+Textarea.slot = { name: "Textarea" };
 
 export { Textarea, Textarea as default };

package/dist/components/ValidationSummary/ValidationSummary.d.ts

@@ -48,25 +48,47 @@ interface ValidationSummaryErrorsProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Content inside the Errors. */
     errors?: Record<string, FieldError>;
 }
-export declare const ValidationSummary: {
+declare const ValidationSummary: {
     ({ autoScroll, children, className, forceMount, ref, ...props }: ValidationSummaryProps): JSX.Element | null;
+    slot: {
+        name: string;
+    };
     Heading: {
         ({ as, children, className, }: ValidationSummaryHeadingProps): JSX.Element;
-        config: {
+        slot: {
             name: string;
         };
     };
     Prompt: {
         ({ children, }: ValidationSummaryPromptProps): JSX.Element;
-        config: {
+        slot: {
             name: string;
         };
     };
     Errors: {
         ({ errors }: ValidationSummaryErrorsProps): JSX.Element | null;
-        config: {
+        slot: {
             name: string;
         };
     };
 };
+declare const ValidationSummaryHeading: {
+    ({ as, children, className, }: ValidationSummaryHeadingProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
+declare const ValidationSummaryPrompt: {
+    ({ children, }: ValidationSummaryPromptProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
+declare const ValidationSummaryErrors: {
+    ({ errors }: ValidationSummaryErrorsProps): JSX.Element | null;
+    slot: {
+        name: string;
+    };
+};
 export default ValidationSummary;
+export { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, };

package/dist/components/ValidationSummary/ValidationSummary.js

@@ -1,11 +1,12 @@
+
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import mergeRefs from '../../node_modules/merge-refs/dist/index.js';
+import mergeRefs from 'merge-refs';
 import React, { useRef, useEffect } from 'react';
 import { useSlots } from '../../hooks/useSlots.js';
 import { sanitizeFieldId, getFieldElement } from './validationsummary-utils.js';
 
-/* eslint-disable jsx-a11y/anchor-is-valid */
 const componentSlots = {
     Children: null,
     ValidationSummaryErrors: null,
@@ -67,11 +68,12 @@ const ValidationSummaryErrors = ({ errors }) => {
                         }, children: error.message }) }, field));
             }) }) })) : null;
 };
-ValidationSummaryHeading.config = { name: "ValidationSummaryHeading" };
-ValidationSummaryPrompt.config = { name: "ValidationSummaryPrompt" };
-ValidationSummaryErrors.config = { name: "ValidationSummaryErrors" };
+ValidationSummary.slot = { name: "ValidationSummary" };
+ValidationSummaryHeading.slot = { name: "ValidationSummaryHeading" };
+ValidationSummaryPrompt.slot = { name: "ValidationSummaryPrompt" };
+ValidationSummaryErrors.slot = { name: "ValidationSummaryErrors" };
 ValidationSummary.Heading = ValidationSummaryHeading;
 ValidationSummary.Prompt = ValidationSummaryPrompt;
 ValidationSummary.Errors = ValidationSummaryErrors;
 
-export { ValidationSummary, ValidationSummary as default };
+export { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummary as default };

package/dist/hooks/useSlots.d.ts

@@ -1,8 +1,10 @@
 import React from "react";
-import { ReactNodeWithConfig } from "../types";
+import { LazyComponent } from "../types";
 type Slots<T> = Record<keyof T, React.ReactNode>;
 export declare function isKey<T extends object>(x: T, k: PropertyKey): k is keyof T;
-export declare function getSlotName(node: ReactNodeWithConfig): string | false;
+export declare function isLazy<T extends React.ComponentType<any>>(type: unknown): type is LazyComponent<T>;
+export declare function resolveComponentName(child: React.ReactNode): string | null;
+export declare function getSlotName(node: React.ReactNode): string | false;
 export declare function useSlots<T>(componentSlots: Slots<T>, children: React.ReactNode, options?: {
     collect?: string[];
 }): Slots<T>;

package/dist/hooks/useSlots.js

@@ -3,13 +3,39 @@ import React from 'react';
 function isKey(x, k) {
     return k in x;
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isLazy(type) {
+    return typeof type === "object" && type !== null && "_payload" in type && "_init" in type;
+}
+function resolveComponentName(child) {
+    var _a, _b, _c, _d;
+    if (child && typeof child === "object" && "type" in child) {
+        const type = child.type;
+        if (isLazy(type)) {
+            try {
+                const resolved = type._init(type._payload);
+                if ("slot" in resolved)
+                    return resolved.slot.name;
+                return (_b = (_a = resolved.displayName) !== null && _a !== void 0 ? _a : resolved.name) !== null && _b !== void 0 ? _b : null;
+            }
+            catch (_e) {
+                // _init throws a Promise if the payload is still pending
+                return null;
+            }
+        }
+        if (typeof type === "function") {
+            if ("slot" in type)
+                return type.slot.name;
+            return (_d = (_c = type.displayName) !== null && _c !== void 0 ? _c : type.name) !== null && _d !== void 0 ? _d : null;
+        }
+    }
+    return null;
+}
 function getSlotName(node) {
-    var _a, _b, _c;
-    if (React.isValidElement(node) &&
-        node.type &&
-        typeof node.type !== "string" &&
-        typeof node.type !== "symbol") {
-        return (_c = (_b = (_a = node.type) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : node.type.name;
+    const slotName = resolveComponentName(node);
+    if (slotName) {
+        return slotName.replaceAll(".", "");
+        // return root && !safeName.startsWith(root) ? root + safeName : safeName
     }
     return false;
 }
@@ -32,4 +58,4 @@ function useSlots(componentSlots, children, options) {
     }, { ...componentSlots });
 }
 
-export { getSlotName, isKey, useSlots };
+export { getSlotName, isKey, isLazy, resolveComponentName, useSlots };

package/dist/index.js

@@ -1,25 +1,25 @@
-export { AlertBanner } from './components/AlertBanner/AlertBanner.js';
+export { AlertBanner, AlertBannerHeading } from './components/AlertBanner/AlertBanner.js';
 export { Author } from './components/Author/Author.js';
 export { Button } from './components/Button/Button.js';
-export { Card } from './components/Card/Card.js';
+export { Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel } from './components/Card/Card.js';
 export { Checkbox } from './components/Checkbox/Checkbox.js';
 export { DatePicker } from './components/DatePicker/DatePicker.js';
-export { Expandable } from './components/Expandable/Expandable.js';
-export { Field } from './components/Field/Field.js';
-export { Fieldset } from './components/Fieldset/Fieldset.js';
+export { Expandable, ExpandableContent, ExpandableSummary } from './components/Expandable/Expandable.js';
+export { Field, FieldError, FieldHint, FieldLabel } from './components/Field/Field.js';
+export { Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend } from './components/Fieldset/Fieldset.js';
 export { Flourish } from './components/Flourish/Flourish.js';
 export { Form } from './components/Form/Form.js';
 export { Image } from './components/Image/Image.js';
-export { Pill } from './components/Pill/Pill.js';
-export { Popover } from './components/Popover/Popover.js';
+export { Pill, PillBadge } from './components/Pill/Pill.js';
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from './components/Popover/Popover.js';
 export { Radio } from './components/Radio/Radio.js';
 export { RootSVG } from './components/RootSVG/RootSVG.js';
-export { Searchbox } from './components/Searchbox/Searchbox.js';
-export { Select } from './components/Select/Select.js';
+export { Searchbox, SearchboxButton, SearchboxInput } from './components/Searchbox/Searchbox.js';
+export { Select, SelectOption, SelectOptionGroup } from './components/Select/Select.js';
 export { Signpost } from './components/Signpost/Signpost.js';
 export { SkipNav } from './components/SkipNav/SkipNav.js';
 export { Squircle } from './components/Squircle/Squircle.js';
 export { Tag } from './components/Tag/Tag.js';
 export { Textarea } from './components/Textarea/Textarea.js';
 export { TextInput } from './components/TextInput/TextInput.js';
-export { ValidationSummary } from './components/ValidationSummary/ValidationSummary.js';
+export { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt } from './components/ValidationSummary/ValidationSummary.js';

package/dist/types/index.d.ts

@@ -1,16 +1,16 @@
 export type StandardSizes = "sm" | "md" | "lg";
-export type FormFieldError = {
-    message?: string;
-    type?: string;
-} | boolean | null | undefined;
-export type ReactNodeWithConfig = (React.ReactNode & {
-    type?: {
-        config?: ComponentConfig;
-    };
-}) | undefined | null;
-export interface ComponentConfig {
-    fieldSuffix?: string;
-    isField?: boolean;
-    isInline?: boolean;
-    name?: string;
+export interface SlotConfig {
+    field?: boolean;
+    inline?: boolean;
+    name: string;
+    suffix?: string;
 }
+export interface LazyPayload<T> {
+    default: T;
+}
+export interface LazyComponent<T extends React.ComponentType<any>> {
+    _init: (payload: unknown) => T;
+    _payload: Promise<LazyPayload<T>> | LazyPayload<T>;
+    $$typeof: typeof REACT_LAZY_TYPE;
+}
+export declare const REACT_LAZY_TYPE: unique symbol;

package/dist/utils/index.d.ts

@@ -2,3 +2,4 @@ export declare const bgPropToClass: (color: string, userClasses?: string) => str
 export declare const hasUserBg: (userClasses?: string) => boolean;
 export declare const hasUserBorder: (userClasses?: string) => boolean;
 export declare const bgClassToColor: (userClasses: string) => string | null;
+export declare function getSlotProp<R = unknown>(slot: React.ReactNode, prop: string): R | undefined;

package/dist/utils/index.js

@@ -1,3 +1,5 @@
+import { isValidElement } from 'react';
+
 const hasUserBg = (userClasses) => {
     return typeof userClasses === "string" && (userClasses === null || userClasses === void 0 ? void 0 : userClasses.includes("bg-")) ? true : false;
 };
@@ -7,12 +9,12 @@ const hasUserBorder = (userClasses) => {
 const bgClassToColor = (userClasses) => {
     var _a, _b;
     return (_b = (_a = /bg-([^\s]+)/.exec(userClasses)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : null;
-    // return (
-    //   userClasses
-    //     .split(" ")
-    //     .find((c) => c.startsWith("bg"))
-    //     ?.replace("bg-", "") ?? ""
-    // )
 };
+function getSlotProp(slot, prop) {
+    if (isValidElement(slot) && prop in slot.props) {
+        return slot.props[prop];
+    }
+    return undefined;
+}
 
-export { bgClassToColor, hasUserBg, hasUserBorder };
+export { bgClassToColor, getSlotProp, hasUserBg, hasUserBorder };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -47,6 +47,7 @@
     "build": "tsx scripts build",
     "build:docs": "tsx scripts build-docs",
     "build:icons": "tsx scripts build-icons",
+    "build:manifest": "tsx scripts build-manifest",
     "build:storybook": "storybook build --disable-telemetry",
     "build:storybook:test": "storybook build --test --disable-telemetry --output-dir storybook-test",
     "serve:storybook:test": "serve -p 9000 ./storybook-test",
@@ -61,10 +62,10 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.11.3",
     "@playwright/test": "^1.60.0",
-    "@storybook/addon-a11y": "^10.4.0",
-    "@storybook/addon-docs": "^10.4.0",
-    "@storybook/addon-onboarding": "^10.4.0",
-    "@storybook/react-vite": "^10.4.0",
+    "@storybook/addon-a11y": "^10.4.1",
+    "@storybook/addon-docs": "^10.4.1",
+    "@storybook/addon-onboarding": "^10.4.1",
+    "@storybook/react-vite": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.15",
@@ -73,7 +74,7 @@
     "react-dom": "^19.2.6",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.6",
-    "storybook": "^10.4.0",
+    "storybook": "^10.4.1",
     "storybook-addon-tag-badges": "^3.1.0"
   },
   "peerDependencies": {
@@ -84,11 +85,11 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.3.1",
+    "@coopdigital/styles": "^1.3.2",
     "@radix-ui/react-popover": "^1.1.15",
     "clsx": "^2.1.1",
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.0"
   },
-  "gitHead": "1f09d7d3de31cb2a72cbfbb980883feb8b9c2d22"
+  "gitHead": "15c4578e9debb09061027e27e0d6772c2c918d96"
 }

package/src/components/AlertBanner/AlertBanner.tsx

@@ -20,7 +20,7 @@ interface AlertBannerHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
   className?: string
 }
 
-export const AlertBanner = ({
+const AlertBanner = ({
   children,
   className,
   ref,
@@ -44,8 +44,11 @@ const AlertBannerHeading = ({ children, className }: AlertBannerHeadingProps): J
   return <h2 className={className}>{children}</h2>
 }
 
-AlertBannerHeading.config = { name: "AlertBannerHeading" }
+AlertBanner.slot = { name: "AlertBanner" }
+AlertBannerHeading.slot = { name: "AlertBannerHeading" }
 
 AlertBanner.Heading = AlertBannerHeading
 
 export default AlertBanner
+
+export { AlertBanner, AlertBannerHeading }

package/src/components/Author/Author.tsx

@@ -21,7 +21,7 @@ export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
   size?: "sm" | "md"
 }
 
-export const Author = ({
+const Author = ({
   author = "Co-op team",
   className,
   date,
@@ -58,4 +58,7 @@ export const Author = ({
   )
 }
 
+Author.slot = { name: "Author" }
+
 export default Author
+export { Author }

package/src/components/Button/Button.tsx

@@ -40,7 +40,7 @@ type OnClickHandler =
   | React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>
   | ((event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => Promise<void>)
 
-export const Button = ({
+const Button = ({
   as,
   children,
   className,
@@ -102,4 +102,8 @@ export const Button = ({
 
   return React.createElement(element, { ...componentProps, ref }, finalChildren)
 }
+
+Button.slot = { name: "Button" }
+
 export default Button
+export { Button }

package/src/components/Card/Card.tsx

@@ -82,7 +82,7 @@ function getCardLinkElement(as: CardProps["hrefAs"], href?: string) {
   }
 }
 
-export const Card = ({
+const Card = ({
   chevron = false,
   children,
   className,
@@ -162,11 +162,12 @@ const CardImage = (props: CardImageProps) => {
   return <Image {...{ ...props, crop: props.crop ?? "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
@@ -175,3 +176,4 @@ Card.Body = CardBody
 Card.Image = CardImage
 
 export default Card
+export { Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel }

package/src/components/Checkbox/Checkbox.tsx

@@ -1,9 +1,10 @@
+"use client"
 import type { InputHTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
-import { ComponentConfig, StandardSizes } from "../../../src/types"
-import { useId } from "../../hooks/useId"
+import { StandardSizes } from "../../../src/types"
+import { useField } from "../Field/Field.context"
 
 export interface CheckboxProps extends Omit<
   InputHTMLAttributes<HTMLInputElement>,
@@ -25,7 +26,7 @@ export interface CheckboxProps extends Omit<
   size?: StandardSizes
 }
 
-export const Checkbox = ({
+const Checkbox = ({
   className,
   disabled,
   error = false,
@@ -35,13 +36,14 @@ export const Checkbox = ({
   size,
   ...props
 }: CheckboxProps): JSX.Element => {
-  const uid = useId(id)
+  const field = useField()
+
   const componentProps = {
     className: clsx("coop-checkbox", "coop-field-element", className),
     "data-error": error || undefined,
     "data-size": size ?? undefined,
     disabled,
-    id: uid,
+    id: id ?? field?.id,
     name,
     type: "checkbox",
     ...props,
@@ -50,9 +52,11 @@ export const Checkbox = ({
   return <input {...componentProps} ref={ref} />
 }
 
-Checkbox.config = {
-  isField: true,
-  isInline: true,
-} satisfies ComponentConfig
+Checkbox.slot = {
+  field: true,
+  inline: true,
+  name: "Checkbox",
+}
 
 export default Checkbox
+export { Checkbox }