@accelint/design-toolkit 9.2.0 → 9.4.0

package/dist/components/drawer/view.d.ts

@@ -13,15 +13,38 @@
 import { ViewStackViewProps } from "../view-stack/types.js";
 import "client-only";
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime73 from "react/jsx-runtime";
 
 //#region src/components/drawer/view.d.ts
+
+/**
+ * DrawerView - Content region for a specific drawer view.
+ *
+ * Each view is identified by a unique `id` and displayed when that
+ * view is active in the stack. Contains DrawerHeader, DrawerContent,
+ * and optionally DrawerFooter.
+ *
+ * @param props - ViewStackViewProps & ComponentPropsWithRef<'div'>
+ * @param props.id - Unique identifier for the view.
+ * @param props.children - Content to render inside the view.
+ * @param props.className - Optional CSS class name.
+ * @returns The rendered DrawerView component.
+ *
+ * @example
+ * ```tsx
+ * <DrawerView id={viewId}>
+ *   <DrawerHeader title="Settings" />
+ *   <DrawerContent>View content here</DrawerContent>
+ *   <DrawerFooter>Footer actions</DrawerFooter>
+ * </DrawerView>
+ * ```
+ */
 declare function DrawerView({
   id,
   children,
   className,
   ...rest
-}: ViewStackViewProps & ComponentPropsWithRef<'div'>): react_jsx_runtime16.JSX.Element;
+}: ViewStackViewProps & ComponentPropsWithRef<'div'>): react_jsx_runtime73.JSX.Element;
 //#endregion
 export { DrawerView };
 //# sourceMappingURL=view.d.ts.map

package/dist/components/drawer/view.js

@@ -22,6 +22,28 @@ import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.css";
 
 //#region src/components/drawer/view.tsx
+/**
+* DrawerView - Content region for a specific drawer view.
+*
+* Each view is identified by a unique `id` and displayed when that
+* view is active in the stack. Contains DrawerHeader, DrawerContent,
+* and optionally DrawerFooter.
+*
+* @param props - ViewStackViewProps & ComponentPropsWithRef<'div'>
+* @param props.id - Unique identifier for the view.
+* @param props.children - Content to render inside the view.
+* @param props.className - Optional CSS class name.
+* @returns The rendered DrawerView component.
+*
+* @example
+* ```tsx
+* <DrawerView id={viewId}>
+*   <DrawerHeader title="Settings" />
+*   <DrawerContent>View content here</DrawerContent>
+*   <DrawerFooter>Footer actions</DrawerFooter>
+* </DrawerView>
+* ```
+*/
 function DrawerView({ id, children, className, ...rest }) {
 	const { register, unregister } = useContext(DrawerContext);
 	useEffect(() => {

package/dist/components/drawer/view.js.map

@@ -1 +1 @@
-{"version":3,"file":"view.js","names":[],"sources":["../../../src/components/drawer/view.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { type ComponentPropsWithRef, useContext, useEffect } from 'react';\nimport { ViewStackView } from '../view-stack/view';\nimport { DrawerContext } from './context';\nimport styles from './styles.module.css';\nimport type { ViewStackViewProps } from '../view-stack/types';\n\nexport function DrawerView({\n  id,\n  children,\n  className,\n  ...rest\n}: ViewStackViewProps & ComponentPropsWithRef<'div'>) {\n  const { register, unregister } = useContext(DrawerContext);\n\n  useEffect(() => {\n    register(id);\n\n    return () => unregister(id);\n  }, [register, unregister, id]);\n\n  return (\n    <ViewStackView id={id}>\n      <div {...rest} className={clsx(styles.view, className)} role='tabpanel'>\n        {children}\n      </div>\n    </ViewStackView>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqBA,SAAgB,WAAW,EACzB,IACA,UACA,WACA,GAAG,QACiD;CACpD,MAAM,EAAE,UAAU,eAAe,WAAW,cAAc;AAE1D,iBAAgB;AACd,WAAS,GAAG;AAEZ,eAAa,WAAW,GAAG;IAC1B;EAAC;EAAU;EAAY;EAAG,CAAC;AAE9B,QACE,oBAAC;EAAkB;YACjB,oBAAC;GAAI,GAAI;GAAM,WAAW,KAAK,OAAO,MAAM,UAAU;GAAE,MAAK;GAC1D;IACG;GACQ"}
+{"version":3,"file":"view.js","names":[],"sources":["../../../src/components/drawer/view.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { type ComponentPropsWithRef, useContext, useEffect } from 'react';\nimport { ViewStackView } from '../view-stack/view';\nimport { DrawerContext } from './context';\nimport styles from './styles.module.css';\nimport type { ViewStackViewProps } from '../view-stack/types';\n\n/**\n * DrawerView - Content region for a specific drawer view.\n *\n * Each view is identified by a unique `id` and displayed when that\n * view is active in the stack. Contains DrawerHeader, DrawerContent,\n * and optionally DrawerFooter.\n *\n * @param props - ViewStackViewProps & ComponentPropsWithRef<'div'>\n * @param props.id - Unique identifier for the view.\n * @param props.children - Content to render inside the view.\n * @param props.className - Optional CSS class name.\n * @returns The rendered DrawerView component.\n *\n * @example\n * ```tsx\n * <DrawerView id={viewId}>\n *   <DrawerHeader title=\"Settings\" />\n *   <DrawerContent>View content here</DrawerContent>\n *   <DrawerFooter>Footer actions</DrawerFooter>\n * </DrawerView>\n * ```\n */\nexport function DrawerView({\n  id,\n  children,\n  className,\n  ...rest\n}: ViewStackViewProps & ComponentPropsWithRef<'div'>) {\n  const { register, unregister } = useContext(DrawerContext);\n\n  useEffect(() => {\n    register(id);\n\n    return () => unregister(id);\n  }, [register, unregister, id]);\n\n  return (\n    <ViewStackView id={id}>\n      <div {...rest} className={clsx(styles.view, className)} role='tabpanel'>\n        {children}\n      </div>\n    </ViewStackView>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,SAAgB,WAAW,EACzB,IACA,UACA,WACA,GAAG,QACiD;CACpD,MAAM,EAAE,UAAU,eAAe,WAAW,cAAc;AAE1D,iBAAgB;AACd,WAAS,GAAG;AAEZ,eAAa,WAAW,GAAG;IAC1B;EAAC;EAAU;EAAY;EAAG,CAAC;AAE9B,QACE,oBAAC;EAAkB;YACjB,oBAAC;GAAI,GAAI;GAAM,WAAW,KAAK,OAAO,MAAM,UAAU;GAAE,MAAK;GAC1D;IACG;GACQ"}

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

@@ -12,56 +12,158 @@
 
 import { FlashcardComponentProps, FlashcardDetailsListProps, FlashcardProps } from "./types.js";
 import "client-only";
-import * as react43 from "react";
-import * as react_jsx_runtime166 from "react/jsx-runtime";
+import * as react24 from "react";
+import * as react_jsx_runtime75 from "react/jsx-runtime";
 
 //#region src/components/flashcard/index.d.ts
-declare const FlashcardContext: react43.Context<FlashcardProps>;
 /**
- * Example usage.
+ * Context for sharing Flashcard state across child components.
+ */
+declare const FlashcardContext: react24.Context<FlashcardProps>;
+/**
+ * Flashcard - A quick visual identifier for map entity data.
+ *
+ * Container component that provides loading state and header/subheader
+ * to child components via context.
  *
+ * @param props - {@link FlashcardProps}
+ * @param props.isLoading - Whether the flashcard is in a loading state.
+ * @param props.header - Primary header text.
+ * @param props.subheader - Secondary text below the header.
+ * @param props.children - Child components to render.
+ * @param props.className - Optional CSS class name.
+ * @returns The rendered Flashcard component.
+ *
+ * @example
  * ```tsx
- * <Flashcard isLoading={isLoading} header="Identifier" subheader="DATA">
- *  <FlashcardHero />
- *  <FlashcardAdditionalData>
- *    {secondaryData}
- *  </FlashcardAdditionalData>
- *  <FlashcardDetailsList>
- *    {detail.map((detail) => (
- *     <Fragment key={detail.id}>
- *       <FlashcardDetailsLabel>
- *         {detail.label}
- *       </FlashcardDetailsLabel>
- *       <FlashcardDetailsValue>
- *         {detail.value}
- *       </FlashcardDetailsValue>
- *     </Fragment>
- *     ))}
- *  </FlashcardDetailsList>
+ * <Flashcard isLoading={false} header="Identifier" subheader="DATA">
+ *   <FlashcardHero />
+ *   <FlashcardAdditionalData>Secondary info</FlashcardAdditionalData>
+ *   <FlashcardDetailsList>
+ *     <FlashcardDetailsLabel>Status</FlashcardDetailsLabel>
+ *     <FlashcardDetailsValue>Active</FlashcardDetailsValue>
+ *   </FlashcardDetailsList>
  * </Flashcard>
  * ```
  */
-declare function Flashcard(props: FlashcardProps): react_jsx_runtime166.JSX.Element;
+declare function Flashcard(props: FlashcardProps): react_jsx_runtime75.JSX.Element;
 declare namespace Flashcard {
   var displayName: string;
 }
-declare function FlashcardHero(props: FlashcardComponentProps): react_jsx_runtime166.JSX.Element;
+/**
+ * FlashcardHero - Upper section displaying header and subheader.
+ *
+ * Reads header and subheader from Flashcard context. Shows skeleton
+ * placeholders when the parent Flashcard has isLoading=true.
+ *
+ * @param props - {@link FlashcardComponentProps}
+ * @param props.children - Optional child content.
+ * @param props.className - Optional CSS class name.
+ * @returns The rendered FlashcardHero component.
+ *
+ * @example
+ * ```tsx
+ * <Flashcard header="Entity Name" subheader="Type">
+ *   <FlashcardHero />
+ * </Flashcard>
+ * ```
+ */
+declare function FlashcardHero(props: FlashcardComponentProps): react_jsx_runtime75.JSX.Element;
 declare namespace FlashcardHero {
   var displayName: string;
 }
-declare function FlashcardAdditionalData(props: FlashcardComponentProps): react_jsx_runtime166.JSX.Element | null;
+/**
+ * FlashcardAdditionalData - Secondary data section below the hero.
+ *
+ * Hidden when the parent Flashcard has isLoading=true.
+ *
+ * @param props - {@link FlashcardComponentProps}
+ * @param props.children - Content to display in the section.
+ * @param props.className - Optional CSS class name.
+ * @returns The rendered FlashcardAdditionalData component, or null if loading.
+ *
+ * @example
+ * ```tsx
+ * <Flashcard header="Entity" subheader="Data">
+ *   <FlashcardHero />
+ *   <FlashcardAdditionalData>
+ *     Last updated: 2024-01-15
+ *   </FlashcardAdditionalData>
+ * </Flashcard>
+ * ```
+ */
+declare function FlashcardAdditionalData(props: FlashcardComponentProps): react_jsx_runtime75.JSX.Element | null;
 declare namespace FlashcardAdditionalData {
   var displayName: string;
 }
-declare function FlashcardDetailsList(props: FlashcardDetailsListProps): react_jsx_runtime166.JSX.Element;
+/**
+ * FlashcardDetailsList - Wrapper for key-value detail pairs.
+ *
+ * Wraps DetailsList with justify alignment for flashcard styling.
+ *
+ * @param props - {@link FlashcardDetailsListProps}
+ * @param props.children - FlashcardDetailsLabel and FlashcardDetailsValue pairs.
+ * @param props.className - Optional CSS class name.
+ * @returns The rendered FlashcardDetailsList component.
+ *
+ * @example
+ * ```tsx
+ * <Flashcard header="Aircraft" subheader="Entity">
+ *   <FlashcardHero />
+ *   <FlashcardDetailsList>
+ *     <FlashcardDetailsLabel>Status</FlashcardDetailsLabel>
+ *     <FlashcardDetailsValue>Active</FlashcardDetailsValue>
+ *     <FlashcardDetailsLabel>Speed</FlashcardDetailsLabel>
+ *     <FlashcardDetailsValue>450 kts</FlashcardDetailsValue>
+ *   </FlashcardDetailsList>
+ * </Flashcard>
+ * ```
+ */
+declare function FlashcardDetailsList(props: FlashcardDetailsListProps): react_jsx_runtime75.JSX.Element;
 declare namespace FlashcardDetailsList {
   var displayName: string;
 }
-declare function FlashcardDetailsLabel(props: FlashcardComponentProps): react_jsx_runtime166.JSX.Element;
+/**
+ * FlashcardDetailsLabel - Label for detail items.
+ *
+ * Shows skeleton placeholder when the parent Flashcard has isLoading=true.
+ *
+ * @param props - {@link FlashcardComponentProps}
+ * @param props.children - Label text content.
+ * @param props.className - Optional CSS class name.
+ * @returns The rendered FlashcardDetailsLabel component.
+ *
+ * @example
+ * ```tsx
+ * <FlashcardDetailsList>
+ *   <FlashcardDetailsLabel>Status</FlashcardDetailsLabel>
+ *   <FlashcardDetailsValue>Active</FlashcardDetailsValue>
+ * </FlashcardDetailsList>
+ * ```
+ */
+declare function FlashcardDetailsLabel(props: FlashcardComponentProps): react_jsx_runtime75.JSX.Element;
 declare namespace FlashcardDetailsLabel {
   var displayName: string;
 }
-declare function FlashcardDetailsValue(props: FlashcardComponentProps): react_jsx_runtime166.JSX.Element;
+/**
+ * FlashcardDetailsValue - Value for detail items.
+ *
+ * Shows skeleton placeholder when the parent Flashcard has isLoading=true.
+ *
+ * @param props - {@link FlashcardComponentProps}
+ * @param props.children - Value text content.
+ * @param props.className - Optional CSS class name.
+ * @returns The rendered FlashcardDetailsValue component.
+ *
+ * @example
+ * ```tsx
+ * <FlashcardDetailsList>
+ *   <FlashcardDetailsLabel>Type</FlashcardDetailsLabel>
+ *   <FlashcardDetailsValue>Aircraft</FlashcardDetailsValue>
+ * </FlashcardDetailsList>
+ * ```
+ */
+declare function FlashcardDetailsValue(props: FlashcardComponentProps): react_jsx_runtime75.JSX.Element;
 declare namespace FlashcardDetailsValue {
   var displayName: string;
 }

package/dist/components/flashcard/index.js

@@ -25,32 +25,37 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.css";
 
 //#region src/components/flashcard/index.tsx
+/**
+* Context for sharing Flashcard state across child components.
+*/
 const FlashcardContext = createContext({
 	isLoading: false,
 	header: "",
 	subheader: ""
 });
 /**
-* Example usage.
+* Flashcard - A quick visual identifier for map entity data.
+*
+* Container component that provides loading state and header/subheader
+* to child components via context.
 *
+* @param props - {@link FlashcardProps}
+* @param props.isLoading - Whether the flashcard is in a loading state.
+* @param props.header - Primary header text.
+* @param props.subheader - Secondary text below the header.
+* @param props.children - Child components to render.
+* @param props.className - Optional CSS class name.
+* @returns The rendered Flashcard component.
+*
+* @example
 * ```tsx
-* <Flashcard isLoading={isLoading} header="Identifier" subheader="DATA">
-*  <FlashcardHero />
-*  <FlashcardAdditionalData>
-*    {secondaryData}
-*  </FlashcardAdditionalData>
-*  <FlashcardDetailsList>
-*    {detail.map((detail) => (
-*     <Fragment key={detail.id}>
-*       <FlashcardDetailsLabel>
-*         {detail.label}
-*       </FlashcardDetailsLabel>
-*       <FlashcardDetailsValue>
-*         {detail.value}
-*       </FlashcardDetailsValue>
-*     </Fragment>
-*     ))}
-*  </FlashcardDetailsList>
+* <Flashcard isLoading={false} header="Identifier" subheader="DATA">
+*   <FlashcardHero />
+*   <FlashcardAdditionalData>Secondary info</FlashcardAdditionalData>
+*   <FlashcardDetailsList>
+*     <FlashcardDetailsLabel>Status</FlashcardDetailsLabel>
+*     <FlashcardDetailsValue>Active</FlashcardDetailsValue>
+*   </FlashcardDetailsList>
 * </Flashcard>
 * ```
 */
@@ -70,6 +75,24 @@ function Flashcard(props) {
 	});
 }
 Flashcard.displayName = "Flashcard";
+/**
+* FlashcardHero - Upper section displaying header and subheader.
+*
+* Reads header and subheader from Flashcard context. Shows skeleton
+* placeholders when the parent Flashcard has isLoading=true.
+*
+* @param props - {@link FlashcardComponentProps}
+* @param props.children - Optional child content.
+* @param props.className - Optional CSS class name.
+* @returns The rendered FlashcardHero component.
+*
+* @example
+* ```tsx
+* <Flashcard header="Entity Name" subheader="Type">
+*   <FlashcardHero />
+* </Flashcard>
+* ```
+*/
 function FlashcardHero(props) {
 	const { children, className, ...rest } = props;
 	const { isLoading, header, subheader } = useContext(FlashcardContext);
@@ -96,6 +119,26 @@ function FlashcardHero(props) {
 FlashcardHero.displayName = "FlashcardHero";
 const FlashcardHeader = Heading;
 const FlashcardSubheader = Text;
+/**
+* FlashcardAdditionalData - Secondary data section below the hero.
+*
+* Hidden when the parent Flashcard has isLoading=true.
+*
+* @param props - {@link FlashcardComponentProps}
+* @param props.children - Content to display in the section.
+* @param props.className - Optional CSS class name.
+* @returns The rendered FlashcardAdditionalData component, or null if loading.
+*
+* @example
+* ```tsx
+* <Flashcard header="Entity" subheader="Data">
+*   <FlashcardHero />
+*   <FlashcardAdditionalData>
+*     Last updated: 2024-01-15
+*   </FlashcardAdditionalData>
+* </Flashcard>
+* ```
+*/
 function FlashcardAdditionalData(props) {
 	const { children, className, ...rest } = props;
 	const { isLoading } = useContext(FlashcardContext);
@@ -107,6 +150,29 @@ function FlashcardAdditionalData(props) {
 	});
 }
 FlashcardAdditionalData.displayName = "FlashcardAdditionalData";
+/**
+* FlashcardDetailsList - Wrapper for key-value detail pairs.
+*
+* Wraps DetailsList with justify alignment for flashcard styling.
+*
+* @param props - {@link FlashcardDetailsListProps}
+* @param props.children - FlashcardDetailsLabel and FlashcardDetailsValue pairs.
+* @param props.className - Optional CSS class name.
+* @returns The rendered FlashcardDetailsList component.
+*
+* @example
+* ```tsx
+* <Flashcard header="Aircraft" subheader="Entity">
+*   <FlashcardHero />
+*   <FlashcardDetailsList>
+*     <FlashcardDetailsLabel>Status</FlashcardDetailsLabel>
+*     <FlashcardDetailsValue>Active</FlashcardDetailsValue>
+*     <FlashcardDetailsLabel>Speed</FlashcardDetailsLabel>
+*     <FlashcardDetailsValue>450 kts</FlashcardDetailsValue>
+*   </FlashcardDetailsList>
+* </Flashcard>
+* ```
+*/
 function FlashcardDetailsList(props) {
 	const { children, className, ...rest } = props;
 	return /* @__PURE__ */ jsx(DetailsList, {
@@ -117,6 +183,24 @@ function FlashcardDetailsList(props) {
 	});
 }
 FlashcardDetailsList.displayName = "FlashcardDetailsList";
+/**
+* FlashcardDetailsLabel - Label for detail items.
+*
+* Shows skeleton placeholder when the parent Flashcard has isLoading=true.
+*
+* @param props - {@link FlashcardComponentProps}
+* @param props.children - Label text content.
+* @param props.className - Optional CSS class name.
+* @returns The rendered FlashcardDetailsLabel component.
+*
+* @example
+* ```tsx
+* <FlashcardDetailsList>
+*   <FlashcardDetailsLabel>Status</FlashcardDetailsLabel>
+*   <FlashcardDetailsValue>Active</FlashcardDetailsValue>
+* </FlashcardDetailsList>
+* ```
+*/
 function FlashcardDetailsLabel(props) {
 	const { isLoading } = useContext(FlashcardContext);
 	const { className, children, ...rest } = props;
@@ -127,6 +211,24 @@ function FlashcardDetailsLabel(props) {
 	});
 }
 FlashcardDetailsLabel.displayName = "FlashcardDetailsLabel";
+/**
+* FlashcardDetailsValue - Value for detail items.
+*
+* Shows skeleton placeholder when the parent Flashcard has isLoading=true.
+*
+* @param props - {@link FlashcardComponentProps}
+* @param props.children - Value text content.
+* @param props.className - Optional CSS class name.
+* @returns The rendered FlashcardDetailsValue component.
+*
+* @example
+* ```tsx
+* <FlashcardDetailsList>
+*   <FlashcardDetailsLabel>Type</FlashcardDetailsLabel>
+*   <FlashcardDetailsValue>Aircraft</FlashcardDetailsValue>
+* </FlashcardDetailsList>
+* ```
+*/
 function FlashcardDetailsValue(props) {
 	const { isLoading } = useContext(FlashcardContext);
 	const { className, children, ...rest } = props;

package/dist/components/flashcard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/flashcard/index.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport 'client-only';\nimport { createContext, useContext } from 'react';\nimport { Heading, Text } from 'react-aria-components';\nimport { DetailsList } from '../details-list';\nimport { DetailsListLabel } from '../details-list/label';\nimport { DetailsListValue } from '../details-list/value';\nimport { Skeleton } from '../skeleton';\nimport styles from './styles.module.css';\nimport type {\n  FlashcardComponentProps,\n  FlashcardDetailsListProps,\n  FlashcardProps,\n} from './types';\n\nexport const FlashcardContext = createContext<FlashcardProps>({\n  isLoading: false,\n  header: '',\n  subheader: '',\n});\n\n/**\n * Example usage.\n *\n * ```tsx\n * <Flashcard isLoading={isLoading} header=\"Identifier\" subheader=\"DATA\">\n *  <FlashcardHero />\n *  <FlashcardAdditionalData>\n *    {secondaryData}\n *  </FlashcardAdditionalData>\n *  <FlashcardDetailsList>\n *    {detail.map((detail) => (\n *     <Fragment key={detail.id}>\n *       <FlashcardDetailsLabel>\n *         {detail.label}\n *       </FlashcardDetailsLabel>\n *       <FlashcardDetailsValue>\n *         {detail.value}\n *       </FlashcardDetailsValue>\n *     </Fragment>\n *     ))}\n *  </FlashcardDetailsList>\n * </Flashcard>\n * ```\n */\nexport function Flashcard(props: FlashcardProps) {\n  const { isLoading, header, subheader, children, className, ...rest } = props;\n\n  return (\n    <FlashcardContext.Provider value={{ isLoading, header, subheader }}>\n      <div {...rest} className={clsx(styles.container, className)}>\n        {children}\n      </div>\n    </FlashcardContext.Provider>\n  );\n}\nFlashcard.displayName = 'Flashcard';\n\nexport function FlashcardHero(props: FlashcardComponentProps) {\n  const { children, className, ...rest } = props;\n  const { isLoading, header, subheader } = useContext(FlashcardContext);\n\n  if (isLoading) {\n    return (\n      <div {...rest} className={clsx(styles.hero, className, 'gap-s')}>\n        <Skeleton className={styles.skeleton} data-testid='hero-skeleton' />\n        <Skeleton className={clsx(styles.skeleton, styles.half)} />\n      </div>\n    );\n  }\n\n  return (\n    <div {...rest} className={clsx(styles.hero, className)}>\n      <FlashcardHeader className={styles.header}>{header}</FlashcardHeader>\n      <FlashcardSubheader className={styles.subheader}>\n        {subheader}\n      </FlashcardSubheader>\n    </div>\n  );\n}\nFlashcardHero.displayName = 'FlashcardHero';\n\nconst FlashcardHeader = Heading;\nconst FlashcardSubheader = Text;\n\nexport function FlashcardAdditionalData(props: FlashcardComponentProps) {\n  const { children, className, ...rest } = props;\n  const { isLoading } = useContext(FlashcardContext);\n\n  // While loading, don't display.\n  if (isLoading) {\n    return null;\n  }\n\n  return (\n    <div {...rest} className={clsx(styles.data, className)}>\n      {children}\n    </div>\n  );\n}\nFlashcardAdditionalData.displayName = 'FlashcardAdditionalData';\n\nexport function FlashcardDetailsList(props: FlashcardDetailsListProps) {\n  const { children, className, ...rest } = props;\n  return (\n    <DetailsList\n      {...rest}\n      align='justify'\n      classNames={{ list: clsx(styles['details-list'], className) }}\n    >\n      {children}\n    </DetailsList>\n  );\n}\nFlashcardDetailsList.displayName = 'FlashcardDetailsList';\n\nexport function FlashcardDetailsLabel(props: FlashcardComponentProps) {\n  const { isLoading } = useContext(FlashcardContext);\n  const { className, children, ...rest } = props;\n  return (\n    <DetailsListLabel\n      {...rest}\n      className={clsx(styles['details-label'], className)}\n    >\n      {isLoading ? (\n        <Skeleton className={clsx(styles.skeleton, styles.smaller)} />\n      ) : (\n        children\n      )}\n    </DetailsListLabel>\n  );\n}\nFlashcardDetailsLabel.displayName = 'FlashcardDetailsLabel';\n\nexport function FlashcardDetailsValue(props: FlashcardComponentProps) {\n  const { isLoading } = useContext(FlashcardContext);\n  const { className, children, ...rest } = props;\n  return (\n    <DetailsListValue\n      {...rest}\n      className={clsx(styles['details-value'], className)}\n    >\n      {isLoading ? (\n        <Skeleton className={clsx(styles.skeleton, styles.smaller)} />\n      ) : (\n        children\n      )}\n    </DetailsListValue>\n  );\n}\nFlashcardDetailsValue.displayName = 'FlashcardDetailsValue';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAa,mBAAmB,cAA8B;CAC5D,WAAW;CACX,QAAQ;CACR,WAAW;CACZ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AA0BF,SAAgB,UAAU,OAAuB;CAC/C,MAAM,EAAE,WAAW,QAAQ,WAAW,UAAU,WAAW,GAAG,SAAS;AAEvE,QACE,oBAAC,iBAAiB;EAAS,OAAO;GAAE;GAAW;GAAQ;GAAW;YAChE,oBAAC;GAAI,GAAI;GAAM,WAAW,KAAK,OAAO,WAAW,UAAU;GACxD;IACG;GACoB;;AAGhC,UAAU,cAAc;AAExB,SAAgB,cAAc,OAAgC;CAC5D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,EAAE,WAAW,QAAQ,cAAc,WAAW,iBAAiB;AAErE,KAAI,UACF,QACE,qBAAC;EAAI,GAAI;EAAM,WAAW,KAAK,OAAO,MAAM,WAAW,QAAQ;aAC7D,oBAAC;GAAS,WAAW,OAAO;GAAU,eAAY;IAAkB,EACpE,oBAAC,YAAS,WAAW,KAAK,OAAO,UAAU,OAAO,KAAK,GAAI;GACvD;AAIV,QACE,qBAAC;EAAI,GAAI;EAAM,WAAW,KAAK,OAAO,MAAM,UAAU;aACpD,oBAAC;GAAgB,WAAW,OAAO;aAAS;IAAyB,EACrE,oBAAC;GAAmB,WAAW,OAAO;aACnC;IACkB;GACjB;;AAGV,cAAc,cAAc;AAE5B,MAAM,kBAAkB;AACxB,MAAM,qBAAqB;AAE3B,SAAgB,wBAAwB,OAAgC;CACtE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,EAAE,cAAc,WAAW,iBAAiB;AAGlD,KAAI,UACF,QAAO;AAGT,QACE,oBAAC;EAAI,GAAI;EAAM,WAAW,KAAK,OAAO,MAAM,UAAU;EACnD;GACG;;AAGV,wBAAwB,cAAc;AAEtC,SAAgB,qBAAqB,OAAkC;CACrE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;AACzC,QACE,oBAAC;EACC,GAAI;EACJ,OAAM;EACN,YAAY,EAAE,MAAM,KAAK,OAAO,iBAAiB,UAAU,EAAE;EAE5D;GACW;;AAGlB,qBAAqB,cAAc;AAEnC,SAAgB,sBAAsB,OAAgC;CACpE,MAAM,EAAE,cAAc,WAAW,iBAAiB;CAClD,MAAM,EAAE,WAAW,UAAU,GAAG,SAAS;AACzC,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,KAAK,OAAO,kBAAkB,UAAU;YAElD,YACC,oBAAC,YAAS,WAAW,KAAK,OAAO,UAAU,OAAO,QAAQ,GAAI,GAE9D;GAEe;;AAGvB,sBAAsB,cAAc;AAEpC,SAAgB,sBAAsB,OAAgC;CACpE,MAAM,EAAE,cAAc,WAAW,iBAAiB;CAClD,MAAM,EAAE,WAAW,UAAU,GAAG,SAAS;AACzC,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,KAAK,OAAO,kBAAkB,UAAU;YAElD,YACC,oBAAC,YAAS,WAAW,KAAK,OAAO,UAAU,OAAO,QAAQ,GAAI,GAE9D;GAEe;;AAGvB,sBAAsB,cAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/flashcard/index.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport 'client-only';\nimport { createContext, useContext } from 'react';\nimport { Heading, Text } from 'react-aria-components';\nimport { DetailsList } from '../details-list';\nimport { DetailsListLabel } from '../details-list/label';\nimport { DetailsListValue } from '../details-list/value';\nimport { Skeleton } from '../skeleton';\nimport styles from './styles.module.css';\nimport type {\n  FlashcardComponentProps,\n  FlashcardDetailsListProps,\n  FlashcardProps,\n} from './types';\n\n/**\n * Context for sharing Flashcard state across child components.\n */\nexport const FlashcardContext = createContext<FlashcardProps>({\n  isLoading: false,\n  header: '',\n  subheader: '',\n});\n\n/**\n * Flashcard - A quick visual identifier for map entity data.\n *\n * Container component that provides loading state and header/subheader\n * to child components via context.\n *\n * @param props - {@link FlashcardProps}\n * @param props.isLoading - Whether the flashcard is in a loading state.\n * @param props.header - Primary header text.\n * @param props.subheader - Secondary text below the header.\n * @param props.children - Child components to render.\n * @param props.className - Optional CSS class name.\n * @returns The rendered Flashcard component.\n *\n * @example\n * ```tsx\n * <Flashcard isLoading={false} header=\"Identifier\" subheader=\"DATA\">\n *   <FlashcardHero />\n *   <FlashcardAdditionalData>Secondary info</FlashcardAdditionalData>\n *   <FlashcardDetailsList>\n *     <FlashcardDetailsLabel>Status</FlashcardDetailsLabel>\n *     <FlashcardDetailsValue>Active</FlashcardDetailsValue>\n *   </FlashcardDetailsList>\n * </Flashcard>\n * ```\n */\nexport function Flashcard(props: FlashcardProps) {\n  const { isLoading, header, subheader, children, className, ...rest } = props;\n\n  return (\n    <FlashcardContext.Provider value={{ isLoading, header, subheader }}>\n      <div {...rest} className={clsx(styles.container, className)}>\n        {children}\n      </div>\n    </FlashcardContext.Provider>\n  );\n}\nFlashcard.displayName = 'Flashcard';\n\n/**\n * FlashcardHero - Upper section displaying header and subheader.\n *\n * Reads header and subheader from Flashcard context. Shows skeleton\n * placeholders when the parent Flashcard has isLoading=true.\n *\n * @param props - {@link FlashcardComponentProps}\n * @param props.children - Optional child content.\n * @param props.className - Optional CSS class name.\n * @returns The rendered FlashcardHero component.\n *\n * @example\n * ```tsx\n * <Flashcard header=\"Entity Name\" subheader=\"Type\">\n *   <FlashcardHero />\n * </Flashcard>\n * ```\n */\nexport function FlashcardHero(props: FlashcardComponentProps) {\n  const { children, className, ...rest } = props;\n  const { isLoading, header, subheader } = useContext(FlashcardContext);\n\n  if (isLoading) {\n    return (\n      <div {...rest} className={clsx(styles.hero, className, 'gap-s')}>\n        <Skeleton className={styles.skeleton} data-testid='hero-skeleton' />\n        <Skeleton className={clsx(styles.skeleton, styles.half)} />\n      </div>\n    );\n  }\n\n  return (\n    <div {...rest} className={clsx(styles.hero, className)}>\n      <FlashcardHeader className={styles.header}>{header}</FlashcardHeader>\n      <FlashcardSubheader className={styles.subheader}>\n        {subheader}\n      </FlashcardSubheader>\n    </div>\n  );\n}\nFlashcardHero.displayName = 'FlashcardHero';\n\nconst FlashcardHeader = Heading;\nconst FlashcardSubheader = Text;\n\n/**\n * FlashcardAdditionalData - Secondary data section below the hero.\n *\n * Hidden when the parent Flashcard has isLoading=true.\n *\n * @param props - {@link FlashcardComponentProps}\n * @param props.children - Content to display in the section.\n * @param props.className - Optional CSS class name.\n * @returns The rendered FlashcardAdditionalData component, or null if loading.\n *\n * @example\n * ```tsx\n * <Flashcard header=\"Entity\" subheader=\"Data\">\n *   <FlashcardHero />\n *   <FlashcardAdditionalData>\n *     Last updated: 2024-01-15\n *   </FlashcardAdditionalData>\n * </Flashcard>\n * ```\n */\nexport function FlashcardAdditionalData(props: FlashcardComponentProps) {\n  const { children, className, ...rest } = props;\n  const { isLoading } = useContext(FlashcardContext);\n\n  // While loading, don't display.\n  if (isLoading) {\n    return null;\n  }\n\n  return (\n    <div {...rest} className={clsx(styles.data, className)}>\n      {children}\n    </div>\n  );\n}\nFlashcardAdditionalData.displayName = 'FlashcardAdditionalData';\n\n/**\n * FlashcardDetailsList - Wrapper for key-value detail pairs.\n *\n * Wraps DetailsList with justify alignment for flashcard styling.\n *\n * @param props - {@link FlashcardDetailsListProps}\n * @param props.children - FlashcardDetailsLabel and FlashcardDetailsValue pairs.\n * @param props.className - Optional CSS class name.\n * @returns The rendered FlashcardDetailsList component.\n *\n * @example\n * ```tsx\n * <Flashcard header=\"Aircraft\" subheader=\"Entity\">\n *   <FlashcardHero />\n *   <FlashcardDetailsList>\n *     <FlashcardDetailsLabel>Status</FlashcardDetailsLabel>\n *     <FlashcardDetailsValue>Active</FlashcardDetailsValue>\n *     <FlashcardDetailsLabel>Speed</FlashcardDetailsLabel>\n *     <FlashcardDetailsValue>450 kts</FlashcardDetailsValue>\n *   </FlashcardDetailsList>\n * </Flashcard>\n * ```\n */\nexport function FlashcardDetailsList(props: FlashcardDetailsListProps) {\n  const { children, className, ...rest } = props;\n  return (\n    <DetailsList\n      {...rest}\n      align='justify'\n      classNames={{ list: clsx(styles['details-list'], className) }}\n    >\n      {children}\n    </DetailsList>\n  );\n}\nFlashcardDetailsList.displayName = 'FlashcardDetailsList';\n\n/**\n * FlashcardDetailsLabel - Label for detail items.\n *\n * Shows skeleton placeholder when the parent Flashcard has isLoading=true.\n *\n * @param props - {@link FlashcardComponentProps}\n * @param props.children - Label text content.\n * @param props.className - Optional CSS class name.\n * @returns The rendered FlashcardDetailsLabel component.\n *\n * @example\n * ```tsx\n * <FlashcardDetailsList>\n *   <FlashcardDetailsLabel>Status</FlashcardDetailsLabel>\n *   <FlashcardDetailsValue>Active</FlashcardDetailsValue>\n * </FlashcardDetailsList>\n * ```\n */\nexport function FlashcardDetailsLabel(props: FlashcardComponentProps) {\n  const { isLoading } = useContext(FlashcardContext);\n  const { className, children, ...rest } = props;\n  return (\n    <DetailsListLabel\n      {...rest}\n      className={clsx(styles['details-label'], className)}\n    >\n      {isLoading ? (\n        <Skeleton className={clsx(styles.skeleton, styles.smaller)} />\n      ) : (\n        children\n      )}\n    </DetailsListLabel>\n  );\n}\nFlashcardDetailsLabel.displayName = 'FlashcardDetailsLabel';\n\n/**\n * FlashcardDetailsValue - Value for detail items.\n *\n * Shows skeleton placeholder when the parent Flashcard has isLoading=true.\n *\n * @param props - {@link FlashcardComponentProps}\n * @param props.children - Value text content.\n * @param props.className - Optional CSS class name.\n * @returns The rendered FlashcardDetailsValue component.\n *\n * @example\n * ```tsx\n * <FlashcardDetailsList>\n *   <FlashcardDetailsLabel>Type</FlashcardDetailsLabel>\n *   <FlashcardDetailsValue>Aircraft</FlashcardDetailsValue>\n * </FlashcardDetailsList>\n * ```\n */\nexport function FlashcardDetailsValue(props: FlashcardComponentProps) {\n  const { isLoading } = useContext(FlashcardContext);\n  const { className, children, ...rest } = props;\n  return (\n    <DetailsListValue\n      {...rest}\n      className={clsx(styles['details-value'], className)}\n    >\n      {isLoading ? (\n        <Skeleton className={clsx(styles.skeleton, styles.smaller)} />\n      ) : (\n        children\n      )}\n    </DetailsListValue>\n  );\n}\nFlashcardDetailsValue.displayName = 'FlashcardDetailsValue';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,mBAAmB,cAA8B;CAC5D,WAAW;CACX,QAAQ;CACR,WAAW;CACZ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BF,SAAgB,UAAU,OAAuB;CAC/C,MAAM,EAAE,WAAW,QAAQ,WAAW,UAAU,WAAW,GAAG,SAAS;AAEvE,QACE,oBAAC,iBAAiB;EAAS,OAAO;GAAE;GAAW;GAAQ;GAAW;YAChE,oBAAC;GAAI,GAAI;GAAM,WAAW,KAAK,OAAO,WAAW,UAAU;GACxD;IACG;GACoB;;AAGhC,UAAU,cAAc;;;;;;;;;;;;;;;;;;;AAoBxB,SAAgB,cAAc,OAAgC;CAC5D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,EAAE,WAAW,QAAQ,cAAc,WAAW,iBAAiB;AAErE,KAAI,UACF,QACE,qBAAC;EAAI,GAAI;EAAM,WAAW,KAAK,OAAO,MAAM,WAAW,QAAQ;aAC7D,oBAAC;GAAS,WAAW,OAAO;GAAU,eAAY;IAAkB,EACpE,oBAAC,YAAS,WAAW,KAAK,OAAO,UAAU,OAAO,KAAK,GAAI;GACvD;AAIV,QACE,qBAAC;EAAI,GAAI;EAAM,WAAW,KAAK,OAAO,MAAM,UAAU;aACpD,oBAAC;GAAgB,WAAW,OAAO;aAAS;IAAyB,EACrE,oBAAC;GAAmB,WAAW,OAAO;aACnC;IACkB;GACjB;;AAGV,cAAc,cAAc;AAE5B,MAAM,kBAAkB;AACxB,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;AAsB3B,SAAgB,wBAAwB,OAAgC;CACtE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,EAAE,cAAc,WAAW,iBAAiB;AAGlD,KAAI,UACF,QAAO;AAGT,QACE,oBAAC;EAAI,GAAI;EAAM,WAAW,KAAK,OAAO,MAAM,UAAU;EACnD;GACG;;AAGV,wBAAwB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;AAyBtC,SAAgB,qBAAqB,OAAkC;CACrE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;AACzC,QACE,oBAAC;EACC,GAAI;EACJ,OAAM;EACN,YAAY,EAAE,MAAM,KAAK,OAAO,iBAAiB,UAAU,EAAE;EAE5D;GACW;;AAGlB,qBAAqB,cAAc;;;;;;;;;;;;;;;;;;;AAoBnC,SAAgB,sBAAsB,OAAgC;CACpE,MAAM,EAAE,cAAc,WAAW,iBAAiB;CAClD,MAAM,EAAE,WAAW,UAAU,GAAG,SAAS;AACzC,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,KAAK,OAAO,kBAAkB,UAAU;YAElD,YACC,oBAAC,YAAS,WAAW,KAAK,OAAO,UAAU,OAAO,QAAQ,GAAI,GAE9D;GAEe;;AAGvB,sBAAsB,cAAc;;;;;;;;;;;;;;;;;;;AAoBpC,SAAgB,sBAAsB,OAAgC;CACpE,MAAM,EAAE,cAAc,WAAW,iBAAiB;CAClD,MAAM,EAAE,WAAW,UAAU,GAAG,SAAS;AACzC,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,KAAK,OAAO,kBAAkB,UAAU;YAElD,YACC,oBAAC,YAAS,WAAW,KAAK,OAAO,UAAU,OAAO,QAAQ,GAAI,GAE9D;GAEe;;AAGvB,sBAAsB,cAAc"}

package/dist/components/flashcard/styles.module.css

@@ -14,7 +14,7 @@
 
 @layer components.l1 {
   .container {
-    @apply rounded-medium font-display outline-interactive-hover outline;
+    @apply rounded-medium font-display outline-interactive-hover bg-surface-default outline;
 
     min-width: 128px;
   }

package/dist/components/flashcard/types.d.ts

@@ -14,12 +14,24 @@ import { DetailsListProps } from "../details-list/types.js";
 import { ComponentPropsWithRef, PropsWithChildren } from "react";
 
 //#region src/components/flashcard/types.d.ts
+/**
+ * Base props for Flashcard child components.
+ */
 type FlashcardComponentProps = PropsWithChildren & ComponentPropsWithRef<'div'>;
+/**
+ * Props for the Flashcard component.
+ */
 type FlashcardProps = FlashcardComponentProps & {
+  /** Whether the flashcard is in a loading state. */
   isLoading?: boolean;
+  /** Primary header text displayed in the hero section. */
   header: string;
+  /** Secondary text displayed below the header. */
   subheader: string;
 };
+/**
+ * Props for the FlashcardDetailsList component.
+ */
 type FlashcardDetailsListProps = FlashcardComponentProps & Partial<DetailsListProps>;
 //#endregion
 export { FlashcardComponentProps, FlashcardDetailsListProps, FlashcardProps };

package/dist/components/hero/context.d.ts

@@ -12,11 +12,14 @@
 
 import { HeroProps } from "./types.js";
 import "client-only";
-import * as react4 from "react";
+import * as react27 from "react";
 import { ContextValue } from "react-aria-components";
 
 //#region src/components/hero/context.d.ts
-declare const HeroContext: react4.Context<ContextValue<HeroProps, HTMLElement>>;
+/**
+ * Context for sharing Hero props across component tree.
+ */
+declare const HeroContext: react27.Context<ContextValue<HeroProps, HTMLElement>>;
 //#endregion
 export { HeroContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/hero/context.js

@@ -17,6 +17,9 @@ import "client-only";
 import { createContext } from "react";
 
 //#region src/components/hero/context.tsx
+/**
+* Context for sharing Hero props across component tree.
+*/
 const HeroContext = createContext(null);
 
 //#endregion

package/dist/components/hero/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/hero/context.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { createContext } from 'react';\nimport type { ContextValue } from 'react-aria-components';\nimport type { HeroProps } from './types';\n\nexport const HeroContext =\n  createContext<ContextValue<HeroProps, HTMLElement>>(null);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,MAAa,cACX,cAAoD,KAAK"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/hero/context.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { createContext } from 'react';\nimport type { ContextValue } from 'react-aria-components';\nimport type { HeroProps } from './types';\n\n/**\n * Context for sharing Hero props across component tree.\n */\nexport const HeroContext =\n  createContext<ContextValue<HeroProps, HTMLElement>>(null);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,cACX,cAAoD,KAAK"}

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

@@ -12,7 +12,7 @@
 
 import { HeroProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime53 from "react/jsx-runtime";
 
 //#region src/components/hero/index.d.ts
 
@@ -20,6 +20,13 @@ import * as react_jsx_runtime17 from "react/jsx-runtime";
  * A versatile hero component that displays an icon alongside primary and secondary content.
  * Automatically organizes child components by type and supports both stacked and grid layouts.
  *
+ * @param props - {@link HeroProps}
+ * @param props.ref - Ref to the header element.
+ * @param props.children - Child components (Icon, HeroTitle, HeroSubtitle).
+ * @param props.classNames - Class names for Hero sub-elements.
+ * @param props.compact - Whether to use compact grid layout.
+ * @returns The rendered Hero component.
+ *
  * @example
  * ```tsx
  * // Basic hero with icon and content
@@ -49,7 +56,7 @@ import * as react_jsx_runtime17 from "react/jsx-runtime";
 declare function Hero({
   ref,
   ...props
-}: HeroProps): react_jsx_runtime17.JSX.Element;
+}: HeroProps): react_jsx_runtime53.JSX.Element;
 //#endregion
 export { Hero };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/hero/index.js

@@ -26,6 +26,13 @@ import styles from "./styles.module.css";
 * A versatile hero component that displays an icon alongside primary and secondary content.
 * Automatically organizes child components by type and supports both stacked and grid layouts.
 *
+* @param props - {@link HeroProps}
+* @param props.ref - Ref to the header element.
+* @param props.children - Child components (Icon, HeroTitle, HeroSubtitle).
+* @param props.classNames - Class names for Hero sub-elements.
+* @param props.compact - Whether to use compact grid layout.
+* @returns The rendered Hero component.
+*
 * @example
 * ```tsx
 * // Basic hero with icon and content

package/dist/components/hero/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/hero/index.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport {\n  Header,\n  HeadingContext,\n  Provider,\n  TextContext,\n  useContextProps,\n} from 'react-aria-components';\nimport { IconContext } from '../icon/context';\nimport { HeroContext } from './context';\nimport styles from './styles.module.css';\nimport type { HeroProps } from './types';\n\n/**\n * A versatile hero component that displays an icon alongside primary and secondary content.\n * Automatically organizes child components by type and supports both stacked and grid layouts.\n *\n * @example\n * ```tsx\n * // Basic hero with icon and content\n * <Hero>\n *   <Icon><Placeholder /></Icon>\n *   <HeroTitle>Primary Title</HeroTitle>\n *   <HeroSubtitle>Secondary information</HeroSubtitle>\n * </Hero>\n *\n * // Grid layout for compact display\n * <Hero compact>\n *   <Icon><Settings /></Icon>\n *   <HeroTitle>Settings</HeroTitle>\n *   <HeroSubtitle>Configure your preferences</HeroSubtitle>\n * </Hero>\n * ```\n *\n * ## Child Component Behavior\n * - **Icon**: Only one allowed\n * - **HeroTitle**: Only one allowed\n * - **HeroSubtitle**: Any number allowed as secondary content\n *\n * ## Layout Modes\n * - **Stack** (default): Vertical layout with larger icon and stacked content\n * - **Grid** (compact=true): Horizontal layout with smaller icon beside content\n */\nexport function Hero({ ref, ...props }: HeroProps) {\n  [props, ref] = useContextProps(props, ref ?? null, HeroContext);\n\n  const { children, classNames, compact, ...rest } = props;\n\n  return (\n    <Provider\n      values={[\n        [\n          IconContext,\n          { className: clsx(styles.icon, classNames?.icon), size: 'large' },\n        ],\n        [\n          HeadingContext,\n          { className: clsx(styles.title, classNames?.title), level: 2 },\n        ],\n        [\n          TextContext,\n          { className: clsx(styles.subtitle, classNames?.subtitle) },\n        ],\n      ]}\n    >\n      <Header\n        {...rest}\n        ref={ref}\n        className={clsx('group/hero', styles.hero, classNames?.hero)}\n        data-layout={compact ? 'grid' : 'stack'}\n      >\n        {children}\n      </Header>\n    </Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAAgB,KAAK,EAAE,KAAK,GAAG,SAAoB;AACjD,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,YAAY;CAE/D,MAAM,EAAE,UAAU,YAAY,SAAS,GAAG,SAAS;AAEnD,QACE,oBAAC;EACC,QAAQ;GACN,CACE,aACA;IAAE,WAAW,KAAK,OAAO,MAAM,YAAY,KAAK;IAAE,MAAM;IAAS,CAClE;GACD,CACE,gBACA;IAAE,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;IAAE,OAAO;IAAG,CAC/D;GACD,CACE,aACA,EAAE,WAAW,KAAK,OAAO,UAAU,YAAY,SAAS,EAAE,CAC3D;GACF;YAED,oBAAC;GACC,GAAI;GACC;GACL,WAAW,KAAK,cAAc,OAAO,MAAM,YAAY,KAAK;GAC5D,eAAa,UAAU,SAAS;GAE/B;IACM;GACA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/hero/index.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport {\n  Header,\n  HeadingContext,\n  Provider,\n  TextContext,\n  useContextProps,\n} from 'react-aria-components';\nimport { IconContext } from '../icon/context';\nimport { HeroContext } from './context';\nimport styles from './styles.module.css';\nimport type { HeroProps } from './types';\n\n/**\n * A versatile hero component that displays an icon alongside primary and secondary content.\n * Automatically organizes child components by type and supports both stacked and grid layouts.\n *\n * @param props - {@link HeroProps}\n * @param props.ref - Ref to the header element.\n * @param props.children - Child components (Icon, HeroTitle, HeroSubtitle).\n * @param props.classNames - Class names for Hero sub-elements.\n * @param props.compact - Whether to use compact grid layout.\n * @returns The rendered Hero component.\n *\n * @example\n * ```tsx\n * // Basic hero with icon and content\n * <Hero>\n *   <Icon><Placeholder /></Icon>\n *   <HeroTitle>Primary Title</HeroTitle>\n *   <HeroSubtitle>Secondary information</HeroSubtitle>\n * </Hero>\n *\n * // Grid layout for compact display\n * <Hero compact>\n *   <Icon><Settings /></Icon>\n *   <HeroTitle>Settings</HeroTitle>\n *   <HeroSubtitle>Configure your preferences</HeroSubtitle>\n * </Hero>\n * ```\n *\n * ## Child Component Behavior\n * - **Icon**: Only one allowed\n * - **HeroTitle**: Only one allowed\n * - **HeroSubtitle**: Any number allowed as secondary content\n *\n * ## Layout Modes\n * - **Stack** (default): Vertical layout with larger icon and stacked content\n * - **Grid** (compact=true): Horizontal layout with smaller icon beside content\n */\nexport function Hero({ ref, ...props }: HeroProps) {\n  [props, ref] = useContextProps(props, ref ?? null, HeroContext);\n\n  const { children, classNames, compact, ...rest } = props;\n\n  return (\n    <Provider\n      values={[\n        [\n          IconContext,\n          { className: clsx(styles.icon, classNames?.icon), size: 'large' },\n        ],\n        [\n          HeadingContext,\n          { className: clsx(styles.title, classNames?.title), level: 2 },\n        ],\n        [\n          TextContext,\n          { className: clsx(styles.subtitle, classNames?.subtitle) },\n        ],\n      ]}\n    >\n      <Header\n        {...rest}\n        ref={ref}\n        className={clsx('group/hero', styles.hero, classNames?.hero)}\n        data-layout={compact ? 'grid' : 'stack'}\n      >\n        {children}\n      </Header>\n    </Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,SAAgB,KAAK,EAAE,KAAK,GAAG,SAAoB;AACjD,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,YAAY;CAE/D,MAAM,EAAE,UAAU,YAAY,SAAS,GAAG,SAAS;AAEnD,QACE,oBAAC;EACC,QAAQ;GACN,CACE,aACA;IAAE,WAAW,KAAK,OAAO,MAAM,YAAY,KAAK;IAAE,MAAM;IAAS,CAClE;GACD,CACE,gBACA;IAAE,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;IAAE,OAAO;IAAG,CAC/D;GACD,CACE,aACA,EAAE,WAAW,KAAK,OAAO,UAAU,YAAY,SAAS,EAAE,CAC3D;GACF;YAED,oBAAC;GACC,GAAI;GACC;GACL,WAAW,KAAK,cAAc,OAAO,MAAM,YAAY,KAAK;GAC5D,eAAa,UAAU,SAAS;GAE/B;IACM;GACA"}