ehscan-react-components 0.1.6 → 0.1.7

package/README.md

@@ -1,79 +1,4 @@
-# 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.
+# ehscan-react-components
 
 ----
 # Changelog

package/dist/Button.d.ts

@@ -9,5 +9,5 @@ type Props = {
     click?: (args?: any) => void;
     children?: ReactNode;
 };
-declare const Button: React.FC<Props>;
-export default Button;
+export declare const Button: React.FC<Props>;
+export {};

package/dist/Button.js

@@ -1,7 +1,7 @@
 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 Button = ({ index, text, selected, addClass, notimeout, size = 'md', click, children }) => {
+export const Button = ({ index, text, selected, addClass, notimeout, size = 'md', click, children }) => {
     const buttonRef = useRef(null);
     const handleRipple = useRipple();
     const handleButtonClick = useCallback((event) => {
@@ -16,4 +16,3 @@ const Button = ({ index, text, selected, addClass, notimeout, size = 'md', click
     }, [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 Button;

package/dist/Components.d.ts

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

package/dist/Components.js

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

package/dist/style/button.css

@@ -0,0 +1,250 @@
+/* EHSCAN Base Button */
+
+button {
+    /* Button default variables */
+    --btn-bg: #007aff;
+    --btn-color: #fff;
+    --btn-radius: 18px;
+    --btn-padding-y: 0.5rem;
+    --btn-padding-x: 1rem;
+    --btn-width: fit-content;
+    --btn-height: auto;
+    --btn-font-size: 1rem;
+    --btn-font-weight: 500;
+    --btn-transition: all 0.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: 0.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;
+  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;
+}
+
+/* 🧭 Focus */
+.ext-btn:focus-visible {
+  outline: 2px solid #007aff;
+  outline-offset: 2px;
+}
+
+/* 🚫 Disabled */
+.ext-btn:disabled,
+.ext-btn[aria-disabled="true"] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Hover — slightly darker */
+.ext-btn:hover:not(:disabled):not([aria-disabled="true"]) {
+  filter: brightness(0.9); /* 10% darker */
+}
+
+/* 🖱️ Hover + Active */
+/* .ext-btn:hover:not(:disabled):not([aria-disabled="true"]) {
+  filter: brightness(1.1);
+} */
+
+.ext-btn:active:not(:disabled):not([aria-disabled="true"]) {
+  transform: scale(0.97);
+}
+
+/* 🧩 Sizes */
+.ext-btn--sm {
+  --btn-padding-y: 0.25rem;
+  --btn-padding-x: 0.75rem;
+  --btn-font-size: 0.85rem;
+}
+
+.ext-btn--md {
+  --btn-padding-y: 0.5rem;
+  --btn-padding-x: 1rem;
+  --btn-font-size: 1rem;
+}
+
+.ext-btn--lg {
+  --btn-padding-y: 0.75rem;
+  --btn-padding-x: 1.5rem;
+  --btn-font-size: 1.1rem;
+}
+
+/* 🎨 Variants */
+.ext-btn--primary {
+  --btn-bg: #007aff;
+  --btn-color: #fff;
+}
+
+.ext-btn--secondary {
+  --btn-bg: #e5e5ea;
+  --btn-color: #111;
+}
+
+.ext-btn--outline {
+  --btn-bg: transparent;
+  --btn-color: #007aff;
+}
+
+.ext-btn--ghost {
+  --btn-bg: transparent;
+  --btn-color: #007aff;
+}
+
+.ext-btn--danger {
+  --btn-bg: #ff3b30;
+  --btn-color: #fff;
+}
+
+/* 🌀 Loading (optional if using spinner) */
+.ext-btn--loading {
+  pointer-events: none;
+  opacity: 0.8;
+}
+
+/* 📦 Content Layout */
+.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 EFFECT */
+.ripple {
+  background: var(--ripple-effect-bck);
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple-animation 0.6s linear;
+  pointer-events: none;
+  transform-origin: center center;
+  will-change: transform, opacity;
+}
+
+/* Only devices that can hover (desktop/laptop) */
+@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, 0.4, 0.8, 1) infinite;
+}
+
+.lds-ripple div:nth-child(2) {
+  animation-delay: -0.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%);
+  }
+
+  100% {
+    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;
+}

package/dist/style/style/button.css

@@ -0,0 +1,250 @@
+/* EHSCAN Base Button */
+
+button {
+    /* Button default variables */
+    --btn-bg: #007aff;
+    --btn-color: #fff;
+    --btn-radius: 18px;
+    --btn-padding-y: 0.5rem;
+    --btn-padding-x: 1rem;
+    --btn-width: fit-content;
+    --btn-height: auto;
+    --btn-font-size: 1rem;
+    --btn-font-weight: 500;
+    --btn-transition: all 0.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: 0.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;
+  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;
+}
+
+/* 🧭 Focus */
+.ext-btn:focus-visible {
+  outline: 2px solid #007aff;
+  outline-offset: 2px;
+}
+
+/* 🚫 Disabled */
+.ext-btn:disabled,
+.ext-btn[aria-disabled="true"] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Hover — slightly darker */
+.ext-btn:hover:not(:disabled):not([aria-disabled="true"]) {
+  filter: brightness(0.9); /* 10% darker */
+}
+
+/* 🖱️ Hover + Active */
+/* .ext-btn:hover:not(:disabled):not([aria-disabled="true"]) {
+  filter: brightness(1.1);
+} */
+
+.ext-btn:active:not(:disabled):not([aria-disabled="true"]) {
+  transform: scale(0.97);
+}
+
+/* 🧩 Sizes */
+.ext-btn--sm {
+  --btn-padding-y: 0.25rem;
+  --btn-padding-x: 0.75rem;
+  --btn-font-size: 0.85rem;
+}
+
+.ext-btn--md {
+  --btn-padding-y: 0.5rem;
+  --btn-padding-x: 1rem;
+  --btn-font-size: 1rem;
+}
+
+.ext-btn--lg {
+  --btn-padding-y: 0.75rem;
+  --btn-padding-x: 1.5rem;
+  --btn-font-size: 1.1rem;
+}
+
+/* 🎨 Variants */
+.ext-btn--primary {
+  --btn-bg: #007aff;
+  --btn-color: #fff;
+}
+
+.ext-btn--secondary {
+  --btn-bg: #e5e5ea;
+  --btn-color: #111;
+}
+
+.ext-btn--outline {
+  --btn-bg: transparent;
+  --btn-color: #007aff;
+}
+
+.ext-btn--ghost {
+  --btn-bg: transparent;
+  --btn-color: #007aff;
+}
+
+.ext-btn--danger {
+  --btn-bg: #ff3b30;
+  --btn-color: #fff;
+}
+
+/* 🌀 Loading (optional if using spinner) */
+.ext-btn--loading {
+  pointer-events: none;
+  opacity: 0.8;
+}
+
+/* 📦 Content Layout */
+.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 EFFECT */
+.ripple {
+  background: var(--ripple-effect-bck);
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple-animation 0.6s linear;
+  pointer-events: none;
+  transform-origin: center center;
+  will-change: transform, opacity;
+}
+
+/* Only devices that can hover (desktop/laptop) */
+@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, 0.4, 0.8, 1) infinite;
+}
+
+.lds-ripple div:nth-child(2) {
+  animation-delay: -0.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%);
+  }
+
+  100% {
+    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;
+}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "ehscan-react-components",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "components",
   "main": "dist/Components.js",
   "types": "dist/Components.d.ts",
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && npm run copy-css",
+    "copy-css": "cp -r src/style dist/style",
     "prepublishOnly": "npm run build"
   },
   "keywords": [

package/dist/ExtButton.d.ts

@@ -1,13 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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;