kotnala_ui 1.0.3 → 1.0.6

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

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

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

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

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

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

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

@@ -1,2 +1,14 @@
-declare function MeteorMash(): import("react").JSX.Element;
+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,2 @@
 import "./styles.css";
-export { default as MeteorMash } from "./components/meteor_mash/MeteorMash.js";
+export { default as MeteorMash } from "./components/meteor_mash/MeteorMash";

package/dist/index.esm.js

@@ -1,10 +1 @@
-import e from"react";var r,t={exports:{}},n={};var o,a,i={};
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */function s(){return o||(o=1,"production"!==process.env.NODE_ENV&&function(){var r=e,t=Symbol.for("react.element"),n=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),s=Symbol.for("react.profiler"),c=Symbol.for("react.provider"),l=Symbol.for("react.context"),u=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),p=Symbol.for("react.suspense_list"),y=Symbol.for("react.memo"),d=Symbol.for("react.lazy"),v=Symbol.for("react.offscreen"),m=Symbol.iterator;var g=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function b(e){for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];!function(e,r,t){var n=g.ReactDebugCurrentFrame,o=n.getStackAddendum();""!==o&&(r+="%s",t=t.concat([o]));var a=t.map(function(e){return String(e)});a.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,a)}("error",e,t)}var h;function _(e){return e.displayName||"Context"}function k(e){if(null==e)return null;if("number"==typeof e.tag&&b("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),"function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case o:return"Fragment";case n:return"Portal";case s:return"Profiler";case a:return"StrictMode";case f:return"Suspense";case p:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case l:return _(e)+".Consumer";case c:return _(e._context)+".Provider";case u:return function(e,r,t){var n=e.displayName;if(n)return n;var o=r.displayName||r.name||"";return""!==o?t+"("+o+")":t}(e,e.render,"ForwardRef");case y:var r=e.displayName||null;return null!==r?r:k(e.type)||"Memo";case d:var t=e,i=t._payload,v=t._init;try{return k(v(i))}catch(e){return null}}return null}h=Symbol.for("react.module.reference");var w,S,O,j,R,E,P,T=Object.assign,x=0;function $(){}$.__reactDisabledLog=!0;var N,C=g.ReactCurrentDispatcher;function D(e,r,t){if(void 0===N)try{throw Error()}catch(e){var n=e.stack.trim().match(/\n( *(at )?)/);N=n&&n[1]||""}return"\n"+N+e}var F,I=!1,L="function"==typeof WeakMap?WeakMap:Map;function U(e,r){if(!e||I)return"";var t,n=F.get(e);if(void 0!==n)return n;I=!0;var o,a=Error.prepareStackTrace;Error.prepareStackTrace=void 0,o=C.current,C.current=null,function(){if(0===x){w=console.log,S=console.info,O=console.warn,j=console.error,R=console.group,E=console.groupCollapsed,P=console.groupEnd;var e={configurable:!0,enumerable:!0,value:$,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}x++}();try{if(r){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(i,[])}catch(e){t=e}Reflect.construct(e,[],i)}else{try{i.call()}catch(e){t=e}e.call(i.prototype)}}else{try{throw Error()}catch(e){t=e}e()}}catch(r){if(r&&t&&"string"==typeof r.stack){for(var s=r.stack.split("\n"),c=t.stack.split("\n"),l=s.length-1,u=c.length-1;l>=1&&u>=0&&s[l]!==c[u];)u--;for(;l>=1&&u>=0;l--,u--)if(s[l]!==c[u]){if(1!==l||1!==u)do{if(l--,--u<0||s[l]!==c[u]){var f="\n"+s[l].replace(" at new "," at ");return e.displayName&&f.includes("<anonymous>")&&(f=f.replace("<anonymous>",e.displayName)),"function"==typeof e&&F.set(e,f),f}}while(l>=1&&u>=0);break}}}finally{I=!1,C.current=o,function(){if(0===--x){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:T({},e,{value:w}),info:T({},e,{value:S}),warn:T({},e,{value:O}),error:T({},e,{value:j}),group:T({},e,{value:R}),groupCollapsed:T({},e,{value:E}),groupEnd:T({},e,{value:P})})}x<0&&b("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}(),Error.prepareStackTrace=a}var p=e?e.displayName||e.name:"",y=p?D(p):"";return"function"==typeof e&&F.set(e,y),y}function W(e,r,t){if(null==e)return"";if("function"==typeof e)return U(e,!(!(n=e.prototype)||!n.isReactComponent));var n;if("string"==typeof e)return D(e);switch(e){case f:return D("Suspense");case p:return D("SuspenseList")}if("object"==typeof e)switch(e.$$typeof){case u:return U(e.render,!1);case y:return W(e.type,r,t);case d:var o=e,a=o._payload,i=o._init;try{return W(i(a),r,t)}catch(e){}}return""}F=new L;var A=Object.prototype.hasOwnProperty,z={},M=g.ReactDebugCurrentFrame;function Y(e){if(e){var r=e._owner,t=W(e.type,e._source,r?r.type:null);M.setExtraStackFrame(t)}else M.setExtraStackFrame(null)}var B=Array.isArray;function V(e){return B(e)}function J(e){return""+e}function K(e){if(function(e){try{return J(e),!1}catch(e){return!0}}(e))return b("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",function(e){return"function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object"}(e)),J(e)}var X,q,H=g.ReactCurrentOwner,G={key:!0,ref:!0,__self:!0,__source:!0};function Q(e,r,n,o,a){var i,s={},c=null,l=null;for(i in void 0!==n&&(K(n),c=""+n),function(e){if(A.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return void 0!==e.key}(r)&&(K(r.key),c=""+r.key),function(e){if(A.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return void 0!==e.ref}(r)&&(l=r.ref,function(e){"string"==typeof e.ref&&H.current}(r)),r)A.call(r,i)&&!G.hasOwnProperty(i)&&(s[i]=r[i]);if(e&&e.defaultProps){var u=e.defaultProps;for(i in u)void 0===s[i]&&(s[i]=u[i])}if(c||l){var f="function"==typeof e?e.displayName||e.name||"Unknown":e;c&&function(e,r){var t=function(){X||(X=!0,b("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(s,f),l&&function(e,r){var t=function(){q||(q=!0,b("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}(s,f)}return function(e,r,n,o,a,i,s){var c={$$typeof:t,type:e,key:r,ref:n,props:s,_owner:i,_store:{}};return Object.defineProperty(c._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(c,"_self",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.defineProperty(c,"_source",{configurable:!1,enumerable:!1,writable:!1,value:a}),Object.freeze&&(Object.freeze(c.props),Object.freeze(c)),c}(e,c,l,a,o,H.current,s)}var Z,ee=g.ReactCurrentOwner,re=g.ReactDebugCurrentFrame;function te(e){if(e){var r=e._owner,t=W(e.type,e._source,r?r.type:null);re.setExtraStackFrame(t)}else re.setExtraStackFrame(null)}function ne(e){return"object"==typeof e&&null!==e&&e.$$typeof===t}function oe(){if(ee.current){var e=k(ee.current.type);if(e)return"\n\nCheck the render method of `"+e+"`."}return""}Z=!1;var ae={};function ie(e,r){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var t=function(e){var r=oe();if(!r){var t="string"==typeof e?e:e.displayName||e.name;t&&(r="\n\nCheck the top-level render call using <"+t+">.")}return r}(r);if(!ae[t]){ae[t]=!0;var n="";e&&e._owner&&e._owner!==ee.current&&(n=" It was passed a child from "+k(e._owner.type)+"."),te(e),b('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,n),te(null)}}}function se(e,r){if("object"==typeof e)if(V(e))for(var t=0;t<e.length;t++){var n=e[t];ne(n)&&ie(n,r)}else if(ne(e))e._store&&(e._store.validated=!0);else if(e){var o=function(e){if(null===e||"object"!=typeof e)return null;var r=m&&e[m]||e["@@iterator"];return"function"==typeof r?r:null}(e);if("function"==typeof o&&o!==e.entries)for(var a,i=o.call(e);!(a=i.next()).done;)ne(a.value)&&ie(a.value,r)}}function ce(e){var r,t=e.type;if(null!=t&&"string"!=typeof t){if("function"==typeof t)r=t.propTypes;else{if("object"!=typeof t||t.$$typeof!==u&&t.$$typeof!==y)return;r=t.propTypes}if(r){var n=k(t);!function(e,r,t,n,o){var a=Function.call.bind(A);for(var i in e)if(a(e,i)){var s=void 0;try{if("function"!=typeof e[i]){var c=Error((n||"React class")+": "+t+" type `"+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[i]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw c.name="Invariant Violation",c}s=e[i](r,i,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(e){s=e}!s||s instanceof Error||(Y(o),b("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",t,i,typeof s),Y(null)),s instanceof Error&&!(s.message in z)&&(z[s.message]=!0,Y(o),b("Failed %s type: %s",t,s.message),Y(null))}}(r,e.props,"prop",n,e)}else if(void 0!==t.PropTypes&&!Z){Z=!0,b("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",k(t)||"Unknown")}"function"!=typeof t.getDefaultProps||t.getDefaultProps.isReactClassApproved||b("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}var le={};function ue(e,r,n,i,m,g){var _=function(e){return"string"==typeof e||"function"==typeof e||e===o||e===s||e===a||e===f||e===p||e===v||"object"==typeof e&&null!==e&&(e.$$typeof===d||e.$$typeof===y||e.$$typeof===c||e.$$typeof===l||e.$$typeof===u||e.$$typeof===h||void 0!==e.getModuleId)}(e);if(!_){var w="";(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).length)&&(w+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var S;w+=oe(),null===e?S="null":V(e)?S="array":void 0!==e&&e.$$typeof===t?(S="<"+(k(e.type)||"Unknown")+" />",w=" Did you accidentally export a JSX literal instead of a component?"):S=typeof e,b("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",S,w)}var O=Q(e,r,n,m,g);if(null==O)return O;if(_){var j=r.children;if(void 0!==j)if(i)if(V(j)){for(var R=0;R<j.length;R++)se(j[R],e);Object.freeze&&Object.freeze(j)}else b("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else se(j,e)}if(A.call(r,"key")){var E=k(e),P=Object.keys(r).filter(function(e){return"key"!==e}),T=P.length>0?"{key: someKey, "+P.join(": ..., ")+": ...}":"{key: someKey}";if(!le[E+T])b('A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',T,E,P.length>0?"{"+P.join(": ..., ")+": ...}":"{}",E),le[E+T]=!0}return e===o?function(e){for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if("children"!==n&&"key"!==n){te(e),b("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),te(null);break}}null!==e.ref&&(te(e),b("Invalid attribute `ref` supplied to `React.Fragment`."),te(null))}(O):ce(O),O}var fe=function(e,r,t){return ue(e,r,t,!1)},pe=function(e,r,t){return ue(e,r,t,!0)};i.Fragment=o,i.jsx=fe,i.jsxs=pe}()),i}var c=(a||(a=1,"production"===process.env.NODE_ENV?t.exports=function(){if(r)return n;r=1;var t=e,o=Symbol.for("react.element"),a=Symbol.for("react.fragment"),i=Object.prototype.hasOwnProperty,s=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,c={key:!0,ref:!0,__self:!0,__source:!0};function l(e,r,t){var n,a={},l=null,u=null;for(n in void 0!==t&&(l=""+t),void 0!==r.key&&(l=""+r.key),void 0!==r.ref&&(u=r.ref),r)i.call(r,n)&&!c.hasOwnProperty(n)&&(a[n]=r[n]);if(e&&e.defaultProps)for(n in r=e.defaultProps)void 0===a[n]&&(a[n]=r[n]);return{$$typeof:o,type:e,key:l,ref:u,props:a,_owner:s.current}}return n.Fragment=a,n.jsx=l,n.jsxs=l,n}():t.exports=s()),t.exports);function l(){return c.jsx("div",{className:"",children:"this is meteor mash"})}export{l as MeteorMash};
+import{useRef as t,useState as e,useEffect as a}from"react";import{jsx as r}from"react/jsx-runtime";function n(t,e){(null==e||e>t.length)&&(e=t.length);for(var a=0,r=Array(e);a<e;a++)r[a]=t[a];return r}function o(t,e){var a="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!a){if(Array.isArray(t)||(a=l(t))||e){a&&(t=a);var r=0,n=function(){};return{s:n,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,i=!0,d=!1;return{s:function(){a=a.call(t)},n:function(){var t=a.next();return i=t.done,t},e:function(t){d=!0,o=t},f:function(){try{i||null==a.return||a.return()}finally{if(d)throw o}}}}function i(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var a=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=a){var r,n,o,i,l=[],d=!0,h=!1;try{if(o=(a=a.call(t)).next,0===e);else for(;!(d=(r=o.call(a)).done)&&(l.push(r.value),l.length!==e);d=!0);}catch(t){h=!0,n=t}finally{try{if(!d&&null!=a.return&&(i=a.return(),Object(i)!==i))return}finally{if(h)throw n}}return l}}(t,e)||l(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(t,e){if(t){if("string"==typeof t)return n(t,e);var a={}.toString.call(t).slice(8,-1);return"Object"===a&&t.constructor&&(a=t.constructor.name),"Map"===a||"Set"===a?Array.from(t):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?n(t,e):void 0}}var d={light:"white",dark:"black"};function h(n){var l=n.numOfMeteors,h=void 0===l?7:l,c=n.trailLength,s=void 0===c?20:c,y=n.trailLengthShrinkable,m=void 0===y?60:y,p=n.trailThickness,u=void 0===p?3:p,f=n.meteorCoreSize,x=void 0===f?2.4:f,g=n.collisionDebriSize,M=void 0===g?2:g,v=n.theme,b=void 0===v?"light":v,S=n.bgColor,L=void 0===S?d:S,k=n.animateUntill,z=void 0===k||k,w=t(null),A=i(e([]),2),I=A[0],C=A[1];return a(function(){for(var t,e,a=[],r=(null===(t=w.current)||void 0===t||null===(t=t.parentElement)||void 0===t?void 0:t.clientHeight)||400,n=(null===(e=w.current)||void 0===e||null===(e=e.parentElement)||void 0===e?void 0:e.clientWidth)||400,o=0;o<h;o++){var i=Math.floor(Math.random()*(n/2- -n+1))+-n,l=-(s+s+100*o);a.push({index:o,x1:i,y1:l,trailLength:s,trailLengthShrinkable:m,color:"red",dots:[{index:0,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:1,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:2,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:3,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:4,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:5,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:6,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:7,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:8,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:9,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:10,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:11,x:i+s+r+100*o,y:l+s+r+100*o,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}]})}C(a)},[]),a(function(){var t;if(z){var e=w.current;if(e){var a=e.getContext("2d");if(a&&(e.width=window.innerWidth,e.height=window.innerHeight,null!==(t=e.parentElement)&&void 0!==t&&t.clientHeight)){var r,n=e.parentElement.clientHeight,i=e.parentElement.clientWidth,l=function(){a.clearRect(0,0,e.width,e.height);var t,d=o(I);try{var h=function(){var e=t.value;if(e.x1+=2,e.y1+=2,e.trailLengthShrinkable>-20&&e.y1>=n/2){var r=Math.max(0,100*(e.y1+e.trailLength+e.trailLengthShrinkable-n/2)/n/4),l=e.trailLengthShrinkable*r/100;e.trailLengthShrinkable-=l,e.x1+=l,e.y1+=l}if(e.y1+e.trailLength+e.trailLengthShrinkable>=n){!function(){var t,r=0,n=o(e.dots);try{for(n.s();!(t=n.n()).done;){var i=t.value;r=(i.index/10*45+130)*(Math.PI/180),i.x-=Math.cos(r)*i.speed,i.y-=Math.sin(r)*i.speed,i.opacity*=.94,a.beginPath(),a.fillStyle="light"===b?"rgba(255, 106, 0,".concat(i.opacity,")"):"rgba(209, 213, 220,".concat(i.opacity,")"),a.arc(i.x+e.trailLength-e.trailLengthShrinkable+e.trailLengthShrinkable,i.y+e.trailLength-e.trailLengthShrinkable+e.trailLengthShrinkable,i.size,0,2*Math.PI,!1),a.fill()}}catch(t){n.e(t)}finally{n.f()}}()}if(e.y1>=n+150){var d=Math.floor(Math.random()*(i/2- -i+1))+-i,h=-(s+s);e.x1=d,e.y1=h,e.trailLength=s,e.trailLengthShrinkable=m,e.dots=[{index:0,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}],e.dots.push({index:1,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:2,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:3,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:4,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:5,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:6,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:7,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:8,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:9,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:10,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:11,x:d+s+n,y:h+s+n,size:Math.random()*(M-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2})}a.beginPath();var c=a.createLinearGradient(e.x1,e.y1,e.x1+e.trailLength+e.trailLengthShrinkable,e.y1+e.trailLength+e.trailLengthShrinkable);c.addColorStop(0,"light"===b?"white":"black"),c.addColorStop(.2,"rgba(255,255,0,1)"),c.addColorStop(.5,"rgba(255,165,0,1)"),c.addColorStop(.8,"rgba(255,69,0,0.8)"),c.addColorStop(1,"oklch(74.6% 0.16 232.661)"),a.moveTo(e.x1,e.y1),a.lineTo(e.x1+e.trailLength+e.trailLengthShrinkable,e.y1+e.trailLength+e.trailLengthShrinkable),a.lineWidth=u,a.strokeStyle=c,a.stroke(),a.beginPath(),a.fillStyle="rgba(0, 191, 255, ".concat(1.01+Math.sin(2*Math.PI*1*(e.y1/100)),")"),a.arc(e.x1+e.trailLength+e.trailLengthShrinkable+1,e.y1+e.trailLength+e.trailLengthShrinkable+1,x,0,2*Math.PI,!1),a.fill(),a.beginPath(),a.fillStyle="rgba(255, 110, 70, ".concat(e.y1%2,")"),a.arc(e.x1+e.trailLength+e.trailLengthShrinkable+1,e.y1+e.trailLength+e.trailLengthShrinkable+1,x-.4,0,2*Math.PI,!1),a.fill()};for(d.s();!(t=d.n()).done;)h()}catch(t){d.e(t)}finally{d.f()}r=requestAnimationFrame(l)};return l(),function(){cancelAnimationFrame(r)}}}}else console.log("animateUntill is false")},[I,z]),r("div",{className:"relative w-full h-full overflow-hidden",children:r("canvas",{ref:w,className:"absolute top-0 left-0 bg-[".concat(L[b],"]")})})}export{h as MeteorMash};

package/dist/index.js

@@ -1,10 +1 @@
-"use strict";var e,r=require("react"),t={exports:{}},n={};var o,a,i={};
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */function s(){return o||(o=1,"production"!==process.env.NODE_ENV&&function(){var e=r,t=Symbol.for("react.element"),n=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),s=Symbol.for("react.profiler"),c=Symbol.for("react.provider"),l=Symbol.for("react.context"),u=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),p=Symbol.for("react.suspense_list"),y=Symbol.for("react.memo"),d=Symbol.for("react.lazy"),v=Symbol.for("react.offscreen"),m=Symbol.iterator;var g=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function b(e){for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];!function(e,r,t){var n=g.ReactDebugCurrentFrame,o=n.getStackAddendum();""!==o&&(r+="%s",t=t.concat([o]));var a=t.map(function(e){return String(e)});a.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,a)}("error",e,t)}var h;function _(e){return e.displayName||"Context"}function k(e){if(null==e)return null;if("number"==typeof e.tag&&b("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),"function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case o:return"Fragment";case n:return"Portal";case s:return"Profiler";case a:return"StrictMode";case f:return"Suspense";case p:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case l:return _(e)+".Consumer";case c:return _(e._context)+".Provider";case u:return function(e,r,t){var n=e.displayName;if(n)return n;var o=r.displayName||r.name||"";return""!==o?t+"("+o+")":t}(e,e.render,"ForwardRef");case y:var r=e.displayName||null;return null!==r?r:k(e.type)||"Memo";case d:var t=e,i=t._payload,v=t._init;try{return k(v(i))}catch(e){return null}}return null}h=Symbol.for("react.module.reference");var w,S,O,j,R,E,P,T=Object.assign,x=0;function $(){}$.__reactDisabledLog=!0;var N,C=g.ReactCurrentDispatcher;function D(e,r,t){if(void 0===N)try{throw Error()}catch(e){var n=e.stack.trim().match(/\n( *(at )?)/);N=n&&n[1]||""}return"\n"+N+e}var F,I=!1,L="function"==typeof WeakMap?WeakMap:Map;function U(e,r){if(!e||I)return"";var t,n=F.get(e);if(void 0!==n)return n;I=!0;var o,a=Error.prepareStackTrace;Error.prepareStackTrace=void 0,o=C.current,C.current=null,function(){if(0===x){w=console.log,S=console.info,O=console.warn,j=console.error,R=console.group,E=console.groupCollapsed,P=console.groupEnd;var e={configurable:!0,enumerable:!0,value:$,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}x++}();try{if(r){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(i,[])}catch(e){t=e}Reflect.construct(e,[],i)}else{try{i.call()}catch(e){t=e}e.call(i.prototype)}}else{try{throw Error()}catch(e){t=e}e()}}catch(r){if(r&&t&&"string"==typeof r.stack){for(var s=r.stack.split("\n"),c=t.stack.split("\n"),l=s.length-1,u=c.length-1;l>=1&&u>=0&&s[l]!==c[u];)u--;for(;l>=1&&u>=0;l--,u--)if(s[l]!==c[u]){if(1!==l||1!==u)do{if(l--,--u<0||s[l]!==c[u]){var f="\n"+s[l].replace(" at new "," at ");return e.displayName&&f.includes("<anonymous>")&&(f=f.replace("<anonymous>",e.displayName)),"function"==typeof e&&F.set(e,f),f}}while(l>=1&&u>=0);break}}}finally{I=!1,C.current=o,function(){if(0===--x){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:T({},e,{value:w}),info:T({},e,{value:S}),warn:T({},e,{value:O}),error:T({},e,{value:j}),group:T({},e,{value:R}),groupCollapsed:T({},e,{value:E}),groupEnd:T({},e,{value:P})})}x<0&&b("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}(),Error.prepareStackTrace=a}var p=e?e.displayName||e.name:"",y=p?D(p):"";return"function"==typeof e&&F.set(e,y),y}function W(e,r,t){if(null==e)return"";if("function"==typeof e)return U(e,!(!(n=e.prototype)||!n.isReactComponent));var n;if("string"==typeof e)return D(e);switch(e){case f:return D("Suspense");case p:return D("SuspenseList")}if("object"==typeof e)switch(e.$$typeof){case u:return U(e.render,!1);case y:return W(e.type,r,t);case d:var o=e,a=o._payload,i=o._init;try{return W(i(a),r,t)}catch(e){}}return""}F=new L;var A=Object.prototype.hasOwnProperty,M={},z=g.ReactDebugCurrentFrame;function Y(e){if(e){var r=e._owner,t=W(e.type,e._source,r?r.type:null);z.setExtraStackFrame(t)}else z.setExtraStackFrame(null)}var B=Array.isArray;function V(e){return B(e)}function q(e){return""+e}function J(e){if(function(e){try{return q(e),!1}catch(e){return!0}}(e))return b("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",function(e){return"function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object"}(e)),q(e)}var K,X,H=g.ReactCurrentOwner,G={key:!0,ref:!0,__self:!0,__source:!0};function Q(e,r,n,o,a){var i,s={},c=null,l=null;for(i in void 0!==n&&(J(n),c=""+n),function(e){if(A.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return void 0!==e.key}(r)&&(J(r.key),c=""+r.key),function(e){if(A.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return void 0!==e.ref}(r)&&(l=r.ref,function(e){"string"==typeof e.ref&&H.current}(r)),r)A.call(r,i)&&!G.hasOwnProperty(i)&&(s[i]=r[i]);if(e&&e.defaultProps){var u=e.defaultProps;for(i in u)void 0===s[i]&&(s[i]=u[i])}if(c||l){var f="function"==typeof e?e.displayName||e.name||"Unknown":e;c&&function(e,r){var t=function(){K||(K=!0,b("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(s,f),l&&function(e,r){var t=function(){X||(X=!0,b("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}(s,f)}return function(e,r,n,o,a,i,s){var c={$$typeof:t,type:e,key:r,ref:n,props:s,_owner:i,_store:{}};return Object.defineProperty(c._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(c,"_self",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.defineProperty(c,"_source",{configurable:!1,enumerable:!1,writable:!1,value:a}),Object.freeze&&(Object.freeze(c.props),Object.freeze(c)),c}(e,c,l,a,o,H.current,s)}var Z,ee=g.ReactCurrentOwner,re=g.ReactDebugCurrentFrame;function te(e){if(e){var r=e._owner,t=W(e.type,e._source,r?r.type:null);re.setExtraStackFrame(t)}else re.setExtraStackFrame(null)}function ne(e){return"object"==typeof e&&null!==e&&e.$$typeof===t}function oe(){if(ee.current){var e=k(ee.current.type);if(e)return"\n\nCheck the render method of `"+e+"`."}return""}Z=!1;var ae={};function ie(e,r){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var t=function(e){var r=oe();if(!r){var t="string"==typeof e?e:e.displayName||e.name;t&&(r="\n\nCheck the top-level render call using <"+t+">.")}return r}(r);if(!ae[t]){ae[t]=!0;var n="";e&&e._owner&&e._owner!==ee.current&&(n=" It was passed a child from "+k(e._owner.type)+"."),te(e),b('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,n),te(null)}}}function se(e,r){if("object"==typeof e)if(V(e))for(var t=0;t<e.length;t++){var n=e[t];ne(n)&&ie(n,r)}else if(ne(e))e._store&&(e._store.validated=!0);else if(e){var o=function(e){if(null===e||"object"!=typeof e)return null;var r=m&&e[m]||e["@@iterator"];return"function"==typeof r?r:null}(e);if("function"==typeof o&&o!==e.entries)for(var a,i=o.call(e);!(a=i.next()).done;)ne(a.value)&&ie(a.value,r)}}function ce(e){var r,t=e.type;if(null!=t&&"string"!=typeof t){if("function"==typeof t)r=t.propTypes;else{if("object"!=typeof t||t.$$typeof!==u&&t.$$typeof!==y)return;r=t.propTypes}if(r){var n=k(t);!function(e,r,t,n,o){var a=Function.call.bind(A);for(var i in e)if(a(e,i)){var s=void 0;try{if("function"!=typeof e[i]){var c=Error((n||"React class")+": "+t+" type `"+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[i]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw c.name="Invariant Violation",c}s=e[i](r,i,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(e){s=e}!s||s instanceof Error||(Y(o),b("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",t,i,typeof s),Y(null)),s instanceof Error&&!(s.message in M)&&(M[s.message]=!0,Y(o),b("Failed %s type: %s",t,s.message),Y(null))}}(r,e.props,"prop",n,e)}else if(void 0!==t.PropTypes&&!Z){Z=!0,b("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",k(t)||"Unknown")}"function"!=typeof t.getDefaultProps||t.getDefaultProps.isReactClassApproved||b("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}var le={};function ue(e,r,n,i,m,g){var _=function(e){return"string"==typeof e||"function"==typeof e||e===o||e===s||e===a||e===f||e===p||e===v||"object"==typeof e&&null!==e&&(e.$$typeof===d||e.$$typeof===y||e.$$typeof===c||e.$$typeof===l||e.$$typeof===u||e.$$typeof===h||void 0!==e.getModuleId)}(e);if(!_){var w="";(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).length)&&(w+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var S;w+=oe(),null===e?S="null":V(e)?S="array":void 0!==e&&e.$$typeof===t?(S="<"+(k(e.type)||"Unknown")+" />",w=" Did you accidentally export a JSX literal instead of a component?"):S=typeof e,b("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",S,w)}var O=Q(e,r,n,m,g);if(null==O)return O;if(_){var j=r.children;if(void 0!==j)if(i)if(V(j)){for(var R=0;R<j.length;R++)se(j[R],e);Object.freeze&&Object.freeze(j)}else b("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else se(j,e)}if(A.call(r,"key")){var E=k(e),P=Object.keys(r).filter(function(e){return"key"!==e}),T=P.length>0?"{key: someKey, "+P.join(": ..., ")+": ...}":"{key: someKey}";if(!le[E+T])b('A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',T,E,P.length>0?"{"+P.join(": ..., ")+": ...}":"{}",E),le[E+T]=!0}return e===o?function(e){for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if("children"!==n&&"key"!==n){te(e),b("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),te(null);break}}null!==e.ref&&(te(e),b("Invalid attribute `ref` supplied to `React.Fragment`."),te(null))}(O):ce(O),O}var fe=function(e,r,t){return ue(e,r,t,!1)},pe=function(e,r,t){return ue(e,r,t,!0)};i.Fragment=o,i.jsx=fe,i.jsxs=pe}()),i}var c=(a||(a=1,"production"===process.env.NODE_ENV?t.exports=function(){if(e)return n;e=1;var t=r,o=Symbol.for("react.element"),a=Symbol.for("react.fragment"),i=Object.prototype.hasOwnProperty,s=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,c={key:!0,ref:!0,__self:!0,__source:!0};function l(e,r,t){var n,a={},l=null,u=null;for(n in void 0!==t&&(l=""+t),void 0!==r.key&&(l=""+r.key),void 0!==r.ref&&(u=r.ref),r)i.call(r,n)&&!c.hasOwnProperty(n)&&(a[n]=r[n]);if(e&&e.defaultProps)for(n in r=e.defaultProps)void 0===a[n]&&(a[n]=r[n]);return{$$typeof:o,type:e,key:l,ref:u,props:a,_owner:s.current}}return n.Fragment=a,n.jsx=l,n.jsxs=l,n}():t.exports=s()),t.exports);exports.MeteorMash=function(){return c.jsx("div",{className:"",children:"this is meteor mash"})};
+"use strict";var t=require("react"),e=require("react/jsx-runtime");function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var a=0,r=Array(e);a<e;a++)r[a]=t[a];return r}function r(t,e){var a="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!a){if(Array.isArray(t)||(a=o(t))||e){a&&(t=a);var r=0,n=function(){};return{s:n,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,l=!0,d=!1;return{s:function(){a=a.call(t)},n:function(){var t=a.next();return l=t.done,t},e:function(t){d=!0,i=t},f:function(){try{l||null==a.return||a.return()}finally{if(d)throw i}}}}function n(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var a=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=a){var r,n,o,i,l=[],d=!0,h=!1;try{if(o=(a=a.call(t)).next,0===e);else for(;!(d=(r=o.call(a)).done)&&(l.push(r.value),l.length!==e);d=!0);}catch(t){h=!0,n=t}finally{try{if(!d&&null!=a.return&&(i=a.return(),Object(i)!==i))return}finally{if(h)throw n}}return l}}(t,e)||o(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(t,e){if(t){if("string"==typeof t)return a(t,e);var r={}.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?a(t,e):void 0}}var i={light:"white",dark:"black"};exports.MeteorMash=function(a){var o=a.numOfMeteors,l=void 0===o?7:o,d=a.trailLength,h=void 0===d?20:d,c=a.trailLengthShrinkable,s=void 0===c?60:c,y=a.trailThickness,u=void 0===y?3:y,p=a.meteorCoreSize,m=void 0===p?2.4:p,f=a.collisionDebriSize,x=void 0===f?2:f,g=a.theme,M=void 0===g?"light":g,v=a.bgColor,b=void 0===v?i:v,S=a.animateUntill,L=void 0===S||S,k=t.useRef(null),z=n(t.useState([]),2),w=z[0],A=z[1];return t.useEffect(function(){for(var t,e,a=[],r=(null===(t=k.current)||void 0===t||null===(t=t.parentElement)||void 0===t?void 0:t.clientHeight)||400,n=(null===(e=k.current)||void 0===e||null===(e=e.parentElement)||void 0===e?void 0:e.clientWidth)||400,o=0;o<l;o++){var i=Math.floor(Math.random()*(n/2- -n+1))+-n,d=-(h+h+100*o);a.push({index:o,x1:i,y1:d,trailLength:h,trailLengthShrinkable:s,color:"red",dots:[{index:0,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:1,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:2,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:3,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:4,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:5,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:6,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:7,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:8,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:9,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:10,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2},{index:11,x:i+h+r+100*o,y:d+h+r+100*o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}]})}A(a)},[]),t.useEffect(function(){var t;if(L){var e=k.current;if(e){var a=e.getContext("2d");if(a&&(e.width=window.innerWidth,e.height=window.innerHeight,null!==(t=e.parentElement)&&void 0!==t&&t.clientHeight)){var n,o=e.parentElement.clientHeight,i=e.parentElement.clientWidth,l=function(){a.clearRect(0,0,e.width,e.height);var t,d=r(w);try{var c=function(){var e=t.value;if(e.x1+=2,e.y1+=2,e.trailLengthShrinkable>-20&&e.y1>=o/2){var n=Math.max(0,100*(e.y1+e.trailLength+e.trailLengthShrinkable-o/2)/o/4),l=e.trailLengthShrinkable*n/100;e.trailLengthShrinkable-=l,e.x1+=l,e.y1+=l}if(e.y1+e.trailLength+e.trailLengthShrinkable>=o){!function(){var t,n=0,o=r(e.dots);try{for(o.s();!(t=o.n()).done;){var i=t.value;n=(i.index/10*45+130)*(Math.PI/180),i.x-=Math.cos(n)*i.speed,i.y-=Math.sin(n)*i.speed,i.opacity*=.94,a.beginPath(),a.fillStyle="light"===M?"rgba(255, 106, 0,".concat(i.opacity,")"):"rgba(209, 213, 220,".concat(i.opacity,")"),a.arc(i.x+e.trailLength-e.trailLengthShrinkable+e.trailLengthShrinkable,i.y+e.trailLength-e.trailLengthShrinkable+e.trailLengthShrinkable,i.size,0,2*Math.PI,!1),a.fill()}}catch(t){o.e(t)}finally{o.f()}}()}if(e.y1>=o+150){var d=Math.floor(Math.random()*(i/2- -i+1))+-i,c=-(h+h);e.x1=d,e.y1=c,e.trailLength=h,e.trailLengthShrinkable=s,e.dots=[{index:0,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}],e.dots.push({index:1,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:2,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:3,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:4,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:5,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:6,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:7,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:8,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:9,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:10,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2}),e.dots.push({index:11,x:d+h+o,y:c+h+o,size:Math.random()*(x-.8)+.8,color:"",opacity:10,speed:Math.random()*(.8-.2)+.2})}a.beginPath();var y=a.createLinearGradient(e.x1,e.y1,e.x1+e.trailLength+e.trailLengthShrinkable,e.y1+e.trailLength+e.trailLengthShrinkable);y.addColorStop(0,"light"===M?"white":"black"),y.addColorStop(.2,"rgba(255,255,0,1)"),y.addColorStop(.5,"rgba(255,165,0,1)"),y.addColorStop(.8,"rgba(255,69,0,0.8)"),y.addColorStop(1,"oklch(74.6% 0.16 232.661)"),a.moveTo(e.x1,e.y1),a.lineTo(e.x1+e.trailLength+e.trailLengthShrinkable,e.y1+e.trailLength+e.trailLengthShrinkable),a.lineWidth=u,a.strokeStyle=y,a.stroke(),a.beginPath(),a.fillStyle="rgba(0, 191, 255, ".concat(1.01+Math.sin(2*Math.PI*1*(e.y1/100)),")"),a.arc(e.x1+e.trailLength+e.trailLengthShrinkable+1,e.y1+e.trailLength+e.trailLengthShrinkable+1,m,0,2*Math.PI,!1),a.fill(),a.beginPath(),a.fillStyle="rgba(255, 110, 70, ".concat(e.y1%2,")"),a.arc(e.x1+e.trailLength+e.trailLengthShrinkable+1,e.y1+e.trailLength+e.trailLengthShrinkable+1,m-.4,0,2*Math.PI,!1),a.fill()};for(d.s();!(t=d.n()).done;)c()}catch(t){d.e(t)}finally{d.f()}n=requestAnimationFrame(l)};return l(),function(){cancelAnimationFrame(n)}}}}else console.log("animateUntill is false")},[w,L]),e.jsx("div",{className:"relative w-full h-full overflow-hidden",children:e.jsx("canvas",{ref:k,className:"absolute top-0 left-0 bg-[".concat(b[M],"]")})})};

package/dist/styles.css

@@ -7,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);
   }
@@ -160,41 +213,864 @@
   }
 }
 @layer utilities {
-  .static {
-    position: static;
+  .pointer-events-none {
+    pointer-events: none;
   }
-  .transform {
-    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  .absolute {
+    position: absolute;
   }
+  .relative {
+    position: relative;
+  }
+  .inset-0 {
+    inset: 0;
+  }
+  .top-0 {
+    top: 0;
+  }
+  .top-\[50\%\] {
+    top: 50%;
+  }
+  .-right-5 {
+    right: calc(var(--spacing) * -5);
+  }
+  .right-0 {
+    right: 0;
+  }
+  .left-0 {
+    left: 0;
+  }
+  .left-\[50\%\] {
+    left: 50%;
+  }
+  .mx-auto {
+    margin-inline: auto;
+  }
+  .mr-auto {
+    margin-right: auto;
+  }
+  .flex {
+    display: flex;
+  }
+  .inline-block {
+    display: inline-block;
+  }
+  .size-4 {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+  .h-1\.5 {
+    height: calc(var(--spacing) * 1.5);
+  }
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+  .h-\[50\%\] {
+    height: 50%;
+  }
+  .h-\[75\%\] {
+    height: 75%;
+  }
+  .h-\[87\%\] {
+    height: 87%;
+  }
+  .h-\[90\%\] {
+    height: 90%;
+  }
+  .h-full {
+    height: 100%;
+  }
+  .min-h-screen {
+    min-height: 100vh;
+  }
+  .w-1 {
+    width: var(--spacing);
+  }
+  .w-1\.5 {
+    width: calc(var(--spacing) * 1.5);
+  }
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
+  .w-15 {
+    width: calc(var(--spacing) * 15);
+  }
+  .w-23 {
+    width: calc(var(--spacing) * 23);
+  }
+  .w-\[50\%\] {
+    width: 50%;
+  }
+  .w-\[87\%\] {
+    width: 87%;
+  }
+  .w-\[90\%\] {
+    width: 90%;
+  }
+  .w-\[calc\(100\%-41px\)\] {
+    width: calc(100% - 41px);
+  }
+  .w-full {
+    width: 100%;
+  }
+  .w-max {
+    width: max-content;
+  }
+  .w-min {
+    width: min-content;
+  }
+  .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
+  .max-w-full {
+    max-width: 100%;
+  }
+  .origin-center {
+    transform-origin: center;
+  }
+  .translate-x-\[-50\%\] {
+    --tw-translate-x: -50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-\[-13\.7px\] {
+    --tw-translate-y: -13.7px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-\[-50\%\] {
+    --tw-translate-y: -50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-\[6\.3px\] {
+    --tw-translate-y: 6.3px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .animate-ping {
+    animation: var(--animate-ping);
+  }
+  .animate-pulse {
+    animation: var(--animate-pulse);
+  }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
+  .cursor-default {
+    cursor: default;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .content-center {
+    align-content: center;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-around {
+    justify-content: space-around;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-end {
+    justify-content: flex-end;
+  }
+  .gap-20 {
+    gap: calc(var(--spacing) * 20);
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .rounded-3xl {
+    border-radius: var(--radius-3xl);
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+  .border-10 {
+    border-style: var(--tw-border-style);
+    border-width: 10px;
+  }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
+  .border-black {
+    border-color: var(--color-black);
+  }
+  .border-gray-200 {
+    border-color: var(--color-gray-200);
+  }
+  .border-gray-500 {
+    border-color: var(--color-gray-500);
+  }
+  .border-gray-600 {
+    border-color: var(--color-gray-600);
+  }
+  .border-neutral-100 {
+    border-color: var(--color-neutral-100);
+  }
+  .border-neutral-200 {
+    border-color: var(--color-neutral-200);
+  }
+  .border-neutral-500 {
+    border-color: var(--color-neutral-500);
+  }
+  .border-white {
+    border-color: var(--color-white);
+  }
+  .bg-\[\"\.concat\(L\[b\]\,\"\] {
+    background-color: ".concat(L[b],";
+  }
+  .bg-\[\"\.concat\(b\[M\]\,\"\] {
+    background-color: ".concat(b[M],";
+  }
+  .bg-gray-50 {
+    background-color: var(--color-gray-50);
+  }
+  .bg-gray-100 {
+    background-color: var(--color-gray-100);
+  }
+  .bg-gray-200\/5 {
+    background-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-200) 5%, transparent);
+    }
+  }
+  .bg-gray-400 {
+    background-color: var(--color-gray-400);
+  }
+  .bg-gray-800 {
+    background-color: var(--color-gray-800);
+  }
+  .bg-gray-900 {
+    background-color: var(--color-gray-900);
+  }
+  .bg-neutral-50 {
+    background-color: var(--color-neutral-50);
+  }
+  .bg-neutral-800 {
+    background-color: var(--color-neutral-800);
+  }
+  .bg-neutral-900 {
+    background-color: var(--color-neutral-900);
+  }
+  .bg-orange-500 {
+    background-color: var(--color-orange-500);
+  }
+  .bg-sky-400 {
+    background-color: var(--color-sky-400);
+  }
+  .bg-white {
+    background-color: var(--color-white);
+  }
+  .stroke-gray-400 {
+    stroke: var(--color-gray-400);
+  }
+  .stroke-neutral-400 {
+    stroke: var(--color-neutral-400);
+  }
+  .stroke-1 {
+    stroke-width: 1;
+  }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+  .px-1\.25 {
+    padding-inline: calc(var(--spacing) * 1.25);
+  }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .py-1 {
+    padding-block: var(--spacing);
+  }
+  .pr-5 {
+    padding-right: calc(var(--spacing) * 5);
+  }
+  .pl-1 {
+    padding-left: var(--spacing);
+  }
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
+  .text-center {
+    text-align: center;
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-extrabold {
+    --tw-font-weight: var(--font-weight-extrabold);
+    font-weight: var(--font-weight-extrabold);
+  }
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .font-thin {
+    --tw-font-weight: var(--font-weight-thin);
+    font-weight: var(--font-weight-thin);
+  }
+  .text-black {
+    color: var(--color-black);
+  }
+  .text-gray-50 {
+    color: var(--color-gray-50);
+  }
+  .text-gray-400 {
+    color: var(--color-gray-400);
+  }
+  .text-gray-500 {
+    color: var(--color-gray-500);
+  }
+  .text-gray-800 {
+    color: var(--color-gray-800);
+  }
+  .text-neutral-200 {
+    color: var(--color-neutral-200);
+  }
+  .text-neutral-300 {
+    color: var(--color-neutral-300);
+  }
+  .text-neutral-400\/50 {
+    color: color-mix(in srgb, oklch(70.8% 0 0) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-neutral-400) 50%, transparent);
+    }
+  }
+  .text-neutral-500 {
+    color: var(--color-neutral-500);
+  }
+  .text-neutral-600 {
+    color: var(--color-neutral-600);
+  }
+  .text-neutral-800 {
+    color: var(--color-neutral-800);
+  }
+  .text-transparent {
+    color: transparent;
+  }
+  .text-white {
+    color: var(--color-white);
+  }
+  .caret-gray-500 {
+    caret-color: var(--color-gray-500);
+  }
+  .opacity-0 {
+    opacity: 0%;
+  }
+  .opacity-100 {
+    opacity: 100%;
+  }
+  .mix-blend-difference {
+    mix-blend-mode: difference;
+  }
+  .\[box-shadow\:0px_0px_8px_0\.1px_gray\] {
+    box-shadow: 0px 0px 8px 0.1px gray;
+  }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .blur-sm {
+    --tw-blur: blur(var(--blur-sm));
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .backdrop-blur-\[6px\] {
+    --tw-backdrop-blur: blur(6px);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .backdrop-blur-md {
+    --tw-backdrop-blur: blur(var(--blur-md));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+  .duration-500 {
+    --tw-duration: 500ms;
+    transition-duration: 500ms;
+  }
+  .duration-600 {
+    --tw-duration: 600ms;
+    transition-duration: 600ms;
+  }
+  .duration-700 {
+    --tw-duration: 700ms;
+    transition-duration: 700ms;
+  }
+  .duration-1000 {
+    --tw-duration: 1000ms;
+    transition-duration: 1000ms;
+  }
+  .duration-9000 {
+    --tw-duration: 9000ms;
+    transition-duration: 9000ms;
+  }
+  .ease-in {
+    --tw-ease: var(--ease-in);
+    transition-timing-function: var(--ease-in);
+  }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .focus-within\:\[box-shadow\:0px_0px_8px_0\.1px_\#d4d4d490_inset\] {
+    &:focus-within {
+      box-shadow: 0px 0px 8px 0.1px #d4d4d490 inset;
+    }
+  }
+  .hover\:scale-115 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-scale-x: 115%;
+        --tw-scale-y: 115%;
+        --tw-scale-z: 115%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
+  .hover\:bg-gray-900 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-900);
+      }
+    }
+  }
+  .hover\:bg-neutral-800 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-neutral-800);
+      }
+    }
+  }
+  .hover\:text-gray-300 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-300);
+      }
+    }
+  }
+  .hover\:text-neutral-400 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-neutral-400);
+      }
+    }
+  }
+  .dark\:border-gray-500 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-gray-500);
+    }
+  }
+  .dark\:border-gray-700 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-gray-700);
+    }
+  }
+  .dark\:border-neutral-200\/30 {
+    @media (prefers-color-scheme: dark) {
+      border-color: color-mix(in srgb, oklch(92.2% 0 0) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-neutral-200) 30%, transparent);
+      }
+    }
+  }
+  .dark\:border-neutral-800 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-neutral-800);
+    }
+  }
+  .dark\:border-neutral-900 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-neutral-900);
+    }
+  }
+  .dark\:border-white {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-white);
+    }
+  }
+  .dark\:bg-gray-50 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-gray-50);
+    }
+  }
+  .dark\:bg-gray-50\/5 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 5%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-gray-50) 5%, transparent);
+      }
+    }
+  }
+  .dark\:bg-gray-100 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-gray-100);
+    }
+  }
+  .dark\:bg-gray-200 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-gray-200);
+    }
+  }
+  .dark\:bg-gray-800 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-gray-800);
+    }
+  }
+  .dark\:bg-gray-900 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-gray-900);
+    }
+  }
+  .dark\:bg-neutral-100 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-100);
+    }
+  }
+  .dark\:bg-neutral-500 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-500);
+    }
+  }
+  .dark\:bg-neutral-900 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-900);
+    }
+  }
+  .dark\:bg-sky-600 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-sky-600);
+    }
+  }
+  .dark\:text-gray-400 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-gray-400);
+    }
+  }
+  .dark\:text-gray-600 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-gray-600);
+    }
+  }
+  .dark\:text-gray-900 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-gray-900);
+    }
+  }
+  .dark\:text-neutral-100 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-100);
+    }
+  }
+  .dark\:text-neutral-300 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-300);
+    }
+  }
+  .dark\:text-neutral-400 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
+  }
+  .dark\:text-neutral-600 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-600);
+    }
+  }
+  .dark\:text-white {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-white);
+    }
+  }
+  .dark\:hover\:bg-neutral-800 {
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-neutral-800);
+        }
+      }
+    }
+  }
+  .dark\:hover\:text-gray-300 {
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-gray-300);
+        }
+      }
+    }
+  }
+}
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
 }
-@property --tw-rotate-x {
+@property --tw-border-style {
   syntax: "*";
   inherits: false;
+  initial-value: solid;
 }
-@property --tw-rotate-y {
+@property --tw-font-weight {
   syntax: "*";
   inherits: false;
 }
-@property --tw-rotate-z {
+@property --tw-blur {
   syntax: "*";
   inherits: false;
 }
-@property --tw-skew-x {
+@property --tw-brightness {
   syntax: "*";
   inherits: false;
 }
-@property --tw-skew-y {
+@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-rotate-x: initial;
-      --tw-rotate-y: initial;
-      --tw-rotate-z: initial;
-      --tw-skew-x: initial;
-      --tw-skew-y: initial;
+      --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.3",
+  "version": "1.0.6",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -12,7 +12,8 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "react-router-dom": ">=6"
   },
   "files": [
     "dist"
@@ -40,6 +41,7 @@
     "@types/react-dom": "^19.2.3",
     "autoprefixer": "^10.5.0",
     "postcss": "^8.5.15",
+    "react-router-dom": "^7.17.0",
     "tailwindcss": "^4.3.1",
     "typescript": "^6.0.3"
   }