@paroicms/react-ui 0.1.0

package/README.md

@@ -0,0 +1,9 @@
+# @paroicms/react-ui
+
+React UI toolkit for ParoiCMS.
+
+This package is part of [ParoiCMS](https://www.npmjs.com/package/@paroicms/server).
+
+## License
+
+Released under the [MIT license](https://gitlab.com/paroi/opensource/paroicms/-/blob/main/LICENSE.md).

package/dist/PuAccordion.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+import type { PuMenuOption } from "./paroi-ui-lib-types.js";
+export interface PuAccordionProps {
+    children: ReactNode;
+    header: PuMenuOption;
+    /** Initial value */
+    expanded?: boolean;
+}
+export declare function PuAccordion({ children, header, expanded }: PuAccordionProps): import("react").JSX.Element;

package/dist/PuAccordion.jsx

@@ -0,0 +1,66 @@
+import { useAsyncEffect } from "@paroi/use-async-effect";
+import { useRef, useState } from "react";
+import { PuMenuItem } from "./PuMenuItem.jsx";
+export function PuAccordion({ children, header, expanded }) {
+    const [isExpanded, setIsExpanded] = useState(expanded ?? false);
+    const contentRef = useRef(null);
+    useAsyncEffect(async () => {
+        const content = contentRef.current;
+        if (!content)
+            return;
+        if (content.classList.contains("initializing")) {
+            content.classList.remove("initializing");
+            content.classList.add(isExpanded ? "show" : "hide");
+            if (!isExpanded) {
+                content.style.maxHeight = "0";
+            }
+        }
+        else {
+            await startTransition(content, isExpanded);
+        }
+    }, [isExpanded]);
+    return (<div className="PuAccordion">
+      <PuMenuItem item={header} expanded={isExpanded} onToggle={setIsExpanded}/>
+      <div className="PuAccordion-content initializing" ref={contentRef}>
+        {children}
+      </div>
+    </div>);
+}
+function startTransition(content, isOpen) {
+    if (isOpen) {
+        if (content.classList.contains("show"))
+            return Promise.resolve();
+    }
+    else {
+        if (content.classList.contains("hide"))
+            return Promise.resolve();
+    }
+    return new Promise((resolve) => {
+        let ended = false;
+        const timeoutId = setTimeout(endNow, 300);
+        content.classList.remove("show", "hide");
+        content.classList.add("transition");
+        content.style.maxHeight = isOpen ? "0" : `${content.scrollHeight}px`;
+        const transitionEnd = () => {
+            clearTimeout(timeoutId);
+            endNow();
+        };
+        content.addEventListener("transitionend", transitionEnd);
+        requestAnimationFrame(() => {
+            content.scrollHeight; // force reflow
+            content.style.maxHeight = isOpen ? `${content.scrollHeight}px` : "0";
+        });
+        function endNow() {
+            if (ended)
+                return;
+            ended = true;
+            content.classList.remove("transition");
+            content.classList.add(isOpen ? "show" : "hide");
+            if (isOpen) {
+                content.style.maxHeight = "";
+            }
+            content.removeEventListener("transitionend", transitionEnd);
+            resolve();
+        }
+    });
+}

package/dist/PuButton.d.ts

@@ -0,0 +1,14 @@
+import { type MouseEvent, type ReactNode } from "react";
+export interface PuButtonProps {
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    outlined?: boolean;
+    severity?: "primary" | "secondary" | "success" | "info" | "warning" | "danger";
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    "aria-label"?: string;
+    "aria-controls"?: string;
+    "aria-haspopup"?: boolean;
+    type?: "button" | "submit" | "reset";
+}
+export declare const PuButton: import("react").ForwardRefExoticComponent<PuButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/PuButton.jsx

@@ -0,0 +1,15 @@
+import { forwardRef } from "react";
+export const PuButton = forwardRef(({ children, className, disabled, outlined, severity = "primary", onClick, type = "button", ...rest }, ref) => {
+    const classes = [
+        "PuButton",
+        outlined ? "outlined" : "",
+        severity ? severity : "",
+        className || "",
+        disabled ? "disabled" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (<button ref={ref} className={classes} disabled={disabled} onClick={onClick} type={type} {...rest}>
+        {children}
+      </button>);
+});

package/dist/PuCheckbox.d.ts

@@ -0,0 +1,8 @@
+import type { InputHTMLAttributes } from "react";
+export interface PuCheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "type"> {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label?: string;
+    className?: string;
+}
+export declare function PuCheckbox({ checked, onChange, label, className, ...rest }: PuCheckboxProps): import("react").JSX.Element;

package/dist/PuCheckbox.jsx

@@ -0,0 +1,13 @@
+export function PuCheckbox({ checked, onChange, label, className = "", ...rest }) {
+    const handleChange = (e) => {
+        onChange(e.target.checked);
+    };
+    const checkboxClasses = ["PuCheckbox", className].filter(Boolean).join(" ");
+    return (<div className={checkboxClasses}>
+      <label className="PuCheckbox-container">
+        <input className="PuCheckbox-input" type="checkbox" checked={checked} onChange={handleChange} {...rest}/>
+        <span className="PuCheckbox-checkmark"/>
+        {label && <span className="PuCheckbox-label">{label}</span>}
+      </label>
+    </div>);
+}

package/dist/PuInput.d.ts

@@ -0,0 +1,10 @@
+import type { InputHTMLAttributes } from "react";
+export interface PuInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    value: string;
+    onChange: (value: string) => void;
+    label?: string;
+    error?: string;
+    className?: string;
+    fullWidth?: boolean;
+}
+export declare function PuInput({ value, onChange, label, error, className, fullWidth, ...rest }: PuInputProps): import("react").JSX.Element;

package/dist/PuInput.jsx

@@ -0,0 +1,13 @@
+export function PuInput({ value, onChange, label, error, className = "", fullWidth = false, ...rest }) {
+    const handleChange = (e) => {
+        onChange(e.target.value);
+    };
+    const inputClasses = ["PuInput", error ? "error" : "", fullWidth ? "fullWidth" : "", className]
+        .filter(Boolean)
+        .join(" ");
+    return (<div className={inputClasses}>
+      {label && <label className="PuInput-label">{label}</label>}
+      <input className="PuInput-field" value={value} onChange={handleChange} {...rest}/>
+      {error && <div className="PuInput-error">{error}</div>}
+    </div>);
+}

package/dist/PuMenuItem.d.ts

@@ -0,0 +1,7 @@
+import type { PuMenuOption } from "./paroi-ui-lib-types.js";
+export interface PuMenuItemProps {
+    item: PuMenuOption;
+    expanded?: boolean;
+    onToggle?: (expanded: boolean) => void;
+}
+export declare function PuMenuItem({ item, expanded, onToggle }: PuMenuItemProps): import("react").JSX.Element;

package/dist/PuMenuItem.jsx

@@ -0,0 +1,33 @@
+import { PuPopupMenu } from "./PuPopupMenu.jsx";
+import { SubMenuIconBottom, SubMenuIconLeft } from "./svg-icons.jsx";
+export function PuMenuItem({ item, expanded, onToggle }) {
+    let { key: id, label, icon, url, command, popupMenu, className, style, active, disabled } = item;
+    if (disabled) {
+        url = undefined;
+        command = undefined;
+    }
+    const itemClassNames = [
+        "PuMenuItem",
+        className || "",
+        active ? "active" : "",
+        disabled ? "disabled" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (<div className={itemClassNames} style={style} key={id}>
+      {expanded !== undefined && onToggle ? (<button className="PuMenuItem-left toggle" onClick={() => onToggle(!expanded)} type="button">
+          {expanded ? <SubMenuIconBottom /> : <SubMenuIconLeft />}
+        </button>) : icon ? (<div className="PuMenuItem-left icon">{icon}</div>) : undefined}
+      {url ? (<a className="PuMenuItem-label" href={url} onClick={url && command
+                ? (ev) => {
+                    ev.preventDefault();
+                    command?.();
+                }
+                : undefined}>
+          {label}
+        </a>) : command ? (<button className="PuMenuItem-label" onClick={command} type="button">
+          {label}
+        </button>) : (<span className="PuMenuItem-label">{label}</span>)}
+      {popupMenu && <PuPopupMenu className="PuMenuItem-popup" items={popupMenu}/>}
+    </div>);
+}

package/dist/PuPopupMenu.d.ts

@@ -0,0 +1,14 @@
+import { type MouseEvent } from "react";
+import type { PuMenuNode } from "./paroi-ui-lib-types.js";
+export interface PuPopupMenuProps {
+    items: PuMenuNode[];
+    className?: string;
+    id?: string;
+    autoPosition?: boolean;
+}
+export interface PopupMenuRef {
+    toggle: (event: MouseEvent) => void;
+    show: (event: MouseEvent) => void;
+    hide: () => void;
+}
+export declare const PuPopupMenu: import("react").ForwardRefExoticComponent<PuPopupMenuProps & import("react").RefAttributes<PopupMenuRef>>;

package/dist/PuPopupMenu.jsx

@@ -0,0 +1,135 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { PuButton } from "./PuButton.jsx";
+import { PuMenuItem } from "./PuMenuItem.jsx";
+import { PopupMenuBtnSvg, SubMenuIconLeft } from "./svg-icons.jsx";
+const isPopoverSupported = typeof HTMLElement !== "undefined" && "showPopover" in HTMLElement.prototype;
+if (!isPopoverSupported) {
+    console?.error("PuPopupMenu: Popover API is not supported in this browser.");
+}
+let seq = 0;
+/**
+ * Utility function to configure popup positioning
+ */
+function setupPopoverPositioning(element, getPosition) {
+    const handleToggle = (e) => {
+        const newState = e.newState;
+        if (newState === "open") {
+            const position = getPosition();
+            element.style.position = "absolute";
+            element.style.top = `${position.top}px`;
+            element.style.left = `${position.left}px`;
+        }
+    };
+    element.addEventListener("toggle", handleToggle);
+    return () => element.removeEventListener("toggle", handleToggle);
+}
+export const PuPopupMenu = forwardRef(function PuPopupMenu({ items, className = "", id, autoPosition = true }, ref) {
+    const menuRef = useRef(null);
+    const buttonRef = useRef(null);
+    const menuIdRef = useRef(undefined);
+    if (menuIdRef.current === undefined) {
+        menuIdRef.current = id ?? `pu-popup-menu-${++seq}`;
+    }
+    const toggle = (event) => {
+        if (menuRef.current) {
+            menuRef.current.togglePopover();
+        }
+    };
+    const show = (event) => {
+        if (menuRef.current) {
+            menuRef.current.showPopover();
+        }
+    };
+    const hide = () => {
+        if (menuRef.current) {
+            menuRef.current.hidePopover();
+        }
+    };
+    useImperativeHandle(ref, () => ({
+        toggle,
+        show,
+        hide,
+    }));
+    // Position popover when it opens
+    useEffect(() => {
+        if (!autoPosition || !menuRef.current || !buttonRef.current)
+            return;
+        const menuEl = menuRef.current;
+        return setupPopoverPositioning(menuEl, () => {
+            const rect = buttonRef.current?.getBoundingClientRect();
+            return {
+                top: rect ? rect.bottom + window.scrollY : 0,
+                left: rect ? rect.left + window.scrollX : 0,
+            };
+        });
+    }, [autoPosition]);
+    const buttonProps = {
+        popoverTarget: menuIdRef.current,
+        popoverTargetAction: "toggle",
+    };
+    return (<>
+      <PuButton ref={buttonRef} className={className} outlined severity="secondary" aria-label="unfold" // should be localized
+     aria-controls={menuIdRef.current} aria-haspopup {...buttonProps}>
+        <PopupMenuBtnSvg />
+      </PuButton>
+
+      <div className="PuPopupMenu" ref={menuRef} id={menuIdRef.current} popover="auto">
+        <div className="PuPopupMenu-content">
+          {items.map((item) => (<PopupMenuItemWrapper key={item.key} item={item} onHide={hide}/>))}
+        </div>
+      </div>
+    </>);
+});
+function PopupMenuItemWrapper({ item, onHide }) {
+    const subMenuRef = useRef(null);
+    const subMenuId = useRef(`pu-submenu-${item.key}-${Math.random().toString(36).substring(2, 9)}`);
+    // For items with submenu, override the command to toggle the submenu
+    const itemWithSubmenuHandling = { ...item };
+    if (item.subMenu && item.subMenu.length > 0) {
+        // Create submenu trigger icon
+        const originalIcon = item.icon;
+        itemWithSubmenuHandling.icon = originalIcon || <SubMenuIconLeft />;
+        // Create a command that opens the submenu
+        const originalCommand = item.command;
+        itemWithSubmenuHandling.command = () => {
+            if (originalCommand) {
+                originalCommand();
+            }
+            // Will be handled by popovertarget attribute
+        };
+    }
+    else {
+        // For regular items, add onHide to the command
+        const originalCommand = item.command;
+        itemWithSubmenuHandling.command = () => {
+            if (originalCommand) {
+                originalCommand();
+            }
+            onHide();
+        };
+    }
+    // Handle submenu positioning with Popover API
+    useEffect(() => {
+        if (!subMenuRef.current || !item.subMenu)
+            return;
+        const subMenuEl = subMenuRef.current;
+        return setupPopoverPositioning(subMenuEl, () => {
+            const parentEl = subMenuEl.parentElement;
+            if (parentEl) {
+                const rect = parentEl.getBoundingClientRect();
+                return {
+                    top: rect.top,
+                    left: rect.right + 5, // 5px gap
+                };
+            }
+            return { top: 0, left: 0 };
+        });
+    }, [item.subMenu]);
+    return (<div className="PuPopupMenu-item" popoverTargetAction="toggle" popoverTarget={subMenuId.current}>
+      <PuMenuItem item={itemWithSubmenuHandling}/>
+
+      {item.subMenu && (<div className="PuPopupMenu-submenu" popover="auto" id={subMenuId.current} ref={subMenuRef}>
+          {item.subMenu.map((subItem) => (<PopupMenuItemWrapper key={subItem.key} item={subItem} onHide={onHide}/>))}
+        </div>)}
+    </div>);
+}

package/dist/PuSelect.d.ts

@@ -0,0 +1,17 @@
+import type { SelectHTMLAttributes } from "react";
+export interface PuSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface PuSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "onChange"> {
+    value: string;
+    onChange: (value: string) => void;
+    options: PuSelectOption[];
+    label?: string;
+    error?: string;
+    className?: string;
+    fullWidth?: boolean;
+    placeholder?: string;
+}
+export declare function PuSelect({ value, onChange, options, label, error, className, fullWidth, placeholder, ...rest }: PuSelectProps): import("react").JSX.Element;

package/dist/PuSelect.jsx

@@ -0,0 +1,24 @@
+import { ChevronDownIcon } from "./svg-icons.jsx";
+export function PuSelect({ value, onChange, options, label, error, className = "", fullWidth = false, placeholder, ...rest }) {
+    const handleChange = (e) => {
+        onChange(e.target.value);
+    };
+    const selectClasses = ["PuSelect", error ? "error" : "", fullWidth ? "fullWidth" : "", className]
+        .filter(Boolean)
+        .join(" ");
+    return (<div className={selectClasses}>
+      {label && <label className="PuSelect-label">{label}</label>}
+      <div className="PuSelect-wrapper">
+        <select className="PuSelect-field" value={value} onChange={handleChange} {...rest}>
+          {placeholder && (<option value="" disabled>
+              {placeholder}
+            </option>)}
+          {options.map((option) => (<option key={option.value} value={option.value} disabled={option.disabled}>
+              {option.label}
+            </option>))}
+        </select>
+        <ChevronDownIcon />
+      </div>
+      {error && <div className="PuSelect-error">{error}</div>}
+    </div>);
+}

package/dist/PuSideMenu.d.ts

@@ -0,0 +1,4 @@
+import type { PuMenuNode } from "./paroi-ui-lib-types.js";
+export declare function PuSideMenu({ menu }: {
+    menu: PuMenuNode[];
+}): import("react").JSX.Element;

package/dist/PuSideMenu.jsx

@@ -0,0 +1,15 @@
+import { PuAccordion } from "./PuAccordion.jsx";
+import { PuMenuItem } from "./PuMenuItem.jsx";
+export function PuSideMenu({ menu }) {
+    return (<>
+      {menu.map((child) => (<PuAccordionOrMenuItem item={child} key={child.key}/>))}
+    </>);
+}
+function PuAccordionOrMenuItem({ item }) {
+    if (item.subMenu) {
+        return (<PuAccordion header={item} expanded={item.expanded} key={item.key}>
+        {item.subMenu.map((child) => (<PuAccordionOrMenuItem item={child} key={child.key}/>))}
+      </PuAccordion>);
+    }
+    return <PuMenuItem item={item}/>;
+}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import "../styles/index.scss";
+export type * from "./paroi-ui-lib-types.js";
+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";

package/dist/index.js

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

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

@@ -0,0 +1,47 @@
+import type { CSSProperties, ReactNode } from "react";
+export interface PuMenuOption {
+    /**
+     * Unique identifier of the menuitem.
+     */
+    key: string;
+    /**
+     * Text of the menuitem.
+     */
+    label: string | ReactNode;
+    /**
+     * Icon of the item. It can be a string, ReactNode or method.
+     */
+    icon?: ReactNode;
+    /**
+     * When set as true, disables the menuitem.
+     */
+    disabled?: boolean;
+    /**
+     * Inline style of the menuitem.
+     */
+    style?: CSSProperties;
+    /**
+     * Style class of the menuitem.
+     */
+    className?: string;
+    /**
+     * External link to navigate when item is clicked.
+     */
+    url?: string;
+    /**
+     * Callback to execute when item is clicked.
+     */
+    command?(): void;
+    popupMenu?: PuMenuNode[];
+    active?: boolean;
+}
+export interface PuMenuNode extends PuMenuOption {
+    /**
+     * An array of child menu items.
+     */
+    subMenu?: PuMenuNode[];
+    /**
+     * Initial visibility of submenu.
+     */
+    expanded?: boolean;
+}

package/dist/paroi-ui-lib-types.js

@@ -0,0 +1 @@
+export {};

package/dist/svg-icons.d.ts

@@ -0,0 +1,5 @@
+export declare function PopupMenuBtnSvg(): import("react").JSX.Element;
+export declare function SubMenuIconLeft(): import("react").JSX.Element;
+export declare function SubMenuIconBottom(): import("react").JSX.Element;
+export declare function ChevronDownIcon(): import("react").JSX.Element;
+export declare function SubMenuIcon(): import("react").JSX.Element;

package/dist/svg-icons.jsx

@@ -0,0 +1,30 @@
+export function PopupMenuBtnSvg() {
+    return (<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+      <title>⇓</title>
+      <path fill="currentColor" d="M12.146 7.146a.5.5 0 0 1 .708.708l-4.5 4.5a.5.5 0 0 1-.708 0l-4.5-4.5a.5.5 0 1 1 .708-.708L8 11.293zm0-4a.5.5 0 0 1 .708.708l-4.5 4.5a.5.5 0 0 1-.708 0l-4.5-4.5a.5.5 0 1 1 .708-.708L8 7.293z"/>
+    </svg>);
+}
+export function SubMenuIconLeft() {
+    return (<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className="submenu-icon">
+      <title>→</title>
+      <path d="M4.38708 13C4.28408 13.0005 4.18203 12.9804 4.08691 12.9409C3.99178 12.9014 3.9055 12.8433 3.83313 12.7701C3.68634 12.6231 3.60388 12.4238 3.60388 12.2161C3.60388 12.0084 3.68634 11.8091 3.83313 11.6622L8.50507 6.99022L3.83313 2.31827C3.69467 2.16968 3.61928 1.97313 3.62287 1.77005C3.62645 1.56698 3.70872 1.37322 3.85234 1.22959C3.99596 1.08597 4.18972 1.00371 4.3928 1.00012C4.59588 0.996539 4.79242 1.07192 4.94102 1.21039L10.1669 6.43628C10.3137 6.58325 10.3962 6.78249 10.3962 6.99022C10.3962 7.19795 10.3137 7.39718 10.1669 7.54416L4.94102 12.7701C4.86865 12.8433 4.78237 12.9014 4.68724 12.9409C4.59212 12.9804 4.49007 13.0005 4.38708 13Z" fill="currentColor"/>
+    </svg>);
+}
+export function SubMenuIconBottom() {
+    return (<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className="submenu-icon">
+      <title>↓</title>
+      <path d="M7.01744 10.398C6.91269 10.3985 6.8089 10.378 6.71215 10.3379C6.61541 10.2977 6.52766 10.2386 6.45405 10.1641L1.13907 4.84913C1.03306 4.69404 0.985221 4.5065 1.00399 4.31958C1.02276 4.13266 1.10693 3.95838 1.24166 3.82747C1.37639 3.69655 1.55301 3.61742 1.74039 3.60402C1.92777 3.59062 2.11386 3.64382 2.26584 3.75424L7.01744 8.47394L11.769 3.75424C11.9189 3.65709 12.097 3.61306 12.2748 3.62921C12.4527 3.64535 12.6199 3.72073 12.7498 3.84328C12.8797 3.96582 12.9647 4.12842 12.9912 4.30502C13.0177 4.48162 12.9841 4.662 12.8958 4.81724L7.58083 10.1322C7.50996 10.2125 7.42344 10.2775 7.32656 10.3232C7.22968 10.3689 7.12449 10.3944 7.01744 10.398Z" fill="currentColor"/>
+    </svg>);
+}
+export function ChevronDownIcon() {
+    return (<svg className="PuSelect-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <title>DOWN</title>
+      <path d="M7.01744 10.398C6.91269 10.3985 6.8089 10.378 6.71215 10.3379C6.61541 10.2977 6.52766 10.2386 6.45405 10.1641L1.13907 4.84913C1.03306 4.69404 0.985221 4.5065 1.00399 4.31958C1.02276 4.13266 1.10693 3.95838 1.24166 3.82747C1.37639 3.69655 1.55301 3.61742 1.74039 3.60402C1.92777 3.59062 2.11386 3.64382 2.26584 3.75424L7.01744 8.47394L11.769 3.75424C11.9189 3.65709 12.097 3.61306 12.2748 3.62921C12.4527 3.64535 12.6199 3.72073 12.7498 3.84328C12.8797 3.96582 12.9647 4.12842 12.9912 4.30502C13.0177 4.48162 12.9841 4.662 12.8958 4.81724L7.58083 10.1322C7.50996 10.2125 7.42344 10.2775 7.32656 10.3232C7.22968 10.3689 7.12449 10.3944 7.01744 10.398Z" fill="currentColor"/>
+    </svg>);
+}
+export function SubMenuIcon() {
+    return (<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <title>...</title>
+      <path d="M4.38708 13C4.28408 13.0005 4.18203 12.9804 4.08691 12.9409C3.99178 12.9014 3.9055 12.8433 3.83313 12.7701C3.68634 12.6231 3.60388 12.4238 3.60388 12.2161C3.60388 12.0084 3.68634 11.8091 3.83313 11.6622L8.50507 6.99022L3.83313 2.31827C3.69467 2.16968 3.61928 1.97313 3.62287 1.77005C3.62645 1.56698 3.70872 1.37322 3.85234 1.22959C3.99596 1.08597 4.18972 1.00371 4.3928 1.00012C4.59588 0.996539 4.79242 1.07192 4.94102 1.21039L10.1669 6.43628C10.3137 6.58325 10.3962 6.78249 10.3962 6.99022C10.3962 7.19795 10.3137 7.39718 10.1669 7.54416L4.94102 12.7701C4.86865 12.8433 4.78237 12.9014 4.68724 12.9409C4.59212 12.9804 4.49007 13.0005 4.38708 13Z" fill="currentColor"/>
+    </svg>);
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@paroicms/react-ui",
+  "version": "0.1.0",
+  "description": "React UI toolkit for ParoiCMS.",
+  "keywords": [
+    "paroicms",
+    "react",
+    "ui",
+    "components"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/paroi/opensource/paroicms.git",
+    "directory": "packages/react-ui"
+  },
+  "author": "Paroi Team",
+  "license": "MIT",
+  "type": "module",
+  "module": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "clear": "rimraf dist/*",
+    "dev": "tsc --watch --preserveWatchOutput"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.1",
+    "@types/react-dom": "~19.1.2",
+    "react": "~19.1.0",
+    "react-dom": "~19.1.0",
+    "rimraf": "~6.0.1",
+    "typescript": "~5.8.3"
+  },
+  "files": [
+    "dist"
+  ]
+}