@julseb-lib/react 0.1.19 → 0.1.20

package/dist/lib/index.css

@@ -1,539 +0,0 @@
-@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 *)); */
-
-:root {
-	--font-lato: "Lato", sans-serif;
-	--font-sans: var(--font-lato);
-	--font-mono: monospace;
-
-	--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-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%
-	);
-
-	--font-sans: var(--font-lato);
-	--font-mono: monospace;
-
-	--spacer-2xs: 4px;
-	--spacer-xs: 8px;
-	--spacer-sm: 12px;
-	--spacer-md: 16px;
-	--spacer-lg: 24px;
-	--spacer-xl: 32px;
-	--spacer-2xl: 48px;
-
-	--main-default: 600px;
-	--main-large: 800px;
-	--main-form: 400px;
-	--main-full: 100%;
-	--aside-default: 250px;
-	--aside-small: 200px;
-
-	--shadow-2xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-	--shadow-xs:
-		0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
-	--shadow-sm:
-		0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
-	--shadow-md:
-		0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 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-xl:
-		0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
-	--shadow-2xl:
-		0px 10px 14px 8px rgba(0, 0, 0, 0.2), 0px 4px 4px rgba(0, 0, 0, 0.3);
-	--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.06);
-	--shadow-none: none;
-
-	--animate-cubic-bezier: cubic-bezier(0.5, 0, 0.5, 1);
-
-	--transition-short: all 200ms ease;
-	--transition-long: all 500ms ease;
-	--transition-bezier: all 500ms cubic-bezier(0.25, 0.75, 0, 0.66);
-
-	--text-display-h1: 5rem;
-	--text-display-h2: 4rem;
-	--text-display-h3: 3.5rem;
-	--text-display-h4: 3rem;
-	--text-display-h5: 2.5rem;
-	--text-h1: 2.5rem;
-	--text-h2: 2rem;
-	--text-h3: 1.8rem;
-	--text-h4: 1.5rem;
-	--text-h5: 1.3rem;
-	--text-h6: 1.1rem;
-	--text-body: 1rem;
-	--text-small: 0.875rem;
-}
-
-@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-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%
-	);
-
-	--font-sans: var(--font-lato);
-	--font-mono: monospace;
-
-	--spacer-2xs: 4px;
-	--spacer-xs: 8px;
-	--spacer-sm: 12px;
-	--spacer-md: 16px;
-	--spacer-lg: 24px;
-	--spacer-xl: 32px;
-	--spacer-2xl: 48px;
-
-	--main-default: 600px;
-	--main-large: 800px;
-	--main-form: 400px;
-	--main-full: 100%;
-	--aside-default: 250px;
-	--aside-small: 200px;
-
-	--shadow-2xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-	--shadow-xs:
-		0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
-	--shadow-sm:
-		0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
-	--shadow-md:
-		0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 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-xl:
-		0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
-	--shadow-2xl:
-		0px 10px 14px 8px rgba(0, 0, 0, 0.2), 0px 4px 4px rgba(0, 0, 0, 0.3);
-	--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.06);
-	--shadow-none: none;
-
-	--animate-cubic-bezier: cubic-bezier(0.5, 0, 0.5, 1);
-
-	--transition-short: all 200ms ease;
-	--transition-long: all 500ms ease;
-	--transition-bezier: all 500ms cubic-bezier(0.25, 0.75, 0, 0.66);
-
-	--text-display-h1: 5rem;
-	--text-display-h2: 4rem;
-	--text-display-h3: 3.5rem;
-	--text-display-h4: 3rem;
-	--text-display-h5: 2.5rem;
-	--text-h1: 2.5rem;
-	--text-h2: 2rem;
-	--text-h3: 1.8rem;
-	--text-h4: 1.5rem;
-	--text-h5: 1.3rem;
-	--text-h6: 1.1rem;
-	--text-body: 1rem;
-	--text-small: 0.875rem;
-}
-
-/*====================== Common styles ======================*/
-
-html,
-body {
-	font-family: var(--font-sans);
-	width: 100%;
-	min-height: 100vh;
-	background-color: var(--color-background);
-	color: var(--color-font);
-	max-width: 100dvw;
-	line-height: var(--leading-normal);
-
-	&.dark {
-		--color-background: var(--color-black);
-		--color-font: var(--color-white);
-	}
-}
-
-.smooth {
-	scroll-behavior: smooth;
-}
-
-a,
-button {
-	cursor: pointer;
-	transition: var(--transition-short);
-
-	&:disabled {
-		cursor: not-allowed;
-	}
-}
-
-img,
-video,
-iframe {
-	max-width: 100%;
-}
-
-.no-scrollbar {
-	-ms-overflow-style: none;
-	scrollbar-width: none;
-
-	&::-webkit-scrollbar {
-		display: none;
-	}
-}
-
-/*====================== Fonts ======================*/
-
-.lato-thin {
-	font-family: var(--font-sans);
-	font-weight: var(--font-weight-thin);
-	font-style: normal;
-}
-
-.lato-light {
-	font-family: var(--font-sans);
-	font-weight: var(--font-weight-light);
-	font-style: normal;
-}
-
-.lato-regular {
-	font-family: var(--font-sans);
-	font-weight: var(--font-weight-normal);
-	font-style: normal;
-}
-
-.lato-bold {
-	font-family: var(--font-sans);
-	font-weight: var(--font-weight-bold);
-	font-style: normal;
-}
-
-.lato-black {
-	font-family: var(--font-sans);
-	font-weight: var(--font-weight-black);
-	font-style: normal;
-}
-
-.lato-thin-italic {
-	font-family: var(--font-sans);
-	font-weight: var(--font-weight-thin);
-	font-style: italic;
-}
-
-.lato-light-italic {
-	font-family: var(--font-sans);
-	font-weight: var(--font-weight-light);
-	font-style: italic;
-}
-
-.lato-regular-italic {
-	font-family: var(--font-sans);
-	font-weight: var(--font-weight-normal);
-	font-style: italic;
-}
-
-.lato-bold-italic {
-	font-family: var(--font-sans);
-	font-weight: var(--font-weight-bold);
-	font-style: italic;
-}
-
-.lato-black-italic {
-	font-family: var(--font-sans);
-	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%;
-	}
-}
-
-@keyframes spin {
-	from {
-		transform: rotate(0deg);
-	}
-
-	to {
-		transform: rotate(360deg);
-	}
-}
-
-@keyframes loader-pulse {
-	0%,
-	100% {
-		transform: scale(0);
-	}
-
-	50% {
-		transform: scale(1);
-	}
-}
-
-.Toastify__progress-bar--bg {
-	background-color: transparent !important;
-}
-
-@keyframes progress-bar {
-	0% {
-		width: 0;
-	}
-
-	100% {
-		width: var(--meter-value);
-	}
-}

package/dist/lib/index.ts

@@ -1,129 +0,0 @@
-"use client"
-import "./index.css"
-export * from "./utils"
-export {
-	addDay,
-	addMonth,
-	addYear,
-	calculateAverage,
-	calculateTotalSum,
-	capitalize,
-	convertDate,
-	convertDateShort,
-	convertPrice,
-	convertToEmail,
-	convertYoutube,
-	deleteDuplicates,
-	detectLanguage,
-	disableScroll,
-	enableScroll,
-	filterObject,
-	formatDate,
-	formatHour,
-	generateNumbers,
-	getFirstName,
-	getInitials,
-	getLastName,
-	getNextDay,
-	getPercentage,
-	getRandom,
-	getRandomAvatar,
-	getRandomDate,
-	getRandomNumber,
-	getRandomString,
-	getRandomTime,
-	getTimeNow,
-	getToday,
-	getTomorrow,
-	getYesterday,
-	hexToRgb,
-	emailRegex,
-	passwordRegex,
-	rgbToHex,
-	scrollToTop,
-	slugify,
-	sortByFrequency,
-	stringifyPx,
-	toCamelCase,
-	toConstantCase,
-	toDotCase,
-	toKebabCase,
-	toPascalCase,
-	toPathCase,
-	toSentenceCase,
-	toSnakeCase,
-	toTitleCase,
-	unslugify,
-	uuid,
-} from "@julseb-lib/utils"
-
-export * from "./hooks"
-export * from "./Variables"
-export * from "./context"
-
-export * from "./components/Text"
-export * from "./components/Wrapper"
-export * from "./components/Main"
-export * from "./components/Aside"
-export * from "./components/Section"
-export * from "./components/Grid"
-export * from "./components/Flexbox"
-export * from "./components/Key"
-export * from "./components/Highlight"
-export * from "./components/Linkify"
-export * from "./components/Hr"
-export * from "./components/Skeleton"
-export * from "./components/Tooltip"
-export * from "./components/Image"
-export * from "./components/Masonry"
-export * from "./components/Badge"
-export * from "./components/Avatar"
-export * from "./components/Loader"
-export * from "./components/Burger"
-export * from "./components/Button"
-export * from "./components/ButtonIcon"
-export * from "./components/ButtonGroup"
-export * from "./components/Tag"
-export * from "./components/InputContainer"
-export * from "./components/Input"
-export * from "./components/InputImage"
-export * from "./components/InputCheck"
-export * from "./components/InputPhone"
-export * from "./components/InputCounter"
-export * from "./components/InputSlider"
-export * from "./components/Select"
-export * from "./components/Autocomplete"
-export * from "./components/Rating"
-export * from "./components/InputPin"
-export * from "./components/Fieldset"
-export * from "./components/Form"
-export * from "./components/ListGroup"
-export * from "./components/Breadcrumbs"
-export * from "./components/Accordion"
-export * from "./components/Dropdown"
-export * from "./components/Toast"
-export * from "./components/Alert"
-export * from "./components/Modal"
-export * from "./components/DragList"
-export * from "./components/Pagination"
-export * from "./components/Paginator"
-export * from "./components/ProgressBar"
-export * from "./components/ProgressCircle"
-export * from "./components/Tabs"
-export * from "./components/Slideshow"
-export * from "./components/Cover"
-export * from "./components/Table"
-export * from "./components/PageLoading"
-export * from "./components/Sticky"
-export * from "./components/MarkdownEditor"
-export * from "./components/MarkdownContainer"
-export * from "./components/CodeContainer"
-export * from "./components/Fade"
-export * from "./components/BackToTop"
-export * from "./components/Drawer"
-export * from "./components/Header"
-export * from "./components/Footer"
-export * from "./components/Meta"
-export * from "./components/PageLayout"
-export * from "./components/SrOnly"
-/* Prepend here - DO NOT REMOVE */

package/dist/lib/lib-utils/get-highlighted-text.tsx

@@ -1,30 +0,0 @@
-import { Fragment, type CSSProperties } from "react"
-import { uuid, slugify } from "@julseb-lib/utils"
-import { clsx } from "../utils"
-import { Text } from ".."
-import type { ReactChildren } from "../types"
-
-export const getHighlightedText = (
-	text: ReactChildren,
-	value: string,
-	highlightStyle?: CSSProperties,
-	className?: string | Array<string>
-) => {
-	const parts = text?.toString().split(new RegExp(`(${value})`, "gi"))
-
-	return (parts as Array<string>).map(part => (
-		<Fragment key={uuid()}>
-			{slugify(part) === slugify(value) ? (
-				<Text
-					tag="strong"
-					className={clsx(className)}
-					style={highlightStyle}
-				>
-					{part}
-				</Text>
-			) : (
-				part
-			)}
-		</Fragment>
-	))
-}

package/dist/lib/lib-utils/index.ts

@@ -1,3 +0,0 @@
-export * from "./get-highlighted-text"
-export * from "./transfom-search-keys"
-export * from "./use-keyboard-navigation"

package/dist/lib/lib-utils/transfom-search-keys.ts

@@ -1,13 +0,0 @@
-export const transformSearchKeys = (keys: Array<string>): Array<string> => {
-    return keys.map(key =>
-        key.includes("Key")
-            ? key.replace("Key", "")
-            : key === "Command"
-            ? "⌘"
-            : key === "Enter"
-            ? "↵"
-            : key === "Control"
-            ? "Ctrl"
-            : key
-    )
-}