ehscan-react-components 0.1.3 → 0.1.5

package/LICENSE.md

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

package/README.md

@@ -1,2 +1,98 @@
-# Components
-...
+# mgsmu-react - Minimal Global State Management Utility
+
+- mgsmu-react is a lightweight global state management utility for React.  
+- It provides a simple **publish-subscribe (pub-sub)** mechanism to manage global state without external libraries like Redux or Zustand.  
+- Components can subscribe to specific keys and automatically re-render when those keys change.
+
+## install
+```
+npm install --save mgsmu-react
+```
+
+## Import in any component
+
+```jsx
+import { useStateStore } from 'mgsmu-react';
+```
+- useStateStore() – React hook to access the global state and subscribe to changes.
+
+## Invoke state
+```jsx
+const key = "data";
+const [data, setData, removeData] = useStateStore(key);
+```
+- Parameter names are flexible (data, setData and removeData are just examples).
+- keys can be used as you like. You can create as many keys as you like for different scenarios
+
+## Set data and key
+
+```jsx
+const data = { specifics: "data", state: true, what: "next" };
+setData(data)
+
+// Functional Update 1.0.5
+setData(prev => ({ ...prev, added: "new" }));
+```
+- Key: any string can be used ("data", "users", "messages", etc.)
+- Data: any object or array can be stored under that key.
+- Allows management of multiple independent keys in your global state
+
+## Listen and catch changes
+
+```jsx
+useEffect(() => {
+    if (!data) return;
+    console.log(data); //use Data
+  },[data])
+```
+
+```jsx
+logs: {
+    "specifics": "data",
+    "state": true,
+    "what": "next",
+    "updatedAt": 1757423800721
+}
+```
+- useEffect triggers whenever the specified key (data in this example) changes.
+- Supports multiple keys — you can set up multiple useEffect hooks to listen to different keys individually.
+- Ensures components only re-render when the relevant slice of state updates.
+
+## Remove keys
+
+```jsx
+removeData("data");
+```
+- Deletes a key from the global state.
+- Make sure component is clean if rendered again
+- Note: Triggers re-render for components subscribed to that key.
+
+----
+**Notes**
+
+- Every state update includes an updatedAt timestamp.
+- The store works with any object structure, making it flexible for various use cases.
+- Lightweight and minimal — no context providers or extra boilerplate required.
+- Ideal for managing small to medium app state where a full state library would be overkill.
+
+----
+# Changelog
+
+All notable changes to this project will be documented in this file.
+---
+
+
+## [1.0.5] - 2027-11-11
+### Fixed
+- Setter now supports functional update (like React’s setState)
+
+## [1.0.4] - 2027-10-22
+### Added
+- Added UseClickSetter
+  - Only Clicking purpose
+
+## [1.0.3] - 2025-10-22
+### Fixed
+- Optimized listener notifications:
+  - Only listeners subscribed to a changed or removed key are notified.
+  - Previously, all listeners were notified on every state change.

package/dist/Components.d.ts

@@ -0,0 +1,2 @@
+import './style/button.css';
+export declare const myComp: () => import("react/jsx-runtime").JSX.Element;

package/dist/Components.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ExtButton from './ExtButton';
+import './style/button.css';
+export const myComp = () => {
+    return _jsx(ExtButton, {});
+};

package/dist/ExtButton.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+type Props = {
+    index?: string | number;
+    text?: string;
+    selected?: boolean;
+    addClass?: string;
+    notimeout?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    click?: (args?: any) => void;
+    children?: ReactNode;
+};
+declare const ExtButton: React.FC<Props>;
+export default ExtButton;

package/dist/ExtButton.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useCallback } from "react";
+import useRipple from "./tools/useRipple";
+const ExtButton = ({ index, text, selected, addClass, notimeout, size = 'md', click, children }) => {
+    const buttonRef = useRef(null);
+    const handleRipple = useRipple();
+    const handleButtonClick = useCallback((event) => {
+        handleRipple(event, buttonRef);
+        if (notimeout) {
+            click === null || click === void 0 ? void 0 : click(event);
+            return;
+        }
+        setTimeout(() => {
+            click === null || click === void 0 ? void 0 : click(event);
+        }, 200);
+    }, [notimeout, click, handleRipple]);
+    return (_jsx(_Fragment, { children: _jsxs("button", { type: "button", ref: buttonRef, onClick: handleButtonClick, className: `ext-btn ext-btn--primary ext-btn--${size} _ripple ${addClass !== null && addClass !== void 0 ? addClass : ''}`, "aria-pressed": selected, children: [children, text && _jsx("div", { className: "ext-btn-label", children: text })] }, index) }));
+};
+export default ExtButton;

package/dist/tools/useRipple.d.ts

@@ -0,0 +1,3 @@
+import { MouseEvent } from 'react';
+declare const useRipple: () => (event: MouseEvent<HTMLElement>, buttonRef: React.RefObject<HTMLElement>) => void;
+export default useRipple;

package/dist/tools/useRipple.js

@@ -0,0 +1,21 @@
+import { useCallback } from 'react';
+const useRipple = () => {
+    const handleRipple = useCallback((event, buttonRef) => {
+        const button = buttonRef.current;
+        if (!button)
+            return;
+        const rect = button.getBoundingClientRect();
+        const size = Math.max(rect.width, rect.height);
+        const x = event.clientX - rect.left - size / 2;
+        const y = event.clientY - rect.top - size / 2;
+        const ripple = document.createElement('span');
+        ripple.style.width = ripple.style.height = `${size}px`;
+        ripple.style.left = `${x}px`;
+        ripple.style.top = `${y}px`;
+        ripple.className = 'ripple';
+        button.appendChild(ripple);
+        setTimeout(() => ripple.remove(), 600);
+    }, []);
+    return handleRipple;
+};
+export default useRipple;

package/package.json

@@ -1,27 +1,34 @@
 {
   "name": "ehscan-react-components",
-  "version": "0.1.3",
-  "type": "module",
-  "main": "dist/ehscan-react-components.cjs.js",
-  "module": "dist/ehscan-react-components.es.js",
-  "types": "dist/ehscan-react-components.d.ts",
-  "files": [
-    "dist"
-  ],
+  "version": "0.1.5",
+  "description": "components",
+  "main": "dist/Components.js",
+  "types": "dist/Components.d.ts",
   "scripts": {
-    "build": "vite build",
-    "prepare": "pnpm build"
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
   },
+  "keywords": [
+    "react",
+    "state",
+    "global-state",
+    "store",
+    "minimal"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.3.1"
   },
+  "files": [
+    "dist"
+  ],
   "devDependencies": {
-    "@vitejs/plugin-react": "^4.0.0",
-    "typescript": "^5.0.0",
-    "vite": "^5.0.0"
-  },
-  "dependencies": {
-    "vite-plugin-dts": "^4.5.4"
+    "@types/glob": "8",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "glob": "8",
+    "minimatch": "5",
+    "typescript": "^5.6.3"
   }
 }

package/dist/ehscan-react-components.cjs.js

@@ -1,22 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react");var j={exports:{}},E={};/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var M;function ee(){if(M)return E;M=1;var f=Symbol.for("react.transitional.element"),d=Symbol.for("react.fragment");function c(i,n,s){var l=null;if(s!==void 0&&(l=""+s),n.key!==void 0&&(l=""+n.key),"key"in n){s={};for(var m in n)m!=="key"&&(s[m]=n[m])}else s=n;return n=s.ref,{$$typeof:f,type:i,key:l,ref:n!==void 0?n:null,props:s}}return E.Fragment=d,E.jsx=c,E.jsxs=c,E}var b={};/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var L;function re(){return L||(L=1,process.env.NODE_ENV!=="production"&&function(){function f(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===Z?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case O:return"Fragment";case z:return"Profiler";case U:return"StrictMode";case G:return"Suspense";case J:return"SuspenseList";case H:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case W:return"Portal";case q:return e.displayName||"Context";case V:return(e._context.displayName||"Context")+".Consumer";case B:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case X:return r=e.displayName||null,r!==null?r:f(e.type)||"Memo";case S:r=e._payload,e=e._init;try{return f(e(r))}catch{}}return null}function d(e){return""+e}function c(e){try{d(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,a=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),d(e)}}function i(e){if(e===O)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===S)return"<...>";try{var r=f(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function n(){var e=g.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function l(e){if(C.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function m(e,r){function t(){$||($=!0,console.error("%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://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function u(){var e=f(this.type);return Y[e]||(Y[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function R(e,r,t,a,h,A){var o=t.ref;return e={$$typeof:N,type:e,key:r,props:t,_owner:a},(o!==void 0?o:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:u}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:h}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function v(e,r,t,a,h,A){var o=r.children;if(o!==void 0)if(a)if(Q(o)){for(a=0;a<o.length;a++)p(o[a]);Object.freeze&&Object.freeze(o)}else console.error("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 p(o);if(C.call(r,"key")){o=f(e);var _=Object.keys(r).filter(function(K){return K!=="key"});a=0<_.length?"{key: someKey, "+_.join(": ..., ")+": ...}":"{key: someKey}",D[o+a]||(_=0<_.length?"{"+_.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,a,o,_,o),D[o+a]=!0)}if(o=null,t!==void 0&&(c(t),o=""+t),l(r)&&(c(r.key),o=""+r.key),"key"in r){t={};for(var P in r)P!=="key"&&(t[P]=r[P])}else t=r;return o&&m(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),R(e,o,t,n(),h,A)}function p(e){w(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===S&&(e._payload.status==="fulfilled"?w(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function w(e){return typeof e=="object"&&e!==null&&e.$$typeof===N}var T=x,N=Symbol.for("react.transitional.element"),W=Symbol.for("react.portal"),O=Symbol.for("react.fragment"),U=Symbol.for("react.strict_mode"),z=Symbol.for("react.profiler"),V=Symbol.for("react.consumer"),q=Symbol.for("react.context"),B=Symbol.for("react.forward_ref"),G=Symbol.for("react.suspense"),J=Symbol.for("react.suspense_list"),X=Symbol.for("react.memo"),S=Symbol.for("react.lazy"),H=Symbol.for("react.activity"),Z=Symbol.for("react.client.reference"),g=T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,C=Object.prototype.hasOwnProperty,Q=Array.isArray,k=console.createTask?console.createTask:function(){return null};T={react_stack_bottom_frame:function(e){return e()}};var $,Y={},F=T.react_stack_bottom_frame.bind(T,s)(),I=k(i(s)),D={};b.Fragment=O,b.jsx=function(e,r,t){var a=1e4>g.recentlyCreatedOwnerStacks++;return v(e,r,t,!1,a?Error("react-stack-top-frame"):F,a?k(i(e)):I)},b.jsxs=function(e,r,t){var a=1e4>g.recentlyCreatedOwnerStacks++;return v(e,r,t,!0,a?Error("react-stack-top-frame"):F,a?k(i(e)):I)}}()),b}process.env.NODE_ENV==="production"?j.exports=ee():j.exports=re();var y=j.exports;const te=()=>x.useCallback((d,c)=>{const i=c==null?void 0:c.current;if(!i)return;const n=i.getBoundingClientRect(),s=Math.max(n.width,n.height),l=d.clientX-n.left-s/2,m=d.clientY-n.top-s/2,u=document.createElement("span");u.style.width=u.style.height=`${s}px`,u.style.left=`${l}px`,u.style.top=`${m}px`,u.className="ripple",i.appendChild(u),setTimeout(()=>u.remove(),600)},[]),ne=({index:f,text:d,selected:c,addClass:i,notimeout:n,size:s="md",click:l,children:m})=>{const u=x.useRef(null),R=te(),v=x.useCallback(p=>{if(u!=null&&u.current){if(R(p,u),n){l==null||l(p);return}setTimeout(()=>{l==null||l(p)},200)}},[n,l,R]);return y.jsx(y.Fragment,{children:y.jsxs("button",{type:"button",ref:u,onClick:v,className:`ext-btn ext-btn--primary ext-btn--${s} _ripple ${i??""}`,"aria-pressed":c,children:[m,d&&y.jsx("div",{className:"ext-btn-label",children:d})]},f)})};exports.Ext_Button=ne;

package/dist/ehscan-react-components.d.ts

@@ -1 +0,0 @@
-export {}

package/dist/ehscan-react-components.es.js

@@ -1,318 +0,0 @@
-import ee, { useCallback as L, useRef as re } from "react";
-var w = { exports: {} }, E = {};
-/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var D;
-function te() {
-  if (D) return E;
-  D = 1;
-  var f = Symbol.for("react.transitional.element"), d = Symbol.for("react.fragment");
-  function c(i, n, s) {
-    var l = null;
-    if (s !== void 0 && (l = "" + s), n.key !== void 0 && (l = "" + n.key), "key" in n) {
-      s = {};
-      for (var m in n)
-        m !== "key" && (s[m] = n[m]);
-    } else s = n;
-    return n = s.ref, {
-      $$typeof: f,
-      type: i,
-      key: l,
-      ref: n !== void 0 ? n : null,
-      props: s
-    };
-  }
-  return E.Fragment = d, E.jsx = c, E.jsxs = c, E;
-}
-var b = {};
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var M;
-function ne() {
-  return M || (M = 1, process.env.NODE_ENV !== "production" && function() {
-    function f(e) {
-      if (e == null) return null;
-      if (typeof e == "function")
-        return e.$$typeof === Z ? null : e.displayName || e.name || null;
-      if (typeof e == "string") return e;
-      switch (e) {
-        case y:
-          return "Fragment";
-        case z:
-          return "Profiler";
-        case U:
-          return "StrictMode";
-        case G:
-          return "Suspense";
-        case J:
-          return "SuspenseList";
-        case H:
-          return "Activity";
-      }
-      if (typeof e == "object")
-        switch (typeof e.tag == "number" && console.error(
-          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), e.$$typeof) {
-          case W:
-            return "Portal";
-          case q:
-            return e.displayName || "Context";
-          case V:
-            return (e._context.displayName || "Context") + ".Consumer";
-          case B:
-            var r = e.render;
-            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case X:
-            return r = e.displayName || null, r !== null ? r : f(e.type) || "Memo";
-          case O:
-            r = e._payload, e = e._init;
-            try {
-              return f(e(r));
-            } catch {
-            }
-        }
-      return null;
-    }
-    function d(e) {
-      return "" + e;
-    }
-    function c(e) {
-      try {
-        d(e);
-        var r = !1;
-      } catch {
-        r = !0;
-      }
-      if (r) {
-        r = console;
-        var t = r.error, a = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return t.call(
-          r,
-          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          a
-        ), d(e);
-      }
-    }
-    function i(e) {
-      if (e === y) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === O)
-        return "<...>";
-      try {
-        var r = f(e);
-        return r ? "<" + r + ">" : "<...>";
-      } catch {
-        return "<...>";
-      }
-    }
-    function n() {
-      var e = A.A;
-      return e === null ? null : e.getOwner();
-    }
-    function s() {
-      return Error("react-stack-top-frame");
-    }
-    function l(e) {
-      if (N.call(e, "key")) {
-        var r = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (r && r.isReactWarning) return !1;
-      }
-      return e.key !== void 0;
-    }
-    function m(e, r) {
-      function t() {
-        C || (C = !0, console.error(
-          "%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://react.dev/link/special-props)",
-          r
-        ));
-      }
-      t.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: t,
-        configurable: !0
-      });
-    }
-    function u() {
-      var e = f(this.type);
-      return $[e] || ($[e] = !0, console.error(
-        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), e = this.props.ref, e !== void 0 ? e : null;
-    }
-    function R(e, r, t, a, h, S) {
-      var o = t.ref;
-      return e = {
-        $$typeof: j,
-        type: e,
-        key: r,
-        props: t,
-        _owner: a
-      }, (o !== void 0 ? o : null) !== null ? Object.defineProperty(e, "ref", {
-        enumerable: !1,
-        get: u
-      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: 0
-      }), Object.defineProperty(e, "_debugInfo", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: null
-      }), Object.defineProperty(e, "_debugStack", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: h
-      }), Object.defineProperty(e, "_debugTask", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: S
-      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
-    }
-    function v(e, r, t, a, h, S) {
-      var o = r.children;
-      if (o !== void 0)
-        if (a)
-          if (Q(o)) {
-            for (a = 0; a < o.length; a++)
-              p(o[a]);
-            Object.freeze && Object.freeze(o);
-          } else
-            console.error(
-              "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 p(o);
-      if (N.call(r, "key")) {
-        o = f(e);
-        var _ = Object.keys(r).filter(function(K) {
-          return K !== "key";
-        });
-        a = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", I[o + a] || (_ = 0 < _.length ? "{" + _.join(": ..., ") + ": ...}" : "{}", console.error(
-          `A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,
-          a,
-          o,
-          _,
-          o
-        ), I[o + a] = !0);
-      }
-      if (o = null, t !== void 0 && (c(t), o = "" + t), l(r) && (c(r.key), o = "" + r.key), "key" in r) {
-        t = {};
-        for (var g in r)
-          g !== "key" && (t[g] = r[g]);
-      } else t = r;
-      return o && m(
-        t,
-        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), R(
-        e,
-        o,
-        t,
-        n(),
-        h,
-        S
-      );
-    }
-    function p(e) {
-      P(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === O && (e._payload.status === "fulfilled" ? P(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
-    }
-    function P(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === j;
-    }
-    var T = ee, j = Symbol.for("react.transitional.element"), W = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), U = Symbol.for("react.strict_mode"), z = Symbol.for("react.profiler"), V = Symbol.for("react.consumer"), q = Symbol.for("react.context"), B = Symbol.for("react.forward_ref"), G = Symbol.for("react.suspense"), J = Symbol.for("react.suspense_list"), X = Symbol.for("react.memo"), O = Symbol.for("react.lazy"), H = Symbol.for("react.activity"), Z = Symbol.for("react.client.reference"), A = T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, N = Object.prototype.hasOwnProperty, Q = Array.isArray, k = console.createTask ? console.createTask : function() {
-      return null;
-    };
-    T = {
-      react_stack_bottom_frame: function(e) {
-        return e();
-      }
-    };
-    var C, $ = {}, Y = T.react_stack_bottom_frame.bind(
-      T,
-      s
-    )(), F = k(i(s)), I = {};
-    b.Fragment = y, b.jsx = function(e, r, t) {
-      var a = 1e4 > A.recentlyCreatedOwnerStacks++;
-      return v(
-        e,
-        r,
-        t,
-        !1,
-        a ? Error("react-stack-top-frame") : Y,
-        a ? k(i(e)) : F
-      );
-    }, b.jsxs = function(e, r, t) {
-      var a = 1e4 > A.recentlyCreatedOwnerStacks++;
-      return v(
-        e,
-        r,
-        t,
-        !0,
-        a ? Error("react-stack-top-frame") : Y,
-        a ? k(i(e)) : F
-      );
-    };
-  }()), b;
-}
-process.env.NODE_ENV === "production" ? w.exports = te() : w.exports = ne();
-var x = w.exports;
-const ae = () => L(
-  (d, c) => {
-    const i = c == null ? void 0 : c.current;
-    if (!i) return;
-    const n = i.getBoundingClientRect(), s = Math.max(n.width, n.height), l = d.clientX - n.left - s / 2, m = d.clientY - n.top - s / 2, u = document.createElement("span");
-    u.style.width = u.style.height = `${s}px`, u.style.left = `${l}px`, u.style.top = `${m}px`, u.className = "ripple", i.appendChild(u), setTimeout(() => u.remove(), 600);
-  },
-  []
-), se = ({ index: f, text: d, selected: c, addClass: i, notimeout: n, size: s = "md", click: l, children: m }) => {
-  const u = re(null), R = ae(), v = L(
-    (p) => {
-      if (u != null && u.current) {
-        if (R(p, u), n) {
-          l == null || l(p);
-          return;
-        }
-        setTimeout(() => {
-          l == null || l(p);
-        }, 200);
-      }
-    },
-    [n, l, R]
-  );
-  return /* @__PURE__ */ x.jsx(x.Fragment, { children: /* @__PURE__ */ x.jsxs(
-    "button",
-    {
-      type: "button",
-      ref: u,
-      onClick: v,
-      className: `ext-btn ext-btn--primary ext-btn--${s} _ripple ${i ?? ""}`,
-      "aria-pressed": c,
-      children: [
-        m,
-        d && /* @__PURE__ */ x.jsx("div", { className: "ext-btn-label", children: d })
-      ]
-    },
-    f
-  ) });
-};
-export {
-  se as Ext_Button
-};

package/dist/style.css

@@ -1 +0,0 @@
-button{--btn-bg: #007aff;--btn-color: #fff;--btn-radius: 18px;--btn-padding-y: .5rem;--btn-padding-x: 1rem;--btn-width: fit-content;--btn-height: auto;--btn-font-size: 1rem;--btn-font-weight: 500;--btn-transition: all .2s ease;--btn-line-height: 1.5;--ripple-box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;--ripple-effect-bck: rgb(0 0 0 / 15%)}.ext-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:inherit;font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-color);background-color:var(--btn-bg);border:none;border-radius:var(--btn-radius);padding:var(--btn-padding-y) var(--btn-padding-x);width:var(--btn-width);height:var(--btn-height);cursor:pointer;transition:var(--btn-transition);text-align:center;text-decoration:none;-webkit-user-select:none;user-select:none}._ripple{line-height:var(--btn-line-height);font-weight:var(--btn-font-weight);box-shadow:var(--ripple-box-shadow);position:relative;overflow:hidden;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center}.ext-btn:focus-visible{outline:2px solid #007aff;outline-offset:2px}.ext-btn:disabled,.ext-btn[aria-disabled=true]{opacity:.6;cursor:not-allowed}.ext-btn:hover:not(:disabled):not([aria-disabled=true]){filter:brightness(.9)}.ext-btn:active:not(:disabled):not([aria-disabled=true]){transform:scale(.97)}.ext-btn--sm{--btn-padding-y: .25rem;--btn-padding-x: .75rem;--btn-font-size: .85rem}.ext-btn--md{--btn-padding-y: .5rem;--btn-padding-x: 1rem;--btn-font-size: 1rem}.ext-btn--lg{--btn-padding-y: .75rem;--btn-padding-x: 1.5rem;--btn-font-size: 1.1rem}.ext-btn--primary{--btn-bg: #007aff;--btn-color: #fff}.ext-btn--secondary{--btn-bg: #e5e5ea;--btn-color: #111}.ext-btn--outline,.ext-btn--ghost{--btn-bg: transparent;--btn-color: #007aff}.ext-btn--danger{--btn-bg: #ff3b30;--btn-color: #fff}.ext-btn--loading{pointer-events:none;opacity:.8}.ext-btn-icon{display:flex;align-items:center;justify-content:center;font-size:1.1em}.ext-btn-label{display:inline-block;white-space:nowrap}.ripple{background:var(--ripple-effect-bck);position:absolute;border-radius:50%;transform:scale(0);animation:ripple-animation .6s linear;pointer-events:none;transform-origin:center center;will-change:transform,opacity}@media (hover: hover) and (pointer: fine){._ripple{cursor:pointer}}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}.lds-ripple,.lds-ripple div{box-sizing:border-box}.lds-ripple{--image-sync-wh: 100%;--bw: 5px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:var(--image-sync-wh);width:var(--image-sync-wh);z-index:9999}.lds-ripple div{position:absolute;border:var(--bw) solid white;opacity:1;border-radius:50%;animation:lds-ripple 1s cubic-bezier(0,.4,.8,1) infinite}.lds-ripple div:nth-child(2){animation-delay:-.5s;border:var(--bw) solid whitesmoke}@keyframes lds-ripple{0%{top:50%;left:50%;width:8%;height:8%;opacity:.2;transform:translate(-50%,-50%)}5%{top:50%;left:50%;width:8%;height:8%;opacity:1;transform:translate(-50%,-50%)}to{top:50%;left:50%;width:var(--image-sync-wh);height:var(--image-sync-wh);opacity:.2;transform:translate(-50%,-50%)}}.closeBtn{--btn-width: 35px;--btn-height: 35px;padding:0;--btn-bg: lightgray}.saveBtn{--btn-height: 35px;--btn-padding-x: 30px;--btn-bg: #007aff}.trashBtn{--btn-height: 35px;--btn-padding-x: 10px;--btn-radius: 4px;--btn-bg: lightgray}