@dhasdk/simple-ui 1.0.7 → 1.0.9

package/README.md

@@ -1,15 +1,23 @@
 # simple-ui
 
-This library was generated with [Nx](https://nx.dev) on React 18.x.
+This library was generated with [Nx](https://nx.dev) on React 19.1
 
-## <span style="color: orange;">*This library is under active development and not ready for production use\*</span>
+## <span style="color: orange;">*This library is under active development and not ready for external production use\*</span>
 
+<!-- 
+AppointmentPicker
+ProgressBar
+RadioGroup
+Search
+Tooltip
+ -->
 
 
 ## Table of Contents
 
 - [Installation](#installation-and-setup)
 - [Accordion](#accordion)
+- [AppointmentPicker](#appointment-picker)
 - [Badge](#badge)
 - [BreadCrumbs](#breadcrumbs)
 - [Button](#button)
@@ -22,18 +30,23 @@ This library was generated with [Nx](https://nx.dev) on React 18.x.
 - [List](#list)
 - [Modal](#modal)
 - [Pill](#pill)
+- [ProgressBar](#progress-bar)
+- [RadioGroup](#radio-group)
+- [Search](#search)
 - [SectionHeader](#sectionheader)
 - [Select](#select)
+- [Shield](#shield)
 - [SideBarNav](#sidebarnav)
 - [Skeleton](#skeleton)
 - [Slider](#slider)
 - [Status](#status)
 - [Tabs](#tabs)
 - [Toggle](#toggle)
+- [Tooltip](#tooltip)
+
+<!-- ## Quick Notes: -->
 
-## Quick Notes:
 
-- Some of these components use what are called **variants** from the **class-variance-authority** library. This allows pre-defined styles to be set, or 'variants', and those variants to be called by name via a prop when using the specified component. An example is the **Button** component below, and calling it using the 'DHAActive' style variant of that component (example code below).
 
 <!-- I N S T A L L A T I O N ----------------------------------------------------------------------------------- -->
 
@@ -49,9 +62,9 @@ This library was generated with [Nx](https://nx.dev) on React 18.x.
 
 - Add **`node_modules/@dhasdk/**/*.{js,jsx}`** (or similar) to the **content** block inside your **`tailwind.config.ts`** file.
 
-3. Open the page that you are going to place the **dha-sdk/simple-ui** component, and do the following:
+3. Open the page that you are going to place the **dhasdk/simple-ui** component, and do the following:
 
-- At the top of the file, import your desired component from **'@dha-sdk'**, i.e. if you are using the **Badge** component, then:
+- At the top of the file, import your desired component from **'@dhasdk'**, i.e. if you are using the **Badge** component, then:
   - **`import { Badge } from '@dhasdk/simple-ui';`**
 - Elsewhere in your file, use the component as documented below
 
@@ -138,6 +151,58 @@ Finally, if Accordion props are specified inside the parent component, those val
 
 <!-- E N D   A C C O R D I O N -->
 
+<!--  A P P O I N T M E N T   P I C K E R  ----------------------------------------------------------------- -->
+
+## Appointment Picker
+
+The **AppointmentPicker** component allows a user to make a single selection from a list of multiple times.
+
+This component takes multiple optional props in addition to any other html attributes a normal html element would use, for example an **aria-tag**.
+
+
+### Props for AppointmentPicker
+
+| Prop        | Type     | Optional | Default  | Description                                  |
+| ----------- | -------- | -------- | -------- | -------------------------------------------- |
+| className   | string | Yes | see below | a group of alternate css classes that can be specified by the developer for use in the dropdown button portion of the component. |
+| classNameContainer | string | Yes | '' | a group of alternate css classes that can be specified by the developer for use in the parent container of the component. |
+| interval | 'hour' \| 'half-hour' \| 'quarter-hour'	| Yes | **`'hour'`** | Controls the interval between times, for example 'hour' intervals would produce results like 01:00, 02:00 etc, while half hour and quarter hour would produce gaps of 30 and 15 minutes respectively. |
+| timeFormat | '12hr' \| '24hr' | Yes | **`'24hr'`** | Controls whether the times are listed as military or standard 12 hour, am/pm times. (13:00 vs 1:00pm & 03:00 vs 3:00am) |
+| hourRange | [number, number] | Yes | **`undefined`** | If specified, only hours within and including the range specified will be available for selection. |
+| label | string | Yes | **`undefined`** | text used as the label for the input, i.e. 'Pick a time (hourly)' above |
+| optionsLabel | string | Yes | **`'Select a time'`** | appears as the label in the AppointmentPicker component, i.e. 'Select a time' above. Note, this is not the label above the component. |
+| setSelectedOption | **`(string) => void`** | No | **`undefined`** | calls the given function with the selected value if present, otherwise with name |
+| variant | **`string`** | Yes | **`undefined`** | The predefined variant of Select to display. Current options are 'default', 'fill', and 'outline' |
+| width | **`string`** | Yes |  | This prop is intended to, like className, take in css class name values. These are intended though to only take class names relevant to the component width, as they will be applied to both the button  and the drop down elements of the AppointmentPicker component. For instance, the width prop is a good way to ensure that the button and drop down are of the same width. Pay attention to the default classes below. |
+
+
+***Base CSS Classes***
+
+**`outline-hidden outline-offset-0 flex justify-between items-center w-[292px] md:w-[343px] lg:w-[600px] h-14 border focus:outline-4 focus:mb-2 focus:outline-[#fa89f1] shadow-sm pl-4 pr-2 py-2 bg-white text-base md:text-lg font-medium text-gray-700 hover:bg-gray-50 border-[#b3b3b3] h-12 mt-1 font-["Arial"] Separate Variant Styles`**
+
+***default:***
+**`hover:bg-gray-200 text-black hover:border-gray-400 disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive disabled:border-dha-mc-secondary-border disabled:border-2`**
+***fill:***
+**`hover:bg-[#0c2c8e] text-white bg-[#092068] hover:border-gray-400 disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive disabled:border-dha-mc-secondary-border disabled:border-2 py-3`**
+***outline:***
+**`bg-white text-[#808080] disabled:border-dha-mc-secondary-border disabled:text-dha-mc-checkbox-inactive`**
+
+
+### Example Usage
+
+```jsx
+ <AppointmentPicker label="Pick a time (half-hour)" interval='half-hour' />
+```
+
+### Dependencies
+
+**_none_**
+
+
+[Top of Page](#table-of-contents)
+
+<!-- E N D   A P P O I N T M E N T   P I C K E R -->
+
 
 <!-- B A D G E ----------------------------------------------------------------------------------- -->
 
@@ -165,19 +230,19 @@ This div is also styled using the tailwind **`twMerge()`** utility, so custom cl
 
 1. Variants 
      - success
-       - className: **`w-[79px] h-[26px] px-3 py-1 bg-[#d6f4d5] rounded-[40px] outline outline-1 outline-offset-[-1px] outline-[#387740] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0`**
+       - className: **`w-[79px] h-[26px] px-3 py-1 bg-[#d6f4d5] rounded-[40px] outline outline-1 -outline-offset-1 outline-[#387740] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0`**
        - classNameChildren: **`text-[#387740] text-xs font-normal font-['Arial'] leading-[18px] md:text-md md:leading-normal lg:text-lg lg:leading-[27px`**
        - classNameImage: **`relative size-2.5 mb-0.5 me-1.5 md:size-3.5 md:me-2 lg:size-4 lg:mb-0.5 lg:me-2.5 lg:ms-1`**
      - caution
-       - className: **`w-[79px] h-[26px] px-3 py-1 bg-[#fff1be] rounded-[40px] outline outline-1 outline-offset-[-1px] outline-[#966121] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0`**
+       - className: **`w-[79px] h-[26px] px-3 py-1 bg-[#fff1be] rounded-[40px] outline outline-1 -outline-offset-1 outline-[#966121] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0`**
        - classNameImage: **`relative size-2.5 mb-0.5 me-1.5 md:size-3.5 md:me-2 lg:size-4 lg:mb-0.5 lg:me-2.5 lg:ms-1`**
        - classNameChildren: **`text-[#966222] text-xs font-normal font-['Arial'] leading-[18px] md:text-base md:leading-normal lg:text-lg lg:leading-[27px}`**
      - danger
-       - className: **`w-[79px] h-[26px] px-3 py-1 bg-[#f4c2c2] rounded-[40px] outline outline-1 outline-offset-[-1px] outline-[#a22b23] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0`**
+       - className: **`w-[79px] h-[26px] px-3 py-1 bg-[#f4c2c2] rounded-[40px] outline outline-1 -outline-offset-1 outline-[#a22b23] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0`**
        - classNameImage: **`relative size-2.5 mb-0.5 me-1.5 md:size-3.5 md:me-2 lg:size-4 lg:mb-0.5 lg:me-2.5 lg:ms-1`**
        - classNameChildren: **`text-[#A32C24] text-xs font-normal font-['Arial'] leading-[18px] md:text-base md:leading-normal lg:text-lg lg:leading-[27px]`**
      - disabled
-       - className: **`w-[79px] h-[26px] px-3 py-1 rounded-[40px] outline outline-1 outline-offset-[-1px] outline-[#394150] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0`**
+       - className: **`w-[79px] h-[26px] px-3 py-1 rounded-[40px] outline outline-1 -outline-offset-1 outline-[#394150] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0`**
        - classNameImage: **`relative size-2.5 mb-0.5 me-1.5 md:size-3.5 md:me-2 lg:size-4 lg:mb-0.5 lg:me-2.5 lg:ms-1`**
        - classNameChildren: **`text-[#394150] text-xs font-normal font-['Arial'] leading-[18px] md:text-md md:leading-normal lg:text-lg lg:leading-[27px]`**
 
@@ -309,7 +374,7 @@ A reference can also be created and passed to the button component, and the comp
 
 - Base CSS Classes
 
-     - **`inline-flex items-center justify-center whitespace-nowrap rounded-md ring-offset-background transition-colors focus-visible:outline-none font-["Arial"] disabled:pointer-events-none text-sm md:text-base lg:text-lg disabled:opacity-50 px-6 py-[8px] md:py-[12px] lg:py-[16px] h-[40px] md:h-[48px] lg:h-[56px]`**
+     - **`inline-flex items-center justify-center whitespace-nowrap rounded-md ring-offset-background transition-colors focus-visible:outline-hidden font-["Arial"] disabled:pointer-events-none text-sm md:text-base lg:text-lg disabled:opacity-50 px-6 py-[8px] md:py-[12px] lg:py-[16px] h-[40px] md:h-[48px] lg:h-[56px]`**
 
 - Additional Classes per variant
     - 'default' - **`border-2 border-gray-300 rounded-md bg-gray-200 hover:bg-slate-400 text-black text-lg hover:text-white hover:border-slate-600 disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive focus:border-black disabled:border-dha-mc-bottom-nav-background disabled:border-2 py-0 md:py-0 lg:py-0 h-[48px] mt-1`**
@@ -975,9 +1040,9 @@ Full list of props below
 
 #### Default classes per Variant
 
-- default: **`bg-white rounded-lg shadow-lg w-full max-w-lg p-6 focus:outline-none`**
-- darker: **`bg-slate-600 rounded-lg shadow-lg w-full max-w-lg p-6 focus:outline-none text-slate-200`**
-- dark: **`bg-zinc-800 rounded-lg shadow-lg w-full max-w-lg p-6 focus:outline-none text-slate-200`**
+- default: **`bg-white rounded-lg shadow-lg w-full max-w-lg p-6 focus:outline-hidden`**
+- darker: **`bg-slate-600 rounded-lg shadow-lg w-full max-w-lg p-6 focus:outline-hidden text-slate-200`**
+- dark: **`bg-zinc-800 rounded-lg shadow-lg w-full max-w-lg p-6 focus:outline-hidden text-slate-200`**
 
 ### Example Usage
 
@@ -1030,7 +1095,7 @@ Full list of props below
 
 1. Default classNames
 
-- **`relative inline-flex items-center justify-center whitespace-nowrap rounded-3xl transition-colors focus-visible:outline-none font-[`Arial`] disabled:pointer-events-none disabled:opacity-50 py-[10px] md:py-[14px] lg:py-[16px] border-2 border-[#092068] text-[#092068] text-lg bg-white hover:bg-[#D1DBFB] active:bg-[#9fc5f0] focus:bg-white disabled:bg-[#939194] disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive focus:border-black disabled:border-dha-mc-secondary-border disabled:border-2 py-0 md:py-0 lg:py-0 h-[48px] mt-1`**
+- **`relative inline-flex items-center justify-center whitespace-nowrap rounded-3xl transition-colors focus-visible:outline-hidden font-[`Arial`] disabled:pointer-events-none disabled:opacity-50 py-[10px] md:py-[14px] lg:py-[16px] border-2 border-[#092068] text-[#092068] text-lg bg-white hover:bg-[#D1DBFB] active:bg-[#9fc5f0] focus:bg-white disabled:bg-[#939194] disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive focus:border-black disabled:border-dha-mc-secondary-border disabled:border-2 py-0 md:py-0 lg:py-0 h-[48px] mt-1`**
 
 
 ### Example Usage
@@ -1055,6 +1120,276 @@ Basic Pill
 [Top of Page](#table-of-contents)
 
 
+<!-- P R O G R E S S   B A R  ------------------------------------------------------------------------ -->
+
+## Progress Bar
+
+The **`ProgressBar`** component is used to display the number of steps in a task, as well as styling to indicate completed and current steps.
+
+This component takes multiple required and optional props in addition to any other html attributes a normal html element would use, for example an **`aria-tag`**.
+
+Full list of props below
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| totalSteps  | **`number`**  | No  | **`undefined`**  | Total number of steps to be displayed in the progress bar.  |
+| currentStep  | **`number`**  | No  | **`undefined`**  | Current (active) step.  |
+| isStep  | **`boolean`**  | Yes  | **`true`**  | Controls whether steps inside the circle are displayed as numbers, or if false, displayed as checkmarks/dashes.  |
+| classNameArrowColor  | **`string`**  | Yes  | **`fill-[#305B25]`**  | Controls the color of the arrow that points from last completed step to current step.  |
+| classNameBorderColor  | **`string`**  | Yes  | **`border-[#305B25]`**  | Controls the color of the border around each completed step's circle.  |
+| classNameFillColor | **`string`**  | Yes  | **`bg-green-500`**  | Controls the fill color of each completed step's circle.  |
+| classNameGradient  | **`string`**  | Yes  | **`from-[#305B25] to-[#5AAB46]`**  | Controls the colors used in the gradient for the bars between each completed step.  |
+
+1. Base CSS Classes
+
+- circle for each step **(note use of classNameFillColor & classNameBorderColor)**:
+
+  **`flex items-center justify-center size-8 rounded-full border-[3px] border-gray-300 text-gray-500`**
+  **`${isActive && ${classNameFillColor} ${classNameBorderColor}}`**
+  **`${!isActive ? 'text-gray-400' : 'text-white'}`**
+
+- bar between steps **(twMerged w/ classNameGradient)**:
+
+  **`relative -z-10 -mx-[0.1em] flex-1 h-1 bg-gray-300 bg-linear-to-r from-50%`**
+
+
+### Example Usage
+
+Basic Progress Bar
+
+```jsx
+  <ProgressBar totalSteps={3} currentStep={1}/>
+```
+
+Progress Bar with CheckMarks, options, and completions
+
+```jsx
+  <ProgressBar totalSteps={3} currentStep={1}/>
+```
+
+
+### Dependencies
+
+**_none_**
+
+
+[Top of Page](#table-of-contents)
+
+
+
+<!-- R A D I O  G R O U P  ------------------------------------------------------------------------ -->
+
+## Radio Group
+
+The **`RadioGroup`** component allows a user to select one option from a list of radio buttons.
+
+This component takes multiple optional props in addition to any other html attributes a normal html element would use, for example an **`aria-tag`**.
+
+See **example usage** below for an example of retrieving the selected radio item.
+
+
+Full list of props below
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| title  | **`string`**  | Yes | **`undefined`**  | A title for the radio group component. Will be displayed above the radio group. | 
+| classNameContainer  | **`string`**  | Yes | **`undefined`**  | a group of alternate css classes that can be specified by the developer for use in the container (fieldset) element.  | 
+| classNameInput  | **`string`**  | Yes | see below  | a group of alternate css classes that can be specified by the developer for use in the input element of the component.  | 
+| classNameLabel  | **`string`**  | Yes | see below | a group of alternate css classes that can be specified by the developer for use in the label element of the component.  | 
+| options  | **`string`**  | No |  | Array of RadioOption objects that define the options available for selection. | 
+
+1. Base CSS Classes
+
+- label:
+  
+  **`flex items-center gap-1 cursor-pointer border border-black disabled ? opacity-50 cursor-not-allowed`**
+
+- input:
+
+  **`appearance-none w-4 h-4 rounded-[50%] border border-black bg-clip-content checked:bg-black checked:p-[2.5px] checked:border-black`**
+
+
+### Example Usage
+
+Basic RadioGroup
+
+```jsx
+  const radioOptions: RadioOption[] = [
+    {
+      id: 0,
+      label: 'Option One',
+      value:'some-value'
+    },
+    {
+      id: 1,
+      label: 'Option Two',
+      value: 'some-value2'
+    }
+  ]
+
+  // somewhere in code ... 
+  const radio = document.getElementById("1") as HTMLInputElement;
+  console.log(radio?.checked);
+
+  <RadioGroup title="Radio Title" options={radioOptions} />
+```
+
+RadioGroup w/ 5 options
+
+```jsx
+  
+  const fiveRadioOptions: RadioOption[] = [
+    {
+      id: 0,
+      label: 'Option One',
+      value: 'some-value'
+    },
+    {
+      id: 1,
+      label: 'Option Two',
+      value: 'some-value2'
+    },
+    {
+      id: 2,
+      label: 'Option Three',
+      value: 'some-value3'
+    },
+    {
+      id: 3,
+      label: 'Option Four',
+      value: 'some-value4'
+    },
+    {
+      id: 4,
+      label: 'Option Five',
+      value: 'some-value5'
+    },
+  ]
+
+  <RadioGroup title="Radio Title" options={fiveRadioOptions} /> 
+```
+
+Example checking radio items for checked state
+
+```tsx
+  const radio = document.getElementById("1") as HTMLInputElement;
+  console.log(radio?.checked);
+```
+
+### Dependencies
+
+**_none_**
+
+
+[Top of Page](#table-of-contents)
+
+
+<!-- S E A R C H  ------------------------------------------------------------------------ -->
+
+## Search
+
+The **`Search`** component is used to allow a user to search your sites content via a developer provided data file. The default behavior is to present results in real time as the user types, presenting matching strings organized by pages. The user can tab into the results list or click on a page title in the results list to be taken to a the relevant page or location.
+
+Additional behavior provides for the return of the search results to a dev provided function on 'Enter' or clicking the search icon. This is demonstrated inside the 2nd example in the drop down below. See documentation for additional options
+
+The **`Search`** component presents a responsive Input element styled with a search icon that changes appearance as appropriate based on screen size. On mobile and tablet sized screens an 'X' icon is present that clears the search bar content.
+
+This component is combined with a required input data file that the component uses to source its data. The data must match the SearchDataItem interface, shown below:
+
+Full list of props below
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| airaLabel | **`string`** | Yes | **`'Search'`** | The aria-label to assign to this Search component |
+| className | **`string`** | Yes | see (1) below | alternate css classes to add/change styling of the div that wraps the input element. |
+| iconLink | **`boolean`** | Yes | **`{false}`** | If set to true, a search icon is displayed that when clicked will expand into a wider Search component. |
+| searchableData | **`SearchDataItem[]`** | No | undefined | The data that the search component uses as its data source. This data must conform to the SearchDataItem interface. An example data file is shown above. |
+| setSearchResults | **`(DataSearchResults) => return void`** | Yes |undefined | If the use case entails sending the user to a separate results page, provide a function here that takes those search and performs the desired action. See (2) below for the DataSearchResults definition. |
+
+1. Default className
+  
+  **`grow appearance-none h-8 md:h-[32px] lg:h-14 py-2 lg:ps-[19px] rounded-tl rounded-bl rounded-br-none rounded-tr-none lg:border border-[#07192d] font-['Arial'] bg-white text-[#333234] text-base lg:text-lg hover:border-[#5992fa] focus:border-[#5992fa] outline-hidden`**
+
+
+### Example Usage
+
+Example Data File
+
+```ts
+  export interface SearchDataItem {
+      path: string;
+      title?: string;
+      content: string;
+  }
+
+
+  export const SearchableData: SearchDataItem[] = [
+  {
+      path: 'http://localhost:4200/mobile_apps/sdk-component-demo/',
+      title: 'SDK Component Demo Site',
+      content: `The SDK will act as a single source of truth for components. Developers, UX designers, and other stakeholders can view and interact with components without needing to set up the full application, improving feedback loops and collaboration.
+  If you have feedback on this demo site or any of the DHA SDK components, please email us at: b04eb4d0.chenega.onmicrosoft.com@amer.teams.ms
+  For installation instructions for the simple-ui package, please visit install instructions`
+  },
+  {
+      path: 'http://localhost:4200/mobile_apps/sdk-component-demo/buttons',
+      title: 'Button Component',
+      content: `Buttons allow users to interact and make choices within an app with a simple touch. Our Button comes with several variants: default, outlined, and text.
+  The button component as built takes in various props in addition to any other html attributes a normal html button would use, for example an aria-label tag.
+  A ref can also be created and assigned to the button component, and the component will point the reference to the html button.
+  The className prop takes a list of alternate CSS classes the developer would like applied to the component. These are applied using the tailwind twMerge function, and will safely overwrite any conflicting classes ensuring proper styling.
+  If you would like the button to display a toggled or selected status as the  Usage, Code, and Docs buttons above (changing background color when clicked), the selected and optionally the classNameSelected props can be used, explained below.
+  `,
+  },
+  {
+      path: 'http://localhost:4200/mobile_apps/sdk-component-demo/input',
+      title: 'Input Component',
+      content: `The input component as built takes seven optional props (className, classNameLabel, required, label, labelBaseColor, labelInputcolor, mask, and textShadow), in addition to any other html attributes a normal html form input would use, for example an aria tag.
+  The mask prop allows the developer to specify an input mask prop such as (###) ###-### that gaurantees formatting for input data. See usage examples in the drop-down, usage examples, as well as notes in the documentation. Note that the mask is not a placeholder, that is a separate mechanism built into html input elements.
+  A reference can also be created and passed to the input component, and the component will point the reference to the input
+  The input component as built takes seven optional props in addition to any other html attributes a normal html form input would use, for example an aria tag.
+  A reference can also be created and passed to the input component, and the component will point the reference to the input.
+  `,
+  },
+
+```
+
+
+Example Usage
+
+```jsx
+  <Search searchableData={SearchableData} />
+```
+
+The Search Results Interface
+
+```ts
+  export interface DataSearchResults {
+    input: string;
+    pages: {
+      title?: string;
+      path?: string;
+      results: {
+        characters: string;
+        index: number;
+      }[]
+    }[]
+  }
+```
+
+### Dependencies
+
+**_none_**
+
+
+[Top of Page](#table-of-contents)
+
 <!-- S E C T I O N H E A D E R  ------------------------------------------------------- -->
 
 
@@ -1151,7 +1486,7 @@ Full list of props below
 
 1. Base CSS Classes
 
-- **`outline-none outline-offset-0  flex justify-between items-center w-[292px] md:w-[343px] lg:w-[600px] h-14 border focus:outline-4 focus:mb-2 focus:outline-[#fa89f1] shadow-sm pl-4 pr-2 py-2 bg-white text-base md:text-lg font-medium text-gray-700 hover:bg-gray-50 border-[#b3b3b3] h-12 mt-1 font-["Arial"] `**
+- **`outline-hidden outline-offset-0  flex justify-between items-center w-[292px] md:w-[343px] lg:w-[600px] h-14 border focus:outline-4 focus:mb-2 focus:outline-[#fa89f1] shadow-sm pl-4 pr-2 py-2 bg-white text-base md:text-lg font-medium text-gray-700 hover:bg-gray-50 border-[#b3b3b3] h-12 mt-1 font-["Arial"] `**
 
 Separate Variant Styles
 
@@ -1692,6 +2027,7 @@ Tabs - a simple example
 
 [Top of Page](#table-of-contents)
 
+
 <!--  T O G G L E -------------------------------------------------------------------- -->
 
 ## Toggle
@@ -1752,4 +2088,116 @@ Separate Variant Styles
 **_none_**
 
 
+[Top of Page](#table-of-contents)
+
+<!-- T O O L T I P ------------------------------------------------------------------------------- -->
+
+## Tooltip
+
+The **`Tooltip`** is a component that wraps an area the developer wants to create a tooltip for, providing a pop up tooltip on hover for the user. The component consists of the root **`Tooltip`** component plus the **`TooltipContent`** sub-component.
+
+The examples below wrap a box that contains a Badge component with a Tooltip, and hovering over the box will trigger the **`TooltipContent`** to display.
+
+The Tooltip component also contains an optional **`delay`** prop that takes a number as ms, causing that length of time delay prior to displaying the tooltip. This allows users to incedentally mouse over something without unintentially displaying the tooltip.
+
+The **`TooltipContent`** can take various html content allowing for a range of options
+
+The **`Tooltip`** and **`TooltipContent`** components combine to provide developers with a means of providing a tooltip to a wrapped component. The above examples demonstrate a **`Tooltip`** component wrapping a **`div`** that contains a Badge. When the user hovers over the wrapped div the contents of a **`TooltipContent`** component is displayed.
+
+For accessibility purposes the **`TooltipContent`** component also takes an **`id`** attribute that can be paired with a [aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby) attribute in the target element for screen reader use.
+
+
+### Props for the Tooltip component
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| children | **`ReactNode`** | No |  | This contains the wrapped content that when hovered will cause the tooltip to display. |
+| className | **`string`** | Yes | **`relative inline-block`** | alternate css classes to add/change styling of the Tooltip (Not the TooltipContent) component. There is very little here wrt CSS classes, so will probably not be touched. |
+| delay | **`number`** | Yes | **`0`** | Sets a numeric value that delays the tooltip displaying by this number of milliseconds. Default value is 0, or no delay. |
+
+### Props for the TooltipContent component
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| children | **`ReactNode	`** | No | | This contains the content to display inside the tooltip. |
+| className | **`string`** | Yes | See (1) below | Alternate CSS styling to change (or alter) the display position and/or style of the tooltip. See below for current css class values. |
+| position | **`string`** | Yes | **`undefined`** | Determines the position of the tooltip when displayed relative to the wrapped component. Default positioning is on the bottom-left, or southwest location. Other options are 'w', 'nw', 'n', 'ne', 'e', 'se', 's', and 'c' (center) |
+
+
+1. Base CSS Classes
+
+**`absolute z-10 px-4 py-2 origin-center bg-slate-800 text-slate-100 border border-slate-500 text-sm rounded-sm shadow-md`**
+
+  - c - center
+
+    **`left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2`**
+
+  - n - north
+
+    **`left-0 -top-1 -translate-y-full`**
+
+  - nw - northwest
+
+    **`left-1/2 -translate-x-1/2 -top-1 -translate-y-full`**
+
+  - ne - northeast
+
+    **`right-0 -top-1 -translate-y-full`**
+
+  - e - east
+
+    **`-right-2 translate-x-full -translate-y-1/2 top-1/2`**
+
+  - se - south east
+
+    **`right-0 top-full mt-2`**
+
+  - s - south
+
+    **`left-1/2 -translate-x-1/2 top-full mt-2`**
+
+  - w - west
+
+    **`-translate-x-full -left-2 -translate-y-1/2 top-1/2`**
+
+  - c - center
+
+    **`left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2`**
+
+
+
+### Example Usage
+
+Tooltip - a simple example
+
+```jsx
+  <Tooltip className='w-full' delay={500}>
+    <div className='w-full flex justify-center
+      p-8 border-2 rounded-lg'>
+      <Badge className="lg:w-[200px]">Hover Box</Badge>
+    </div>
+    <TooltipContent position='c'>This is a Tooltip
+      with a centered position</TooltipContent>
+  </Tooltip>
+```
+
+Tooltip - bottom/right (or SE) display
+
+```jsx
+  <Tooltip className='w-full'>
+    <div className='w-full flex justify-center
+      p-8 border-2 rounded-lg'>
+      <Badge className="lg:w-[200px]">Hover Box</Badge>
+    </div>
+    <TooltipContent position='se'
+      >This is a Tooltip with a south east
+      position</TooltipContent>
+  </Tooltip>
+```
+
+### Dependencies
+
+**_none_**
+
+
 [Top of Page](#table-of-contents)