@accelint/design-toolkit 9.3.0 → 9.4.0

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

@@ -29,6 +29,9 @@ type Right = 'right';
 type Left = 'left';
 type XAxisUnion = Right | Left;
 type XAxisIntersection = `${Right} ${Left}` | `${Left} ${Right}`;
+/**
+ * Props for the DrawerLayout component.
+ */
 type DrawerLayoutProps = ComponentPropsWithRef<'div'> & {
   /**
    * Which drawers should extend to full container dimensions.
@@ -106,8 +109,13 @@ type DrawerLayoutProps = ComponentPropsWithRef<'div'> & {
    */
   push?: XAxisUnion | YAxisUnion | XAxisIntersection | YAxisIntersection | `${XAxisUnion} ${YAxisUnion}` | `${YAxisUnion} ${XAxisUnion}` | `${XAxisUnion} ${YAxisIntersection}` | `${YAxisIntersection} ${XAxisUnion}` | `${YAxisUnion} ${XAxisIntersection}` | `${XAxisIntersection} ${YAxisUnion}` | `${XAxisIntersection} ${YAxisIntersection}` | `${YAxisIntersection} ${XAxisIntersection}`;
 };
+/**
+ * Props for the Drawer component.
+ */
 type DrawerProps = Omit<ComponentPropsWithRef<'div'>, 'onChange'> & {
+  /** Unique identifier for the drawer. */
   id: UniqueId;
+  /** ID of the view to display initially. */
   defaultView?: UniqueId;
   /**
    * The placement of the drawer.
@@ -121,6 +129,9 @@ type DrawerProps = Omit<ComponentPropsWithRef<'div'>, 'onChange'> & {
   size?: 'small' | 'medium' | 'large';
   onChange?: (view: UniqueId | null) => void;
 };
+/**
+ * Props for the DrawerMenu component.
+ */
 type DrawerMenuProps = ComponentPropsWithRef<'nav'> & {
   /**
    * The position of the menu.
@@ -161,18 +172,128 @@ type DrawerMenuItemProps = Omit<ToggleButtonProps$1, 'id' | 'isSelected' | 'clas
     tooltip?: string;
   };
 };
+/**
+ * Props for the DrawerHeaderTitle component.
+ */
 type DrawerTitleProps = Omit<HeadingProps, 'level'> & AriaAttributesWithRef<HTMLHeadingElement> & {
   level?: 1 | 2 | 3 | 4 | 5 | 6;
 };
+/**
+ * Event payload for opening a drawer view.
+ *
+ * @example
+ * ```ts
+ * const event: DrawerOpenEvent = {
+ *   type: 'Drawer:open',
+ *   payload: { view: viewId }
+ * };
+ * ```
+ */
 type DrawerOpenEvent = Payload<typeof DrawerEventTypes.open, {
   view: UniqueId;
 }>;
+/**
+ * Event payload for closing a drawer view.
+ *
+ * @example
+ * ```ts
+ * const event: DrawerCloseEvent = {
+ *   type: 'Drawer:close',
+ *   payload: { view: viewId }
+ * };
+ * ```
+ */
+type DrawerCloseEvent = Payload<typeof DrawerEventTypes.close, {
+  view: UniqueId;
+}>;
+/**
+ * Event payload for toggling a drawer view's visibility.
+ *
+ * @example
+ * ```ts
+ * const event: DrawerToggleEvent = {
+ *   type: 'Drawer:toggle',
+ *   payload: { view: viewId }
+ * };
+ * ```
+ */
 type DrawerToggleEvent = Payload<typeof DrawerEventTypes.toggle, {
   view: UniqueId;
 }>;
-type DrawerEvent = DrawerOpenEvent | DrawerToggleEvent | ViewStackEvent;
+/**
+ * Union type of all possible drawer and view stack events.
+ *
+ * @example
+ * ```ts
+ * import type { DrawerEvent } from './types';
+ *
+ * function handleEvent(event: DrawerEvent) {
+ *   if (event.type === 'Drawer:open') {
+ *     console.log('Opening view:', event.payload.view);
+ *   }
+ * }
+ * ```
+ */
+type DrawerEvent = DrawerOpenEvent | DrawerCloseEvent | DrawerToggleEvent | ViewStackEvent;
+/**
+ * Simple event types for drawer actions within a drawer context.
+ *
+ * @example
+ * ```tsx
+ * // Trigger back navigation
+ * <DrawerTrigger for="back">
+ *   <Button>Back</Button>
+ * </DrawerTrigger>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Push a specific view by ID
+ * <DrawerTrigger for={viewId}>
+ *   <Button>Open View</Button>
+ * </DrawerTrigger>
+ * ```
+ */
 type SimpleEvents = 'back' | 'clear' | 'close' | 'reset' | UniqueId;
+/**
+ * Targeted event types for controlling specific drawers from outside their context.
+ *
+ * @example
+ * ```tsx
+ * // Open a specific drawer view
+ * <DrawerTrigger for={`open:${viewId}`}>
+ *   <Button>Open Settings</Button>
+ * </DrawerTrigger>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Close a specific drawer
+ * <DrawerTrigger for={`close:${drawerId}`}>
+ *   <Button>Close</Button>
+ * </DrawerTrigger>
+ * ```
+ */
 type TargetedEvents = `back:${UniqueId}` | `clear:${UniqueId}` | `close:${UniqueId}` | `open:${UniqueId}` | `toggle:${UniqueId}` | `reset:${UniqueId}`;
+/**
+ * Array of events to trigger sequentially from a single interaction.
+ *
+ * @example
+ * ```tsx
+ * // Reset and then open a view
+ * <DrawerTrigger for={['reset', viewId]}>
+ *   <Button>Reset & Open</Button>
+ * </DrawerTrigger>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Open multiple drawers
+ * <DrawerTrigger for={[`open:${drawerA}`, `open:${drawerB}`]}>
+ *   <Button>Open Both</Button>
+ * </DrawerTrigger>
+ * ```
+ */
 type ChainedEvents = (SimpleEvents | TargetedEvents)[];
 type DrawerTriggerProps = RefAttributes<FocusableElement> & {
   children: ReactElement<DOMAttributes<FocusableElement>, string>;
@@ -188,6 +309,7 @@ type DrawerTriggerProps = RefAttributes<FocusableElement> & {
    * _NOTE_: Open differs from Push (just a UniqueId), Open clears the stack before pushing the new view
    *
    * @example
+   * ```ts
    * // Reset a drawer stack and then push a view on:
    * ['reset', myViewId]
    *
@@ -199,14 +321,39 @@ type DrawerTriggerProps = RefAttributes<FocusableElement> & {
    *
    * // Close the current drawer from inside its context:
    * 'close'
+   * ```
    */
   for: SimpleEvents | TargetedEvents | ChainedEvents;
 };
+/**
+ * Context value for sharing Drawer state across child components.
+ */
 type DrawerContextValue = {
+  /** Registers a view ID with the drawer. */
   register: (view: UniqueId) => void;
+  /** Unregisters a view ID from the drawer. */
   unregister: (view: UniqueId) => void;
+  /** The placement of the drawer relative to the viewport. */
   placement: XAxisUnion | YAxisUnion;
 };
+/**
+ * Props for the DrawerClose component.
+ *
+ * @example
+ * ```tsx
+ * // Close current drawer
+ * <DrawerClose />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Close specific drawer
+ * <DrawerClose for={drawerId} aria-label="Close settings" />
+ * ```
+ */
+type DrawerCloseProps = AriaAttributesWithRef<FocusableElement> & {
+  for?: UniqueId;
+};
 //#endregion
-export { DrawerContextValue, DrawerEvent, DrawerLayoutProps, DrawerMenuItemProps, DrawerMenuProps, DrawerOpenEvent, DrawerProps, DrawerTitleProps, DrawerToggleEvent, DrawerTriggerProps };
+export { ChainedEvents, DrawerCloseEvent, DrawerCloseProps, DrawerContextValue, DrawerEvent, DrawerLayoutProps, DrawerMenuItemProps, DrawerMenuProps, DrawerOpenEvent, DrawerProps, DrawerTitleProps, DrawerToggleEvent, DrawerTriggerProps, SimpleEvents, TargetedEvents };
 //# sourceMappingURL=types.d.ts.map

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_runtime36 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_runtime36.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 react14 from "react";
-import * as react_jsx_runtime38 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: react14.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_runtime38.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_runtime38.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_runtime38.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_runtime38.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_runtime38.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_runtime38.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;