@coopdigital/react 0.44.0 → 0.46.0

package/src/components/Textarea/Textarea.tsx

@@ -1,13 +1,11 @@
 import type { ChangeEvent, JSX, TextareaHTMLAttributes } from "react"
 
 import clsx from "clsx"
-import { useId, useState } from "react"
+import { useState } from "react"
 
 import { useDebounce } from "../../hooks/useDebounce"
-import { FormFieldError, StandardSizes } from "../../types"
-import { FieldError } from "../FieldError"
-import { FieldHint } from "../FieldHint"
-import { FieldLabel } from "../FieldLabel"
+import { useId } from "../../hooks/useId"
+import { StandardSizes } from "../../types"
 
 const DEBOUNCE_DELAY = 750
 
@@ -31,24 +29,10 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
   cutoff?: boolean
   /** **(Optional)** Specify whether the Textarea should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
   disabled?: boolean
-  /** **(Optional)** Specify the Textarea error state.
-   *
-   * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
-   */
-  error?: FormFieldError
-  /** **(Optional)** Specify the Textarea hint.
-   *
-   * This text is rendered under the label to provide further guidance for users.
-   */
-  hint?: string
+  /** **(Optional)** Specify the Textarea error state */
+  error?: boolean
   /** **(Optional)** Specify the Textarea id. Will be auto-generated if not set. */
   id?: string
-  /** **(Optional)** Specify the Textarea label.
-   *
-   * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
-  label?: string
-  /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
-  labelVisible?: boolean
   /** **(Optional)** Specify the Textarea maxLength. This is the maximum number of characters users can enter. */
   maxLength?: number
   /** Specify the Textarea name. */
@@ -69,10 +53,7 @@ export const Textarea = ({
   cutoff = false,
   disabled = false,
   error = false,
-  hint,
   id,
-  label,
-  labelVisible = true,
   maxLength,
   name,
   onChange: userOnChange = undefined,
@@ -89,7 +70,7 @@ export const Textarea = ({
     "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
     className: clsx("coop-textarea", className),
     cols,
-    "data-error": error ? "" : undefined,
+    "data-error": error ?? undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     disabled,
     id,
@@ -102,23 +83,15 @@ export const Textarea = ({
 
   const [remaining, setRemaining] = useState(maxLength)
   const debouncedRemaining = useDebounce(remaining, DEBOUNCE_DELAY)
+  const showCounter =
+    !disabled && counter && maxLength && remaining != null && debouncedRemaining != null
 
   const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     maxLength && e.target && setRemaining(maxLength - e.target.value.length)
   }
-  const formItemProps = { "aria-disabled": disabled ? true : undefined }
+  // const formItemProps = { "aria-disabled": disabled ? true : undefined }
   return (
-    <div className="coop-form-item" {...formItemProps}>
-      {label && (
-        <FieldLabel htmlFor={id} isVisible={labelVisible}>
-          {label}
-        </FieldLabel>
-      )}
-
-      {hint && <FieldHint>{hint}</FieldHint>}
-
-      {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
-
+    <div className="coop-textarea-wrapper">
       <textarea
         {...componentProps}
         onChange={(e) => {
@@ -126,13 +99,12 @@ export const Textarea = ({
           handleChange(e)
         }}
       ></textarea>
-
-      {!disabled && counter && maxLength && remaining != null && debouncedRemaining != null && (
+      {showCounter && (
         <>
           <small
             aria-hidden="true"
             className="coop-textarea-counter"
-            {...(remaining < 0 && { "data-error": "" })}
+            {...(remaining < 0 && { "data-error": true })}
           >
             {charCountMessage(remaining)}
           </small>

package/src/hooks/useId.ts

@@ -0,0 +1,9 @@
+import { useId as _useId } from "react"
+
+export type UseId = (id?: string) => string
+
+export const useId: UseId = (id) => {
+  const uniqueId = _useId()
+
+  return id ?? uniqueId
+}

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

@@ -12,13 +12,21 @@ export function getSlotName(node: React.ReactNode): string | false {
     : false
 }
 
-export function getSlots<T>(componentSlots: Slots<T>, children: React.ReactNode): Slots<T> {
+export function useSlots<T>(
+  componentSlots: Slots<T>,
+  children: React.ReactNode,
+  options?: { collect?: string[] }
+): Slots<T> {
   return React.Children.toArray(children).reduce(
     (slots, child: React.ReactNode) => {
       const slotName = getSlotName(child)
 
       if (child && slotName && isKey(componentSlots, slotName)) {
-        slots[slotName] = child
+        if (options?.collect?.includes(slotName)) {
+          slots[slotName] = slots[slotName] ? [...[slots[slotName]].flat(), child] : [child]
+        } else {
+          slots[slotName] = child
+        }
       } else if ("Children" in slots) {
         slots.Children = slots.Children ? [...[slots.Children].flat(), child] : [child]
       }

package/src/index.ts

@@ -5,15 +5,13 @@ export * from "./components/Card"
 export * from "./components/Checkbox"
 export * from "./components/Expandable"
 export * from "./components/Field"
-export * from "./components/FieldError"
-export * from "./components/FieldHint"
-export * from "./components/FieldLabel"
+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/Checkbox/CheckboxGroup.d.ts

@@ -1,32 +0,0 @@
-import type { FieldsetHTMLAttributes, JSX } from "react";
-import { FormFieldError, StandardSizes } from "../../../src/types";
-export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
-    /** **(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. */
-    className?: string;
-    /** **(Optional)** Specify whether the CheckboxGroup, and all of its descendents, should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
-    disabled?: boolean;
-    /** **(Optional)** Specify the CheckboxGroup error state.
-     *
-     * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
-     */
-    error?: FormFieldError;
-    /** **(Optional)** Specify the CheckboxGroup hint.
-     *
-     * This text is rendered under the label to provide further guidance for users.
-     */
-    hint?: string;
-    /** **(Optional)** Specify the label for the CheckboxGroup. This will be rendered as a fieldset legend. */
-    label?: string;
-    /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
-    labelVisible?: boolean;
-    /** **(Optional)** Specify the CheckboxGroup orientation. */
-    orientation?: "horizontal" | "vertical";
-    /** **(Optional)** Specify the CheckboxGroup size. */
-    size?: StandardSizes;
-    /** **(Optional)** Specify the CheckboxGroup variant. */
-    variant?: "default" | "boxed";
-}
-export declare const CheckboxGroup: ({ children, className, error, hint, label, labelVisible, orientation, size, variant, ...props }: CheckboxGroupProps) => JSX.Element;
-export default CheckboxGroup;

package/dist/components/Checkbox/CheckboxGroup.js

@@ -1,21 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { FieldError } from '../FieldError/FieldError.js';
-import { FieldHint } from '../FieldHint/FieldHint.js';
-
-const CheckboxGroup = ({ children, className, error = false, hint, label, labelVisible = true, orientation = "vertical", size = "md", variant = "default", ...props }) => {
-    const componentProps = {
-        className: clsx("coop-fieldset", "coop-checkbox-group", className),
-        "data-error": error ? "" : undefined,
-        "data-orientation": orientation !== "vertical" ? orientation : undefined,
-        "data-size": size.length && size !== "md" ? size : undefined,
-        "data-variant": variant !== "default" ? variant : undefined,
-        ...props,
-    };
-    const legendProps = {
-        className: clsx("coop-field-label", !labelVisible && "sr-only"),
-    };
-    return (jsxs("fieldset", { ...componentProps, children: [label && jsx("legend", { ...legendProps, children: label }), hint && jsx(FieldHint, { children: hint }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message }), jsx("div", { className: "coop-checkbox-group-options", children: children })] }));
-};
-
-export { CheckboxGroup, CheckboxGroup as default };

package/dist/components/FieldError/FieldError.d.ts

@@ -1,9 +0,0 @@
-import type { HTMLAttributes, JSX, ReactNode } from "react";
-export interface FieldErrorProps extends HTMLAttributes<HTMLSpanElement> {
-    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
-    children?: string | ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-}
-export declare const FieldError: ({ children, className, ...props }: FieldErrorProps) => JSX.Element;
-export default FieldError;

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

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

package/dist/components/FieldHint/FieldHint.d.ts

@@ -1,9 +0,0 @@
-import type { HTMLAttributes, JSX, ReactNode } from "react";
-export interface FieldHintProps extends HTMLAttributes<HTMLParagraphElement> {
-    /** Main content inside the component. It can be any valid JSX or string. */
-    children: string | ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-}
-export declare const FieldHint: ({ children, className, ...props }: FieldHintProps) => JSX.Element | null;
-export default FieldHint;

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

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

package/dist/components/FieldLabel/FieldLabel.d.ts

@@ -1,13 +0,0 @@
-import type { JSX, LabelHTMLAttributes, ReactNode } from "react";
-export interface FieldLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
-    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
-    children?: string | ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-    /** Specify the field ID to connect FieldLabel to the field itself. */
-    htmlFor: string;
-    /** **(Optional)** Specify whether the FieldLabel is visible for humans or only for screen readers. */
-    isVisible?: boolean;
-}
-export declare const FieldLabel: ({ children, className, htmlFor, isVisible, ...props }: FieldLabelProps) => JSX.Element | null;
-export default FieldLabel;

package/dist/components/FieldLabel/FieldLabel.js

@@ -1,13 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-
-const FieldLabel = ({ children, className, htmlFor, isVisible = true, ...props }) => {
-    const componentProps = {
-        className: clsx("coop-field-label ", isVisible ? "" : "sr-only", className),
-        htmlFor,
-        ...props,
-    };
-    return children && htmlFor ? jsx("label", { ...componentProps, children: children }) : null;
-};
-
-export { FieldLabel, FieldLabel as default };

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

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

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

@@ -1,36 +0,0 @@
-import { type InputHTMLAttributes, type JSX } from "react";
-import { FormFieldError, 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.
-     *
-     * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
-     */
-    error?: FormFieldError;
-    /** **(Optional)** Specify the RadioButton hint.
-     *
-     * This text is rendered under the label to provide further guidance for users.
-     */
-    hint?: string;
-    /** **(Optional)** Specify the RadioButton id. Will be auto-generated if not set. */
-    id?: string;
-    /** **(Optional)** Specify the RadioButton label.
-     *
-     * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
-    label: string;
-    /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
-    labelVisible?: boolean;
-    /** Specify the RadioButton name. */
-    name: string;
-    /** **(Optional)** Specify the RadioButton size. */
-    size?: StandardSizes;
-    /** **(Optional)** Specify the RadioButton tag text. */
-    tag?: string;
-    /** **(Optional)** Specify the RadioButton tag className. */
-    tagClassName?: string;
-}
-export declare const RadioButton: ({ className, disabled, error, hint, id, label, labelVisible, name, size, tag, tagClassName, ...props }: RadioButtonProps) => JSX.Element;
-export default RadioButton;

package/dist/components/RadioButton/RadioButton.js

@@ -1,26 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { useId } from 'react';
-import { FieldError } from '../FieldError/FieldError.js';
-import { FieldHint } from '../FieldHint/FieldHint.js';
-import { FieldLabel } from '../FieldLabel/FieldLabel.js';
-import { Tag } from '../Tag/Tag.js';
-
-const RadioButton = ({ className, disabled, error = false, hint, id, label, labelVisible = true, name, size = "md", tag, tagClassName, ...props }) => {
-    const internalId = useId();
-    id = id !== null && id !== void 0 ? id : internalId;
-    const componentProps = {
-        className: clsx("coop-radio-button", className),
-        "data-error": error ? "" : undefined,
-        "data-size": size.length && size !== "md" ? size : undefined,
-        disabled,
-        id,
-        name,
-        type: "radio",
-        ...props,
-    };
-    const formItemProps = { "aria-disabled": disabled ? true : undefined };
-    return (jsxs("div", { className: "coop-form-item", ...formItemProps, children: [jsxs("div", { className: "coop-radio-button-wrapper", children: [jsxs("div", { className: "coop-radio-button-input-wrapper", children: [jsx("input", { ...componentProps }), label && (jsxs(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: [jsx("span", { children: label }), " ", tag && (jsx(Tag, { className: tagClassName, size: "sm", children: tag }))] }))] }), hint && jsx(FieldHint, { children: hint })] }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message })] }));
-};
-
-export { RadioButton, RadioButton as default };

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

@@ -1,32 +0,0 @@
-import type { FieldsetHTMLAttributes, JSX } from "react";
-import { FormFieldError, StandardSizes } from "../../types";
-export interface RadioButtonGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
-    /** **(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. */
-    className?: string;
-    /** **(Optional)** Specify whether the RadioButtonGroup, and all of its descendents, should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
-    disabled?: boolean;
-    /** **(Optional)** Specify the RadioButtonGroup error state.
-     *
-     * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
-     */
-    error?: FormFieldError;
-    /** **(Optional)** Specify the RadioButtonGroup hint.
-     *
-     * This text is rendered under the label to provide further guidance for users.
-     */
-    hint?: string;
-    /** **(Optional)** Specify the label for the RadioButtonGroup. This will be rendered as a fieldset legend. */
-    label?: string;
-    /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
-    labelVisible?: boolean;
-    /** **(Optional)** Specify the RadioButtonGroup orientation. */
-    orientation?: "horizontal" | "vertical";
-    /** **(Optional)** Specify the RadioButtonGroup size. */
-    size?: StandardSizes;
-    /** **(Optional)** Specify the RadioButtonGroup variant. */
-    variant?: "default" | "boxed";
-}
-export declare const RadioButtonGroup: ({ children, className, error, hint, label, labelVisible, orientation, size, variant, ...props }: RadioButtonGroupProps) => JSX.Element;
-export default RadioButtonGroup;

package/dist/components/RadioButton/RadioButtonGroup.js

@@ -1,21 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { FieldError } from '../FieldError/FieldError.js';
-import { FieldHint } from '../FieldHint/FieldHint.js';
-
-const RadioButtonGroup = ({ children, className, error = false, hint, label, labelVisible = true, orientation = "vertical", size = "md", variant = "default", ...props }) => {
-    const componentProps = {
-        className: clsx("coop-fieldset", "coop-radio-button-group", className),
-        "data-error": error ? "" : undefined,
-        "data-orientation": orientation !== "vertical" ? orientation : undefined,
-        "data-size": size.length && size !== "md" ? size : undefined,
-        "data-variant": variant !== "default" ? variant : undefined,
-        ...props,
-    };
-    const legendProps = {
-        className: clsx("coop-field-label", !labelVisible && "sr-only"),
-    };
-    return (jsxs("fieldset", { ...componentProps, children: [label && jsx("legend", { ...legendProps, children: label }), hint && jsx(FieldHint, { children: hint }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message }), jsx("div", { className: "coop-radio-button-group-options", children: children })] }));
-};
-
-export { RadioButtonGroup, RadioButtonGroup as default };

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

@@ -1,5 +0,0 @@
-import RadioButton from "./RadioButton";
-import RadioButtonGroup from "./RadioButtonGroup";
-export default RadioButton;
-export { RadioButton, RadioButtonGroup };
-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/dist/components/Tag/index.js

@@ -1,5 +0,0 @@
-import { Tag } from './Tag.js';
-
-
-
-export { Tag, Tag as default };

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -1,73 +0,0 @@
-import type { FieldsetHTMLAttributes, JSX } from "react"
-
-import clsx from "clsx"
-
-import { FormFieldError, StandardSizes } from "../../../src/types"
-import { FieldError } from "../FieldError"
-import { FieldHint } from "../FieldHint"
-
-export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
-  /** **(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. */
-  className?: string
-  /** **(Optional)** Specify whether the CheckboxGroup, and all of its descendents, should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
-  disabled?: boolean
-  /** **(Optional)** Specify the CheckboxGroup error state.
-   *
-   * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
-   */
-  error?: FormFieldError
-  /** **(Optional)** Specify the CheckboxGroup hint.
-   *
-   * This text is rendered under the label to provide further guidance for users.
-   */
-  hint?: string
-  /** **(Optional)** Specify the label for the CheckboxGroup. This will be rendered as a fieldset legend. */
-  label?: string
-  /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
-  labelVisible?: boolean
-  /** **(Optional)** Specify the CheckboxGroup orientation. */
-  orientation?: "horizontal" | "vertical"
-  /** **(Optional)** Specify the CheckboxGroup size. */
-  size?: StandardSizes
-  /** **(Optional)** Specify the CheckboxGroup variant. */
-  variant?: "default" | "boxed"
-}
-
-export const CheckboxGroup = ({
-  children,
-  className,
-  error = false,
-  hint,
-  label,
-  labelVisible = true,
-  orientation = "vertical",
-  size = "md",
-  variant = "default",
-  ...props
-}: CheckboxGroupProps): JSX.Element => {
-  const componentProps = {
-    className: clsx("coop-fieldset", "coop-checkbox-group", className),
-    "data-error": error ? "" : undefined,
-    "data-orientation": orientation !== "vertical" ? orientation : undefined,
-    "data-size": size.length && size !== "md" ? size : undefined,
-    "data-variant": variant !== "default" ? variant : undefined,
-    ...props,
-  }
-
-  const legendProps = {
-    className: clsx("coop-field-label", !labelVisible && "sr-only"),
-  }
-
-  return (
-    <fieldset {...componentProps}>
-      {label && <legend {...legendProps}>{label}</legend>}
-      {hint && <FieldHint>{hint}</FieldHint>}
-      {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
-      <div className="coop-checkbox-group-options">{children}</div>
-    </fieldset>
-  )
-}
-
-export default CheckboxGroup

package/src/components/FieldError/index.ts

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

package/src/components/FieldHint/index.ts

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

package/src/components/FieldLabel/FieldLabel.tsx

@@ -1,31 +0,0 @@
-import type { JSX, LabelHTMLAttributes, ReactNode } from "react"
-
-import clsx from "clsx"
-
-export interface FieldLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
-  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
-  children?: string | ReactNode
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-  className?: string
-  /** Specify the field ID to connect FieldLabel to the field itself. */
-  htmlFor: string
-  /** **(Optional)** Specify whether the FieldLabel is visible for humans or only for screen readers. */
-  isVisible?: boolean
-}
-
-export const FieldLabel = ({
-  children,
-  className,
-  htmlFor,
-  isVisible = true,
-  ...props
-}: FieldLabelProps): JSX.Element | null => {
-  const componentProps = {
-    className: clsx("coop-field-label ", isVisible ? "" : "sr-only", className),
-    htmlFor,
-    ...props,
-  }
-  return children && htmlFor ? <label {...componentProps}>{children}</label> : null
-}
-
-export default FieldLabel

package/src/components/FieldLabel/index.ts

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

package/src/components/RadioButton/RadioButton.tsx

@@ -1,97 +0,0 @@
-import clsx from "clsx"
-import { type InputHTMLAttributes, type JSX, useId } from "react"
-import { FormFieldError, StandardSizes } from "src/types"
-
-import { FieldError } from "../FieldError"
-import { FieldHint } from "../FieldHint"
-import { FieldLabel } from "../FieldLabel"
-import Tag from "../Tag"
-
-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.
-   *
-   * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
-   */
-  error?: FormFieldError
-  /** **(Optional)** Specify the RadioButton hint.
-   *
-   * This text is rendered under the label to provide further guidance for users.
-   */
-  hint?: string
-  /** **(Optional)** Specify the RadioButton id. Will be auto-generated if not set. */
-  id?: string
-  /** **(Optional)** Specify the RadioButton label.
-   *
-   * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
-  label: string
-  /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
-  labelVisible?: boolean
-  /** Specify the RadioButton name. */
-  name: string
-  /** **(Optional)** Specify the RadioButton size. */
-  size?: StandardSizes
-  /** **(Optional)** Specify the RadioButton tag text. */
-  tag?: string
-  /** **(Optional)** Specify the RadioButton tag className. */
-  tagClassName?: string
-}
-
-export const RadioButton = ({
-  className,
-  disabled,
-  error = false,
-  hint,
-  id,
-  label,
-  labelVisible = true,
-  name,
-  size = "md",
-  tag,
-  tagClassName,
-  ...props
-}: RadioButtonProps): JSX.Element => {
-  const internalId = useId()
-
-  id = id ?? internalId
-
-  const componentProps = {
-    className: clsx("coop-radio-button", className),
-    "data-error": error ? "" : undefined,
-    "data-size": size.length && size !== "md" ? size : undefined,
-    disabled,
-    id,
-    name,
-    type: "radio",
-    ...props,
-  }
-  const formItemProps = { "aria-disabled": disabled ? true : undefined }
-  return (
-    <div className="coop-form-item" {...formItemProps}>
-      <div className="coop-radio-button-wrapper">
-        <div className="coop-radio-button-input-wrapper">
-          <input {...componentProps} />
-
-          {label && (
-            <FieldLabel htmlFor={id} isVisible={labelVisible}>
-              <span>{label}</span>{" "}
-              {tag && (
-                <Tag className={tagClassName} size="sm">
-                  {tag}
-                </Tag>
-              )}
-            </FieldLabel>
-          )}
-        </div>
-        {hint && <FieldHint>{hint}</FieldHint>}
-      </div>
-      {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
-    </div>
-  )
-}
-
-export default RadioButton