kotnala_ui 1.0.4 → 1.0.6

package/dist/components/dia_scroller_navbar/DiaScrollerNavbar.d.ts

@@ -0,0 +1,14 @@
+interface DiaScrollerNavbarPropTypes {
+    navItems: {
+        iconPath: string;
+        text: string;
+        url: string;
+    }[];
+    theme?: "light" | "dark" | "default";
+    fontSize?: string;
+    padding?: string;
+    previewGap?: string;
+    borderRadius?: string;
+}
+declare function DiaScrollerNavbar({ navItems, fontSize, padding, previewGap, borderRadius, theme }: DiaScrollerNavbarPropTypes): import("react").JSX.Element;
+export default DiaScrollerNavbar;

package/dist/components/fluid_navbar/FluidNavbar.d.ts

@@ -0,0 +1,13 @@
+interface FluidNavbarPropTypes {
+    blobCurvature?: string;
+    navItems: {
+        iconPath: string;
+        text: string;
+        url: string;
+    }[];
+    blobSize?: string;
+    blobTop?: string;
+    blobY?: "top" | "middle" | "bottom";
+}
+declare function FluidNavbar({ blobCurvature, navItems, blobSize, blobY, blobTop }: FluidNavbarPropTypes): import("react").JSX.Element;
+export default FluidNavbar;

package/dist/components/gooey_navbar/GooeyNavbar.d.ts

@@ -0,0 +1,12 @@
+interface GooeyNavbarPropTypes {
+    navItems: {
+        iconPath: string;
+        text: string;
+        url: string;
+    }[];
+    paddingX?: string;
+    paddingY?: string;
+    marginTop?: string;
+}
+declare function GooeyNavbar({ navItems, paddingX, paddingY, marginTop }: GooeyNavbarPropTypes): import("react").JSX.Element;
+export default GooeyNavbar;

package/dist/components/meteor_mash/MeteorMash.d.ts

@@ -1,2 +1,14 @@
-declare function StaggeredText(): import("react").JSX.Element;
-export default StaggeredText;
+type ThemeTypes = "light" | "dark";
+interface MeteorMashPropInterface {
+    numOfMeteors?: number;
+    trailLength?: number;
+    trailLengthShrinkable?: number;
+    trailThickness?: number;
+    meteorCoreSize?: number;
+    collisionDebriSize?: number;
+    theme?: ThemeTypes;
+    bgColor?: Record<ThemeTypes, string>;
+    animateUntill?: boolean;
+}
+declare function MeteorMash({ numOfMeteors, trailLength, trailLengthShrinkable, trailThickness, meteorCoreSize, collisionDebriSize, theme, bgColor, animateUntill }: MeteorMashPropInterface): import("react").JSX.Element;
+export default MeteorMash;

package/dist/components/particle_vanishing_input/ParticleVanishingInput.d.ts

@@ -0,0 +1,27 @@
+import { type ChangeEvent, type Dispatch, type FocusEvent, type KeyboardEvent, type MouseEvent, type SetStateAction } from "react";
+interface ParticleVanishingInputPropTypes {
+    fontSize?: "text-xs" | "text-sm" | "text-md" | "text-lg" | "text-xl" | "text-2xl";
+    fontWeight?: "font-thin" | "font-normal" | "font-semibold" | "font-bold" | "font-extrabold";
+    className?: string;
+    height?: string;
+    theme: "light" | "dark";
+    btnIconPathD?: string;
+    wave?: {
+        amplitude: number;
+        cycles: number;
+        numOfParticles: number;
+        particleSize: number;
+        smokeEffect: boolean;
+    };
+    placeHolder?: string;
+    manuallyStartAnimation?: boolean;
+    setData: Dispatch<SetStateAction<string>>;
+    onClick?: (e: MouseEvent<HTMLInputElement>) => void;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    onKeyUp?: (e: KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+}
+declare function ParticleVanishingInput({ btnIconPathD, fontSize, fontWeight, manuallyStartAnimation, placeHolder, setData, height, theme, wave, onClick, onChange, onFocus, onBlur, onKeyUp, onKeyDown }: ParticleVanishingInputPropTypes): import("react").JSX.Element;
+export default ParticleVanishingInput;

package/dist/components/popup_navabr/PopupNavabr.d.ts

@@ -0,0 +1,11 @@
+interface PopupNavbarPropTypes {
+    navItems: {
+        iconPath: string;
+        text: string;
+        url: string;
+    }[];
+    fontSize?: string;
+    padding?: string;
+}
+declare function PopupNavbar({ navItems, fontSize, padding }: PopupNavbarPropTypes): import("react").JSX.Element;
+export default PopupNavbar;

package/dist/components/text_slash_input/TextSlashInput.d.ts

@@ -0,0 +1,5 @@
+interface TextSlashInputPropTypes {
+    placeHolder?: string;
+}
+declare function TextSlashInput({ placeHolder }: TextSlashInputPropTypes): import("react").JSX.Element;
+export default TextSlashInput;

package/dist/index.esm.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";function r(){return e("div",{className:"",children:"this is Staggered Text"})}export{r as MeteorMash};
+import{useRef as t,useState as e,useEffect as a}from"react";import{jsx as r}from"react/jsx-runtime";function n(t,e){(null==e||e>t.length)&&(e=t.length);for(var a=0,r=Array(e);a<e;a++)r[a]=t[a];return r}function o(t,e){var a="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!a){if(Array.isArray(t)||(a=l(t))||e){a&&(t=a);var r=0,n=function(){};return{s:n,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,i=!0,d=!1;return{s:function(){a=a.call(t)},n:function(){var t=a.next();return i=t.done,t},e:function(t){d=!0,o=t},f:function(){try{i||null==a.return||a.return()}finally{if(d)throw o}}}}function i(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var a=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=a){var r,n,o,i,l=[],d=!0,h=!1;try{if(o=(a=a.call(t)).next,0===e);else for(;!(d=(r=o.call(a)).done)&&(l.push(r.value),l.length!==e);d=!0);}catch(t){h=!0,n=t}finally{try{if(!d&&null!=a.return&&(i=a.return(),Object(i)!==i))return}finally{if(h)throw n}}return l}}(t,e)||l(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(t,e){if(t){if("string"==typeof t)return n(t,e);var a={}.toString.call(t).slice(8,-1);return"Object"===a&&t.constructor&&(a=t.constructor.name),"Map"===a||"Set"===a?Array.from(t):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?n(t,e):void 0}}var d={light:"white",dark:"black"};function h(n){var l=n.numOfMeteors,h=void 0===l?7:l,c=n.trailLength,s=void 0===c?20:c,y=n.trailLengthShrinkable,m=void 0===y?60:y,p=n.trailThickness,u=void 0===p?3:p,f=n.meteorCoreSize,x=void 0===f?2.4:f,g=n.collisionDebriSize,M=void 0===g?2:g,v=n.theme,b=void 0===v?"light":v,S=n.bgColor,L=void 0===S?d:S,k=n.animateUntill,z=void 0===k||k,w=t(null),A=i(e([]),2),I=A[0],C=A[1];return a(function(){for(var t,e,a=[],r=(null===(t=w.current)||void 0===t||null===(t=t.parentElement)||void 0===t?void 0:t.clientHeight)||400,n=(null===(e=w.current)||void 0===e||null===(e=e.parentElement)||void 0===e?void 0:e.clientWidth)||400,o=0;o<h;o++){var i=Math.floor(Math.random()*(n/2- -n+1))+-n,l=-(s+s+100*o);a.push({index:o,x1:i,y1:l,trailLength:s,trailLengthShrinkable:m,color:"red",dots:[{index:0,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:1,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:2,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:3,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:4,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:5,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:6,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:7,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:8,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:9,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:10,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:11,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}]})}C(a)},[]),a(function(){var t;if(z){var e=w.current;if(e){var a=e.getContext("2d");if(a&&(e.width=window.innerWidth,e.height=window.innerHeight,null!==(t=e.parentElement)&&void 0!==t&&t.clientHeight)){var r,n=e.parentElement.clientHeight,i=e.parentElement.clientWidth,l=function(){a.clearRect(0,0,e.width,e.height);var t,d=o(I);try{var h=function(){var e=t.value;if(e.x1+=2,e.y1+=2,e.trailLengthShrinkable>-20&&e.y1>=n/2){var r=Math.max(0,100*(e.y1+e.trailLength+e.trailLengthShrinkable-n/2)/n/4),l=e.trailLengthShrinkable*r/100;e.trailLengthShrinkable-=l,e.x1+=l,e.y1+=l}if(e.y1+e.trailLength+e.trailLengthShrinkable>=n){!function(){var t,r=0,n=o(e.dots);try{for(n.s();!(t=n.n()).done;){var i=t.value;r=(i.index/10*45+130)*(Math.PI/180),i.x-=Math.cos(r)*i.speed,i.y-=Math.sin(r)*i.speed,i.opacity*=.94,a.beginPath(),a.fillStyle="light"===b?"rgba(255, 106, 0,".concat(i.opacity,")"):"rgba(209, 213, 220,".concat(i.opacity,")"),a.arc(i.x+e.trailLength-e.trailLengthShrinkable+e.trailLengthShrinkable,i.y+e.trailLength-e.trailLengthShrinkable+e.trailLengthShrinkable,i.size,0,2*Math.PI,!1),a.fill()}}catch(t){n.e(t)}finally{n.f()}}()}if(e.y1>=n+150){var d=Math.floor(Math.random()*(i/2- -i+1))+-i,h=-(s+s);e.x1=d,e.y1=h,e.trailLength=s,e.trailLengthShrinkable=m,e.dots=[{index:0,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}],e.dots.push({index:1,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:2,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:3,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:4,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:5,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:6,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:7,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:8,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:9,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:10,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:11,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2})}a.beginPath();var c=a.createLinearGradient(e.x1,e.y1,e.x1+e.trailLength+e.trailLengthShrinkable,e.y1+e.trailLength+e.trailLengthShrinkable);c.addColorStop(0,"light"===b?"white":"black"),c.addColorStop(.2,"rgba(255,255,0,1)"),c.addColorStop(.5,"rgba(255,165,0,1)"),c.addColorStop(.8,"rgba(255,69,0,0.8)"),c.addColorStop(1,"oklch(74.6% 0.16 232.661)"),a.moveTo(e.x1,e.y1),a.lineTo(e.x1+e.trailLength+e.trailLengthShrinkable,e.y1+e.trailLength+e.trailLengthShrinkable),a.lineWidth=u,a.strokeStyle=c,a.stroke(),a.beginPath(),a.fillStyle="rgba(0, 191, 255, ".concat(1.01+Math.sin(2*Math.PI*1*(e.y1/100)),")"),a.arc(e.x1+e.trailLength+e.trailLengthShrinkable+1,e.y1+e.trailLength+e.trailLengthShrinkable+1,x,0,2*Math.PI,!1),a.fill(),a.beginPath(),a.fillStyle="rgba(255, 110, 70, ".concat(e.y1%2,")"),a.arc(e.x1+e.trailLength+e.trailLengthShrinkable+1,e.y1+e.trailLength+e.trailLengthShrinkable+1,x-.4,0,2*Math.PI,!1),a.fill()};for(d.s();!(t=d.n()).done;)h()}catch(t){d.e(t)}finally{d.f()}r=requestAnimationFrame(l)};return l(),function(){cancelAnimationFrame(r)}}}}else console.log("animateUntill is false")},[I,z]),r("div",{className:"relative w-full h-full overflow-hidden",children:r("canvas",{ref:w,className:"absolute top-0 left-0 bg-[".concat(L[b],"]")})})}export{h as MeteorMash};

package/dist/index.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime");exports.MeteorMash=function(){return e.jsx("div",{className:"",children:"this is Staggered Text"})};
+"use strict";var t=require("react"),e=require("react/jsx-runtime");function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var a=0,r=Array(e);a<e;a++)r[a]=t[a];return r}function r(t,e){var a="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!a){if(Array.isArray(t)||(a=o(t))||e){a&&(t=a);var r=0,n=function(){};return{s:n,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,l=!0,d=!1;return{s:function(){a=a.call(t)},n:function(){var t=a.next();return l=t.done,t},e:function(t){d=!0,i=t},f:function(){try{l||null==a.return||a.return()}finally{if(d)throw i}}}}function n(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var a=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=a){var r,n,o,i,l=[],d=!0,h=!1;try{if(o=(a=a.call(t)).next,0===e);else for(;!(d=(r=o.call(a)).done)&&(l.push(r.value),l.length!==e);d=!0);}catch(t){h=!0,n=t}finally{try{if(!d&&null!=a.return&&(i=a.return(),Object(i)!==i))return}finally{if(h)throw n}}return l}}(t,e)||o(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(t,e){if(t){if("string"==typeof t)return a(t,e);var r={}.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?a(t,e):void 0}}var i={light:"white",dark:"black"};exports.MeteorMash=function(a){var o=a.numOfMeteors,l=void 0===o?7:o,d=a.trailLength,h=void 0===d?20:d,c=a.trailLengthShrinkable,s=void 0===c?60:c,y=a.trailThickness,u=void 0===y?3:y,p=a.meteorCoreSize,m=void 0===p?2.4:p,f=a.collisionDebriSize,x=void 0===f?2:f,g=a.theme,M=void 0===g?"light":g,v=a.bgColor,b=void 0===v?i:v,S=a.animateUntill,L=void 0===S||S,k=t.useRef(null),z=n(t.useState([]),2),w=z[0],A=z[1];return t.useEffect(function(){for(var t,e,a=[],r=(null===(t=k.current)||void 0===t||null===(t=t.parentElement)||void 0===t?void 0:t.clientHeight)||400,n=(null===(e=k.current)||void 0===e||null===(e=e.parentElement)||void 0===e?void 0:e.clientWidth)||400,o=0;o<l;o++){var i=Math.floor(Math.random()*(n/2- -n+1))+-n,d=-(h+h+100*o);a.push({index:o,x1:i,y1:d,trailLength:h,trailLengthShrinkable:s,color:"red",dots:[{index:0,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:1,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:2,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:3,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:4,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:5,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:6,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:7,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:8,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:9,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:10,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:11,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}]})}A(a)},[]),t.useEffect(function(){var t;if(L){var e=k.current;if(e){var a=e.getContext("2d");if(a&&(e.width=window.innerWidth,e.height=window.innerHeight,null!==(t=e.parentElement)&&void 0!==t&&t.clientHeight)){var n,o=e.parentElement.clientHeight,i=e.parentElement.clientWidth,l=function(){a.clearRect(0,0,e.width,e.height);var t,d=r(w);try{var c=function(){var e=t.value;if(e.x1+=2,e.y1+=2,e.trailLengthShrinkable>-20&&e.y1>=o/2){var n=Math.max(0,100*(e.y1+e.trailLength+e.trailLengthShrinkable-o/2)/o/4),l=e.trailLengthShrinkable*n/100;e.trailLengthShrinkable-=l,e.x1+=l,e.y1+=l}if(e.y1+e.trailLength+e.trailLengthShrinkable>=o){!function(){var t,n=0,o=r(e.dots);try{for(o.s();!(t=o.n()).done;){var i=t.value;n=(i.index/10*45+130)*(Math.PI/180),i.x-=Math.cos(n)*i.speed,i.y-=Math.sin(n)*i.speed,i.opacity*=.94,a.beginPath(),a.fillStyle="light"===M?"rgba(255, 106, 0,".concat(i.opacity,")"):"rgba(209, 213, 220,".concat(i.opacity,")"),a.arc(i.x+e.trailLength-e.trailLengthShrinkable+e.trailLengthShrinkable,i.y+e.trailLength-e.trailLengthShrinkable+e.trailLengthShrinkable,i.size,0,2*Math.PI,!1),a.fill()}}catch(t){o.e(t)}finally{o.f()}}()}if(e.y1>=o+150){var d=Math.floor(Math.random()*(i/2- -i+1))+-i,c=-(h+h);e.x1=d,e.y1=c,e.trailLength=h,e.trailLengthShrinkable=s,e.dots=[{index:0,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}],e.dots.push({index:1,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:2,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:3,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:4,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:5,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:6,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:7,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:8,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:9,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:10,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:11,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2})}a.beginPath();var y=a.createLinearGradient(e.x1,e.y1,e.x1+e.trailLength+e.trailLengthShrinkable,e.y1+e.trailLength+e.trailLengthShrinkable);y.addColorStop(0,"light"===M?"white":"black"),y.addColorStop(.2,"rgba(255,255,0,1)"),y.addColorStop(.5,"rgba(255,165,0,1)"),y.addColorStop(.8,"rgba(255,69,0,0.8)"),y.addColorStop(1,"oklch(74.6% 0.16 232.661)"),a.moveTo(e.x1,e.y1),a.lineTo(e.x1+e.trailLength+e.trailLengthShrinkable,e.y1+e.trailLength+e.trailLengthShrinkable),a.lineWidth=u,a.strokeStyle=y,a.stroke(),a.beginPath(),a.fillStyle="rgba(0, 191, 255, ".concat(1.01+Math.sin(2*Math.PI*1*(e.y1/100)),")"),a.arc(e.x1+e.trailLength+e.trailLengthShrinkable+1,e.y1+e.trailLength+e.trailLengthShrinkable+1,m,0,2*Math.PI,!1),a.fill(),a.beginPath(),a.fillStyle="rgba(255, 110, 70, ".concat(e.y1%2,")"),a.arc(e.x1+e.trailLength+e.trailLengthShrinkable+1,e.y1+e.trailLength+e.trailLengthShrinkable+1,m-.4,0,2*Math.PI,!1),a.fill()};for(d.s();!(t=d.n()).done;)c()}catch(t){d.e(t)}finally{d.f()}n=requestAnimationFrame(l)};return l(),function(){cancelAnimationFrame(n)}}}}else console.log("animateUntill is false")},[w,L]),e.jsx("div",{className:"relative w-full h-full overflow-hidden",children:e.jsx("canvas",{ref:k,className:"absolute top-0 left-0 bg-[".concat(b[M],"]")})})};

package/dist/styles.css

@@ -1,4 +1,5 @@
 /*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
+@layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
@@ -6,6 +7,59 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-orange-500: oklch(70.5% 0.213 47.604);
+    --color-sky-400: oklch(74.6% 0.16 232.661);
+    --color-sky-600: oklch(58.8% 0.158 241.966);
+    --color-gray-50: oklch(98.5% 0.002 247.839);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-400: oklch(70.7% 0.022 261.325);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-600: oklch(44.6% 0.03 256.802);
+    --color-gray-700: oklch(37.3% 0.034 259.733);
+    --color-gray-800: oklch(27.8% 0.033 256.848);
+    --color-gray-900: oklch(21% 0.034 264.665);
+    --color-neutral-50: oklch(98.5% 0 0);
+    --color-neutral-100: oklch(97% 0 0);
+    --color-neutral-200: oklch(92.2% 0 0);
+    --color-neutral-300: oklch(87% 0 0);
+    --color-neutral-400: oklch(70.8% 0 0);
+    --color-neutral-500: oklch(55.6% 0 0);
+    --color-neutral-600: oklch(43.9% 0 0);
+    --color-neutral-800: oklch(26.9% 0 0);
+    --color-neutral-900: oklch(20.5% 0 0);
+    --color-black: #000;
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --container-3xl: 48rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --font-weight-thin: 100;
+    --font-weight-normal: 400;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --radius-sm: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-3xl: 1.5rem;
+    --ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --animate-spin: spin 1s linear infinite;
+    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --blur-sm: 8px;
+    --blur-md: 12px;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
   }
@@ -158,4 +212,865 @@
     display: none !important;
   }
 }
-@layer utilities;
+@layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .relative {
+    position: relative;
+  }
+  .inset-0 {
+    inset: 0;
+  }
+  .top-0 {
+    top: 0;
+  }
+  .top-\[50\%\] {
+    top: 50%;
+  }
+  .-right-5 {
+    right: calc(var(--spacing) * -5);
+  }
+  .right-0 {
+    right: 0;
+  }
+  .left-0 {
+    left: 0;
+  }
+  .left-\[50\%\] {
+    left: 50%;
+  }
+  .mx-auto {
+    margin-inline: auto;
+  }
+  .mr-auto {
+    margin-right: auto;
+  }
+  .flex {
+    display: flex;
+  }
+  .inline-block {
+    display: inline-block;
+  }
+  .size-4 {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+  .h-1\.5 {
+    height: calc(var(--spacing) * 1.5);
+  }
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+  .h-\[50\%\] {
+    height: 50%;
+  }
+  .h-\[75\%\] {
+    height: 75%;
+  }
+  .h-\[87\%\] {
+    height: 87%;
+  }
+  .h-\[90\%\] {
+    height: 90%;
+  }
+  .h-full {
+    height: 100%;
+  }
+  .min-h-screen {
+    min-height: 100vh;
+  }
+  .w-1 {
+    width: var(--spacing);
+  }
+  .w-1\.5 {
+    width: calc(var(--spacing) * 1.5);
+  }
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
+  .w-15 {
+    width: calc(var(--spacing) * 15);
+  }
+  .w-23 {
+    width: calc(var(--spacing) * 23);
+  }
+  .w-\[50\%\] {
+    width: 50%;
+  }
+  .w-\[87\%\] {
+    width: 87%;
+  }
+  .w-\[90\%\] {
+    width: 90%;
+  }
+  .w-\[calc\(100\%-41px\)\] {
+    width: calc(100% - 41px);
+  }
+  .w-full {
+    width: 100%;
+  }
+  .w-max {
+    width: max-content;
+  }
+  .w-min {
+    width: min-content;
+  }
+  .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
+  .max-w-full {
+    max-width: 100%;
+  }
+  .origin-center {
+    transform-origin: center;
+  }
+  .translate-x-\[-50\%\] {
+    --tw-translate-x: -50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-\[-13\.7px\] {
+    --tw-translate-y: -13.7px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-\[-50\%\] {
+    --tw-translate-y: -50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-\[6\.3px\] {
+    --tw-translate-y: 6.3px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .animate-ping {
+    animation: var(--animate-ping);
+  }
+  .animate-pulse {
+    animation: var(--animate-pulse);
+  }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
+  .cursor-default {
+    cursor: default;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .content-center {
+    align-content: center;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-around {
+    justify-content: space-around;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-end {
+    justify-content: flex-end;
+  }
+  .gap-20 {
+    gap: calc(var(--spacing) * 20);
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .rounded-3xl {
+    border-radius: var(--radius-3xl);
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+  .border-10 {
+    border-style: var(--tw-border-style);
+    border-width: 10px;
+  }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
+  .border-black {
+    border-color: var(--color-black);
+  }
+  .border-gray-200 {
+    border-color: var(--color-gray-200);
+  }
+  .border-gray-500 {
+    border-color: var(--color-gray-500);
+  }
+  .border-gray-600 {
+    border-color: var(--color-gray-600);
+  }
+  .border-neutral-100 {
+    border-color: var(--color-neutral-100);
+  }
+  .border-neutral-200 {
+    border-color: var(--color-neutral-200);
+  }
+  .border-neutral-500 {
+    border-color: var(--color-neutral-500);
+  }
+  .border-white {
+    border-color: var(--color-white);
+  }
+  .bg-\[\"\.concat\(L\[b\]\,\"\] {
+    background-color: ".concat(L[b],";
+  }
+  .bg-\[\"\.concat\(b\[M\]\,\"\] {
+    background-color: ".concat(b[M],";
+  }
+  .bg-gray-50 {
+    background-color: var(--color-gray-50);
+  }
+  .bg-gray-100 {
+    background-color: var(--color-gray-100);
+  }
+  .bg-gray-200\/5 {
+    background-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-200) 5%, transparent);
+    }
+  }
+  .bg-gray-400 {
+    background-color: var(--color-gray-400);
+  }
+  .bg-gray-800 {
+    background-color: var(--color-gray-800);
+  }
+  .bg-gray-900 {
+    background-color: var(--color-gray-900);
+  }
+  .bg-neutral-50 {
+    background-color: var(--color-neutral-50);
+  }
+  .bg-neutral-800 {
+    background-color: var(--color-neutral-800);
+  }
+  .bg-neutral-900 {
+    background-color: var(--color-neutral-900);
+  }
+  .bg-orange-500 {
+    background-color: var(--color-orange-500);
+  }
+  .bg-sky-400 {
+    background-color: var(--color-sky-400);
+  }
+  .bg-white {
+    background-color: var(--color-white);
+  }
+  .stroke-gray-400 {
+    stroke: var(--color-gray-400);
+  }
+  .stroke-neutral-400 {
+    stroke: var(--color-neutral-400);
+  }
+  .stroke-1 {
+    stroke-width: 1;
+  }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+  .px-1\.25 {
+    padding-inline: calc(var(--spacing) * 1.25);
+  }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .py-1 {
+    padding-block: var(--spacing);
+  }
+  .pr-5 {
+    padding-right: calc(var(--spacing) * 5);
+  }
+  .pl-1 {
+    padding-left: var(--spacing);
+  }
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
+  .text-center {
+    text-align: center;
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-extrabold {
+    --tw-font-weight: var(--font-weight-extrabold);
+    font-weight: var(--font-weight-extrabold);
+  }
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .font-thin {
+    --tw-font-weight: var(--font-weight-thin);
+    font-weight: var(--font-weight-thin);
+  }
+  .text-black {
+    color: var(--color-black);
+  }
+  .text-gray-50 {
+    color: var(--color-gray-50);
+  }
+  .text-gray-400 {
+    color: var(--color-gray-400);
+  }
+  .text-gray-500 {
+    color: var(--color-gray-500);
+  }
+  .text-gray-800 {
+    color: var(--color-gray-800);
+  }
+  .text-neutral-200 {
+    color: var(--color-neutral-200);
+  }
+  .text-neutral-300 {
+    color: var(--color-neutral-300);
+  }
+  .text-neutral-400\/50 {
+    color: color-mix(in srgb, oklch(70.8% 0 0) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-neutral-400) 50%, transparent);
+    }
+  }
+  .text-neutral-500 {
+    color: var(--color-neutral-500);
+  }
+  .text-neutral-600 {
+    color: var(--color-neutral-600);
+  }
+  .text-neutral-800 {
+    color: var(--color-neutral-800);
+  }
+  .text-transparent {
+    color: transparent;
+  }
+  .text-white {
+    color: var(--color-white);
+  }
+  .caret-gray-500 {
+    caret-color: var(--color-gray-500);
+  }
+  .opacity-0 {
+    opacity: 0%;
+  }
+  .opacity-100 {
+    opacity: 100%;
+  }
+  .mix-blend-difference {
+    mix-blend-mode: difference;
+  }
+  .\[box-shadow\:0px_0px_8px_0\.1px_gray\] {
+    box-shadow: 0px 0px 8px 0.1px gray;
+  }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .blur-sm {
+    --tw-blur: blur(var(--blur-sm));
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .backdrop-blur-\[6px\] {
+    --tw-backdrop-blur: blur(6px);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .backdrop-blur-md {
+    --tw-backdrop-blur: blur(var(--blur-md));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+  .duration-500 {
+    --tw-duration: 500ms;
+    transition-duration: 500ms;
+  }
+  .duration-600 {
+    --tw-duration: 600ms;
+    transition-duration: 600ms;
+  }
+  .duration-700 {
+    --tw-duration: 700ms;
+    transition-duration: 700ms;
+  }
+  .duration-1000 {
+    --tw-duration: 1000ms;
+    transition-duration: 1000ms;
+  }
+  .duration-9000 {
+    --tw-duration: 9000ms;
+    transition-duration: 9000ms;
+  }
+  .ease-in {
+    --tw-ease: var(--ease-in);
+    transition-timing-function: var(--ease-in);
+  }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .focus-within\:\[box-shadow\:0px_0px_8px_0\.1px_\#d4d4d490_inset\] {
+    &:focus-within {
+      box-shadow: 0px 0px 8px 0.1px #d4d4d490 inset;
+    }
+  }
+  .hover\:scale-115 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-scale-x: 115%;
+        --tw-scale-y: 115%;
+        --tw-scale-z: 115%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
+  .hover\:bg-gray-900 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-900);
+      }
+    }
+  }
+  .hover\:bg-neutral-800 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-neutral-800);
+      }
+    }
+  }
+  .hover\:text-gray-300 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-300);
+      }
+    }
+  }
+  .hover\:text-neutral-400 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-neutral-400);
+      }
+    }
+  }
+  .dark\:border-gray-500 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-gray-500);
+    }
+  }
+  .dark\:border-gray-700 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-gray-700);
+    }
+  }
+  .dark\:border-neutral-200\/30 {
+    @media (prefers-color-scheme: dark) {
+      border-color: color-mix(in srgb, oklch(92.2% 0 0) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-neutral-200) 30%, transparent);
+      }
+    }
+  }
+  .dark\:border-neutral-800 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-neutral-800);
+    }
+  }
+  .dark\:border-neutral-900 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-neutral-900);
+    }
+  }
+  .dark\:border-white {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-white);
+    }
+  }
+  .dark\:bg-gray-50 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-gray-50);
+    }
+  }
+  .dark\:bg-gray-50\/5 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 5%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-gray-50) 5%, transparent);
+      }
+    }
+  }
+  .dark\:bg-gray-100 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-gray-100);
+    }
+  }
+  .dark\:bg-gray-200 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-gray-200);
+    }
+  }
+  .dark\:bg-gray-800 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-gray-800);
+    }
+  }
+  .dark\:bg-gray-900 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-gray-900);
+    }
+  }
+  .dark\:bg-neutral-100 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-100);
+    }
+  }
+  .dark\:bg-neutral-500 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-500);
+    }
+  }
+  .dark\:bg-neutral-900 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-900);
+    }
+  }
+  .dark\:bg-sky-600 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-sky-600);
+    }
+  }
+  .dark\:text-gray-400 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-gray-400);
+    }
+  }
+  .dark\:text-gray-600 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-gray-600);
+    }
+  }
+  .dark\:text-gray-900 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-gray-900);
+    }
+  }
+  .dark\:text-neutral-100 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-100);
+    }
+  }
+  .dark\:text-neutral-300 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-300);
+    }
+  }
+  .dark\:text-neutral-400 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
+  }
+  .dark\:text-neutral-600 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-600);
+    }
+  }
+  .dark\:text-white {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-white);
+    }
+  }
+  .dark\:hover\:bg-neutral-800 {
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-neutral-800);
+        }
+      }
+    }
+  }
+  .dark\:hover\:text-gray-300 {
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-gray-300);
+        }
+      }
+    }
+  }
+}
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-border-style: solid;
+      --tw-font-weight: initial;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+      --tw-duration: initial;
+      --tw-ease: initial;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kotnala_ui",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -12,7 +12,8 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "react-router-dom": ">=6"
   },
   "files": [
     "dist"
@@ -40,6 +41,7 @@
     "@types/react-dom": "^19.2.3",
     "autoprefixer": "^10.5.0",
     "postcss": "^8.5.15",
+    "react-router-dom": "^7.17.0",
     "tailwindcss": "^4.3.1",
     "typescript": "^6.0.3"
   }