@paroicms/react-ui 0.4.4 → 0.5.0

package/dist/Tooltip.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import "../styles/Tooltip.css";
+import { clsx } from "clsx";
+import { useEffect, useRef, useState } from "react";
+export function Tooltip({ content, position = "top", children, className, delay = 200, }) {
+    const [visible, setVisible] = useState(false);
+    const [coords, setCoords] = useState({ top: 0, left: 0 });
+    const triggerRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const timeoutRef = useRef(undefined);
+    const showTooltip = () => {
+        timeoutRef.current = window.setTimeout(() => {
+            setVisible(true);
+        }, delay);
+    };
+    const hideTooltip = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        setVisible(false);
+    };
+    useEffect(() => {
+        if (!visible || !triggerRef.current)
+            return;
+        const trigger = triggerRef.current;
+        const rect = trigger.getBoundingClientRect();
+        let top = 0;
+        let left = 0;
+        switch (position) {
+            case "top":
+                top = rect.top - 8;
+                left = rect.left + rect.width / 2;
+                break;
+            case "bottom":
+                top = rect.bottom + 8;
+                left = rect.left + rect.width / 2;
+                break;
+            case "left":
+                top = rect.top + rect.height / 2;
+                left = rect.left - 8;
+                break;
+            case "right":
+                top = rect.top + rect.height / 2;
+                left = rect.right + 8;
+                break;
+        }
+        setCoords({ top, left });
+    }, [visible, position]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, className: "PaTooltip-trigger", onMouseEnter: showTooltip, onMouseLeave: hideTooltip, onFocus: showTooltip, onBlur: hideTooltip, children: children }), visible && (_jsx("div", { ref: tooltipRef, className: clsx("PaTooltip", position, className), style: { top: coords.top, left: coords.left }, role: "tooltip", children: content }))] }));
+}

package/dist/Tree.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+import "../styles/Tree.css";
+export interface TreeNode {
+    key: string;
+    label: ReactNode;
+    children?: TreeNode[];
+    data?: unknown;
+    selectable?: boolean;
+    icon?: ReactNode;
+    className?: string;
+}
+export interface TreeProps {
+    value: TreeNode[];
+    selectionMode?: "single" | "checkbox";
+    selection?: Record<string, boolean>;
+    onSelectionChange?: (selection: Record<string, boolean>) => void;
+    expandedKeys?: Record<string, boolean>;
+    onExpandedKeysChange?: (keys: Record<string, boolean>) => void;
+    nodeTemplate?: (node: TreeNode) => ReactNode;
+    className?: string;
+}
+export declare function Tree({ value, selectionMode, selection, onSelectionChange, expandedKeys, onExpandedKeysChange, nodeTemplate, className, }: TreeProps): import("react/jsx-runtime").JSX.Element;

package/dist/Tree.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useCallback } from "react";
+import "../styles/Tree.css";
+export function Tree({ value, selectionMode, selection = {}, onSelectionChange, expandedKeys = {}, onExpandedKeysChange, nodeTemplate, className, }) {
+    const toggleExpand = useCallback((key) => {
+        if (onExpandedKeysChange) {
+            const newKeys = { ...expandedKeys };
+            if (newKeys[key]) {
+                delete newKeys[key];
+            }
+            else {
+                newKeys[key] = true;
+            }
+            onExpandedKeysChange(newKeys);
+        }
+    }, [expandedKeys, onExpandedKeysChange]);
+    const toggleSelect = useCallback((key, node) => {
+        if (!onSelectionChange || node.selectable === false)
+            return;
+        if (selectionMode === "single") {
+            onSelectionChange({ [key]: true });
+        }
+        else if (selectionMode === "checkbox") {
+            const newSelection = { ...selection };
+            if (newSelection[key]) {
+                delete newSelection[key];
+            }
+            else {
+                newSelection[key] = true;
+            }
+            onSelectionChange(newSelection);
+        }
+    }, [selection, selectionMode, onSelectionChange]);
+    return (_jsx("div", { className: clsx("PaTree", className), children: _jsx("ul", { className: "PaTree-root", children: value.map((node) => (_jsx(TreeNodeItem, { node: node, expandedKeys: expandedKeys, selection: selection, selectionMode: selectionMode, onToggleExpand: toggleExpand, onToggleSelect: toggleSelect, nodeTemplate: nodeTemplate }, node.key))) }) }));
+}
+function TreeNodeItem({ node, expandedKeys, selection, selectionMode, onToggleExpand, onToggleSelect, nodeTemplate, }) {
+    const hasChildren = node.children && node.children.length > 0;
+    const isExpanded = expandedKeys[node.key];
+    const isSelected = selection[node.key];
+    return (_jsxs("li", { className: clsx("PaTree-node", node.className), children: [_jsxs("div", { className: clsx("PaTree-nodeContent", isSelected && "selected"), children: [hasChildren ? (_jsx("button", { type: "button", className: "PaTree-toggle", onClick: () => onToggleExpand(node.key), "aria-label": isExpanded ? "Collapse" : "Expand", children: isExpanded ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 }) })) : (_jsx("span", { className: "PaTree-togglePlaceholder" })), selectionMode === "checkbox" && (_jsx("input", { type: "checkbox", className: "PaTree-checkbox", checked: isSelected, onChange: () => onToggleSelect(node.key, node), disabled: node.selectable === false })), selectionMode === "single" && node.selectable !== false ? (_jsxs("button", { type: "button", className: clsx("PaTree-labelWrapper", "selectable"), onClick: () => onToggleSelect(node.key, node), children: [node.icon && _jsx("span", { className: "PaTree-icon", children: node.icon }), nodeTemplate ? nodeTemplate(node) : _jsx("span", { className: "PaTree-label", children: node.label })] })) : (_jsxs("div", { className: "PaTree-labelWrapper", children: [node.icon && _jsx("span", { className: "PaTree-icon", children: node.icon }), nodeTemplate ? nodeTemplate(node) : _jsx("span", { className: "PaTree-label", children: node.label })] }))] }), hasChildren && isExpanded && (_jsx("ul", { className: "PaTree-children", children: node.children?.map((child) => (_jsx(TreeNodeItem, { node: child, expandedKeys: expandedKeys, selection: selection, selectionMode: selectionMode, onToggleExpand: onToggleExpand, onToggleSelect: onToggleSelect, nodeTemplate: nodeTemplate }, child.key))) }))] }));
+}

package/dist/alert-stack.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode, Ref } from "react";
+export type AlertSeverity = "info" | "success" | "warning" | "error";
+export interface ShowAlertOptions {
+    severity?: AlertSeverity;
+    autoDismiss?: boolean;
+}
+export interface AlertStackHandle {
+    showAlert: (message: string, options?: ShowAlertOptions) => void;
+    showError: (error: unknown) => void;
+}
+interface AlertStackProviderProps {
+    children: ReactNode;
+    ref?: Ref<AlertStackHandle>;
+}
+export declare function AlertStackProvider({ children, ref }: AlertStackProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useAlertStack(): AlertStackHandle;
+export declare function AlertStack(): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/alert-stack.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { messageOf } from "@paroicms/public-anywhere-lib";
+import { createContext, useCallback, useContext, useEffect, useImperativeHandle, useReducer, useRef, } from "react";
+import { Alert } from "./Alert.js";
+import { useReactUIConfig } from "./react-ui-provider.js";
+const AlertStackContext = createContext(undefined);
+export function AlertStackProvider({ children, ref }) {
+    const { logger } = useReactUIConfig();
+    const queue = useRef([]);
+    const idSeq = useRef(0);
+    const [renderCount, forceRender] = useReducer((x) => x + 1, 0);
+    const showAlert = useCallback((message, options) => {
+        const alert = {
+            id: ++idSeq.current,
+            message,
+            severity: options?.severity ?? "info",
+            autoDismiss: options?.autoDismiss ?? false,
+        };
+        queue.current.push(alert);
+        forceRender();
+    }, []);
+    const dismissCurrent = useCallback(() => {
+        queue.current.shift();
+        forceRender();
+    }, []);
+    const showError = useCallback((error) => {
+        logger.error("AlertStack caught error:", error);
+        showAlert(messageOf(error), { severity: "error" });
+    }, [showAlert]);
+    useImperativeHandle(ref, () => ({ showAlert, showError }), [showAlert, showError]);
+    const contextValue = {
+        showAlert,
+        queue: queue.current,
+        dismissCurrent,
+    };
+    // renderCount is used to ensure context value updates trigger re-renders
+    void renderCount;
+    return _jsx(AlertStackContext.Provider, { value: contextValue, children: children });
+}
+export function useAlertStack() {
+    const context = useContext(AlertStackContext);
+    if (!context) {
+        throw new Error("useAlertStack must be used within an AlertStackProvider");
+    }
+    const showError = useCallback((error) => {
+        context.showAlert(messageOf(error), { severity: "error" });
+    }, [context.showAlert]);
+    return { showAlert: context.showAlert, showError };
+}
+export function AlertStack() {
+    const context = useContext(AlertStackContext);
+    const config = useReactUIConfig();
+    if (!context) {
+        throw new Error("AlertStack must be used within an AlertStackProvider");
+    }
+    const { queue, dismissCurrent } = context;
+    const currentAlert = queue[0];
+    useEffect(() => {
+        if (!currentAlert?.autoDismiss)
+            return;
+        const timer = setTimeout(dismissCurrent, config.autoDismissAlertDurationMs);
+        return () => clearTimeout(timer);
+    }, [
+        currentAlert?.id,
+        currentAlert?.autoDismiss,
+        config.autoDismissAlertDurationMs,
+        dismissCurrent,
+    ]);
+    if (!currentAlert)
+        return null;
+    return (_jsx(Alert, { severity: currentAlert.severity, onClose: dismissCurrent, children: currentAlert.message }));
+}

package/dist/index.d.ts

@@ -1,11 +1,37 @@
-import "../styles/index.scss";
-export * from "./PuAccordion.jsx";
-export * from "./PuButton.jsx";
-export * from "./PuCheckbox.jsx";
-export * from "./PuInput.jsx";
-export * from "./PuMenuItem.jsx";
-export * from "./PuPopupMenu.jsx";
-export * from "./PuSelect.jsx";
-export * from "./PuSideMenu.jsx";
-export * from "./PuSpinner.jsx";
+import "../styles/theme/index.css";
+export * from "./Checkbox.js";
+export * from "./DateInput.js";
+export * from "./InputNumber.js";
+export * from "./InputText.js";
+export * from "./MultiSelect.js";
+export * from "./PasswordInput.js";
+export * from "./RadioButton.js";
+export * from "./Select.js";
+export * from "./Switch.js";
+export * from "./Textarea.js";
+export * from "./ToggleGroup.js";
+export * from "./Button.js";
+export * from "./SplitButton.js";
+export * from "./ToggleButton.js";
+export * from "./Alert.js";
+export * from "./Badge.js";
+export * from "./Card.js";
+export * from "./Chip.js";
+export * from "./Column.js";
+export * from "./DataTable.js";
+export * from "./Breadcrumb.js";
+export * from "./MenuItem.js";
+export * from "./PopupMenu.js";
+export * from "./SideMenu.js";
+export * from "./Tabs.js";
+export * from "./Dialog.js";
+export * from "./Spinner.js";
+export * from "./Tooltip.js";
+export * from "./Accordion.js";
+export * from "./Inplace.js";
+export * from "./Panel.js";
+export * from "./Tree.js";
+export * from "./SortableList.js";
+export * from "./alert-stack.js";
+export * from "./react-ui-provider.js";
 export type * from "./paroi-ui-lib-types.js";

package/dist/index.js

@@ -1,10 +1,45 @@
-import "../styles/index.scss";
-export * from "./PuAccordion.jsx";
-export * from "./PuButton.jsx";
-export * from "./PuCheckbox.jsx";
-export * from "./PuInput.jsx";
-export * from "./PuMenuItem.jsx";
-export * from "./PuPopupMenu.jsx";
-export * from "./PuSelect.jsx";
-export * from "./PuSideMenu.jsx";
-export * from "./PuSpinner.jsx";
+import "../styles/theme/index.css";
+// Form Controls
+export * from "./Checkbox.js";
+export * from "./DateInput.js";
+export * from "./InputNumber.js";
+export * from "./InputText.js";
+export * from "./MultiSelect.js";
+export * from "./PasswordInput.js";
+export * from "./RadioButton.js";
+export * from "./Select.js";
+export * from "./Switch.js";
+export * from "./Textarea.js";
+export * from "./ToggleGroup.js";
+// Buttons
+export * from "./Button.js";
+export * from "./SplitButton.js";
+export * from "./ToggleButton.js";
+// Data Display
+export * from "./Alert.js";
+export * from "./Badge.js";
+export * from "./Card.js";
+export * from "./Chip.js";
+export * from "./Column.js";
+export * from "./DataTable.js";
+// Navigation
+export * from "./Breadcrumb.js";
+export * from "./MenuItem.js";
+export * from "./PopupMenu.js";
+export * from "./SideMenu.js";
+export * from "./Tabs.js";
+// Overlays & Feedback
+export * from "./Dialog.js";
+export * from "./Spinner.js";
+export * from "./Tooltip.js";
+// Layout
+export * from "./Accordion.js";
+export * from "./Inplace.js";
+export * from "./Panel.js";
+// Tree
+export * from "./Tree.js";
+// Drag & Drop
+export * from "./SortableList.js";
+// Providers
+export * from "./alert-stack.js";
+export * from "./react-ui-provider.js";

package/dist/paroi-ui-lib-types.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, ReactNode } from "react";
-export interface PuMenuOption {
+export interface MenuOption {
     /**
      * Unique identifier of the menuitem.
      */
@@ -32,14 +32,14 @@ export interface PuMenuOption {
      * Callback to execute when item is clicked.
      */
     command?(): void;
-    popupMenu?: PuMenuNode[];
+    popupMenu?: MenuNode[];
     active?: boolean;
 }
-export interface PuMenuNode extends PuMenuOption {
+export interface MenuNode extends MenuOption {
     /**
      * An array of child menu items.
      */
-    subMenu?: PuMenuNode[];
+    subMenu?: MenuNode[];
     /**
      * Initial visibility of submenu.
      */

package/dist/react-ui-provider.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export interface ReactUIConfig {
+    autoDismissAlertDurationMs?: number;
+    autoDismissInsideFeedbackDurationMs?: number;
+    logger?: {
+        error: (...messages: unknown[]) => void;
+    };
+}
+interface ReactUIProviderProps {
+    config?: ReactUIConfig;
+    children: ReactNode;
+}
+export declare function ReactUIProvider({ config, children }: ReactUIProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useReactUIConfig(): Required<ReactUIConfig>;
+export {};

package/dist/react-ui-provider.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const ReactUIContext = createContext(undefined);
+const defaultConfig = {
+    autoDismissAlertDurationMs: 5000,
+    autoDismissInsideFeedbackDurationMs: 2000,
+    logger: {
+        error: console.error,
+    },
+};
+export function ReactUIProvider({ config, children }) {
+    return _jsx(ReactUIContext.Provider, { value: config, children: children });
+}
+export function useReactUIConfig() {
+    const config = useContext(ReactUIContext);
+    return {
+        autoDismissAlertDurationMs: config?.autoDismissAlertDurationMs ?? defaultConfig.autoDismissAlertDurationMs,
+        autoDismissInsideFeedbackDurationMs: config?.autoDismissInsideFeedbackDurationMs ??
+            defaultConfig.autoDismissInsideFeedbackDurationMs,
+        logger: config?.logger ?? defaultConfig.logger,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paroicms/react-ui",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "description": "React UI toolkit for ParoiCMS.",
   "keywords": [
     "paroicms",
@@ -19,19 +19,33 @@
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "scripts": {
+    "tsc": "tsc",
     "build": "tsc",
     "clear": "rimraf dist/*",
     "dev": "tsc --watch --preserveWatchOutput"
   },
+  "dependencies": {
+    "@paroicms/public-anywhere-lib": "0.41.0",
+    "clsx": "~2.1.1",
+    "lucide-react": "~0.562.0",
+    "react-sortablejs": "~6.1.4",
+    "sortablejs": "~1.15.6"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
   "devDependencies": {
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
+    "@types/sortablejs": "^1.15.8",
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "rimraf": "~6.1.2",
     "typescript": "~5.9.3"
   },
   "files": [
-    "dist"
+    "dist",
+    "styles"
   ]
 }

package/styles/Accordion.css

@@ -0,0 +1,46 @@
+/* ========================================
+   Accordion / Collapsible
+   ======================================== */
+.PaAccordion-content {
+  padding-left: 20px;
+  transition: max-height 200ms ease-out;
+
+  &.transition {
+    overflow: hidden;
+  }
+
+  &.hide {
+    display: none;
+  }
+}
+
+.PaAccordion-header {
+  display: flex;
+  gap: var(--space-3);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-4) var(--space-5);
+  cursor: pointer;
+  background: var(--color-bg-subtle);
+  transition: background-color var(--transition);
+
+  /* &:hover {
+    background: var(--color-bg-section);
+  } */
+}
+
+.PaAccordion-title {
+  font-size: var(--text-base);
+  font-weight: var(--font-medium);
+  color: var(--color-text);
+}
+
+.PaAccordion-chevron {
+  flex-shrink: 0;
+  color: var(--color-text-light);
+  transition: transform var(--transition);
+
+  .PaAccordion.open & {
+    transform: rotate(180deg);
+  }
+}

package/styles/Alert.css

@@ -0,0 +1,76 @@
+/* ========================================
+   Alert / Notice Box
+   ======================================== */
+.PaAlert {
+  position: relative;
+  padding: var(--space-4) var(--space-5);
+  border-left: 4px solid;
+  border-radius: var(--radius);
+
+  &.dismissible {
+    padding-right: var(--space-10);
+  }
+
+  &.info {
+    background: var(--color-info-light);
+    border-color: var(--color-info);
+  }
+
+  &.primary {
+    background: var(--color-primary-light);
+    border-color: var(--color-primary);
+  }
+
+  &.success {
+    background: var(--color-success-light);
+    border-color: var(--color-success);
+  }
+
+  &.warning {
+    background: var(--color-yellow-light);
+    border-color: var(--color-yellow);
+  }
+
+  &.error {
+    background: var(--color-danger-light);
+    border-color: var(--color-danger);
+  }
+}
+
+.PaAlert-closeBtn {
+  position: absolute;
+  top: var(--space-3);
+  right: var(--space-3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-1);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  transition:
+    color 0.15s,
+    background-color 0.15s;
+
+  &:hover {
+    color: var(--color-text);
+    background: rgb(0 0 0 / 10%);
+  }
+}
+
+.PaAlert-title {
+  margin-bottom: var(--space-2);
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  color: var(--color-text);
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.PaAlert-content {
+  font-size: var(--text-sm);
+  line-height: 1.7;
+  color: var(--color-text);
+}

package/styles/Badge.css

@@ -0,0 +1,59 @@
+/* ========================================
+   Badges / Pills
+   ======================================== */
+.PaBadge {
+  display: inline-flex;
+  gap: var(--space-1);
+  align-items: center;
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  border-radius: var(--radius-full);
+
+  &.default {
+    color: var(--color-text-muted);
+    background: var(--color-bg-subtle);
+    border: 1px solid var(--color-border);
+  }
+
+  &.primary {
+    color: var(--color-primary-dark);
+    background: var(--color-primary-light);
+  }
+
+  &.accent {
+    color: var(--color-accent-dark);
+    background: var(--color-accent-light);
+  }
+
+  &.success {
+    color: var(--color-success-dark);
+    background: var(--color-success-light);
+  }
+
+  &.warning {
+    color: var(--color-yellow-dark);
+    background: var(--color-yellow-light);
+  }
+
+  &.danger {
+    color: var(--color-danger-dark);
+    background: var(--color-danger-light);
+  }
+
+  &.info {
+    color: var(--color-primary-dark);
+    background: var(--color-primary-subtle);
+  }
+
+  &.secondary {
+    color: var(--color-text-light);
+    background: var(--color-bg-muted);
+    border: 1px solid var(--color-border-light);
+  }
+
+  &.contrast {
+    color: var(--color-text-inverse);
+    background: var(--color-text);
+  }
+}

package/styles/Breadcrumb.css

@@ -0,0 +1,57 @@
+/* ========================================
+   Breadcrumb
+   ======================================== */
+.PaBreadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  align-items: center;
+}
+
+.PaBreadcrumb-item {
+  display: flex;
+  gap: var(--space-1);
+  align-items: center;
+}
+
+.PaBreadcrumb-link {
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+  white-space: nowrap;
+}
+
+.PaBreadcrumb-link:is(a, button) {
+  cursor: pointer;
+  transition: color var(--transition);
+
+  &:hover {
+    color: var(--color-primary);
+  }
+}
+
+.PaBreadcrumb-separator {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 var(--space-1);
+  font-size: var(--text-xs);
+  color: var(--color-text-light);
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.PaBreadcrumb-current {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--color-text);
+  white-space: nowrap;
+}