stargazer-ui 1.2.0 → 1.2.1

package/src/styles/forms/_FormSlider.scss

@@ -0,0 +1,116 @@
+@mixin slider-cap {
+    --cap-height: calc( 1 - 2*var(--padding-block-fraction));
+    box-sizing: border-box;
+    content: "";
+    position: absolute;
+    top: calc(100% * var(--padding-block-fraction));
+    height: calc( 100% * var(--cap-height));
+    width: calc(var(--slider-thumb-width) * 0.5);
+    // give background-color and the position of the pseudo element as a content block
+    @content 
+}
+
+.sg-form-slider {
+    --slider-height: #{$slider-height};
+
+    --slider-filled-color: #{$slider-filled-color};
+    --slider-filled-border-color: #{$slider-filled-border-color};
+
+    --slider-empty-color: #{$slider-empty-color};
+    --slider-empty-border-color: #{$slider-empty-border-color};
+
+    --padding-block-fraction: 1/3;
+
+    --slider-thumb-width: #{$slider-thumb-width};
+    --slider-thumb-height: #{$slider-thumb-height};
+    --slider-thumb-border-color: #{$input-border-color};
+    --filled: 40%;
+
+    &:focus-within {
+        //outline: 2px outset $danger;
+    }
+
+    display: grid;
+    grid-template-columns: var(--filled) auto calc(100% - var(--filled));
+    position: relative;
+    height: var(--slider-height);
+    //border: $input-border-width $input-border-style $input-border-color;
+    padding-block: calc(var(--slider-height)*var(--padding-block-fraction));
+    padding-inline: calc(var(--slider-thumb-width) * 0.5);
+
+    &:hover {
+        --slider-filled-color: #{$slider-filled-hover-color};
+        --slider-filled-border-color: #{$slider-filled-border-hover-color};
+        --slider-empty-color: #{$slider-empty-bover-color};
+        --slider-empty-border-color: #{$slider-empty-border-hover-color};
+    }
+
+    .sg-form-slider-filled {
+        display: block;
+        background-color: var(--slider-filled-color);
+        border: $slider-border-width outset var(--slider-filled-border-color);
+        border-left: none;
+        border-right: none;
+        height: 100%;
+        width: 100%;
+        &::before {
+            @include slider-cap {
+                background-color: var(--slider-filled-color);
+                border: $slider-border-width outset var(--slider-filled-border-color);
+                border-right: none;
+                left: 0;
+            }
+        }
+    }
+    .sg-form-slider-thumb {
+        cursor: grab;
+        &[data-grabbing="true"] {
+            cursor: grabbing;
+        }
+        position: relative;
+        display: block;
+        
+        height: 100%;
+        //width: var(--slider-thumb-width);
+        
+        &:focus-visible {
+            --slider-thumb-border-color: white;
+        }
+        &::before {
+            content: "";
+            position: absolute;
+            box-sizing: border-box;
+            left: calc(var(--slider-thumb-width) * -0.5);
+            top:  calc(-1 * var(--padding-block-fraction)*100% );
+            height: calc( (2*var(--padding-block-fraction) + 1) * 100%);
+            width: var(--slider-thumb-width);
+            background-color: $input-border-color;// transparent;// $danger;
+            //background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 166 166"><polygon fill="'+$farbe+'" points="83 26.8 65.7 61.8 27.1 67.4 55 94.7 48.5 133.2 83 115 117.5 133.2 111 94.7 138.9 67.4 100.3 61.8 83 26.8 83 26.8"/></svg>');
+            border: $input-border-width $input-border-style var(--slider-thumb-border-color);
+        }
+        &:focus-visible {
+            --focus-outline: 2px outset $danger;
+            outline: 0;
+            box-shadow: none;
+        }
+    }
+    .sg-form-slider-empty {
+        display: block;
+        background-color: var(--slider-empty-color);
+        border: $slider-border-width outset var(--slider-empty-border-color);
+        border-left: none;
+        border-right: none;
+        height: 100%;
+        width: 100%;
+
+        &::after {
+            @include slider-cap {
+                background-color: var(--slider-empty-color);
+                border: $slider-border-width outset var(--slider-empty-border-color);
+                border-left: none;
+                right: 0;
+                z-index: -1;
+            }
+        }
+    }
+}

package/src/styles/forms/_FormText.scss

@@ -0,0 +1,6 @@
+.sg-form-text {
+    font-size: 0.75em;
+    padding-inline: 0.5em;
+    opacity: 0.8;
+    margin-top: 0.25em;
+}

package/{utils/BaseTypes.d.ts → src/utils/BaseTypes.ts}

@@ -1,23 +1,30 @@
-import React from "react";
-type BaseAnchorType = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
-type BaseButtonType = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
-type BaseDialogType = React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>;
-type BaseDivType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-type BaseFormType = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
-type BaseHeadingType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
-type BaseInputType = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-type BaseHrType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>;
-type BaseLabelType = React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
-type BaseLItemType = React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
-type BaseMeterType = React.DetailedHTMLProps<React.MeterHTMLAttributes<HTMLMeterElement>, HTMLMeterElement>;
-type BaseNavType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-type BaseParagraphType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
-type BaseProgressBarType = React.DetailedHTMLProps<React.ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>;
-type BaseSelectType = React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
-type BaseSliderType = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-type BaseSmallType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-type BaseSpanType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
-type BaseTableType = React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>;
-type BaseUListType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
-type BaseElementType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-export { BaseAnchorType, BaseButtonType, BaseDialogType, BaseDivType, BaseElementType, BaseFormType, BaseHeadingType, BaseHrType, BaseInputType, BaseLItemType, BaseLabelType, BaseSliderType, BaseMeterType, BaseNavType, BaseParagraphType, BaseProgressBarType, BaseSelectType, BaseSmallType, BaseSpanType, BaseTableType, BaseUListType };
+import React from "react";
+
+type BaseAnchorType = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+type BaseButtonType = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+type BaseDialogType = React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>;
+type BaseDivType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+type BaseFormType = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
+type BaseHeadingType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
+type BaseInputType = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+type BaseHrType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>;
+type BaseLabelType = React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
+type BaseLItemType = React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+type BaseMeterType = React.DetailedHTMLProps<React.MeterHTMLAttributes<HTMLMeterElement>, HTMLMeterElement>;
+type BaseNavType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+type BaseParagraphType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
+type BaseProgressBarType = React.DetailedHTMLProps<React.ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>;
+type BaseSelectType = React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
+type BaseSliderType = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+type BaseSmallType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+type BaseSpanType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+type BaseTableType = React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>;
+type BaseUListType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
+
+type BaseElementType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+
+export { 
+    BaseAnchorType, BaseButtonType, BaseDialogType, BaseDivType, BaseElementType, BaseFormType, BaseHeadingType, BaseHrType,
+    BaseInputType, BaseLItemType, BaseLabelType, BaseSliderType, BaseMeterType, BaseNavType, BaseParagraphType, BaseProgressBarType, BaseSelectType, BaseSmallType, BaseSpanType,
+    BaseTableType, BaseUListType
+}

package/src/utils/ContrastingColor.ts

@@ -0,0 +1,25 @@
+export default function contrastingColor(color: string)
+{
+    return (luma(color) >= 165) ? '000' : 'fff';
+}
+
+function luma(color: string) // color can be a hx string or an array of RGB values 0-255
+{
+    let rgb = (typeof color === 'string') ? hexToRGBArray(color) : color;
+    return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]); // SMPTE C, Rec. 709 weightings
+}
+
+function hexToRGBArray(color: string)
+{
+    if(color.startsWith("#")) {
+        color = color.replace("#", "")
+    }
+    if (color.length === 3) 
+        color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2);
+    else if (color.length !== 6)
+        throw new Error('Invalid hex color: ' + color)
+    let rgb = [];
+    for (let i = 0; i <= 2; i++)
+        rgb[i] = parseInt(color.substr(i * 2, 2), 16)
+    return rgb;
+}

package/src/utils/FileImportExport.js

@@ -0,0 +1,50 @@
+const downloadFile = ({ data, fileName, fileType }) => {
+	// Create a blob with the data we want to download as a file
+	const blob = new Blob([data], { type: fileType })
+	// Create an anchor element and dispatch a click event on it
+	// to trigger a download
+	const a = document.createElement('a')
+	a.download = fileName
+	a.href = window.URL.createObjectURL(blob)
+	const clickEvt = new MouseEvent('click', {
+		view: window,
+		bubbles: true,
+		cancelable: true,
+	})
+	a.dispatchEvent(clickEvt)
+	a.remove()
+}
+
+export const exportToJson = (event, charName, currentState) => {
+	event.preventDefault()
+	let test = ""
+	if(charName === "") {
+		test = "character"
+	}
+	else {
+		let test1 = charName.split(" ")
+		test1.map(word => (
+			test += word
+		))
+	}
+	downloadFile({
+		data: JSON.stringify(currentState, null, "\t"),
+		fileName: test +'.json',
+		fileType: 'text/json',
+	})
+}
+
+export const readFileOnUpload = (uploadedFile, onUploadFunction) => {
+   const fileReader = new FileReader();
+   fileReader.onloadend = () => {
+	  try {
+		//dispatch(importState(JSON.parse(fileReader.result), dispatch))
+		onUploadFunction(fileReader.result)
+		} catch(e) {
+			console.log("**Not valid JSON file!**");
+		}
+	}
+	if( uploadedFile!== undefined) {
+	  fileReader.readAsText(uploadedFile);
+	}
+}

package/src/utils/MergeClassnames.ts

@@ -0,0 +1,5 @@
+const mergeClassnames = (...args: (string | undefined)[]) => {
+    return args.filter(arg => arg != undefined).join(" ")
+}
+
+export default mergeClassnames

package/src/utils/MergeRefs.ts

@@ -0,0 +1,12 @@
+export default function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null>
+  ): React.RefCallback<T> {
+    return (value) => {
+      refs.forEach((ref) => {
+        if (typeof ref === "function") {
+          ref(value)
+        } else if (ref != null) {
+          (ref as React.MutableRefObject<T | null>).current = value;
+        }
+      })
+    }
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig-build.json

@@ -0,0 +1,4 @@
+{
+    "extends": "./tsconfig.json",
+    "include": ["src"]
+  }

package/tsconfig.json

@@ -0,0 +1,79 @@
+{
+	"compilerOptions": {
+		"target": "esnext",
+		"module": "ESNext",
+    "lib": ["dom", "esnext"],
+		"jsx": "react",
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "node",
+		"allowSyntheticDefaultImports": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"declaration": true,
+		"declarationDir": "dist",
+		"emitDeclarationOnly": true
+	},
+	"exclude": ["node_modules", "**/*stories", "**/*types", "holding area", "legacy"]
+}
+
+
+/*
+{
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "dist",
+    "emitDeclarationOnly": true,
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "rootDir": "src"
+  },
+  "include": ["src"],
+  "exclude": [
+    "dist",
+    "node_modules",
+  ]
+
+}
+*/
+
+/*
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    //Bundler mode 
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    // Linting 
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
+*/

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/types/BaseTypes.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export type BaseAnchorType = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+export type BaseButtonType = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+export type BaseDialogType = React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>;
+export type BaseDivType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export type BaseFormType = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
+export type BaseHeadingType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
+export type BaseInputType = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+export type BaseHrType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>;
+export type BaseLabelType = React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
+export type BaseLItemType = React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+export type BaseNavType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+export type BaseParagraphType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
+export type BaseSelectType = React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
+export type BaseSmallType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+export type BaseSpanType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+export type BaseTableType = React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>;
+export type BaseUListType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
+export type BaseElementType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

package/{Button → types/components/Button}/Button.types.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
+import { BaseButtonType } from "../../BaseTypes";
 export type ButtonType = {
     children: ReactNode;
     variant?: string;
     className?: string;
-} & React.ComponentPropsWithRef<"button">;
+} & BaseButtonType;

package/types/components/Button/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./Button";

package/{Card → types/components/Card}/Card.types.d.ts

@@ -1,10 +1,8 @@
 import { ReactNode } from "react";
-import { BaseDivType, BaseHeadingType, BaseSpanType, BaseParagraphType } from "../utils/BaseTypes";
+import { BaseDivType, BaseHeadingType, BaseSpanType, BaseParagraphType } from "../../BaseTypes";
 export type CardType = {
     children: ReactNode;
     className?: string;
-    variant?: string;
-    inverted?: boolean;
 } & BaseDivType;
 export type CardHeaderPossible = BaseDivType | BaseSpanType | BaseHeadingType;
 export type CardHeaderType = {

package/types/components/Card/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./Card";

package/{CloseButton → types/components/CloseButton}/CloseButton.types.d.ts

@@ -1,4 +1,4 @@
-import { BaseButtonType } from "../utils/BaseTypes";
+import { BaseButtonType } from "../../BaseTypes";
 export type CloseButtonType = {
     className?: string;
     variant?: boolean;

package/types/components/CloseButton/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./CloseButton";

package/{Dropdown → types/components/Dropdown}/Dropdown.types.d.ts

@@ -1,10 +1,19 @@
 import { ReactNode } from "react";
-import { BaseDivType, BaseAnchorType, BaseButtonType, BaseUListType, BaseHrType, BaseElementType } from "../utils/BaseTypes";
+import { BaseDivType, BaseAnchorType, BaseButtonType, BaseUListType, BaseHrType, BaseElementType } from "../../BaseTypes";
 export type DropdownContextType = {
     align: string;
     drop: string;
     showInternal: boolean;
     handleToggle: Function;
+    placement: string;
+    directionClasses?: {
+        down?: string;
+        'down-centered'?: string;
+        up?: string;
+        'up-centered'?: string;
+        end?: string;
+        start?: string;
+    };
     controlId: string;
     activeDescendant: {
         case: string;
@@ -12,12 +21,10 @@ export type DropdownContextType = {
     setActiveDescendant: React.Dispatch<React.SetStateAction<{
         case: string;
     }>>;
-    navDropdown: boolean;
 };
 export type DropdownType = {
     children: ReactNode;
     className?: string;
-    navDropdown?: boolean;
     onSelect?: Function;
     onToggle?: Function;
     controlId: string;

package/types/components/Dropdown/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./Dropdown";

package/{FloatingLabel → types/components/FloatingLabel}/FloatingLabel.types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { BaseLabelType } from "../utils/BaseTypes";
+import { BaseLabelType } from "../../BaseTypes";
 export type FloatingLabelType = {
     children: ReactNode;
     className?: string;

package/types/components/FloatingLabel/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./FloatingLabel";

package/types/components/Form/Form.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { FormCheckType, FormContextType, FormControlType, FormGroupType, FormLabelType, FormSelectType, FormTextType, FormType } from "./Form.types";
+export declare const FormContext: React.Context<FormContextType | null>;
+export declare const FormContextProvider: ({ children, value }: {
+    children: React.ReactNode;
+    value: FormContextType;
+}) => React.JSX.Element;
+export declare const useFormContext: () => FormContextType;
+declare const _default: React.ForwardRefExoticComponent<Omit<FormType, "ref"> & React.RefAttributes<HTMLFormElement>> & {
+    Control: React.ForwardRefExoticComponent<Omit<FormControlType, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    Select: React.ForwardRefExoticComponent<Omit<FormSelectType, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+    Group: React.ForwardRefExoticComponent<Omit<FormGroupType, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<FormLabelType, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+    Check: React.ForwardRefExoticComponent<Omit<FormCheckType, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    Text: React.ForwardRefExoticComponent<Omit<FormTextType, "ref"> & React.RefAttributes<HTMLElement>>;
+};
+export default _default;

package/types/components/Form/Form.types.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from "react";
+import { BaseDivType, BaseFormType, BaseInputType, BaseLabelType, BaseSelectType, BaseSmallType } from "../../BaseTypes";
+export type FormContextType = {
+    controlId: string;
+};
+export type FormType = {
+    children: ReactNode;
+} & BaseFormType;
+export type FormControlType = {
+    as?: React.ElementType;
+    className?: string;
+    plaintext?: boolean;
+    id?: string;
+    type?: string;
+    autoFocus?: boolean;
+} & BaseInputType;
+export type FormSelectType = {
+    children: ReactNode;
+    className?: string;
+    id?: string;
+} & BaseSelectType;
+export type FormGroupType = {
+    children: ReactNode;
+    className?: string;
+    controlId: string;
+} & BaseDivType;
+export type FormLabelType = {
+    children: ReactNode;
+    className?: string;
+    htmlFor?: string;
+} & BaseLabelType;
+export type FormCheckType = {
+    classNameContainer?: string;
+    containerRef?: React.LegacyRef<HTMLDivElement>;
+    containerId?: string;
+    style?: React.CSSProperties;
+    classNameLabel?: string;
+    labelRef?: React.LegacyRef<HTMLLabelElement>;
+    label?: string;
+    labelId?: string;
+    className?: string;
+    type?: string;
+    controlId?: string;
+    reverse?: boolean;
+    checkStyle?: React.CSSProperties;
+} & BaseInputType;
+export type FormTextType = {
+    children: ReactNode;
+    className?: string;
+} & BaseSmallType;

package/types/components/Form/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./Form";

package/types/components/InputGroup/InputGroup.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { InputGroupText, InputGroupType } from "./InputGroup.types";
+declare const _default: React.ForwardRefExoticComponent<Omit<InputGroupType, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    Text: React.ForwardRefExoticComponent<InputGroupText & React.RefAttributes<HTMLSpanElement>>;
+};
+export default _default;

package/types/components/InputGroup/InputGroup.types.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { BaseDivType } from "../../BaseTypes";
+export type InputGroupType = {
+    children: ReactNode;
+    className?: string;
+} & BaseDivType;
+export type InputGroupText = {
+    children: ReactNode;
+    className?: string;
+};

package/types/components/InputGroup/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./InputGroup";

package/{Modal → types/components/Modal}/Modal.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { ModalBodyType, ModalType } from "./Modal.types";
-declare const _default: React.ForwardRefExoticComponent<Omit<ModalType, "ref"> & React.RefAttributes<HTMLDialogElement>> & {
+declare const _default: (({ children, centered, size, show, backdrop, onHide, className, id, ...restProps }: ModalType) => React.ReactPortal) & {
     Header: React.ForwardRefExoticComponent<(Omit<{
         children: React.ReactNode;
         as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;

package/{Modal → types/components/Modal}/Modal.types.d.ts

@@ -1,16 +1,15 @@
 import { ReactNode } from "react";
-import { BaseDialogType, BaseDivType, BaseHeadingType, BaseSpanType } from "../utils/BaseTypes";
+import { BaseDialogType, BaseDivType, BaseHeadingType, BaseSpanType } from "../../BaseTypes";
 export type ModalContextType = Function | null;
 export type ModalType = {
     children: ReactNode;
     className?: string;
     id?: string;
-    fill?: boolean;
+    centered?: boolean;
     size?: string;
     show: boolean;
     backdrop?: string;
     onHide: Function;
-    stretch?: boolean;
 } & BaseDialogType;
 export type ModalHeaderType = {
     children: ReactNode;

package/types/components/Modal/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./Modal";

package/{Nav → types/components/Nav}/Nav.types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { BaseAnchorType, BaseElementType, BaseLItemType, BaseUListType } from "../utils/BaseTypes";
+import { BaseAnchorType, BaseElementType, BaseLItemType, BaseUListType } from "../../BaseTypes";
 export type NavType = {
     children: ReactNode;
     className?: string;

package/types/components/Nav/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./Nav";

package/{NavBar → types/components/NavBar}/Navbar.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-import { NavbarTextType, NavbarType, NavbarContextType } from "./Navbar.types";
+import { NavbarTextType, NavbarType } from "./Navbar.types";
+export type NavbarContextType = string | null;
 export declare const NavbarContext: React.Context<NavbarContextType>;
 export declare const useNavbarContext: () => NavbarContextType;
 declare const _default: React.ForwardRefExoticComponent<Omit<NavbarType, "ref"> & React.RefAttributes<HTMLElement>> & {

package/{NavBar → types/components/NavBar}/Navbar.types.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
-import { BaseAnchorType, BaseElementType, BaseNavType } from "../utils/BaseTypes";
-export type NavbarContextType = string | null;
+import { BaseAnchorType, BaseElementType, BaseNavType } from "../../BaseTypes";
 export type NavbarType = {
     children: ReactNode;
     className?: string;