@ramesesinc/platform-core 0.1.9 → 0.1.10

package/dist/components/action/LookupPage.d.ts

@@ -7,10 +7,11 @@ interface LookupPageProps extends AbstractComponent {
     children?: React.ReactNode;
     className?: string;
     title?: string;
-    icon?: string;
+    icon?: string | React.ReactNode;
     opt?: Record<string, any>;
     iconOnly?: boolean;
     popupClassName?: string;
+    variant?: "primary" | "secondary" | "danger" | "text" | "contained" | "outlined";
 }
 declare const LookupPage: (props: LookupPageProps) => import("react/jsx-runtime").JSX.Element;
 export default LookupPage;

package/dist/components/action/LookupPage.js

@@ -1,5 +1,6 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "@ramesesinc/client";
 import { useRef } from "react";
 import { usePageContext } from "../../core/PageContext";
 import { getValue, substituteExpr } from "../../lib/utils/BeanUtils";
@@ -7,7 +8,7 @@ import { usePopupView } from "../view/PopupView";
 /* ------------------------------------------------------------------ */
 /* Component */
 const LookupPage = (props) => {
-    const { url, name = "", result = null, children, className = "", title, icon, opt = {}, popupClassName = "", iconOnly = false } = props !== null && props !== void 0 ? props : {};
+    const { url, name = "", result = null, children, className = "", title, icon, opt = {}, popupClassName = "", iconOnly = false, variant = "contained", } = props !== null && props !== void 0 ? props : {};
     const { data = {} } = opt;
     const pageContext = usePageContext();
     const popupView = usePopupView();
@@ -35,6 +36,6 @@ const LookupPage = (props) => {
         popupRef.current = showPopupRef;
     };
     /* ---------------------- Render ---------------------- */
-    return (_jsx(_Fragment, { children: iconOnly ? (_jsx("span", { onClick: handleClick, className: `cursor-pointer ${className}`, children: icon })) : (_jsxs("button", { onClick: handleClick, className: `px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`, children: [icon && _jsx("span", { className: "dl-action-icon", children: icon }), title || "View Page"] })) }));
+    return (_jsx(_Fragment, { children: iconOnly ? (_jsx("span", { onClick: handleClick, className: `cursor-pointer ${className}`, children: icon })) : (_jsx(Button, { onClick: handleClick, className: `${className}`, icon: icon, variant: variant, children: title || "Lookup Page" })) }));
 };
 export default LookupPage;

package/dist/components/action/Play.d.ts

@@ -0,0 +1,6 @@
+type PlayProps = {
+    name?: string;
+    opt?: Record<string, any>;
+};
+declare const Play: (props: PlayProps) => import("react/jsx-runtime").JSX.Element;
+export default Play;

package/dist/components/action/Play.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pause, Play as PlayIcon, Square } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useDataContext } from "../../core/DataContext";
+const Play = (props) => {
+    const { name = "play", opt } = props !== null && props !== void 0 ? props : {};
+    const dataContext = useDataContext();
+    const [state, setState] = useState("idle");
+    const handlePlayPause = () => {
+        if (state === "idle") {
+            setState("playing");
+            dataContext === null || dataContext === void 0 ? void 0 : dataContext.set(name, 100); // ← start
+        }
+        else if (state === "playing") {
+            setState("paused");
+            dataContext === null || dataContext === void 0 ? void 0 : dataContext.set(name, -1); // ← pause
+        }
+        else if (state === "paused") {
+            setState("playing");
+            dataContext === null || dataContext === void 0 ? void 0 : dataContext.set(name, 100); // ← resume
+        }
+    };
+    const handleStop = () => {
+        setState("idle");
+        dataContext === null || dataContext === void 0 ? void 0 : dataContext.set(name, 0); // ← stop
+    };
+    // ← listen to progress finishing
+    useEffect(() => {
+        if (!name)
+            return;
+        const unsubscribe = dataContext === null || dataContext === void 0 ? void 0 : dataContext.dependsTo(name, (val) => {
+            if (val === 0) {
+                setState("idle");
+            }
+        });
+        return () => unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe();
+    }, [name]);
+    return (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { onClick: handlePlayPause, className: "cursor-pointer hover:opacity-70 transition-opacity", children: state === "playing" ? (_jsx(Pause, { size: 18, className: "text-yellow-500", fill: "currentColor" })) : state === "paused" ? (_jsx(PlayIcon, { size: 18, className: "text-blue-500", fill: "currentColor" })) : (_jsx(PlayIcon, { size: 18, className: "text-green-500", fill: "currentColor" })) }), state === "paused" && (_jsx("span", { onClick: handleStop, className: "cursor-pointer hover:opacity-70 transition-opacity", children: _jsx(Square, { size: 18, className: "text-red-500", fill: "currentColor" }) }))] }));
+};
+export default Play;

package/dist/components/action/ProgressBar.d.ts

@@ -0,0 +1,8 @@
+type ProgressBarProps = {
+    value?: number;
+    depends?: string;
+    caption?: string;
+    opt?: Record<string, any>;
+};
+declare const ProgressBar: (props: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export default ProgressBar;

package/dist/components/action/ProgressBar.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useDataContext } from "../../core/DataContext";
+const ProgressBar = (props) => {
+    const { value: propValue, depends, caption, opt } = props !== null && props !== void 0 ? props : {};
+    const [animValue, setAnimValue] = useState(0);
+    const [active, setActive] = useState(false);
+    const dataContext = useDataContext();
+    const intervalRef = useRef(null);
+    const doneRef = useRef(false);
+    const startProgress = () => {
+        if (intervalRef.current)
+            clearInterval(intervalRef.current);
+        setActive(true);
+        intervalRef.current = setInterval(() => {
+            setAnimValue((prev) => {
+                if (prev >= 100) {
+                    clearInterval(intervalRef.current);
+                    doneRef.current = true;
+                    return 100;
+                }
+                return prev + 2;
+            });
+        }, 50);
+    };
+    const pauseProgress = () => {
+        if (intervalRef.current)
+            clearInterval(intervalRef.current);
+        setActive(false);
+    };
+    const stopProgress = () => {
+        if (intervalRef.current)
+            clearInterval(intervalRef.current);
+        doneRef.current = false;
+        setActive(false);
+        setAnimValue(0);
+    };
+    useEffect(() => {
+        if (animValue >= 100) {
+            setActive(false);
+            const timeout = setTimeout(() => {
+                dataContext === null || dataContext === void 0 ? void 0 : dataContext.set(depends !== null && depends !== void 0 ? depends : "", 0);
+            }, 1500);
+            return () => clearTimeout(timeout);
+        }
+    }, [animValue]);
+    useEffect(() => {
+        if (!depends)
+            return;
+        const unsubscribe = dataContext === null || dataContext === void 0 ? void 0 : dataContext.dependsTo(depends, (val) => {
+            if (val === 100) {
+                startProgress();
+            }
+            else if (val === -1) {
+                pauseProgress();
+            }
+            else if (val === 0 && !doneRef.current) {
+                stopProgress();
+            }
+        });
+        return () => unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe();
+    }, [depends]);
+    useEffect(() => {
+        return () => {
+            if (intervalRef.current)
+                clearInterval(intervalRef.current);
+        };
+    }, []);
+    const getColor = () => {
+        if (animValue < 25)
+            return { bar: "#ef4444", glow: "#ff000080" };
+        if (animValue < 50)
+            return { bar: "#f97316", glow: "#ff6a0080" };
+        if (animValue < 75)
+            return { bar: "#eab308", glow: "#ffcc0080" };
+        return { bar: "#22c55e", glow: "#00ff6680" };
+    };
+    const { bar, glow } = getColor();
+    return (_jsxs("div", { className: "flex flex-col gap-1 w-full", children: [_jsxs("div", { className: "relative w-full rounded-sm overflow-hidden", style: {
+                    height: "16px",
+                    background: "#1a1a2e",
+                    border: "1px solid #333",
+                    boxShadow: "inset 0 2px 4px rgba(0,0,0,0.5)",
+                }, children: [_jsxs("div", { style: {
+                            width: `${animValue}%`,
+                            height: "100%",
+                            background: `linear-gradient(90deg, ${bar}cc, ${bar})`,
+                            boxShadow: `0 0 8px ${glow}, 0 0 2px ${bar}`,
+                            transition: "width 0.3s ease",
+                            position: "relative",
+                        }, children: [_jsx("div", { style: {
+                                    position: "absolute",
+                                    top: 0,
+                                    left: 0,
+                                    right: 0,
+                                    height: "50%",
+                                    background: "linear-gradient(180deg, rgba(255,255,255,0.2), transparent)",
+                                } }), _jsx("div", { style: {
+                                    position: "absolute",
+                                    top: 0,
+                                    bottom: 0,
+                                    width: "20px",
+                                    right: 0,
+                                    background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent)",
+                                    animation: active ? "sweep 1s ease-in-out infinite" : "none",
+                                } })] }), [25, 50, 75].map((seg) => (_jsx("div", { style: {
+                            position: "absolute",
+                            top: 0,
+                            bottom: 0,
+                            left: `${seg}%`,
+                            width: "1px",
+                            background: "rgba(0,0,0,0.4)",
+                            zIndex: 1,
+                        } }, seg)))] }), caption && (_jsxs("div", { className: "flex items-center justify-center gap-1", children: [_jsxs("span", { style: {
+                            fontFamily: "monospace",
+                            fontSize: "11px",
+                            fontWeight: "bold",
+                            color: bar,
+                            textShadow: `0 0 6px ${glow}`,
+                            letterSpacing: "0.05em",
+                            animation: active ? "blink 1s step-end infinite" : "none",
+                        }, children: [caption.toUpperCase(), active && "..."] }), _jsxs("span", { style: {
+                            fontFamily: "monospace",
+                            fontSize: "11px",
+                            fontWeight: "bold",
+                            color: bar,
+                            textShadow: `0 0 6px ${glow}`,
+                        }, children: [animValue, "%"] })] })), !caption && (_jsx("div", { className: "flex justify-end", children: _jsxs("span", { style: {
+                        fontFamily: "monospace",
+                        fontSize: "11px",
+                        fontWeight: "bold",
+                        color: bar,
+                        textShadow: `0 0 6px ${glow}`,
+                    }, children: [animValue, "%"] }) })), _jsx("style", { children: `
+        @keyframes sweep {
+          0% { opacity: 0; transform: translateX(-20px); }
+          50% { opacity: 1; }
+          100% { opacity: 0; transform: translateX(20px); }
+        }
+        @keyframes blink {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.3; }
+        }
+      ` })] }));
+};
+export default ProgressBar;

package/dist/components/action/ViewPage.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { AbstractComponent } from "../../types/component";
 import { PopupOptions } from "../../core/PopupContext";
+import { AbstractComponent } from "../../types/component";
 interface ViewPageProps extends AbstractComponent {
     url: string;
     mode?: "popup" | "window";
@@ -10,6 +10,7 @@ interface ViewPageProps extends AbstractComponent {
     opt?: Record<string, any>;
     iconOnly?: boolean;
     popupClassName?: string;
+    variant?: "primary" | "secondary" | "danger" | "text" | "contained" | "outlined";
     popupOptions?: PopupOptions;
 }
 declare const ViewPage: (props: ViewPageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/action/ViewPage.js

@@ -1,5 +1,6 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "@ramesesinc/client";
 import { useRef } from "react";
 import { useDataContext } from "../../core/DataContext";
 import { usePageContext } from "../../core/PageContext";
@@ -10,7 +11,7 @@ import { usePopupView } from "../view/PopupView";
 /* ------------------------------------------------------------------ */
 /* Component */
 const ViewPage = (props) => {
-    const { url, mode, className = "", title, icon, iconOnly = false, opt = {}, popupClassName = "", popupOptions = {} } = props !== null && props !== void 0 ? props : {};
+    const { url, mode, className = "", title, icon, iconOnly = false, opt = {}, popupClassName = "", popupOptions = {}, variant } = props !== null && props !== void 0 ? props : {};
     const { data = {} } = opt;
     const dataContext = useDataContext();
     const pageView = usePageViewContext();
@@ -22,8 +23,8 @@ const ViewPage = (props) => {
         var _a;
         (_a = popupShowRef.current) === null || _a === void 0 ? void 0 : _a.close();
     };
-    const handleClick = (e) => {
-        e.preventDefault();
+    const handleClick = () => {
+        // e.preventDefault();
         if (!url)
             return;
         const getUrlParams = () => {
@@ -47,9 +48,9 @@ const ViewPage = (props) => {
         const urlData = getUrlData();
         const surl = substituteExpr(url, Object.assign(Object.assign({}, urlParams), urlData));
         let preferredMode = mode;
-        if ((preferredMode == null || preferredMode.trim() === '') && dataContext.getType() === 'row') {
-            preferredMode = "window";
-        }
+        // if ((preferredMode == null || preferredMode.trim() === "") && dataContext.getType() === "row") {
+        //   preferredMode = "window";
+        // }
         if (preferredMode === "popup") {
             const handler = {
                 onSave: (itm) => {
@@ -61,7 +62,7 @@ const ViewPage = (props) => {
                 },
             };
             const showPopupOptions = Object.assign({}, popupOptions);
-            if (popupClassName != null && popupClassName.trim() !== '') {
+            if (popupClassName != null && popupClassName.trim() !== "") {
                 showPopupOptions.className = popupClassName;
             }
             const showPopupRef = popupView.create({ url: surl, onClose: onClose, eventHandler: handler }).show(showPopupOptions);
@@ -73,10 +74,19 @@ const ViewPage = (props) => {
         }
         else {
             popupShowRef.current = null;
+            // store page context params in chain before navigating
+            const chainInfo = pageView.getPageChainInfo();
+            const allData = pageContext.getAllData();
+            chainInfo.params = Object.assign(Object.assign({}, chainInfo.params), allData);
             pageView.pushPage(surl);
         }
     };
     /* ---------------------- Render ---------------------- */
-    return (_jsx(_Fragment, { children: iconOnly ? (_jsx("span", { onClick: handleClick, className: `cursor-pointer ${className}`, children: icon })) : (_jsxs("button", { onClick: handleClick, className: `px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`, children: [icon && _jsx("span", { className: "dl-action-icon", children: icon }), title || "View Page"] })) }));
+    return (_jsx(_Fragment, { children: iconOnly ? (_jsx("span", { onClick: handleClick, className: `cursor-pointer ${className}`, children: icon })) : (
+        // <button onClick={handleClick} className={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`}>
+        //   {icon && <span className="dl-action-icon">{icon}</span>}
+        //   {title || "View Page"}
+        // </button>
+        _jsx(Button, { onClick: handleClick, className: `${className}`, icon: icon, variant: variant, children: title || "View Page" })) }));
 };
 export default ViewPage;

package/dist/components/common/UIMenu.js

@@ -20,14 +20,15 @@ const useUIMenu = (props) => {
             return;
         }
         const fetchMenus = async () => {
-            var _a, _b;
+            var _a, _b, _c;
             setLoading(true);
             setError(null);
             try {
                 // 2️⃣ Custom API
                 if (data === null || data === void 0 ? void 0 : data.api) {
                     const res = await (pageContext === null || pageContext === void 0 ? void 0 : pageContext.execService(data.api, (_a = data.params) !== null && _a !== void 0 ? _a : {}));
-                    setMenus(Array.isArray(res) ? res : []);
+                    const newData = (_b = res.data) !== null && _b !== void 0 ? _b : res;
+                    setMenus(Array.isArray(newData) ? newData : newData ? [newData] : []);
                     return;
                 }
                 // 3️⃣ Menugroup — fetch categories + items, map to MenuGroup[]
@@ -48,7 +49,7 @@ const useUIMenu = (props) => {
                 }
             }
             catch (err) {
-                setError((_b = err === null || err === void 0 ? void 0 : err.message) !== null && _b !== void 0 ? _b : "Failed to load menus");
+                setError((_c = err === null || err === void 0 ? void 0 : err.message) !== null && _c !== void 0 ? _c : "Failed to load menus");
             }
             finally {
                 setLoading(false);

package/dist/components/index.d.ts

@@ -1,8 +1,8 @@
 export { default as Button } from "./action/Button";
 export { default as DateField } from "./input/DateField";
 export { default as DayPicker } from "./input/DayPicker";
+export { default as Combo } from "./input/Combo";
 export { default as MonthPicker } from "./input/MonthPicker";
-export { default as Select } from "./input/Select";
 export { default as Text } from "./input/Text";
 export { default as YearPicker } from "./input/YearPicker";
 export { default as HtmlCode } from "./input/HtmlCode";
@@ -10,6 +10,7 @@ export { default as JsonCode } from "./input/JsonCode";
 export { default as ScriptCode } from "./input/ScriptCode";
 export { default as SqlCode } from "./input/SqlCode";
 export { default as StringDecision } from "./input/StringDecision";
+export { default as EditableMenu } from "./list/EditableMenu";
 export { default as TabMenu } from "./list/TabMenu";
 export { default as TreeMenu } from "./list/TreeMenu";
 export { default as Label } from "./output/Label";
@@ -27,7 +28,9 @@ export type { ShowPopupViewRef, CreatePopupViewRef, UsePopupViewResult } from ".
 export { default as AlertMessage } from "./action/AlertMessage";
 export { default as DeleteData } from "./action/DeleteData";
 export { default as Edit } from "./action/Edit";
+export { default as Play } from "./action/Play";
 export { default as ProcessRunner } from "./action/ProcessRunner";
+export { default as ProgressBar } from "./action/ProgressBar";
 export { default as Refresh } from "./action/Refresh";
 export { default as SaveData } from "./action/SaveData";
 export { default as SelectData } from "./action/SelectData";

package/dist/components/index.js

@@ -2,8 +2,8 @@ export { default as Button } from "./action/Button";
 //inputs
 export { default as DateField } from "./input/DateField";
 export { default as DayPicker } from "./input/DayPicker";
+export { default as Combo } from "./input/Combo";
 export { default as MonthPicker } from "./input/MonthPicker";
-export { default as Select } from "./input/Select";
 export { default as Text } from "./input/Text";
 export { default as YearPicker } from "./input/YearPicker";
 //codes
@@ -14,6 +14,7 @@ export { default as SqlCode } from "./input/SqlCode";
 //conditions
 export { default as StringDecision } from "./input/StringDecision";
 //export { default as YearPicker } from "./input/YearPicker";
+export { default as EditableMenu } from "./list/EditableMenu";
 export { default as TabMenu } from "./list/TabMenu";
 export { default as TreeMenu } from "./list/TreeMenu";
 export { default as Label } from "./output/Label";
@@ -31,7 +32,9 @@ export { default as PopupView } from "./view/PopupView";
 export { default as AlertMessage } from "./action/AlertMessage";
 export { default as DeleteData } from "./action/DeleteData";
 export { default as Edit } from "./action/Edit";
+export { default as Play } from "./action/Play";
 export { default as ProcessRunner } from "./action/ProcessRunner";
+export { default as ProgressBar } from "./action/ProgressBar";
 export { default as Refresh } from "./action/Refresh";
 export { default as SaveData } from "./action/SaveData";
 export { default as SelectData } from "./action/SelectData";

package/dist/components/input/Combo.d.ts

@@ -0,0 +1,21 @@
+import { UIInputProps } from "../common/UIInput";
+type SelectOption = {
+    label: string;
+    value: string;
+};
+type ComboProps = UIInputProps & {
+    name?: string;
+    depends?: string;
+    required?: boolean;
+    immediate?: boolean;
+    items?: SelectOption[];
+    data?: Record<string, any>;
+    placeholder?: string;
+    onChange?: (value: string) => void;
+    variant?: "primary" | "secondary" | "danger" | "text" | "contained" | "outlined";
+    radius?: "none" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
+    size?: "sm" | "md" | "lg";
+    className?: string;
+};
+declare const Combo: (props: ComboProps) => import("react/jsx-runtime").JSX.Element;
+export default Combo;

package/dist/components/input/Combo.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePageContext } from "@/core/PageContext";
+import { ChevronDown } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import UIComponent from "../common/UIComponent";
+import useUIInput from "../common/UIInput";
+const RADIUS_STYLES = {
+    none: "rounded-none",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+    "2xl": "rounded-2xl",
+    "3xl": "rounded-3xl",
+    full: "rounded-full",
+};
+const variantStyles = {
+    primary: "border bg-blue-500 text-blue-50",
+    secondary: "border bg-white text-gray-700",
+    danger: "border bg-red-600 text-white",
+    text: "border bg-transparent text-blue-600",
+    contained: "border bg-blue-500 text-blue-50",
+    outlined: "border border-1 bg-transparent text-black",
+};
+const Combo = (props) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { name, immediate = true, items = [], data = {}, placeholder, variant = "outlined", radius = "md", className = "" } = props !== null && props !== void 0 ? props : {};
+    const { params } = data !== null && data !== void 0 ? data : {};
+    const { projection } = params !== null && params !== void 0 ? params : {};
+    const selectRef = useRef(null);
+    const pageContext = usePageContext();
+    const [listItems, setListItems] = useState(items);
+    const [rawItems, setRawItems] = useState([]);
+    const [selectValue, setSelectValue] = useState("");
+    // derive label/value keys from projection
+    const projectedKeys = Object.keys(projection !== null && projection !== void 0 ? projection : {});
+    const labelKey = (_b = (_a = data.labelKey) !== null && _a !== void 0 ? _a : projectedKeys[0]) !== null && _b !== void 0 ? _b : "label";
+    const valueKey = (_d = (_c = data.valueKey) !== null && _c !== void 0 ? _c : projectedKeys[0]) !== null && _d !== void 0 ? _d : "value";
+    const isSpecificField = (_e = props.name) === null || _e === void 0 ? void 0 : _e.includes(".");
+    const buildValue = (rawItem) => {
+        if (isSpecificField) {
+            return rawItem[valueKey];
+        }
+        else {
+            return Object.keys(projection !== null && projection !== void 0 ? projection : {}).reduce((acc, key) => {
+                acc[key] = rawItem[key];
+                return acc;
+            }, {});
+        }
+    };
+    const onRefresh = () => {
+        var _a;
+        const val = getValue();
+        if (val != null && typeof val === "object") {
+            setSelectValue(String((_a = val[valueKey]) !== null && _a !== void 0 ? _a : ""));
+        }
+        else {
+            setSelectValue(val !== null && val !== void 0 ? val : "");
+        }
+    };
+    const { getValue, setValue } = useUIInput(Object.assign(Object.assign({}, props), { onRefresh }));
+    const fetchItems = async () => {
+        var _a, _b, _c, _d;
+        if (data === null || data === void 0 ? void 0 : data.api) {
+            const res = await (pageContext === null || pageContext === void 0 ? void 0 : pageContext.execService(data.api, (_a = data.params) !== null && _a !== void 0 ? _a : {}));
+            const raw = (_c = (_b = res === null || res === void 0 ? void 0 : res.data) !== null && _b !== void 0 ? _b : res) !== null && _c !== void 0 ? _c : [];
+            setRawItems(raw);
+            const mapped = raw
+                .map((item) => {
+                var _a, _b, _c;
+                return ({
+                    label: String((_a = item[labelKey]) !== null && _a !== void 0 ? _a : ""),
+                    value: String((_c = (_b = item[valueKey]) !== null && _b !== void 0 ? _b : item["_id"]) !== null && _c !== void 0 ? _c : ""),
+                });
+            })
+                .sort((a, b) => a.label.localeCompare(b.label));
+            setListItems(mapped);
+            // auto-select first item
+            if (mapped.length > 0) {
+                const currentVal = getValue();
+                if (currentVal != null && currentVal !== "" && currentVal !== undefined) {
+                    // value already set, just sync display
+                    if (typeof currentVal === "object") {
+                        setSelectValue(String((_d = currentVal[valueKey]) !== null && _d !== void 0 ? _d : ""));
+                    }
+                    else {
+                        setSelectValue(String(currentVal));
+                    }
+                }
+                else {
+                    // no value set, auto-select first
+                    const firstMapped = mapped[0];
+                    const firstItem = raw.find((item) => { var _a, _b; return String((_b = (_a = item[valueKey]) !== null && _a !== void 0 ? _a : item["_id"]) !== null && _b !== void 0 ? _b : "") === firstMapped.value; });
+                    if (firstItem) {
+                        setSelectValue(firstMapped.value);
+                        setValue(buildValue(firstItem));
+                    }
+                }
+            }
+            return;
+        }
+        setListItems([...items].sort((a, b) => a.label.localeCompare(b.label)));
+    };
+    useEffect(() => {
+        fetchItems();
+    }, []);
+    useEffect(() => {
+        if (!(data === null || data === void 0 ? void 0 : data.api)) {
+            setListItems([...items].sort((a, b) => a.label.localeCompare(b.label)));
+        }
+    }, [items]);
+    const handleBlur = () => {
+        if (!immediate) {
+            setValue(selectValue);
+        }
+    };
+    const onChange = (e) => {
+        var _a, _b;
+        const text = (_a = e.target.value) !== null && _a !== void 0 ? _a : "";
+        setSelectValue(text);
+        if (immediate) {
+            const rawItem = rawItems.find((item) => { var _a, _b; return String((_b = (_a = item[valueKey]) !== null && _a !== void 0 ? _a : item["_id"]) !== null && _b !== void 0 ? _b : "") === text; });
+            if (rawItem) {
+                setValue(buildValue(rawItem));
+            }
+            else {
+                setValue(text);
+            }
+        }
+        (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, text);
+    };
+    const baseStyles = "w-full appearance-none cursor-pointer pl-4 pr-10 py-[4px] text-md font-medium transition-all duration-150 ease-in-out bg-transparent";
+    const focusStyles = "focus:outline-none focus:ring-0 focus:shadow-none";
+    const roundingStyle = (_f = RADIUS_STYLES[radius]) !== null && _f !== void 0 ? _f : RADIUS_STYLES["md"];
+    const finalClassName = [baseStyles, focusStyles, roundingStyle].filter(Boolean).join(" ");
+    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsxs("div", { className: `relative inline-flex items-center overflow-hidden ${roundingStyle} ${variantStyles[variant]} ${className}`, children: [_jsxs("select", { ref: selectRef, onChange: onChange, value: selectValue, onBlur: handleBlur, className: finalClassName, children: [_jsx("option", { value: "", children: placeholder !== null && placeholder !== void 0 ? placeholder : "Select..." }), listItems.map((item) => (_jsx("option", { value: item.value, children: item.label }, item.value)))] }), _jsx("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none flex items-center", children: _jsx(ChevronDown, { size: 16 }) })] }) })));
+};
+export default Combo;

package/dist/components/input/DateField.js

@@ -29,7 +29,7 @@ const DateField = (props) => {
     const getCurrentDate = () => {
         if (inputValue && inputValue.match(/^\d{4}-\d{2}-\d{2}$/)) {
             // Parse ISO date string as local date to avoid timezone issues
-            const parts = inputValue.split('-');
+            const parts = inputValue.split("-");
             const year = parseInt(parts[0], 10);
             const month = parseInt(parts[1], 10) - 1; // Month is 0-indexed
             const day = parseInt(parts[2], 10);
@@ -46,7 +46,7 @@ const DateField = (props) => {
             setInputValue(text);
             // Update calendar date when user types a valid date
             if (text && text.match(/^\d{4}-\d{2}-\d{2}$/)) {
-                const parts = text.split('-');
+                const parts = text.split("-");
                 const year = parseInt(parts[0], 10);
                 const month = parseInt(parts[1], 10) - 1;
                 const day = parseInt(parts[2], 10);
@@ -103,27 +103,20 @@ const DateField = (props) => {
         if (!inputValue || !inputValue.match(/^\d{4}-\d{2}-\d{2}$/))
             return false;
         // Parse ISO date string as local date
-        const parts = inputValue.split('-');
+        const parts = inputValue.split("-");
         const selectedYear = parseInt(parts[0], 10);
         const selectedMonth = parseInt(parts[1], 10) - 1;
         const selectedDay = parseInt(parts[2], 10);
-        return (date.getDate() === selectedDay &&
-            date.getMonth() === selectedMonth &&
-            date.getFullYear() === selectedYear);
+        return date.getDate() === selectedDay && date.getMonth() === selectedMonth && date.getFullYear() === selectedYear;
     };
     const isToday = (date) => {
         const today = new globalThis.Date();
-        return (date.getDate() === today.getDate() &&
-            date.getMonth() === today.getMonth() &&
-            date.getFullYear() === today.getFullYear());
+        return date.getDate() === today.getDate() && date.getMonth() === today.getMonth() && date.getFullYear() === today.getFullYear();
     };
-    const monthNames = [
-        "January", "February", "March", "April", "May", "June",
-        "July", "August", "September", "October", "November", "December"
-    ];
+    const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
     const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
     const calendarDays = generateCalendarDays();
-    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "flex gap-1", children: [_jsx("input", { type: "date", ref: inputRef, onChange: onChange, value: inputValue, onFocus: handleFocus, onBlur: handleBlur, className: className, min: min, max: max }), _jsx("button", { type: "button", onClick: toggleCalendar, className: "border rounded px-3 py-1 bg-white hover:bg-gray-50", children: "\uD83D\uDCC5" })] }), showCalendar && (_jsxs("div", { ref: calendarRef, className: "absolute z-10 mt-1 bg-white border rounded shadow-lg p-4", style: { minWidth: "280px" }, children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsx("button", { type: "button", onClick: previousMonth, className: "px-2 py-1 hover:bg-gray-100 rounded", children: "\u25C0" }), _jsxs("div", { className: "font-semibold", children: [monthNames[calendarDate.getMonth()], " ", calendarDate.getFullYear()] }), _jsx("button", { type: "button", onClick: nextMonth, className: "px-2 py-1 hover:bg-gray-100 rounded", children: "\u25B6" })] }), _jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: dayNames.map((day) => (_jsx("div", { className: "text-center text-xs font-medium text-gray-600 py-1", children: day }, day))) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
+    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsxs("div", { className: "relative", children: [_jsx("div", { className: "flex gap-1", children: _jsx("input", { type: "date", ref: inputRef, onChange: onChange, value: inputValue, onFocus: handleFocus, onBlur: handleBlur, className: className, min: min, max: max }) }), showCalendar && (_jsxs("div", { ref: calendarRef, className: "absolute z-10 mt-1 bg-white border rounded shadow-lg p-4", style: { minWidth: "280px" }, children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsx("button", { type: "button", onClick: previousMonth, className: "px-2 py-1 hover:bg-gray-100 rounded", children: "\u25C0" }), _jsxs("div", { className: "font-semibold", children: [monthNames[calendarDate.getMonth()], " ", calendarDate.getFullYear()] }), _jsx("button", { type: "button", onClick: nextMonth, className: "px-2 py-1 hover:bg-gray-100 rounded", children: "\u25B6" })] }), _jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: dayNames.map((day) => (_jsx("div", { className: "text-center text-xs font-medium text-gray-600 py-1", children: day }, day))) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
                                 if (!date) {
                                     return _jsx("div", { className: "aspect-square" }, index);
                                 }

package/dist/components/input/Text.d.ts

@@ -1,7 +1,12 @@
 import { UIInputProps } from "../common/UIInput";
+export type TextCase = "upper" | "lower" | "capitalize" | "none";
+export declare const applyTextCase: (value: string, mode: TextCase) => string;
 type TextFieldProps = UIInputProps & {
     required?: boolean;
     immediate?: boolean;
+    align?: "left" | "center" | "right";
+    noSpace?: boolean;
+    placeholder?: string;
 };
 declare const TextField: (props: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default TextField;