ehscan-react-components 0.1.46 → 0.1.48

package/README.md

@@ -7,6 +7,7 @@ This library is ideal for dashboards, admin panels, internal tools, and feature-
 ## 📦 Available Components
 
 ## Table of Contents
+- [Button](#button)
 - [Drag And Drop](#drag-and-drop)
 - [AddBox](#addbox)
 - [Window](#window)
@@ -24,6 +25,77 @@ yarn add ehscan-react-components
 
 # Usage Examples
 
+## Button
+
+A flexible, reusable button component for React with support for multiple interaction styles like raw, pop, and ripple effects.
+
+Features:
+
+- **Optional text and icon support**: You can pass text and/or children (e.g., an icon) to display inside the button.
+- **Multiple button styles**: Controlled via the type prop:
+  - "raw": Standard button with no extra visual effect.
+  - "pop": Shrinks slightly when pressed, creating a “pop” effect.
+  - "ripple": Shows a ripple animation on click.
+- **Click handling with optional delay**: The click callback is triggered on button press, with an optional 200ms delay unless notimeout is true.
+- **Custom styling**: You can pass additional classes via addClass.
+- **Accessibility support**: Uses aria-pressed to indicate a selected state.
+
+![Button Preview](https://raw.githubusercontent.com/beeplaced/ehscan-react-components/main/src/images/Button.png)
+
+```jsx
+import { Button } from 'ehscan-react-components';
+
+const ButtonPage = () => {
+
+  const doStuff = () => {
+    console.log("doStuff")
+  }
+
+  return (<>
+      <Button index={'primary'} text='Primary' type="pop" addClass="inject-styling" click={() => doStuff()} >
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="white"><path d="m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143ZM233-120l65-281L80-590l288-25 112-265 112 265 288 25-218 189 65 281-247-149-247 149Zm247-350Z" /></svg>
+      </Button>
+      <Button index={'danger'} text='Danger' type="pop" addClass="ext-btn--danger" click={() => doStuff()} >
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M330-120 120-330v-300l210-210h300l210 210v300L630-120H330Zm36-190 114-114 114 114 56-56-114-114 114-114-56-56-114 114-114-114-56 56 114 114-114 114 56 56Zm-2 110h232l164-164v-232L596-760H364L200-596v232l164 164Zm116-280Z" /></svg>
+      </Button>
+      <Button index={'secondary'} text='Secondary' type="pop" addClass="ext-btn--secondary" click={() => doStuff()} >
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#0000F5"><path d="M360-160q-19 0-36-8.5T296-192L80-480l216-288q11-15 28-23.5t36-8.5h440q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H360ZM180-480l180 240h440v-480H360L180-480Zm220 40q17 0 28.5-11.5T440-480q0-17-11.5-28.5T400-520q-17 0-28.5 11.5T360-480q0 17 11.5 28.5T400-440Zm140 0q17 0 28.5-11.5T580-480q0-17-11.5-28.5T540-520q-17 0-28.5 11.5T500-480q0 17 11.5 28.5T540-440Zm140 0q17 0 28.5-11.5T720-480q0-17-11.5-28.5T680-520q-17 0-28.5 11.5T640-480q0 17 11.5 28.5T680-440Zm-100-40Z" /></svg>
+      </Button>
+  </>)
+}
+
+```
+### Styling
+```css
+.inject-styling {
+  /* Spacing & layout */
+  --ext-btn-gap: 0.5rem;
+  --ext-btn-padding: 5px 10px 5px 5px;
+  --ext-btn-width: fit-content;
+  --ext-btn-height: auto;
+
+  /* Typography */
+  --ext-btn-font-size: 1rem;
+  --ext-btn-font-weight: 500;
+  --ext-btn-color: #fff;
+  --ext-btn-colorbtn-line-height: 1.5;
+  --ext-btn-font-family: inherit;
+
+  /* Background & color */
+  --ext-btn-bg: #007aff;
+  --ext-btn-color: #fff;
+
+  /* Border & radius */
+  --ext-btn-border: none;
+  --ext-btn-radius: 18px;
+
+  /* Effects & transitions */
+  --ext-btn-transition: all 0.2s ease;
+  --ext-btn-pop-scale: 0.95;
+  --ripple-box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
+}
+```
+
 ## Drag And Drop
 
 ```jsx
@@ -310,8 +382,10 @@ const WindowWrapper = ({ windowOpen, setWindowOpen }) => {
 ```
 ----
 # Changelog
+## [0.1.48] - 2025-12-12
+- Improved Button, module styling and docu, mobile usage (type: "pop")
+- Ripple module styling
 
 ## [0.1.45] - 2025-12-11
 - Added Drag And Drop Component
 - Added Window css module and docu
----

package/dist/Components.d.ts

@@ -1,4 +1,4 @@
-export { Button } from './Button';
+export { Button } from './button/Button';
 export { Window } from './window/Window';
 export { DragAndDrop } from './dnd/DragAndDrop';
 export { TextArea } from './TextArea';

package/dist/Components.js

@@ -1,5 +1,5 @@
 // ehscan-react-components entries
-export { Button } from './Button';
+export { Button } from './button/Button';
 export { Window } from './window/Window';
 export { DragAndDrop } from './dnd/DragAndDrop';
 export { TextArea } from './TextArea';

package/dist/{Button.d.ts → button/Button.d.ts}

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

package/dist/{Button.js → button/Button.js}

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useCallback } from "react";
-import useRipple from "./tools/useRipple";
-import './style/button.css';
-export const Button = ({ index, text, selected, addClass, notimeout, size = 'md', click, children }) => {
+import useRipple from "../tools/useRipple";
+import styles from '../style/button.module.css';
+export const Button = ({ index, text, selected, addClass, notimeout, click, type = "raw", children }) => {
     const buttonRef = useRef(null);
     const handleRipple = useRipple();
     const handleButtonClick = useCallback((event) => {
-        handleRipple(event, buttonRef);
+        if (type === 'ripple')
+            handleRipple(event, buttonRef);
         if (notimeout) {
             click === null || click === void 0 ? void 0 : click(event);
             return;
@@ -15,5 +16,5 @@ export const Button = ({ index, text, selected, addClass, notimeout, size = 'md'
             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--${size} _ripple ${addClass !== null && addClass !== void 0 ? addClass : 'ext-btn--primary'}`, "aria-pressed": selected, children: [children, text && _jsx("div", { className: "ext-btn-label", children: text })] }, index) }));
+    return (_jsx(_Fragment, { children: _jsxs("button", { type: "button", ref: buttonRef, onClick: handleButtonClick, className: `${styles.button} ${styles.ApplyRipple} ${addClass !== null && addClass !== void 0 ? addClass : styles.btnPrimary}${type === 'pop' ? ` ${styles.buttonPop}` : ''}`, "aria-pressed": selected, children: [children, text && _jsx("div", { className: styles.btnLabel, children: text })] }, index) }));
 };

package/dist/style/button.module.css

@@ -0,0 +1,100 @@
+/* EHSCAN Base Button */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ext-btn-gap, 0.5rem);
+  font-family: inherit;
+  font-size: var(--ext-btn-font-size, 1rem);
+  font-weight: var(--ext-btn-font-weight, 500);
+  color: var(--ext-btn-color, #fff);
+  background-color: var(--btn-bg, #007aff);
+  border: none;
+  border-radius: var(--ext-btn-radius, 18px);
+  padding: var(--ext-btn-padding, 5px 10px 5px 5px);
+  width: var(--ext-btn-width, fit-content);
+  height: var(--ext-btn-height, auto);
+  cursor: pointer;
+  transition: var(--ext-btn-transition, all 0.2s ease);
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  line-height: var(--ext-btn-colorbtn-line-height, 1.5);
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--ext-btn-bg, #007aff);
+  outline-offset: 2px;
+}
+
+.button:disabled,
+.button[aria-disabled="true"] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.button:hover:not(:disabled):not([aria-disabled="true"]) {
+  filter: brightness(0.9);
+}
+
+.buttonPop:active:not(:disabled):not([aria-disabled="true"]) {
+  transform: scale(var(--ext-btn-pop-scale, .95));
+}
+
+/* Variants */
+.btnPrimary {
+  --ext-btn-bg: #007aff;
+  --ext-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 state */
+.ext-btn--loading {
+  pointer-events: none;
+  opacity: 0.8;
+}
+
+/* Icon and label wrappers */
+.ext-btn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.1em;
+}
+
+.btnLabel {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+/* -------------- 
+  Apply Ripple effect 
+---------------*/
+.ApplyRipple {
+  box-shadow: var(--ripple-box-shadow, rgb(100 100 111 / 20%) 0px 7px 29px 0px);
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}

package/dist/style/ripple.module.css

@@ -0,0 +1,20 @@
+/* -------------- 
+  Ripple effect 
+---------------*/
+.ripple {
+  background: var(--ext-ripple-effect-bck, rgb(0 0 0 / 15%));
+  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;
+}
+
+@keyframes ripple-animation {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}

package/dist/tools/useRipple.js

@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+import styles from '../style/ripple.module.css';
 const useRipple = () => {
     const handleRipple = useCallback((event, buttonRef) => {
         const button = buttonRef.current;
@@ -12,7 +13,7 @@ const useRipple = () => {
         ripple.style.width = ripple.style.height = `${size}px`;
         ripple.style.left = `${x}px`;
         ripple.style.top = `${y}px`;
-        ripple.className = 'ripple';
+        ripple.className = styles.ripple;
         button.appendChild(ripple);
         setTimeout(() => ripple.remove(), 600);
     }, []);

package/dist/window/Window.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useEffect, useState } from "react";
 import { useDraggable } from "../tools/useDraggable"; // adjust path as needed
-import styles from './style/window.module.css';
+import styles from '../style/window.module.css';
 export const Window = ({ trackMove, open, initialPosition = { x: 600, y: 100 }, initialWidth = 400, initialBodyPadding = 20, header, body, footer, onClose, }) => {
     const targetRef = useRef(null);
     const headerRef = useRef(null);

package/package.json

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

package/dist/Window.d.ts

@@ -1,17 +0,0 @@
-import React from "react";
-import './style/window.css';
-export interface Props {
-    trackMove?: (args?: any) => void;
-    open: boolean;
-    initialPosition?: {
-        x: number;
-        y: number;
-    };
-    initialWidth?: number;
-    initialBodyPadding?: number;
-    header?: React.ReactNode;
-    body?: React.ReactNode;
-    footer?: React.ReactNode;
-    onClose?: () => void;
-}
-export declare const Window: React.FC<Props>;

package/dist/Window.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useEffect, useState } from "react";
-import { useDraggable } from "./tools/useDraggable"; // adjust path as needed
-import './style/window.css';
-export const Window = ({ trackMove, open, initialPosition = { x: 600, y: 100 }, initialWidth = 400, initialBodyPadding = 20, header, body, footer, onClose, }) => {
-    const targetRef = useRef(null);
-    const headerRef = useRef(null);
-    const resizeHandleRef = useRef(null);
-    const bodyRef = useRef(null);
-    const footerRef = useRef(null);
-    const [bodyPadding] = useState(initialBodyPadding);
-    const [windowWidth] = useState(initialWidth);
-    useDraggable(open, targetRef, headerRef, bodyRef, resizeHandleRef, bodyPadding, trackMove);
-    useEffect(() => {
-        if (!bodyRef.current || !targetRef.current || !headerRef.current)
-            return;
-        const headerHeight = headerRef.current.offsetHeight;
-        const topPosition = targetRef.current.getBoundingClientRect().top;
-        const availableHeight = window.innerHeight - topPosition - 20; // 20px bottom margin
-        const bodyMaxHeight = Math.max(100, availableHeight - headerHeight - 2 * bodyPadding);
-        bodyRef.current.style.maxHeight = `${bodyMaxHeight}px`;
-        bodyRef.current.style.overflowY = "auto";
-    }, [bodyPadding]);
-    const [fadeIn, setFadeIn] = useState(false);
-    useEffect(() => {
-        if (open === undefined)
-            return;
-        setTimeout(() => {
-            setFadeIn(open);
-        }, 0);
-    }, [open]);
-    if (!open)
-        return null;
-    return (_jsxs("div", { ref: targetRef, className: `ext-window${fadeIn ? ' fadein' : ''}`, style: { left: `${initialPosition.x}px`, top: `${initialPosition.y}px`, minWidth: `${windowWidth}px` }, children: [_jsx("div", { ref: headerRef, className: "ext-window-header", children: header !== null && header !== void 0 ? header : (_jsxs(_Fragment, { children: [_jsx("div", { className: "ext-window-drag-handle", children: "||" }), _jsx("div", { className: "ext-window-header-title", children: "Header" }), _jsx("div", { onClick: onClose, children: "close" })] })) }), _jsx("div", { ref: bodyRef, className: "ext-window-body _ewb", style: { padding: `${bodyPadding}px` }, children: body !== null && body !== void 0 ? body : _jsx(_Fragment, { children: "Body" }) }), footer && (_jsx("div", { ref: footerRef, className: "ext-window-footer", children: footer })), _jsx("div", { className: "resize-handle", ref: resizeHandleRef })] }));
-};

package/dist/style/button.css

@@ -1,132 +0,0 @@
-/* EHSCAN Base Button - Refactored */
-.ext-btn {
-  /* Core variables with fallbacks */
-  /* --btn-bg: #007aff;
-  --btn-color: #fff;
-  --btn-radius: 18px;
-  --btn-padding: 0.5rem;
-  --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;
-  --btn-gap: 0.5rem;
-  --ripple-box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
-  --ripple-effect-bck: rgb(0 0 0 / 15%); */
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--btn-gap, 0.5rem);
-  font-family: inherit;
-  font-size: var(--btn-font-size, 1rem);
-  font-weight: var(--btn-font-weight, 500);
-  color: var(--btn-color, #fff);
-  background-color: var(--btn-bg, #007aff);
-  border: none;
-  border-radius: var(--btn-radius, 18px);
-  padding: var(--btn-padding, 0.5rem);
-  width: var(--btn-width, fit-content);
-  height: var(--btn-height, auto);
-  cursor: pointer;
-  transition: var(--btn-transition, all 0.2s ease);
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  line-height: var(--btn-line-height, 1.5);
-}
-
-.ext-btn:focus-visible {
-  outline: 2px solid var(--btn-bg, #007aff);
-  outline-offset: 2px;
-}
-
-.ext-btn:disabled,
-.ext-btn[aria-disabled="true"] {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.ext-btn:hover:not(:disabled):not([aria-disabled="true"]) {
-  filter: brightness(0.9);
-}
-
-.ext-btn:active:not(:disabled):not([aria-disabled="true"]) {
-  transform: scale(0.97);
-}
-
-/* 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 state */
-.ext-btn--loading {
-  pointer-events: none;
-  opacity: 0.8;
-}
-
-/* Icon and label wrappers */
-.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 {
-  font-weight: var(--btn-font-weight, 500);
-  box-shadow: var(--ripple-box-shadow, rgb(100 100 111 / 20%) 0px 7px 29px 0px);
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-}
-
-.ripple {
-  background: var(--ripple-effect-bck, rgb(0 0 0 / 15%));
-  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;
-}
-
-@keyframes ripple-animation {
-  to {
-    transform: scale(4);
-    opacity: 0;
-  }
-}

package/dist/style/window.css

@@ -1,82 +0,0 @@
-/* 🪟 ExtWindow Base */
-.ext-window {
-  /* --ext-window-bck-color: white;
-  --ext-window-width: 400px;
-  --ext-window-min-height: 300px;
-  --ext-window-border-radius: 12px;
-  --ext-window-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
-  --ext-window-opacity: 0;
-  --ext-window-transition: opacity 0.4s ease-in-out; */
-  background-color: var(--ext-window-bck-color, white);
-  position: absolute;
-  width: var(--ext-window-width, 400px);
-  min-height: var(--ext-window-min-height, 300px);
-  border-radius: var(--ext-window-border-radius, 12px);
-  box-shadow: var(--ext-window-shadow, rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px);
-  opacity: var(--ext-window-opacity, 0);
-  transition: var(--ext-window-transition, opacity 0.4s ease-in-out);
-  user-select: none;
-}
-
-.ext-window.fadein {
-  opacity: 1;
-}
-
-/* Header */
-.ext-window-header {
-  border-radius: var(--ext-window-border-radius, 12px) var(--ext-window-border-radius, 12px) 0 0;
-  background-color: var(--ext-window-header-bck-color, transparent);
-  height: var(--ext-window-header-height, 50px);
-  cursor: pointer;
-  display: flex;
-}
-
-/* Body */
-.ext-window-body {
-  background-color: var(--ext-window-body-bck, transparent);
-  min-height: var(--ext-window-min-height, 200px);
-  overflow: auto;
-}
-
-/* Footer */
-.ext-window-footer {
-  background-color: var(--ext-window-footer-bck, transparent);
-  height: var(--ext-window-footer-height, 50px);
-  border-radius: 0 0 var(--ext-window-border-radius, 12px) var(--ext-window-border-radius, 12px);
-}
-
-/* Scrollbars for WebKit */
-._ewb::-webkit-scrollbar {
-  width: 6px;
-  background-color: var(--ext-window-bck-color, white);
-}
-
-._ewb:hover::-webkit-scrollbar {
-  width: 6px;
-}
-
-._ewb::-webkit-scrollbar-thumb {
-  background-color: var(--ext-window-scrollbar-thumb, white);
-  border-radius: 12px;
-}
-
-._ewb:hover::-webkit-scrollbar-thumb {
-  background-color: var(--ext-window-scrollbar-thumb-hover, #555);
-}
-
-/* Resize handle */
-.resize-handle {
-    width: 7px;
-    height: 120px;
-    position: absolute;
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
-    cursor: e-resize;
-    background-color: transparent;
-    border-radius: 22px 0 0 22px;
-}
-
-.resize-handle:hover {
-    background: var(--ext-window-resize-bck, darkgrey);
-}