@-reddacted-/react-ui 0.1.0

package/dist/ColorPicker.d.ts

@@ -0,0 +1,9 @@
+import "./ColorPicker.css";
+interface ColorPickerProps {
+    value: string;
+    onChange: (value: string) => void;
+    className?: string;
+}
+export default function ColorPicker({ value, onChange, className }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ColorPicker.d.ts.map

package/dist/ColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../src/ColorPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,mBAAmB,CAAA;AAE1B,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAKD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CA2FnF"}

package/dist/ColorPicker.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useLayoutEffect } from "react";
+import { HexColorPicker } from "react-colorful";
+import "./ColorPicker.css";
+const HEX_RE = /^#[0-9a-fA-F]{6}$/;
+const safe = (v) => (HEX_RE.test(v) ? v : "#000000");
+export default function ColorPicker({ value, onChange, className }) {
+    const [open, setOpen] = useState(false);
+    const [inputValue, setInputValue] = useState(value);
+    const [pos, setPos] = useState({ top: 0, left: 0 });
+    const [positioned, setPositioned] = useState(false);
+    const swatchRef = useRef(null);
+    const popoverRef = useRef(null);
+    useEffect(() => { setInputValue(value); }, [value]);
+    useLayoutEffect(() => {
+        if (!open || !popoverRef.current || !swatchRef.current) {
+            setPositioned(false);
+            return;
+        }
+        const pr = popoverRef.current.getBoundingClientRect();
+        const sr = swatchRef.current.getBoundingClientRect();
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const gap = 6;
+        const top = sr.bottom + gap + pr.height > vh
+            ? Math.max(4, sr.top - pr.height - gap)
+            : sr.bottom + gap;
+        const left = sr.left + pr.width > vw
+            ? Math.max(4, vw - pr.width - 8)
+            : sr.left;
+        setPos({ top, left });
+        setPositioned(true);
+    }, [open]);
+    const toggle = () => {
+        if (!open)
+            setInputValue(value);
+        setOpen(o => !o);
+    };
+    useEffect(() => {
+        if (!open)
+            return;
+        const handleMouseDown = (e) => {
+            if (!popoverRef.current?.contains(e.target) &&
+                !swatchRef.current?.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", handleMouseDown);
+        return () => document.removeEventListener("mousedown", handleMouseDown);
+    }, [open]);
+    const handleHexInput = (e) => {
+        const v = e.target.value;
+        setInputValue(v);
+        if (HEX_RE.test(v))
+            onChange(v);
+    };
+    return (_jsxs("div", { className: `color-picker${className ? ` ${className}` : ""}`, children: [_jsx("button", { ref: swatchRef, type: "button", className: "color-picker__swatch", style: { background: safe(value) }, onClick: toggle, "aria-label": `Color: ${value}` }), open && (_jsxs("div", { ref: popoverRef, className: "color-picker__popover", style: {
+                    position: "fixed",
+                    top: pos.top,
+                    left: pos.left,
+                    visibility: positioned ? "visible" : "hidden",
+                }, onMouseDown: e => e.stopPropagation(), children: [_jsx(HexColorPicker, { color: safe(value), onChange: onChange }), _jsx("input", { type: "text", className: "color-picker__hex-input", value: inputValue, onChange: handleHexInput, maxLength: 7, spellCheck: false })] }))] }));
+}

package/dist/ConfirmDeleteButton.d.ts

@@ -0,0 +1,11 @@
+type Props = {
+    onConfirm: () => void;
+    label?: string;
+    confirmLabel?: string;
+    className?: string;
+    /** Delay in ms before the confirm state auto-resets (default: 10000) */
+    resetDelay?: number;
+};
+export default function ConfirmDeleteButton({ onConfirm, label, confirmLabel, className, resetDelay, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ConfirmDeleteButton.d.ts.map

package/dist/ConfirmDeleteButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDeleteButton.d.ts","sourceRoot":"","sources":["../src/ConfirmDeleteButton.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG;IACX,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,SAAS,EACT,KAAgB,EAChB,YAA8B,EAC9B,SAAS,EACT,UAAmB,GACpB,EAAE,KAAK,2CA4BP"}

package/dist/ConfirmDeleteButton.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+export default function ConfirmDeleteButton({ onConfirm, label = "Delete", confirmLabel = "Are you sure?", className, resetDelay = 10000, }) {
+    const [confirming, setConfirming] = useState(false);
+    useEffect(() => {
+        if (!confirming)
+            return;
+        const timer = setTimeout(() => setConfirming(false), resetDelay);
+        return () => clearTimeout(timer);
+    }, [confirming, resetDelay]);
+    const handleClick = () => {
+        if (!confirming) {
+            setConfirming(true);
+            return;
+        }
+        onConfirm();
+    };
+    return (_jsx("button", { type: "button", onClick: handleClick, className: className, style: {
+            color: "var(--confirm-delete-danger-color, #e55)",
+            borderColor: "var(--confirm-delete-danger-color, #e55)",
+            background: confirming ? "var(--confirm-delete-danger-bg, rgba(220,50,50,0.15))" : undefined,
+        }, children: confirming ? confirmLabel : label }));
+}

package/dist/Modal.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import type { ReactNode } from "react";
+export declare function openModal(id: string): void;
+export declare function closeModal(id: string): void;
+type ModalProps = {
+    id: string;
+    width?: string | number;
+    height?: string | number;
+    children: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    preventClose?: boolean;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+};
+export default function Modal({ id, width, height, children, className, style, preventClose, ariaLabelledBy, ariaDescribedBy, }: ModalProps): React.ReactPortal | null;
+export {};
+//# sourceMappingURL=Modal.d.ts.map

package/dist/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../src/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAgBtC,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,QAGnC;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,QAEpC;AAED,KAAK,UAAU,GAAG;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,EAAE,EACF,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,YAAoB,EACpB,cAAc,EACd,eAAe,GAChB,EAAE,UAAU,4BA+KZ"}

package/dist/Modal.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+const listeners = new Map();
+function on(event, cb) {
+    if (!listeners.has(event))
+        listeners.set(event, new Set());
+    listeners.get(event).add(cb);
+    return () => listeners.get(event).delete(cb);
+}
+function emit(event, payload) {
+    listeners.get(event)?.forEach(cb => cb(payload));
+}
+export function openModal(id) {
+    emit("modal:closeAll");
+    emit("modal:open", id);
+}
+export function closeModal(id) {
+    emit("modal:close", id);
+}
+export default function Modal({ id, width, height, children, className, style, preventClose = false, ariaLabelledBy, ariaDescribedBy, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const contentRef = useRef(null);
+    const lastFocusedEl = useRef(null);
+    const portalTarget = useRef(null);
+    useEffect(() => {
+        const offOpen = on("modal:open", (targetId) => {
+            if (targetId === id) {
+                lastFocusedEl.current = document.activeElement ?? null;
+                setIsOpen(true);
+            }
+        });
+        const offClose = on("modal:close", (targetId) => {
+            if (targetId === id)
+                setIsOpen(false);
+        });
+        const offCloseAll = on("modal:closeAll", () => setIsOpen(false));
+        return () => { offOpen(); offClose(); offCloseAll(); };
+    }, [id]);
+    useEffect(() => {
+        let el = document.getElementById("__modal-root__");
+        if (!el) {
+            el = document.createElement("div");
+            el.id = "__modal-root__";
+            document.body.appendChild(el);
+        }
+        portalTarget.current = el;
+    }, []);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const prevOverflow = document.body.style.overflow;
+        const prevPadRight = document.body.style.paddingRight;
+        const scrollbarW = window.innerWidth - document.documentElement.clientWidth;
+        if (scrollbarW > 0)
+            document.body.style.paddingRight = `${scrollbarW}px`;
+        document.body.style.overflow = "hidden";
+        const to = setTimeout(() => {
+            const container = contentRef.current;
+            if (!container)
+                return;
+            const focusables = container.querySelectorAll('a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])');
+            (focusables[0] ?? container).focus();
+        }, 0);
+        const onKeyDown = (e) => {
+            if (e.key === "Escape" && !preventClose) {
+                closeModal(id);
+                return;
+            }
+            if (e.key !== "Tab")
+                return;
+            const container = contentRef.current;
+            if (!container)
+                return;
+            const focusables = Array.from(container.querySelectorAll('a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])')).filter(el => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden"));
+            if (focusables.length === 0)
+                return;
+            const first = focusables[0];
+            const last = focusables[focusables.length - 1];
+            const active = document.activeElement;
+            if (e.shiftKey) {
+                if (active === first || !container.contains(active)) {
+                    last.focus();
+                    e.preventDefault();
+                }
+            }
+            else {
+                if (active === last || !container.contains(active)) {
+                    first.focus();
+                    e.preventDefault();
+                }
+            }
+        };
+        const onFocusIn = (e) => {
+            const container = contentRef.current;
+            if (!container)
+                return;
+            if (!container.contains(e.target))
+                container.focus();
+        };
+        document.addEventListener("keydown", onKeyDown);
+        document.addEventListener("focusin", onFocusIn);
+        return () => {
+            document.body.style.overflow = prevOverflow;
+            document.body.style.paddingRight = prevPadRight;
+            clearTimeout(to);
+            document.removeEventListener("keydown", onKeyDown);
+            document.removeEventListener("focusin", onFocusIn);
+            lastFocusedEl.current?.focus?.();
+            lastFocusedEl.current = null;
+        };
+    }, [isOpen, id, preventClose]);
+    if (!isOpen || !portalTarget.current)
+        return null;
+    const w = typeof width === "number" ? `${width}px` : width ?? undefined;
+    const h = typeof height === "number" ? `${height}px` : height ?? undefined;
+    const prefersReducedMotion = typeof window !== "undefined" &&
+        window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
+    const contentStyles = {
+        position: "fixed",
+        inset: 0,
+        display: "grid",
+        placeItems: "center",
+        zIndex: 9999,
+        backdropFilter: "blur(2px)",
+        background: "rgba(0,0,0,0.35)",
+        animation: prefersReducedMotion ? "none" : "modalFade 150ms ease-out",
+    };
+    const cardStyles = {
+        maxWidth: "95vw",
+        maxHeight: "95vh",
+        width: w,
+        height: h,
+        overflow: "auto",
+        outline: "none",
+        background: "var(--modal-background, #1a1a1a)",
+        borderRadius: "10px",
+    };
+    const overlayStyles = {
+        position: "fixed",
+        inset: 0,
+        backdropFilter: "blur(2px)",
+        background: "rgba(0,0,0,0.35)",
+        zIndex: 9998,
+        animation: prefersReducedMotion ? "none" : "modalPop 160ms ease-out",
+    };
+    const innerWrapper = {
+        animation: prefersReducedMotion ? "none" : "modalPop 160ms ease-out",
+    };
+    const keyframes = (_jsx("style", { children: `
+      @keyframes modalFade {
+        from { opacity: 0; } to { opacity: 1; }
+      }
+      @keyframes modalPop {
+        from { opacity: 0; transform: translateY(4px) scale(0.98); }
+        to   { opacity: 1; transform: translateY(0) scale(1); }
+      }
+    ` }));
+    return createPortal(_jsxs(_Fragment, { children: [keyframes, _jsx("div", { "aria-hidden": "true", style: overlayStyles, onClick: () => { if (!preventClose)
+                    closeModal(id); } }), _jsx("div", { style: contentStyles, "aria-hidden": !isOpen, onMouseDown: e => { if (!preventClose && e.target === e.currentTarget)
+                    closeModal(id); }, children: _jsx("div", { style: innerWrapper, children: _jsx("div", { ref: contentRef, role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, tabIndex: -1, className: className ?? "", style: { ...cardStyles, ...style }, onMouseDown: e => e.stopPropagation(), children: children }) }) })] }), portalTarget.current);
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Modal, openModal, closeModal } from "./Modal";
+export { default as ColorPicker } from "./ColorPicker";
+export { default as ConfirmDeleteButton } from "./ConfirmDeleteButton";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default as Modal, openModal, closeModal } from "./Modal";
+export { default as ColorPicker } from "./ColorPicker";
+export { default as ConfirmDeleteButton } from "./ConfirmDeleteButton";

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@-reddacted-/react-ui",
+  "version": "0.1.0",
+  "description": "Modal, ColorPicker and ConfirmDeleteButton React components",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "react-colorful": "^5.6.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "~5.8.3"
+  }
+}