@askrjs/themes 0.0.25 → 0.0.28

package/src/components/card/card.tsx

@@ -16,6 +16,7 @@ function normalizeVariant(variant: CardVariant | undefined) {
   return variant && variant !== "default" ? variant : undefined;
 }
 
+/** Root card container; applies the `card` class and an optional `variant` modifier. */
 export function Card(props: CardProps): JSX.Element {
   const { children, class: className, variant, ref, ...rest } = props;
   const normalizedVariant = normalizeVariant(variant);
@@ -30,6 +31,7 @@ export function Card(props: CardProps): JSX.Element {
   return <div {...finalProps}>{children}</div>;
 }
 
+/** Renders the header region of a {@link Card}. */
 export function CardHeader(props: CardHeaderProps): JSX.Element {
   const { children, class: className, ref, ...rest } = props;
   const finalProps = mergeProps(rest, {
@@ -41,6 +43,7 @@ export function CardHeader(props: CardHeaderProps): JSX.Element {
   return <div {...finalProps}>{children}</div>;
 }
 
+/** Renders a {@link Card}'s title, defaulting to an `<h3>` (override with `titleAs`). */
 export function CardTitle(props: CardTitleProps): JSX.Element {
   const { children, class: className, ref, titleAs: TitleTag = "h3", ...rest } = props;
   const finalProps = mergeProps(rest, {
@@ -52,6 +55,7 @@ export function CardTitle(props: CardTitleProps): JSX.Element {
   return <TitleTag {...finalProps}>{children}</TitleTag>;
 }
 
+/** Renders a {@link Card}'s supporting description text. */
 export function CardDescription(props: CardDescriptionProps): JSX.Element {
   const { children, class: className, ref, ...rest } = props;
   const finalProps = mergeProps(rest, {
@@ -63,6 +67,7 @@ export function CardDescription(props: CardDescriptionProps): JSX.Element {
   return <p {...finalProps}>{children}</p>;
 }
 
+/** Renders the main content region of a {@link Card}. */
 export function CardContent(props: CardContentProps): JSX.Element {
   const { children, class: className, ref, ...rest } = props;
   const finalProps = mergeProps(rest, {
@@ -74,6 +79,7 @@ export function CardContent(props: CardContentProps): JSX.Element {
   return <div {...finalProps}>{children}</div>;
 }
 
+/** Renders the footer region of a {@link Card}. */
 export function CardFooter(props: CardFooterProps): JSX.Element {
   const { children, class: className, ref, ...rest } = props;
   const finalProps = mergeProps(rest, {
@@ -85,6 +91,7 @@ export function CardFooter(props: CardFooterProps): JSX.Element {
   return <div {...finalProps}>{children}</div>;
 }
 
+/** Renders an action/control region of a {@link Card}, typically positioned alongside the header. */
 export function CardAction(props: CardActionProps): JSX.Element {
   const { children, class: className, ref, ...rest } = props;
   const finalProps = mergeProps(rest, {

package/src/components/card/card.types.ts

@@ -1,24 +1,29 @@
 import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 
+/** Visual style of a {@link CardProps} card. */
 export type CardVariant = "default" | "raised";
+/** Heading tag allowed for a card's title via `titleAs`. */
 export type CardTitleHeadingTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 
 type DivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref">;
 type HeadingProps = Omit<JSX.IntrinsicElements["h3"], "children" | "ref">;
 type ParagraphProps = Omit<JSX.IntrinsicElements["p"], "children" | "ref">;
 
+/** Props for the {@link Card} component. */
 export type CardProps = DivProps & {
   children?: unknown;
   variant?: CardVariant;
   ref?: Ref<HTMLDivElement>;
 };
 
+/** Props for the {@link CardHeader} component. */
 export type CardHeaderProps = DivProps & {
   children?: unknown;
   ref?: Ref<HTMLDivElement>;
 };
 
+/** Props for the {@link CardTitle} component. */
 export type CardTitleProps = HeadingProps & {
   children?: unknown;
   /** Choose the level that follows the surrounding document hierarchy. */
@@ -26,21 +31,25 @@ export type CardTitleProps = HeadingProps & {
   ref?: Ref<HTMLHeadingElement>;
 };
 
+/** Props for the {@link CardDescription} component. */
 export type CardDescriptionProps = ParagraphProps & {
   children?: unknown;
   ref?: Ref<HTMLParagraphElement>;
 };
 
+/** Props for the {@link CardContent} component. */
 export type CardContentProps = DivProps & {
   children?: unknown;
   ref?: Ref<HTMLDivElement>;
 };
 
+/** Props for the {@link CardFooter} component. */
 export type CardFooterProps = DivProps & {
   children?: unknown;
   ref?: Ref<HTMLDivElement>;
 };
 
+/** Props for the {@link CardAction} component. */
 export type CardActionProps = DivProps & {
   children?: unknown;
   ref?: Ref<HTMLDivElement>;