kotnala_ui 1.0.4 → 1.0.7

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.d.ts

@@ -1,2 +1,8 @@
 import "./styles.css";
 export { default as MeteorMash } from "./components/meteor_mash/MeteorMash";
+export { default as DiaScrollerNavbar } from "./components/dia_scroller_navbar/DiaScrollerNavbar";
+export { default as FluidNavbar } from "./components/fluid_navbar/FluidNavbar";
+export { default as GooeyNavbar } from "./components/gooey_navbar/GooeyNavbar";
+export { default as PopupNavabr } from "./components/popup_navabr/PopupNavabr";
+export { default as ParticleVanishingInput } from "./components/particle_vanishing_input/ParticleVanishingInput";
+export { default as TextSlashInput } from "./components/text_slash_input/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 e,useState as t,useEffect as a}from"react";import{jsx as n,jsxs as r,Fragment as l}from"react/jsx-runtime";import{NavLink as i}from"react-router-dom";function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,n=Array(t);a<t;a++)n[a]=e[a];return n}function s(e,t){var a="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!a){if(Array.isArray(e)||(a=u(e))||t){a&&(e=a);var n=0,r=function(){};return{s:r,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:r}}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 l,i=!0,o=!1;return{s:function(){a=a.call(e)},n:function(){var e=a.next();return i=e.done,e},e:function(e){o=!0,l=e},f:function(){try{i||null==a.return||a.return()}finally{if(o)throw l}}}}function c(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var n,r,l,i,o=[],s=!0,c=!1;try{if(l=(a=a.call(e)).next,0===t);else for(;!(s=(n=l.call(a)).done)&&(o.push(n.value),o.length!==t);s=!0);}catch(e){c=!0,r=e}finally{try{if(!s&&null!=a.return&&(i=a.return(),Object(i)!==i))return}finally{if(c)throw r}}return o}}(e,t)||u(e,t)||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 d(e){return function(e){if(Array.isArray(e))return o(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||u(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){if(e){if("string"==typeof e)return o(e,t);var a={}.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a||"Set"===a?Array.from(e):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?o(e,t):void 0}}var h={light:"white",dark:"black"};function f(r){var l=r.numOfMeteors,i=void 0===l?7:l,o=r.trailLength,d=void 0===o?20:o,u=r.trailLengthShrinkable,f=void 0===u?60:u,p=r.trailThickness,m=void 0===p?3:p,v=r.meteorCoreSize,x=void 0===v?2.4:v,g=r.collisionDebriSize,y=void 0===g?2:g,b=r.theme,w=void 0===b?"light":b,k=r.bgColor,N=void 0===k?h:k,M=r.animateUntill,S=void 0===M||M,L=e(null),C=c(t([]),2),z=C[0],B=C[1];return a(function(){for(var e,t,a=[],n=(null===(e=L.current)||void 0===e||null===(e=e.parentElement)||void 0===e?void 0:e.clientHeight)||400,r=(null===(t=L.current)||void 0===t||null===(t=t.parentElement)||void 0===t?void 0:t.clientWidth)||400,l=0;l<i;l++){var o=Math.floor(Math.random()*(r/2- -r+1))+-r,s=-(d+d+100*l);a.push({index:l,x1:o,y1:s,trailLength:d,trailLengthShrinkable:f,color:"red",dots:[{index:0,x:o+d+n+100*l,y:s+d+n+100*l,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:1,x:o+d+n+100*l,y:s+d+n+100*l,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:2,x:o+d+n+100*l,y:s+d+n+100*l,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:3,x:o+d+n+100*l,y:s+d+n+100*l,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:4,x:o+d+n+100*l,y:s+d+n+100*l,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:5,x:o+d+n+100*l,y:s+d+n+100*l,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:6,x:o+d+n+100*l,y:s+d+n+100*l,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:7,x:o+d+n+100*l,y:s+d+n+100*l,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:8,x:o+d+n+100*l,y:s+d+n+100*l,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:9,x:o+d+n+100*l,y:s+d+n+100*l,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:10,x:o+d+n+100*l,y:s+d+n+100*l,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:11,x:o+d+n+100*l,y:s+d+n+100*l,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}]})}B(a)},[]),a(function(){var e;if(S){var t=L.current;if(t){var a=t.getContext("2d");if(a&&(t.width=window.innerWidth,t.height=window.innerHeight,null!==(e=t.parentElement)&&void 0!==e&&e.clientHeight)){var n,r=t.parentElement.clientHeight,l=t.parentElement.clientWidth,i=function(){a.clearRect(0,0,t.width,t.height);var e,o=s(z);try{var c=function(){var t=e.value;if(t.x1+=2,t.y1+=2,t.trailLengthShrinkable>-20&&t.y1>=r/2){var n=Math.max(0,100*(t.y1+t.trailLength+t.trailLengthShrinkable-r/2)/r/4),i=t.trailLengthShrinkable*n/100;t.trailLengthShrinkable-=i,t.x1+=i,t.y1+=i}if(t.y1+t.trailLength+t.trailLengthShrinkable>=r){!function(){var e,n=0,r=s(t.dots);try{for(r.s();!(e=r.n()).done;){var l=e.value;n=(l.index/10*45+130)*(Math.PI/180),l.x-=Math.cos(n)*l.speed,l.y-=Math.sin(n)*l.speed,l.opacity*=.94,a.beginPath(),a.fillStyle="light"===w?"rgba(255, 106, 0,".concat(l.opacity,")"):"rgba(209, 213, 220,".concat(l.opacity,")"),a.arc(l.x+t.trailLength-t.trailLengthShrinkable+t.trailLengthShrinkable,l.y+t.trailLength-t.trailLengthShrinkable+t.trailLengthShrinkable,l.size,0,2*Math.PI,!1),a.fill()}}catch(e){r.e(e)}finally{r.f()}}()}if(t.y1>=r+150){var o=Math.floor(Math.random()*(l/2- -l+1))+-l,c=-(d+d);t.x1=o,t.y1=c,t.trailLength=d,t.trailLengthShrinkable=f,t.dots=[{index:0,x:o+d+r,y:c+d+r,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}],t.dots.push({index:1,x:o+d+r,y:c+d+r,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),t.dots.push({index:2,x:o+d+r,y:c+d+r,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),t.dots.push({index:3,x:o+d+r,y:c+d+r,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),t.dots.push({index:4,x:o+d+r,y:c+d+r,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),t.dots.push({index:5,x:o+d+r,y:c+d+r,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),t.dots.push({index:6,x:o+d+r,y:c+d+r,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),t.dots.push({index:7,x:o+d+r,y:c+d+r,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),t.dots.push({index:8,x:o+d+r,y:c+d+r,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),t.dots.push({index:9,x:o+d+r,y:c+d+r,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),t.dots.push({index:10,x:o+d+r,y:c+d+r,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),t.dots.push({index:11,x:o+d+r,y:c+d+r,size:Math.random()*(y-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2})}a.beginPath();var u=a.createLinearGradient(t.x1,t.y1,t.x1+t.trailLength+t.trailLengthShrinkable,t.y1+t.trailLength+t.trailLengthShrinkable);u.addColorStop(0,"light"===w?"white":"black"),u.addColorStop(.2,"rgba(255,255,0,1)"),u.addColorStop(.5,"rgba(255,165,0,1)"),u.addColorStop(.8,"rgba(255,69,0,0.8)"),u.addColorStop(1,"oklch(74.6% 0.16 232.661)"),a.moveTo(t.x1,t.y1),a.lineTo(t.x1+t.trailLength+t.trailLengthShrinkable,t.y1+t.trailLength+t.trailLengthShrinkable),a.lineWidth=m,a.strokeStyle=u,a.stroke(),a.beginPath(),a.fillStyle="rgba(0, 191, 255, ".concat(1.01+Math.sin(2*Math.PI*1*(t.y1/100)),")"),a.arc(t.x1+t.trailLength+t.trailLengthShrinkable+1,t.y1+t.trailLength+t.trailLengthShrinkable+1,x,0,2*Math.PI,!1),a.fill(),a.beginPath(),a.fillStyle="rgba(255, 110, 70, ".concat(t.y1%2,")"),a.arc(t.x1+t.trailLength+t.trailLengthShrinkable+1,t.y1+t.trailLength+t.trailLengthShrinkable+1,x-.4,0,2*Math.PI,!1),a.fill()};for(o.s();!(e=o.n()).done;)c()}catch(e){o.e(e)}finally{o.f()}n=requestAnimationFrame(i)};return i(),function(){cancelAnimationFrame(n)}}}}else console.log("animateUntill is false")},[z,S]),n("div",{className:"relative w-full h-full overflow-hidden",children:n("canvas",{ref:L,className:"absolute top-0 left-0 bg-[".concat(N[w],"]")})})}var p=function(e,t){return n("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"-10 -10 44 44","stroke-width":"1.5","data-nav-item":e,className:"stroke-1 stroke-neutral-400 mix-blend-difference w-full h-full",style:{transition:"1s ease-in-out"},children:n("path",{"data-nav-item":e,"stroke-linecap":"round","stroke-linejoin":"round",d:t})})};function m(l){var o=l.navItems,s=l.fontSize,d=void 0===s?"18px":s,u=l.padding,h=void 0===u?"0px 0px":u,f=l.previewGap,m=void 0===f?"-48px":f,v=l.borderRadius,x=void 0===v?"0px":v,g=l.theme,y=c(t({x:0,width:0,left:0}),2),b=y[0],w=y[1],k=c(t(""),2),N=k[0],M=k[1],S=c(t(!1),2),L=S[0],C=S[1],z=c(t(0),2),B=z[0],E=z[1],I=e(null);return a(function(){!function(){var e=I.current;if(e){var t=e.getBoundingClientRect().x;E(t)}}()},[]),n("div",{className:"text-neutral-500 bg-neutral-50 dark:text-neutral-400 dark:bg-neutral-900",style:{fontSize:d,boxShadow:"light"===g?"0px 0px 8px 0.1px #00000050":"0px 0px 8px 0.1px #ffffff50",borderRadius:x},children:r("div",{ref:I,className:"relative w-min",onMouseOver:function(e){e.target.getAttribute("data-nav-item")&&C(!0)},onMouseMove:function(e){var t=e.target.getAttribute("data-nav-item");if(t){var a=e.target.getBoundingClientRect(),n=a.x,r=a.width,l=a.left;M(t),w({x:n,width:r,left:l})}},onMouseOut:function(e){e.target.getAttribute("data-nav-item")&&C(!1)},children:[n("div",{className:"rounded-sm absolute left-0 w-23 overflow-hidden transition-all ease-in-out duration-1000 border border-neutral-500",style:{translate:"".concat(b.x-B,"px"),width:b.width,opacity:L?1:0,top:m,borderRadius:x},children:n("div",{className:"w-max transition-all ease-in-out duration-1000 flex",style:{translate:"".concat(-b.x+B,"px")},children:o.map(function(e,t){var a=e.text;return n("div",{className:"transition-all ease duration-600 bg-neutral-800 text-neutral-200",style:{transform:N===a?"scale(1)":"scale(0.5)",filter:N===a?"blur(0)":"blur(7px)",padding:h,borderRadius:x},children:a},t)})})}),n("div",{style:{borderRadius:x},className:"flex overflow-hidden",children:o.map(function(e,t){var a=e.iconPath,l=e.text,s=e.url;return r(i,{to:s,className:"h-full cursor-pointer flex items-center relative transition-all ease-in-out duration-600 hover:bg-neutral-800 dark:hover:bg-neutral-800",style:{padding:h},children:[n("div",{className:"text-neutral-300 dark:text-neutral-600",children:l}),n("div",{className:"backdrop-blur-md absolute left-0 top-0 h-full w-full text-center content-center rounded-md transition-all ease-in-out duration-600",style:{scale:N===l?1:.9,borderRadius:0===t?"".concat(x," 0 0 ").concat(x):t===o.length-1?"0 ".concat(x," ").concat(x," 0"):"0"},children:p(l,a)}),n("div",{"data-nav-item":l,className:"backdrop-blur-md absolute left-0 top-0 h-full w-full text-center content-center opacity-0",children:"A"})]},t)})})]})})}var v=function(e){return n("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"-2.5 -2.5 30 30","stroke-width":"1.5",className:"stroke-1 stroke-gray-400 w-full h-full",style:{transition:"1s ease-in-out"},children:n("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:e})})};function x(a){var l=a.blobCurvature,o=void 0===l?"2px":l,s=a.navItems,d=a.blobSize,u=void 0===d?"44px":d,h=a.blobY,f=void 0===h?"middle":h,p=a.blobTop,m=void 0===p?"-70px":p,x=c(t({x:-8,y:0}),2),g=x[0],y=x[1],b=c(t(""),2),w=b[0],k=b[1],N=c(t(null),2),M=N[0],S=N[1],L=c(t(0),2),C=L[0],z=L[1],B=e(null);return r("div",{ref:B,className:"relative w-max mx-auto",children:[n("svg",{xmlns:"http://www.w3.org/2000/svg",children:n("defs",{children:r("filter",{id:"goo",children:[n("feGaussianBlur",{in:"sourceGraphic",stdDeviation:"10",result:"blur"}),n("feColorMatrix",{in:"blur",mode:"matrix",values:"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8",result:"goo"}),n("feBlend",{in:"sourceGraphic",in2:"goo"})]})})}),r("div",{className:"apply_goo_effect absolute left-0 w-full h-full",style:{top:m},children:[n("div",{className:"bg-gray-50 dark:bg-gray-900 flex gap-20",children:s.map(function(e){var t=e.text;return n("div",{className:"hover:bg-gray-900",children:n("div",{className:"opacity-0",children:t})},t)})}),n("div",{className:"border-10 border-gray-600 dark:border-gray-500 bg-gray-900 dark:bg-gray-100 w-15 absolute",style:{top:"top"===f?"-15px":"middle"===f?"-9px":"0px",left:g.x,height:u,width:"".concat(C+12,"px"),opacity:w?1:0,borderRadius:o,transition:"1s ease-in-out"}})]}),n("div",{className:"absolute left-0 w-full h-full",style:{top:m},children:n("div",{className:"flex gap-20 absolute top-0",children:s.map(function(e){var t=e.text;return n("div",{className:"",children:n("div",{className:"text-gray-50 dark:text-gray-900",children:t})},t)})})}),n("div",{className:"flex gap-20",onMouseOver:function(e){var t=e.target.getAttribute("data-nav-item"),a=B.current;if(t&&a){var n=e.target,r=a.getBoundingClientRect().x,l=n.getBoundingClientRect(),i=l.x,o=l.y,s=l.width;y({x:i-r-10,y:o}),z(s),k(t),g.x>i-r+20?S("right"):g.x<i-r-20?S("left"):S(null)}},onMouseOut:function(){return k("")},children:s.map(function(e){var t=e.iconPath,a=e.text,l=e.url;return r("div",{className:"border border-gray-200 dark:border-gray-700 overflow-hidden text-gray-500 hover:text-gray-300 dark:hover:text-gray-300 relative cursor-default transition-all duration-700 ease-in-out rounded-md hover:scale-115",children:[n("div",{className:"opacity-0",children:a}),n("div",{className:"bg-gray-800 dark:bg-gray-200 absolute inset-0",style:{transform:w===a&&"left"===M?"scaleX(1)":"scaleX(0)",transformOrigin:"left",transition:"0.5s ease-in-out"}}),n("div",{className:"bg-gray-800 dark:bg-gray-200 absolute inset-0",style:{transform:w===a&&"right"===M?"scaleX(1)":"scaleX(0)",transformOrigin:"right",transition:"0.5s ease-in-out"}}),n("div",{className:"bg-gray-800 dark:bg-gray-200 absolute inset-0",style:{transform:w===a&&null===M?"scaleY(1)":"scaleY(0)",transformOrigin:"bottom",transition:"0.5s ease-in-out"}}),n("div",{className:"absolute top-0 left-0 inset-0 text-center",children:v(t)}),n(i,{to:l,"data-nav-item":a,className:"absolute top-0 left-0 inset-0 text-center opacity-0",children:a})]},a)})})]})}var g=function(e){return n("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"-10 -10 44 44","stroke-width":"1.5",className:"stroke-1 stroke-gray-400 mix-blend-difference w-full h-full",style:{transition:"1s ease-in-out"},children:n("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:e})})};function y(a){var l=a.navItems,o=a.paddingX,s=void 0===o?"32px":o,d=a.paddingY,u=void 0===d?"10px":d,h=a.marginTop,f=void 0===h?"0px":h,p=e(null),m=c(t(""),2),v=m[0],x=m[1];return r("section",{ref:p,className:"max-w-3xl mx-auto min-h-screen px-4",style:{marginTop:f},children:[n("svg",{xmlns:"http://www.w3.org/2000/svg",children:n("defs",{children:r("filter",{id:"goo",children:[n("feGaussianBlur",{in:"sourceGraphic",stdDeviation:"10",result:"blur"}),n("feColorMatrix",{in:"blur",mode:"matrix",values:"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8",result:"goo"}),n("feBlend",{in:"sourceGraphic",in2:"goo"})]})})}),r("div",{className:"relative w-min mx-auto",children:[n("div",{className:"absolute top-0 left-0 w-full h-full",children:r("div",{className:"relative",children:[n("div",{className:"apply_goo_effect flex bg-gray-400",style:{padding:"".concat(0," 0")},children:l.map(function(e){var t=e.text;return r("div",{className:"relative text-gray-800",children:[n("div",{className:"",style:{padding:"".concat(u," ").concat(s)},children:t}),n("div",{className:"bg-gray-800 text-transparent absolute left-0 h-full w-full",style:{padding:"0px ".concat(s),top:v===t?"-170%":"0px",transition:"1s ease-in-out"},children:t})]})})}),n("div",{className:"flex absolute left-0 h-full",style:{top:"-170%"},children:l.map(function(e){var t=e.text;return r("div",{className:"relative text-white",children:[n("div",{className:"opacity-0",style:{padding:"".concat(u," ").concat(s)},children:t}),n("div",{className:"absolute top-0 left-0 w-full h-full text-center content-center",style:{opacity:v===t?1:0,transition:"1.5s ease-in-out"},children:t})]})})})]})}),n("div",{className:"flex",style:{padding:"".concat(u," 0")},onMouseOver:function(e){var t=e.target.getAttribute("data-nav-item"),a=p.current;t&&a&&x(t)},onMouseOut:function(){x("")},children:l.map(function(e){var t=e.iconPath,a=e.text,l=e.url;return r("div",{className:"w-full relative",children:[n("div",{className:"opacity-0",style:{padding:"".concat(u," ").concat(s)},children:a}),n("div",{className:"absolute left-0 h-full w-full text-center content-center cursor-default",style:{top:"-".concat(u)},children:g(t)}),n(i,{to:l,"data-nav-item":a,className:"absolute top-0 left-0 w-full h-full opacity-0",children:a})]})})})]})]})}var b=function(e){return n("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",className:"w-5 h-5 stroke-1",style:{stroke:"#99a1af"},children:n("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:e})})},w=0;function k(e){var l=e.navItems,o=e.fontSize,s=void 0===o?"18px":o,d=e.padding,u=void 0===d?"6px 24px":d,h=c(t(null),2),f=h[0],p=h[1],m=c(t(!1),2),v=m[0],x=m[1];function g(e){var t=e.target.getAttribute("data-nav-item");clearTimeout(w),x(!1),t?(p(t),w=setTimeout(function(){x(!0)},200)):p(null)}return a(function(){return window.addEventListener("mouseover",g),function(){return window.removeEventListener("mouseover",g)}},[]),n("div",{className:"flex w-min mx-auto rounded-md bg-white [box-shadow:0px_0px_8px_0.1px_gray] text-gray-500 dark:bg-gray-800 dark:text-gray-400",children:l.map(function(e,t){var a=e.iconPath,o=e.text,c=e.url;return r("div",{className:"relative",style:{fontSize:s},children:[n("div",{className:"absolute w-full h-full inset-0 text-black dark:text-white text-center content-center blur-sm",children:"O"}),n("div",{className:"border border-gray-500 bg-gray-800 text-gray-400 dark:bg-gray-50 dark:text-gray-600 absolute left-[50%] translate-x-[-50%]",style:{padding:u,top:f===o?"-150%":"0%",transition:f===o&&v?"0.6s ease-in-out":f===o?"0.4s ease":"0.2s ease-in-out",scale:f===o&&v?"1 1":"0.07 0.17",filter:f===o&&v?"blur(0)":"blur(5px)",borderRadius:f===o&&v?"4px":"2rem"},children:o}),n("div",{className:"".concat(f===o?"bg-gray-800 dark:bg-gray-50":"bg-gray-50 dark:bg-gray-800"),style:{padding:u,transition:"0.6s",borderRadius:0===t?"6px 0 0 6px":t===l.length-1?"0 6px 6px 0":"0px",scale:f===o?"1 1":"0.9 0.9",boxShadow:"0 0 4px 0.2px #a9a9a910 inset"},children:b(a)}),n(i,{to:c,"data-nav-item":o,className:"cursor-default absolute w-full h-full inset-0 text-center content-center text-transparent",style:{padding:u},children:o})]})})})}var N=0;function M(l){var i=l.btnIconPathD,o=void 0===i?"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z":i,u=l.fontSize,h=void 0===u?"text-lg":u,f=l.fontWeight,p=void 0===f?"font-normal":f,m=l.manuallyStartAnimation,v=l.placeHolder,x=void 0===v?"":v,g=l.setData,y=l.height,b=void 0===y?"40px":y,w=l.theme,k=void 0===w?"light":w,M=l.wave,S=void 0===M?{amplitude:4,cycles:10,numOfParticles:800,particleSize:.6,smokeEffect:!1}:M,L=l.onClick,C=l.onChange,z=l.onFocus,B=l.onBlur,E=l.onKeyUp,I=l.onKeyDown,P=e(null),A=e(null),R=e(null),T=e(null),j=c(t(!1),2),O=j[0],_=j[1],D=c(t(!0),2),U=D[0],G=D[1],H=c(t(!1),2),W=H[0],X=H[1];function F(){var e=R.current;e&&e.replaceChildren("")}function Y(e,t){var a=document.getElementById("caret");if(G(!1),a){e.removeChild(a);var n=e.children[t];n?e.insertBefore(a,n):e.appendChild(a)}else{var r=document.createElement("span");r.className="h-[75%] border border-black dark:border-white animate-pulse",r.id="caret";var l=e.children[t];l?e.insertBefore(r,l):e.appendChild(r)}}var K=function(){var e=[],t=P.current,a=A.current,n=T.current;if(t&&a&&n){var r=t.getContext("2d");if(r){var l=a.getBoundingClientRect(),i=n.getBoundingClientRect();t.width=W?l.width:i.width,t.height=i.height;for(var o=S.amplitude,c=S.cycles,d=S.numOfParticles,u=S.particleSize,h=S.smokeEffect,f=0;f<d;f++){var p=Math.sin(f/d*Math.PI*c)*o;e.push({potential:1,opacity:1,del:1-f/d,x:f/d*l.width,y:l.height/2,size:u,velX:Math.abs(1.5*(Math.random()-.5)),velY:.15*(Math.random()-p),acc:0})}var m=a.children;if(m){var v=m.length,x=function(){r.clearRect(0,0,t.width,t.height);var n,l=0,i=s(m);try{for(i.s();!(n=i.n()).done;){var o=n.value;l+=.9,v-=.01,o.style.opacity="".concat(v-l)}}catch(e){i.e(e)}finally{i.f()}if(e.forEach(function(e){e.del>0?e.del-=.01:(e.x+=e.velX,e.y+=e.velY,e.opacity-=.02,e.potential-=.01),r.fillStyle="light"===k?"rgba(255, 255, 255, ".concat(1-Math.abs(e.opacity),")"):"rgba(0, 0, 0, ".concat(1-Math.abs(e.opacity),")"),r.beginPath(),r.arc(e.x,e.y,h?Math.abs(e.size*e.opacity*30):u,0,2*Math.PI),r.fill()}),e.some(function(e){return e.potential>0})||v>0)requestAnimationFrame(x);else{var c=T.current;if(!c)return;c.value="",a.innerHTML="",c.blur(),_(!1)}};x()}}}};function q(){var e,t=document.getElementById("caret");null==t||t.remove(),0===(null===(e=A.current)||void 0===e?void 0:e.children.length)&&G(!0)}return a(function(){var e=P.current,t=A.current;if(e&&(t&&e.getContext("2d"))){var a=t.getBoundingClientRect();e.width=a.width,e.height=a.height}},[]),a(function(){return function(){var e=R.current;if(e){var t,a=s(x);try{for(a.s();!(t=a.n()).done;){var n=t.value,r=document.createElement("span");r.textContent=n,r.style.color="dark"===k?"#d4d4d4":"#404040",e.appendChild(r)}}catch(e){a.e(e)}finally{a.f()}}}(),F},[k]),a(function(){if(m){var e=document.getElementById("caret");if(!e)return;_(!0),K(),e.remove()}},[m]),r("div",{className:"border border-neutral-100 dark:border-neutral-800 w-full flex text-neutral-600 dark:text-neutral-100 rounded-sm overflow-hidden pl-1",children:[r("div",{className:"relative w-full",style:{height:b},children:[n("canvas",{ref:P,className:"absolute top-0 ".concat(W?"right-0":"left-0")}),n("div",{id:"boxRef","data-set":"box",ref:A,className:"".concat(h," ").concat(p," absolute top-0 ").concat(W?"right-0":"left-0"," flex items-center h-full overflow-hidden pr-5 content-center ").concat(U?"opacity-0":"opacity-100")}),n("div",{id:"placeHolderRef","data-set":"placeholder",ref:R,className:"".concat(h," ").concat(p," absolute top-0 h-full w-full content-center ").concat(U?"opacity-100":"opacity-0")}),n("input",{ref:T,type:"text",placeholder:"User Name",className:"".concat(h," ").concat(p," absolute top-0 left-0 h-full w-full opacity-0"),onChange:function(e){!function(e){var t=A.current,a=T.current;if(t&&a){var n=e.nativeEvent,r=n.data,l=n.inputType;g(e.target.value),t.getBoundingClientRect().width>=a.getBoundingClientRect().width?X(!0):X(!1),"insertFromPaste"===l&&r&&d(r).forEach(function(e){var a=document.createElement("span");a.textContent=e,t.appendChild(a)})}}(e),C&&C(e)},onKeyDown:function(e){!function(e){var t=A.current,a=document.getElementById("caret");if(t&&a){var n=e.key;if("Enter"===n)_(!0),K(),a.remove();else if("ArrowLeft"===n){var r=a.previousSibling;t.insertBefore(a,r)}else if("ArrowRight"===n){var l=a.nextSibling;if(!l)return;t.insertBefore(l,a)}else if("Backspace"===n){var i=a.previousSibling;i&&t.removeChild(i)}else if("Delete"===n){var o=a.nextSibling;o&&t.removeChild(o)}else if("Tab"===n)t.removeChild(a);else if(" "===n){var s=document.createElement("span");s.textContent=" ",s.className="w-1 inline-block",t.insertBefore(s,document.getElementById("caret"))}else{if(1!==n.length)throw Error("not printable key");var c=document.createElement("span");c.textContent=n,t.insertBefore(c,document.getElementById("caret"))}}}(e),I&&I(e)},onKeyUp:function(e){E&&E(e)},onFocus:function(e){N=setTimeout(function(){var e;Y(A.current,(null===(e=A.current)||void 0===e?void 0:e.children.length)||0)},600),z&&z(e)},onClick:function(e){!function(e){var t=e.currentTarget.selectionStart;clearTimeout(N),Y(A.current,t||0)}(e),L&&L(e)},onBlur:function(e){q(),B&&B(e)}})]}),r("button",{className:"relative p-2  bg-neutral-800 text-neutral-600 hover:text-neutral-400 cursor-pointer transition duration-300",onClick:function(){var e;null!==(e=T.current)&&void 0!==e&&e.value&&(_(!0),K())},children:[n("div",{className:"absolute top-0 left-0 inset-0 text-center content-center text-white blur-sm",children:"O"}),r("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",className:"size-4 ".concat(O&&"animate-pulse"),children:[n("path",{className:"animate-spin origin-center text-neutral-200",strokeLinecap:"round",strokeLinejoin:"round",d:"M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99",style:{opacity:O?1:0,transition:"0.5s ease-in-out"}}),n("path",{strokeLinecap:"round",strokeLinejoin:"round",d:o,style:{opacity:O?0:1,transition:"0.5s ease-in-out"}})]})]})]})}var S=0,L=0;function C(a){var i,o=a.placeHolder,s=void 0===o?"":o,d=c(t(s),2),u=d[0],h=d[1],f=c(t(""),2),p=f[0],m=f[1],v=c(t(!1),2),x=v[0],g=v[1],y=c(t(!1),2),b=y[0],w=y[1],k=e(null),N=e(null);function M(){s&&u===s||(x||g(!0),setTimeout(function(){clearInterval(L),g(!1),console.log("khatam....");var e=N.current;e&&(e.value="",h(""))},u.length/11*1e3+1500),L=setInterval(function(){console.log("chal raha..."),m(function(e){var t=e.split("");return t.pop(),t.join("")})},(u.length/11*1e3+1500)/u.length))}return r(l,{children:[r("div",{className:"border border-neutral-200 dark:border-neutral-200/30 ".concat(u===s&&s?"text-neutral-400/50":"text-neutral-600  dark:text-neutral-300"," focus-within:[box-shadow:0px_0px_8px_0.1px_#d4d4d490_inset] flex justify-between items-center rounded-full px-1.25 py-1 transition-shadow duration-300 ease-in-out"),children:[r("div",{className:"relative w-[calc(100%-41px)] overflow-hidden",children:[n("input",{ref:N,disabled:x,type:"text",maxLength:160,className:"px-2 w-full max-w-full h-10 absolute text-transparent font-mono outline-none caret-gray-500",onChange:function(e){h(e.target.value),m(e.target.value),w(!0),clearTimeout(S),S=setTimeout(function(){w(!1)},500)},onKeyDown:function(e){"Enter"===e.key&&M()}}),n("div",{ref:k,className:"w-full pointer-events-none",children:n("div",{className:"h-10 flex justify-end",children:r("div",{className:"flex flex-col relative h-10 pl-2 mr-auto font-mono transition-transform duration-9000 ease-in",style:{animation:x&&!b?"slide ".concat(u.length/11,"s ").concat(((null===(i=k.current)||void 0===i?void 0:i.clientWidth)||10)<=120?"0.8s":"3.5s"," linear both"):"none"},children:[n("div",{className:"w-5 h-5 rounded-3xl  absolute top-[50%] -right-5 translate-y-[-50%]"}),n("div",{className:"w-full h-[50%] flex",children:u.split("").map(function(e,t){return n("div",{className:"inline-block overflow-hidden h-full",style:{animation:x&&!b?"textUpperPart 1.5s ".concat(.09*(u.length-t),"s linear both"):"none"},children:n("div"," "===e?{className:"translate-y-[6.3px]",children:" "}:{className:"translate-y-[6.3px]",children:e})},t)})}),n("div",{className:"w-full h-[50%] flex",children:u.split("").map(function(e,t){return n("div",{className:"inline-block overflow-hidden h-full",style:{animation:x&&!b?"textLowerPart 1.5s ".concat(.09*(u.length-t),"s linear both"):"none"},children:n("div"," "===e?{className:"translate-y-[-13.7px]",children:" "}:{className:"translate-y-[-13.7px]",children:e})},t)})})]})})})]}),r("div",{className:"rounded-full w-10 h-10 overflow-hidden relative",children:[n("div",{className:"w-full h-full rounded-full",style:{background:"conic-gradient(at center, orange 0% ".concat(4*Math.floor(p.length/4)/160*100,"%, transparent ").concat(4*Math.floor(p.length/4)/160*100,"% 100%)")}}),n("div",{className:"absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[87%] h-[87%] bg-gray-100 dark:bg-gray-800 rounded-full"}),n("div",{className:"absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[50%] h-[50%] ".concat(!x&&!b&&160===u.length&&"bg-sky-400 dark:bg-sky-600"," ").concat(!x&&!b&&u.length<160&&"bg-neutral-900 dark:bg-neutral-500"," ").concat(b&&"bg-orange-500 animate-pulse"," ").concat(x&&!b&&"bg-orange-500 animate-ping"," transition-all duration-500 ease-in-out rounded-full")}),n("div",{className:"absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] border-2 border-dashed border-white dark:border-neutral-900 w-full h-full rounded-full"}),n("button",{className:"absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[90%] h-[90%] rounded-full bg-gray-200/5 dark:bg-gray-50/5 text-neutral-800 backdrop-blur-[6px]",onClick:M,children:n("div",{className:"h-full w-full rounded-full flex justify-around items-center",children:[1,2,3].map(function(e,t){return n("div",{className:"w-1.5 h-1.5 rounded-full bg-neutral-800 dark:bg-neutral-100",style:{transform:x?"translate(0px, 3px)":"translate(0px, 0px)",opacity:x||b?1:0,transitionDuration:"0.3s",animation:x?"oscillateUpDown 1s ".concat(.3*t,"s linear infinite"):"dotPulseLoader 1s ".concat(.3*t,"s ease-in-out infinite")}})})})})]})]}),n("style",{children:"\n                @keyframes dotPulseLoader {\n                    0%{ transform:scale(0.9) }\n                    50%{ transform:scale(1.4) }\n                    100%{ transform:scale(0.9) }\n                }\n                @keyframes oscillateUpDown {\n                    0%{ transform:translate(0px, 3px) }\n                    50%{ transform:translate(0px, -3px) }\n                    100%{ transform:translate(0px, 3px) }\n                }\n                @keyframes slide {\n                    0%{ transform:translate(0px, 0px) }\n                    100%{ transform:translate(100%, 0px) }\n                }\n                @keyframes textUpperPart {\n                    0%{ transform:translate(0px, 0px) scale(1); filter:opacity(1); }\n                    20%{ transform:translate(1px, -7px) scale(1.2); filter:opacity(1); }\n                    40%{ transform:translate(2px, -14px) scale(1.5); filter:opacity(0.5); }\n                    60%{ transform:translate(1px, -14px) scale(1.2); filter:opacity(0.3); }\n                    80%{ transform:translate(0.5px, -7px) scale(1); filter:opacity(0.2); }\n                    95%{ transform:translate(0px, -4px) scale(0.9); filter:opacity(0.2); }\n                    100%{ transform:translate(0px, -4px) scale(0.9); filter:opacity(0); }\n                }\n                @keyframes textLowerPart {\n                    0%{ transform:translate(0px, 0px) scale(1); filter:opacity(1); }\n                    20%{ transform:translate(1px, 7px) scale(1.2); filter:opacity(1); }\n                    40%{ transform:translate(2px, 14px) scale(1.5); filter:opacity(1); }\n                    60%{ transform:translate(1px, 14px) scale(1.2); filter:opacity(0.5); }\n                    80%{ transform:translate(0.5px, 7px) scale(1); filter:opacity(0.3); }\n                    95%{ transform:translate(0px, 4px) scale(0.9); filter:opacity(0.3); }\n                    100%{ transform:translate(0px, 4px) scale(0.9); filter:opacity(0); }\n                }\n            "})]})}export{m as DiaScrollerNavbar,x as FluidNavbar,y as GooeyNavbar,f as MeteorMash,M as ParticleVanishingInput,k as PopupNavabr,C as TextSlashInput};

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 e=require("react"),t=require("react/jsx-runtime"),a=require("react-router-dom");function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,n=Array(t);a<t;a++)n[a]=e[a];return n}function r(e,t){var a="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!a){if(Array.isArray(e)||(a=o(e))||t){a&&(e=a);var n=0,r=function(){};return{s:r,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:r}}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,s=!1;return{s:function(){a=a.call(e)},n:function(){var e=a.next();return l=e.done,e},e:function(e){s=!0,i=e},f:function(){try{l||null==a.return||a.return()}finally{if(s)throw i}}}}function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var n,r,i,l,o=[],s=!0,c=!1;try{if(i=(a=a.call(e)).next,0===t);else for(;!(s=(n=i.call(a)).done)&&(o.push(n.value),o.length!==t);s=!0);}catch(e){c=!0,r=e}finally{try{if(!s&&null!=a.return&&(l=a.return(),Object(l)!==l))return}finally{if(c)throw r}}return o}}(e,t)||o(e,t)||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(e){return function(e){if(Array.isArray(e))return n(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||o(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,t){if(e){if("string"==typeof e)return n(e,t);var a={}.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a||"Set"===a?Array.from(e):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?n(e,t):void 0}}var s={light:"white",dark:"black"};var c=function(e,a){return t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"-10 -10 44 44","stroke-width":"1.5","data-nav-item":e,className:"stroke-1 stroke-neutral-400 mix-blend-difference w-full h-full",style:{transition:"1s ease-in-out"},children:t.jsx("path",{"data-nav-item":e,"stroke-linecap":"round","stroke-linejoin":"round",d:a})})};var d=function(e){return t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"-2.5 -2.5 30 30","stroke-width":"1.5",className:"stroke-1 stroke-gray-400 w-full h-full",style:{transition:"1s ease-in-out"},children:t.jsx("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:e})})};var u=function(e){return t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"-10 -10 44 44","stroke-width":"1.5",className:"stroke-1 stroke-gray-400 mix-blend-difference w-full h-full",style:{transition:"1s ease-in-out"},children:t.jsx("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:e})})};var h=function(e){return t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",className:"w-5 h-5 stroke-1",style:{stroke:"#99a1af"},children:t.jsx("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:e})})},f=0;var x=0;var p=0,m=0;exports.DiaScrollerNavbar=function(n){var r=n.navItems,l=n.fontSize,o=void 0===l?"18px":l,s=n.padding,d=void 0===s?"0px 0px":s,u=n.previewGap,h=void 0===u?"-48px":u,f=n.borderRadius,x=void 0===f?"0px":f,p=n.theme,m=i(e.useState({x:0,width:0,left:0}),2),v=m[0],g=m[1],y=i(e.useState(""),2),b=y[0],w=y[1],j=i(e.useState(!1),2),k=j[0],N=j[1],M=i(e.useState(0),2),S=M[0],L=M[1],C=e.useRef(null);return e.useEffect(function(){!function(){var e=C.current;if(e){var t=e.getBoundingClientRect().x;L(t)}}()},[]),t.jsx("div",{className:"text-neutral-500 bg-neutral-50 dark:text-neutral-400 dark:bg-neutral-900",style:{fontSize:o,boxShadow:"light"===p?"0px 0px 8px 0.1px #00000050":"0px 0px 8px 0.1px #ffffff50",borderRadius:x},children:t.jsxs("div",{ref:C,className:"relative w-min",onMouseOver:function(e){e.target.getAttribute("data-nav-item")&&N(!0)},onMouseMove:function(e){var t=e.target.getAttribute("data-nav-item");if(t){var a=e.target.getBoundingClientRect(),n=a.x,r=a.width,i=a.left;w(t),g({x:n,width:r,left:i})}},onMouseOut:function(e){e.target.getAttribute("data-nav-item")&&N(!1)},children:[t.jsx("div",{className:"rounded-sm absolute left-0 w-23 overflow-hidden transition-all ease-in-out duration-1000 border border-neutral-500",style:{translate:"".concat(v.x-S,"px"),width:v.width,opacity:k?1:0,top:h,borderRadius:x},children:t.jsx("div",{className:"w-max transition-all ease-in-out duration-1000 flex",style:{translate:"".concat(-v.x+S,"px")},children:r.map(function(e,a){var n=e.text;return t.jsx("div",{className:"transition-all ease duration-600 bg-neutral-800 text-neutral-200",style:{transform:b===n?"scale(1)":"scale(0.5)",filter:b===n?"blur(0)":"blur(7px)",padding:d,borderRadius:x},children:n},a)})})}),t.jsx("div",{style:{borderRadius:x},className:"flex overflow-hidden",children:r.map(function(e,n){var i=e.iconPath,l=e.text,o=e.url;return t.jsxs(a.NavLink,{to:o,className:"h-full cursor-pointer flex items-center relative transition-all ease-in-out duration-600 hover:bg-neutral-800 dark:hover:bg-neutral-800",style:{padding:d},children:[t.jsx("div",{className:"text-neutral-300 dark:text-neutral-600",children:l}),t.jsx("div",{className:"backdrop-blur-md absolute left-0 top-0 h-full w-full text-center content-center rounded-md transition-all ease-in-out duration-600",style:{scale:b===l?1:.9,borderRadius:0===n?"".concat(x," 0 0 ").concat(x):n===r.length-1?"0 ".concat(x," ").concat(x," 0"):"0"},children:c(l,i)}),t.jsx("div",{"data-nav-item":l,className:"backdrop-blur-md absolute left-0 top-0 h-full w-full text-center content-center opacity-0",children:"A"})]},n)})})]})})},exports.FluidNavbar=function(n){var r=n.blobCurvature,l=void 0===r?"2px":r,o=n.navItems,s=n.blobSize,c=void 0===s?"44px":s,u=n.blobY,h=void 0===u?"middle":u,f=n.blobTop,x=void 0===f?"-70px":f,p=i(e.useState({x:-8,y:0}),2),m=p[0],v=p[1],g=i(e.useState(""),2),y=g[0],b=g[1],w=i(e.useState(null),2),j=w[0],k=w[1],N=i(e.useState(0),2),M=N[0],S=N[1],L=e.useRef(null);return t.jsxs("div",{ref:L,className:"relative w-max mx-auto",children:[t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",children:t.jsx("defs",{children:t.jsxs("filter",{id:"goo",children:[t.jsx("feGaussianBlur",{in:"sourceGraphic",stdDeviation:"10",result:"blur"}),t.jsx("feColorMatrix",{in:"blur",mode:"matrix",values:"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8",result:"goo"}),t.jsx("feBlend",{in:"sourceGraphic",in2:"goo"})]})})}),t.jsxs("div",{className:"apply_goo_effect absolute left-0 w-full h-full",style:{top:x},children:[t.jsx("div",{className:"bg-gray-50 dark:bg-gray-900 flex gap-20",children:o.map(function(e){var a=e.text;return t.jsx("div",{className:"hover:bg-gray-900",children:t.jsx("div",{className:"opacity-0",children:a})},a)})}),t.jsx("div",{className:"border-10 border-gray-600 dark:border-gray-500 bg-gray-900 dark:bg-gray-100 w-15 absolute",style:{top:"top"===h?"-15px":"middle"===h?"-9px":"0px",left:m.x,height:c,width:"".concat(M+12,"px"),opacity:y?1:0,borderRadius:l,transition:"1s ease-in-out"}})]}),t.jsx("div",{className:"absolute left-0 w-full h-full",style:{top:x},children:t.jsx("div",{className:"flex gap-20 absolute top-0",children:o.map(function(e){var a=e.text;return t.jsx("div",{className:"",children:t.jsx("div",{className:"text-gray-50 dark:text-gray-900",children:a})},a)})})}),t.jsx("div",{className:"flex gap-20",onMouseOver:function(e){var t=e.target.getAttribute("data-nav-item"),a=L.current;if(t&&a){var n=e.target,r=a.getBoundingClientRect().x,i=n.getBoundingClientRect(),l=i.x,o=i.y,s=i.width;v({x:l-r-10,y:o}),S(s),b(t),m.x>l-r+20?k("right"):m.x<l-r-20?k("left"):k(null)}},onMouseOut:function(){return b("")},children:o.map(function(e){var n=e.iconPath,r=e.text,i=e.url;return t.jsxs("div",{className:"border border-gray-200 dark:border-gray-700 overflow-hidden text-gray-500 hover:text-gray-300 dark:hover:text-gray-300 relative cursor-default transition-all duration-700 ease-in-out rounded-md hover:scale-115",children:[t.jsx("div",{className:"opacity-0",children:r}),t.jsx("div",{className:"bg-gray-800 dark:bg-gray-200 absolute inset-0",style:{transform:y===r&&"left"===j?"scaleX(1)":"scaleX(0)",transformOrigin:"left",transition:"0.5s ease-in-out"}}),t.jsx("div",{className:"bg-gray-800 dark:bg-gray-200 absolute inset-0",style:{transform:y===r&&"right"===j?"scaleX(1)":"scaleX(0)",transformOrigin:"right",transition:"0.5s ease-in-out"}}),t.jsx("div",{className:"bg-gray-800 dark:bg-gray-200 absolute inset-0",style:{transform:y===r&&null===j?"scaleY(1)":"scaleY(0)",transformOrigin:"bottom",transition:"0.5s ease-in-out"}}),t.jsx("div",{className:"absolute top-0 left-0 inset-0 text-center",children:d(n)}),t.jsx(a.NavLink,{to:i,"data-nav-item":r,className:"absolute top-0 left-0 inset-0 text-center opacity-0",children:r})]},r)})})]})},exports.GooeyNavbar=function(n){var r=n.navItems,l=n.paddingX,o=void 0===l?"32px":l,s=n.paddingY,c=void 0===s?"10px":s,d=n.marginTop,h=void 0===d?"0px":d,f=e.useRef(null),x=i(e.useState(""),2),p=x[0],m=x[1];return t.jsxs("section",{ref:f,className:"max-w-3xl mx-auto min-h-screen px-4",style:{marginTop:h},children:[t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",children:t.jsx("defs",{children:t.jsxs("filter",{id:"goo",children:[t.jsx("feGaussianBlur",{in:"sourceGraphic",stdDeviation:"10",result:"blur"}),t.jsx("feColorMatrix",{in:"blur",mode:"matrix",values:"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8",result:"goo"}),t.jsx("feBlend",{in:"sourceGraphic",in2:"goo"})]})})}),t.jsxs("div",{className:"relative w-min mx-auto",children:[t.jsx("div",{className:"absolute top-0 left-0 w-full h-full",children:t.jsxs("div",{className:"relative",children:[t.jsx("div",{className:"apply_goo_effect flex bg-gray-400",style:{padding:"".concat(0," 0")},children:r.map(function(e){var a=e.text;return t.jsxs("div",{className:"relative text-gray-800",children:[t.jsx("div",{className:"",style:{padding:"".concat(c," ").concat(o)},children:a}),t.jsx("div",{className:"bg-gray-800 text-transparent absolute left-0 h-full w-full",style:{padding:"0px ".concat(o),top:p===a?"-170%":"0px",transition:"1s ease-in-out"},children:a})]})})}),t.jsx("div",{className:"flex absolute left-0 h-full",style:{top:"-170%"},children:r.map(function(e){var a=e.text;return t.jsxs("div",{className:"relative text-white",children:[t.jsx("div",{className:"opacity-0",style:{padding:"".concat(c," ").concat(o)},children:a}),t.jsx("div",{className:"absolute top-0 left-0 w-full h-full text-center content-center",style:{opacity:p===a?1:0,transition:"1.5s ease-in-out"},children:a})]})})})]})}),t.jsx("div",{className:"flex",style:{padding:"".concat(c," 0")},onMouseOver:function(e){var t=e.target.getAttribute("data-nav-item"),a=f.current;t&&a&&m(t)},onMouseOut:function(){m("")},children:r.map(function(e){var n=e.iconPath,r=e.text,i=e.url;return t.jsxs("div",{className:"w-full relative",children:[t.jsx("div",{className:"opacity-0",style:{padding:"".concat(c," ").concat(o)},children:r}),t.jsx("div",{className:"absolute left-0 h-full w-full text-center content-center cursor-default",style:{top:"-".concat(c)},children:u(n)}),t.jsx(a.NavLink,{to:i,"data-nav-item":r,className:"absolute top-0 left-0 w-full h-full opacity-0",children:r})]})})})]})]})},exports.MeteorMash=function(a){var n=a.numOfMeteors,l=void 0===n?7:n,o=a.trailLength,c=void 0===o?20:o,d=a.trailLengthShrinkable,u=void 0===d?60:d,h=a.trailThickness,f=void 0===h?3:h,x=a.meteorCoreSize,p=void 0===x?2.4:x,m=a.collisionDebriSize,v=void 0===m?2:m,g=a.theme,y=void 0===g?"light":g,b=a.bgColor,w=void 0===b?s:b,j=a.animateUntill,k=void 0===j||j,N=e.useRef(null),M=i(e.useState([]),2),S=M[0],L=M[1];return e.useEffect(function(){for(var e,t,a=[],n=(null===(e=N.current)||void 0===e||null===(e=e.parentElement)||void 0===e?void 0:e.clientHeight)||400,r=(null===(t=N.current)||void 0===t||null===(t=t.parentElement)||void 0===t?void 0:t.clientWidth)||400,i=0;i<l;i++){var o=Math.floor(Math.random()*(r/2- -r+1))+-r,s=-(c+c+100*i);a.push({index:i,x1:o,y1:s,trailLength:c,trailLengthShrinkable:u,color:"red",dots:[{index:0,x:o+c+n+100*i,y:s+c+n+100*i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:1,x:o+c+n+100*i,y:s+c+n+100*i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:2,x:o+c+n+100*i,y:s+c+n+100*i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:3,x:o+c+n+100*i,y:s+c+n+100*i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:4,x:o+c+n+100*i,y:s+c+n+100*i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:5,x:o+c+n+100*i,y:s+c+n+100*i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:6,x:o+c+n+100*i,y:s+c+n+100*i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:7,x:o+c+n+100*i,y:s+c+n+100*i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:8,x:o+c+n+100*i,y:s+c+n+100*i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:9,x:o+c+n+100*i,y:s+c+n+100*i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:10,x:o+c+n+100*i,y:s+c+n+100*i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:11,x:o+c+n+100*i,y:s+c+n+100*i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}]})}L(a)},[]),e.useEffect(function(){var e;if(k){var t=N.current;if(t){var a=t.getContext("2d");if(a&&(t.width=window.innerWidth,t.height=window.innerHeight,null!==(e=t.parentElement)&&void 0!==e&&e.clientHeight)){var n,i=t.parentElement.clientHeight,l=t.parentElement.clientWidth,o=function(){a.clearRect(0,0,t.width,t.height);var e,s=r(S);try{var d=function(){var t=e.value;if(t.x1+=2,t.y1+=2,t.trailLengthShrinkable>-20&&t.y1>=i/2){var n=Math.max(0,100*(t.y1+t.trailLength+t.trailLengthShrinkable-i/2)/i/4),o=t.trailLengthShrinkable*n/100;t.trailLengthShrinkable-=o,t.x1+=o,t.y1+=o}if(t.y1+t.trailLength+t.trailLengthShrinkable>=i){!function(){var e,n=0,i=r(t.dots);try{for(i.s();!(e=i.n()).done;){var l=e.value;n=(l.index/10*45+130)*(Math.PI/180),l.x-=Math.cos(n)*l.speed,l.y-=Math.sin(n)*l.speed,l.opacity*=.94,a.beginPath(),a.fillStyle="light"===y?"rgba(255, 106, 0,".concat(l.opacity,")"):"rgba(209, 213, 220,".concat(l.opacity,")"),a.arc(l.x+t.trailLength-t.trailLengthShrinkable+t.trailLengthShrinkable,l.y+t.trailLength-t.trailLengthShrinkable+t.trailLengthShrinkable,l.size,0,2*Math.PI,!1),a.fill()}}catch(e){i.e(e)}finally{i.f()}}()}if(t.y1>=i+150){var s=Math.floor(Math.random()*(l/2- -l+1))+-l,d=-(c+c);t.x1=s,t.y1=d,t.trailLength=c,t.trailLengthShrinkable=u,t.dots=[{index:0,x:s+c+i,y:d+c+i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}],t.dots.push({index:1,x:s+c+i,y:d+c+i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),t.dots.push({index:2,x:s+c+i,y:d+c+i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),t.dots.push({index:3,x:s+c+i,y:d+c+i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),t.dots.push({index:4,x:s+c+i,y:d+c+i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),t.dots.push({index:5,x:s+c+i,y:d+c+i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),t.dots.push({index:6,x:s+c+i,y:d+c+i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),t.dots.push({index:7,x:s+c+i,y:d+c+i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),t.dots.push({index:8,x:s+c+i,y:d+c+i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),t.dots.push({index:9,x:s+c+i,y:d+c+i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),t.dots.push({index:10,x:s+c+i,y:d+c+i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),t.dots.push({index:11,x:s+c+i,y:d+c+i,size:Math.random()*(v-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2})}a.beginPath();var h=a.createLinearGradient(t.x1,t.y1,t.x1+t.trailLength+t.trailLengthShrinkable,t.y1+t.trailLength+t.trailLengthShrinkable);h.addColorStop(0,"light"===y?"white":"black"),h.addColorStop(.2,"rgba(255,255,0,1)"),h.addColorStop(.5,"rgba(255,165,0,1)"),h.addColorStop(.8,"rgba(255,69,0,0.8)"),h.addColorStop(1,"oklch(74.6% 0.16 232.661)"),a.moveTo(t.x1,t.y1),a.lineTo(t.x1+t.trailLength+t.trailLengthShrinkable,t.y1+t.trailLength+t.trailLengthShrinkable),a.lineWidth=f,a.strokeStyle=h,a.stroke(),a.beginPath(),a.fillStyle="rgba(0, 191, 255, ".concat(1.01+Math.sin(2*Math.PI*1*(t.y1/100)),")"),a.arc(t.x1+t.trailLength+t.trailLengthShrinkable+1,t.y1+t.trailLength+t.trailLengthShrinkable+1,p,0,2*Math.PI,!1),a.fill(),a.beginPath(),a.fillStyle="rgba(255, 110, 70, ".concat(t.y1%2,")"),a.arc(t.x1+t.trailLength+t.trailLengthShrinkable+1,t.y1+t.trailLength+t.trailLengthShrinkable+1,p-.4,0,2*Math.PI,!1),a.fill()};for(s.s();!(e=s.n()).done;)d()}catch(e){s.e(e)}finally{s.f()}n=requestAnimationFrame(o)};return o(),function(){cancelAnimationFrame(n)}}}}else console.log("animateUntill is false")},[S,k]),t.jsx("div",{className:"relative w-full h-full overflow-hidden",children:t.jsx("canvas",{ref:N,className:"absolute top-0 left-0 bg-[".concat(w[y],"]")})})},exports.ParticleVanishingInput=function(a){var n=a.btnIconPathD,o=void 0===n?"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z":n,s=a.fontSize,c=void 0===s?"text-lg":s,d=a.fontWeight,u=void 0===d?"font-normal":d,h=a.manuallyStartAnimation,f=a.placeHolder,p=void 0===f?"":f,m=a.setData,v=a.height,g=void 0===v?"40px":v,y=a.theme,b=void 0===y?"light":y,w=a.wave,j=void 0===w?{amplitude:4,cycles:10,numOfParticles:800,particleSize:.6,smokeEffect:!1}:w,k=a.onClick,N=a.onChange,M=a.onFocus,S=a.onBlur,L=a.onKeyUp,C=a.onKeyDown,z=e.useRef(null),E=e.useRef(null),B=e.useRef(null),R=e.useRef(null),I=i(e.useState(!1),2),P=I[0],A=I[1],T=i(e.useState(!0),2),O=T[0],D=T[1],_=i(e.useState(!1),2),U=_[0],G=_[1];function F(){var e=B.current;e&&e.replaceChildren("")}function H(e,t){var a=document.getElementById("caret");if(D(!1),a){e.removeChild(a);var n=e.children[t];n?e.insertBefore(a,n):e.appendChild(a)}else{var r=document.createElement("span");r.className="h-[75%] border border-black dark:border-white animate-pulse",r.id="caret";var i=e.children[t];i?e.insertBefore(r,i):e.appendChild(r)}}var W=function(){var e=[],t=z.current,a=E.current,n=R.current;if(t&&a&&n){var i=t.getContext("2d");if(i){var l=a.getBoundingClientRect(),o=n.getBoundingClientRect();t.width=U?l.width:o.width,t.height=o.height;for(var s=j.amplitude,c=j.cycles,d=j.numOfParticles,u=j.particleSize,h=j.smokeEffect,f=0;f<d;f++){var x=Math.sin(f/d*Math.PI*c)*s;e.push({potential:1,opacity:1,del:1-f/d,x:f/d*l.width,y:l.height/2,size:u,velX:Math.abs(1.5*(Math.random()-.5)),velY:.15*(Math.random()-x),acc:0})}var p=a.children;if(p){var m=p.length,v=function(){i.clearRect(0,0,t.width,t.height);var n,l=0,o=r(p);try{for(o.s();!(n=o.n()).done;){var s=n.value;l+=.9,m-=.01,s.style.opacity="".concat(m-l)}}catch(e){o.e(e)}finally{o.f()}if(e.forEach(function(e){e.del>0?e.del-=.01:(e.x+=e.velX,e.y+=e.velY,e.opacity-=.02,e.potential-=.01),i.fillStyle="light"===b?"rgba(255, 255, 255, ".concat(1-Math.abs(e.opacity),")"):"rgba(0, 0, 0, ".concat(1-Math.abs(e.opacity),")"),i.beginPath(),i.arc(e.x,e.y,h?Math.abs(e.size*e.opacity*30):u,0,2*Math.PI),i.fill()}),e.some(function(e){return e.potential>0})||m>0)requestAnimationFrame(v);else{var c=R.current;if(!c)return;c.value="",a.innerHTML="",c.blur(),A(!1)}};v()}}}};function X(){var e,t=document.getElementById("caret");null==t||t.remove(),0===(null===(e=E.current)||void 0===e?void 0:e.children.length)&&D(!0)}return e.useEffect(function(){var e=z.current,t=E.current;if(e&&(t&&e.getContext("2d"))){var a=t.getBoundingClientRect();e.width=a.width,e.height=a.height}},[]),e.useEffect(function(){return function(){var e=B.current;if(e){var t,a=r(p);try{for(a.s();!(t=a.n()).done;){var n=t.value,i=document.createElement("span");i.textContent=n,i.style.color="dark"===b?"#d4d4d4":"#404040",e.appendChild(i)}}catch(e){a.e(e)}finally{a.f()}}}(),F},[b]),e.useEffect(function(){if(h){var e=document.getElementById("caret");if(!e)return;A(!0),W(),e.remove()}},[h]),t.jsxs("div",{className:"border border-neutral-100 dark:border-neutral-800 w-full flex text-neutral-600 dark:text-neutral-100 rounded-sm overflow-hidden pl-1",children:[t.jsxs("div",{className:"relative w-full",style:{height:g},children:[t.jsx("canvas",{ref:z,className:"absolute top-0 ".concat(U?"right-0":"left-0")}),t.jsx("div",{id:"boxRef","data-set":"box",ref:E,className:"".concat(c," ").concat(u," absolute top-0 ").concat(U?"right-0":"left-0"," flex items-center h-full overflow-hidden pr-5 content-center ").concat(O?"opacity-0":"opacity-100")}),t.jsx("div",{id:"placeHolderRef","data-set":"placeholder",ref:B,className:"".concat(c," ").concat(u," absolute top-0 h-full w-full content-center ").concat(O?"opacity-100":"opacity-0")}),t.jsx("input",{ref:R,type:"text",placeholder:"User Name",className:"".concat(c," ").concat(u," absolute top-0 left-0 h-full w-full opacity-0"),onChange:function(e){!function(e){var t=E.current,a=R.current;if(t&&a){var n=e.nativeEvent,r=n.data,i=n.inputType;m(e.target.value),t.getBoundingClientRect().width>=a.getBoundingClientRect().width?G(!0):G(!1),"insertFromPaste"===i&&r&&l(r).forEach(function(e){var a=document.createElement("span");a.textContent=e,t.appendChild(a)})}}(e),N&&N(e)},onKeyDown:function(e){!function(e){var t=E.current,a=document.getElementById("caret");if(t&&a){var n=e.key;if("Enter"===n)A(!0),W(),a.remove();else if("ArrowLeft"===n){var r=a.previousSibling;t.insertBefore(a,r)}else if("ArrowRight"===n){var i=a.nextSibling;if(!i)return;t.insertBefore(i,a)}else if("Backspace"===n){var l=a.previousSibling;l&&t.removeChild(l)}else if("Delete"===n){var o=a.nextSibling;o&&t.removeChild(o)}else if("Tab"===n)t.removeChild(a);else if(" "===n){var s=document.createElement("span");s.textContent=" ",s.className="w-1 inline-block",t.insertBefore(s,document.getElementById("caret"))}else{if(1!==n.length)throw Error("not printable key");var c=document.createElement("span");c.textContent=n,t.insertBefore(c,document.getElementById("caret"))}}}(e),C&&C(e)},onKeyUp:function(e){L&&L(e)},onFocus:function(e){x=setTimeout(function(){var e;H(E.current,(null===(e=E.current)||void 0===e?void 0:e.children.length)||0)},600),M&&M(e)},onClick:function(e){!function(e){var t=e.currentTarget.selectionStart;clearTimeout(x),H(E.current,t||0)}(e),k&&k(e)},onBlur:function(e){X(),S&&S(e)}})]}),t.jsxs("button",{className:"relative p-2  bg-neutral-800 text-neutral-600 hover:text-neutral-400 cursor-pointer transition duration-300",onClick:function(){var e;null!==(e=R.current)&&void 0!==e&&e.value&&(A(!0),W())},children:[t.jsx("div",{className:"absolute top-0 left-0 inset-0 text-center content-center text-white blur-sm",children:"O"}),t.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",className:"size-4 ".concat(P&&"animate-pulse"),children:[t.jsx("path",{className:"animate-spin origin-center text-neutral-200",strokeLinecap:"round",strokeLinejoin:"round",d:"M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99",style:{opacity:P?1:0,transition:"0.5s ease-in-out"}}),t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:o,style:{opacity:P?0:1,transition:"0.5s ease-in-out"}})]})]})]})},exports.PopupNavabr=function(n){var r=n.navItems,l=n.fontSize,o=void 0===l?"18px":l,s=n.padding,c=void 0===s?"6px 24px":s,d=i(e.useState(null),2),u=d[0],x=d[1],p=i(e.useState(!1),2),m=p[0],v=p[1];function g(e){var t=e.target.getAttribute("data-nav-item");clearTimeout(f),v(!1),t?(x(t),f=setTimeout(function(){v(!0)},200)):x(null)}return e.useEffect(function(){return window.addEventListener("mouseover",g),function(){return window.removeEventListener("mouseover",g)}},[]),t.jsx("div",{className:"flex w-min mx-auto rounded-md bg-white [box-shadow:0px_0px_8px_0.1px_gray] text-gray-500 dark:bg-gray-800 dark:text-gray-400",children:r.map(function(e,n){var i=e.iconPath,l=e.text,s=e.url;return t.jsxs("div",{className:"relative",style:{fontSize:o},children:[t.jsx("div",{className:"absolute w-full h-full inset-0 text-black dark:text-white text-center content-center blur-sm",children:"O"}),t.jsx("div",{className:"border border-gray-500 bg-gray-800 text-gray-400 dark:bg-gray-50 dark:text-gray-600 absolute left-[50%] translate-x-[-50%]",style:{padding:c,top:u===l?"-150%":"0%",transition:u===l&&m?"0.6s ease-in-out":u===l?"0.4s ease":"0.2s ease-in-out",scale:u===l&&m?"1 1":"0.07 0.17",filter:u===l&&m?"blur(0)":"blur(5px)",borderRadius:u===l&&m?"4px":"2rem"},children:l}),t.jsx("div",{className:"".concat(u===l?"bg-gray-800 dark:bg-gray-50":"bg-gray-50 dark:bg-gray-800"),style:{padding:c,transition:"0.6s",borderRadius:0===n?"6px 0 0 6px":n===r.length-1?"0 6px 6px 0":"0px",scale:u===l?"1 1":"0.9 0.9",boxShadow:"0 0 4px 0.2px #a9a9a910 inset"},children:h(i)}),t.jsx(a.NavLink,{to:s,"data-nav-item":l,className:"cursor-default absolute w-full h-full inset-0 text-center content-center text-transparent",style:{padding:c},children:l})]})})})},exports.TextSlashInput=function(a){var n,r=a.placeHolder,l=void 0===r?"":r,o=i(e.useState(l),2),s=o[0],c=o[1],d=i(e.useState(""),2),u=d[0],h=d[1],f=i(e.useState(!1),2),x=f[0],v=f[1],g=i(e.useState(!1),2),y=g[0],b=g[1],w=e.useRef(null),j=e.useRef(null);function k(){l&&s===l||(x||v(!0),setTimeout(function(){clearInterval(m),v(!1),console.log("khatam....");var e=j.current;e&&(e.value="",c(""))},s.length/11*1e3+1500),m=setInterval(function(){console.log("chal raha..."),h(function(e){var t=e.split("");return t.pop(),t.join("")})},(s.length/11*1e3+1500)/s.length))}return t.jsxs(t.Fragment,{children:[t.jsxs("div",{className:"border border-neutral-200 dark:border-neutral-200/30 ".concat(s===l&&l?"text-neutral-400/50":"text-neutral-600  dark:text-neutral-300"," focus-within:[box-shadow:0px_0px_8px_0.1px_#d4d4d490_inset] flex justify-between items-center rounded-full px-1.25 py-1 transition-shadow duration-300 ease-in-out"),children:[t.jsxs("div",{className:"relative w-[calc(100%-41px)] overflow-hidden",children:[t.jsx("input",{ref:j,disabled:x,type:"text",maxLength:160,className:"px-2 w-full max-w-full h-10 absolute text-transparent font-mono outline-none caret-gray-500",onChange:function(e){c(e.target.value),h(e.target.value),b(!0),clearTimeout(p),p=setTimeout(function(){b(!1)},500)},onKeyDown:function(e){"Enter"===e.key&&k()}}),t.jsx("div",{ref:w,className:"w-full pointer-events-none",children:t.jsx("div",{className:"h-10 flex justify-end",children:t.jsxs("div",{className:"flex flex-col relative h-10 pl-2 mr-auto font-mono transition-transform duration-9000 ease-in",style:{animation:x&&!y?"slide ".concat(s.length/11,"s ").concat(((null===(n=w.current)||void 0===n?void 0:n.clientWidth)||10)<=120?"0.8s":"3.5s"," linear both"):"none"},children:[t.jsx("div",{className:"w-5 h-5 rounded-3xl  absolute top-[50%] -right-5 translate-y-[-50%]"}),t.jsx("div",{className:"w-full h-[50%] flex",children:s.split("").map(function(e,a){return t.jsx("div",{className:"inline-block overflow-hidden h-full",style:{animation:x&&!y?"textUpperPart 1.5s ".concat(.09*(s.length-a),"s linear both"):"none"},children:" "===e?t.jsx("div",{className:"translate-y-[6.3px]",children:" "}):t.jsx("div",{className:"translate-y-[6.3px]",children:e})},a)})}),t.jsx("div",{className:"w-full h-[50%] flex",children:s.split("").map(function(e,a){return t.jsx("div",{className:"inline-block overflow-hidden h-full",style:{animation:x&&!y?"textLowerPart 1.5s ".concat(.09*(s.length-a),"s linear both"):"none"},children:" "===e?t.jsx("div",{className:"translate-y-[-13.7px]",children:" "}):t.jsx("div",{className:"translate-y-[-13.7px]",children:e})},a)})})]})})})]}),t.jsxs("div",{className:"rounded-full w-10 h-10 overflow-hidden relative",children:[t.jsx("div",{className:"w-full h-full rounded-full",style:{background:"conic-gradient(at center, orange 0% ".concat(4*Math.floor(u.length/4)/160*100,"%, transparent ").concat(4*Math.floor(u.length/4)/160*100,"% 100%)")}}),t.jsx("div",{className:"absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[87%] h-[87%] bg-gray-100 dark:bg-gray-800 rounded-full"}),t.jsx("div",{className:"absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[50%] h-[50%] ".concat(!x&&!y&&160===s.length&&"bg-sky-400 dark:bg-sky-600"," ").concat(!x&&!y&&s.length<160&&"bg-neutral-900 dark:bg-neutral-500"," ").concat(y&&"bg-orange-500 animate-pulse"," ").concat(x&&!y&&"bg-orange-500 animate-ping"," transition-all duration-500 ease-in-out rounded-full")}),t.jsx("div",{className:"absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] border-2 border-dashed border-white dark:border-neutral-900 w-full h-full rounded-full"}),t.jsx("button",{className:"absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[90%] h-[90%] rounded-full bg-gray-200/5 dark:bg-gray-50/5 text-neutral-800 backdrop-blur-[6px]",onClick:k,children:t.jsx("div",{className:"h-full w-full rounded-full flex justify-around items-center",children:[1,2,3].map(function(e,a){return t.jsx("div",{className:"w-1.5 h-1.5 rounded-full bg-neutral-800 dark:bg-neutral-100",style:{transform:x?"translate(0px, 3px)":"translate(0px, 0px)",opacity:x||y?1:0,transitionDuration:"0.3s",animation:x?"oscillateUpDown 1s ".concat(.3*a,"s linear infinite"):"dotPulseLoader 1s ".concat(.3*a,"s ease-in-out infinite")}})})})})]})]}),t.jsx("style",{children:"\n                @keyframes dotPulseLoader {\n                    0%{ transform:scale(0.9) }\n                    50%{ transform:scale(1.4) }\n                    100%{ transform:scale(0.9) }\n                }\n                @keyframes oscillateUpDown {\n                    0%{ transform:translate(0px, 3px) }\n                    50%{ transform:translate(0px, -3px) }\n                    100%{ transform:translate(0px, 3px) }\n                }\n                @keyframes slide {\n                    0%{ transform:translate(0px, 0px) }\n                    100%{ transform:translate(100%, 0px) }\n                }\n                @keyframes textUpperPart {\n                    0%{ transform:translate(0px, 0px) scale(1); filter:opacity(1); }\n                    20%{ transform:translate(1px, -7px) scale(1.2); filter:opacity(1); }\n                    40%{ transform:translate(2px, -14px) scale(1.5); filter:opacity(0.5); }\n                    60%{ transform:translate(1px, -14px) scale(1.2); filter:opacity(0.3); }\n                    80%{ transform:translate(0.5px, -7px) scale(1); filter:opacity(0.2); }\n                    95%{ transform:translate(0px, -4px) scale(0.9); filter:opacity(0.2); }\n                    100%{ transform:translate(0px, -4px) scale(0.9); filter:opacity(0); }\n                }\n                @keyframes textLowerPart {\n                    0%{ transform:translate(0px, 0px) scale(1); filter:opacity(1); }\n                    20%{ transform:translate(1px, 7px) scale(1.2); filter:opacity(1); }\n                    40%{ transform:translate(2px, 14px) scale(1.5); filter:opacity(1); }\n                    60%{ transform:translate(1px, 14px) scale(1.2); filter:opacity(0.5); }\n                    80%{ transform:translate(0.5px, 7px) scale(1); filter:opacity(0.3); }\n                    95%{ transform:translate(0px, 4px) scale(0.9); filter:opacity(0.3); }\n                    100%{ transform:translate(0px, 4px) scale(0.9); filter:opacity(0); }\n                }\n            "})]})};

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,868 @@
     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\(N\[w\]\,\"\] {
+    background-color: ".concat(N[w],";
+  }
+  .bg-\[\"\.concat\(w\[y\]\,\"\] {
+    background-color: ".concat(w[y],";
+  }
+  .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,);
+  }
+  .filter {
+    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.7",
   "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"
   }