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

package/dist/components/core/model/FieldSelector.d.ts

@@ -1,3 +1,7 @@
-declare const FieldSelector: ({ handleTypeSelect, modelMetaData }: any) => import("react/jsx-runtime").JSX.Element;
+type FieldSelectorProps = {
+    handleTypeSelect: (value: string, label: string) => void;
+    modelMetaData?: any;
+};
+declare const FieldSelector: ({ handleTypeSelect }: FieldSelectorProps) => import("react/jsx-runtime").JSX.Element;
 export default FieldSelector;
 //# sourceMappingURL=FieldSelector.d.ts.map

package/dist/components/core/model/FieldSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/core/model/FieldSelector.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,aAAa,wCAAyC,GAAG,4CAwD9D,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"FieldSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/core/model/FieldSelector.tsx"],"names":[],"mappings":"AA0BA,KAAK,kBAAkB,GAAG;IACxB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB,CAAC;AAwDF,QAAA,MAAM,aAAa,yBAA0B,kBAAkB,4CAoC9D,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/core/model/FieldSelector.js

@@ -1,36 +1,58 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useState } from "react";
+import { AlignLeft, Calculator, Calendar, Clock9, Code2, Feather, Fingerprint, FunctionSquare, Hash, Image, Images, ListChecks, ListFilter, Mail, Share2, Shield, Sigma, Timer, ToggleLeft, Type, } from "lucide-react";
+var fieldToneMap = {
+    int: "blue",
+    bigint: "blue",
+    decimal: "blue",
+    shortText: "violet",
+    longText: "violet",
+    richText: "violet",
+    json: "cyan",
+    boolean: "green",
+    date: "orange",
+    datetime: "orange",
+    time: "orange",
+    relation: "cyan",
+    mediaSingle: "violet",
+    mediaMultiple: "violet",
+    email: "cyan",
+    password: "cyan",
+    selectionStatic: "green",
+    selectionDynamic: "green",
+    computed: "blue",
+    uuid: "blue",
+};
+var solidFieldOptions = [
+    { label: "Integer", description: "Whole number (int)", Icon: Hash, value: "int", tone: fieldToneMap.int },
+    { label: "Big Integer", description: "Large whole number (bigint)", Icon: Calculator, value: "bigint", tone: fieldToneMap.bigint },
+    { label: "Decimal", description: "64-bit floating-point number", Icon: Sigma, value: "decimal", tone: fieldToneMap.decimal },
+    { label: "Short Text", description: "Small text field", Icon: Type, value: "shortText", tone: fieldToneMap.shortText },
+    { label: "Long Text", description: "Large text field", Icon: AlignLeft, value: "longText", tone: fieldToneMap.longText },
+    { label: "Rich Text", description: "Rich text editor", Icon: Feather, value: "richText", tone: fieldToneMap.richText },
+    { label: "JSON", description: "JSON data format", Icon: Code2, value: "json", tone: fieldToneMap.json },
+    { label: "Boolean", description: "True / False value", Icon: ToggleLeft, value: "boolean", tone: fieldToneMap.boolean },
+    { label: "Date", description: "Date field", Icon: Calendar, value: "date", tone: fieldToneMap.date },
+    { label: "Datetime", description: "Date & time field", Icon: Clock9, value: "datetime", tone: fieldToneMap.datetime },
+    { label: "Time", description: "Time picker", Icon: Timer, value: "time", tone: fieldToneMap.time },
+    { label: "Relation", description: "Reference another entity", Icon: Share2, value: "relation", tone: fieldToneMap.relation },
+    { label: "Single Media", description: "Single file upload", Icon: Image, value: "mediaSingle", tone: fieldToneMap.mediaSingle },
+    { label: "Multiple Media", description: "Multiple file upload", Icon: Images, value: "mediaMultiple", tone: fieldToneMap.mediaMultiple },
+    { label: "Email", description: "Email field", Icon: Mail, value: "email", tone: fieldToneMap.email },
+    { label: "Password", description: "Password input", Icon: Shield, value: "password", tone: fieldToneMap.password },
+    { label: "Static Selection", description: "Predefined values", Icon: ListChecks, value: "selectionStatic", tone: fieldToneMap.selectionStatic },
+    { label: "Dynamic Selection", description: "Dynamic list", Icon: ListFilter, value: "selectionDynamic", tone: fieldToneMap.selectionDynamic },
+    { label: "Computed", description: "Derive value from data", Icon: FunctionSquare, value: "computed", tone: fieldToneMap.computed },
+    { label: "UUID", description: "Unique identifier", Icon: Fingerprint, value: "uuid", tone: fieldToneMap.uuid },
+];
 var FieldSelector = function (_a) {
-    var handleTypeSelect = _a.handleTypeSelect, modelMetaData = _a.modelMetaData;
-    var _b = useState(null), selectedField = _b[0], setSelectedField = _b[1]; // To store the selected field
-    var solidFieldOptions = [
-        { label: 'Integer', description: 'A whole number (int)', icon: 'pi pi-hashtag', value: 'int' },
-        { label: 'Big Integer', description: 'A large whole number (bigint)', icon: 'pi pi-hashtag', value: 'bigint' },
-        // { label: 'Float', description: 'A floating-point number', icon: 'pi pi-sort-numeric-up', value: 'float' },
-        { label: 'Decimal', description: '64-bit floating-point numbers', icon: 'pi pi-sort-numeric-up', value: 'decimal' },
-        { label: 'Short Text', description: 'Small text field', icon: 'pi pi-align-left', value: 'shortText' },
-        { label: 'Long Text', description: 'A larger text field', icon: 'pi pi-align-justify', value: 'longText' },
-        { label: 'Rich Text', description: 'A rich text editor', icon: 'pi pi-pencil', value: 'richText' },
-        { label: 'JSON', description: 'JSON data format', icon: 'pi pi-code', value: 'json' },
-        { label: 'Boolean', description: 'True or false value', icon: 'pi pi-check', value: 'boolean' },
-        { label: 'Date', description: 'Date field', icon: 'pi pi-calendar', value: 'date' },
-        { label: 'Datetime', description: 'Date and time field', icon: 'pi pi-clock', value: 'datetime' },
-        { label: 'Time', description: 'Time picker', icon: 'pi pi-clock', value: 'time' },
-        { label: 'Relation', description: 'Reference to another entity', icon: 'pi pi-sitemap', value: 'relation' },
-        { label: 'Single Media', description: 'Single file upload (image, video)', icon: 'pi pi-image', value: 'mediaSingle' },
-        { label: 'Multiple Media', description: 'Multiple file upload', icon: 'pi pi-images', value: 'mediaMultiple' },
-        { label: 'Email', description: 'Email field', icon: 'pi pi-envelope', value: 'email' },
-        { label: 'Password', description: 'Password input field', icon: 'pi pi-lock', value: 'password' },
-        { label: 'Static Selection', description: 'Predefined selection of values', icon: 'pi pi-list', value: 'selectionStatic' },
-        { label: 'Dynamic Selection', description: 'Selection from a dynamic list', icon: 'pi pi-list', value: 'selectionDynamic' },
-        { label: 'Computed', description: 'A computed field based on other data', icon: 'pi pi-cog', value: 'computed' },
-        // { label: 'External ID', description: 'An external identifier', icon: 'pi pi-key', value: 'externalId' },
-        { label: 'UUID', description: 'Unique Identifier', icon: 'pi pi-key', value: 'uuid' }
-    ];
-    var handleFieldSelect = function (fieldValue) {
-        setSelectedField(fieldValue);
+    var handleTypeSelect = _a.handleTypeSelect;
+    var _b = useState(null), selectedField = _b[0], setSelectedField = _b[1];
+    var handleSelect = function (option) {
+        setSelectedField(option.value);
+        handleTypeSelect(option.value, option.label);
     };
-    return (_jsxs("div", { className: 'p-4', style: { height: '80vh', overflowY: 'scroll' }, children: [_jsx("p", { className: "form-wrapper-heading text-base m-0", children: "Select Field Type" }), _jsx("div", { className: 'formgrid grid', children: solidFieldOptions.map(function (field, index) { return (_jsx("div", { className: "field col-12  md:col-6 mt-3", children: _jsxs("div", { className: "flex align-items-center gap-3 type-field-card ".concat(selectedField === field.value ? 'selected' : ''), onClick: function () { return handleTypeSelect(field.value, field.label); }, children: [_jsx("i", { className: "pi ".concat(field.icon) }), _jsxs("div", { className: '', children: [_jsx("p", { className: 'text-sm m-0 font-bold', children: field.label }), _jsx("p", { className: 'text-xs', children: field.description })] })] }) }, index)); }) })] }));
+    return (_jsxs("div", { className: "solid-field-selector-container", children: [_jsxs("div", { className: "solid-field-selector-header", children: [_jsx("p", { className: "form-wrapper-heading", children: "Select Field Type" }), _jsx("p", { className: "solid-field-selector-subheading", children: "Choose the data type you want to add to the model." })] }), _jsx("div", { className: "solid-field-selector-grid", children: solidFieldOptions.map(function (option) { return (_jsx("button", { type: "button", className: "solid-field-selector-card ".concat(selectedField === option.value ? "is-active" : ""), onClick: function () { return handleSelect(option); }, children: _jsxs("div", { className: "solid-field-selector-card-inner", children: [_jsx("span", { className: "solid-field-selector-icon solid-field-selector-icon-".concat(option.tone), children: _jsx(option.Icon, { size: 18, strokeWidth: 1.8 }) }), _jsxs("div", { className: "solid-field-selector-text", children: [_jsx("span", { className: "solid-field-selector-title", children: option.label }), _jsx("span", { className: "solid-field-selector-description", children: option.description })] })] }) }, option.value)); }) })] }));
 };
 export default FieldSelector;
 //# sourceMappingURL=FieldSelector.js.map

package/dist/components/core/model/FieldSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldSelector.js","sourceRoot":"","sources":["../../../../src/components/core/model/FieldSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { useState } from 'react';\n\nconst FieldSelector = ({ handleTypeSelect, modelMetaData }: any) => {\n\n    const [selectedField, setSelectedField] = useState(null); // To store the selected field\n\n    const solidFieldOptions = [\n        { label: 'Integer', description: 'A whole number (int)', icon: 'pi pi-hashtag', value: 'int' },\n        { label: 'Big Integer', description: 'A large whole number (bigint)', icon: 'pi pi-hashtag', value: 'bigint' },\n        // { label: 'Float', description: 'A floating-point number', icon: 'pi pi-sort-numeric-up', value: 'float' },\n        { label: 'Decimal', description: '64-bit floating-point numbers', icon: 'pi pi-sort-numeric-up', value: 'decimal' },\n        { label: 'Short Text', description: 'Small text field', icon: 'pi pi-align-left', value: 'shortText' },\n        { label: 'Long Text', description: 'A larger text field', icon: 'pi pi-align-justify', value: 'longText' },\n        { label: 'Rich Text', description: 'A rich text editor', icon: 'pi pi-pencil', value: 'richText' },\n        { label: 'JSON', description: 'JSON data format', icon: 'pi pi-code', value: 'json' },\n        { label: 'Boolean', description: 'True or false value', icon: 'pi pi-check', value: 'boolean' },\n        { label: 'Date', description: 'Date field', icon: 'pi pi-calendar', value: 'date' },\n        { label: 'Datetime', description: 'Date and time field', icon: 'pi pi-clock', value: 'datetime' },\n        { label: 'Time', description: 'Time picker', icon: 'pi pi-clock', value: 'time' },\n        { label: 'Relation', description: 'Reference to another entity', icon: 'pi pi-sitemap', value: 'relation' },\n        { label: 'Single Media', description: 'Single file upload (image, video)', icon: 'pi pi-image', value: 'mediaSingle' },\n        { label: 'Multiple Media', description: 'Multiple file upload', icon: 'pi pi-images', value: 'mediaMultiple' },\n        { label: 'Email', description: 'Email field', icon: 'pi pi-envelope', value: 'email' },\n        { label: 'Password', description: 'Password input field', icon: 'pi pi-lock', value: 'password' },\n        { label: 'Static Selection', description: 'Predefined selection of values', icon: 'pi pi-list', value: 'selectionStatic' },\n        { label: 'Dynamic Selection', description: 'Selection from a dynamic list', icon: 'pi pi-list', value: 'selectionDynamic' },\n        { label: 'Computed', description: 'A computed field based on other data', icon: 'pi pi-cog', value: 'computed' },\n        // { label: 'External ID', description: 'An external identifier', icon: 'pi pi-key', value: 'externalId' },\n        { label: 'UUID', description: 'Unique Identifier', icon: 'pi pi-key', value: 'uuid' }\n\n    ];\n\n\n    const handleFieldSelect = (fieldValue: any) => {\n        setSelectedField(fieldValue);\n    };\n\n    return (\n        <div className='p-4' style={{ height: '80vh', overflowY: 'scroll' }}>\n            <p className=\"form-wrapper-heading text-base m-0\">Select Field Type</p>\n            <div className='formgrid grid'>\n                {solidFieldOptions.map((field, index) => (\n                    <div className=\"field col-12  md:col-6 mt-3\" key={index}>\n                        <div\n                            className={`flex align-items-center gap-3 type-field-card ${selectedField === field.value ? 'selected' : ''}`}\n                            onClick={() => handleTypeSelect(field.value, field.label)}\n                        >\n                            <i className={`pi ${field.icon}`}></i>\n                            <div className=''>\n                                <p className='text-sm m-0 font-bold'>{field.label}</p>\n                                <p className='text-xs'>{field.description}</p>\n                            </div>\n                        </div>\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n};\n\nexport default FieldSelector;\n"]}
+{"version":3,"file":"FieldSelector.js","sourceRoot":"","sources":["../../../../src/components/core/model/FieldSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { useState } from \"react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport {\n  AlignLeft,\n  Calculator,\n  Calendar,\n  Clock9,\n  Code2,\n  Feather,\n  Fingerprint,\n  FunctionSquare,\n  Hash,\n  Image,\n  Images,\n  ListChecks,\n  ListFilter,\n  Mail,\n  Share2,\n  Shield,\n  Sigma,\n  Timer,\n  ToggleLeft,\n  Type,\n} from \"lucide-react\";\n\ntype FieldSelectorProps = {\n  handleTypeSelect: (value: string, label: string) => void;\n  modelMetaData?: any;\n};\n\ntype FieldOption = {\n  label: string;\n  description: string;\n  Icon: LucideIcon;\n  value: string;\n  tone: \"blue\" | \"violet\" | \"green\" | \"orange\" | \"cyan\";\n};\n\nconst fieldToneMap: Record<string, FieldOption[\"tone\"]> = {\n  int: \"blue\",\n  bigint: \"blue\",\n  decimal: \"blue\",\n  shortText: \"violet\",\n  longText: \"violet\",\n  richText: \"violet\",\n  json: \"cyan\",\n  boolean: \"green\",\n  date: \"orange\",\n  datetime: \"orange\",\n  time: \"orange\",\n  relation: \"cyan\",\n  mediaSingle: \"violet\",\n  mediaMultiple: \"violet\",\n  email: \"cyan\",\n  password: \"cyan\",\n  selectionStatic: \"green\",\n  selectionDynamic: \"green\",\n  computed: \"blue\",\n  uuid: \"blue\",\n};\n\nconst solidFieldOptions: FieldOption[] = [\n  { label: \"Integer\", description: \"Whole number (int)\", Icon: Hash, value: \"int\", tone: fieldToneMap.int },\n  { label: \"Big Integer\", description: \"Large whole number (bigint)\", Icon: Calculator, value: \"bigint\", tone: fieldToneMap.bigint },\n  { label: \"Decimal\", description: \"64-bit floating-point number\", Icon: Sigma, value: \"decimal\", tone: fieldToneMap.decimal },\n  { label: \"Short Text\", description: \"Small text field\", Icon: Type, value: \"shortText\", tone: fieldToneMap.shortText },\n  { label: \"Long Text\", description: \"Large text field\", Icon: AlignLeft, value: \"longText\", tone: fieldToneMap.longText },\n  { label: \"Rich Text\", description: \"Rich text editor\", Icon: Feather, value: \"richText\", tone: fieldToneMap.richText },\n  { label: \"JSON\", description: \"JSON data format\", Icon: Code2, value: \"json\", tone: fieldToneMap.json },\n  { label: \"Boolean\", description: \"True / False value\", Icon: ToggleLeft, value: \"boolean\", tone: fieldToneMap.boolean },\n  { label: \"Date\", description: \"Date field\", Icon: Calendar, value: \"date\", tone: fieldToneMap.date },\n  { label: \"Datetime\", description: \"Date & time field\", Icon: Clock9, value: \"datetime\", tone: fieldToneMap.datetime },\n  { label: \"Time\", description: \"Time picker\", Icon: Timer, value: \"time\", tone: fieldToneMap.time },\n  { label: \"Relation\", description: \"Reference another entity\", Icon: Share2, value: \"relation\", tone: fieldToneMap.relation },\n  { label: \"Single Media\", description: \"Single file upload\", Icon: Image, value: \"mediaSingle\", tone: fieldToneMap.mediaSingle },\n  { label: \"Multiple Media\", description: \"Multiple file upload\", Icon: Images, value: \"mediaMultiple\", tone: fieldToneMap.mediaMultiple },\n  { label: \"Email\", description: \"Email field\", Icon: Mail, value: \"email\", tone: fieldToneMap.email },\n  { label: \"Password\", description: \"Password input\", Icon: Shield, value: \"password\", tone: fieldToneMap.password },\n  { label: \"Static Selection\", description: \"Predefined values\", Icon: ListChecks, value: \"selectionStatic\", tone: fieldToneMap.selectionStatic },\n  { label: \"Dynamic Selection\", description: \"Dynamic list\", Icon: ListFilter, value: \"selectionDynamic\", tone: fieldToneMap.selectionDynamic },\n  { label: \"Computed\", description: \"Derive value from data\", Icon: FunctionSquare, value: \"computed\", tone: fieldToneMap.computed },\n  { label: \"UUID\", description: \"Unique identifier\", Icon: Fingerprint, value: \"uuid\", tone: fieldToneMap.uuid },\n];\n\nconst FieldSelector = ({ handleTypeSelect }: FieldSelectorProps) => {\n  const [selectedField, setSelectedField] = useState<string | null>(null);\n\n  const handleSelect = (option: FieldOption) => {\n    setSelectedField(option.value);\n    handleTypeSelect(option.value, option.label);\n  };\n\n  return (\n    <div className=\"solid-field-selector-container\">\n      <div className=\"solid-field-selector-header\">\n        <p className=\"form-wrapper-heading\">Select Field Type</p>\n        <p className=\"solid-field-selector-subheading\">Choose the data type you want to add to the model.</p>\n      </div>\n      <div className=\"solid-field-selector-grid\">\n        {solidFieldOptions.map((option) => (\n          <button\n            key={option.value}\n            type=\"button\"\n            className={`solid-field-selector-card ${selectedField === option.value ? \"is-active\" : \"\"}`}\n            onClick={() => handleSelect(option)}\n          >\n            <div className=\"solid-field-selector-card-inner\">\n              <span className={`solid-field-selector-icon solid-field-selector-icon-${option.tone}`}>\n                <option.Icon size={18} strokeWidth={1.8} />\n              </span>\n              <div className=\"solid-field-selector-text\">\n                <span className=\"solid-field-selector-title\">{option.label}</span>\n                <span className=\"solid-field-selector-description\">{option.description}</span>\n              </div>\n            </div>\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default FieldSelector;\n"]}

package/dist/components/core/model/FieldSelector.tsx

@@ -1,62 +1,124 @@
 
-import { useState } from 'react';
-
-const FieldSelector = ({ handleTypeSelect, modelMetaData }: any) => {
-
-    const [selectedField, setSelectedField] = useState(null); // To store the selected field
-
-    const solidFieldOptions = [
-        { label: 'Integer', description: 'A whole number (int)', icon: 'pi pi-hashtag', value: 'int' },
-        { label: 'Big Integer', description: 'A large whole number (bigint)', icon: 'pi pi-hashtag', value: 'bigint' },
-        // { label: 'Float', description: 'A floating-point number', icon: 'pi pi-sort-numeric-up', value: 'float' },
-        { label: 'Decimal', description: '64-bit floating-point numbers', icon: 'pi pi-sort-numeric-up', value: 'decimal' },
-        { label: 'Short Text', description: 'Small text field', icon: 'pi pi-align-left', value: 'shortText' },
-        { label: 'Long Text', description: 'A larger text field', icon: 'pi pi-align-justify', value: 'longText' },
-        { label: 'Rich Text', description: 'A rich text editor', icon: 'pi pi-pencil', value: 'richText' },
-        { label: 'JSON', description: 'JSON data format', icon: 'pi pi-code', value: 'json' },
-        { label: 'Boolean', description: 'True or false value', icon: 'pi pi-check', value: 'boolean' },
-        { label: 'Date', description: 'Date field', icon: 'pi pi-calendar', value: 'date' },
-        { label: 'Datetime', description: 'Date and time field', icon: 'pi pi-clock', value: 'datetime' },
-        { label: 'Time', description: 'Time picker', icon: 'pi pi-clock', value: 'time' },
-        { label: 'Relation', description: 'Reference to another entity', icon: 'pi pi-sitemap', value: 'relation' },
-        { label: 'Single Media', description: 'Single file upload (image, video)', icon: 'pi pi-image', value: 'mediaSingle' },
-        { label: 'Multiple Media', description: 'Multiple file upload', icon: 'pi pi-images', value: 'mediaMultiple' },
-        { label: 'Email', description: 'Email field', icon: 'pi pi-envelope', value: 'email' },
-        { label: 'Password', description: 'Password input field', icon: 'pi pi-lock', value: 'password' },
-        { label: 'Static Selection', description: 'Predefined selection of values', icon: 'pi pi-list', value: 'selectionStatic' },
-        { label: 'Dynamic Selection', description: 'Selection from a dynamic list', icon: 'pi pi-list', value: 'selectionDynamic' },
-        { label: 'Computed', description: 'A computed field based on other data', icon: 'pi pi-cog', value: 'computed' },
-        // { label: 'External ID', description: 'An external identifier', icon: 'pi pi-key', value: 'externalId' },
-        { label: 'UUID', description: 'Unique Identifier', icon: 'pi pi-key', value: 'uuid' }
-
-    ];
-
-
-    const handleFieldSelect = (fieldValue: any) => {
-        setSelectedField(fieldValue);
-    };
-
-    return (
-        <div className='p-4' style={{ height: '80vh', overflowY: 'scroll' }}>
-            <p className="form-wrapper-heading text-base m-0">Select Field Type</p>
-            <div className='formgrid grid'>
-                {solidFieldOptions.map((field, index) => (
-                    <div className="field col-12  md:col-6 mt-3" key={index}>
-                        <div
-                            className={`flex align-items-center gap-3 type-field-card ${selectedField === field.value ? 'selected' : ''}`}
-                            onClick={() => handleTypeSelect(field.value, field.label)}
-                        >
-                            <i className={`pi ${field.icon}`}></i>
-                            <div className=''>
-                                <p className='text-sm m-0 font-bold'>{field.label}</p>
-                                <p className='text-xs'>{field.description}</p>
-                            </div>
-                        </div>
-                    </div>
-                ))}
+import { useState } from "react";
+import type { LucideIcon } from "lucide-react";
+import {
+  AlignLeft,
+  Calculator,
+  Calendar,
+  Clock9,
+  Code2,
+  Feather,
+  Fingerprint,
+  FunctionSquare,
+  Hash,
+  Image,
+  Images,
+  ListChecks,
+  ListFilter,
+  Mail,
+  Share2,
+  Shield,
+  Sigma,
+  Timer,
+  ToggleLeft,
+  Type,
+} from "lucide-react";
+
+type FieldSelectorProps = {
+  handleTypeSelect: (value: string, label: string) => void;
+  modelMetaData?: any;
+};
+
+type FieldOption = {
+  label: string;
+  description: string;
+  Icon: LucideIcon;
+  value: string;
+  tone: "blue" | "violet" | "green" | "orange" | "cyan";
+};
+
+const fieldToneMap: Record<string, FieldOption["tone"]> = {
+  int: "blue",
+  bigint: "blue",
+  decimal: "blue",
+  shortText: "violet",
+  longText: "violet",
+  richText: "violet",
+  json: "cyan",
+  boolean: "green",
+  date: "orange",
+  datetime: "orange",
+  time: "orange",
+  relation: "cyan",
+  mediaSingle: "violet",
+  mediaMultiple: "violet",
+  email: "cyan",
+  password: "cyan",
+  selectionStatic: "green",
+  selectionDynamic: "green",
+  computed: "blue",
+  uuid: "blue",
+};
+
+const solidFieldOptions: FieldOption[] = [
+  { label: "Integer", description: "Whole number (int)", Icon: Hash, value: "int", tone: fieldToneMap.int },
+  { label: "Big Integer", description: "Large whole number (bigint)", Icon: Calculator, value: "bigint", tone: fieldToneMap.bigint },
+  { label: "Decimal", description: "64-bit floating-point number", Icon: Sigma, value: "decimal", tone: fieldToneMap.decimal },
+  { label: "Short Text", description: "Small text field", Icon: Type, value: "shortText", tone: fieldToneMap.shortText },
+  { label: "Long Text", description: "Large text field", Icon: AlignLeft, value: "longText", tone: fieldToneMap.longText },
+  { label: "Rich Text", description: "Rich text editor", Icon: Feather, value: "richText", tone: fieldToneMap.richText },
+  { label: "JSON", description: "JSON data format", Icon: Code2, value: "json", tone: fieldToneMap.json },
+  { label: "Boolean", description: "True / False value", Icon: ToggleLeft, value: "boolean", tone: fieldToneMap.boolean },
+  { label: "Date", description: "Date field", Icon: Calendar, value: "date", tone: fieldToneMap.date },
+  { label: "Datetime", description: "Date & time field", Icon: Clock9, value: "datetime", tone: fieldToneMap.datetime },
+  { label: "Time", description: "Time picker", Icon: Timer, value: "time", tone: fieldToneMap.time },
+  { label: "Relation", description: "Reference another entity", Icon: Share2, value: "relation", tone: fieldToneMap.relation },
+  { label: "Single Media", description: "Single file upload", Icon: Image, value: "mediaSingle", tone: fieldToneMap.mediaSingle },
+  { label: "Multiple Media", description: "Multiple file upload", Icon: Images, value: "mediaMultiple", tone: fieldToneMap.mediaMultiple },
+  { label: "Email", description: "Email field", Icon: Mail, value: "email", tone: fieldToneMap.email },
+  { label: "Password", description: "Password input", Icon: Shield, value: "password", tone: fieldToneMap.password },
+  { label: "Static Selection", description: "Predefined values", Icon: ListChecks, value: "selectionStatic", tone: fieldToneMap.selectionStatic },
+  { label: "Dynamic Selection", description: "Dynamic list", Icon: ListFilter, value: "selectionDynamic", tone: fieldToneMap.selectionDynamic },
+  { label: "Computed", description: "Derive value from data", Icon: FunctionSquare, value: "computed", tone: fieldToneMap.computed },
+  { label: "UUID", description: "Unique identifier", Icon: Fingerprint, value: "uuid", tone: fieldToneMap.uuid },
+];
+
+const FieldSelector = ({ handleTypeSelect }: FieldSelectorProps) => {
+  const [selectedField, setSelectedField] = useState<string | null>(null);
+
+  const handleSelect = (option: FieldOption) => {
+    setSelectedField(option.value);
+    handleTypeSelect(option.value, option.label);
+  };
+
+  return (
+    <div className="solid-field-selector-container">
+      <div className="solid-field-selector-header">
+        <p className="form-wrapper-heading">Select Field Type</p>
+        <p className="solid-field-selector-subheading">Choose the data type you want to add to the model.</p>
+      </div>
+      <div className="solid-field-selector-grid">
+        {solidFieldOptions.map((option) => (
+          <button
+            key={option.value}
+            type="button"
+            className={`solid-field-selector-card ${selectedField === option.value ? "is-active" : ""}`}
+            onClick={() => handleSelect(option)}
+          >
+            <div className="solid-field-selector-card-inner">
+              <span className={`solid-field-selector-icon solid-field-selector-icon-${option.tone}`}>
+                <option.Icon size={18} strokeWidth={1.8} />
+              </span>
+              <div className="solid-field-selector-text">
+                <span className="solid-field-selector-title">{option.label}</span>
+                <span className="solid-field-selector-description">{option.description}</span>
+              </div>
             </div>
-        </div>
-    );
+          </button>
+        ))}
+      </div>
+    </div>
+  );
 };
 
 export default FieldSelector;

package/dist/components/core/model/ModelListViewData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModelListViewData.d.ts","sourceRoot":"","sources":["../../../../src/components/core/model/ModelListViewData.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB,+CAoW7B,CAAC"}
+{"version":3,"file":"ModelListViewData.d.ts","sourceRoot":"","sources":["../../../../src/components/core/model/ModelListViewData.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB;AASD,eAAO,MAAM,iBAAiB,+CAoT7B,CAAC"}