stargazer-ui 1.5.11 → 1.5.13

package/src/styles/forms/_FormSelect.scss

@@ -0,0 +1,196 @@
+
+.sg-form-select-tag {
+    --input-text-color: #{$input-text-color};
+    --input-background-color: #{$input-background-color};
+    --input-border-color: #{$input-border-color};
+    --input-border-color-focus: #{$input-border-color-focus};
+    --input-border-color-invalid: #{$input-border-color-invalid};
+    --input-disabled-color: #{$input-disabled-color};
+
+    position: relative;
+    display: block;
+    width: 100%;
+    padding-block: $input-padding-x;
+    padding-inline: $input-padding-y calc(3 * $input-padding-y);
+    color: var(--input-text-color);
+
+    background-color: var(--input-background-color);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right $input-padding-x center;
+    background-size: 1em 0.75em;
+
+    border: $input-border-width $input-border-style var(--input-border-color);
+    border-radius: $input-border-radius;
+
+    appearance: none;
+
+    &:focus-visible, &:focus {
+        //@include sg-focus-visible()
+        border-color: var(--input-border-color-focus);
+        outline: 0;
+        box-shadow: 0;
+    }
+    &[multiple], &[size]:not([size="1"]) {
+        padding-right: $input-padding-x;
+        background-image: none;
+    }
+    &:disabled, .disabled {
+        --input-background-color: rgba(255, 255, 255, 0.04);
+        --input-placeholder-color: color-mix(in oklab, #{$input-placeholder-color}, white 40%);
+        --input-text-color: color-mix(in oklab, #{$input-placeholder-color}, white 40%);
+        cursor:not-allowed;
+        opacity: 1;
+    }
+    &.invalid, &:user-invalid, &[aria-invalid="true"] {
+        box-shadow: 0 0 4px 2px var(--input-border-color-invalid);
+        z-index: 2;
+    }
+}
+
+
+.sg-form-select {
+    --input-text-color: #{$input-text-color};
+    --input-background-color: #{$input-background-color};
+    --input-border-color: #{$input-border-color};
+    --input-border-color-focus: #{$input-border-color-focus};
+    --input-border-color-invalid: #{$input-border-color-invalid};
+    --input-disabled-color: #{$input-disabled-color};
+
+    position: relative;
+    display: block;
+    
+    height: calc(1.4rem + $input-padding-x + $input-padding-x);
+    min-width: 12rem;
+    max-width: 15rem;
+    
+    padding-block: $input-padding-x;
+    padding-inline: $input-padding-y calc(3 * $input-padding-y);
+    color: var(--input-text-color);
+
+    background-color: var(--input-background-color);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right $input-padding-x center;
+    background-size: 1em 0.75em;
+    border: $input-border-width outset var(--input-border-color);
+    border-radius: $input-border-radius;
+
+    font-size: 0.85rem;
+    line-height: 1.4;
+
+    span {
+        pointer-events:visible;
+        display: inline-block;
+        width: 100%;
+        max-width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    
+    &:focus-within {
+        //@include sg-focus-visible()
+        border-color: var(--input-border-color-focus);
+        outline: 0;
+        box-shadow: 0;
+    }
+    .disabled {
+        --input-background-color: rgba(255, 255, 255, 0.04);
+        --input-placeholder-color: color-mix(in oklab, #{$input-placeholder-color}, white 40%);
+        --input-text-color: color-mix(in oklab, #{$input-placeholder-color}, white 40%);
+    }
+}
+
+.sg-select-control {
+    text-align: start;
+
+    cursor: default;
+
+    &:disabled {
+        --input-background-color: rgba(255, 255, 255, 0.04);
+        --input-placeholder-color: color-mix(in oklab, #{$input-placeholder-color}, white 40%);
+        --input-text-color: color-mix(in oklab, #{$input-placeholder-color}, white 40%);
+        cursor: not-allowed;
+        opacity: 1;
+    }
+    &:user-invalid, &.invalid, &[aria-invalid="true"] {
+        //outline: 2px solid $input-border-color-invalid;
+        box-shadow: 0 0 4px 2px var(--input-border-color-invalid);
+    }
+}
+
+.sg-select-input {
+    background-color: inherit;
+    border: none;
+    height: 100%;
+    max-width: 80%;
+    color: inherit;
+
+    &[multiple], &[size]:not([size="1"]) {
+        padding-right: $input-padding-x;
+        background-image: none;
+    }
+    &:disabled {
+        color: inherit;
+        background-color: inherit;
+        opacity: 1;
+    }
+    &:focus, &:focus-within, &:focus-visible {
+        border-color: transparent;
+        outline: none;
+    }
+    &::placeholder {
+        color: $input-placeholder-color;
+        opacity: 1;
+      }
+    
+}
+
+.sg-select-list {
+    --bg-color: #{$input-background-color};
+    --txt-color: black;
+    --z-index: #{$zindex-dropdown};
+    overflow-y: auto;
+
+    background-color: var(--bg-color);
+    color: inherit;
+
+    position: absolute;
+    top: calc(100% + 3px);
+    left: 0;
+    width: 100%;
+    padding: 0;
+
+    border-radius: 0;// 0.375rem;
+    //border: 1px solid color-mix(in srgb, currentColor, white);
+    border: 2px outset color-mix(in oklab, $sg-body-bg, white 60%);
+
+    list-style-type: none;
+
+    z-index: var(--z-index);
+}
+
+.sg-select-list-item {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.85rem;    
+    user-select: none;
+
+    z-index: inherit;
+
+    &.focus {
+        background-color: color-mix(in oklab, var(--input-background-color), white 20%);
+        &:active {
+            background-color: color-mix(in oklab, var(--input-background-color), white 25%);
+        }
+    }
+
+    &:first-child {
+        border-top-right-radius: inherit;
+        border-top-left-radius: inherit;
+    }
+    &:last-child {
+        border-bottom-left-radius: inherit;
+        border-bottom-right-radius: inherit;
+    }
+}

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,25 +1,32 @@
-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 BaseSVGType = React.SVGProps<SVGSVGElement>;
-type BaseTableType = React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>;
-type BaseUListType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
-type BaseElementType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-type BaseElementType2 = React.DetailedHTMLProps<React.HTMLAttributes<Element>, Element>;
-export { BaseAnchorType, BaseButtonType, BaseDialogType, BaseDivType, BaseElementType, BaseElementType2, BaseFormType, BaseHeadingType, BaseHrType, BaseInputType, BaseLItemType, BaseLabelType, BaseSliderType, BaseMeterType, BaseNavType, BaseParagraphType, BaseProgressBarType, BaseSelectType, BaseSmallType, BaseSpanType, BaseSVGType, 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 BaseSVGType = React.SVGProps<SVGSVGElement>
+type BaseTableType = React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>;
+type BaseUListType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
+
+type BaseElementType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+type BaseElementType2 = React.DetailedHTMLProps<React.HTMLAttributes<Element>, Element>;
+
+export { 
+    BaseAnchorType, BaseButtonType, BaseDialogType, BaseDivType, BaseElementType, BaseElementType2, BaseFormType, BaseHeadingType, BaseHrType,
+    BaseInputType, BaseLItemType, BaseLabelType, BaseSliderType, BaseMeterType, BaseNavType, BaseParagraphType, BaseProgressBarType, BaseSelectType, BaseSmallType, BaseSpanType,
+    BaseSVGType, 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/CreateSyntheticEvent.ts

@@ -0,0 +1,30 @@
+const createSyntheticEvent = <T extends Element, E extends Event>(event: E): React.SyntheticEvent<T, E> => {
+    let isDefaultPrevented = false;
+    let isPropagationStopped = false;
+    const preventDefault = () => {
+      isDefaultPrevented = true;
+      event.preventDefault();
+    }
+    const stopPropagation = () => {
+      isPropagationStopped = true;
+      event.stopPropagation();
+    }
+    return {
+      nativeEvent: event,
+      currentTarget: event.currentTarget as EventTarget & T,
+      target: event.target as EventTarget & T,
+      bubbles: event.bubbles,
+      cancelable: event.cancelable,
+      defaultPrevented: event.defaultPrevented,
+      eventPhase: event.eventPhase,
+      isTrusted: event.isTrusted,
+      preventDefault,
+      isDefaultPrevented: () => isDefaultPrevented,
+      stopPropagation,
+      isPropagationStopped: () => isPropagationStopped,
+      persist: () => {},
+      timeStamp: event.timeStamp,
+      type: event.type,
+    };
+} 
+export default createSyntheticEvent

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/IsInputKey.ts

@@ -0,0 +1,18 @@
+export type InputKeyType = {id:string, alt?:boolean, shift?: boolean, ctrl?: boolean}
+
+export const isValidInputKey = (event: React.KeyboardEvent | KeyboardEvent, inputKeys: InputKeyType[]) => {
+    const isValidKey = inputKeys.find(inputKey => inputKey.id === event.key)
+    if(!isValidKey) return
+
+    let isCtrl = true, isAlt = true, isShift = true
+    if (event.altKey && !isValidKey.alt) {
+        isAlt = false
+    }
+    if (event.ctrlKey && !isValidKey.ctrl) {
+        isCtrl = false
+    }
+    if (event.shiftKey && !isValidKey.shift) {
+        isShift = false
+    }
+    return isValidKey && isAlt && isCtrl && isShift
+}

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-jsx",
+		"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";