fix(Card): using type namespace (#781)

package.json

@@ -12,9 +12,10 @@
 	},
 	"devDependencies": {
 		"@node-cli/bundlesize": "4.2.1",
-		"@versini/dev-dependencies-client": "7.0.2",
-		"@versini/dev-dependencies-types": "3.0.0",
+		"@versini/dev-dependencies-common": "5.0.2",
+		"@versini/dev-dependencies-client": "7.0.3",
+		"@versini/dev-dependencies-types": "3.0.1",
 		"@versini/ui-styles": "workspace:./packages/ui-styles"
 	},
-	"packageManager": "[email protected].0+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c"
+	"packageManager": "[email protected].1"
 }

packages/ui-card/src/components/Card/Card.tsx

@@ -1,4 +1,4 @@
-import type { CardHeaderProps, CardProps } from "@versini/ui-card-types";
+import type { CardTypes } from "@versini/ui-card-types";
 import { useUniqueId } from "@versini/ui-hooks";
 
 import { CARD_CLASSNAME } from "../../common/constants";
@@ -9,7 +9,7 @@ function CardHeader({
 	content,
 	userAriaLabelledby,
 	className,
-}: CardHeaderProps) {
+}: CardTypes.HeaderProps) {
 	if (typeof content === "string") {
 		return (
 			<h2 id={id} className={className}>
@@ -43,7 +43,7 @@ export const Card = ({
 	noBorder = false,
 
 	...otherProps
-}: CardProps) => {
+}: CardTypes.Props) => {
 	let headerId = null,
 		sectionAriaLabelledBy = null;
 

packages/ui-types/ui-card-types/index.d.ts

@@ -1,59 +1,61 @@
 import type { SpacingProps } from "@versini/ui-private/dist/utilities";
 import React from "react";
 
-export type CardProps = {
-	/**
-	 * The children to render.
-	 */
-	children: React.ReactNode;
-	/**
-	 * If the header prop is not provided, the Card must be
-	 * described via aria-labelledby.
-	 */
-	"aria-labelledby"?: string;
-	/**
-	 * CSS class(es) to add to the body.
-	 */
-	bodyClassName?: string;
-	/**
-	 * CSS class(es) to add to the main component wrapper.
-	 */
-	className?: string;
-	/**
-	 * If true, the card will be smaller.
-	 */
-	compact?: boolean;
-	/**
-	 * The content to render in the footer.
-	 */
-	footer?: React.ReactNode;
-	/**
-	 * CSS class(es) to add to the footer.
-	 */
-	footerClassName?: string;
-	/**
-	 * The content to render in the header.
-	 */
-	header?: React.ReactNode;
-	/**
-	 * CSS class(es) to add to the header.
-	 */
-	headerClassName?: string;
-	/**
-	 * The mode of Card. This will change the color of the Card.
-	 */
-	mode?: "darker" | "dark" | "light" | "system" | "alt-system";
-	/**
-	 * Whether or not to render the Card with a border.
-	 * @default false
-	 */
-	noBorder?: boolean;
-} & SpacingProps;
+declare namespace CardTypes {
+	export type Props = {
+		/**
+		 * The children to render.
+		 */
+		children: React.ReactNode;
+		/**
+		 * If the header prop is not provided, the Card must be
+		 * described via aria-labelledby.
+		 */
+		"aria-labelledby"?: string;
+		/**
+		 * CSS class(es) to add to the body.
+		 */
+		bodyClassName?: string;
+		/**
+		 * CSS class(es) to add to the main component wrapper.
+		 */
+		className?: string;
+		/**
+		 * If true, the card will be smaller.
+		 */
+		compact?: boolean;
+		/**
+		 * The content to render in the footer.
+		 */
+		footer?: React.ReactNode;
+		/**
+		 * CSS class(es) to add to the footer.
+		 */
+		footerClassName?: string;
+		/**
+		 * The content to render in the header.
+		 */
+		header?: React.ReactNode;
+		/**
+		 * CSS class(es) to add to the header.
+		 */
+		headerClassName?: string;
+		/**
+		 * The mode of Card. This will change the color of the Card.
+		 */
+		mode?: "darker" | "dark" | "light" | "system" | "alt-system";
+		/**
+		 * Whether or not to render the Card with a border.
+		 * @default false
+		 */
+		noBorder?: boolean;
+	} & SpacingProps;
 
-export type CardHeaderProps = {
-	className: string;
-	content: React.ReactNode;
+	export type HeaderProps = {
+		className: string;
+		content: React.ReactNode;
 
-	id?: string;
-	userAriaLabelledby?: string;
-};
+		id?: string;
+		userAriaLabelledby?: string;
+	};
+}

packages/ui-types/ui-card-types/package.json

@@ -13,6 +13,6 @@
 	},
 	"types": "index.d.ts",
 	"dependencies": {
-		"@versini/ui-private": "workspace:../ui-private"
+		"@versini/ui-private": "workspace:../../ui-private"
 	}
 }