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

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 {\n    SolidDialog,\n    SolidDialogBody,\n    SolidDialogClose,\n    SolidDialogFooter,\n    SolidDialogHeader,\n    SolidDialogTitle,\n} from \"../../../../shad-cn-ui/SolidDialog\";\nimport { SolidInput } from \"../../../../shad-cn-ui/SolidInput\";\nimport { useEffect, useState } from \"react\";\n\nexport const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\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    const formatIconLabel = (icon: string) =>\n        icon\n            .split('_')\n            .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))\n            .join(' ');\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                                {formatIconLabel(selectedIcon)}\n                            </p>\n                        </div>\n                    ) : (\n                        <SolidButton\n                            type=\"button\"\n                            size=\"sm\"\n                            variant=\"outline\"\n                            onClick={() => setOpenIconDialog(true)}\n                        >\n                            Select Icon\n                        </SolidButton>\n                    )}\n                </div>\n                {selectedIcon && (\n                    <div>\n                        <SolidButton\n                            type=\"button\"\n                            variant=\"ghost\"\n                            className=\"ml-2\"\n                            onClick={handleRemoveIcon}\n                        >\n                            Remove\n                        </SolidButton>\n                    </div>\n                )}\n            </div>\n            <SolidDialog\n                open={openIconDialog}\n                onOpenChange={setOpenIconDialog}\n                className=\"solid-icon-dialog p-0\"\n                style={{ width: '70vw', height: '70vh', borderRadius: 6 }}\n                showHeader={false}\n                breakpoints={{ '1024px': '75vw','991px': '90vw','767px':'94w', '250px': '96vw'}}\n            >\n                <SolidDialogHeader>\n                    <SolidDialogTitle>Select Icon</SolidDialogTitle>\n                    <SolidDialogClose />\n                </SolidDialogHeader>\n                <SolidDialogBody className=\"p-0\">\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=\"sm\"\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                                            >\n                                                {tab}\n                                            </SolidButton>\n                                        ))}\n                                    </div>\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'>{formatIconLabel(selectedIcon)}</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                                                        {formatIconLabel(icon)}\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'>{formatIconLabel(selectedIcon)}</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                </SolidDialogBody>\n                <SolidDialogFooter className=\"gap-3\">\n                    <SolidButton type=\"button\" size=\"sm\" onClick={() => setOpenIconDialog(false)}>\n                        Select\n                    </SolidButton>\n                    <SolidButton type=\"button\" size=\"sm\" variant=\"outline\" onClick={() => setOpenIconDialog(false)}>\n                        Cancel\n                    </SolidButton>\n                </SolidDialogFooter>\n            </SolidDialog>\n        </div>\n    );\n};\n"]}

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

@@ -1,15 +1,19 @@
 
 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,
+    SolidDialogBody,
+    SolidDialogClose,
+    SolidDialogFooter,
+    SolidDialogHeader,
+    SolidDialogTitle,
+} from "../../../../shad-cn-ui/SolidDialog";
+import { SolidInput } from "../../../../shad-cn-ui/SolidInput";
 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;
@@ -60,6 +64,12 @@ export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidg
         // formik.setFieldValue("iconVariant", null);
     };
 
+    const formatIconLabel = (icon: string) =>
+        icon
+            .split('_')
+            .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+
     return (
         <div>
             <label className="form-field-label">{fieldLabel}</label>
@@ -77,39 +87,46 @@ export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidg
                                 {selectedIcon}
                             </span>
                             <p className="mb-0 text-center">
-                                {selectedIcon
-                                    .split('_')
-                                    .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))
-                                    .join(' ')
-                                }
+                                {formatIconLabel(selectedIcon)}
                             </p>
                         </div>
                     ) : (
-                        <Button
+                        <SolidButton
                             type="button"
-                            size="small"
-                            label="Select Icon"
+                            size="sm"
+                            variant="outline"
                             onClick={() => setOpenIconDialog(true)}
-                            outlined
-                        />
+                        >
+                            Select Icon
+                        </SolidButton>
                     )}
                 </div>
                 {selectedIcon && (
                     <div>
-                        <Button
+                        <SolidButton
                             type="button"
-                            label="Remove"
-                            className="p-button-text p-button-danger ml-2"
-                            onClick={() => {
-                                setSelectedIcon("");
-                                formik.setFieldValue(fieldName, "");
-                            }}
-                        />
+                            variant="ghost"
+                            className="ml-2"
+                            onClick={handleRemoveIcon}
+                        >
+                            Remove
+                        </SolidButton>
                     </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>
+            <SolidDialog
+                open={openIconDialog}
+                onOpenChange={setOpenIconDialog}
+                className="solid-icon-dialog p-0"
+                style={{ width: '70vw', height: '70vh', borderRadius: 6 }}
+                showHeader={false}
+                breakpoints={{ '1024px': '75vw','991px': '90vw','767px':'94w', '250px': '96vw'}}
+            >
+                <SolidDialogHeader>
+                    <SolidDialogTitle>Select Icon</SolidDialogTitle>
+                    <SolidDialogClose />
+                </SolidDialogHeader>
+                <SolidDialogBody className="p-0">
                     <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%' }}>
@@ -129,31 +146,26 @@ 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"
+                                                size="sm"
                                                 onClick={() => {
                                                     setSelectedCategory(tab);
                                                     setSearchIcon("");
                                                 }}
-                                                outlined={selectedCategory === tab ? false : true}
+                                                variant={selectedCategory === tab ? "primary" : "outline"}
                                                 style={{
                                                     padding: "8px 16px",
                                                     fontSize: 12
                                                 }}
                                                 className="solid-icon-category"
-                                                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)} />
-                                </div>
                             </div>
                         </div>
 
@@ -167,13 +179,7 @@ export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidg
                                                 {selectedIcon}
                                             </span>
                                         </div>
-                                        <p className='mt-2 text-center'>
-                                            {selectedIcon
-                                                .split('_')
-                                                .map((word: any) => word.charAt(0).toUpperCase() + word.slice(1))
-                                                .join(' ')
-                                            }
-                                        </p>
+                                        <p className='mt-2 text-center'>{formatIconLabel(selectedIcon)}</p>
                                         {/* <code className="mt-2 d-block">
                                             {`<span class="material-symbols-${iconVariant || "outlined"}">${selectedIcon}</span>`}
                                         </code> */}
@@ -186,7 +192,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}
@@ -216,11 +222,7 @@ export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidg
                                                         {icon}
                                                     </span>
                                                     <p className='mb-0 mt-1 text-center'>
-                                                        {icon
-                                                            .split('_')
-                                                            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-                                                            .join(' ')
-                                                        }
+                                                        {formatIconLabel(icon)}
                                                     </p>
                                                 </div>
                                             </div>
@@ -242,13 +244,7 @@ export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidg
                                                 {selectedIcon}
                                             </span>
                                         </div>
-                                        <p className='mt-2 text-center'>
-                                            {selectedIcon
-                                                .split('_')
-                                                .map((word: any) => word.charAt(0).toUpperCase() + word.slice(1))
-                                                .join(' ')
-                                            }
-                                        </p>
+                                        <p className='mt-2 text-center'>{formatIconLabel(selectedIcon)}</p>
                                         {/* <code className="mt-2 d-block">
                                             {`<span class="material-symbols-${iconVariant || "outlined"}">${selectedIcon}</span>`}
                                         </code> */}
@@ -258,8 +254,16 @@ export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidg
 
                         </div>
                     </div>
-                </div>
-            </Dialog>
+                </SolidDialogBody>
+                <SolidDialogFooter className="gap-3">
+                    <SolidButton type="button" size="sm" onClick={() => setOpenIconDialog(false)}>
+                        Select
+                    </SolidButton>
+                    <SolidButton type="button" size="sm" variant="outline" onClick={() => setOpenIconDialog(false)}>
+                        Cancel
+                    </SolidButton>
+                </SolidDialogFooter>
+            </SolidDialog>
         </div>
     );
-};
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SolidLovTypeChangeFormEditWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidLovTypeChangeFormEditWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAM5E,eAAO,MAAM,gCAAgC,6BAG1C,yBAAyB,4CA+G3B,CAAC"}

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

@@ -0,0 +1,111 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { solidGet } from "../../../../../http/solidHttp";
+import { SolidAutocomplete } from "../../../../../components/shad-cn-ui/SolidAutocomplete";
+import { SolidInput } from "../../../../../components/shad-cn-ui/SolidInput";
+import { SolidIcon } from "../../../../../components/shad-cn-ui/SolidIcon";
+export var SolidLovTypeChangeFormEditWidget = 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 value = (_d = formik.values) === null || _d === void 0 ? void 0 : _d[fieldName];
+    // 🔹 UI State
+    var _e = useState([]), filteredOptions = _e[0], setFilteredOptions = _e[1];
+    var _f = useState(false), isCreating = _f[0], setIsCreating = _f[1];
+    var _g = useState(value || ""), inputValue = _g[0], setInputValue = _g[1];
+    // 🔹 Handle Autocommplete AJAX Fetching
+    var completeMethod = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+        var query, filterPart, res, extracted, err_1;
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    _d.trys.push([0, 2, , 3]);
+                    query = event.query;
+                    filterPart = query
+                        ? "&filters[$and][0][$or][0][".concat(fieldName, "][$containsi]=%").concat(query, "%")
+                        : "";
+                    return [4 /*yield*/, solidGet("/api/list-of-values?&offset=0&limit=50&groupBy[0]=".concat(fieldName, "&aggregates[0]=id:count").concat(filterPart))];
+                case 1:
+                    res = _d.sent();
+                    extracted = ((_c = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.groupMeta) === null || _c === void 0 ? void 0 : _c.filter(function (item) { return item.groupValue != null; }).map(function (item) { return ({
+                        label: item.groupValue,
+                        value: item.groupValue
+                    }); })) || [];
+                    setFilteredOptions(extracted);
+                    return [3 /*break*/, 3];
+                case 2:
+                    err_1 = _d.sent();
+                    console.error("Failed to fetch autocomplete suggestions", err_1);
+                    setFilteredOptions([]);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    // 🔹 Handle Change from Autocomplete
+    var handleAutocompleteChange = function (e) {
+        var _a;
+        var selectedValue = typeof e.value === "object" ? (_a = e.value) === null || _a === void 0 ? void 0 : _a.value : e.value;
+        formik.setFieldValue(fieldName, selectedValue);
+    };
+    // 🔹 Handle Input Submit (blur or enter)
+    var handleCreate = function () {
+        if (!inputValue.trim())
+            return;
+        formik.setFieldValue(fieldName, inputValue);
+        setIsCreating(false);
+    };
+    return (_jsxs("div", { className: "solid-lov-type-change-widget w-full", children: [_jsxs("div", { className: "flex align-items-center justify-between  mb-2", children: [_jsx("label", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: fieldLabel }), _jsxs("button", { type: "button", onClick: function () {
+                            setIsCreating(!isCreating);
+                            if (!isCreating)
+                                setInputValue("");
+                        }, style: { color: "blue", background: "transparent", border: 0 }, children: [_jsx(SolidIcon, { name: isCreating ? "si-times" : "si-plus", size: 12 }), _jsx("span", { children: isCreating ? "choose existing" : "add custom" })] })] }), _jsx("div", { className: "relative", children: !isCreating ? (_jsx(SolidAutocomplete, { value: value, suggestions: filteredOptions, completeMethod: completeMethod, onChange: handleAutocompleteChange, dropdown: true, placeholder: "Select ".concat(fieldLabel), className: "w-full" })) : (_jsx("div", { className: "flex gap-2", children: _jsx(SolidInput, { type: "text", value: inputValue, autoFocus: true, placeholder: "Enter new type", className: "flex-1 h-9", onChange: function (e) { return setInputValue(e.target.value); }, onBlur: handleCreate, onKeyDown: function (e) {
+                            if (e.key === "Enter") {
+                                handleCreate();
+                            }
+                            if (e.key === "Escape") {
+                                setIsCreating(false);
+                            }
+                        } }) })) })] }));
+};
+//# sourceMappingURL=SolidLovTypeChangeFormEditWidget.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SolidLovTypeChangeFormEditWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidLovTypeChangeFormEditWidget.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wDAAwD,CAAC;AAC3F,OAAO,EAAE,UAAU,EAAE,MAAM,iDAAiD,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,gDAAgD,CAAC;AAE3E,MAAM,CAAC,IAAM,gCAAgC,GAAG,UAAC,EAGrB;;QAFxB,MAAM,YAAA,EACN,YAAY,kBAAA;IAEZ,IAAM,aAAa,GAAG,YAAY,CAAC,aAAa,CAAC;IACjD,IAAM,eAAe,GAAG,YAAY,CAAC,KAAK,CAAC;IAE3C,IAAM,UAAU,GACZ,MAAA,eAAe,CAAC,KAAK,CAAC,KAAK,mCAAI,aAAa,CAAC,WAAW,CAAC;IAC7D,IAAM,SAAS,GAAG,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,KAAK,0CAAE,IAAI,CAAC;IAE/C,IAAM,KAAK,GAAG,MAAA,MAAM,CAAC,MAAM,0CAAG,SAAS,CAAC,CAAC;IAEzC,cAAc;IACR,IAAA,KAAwC,QAAQ,CAAQ,EAAE,CAAC,EAA1D,eAAe,QAAA,EAAE,kBAAkB,QAAuB,CAAC;IAC5D,IAAA,KAA8B,QAAQ,CAAC,KAAK,CAAC,EAA5C,UAAU,QAAA,EAAE,aAAa,QAAmB,CAAC;IAC9C,IAAA,KAA8B,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,EAAlD,UAAU,QAAA,EAAE,aAAa,QAAyB,CAAC;IAE1D,wCAAwC;IACxC,IAAM,cAAc,GAAG,UAAO,KAAwB;;;;;;;oBAExC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;oBAGpB,UAAU,GAAG,KAAK;wBACpB,CAAC,CAAC,oCAA6B,SAAS,4BAAkB,KAAK,MAAG;wBAClE,CAAC,CAAC,EAAE,CAAC;oBAEG,qBAAM,QAAQ,CACtB,4DAAqD,SAAS,oCAA0B,UAAU,CAAE,CACvG,EAAA;;oBAFK,GAAG,GAAG,SAEX;oBAEK,SAAS,GACX,CAAA,MAAA,MAAA,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,0CAAE,IAAI,0CAAE,SAAS,0CACpB,MAAM,CAAC,UAAC,IAAS,IAAK,OAAA,IAAI,CAAC,UAAU,IAAI,IAAI,EAAvB,CAAuB,EAC9C,GAAG,CAAC,UAAC,IAAS,IAAK,OAAA,CAAC;wBACjB,KAAK,EAAE,IAAI,CAAC,UAAU;wBACtB,KAAK,EAAE,IAAI,CAAC,UAAU;qBACzB,CAAC,EAHkB,CAGlB,CAAC,KAAI,EAAE,CAAC;oBAElB,kBAAkB,CAAC,SAAS,CAAC,CAAC;;;;oBAE9B,OAAO,CAAC,KAAK,CAAC,0CAA0C,EAAE,KAAG,CAAC,CAAC;oBAC/D,kBAAkB,CAAC,EAAE,CAAC,CAAC;;;;;SAE9B,CAAC;IAEF,qCAAqC;IACrC,IAAM,wBAAwB,GAAG,UAAC,CAAiB;;QAC/C,IAAM,aAAa,GAAG,OAAO,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAA,CAAC,CAAC,KAAK,0CAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAC7E,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACnD,CAAC,CAAC;IAEF,yCAAyC;IACzC,IAAM,YAAY,GAAG;QACjB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;YAAE,OAAO;QAC/B,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;QAC5C,aAAa,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAC,qCAAqC,aAChD,eAAK,SAAS,EAAC,+CAA+C,aAC1D,gBAAO,SAAS,EAAC,sEAAsE,YAClF,UAAU,GACP,EACR,kBACI,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE;4BACL,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;4BAC3B,IAAI,CAAC,UAAU;gCAAE,aAAa,CAAC,EAAE,CAAC,CAAC;wBACvC,CAAC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,EAAE,aAE9D,KAAC,SAAS,IAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,EAAE,GAAI,EAClE,yBAAO,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,YAAY,GAAQ,IACvD,IACP,EAEN,cAAK,SAAS,EAAC,UAAU,YACpB,CAAC,UAAU,CAAC,CAAC,CAAC,CACX,KAAC,iBAAiB,IACd,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,eAAe,EAC5B,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,wBAAwB,EAClC,QAAQ,QACR,WAAW,EAAE,iBAAU,UAAU,CAAE,EACnC,SAAS,EAAC,QAAQ,GACpB,CACL,CAAC,CAAC,CAAC,CACA,cAAK,SAAS,EAAC,YAAY,YACvB,KAAC,UAAU,IACP,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,UAAU,EACjB,SAAS,QACT,WAAW,EAAC,gBAAgB,EAC5B,SAAS,EAAC,YAAY,EACtB,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAA7B,CAA6B,EAC9C,MAAM,EAAE,YAAY,EACpB,SAAS,EAAE,UAAC,CAAC;4BACT,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;gCACnB,YAAY,EAAE,CAAC;6BAClB;4BACD,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;gCACpB,aAAa,CAAC,KAAK,CAAC,CAAC;6BACxB;wBACL,CAAC,GACH,GACA,CACT,GACC,IACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useState } from \"react\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport { solidGet } from \"../../../../../http/solidHttp\";\nimport { SolidAutocomplete } from \"../../../../../components/shad-cn-ui/SolidAutocomplete\";\nimport { SolidInput } from \"../../../../../components/shad-cn-ui/SolidInput\";\nimport { SolidIcon } from \"../../../../../components/shad-cn-ui/SolidIcon\";\n\nexport const SolidLovTypeChangeFormEditWidget = ({\n    formik,\n    fieldContext\n}: SolidFormFieldWidgetProps) => {\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n\n    const fieldLabel =\n        fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const fieldName = fieldLayoutInfo?.attrs?.name;\n\n    const value = formik.values?.[fieldName];\n\n    // 🔹 UI State\n    const [filteredOptions, setFilteredOptions] = useState<any[]>([]);\n    const [isCreating, setIsCreating] = useState(false);\n    const [inputValue, setInputValue] = useState(value || \"\");\n\n    // 🔹 Handle Autocommplete AJAX Fetching\n    const completeMethod = async (event: { query: string }) => {\n        try {\n            const query = event.query;\n            // Build the URL following the user's provided filter pattern\n\n            const filterPart = query\n                ? `&filters[$and][0][$or][0][${fieldName}][$containsi]=%${query}%`\n                : \"\";\n\n            const res = await solidGet(\n                `/api/list-of-values?&offset=0&limit=50&groupBy[0]=${fieldName}&aggregates[0]=id:count${filterPart}`\n            );\n\n            const extracted =\n                res?.data?.data?.groupMeta\n                    ?.filter((item: any) => item.groupValue != null)\n                    .map((item: any) => ({\n                        label: item.groupValue,\n                        value: item.groupValue\n                    })) || [];\n\n            setFilteredOptions(extracted);\n        } catch (err) {\n            console.error(\"Failed to fetch autocomplete suggestions\", err);\n            setFilteredOptions([]);\n        }\n    };\n\n    // 🔹 Handle Change from Autocomplete\n    const handleAutocompleteChange = (e: { value: any }) => {\n        const selectedValue = typeof e.value === \"object\" ? e.value?.value : e.value;\n        formik.setFieldValue(fieldName, selectedValue);\n    };\n\n    // 🔹 Handle Input Submit (blur or enter)\n    const handleCreate = () => {\n        if (!inputValue.trim()) return;\n        formik.setFieldValue(fieldName, inputValue);\n        setIsCreating(false);\n    };\n\n    return (\n        <div className=\"solid-lov-type-change-widget w-full\">\n            <div className=\"flex align-items-center justify-between  mb-2\">\n                <label className=\"text-xs font-semibold text-muted-foreground uppercase tracking-wider\">\n                    {fieldLabel}\n                </label>\n                <button\n                    type=\"button\"\n                    onClick={() => {\n                        setIsCreating(!isCreating);\n                        if (!isCreating) setInputValue(\"\");\n                    }}\n                    style={{ color: \"blue\", background: \"transparent\", border: 0 }}\n                >\n                    <SolidIcon name={isCreating ? \"si-times\" : \"si-plus\"} size={12} />\n                    <span>{isCreating ? \"choose existing\" : \"add custom\"}</span>\n                </button>\n            </div>\n\n            <div className=\"relative\">\n                {!isCreating ? (\n                    <SolidAutocomplete\n                        value={value}\n                        suggestions={filteredOptions}\n                        completeMethod={completeMethod}\n                        onChange={handleAutocompleteChange}\n                        dropdown\n                        placeholder={`Select ${fieldLabel}`}\n                        className=\"w-full\"\n                    />\n                ) : (\n                    <div className=\"flex gap-2\">\n                        <SolidInput\n                            type=\"text\"\n                            value={inputValue}\n                            autoFocus\n                            placeholder=\"Enter new type\"\n                            className=\"flex-1 h-9\"\n                            onChange={(e) => setInputValue(e.target.value)}\n                            onBlur={handleCreate}\n                            onKeyDown={(e) => {\n                                if (e.key === \"Enter\") {\n                                    handleCreate();\n                                }\n                                if (e.key === \"Escape\") {\n                                    setIsCreating(false);\n                                }\n                            }}\n                        />\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};"]}

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

@@ -0,0 +1,122 @@
+import { useState } from "react";
+import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
+import { solidGet } from "../../../../../http/solidHttp";
+import { SolidAutocomplete } from "../../../../../components/shad-cn-ui/SolidAutocomplete";
+import { SolidInput } from "../../../../../components/shad-cn-ui/SolidInput";
+import { SolidIcon } from "../../../../../components/shad-cn-ui/SolidIcon";
+
+export const SolidLovTypeChangeFormEditWidget = ({
+    formik,
+    fieldContext
+}: SolidFormFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+
+    const fieldLabel =
+        fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const fieldName = fieldLayoutInfo?.attrs?.name;
+
+    const value = formik.values?.[fieldName];
+
+    // 🔹 UI State
+    const [filteredOptions, setFilteredOptions] = useState<any[]>([]);
+    const [isCreating, setIsCreating] = useState(false);
+    const [inputValue, setInputValue] = useState(value || "");
+
+    // 🔹 Handle Autocommplete AJAX Fetching
+    const completeMethod = async (event: { query: string }) => {
+        try {
+            const query = event.query;
+            // Build the URL following the user's provided filter pattern
+
+            const filterPart = query
+                ? `&filters[$and][0][$or][0][${fieldName}][$containsi]=%${query}%`
+                : "";
+
+            const res = await solidGet(
+                `/api/list-of-values?&offset=0&limit=50&groupBy[0]=${fieldName}&aggregates[0]=id:count${filterPart}`
+            );
+
+            const extracted =
+                res?.data?.data?.groupMeta
+                    ?.filter((item: any) => item.groupValue != null)
+                    .map((item: any) => ({
+                        label: item.groupValue,
+                        value: item.groupValue
+                    })) || [];
+
+            setFilteredOptions(extracted);
+        } catch (err) {
+            console.error("Failed to fetch autocomplete suggestions", err);
+            setFilteredOptions([]);
+        }
+    };
+
+    // 🔹 Handle Change from Autocomplete
+    const handleAutocompleteChange = (e: { value: any }) => {
+        const selectedValue = typeof e.value === "object" ? e.value?.value : e.value;
+        formik.setFieldValue(fieldName, selectedValue);
+    };
+
+    // 🔹 Handle Input Submit (blur or enter)
+    const handleCreate = () => {
+        if (!inputValue.trim()) return;
+        formik.setFieldValue(fieldName, inputValue);
+        setIsCreating(false);
+    };
+
+    return (
+        <div className="solid-lov-type-change-widget w-full">
+            <div className="flex align-items-center justify-between  mb-2">
+                <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                    {fieldLabel}
+                </label>
+                <button
+                    type="button"
+                    onClick={() => {
+                        setIsCreating(!isCreating);
+                        if (!isCreating) setInputValue("");
+                    }}
+                    style={{ color: "blue", background: "transparent", border: 0 }}
+                >
+                    <SolidIcon name={isCreating ? "si-times" : "si-plus"} size={12} />
+                    <span>{isCreating ? "choose existing" : "add custom"}</span>
+                </button>
+            </div>
+
+            <div className="relative">
+                {!isCreating ? (
+                    <SolidAutocomplete
+                        value={value}
+                        suggestions={filteredOptions}
+                        completeMethod={completeMethod}
+                        onChange={handleAutocompleteChange}
+                        dropdown
+                        placeholder={`Select ${fieldLabel}`}
+                        className="w-full"
+                    />
+                ) : (
+                    <div className="flex gap-2">
+                        <SolidInput
+                            type="text"
+                            value={inputValue}
+                            autoFocus
+                            placeholder="Enter new type"
+                            className="flex-1 h-9"
+                            onChange={(e) => setInputValue(e.target.value)}
+                            onBlur={handleCreate}
+                            onKeyDown={(e) => {
+                                if (e.key === "Enter") {
+                                    handleCreate();
+                                }
+                                if (e.key === "Escape") {
+                                    setIsCreating(false);
+                                }
+                            }}
+                        />
+                    </div>
+                )}
+            </div>
+        </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"]}