@solidxai/core-ui 0.0.1

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

@@ -0,0 +1,144 @@
+
+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 ReactCodeMirror, { EditorView, oneDark } from "@uiw/react-codemirror";
+import { javascript } from "@codemirror/lang-javascript";
+
+export const SolidAiInteractionMetadataFieldFormWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    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> */}
+
+            <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 || {};
+
+                                // 🧠 Identify type
+                                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();
+                                }
+
+                                // 🧩 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\`\`\``
+                                            );
+                                        }
+                                    }
+                                }
+
+                                // 🏷️ 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}`;
+                                }
+
+                                // 🌐 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");
+                                    }
+                                };
+
+                                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>
+        </div>
+    );
+}
+

package/dist/components/core/form/fields/widgets/SolidIconEditWidget.d.ts

@@ -0,0 +1,3 @@
+import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
+export declare const SolidIconEditWidget: ({ formik, fieldContext }: SolidFormFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SolidIconEditWidget.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SolidIconEditWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidIconEditWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAO5E,eAAO,MAAM,mBAAmB,6BAA8B,yBAAyB,4CA+PtF,CAAC"}

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

@@ -0,0 +1,103 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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 { useEffect, useState } from "react";
+export var SolidIconEditWidget = function (_a) {
+    var _b, _c, _d;
+    var formik = _a.formik, fieldContext = _a.fieldContext;
+    console.log("SolidIconWidget", "formik : ", formik, "fieldContext : ", fieldContext);
+    var fieldMetadata = fieldContext.fieldMetadata;
+    var fieldLayoutInfo = fieldContext.field;
+    var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
+    var fieldName = (_c = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.name;
+    var _e = useState(false), openIconDialog = _e[0], setOpenIconDialog = _e[1];
+    var _f = useState("All"), selectedCategory = _f[0], setSelectedCategory = _f[1];
+    var _g = useState(""), searchIcon = _g[0], setSearchIcon = _g[1];
+    var _h = useState(((_d = formik.values) === null || _d === void 0 ? void 0 : _d[fieldName]) || ""), selectedIcon = _h[0], setSelectedIcon = _h[1];
+    // const [iconVariant, setIconVariant] = useState(formik.values.iconVariant || "outlined");
+    // const iconVariants = [
+    //     { label: "Outlined", value: "outlined" },
+    //     { label: "Rounded", value: "rounded" },
+    //     { label: "Sharp", value: "sharp" }
+    // ];
+    var allIcons = solidIcons.flatMap(function (_a) {
+        var category = _a.category, icons = _a.icons;
+        return icons.map(function (icon) { return ({ icon: icon, category: category }); });
+    });
+    var filteredIcons = (selectedCategory === "All" ? allIcons :
+        allIcons.filter(function (i) { return i.category === selectedCategory; })).filter(function (_a) {
+        var icon = _a.icon;
+        return icon.toLowerCase().includes(searchIcon.toLowerCase());
+    });
+    var tabs = __spreadArray(["All"], solidIcons.map(function (c) { return c.category; }), true);
+    useEffect(function () {
+        var _a, _b;
+        if (openIconDialog) {
+            setSelectedIcon((_b = (_a = formik === null || formik === void 0 ? void 0 : formik.values) === null || _a === void 0 ? void 0 : _a[fieldName]) !== null && _b !== void 0 ? _b : "");
+            // setIconVariant(formik.values.iconVariant ?? "outlined");
+        }
+    }, [openIconDialog]);
+    var handleSelectIcon = function (icon) {
+        setSelectedIcon(icon);
+        // setIconVariant(variant)
+        formik.setFieldValue(fieldName, icon);
+        // formik.setFieldValue("iconVariant", variant);
+    };
+    var handleRemoveIcon = function () {
+        setSelectedIcon("");
+        // setIconVariant(null)
+        formik.setFieldTouched(fieldName, true);
+        formik.setFieldValue(fieldName, "", true);
+        // formik.setFieldValue("iconVariant", null);
+    };
+    return (_jsxs("div", { children: [_jsx("label", { className: "form-field-label", children: fieldLabel }), _jsxs("div", { className: "flex align-items-end gap-3 mt-2", children: [_jsx("div", { style: { display: 'inline-block' }, children: selectedIcon ? (
+                        // <Button
+                        //     type="button"
+                        //     icon={<span className={`material-symbols-outlined`}>{selectedIcon}</span>}
+                        //     onClick={() => setOpenIconDialog(true)}
+                        //     outlined
+                        // />
+                        _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 () {
+                                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 () {
+                                                            setSelectedCategory(tab);
+                                                            setSearchIcon("");
+                                                        }, outlined: selectedCategory === tab ? false : true, 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
+                                                        .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) {
+                                                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,
+                                                                    cursor: "pointer",
+                                                                    padding: "8px",
+                                                                    border: selectedIcon === icon ? "2px solid var(--primary-color)" : "2px solid transparent",
+                                                                    borderRadius: "6px",
+                                                                }, onClick: function () { return handleSelectIcon(icon); }, title: "".concat(icon, " (").concat(category, ")"), children: icon }), _jsx("p", { className: 'mb-0 mt-1 text-center', children: icon
+                                                                    .split('_')
+                                                                    .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
+                                                                    .join(' ') })] }) }, icon));
+                                            })) : (_jsx("p", { className: "mt", children: "No icons found." })) }) })] }), _jsx("div", { className: "col-3 p-0 hidden lg:flex", 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(' ') })] }))] }) })] }) }) })] }));
+};
+//# sourceMappingURL=SolidIconEditWidget.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SolidIconEditWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidIconEditWidget.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,265 @@
+
+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 { useEffect, useState } from "react";
+
+export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+    console.log("SolidIconWidget", "formik : ", formik, "fieldContext : ", fieldContext);
+
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const fieldName = fieldLayoutInfo?.attrs?.name;
+
+    const [openIconDialog, setOpenIconDialog] = useState(false);
+    const [selectedCategory, setSelectedCategory] = useState("All");
+    const [searchIcon, setSearchIcon] = useState("");
+    const [selectedIcon, setSelectedIcon] = useState(formik.values?.[fieldName] || "");
+
+    // const [iconVariant, setIconVariant] = useState(formik.values.iconVariant || "outlined");
+
+    // const iconVariants = [
+    //     { label: "Outlined", value: "outlined" },
+    //     { label: "Rounded", value: "rounded" },
+    //     { label: "Sharp", value: "sharp" }
+    // ];
+
+    const allIcons = solidIcons.flatMap(({ category, icons }) =>
+        icons.map((icon) => ({ icon, category }))
+    );
+
+    const filteredIcons = (selectedCategory === "All" ? allIcons :
+        allIcons.filter((i) => i.category === selectedCategory)
+    ).filter(({ icon }) => icon.toLowerCase().includes(searchIcon.toLowerCase()));
+
+    const tabs = ["All", ...solidIcons.map((c) => c.category)];
+
+    useEffect(() => {
+        if (openIconDialog) {
+            setSelectedIcon(formik?.values?.[fieldName] ?? "");
+            // setIconVariant(formik.values.iconVariant ?? "outlined");
+        }
+    }, [openIconDialog]);
+
+    const handleSelectIcon = (icon: string) => {
+        setSelectedIcon(icon);
+        // setIconVariant(variant)
+        formik.setFieldValue(fieldName, icon);
+        // formik.setFieldValue("iconVariant", variant);
+    };
+
+    const handleRemoveIcon = () => {
+        setSelectedIcon("");
+        // setIconVariant(null)
+        formik.setFieldTouched(fieldName, true);
+        formik.setFieldValue(fieldName, "", true);
+        // formik.setFieldValue("iconVariant", null);
+    };
+
+    return (
+        <div>
+            <label className="form-field-label">{fieldLabel}</label>
+            <div className="flex align-items-end gap-3 mt-2">
+                <div style={{ display: 'inline-block' }}>
+                    {selectedIcon ? (
+                        // <Button
+                        //     type="button"
+                        //     icon={<span className={`material-symbols-outlined`}>{selectedIcon}</span>}
+                        //     onClick={() => setOpenIconDialog(true)}
+                        //     outlined
+                        // />
+                        <div>
+                            <span className={`material-symbols-outlined`} style={{ fontSize: 48, cursor: 'pointer' }} onClick={() => setOpenIconDialog(true)}>
+                                {selectedIcon}
+                            </span>
+                            <p className="mb-0 text-center">
+                                {selectedIcon
+                                    .split('_')
+                                    .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))
+                                    .join(' ')
+                                }
+                            </p>
+                        </div>
+                    ) : (
+                        <Button
+                            type="button"
+                            size="small"
+                            label="Select Icon"
+                            onClick={() => setOpenIconDialog(true)}
+                            outlined
+                        />
+                    )}
+                </div>
+                {selectedIcon && (
+                    <div>
+                        <Button
+                            type="button"
+                            label="Remove"
+                            className="p-button-text p-button-danger ml-2"
+                            onClick={() => {
+                                setSelectedIcon("");
+                                formik.setFieldValue(fieldName, "");
+                            }}
+                        />
+                    </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)}>
+                <div>
+                    <div className="grid m-0 flex-column md:flex-row ">
+                        <div className="col-12 lg:col-3 p-0">
+                            <div className="flex flex-column justify-content-between p-3 lg:p-4" style={{ height: '100%' }}>
+                                <div className="">
+                                    {/* <p className="font-medium">Variant</p>
+                                    <Dropdown
+                                        value={iconVariant}
+                                        onChange={(e) => setIconVariant(e.value)}
+                                        options={iconVariants}
+                                        optionLabel="label"
+                                        className="w-full mb-3"
+                                        checkmark
+                                        highlightOnSelect={false}
+                                        placeholder="Select Variant"
+                                    /> */}
+
+                                    <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
+                                                type='button'
+                                                key={tab}
+                                                size="small"
+                                                onClick={() => {
+                                                    setSelectedCategory(tab);
+                                                    setSearchIcon("");
+                                                }}
+                                                outlined={selectedCategory === tab ? false : true}
+                                                style={{
+                                                    padding: "8px 16px",
+                                                    fontSize: 12
+                                                }}
+                                                className="solid-icon-category"
+                                                severity="secondary"
+                                            >
+                                                {tab}
+                                            </Button>
+                                        ))}
+                                    </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)} />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="col-6 p-0 flex lg:hidden">
+                            <div className="p-3 lg:p-4">
+                                <p className="font-medium">Selected Icon</p>
+                                {selectedIcon && (
+                                    <>
+                                        <div className="flex justify-content-center">
+                                            <span className={`material-symbols-outlined`} style={{ fontSize: 100 }}>
+                                                {selectedIcon}
+                                            </span>
+                                        </div>
+                                        <p className='mt-2 text-center'>
+                                            {selectedIcon
+                                                .split('_')
+                                                .map((word: any) => word.charAt(0).toUpperCase() + word.slice(1))
+                                                .join(' ')
+                                            }
+                                        </p>
+                                        {/* <code className="mt-2 d-block">
+                                            {`<span class="material-symbols-${iconVariant || "outlined"}">${selectedIcon}</span>`}
+                                        </code> */}
+                                    </>
+                                )}
+                            </div>
+
+                        </div>
+                        <div className="col-12 lg:col-6 p-0" style={{ borderLeft: '1px solid var(--primary-light-color)', borderRight: '1px solid var(--primary-light-color)' }}>
+                            <div className="px-3 lg:px-4 pt-3 lg:pt-4">
+                                <div>
+                                    <p className="font-medium">Select Icon</p>
+                                    <InputText
+                                        type="text"
+                                        placeholder={`Search icons in "${selectedCategory}"`}
+                                        value={searchIcon}
+                                        onChange={(e) => setSearchIcon(e.target.value)}
+                                        className="w-full"
+                                    />
+                                </div>
+                            </div>
+                            <div style={{ height: 'calc(70vh - 125px)', overflowY: 'auto', overflowX: 'hidden' }} className="px-4 pb-3 mt-4">
+                                <div className="grid">
+                                    {filteredIcons.length > 0 ? (
+                                        filteredIcons.map(({ icon, category }) => (
+                                            <div className="col-3" key={icon}>
+                                                <div className="w-full flex flex-column align-items-center justify-content-center gap-3">
+                                                    <span
+                                                        className={`material-symbols-outlined`}
+                                                        style={{
+                                                            fontSize: 32,
+                                                            cursor: "pointer",
+                                                            padding: "8px",
+                                                            border: selectedIcon === icon ? "2px solid var(--primary-color)" : "2px solid transparent",
+                                                            borderRadius: "6px",
+                                                        }}
+                                                        onClick={() => handleSelectIcon(icon)}
+                                                        title={`${icon} (${category})`}
+                                                    >
+                                                        {icon}
+                                                    </span>
+                                                    <p className='mb-0 mt-1 text-center'>
+                                                        {icon
+                                                            .split('_')
+                                                            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+                                                            .join(' ')
+                                                        }
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        ))
+                                    ) : (
+                                        <p className="mt">No icons found.</p>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="col-3 p-0 hidden lg:flex">
+                            <div className="p-3 lg:p-4">
+                                <p className="font-medium">Selected Icon</p>
+                                {selectedIcon && (
+                                    <>
+                                        <div className="flex justify-content-center">
+                                            <span className={`material-symbols-outlined`} style={{ fontSize: 100 }}>
+                                                {selectedIcon}
+                                            </span>
+                                        </div>
+                                        <p className='mt-2 text-center'>
+                                            {selectedIcon
+                                                .split('_')
+                                                .map((word: any) => word.charAt(0).toUpperCase() + word.slice(1))
+                                                .join(' ')
+                                            }
+                                        </p>
+                                        {/* <code className="mt-2 d-block">
+                                            {`<span class="material-symbols-${iconVariant || "outlined"}">${selectedIcon}</span>`}
+                                        </code> */}
+                                    </>
+                                )}
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+            </Dialog>
+        </div>
+    );
+};

package/dist/components/core/form/fields/widgets/SolidIconViewWidget.d.ts

@@ -0,0 +1,3 @@
+import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
+export declare const SolidIconViewWidget: ({ formik, fieldContext }: SolidFormFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SolidIconViewWidget.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SolidIconViewWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidIconViewWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAE5E,eAAO,MAAM,mBAAmB,6BAA8B,yBAAyB,4CA6BtF,CAAC"}

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var SolidIconViewWidget = function (_a) {
+    var _b, _c, _d;
+    var formik = _a.formik, fieldContext = _a.fieldContext;
+    var fieldMetadata = fieldContext.fieldMetadata;
+    var fieldLayoutInfo = fieldContext.field;
+    var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
+    var fieldName = (_c = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.name;
+    var selectedIcon = (_d = formik.values) === null || _d === void 0 ? void 0 : _d[fieldName];
+    var formattedIconName = selectedIcon
+        ? selectedIcon
+            .split('_')
+            .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
+            .join(' ')
+        : '';
+    return (_jsxs("div", { children: [_jsx("label", { className: "form-field-label", children: fieldLabel }), selectedIcon ? (_jsxs("div", { className: "mt-2", style: { display: 'inline-block' }, children: [_jsx("span", { className: "material-symbols-outlined", style: { fontSize: 48, cursor: 'pointer' }, children: selectedIcon }), _jsx("p", { className: "mb-0 text-center", children: formattedIconName })] })) : (_jsx("p", { className: "mt-2", children: "No icon selected." }))] }));
+};
+//# sourceMappingURL=SolidIconViewWidget.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SolidIconViewWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidIconViewWidget.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,EAAmD;;QAAjD,MAAM,YAAA,EAAE,YAAY,kBAAA;IACtD,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,SAAS,GAAG,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,KAAK,0CAAE,IAAI,CAAC;IAC/C,IAAM,YAAY,GAAG,MAAA,MAAM,CAAC,MAAM,0CAAG,SAAS,CAAC,CAAC;IAEhD,IAAM,iBAAiB,GAAG,YAAY;QAClC,CAAC,CAAC,YAAY;aACT,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,UAAC,IAAY,IAAK,OAAA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAA5C,CAA4C,CAAC;aACnE,IAAI,CAAC,GAAG,CAAC;QACd,CAAC,CAAC,EAAE,CAAC;IAET,OAAO,CACH,0BACI,gBAAO,SAAS,EAAC,kBAAkB,YAAE,UAAU,GAAS,EACvD,YAAY,CAAC,CAAC,CAAC,CACZ,eAAK,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,EAAC,OAAO,EAAC,cAAc,EAAC,aACjD,eAAM,SAAS,EAAC,2BAA2B,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAG,MAAM,EAAC,SAAS,EAAC,YAChF,YAAY,GACV,EACP,YAAG,SAAS,EAAC,kBAAkB,YAAE,iBAAiB,GAAK,IACrD,CACT,CAAC,CAAC,CAAC,CACA,YAAG,SAAS,EAAC,MAAM,kCAAsB,CAC5C,IACC,CACT,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,32 @@
+import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
+
+export const SolidIconViewWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const fieldName = fieldLayoutInfo?.attrs?.name;
+    const selectedIcon = formik.values?.[fieldName];
+
+    const formattedIconName = selectedIcon
+        ? selectedIcon
+            .split('_')
+            .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ')
+        : '';
+
+    return (
+        <div>
+            <label className="form-field-label">{fieldLabel}</label>
+            {selectedIcon ? (
+                <div className="mt-2" style={{display:'inline-block'}}>
+                    <span className="material-symbols-outlined" style={{ fontSize: 48 , cursor:'pointer'}}>
+                        {selectedIcon}
+                    </span>
+                    <p className="mb-0 text-center">{formattedIconName}</p>
+                </div>
+            ) : (
+                <p className="mt-2">No icon selected.</p>
+            )}
+        </div>
+    );
+};

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

@@ -0,0 +1,3 @@
+import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
+export declare const SolidRelationFieldAvatarFormWidget: ({ formik, fieldContext }: SolidFormFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SolidRelationFieldAvatarFormWidget.d.ts.map

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

@@ -0,0 +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"}