@postenbring/hedwig-react 1.2.1 → 1.3.0

package/src/form/error-summary/error-summary.tsx

@@ -0,0 +1,151 @@
+import { forwardRef, useEffect, useRef } from "react";
+import { Message, type MessageProps, type MessageTitleProps } from "../../message";
+import { UnorderedList, type ListProps } from "../../list";
+import { Link } from "../../link";
+import { useMergeRefs } from "../../utils";
+import { focusWithLegendOrLabelInViewport } from "./focus";
+
+interface ErrorSummaryHeadingPropsAutoFocus {
+  /**
+   * The heading will be focused when the component mounts
+   *
+   * On following errornous form submissions you should manually focus the heading
+   * e.g. by passing a ref and calling `ref.current.focus()`
+   *
+   * @default true
+   */
+  autoFocus?: boolean;
+}
+
+interface ErrorSummaryHeadingPropsAs {
+  /**
+   * A heading level must be selected, or optionally opting out for a different element
+   *
+   * Use {@link ErrorSummaryHeadingPropsAsChild.asChild} if you need more control of the rendered element.
+   */
+  as: "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "div" | "label" | "p";
+  asChild?: never;
+}
+
+interface ErrorSummaryHeadingPropsAsChild {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   */
+  asChild: true;
+  as?: never;
+}
+
+export type ErrorSummaryHeadingProps = MessageTitleProps &
+  ErrorSummaryHeadingPropsAutoFocus &
+  (ErrorSummaryHeadingPropsAs | ErrorSummaryHeadingPropsAsChild);
+
+export const ErrorSummaryHeading = forwardRef<
+  HTMLParagraphElement,
+  ErrorSummaryHeadingProps & (ErrorSummaryHeadingPropsAs | ErrorSummaryHeadingPropsAsChild)
+>(({ children, as: Tag, autoFocus = true, ...rest }, ref) => {
+  const focusRef = useRef<HTMLElement>(null);
+  const mergedRef = useMergeRefs([focusRef, ref]);
+
+  useEffect(() => {
+    /**
+     * Hack: Safari 18 on mac at the time of writing
+     * does not correctly focus it with VoiceOver without the timeout
+     */
+    setTimeout(() => {
+      if (focusRef.current && autoFocus) {
+        focusRef.current.focus();
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only on initial render
+  }, []);
+
+  return (
+    <Message.Title ref={mergedRef} tabIndex={-1} asChild {...rest}>
+      {Tag ? <Tag>{children}</Tag> : children}
+    </Message.Title>
+  );
+});
+ErrorSummaryHeading.displayName = "ErrorSummary.Heading";
+
+export interface ErrorSummaryListProps extends ListProps {
+  /**
+   * Sets the size of the items (font)
+   *
+   * @default "small"
+   */
+  size?: ListProps["size"];
+}
+export const ErrorSummaryList = forwardRef<HTMLUListElement, ErrorSummaryListProps>(
+  ({ children, style: _style, size = "small", ...rest }, ref) => {
+    const style = {
+      // Match the link `solid` style, which black underline
+      "--_hds-list-marker-color": "var(--hds-ui-colors-black)",
+      ..._style,
+    };
+    return (
+      <Message.Description asChild>
+        <UnorderedList size={size} ref={ref} style={style} {...rest}>
+          {children}
+        </UnorderedList>
+      </Message.Description>
+    );
+  },
+);
+ErrorSummaryList.displayName = "ErrorSummary.List";
+
+export interface ErrorSummaryItemProps extends React.HTMLAttributes<HTMLLIElement> {
+  /**
+   * A hash link to the element that the error message refers to
+   *
+   * Must start with "#" as it's passed to the `href` attribute of an anchor element
+   *
+   * @example "#email"
+   */
+  href: `#${string}`;
+
+  /**
+   * Extra props to pass to the link element
+   */
+  linkProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+}
+export const ErrorSummaryItem = forwardRef<HTMLLIElement, ErrorSummaryItemProps>(
+  ({ children, href, linkProps, ...rest }, ref) => {
+    function onClick(e: React.MouseEvent<HTMLAnchorElement>) {
+      linkProps?.onClick?.(e);
+      if (focusWithLegendOrLabelInViewport(href.replace("#", ""))) {
+        e.preventDefault();
+      }
+    }
+
+    return (
+      <li ref={ref} {...rest}>
+        <Link size="small" href={href} variant="solid" {...linkProps} onClick={onClick}>
+          {children}
+        </Link>
+      </li>
+    );
+  },
+);
+ErrorSummaryItem.displayName = "ErrorSummary.Item";
+
+export type ErrorSummaryProps = Omit<MessageProps, "variant" | "icon" | "iconClassName">;
+
+export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
+  ({ children, ...rest }, ref) => {
+    return (
+      <Message variant="warning" ref={ref} {...rest}>
+        {children}
+      </Message>
+    );
+  },
+) as ErrorSummaryType;
+ErrorSummary.displayName = "ErrorSummary";
+
+type ErrorSummaryType = ReturnType<typeof forwardRef<HTMLDivElement, ErrorSummaryProps>> & {
+  Heading: typeof ErrorSummaryHeading;
+  List: typeof ErrorSummaryList;
+  Item: typeof ErrorSummaryItem;
+};
+ErrorSummary.Heading = ErrorSummaryHeading;
+ErrorSummary.List = ErrorSummaryList;
+ErrorSummary.Item = ErrorSummaryItem;

package/src/form/error-summary/focus.ts

@@ -0,0 +1,66 @@
+/**
+ * Focus a form field while showing the associated legend or label in the viewport.
+ *
+ * Gives the user a better context of what field they are focusing on.
+ *
+ * Copied from https://github.com/alphagov/govuk-frontend/blob/cbf4ef1e329711be5b78a92bda6ba84a7db9ca40/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs#L60-L108
+ */
+export function focusWithLegendOrLabelInViewport(id: string) {
+  const input = document.getElementById(id);
+  if (!input) {
+    return false;
+  }
+
+  const legendOrLabel = maybeLegendForInput(input) ?? labelForInput(input);
+  if (!legendOrLabel) {
+    return false;
+  }
+
+  legendOrLabel.scrollIntoView();
+  input.focus({ preventScroll: true });
+
+  return true;
+}
+
+function maybeLegendForInput(input: HTMLElement) {
+  const fieldset = input.closest("fieldset");
+  if (!fieldset) {
+    return null;
+  }
+
+  const legend = fieldset.querySelector("legend");
+  if (!legend) {
+    return null;
+  }
+
+  // If the input type is radio or checkbox, always use the legend if
+  // there is one.
+  if (input instanceof HTMLInputElement && (input.type === "checkbox" || input.type === "radio")) {
+    return legend;
+  }
+
+  // For other input types, only scroll to the fieldset’s legend (instead
+  // of the label associated with the input) if the input would end up in
+  // the top half of the screen.
+  //
+  // This should avoid situations where the input either ends up off the
+  // screen, or obscured by a software keyboard.
+  const legendTop = legend.getBoundingClientRect().top;
+  const inputRect = input.getBoundingClientRect();
+
+  // If the browser doesn't support Element.getBoundingClientRect().height
+  // or window.innerHeight (like IE8), bail and just link to the label.
+  if (inputRect.height && window.innerHeight) {
+    const inputBottom = inputRect.top + inputRect.height;
+
+    if (inputBottom - legendTop < window.innerHeight / 2) {
+      return legend;
+    }
+  }
+}
+
+function labelForInput(input: HTMLElement) {
+  return (
+    document.querySelector(`label[for='${input.getAttribute("id")}']`) ?? input.closest("label")
+  );
+}

package/src/form/error-summary/index.tsx

@@ -0,0 +1,2 @@
+export { ErrorSummary } from "./error-summary";
+export type * from "./error-summary";

package/src/form/fieldset/fieldset.tsx

@@ -1,7 +1,7 @@
 import { useId, forwardRef, createContext, useContext } from "react";
 import type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
-import { ErrorMessage } from "../error-message";
+import { ErrorMessage, type ErrorMessageProps } from "../error-message";
 
 export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
   className?: string;
@@ -16,6 +16,7 @@ export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElemen
   legendProps?: HTMLAttributes<HTMLElement> & { size: "default" | "large" };
   legend: ReactNode;
   children: ReactNode;
+  errorMessageProps?: Partial<ErrorMessageProps>;
 }
 
 const FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });
@@ -27,6 +28,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function
     className,
     style,
     errorMessage,
+    errorMessageProps,
     legendProps: { size: legendSize = "default", className: legendClassName, ...legendProps } = {},
     legend,
     children,
@@ -58,7 +60,9 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function
       <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>
         {children}
       </FieldsetContext.Provider>
-      <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>
+      <ErrorMessage id={errorMessageId} {...errorMessageProps}>
+        {errorMessage}
+      </ErrorMessage>
     </fieldset>
   );
 });

package/src/form/index.tsx

@@ -1,6 +1,7 @@
 export * from "./checkbox";
 export * from "./date-picker";
 export * from "./error-message";
+export * from "./error-summary";
 export * from "./fieldset";
 export * from "./input";
 export * from "./radio-button";

package/src/form/input-group/input-group.tsx

@@ -1,7 +1,7 @@
 import { useId, forwardRef, Children, isValidElement, cloneElement } from "react";
 import type { LabelHTMLAttributes, ReactNode, CSSProperties } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
-import { ErrorMessage } from "../error-message";
+import { ErrorMessage, type ErrorMessageProps } from "../error-message";
 
 interface InputProps {
   "aria-describedby"?: string;
@@ -16,6 +16,7 @@ export interface InputGroupProps {
   style?: CSSProperties;
   variant?: "default" | "white";
   errorMessage?: ReactNode;
+  errorMessageProps?: Partial<ErrorMessageProps>;
   labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
   label: ReactNode;
   disabled?: boolean;
@@ -35,6 +36,7 @@ export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function I
     style,
     variant = "default",
     errorMessage,
+    errorMessageProps,
     labelProps: { className: labelClassName, ...labelProps } = {},
     label,
     disabled,
@@ -100,7 +102,9 @@ export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function I
       >
         {renderInput()}
       </div>
-      <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>
+      <ErrorMessage id={errorMessageId} {...errorMessageProps}>
+        {errorMessage}
+      </ErrorMessage>
     </div>
   );
 });

package/src/message/message.tsx

@@ -3,7 +3,7 @@ import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { Slot } from "@radix-ui/react-slot";
 import { Box, type BoxProps } from "../box/box";
 
-interface MessageTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
+export interface MessageTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
   /**
    * Change the default rendered element for the one passed as a child, merging their props and behavior.
    *
@@ -25,7 +25,7 @@ export const MessageTitle = forwardRef<HTMLParagraphElement, MessageTitleProps>(
 );
 MessageTitle.displayName = "Message.Title";
 
-interface MessageDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+export interface MessageDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
   /**
    * Change the default rendered element for the one passed as a child, merging their props and behavior.
    *

package/dist/chunk-5UGT7L7R.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/form/input-group/input-group.tsx"],"sourcesContent":["import { useId, forwardRef, Children, isValidElement, cloneElement } from \"react\";\nimport type { LabelHTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\ninterface InputProps {\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean;\n  id?: string;\n  className?: string;\n}\n\nexport interface InputGroupProps {\n  id?: string;\n  className?: string;\n  style?: CSSProperties;\n  variant?: \"default\" | \"white\";\n  errorMessage?: ReactNode;\n  labelProps?: LabelHTMLAttributes<HTMLLabelElement>;\n  label: ReactNode;\n  disabled?: boolean;\n  readOnly?: boolean;\n  /**\n   * `children` must be either a single input element or a render function.\n   *\n   * If you use a render function, make sure you spread the input props to the appropriate element.\n   */\n  children: Exclude<ReactNode, Iterable<ReactNode>> | ((inputProps: InputProps) => ReactNode);\n}\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n  {\n    id,\n    className,\n    style,\n    variant = \"default\",\n    errorMessage,\n    labelProps: { className: labelClassName, ...labelProps } = {},\n    label,\n    disabled,\n    readOnly,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const errorMessageId = useId();\n  const inputId = useId();\n\n  const renderInput = () => {\n    const inputProps: InputProps = {\n      \"aria-describedby\": errorMessage ? errorMessageId : undefined,\n      \"aria-invalid\": errorMessage ? true : undefined,\n      id: id ?? inputId,\n      className: clsx(\"hds-input-group__input\"),\n    };\n\n    if (typeof children === \"function\") {\n      return children(inputProps);\n    }\n\n    const input: ReactNode = Children.toArray(children)[0];\n\n    if (!isValidElement<InputProps>(input)) {\n      return;\n    }\n\n    return cloneElement<InputProps>(input, {\n      ...inputProps,\n      ...input.props,\n      className: `${inputProps.className} ${input.props.className ?? \"\"}`,\n    });\n  };\n\n  return (\n    <div\n      className={clsx(\n        \"hds-input-group\",\n        {\n          [`hds-input-group--${variant}`]: variant,\n          \"hds-input-group--error\": errorMessage,\n        },\n        className as undefined,\n      )}\n      ref={ref}\n      style={style}\n      {...rest}\n    >\n      <label\n        className={clsx(\"hds-input-group__label\", labelClassName as undefined)}\n        {...labelProps}\n        htmlFor={id ?? inputId}\n      >\n        {label}\n      </label>\n      <div\n        className={clsx(\"hds-input-group__input-wrapper\")}\n        data-disabled={disabled}\n        data-readonly={readOnly}\n      >\n        {renderInput()}\n      </div>\n      <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;AAAA,SAAS,OAAO,YAAY,UAAU,gBAAgB,oBAAoB;AAE1E,SAAS,YAAY;AAyEjB,SAaE,KAbF;AA7CG,IAAM,aAAa,WAA4C,SAASA,YAC7E,IAaA,KACA;AAdA,eAMc;AAAA,IALZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,YAAY,KAA+C,CAAC;AAAA,EArChE,IA+BE,IAMc,SAAE,aAAW,eArC7B,IAqCgB,IAAgC,uBAAhC,IAAgC,CAA9B,eANhB,SAOE;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAzCJ,IA+BE,IAWK,iBAXL,IAWK;AAAA,IAVH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,iBAAiB,MAAM;AAC7B,QAAM,UAAU,MAAM;AAEtB,QAAM,cAAc,MAAM;AAjD5B,QAAAC;AAkDI,UAAM,aAAyB;AAAA,MAC7B,oBAAoB,eAAe,iBAAiB;AAAA,MACpD,gBAAgB,eAAe,OAAO;AAAA,MACtC,IAAI,kBAAM;AAAA,MACV,WAAW,KAAK,wBAAwB;AAAA,IAC1C;AAEA,QAAI,OAAO,aAAa,YAAY;AAClC,aAAO,SAAS,UAAU;AAAA,IAC5B;AAEA,UAAM,QAAmB,SAAS,QAAQ,QAAQ,EAAE,CAAC;AAErD,QAAI,CAAC,eAA2B,KAAK,GAAG;AACtC;AAAA,IACF;AAEA,WAAO,aAAyB,OAAO,gDAClC,aACA,MAAM,QAF4B;AAAA,MAGrC,WAAW,GAAG,WAAW,SAAS,KAAIA,MAAA,MAAM,MAAM,cAAZ,OAAAA,MAAyB,EAAE;AAAA,IACnE,EAAC;AAAA,EACH;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,CAAC,oBAAoB,OAAO,EAAE,GAAG;AAAA,UACjC,0BAA0B;AAAA,QAC5B;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,OACI,OAXL;AAAA,MAaC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK,0BAA0B,cAA2B;AAAA,aACjE,aAFL;AAAA,YAGC,SAAS,kBAAM;AAAA,YAEd;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK,gCAAgC;AAAA,YAChD,iBAAe;AAAA,YACf,iBAAe;AAAA,YAEd,sBAAY;AAAA;AAAA,QACf;AAAA,QACA,oBAAC,gBAAa,IAAI,gBAAiB,wBAAa;AAAA;AAAA;AAAA,EAClD;AAEJ,CAAC;","names":["InputGroup","_a"]}

package/dist/chunk-CC5QWW52.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/form/error-message/error-message.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nexport interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  id: string;\n  className?: string;\n}\n\nexport const ErrorMessage = forwardRef<HTMLDivElement, ErrorMessageProps>(\n  ({ children, id, className, ...rest }, ref) => {\n    return (\n      <div\n        aria-live=\"assertive\"\n        className={clsx(\"hds-error-message\", className as undefined)}\n        id={id}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nErrorMessage.displayName = \"ErrorMessage\";\n"],"mappings":";;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,kBAAkC;AAWrC;AAHC,IAAM,eAAe;AAAA,EAC1B,CAAC,IAAsC,QAAQ;AAA9C,iBAAE,YAAU,IAAI,UAVnB,IAUG,IAA8B,iBAA9B,IAA8B,CAA5B,YAAU,MAAI;AACf,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAW,KAAK,qBAAqB,SAAsB;AAAA,QAC3D;AAAA,QACA;AAAA,SACI,OALL;AAAA,QAOE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;","names":[]}

package/dist/chunk-JQGB77SS.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/form/fieldset/fieldset.tsx"],"sourcesContent":["import { useId, forwardRef, createContext, useContext } from \"react\";\nimport type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * Providing an errorMessage will also give contained Checkboxes or Radio buttons\n   * error styling and aria to indicate invalid state.\n   *\n   * For Radio buttons you are even better off using RadioGroup.\n   */\n  errorMessage?: ReactNode;\n  legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n  legend: ReactNode;\n  children: ReactNode;\n}\n\nconst FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });\n\nexport const useFieldsetContext = () => useContext(FieldsetContext);\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n  {\n    className,\n    style,\n    errorMessage,\n    legendProps: { size: legendSize = \"default\", className: legendClassName, ...legendProps } = {},\n    legend,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const errorMessageId = useId();\n\n  return (\n    <fieldset\n      aria-describedby={errorMessage ? errorMessageId : undefined}\n      aria-invalid={errorMessage ? true : undefined}\n      className={clsx(\"hds-fieldset\", className as undefined)}\n      ref={ref}\n      style={style}\n      {...rest}\n    >\n      <legend\n        className={clsx(\n          \"hds-fieldset__legend\",\n          { [`hds-fieldset__legend--${legendSize}`]: legendSize },\n          legendClassName as undefined,\n        )}\n        {...legendProps}\n      >\n        {legend}\n      </legend>\n      <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>\n        {children}\n      </FieldsetContext.Provider>\n      <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n    </fieldset>\n  );\n});\n"],"mappings":";;;;;;;;;;AAAA,SAAS,OAAO,YAAY,eAAe,kBAAkB;AAE7D,SAAS,YAAY;AAqCjB,SAQE,KARF;AAnBJ,IAAM,kBAAkB,cAAqC,EAAE,UAAU,MAAM,CAAC;AAEzE,IAAM,qBAAqB,MAAM,WAAW,eAAe;AAE3D,IAAM,WAAW,WAA+C,SAASA,UAC9E,IASA,KACA;AAVA,eAIe;AAAA,IAHb;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,KAA+E,CAAC;AAAA,EA7BjG,IAyBE,IAIe,SAAE,QAAM,aAAa,WAAW,WAAW,gBA7B5D,IA6BiB,IAA+D,wBAA/D,IAA+D,CAA7D,QAA8B,eAJ/C,SAKE;AAAA;AAAA,IACA;AAAA,EA/BJ,IAyBE,IAOK,iBAPL,IAOK;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,iBAAiB,MAAM;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,oBAAkB,eAAe,iBAAiB;AAAA,MAClD,gBAAc,eAAe,OAAO;AAAA,MACpC,WAAW,KAAK,gBAAgB,SAAsB;AAAA,MACtD;AAAA,MACA;AAAA,OACI,OANL;AAAA,MAQC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,EAAE,CAAC,yBAAyB,UAAU,EAAE,GAAG,WAAW;AAAA,cACtD;AAAA,YACF;AAAA,aACI,cANL;AAAA,YAQE;AAAA;AAAA,QACH;AAAA,QACA,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,QAAQ,YAAY,EAAE,GAChE,UACH;AAAA,QACA,oBAAC,gBAAa,IAAI,gBAAiB,wBAAa;AAAA;AAAA;AAAA,EAClD;AAEJ,CAAC;","names":["Fieldset"]}

package/dist/chunk-JZXZYEPG.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/accordion/accordion-content.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItemContext } from \"./context\";\n\nexport interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\nexport const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(\n  ({ children, className, ...rest }, ref) => {\n    const context = useContext(AccordionItemContext);\n    if (context === null) {\n      return null;\n    }\n    return (\n      <div\n        id={context.contentId}\n        aria-hidden={!context.open}\n        data-state={context.open ? \"open\" : \"closed\"}\n        {...{ inert: context.open ? undefined : \"true\" }}\n        className={clsx(\"hds-accordion-item-content\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        <div className={clsx(\"hds-accordion-item-content-inner\")}>{children}</div>\n      </div>\n    );\n  },\n);\n\nAccordionContent.displayName = \"Accordion.Content\";\n"],"mappings":";;;;;;;;;;AACA,SAAS,YAAY,kBAAkB;AACvC,SAAS,YAAY;AAuBb;AAhBD,IAAM,mBAAmB;AAAA,EAC9B,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UAVf,IAUG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,UAAM,UAAU,WAAW,oBAAoB;AAC/C,QAAI,YAAY,MAAM;AACpB,aAAO;AAAA,IACT;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,QAAQ;AAAA,QACZ,eAAa,CAAC,QAAQ;AAAA,QACtB,cAAY,QAAQ,OAAO,SAAS;AAAA,SAChC,EAAE,OAAO,QAAQ,OAAO,SAAY,OAAO,IAJhD;AAAA,QAKC,WAAW,KAAK,8BAA8B,SAAsB;AAAA,QACpE;AAAA,UACI,OAPL;AAAA,QASC,8BAAC,SAAI,WAAW,KAAK,kCAAkC,GAAI,UAAS;AAAA;AAAA,IACtE;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;","names":[]}

package/dist/chunk-QRGGURVO.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/form/checkbox/checkbox.tsx"],"sourcesContent":["import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\nimport { useFieldsetContext } from \"../fieldset\";\n\nexport type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"defaultValue\"> & {\n  children: ReactNode;\n  variant?: \"plain\" | \"bounding-box\";\n  title?: string;\n} & (\n    | {\n        /**\n         * Set to `true` to add error styling. The component will take care of aria to indicate invalid state.\n         *\n         * Normally you don't need this, as you should wrap your Checkboxes in the Fieldset component.\n         * When providing an errorMessage to Fieldset, all contained Checkboxes will get correct hasError state.\n         *\n         * You can use this when your checkbox is part of a non-HDS fieldset which shows an error message.\n         */\n        hasError?: boolean;\n        errorMessage?: never;\n      }\n    | {\n        hasError?: never;\n        /**\n         * Set an error message to add error styling, and display the error message.\n         * The component will take care of aria to connect the error message to the checkbox.\n         *\n         * Use this when your checkbox is standalone (not part of a fieldset).\n         */\n        errorMessage?: ReactNode;\n      }\n  );\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      variant = \"plain\",\n      hasError: hasErrorProp,\n      errorMessage,\n      title,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const errorMessageId = useId();\n    const { hasError: hasFieldsetError } = useFieldsetContext();\n    const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;\n\n    return (\n      <div className={clsx(\"hds-checkbox-wrapper\")}>\n        <div\n          className={clsx(\n            \"hds-checkbox\",\n            {\n              [`hds-checkbox--${variant}`]: variant === \"bounding-box\",\n              \"hds-checkbox--error\": hasError,\n            },\n            className as undefined,\n          )}\n        >\n          <label>\n            <input\n              {...rest}\n              aria-invalid={hasError ? true : undefined}\n              aria-describedby={errorMessage ? errorMessageId : undefined}\n              ref={ref}\n              type=\"checkbox\"\n            />\n            <span aria-hidden className=\"hds-checkbox__checkmark\" />\n            {title ? <p className=\"hds-checkbox__title\">{title}</p> : children}\n          </label>\n          {title ? children : null}\n        </div>\n        <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n      </div>\n    );\n  },\n);\nCheckbox.displayName = \"Checkbox\";\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,YAAY,aAAuD;AAC5E,SAAS,YAAY;AA8DX,SACE,KADF;AA7BH,IAAM,WAAW;AAAA,EACtB,CACE,IASA,QACG;AAVH,iBACE;AAAA,gBAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IA1CN,IAoCI,IAOK,iBAPL,IAOK;AAAA,MANH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,iBAAiB,MAAM;AAC7B,UAAM,EAAE,UAAU,iBAAiB,IAAI,mBAAmB;AAC1D,UAAM,WAAW,CAAC,CAAC,gBAAgB,oBAAoB;AAEvD,WACE,qBAAC,SAAI,WAAW,KAAK,sBAAsB,GACzC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,cACE,CAAC,iBAAiB,OAAO,EAAE,GAAG,YAAY;AAAA,cAC1C,uBAAuB;AAAA,YACzB;AAAA,YACA;AAAA,UACF;AAAA,UAEA;AAAA,iCAAC,WACC;AAAA;AAAA,gBAAC;AAAA,iDACK,OADL;AAAA,kBAEC,gBAAc,WAAW,OAAO;AAAA,kBAChC,oBAAkB,eAAe,iBAAiB;AAAA,kBAClD;AAAA,kBACA,MAAK;AAAA;AAAA,cACP;AAAA,cACA,oBAAC,UAAK,eAAW,MAAC,WAAU,2BAA0B;AAAA,cACrD,QAAQ,oBAAC,OAAE,WAAU,uBAAuB,iBAAM,IAAO;AAAA,eAC5D;AAAA,YACC,QAAQ,WAAW;AAAA;AAAA;AAAA,MACtB;AAAA,MACA,oBAAC,gBAAa,IAAI,gBAAiB,wBAAa;AAAA,OAClD;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}

package/dist/chunk-TWUAXAMR.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/message/message.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box, type BoxProps } from \"../box/box\";\n\ninterface MessageTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const MessageTitle = forwardRef<HTMLParagraphElement, MessageTitleProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        className={clsx(\"hds-message__title\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nMessageTitle.displayName = \"Message.Title\";\n\ninterface MessageDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const MessageDescription = forwardRef<HTMLParagraphElement, MessageDescriptionProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        className={clsx(\"hds-message__description\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nMessageDescription.displayName = \"Message.Description\";\n\nexport type MessageProps = (\n  | {\n      variant?: \"success\" | \"attention\" | \"warning\" | \"info\";\n      icon?: never;\n      iconClassName?: never;\n    }\n  | {\n      variant: \"neutral\";\n      icon?: React.ReactNode;\n      iconClassName?: string;\n    }\n) &\n  Omit<BoxProps, \"variant\" | \"asChild\">;\n\nexport const Message = forwardRef<HTMLDivElement, MessageProps>(\n  ({ children, className, variant = \"success\", icon, iconClassName, ...rest }, ref) => {\n    return (\n      <Box\n        className={clsx(`hds-message`, `hds-message--${variant}`, className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {variant === \"neutral\" && (\n          <div className={clsx(\"hds-message--neutral__icon\", iconClassName as undefined)}>\n            {icon}\n          </div>\n        )}\n        {children}\n      </Box>\n    );\n  },\n) as MessageType;\nMessage.displayName = \"Message\";\n\ntype MessageType = ReturnType<typeof forwardRef<HTMLDivElement, MessageProps>> & {\n  Title: typeof MessageTitle;\n  Description: typeof MessageDescription;\n};\nMessage.Title = MessageTitle;\nMessage.Description = MessageDescription;\n"],"mappings":";;;;;;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,YAAY;AAef,cAiDA,YAjDA;AAJC,IAAM,eAAe;AAAA,EAC1B,CAAC,IAAiC,QAAQ;AAAzC,iBAAE,WAAS,UAdd,IAcG,IAAyB,iBAAzB,IAAyB,CAAvB,WAAS;AACV,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,sBAAsB,SAAsB;AAAA,QAC5D;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;AAUpB,IAAM,qBAAqB;AAAA,EAChC,CAAC,IAAiC,QAAQ;AAAzC,iBAAE,WAAS,UApCd,IAoCG,IAAyB,iBAAzB,IAAyB,CAAvB,WAAS;AACV,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,4BAA4B,SAAsB;AAAA,QAClE;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAgB1B,IAAM,UAAU;AAAA,EACrB,CAAC,IAA4E,QAAQ;AAApF,iBAAE,YAAU,WAAW,UAAU,WAAW,MAAM,cAhErD,IAgEG,IAAoE,iBAApE,IAAoE,CAAlE,YAAU,aAAW,WAAqB,QAAM;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,eAAe,gBAAgB,OAAO,IAAI,SAAsB;AAAA,QAChF;AAAA,SACI,OAHL;AAAA,QAKE;AAAA,sBAAY,aACX,oBAAC,SAAI,WAAW,KAAK,8BAA8B,aAA0B,GAC1E,gBACH;AAAA,UAED;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,QAAQ,cAAc;AAMtB,QAAQ,QAAQ;AAChB,QAAQ,cAAc;","names":[]}

package/dist/chunk-XFKD6EEJ.mjs

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-XFKD6EEJ.mjs.map