@julseb-lib/react 0.1.5 → 0.1.7

package/dist/lib/index.css

@@ -0,0 +1,443 @@
+@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
+@import "tailwindcss";
+/* @custom-variant dark (&:where(.dark, .dark *)); */
+
+@theme {
+	--color-primary-50: var(--color-blue-50);
+	--color-primary-100: var(--color-blue-100);
+	--color-primary-200: var(--color-blue-200);
+	--color-primary-300: var(--color-blue-300);
+	--color-primary-400: var(--color-blue-400);
+	--color-primary-500: var(--color-blue-500);
+	--color-primary-600: var(--color-blue-600);
+	--color-primary-700: var(--color-blue-700);
+	--color-primary-800: var(--color-blue-800);
+	--color-primary-900: var(--color-blue-900);
+	--color-primary-950: var(--color-blue-950);
+	--color-secondary-50: var(--color-cyan-50);
+	--color-secondary-100: var(--color-cyan-100);
+	--color-secondary-200: var(--color-cyan-200);
+	--color-secondary-300: var(--color-cyan-300);
+	--color-secondary-400: var(--color-cyan-400);
+	--color-secondary-500: var(--color-cyan-500);
+	--color-secondary-600: var(--color-cyan-600);
+	--color-secondary-700: var(--color-cyan-700);
+	--color-secondary-800: var(--color-cyan-800);
+	--color-secondary-900: var(--color-cyan-900);
+	--color-secondary-950: var(--color-cyan-950);
+	--color-success-50: var(--color-green-50);
+	--color-success-100: var(--color-green-100);
+	--color-success-200: var(--color-green-200);
+	--color-success-300: var(--color-green-300);
+	--color-success-400: var(--color-green-400);
+	--color-success-500: var(--color-green-500);
+	--color-success-600: var(--color-green-600);
+	--color-success-700: var(--color-green-700);
+	--color-success-800: var(--color-green-800);
+	--color-success-900: var(--color-green-900);
+	--color-success-950: var(--color-green-950);
+	--color-danger-50: var(--color-red-50);
+	--color-danger-100: var(--color-red-100);
+	--color-danger-200: var(--color-red-200);
+	--color-danger-300: var(--color-red-300);
+	--color-danger-400: var(--color-red-400);
+	--color-danger-500: var(--color-red-500);
+	--color-danger-600: var(--color-red-600);
+	--color-danger-700: var(--color-red-700);
+	--color-danger-800: var(--color-red-800);
+	--color-danger-900: var(--color-red-900);
+	--color-danger-950: var(--color-red-950);
+	--color-warning-50: var(--color-amber-50);
+	--color-warning-100: var(--color-amber-100);
+	--color-warning-200: var(--color-amber-200);
+	--color-warning-300: var(--color-amber-300);
+	--color-warning-400: var(--color-amber-400);
+	--color-warning-500: var(--color-amber-500);
+	--color-warning-600: var(--color-amber-600);
+	--color-warning-700: var(--color-amber-700);
+	--color-warning-800: var(--color-amber-800);
+	--color-warning-900: var(--color-amber-900);
+	--color-warning-950: var(--color-amber-950);
+	--color-gray-50: var(--color-neutral-50);
+	--color-gray-100: var(--color-neutral-100);
+	--color-gray-200: var(--color-neutral-200);
+	--color-gray-300: var(--color-neutral-300);
+	--color-gray-400: var(--color-neutral-400);
+	--color-gray-500: var(--color-neutral-500);
+	--color-gray-600: var(--color-neutral-600);
+	--color-gray-700: var(--color-neutral-700);
+	--color-gray-800: var(--color-neutral-800);
+	--color-gray-900: var(--color-neutral-900);
+	--color-gray-950: var(--color-neutral-950);
+
+	--color-background: var(--color-white);
+	--color-font: var(--color-black);
+
+	--font-lato: "Lato", sans-serif;
+	--font-family-body: var(--font-lato);
+	--font-family-code: monospace;
+
+	--font-weight-thin: 100;
+	--font-weight-light: 300;
+	--font-weight-normal: 400;
+	--font-weight-bold: 700;
+	--font-weight-black: 900;
+
+	--color-overlay-black-50: rgba(0, 0, 0, 0.5);
+	--color-overlay-black-80: rgba(0, 0, 0, 0.8);
+	--color-overlay-white-50: rgba(255, 255, 255, 0.5);
+	--color-overlay-white-80: rgba(255, 255, 255, 0.8);
+	--color-overlay-gradient-black: linear-gradient(
+		180deg,
+		rgba(255, 255, 255, 0) 0%,
+		rgba(0, 0, 0, 0.56) 100%
+	);
+	--color-overlay-gradient-white: linear-gradient(
+		180deg,
+		rgba(0, 0, 0, 0) 0%,
+		rgba(255, 255, 255, 0.35) 100%
+	);
+
+	--rounded-full: calc(infinity * 1px);
+
+	--main-default: 600px;
+	--main-large: 800px;
+	--main-form: 400px;
+	--main-full: 100%;
+	--aside-default: 250px;
+	--aside-small: 200px;
+
+	--shadow-2xl:
+		0px 10px 14px 8px rgba(0, 0, 0, 0.2), 0px 4px 4px rgba(0, 0, 0, 0.3);
+	--shadow-xl:
+		0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
+	--shadow-lg:
+		0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
+	--shadow-md:
+		0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
+	--shadow-sm:
+		0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+	--shadow-xs:
+		0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+	--shadow-2xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+	--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.06);
+	--shadow-none: none;
+
+	--spacer-2xs: 4px;
+	--spacer-xs: 8px;
+	--spacer-sm: 12px;
+	--spacer-md: 16px;
+	--spacer-lg: 24px;
+	--spacer-xl: 32px;
+	--spacer-2xl: 48px;
+
+	--animate-cubic-bezier: cubic-bezier(0.5, 0, 0.5, 1);
+
+	--font-size-display-h1: 5rem;
+	--font-size-display-h2: 4rem;
+	--font-size-display-h3: 3.5rem;
+	--font-size-display-h4: 3rem;
+	--font-size-display-h5: 2.5rem;
+	--font-size-h1: 2.5rem;
+	--font-size-h2: 2rem;
+	--font-size-h3: 1.8rem;
+	--font-size-h4: 1.5rem;
+	--font-size-h5: 1.3rem;
+	--font-size-h6: 1.1rem;
+	--font-size-body: 1rem;
+	--font-size-small: 0.875rem;
+}
+
+/*====================== Common styles ======================*/
+
+html,
+body {
+	font-family: var(--font-family-body);
+	width: 100%;
+	min-height: 100vh;
+	background-color: var(--color-background);
+	color: var(--color-font);
+	max-width: 100dvw;
+
+	&.dark {
+		--color-background: var(--color-black);
+		--color-font: var(--color-white);
+	}
+}
+
+.smooth {
+	scroll-behavior: smooth;
+}
+
+a,
+button {
+	cursor: pointer;
+	transition: all 200ms ease;
+
+	&:disabled {
+		cursor: not-allowed;
+	}
+}
+
+@layer base {
+	img,
+	video,
+	iframe {
+		max-width: 100%;
+	}
+
+	.no-scrollbar::-webkit-scrollbar {
+		display: none;
+	}
+
+	.no-scrollbar {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
+
+	/*====================== Fonts ======================*/
+
+	.lato-thin {
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight-thin);
+		font-style: normal;
+	}
+
+	.lato-light {
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight-light);
+		font-style: normal;
+	}
+
+	.lato-regular {
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight-normal);
+		font-style: normal;
+	}
+
+	.lato-bold {
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight-bold);
+		font-style: normal;
+	}
+
+	.lato-black {
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight-black);
+		font-style: normal;
+	}
+
+	.lato-thin-italic {
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight-thin);
+		font-style: italic;
+	}
+
+	.lato-light-italic {
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight-light);
+		font-style: italic;
+	}
+
+	.lato-regular-italic {
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight-normal);
+		font-style: italic;
+	}
+
+	.lato-bold-italic {
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight-bold);
+		font-style: italic;
+	}
+
+	.lato-black-italic {
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight-black);
+		font-style: italic;
+	}
+
+	/*====================== Colors ======================*/
+
+	.text-primary {
+		color: var(--color-primary-500);
+	}
+
+	.bg-primary {
+		background-color: var(--color-primary-500);
+	}
+
+	.text-secondary {
+		color: var(--color-secondary-500);
+	}
+
+	.bg-secondary {
+		background-color: var(--color-secondary-500);
+	}
+
+	.text-success {
+		color: var(--color-success-500);
+	}
+
+	.bg-success {
+		background-color: var(--color-success-500);
+	}
+
+	.text-danger {
+		color: var(--color-danger-500);
+	}
+
+	.bg-danger {
+		background-color: var(--color-danger-500);
+	}
+
+	.text-warning {
+		color: var(--color-warning-500);
+	}
+
+	.bg-warning {
+		background-color: var(--color-warning-500);
+	}
+
+	.text-gray {
+		color: var(--color-gray-500);
+	}
+
+	.bg-gray {
+		background-color: var(--color-gray-500);
+	}
+
+	.text-white {
+		color: var(--color-white);
+	}
+
+	.bg-white {
+		background-color: var(--color-white);
+	}
+
+	.overlay-black-50 {
+		background: var(--color-overlay-black-50);
+	}
+
+	.overlay-black-80 {
+		background: var(--color-overlay-black-80);
+	}
+
+	.overlay-white-50 {
+		background: var(--color-overlay-white-50);
+	}
+
+	.overlay-white-80 {
+		background: var(--color-overlay-white-80);
+	}
+
+	.overlay-gradient-black {
+		background: var(--color-overlay-gradient-black);
+	}
+
+	.overlay-gradient-white {
+		background: var(--color-overlay-gradient-white);
+	}
+
+	/*====================== Keyframes & animations ======================*/
+
+	@keyframes shine {
+		from {
+			left: -150px;
+		}
+
+		to {
+			left: 106%;
+		}
+	}
+
+	.animate-shine {
+		position: relative;
+		overflow: hidden;
+
+		&:before {
+			content: "";
+			position: absolute;
+			top: -200px;
+			bottom: -200px;
+			background-color: var(--color-white);
+			opacity: 0.7;
+			filter: blur(20px);
+			width: 100px;
+			transform: skew(-15deg);
+			animation: shine 2000ms ease-in-out infinite;
+		}
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.animate-spin {
+		animation: spin 1200ms linear infinite;
+	}
+
+	.animate-bezier {
+		animation: spin 1200ms var(--animate-cubic-bezier) infinite;
+		animation-delay: var(--spinner-delay);
+	}
+
+	@keyframes loader-pulse {
+		0%,
+		100% {
+			transform: scale(0);
+		}
+
+		50% {
+			transform: scale(1);
+		}
+	}
+
+	.dot {
+		animation: loader-pulse 1200ms linear infinite;
+		animation-delay: var(--dot-delay);
+	}
+
+	input::-webkit-slider-thumb {
+		box-shadow: var(--shadow-lg);
+	}
+
+	@keyframes toast-timer-animation {
+		0% {
+			width: 100%;
+		}
+
+		100% {
+			width: 0;
+		}
+	}
+
+	.toast-timer {
+		animation: toast-timer-animation var(--toast-timer-duration) linear
+			forwards;
+	}
+
+	.Toastify__progress-bar--bg {
+		background-color: transparent !important;
+	}
+
+	@keyframes progress-bar {
+		0% {
+			width: 0;
+		}
+
+		100% {
+			width: var(--meter-value);
+		}
+	}
+
+	.progress-bar-animated:before {
+		animation: progress-bar calc(var(--progress-speed) * 50ms) ease forwards;
+	}
+}

package/dist/react.css

@@ -0,0 +1 @@
+:root{--open-position: calc( var(--button-position) * 48px + var(--spacer-xs) * var(--button-position) )}@keyframes _anim-left-close_12v5r_1{0%{right:0}to{right:var(--open-position)}}@keyframes _anim-left_12v5r_1{0%{right:var(--open-position)}to{right:0}}@keyframes _anim-right-close_12v5r_1{0%{left:0}to{left:var(--open-position)}}@keyframes _anim-right_12v5r_1{0%{left:var(--open-position)}to{left:0}}._icon-menu-item_12v5r_48{position:absolute;--open-position: calc( var(--button-position) * 48px + var(--spacer-xs) * var(--button-position) )}._right_12v5r_56{top:0;left:0}._right_12v5r_56._open_12v5r_60{left:var(--open-position)}._left_12v5r_65{top:0;right:0;animation:_anim-left_12v5r_1 .2s ease forwards}._left_12v5r_65._open_12v5r_60{animation:_anim-left-close_12v5r_1 .2s ease forwards}._icon-menu_12v5r_48 ._icon-menu-item_12v5r_48{position:absolute;left:0;--open-position: calc( var(--button-position) * 48px + var(--spacer-xs) * var(--button-position) )}._icon-menu_12v5r_48 ._icon-menu-item_12v5r_48._dir-right_12v5r_93{animation:_anim-right_12v5r_1 .2s ease forwards}._icon-menu_12v5r_48 ._icon-menu-item_12v5r_48._dir-right_12v5r_93._open_12v5r_60{animation:_anim-right-close_12v5r_1 .2s ease forwards}._icon-menu_12v5r_48 ._icon-menu-item_12v5r_48._dir-left_12v5r_113{animation:_anim-left_12v5r_1 .2s ease forwards}._icon-menu_12v5r_48 ._icon-menu-item_12v5r_48._dir-left_12v5r_113._open_12v5r_60{animation:_anim-left-close_12v5r_1 .2s ease forwards}

package/package.json

@@ -1,8 +1,9 @@
 {
 	"name": "@julseb-lib/react",
 	"private": false,
-	"version": "0.1.5",
+	"version": "0.1.7",
 	"type": "module",
+	"license": "MIT",
 	"scripts": {
 		"dev": "vite --open",
 		"lint": "./node_modules/.bin/eslint",
@@ -78,5 +79,43 @@
 		"vite-plugin-checker": "^0.9.3",
 		"vite-plugin-dts": "^4.5.4",
 		"vite-plugin-eslint": "^1.8.1"
+	},
+	"files": [
+		"dist"
+	],
+	"main": "./dist/julseb-lib-react.umd.js",
+	"module": "./dist/julseb-lib-react.es.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.es.js",
+			"types": "./dist/lib/index.ts",
+			"require": "./dist/index.umd.js",
+			"default": "./dist/index.cjs.js"
+		},
+		"./index.css": {
+			"require": "./dist/index.css",
+			"import": "./dist/index.css",
+			"default": "./dist/index.css"
+		},
+		"./types": {
+			"require": "./dist/lib/types/index.ts",
+			"types": "./dist/lib/types/index.ts",
+			"import": "./dist/lib/types/index.ts",
+			"default": "./dist/lib/types/index.ts"
+		},
+		"./component-props": {
+			"require": "./dist/lib/types/components-props.ts",
+			"types": "./dist/lib/types/components-props.ts",
+			"import": "./dist/lib/types/components-props.ts",
+			"default": "./dist/lib/types/components-props.ts"
+		}
+	},
+	"typesVersions": {
+		"*": {
+			"types": [
+				"./dist/lib/types/index.d.ts"
+			]
+		}
 	}
 }

package/.editorconfig

@@ -1,7 +0,0 @@
-[*]
-indent_size = 4
-indent_style = tab
-charset = utf-8
-
-[*.ts, *.tsx]
-insert_final_newline = true

package/.prettierrc

@@ -1,5 +0,0 @@
-{
-    "arrowParens": "avoid",
-    "semi": false,
-    "tabWidth": 4
-}

package/eslint.config.js

@@ -1,177 +0,0 @@
-import globals from "globals"
-import pluginJs from "@eslint/js"
-import tseslint from "typescript-eslint"
-import pluginReactConfig from "eslint-plugin-react/configs/recommended.js"
-import { fixupConfigRules } from "@eslint/compat"
-
-export default [
-	{ files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
-	{ languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
-	{ languageOptions: { globals: globals.browser } },
-	pluginJs.configs.recommended,
-	...tseslint.configs.recommended,
-	...fixupConfigRules(pluginReactConfig),
-	{
-		rules: {
-			"no-duplicate-imports": "error",
-			"react/react-in-jsx-scope": "off",
-			"react/no-unescaped-entities": "off",
-			"react/display-name": "off",
-			"@typescript-eslint/no-explicit-any": "off",
-			"no-case-declarations": "off",
-			"@typescript-eslint/no-unused-vars": [
-				"warn",
-				{
-					vars: "all",
-					args: "after-used",
-					ignoreRestSiblings: true,
-					destructuredArrayIgnorePattern: "[_]",
-				},
-			],
-			"@typescript-eslint/ban-types": "off",
-			"no-constant-binary-expression": "off",
-			"@typescript-eslint/ban-ts-comment": "off",
-			"no-useless-escape": "off",
-			"no-irregular-whitespace": "off",
-			"@typescript-eslint/consistent-type-imports": "warn",
-			"@typescript-eslint/no-unused-expressions": "warn",
-			"@typescript-eslint/no-non-null-asserted-optional-chain": "off",
-			"@typescript-eslint/consistent-indexed-object-style": "off",
-			"@typescript-eslint/no-inferrable-types": "off",
-
-			"react/function-component-definition": [
-				"warn",
-				{
-					namedComponents: ["arrow-function"],
-				},
-			],
-			"react/jsx-key": "warn",
-			"@typescript-eslint/consistent-type-definitions": "off",
-			"@typescript-eslint/array-type": [
-				"warn",
-				{
-					default: "generic",
-					readonly: "generic",
-				},
-			],
-			"no-restricted-exports": [
-				"warn",
-				{ restrictDefaultExports: { direct: true } },
-			],
-			"react/prop-types": "off",
-			"no-empty-pattern": "warn",
-			"@typescript-eslint/no-empty-object-type": [
-				"warn",
-				{ allowInterfaces: "with-single-extends" },
-			],
-			// "prefer-arrow-callback": "warn",
-		},
-	},
-	{
-		ignores: [
-			"eslint.config.js",
-			"cypress.config.ts",
-			"plop/*",
-			"vite.config.ts",
-			"dist",
-
-			// TODO remove
-			// "src/pages",
-			// "src/data",
-			// "src/components",
-			// "src/lib/components/Accordion",
-			// "src/lib/components/Alert",
-			// "src/lib/components/Aside",
-			// "src/lib/components/Autocomplete",
-			// "src/lib/components/Avatar",
-			// "src/lib/components/BackToTop",
-			// "src/lib/components/Badge",
-			// "src/lib/components/Breadcrumbs",
-			// "src/lib/components/Burger",
-			// "src/lib/components/Button",
-			// "src/lib/components/ButtonGroup",
-			// "src/lib/components/ButtonIcon",
-			// "src/lib/components/Card",
-			// "src/lib/components/CodeContainer",
-			// "src/lib/components/ComponentsMixins",
-			// "src/lib/components/Cover",
-			// "src/lib/components/Datepicker",
-			// "src/lib/components/DragList",
-			// "src/lib/components/Drawer",
-			// "src/lib/components/Dropdown",
-			// "src/lib/components/Fade",
-			// "src/lib/components/Fallback",
-			// "src/lib/components/Fieldset",
-			// "src/lib/components/Flexbox",
-			// "src/lib/components/Footer",
-			// "src/lib/components/Form",
-			// "src/lib/components/FullBleed",
-			// "src/lib/components/Grid",
-			// "src/lib/components/Header",
-			// "src/lib/components/Helmet",
-			// "src/lib/components/Highlight",
-			// "src/lib/components/Hr",
-			// "src/lib/components/Icon",
-			// "src/lib/components/IconMenu",
-			// "src/lib/components/Image",
-			// "src/lib/components/Input",
-			// "src/lib/components/InputCheck",
-			// "src/lib/components/InputComponents",
-			// "src/lib/components/InputContainer",
-			// "src/lib/components/InputCounter",
-			// "src/lib/components/InputImage",
-			// "src/lib/components/InputPhone",
-			// "src/lib/components/InputPin",
-			// "src/lib/components/InputSlider",
-			// "src/lib/components/Key",
-			// "src/lib/components/LibIcon",
-			// "src/lib/components/Linkify",
-			// "src/lib/components/ListGroup",
-			// "src/lib/components/Loader",
-			// "src/lib/components/Main",
-			// "src/lib/components/MarkdownContainer",
-			// "src/lib/components/MarkdownEditor",
-			// "src/lib/components/Masonry",
-			// "src/lib/components/Messaging",
-			// "src/lib/components/Modal",
-			// "src/lib/components/PageLayout",
-			// "src/lib/components/PageLoading",
-			// "src/lib/components/Pagination",
-			// "src/lib/components/Paginator",
-			// "src/lib/components/ProgressBar",
-			// "src/lib/components/ProgressCircle",
-			// "src/lib/components/Rating",
-			// "src/lib/components/ResetScroll",
-			// "src/lib/components/Section",
-			// "src/lib/components/Select",
-			// "src/lib/components/Skeleton",
-			// "src/lib/components/Slideshow",
-			// "src/lib/components/SrOnly",
-			// "src/lib/components/Stepper",
-			// "src/lib/components/Sticky",
-			// "src/lib/components/Table",
-			// "src/lib/components/Tabs",
-			// "src/lib/components/Tag",
-			// "src/lib/components/Text",
-			// "src/lib/components/TextIcon",
-			// "src/lib/components/Timepicker",
-			// "src/lib/components/Toast",
-			// "src/lib/components/Tooltip",
-			// "src/lib/components/Truncate",
-			// "src/lib/components/Video",
-			// "src/lib/components/Wrapper",
-			// "src/lib/components/Youtube",
-
-			// "src/lib/components",
-			// "src/lib/context",
-			// "src/lib/hooks",
-			// "src/lib/icons",
-			// "src/lib/lib-utils",
-			// "src/lib/types",
-			// "src/lib/utils",
-		],
-	},
-	{
-		files: ["src/*"],
-	},
-]

package/index.html

@@ -1,14 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Julseb Lib Tailwind</title>
-	</head>
-
-	<body>
-		<div id="root"></div>
-		<script type="module" src="/src/main.tsx"></script>
-	</body>
-</html>