@coopdigital/react 0.45.0 → 0.46.0

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

@@ -1,8 +1,8 @@
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ForwardRefExoticComponent, JSX } from "react";
+import type { ButtonHTMLAttributes, ForwardRefExoticComponent, JSX, Ref } from "react";
 import React from "react";
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** **(Optional)** Specify a custom element to override default `a` or `button`. */
-    as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
+    as?: React.FC<any> | ForwardRefExoticComponent<any> | string;
     /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
     children?: React.ReactNode;
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
@@ -18,11 +18,13 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** **(Optional)** Specify text to show when the Button is in a loading state. */
     loadingText?: string;
     /** **(Optional)** Callback to run when the button is pressed. If this is an async function, it will be awaited and the button will be in a pending state until the promise is resolved. */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
     /** **(Optional)** Specify the Button size. */
     size?: "sm" | "md" | "lg";
     /** **(Optional)** Specify the Button variant. */
     variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost" | "text";
 }
-export declare const Button: ({ as, children, className, href, isDisabled, isFullWidth, isLoading, loadingText, onClick, size, variant, ...props }: ButtonProps) => JSX.Element;
+export declare const Button: ({ as, children, className, href, isDisabled, isFullWidth, isLoading, loadingText, onClick, ref, size, variant, ...props }: ButtonProps) => JSX.Element;
 export default Button;

package/dist/components/Button/Button.js

@@ -5,11 +5,8 @@ import clsx from 'clsx';
 import React, { useState, useCallback } from 'react';
 import { LoadingIcon } from '../Icon/LoadingIcon.js';
 
-const Button = ({ as, children, className, href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, size = "md", variant = "green", ...props }) => {
-    let element = href ? "a" : "button";
-    if (as) {
-        element = as;
-    }
+const Button = ({ as, children, className, href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, ref, size = "md", variant = "green", ...props }) => {
+    const element = as !== null && as !== void 0 ? as : (href ? "a" : "button");
     const [isPending, setIsPending] = useState(false);
     const handleClick = useCallback(async (event) => {
         if (isPending || !onClick)
@@ -31,7 +28,8 @@ const Button = ({ as, children, className, href, isDisabled = false, isFullWidth
         "data-variant": variant !== "text" ? variant : undefined,
         "data-width": isFullWidth ? "full" : undefined,
         href,
-        onClick: handleClick,
+        onClick: onClick ? handleClick : undefined,
+        ref,
         ...props,
     };
     const finalChildren = isPending || isLoading ? (jsxs(Fragment, { children: [loadingText, jsx(LoadingIcon, {})] })) : (children);

package/dist/components/Card/Card.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React from 'react';
-import { getSlots } from '../../utils/slots.js';
+import { useSlots } from '../../hooks/useSlots.js';
 import { ChevronRightIcon } from '../Icon/ChevronRightIcon.js';
 import { Image } from '../Image/Image.js';
 
@@ -24,7 +24,7 @@ function getCardLinkElement(as, href) {
 }
 const Card = ({ chevron = false, children, className, href, hrefAs, imagePosition = "left", orientation = "vertical", ...props }) => {
     const { element: linkElement, props: linkProps } = getCardLinkElement(hrefAs, href);
-    const slots = getSlots(componentSlots, children);
+    const slots = { ...useSlots(componentSlots, children) };
     const innerProps = { className: "coop-card--inner" };
     const hasLinkWrapper = href && !slots.CardHeading;
     const componentProps = {

package/dist/components/Expandable/Expandable.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
+import { useSlots } from '../../hooks/useSlots.js';
 import { hasUserBg, bgClassToColor } from '../../utils/index.js';
-import { getSlots } from '../../utils/slots.js';
 import 'react';
 import { ChevronDownIcon } from '../Icon/ChevronDownIcon.js';
 
@@ -10,7 +10,7 @@ const componentSlots = {
     ExpandableSummary: null,
 };
 const Expandable = ({ children, className, ...props }) => {
-    const slots = getSlots(componentSlots, children);
+    const slots = useSlots(componentSlots, children);
     const componentProps = {
         className: clsx("coop-expandable", !hasUserBg(className) && "bg-tint-grey", className),
         ...props,

package/dist/components/Field/Field.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React from 'react';
 import { useId } from '../../hooks/useId.js';
-import { getSlots } from '../../utils/slots.js';
+import { useSlots } from '../../hooks/useSlots.js';
 import { Error } from '../FieldMarkers/Error.js';
 import { Hint } from '../FieldMarkers/Hint.js';
 import { Label } from '../FieldMarkers/Label.js';
@@ -14,15 +14,15 @@ const componentSlots = {
     FieldError: null,
     FieldHint: null,
     FieldLabel: null,
-    RadioButton: null,
+    Radio: null,
     Textarea: null,
     TextInput: null,
 };
 const standardFields = ["Children", "FieldError", "FieldHint", "FieldLabel"];
-const inlineFields = ["Checkbox", "RadioButton"];
+const inlineFields = ["Checkbox", "Radio"];
 const Root = ({ boxed = false, children, className, error = false, hideErrorBar = false, ...props }) => {
     var _a, _b, _c, _d, _e, _f;
-    const slots = getSlots(componentSlots, children);
+    const slots = { ...useSlots(componentSlots, children) };
     const slotsArray = Object.entries(slots);
     const uid = useId();
     const isInlineControl = slotsArray.some((s) => s[1] !== null && inlineFields.includes(s[0]));

package/dist/components/Pill/Pill.js

@@ -1,8 +1,8 @@
 import { jsx } 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 { getSlots } from '../../utils/slots.js';
 
 const componentSlots = {
     Children: null,
@@ -10,7 +10,7 @@ const componentSlots = {
 };
 const Pill = ({ as, children, className, href, size = "md", ...props }) => {
     let element = href ? "a" : "span";
-    const slots = getSlots(componentSlots, children);
+    const slots = useSlots(componentSlots, children);
     if (as) {
         element = as;
     }

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

@@ -0,0 +1,18 @@
+import { type InputHTMLAttributes, type JSX } from "react";
+import { StandardSizes } from "src/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 the Radio size. */
+    size?: StandardSizes;
+}
+export declare const Radio: ({ className, disabled, error, id, name, size, ...props }: RadioProps) => JSX.Element;
+export default Radio;

package/dist/components/{RadioButton/RadioButton.js → Radio/Radio.js}

@@ -2,11 +2,11 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useId } from 'react';
 
-const RadioButton = ({ className, disabled, error = false, id, name, size = "md", ...props }) => {
+const Radio = ({ className, disabled, error = false, id, name, size = "md", ...props }) => {
     const internalId = useId();
     id = id !== null && id !== void 0 ? id : internalId;
     const componentProps = {
-        className: clsx("coop-radio-button", className),
+        className: clsx("coop-radio", className),
         "data-error": error || undefined,
         "data-size": size.length && size !== "md" ? size : undefined,
         disabled,
@@ -19,4 +19,4 @@ const RadioButton = ({ className, disabled, error = false, id, name, size = "md"
     return jsx("input", { ...componentProps });
 };
 
-export { RadioButton, RadioButton as default };
+export { Radio, Radio as default };

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

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

package/dist/components/{SearchBox/SearchBox.d.ts → Searchbox/Searchbox.d.ts}

@@ -1,8 +1,8 @@
 import type { InputHTMLAttributes, JSX } from "react";
 import React from "react";
-import { StandardSizes } from "../../../src/types";
+import { StandardSizes } from "../../types";
 import { type ButtonProps } from "../Button";
-export interface SearchBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+export interface SearchboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
     /** **(Optional)** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
     action?: string;
     /** **(Optional)** Specify props to forward to the Button element. Use `label` to set Button text. */
@@ -19,14 +19,14 @@ export interface SearchBoxProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     labelVisible?: boolean;
     /** **(Optional)** Specify the TextInput name, also used as the URL search parameter. Defaults to `query`. */
     name?: string;
-    /** **(Optional)** Callback to run when the form is submitted. If this is an async function, it will be awaited and the SearchBox will be in a pending state until the promise is resolved. */
+    /** **(Optional)** Callback to run when the form is submitted. If this is an async function, it will be awaited and the Searchbox will be in a pending state until the promise is resolved. */
     onSubmit?: React.FormEventHandler<HTMLElement> | undefined;
     /** **(Optional)** Specify the TextInput placeholder text Do not use in place of a form label. */
     placeholder?: string;
-    /** **(Optional)** Specify the SearchBox size. */
+    /** **(Optional)** Specify the Searchbox size. */
     size?: StandardSizes;
-    /** **(Optional)** Specify the SearchBox variant. */
+    /** **(Optional)** Specify the Searchbox variant. */
     variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost";
 }
-export declare const SearchBox: ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize, autoComplete, button, className, id, label, labelVisible, name, onSubmit, placeholder, size, variant, ...props }: SearchBoxProps) => JSX.Element;
-export default SearchBox;
+export declare const Searchbox: ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize, autoComplete, button, className, id, label, labelVisible, name, onSubmit, placeholder, size, variant, ...props }: SearchboxProps) => JSX.Element;
+export default Searchbox;

package/dist/components/{SearchBox/SearchBox.js → Searchbox/Searchbox.js}

@@ -12,7 +12,7 @@ const defaultButtonProps = {
     label: React.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
     loadingText: "",
 };
-const SearchBox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize = "off", autoComplete = "off", button = defaultButtonProps, className, id, label, labelVisible = false, name = "query", onSubmit, placeholder, size = "md", variant = "green", ...props }) => {
+const Searchbox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize = "off", autoComplete = "off", button = defaultButtonProps, className, id, label, labelVisible = false, name = "query", onSubmit, placeholder, size = "md", variant = "green", ...props }) => {
     var _a, _b;
     const [isPending, setIsPending] = useState(false);
     const internalId = useId();
@@ -31,7 +31,7 @@ const SearchBox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize
     }, [onSubmit, isPending]);
     const formProps = {
         action: action !== null && action !== void 0 ? action : undefined,
-        className: clsx("coop-search-box", className),
+        className: clsx("coop-searchbox", className),
         "data-size": size && size !== "md" ? size : undefined,
         "data-variant": variant.length && variant !== "green" ? variant : undefined,
         onSubmit: onSubmit ? handleSubmit : undefined,
@@ -54,7 +54,7 @@ const SearchBox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize
         type: "search",
         ...props,
     };
-    return (jsxs("form", { ...formProps, children: [label && (jsx(Label, { htmlFor: id, isVisible: labelVisible, children: label })), jsxs("div", { className: "coop-search-box--inner", children: [jsx(TextInput, { ...inputProps }), jsx(Button, { ...buttonProps, children: button.label })] })] }));
+    return (jsxs("form", { ...formProps, children: [label && (jsx(Label, { htmlFor: id, isVisible: labelVisible, children: label })), jsxs("div", { className: "coop-searchbox--inner", children: [jsx(TextInput, { ...inputProps }), jsx(Button, { ...buttonProps, children: button.label })] })] }));
 };
 
-export { SearchBox, SearchBox as default };
+export { Searchbox, Searchbox as default };

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

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

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

@@ -20,7 +20,7 @@ export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     /** **(Optional)** Specify the suffix. It can be any valid JSX or string. */
     suffix?: React.ReactNode;
     /** **(Optional)** Specify the TextInput type. */
-    type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url";
+    type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url" | "date" | "datetime-local" | "week" | "month" | "time";
 }
 export declare const TextInput: ({ "aria-placeholder": ariaPlaceholder, className, disabled, error, id, name, placeholder, prefix, size, suffix, type, ...props }: TextInputProps) => JSX.Element;
 export default TextInput;

package/dist/{utils/slots.d.ts → hooks/useSlots.d.ts}

@@ -2,7 +2,7 @@ import React from "react";
 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: React.ReactNode): string | false;
-export declare function getSlots<T>(componentSlots: Slots<T>, children: React.ReactNode, options?: {
+export declare function useSlots<T>(componentSlots: Slots<T>, children: React.ReactNode, options?: {
     collect?: string[];
 }): Slots<T>;
 export {};

package/dist/{utils/slots.js → hooks/useSlots.js}

@@ -8,7 +8,7 @@ function getSlotName(node) {
         ? node.type.name
         : false;
 }
-function getSlots(componentSlots, children, options) {
+function useSlots(componentSlots, children, options) {
     return React.Children.toArray(children).reduce((slots, child) => {
         var _a;
         const slotName = getSlotName(child);
@@ -27,4 +27,4 @@ function getSlots(componentSlots, children, options) {
     }, { ...componentSlots });
 }
 
-export { getSlotName, getSlots, isKey };
+export { getSlotName, isKey, useSlots };

package/dist/index.d.ts

@@ -9,9 +9,9 @@ export * from "./components/Fieldset";
 export * from "./components/Flourish";
 export * from "./components/Image";
 export * from "./components/Pill";
-export * from "./components/RadioButton";
+export * from "./components/Radio";
 export * from "./components/RootSVG";
-export * from "./components/SearchBox";
+export * from "./components/Searchbox";
 export * from "./components/Signpost";
 export * from "./components/SkipNav";
 export * from "./components/Squircle";

package/dist/index.js

@@ -9,9 +9,9 @@ export { Fieldset, FieldsetFields } from './components/Fieldset/Fieldset.js';
 export { Flourish } from './components/Flourish/Flourish.js';
 export { Image } from './components/Image/Image.js';
 export { Pill } from './components/Pill/Pill.js';
-export { RadioButton } from './components/RadioButton/RadioButton.js';
+export { Radio } from './components/Radio/Radio.js';
 export { RootSVG } from './components/RootSVG/RootSVG.js';
-export { SearchBox } from './components/SearchBox/SearchBox.js';
+export { Searchbox } from './components/Searchbox/Searchbox.js';
 export { Signpost } from './components/Signpost/Signpost.js';
 export { SkipNav } from './components/SkipNav/SkipNav.js';
 export { Squircle } from './components/Squircle/Squircle.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.45.0",
+  "version": "0.46.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -78,8 +78,8 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.39.0",
+    "@coopdigital/styles": "^0.40.0",
     "clsx": "^2.1.1"
   },
-  "gitHead": "113b5fc44feee8b4e899c75c303f1ed26f9f2629"
+  "gitHead": "9020e79195ead8270e9a2c39209142a02160bae5"
 }

package/src/components/Button/Button.tsx

@@ -1,11 +1,6 @@
 "use client"
 
-import type {
-  AnchorHTMLAttributes,
-  ButtonHTMLAttributes,
-  ForwardRefExoticComponent,
-  JSX,
-} from "react"
+import type { ButtonHTMLAttributes, ForwardRefExoticComponent, JSX, Ref } from "react"
 
 import clsx from "clsx"
 import React, { useCallback, useState } from "react"
@@ -15,7 +10,7 @@ import { LoadingIcon } from "../Icon"
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `button`. */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
+  as?: React.FC<any> | ForwardRefExoticComponent<any> | string
   /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
   children?: React.ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
@@ -31,7 +26,9 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** **(Optional)** Specify text to show when the Button is in a loading state. */
   loadingText?: string
   /** **(Optional)** Callback to run when the button is pressed. If this is an async function, it will be awaited and the button will be in a pending state until the promise is resolved. */
-  onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void
+  onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>
   /** **(Optional)** Specify the Button size. */
   size?: "sm" | "md" | "lg"
   /** **(Optional)** Specify the Button variant. */
@@ -61,14 +58,12 @@ export const Button = ({
   isLoading = false,
   loadingText = "Loading",
   onClick,
+  ref,
   size = "md",
   variant = "green",
   ...props
 }: ButtonProps): JSX.Element => {
-  let element: ButtonProps["as"] = href ? "a" : "button"
-  if (as) {
-    element = as
-  }
+  const element: ButtonProps["as"] = as ?? (href ? "a" : "button")
 
   const [isPending, setIsPending] = useState(false)
 
@@ -79,7 +74,7 @@ export const Button = ({
       setIsPending(true)
 
       try {
-        await Promise.resolve(onClick(event as React.MouseEvent<HTMLButtonElement>))
+        await Promise.resolve(onClick(event))
       } finally {
         setIsPending(false)
       }
@@ -96,7 +91,8 @@ export const Button = ({
     "data-variant": variant !== "text" ? variant : undefined,
     "data-width": isFullWidth ? "full" : undefined,
     href,
-    onClick: handleClick,
+    onClick: onClick ? handleClick : undefined,
+    ref,
     ...props,
   }
 

package/src/components/Card/Card.tsx

@@ -3,7 +3,7 @@ import type { ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
 import clsx from "clsx"
 import React from "react"
 
-import { getSlots } from "../../utils/slots"
+import { useSlots } from "../../hooks/useSlots"
 import { ChevronRightIcon } from "../Icon/ChevronRightIcon"
 import { Image, ImageProps } from "../Image"
 
@@ -91,8 +91,7 @@ export const Card = ({
 }: CardProps): JSX.Element => {
   const { element: linkElement, props: linkProps } = getCardLinkElement(hrefAs, href)
 
-  const slots = getSlots(componentSlots, children)
-
+  const slots = { ...useSlots(componentSlots, children) }
   const innerProps = { className: "coop-card--inner" }
   const hasLinkWrapper = href && !slots.CardHeading
 

package/src/components/Expandable/Expandable.tsx

@@ -2,8 +2,8 @@ import type { DetailsHTMLAttributes, HTMLAttributes, JSX } from "react"
 
 import { clsx } from "clsx"
 
+import { useSlots } from "../../hooks/useSlots"
 import { bgClassToColor, hasUserBg } from "../../utils"
-import { getSlots } from "../../utils/slots"
 import { ChevronDownIcon } from "../Icon"
 
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
@@ -26,7 +26,7 @@ const componentSlots = {
 }
 
 export const Expandable = ({ children, className, ...props }: ExpandableProps): JSX.Element => {
-  const slots = getSlots(componentSlots, children)
+  const slots = useSlots(componentSlots, children)
 
   const componentProps = {
     className: clsx("coop-expandable", !hasUserBg(className) && "bg-tint-grey", className),

package/src/components/Field/Field.tsx

@@ -4,7 +4,7 @@ import clsx from "clsx"
 import React from "react"
 
 import { useId } from "../../hooks/useId"
-import { getSlots } from "../../utils/slots"
+import { useSlots } from "../../hooks/useSlots"
 import { Error as BaseError, type ErrorProps } from "../FieldMarkers/Error"
 import { Hint as BaseHint, type HintProps } from "../FieldMarkers/Hint"
 import { Label as BaseLabel, type LabelProps } from "../FieldMarkers/Label"
@@ -16,13 +16,13 @@ const componentSlots = {
   FieldError: null,
   FieldHint: null,
   FieldLabel: null,
-  RadioButton: null,
+  Radio: null,
   Textarea: null,
   TextInput: null,
 }
 
 const standardFields = ["Children", "FieldError", "FieldHint", "FieldLabel"]
-const inlineFields = ["Checkbox", "RadioButton"]
+const inlineFields = ["Checkbox", "Radio"]
 
 interface FieldProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specify whether the Field should render inside a box. */
@@ -47,7 +47,7 @@ const Root = ({
   hideErrorBar = false,
   ...props
 }: FieldProps) => {
-  const slots = getSlots(componentSlots, children)
+  const slots = { ...useSlots(componentSlots, children) }
   const slotsArray = Object.entries(slots)
 
   const uid = useId()

package/src/components/Pill/Pill.tsx

@@ -4,8 +4,8 @@ import clsx from "clsx"
 import React from "react"
 import { StandardSizes } from "src/types"
 
+import { useSlots } from "../../hooks/useSlots"
 import { hasUserBg } from "../../utils"
-import { getSlots } from "../../utils/slots"
 
 export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `span`. */
@@ -43,7 +43,7 @@ export const Pill = ({
 }: PillProps): JSX.Element => {
   let element: PillProps["as"] = href ? "a" : "span"
 
-  const slots = getSlots(componentSlots, children)
+  const slots = useSlots(componentSlots, children)
 
   if (as) {
     element = as

package/src/components/{RadioButton/RadioButton.tsx → Radio/Radio.tsx}

@@ -2,23 +2,22 @@ import clsx from "clsx"
 import { type InputHTMLAttributes, type JSX, useId } from "react"
 import { StandardSizes } from "src/types"
 
-export interface RadioButtonProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+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 RadioButton should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
+  /** **(Optional)** Specify whether the Radio should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
   disabled?: boolean
-  /** **(Optional)** Specify the RadioButton error state. */
+  /** **(Optional)** Specify the Radio error state. */
   error?: boolean
-  /** **(Optional)** Specify the RadioButton id. Will be auto-generated if not set. */
+  /** **(Optional)** Specify the Radio id. Will be auto-generated if not set. */
   id?: string
-  /** Specify the RadioButton name. */
+  /** Specify the Radio name. */
   name: string
-  /** **(Optional)** Specify the RadioButton size. */
+  /** **(Optional)** Specify the Radio size. */
   size?: StandardSizes
 }
 
-export const RadioButton = ({
+export const Radio = ({
   className,
   disabled,
   error = false,
@@ -26,13 +25,13 @@ export const RadioButton = ({
   name,
   size = "md",
   ...props
-}: RadioButtonProps): JSX.Element => {
+}: RadioProps): JSX.Element => {
   const internalId = useId()
 
   id = id ?? internalId
 
   const componentProps = {
-    className: clsx("coop-radio-button", className),
+    className: clsx("coop-radio", className),
     "data-error": error || undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     disabled,
@@ -45,4 +44,4 @@ export const RadioButton = ({
   return <input {...componentProps} />
 }
 
-export default RadioButton
+export default Radio

package/src/components/Radio/index.ts

@@ -0,0 +1,5 @@
+import Radio from "./Radio"
+
+export default Radio
+export { Radio }
+export * from "./Radio"

package/src/components/{SearchBox/SearchBox.tsx → Searchbox/Searchbox.tsx}

@@ -5,13 +5,13 @@ import type { InputHTMLAttributes, JSX } from "react"
 import clsx from "clsx"
 import React, { useCallback, useId, useState } from "react"
 
-import { StandardSizes } from "../../../src/types"
+import { StandardSizes } from "../../types"
 import { Button, type ButtonProps } from "../Button"
 import { Label as FieldLabel } from "../FieldMarkers/Label"
 import { SearchIcon } from "../Icon"
 import TextInput, { TextInputProps } from "../TextInput"
 
-export interface SearchBoxProps
+export interface SearchboxProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
   /** **(Optional)** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
   action?: string
@@ -27,13 +27,13 @@ export interface SearchBoxProps
   labelVisible?: boolean
   /** **(Optional)** Specify the TextInput name, also used as the URL search parameter. Defaults to `query`. */
   name?: string
-  /** **(Optional)** Callback to run when the form is submitted. If this is an async function, it will be awaited and the SearchBox will be in a pending state until the promise is resolved. */
+  /** **(Optional)** Callback to run when the form is submitted. If this is an async function, it will be awaited and the Searchbox will be in a pending state until the promise is resolved. */
   onSubmit?: React.FormEventHandler<HTMLElement> | undefined
   /** **(Optional)** Specify the TextInput placeholder text Do not use in place of a form label. */
   placeholder?: string
-  /** **(Optional)** Specify the SearchBox size. */
+  /** **(Optional)** Specify the Searchbox size. */
   size?: StandardSizes
-  /** **(Optional)** Specify the SearchBox variant. */
+  /** **(Optional)** Specify the Searchbox variant. */
   variant?:
     | "green"
     | "blue"
@@ -45,12 +45,12 @@ export interface SearchBoxProps
     | "grey-ghost"
 }
 
-const defaultButtonProps: SearchBoxProps["button"] = {
+const defaultButtonProps: SearchboxProps["button"] = {
   label: React.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
   loadingText: "",
 }
 
-export const SearchBox = ({
+export const Searchbox = ({
   action,
   "aria-placeholder": ariaPlaceholder,
   autoCapitalize = "off",
@@ -67,7 +67,7 @@ export const SearchBox = ({
   size = "md",
   variant = "green",
   ...props
-}: SearchBoxProps): JSX.Element => {
+}: SearchboxProps): JSX.Element => {
   const [isPending, setIsPending] = useState(false)
   const internalId = useId()
 
@@ -92,7 +92,7 @@ export const SearchBox = ({
 
   const formProps = {
     action: action ?? undefined,
-    className: clsx("coop-search-box", className),
+    className: clsx("coop-searchbox", className),
     "data-size": size && size !== "md" ? size : undefined,
     "data-variant": variant.length && variant !== "green" ? variant : undefined,
     onSubmit: onSubmit ? handleSubmit : undefined,
@@ -125,7 +125,7 @@ export const SearchBox = ({
           {label}
         </FieldLabel>
       )}
-      <div className="coop-search-box--inner">
+      <div className="coop-searchbox--inner">
         <TextInput {...inputProps} />
 
         <Button {...buttonProps}>{button.label}</Button>
@@ -134,4 +134,4 @@ export const SearchBox = ({
   )
 }
 
-export default SearchBox
+export default Searchbox

package/src/components/Searchbox/index.ts

@@ -0,0 +1,5 @@
+import Searchbox from "./Searchbox"
+
+export default Searchbox
+export { Searchbox }
+export * from "./Searchbox"

package/src/components/TextInput/TextInput.tsx

@@ -26,7 +26,19 @@ export interface TextInputProps
   /** **(Optional)** Specify the suffix. It can be any valid JSX or string. */
   suffix?: React.ReactNode
   /** **(Optional)** Specify the TextInput type. */
-  type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url"
+  type?:
+    | "text"
+    | "email"
+    | "number"
+    | "password"
+    | "search"
+    | "tel"
+    | "url"
+    | "date"
+    | "datetime-local"
+    | "week"
+    | "month"
+    | "time"
 }
 
 export const TextInput = ({

package/src/{utils/slots.ts → hooks/useSlots.ts}

@@ -12,7 +12,7 @@ export function getSlotName(node: React.ReactNode): string | false {
     : false
 }
 
-export function getSlots<T>(
+export function useSlots<T>(
   componentSlots: Slots<T>,
   children: React.ReactNode,
   options?: { collect?: string[] }

package/src/index.ts

@@ -9,9 +9,9 @@ export * from "./components/Fieldset"
 export * from "./components/Flourish"
 export * from "./components/Image"
 export * from "./components/Pill"
-export * from "./components/RadioButton"
+export * from "./components/Radio"
 export * from "./components/RootSVG"
-export * from "./components/SearchBox"
+export * from "./components/Searchbox"
 export * from "./components/Signpost"
 export * from "./components/SkipNav"
 export * from "./components/Squircle"

package/dist/components/RadioButton/RadioButton.d.ts

@@ -1,18 +0,0 @@
-import { type InputHTMLAttributes, type JSX } from "react";
-import { StandardSizes } from "src/types";
-export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-    /** **(Optional)** Specify whether the RadioButton should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
-    disabled?: boolean;
-    /** **(Optional)** Specify the RadioButton error state. */
-    error?: boolean;
-    /** **(Optional)** Specify the RadioButton id. Will be auto-generated if not set. */
-    id?: string;
-    /** Specify the RadioButton name. */
-    name: string;
-    /** **(Optional)** Specify the RadioButton size. */
-    size?: StandardSizes;
-}
-export declare const RadioButton: ({ className, disabled, error, id, name, size, ...props }: RadioButtonProps) => JSX.Element;
-export default RadioButton;

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

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

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

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

package/src/components/RadioButton/index.ts

@@ -1,5 +0,0 @@
-import RadioButton from "./RadioButton"
-
-export default RadioButton
-export { RadioButton }
-export * from "./RadioButton"

package/src/components/SearchBox/index.ts

@@ -1,5 +0,0 @@
-import SearchBox from "./SearchBox"
-
-export default SearchBox
-export { SearchBox }
-export * from "./SearchBox"