@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.3

package/dist/components/core/form/fields/widgets/SolidAiInteractionMetadataFieldFormWidget.tsx

@@ -1,9 +1,10 @@
 
+import { useMemo, useState } from "react";
 import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
 import MarkdownViewer from "../../../../../components/common/MarkdownViewer";
-import { Accordion, AccordionTab } from "primereact/accordion";
-import { Button } from "primereact/button";
-import { TabView, TabPanel } from "primereact/tabview";
+import { SolidButton } from "../../../../shad-cn-ui/SolidButton";
+import { SolidIcon } from "../../../../shad-cn-ui";
+import { SolidTabGroup } from "../../../../../components/shad-cn-ui/SolidTabs";
 import ReactCodeMirror, { EditorView, oneDark } from "@uiw/react-codemirror";
 import { javascript } from "@codemirror/lang-javascript";
 
@@ -15,130 +16,115 @@ export const SolidAiInteractionMetadataFieldFormWidget = ({ formik, fieldContext
     const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;
     const value = formik.values[fieldLayoutInfo.attrs.name];
 
-    return (
-        <div className="mt-2 flex-column">
-            {/* <p className="m-0 form-field-label font-medium">{fieldLabel}</p> */}
+    const [activeTab, setActiveTab] = useState("chunks");
 
-            <TabView>
-                {/* -------------------- Tab 1: Metadata & Prompts -------------------- */}
-                <TabPanel header="Chunks">
-                    <div className="solid-layout-accordion">
-                        <Accordion multiple expandIcon="pi pi-chevron-down" collapseIcon="pi pi-chevron-up" activeIndex={[0]}>
-                            {value?.chunks?.map((c: any) => {
-                                let processedText = c.text || '';
-                                const meta = c.metadata || {};
+    const chunkContent = useMemo(() => {
+        if (!value?.chunks?.length) return null;
+        return (
+            <div className="solid-layout-accordion flex flex-col gap-2">
+                {value.chunks.map((c: any, index: number) => {
+                    let processedText = c.text || '';
+                    const meta = c.metadata || {};
 
-                                // 🧠 Identify type
-                                const isDoc = !!meta.path || meta.source === "docusaurus";
-                                const isModule = meta.type === "module";
-                                const isModel = meta.type === "model";
+                    const isDoc = !!meta.path || meta.source === "docusaurus";
+                    const isModule = meta.type === "module";
+                    const isModel = meta.type === "model";
 
-                                // 🧹 Clean text for docs
-                                if (isDoc) {
-                                    processedText = processedText
-                                        .replace(/^Document Title:\s*/i, "")
-                                        .replace(/^Text:\s*/i, "")
-                                        .trim();
-                                }
+                    if (isDoc) {
+                        processedText = processedText
+                            .replace(/^Document Title:\s*/i, "")
+                            .replace(/^Text:\s*/i, "")
+                            .trim();
+                    }
 
-                                // 🧩 Extract "Full model metadata json" if present
-                                if (isModel) {
-                                    const match = processedText.match(/Full model metadata json:\s*\n?({[\s\S]+})/);
-                                    if (match) {
-                                        try {
-                                            // Format the JSON nicely
-                                            const pretty = JSON.stringify(JSON.parse(match[1]), null, 2);
-                                            // Replace the raw JSON text with a fenced code block
-                                            processedText = processedText.replace(
-                                                match[0],
-                                                `**Full model metadata json:**\n\n\`\`\`json\n${pretty}\n\`\`\``
-                                            );
-                                        } catch {
-                                            // Fallback: wrap raw text if JSON invalid
-                                            processedText = processedText.replace(
-                                                match[0],
-                                                `**Full model metadata json (raw):**\n\n\`\`\`\n${match[1]}\n\`\`\``
-                                            );
-                                        }
-                                    }
-                                }
+                    if (isModel) {
+                        const match = processedText.match(/Full model metadata json:\s*\n?({[\s\S]+})/);
+                        if (match) {
+                            try {
+                                const pretty = JSON.stringify(JSON.parse(match[1]), null, 2);
+                                processedText = processedText.replace(
+                                    match[0],
+                                    `**Full model metadata json:**\n\n\`\`\`json\n${pretty}\n\`\`\``
+                                );
+                            } catch {
+                                processedText = processedText.replace(
+                                    match[0],
+                                    `**Full model metadata json (raw):**\n\n\`\`\`\n${match[1]}\n\`\`\``
+                                );
+                            }
+                        }
+                    }
 
-                                // 🏷️ Header label
-                                let headerTitle = "Unknown";
-                                if (isModule) {
-                                    headerTitle = `Module: ${meta.moduleName} (${meta.modelCount} models)`;
-                                } else if (isModel) {
-                                    headerTitle = `Model: ${meta.modelName} (${meta.fieldCount} fields)`;
-                                } else if (isDoc) {
-                                    headerTitle = `Doc: ${meta.title || meta.doc_title || meta.path}`;
-                                }
+                    let headerTitle = "Unknown";
+                    if (isModule) {
+                        headerTitle = `Module: ${meta.moduleName} (${meta.modelCount} models)`;
+                    } else if (isModel) {
+                        headerTitle = `Model: ${meta.modelName} (${meta.fieldCount} fields)`;
+                    } else if (isDoc) {
+                        headerTitle = `Doc: ${meta.title || meta.doc_title || meta.path}`;
+                    }
 
-                                // 🌐 External link (docs only)
-                                const openDoc = (e: any) => {
-                                    e.stopPropagation();
-                                    if (isDoc) {
-                                        const cleanPath = (meta.path || "").replace(/\.md$/, "");
-                                        const url = `https://docs.solidxai.com/docs/${cleanPath}`;
-                                        window.open(url, "_blank");
-                                    }
-                                };
+                    const openDoc = (e: any) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (isDoc) {
+                            const cleanPath = (meta.path || "").replace(/\.md$/, "");
+                            const url = `https://docs.solidxai.com/docs/${cleanPath}`;
+                            window.open(url, "_blank");
+                        }
+                    };
 
-                                return (
-                                    <AccordionTab
-                                        key={c.id}
-                                        header={
-                                            <div className="flex justify-between items-center w-full">
-                                                <span className="font-medium">{headerTitle}</span>
-                                                {isDoc && (
-                                                    <Button
-                                                        icon="pi pi-external-link"
-                                                        rounded
-                                                        text
-                                                        outlined
-                                                        style={{ height: "1.5rem" }}
-                                                        onClick={openDoc}
-                                                    />
-                                                )}
-                                            </div>
-                                        }
-                                    >
-                                        <div key={c.id} className="shadow-1 bg-bluegray-50 p-3">
-                                            <MarkdownViewer data={processedText} />
-                                        </div>
-                                    </AccordionTab>
-                                );
-                            })}
-                        </Accordion>
-                    </div>
-                </TabPanel>
-                <TabPanel header="System Prompt">
-                    {value?.system_prompt && (
-                        <div>
-                            <MarkdownViewer data={value.system_prompt} />
-                        </div>
-                    )}
-                </TabPanel>
-                <TabPanel header="User Prompt">
-                    {value?.user_prompt && (
-                        <div>
-                            <MarkdownViewer data={value.user_prompt} />
-                        </div>
-                    )}
-                </TabPanel>
-                <TabPanel header="Token Usage">
-                    {value?.tokenUsage && (
-                        <div className={`p-3 `} style={{ width: '100%' }}>
-                            <ReactCodeMirror
-                                value={JSON.stringify(value.tokenUsage, null, 2)}
-                                style={{ fontSize: '10px' }}
-                                theme={oneDark}
-                                extensions={[javascript(), EditorView.lineWrapping]}
-                            />
-                        </div>
-                    )}
-                </TabPanel>
-            </TabView>
+                    return (
+                        <details key={c.id ?? index} className="solid-accordion-item rounded-md border border-border bg-card" open={index === 0}>
+                            <summary className="solid-accordion-header flex justify-between items-center gap-2 p-3 cursor-pointer">
+                                <span className="font-medium">{headerTitle}</span>
+                                {isDoc && (
+                                    <SolidButton variant="ghost" size="sm" onClick={openDoc} aria-label="Open documentation">
+                                        <SolidIcon name="si-external-link" aria-hidden />
+                                    </SolidButton>
+                                )}
+                            </summary>
+                            <div className="solid-accordion-content p-3 pt-0">
+                                <MarkdownViewer data={processedText} />
+                            </div>
+                        </details>
+                    );
+                })}
+            </div>
+        );
+    }, [value?.chunks]);
+
+    const tabs = [
+        { value: "chunks", label: "Chunks", content: chunkContent },
+        {
+            value: "system",
+            label: "System Prompt",
+            content: value?.system_prompt ? <MarkdownViewer data={value.system_prompt} /> : null,
+        },
+        {
+            value: "user",
+            label: "User Prompt",
+            content: value?.user_prompt ? <MarkdownViewer data={value.user_prompt} /> : null,
+        },
+        {
+            value: "usage",
+            label: "Token Usage",
+            content: value?.tokenUsage ? (
+                <div className="p-3 w-full">
+                    <ReactCodeMirror
+                        value={JSON.stringify(value.tokenUsage, null, 2)}
+                        style={{ fontSize: '10px' }}
+                        theme={oneDark}
+                        extensions={[javascript(), EditorView.lineWrapping]}
+                    />
+                </div>
+            ) : null,
+        },
+    ];
+
+    return (
+        <div className="mt-2 flex-column">
+            <SolidTabGroup tabs={tabs} value={activeTab} onValueChange={setActiveTab} />
         </div>
     );
 }
-

package/dist/components/core/form/fields/widgets/SolidIconEditWidget.js

@@ -9,9 +9,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { solidIcons } from "../../../../../helpers/solidIcons";
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import { InputText } from "primereact/inputtext";
+import { SolidButton } from "../../../../shad-cn-ui/SolidButton";
+import { SolidDialog } from "../../../../shad-cn-ui/SolidDialog";
+import { SolidInput } from "../../../../shad-cn-ui/SolidInput";
 import { useEffect, useState } from "react";
 export var SolidIconEditWidget = function (_a) {
     var _b, _c, _d;
@@ -71,19 +71,19 @@ export var SolidIconEditWidget = function (_a) {
                         _jsxs("div", { children: [_jsx("span", { className: "material-symbols-outlined", style: { fontSize: 48, cursor: 'pointer' }, onClick: function () { return setOpenIconDialog(true); }, children: selectedIcon }), _jsx("p", { className: "mb-0 text-center", children: selectedIcon
                                         .split('_')
                                         .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
-                                        .join(' ') })] })) : (_jsx(Button, { type: "button", size: "small", label: "Select Icon", onClick: function () { return setOpenIconDialog(true); }, outlined: true })) }), selectedIcon && (_jsx("div", { children: _jsx(Button, { type: "button", label: "Remove", className: "p-button-text p-button-danger ml-2", onClick: function () {
+                                        .join(' ') })] })) : (_jsx(SolidButton, { type: "button", size: "small", label: "Select Icon", onClick: function () { return setOpenIconDialog(true); }, variant: "outline" })) }), selectedIcon && (_jsx("div", { children: _jsx(SolidButton, { type: "button", label: "Remove", className: "p-button-text p-button-danger ml-2", onClick: function () {
                                 setSelectedIcon("");
                                 formik.setFieldValue(fieldName, "");
-                            } }) }))] }), _jsx(Dialog, { contentClassName: "p-0", className: "solid-icon-dialog", contentStyle: { borderRadius: 6 }, showHeader: false, header: false, closable: false, visible: openIconDialog, style: { width: '70vw', height: '70vh' }, breakpoints: { '1024px': '75vw', '991px': '90vw', '767px': '94w', '250px': '96vw' }, onHide: function () { return setOpenIconDialog(false); }, children: _jsx("div", { children: _jsxs("div", { className: "grid m-0 flex-column md:flex-row ", children: [_jsx("div", { className: "col-12 lg:col-3 p-0", children: _jsxs("div", { className: "flex flex-column justify-content-between p-3 lg:p-4", style: { height: '100%' }, children: [_jsxs("div", { className: "", children: [_jsx("p", { className: "font-medium", children: "Category" }), _jsx("div", { style: { marginBottom: "1rem", display: "flex", gap: "1rem", flexWrap: "wrap" }, className: "solid-icon-category-wrapper", children: tabs.map(function (tab) { return (_jsx(Button, { type: 'button', size: "small", onClick: function () {
+                            } }) }))] }), _jsx(SolidDialog, { contentClassName: "p-0", className: "solid-icon-dialog", contentStyle: { borderRadius: 6 }, showHeader: false, header: false, visible: openIconDialog, style: { width: '70vw', height: '70vh' }, breakpoints: { '1024px': '75vw', '991px': '90vw', '767px': '94w', '250px': '96vw' }, onHide: function () { return setOpenIconDialog(false); }, children: _jsx("div", { children: _jsxs("div", { className: "grid m-0 flex-column md:flex-row ", children: [_jsx("div", { className: "col-12 lg:col-3 p-0", children: _jsxs("div", { className: "flex flex-column justify-content-between p-3 lg:p-4", style: { height: '100%' }, children: [_jsxs("div", { className: "", children: [_jsx("p", { className: "font-medium", children: "Category" }), _jsx("div", { style: { marginBottom: "1rem", display: "flex", gap: "1rem", flexWrap: "wrap" }, className: "solid-icon-category-wrapper", children: tabs.map(function (tab) { return (_jsx(SolidButton, { type: 'button', size: "small", onClick: function () {
                                                             setSelectedCategory(tab);
                                                             setSearchIcon("");
-                                                        }, outlined: selectedCategory === tab ? false : true, style: {
+                                                        }, variant: selectedCategory === tab ? "primary" : "outline", style: {
                                                             padding: "8px 16px",
                                                             fontSize: 12
-                                                        }, className: "solid-icon-category", severity: "secondary", children: tab }, tab)); }) })] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "button", size: "small", label: "Select", onClick: function () { return setOpenIconDialog(false); } }), _jsx(Button, { type: "button", size: "small", outlined: true, label: "Cancel", onClick: function () { return setOpenIconDialog(false); } })] })] }) }), _jsx("div", { className: "col-6 p-0 flex lg:hidden", children: _jsxs("div", { className: "p-3 lg:p-4", children: [_jsx("p", { className: "font-medium", children: "Selected Icon" }), selectedIcon && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-content-center", children: _jsx("span", { className: "material-symbols-outlined", style: { fontSize: 100 }, children: selectedIcon }) }), _jsx("p", { className: 'mt-2 text-center', children: selectedIcon
+                                                        }, className: "solid-icon-category", severity: "secondary", children: tab }, tab)); }) })] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(SolidButton, { type: "button", size: "small", label: "Select", onClick: function () { return setOpenIconDialog(false); } }), _jsx(SolidButton, { type: "button", size: "small", variant: "outline", label: "Cancel", onClick: function () { return setOpenIconDialog(false); } })] })] }) }), _jsx("div", { className: "col-6 p-0 flex lg:hidden", children: _jsxs("div", { className: "p-3 lg:p-4", children: [_jsx("p", { className: "font-medium", children: "Selected Icon" }), selectedIcon && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-content-center", children: _jsx("span", { className: "material-symbols-outlined", style: { fontSize: 100 }, children: selectedIcon }) }), _jsx("p", { className: 'mt-2 text-center', children: selectedIcon
                                                         .split('_')
                                                         .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
-                                                        .join(' ') })] }))] }) }), _jsxs("div", { className: "col-12 lg:col-6 p-0", style: { borderLeft: '1px solid var(--primary-light-color)', borderRight: '1px solid var(--primary-light-color)' }, children: [_jsx("div", { className: "px-3 lg:px-4 pt-3 lg:pt-4", children: _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "Select Icon" }), _jsx(InputText, { type: "text", placeholder: "Search icons in \"".concat(selectedCategory, "\""), value: searchIcon, onChange: function (e) { return setSearchIcon(e.target.value); }, className: "w-full" })] }) }), _jsx("div", { style: { height: 'calc(70vh - 125px)', overflowY: 'auto', overflowX: 'hidden' }, className: "px-4 pb-3 mt-4", children: _jsx("div", { className: "grid", children: filteredIcons.length > 0 ? (filteredIcons.map(function (_a) {
+                                                        .join(' ') })] }))] }) }), _jsxs("div", { className: "col-12 lg:col-6 p-0", style: { borderLeft: '1px solid var(--primary-light-color)', borderRight: '1px solid var(--primary-light-color)' }, children: [_jsx("div", { className: "px-3 lg:px-4 pt-3 lg:pt-4", children: _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "Select Icon" }), _jsx(SolidInput, { type: "text", placeholder: "Search icons in \"".concat(selectedCategory, "\""), value: searchIcon, onChange: function (e) { return setSearchIcon(e.target.value); }, className: "w-full" })] }) }), _jsx("div", { style: { height: 'calc(70vh - 125px)', overflowY: 'auto', overflowX: 'hidden' }, className: "px-4 pb-3 mt-4", children: _jsx("div", { className: "grid", children: filteredIcons.length > 0 ? (filteredIcons.map(function (_a) {
                                                 var icon = _a.icon, category = _a.category;
                                                 return (_jsx("div", { className: "col-3", children: _jsxs("div", { className: "w-full flex flex-column align-items-center justify-content-center gap-3", children: [_jsx("span", { className: "material-symbols-outlined", style: {
                                                                     fontSize: 32,

package/dist/components/core/form/fields/widgets/SolidIconEditWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidIconEditWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidIconEditWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { solidIcons } from \"../../../../../helpers/solidIcons\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport { Button } from \"primereact/button\";\nimport { Dialog } from \"primereact/dialog\";\nimport { Dropdown } from \"primereact/dropdown\";\nimport { InputText } from \"primereact/inputtext\";\nimport { useEffect, useState } from \"react\";\n\nexport const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n    console.log(\"SolidIconWidget\", \"formik : \", formik, \"fieldContext : \", fieldContext);\n\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const fieldName = fieldLayoutInfo?.attrs?.name;\n\n    const [openIconDialog, setOpenIconDialog] = useState(false);\n    const [selectedCategory, setSelectedCategory] = useState(\"All\");\n    const [searchIcon, setSearchIcon] = useState(\"\");\n    const [selectedIcon, setSelectedIcon] = useState(formik.values?.[fieldName] || \"\");\n\n    // const [iconVariant, setIconVariant] = useState(formik.values.iconVariant || \"outlined\");\n\n    // const iconVariants = [\n    //     { label: \"Outlined\", value: \"outlined\" },\n    //     { label: \"Rounded\", value: \"rounded\" },\n    //     { label: \"Sharp\", value: \"sharp\" }\n    // ];\n\n    const allIcons = solidIcons.flatMap(({ category, icons }) =>\n        icons.map((icon) => ({ icon, category }))\n    );\n\n    const filteredIcons = (selectedCategory === \"All\" ? allIcons :\n        allIcons.filter((i) => i.category === selectedCategory)\n    ).filter(({ icon }) => icon.toLowerCase().includes(searchIcon.toLowerCase()));\n\n    const tabs = [\"All\", ...solidIcons.map((c) => c.category)];\n\n    useEffect(() => {\n        if (openIconDialog) {\n            setSelectedIcon(formik?.values?.[fieldName] ?? \"\");\n            // setIconVariant(formik.values.iconVariant ?? \"outlined\");\n        }\n    }, [openIconDialog]);\n\n    const handleSelectIcon = (icon: string) => {\n        setSelectedIcon(icon);\n        // setIconVariant(variant)\n        formik.setFieldValue(fieldName, icon);\n        // formik.setFieldValue(\"iconVariant\", variant);\n    };\n\n    const handleRemoveIcon = () => {\n        setSelectedIcon(\"\");\n        // setIconVariant(null)\n        formik.setFieldTouched(fieldName, true);\n        formik.setFieldValue(fieldName, \"\", true);\n        // formik.setFieldValue(\"iconVariant\", null);\n    };\n\n    return (\n        <div>\n            <label className=\"form-field-label\">{fieldLabel}</label>\n            <div className=\"flex align-items-end gap-3 mt-2\">\n                <div style={{ display: 'inline-block' }}>\n                    {selectedIcon ? (\n                        // <Button\n                        //     type=\"button\"\n                        //     icon={<span className={`material-symbols-outlined`}>{selectedIcon}</span>}\n                        //     onClick={() => setOpenIconDialog(true)}\n                        //     outlined\n                        // />\n                        <div>\n                            <span className={`material-symbols-outlined`} style={{ fontSize: 48, cursor: 'pointer' }} onClick={() => setOpenIconDialog(true)}>\n                                {selectedIcon}\n                            </span>\n                            <p className=\"mb-0 text-center\">\n                                {selectedIcon\n                                    .split('_')\n                                    .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))\n                                    .join(' ')\n                                }\n                            </p>\n                        </div>\n                    ) : (\n                        <Button\n                            type=\"button\"\n                            size=\"small\"\n                            label=\"Select Icon\"\n                            onClick={() => setOpenIconDialog(true)}\n                            outlined\n                        />\n                    )}\n                </div>\n                {selectedIcon && (\n                    <div>\n                        <Button\n                            type=\"button\"\n                            label=\"Remove\"\n                            className=\"p-button-text p-button-danger ml-2\"\n                            onClick={() => {\n                                setSelectedIcon(\"\");\n                                formik.setFieldValue(fieldName, \"\");\n                            }}\n                        />\n                    </div>\n                )}\n            </div>\n            <Dialog contentClassName=\"p-0\" className=\"solid-icon-dialog\" contentStyle={{ borderRadius: 6 }} showHeader={false} header={false} closable={false} visible={openIconDialog} style={{ width: '70vw', height: '70vh' }} breakpoints={{ '1024px': '75vw','991px': '90vw','767px':'94w', '250px': '96vw'}} onHide={() => setOpenIconDialog(false)}>\n                <div>\n                    <div className=\"grid m-0 flex-column md:flex-row \">\n                        <div className=\"col-12 lg:col-3 p-0\">\n                            <div className=\"flex flex-column justify-content-between p-3 lg:p-4\" style={{ height: '100%' }}>\n                                <div className=\"\">\n                                    {/* <p className=\"font-medium\">Variant</p>\n                                    <Dropdown\n                                        value={iconVariant}\n                                        onChange={(e) => setIconVariant(e.value)}\n                                        options={iconVariants}\n                                        optionLabel=\"label\"\n                                        className=\"w-full mb-3\"\n                                        checkmark\n                                        highlightOnSelect={false}\n                                        placeholder=\"Select Variant\"\n                                    /> */}\n\n                                    <p className=\"font-medium\">Category</p>\n                                    <div style={{ marginBottom: \"1rem\", display: \"flex\", gap: \"1rem\", flexWrap: \"wrap\" }} className=\"solid-icon-category-wrapper\">\n                                        {tabs.map((tab) => (\n                                            <Button\n                                                type='button'\n                                                key={tab}\n                                                size=\"small\"\n                                                onClick={() => {\n                                                    setSelectedCategory(tab);\n                                                    setSearchIcon(\"\");\n                                                }}\n                                                outlined={selectedCategory === tab ? false : true}\n                                                style={{\n                                                    padding: \"8px 16px\",\n                                                    fontSize: 12\n                                                }}\n                                                className=\"solid-icon-category\"\n                                                severity=\"secondary\"\n                                            >\n                                                {tab}\n                                            </Button>\n                                        ))}\n                                    </div>\n                                </div>\n                                <div className=\"flex gap-3\">\n                                    <Button type=\"button\" size=\"small\" label=\"Select\" onClick={() => setOpenIconDialog(false)} />\n                                    <Button type=\"button\" size=\"small\" outlined label=\"Cancel\" onClick={() => setOpenIconDialog(false)} />\n                                </div>\n                            </div>\n                        </div>\n\n                        <div className=\"col-6 p-0 flex lg:hidden\">\n                            <div className=\"p-3 lg:p-4\">\n                                <p className=\"font-medium\">Selected Icon</p>\n                                {selectedIcon && (\n                                    <>\n                                        <div className=\"flex justify-content-center\">\n                                            <span className={`material-symbols-outlined`} style={{ fontSize: 100 }}>\n                                                {selectedIcon}\n                                            </span>\n                                        </div>\n                                        <p className='mt-2 text-center'>\n                                            {selectedIcon\n                                                .split('_')\n                                                .map((word: any) => word.charAt(0).toUpperCase() + word.slice(1))\n                                                .join(' ')\n                                            }\n                                        </p>\n                                        {/* <code className=\"mt-2 d-block\">\n                                            {`<span class=\"material-symbols-${iconVariant || \"outlined\"}\">${selectedIcon}</span>`}\n                                        </code> */}\n                                    </>\n                                )}\n                            </div>\n\n                        </div>\n                        <div className=\"col-12 lg:col-6 p-0\" style={{ borderLeft: '1px solid var(--primary-light-color)', borderRight: '1px solid var(--primary-light-color)' }}>\n                            <div className=\"px-3 lg:px-4 pt-3 lg:pt-4\">\n                                <div>\n                                    <p className=\"font-medium\">Select Icon</p>\n                                    <InputText\n                                        type=\"text\"\n                                        placeholder={`Search icons in \"${selectedCategory}\"`}\n                                        value={searchIcon}\n                                        onChange={(e) => setSearchIcon(e.target.value)}\n                                        className=\"w-full\"\n                                    />\n                                </div>\n                            </div>\n                            <div style={{ height: 'calc(70vh - 125px)', overflowY: 'auto', overflowX: 'hidden' }} className=\"px-4 pb-3 mt-4\">\n                                <div className=\"grid\">\n                                    {filteredIcons.length > 0 ? (\n                                        filteredIcons.map(({ icon, category }) => (\n                                            <div className=\"col-3\" key={icon}>\n                                                <div className=\"w-full flex flex-column align-items-center justify-content-center gap-3\">\n                                                    <span\n                                                        className={`material-symbols-outlined`}\n                                                        style={{\n                                                            fontSize: 32,\n                                                            cursor: \"pointer\",\n                                                            padding: \"8px\",\n                                                            border: selectedIcon === icon ? \"2px solid var(--primary-color)\" : \"2px solid transparent\",\n                                                            borderRadius: \"6px\",\n                                                        }}\n                                                        onClick={() => handleSelectIcon(icon)}\n                                                        title={`${icon} (${category})`}\n                                                    >\n                                                        {icon}\n                                                    </span>\n                                                    <p className='mb-0 mt-1 text-center'>\n                                                        {icon\n                                                            .split('_')\n                                                            .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n                                                            .join(' ')\n                                                        }\n                                                    </p>\n                                                </div>\n                                            </div>\n                                        ))\n                                    ) : (\n                                        <p className=\"mt\">No icons found.</p>\n                                    )}\n                                </div>\n                            </div>\n                        </div>\n\n                        <div className=\"col-3 p-0 hidden lg:flex\">\n                            <div className=\"p-3 lg:p-4\">\n                                <p className=\"font-medium\">Selected Icon</p>\n                                {selectedIcon && (\n                                    <>\n                                        <div className=\"flex justify-content-center\">\n                                            <span className={`material-symbols-outlined`} style={{ fontSize: 100 }}>\n                                                {selectedIcon}\n                                            </span>\n                                        </div>\n                                        <p className='mt-2 text-center'>\n                                            {selectedIcon\n                                                .split('_')\n                                                .map((word: any) => word.charAt(0).toUpperCase() + word.slice(1))\n                                                .join(' ')\n                                            }\n                                        </p>\n                                        {/* <code className=\"mt-2 d-block\">\n                                            {`<span class=\"material-symbols-${iconVariant || \"outlined\"}\">${selectedIcon}</span>`}\n                                        </code> */}\n                                    </>\n                                )}\n                            </div>\n\n                        </div>\n                    </div>\n                </div>\n            </Dialog>\n        </div>\n    );\n};"]}
+{"version":3,"file":"SolidIconEditWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidIconEditWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { solidIcons } from \"../../../../../helpers/solidIcons\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport { SolidButton } from \"../../../../shad-cn-ui/SolidButton\";\nimport { SolidDialog } from \"../../../../shad-cn-ui/SolidDialog\";\nimport { SolidSelect } from \"../../../../shad-cn-ui/SolidSelect\";\nimport { SolidInput } from \"../../../../shad-cn-ui/SolidInput\";\nimport { useEffect, useState } from \"react\";\n\nexport const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n    console.log(\"SolidIconWidget\", \"formik : \", formik, \"fieldContext : \", fieldContext);\n\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const fieldName = fieldLayoutInfo?.attrs?.name;\n\n    const [openIconDialog, setOpenIconDialog] = useState(false);\n    const [selectedCategory, setSelectedCategory] = useState(\"All\");\n    const [searchIcon, setSearchIcon] = useState(\"\");\n    const [selectedIcon, setSelectedIcon] = useState(formik.values?.[fieldName] || \"\");\n\n    // const [iconVariant, setIconVariant] = useState(formik.values.iconVariant || \"outlined\");\n\n    // const iconVariants = [\n    //     { label: \"Outlined\", value: \"outlined\" },\n    //     { label: \"Rounded\", value: \"rounded\" },\n    //     { label: \"Sharp\", value: \"sharp\" }\n    // ];\n\n    const allIcons = solidIcons.flatMap(({ category, icons }) =>\n        icons.map((icon) => ({ icon, category }))\n    );\n\n    const filteredIcons = (selectedCategory === \"All\" ? allIcons :\n        allIcons.filter((i) => i.category === selectedCategory)\n    ).filter(({ icon }) => icon.toLowerCase().includes(searchIcon.toLowerCase()));\n\n    const tabs = [\"All\", ...solidIcons.map((c) => c.category)];\n\n    useEffect(() => {\n        if (openIconDialog) {\n            setSelectedIcon(formik?.values?.[fieldName] ?? \"\");\n            // setIconVariant(formik.values.iconVariant ?? \"outlined\");\n        }\n    }, [openIconDialog]);\n\n    const handleSelectIcon = (icon: string) => {\n        setSelectedIcon(icon);\n        // setIconVariant(variant)\n        formik.setFieldValue(fieldName, icon);\n        // formik.setFieldValue(\"iconVariant\", variant);\n    };\n\n    const handleRemoveIcon = () => {\n        setSelectedIcon(\"\");\n        // setIconVariant(null)\n        formik.setFieldTouched(fieldName, true);\n        formik.setFieldValue(fieldName, \"\", true);\n        // formik.setFieldValue(\"iconVariant\", null);\n    };\n\n    return (\n        <div>\n            <label className=\"form-field-label\">{fieldLabel}</label>\n            <div className=\"flex align-items-end gap-3 mt-2\">\n                <div style={{ display: 'inline-block' }}>\n                    {selectedIcon ? (\n                        // <Button\n                        //     type=\"button\"\n                        //     icon={<span className={`material-symbols-outlined`}>{selectedIcon}</span>}\n                        //     onClick={() => setOpenIconDialog(true)}\n                        //     outlined\n                        // />\n                        <div>\n                            <span className={`material-symbols-outlined`} style={{ fontSize: 48, cursor: 'pointer' }} onClick={() => setOpenIconDialog(true)}>\n                                {selectedIcon}\n                            </span>\n                            <p className=\"mb-0 text-center\">\n                                {selectedIcon\n                                    .split('_')\n                                    .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))\n                                    .join(' ')\n                                }\n                            </p>\n                        </div>\n                    ) : (\n                        <SolidButton\n                            type=\"button\"\n                            size=\"small\"\n                            label=\"Select Icon\"\n                            onClick={() => setOpenIconDialog(true)}\n                            variant=\"outline\"\n                        />\n                    )}\n                </div>\n                {selectedIcon && (\n                    <div>\n                        <SolidButton\n                            type=\"button\"\n                            label=\"Remove\"\n                            className=\"p-button-text p-button-danger ml-2\"\n                            onClick={() => {\n                                setSelectedIcon(\"\");\n                                formik.setFieldValue(fieldName, \"\");\n                            }}\n                        />\n                    </div>\n                )}\n            </div>\n            <SolidDialog contentClassName=\"p-0\" className=\"solid-icon-dialog\" contentStyle={{ borderRadius: 6 }} showHeader={false} header={false} visible={openIconDialog} style={{ width: '70vw', height: '70vh' }} breakpoints={{ '1024px': '75vw','991px': '90vw','767px':'94w', '250px': '96vw'}} onHide={() => setOpenIconDialog(false)}>\n                <div>\n                    <div className=\"grid m-0 flex-column md:flex-row \">\n                        <div className=\"col-12 lg:col-3 p-0\">\n                            <div className=\"flex flex-column justify-content-between p-3 lg:p-4\" style={{ height: '100%' }}>\n                                <div className=\"\">\n                                    {/* <p className=\"font-medium\">Variant</p>\n                                    <Dropdown\n                                        value={iconVariant}\n                                        onChange={(e) => setIconVariant(e.value)}\n                                        options={iconVariants}\n                                        optionLabel=\"label\"\n                                        className=\"w-full mb-3\"\n                                        checkmark\n                                        highlightOnSelect={false}\n                                        placeholder=\"Select Variant\"\n                                    /> */}\n\n                                    <p className=\"font-medium\">Category</p>\n                                    <div style={{ marginBottom: \"1rem\", display: \"flex\", gap: \"1rem\", flexWrap: \"wrap\" }} className=\"solid-icon-category-wrapper\">\n                                        {tabs.map((tab) => (\n                                            <SolidButton\n                                                type='button'\n                                                key={tab}\n                                                size=\"small\"\n                                                onClick={() => {\n                                                    setSelectedCategory(tab);\n                                                    setSearchIcon(\"\");\n                                                }}\n                                                variant={selectedCategory === tab ? \"primary\" : \"outline\"}\n                                                style={{\n                                                    padding: \"8px 16px\",\n                                                    fontSize: 12\n                                                }}\n                                                className=\"solid-icon-category\"\n                                                severity=\"secondary\"\n                                            >\n                                                {tab}\n                                            </SolidButton>\n                                        ))}\n                                    </div>\n                                </div>\n                                <div className=\"flex gap-3\">\n                                    <SolidButton type=\"button\" size=\"small\" label=\"Select\" onClick={() => setOpenIconDialog(false)} />\n                                    <SolidButton type=\"button\" size=\"small\" variant=\"outline\" label=\"Cancel\" onClick={() => setOpenIconDialog(false)} />\n                                </div>\n                            </div>\n                        </div>\n\n                        <div className=\"col-6 p-0 flex lg:hidden\">\n                            <div className=\"p-3 lg:p-4\">\n                                <p className=\"font-medium\">Selected Icon</p>\n                                {selectedIcon && (\n                                    <>\n                                        <div className=\"flex justify-content-center\">\n                                            <span className={`material-symbols-outlined`} style={{ fontSize: 100 }}>\n                                                {selectedIcon}\n                                            </span>\n                                        </div>\n                                        <p className='mt-2 text-center'>\n                                            {selectedIcon\n                                                .split('_')\n                                                .map((word: any) => word.charAt(0).toUpperCase() + word.slice(1))\n                                                .join(' ')\n                                            }\n                                        </p>\n                                        {/* <code className=\"mt-2 d-block\">\n                                            {`<span class=\"material-symbols-${iconVariant || \"outlined\"}\">${selectedIcon}</span>`}\n                                        </code> */}\n                                    </>\n                                )}\n                            </div>\n\n                        </div>\n                        <div className=\"col-12 lg:col-6 p-0\" style={{ borderLeft: '1px solid var(--primary-light-color)', borderRight: '1px solid var(--primary-light-color)' }}>\n                            <div className=\"px-3 lg:px-4 pt-3 lg:pt-4\">\n                                <div>\n                                    <p className=\"font-medium\">Select Icon</p>\n                                    <SolidInput\n                                        type=\"text\"\n                                        placeholder={`Search icons in \"${selectedCategory}\"`}\n                                        value={searchIcon}\n                                        onChange={(e) => setSearchIcon(e.target.value)}\n                                        className=\"w-full\"\n                                    />\n                                </div>\n                            </div>\n                            <div style={{ height: 'calc(70vh - 125px)', overflowY: 'auto', overflowX: 'hidden' }} className=\"px-4 pb-3 mt-4\">\n                                <div className=\"grid\">\n                                    {filteredIcons.length > 0 ? (\n                                        filteredIcons.map(({ icon, category }) => (\n                                            <div className=\"col-3\" key={icon}>\n                                                <div className=\"w-full flex flex-column align-items-center justify-content-center gap-3\">\n                                                    <span\n                                                        className={`material-symbols-outlined`}\n                                                        style={{\n                                                            fontSize: 32,\n                                                            cursor: \"pointer\",\n                                                            padding: \"8px\",\n                                                            border: selectedIcon === icon ? \"2px solid var(--primary-color)\" : \"2px solid transparent\",\n                                                            borderRadius: \"6px\",\n                                                        }}\n                                                        onClick={() => handleSelectIcon(icon)}\n                                                        title={`${icon} (${category})`}\n                                                    >\n                                                        {icon}\n                                                    </span>\n                                                    <p className='mb-0 mt-1 text-center'>\n                                                        {icon\n                                                            .split('_')\n                                                            .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n                                                            .join(' ')\n                                                        }\n                                                    </p>\n                                                </div>\n                                            </div>\n                                        ))\n                                    ) : (\n                                        <p className=\"mt\">No icons found.</p>\n                                    )}\n                                </div>\n                            </div>\n                        </div>\n\n                        <div className=\"col-3 p-0 hidden lg:flex\">\n                            <div className=\"p-3 lg:p-4\">\n                                <p className=\"font-medium\">Selected Icon</p>\n                                {selectedIcon && (\n                                    <>\n                                        <div className=\"flex justify-content-center\">\n                                            <span className={`material-symbols-outlined`} style={{ fontSize: 100 }}>\n                                                {selectedIcon}\n                                            </span>\n                                        </div>\n                                        <p className='mt-2 text-center'>\n                                            {selectedIcon\n                                                .split('_')\n                                                .map((word: any) => word.charAt(0).toUpperCase() + word.slice(1))\n                                                .join(' ')\n                                            }\n                                        </p>\n                                        {/* <code className=\"mt-2 d-block\">\n                                            {`<span class=\"material-symbols-${iconVariant || \"outlined\"}\">${selectedIcon}</span>`}\n                                        </code> */}\n                                    </>\n                                )}\n                            </div>\n\n                        </div>\n                    </div>\n                </div>\n            </SolidDialog>\n        </div>\n    );\n};\n"]}

package/dist/components/core/form/fields/widgets/SolidIconEditWidget.tsx

@@ -1,10 +1,10 @@
 
 import { solidIcons } from "../../../../../helpers/solidIcons";
 import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import { Dropdown } from "primereact/dropdown";
-import { InputText } from "primereact/inputtext";
+import { SolidButton } from "../../../../shad-cn-ui/SolidButton";
+import { SolidDialog } from "../../../../shad-cn-ui/SolidDialog";
+import { SolidSelect } from "../../../../shad-cn-ui/SolidSelect";
+import { SolidInput } from "../../../../shad-cn-ui/SolidInput";
 import { useEffect, useState } from "react";
 
 export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
@@ -85,18 +85,18 @@ export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidg
                             </p>
                         </div>
                     ) : (
-                        <Button
+                        <SolidButton
                             type="button"
                             size="small"
                             label="Select Icon"
                             onClick={() => setOpenIconDialog(true)}
-                            outlined
+                            variant="outline"
                         />
                     )}
                 </div>
                 {selectedIcon && (
                     <div>
-                        <Button
+                        <SolidButton
                             type="button"
                             label="Remove"
                             className="p-button-text p-button-danger ml-2"
@@ -108,7 +108,7 @@ export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidg
                     </div>
                 )}
             </div>
-            <Dialog contentClassName="p-0" className="solid-icon-dialog" contentStyle={{ borderRadius: 6 }} showHeader={false} header={false} closable={false} visible={openIconDialog} style={{ width: '70vw', height: '70vh' }} breakpoints={{ '1024px': '75vw','991px': '90vw','767px':'94w', '250px': '96vw'}} onHide={() => setOpenIconDialog(false)}>
+            <SolidDialog contentClassName="p-0" className="solid-icon-dialog" contentStyle={{ borderRadius: 6 }} showHeader={false} header={false} visible={openIconDialog} style={{ width: '70vw', height: '70vh' }} breakpoints={{ '1024px': '75vw','991px': '90vw','767px':'94w', '250px': '96vw'}} onHide={() => setOpenIconDialog(false)}>
                 <div>
                     <div className="grid m-0 flex-column md:flex-row ">
                         <div className="col-12 lg:col-3 p-0">
@@ -129,7 +129,7 @@ export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidg
                                     <p className="font-medium">Category</p>
                                     <div style={{ marginBottom: "1rem", display: "flex", gap: "1rem", flexWrap: "wrap" }} className="solid-icon-category-wrapper">
                                         {tabs.map((tab) => (
-                                            <Button
+                                            <SolidButton
                                                 type='button'
                                                 key={tab}
                                                 size="small"
@@ -137,7 +137,7 @@ export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidg
                                                     setSelectedCategory(tab);
                                                     setSearchIcon("");
                                                 }}
-                                                outlined={selectedCategory === tab ? false : true}
+                                                variant={selectedCategory === tab ? "primary" : "outline"}
                                                 style={{
                                                     padding: "8px 16px",
                                                     fontSize: 12
@@ -146,13 +146,13 @@ export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidg
                                                 severity="secondary"
                                             >
                                                 {tab}
-                                            </Button>
+                                            </SolidButton>
                                         ))}
                                     </div>
                                 </div>
                                 <div className="flex gap-3">
-                                    <Button type="button" size="small" label="Select" onClick={() => setOpenIconDialog(false)} />
-                                    <Button type="button" size="small" outlined label="Cancel" onClick={() => setOpenIconDialog(false)} />
+                                    <SolidButton type="button" size="small" label="Select" onClick={() => setOpenIconDialog(false)} />
+                                    <SolidButton type="button" size="small" variant="outline" label="Cancel" onClick={() => setOpenIconDialog(false)} />
                                 </div>
                             </div>
                         </div>
@@ -186,7 +186,7 @@ export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidg
                             <div className="px-3 lg:px-4 pt-3 lg:pt-4">
                                 <div>
                                     <p className="font-medium">Select Icon</p>
-                                    <InputText
+                                    <SolidInput
                                         type="text"
                                         placeholder={`Search icons in "${selectedCategory}"`}
                                         value={searchIcon}
@@ -259,7 +259,7 @@ export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidg
                         </div>
                     </div>
                 </div>
-            </Dialog>
+            </SolidDialog>
         </div>
     );
-};
+};

package/dist/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidRelationFieldAvatarFormWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAG5E,eAAO,MAAM,kCAAkC,6BAA8B,yBAAyB,4CAuCrG,CAAA"}
+{"version":3,"file":"SolidRelationFieldAvatarFormWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAG5E,eAAO,MAAM,kCAAkC,6BAA8B,yBAAyB,4CAuCrG,CAAA"}

package/dist/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidRelationFieldAvatarFormWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAO5C,OAAO,EAAE,YAAY,EAAE,MAAM,oDAAoD,CAAC;AAElF,MAAM,CAAC,IAAM,kCAAkC,GAAG,UAAC,EAAmD;;QAAjD,MAAM,YAAA,EAAE,YAAY,kBAAA;IAErE,IAAM,aAAa,GAAG,YAAY,CAAC,aAAa,CAAC;IACjD,IAAM,eAAe,GAAG,YAAY,CAAC,KAAK,CAAC;IAC3C,IAAM,UAAU,GAAG,MAAA,eAAe,CAAC,KAAK,CAAC,KAAK,mCAAI,aAAa,CAAC,WAAW,CAAC;IAC5E,IAAM,gBAAgB,GAAG,MAAA,MAAA,aAAa,CAAC,aAAa,0CAAE,YAAY,0CAAE,IAAI,CAAC;IACnE,IAAA,KAA8B,QAAQ,CAAM,EAAE,CAAC,EAA9C,UAAU,QAAA,EAAE,aAAa,QAAqB,CAAC;IACtD,SAAS,CAAC;;QACN,IAAI,QAAQ,GAAG,MAAA,YAAY,CAAC,IAAI,0CAAG,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAC/D,IAAI,KAAK,GAAU,EAAE,CAAC;QACtB,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YACzB,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,UAAC,IAAS,YAAK,OAAA,CAAC,EAAE,KAAK,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAG,gBAAgB,CAAC,mCAAI,EAAE,EAAE,CAAC,CAAA,EAAA,CAAC,CAAC;SACpF;aAAM,IAAI,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YACjD,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,MAAA,QAAQ,CAAC,gBAAgB,CAAC,mCAAI,EAAE,EAAE,CAAC,CAAC;SACzD;QACD,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAEtB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBAClB,IAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,KAAK,EAAP,CAAO,CAAC,CAAC;gBAC5C,aAAa,CAAC,IAAI,CAAC,CAAC;aACvB;SACJ;QACD,qEAAqE;QACrE,oCAAoC;QACpC,IAAI;IACR,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAInB,OAAO,CACH,eAAK,SAAS,EAAC,kBAAkB,aAC7B,YAAG,SAAS,EAAC,kCAAkC,YAAE,UAAU,GAAK,EAChE,cAAK,SAAS,EAAC,2BAA2B,YACrC,UAAU,CAAC,GAAG,CAAC,UAAC,CAAM,IAAK,OAAA,CACxB,KAAC,YAAY,IAAC,KAAK,EAAE,CAAC,GAAI,CAC7B,EAF2B,CAE3B,CAAC,GACA,IACJ,CACT,CAAC;AACN,CAAC,CAAA","sourcesContent":["\nimport { useEffect, useState } from \"react\";\nimport { Message } from \"primereact/message\";\nimport { classNames } from \"primereact/utils\";\nimport { SelectButton } from \"primereact/selectbutton\";\nimport { AutoComplete, AutoCompleteCompleteEvent } from \"primereact/autocomplete\";\nimport { RadioButton } from \"primereact/radiobutton\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport { AvatarWidget } from \"../../../../../components/core/common/AvatarWidget\";\n\nexport const SolidRelationFieldAvatarFormWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;\n    const [fieldValue, setFieldValue] = useState<any>([]);\n    useEffect(() => {        \n        let rawValue = fieldContext.data?.[fieldLayoutInfo.attrs.name];\n        let value: any[] = [];\n        if (Array.isArray(rawValue)) {\n            value = rawValue.map((item: any) => ({ label: item?.[userKeyFieldName] ?? '' }));\n        } else if (rawValue && typeof rawValue === \"object\") {\n            value = [{ label: rawValue[userKeyFieldName] ?? '' }];\n        }\n        if (Array.isArray(value)) {\n\n            if (value.length > 0) {\n                const data = value.map((v: any) => v.label);\n                setFieldValue(data);\n            }\n        }\n        // if (value && !Array.isArray(value) && typeof value === \"object\") {\n        //     setFieldValue([value.label]);\n        // }\n    }, [fieldContext]);\n\n\n\n    return (\n        <div className=\"mt-2 flex-column\">\n            <p className=\"m-0 form-field-label font-medium\">{fieldLabel}</p>\n            <div className=\"flex flex-wrap gap-2 mt-2\">\n                {fieldValue.map((v: any) => (\n                    <AvatarWidget value={v} />\n                ))}\n            </div>\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"SolidRelationFieldAvatarFormWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,oDAAoD,CAAC;AAElF,MAAM,CAAC,IAAM,kCAAkC,GAAG,UAAC,EAAmD;;QAAjD,MAAM,YAAA,EAAE,YAAY,kBAAA;IAErE,IAAM,aAAa,GAAG,YAAY,CAAC,aAAa,CAAC;IACjD,IAAM,eAAe,GAAG,YAAY,CAAC,KAAK,CAAC;IAC3C,IAAM,UAAU,GAAG,MAAA,eAAe,CAAC,KAAK,CAAC,KAAK,mCAAI,aAAa,CAAC,WAAW,CAAC;IAC5E,IAAM,gBAAgB,GAAG,MAAA,MAAA,aAAa,CAAC,aAAa,0CAAE,YAAY,0CAAE,IAAI,CAAC;IACnE,IAAA,KAA8B,QAAQ,CAAM,EAAE,CAAC,EAA9C,UAAU,QAAA,EAAE,aAAa,QAAqB,CAAC;IACtD,SAAS,CAAC;;QACN,IAAI,QAAQ,GAAG,MAAA,YAAY,CAAC,IAAI,0CAAG,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAC/D,IAAI,KAAK,GAAU,EAAE,CAAC;QACtB,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YACzB,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,UAAC,IAAS,YAAK,OAAA,CAAC,EAAE,KAAK,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAG,gBAAgB,CAAC,mCAAI,EAAE,EAAE,CAAC,CAAA,EAAA,CAAC,CAAC;SACpF;aAAM,IAAI,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YACjD,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,MAAA,QAAQ,CAAC,gBAAgB,CAAC,mCAAI,EAAE,EAAE,CAAC,CAAC;SACzD;QACD,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAEtB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBAClB,IAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,KAAK,EAAP,CAAO,CAAC,CAAC;gBAC5C,aAAa,CAAC,IAAI,CAAC,CAAC;aACvB;SACJ;QACD,qEAAqE;QACrE,oCAAoC;QACpC,IAAI;IACR,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAInB,OAAO,CACH,eAAK,SAAS,EAAC,kBAAkB,aAC7B,YAAG,SAAS,EAAC,kCAAkC,YAAE,UAAU,GAAK,EAChE,cAAK,SAAS,EAAC,2BAA2B,YACrC,UAAU,CAAC,GAAG,CAAC,UAAC,CAAM,IAAK,OAAA,CACxB,KAAC,YAAY,IAAC,KAAK,EAAE,CAAC,GAAI,CAC7B,EAF2B,CAE3B,CAAC,GACA,IACJ,CACT,CAAC;AACN,CAAC,CAAA","sourcesContent":["\nimport { useEffect, useState } from \"react\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport { AvatarWidget } from \"../../../../../components/core/common/AvatarWidget\";\n\nexport const SolidRelationFieldAvatarFormWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;\n    const [fieldValue, setFieldValue] = useState<any>([]);\n    useEffect(() => {        \n        let rawValue = fieldContext.data?.[fieldLayoutInfo.attrs.name];\n        let value: any[] = [];\n        if (Array.isArray(rawValue)) {\n            value = rawValue.map((item: any) => ({ label: item?.[userKeyFieldName] ?? '' }));\n        } else if (rawValue && typeof rawValue === \"object\") {\n            value = [{ label: rawValue[userKeyFieldName] ?? '' }];\n        }\n        if (Array.isArray(value)) {\n\n            if (value.length > 0) {\n                const data = value.map((v: any) => v.label);\n                setFieldValue(data);\n            }\n        }\n        // if (value && !Array.isArray(value) && typeof value === \"object\") {\n        //     setFieldValue([value.label]);\n        // }\n    }, [fieldContext]);\n\n\n\n    return (\n        <div className=\"mt-2 flex-column\">\n            <p className=\"m-0 form-field-label font-medium\">{fieldLabel}</p>\n            <div className=\"flex flex-wrap gap-2 mt-2\">\n                {fieldValue.map((v: any) => (\n                    <AvatarWidget value={v} />\n                ))}\n            </div>\n        </div>\n    );\n}\n"]}

package/dist/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget.tsx

@@ -1,10 +1,5 @@
 
 import { useEffect, useState } from "react";
-import { Message } from "primereact/message";
-import { classNames } from "primereact/utils";
-import { SelectButton } from "primereact/selectbutton";
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import { RadioButton } from "primereact/radiobutton";
 import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
 import { AvatarWidget } from "../../../../../components/core/common/AvatarWidget";
 

package/dist/components/core/form/fields/widgets/SolidS3FileViewerWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidS3FileViewerWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidS3FileViewerWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAK5E,OAAO,0BAA0B,CAAC;AAIlC;;GAEG;AACH,eAAO,MAAM,uBAAuB,6BAA8B,yBAAyB,4CAsN1F,CAAC"}
+{"version":3,"file":"SolidS3FileViewerWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidS3FileViewerWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAW5E,OAAO,0BAA0B,CAAC;AAIlC;;GAEG;AACH,eAAO,MAAM,uBAAuB,6BAA8B,yBAAyB,4CAyN1F,CAAC"}