@rnaga/wp-next-ui 1.0.1

package/DraggableBox.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * A draggable component that displays content in a floating container.
+ *
+ * Props:
+ * - children: The content to be displayed inside the draggable box.
+ * - open: Controls whether the box is visible or not.
+ * - onClose: Callback to close the box.
+ * - offset: Optional initial offset for the box's X and Y coordinates.
+ * - title: Optional title to display in the header.
+ * - size: Sets the Typography size ("small" | "medium").
+ * - targetRef: Reference to an element whose relative position determines the box's initial placement.
+ * - sx: Style overrides for the outer Box wrapping the content.
+ * - slotSxProps: Style overrides for the header and title.
+ */
+import { useCallback, useEffect, useRef, useState, } from "react";
+import { Box } from "@mui/material";
+import { Typography } from "./Typography";
+import { Background } from "./Background";
+import { Portal } from "./portal";
+export const DraggableBox = (props) => {
+    // Destructure props
+    const { children, targetRef, ref: selfRef, title, size, onClose, open, sx, slotSxProps, offset: initialOffset = {}, zIndexLayer = 0, placement = "left", } = props;
+    // Provide default offset values for the box
+    const { left = 0, top = 0 } = initialOffset;
+    // Reference to the draggable box DOM element
+    const boxRef = useRef(null);
+    // State to store the current position of the draggable box
+    const [position, setPosition] = useState({ x: left, y: top });
+    // Determines if the box is currently being dragged
+    const [isDragging, setIsDragging] = useState(false);
+    // Stores the mouse down offset within the box
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    /**
+     * Ensures the new position is within the browser window bounds.
+     * Returns null if the position would place the box partially off-screen.
+     */
+    const clampPosition = (x, y, width, height) => {
+        let newX = x;
+        let newY = y;
+        if (newX < 0 || newX + width > window.innerWidth)
+            return null;
+        if (newY < 0 || newY + height > window.innerHeight)
+            return null;
+        return { x: newX, y: newY };
+    };
+    /**
+     * Callback ref to get the DOM element for the draggable box.
+     * Requires a targetRef to position the box relative to another element.
+     */
+    const callbackRef = useCallback((ref) => {
+        if (!ref || !targetRef?.current)
+            return;
+        boxRef.current = ref;
+        if (selfRef) {
+            // If a selfRef is provided, assign the boxRef to it
+            selfRef.current = ref;
+        }
+        // Calculate the referenced element’s position
+        const rect = targetRef.current.getBoundingClientRect();
+        const boxWidth = boxRef.current.offsetWidth || 0;
+        const boxHeight = boxRef.current.offsetHeight || 0;
+        // Compute initial position based on target element
+        let newX = rect.left + left - boxWidth;
+        let newY = rect.bottom - boxHeight / 2 + top;
+        // if placemenet is "target", x and y are relative to the target element
+        if (placement === "target") {
+            newX = rect.left;
+            newY = rect.top;
+        }
+        // If the box goes off-screen at the bottom, adjust upward
+        if (newY + boxHeight > window.innerHeight) {
+            newY = window.innerHeight - boxHeight;
+        }
+        // Store the position state
+        setPosition({ x: newX, y: newY });
+    }, [targetRef, left, top]);
+    /**
+     * Called when the user presses the mouse button within the box header.
+     * Captures the offset from the mouse position to the box's top-left corner.
+     */
+    const handleMouseDown = (e) => {
+        setIsDragging(true);
+        const rect = boxRef.current?.getBoundingClientRect();
+        if (rect) {
+            setOffset({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+        }
+    };
+    /**
+     * Called whenever the mouse moves, if dragging is active.
+     * Updates the box position while respecting window bounds.
+     */
+    const handleMouseMove = (e) => {
+        if (!isDragging || !boxRef.current)
+            return;
+        const { offsetWidth, offsetHeight } = boxRef.current;
+        const newPos = clampPosition(e.clientX - offset.x, e.clientY - offset.y, offsetWidth, offsetHeight);
+        if (newPos)
+            setPosition(newPos);
+    };
+    // Called when the mouse is released. Ends the dragging session.
+    const handleMouseUp = () => setIsDragging(false);
+    /**
+     * Subscribes to mousemove and mouseup while dragging; unsubscribes otherwise.
+     * This ensures we only respond to these events when necessary.
+     */
+    useEffect(() => {
+        if (isDragging) {
+            window.addEventListener("mousemove", handleMouseMove);
+            window.addEventListener("mouseup", handleMouseUp);
+        }
+        else {
+            window.removeEventListener("mousemove", handleMouseMove);
+            window.removeEventListener("mouseup", handleMouseUp);
+        }
+        return () => {
+            window.removeEventListener("mousemove", handleMouseMove);
+            window.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [isDragging, offset]);
+    /**
+     * Observes changes to the box size and repositions if part of the box
+     * moves off-screen. This keeps the box fully visible upon resizing.
+     */
+    useEffect(() => {
+        if (!open || !boxRef.current)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            const rect = boxRef.current.getBoundingClientRect();
+            let { x, y } = position;
+            const { width, height } = rect;
+            // Clamp against right/bottom edges
+            if (rect.right > window.innerWidth)
+                x = Math.max(0, window.innerWidth - width);
+            if (rect.bottom > window.innerHeight)
+                y = Math.max(0, window.innerHeight - height);
+            // Only update position if there's a change
+            if (x !== position.x || y !== position.y)
+                setPosition({ x, y });
+        });
+        resizeObserver.observe(boxRef.current);
+        // Cleanup upon unmount or when the box is closed
+        return () => resizeObserver.disconnect();
+    }, [open, position]);
+    // If the box is not open, render nothing
+    if (!open)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(Background, { zIndex: 999 + zIndexLayer, onClose: onClose }), _jsx(Portal, { children: _jsxs(Box
+                // Attach our callback ref
+                , { 
+                    // Attach our callback ref
+                    ref: callbackRef, sx: {
+                        position: "fixed",
+                        left: position.x,
+                        top: position.y,
+                        userSelect: "none",
+                        minWidth: 300,
+                        zIndex: 1000 + zIndexLayer,
+                        bgcolor: "background.paper",
+                        borderRadius: 2,
+                        p: 1,
+                        ...sx,
+                    }, children: [_jsx(Box, { sx: {
+                                height: 30,
+                                cursor: "move",
+                                ...slotSxProps?.header,
+                            }, onMouseDown: handleMouseDown, children: _jsx(Typography, { size: size, sx: {
+                                    p: 0.5,
+                                    ...slotSxProps?.title,
+                                }, bold: true, children: title }) }), _jsx(Box, { children: children })] }) })] }));
+};

package/Form.d.ts

@@ -0,0 +1,4 @@
+import { FormLabel as MuiFormLabel } from "@mui/material";
+export declare const FormControl: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").FormControlTypeMap<{}, "div">>;
+export declare const FormLabel: (props: React.ComponentProps<typeof MuiFormLabel>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Form.d.ts.map

package/Form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../src/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,IAAI,YAAY,EAC1B,MAAM,eAAe,CAAC;AAGvB,eAAO,MAAM,WAAW,0HAAiB,CAAC;AAC1C,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,4CAgBzE,CAAC"}

package/Form.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl as MuiFormControl, FormLabel as MuiFormLabel, } from "@mui/material";
+import { Typography } from "./Typography";
+export const FormControl = MuiFormControl;
+export const FormLabel = (props) => {
+    const { children, required, ...rest } = props;
+    return (_jsx(MuiFormLabel, { focused: false, ...rest, children: _jsxs(Typography, { size: "medium", bold: true, component: "span", children: [children, required ? (_jsx(Typography, { component: "span", color: "error.main", fontSize: 18, children: "*" })) : ("")] }) }));
+};

package/FormDataProvider.d.ts

@@ -0,0 +1,5 @@
+export declare const FormDataContext: import("react").Context<Map<string, any>>;
+export declare const FormDataProvider: (props: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FormDataProvider.d.ts.map

package/FormDataProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormDataProvider.d.ts","sourceRoot":"","sources":["../src/FormDataProvider.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,2CAA6C,CAAC;AAE1E,eAAO,MAAM,gBAAgB,GAAI,OAAO;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CAEpE,CAAC"}

package/FormDataProvider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext } from "react";
+export const FormDataContext = createContext({});
+export const FormDataProvider = (props) => {
+    return _jsx(FormDataContext, { value: new Map(), children: props.children });
+};

package/IconButtonDelete.d.ts

@@ -0,0 +1,6 @@
+export declare const IconButtonDelete: (props: {
+    onClick: (...args: any) => any;
+    title?: string;
+    size?: "small" | "medium" | "large";
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconButtonDelete.d.ts.map

package/IconButtonDelete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButtonDelete.d.ts","sourceRoot":"","sources":["../src/IconButtonDelete.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,GAAI,OAAO;IACtC,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC,4CAqBA,CAAC"}

package/IconButtonDelete.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { Tooltip } from "@mui/material";
+import { Button } from "./Button";
+export const IconButtonDelete = (props) => {
+    const { onClick, title = "Trash", size } = props;
+    return (_jsx(Tooltip, { title: title, placement: "top", children: _jsx(Button, { size: size, color: "error", variant: "outlined", onClick: onClick, sx: {
+                borderRadius: 2,
+                minWidth: "unset",
+                "&:hover": {
+                    opacity: 0.9,
+                },
+            }, children: _jsx(DeleteIcon, { fontSize: size }) }) }));
+};

package/Input.d.ts

@@ -0,0 +1,14 @@
+import { Input as MuiInput } from "@mui/material";
+export declare const Input: (props: {
+    onChange?: (value: string, e?: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (value: string) => void;
+    onClear?: () => void | Promise<void>;
+    canClear?: boolean;
+    value?: string | number;
+    size?: "small" | "medium" | "large";
+    disableBorder?: boolean;
+    clearable?: boolean;
+    readOnly?: boolean;
+    removeBorderOnFocus?: boolean;
+} & Omit<Parameters<typeof MuiInput>[0], "onChange" | "value" | "onBlur" | "size" | "readOnly">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Input.d.ts.map

package/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../src/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AAKnE,eAAO,MAAM,KAAK,GAChB,OAAO;IACL,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5E,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,GAAG,IAAI,CACN,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,EAC9B,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CACtD,4CA+HF,CAAC"}

package/Input.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, IconButton, Input as MuiInput } from "@mui/material";
+import { useEffect, useState } from "react";
+import ClearIcon from "@mui/icons-material/Clear";
+export const Input = (props) => {
+    const { onChange, onBlur, onClear, canClear, size, disableBorder, sx, readOnly = false, clearable = false, removeBorderOnFocus = false, multiline, value: _value, ...rest } = props;
+    const [value, setValue] = useState(_value ?? "");
+    const handleChange = (e) => {
+        const value = e.target.value;
+        setValue(value);
+        onChange && onChange(value);
+    };
+    const handleBlur = (e) => {
+        const value = e.target.value;
+        if (!onBlur)
+            return;
+        setValue(value);
+        onBlur(value);
+    };
+    const handleClear = () => {
+        setValue("");
+        onClear && onClear();
+    };
+    useEffect(() => {
+        if (_value === undefined || _value === null || "" == _value)
+            return;
+        setValue(_value);
+    }, [_value]);
+    return (_jsx(MuiInput, { disableUnderline: true, readOnly: readOnly, onBlur: handleBlur, value: value, onChange: handleChange, multiline: multiline, 
+        // onFocus={(e) => e.target.select?.()}
+        sx: {
+            height: multiline
+                ? "auto"
+                : size === "large"
+                    ? 36
+                    : size == "medium"
+                        ? 32
+                        : 24,
+            px: 1,
+            fontSize: size === "large" ? 16 : size == "medium" ? 14 : 12,
+            border: disableBorder || multiline
+                ? undefined
+                : (theme) => `1px solid ${theme.palette.grey[400]}`,
+            borderRadius: 1,
+            "&:focus-within": removeBorderOnFocus
+                ? {
+                    border: "none",
+                    borderColor: "transparent",
+                }
+                : {
+                // border: (theme) => `1px solid ${theme.palette.primary.main}`,
+                // borderColor: (theme) => theme.palette.primary.main,
+                },
+            "&.MuiInputBase-root": {
+                mt: 0,
+                ...(multiline && {
+                    p: 0,
+                }),
+            },
+            backgroundColor: readOnly ? "#f5f5f5" : "transparent",
+            color: (theme) => theme.palette.text.primary,
+            ...sx,
+        }, slotProps: {
+            input: !disableBorder && multiline
+                ? {
+                    sx: {
+                        border: (theme) => `1px solid ${theme.palette.grey[400]}`,
+                        p: 1,
+                        borderRadius: 1,
+                    },
+                }
+                : undefined,
+        }, endAdornment: ((clearable && String(`${value}`).length > 0) || canClear === true) && (_jsx(Box, { sx: {
+                width: 20,
+            }, children: _jsx(IconButton, { onClick: (e) => {
+                    e.stopPropagation();
+                    handleClear();
+                }, sx: {
+                    minHeight: 0,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, children: _jsx(ClearIcon, { fontSize: "small" }) }) })), ...rest }));
+};

package/InputClickField.d.ts

@@ -0,0 +1,13 @@
+import { SxProps } from "@mui/material";
+import { Input } from "./Input";
+export declare const InputClickField: (props: {
+    label: string;
+    value?: string;
+    onClick: (e: MouseEvent) => void;
+    size?: "small" | "medium" | "large";
+    sx?: SxProps;
+    slotSxProps?: {
+        input?: SxProps;
+    };
+} & Omit<Parameters<typeof Input>[0], "label" | "size" | "onClick" | "readOnly">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InputClickField.d.ts.map

package/InputClickField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputClickField.d.ts","sourceRoot":"","sources":["../src/InputClickField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,eAAO,MAAM,eAAe,GAC1B,OAAO;IACL,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,KAAK,CAAC,EAAE,OAAO,CAAC;KACjB,CAAC;CACH,GAAG,IAAI,CACN,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,EAC3B,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CAC1C,4CA4BF,CAAC"}

package/InputClickField.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from "./Input";
+export const InputClickField = (props) => {
+    const { label, onClick, size, value, ...rest } = props;
+    return (_jsx(Input, { readOnly: true, placeholder: label, onClick: (e) => {
+            onClick(e);
+        }, slotProps: {
+            input: {
+                sx: {
+                    py: 0.1,
+                    "::placeholder": {
+                        fontSize: size === "large" ? 16 : size === "medium" ? 14 : 12,
+                        opacity: value ? 0.8 : 0.5,
+                    },
+                    ...props.slotSxProps?.input,
+                },
+            },
+        }, sx: {
+            ...props.sx,
+        }, ...rest }));
+};

package/InputColor.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from "react";
+import { Input } from "./Input";
+import { SxProps } from "@mui/material";
+export declare const isColorString: (src: string) => boolean;
+export declare const InputColor: (props: Omit<Parameters<typeof Input>[0], "sx"> & {
+    sx?: SxProps;
+    slotSxProps?: {
+        input?: SxProps;
+        color?: CSSProperties;
+    };
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InputColor.d.ts.map

package/InputColor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputColor.d.ts","sourceRoot":"","sources":["../src/InputColor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAoB,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAO,OAAO,EAAE,MAAM,eAAe,CAAC;AAK7C,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,KAAG,OAUzC,CAAC;AA2IJ,eAAO,MAAM,UAAU,GACrB,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG;IAC/C,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,KAAK,CAAC,EAAE,aAAa,CAAC;KACvB,CAAC;CACH,4CA6DF,CAAC"}

package/InputColor.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Input } from "./Input";
+import { Box } from "@mui/material";
+export const isColorString = (src) => /^#([\da-f]{3}|[\da-f]{6})$/i.test(src) ||
+    /^rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*[\d.]+)?\s*\)$/.test(src) ||
+    /^hsla?\(\s*[\d.]+\s*(deg|rad|turn)?\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%/.test(src) ||
+    /^hsv\(\s*[\d.]+\s*(deg|rad|turn)?\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*\)$/.test(src);
+/** Convert common CSS color strings to 7-char hex (#rrggbb) for <input type="color"> */
+const toHexColor = (src) => {
+    const v = src.trim().toLowerCase();
+    // Return empty string if the input is empty
+    if (!v)
+        return "";
+    /* ---------- HEX ---------- */
+    const hex = v.replace(/^#/, "");
+    if (/^[\da-f]{3}$/i.test(hex) || /^[\da-f]{6}$/i.test(hex)) {
+        const full = hex.length === 3
+            ? hex
+                .split("")
+                .map((c) => c + c)
+                .join("")
+            : hex;
+        return `#${full}`;
+    }
+    /* ---------- RGB / RGBA ---------- */
+    const rgbMatch = v.match(/^rgba?\(([^)]+)\)$/);
+    if (rgbMatch) {
+        const [r, g, b] = rgbMatch[1]
+            .split(",")
+            .slice(0, 3)
+            .map((n) => clamp(+n, 0, 255));
+        return rgbToHex(r, g, b);
+    }
+    /* ---------- HSL / HSLA ---------- */
+    const hslMatch = v.match(/^hsla?\(\s*([\d.]+)(deg|rad|turn)?\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%/);
+    if (hslMatch) {
+        const h = parseAngle(+hslMatch[1], hslMatch[2]);
+        const s = clamp(+hslMatch[3], 0, 100) / 100;
+        const l = clamp(+hslMatch[4], 0, 100) / 100;
+        return rgbToHex(...hslToRgb(h, s, l));
+    }
+    /* ---------- HSV ---------- */
+    const hsvMatch = v.match(/^hsv\(\s*([\d.]+)(deg|rad|turn)?\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*\)$/);
+    if (hsvMatch) {
+        const h = parseAngle(+hsvMatch[1], hsvMatch[2]);
+        const s = clamp(+hsvMatch[3], 0, 100) / 100;
+        const vv = clamp(+hsvMatch[4], 0, 100) / 100;
+        return rgbToHex(...hsvToRgb(h, s, vv));
+    }
+    //throw new Error(`Unsupported color format: “${src}”`);
+    // return "#000000" as HexString;
+    return ""; // Return empty string for unsupported formats
+};
+/* ---------- helpers ---------- */
+const clamp = (n, min, max) => Math.min(Math.max(n, min), max);
+const rgbToHex = (r, g, b) => `#${[r, g, b]
+    .map((c) => c.toString(16).padStart(2, "0"))
+    .join("")}`;
+const parseAngle = (val, unit = "deg") => {
+    switch (unit) {
+        case "turn":
+            return (val * 360) % 360;
+        case "rad":
+            return ((val * 180) / Math.PI) % 360;
+        default:
+            return val % 360; // deg
+    }
+};
+const hslToRgb = (h, s, l) => {
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const hp = h / 60;
+    const x = c * (1 - Math.abs((hp % 2) - 1));
+    const [r1, g1, b1] = hp < 1
+        ? [c, x, 0]
+        : hp < 2
+            ? [x, c, 0]
+            : hp < 3
+                ? [0, c, x]
+                : hp < 4
+                    ? [0, x, c]
+                    : hp < 5
+                        ? [x, 0, c]
+                        : [c, 0, x];
+    const m = l - c / 2;
+    return [r1 + m, g1 + m, b1 + m].map((v) => Math.round(v * 255));
+};
+const hsvToRgb = (h, s, v) => {
+    const c = v * s;
+    const hp = h / 60;
+    const x = c * (1 - Math.abs((hp % 2) - 1));
+    const [r1, g1, b1] = hp < 1
+        ? [c, x, 0]
+        : hp < 2
+            ? [x, c, 0]
+            : hp < 3
+                ? [0, c, x]
+                : hp < 4
+                    ? [0, x, c]
+                    : hp < 5
+                        ? [x, 0, c]
+                        : [c, 0, x];
+    const m = v - c;
+    return [r1 + m, g1 + m, b1 + m].map((v) => Math.round(v * 255));
+};
+export const InputColor = (props) => {
+    const { size, onChange, sx, onBlur, slotSxProps, ...rest } = props;
+    const timeoutId = useRef(null);
+    const [value, setValue] = useState(`${props.value ?? ""}`);
+    const handleChange = (value) => {
+        setValue(value);
+        onChange && onChange(value);
+    };
+    const handleBlur = (value) => {
+        if (!onBlur)
+            return;
+        setValue(value);
+        onBlur(value);
+    };
+    return (_jsxs(Box, { sx: { display: "flex", gap: 1, alignItems: "center", ...sx }, children: [_jsx(Input, { size: size, onChange: (value) => {
+                    handleChange(value);
+                }, onBlur: (value) => {
+                    handleBlur(value);
+                }, sx: {
+                    width: "100%",
+                    ...slotSxProps?.input,
+                }, ...rest, value: value ?? "" }), _jsx("input", { type: "color", style: {
+                    width: "15%",
+                    height: size === "medium" ? 28 : size == "large" ? 32 : 22,
+                    ...slotSxProps?.color,
+                }, value: toHexColor(value ?? ""), onChange: (e) => {
+                    const value = e.target.value;
+                    if (timeoutId.current) {
+                        clearTimeout(timeoutId.current);
+                    }
+                    timeoutId.current = setTimeout(() => {
+                        handleChange(value);
+                        timeoutId.current = null;
+                    }, 20);
+                } })] }));
+};

package/InputMultiple.d.ts

@@ -0,0 +1,15 @@
+import { SxProps } from "@mui/material";
+import { type SlotSxProps } from "./SelectAutocomplete";
+import { SyntheticEvent } from "react";
+export type InputMultipleItem = string;
+export declare const InputMultiple: (props: {
+    value?: InputMultipleItem[];
+    onChange: (values: InputMultipleItem[], e: SyntheticEvent<Element, Event>) => void;
+    validate?: (value: string) => [true] | [false, string];
+    freeSolo?: boolean;
+    slotSxProps?: SlotSxProps;
+    size?: "small" | "medium";
+    limitTags?: number;
+    sx?: SxProps;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InputMultiple.d.ts.map

package/InputMultiple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputMultiple.d.ts","sourceRoot":"","sources":["../src/InputMultiple.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAgC,MAAM,OAAO,CAAC;AAOrE,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC;AAEvC,eAAO,MAAM,aAAa,GAAI,OAAO;IACnC,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC5B,QAAQ,EAAE,CACR,MAAM,EAAE,iBAAiB,EAAE,EAC3B,CAAC,EAAE,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,KAC9B,IAAI,CAAC;IACV,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,OAAO,CAAC;CACd,4CA8FA,CAAC"}

package/InputMultiple.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete } from "@mui/material";
+import { SelectAutocomplete } from "./SelectAutocomplete";
+import { useEffect, useMemo, useState } from "react";
+import { Typography } from "./Typography";
+const sxSelectAutocomplete = SelectAutocomplete.sx;
+const SelectAutocompleteTextField = SelectAutocomplete.TextField;
+export const InputMultiple = (props) => {
+    const { onChange, validate, freeSolo = true, slotSxProps, size, limitTags = 2, sx, } = props;
+    const [value, setValue] = useState([]);
+    const [error, setError] = useState();
+    // Filter out empty strings from the value array
+    // const value = useMemo(
+    //   () => (props.value ?? []).filter((v) => `${v}`.trim() !== ""),
+    //   [props.value]
+    // );
+    const items = useMemo(() => (value ?? []).map((item) => typeof item === "string" ? { label: item, id: item } : item), [value]);
+    useEffect(() => {
+        console.log("InputMultiple useEffect", props.value);
+        const newValue = (props.value ?? []).filter((v) => `${v}`.trim() !== "");
+        setValue(newValue);
+    }, [props.value]);
+    return (_jsxs(SelectAutocomplete.Wrapper, { size: size, slotSxProps: slotSxProps, children: [_jsx(Autocomplete, { size: "small", multiple: true, freeSolo: true, limitTags: limitTags, options: items, value: value, onChange: (event, value) => {
+                    event.stopPropagation();
+                    if (validate) {
+                        for (const item of value) {
+                            if (typeof item !== "string") {
+                                continue;
+                            }
+                            const [success, errorMessage] = validate(item);
+                            if (!success) {
+                                // If validation fails, do not update the value
+                                setError(errorMessage);
+                                return;
+                            }
+                        }
+                    }
+                    const newValue = value.map((item) => typeof item === "string" ? item : item.id);
+                    setError(undefined);
+                    setValue(newValue);
+                    onChange(newValue, event);
+                }, sx: sxSelectAutocomplete({
+                    size: size ?? "small",
+                    sx: { zIndex: 9999, ...slotSxProps?.input },
+                    ...sx,
+                }), renderInput: (params) => (_jsx(SelectAutocompleteTextField, { params: params, size: size, sx: slotSxProps?.textField })), slotProps: {
+                    // Don't show the dropdown menu
+                    popper: {
+                        sx: {
+                            display: "none",
+                        },
+                    },
+                } }), error && (_jsx(Typography, { size: size, color: "error", children: error }))] }));
+};

package/InputSearch.d.ts

@@ -0,0 +1,7 @@
+import { SxProps } from "@mui/material";
+export declare const InputSearch: (props: {
+    size?: "small" | "medium" | "large";
+    sx?: SxProps | undefined;
+    onChange?: (value: string, e?: React.ChangeEvent<HTMLInputElement>) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InputSearch.d.ts.map

package/InputSearch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputSearch.d.ts","sourceRoot":"","sources":["../src/InputSearch.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAKxC,eAAO,MAAM,WAAW,GAAI,OAAO;IACjC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,EAAE,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC7E,4CA6CA,CAAC"}

package/InputSearch.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import SearchIcon from "@mui/icons-material/Search";
+import { useNavigation } from "@rnaga/wp-next-core/client/hooks/use-navigation";
+import { Input } from "./Input";
+export const InputSearch = (props) => {
+    const { size = "small" } = props;
+    const { queryObject, updateRouter } = useNavigation();
+    const ref = useRef(null);
+    const handleClear = () => {
+        updateRouter({ search: "" });
+        ref.current.value = "";
+    };
+    const handleChange = (value, e) => {
+        if (props.onChange) {
+            props.onChange(value, e);
+            return;
+        }
+        updateRouter({ search: value, page: 1 });
+    };
+    return (_jsx(Input, { ref: ref, size: size, placeholder: "Search", startAdornment: _jsx(SearchIcon, { sx: {
+                opacity: 0.5,
+            } }), value: queryObject?.search, slotProps: {
+            input: {
+            // TypeScript may require this to avoid type errors
+            },
+        }, clearable: true, sx: props.sx ?? {}, onChange: (value, e) => handleChange(value, e), onClear: handleClear }));
+};