ehscan-react-components 0.1.46 → 0.1.47

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,6 +1,6 @@
 {
   "name": "ehscan-react-components",
-  "version": "0.1.46",
+  "version": "0.1.47",
   "description": "components",
   "main": "dist/Components.js",
   "types": "dist/Components.d.ts",

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/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);
-}