From 3265025ee59a97564f88a0802bd876aef29c8af8 Mon Sep 17 00:00:00 2001
From: David Bradshaw <david.bradshaw@ibm.com>
Date: Tue, 31 Oct 2023 13:18:38 -0700
Subject: [PATCH] fix: docs support

---
 .gitignore                                    |  3 +
 README.md                                     |  4 +
 package.json                                  |  4 +-
 src/components/AcceptTerms/index.tsx          |  6 ++
 src/components/Accordion/index.tsx            |  6 ++
 src/components/ActionSheet/index.tsx          |  5 ++
 src/components/BaseTextInputs/index.tsx       | 80 ++++---------------
 src/components/BottomNavigationBar/index.tsx  |  6 ++
 .../BottomSafeAreaColorOverride/index.tsx     |  5 ++
 src/components/BottomToolbar/index.tsx        |  6 ++
 .../BottomToolbarPrimaryAction/index.tsx      |  6 ++
 src/components/Button/index.tsx               |  7 +-
 src/components/Checkbox/index.tsx             |  6 ++
 src/components/ContentSwitcher/index.tsx      |  7 ++
 src/components/DataTable/DataTable.tsx        |  9 ++-
 src/components/DataTable/DataTableCell.tsx    |  7 ++
 src/components/DataTable/DataTableHeader.tsx  |  7 ++
 .../DataTable/DataTableHeaderSelected.tsx     |  7 ++
 src/components/DataTable/DataTableRow.tsx     |  7 ++
 src/components/DateInput/index.tsx            |  6 +-
 src/components/DocumentViewer/index.tsx       |  7 +-
 src/components/Dropdown/index.tsx             |  7 ++
 src/components/ErrorState/index.tsx           |  7 ++
 src/components/FileUploaderItem/index.tsx     |  6 ++
 src/components/FormItem/index.tsx             | 10 ++-
 src/components/GrantPermission/index.tsx      |  6 ++
 src/components/InlineLink/index.tsx           |  6 +-
 src/components/LandingView/index.tsx          |  6 ++
 src/components/Link/index.tsx                 |  8 +-
 src/components/List/index.tsx                 |  6 ++
 src/components/Loading/index.tsx              |  6 ++
 src/components/Menu/index.tsx                 |  7 ++
 src/components/MenuItem/index.tsx             |  6 ++
 src/components/Modal/index.tsx                |  5 ++
 src/components/NavigationList/index.tsx       |  6 ++
 src/components/NavigationListItem/index.tsx   |  6 ++
 src/components/Notification/index.tsx         |  6 ++
 src/components/NumberInput/index.tsx          |  8 +-
 src/components/Overlay/index.tsx              |  6 ++
 src/components/Pagination/index.tsx           |  7 ++
 src/components/PasswordInput/index.tsx        |  9 ++-
 src/components/ProgressIndicator/index.tsx    |  7 ++
 src/components/RadioButton/index.tsx          |  5 ++
 src/components/Search/index.tsx               |  7 +-
 src/components/Slider/index.tsx               |  6 ++
 src/components/Tabs/index.tsx                 |  7 ++
 src/components/Tag/index.tsx                  |  7 ++
 src/components/Text/index.tsx                 |  9 +++
 src/components/TextArea/index.tsx             |  8 +-
 src/components/TextInput/index.tsx            |  8 +-
 src/components/Tile/index.tsx                 |  6 ++
 src/components/Toggle/index.tsx               |  4 +
 src/components/Tooltip/index.tsx              |  7 ++
 src/components/TopNavigationBar/index.tsx     |  7 ++
 .../TopNavigationBarLogin/index.tsx           |  6 ++
 src/components/UiPanel/index.tsx              |  6 ++
 src/components/UiPanelItem/index.tsx          |  8 ++
 src/components/ViewWrapper/index.tsx          |  3 +
 src/components/WebHeader/index.tsx            |  7 ++
 src/styles/colors.ts                          | 11 ++-
 src/styles/typography.ts                      |  7 ++
 src/styles/z-index.ts                         |  1 +
 src/types/shared.ts                           | 68 ++++++++++++++++
 typedoc.json                                  |  7 ++
 yarn.lock                                     | 57 +++++++++++++
 65 files changed, 519 insertions(+), 85 deletions(-)
 create mode 100644 typedoc.json

diff --git a/.gitignore b/.gitignore
index 5822dce..9def13d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -66,3 +66,6 @@ android/keystores/debug.keystore
 
 # generated by bob
 lib/
+
+# Documentation
+docs
diff --git a/README.md b/README.md
index 3d975da..683ac28 100644
--- a/README.md
+++ b/README.md
@@ -29,6 +29,10 @@
 
 Component and shared patterns for React Native apps using Carbon. Styles are based on the [Carbon Native Mobile](https://carbondesignsystem.com/designing/design-resources/#native-mobile) designs. Color (`g10` for light theme and `g100` for dark theme) and typography tokens are based on Carbon v11.
 
+## Documentation
+
+Documentation can be found [here](https://carbon-design-system.github.io/carbon-react-native/). This documentation is auto generated by the TypeScript files. To use the documentations you can find each component on the left side as a `Class`. Each component has a link to the example app code and the Props (`Component<ItemProps>`) which can be jumped to by clicking the ItemProps. Props will indicate all props this component supports with documentation. Links will jump to related to type declarations.
+
 ## Getting started
 
 To install `@carbon/react-native` in your project, you will need to run the following
diff --git a/package.json b/package.json
index ba71a07..5e176ae 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,8 @@
     "example": "yarn --cwd example",
     "bootstrap": "yarn example && yarn && yarn example pods",
     "example:bump": "node ./scripts/bump-example.js",
-    "postinstall": "carbon-telemetry collect --install"
+    "postinstall": "carbon-telemetry collect --install",
+    "docs": "typedoc"
   },
   "keywords": [
     "ibm",
@@ -72,6 +73,7 @@
     "react-native-svg": "^13.0.0",
     "react-native-webview": "^13.2.2",
     "release-it": "^16.1.0",
+    "typedoc": "^0.25.3",
     "typescript": "^5.1.6"
   },
   "resolutions": {
diff --git a/src/components/AcceptTerms/index.tsx b/src/components/AcceptTerms/index.tsx
index 734b1f5..a729c14 100644
--- a/src/components/AcceptTerms/index.tsx
+++ b/src/components/AcceptTerms/index.tsx
@@ -6,6 +6,7 @@ import { DocumentViewer, DocumentViewerSource } from '../DocumentViewer';
 import { Modal } from '../Modal';
 import { Text } from '../Text';
 
+/** Props for AcceptTerms component */
 export type AcceptTermsProps = {
   /** Title of text document */
   title: string;
@@ -38,6 +39,11 @@ export type AcceptTermsProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * AcceptTerms component for showing the accept legal terms flow
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/AcceptsTerms.tsx | Example code}
+ */
 export class AcceptTerms extends React.Component<AcceptTermsProps> {
   state = {
     showDisagree: false,
diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx
index 7826353..64d8c58 100644
--- a/src/components/Accordion/index.tsx
+++ b/src/components/Accordion/index.tsx
@@ -6,6 +6,7 @@ import ChevronDownIcon from '@carbon/icons/es/chevron--down/20';
 import ChevronUpIcon from '@carbon/icons/es/chevron--up/20';
 import { Text, TextBreakModes } from '../Text';
 
+/** Props for Accordion component */
 export type AccordionProps = {
   /** Title to show for the accordion  */
   title: string;
@@ -27,6 +28,11 @@ export type AccordionProps = {
   children?: React.ReactNode;
 };
 
+/**
+ * Accordion component for showing the accept legal terms flow
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Accordion.tsx | Example code}
+ */
 export class Accordion extends React.Component<AccordionProps> {
   state = {
     open: false,
diff --git a/src/components/ActionSheet/index.tsx b/src/components/ActionSheet/index.tsx
index 3c4a450..6082c75 100644
--- a/src/components/ActionSheet/index.tsx
+++ b/src/components/ActionSheet/index.tsx
@@ -8,6 +8,7 @@ import { Text } from '../Text';
 import { zIndexes } from '../../styles/z-index';
 import type { CarbonIcon } from '../../types/shared';
 
+/** Item to pass to ActionSheet */
 export type ActionSheetItem = {
   /** Name for button */
   text: string;
@@ -28,6 +29,7 @@ export type ActionSheetItem = {
   divider?: boolean;
 };
 
+/** Props for ActionSheet component */
 export type ActionSheetProps = {
   /** Title to show */
   title: string;
@@ -46,8 +48,11 @@ export type ActionSheetProps = {
 };
 
 /**
+ * ActionSheet component for the choice option at the bottom of a screen.
  * Render a popup (from bottom) to show menu options for when non Yes/No questions are needed.
  * Uses the OS ActionSheet if supported. Otherwise renders a custom one with similar styling.
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/ActionSheet.tsx | Example code}
  */
 export class ActionSheet extends React.Component<ActionSheetProps> {
   private get styles() {
diff --git a/src/components/BaseTextInputs/index.tsx b/src/components/BaseTextInputs/index.tsx
index 321c69f..e7056e3 100644
--- a/src/components/BaseTextInputs/index.tsx
+++ b/src/components/BaseTextInputs/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import { PressableStateCallbackType, NativeSyntheticEvent, StyleProp, StyleSheet, TextInputFocusEventData, View, ViewStyle, TextInput as ReactTextInput, TextInputProps as ReactTextInputProps, Pressable, Platform } from 'react-native';
+import { PressableStateCallbackType, NativeSyntheticEvent, StyleProp, StyleSheet, TextInputFocusEventData, View, ViewStyle, TextInput as ReactTextInput, Pressable, Platform } from 'react-native';
 import { createIcon, pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
 import { getColor } from '../../styles/colors';
 import { Button } from '../Button';
-import { Text, TextBreakModes } from '../Text';
+import { Text } from '../Text';
 import ViewIcon from '@carbon/icons/es/view/20';
 import ViewOffIcon from '@carbon/icons/es/view--off/20';
 import SubtractIcon from '@carbon/icons/es/subtract/20';
@@ -13,9 +13,8 @@ import ErrorIcon from '@carbon/icons/es/warning--filled/20';
 import AddIcon from '@carbon/icons/es/add/20';
 import { defaultText } from '../../constants/defaultText';
 import { BodyCompact02, Body02 } from '../../styles/typography';
-import { Link, LinkProps } from '../Link';
-
-export type BaseTextInputTypes = 'text' | 'text-area' | 'password' | 'number' | 'date';
+import { Link } from '../Link';
+import { BaseTextInputTypes, TextInputProps } from '../../types/shared';
 
 /** Props for the internal base text input */
 type BaseTextInputProps = {
@@ -25,67 +24,15 @@ type BaseTextInputProps = {
   fullBleedCallback?: (focus: boolean, error: boolean) => void;
 };
 
-/** Shared props for Text, Password and TextArea */
-export type TextInputProps = {
-  /** Value of text (Controlled component) */
-  value: string;
-  /** Label string to use */
-  label?: string;
-  /** Helper string to use */
-  helperText?: string;
-  /** Check is invalid */
-  isInvalid?: (value: string) => boolean;
-  /** Error string to use. Set custom rules or return required text */
-  getErrorText?: (value: string) => string;
-  /** Warning string to use. This will show if NOT in error. */
-  warningText?: string;
-  /** Placeholder text to use */
-  placeholder?: string;
-  /** Indicate if required */
-  required?: boolean;
-  /** Indicate if disabled */
-  disabled?: boolean;
-  /** Label break mode */
-  labelBreakMode?: TextBreakModes;
-  /** Change event when text changed */
-  onChangeText: (value: string) => void;
-  /** Blur event when focus is lost */
-  onBlur?: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
-  /** Focus event when focus is gained */
-  onFocus?: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
-  /** Indicate if autoCorrect should be used (default is true) */
-  autoCorrect?: boolean;
-  /** Define auto cap rule (default is normally sentences) */
-  autoCapitalize?: 'characters' | 'words' | 'sentences' | 'none';
-  /** Trigger ENTER event (consumer should validate if form is valid and submit if this is called) */
-  onSubmitEditing?: () => void;
-  /** Indicate if should be secured (password) */
-  secureTextEntry?: boolean;
-  /** Max length of field */
-  maxLength?: number;
-  /** Indicate if text box is used on layer */
-  light?: boolean;
-  /** minHeight for text area */
-  textAreaMinHeight?: number;
-  /** @remarks password only. Text to use for toggle password button (accessibility). Defaults to ENGLISH "Show/hide password" */
-  togglePasswordText?: string;
-  /** @remarks number only. Text to use for increment number button (accessibility). Defaults to ENGLISH "Increment" */
-  incrementNumberText?: string;
-  /** @remarks number only. Text to use for decrement number button (accessibility). Defaults to ENGLISH "Decrement" */
-  decrementNumberText?: string;
-  /** @remarks number only. Min and Max for numbers. If not set any number (including negative is valid) */
-  numberRules?: {
-    min?: number;
-    max?: number;
-  };
-  /** Link to render to right of label */
-  labelLink?: LinkProps;
-  /** Style to set on the item */
-  style?: StyleProp<ViewStyle>;
-  /** Direct props to set on the React Native component (including iOS and Android specific props). Helpful for fully customizing text input behavior. */
-  componentProps?: ReactTextInputProps;
-};
-
+/**
+ * Get the base styling for text inputs
+ *
+ * @param light - Indicate that light variant should be used
+ * @param hasLabelLink - Indicates that item has label with link
+ * @param fullBleed - Indicates that it should be full bleed style
+ *
+ * @returns React style item
+ */
 export const getTextInputStyle = (light?: boolean, hasLabelLink?: boolean, fullBleed?: boolean) => {
   // React Native on iOS
   const baseTextBox: any = {
@@ -214,6 +161,7 @@ export const getTextInputStyle = (light?: boolean, hasLabelLink?: boolean, fullB
 };
 
 /**
+ * @ignore
  * This is the base system for text input.
  * This allows a shared code base for all text input systems and validation rules
  * This component is not exported. It is used by `TextInput`, `TextArea` and `PasswordInput`.
diff --git a/src/components/BottomNavigationBar/index.tsx b/src/components/BottomNavigationBar/index.tsx
index f92b1ce..5ebdb67 100644
--- a/src/components/BottomNavigationBar/index.tsx
+++ b/src/components/BottomNavigationBar/index.tsx
@@ -6,6 +6,7 @@ import type { NavigationButton } from '../../types/navigation';
 import { Text } from '../Text';
 import { SemiBoldFont } from '../../styles/typography';
 
+/** Props for BottomNavigationBar component */
 export type BottomNavigationBarProps = {
   /** Navigation items to load */
   items: NavigationButton[];
@@ -15,6 +16,11 @@ export type BottomNavigationBarProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * BottomNavigationBar component for rendering the bottom navigation bar
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/BottomNavigationBar.tsx | Example code}
+ */
 export class BottomNavigationBar extends React.Component<BottomNavigationBarProps> {
   private get styles() {
     return StyleSheet.create({
diff --git a/src/components/BottomSafeAreaColorOverride/index.tsx b/src/components/BottomSafeAreaColorOverride/index.tsx
index 26cf9fe..9b942bc 100644
--- a/src/components/BottomSafeAreaColorOverride/index.tsx
+++ b/src/components/BottomSafeAreaColorOverride/index.tsx
@@ -3,6 +3,10 @@ import { StyleSheet, View, Dimensions, EmitterSubscription } from 'react-native'
 import { zIndexes } from '../../styles/z-index';
 import { Overlay } from '../Overlay';
 
+/**
+ * @ignore
+ * Props for BottomSafeAreaColorOverride
+ */
 export type BottomSafeAreaColorOverrideProps = {
   /** Color to force the safe area bottom to be */
   color: string;
@@ -13,6 +17,7 @@ export type BottomSafeAreaColorOverrideProps = {
 };
 
 /**
+ * @ignore
  * This component is for setting a color to apply to bottom zone under safe areas.
  * This is used for specific flows who are full screen and need to override the bottom while not touching the top.
  * This component is not exported.
diff --git a/src/components/BottomToolbar/index.tsx b/src/components/BottomToolbar/index.tsx
index 513d3a5..15dda8d 100644
--- a/src/components/BottomToolbar/index.tsx
+++ b/src/components/BottomToolbar/index.tsx
@@ -6,6 +6,7 @@ import type { ToolbarButton } from '../../types/navigation';
 import { Button } from '../Button';
 import { Link } from '../Link';
 
+/** Props for BottomToolbar component */
 export type BottomToolbarProps = {
   /** Toolbar items to load */
   items: ToolbarButton[];
@@ -15,6 +16,11 @@ export type BottomToolbarProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * BottomToolbar component for rendering the bottom toolbar. This is similar to BottomNavigationBar but offers a call to action
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/BottomToolbar.tsx | Example code}
+ */
 export class BottomToolbar extends React.Component<BottomToolbarProps> {
   private get styles() {
     return StyleSheet.create({
diff --git a/src/components/BottomToolbarPrimaryAction/index.tsx b/src/components/BottomToolbarPrimaryAction/index.tsx
index 94b3ebe..2f4eebe 100644
--- a/src/components/BottomToolbarPrimaryAction/index.tsx
+++ b/src/components/BottomToolbarPrimaryAction/index.tsx
@@ -7,6 +7,7 @@ import { Button } from '../Button';
 import { Link } from '../Link';
 import type { CarbonIcon } from '../../types/shared';
 
+/** Props for BottomToolbarPrimaryAction component */
 export type BottomToolbarPrimaryActionProps = {
   /** Position of primary action (default is center) */
   position?: 'center' | 'right' | 'left';
@@ -30,6 +31,11 @@ export type BottomToolbarPrimaryActionProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * BottomToolbarPrimaryAction component for rendering the bottom toolbar with large primary action
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/BottomToolbarPrimaryAction.tsx | Example code}
+ */
 export class BottomToolbarPrimaryAction extends React.Component<BottomToolbarPrimaryActionProps> {
   private get styles() {
     return StyleSheet.create({
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 5470f26..d3cda74 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -5,6 +5,7 @@ import { createIcon, pressableFeedbackStyle, styleReferenceBreaker } from '../..
 import { getColor } from '../../styles/colors';
 import { Text, TextTypes } from '../Text';
 
+/** Props for Button component */
 export type ButtonProps = {
   /** Text to render (for iconOnlyMode use descriptive text) */
   text: string;
@@ -37,8 +38,10 @@ export type ButtonProps = {
 };
 
 /**
- * To not have a button be pressable 100% of screen format parent or pass style appropriately.
- * `alignSelf: 'flex-start'` is useful.
+ * Button component for rendering a button
+ * To not have a button be pressable 100% of screen format parent or pass style appropriately. `alignSelf: 'flex-start'` is useful.
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Button.tsx | Example code}
  */
 export class Button extends React.Component<ButtonProps> {
   private basicButton: StyleProp<ViewStyle> = {
diff --git a/src/components/Checkbox/index.tsx b/src/components/Checkbox/index.tsx
index a216f91..fe82b7c 100644
--- a/src/components/Checkbox/index.tsx
+++ b/src/components/Checkbox/index.tsx
@@ -16,6 +16,7 @@ export const checkboxRadioBaseStyle = {
   alignContent: 'flex-start' as const,
 };
 
+/** Props for Checkbox and Radio component */
 export type CheckboxRadioProps = {
   /** Text to render */
   label: string;
@@ -43,6 +44,11 @@ export type CheckboxRadioProps = {
   componentProps?: PressableProps;
 };
 
+/**
+ * Checkbox component for rendering a checkbox
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Checkbox.tsx | Example code}
+ */
 export class Checkbox extends React.Component<CheckboxRadioProps> {
   private get styles() {
     return StyleSheet.create({
diff --git a/src/components/ContentSwitcher/index.tsx b/src/components/ContentSwitcher/index.tsx
index 6a0fbd6..5b6f6b0 100644
--- a/src/components/ContentSwitcher/index.tsx
+++ b/src/components/ContentSwitcher/index.tsx
@@ -4,6 +4,7 @@ import { getColor } from '../../styles/colors';
 import { pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
 import { Text, TextTypes } from '../Text';
 
+/** An item to pass to content switcher */
 export type SwitcherItem = {
   /** Text to render */
   text: string;
@@ -15,6 +16,7 @@ export type SwitcherItem = {
   data?: unknown;
 };
 
+/** Props for ContentSwitcher component */
 export type ContentSwitcherProps = {
   /** Items to render in the content switcher (should try and keep under 3. Anything larger gets hard to read on mobile) */
   items: SwitcherItem[];
@@ -28,6 +30,11 @@ export type ContentSwitcherProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * ContentSwitcher component for rendering the content switcher
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/ContentSwitcher.tsx | Example code}
+ */
 export class ContentSwitcher extends React.Component<ContentSwitcherProps> {
   state = {
     currentIndex: 0,
diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
index 5a4e017..3ec2f87 100644
--- a/src/components/DataTable/DataTable.tsx
+++ b/src/components/DataTable/DataTable.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import { StyleProp, StyleSheet, ViewStyle, View, ViewProps } from 'react-native';
 import { styleReferenceBreaker } from '../../helpers';
 
+/** Props for DataTable component */
 export type DataTableProps = {
-  /** Content of the row. Should be list of <DataTableHeader /> or <DataTableRow. */
+  /** Content of the row. Should be list of DataTableHeader or DataTableRow. */
   children: React.ReactNode;
   /** Style to set on the item */
   style?: StyleProp<ViewStyle>;
@@ -11,6 +12,12 @@ export type DataTableProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * DataTable component for rendering a data table.
+ * Children components should be DataTableRow, DataTableCell, DataTableHeader, DataTableHeaderSelected
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/DataTable.tsx | Example code}
+ */
 export class DataTable extends React.Component<DataTableProps> {
   private get styles() {
     return StyleSheet.create({
diff --git a/src/components/DataTable/DataTableCell.tsx b/src/components/DataTable/DataTableCell.tsx
index 1b2940f..287731b 100644
--- a/src/components/DataTable/DataTableCell.tsx
+++ b/src/components/DataTable/DataTableCell.tsx
@@ -4,6 +4,7 @@ import { getColor } from '../../styles/colors';
 import { pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
 import { Text, TextBreakModes } from '../Text';
 
+/** Props for DataTableCell component */
 export type DataTableCellProps = {
   /** Content of the cell. If string will format accordingly. If Node will not be styled. */
   content: React.ReactNode | string;
@@ -27,6 +28,12 @@ export type DataTableCellProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * DataTableCell component for rendering a data table cell.
+ * Used as a child of DataTable
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/DataTable.tsx | Example code}
+ */
 export class DataTableCell extends React.Component<DataTableCellProps> {
   private get styles() {
     const { noPadding } = this.props;
diff --git a/src/components/DataTable/DataTableHeader.tsx b/src/components/DataTable/DataTableHeader.tsx
index 7ffd022..503faa9 100644
--- a/src/components/DataTable/DataTableHeader.tsx
+++ b/src/components/DataTable/DataTableHeader.tsx
@@ -4,6 +4,7 @@ import { getColor } from '../../styles/colors';
 import { styleReferenceBreaker } from '../../helpers';
 import { Button, ButtonProps } from '../Button';
 
+/** Props for DataTableHeader component */
 export type DataTableHeaderProps = {
   /** Primary action to render (right side action) */
   primaryAction?: ButtonProps;
@@ -15,6 +16,12 @@ export type DataTableHeaderProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * DataTableHeader component for rendering a data table header.
+ * Used as a child of DataTable
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/DataTable.tsx | Example code}
+ */
 export class DataTableHeader extends React.Component<DataTableHeaderProps> {
   private get styles() {
     return StyleSheet.create({
diff --git a/src/components/DataTable/DataTableHeaderSelected.tsx b/src/components/DataTable/DataTableHeaderSelected.tsx
index fab3386..dcb4281 100644
--- a/src/components/DataTable/DataTableHeaderSelected.tsx
+++ b/src/components/DataTable/DataTableHeaderSelected.tsx
@@ -5,6 +5,7 @@ import { styleReferenceBreaker } from '../../helpers';
 import { Button, ButtonProps } from '../Button';
 import { Text } from '../Text';
 
+/** Props for DataTableHeaderSelected component */
 export type DataTableHeaderSelectedProps = {
   /** Text to show for items selected. Normally `X items selected` where X is the number of items checked */
   itemsSelectedText?: string;
@@ -20,6 +21,12 @@ export type DataTableHeaderSelectedProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * DataTableHeaderSelected component for rendering a data table header area that indicates that items are chosen.
+ * Used as a child of DataTable
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/DataTable.tsx | Example code}
+ */
 export class DataTableHeaderSelected extends React.Component<DataTableHeaderSelectedProps> {
   private get styles() {
     return StyleSheet.create({
diff --git a/src/components/DataTable/DataTableRow.tsx b/src/components/DataTable/DataTableRow.tsx
index 554d451..e6c04ad 100644
--- a/src/components/DataTable/DataTableRow.tsx
+++ b/src/components/DataTable/DataTableRow.tsx
@@ -3,6 +3,7 @@ import { StyleProp, StyleSheet, ViewStyle, GestureResponderEvent, Pressable, Vie
 import { getColor } from '../../styles/colors';
 import { pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
 
+/** Props for DataTableRow component */
 export type DataTableRowProps = {
   /** Content of the row. Should be list of <DataTableCell />. */
   children: React.ReactNode;
@@ -18,6 +19,12 @@ export type DataTableRowProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * DataTableRow component for rendering a data table row.
+ * Used as a child of DataTable
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/DataTable.tsx | Example code}
+ */
 export class DataTableRow extends React.Component<DataTableRowProps> {
   private get styles() {
     return StyleSheet.create({
diff --git a/src/components/DateInput/index.tsx b/src/components/DateInput/index.tsx
index d0d9921..7332713 100644
--- a/src/components/DateInput/index.tsx
+++ b/src/components/DateInput/index.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
-import { BaseTextInput, TextInputProps } from '../BaseTextInputs';
+import { BaseTextInput } from '../BaseTextInputs';
+import { TextInputProps } from '../../types/shared';
 
 /**
  * This component is just basic text inpput with style.
- *  Deciding on calendar system or native system is pending.
+ * Deciding on calendar system or native system is pending.
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/DateInput.tsx | Example code}
  */
 export class DateInput extends React.Component<TextInputProps> {
   render(): React.ReactNode {
diff --git a/src/components/DocumentViewer/index.tsx b/src/components/DocumentViewer/index.tsx
index 784696c..b6cfa90 100644
--- a/src/components/DocumentViewer/index.tsx
+++ b/src/components/DocumentViewer/index.tsx
@@ -13,8 +13,10 @@ import { defaultText } from '../../constants/defaultText';
 import { zIndexes } from '../../styles/z-index';
 import { BottomSafeAreaColorOverride } from '../BottomSafeAreaColorOverride';
 
+/** Soource of DocumentViewer either string or WebView source */
 export type DocumentViewerSource = string | WebViewSource;
 
+/** Props for DocumentViewer component */
 export type DocumentViewerProps = {
   /** Title of text document */
   title: string;
@@ -43,10 +45,11 @@ export type DocumentViewerProps = {
 };
 
 /**
- * Document viewer mostly for Legal content (like Privacy Policy, Terms and Conditions...).
+ * DocumentViewer component mostly for Legal content (like Privacy Policy, Terms and Conditions...).
  * But can also be used for web login flows or any popup overlay flow.
- *
  * If source is a STRING the text will be rendered as plain text.  For custom styling create an HTML file with proper styling per guidelines and use WebViewSource.
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/DocumentViewer.tsx | Example code}
  */
 export class DocumentViewer extends React.Component<DocumentViewerProps> {
   private get androidViewType(): boolean {
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
index add3c73..407c745 100644
--- a/src/components/Dropdown/index.tsx
+++ b/src/components/Dropdown/index.tsx
@@ -13,6 +13,7 @@ import { zIndexes } from '../../styles/z-index';
 import { defaultText } from '../../constants/defaultText';
 import { CarbonIcon } from '../../types/shared';
 
+/** An item to pass to the Dropdown component */
 export type DropdownItem = {
   /** ID for tracking items */
   id?: string;
@@ -34,6 +35,7 @@ export type DropdownItem = {
   dismissKeyboardOnPress?: boolean;
 };
 
+/** Props for Dropdown component */
 export type DropdownProps = {
   /** Current value to show on dropdown */
   value: string;
@@ -63,6 +65,11 @@ export type DropdownProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * Dropdown component for rendering a dropdown
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Dropdown.tsx | Example code}
+ */
 export class Dropdown extends React.Component<DropdownProps> {
   state = {
     open: false,
diff --git a/src/components/ErrorState/index.tsx b/src/components/ErrorState/index.tsx
index 5a88108..6d597fc 100644
--- a/src/components/ErrorState/index.tsx
+++ b/src/components/ErrorState/index.tsx
@@ -6,8 +6,10 @@ const accessImage = require('./access_error.png');
 const emptyImage = require('./empty_error.png');
 const genericImage = require('./generic_error.png');
 
+/** Types of errors */
 export type ErrorStateTypes = 'generic' | 'access' | 'empty';
 
+/** Props for ErrorState component */
 export type ErrorStateProps = {
   /** Type of error state (default is generic) */
   type?: ErrorStateTypes;
@@ -29,6 +31,11 @@ export type ErrorStateProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * ErrorState component for showing an error message and screen
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/ErrorState.tsx | Example code}
+ */
 export class ErrorState extends React.Component<ErrorStateProps> {
   private get styles() {
     return StyleSheet.create({
diff --git a/src/components/FileUploaderItem/index.tsx b/src/components/FileUploaderItem/index.tsx
index fe0b474..bb71640 100644
--- a/src/components/FileUploaderItem/index.tsx
+++ b/src/components/FileUploaderItem/index.tsx
@@ -10,6 +10,7 @@ import WarningFilledIcon from '@carbon/icons/es/warning--filled/20';
 import CheckmarkFilledIcon from '@carbon/icons/es/checkmark--filled/20';
 import { Loading } from '../Loading';
 
+/** Props for FileUploaderItem component */
 export type FileUploaderItemProps = {
   /** Name of the file */
   name: string;
@@ -31,6 +32,11 @@ export type FileUploaderItemProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * FileUploaderItem component for rendering an item that has been uploaded or will be
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/FileUploaderItem.tsx | Example code}
+ */
 export class FileUploaderItem extends React.Component<FileUploaderItemProps> {
   private get styles() {
     return StyleSheet.create({
diff --git a/src/components/FormItem/index.tsx b/src/components/FormItem/index.tsx
index 622937e..5c2da20 100644
--- a/src/components/FormItem/index.tsx
+++ b/src/components/FormItem/index.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle, ViewProps, Pressable, GestureResponderEvent, Keyboard } from 'react-native';
 import { createIcon, styleReferenceBreaker } from '../../helpers';
 import { Text, TextBreakModes } from '../Text';
-import { BaseTextInput, BaseTextInputTypes, getTextInputStyle, TextInputProps } from '../BaseTextInputs';
+import { BaseTextInput, getTextInputStyle } from '../BaseTextInputs';
+import { TextInputProps, BaseTextInputTypes } from '../../types/shared';
 import { getNavigationListItemStyle } from '../NavigationListItem';
 import { getColor } from '../../styles/colors';
 import ChevronRightIcon from '@carbon/icons/es/chevron--right/20';
@@ -26,6 +27,7 @@ import { Slider } from '../Slider';
  */
 export type FormItemType = 'text' | 'password' | 'text-area' | 'number' | 'date' | 'toggle' | 'header' | 'header-compact' | 'static' | 'slider' | 'checkbox' | 'button' | 'divider';
 
+/** Props for FormItem component */
 export type FormItemProps = {
   /** The type of form item */
   type: FormItemType;
@@ -80,6 +82,12 @@ export type FormItemProps = {
   descriptionFirstHeader?: boolean;
 };
 
+/**
+ * FormItem component for rendering form items that are full bleed. This renders multiple types of form items. See props for types.
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/FormItem.tsx | Example code}
+ */
+
 export class FormItem extends React.Component<FormItemProps> {
   state = {
     error: false,
diff --git a/src/components/GrantPermission/index.tsx b/src/components/GrantPermission/index.tsx
index 083b7e9..33ab187 100644
--- a/src/components/GrantPermission/index.tsx
+++ b/src/components/GrantPermission/index.tsx
@@ -11,6 +11,7 @@ const filePermissionImage = require('./file_permission.png');
 const locationPermissionImage = require('./location_permission.png');
 const notificationsPermissionImage = require('./notifications_permission.png');
 
+/** Props for GrantPermission component */
 export type GrantPermissionProps = {
   /** The type of permission.  This will prefill image and style. You can override image for any other custom cases and leave this undefined. */
   type?: 'files' | 'camera' | 'notifications' | 'location';
@@ -36,6 +37,11 @@ export type GrantPermissionProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * GrantPermission component for showing the grant device permission flow
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/GrantPermission.tsx | Example code}
+ */
 export class GrantPermission extends React.Component<GrantPermissionProps> {
   private resizeEvent: EmitterSubscription | undefined;
 
diff --git a/src/components/InlineLink/index.tsx b/src/components/InlineLink/index.tsx
index 096706c..e46fc6f 100644
--- a/src/components/InlineLink/index.tsx
+++ b/src/components/InlineLink/index.tsx
@@ -4,6 +4,7 @@ import { styleReferenceBreaker } from '../../helpers';
 import { getColor } from '../../styles/colors';
 import { Text, TextTypes } from '../Text';
 
+/** Props for InlineLink component */
 export type InlineLinkProps = {
   /** Text to render */
   text: string;
@@ -22,18 +23,21 @@ export type InlineLinkProps = {
 };
 
 /**
+ * InlineLink component
  * Link for using in inline with other text.
  *
  * To use import React Native Text wrapper `import { Text as ReactText } from 'react-native';`
  * Use `Text` from the Carbon package.
  * Then use something like:
- * ```
+ * ```javascript
  *   <ReactText>
  *     <Text text="Regular text before link. You can click on " />
  *     <InlineLink text="this link" onPress={() => openLink('https://carbondesignsystem.com')} />
  *     <Text text=" which will open the link." />
  *   </ReactText>
  * ```
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Link.tsx | Example code}
  */
 export class InlineLink extends React.Component<InlineLinkProps> {
   private get styles() {
diff --git a/src/components/LandingView/index.tsx b/src/components/LandingView/index.tsx
index 3fcd0d9..fa33df7 100644
--- a/src/components/LandingView/index.tsx
+++ b/src/components/LandingView/index.tsx
@@ -9,6 +9,7 @@ import { styleReferenceBreaker } from '../../helpers';
 import { ViewWrapper } from '../ViewWrapper';
 import { SemiBoldFont } from '../../styles/typography';
 
+/** Props for LandingView component */
 export type LandingViewProps = {
   /** Company image to load in top right. Can pass in many ways including require `require('../../assets/images/image.png')` */
   companyImage?: ImageSourcePropType;
@@ -46,6 +47,11 @@ export type LandingViewProps = {
   continueDisabled?: boolean;
 };
 
+/**
+ * LandingView component for showing the IBM app landing page
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/LandingView.tsx | Example code}
+ */
 export class LandingView extends React.Component<LandingViewProps> {
   private resizeEvent: EmitterSubscription | undefined;
 
diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx
index 36cbe31..d22161f 100644
--- a/src/components/Link/index.tsx
+++ b/src/components/Link/index.tsx
@@ -5,6 +5,7 @@ import { createIcon, pressableFeedbackStyle, styleReferenceBreaker } from '../..
 import { getColor } from '../../styles/colors';
 import { Text, TextBreakModes, TextTypes } from '../Text';
 
+/** Props for Link component */
 export type LinkProps = {
   /** Text to render */
   text: string;
@@ -41,8 +42,11 @@ export type LinkProps = {
 };
 
 /**
- * To not have a button be pressable 100% of screen format parent or pass style appropriately.
- * `alignSelf: 'flex-start'` is useful.
+ * Link component for rendering a link
+ *
+ * To not have a link be pressable 100% of screen format parent or pass style appropriately. `alignSelf: 'flex-start'` is useful.
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Link.tsx | Example code}
  */
 export class Link extends React.Component<LinkProps> {
   private get textIconColor(): string {
diff --git a/src/components/List/index.tsx b/src/components/List/index.tsx
index 585cbb6..69f7f37 100644
--- a/src/components/List/index.tsx
+++ b/src/components/List/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { ViewProps, StyleProp, StyleSheet, ViewStyle, View } from 'react-native';
 import { Text, TextTypes } from '../Text';
 
+/** Props for List component */
 export type ListProps = {
   /** Type of list (default is unordered) */
   type?: 'unordered' | 'ordered';
@@ -17,6 +18,11 @@ export type ListProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * List component for rendering an ordered or unordered list
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/List.tsx | Example code}
+ */
 export class List extends React.Component<ListProps> {
   private letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
 
diff --git a/src/components/Loading/index.tsx b/src/components/Loading/index.tsx
index 5980e75..75aba24 100644
--- a/src/components/Loading/index.tsx
+++ b/src/components/Loading/index.tsx
@@ -11,6 +11,7 @@ export const centerLoadingStyle = {
   marginTop: 20,
 };
 
+/** Props for Loading component */
 export type LoadingProps = {
   /** Indicates type of loading spinner (large is default) */
   type?: 'large' | 'medium' | 'small';
@@ -20,6 +21,11 @@ export type LoadingProps = {
   style?: StyleProp<ViewStyle>;
 };
 
+/**
+ * Loading component for rendering a loading spinner
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Loading.tsx | Example code}
+ */
 export class Loading extends React.Component<LoadingProps> {
   private animatedValue = new Animated.Value(0);
 
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index 994dc5a..6ef6e1a 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -4,6 +4,7 @@ import { getColor } from '../../styles/colors';
 import { styleReferenceBreaker } from '../../helpers';
 import { MenuItem, MenuItemProps } from '../MenuItem';
 
+/** Props for Menu component */
 export type MenuProps = {
   /** Items to render in the menu */
   items: MenuItemProps[];
@@ -15,6 +16,12 @@ export type MenuProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * Menu component for rendering a menu (list of clickable options)
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Menu.tsx | Example code}
+ */
+
 export class Menu extends React.Component<MenuProps> {
   private get styles() {
     const { maxMenuHeight } = this.props;
diff --git a/src/components/MenuItem/index.tsx b/src/components/MenuItem/index.tsx
index cdf694c..967872b 100644
--- a/src/components/MenuItem/index.tsx
+++ b/src/components/MenuItem/index.tsx
@@ -5,6 +5,7 @@ import { getColor } from '../../styles/colors';
 import { Text, TextBreakModes, TextTypes } from '../Text';
 import { CarbonIcon } from '../../types/shared';
 
+/** Props for MenuItem component */
 export type MenuItemProps = {
   /** Text to render */
   text: string;
@@ -34,6 +35,11 @@ export type MenuItemProps = {
   componentProps?: PressableProps;
 };
 
+/**
+ * MenuItem component for rendering an item to live in a menu or similar styled items
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Menu.tsx | Example code}
+ */
 export class MenuItem extends React.Component<MenuItemProps> {
   private get styles() {
     const { divider, lastItem } = this.props;
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index f44521a..d010563 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -7,6 +7,7 @@ import { Overlay } from '../Overlay';
 import { Text } from '../Text';
 import { pressableFeedbackStyle } from '../../helpers';
 
+/** Props for Modal component */
 export type ModalProps = {
   /** Title to show */
   title: string;
@@ -27,8 +28,12 @@ export type ModalProps = {
 };
 
 /**
+ * Modal component for showing a center modal (overlay) with info and call to actions
+ *
  * Multiple React Modals are not currently supported in React Native.
  * However, you can open a modal from within a modal. Just not side by side.
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Modal.tsx | Example code}
  */
 export class Modal extends React.Component<ModalProps> {
   private get styles() {
diff --git a/src/components/NavigationList/index.tsx b/src/components/NavigationList/index.tsx
index c7ed12a..bef046b 100644
--- a/src/components/NavigationList/index.tsx
+++ b/src/components/NavigationList/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { ViewProps, StyleProp, ViewStyle, View } from 'react-native';
 import { NavigationListItem, NavigationListItemProps } from '../NavigationListItem';
 
+/** Props for NavigationList component */
 export type NavigationListProps = {
   /** Items to render in the navigation list */
   items: NavigationListItemProps[];
@@ -11,6 +12,11 @@ export type NavigationListProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * NavigationList component for rendering a list of navigation items
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/NavigationList.tsx | Example code}
+ */
 export class NavigationList extends React.Component<NavigationListProps> {
   render(): React.ReactNode {
     const { items, componentProps, style } = this.props;
diff --git a/src/components/NavigationListItem/index.tsx b/src/components/NavigationListItem/index.tsx
index c835c61..40057ad 100644
--- a/src/components/NavigationListItem/index.tsx
+++ b/src/components/NavigationListItem/index.tsx
@@ -19,6 +19,7 @@ export const getNavigationListItemStyle = () => {
   };
 };
 
+/** Props for NavigationListItem component */
 export type NavigationListItemProps = {
   /** Text to render */
   text: string;
@@ -68,6 +69,11 @@ export type NavigationListItemProps = {
   reverseSubText?: boolean;
 };
 
+/**
+ * NavigationListItem component for rendering a navigation list item (used by NavigationList)
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/NavigationList.tsx | Example code}
+ */
 export class NavigationListItem extends React.Component<NavigationListItemProps> {
   private get textIconColor(): string {
     const { disabled } = this.props;
diff --git a/src/components/Notification/index.tsx b/src/components/Notification/index.tsx
index 2129cd7..87a3d90 100644
--- a/src/components/Notification/index.tsx
+++ b/src/components/Notification/index.tsx
@@ -11,8 +11,10 @@ import CloseIcon from '@carbon/icons/es/close/20';
 import { Button } from '../Button';
 import { defaultText } from '../../constants/defaultText';
 
+/** Types of notifications */
 export type NotificationTypes = 'info' | 'error' | 'warning' | 'success';
 
+/** Props for Notification component */
 export type NotificationProps = {
   /** Notification kind (defeault is info)  */
   kind?: NotificationTypes;
@@ -37,8 +39,12 @@ export type NotificationProps = {
 };
 
 /**
+ * Notification component for showing the accept legal terms flow
+ *
  * Notification component is "InlineNotification" by default and can be
  * used as "ToastNotification" by using multiLine flag and setting max width (follow Carbon web for Toast).
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Notification.tsx | Example code}
  */
 export class Notification extends React.Component<NotificationProps> {
   private get styles() {
diff --git a/src/components/NumberInput/index.tsx b/src/components/NumberInput/index.tsx
index c0ed758..a0ed4f0 100644
--- a/src/components/NumberInput/index.tsx
+++ b/src/components/NumberInput/index.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
-import { BaseTextInput, TextInputProps } from '../BaseTextInputs';
+import { BaseTextInput } from '../BaseTextInputs';
+import { TextInputProps } from '../../types/shared';
 
+/**
+ * NumberInput component for rendering an input for numbers with increment/decrement
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/NumberInput.tsx | Example code}
+ */
 export class NumberInput extends React.Component<TextInputProps> {
   render(): React.ReactNode {
     return <BaseTextInput type="number" {...this.props} />;
diff --git a/src/components/Overlay/index.tsx b/src/components/Overlay/index.tsx
index 707c22d..b2e2284 100644
--- a/src/components/Overlay/index.tsx
+++ b/src/components/Overlay/index.tsx
@@ -3,6 +3,7 @@ import { StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native'
 import { getColor } from '../../styles/colors';
 import { styleReferenceBreaker } from '../../helpers';
 
+/** Props for Overlay component */
 export type OverlayProps = {
   /** Style to set on the item */
   style?: StyleProp<ViewStyle>;
@@ -10,6 +11,11 @@ export type OverlayProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * Overlay component for rendering overlay under floating items or menus
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Overlay.tsx | Example code}
+ */
 export class Overlay extends React.Component<OverlayProps> {
   private get styles() {
     return StyleSheet.create({
diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx
index eda3756..06fd711 100644
--- a/src/components/Pagination/index.tsx
+++ b/src/components/Pagination/index.tsx
@@ -5,6 +5,7 @@ import { createIcon, pressableFeedbackStyle, styleReferenceBreaker } from '../..
 import { defaultText } from '../../constants/defaultText';
 import CircleIcon from '@carbon/icons/es/circle--solid/20';
 
+/** Props for Pagination component */
 export type PaginationProps = {
   /** Number of pages */
   totalPages: number;
@@ -20,6 +21,12 @@ export type PaginationProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * Pagination component for rendering a pagination menu
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Pagination.tsx | Example code}
+ */
+
 export class Pagination extends React.Component<PaginationProps> {
   private get styles() {
     return StyleSheet.create({
diff --git a/src/components/PasswordInput/index.tsx b/src/components/PasswordInput/index.tsx
index dfea0bb..f133410 100644
--- a/src/components/PasswordInput/index.tsx
+++ b/src/components/PasswordInput/index.tsx
@@ -1,5 +1,12 @@
 import React from 'react';
-import { BaseTextInput, TextInputProps } from '../BaseTextInputs';
+import { BaseTextInput } from '../BaseTextInputs';
+import { TextInputProps } from '../../types/shared';
+
+/**
+ * PasswordInput component for rendering an input field for passwords with toggle to view
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/PasswordInput.tsx | Example code}
+ */
 
 export class PasswordInput extends React.Component<TextInputProps> {
   render(): React.ReactNode {
diff --git a/src/components/ProgressIndicator/index.tsx b/src/components/ProgressIndicator/index.tsx
index 234d226..1677079 100644
--- a/src/components/ProgressIndicator/index.tsx
+++ b/src/components/ProgressIndicator/index.tsx
@@ -10,6 +10,7 @@ import PendingIcon from '@carbon/icons/es/circle-dash/20';
 import ActiveIcon from '@carbon/icons/es/circle--filled/20';
 import { Text } from '../Text';
 
+/** Props for ProgressIndicator component */
 export type ProgressIndicatorProps = {
   /** Title to show for the accordion  */
   title: string;
@@ -33,6 +34,12 @@ export type ProgressIndicatorProps = {
   children?: React.ReactNode;
 };
 
+/**
+ * ProgressIndicator component for rendering a step by step progress flow
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/ProgressIndicator.tsx | Example code}
+ */
+
 export class ProgressIndicator extends React.Component<ProgressIndicatorProps> {
   state = {
     open: false,
diff --git a/src/components/RadioButton/index.tsx b/src/components/RadioButton/index.tsx
index ace2475..c8b988e 100644
--- a/src/components/RadioButton/index.tsx
+++ b/src/components/RadioButton/index.tsx
@@ -8,6 +8,11 @@ import RadioButtonIcon from '@carbon/icons/es/radio-button/20';
 import RadioButtonCheckedIcon from '@carbon/icons/es/radio-button--checked/20';
 import { checkboxRadioBaseStyle, CheckboxRadioProps } from '../Checkbox';
 
+/**
+ * RadioButton component for rendering a radio button
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/RadioButton.tsx | Example code}
+ */
 export class RadioButton extends React.Component<CheckboxRadioProps> {
   private get styles() {
     return StyleSheet.create({
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index d12afeb..aa7faf0 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -10,7 +10,7 @@ import { defaultText } from '../../constants/defaultText';
 import { getTextInputStyle } from '../BaseTextInputs';
 import type { ButtonProps } from '../Button';
 
-/** Shared props for Text, Password and TextArea */
+/** Props for Search component */
 export type SearchProps = {
   /** Value of text (Controlled component) */
   value: string;
@@ -52,6 +52,11 @@ export type SearchProps = {
   buttonProps?: ButtonProps;
 };
 
+/**
+ * Search component for rendering a search input
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Search.tsx | Example code}
+ */
 export class Search extends React.Component<SearchProps> {
   state = {
     hasFocus: false,
diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx
index bd8a21c..f75e837 100644
--- a/src/components/Slider/index.tsx
+++ b/src/components/Slider/index.tsx
@@ -6,6 +6,7 @@ import { getColor } from '../../styles/colors';
 import { Text } from '../Text';
 import { TextInput } from '../TextInput';
 
+/** Props for Slider component */
 export type SliderProps = {
   /** Text to render */
   label: string;
@@ -31,6 +32,11 @@ export type SliderProps = {
   style?: StyleProp<ViewStyle>;
 };
 
+/**
+ * Slider component for rendering a slider between numbers
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Slider.tsx | Example code}
+ */
 export class Slider extends React.Component<SliderProps> {
   private barWidth: number | undefined;
 
diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
index 3515c8a..389a3ca 100644
--- a/src/components/Tabs/index.tsx
+++ b/src/components/Tabs/index.tsx
@@ -4,6 +4,7 @@ import { getColor } from '../../styles/colors';
 import { pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
 import { Text } from '../Text';
 
+/** Item to pass to Tabs */
 export type TabItem = {
   /** Text to render */
   text: string;
@@ -13,6 +14,7 @@ export type TabItem = {
   data?: unknown;
 };
 
+/** Props for Tabs component */
 export type TabsProps = {
   /** Items to render in the tabs */
   items: TabItem[];
@@ -28,6 +30,11 @@ export type TabsProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * Tabs component for rendering tabs on the page
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Tabs.tsx | Example code}
+ */
 export class Tabs extends React.Component<TabsProps> {
   state = {
     currentIndex: 0,
diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx
index 4b44203..cc058bf 100644
--- a/src/components/Tag/index.tsx
+++ b/src/components/Tag/index.tsx
@@ -5,8 +5,10 @@ import CloseIcon from '@carbon/icons/es/close/20';
 import { getColor } from '../../styles/colors';
 import { Text } from '../Text';
 
+/** Type of tags */
 export type TagTypes = 'red' | 'magenta' | 'purple' | 'blue' | 'cyan' | 'teal' | 'green' | 'gray' | 'cool-gray' | 'warm-gray';
 
+/** Props for Tag component */
 export type TagProps = {
   /** Title of tag to render */
   title: string;
@@ -22,6 +24,11 @@ export type TagProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * Tag component for rendering a tag
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Tag.tsx | Example code}
+ */
 export class Tag extends React.Component<TagProps> {
   private get styles() {
     return StyleSheet.create({
diff --git a/src/components/Text/index.tsx b/src/components/Text/index.tsx
index 9176c33..371a41e 100644
--- a/src/components/Text/index.tsx
+++ b/src/components/Text/index.tsx
@@ -4,9 +4,13 @@ import { styleReferenceBreaker } from '../../helpers';
 import { getColor } from '../../styles/colors';
 import { Body01, Body02, BodyCompact01, BodyCompact02, Code01, Code02, Heading01, Heading02, Heading03, Heading04, Heading05, Heading06, Heading07, HeadingCompact01, HeadingCompact02, HelperText01, HelperText02, Label01, Label02, Legal01, Legal02 } from '../../styles/typography';
 
+/** Types of Text items */
 export type TextTypes = 'code-01' | 'code-02' | 'label-01' | 'label-02' | 'helper-text-01' | 'helper-text-02' | 'legal-01' | 'legal-02' | 'body-compact-01' | 'body-compact-02' | 'body-01' | 'body-02' | 'heading-compact-01' | 'heading-compact-02' | 'heading-01' | 'heading-02' | 'heading-03' | 'heading-04' | 'heading-05' | 'heading-06' | 'heading-07';
+
+/** Types of text break modes (where to apply ellipsis) */
 export type TextBreakModes = 'head' | 'middle' | 'tail';
 
+/** Props for Text component */
 export type TextProps = {
   /** Text to render */
   text?: string;
@@ -20,6 +24,11 @@ export type TextProps = {
   componentProps?: ReactTextProps;
 };
 
+/**
+ * Text component for rendering blocks of text styled with Carbon text style
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Text.tsx | Example code}
+ */
 export class Text extends React.Component<TextProps> {
   private get textStyle(): StyleProp<TextStyle> {
     const { type, style } = this.props;
diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx
index 96753ca..be1317c 100644
--- a/src/components/TextArea/index.tsx
+++ b/src/components/TextArea/index.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
-import { BaseTextInput, TextInputProps } from '../BaseTextInputs';
+import { BaseTextInput } from '../BaseTextInputs';
+import { TextInputProps } from '../../types/shared';
 
+/**
+ * TextArea component for rendering a text area (large text input block with newline support)
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/TextArea.tsx | Example code}
+ */
 export class TextArea extends React.Component<TextInputProps> {
   render(): React.ReactNode {
     return <BaseTextInput type="text-area" {...this.props} />;
diff --git a/src/components/TextInput/index.tsx b/src/components/TextInput/index.tsx
index 481a5fd..833da69 100644
--- a/src/components/TextInput/index.tsx
+++ b/src/components/TextInput/index.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
-import { BaseTextInput, TextInputProps } from '../BaseTextInputs';
+import { BaseTextInput } from '../BaseTextInputs';
+import { TextInputProps } from '../../types/shared';
 
+/**
+ * TextInput component for rendering text input box
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/TextInput.tsx | Example code}
+ */
 export class TextInput extends React.Component<TextInputProps> {
   render(): React.ReactNode {
     return <BaseTextInput type="text" {...this.props} />;
diff --git a/src/components/Tile/index.tsx b/src/components/Tile/index.tsx
index 12f0412..c1909ee 100644
--- a/src/components/Tile/index.tsx
+++ b/src/components/Tile/index.tsx
@@ -4,6 +4,7 @@ import { getColor } from '../../styles/colors';
 import { pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
 import { defaultText } from '../../constants/defaultText';
 
+/** Props for Tile component */
 export type TileProps = {
   /** Type of tile */
   type?: 'default' | 'scroll' | 'clickable';
@@ -21,6 +22,11 @@ export type TileProps = {
   children?: React.ReactNode;
 };
 
+/**
+ * Tile component for rendering a carbon tile
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Tile.tsx | Example code}
+ */
 export class Tile extends React.Component<TileProps> {
   private get styles() {
     return StyleSheet.create({
diff --git a/src/components/Toggle/index.tsx b/src/components/Toggle/index.tsx
index 1ba07a6..28a7da6 100644
--- a/src/components/Toggle/index.tsx
+++ b/src/components/Toggle/index.tsx
@@ -5,6 +5,7 @@ import { styleReferenceBreaker } from '../../helpers';
 import { getTextInputStyle } from '../BaseTextInputs';
 import { Text } from '../Text';
 
+/** Props for Toggle component */
 export type ToggleProps = {
   /** Text to render */
   label: string;
@@ -32,9 +33,12 @@ export type ToggleProps = {
 };
 
 /**
+ * Toggle component for rendering a boolean toggle switch
  * This component utilizes Native Switch from iOS and Android.
  * It is styled to be similar to Carbon.
  * But relies on the final styling from the OS.
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Toggle.tsx | Example code}
  */
 export class Toggle extends React.Component<ToggleProps> {
   private get styles() {
diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
index e1d0856..7d3a3fd 100644
--- a/src/components/Tooltip/index.tsx
+++ b/src/components/Tooltip/index.tsx
@@ -8,8 +8,10 @@ import { defaultText } from '../../constants/defaultText';
 import { Button, ButtonProps } from '../Button';
 import { Link, LinkProps } from '../Link';
 
+/** Positions for the caret on tooltips */
 export type TooltipCaretPosition = 'left' | 'right' | 'center';
 
+/** Props for Tooltip component */
 export type TooltipProps = {
   /** Tooltip content (renders in layer box, can customize via contentStyle) */
   content: React.ReactNode;
@@ -31,6 +33,11 @@ export type TooltipProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * Tooltip component for rendering a tooltip popup
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Tooltip.tsx | Example code}
+ */
 export class Tooltip extends React.Component<TooltipProps> {
   state = {
     open: false,
diff --git a/src/components/TopNavigationBar/index.tsx b/src/components/TopNavigationBar/index.tsx
index 323ba41..e5f1bce 100644
--- a/src/components/TopNavigationBar/index.tsx
+++ b/src/components/TopNavigationBar/index.tsx
@@ -39,6 +39,7 @@ export const headerBarGetItems = (items: NavigationButton[], style: unknown, ite
   );
 };
 
+/** Props for TopNavigationBar component */
 export type TopNavigationBarProps = {
   /** Title to show */
   title: string;
@@ -62,6 +63,12 @@ export type TopNavigationBarProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * TopNavigationBar component for rendering a navigation bar at the top of the page (with title and actions)
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/TopNavigationBar.tsx | Example code}
+ */
+
 export class TopNavigationBar extends React.Component<TopNavigationBarProps> {
   state = {
     leftLinkWidth: 100,
diff --git a/src/components/TopNavigationBarLogin/index.tsx b/src/components/TopNavigationBarLogin/index.tsx
index 6915909..7bf44e8 100644
--- a/src/components/TopNavigationBarLogin/index.tsx
+++ b/src/components/TopNavigationBarLogin/index.tsx
@@ -7,6 +7,7 @@ import { Link, LinkProps } from '../Link';
 import { Text } from '../Text';
 import { headerBarGetItems } from '../TopNavigationBar';
 
+/** Props for TopNavigationBarLogin component */
 export type TopNavigationBarLoginProps = {
   /** Title to show */
   title: string;
@@ -26,6 +27,11 @@ export type TopNavigationBarLoginProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * TopNavigationBarLogin component for rendering the top navigation bar for login flows (which is different from regular views)
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/TopNavigationBarLogin.tsx | Example code}
+ */
 export class TopNavigationBarLogin extends React.Component<TopNavigationBarLoginProps> {
   private get styles() {
     return StyleSheet.create({
diff --git a/src/components/UiPanel/index.tsx b/src/components/UiPanel/index.tsx
index 175e84d..3cdac3c 100644
--- a/src/components/UiPanel/index.tsx
+++ b/src/components/UiPanel/index.tsx
@@ -8,6 +8,7 @@ import { BottomSafeAreaColorOverride } from '../BottomSafeAreaColorOverride';
 import { defaultText } from '../../constants/defaultText';
 import { zIndexes } from '../../styles/z-index';
 
+/** Props for UiPanel component */
 export type UiPanelProps = {
   /** Indicate if the panel should be open */
   open: boolean;
@@ -25,6 +26,11 @@ export type UiPanelProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * UiPanel component for rendering a slide over panel that overlays on the UI
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/UiPanel.tsx | Example code}
+ */
 export class UiPanel extends React.Component<UiPanelProps> {
   private animatedValue = new Animated.Value(0);
 
diff --git a/src/components/UiPanelItem/index.tsx b/src/components/UiPanelItem/index.tsx
index ba9b639..d7963ae 100644
--- a/src/components/UiPanelItem/index.tsx
+++ b/src/components/UiPanelItem/index.tsx
@@ -7,6 +7,7 @@ import ChevronDownIcon from '@carbon/icons/es/chevron--down/20';
 import ChevronUpIcon from '@carbon/icons/es/chevron--up/20';
 import type { CarbonIcon } from 'src/types/shared';
 
+/** Item to show in the UiPanel */
 export type UiPanelNestedItem = {
   /** Name of the navigation item to render */
   text: string;
@@ -32,6 +33,7 @@ export type UiPanelNestedItem = {
   componentProps?: ViewProps;
 };
 
+/** Props for UiPanelItem component */
 export type UiPanelItemProps = {
   /** Name of the item to render */
   text: string;
@@ -63,6 +65,12 @@ export type UiPanelItemProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * UiPanelItem component for rendering an item in the UI Panel
+ * This is a child of UiPanel component
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/UiPanel.tsx | Example code}
+ */
 export class UiPanelItem extends React.Component<UiPanelItemProps> {
   state = {
     open: false,
diff --git a/src/components/ViewWrapper/index.tsx b/src/components/ViewWrapper/index.tsx
index 65c5979..dc79168 100644
--- a/src/components/ViewWrapper/index.tsx
+++ b/src/components/ViewWrapper/index.tsx
@@ -3,6 +3,7 @@ import { ViewProps, StyleSheet, SafeAreaView, StatusBar, View } from 'react-nati
 import { getColor, useDarkMode } from '../../styles/colors';
 import { BottomSafeAreaColorOverride } from '../BottomSafeAreaColorOverride';
 
+/** Props for ViewWrapper component */
 export type ViewWrapperProps = {
   /** Children to load */
   children?: React.ReactNode;
@@ -24,6 +25,8 @@ export type ViewWrapperProps = {
  * The ViewWrapper component provides a unified way to load main views without worrying about StatusBar or safe zone stylings.
  * For most usages simply indicate if you are using Navigation for top and bottom.
  * For Layout views that are full screen (Landing for example) you do not need to wrap them in this.
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/ViewWrapper.tsx | Example code}
  */
 export class ViewWrapper extends React.Component<ViewWrapperProps> {
   private get topColor(): string {
diff --git a/src/components/WebHeader/index.tsx b/src/components/WebHeader/index.tsx
index 84e836d..84edab5 100644
--- a/src/components/WebHeader/index.tsx
+++ b/src/components/WebHeader/index.tsx
@@ -5,6 +5,7 @@ import { createIcon, pressableFeedbackStyle, styleReferenceBreaker } from '../..
 import { getColor } from '../../styles/colors';
 import { Text } from '../Text';
 
+/** Action item for the web header */
 export type WebHeaderAction = {
   /** Icon to render (size 20) */
   icon: CarbonIcon;
@@ -16,6 +17,7 @@ export type WebHeaderAction = {
   onLongPress?: () => void;
 };
 
+/** Props for WebHeader component */
 export type WebHeaderProps = {
   /** actions to render to the right side */
   actions?: WebHeaderAction[];
@@ -29,6 +31,11 @@ export type WebHeaderProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * WebHeader component for rendering the header bar that matches Carbon Web
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/WebHeader.tsx | Example code}
+ */
 export class WebHeader extends React.Component<WebHeaderProps> {
   private get styles() {
     return StyleSheet.create({
diff --git a/src/styles/colors.ts b/src/styles/colors.ts
index ee03a9e..5b02645 100644
--- a/src/styles/colors.ts
+++ b/src/styles/colors.ts
@@ -5,6 +5,7 @@ import { logIssue } from '../helpers';
 
 /** Theme choices available */
 export type ThemeChoices = 'light' | 'dark';
+/** Theme definition */
 export type ThemeDefinition = { [key: string]: string };
 
 let themeOverride: ThemeChoices | null = null;
@@ -64,7 +65,10 @@ export const useDarkMode = (): boolean => {
   return Appearance.getColorScheme() === 'dark';
 };
 
-/** Component colors are not part of themes and are in the main library; which is quite large. So hardcoding for now */
+/**
+ * @ignore
+ * Component colors are not part of themes and are in the main library; which is quite large. So hardcoding for now
+ *  */
 export const componentsG10: { [key: string]: string } = {
   buttonPrimary: '#0f62fe',
   buttonPrimaryHover: '#0353e9',
@@ -117,7 +121,10 @@ export const componentsG10: { [key: string]: string } = {
   notificationBackgroundInfo: '#edf5ff',
 };
 
-/** Component colors are not part of themes and are in the main library; which is quite large. So hardcoding for now */
+/**
+ * @ignore
+ * Component colors are not part of themes and are in the main library; which is quite large. So hardcoding for now
+ *  */
 export const componentsG100: { [key: string]: string } = {
   buttonPrimary: '#0f62fe',
   buttonPrimaryHover: '#0353e9',
diff --git a/src/styles/typography.ts b/src/styles/typography.ts
index ad9be88..fa38309 100644
--- a/src/styles/typography.ts
+++ b/src/styles/typography.ts
@@ -5,13 +5,16 @@
  * If you want to use other fonts you can download them and store them in your app and follow same directions on README.
  */
 
+/** Font weights supported */
 export type FontWeights = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | undefined;
 
+/** Declaration of standard Font item */
 export type FontDefinition = {
   fontWeight: FontWeights;
   fontFamily: string;
 };
 
+/** Font override type */
 export type FontDefinitionOverrides = {
   light?: FontDefinition;
   regular?: FontDefinition;
@@ -19,6 +22,10 @@ export type FontDefinitionOverrides = {
   monoRegular?: FontDefinition;
 };
 
+/**
+ * @ignore
+ * The override font definition to store
+ */
 let overrideFontDefinition: FontDefinitionOverrides = {};
 
 /**
diff --git a/src/styles/z-index.ts b/src/styles/z-index.ts
index bf9e97a..b3a1bc6 100644
--- a/src/styles/z-index.ts
+++ b/src/styles/z-index.ts
@@ -1,3 +1,4 @@
+/** Basic z-indexes to use for different use cases */
 export const zIndexes = {
   behind: -1,
   base: 1,
diff --git a/src/types/shared.ts b/src/types/shared.ts
index f616685..67a4e51 100644
--- a/src/types/shared.ts
+++ b/src/types/shared.ts
@@ -1,6 +1,74 @@
+import { LinkProps } from '../components/Link';
+import { TextBreakModes } from '../components/Text';
+import { NativeSyntheticEvent, TextInputProps as ReactTextInputProps, StyleProp, TextInputFocusEventData, ViewStyle } from 'react-native';
+
 /**
  * Icon type to pass to components that take icon directly.
  * Icon should not use createIcon.  Pass directly from import
  * `import AddIcon from '@carbon/icons/es/add/20';` for example
  * */
 export type CarbonIcon = unknown;
+
+/** Basic text input types */
+export type BaseTextInputTypes = 'text' | 'text-area' | 'password' | 'number' | 'date';
+
+/** Shared props for Text, Password and TextArea */
+export type TextInputProps = {
+  /** Value of text (Controlled component) */
+  value: string;
+  /** Label string to use */
+  label?: string;
+  /** Helper string to use */
+  helperText?: string;
+  /** Check is invalid */
+  isInvalid?: (value: string) => boolean;
+  /** Error string to use. Set custom rules or return required text */
+  getErrorText?: (value: string) => string;
+  /** Warning string to use. This will show if NOT in error. */
+  warningText?: string;
+  /** Placeholder text to use */
+  placeholder?: string;
+  /** Indicate if required */
+  required?: boolean;
+  /** Indicate if disabled */
+  disabled?: boolean;
+  /** Label break mode */
+  labelBreakMode?: TextBreakModes;
+  /** Change event when text changed */
+  onChangeText: (value: string) => void;
+  /** Blur event when focus is lost */
+  onBlur?: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+  /** Focus event when focus is gained */
+  onFocus?: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+  /** Indicate if autoCorrect should be used (default is true) */
+  autoCorrect?: boolean;
+  /** Define auto cap rule (default is normally sentences) */
+  autoCapitalize?: 'characters' | 'words' | 'sentences' | 'none';
+  /** Trigger ENTER event (consumer should validate if form is valid and submit if this is called) */
+  onSubmitEditing?: () => void;
+  /** Indicate if should be secured (password) */
+  secureTextEntry?: boolean;
+  /** Max length of field */
+  maxLength?: number;
+  /** Indicate if text box is used on layer */
+  light?: boolean;
+  /** minHeight for text area */
+  textAreaMinHeight?: number;
+  /** @remarks password only. Text to use for toggle password button (accessibility). Defaults to ENGLISH "Show/hide password" */
+  togglePasswordText?: string;
+  /** @remarks number only. Text to use for increment number button (accessibility). Defaults to ENGLISH "Increment" */
+  incrementNumberText?: string;
+  /** @remarks number only. Text to use for decrement number button (accessibility). Defaults to ENGLISH "Decrement" */
+  decrementNumberText?: string;
+  /** @remarks number only. Min and Max for numbers. If not set any number (including negative is valid) */
+  numberRules?: {
+    min?: number;
+    max?: number;
+  };
+  /** Link to render to right of label */
+  labelLink?: LinkProps;
+  /** Style to set on the item */
+  style?: StyleProp<ViewStyle>;
+  /** Direct props to set on the React Native component (including iOS and Android specific props). Helpful for fully customizing text input behavior. */
+  componentProps?: ReactTextInputProps;
+};
diff --git a/typedoc.json b/typedoc.json
new file mode 100644
index 0000000..a784900
--- /dev/null
+++ b/typedoc.json
@@ -0,0 +1,7 @@
+{
+  "entryPoints": ["src/index.tsx"],
+  "out": "docs",
+  "excludePrivate": true,
+  "excludeNotDocumented": true,
+  "sourceLinkExternal": true
+}
diff --git a/yarn.lock b/yarn.lock
index 395874d..01d85c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2719,6 +2719,11 @@ ansi-regex@^6.0.1:
   resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz"
   integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
 
+ansi-sequence-parser@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-sequence-parser/-/ansi-sequence-parser-1.1.1.tgz#e0aa1cdcbc8f8bb0b5bca625aac41f5f056973cf"
+  integrity sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==
+
 ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz"
@@ -6289,6 +6294,11 @@ json5@^2.2.1, json5@^2.2.2:
   resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
+jsonc-parser@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76"
+  integrity sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==
+
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz"
@@ -6561,6 +6571,11 @@ lru-cache@^7.14.1:
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz"
   integrity sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==
 
+lunr@^2.3.9:
+  version "2.3.9"
+  resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.9.tgz#18b123142832337dd6e964df1a5a7707b25d35e1"
+  integrity sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==
+
 macos-release@^3.1.0:
   version "3.2.0"
   resolved "https://registry.npmjs.org/macos-release/-/macos-release-3.2.0.tgz"
@@ -6603,6 +6618,11 @@ map-obj@^4.0.0:
   resolved "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz"
   integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
 
+marked@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3"
+  integrity sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==
+
 mdn-data@2.0.14:
   version "2.0.14"
   resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz"
@@ -6977,6 +6997,13 @@ minimatch@^5.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
+minimatch@^9.0.3:
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
+  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist-options@4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz"
@@ -8382,6 +8409,16 @@ shelljs@0.8.5:
     interpret "^1.0.0"
     rechoir "^0.6.2"
 
+shiki@^0.14.1:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/shiki/-/shiki-0.14.5.tgz#375dd214e57eccb04f0daf35a32aa615861deb93"
+  integrity sha512-1gCAYOcmCFONmErGTrS1fjzJLA7MGZmKzrBNX7apqSwhyITJg2O102uFzXUeBxNnEkDA9vHIKLyeKq0V083vIw==
+  dependencies:
+    ansi-sequence-parser "^1.1.0"
+    jsonc-parser "^3.2.0"
+    vscode-oniguruma "^1.7.0"
+    vscode-textmate "^8.0.0"
+
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz"
@@ -8977,6 +9014,16 @@ typedarray@^0.0.6:
   resolved "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz"
   integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
 
+typedoc@^0.25.3:
+  version "0.25.3"
+  resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.25.3.tgz#53c6d668e1001b3d488e9a750fcdfb05433554c0"
+  integrity sha512-Ow8Bo7uY1Lwy7GTmphRIMEo6IOZ+yYUyrc8n5KXIZg1svpqhZSWgni2ZrDhe+wLosFS8yswowUzljTAV/3jmWw==
+  dependencies:
+    lunr "^2.3.9"
+    marked "^4.3.0"
+    minimatch "^9.0.3"
+    shiki "^0.14.1"
+
 "typescript@^4.6.4 || ^5.0.0", typescript@^5.1.6:
   version "5.1.6"
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz"
@@ -9160,6 +9207,16 @@ vm2@^3.9.19:
     acorn "^8.7.0"
     acorn-walk "^8.2.0"
 
+vscode-oniguruma@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz#439bfad8fe71abd7798338d1cd3dc53a8beea94b"
+  integrity sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==
+
+vscode-textmate@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/vscode-textmate/-/vscode-textmate-8.0.0.tgz#2c7a3b1163ef0441097e0b5d6389cd5504b59e5d"
+  integrity sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==
+
 walker@^1.0.7, walker@^1.0.8:
   version "1.0.8"
   resolved "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz"