react-pop-cards 0.3.0 → 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Anthony
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.css

@@ -767,8 +767,8 @@ html {
     color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
   }
 
-  .menu li > *:not(ul):not(.menu-title):not(details):active,
-.menu li > *:not(ul):not(.menu-title):not(details).active,
+  .menu li > *:not(ul, .menu-title, details, .btn):active,
+.menu li > *:not(ul, .menu-title, details, .btn).active,
 .menu li > details > summary:active {
     --tw-bg-opacity: 1;
     background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
@@ -907,7 +907,8 @@ html {
   grid-template-rows: repeat(1, minmax(0, 1fr));
   align-items: flex-start;
   justify-items: start;
-  overflow-y: auto;
+  overflow-x: hidden;
+  overflow-y: hidden;
   overscroll-behavior: contain;
   height: 100vh;
   height: 100dvh;
@@ -948,6 +949,7 @@ html {
 .drawer-toggle:checked ~ .drawer-side {
   pointer-events: auto;
   visibility: visible;
+  overflow-y: auto;
 }
 .drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay) {
   transform: translateX(0%);
@@ -1092,6 +1094,12 @@ html {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
+.input[type="number"]::-webkit-inner-spin-button,
+.input-md[type="number"]::-webkit-inner-spin-button {
+  margin-top: -1rem;
+  margin-bottom: -1rem;
+  margin-inline-end: -1rem;
+}
 .join {
   display: inline-flex;
   align-items: stretch;
@@ -1184,6 +1192,18 @@ html {
   border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
   --tw-border-opacity: 0.2;
 }
+.stats {
+  display: inline-grid;
+  border-radius: var(--rounded-box, 1rem);
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
+}
+:where(.stats) {
+  grid-auto-flow: column;
+  overflow-x: auto;
+}
 .swap {
   position: relative;
   display: inline-grid;
@@ -1217,6 +1237,16 @@ html {
 .swap input:indeterminate ~ .swap-indeterminate {
   opacity: 1;
 }
+.toast {
+  position: fixed;
+  display: flex;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  flex-direction: column;
+  white-space: nowrap;
+  gap: 0.5rem;
+  padding: 1rem;
+}
 .btm-nav > *:where(.active) {
   border-top-width: 2px;
   --tw-bg-opacity: 1;
@@ -1440,6 +1470,11 @@ html {
   --tw-text-opacity: 1;
   color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
 }
+.input input {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
+  background-color: transparent;
+}
 .input input:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1502,8 +1537,8 @@ html {
   mask-position: center;
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 }
-.menu li > *:not(ul):not(.menu-title):not(details):active,
-.menu li > *:not(ul):not(.menu-title):not(details).active,
+.menu li > *:not(ul, .menu-title, details, .btn):active,
+.menu li > *:not(ul, .menu-title, details, .btn).active,
 .menu li > details > summary:active {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
@@ -1647,6 +1682,17 @@ html {
     background-position: -50%;
   }
 }
+:where(.stats) > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(1px * var(--tw-divide-x-reverse));
+  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
+}
+:is([dir="rtl"] .stats > :not([hidden]) ~ :not([hidden])) {
+  --tw-divide-x-reverse: 1;
+}
 .swap-rotate .swap-on,
 .swap-rotate .swap-indeterminate,
 .swap-rotate input:indeterminate ~ .swap-on {
@@ -1696,6 +1742,9 @@ html {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
 }
+.toast > * {
+  animation: toast-pop 0.25s ease-out;
+}
 @keyframes toast-pop {
 
   0% {
@@ -1771,6 +1820,13 @@ html {
   pointer-events: auto;
   visibility: visible;
 }
+.drawer-open > .drawer-side {
+  overflow-y: auto;
+}
+html:has(.drawer-toggle:checked) {
+  overflow-y: hidden;
+  scrollbar-gutter: stable;
+}
 .join.join-vertical {
   flex-direction: column;
 }
@@ -1805,6 +1861,55 @@ html {
   border-end-end-radius: inherit;
   border-start-end-radius: inherit;
 }
+:where(.toast) {
+  bottom: 0px;
+  inset-inline-end: 0px;
+  inset-inline-start: auto;
+  top: auto;
+  --tw-translate-x: 0px;
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.toast:where(.toast-start) {
+  inset-inline-end: auto;
+  inset-inline-start: 0px;
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.toast:where(.toast-center) {
+  inset-inline-end: 50%;
+  inset-inline-start: 50%;
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+:is([dir="rtl"] .toast:where(.toast-center)) {
+  --tw-translate-x: 50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.toast:where(.toast-end) {
+  inset-inline-end: 0px;
+  inset-inline-start: auto;
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.toast:where(.toast-bottom) {
+  bottom: 0px;
+  top: auto;
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.toast:where(.toast-middle) {
+  bottom: auto;
+  top: 50%;
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.toast:where(.toast-top) {
+  bottom: auto;
+  top: 0px;
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .tooltip {
   position: relative;
   display: inline-block;
@@ -1824,13 +1929,6 @@ html {
   right: auto;
   bottom: var(--tooltip-offset);
 }
-.tooltip-bottom:before {
-  transform: translateX(-50%);
-  top: var(--tooltip-offset);
-  left: 50%;
-  right: auto;
-  bottom: auto;
-}
 .tooltip-right:before {
   transform: translateY(-50%);
   top: 50%;
@@ -1927,14 +2025,6 @@ html {
   right: auto;
   bottom: var(--tooltip-tail-offset);
 }
-.tooltip-bottom:after {
-  transform: translateX(-50%);
-  border-color: transparent transparent var(--tooltip-color) transparent;
-  top: var(--tooltip-tail-offset);
-  left: 50%;
-  right: auto;
-  bottom: auto;
-}
 .tooltip-right:after {
   transform: translateY(-50%);
   border-color: transparent var(--tooltip-color) transparent transparent;
@@ -1946,26 +2036,17 @@ html {
 .absolute {
   position: absolute;
 }
-.relative {
-  position: relative;
-}
-.-left-\[3\%\] {
-  left: -3%;
-}
-.-top-\[5\%\] {
-  top: -5%;
-}
-.bottom-0 {
-  bottom: 0px;
+.-left-\[4\%\] {
+  left: -4%;
 }
 .bottom-\[17\%\] {
   bottom: 17%;
 }
-.left-0 {
-  left: 0px;
+.right-2 {
+  right: 0.5rem;
 }
-.right-\[8\%\] {
-  right: 8%;
+.top-2 {
+  top: 0.5rem;
 }
 .z-50 {
   z-index: 50;
@@ -1982,9 +2063,6 @@ html {
 .col-span-3 {
   grid-column: span 3 / span 3;
 }
-.col-span-8 {
-  grid-column: span 8 / span 8;
-}
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -2012,6 +2090,9 @@ html {
 .h-20 {
   height: 5rem;
 }
+.h-7 {
+  height: 1.75rem;
+}
 .h-\[5rem\] {
   height: 5rem;
 }
@@ -2042,9 +2123,6 @@ html {
 .w-8 {
   width: 2rem;
 }
-.w-\[25\.5rem\] {
-  width: 25.5rem;
-}
 .w-\[5rem\] {
   width: 5rem;
 }
@@ -2075,12 +2153,24 @@ html {
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+@keyframes bounce {
+
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+.animate-bounce {
+  animation: bounce 1s infinite;
+}
 .cursor-pointer {
   cursor: pointer;
 }
-.grid-cols-11 {
-  grid-template-columns: repeat(11, minmax(0, 1fr));
-}
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -2096,6 +2186,9 @@ html {
 .flex-col-reverse {
   flex-direction: column-reverse;
 }
+.items-start {
+  align-items: flex-start;
+}
 .items-end {
   align-items: flex-end;
 }
@@ -2154,12 +2247,21 @@ html {
   margin-top: calc(3% * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(3% * var(--tw-space-y-reverse));
 }
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
 .overflow-y-scroll {
   overflow-y: scroll;
 }
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
 .rounded-2xl {
   border-radius: 1rem;
 }
+.rounded-full {
+  border-radius: 9999px;
+}
 .rounded-none {
   border-radius: 0px;
 }
@@ -2167,12 +2269,22 @@ html {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
+.bg-base-200 {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
+}
 .bg-base-200\/50 {
   background-color: var(--fallback-b2,oklch(var(--b2)/0.5));
 }
 .fill-current {
   fill: currentColor;
 }
+.stroke-current {
+  stroke: currentColor;
+}
+.p-1 {
+  padding: 0.25rem;
+}
 .p-2 {
   padding: 0.5rem;
 }
@@ -2184,14 +2296,14 @@ html {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
+.px-\[2\%\] {
+  padding-left: 2%;
+  padding-right: 2%;
+}
 .px-\[7\%\] {
   padding-left: 7%;
   padding-right: 7%;
 }
-.px-\[8\%\] {
-  padding-left: 8%;
-  padding-right: 8%;
-}
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -2225,18 +2337,10 @@ html {
   font-size: 3rem;
   line-height: 1;
 }
-.text-7xl {
-  font-size: 4.5rem;
-  line-height: 1;
-}
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
 }
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -2280,8 +2384,8 @@ html {
 .duration-200 {
   transition-duration: 200ms;
 }
-.duration-75 {
-  transition-duration: 75ms;
+.duration-300 {
+  transition-duration: 300ms;
 }
 
 @font-face {
@@ -2289,6 +2393,20 @@ html {
     src: url('/public/fortnite.otf') format('opentype');
 }
 
+/* //NOTE: Scrollbar design */
+.scrollbar::-webkit-scrollbar-track {
+    background-color: transparent !important;
+}
+
+.scrollbar::-webkit-scrollbar {
+    width: 6px !important;
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+    border-radius: 10px !important;
+    background-color: #afafaf !important;
+}
+
 .checked\:bg-blue-500:checked {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
@@ -2306,12 +2424,22 @@ html {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.active\:scale-90:active {
+  --tw-scale-x: .9;
+  --tw-scale-y: .9;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 @media not all and (min-width: 640px) {
 
   .max-sm\:flex {
     display: flex;
   }
 
+  .max-sm\:hidden {
+    display: none;
+  }
+
   .max-sm\:h-12 {
     height: 3rem;
   }
@@ -2328,18 +2456,16 @@ html {
     width: 4rem;
   }
 
+  .max-sm\:w-full {
+    width: 100%;
+  }
+
   .max-sm\:scale-90 {
     --tw-scale-x: .9;
     --tw-scale-y: .9;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
 
-  .max-sm\:scale-\[\.85\] {
-    --tw-scale-x: .85;
-    --tw-scale-y: .85;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
   .max-sm\:flex-col {
     flex-direction: column;
   }
@@ -2352,10 +2478,22 @@ html {
     align-items: flex-start;
   }
 
+  .max-sm\:items-center {
+    align-items: center;
+  }
+
   .max-sm\:gap-16 {
     gap: 4rem;
   }
 
+  .max-sm\:gap-2 {
+    gap: 0.5rem;
+  }
+
+  .max-sm\:gap-4 {
+    gap: 1rem;
+  }
+
   .max-sm\:space-y-1 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;
     margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2379,4 +2517,48 @@ html {
     font-size: 1.25rem;
     line-height: 1.75rem;
   }
+}
+
+@media (min-width: 1024px) {
+
+  .lg\:h-screen {
+    height: 100vh;
+  }
+
+  .lg\:px-\[8\%\] {
+    padding-left: 8%;
+    padding-right: 8%;
+  }
+
+  .lg\:text-left {
+    text-align: left;
+  }
+
+  .lg\:text-7xl {
+    font-size: 4.5rem;
+    line-height: 1;
+  }
+}
+
+@media (min-width: 1280px) {
+
+  .xl\:col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+
+  .xl\:col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+
+  .xl\:grid {
+    display: grid;
+  }
+
+  .xl\:w-\[25\.5rem\] {
+    width: 25.5rem;
+  }
+
+  .xl\:grid-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
 }

package/dist/index.d.ts

@@ -1,18 +1,16 @@
-import { ReactNode, ReactElement, CSSProperties } from 'react';
-
 interface CardDataItem {
-  title: string;
-  description: string;
-  image?: string;
+    title: string
+    description: string
+    image?: string
 }
 
 interface CardProps {
-  data: CardDataItem[];
-  bgColor?: string;
-  disposition?: 'LeftRight' | 'RightLeft' | 'TopBottom' | 'BottomTop';
-  isRounded?: boolean;
-  tension?: number;
-  friction?: number;
+    data: CardDataItem[]
+    bgColor?: string
+    disposition?: "LeftRight" | "RightLeft" | "TopBottom" | "BottomTop"
+    isRounded?: boolean
+    tension?: number
+    friction?: number
 }
 
-export declare const Card: React.FC<CardProps>;
+export declare const Card: React.FC<CardProps>

package/dist/index.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, "Card", {
 var _react = _interopRequireDefault(require("react"));
 var _client = _interopRequireDefault(require("react-dom/client"));
 require("./index.css");
-var _Card = _interopRequireDefault(require("./components/Card"));
+var _Card = _interopRequireDefault(require("./lib/components/Card"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // import Sandbox from "./Sandbox"
 

package/dist/{components → lib/components}/Card.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.array.reduce.js");
 require("core-js/modules/es.regexp.to-string.js");
-require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
 var _web = require("@react-spring/web");
 var _reactResponsive = require("react-responsive");
-require("../index.css");
+require("../../index.css");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -138,7 +138,7 @@ const Card = _ref => {
   const [textColor, setTextColor] = (0, _react.useState)();
   (0, _react.useEffect)(() => {
     const luminance = (0, _chromaJs.default)(bgColor).luminance();
-    luminance < 0.5 ? setTextColor('#e5e5e5') : setTextColor('#1c2531');
+    luminance < 0.5 ? setTextColor("#e5e5e5") : setTextColor("#1c2531");
   }, [bgColor]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: getDisposition(disposition)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-pop-cards",
-    "version": "0.3.0",
+    "version": "1.0.1",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "module": "dist/index.js",
@@ -20,25 +20,21 @@
         "url": "git+https://github.com/thony32/react-pop-cards.git"
     },
     "dependencies": {
-        "-": "^0.0.1",
         "@react-spring/web": "^9.7.3",
-        "@testing-library/jest-dom": "^6.2.0",
-        "@testing-library/react": "^14.1.2",
-        "@testing-library/user-event": "^14.5.2",
-        "core-js": "^3.35.1",
+        "chroma-js": "^2.4.2",
+        "core-js": "^3.36.0",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-best-gradient-color-picker": "^3.0.5",
         "react-color": "^2.19.3",
         "react-dom": "^18.2.0",
+        "react-hot-toast": "^2.4.1",
         "react-responsive": "^9.0.2",
-        "chroma-js": "^2.4.2",
-        "react-scripts": "5.0.1",
-        "web-vitals": "^3.5.1"
+        "react-scripts": "5.0.1"
     },
     "scripts": {
         "dev": "react-scripts start",
-        "build": "rm -rf dist && NODE_ENV=production babel src/index.js --out-dir dist --copy-files && babel src/components/Card.js --out-dir dist/components --copy-files && postcss src/index.css -o dist/index.css",
+        "build": "rm -rf dist && NODE_ENV=production babel src/index.js --out-dir dist --copy-files && babel src/index.d.ts --out-dir dist --copy-files && babel src/lib/components/Card.js --out-dir dist/lib/components --copy-files && postcss src/index.css -o dist/index.css",
         "build:vercel": "react-scripts build",
         "test": "react-scripts test",
         "eject": "react-scripts eject"
@@ -62,14 +58,15 @@
         ]
     },
     "devDependencies": {
-        "@babel/cli": "^7.23.4",
-        "@babel/core": "^7.23.7",
-        "@babel/preset-env": "^7.23.8",
+        "@babel/cli": "^7.23.9",
+        "@babel/core": "^7.23.9",
+        "@babel/preset-env": "^7.23.9",
         "@babel/preset-react": "^7.23.3",
         "@monaco-editor/react": "^4.6.0",
         "autoprefixer": "^10.4.17",
-        "daisyui": "^4.6.0",
+        "daisyui": "^4.7.2",
         "postcss-cli": "^11.0.0",
+        "react-countup": "^6.5.0",
         "react-typed": "^2.0.12",
         "tailwindcss": "^3.4.1"
     }