@purpurds/radio-card-group 7.6.0 → 7.7.0

package/dist/radio-card-item.d.ts

@@ -1,4 +1,5 @@
-import { default as React, HTMLAttributes, ReactElement, ReactNode } from 'react';
+import { default as React, ReactElement, ReactNode } from 'react';
+import { BaseProps } from '@purpurds/common-types';
 import { RadioCardImageProps } from './radio-card-item-image';
 
 type CustomElement = ((props: {
@@ -7,13 +8,11 @@ type CustomElement = ((props: {
 type NonNullCustomElement = ((props: {
     disabled?: boolean;
 }) => NonNullable<ReactNode>) | NonNullable<ReactNode>;
-export type RadioCardItemProps = Omit<HTMLAttributes<HTMLDivElement>, "id" | "title"> & {
-    ["data-testid"]?: string;
+export type RadioCardItemProps = Omit<BaseProps, "id" | "title"> & {
     /**
      * `string | ReactNode | (props: { disabled?: boolean }) => ReactNode`
      */
     body?: string | CustomElement;
-    children?: ReactNode;
     disabled?: boolean;
     id: string;
     /**
@@ -37,36 +36,7 @@ export type RadioCardItemProps = Omit<HTMLAttributes<HTMLDivElement>, "id" | "ti
      */
     title: string | NonNullCustomElement;
 };
-export declare const RadioCardItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "id"> & {
-    "data-testid"?: string;
-    /**
-     * `string | ReactNode | (props: { disabled?: boolean }) => ReactNode`
-     */
-    body?: string | CustomElement;
-    children?: ReactNode;
-    disabled?: boolean;
-    id: string;
-    /**
-     * The radio image.
-     *
-        union = {
-          "data-testid"?: string | undefined;
-          altText: string;
-          loading?: "lazy" | "eager" | undefined;
-          noPlaceholder?: boolean | undefined;
-          src: string;
-        } |
-        ((props: {
-          disabled?: boolean;
-        }) => ReactNode) | React.ReactNode
-     * */
-    image?: RadioCardImageProps | CustomElement;
-    value: string;
-    /**
-     * `union = string | Omit<ReactNode, "undefined" | "null">`
-     */
-    title: string | NonNullCustomElement;
-} & React.RefAttributes<HTMLDivElement>>;
+export declare const RadioCardItem: React.ForwardRefExoticComponent<Omit<RadioCardItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const isRadioCardItem: (child?: ReactNode) => child is ReactElement<RadioCardItemProps>;
 export {};
 //# sourceMappingURL=radio-card-item.d.ts.map

package/dist/radio-card-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-card-item.d.ts","sourceRoot":"","sources":["../src/radio-card-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,KAAK,cAAc,EAEnB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,yBAAyB,CAAC;AAIjC,KAAK,aAAa,GAAG,CAAC,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;AAChF,KAAK,oBAAoB,GACrB,CAAC,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,KAAK,WAAW,CAAC,SAAS,CAAC,CAAC,GAC3D,WAAW,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC,GAAG;IACtF,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX;;;;;;;;;;;;;SAaK;IACL,KAAK,CAAC,EAAE,mBAAmB,GAAG,aAAa,CAAC;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,oBAAoB,CAAC;CACtC,CAAC;AAyEF,eAAO,MAAM,aAAa;oBArGN,MAAM;IACxB;;OAEG;WACI,MAAM,GAAG,aAAa;eAClB,SAAS;eACT,OAAO;QACd,MAAM;IACV;;;;;;;;;;;;;SAaK;YACG,mBAAmB,GAAG,aAAa;WACpC,MAAM;IACb;;OAEG;WACI,MAAM,GAAG,oBAAoB;wCA0EyB,CAAC;AAGhE,eAAO,MAAM,eAAe,WAAY,SAAS,KAAG,KAAK,IAAI,YAAY,CAAC,kBAAkB,CAChB,CAAC"}
+{"version":3,"file":"radio-card-item.d.ts","sourceRoot":"","sources":["../src/radio-card-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA8B,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAKxD,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,yBAAyB,CAAC;AAIjC,KAAK,aAAa,GAAG,CAAC,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;AAChF,KAAK,oBAAoB,GACrB,CAAC,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,KAAK,WAAW,CAAC,SAAS,CAAC,CAAC,GAC3D,WAAW,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,OAAO,CAAC,GAAG;IACjE;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX;;;;;;;;;;;;;SAaK;IACL,KAAK,CAAC,EAAE,mBAAmB,GAAG,aAAa,CAAC;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,oBAAoB,CAAC;CACtC,CAAC;AAOF,eAAO,MAAM,aAAa,wGA+DzB,CAAC;AAIF,eAAO,MAAM,eAAe,WAAY,SAAS,KAAG,KAAK,IAAI,YAAY,CAAC,kBAAkB,CAChB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/radio-card-group",
-  "version": "7.6.0",
+  "version": "7.7.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/radio-card-group.cjs.js",
   "types": "./dist/radio-card-group.d.ts",
@@ -17,10 +17,11 @@
   "dependencies": {
     "@radix-ui/react-radio-group": "~1.2.3",
     "classnames": "~2.5.0",
-    "@purpurds/heading": "7.6.0",
-    "@purpurds/skeleton": "7.6.0",
-    "@purpurds/tokens": "7.6.0",
-    "@purpurds/paragraph": "7.6.0"
+    "@purpurds/common-types": "7.7.0",
+    "@purpurds/tokens": "7.7.0",
+    "@purpurds/paragraph": "7.7.0",
+    "@purpurds/skeleton": "7.7.0",
+    "@purpurds/heading": "7.7.0"
   },
   "devDependencies": {
     "eslint": "9.24.0",
@@ -41,11 +42,11 @@
     "typescript": "^5.6.3",
     "vite": "^6.2.1",
     "vitest": "^3.1.2",
-    "@purpurds/badge": "7.6.0",
-    "@purpurds/button": "7.6.0",
-    "@purpurds/grid": "7.6.0",
-    "@purpurds/text-field": "7.6.0",
-    "@purpurds/component-rig": "1.0.0"
+    "@purpurds/button": "7.7.0",
+    "@purpurds/badge": "7.7.0",
+    "@purpurds/component-rig": "1.0.0",
+    "@purpurds/grid": "7.7.0",
+    "@purpurds/text-field": "7.7.0"
   },
   "peerDependencies": {
     "@types/react": "^18 || ^19",

package/src/radio-card-group.tsx

@@ -1,4 +1,4 @@
-import React, { Children, cloneElement, type ForwardedRef, forwardRef, type ReactNode, type Ref } from "react";
+import React, { Children, cloneElement, forwardRef, type ReactNode, type Ref } from "react";
 import { Heading, type HeadingTagType } from "@purpurds/heading";
 import * as RadixRadioGroup from "@radix-ui/react-radio-group";
 
@@ -81,67 +81,68 @@ export type RadioCardGroupProps = StylingProps & {
 
 const rootClassName = "purpur-radio-card-group";
 
-const RadioCardGroupComponent = (
-  {
-    "data-testid": dataTestId,
-    "aria-labelledby": ariaLabelledby,
-    children,
-    className,
-    items,
-    heading,
-    headingTag = "h2",
-    loop = true,
-    orientation = "vertical",
-    radioPosition = "right",
-    ...props
-  }: RadioCardGroupProps,
-  ref: ForwardedRef<HTMLDivElement>
-) => {
-  const radioCardItemChildren = Children.toArray(children).filter(isRadioCardItem);
+export const RadioCardGroup = forwardRef<HTMLDivElement, RadioCardGroupProps>(
+  (
+    {
+      "data-testid": dataTestId,
+      "aria-labelledby": ariaLabelledby,
+      children,
+      className,
+      items,
+      heading,
+      headingTag = "h2",
+      loop = true,
+      orientation = "vertical",
+      radioPosition = "right",
+      ...props
+    },
+    ref
+  ) => {
+    const radioCardItemChildren = Children.toArray(children).filter(isRadioCardItem);
 
-  return (
-    <div className={cx(className, `${rootClassName}__container`)} ref={ref}>
-      {heading && (
-        <Heading
-          data-testid={dataTestId ? `${dataTestId}-heading` : undefined}
-          id={`${props.id}-heading`}
-          tag={headingTag}
-          variant="subsection-100"
-        >
-          {props.required && <span aria-hidden>{"* "}</span>}
-          {heading}
-        </Heading>
-      )}
-      {(!!items?.length || radioCardItemChildren.length) && (
-        <RadixRadioGroup.Root
-          {...props}
-          aria-labelledby={ariaLabelledby || (heading ? `${props.id}-heading` : undefined)}
-          className={cx(
-            rootClassName,
-            `${rootClassName}--${orientation}`,
-            `${rootClassName}--radio-${radioPosition}`
-          )}
-          data-testid={dataTestId}
-          loop={loop}
-        >
-          {items?.map((item) => (
-            <RadioCardItem
-              key={item.id}
-              {...item}
-              disabled={item.disabled || props.disabled}
-              data-testid={dataTestId ? `${dataTestId}-item` : undefined}
-            />
-          ))}
-          {Children.map(radioCardItemChildren, (child) =>
-            cloneElement(child, { disabled: child.props.disabled || props.disabled })
-          )}
-        </RadixRadioGroup.Root>
-      )}
-    </div>
-  );
-};
+    return (
+      <div className={cx(className, `${rootClassName}__container`)} ref={ref}>
+        {heading && (
+          <Heading
+            data-testid={dataTestId ? `${dataTestId}-heading` : undefined}
+            id={`${props.id}-heading`}
+            tag={headingTag}
+            variant="subsection-100"
+          >
+            {props.required && <span aria-hidden>{"* "}</span>}
+            {heading}
+          </Heading>
+        )}
+        {(!!items?.length || radioCardItemChildren.length) && (
+          <RadixRadioGroup.Root
+            {...props}
+            aria-labelledby={ariaLabelledby || (heading ? `${props.id}-heading` : undefined)}
+            className={cx(
+              rootClassName,
+              `${rootClassName}--${orientation}`,
+              `${rootClassName}--radio-${radioPosition}`
+            )}
+            data-testid={dataTestId}
+            loop={loop}
+          >
+            {items?.map((item) => (
+              <RadioCardItem
+                key={item.id}
+                {...item}
+                disabled={item.disabled || props.disabled}
+                data-testid={dataTestId ? `${dataTestId}-item` : undefined}
+              />
+            ))}
+            {Children.map(radioCardItemChildren, (child) =>
+              cloneElement(child, { disabled: child.props.disabled || props.disabled })
+            )}
+          </RadixRadioGroup.Root>
+        )}
+      </div>
+    );
+  }
+);
 
-export const RadioCardGroup = forwardRef(RadioCardGroupComponent);
 RadioCardGroup.displayName = "RadioCardGroup";
 
 // RadioCardItem must be exported after `RadioCardGroup` for the Storybook controls to be generated from RadioCardGroup props

package/src/radio-card-item.tsx

@@ -1,11 +1,5 @@
-import React, {
-  type ForwardedRef,
-  forwardRef,
-  type HTMLAttributes,
-  isValidElement,
-  type ReactElement,
-  type ReactNode,
-} from "react";
+import React, { forwardRef, isValidElement, type ReactElement, type ReactNode } from "react";
+import type { BaseProps } from "@purpurds/common-types";
 import { Paragraph } from "@purpurds/paragraph";
 import * as RadixRadioGroup from "@radix-ui/react-radio-group";
 
@@ -23,13 +17,11 @@ type NonNullCustomElement =
   | ((props: { disabled?: boolean }) => NonNullable<ReactNode>)
   | NonNullable<ReactNode>;
 
-export type RadioCardItemProps = Omit<HTMLAttributes<HTMLDivElement>, "id" | "title"> & {
-  ["data-testid"]?: string;
+export type RadioCardItemProps = Omit<BaseProps, "id" | "title"> & {
   /**
    * `string | ReactNode | (props: { disabled?: boolean }) => ReactNode`
    */
   body?: string | CustomElement;
-  children?: ReactNode;
   disabled?: boolean;
   id: string;
   /**
@@ -59,73 +51,71 @@ const renderCustomElement = (
   { disabled }: Pick<RadioCardItemProps, "disabled">
 ) => (typeof element === "function" ? element({ disabled }) : element);
 
-const RadioCardItemComponent = (
-  { title, ...propsx }: RadioCardItemProps,
-  ref: ForwardedRef<HTMLDivElement>
-) => {
-  const { ["data-testid"]: dataTestid, body, children, disabled, id, image, value } = propsx;
+export const RadioCardItem = forwardRef<HTMLDivElement, RadioCardItemProps>(
+  ({ title, ...propsx }, ref) => {
+    const { ["data-testid"]: dataTestid, body, children, disabled, id, image, value } = propsx;
 
-  const props = { title, ...propsx };
+    const props = { title, ...propsx };
 
-  return (
-    <div className={cx(`${rootClassName}-container`)} ref={ref}>
-      <RadixRadioGroup.Item
-        className={cx(rootClassName)}
-        data-testid={dataTestid}
-        disabled={disabled}
-        id={id}
-        value={value}
-      >
-        {image && (
-          <span className={cx(`${rootClassName}-image-container`)}>
-            {isRadioCardItemImageProps(image) ? (
-              <RadioCardImage {...image} data-testid={dataTestid && `${dataTestid}-image`} />
-            ) : (
-              renderCustomElement(image, props)
-            )}
-          </span>
-        )}
-        <span className={cx(`${rootClassName}-content`)}>
-          <span className={cx(`${rootClassName}-top-container`)}>
-            {typeof title === "string" ? (
-              <Paragraph
-                className={cx(`${rootClassName}-title`)}
-                data-testid={dataTestid && `${dataTestid}-title`}
-                variant="paragraph-100"
-                disabled={disabled}
-              >
-                {title}
-              </Paragraph>
-            ) : (
-              renderCustomElement(title, props)
-            )}
-            <span className={cx(`${rootClassName}-radio`)}>
-              <RadixRadioGroup.Indicator className={cx(`${rootClassName}-indicator`)} />
+    return (
+      <div className={cx(`${rootClassName}-container`)} ref={ref}>
+        <RadixRadioGroup.Item
+          className={cx(rootClassName)}
+          data-testid={dataTestid}
+          disabled={disabled}
+          id={id}
+          value={value}
+        >
+          {image && (
+            <span className={cx(`${rootClassName}-image-container`)}>
+              {isRadioCardItemImageProps(image) ? (
+                <RadioCardImage {...image} data-testid={dataTestid && `${dataTestid}-image`} />
+              ) : (
+                renderCustomElement(image, props)
+              )}
             </span>
-          </span>
-          {body && (
-            <span className={cx(`${rootClassName}-bottom-container`)}>
-              {typeof body === "string" ? (
+          )}
+          <span className={cx(`${rootClassName}-content`)}>
+            <span className={cx(`${rootClassName}-top-container`)}>
+              {typeof title === "string" ? (
                 <Paragraph
-                  data-testid={dataTestid && `${dataTestid}-body`}
+                  className={cx(`${rootClassName}-title`)}
+                  data-testid={dataTestid && `${dataTestid}-title`}
                   variant="paragraph-100"
                   disabled={disabled}
                 >
-                  {body}
+                  {title}
                 </Paragraph>
               ) : (
-                renderCustomElement(body, props)
+                renderCustomElement(title, props)
               )}
+              <span className={cx(`${rootClassName}-radio`)}>
+                <RadixRadioGroup.Indicator className={cx(`${rootClassName}-indicator`)} />
+              </span>
             </span>
-          )}
-        </span>
-      </RadixRadioGroup.Item>
-      {children}
-    </div>
-  );
-};
+            {body && (
+              <span className={cx(`${rootClassName}-bottom-container`)}>
+                {typeof body === "string" ? (
+                  <Paragraph
+                    data-testid={dataTestid && `${dataTestid}-body`}
+                    variant="paragraph-100"
+                    disabled={disabled}
+                  >
+                    {body}
+                  </Paragraph>
+                ) : (
+                  renderCustomElement(body, props)
+                )}
+              </span>
+            )}
+          </span>
+        </RadixRadioGroup.Item>
+        {children}
+      </div>
+    );
+  }
+);
 
-export const RadioCardItem = forwardRef(RadioCardItemComponent);
 RadioCardItem.displayName = "RadioCardItem";
 
 export const isRadioCardItem = (child?: ReactNode): child is ReactElement<RadioCardItemProps> =>