@solidxai/core-ui 0.1.12-beta.5 → 0.1.12-beta.6

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

@@ -868,7 +868,27 @@ const createValidationSchema = (currentFields: any, selectedType: any, allFields
   return Yup.object(schema);
 };
 
-const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldMetaData, allFields, deleteModelFunction, setVisiblePopup, params, setIsRequiredPopUp, showToaster }: any) => {
+const FieldMetaDataForm = ({
+  setIsDirty,
+  modelMetaData,
+  fieldMetaData,
+  setFieldMetaData,
+  allFields,
+  deleteModelFunction,
+  setVisiblePopup,
+  params,
+  setIsRequiredPopUp,
+  showToaster,
+  onDraftSubmit,
+  onClose,
+  availableFieldTypes,
+  forceShowTypeSelector = false,
+  selectorRequireContinue = false,
+  selectorContinueLabel = "Next",
+  selectorInitialFieldType = null,
+  disableIdentityEditingForExisting = true,
+  submitLabel = "Finish",
+}: any) => {
   const booleanOptions = ["false", "true"];
   const booleanSegmentedOptions = booleanOptions.map((value) => ({
     label: capitalize(value),
@@ -898,9 +918,13 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
   const [markdownText, setMarkdownText] = useState<string>();
   const [encryptState, setEncryptState] = useState<boolean>(Boolean(fieldMetaData?.encrypt));
 
-  const [showTypeFilter, setShowTypeFilter] = useState(fieldMetaData ? false : true);
+  const [showTypeFilter, setShowTypeFilter] = useState(forceShowTypeSelector || !fieldMetaData);
   const [selectedType, setSelectedType] = useState<{ label: string; value: string } | null>(
-    fieldMetaData?.type ? { label: fieldMetaData.type, value: fieldMetaData.type } : null
+    fieldMetaData?.type
+      ? { label: fieldMetaData.type, value: fieldMetaData.type }
+      : selectorInitialFieldType
+        ? { label: selectorInitialFieldType, value: selectorInitialFieldType }
+        : null
   );
   const selectedTypeValue = selectedType?.value || "";
   const [selectedComputedFieldValueType, setSelectedComputedFieldValueType] = useState(fieldMetaData?.computedFieldValueType && { label: fieldMetaData.computedFieldValueType, value: fieldMetaData.computedFieldValueType });
@@ -939,6 +963,18 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
   const showOrmOptions = currentFields.includes("ormType") && Boolean(ormTypeOptions && ormTypeOptions.length);
   const showValidationSection =
     selectedTypeValue !== "relation" && (showRegexFields || showMinFields || showMaxFields || showOrmOptions);
+  const isExistingFieldReadOnly = disableIdentityEditingForExisting && Boolean(fieldMetaData?.id);
+
+  const closeForm = useCallback(() => {
+    if (typeof onClose === "function") {
+      onClose();
+      return;
+    }
+
+    if (typeof setVisiblePopup === "function") {
+      setVisiblePopup(false);
+    }
+  }, [onClose, setVisiblePopup]);
 
   const searchMediaStorageProvIderId = async (event: any) => {
     try {
@@ -1395,34 +1431,37 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
     enableReinitialize: true,
     onSubmit: async (values) => {
       try {
-        setFieldMetaData((prevItems: any) => {
-          const newFieldData = { ...values, isSystem: values.isSystem == true ? true : '' }
-          const formtatedFieldPayload = fieldBasedPayloadFormating(newFieldData, currentFields, fieldMetaData);
-          const existingIndex = prevItems.findIndex((item: any) => item.identifier === formtatedFieldPayload.identifier);
-          let updatedItems;
-          if (existingIndex !== -1) {
-            updatedItems = [...prevItems];
-            updatedItems[existingIndex] = formtatedFieldPayload;
-            return updatedItems
-          }
-          else {
-            updatedItems = [...prevItems, formtatedFieldPayload];
-            if (params?.id !== 'new' && formtatedFieldPayload?.required && !formtatedFieldPayload?.defaultValue) {
-              setIsRequiredPopUp(true);
+        const newFieldData = { ...values, isSystem: values.isSystem == true ? true : '' }
+        const formtatedFieldPayload = fieldBasedPayloadFormating(newFieldData, currentFields, fieldMetaData);
+
+        if (typeof onDraftSubmit === "function") {
+          onDraftSubmit(formtatedFieldPayload);
+        } else {
+          setFieldMetaData((prevItems: any) => {
+            const existingIndex = prevItems.findIndex((item: any) => item.identifier === formtatedFieldPayload.identifier);
+            let updatedItems;
+            if (existingIndex !== -1) {
+              updatedItems = [...prevItems];
+              updatedItems[existingIndex] = formtatedFieldPayload;
+              return updatedItems
             }
-            // return [...prevItems, formtatedFieldPayload]
-          }
-          return updatedItems;
-        });
-        if (values.userKey) {
-          const data = {
-            modelName: values.relationCoModelSingularName,
-            fieldName: values.userKey
+            else {
+              updatedItems = [...prevItems, formtatedFieldPayload];
+              if (params?.id !== 'new' && formtatedFieldPayload?.required && !formtatedFieldPayload?.defaultValue) {
+                setIsRequiredPopUp(true);
+              }
+            }
+            return updatedItems;
+          });
+          if (values.userKey) {
+            const data = {
+              modelName: values.relationCoModelSingularName,
+              fieldName: values.userKey
+            }
+            updateUserKey(data);
           }
-          updateUserKey(data);
         }
-        // nextTab()
-        setVisiblePopup(false);
+        closeForm();
 
       } catch (err) {
         console.error(ERROR_MESSAGES.CREATE_MODEL, err);
@@ -1773,6 +1812,10 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
             <FieldSelector
               handleTypeSelect={handleTypeSelect}
               modelMetaData={modelMetaData}
+              availableFieldTypes={availableFieldTypes}
+              initialSelectedValue={selectedType?.value ?? selectorInitialFieldType}
+              requireExplicitContinue={selectorRequireContinue}
+              continueLabel={selectorContinueLabel}
             ></FieldSelector>
             :
             <div className="p-3" style={{ maxHeight: '80vh', overflowY: 'auto', overflowX: 'hidden' }}>
@@ -1795,7 +1838,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                             </label>
                             <SolidInput
                               type="text"
-                              disabled={fieldMetaData?.id}
+                              disabled={isExistingFieldReadOnly}
                               id="displayName"
                               name="displayName"
                               onChange={(e) => {
@@ -1823,7 +1866,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                               Name
                             </label>
                             <SolidInput
-                              disabled={fieldMetaData?.id}
+                              disabled={isExistingFieldReadOnly}
                               type="text"
                               id="name"
                               name="name"
@@ -1878,7 +1921,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                                   }
                                 }}
                                 checked={showColumnName}
-                                disabled={fieldMetaData?.id}
+                                disabled={isExistingFieldReadOnly}
                               />
                               <label htmlFor="ingredient1" className="form-field-label">
                                 Set Column Name
@@ -1890,7 +1933,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                                   Column Name
                                 </label>
                                 <SolidInput
-                                  disabled={fieldMetaData?.id}
+                                  disabled={isExistingFieldReadOnly}
                                   type="text"
                                   id="columnName"
                                   name="columnName"
@@ -2389,7 +2432,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                                 id="relationCoModelColumnName"
                                 name="relationCoModelColumnName"
                                 onChange={formik.handleChange}
-                                disabled={fieldMetaData?.id}
+                                disabled={isExistingFieldReadOnly}
                                 value={formik.values.relationCoModelColumnName}
                                 className={classNames(styles.fieldInput, {
                                   "p-invalid": isFormFieldValid(
@@ -2528,7 +2571,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                                 id="relationCoModelFieldName"
                                 name="relationCoModelFieldName"
                                 onChange={formik.handleChange}
-                                disabled={fieldMetaData?.id}
+                                disabled={isExistingFieldReadOnly}
                                 value={formik.values.relationCoModelFieldName}
                                 className={classNames(styles.fieldInput, {
                                   "p-invalid": isFormFieldValid(
@@ -2598,7 +2641,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                                 id="relationJoinTableName"
                                 name="relationJoinTableName"
                                 onChange={formik.handleChange}
-                                disabled={fieldMetaData?.id}
+                                disabled={isExistingFieldReadOnly}
                                 value={formik.values.relationJoinTableName}
                                 className={classNames(styles.fieldInput, {
                                   "p-invalid": isFormFieldValid(
@@ -3050,7 +3093,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                                             "min"
                                           ),
                                         })}
-                                        disabled={fieldMetaData?.id}
+                                        disabled={isExistingFieldReadOnly}
                                       />
                                     </div>
                                     {isFormFieldValid(formik, "min") && (
@@ -3088,7 +3131,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                                             "max"
                                           ),
                                         })}
-                                        disabled={fieldMetaData?.id}
+                                        disabled={isExistingFieldReadOnly}
                                       />
                                     </div>
 
@@ -3447,10 +3490,10 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                   </TabView>
                   <div className="mt-4 flex gap-4">
                     <div>
-                      <SolidButton label="Finish" size="small" onClick={() => showError()} type="submit" />
+                      <SolidButton label={submitLabel} size="small" onClick={() => showError()} type="submit" />
                     </div>
                     <div>
-                      <SolidButton label="Cancel" size="small" severity="secondary" type="reset" onClick={() => setVisiblePopup(false)} outlined />
+                      <SolidButton label="Cancel" size="small" severity="secondary" type="reset" onClick={closeForm} outlined />
                     </div>
                   </div>
                 </div>

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

@@ -1,7 +1,11 @@
 type FieldSelectorProps = {
     handleTypeSelect: (value: string, label: string) => void;
     modelMetaData?: any;
+    availableFieldTypes?: string[];
+    initialSelectedValue?: string | null;
+    requireExplicitContinue?: boolean;
+    continueLabel?: string;
 };
-declare const FieldSelector: ({ handleTypeSelect }: FieldSelectorProps) => import("react/jsx-runtime").JSX.Element;
+declare const FieldSelector: ({ handleTypeSelect, availableFieldTypes, initialSelectedValue, requireExplicitContinue, continueLabel, }: 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":"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"}
+{"version":3,"file":"FieldSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/core/model/FieldSelector.tsx"],"names":[],"mappings":"AA4BA,KAAK,kBAAkB,GAAG;IACxB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAwDF,QAAA,MAAM,aAAa,6GAMhB,kBAAkB,4CAqEpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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";
+import { useEffect, useMemo, useState } from "react";
+import { AlignLeft, Calculator, Calendar, Clock9, Code2, Feather, Fingerprint, FunctionSquare, Hash, Image, Images, ListChecks, ListFilter, Mail, Share2, Shield, Sigma, Timer, ToggleLeft, Type, ArrowRight, } from "lucide-react";
+import { SolidButton } from "../../shad-cn-ui";
 var fieldToneMap = {
     int: "blue",
     bigint: "blue",
@@ -46,13 +47,31 @@ var solidFieldOptions = [
     { label: "UUID", description: "Unique identifier", Icon: Fingerprint, value: "uuid", tone: fieldToneMap.uuid },
 ];
 var FieldSelector = function (_a) {
-    var handleTypeSelect = _a.handleTypeSelect;
-    var _b = useState(null), selectedField = _b[0], setSelectedField = _b[1];
+    var handleTypeSelect = _a.handleTypeSelect, availableFieldTypes = _a.availableFieldTypes, _b = _a.initialSelectedValue, initialSelectedValue = _b === void 0 ? null : _b, _c = _a.requireExplicitContinue, requireExplicitContinue = _c === void 0 ? false : _c, _d = _a.continueLabel, continueLabel = _d === void 0 ? "Next" : _d;
+    var _e = useState(initialSelectedValue), selectedField = _e[0], setSelectedField = _e[1];
+    useEffect(function () {
+        setSelectedField(initialSelectedValue);
+    }, [initialSelectedValue]);
+    var visibleFieldOptions = useMemo(function () {
+        if (!(availableFieldTypes === null || availableFieldTypes === void 0 ? void 0 : availableFieldTypes.length)) {
+            return solidFieldOptions;
+        }
+        var allowedTypes = new Set(availableFieldTypes);
+        return solidFieldOptions.filter(function (option) { return allowedTypes.has(option.value); });
+    }, [availableFieldTypes]);
     var handleSelect = function (option) {
         setSelectedField(option.value);
-        handleTypeSelect(option.value, option.label);
+        if (!requireExplicitContinue) {
+            handleTypeSelect(option.value, option.label);
+        }
     };
-    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)); }) })] }));
+    var handleContinue = function () {
+        var selectedOption = visibleFieldOptions.find(function (option) { return option.value === selectedField; });
+        if (!selectedOption)
+            return;
+        handleTypeSelect(selectedOption.value, selectedOption.label);
+    };
+    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: visibleFieldOptions.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)); }) }), requireExplicitContinue ? (_jsx("div", { className: "mt-4 flex justify-end", children: _jsx(SolidButton, { size: "small", leftIcon: _jsx(ArrowRight, { size: 14 }), onClick: handleContinue, disabled: !selectedField, children: continueLabel }) })) : null] }));
 };
 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\";\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"]}
+{"version":3,"file":"FieldSelector.js","sourceRoot":"","sources":["../../../../src/components/core/model/FieldSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { useEffect, useMemo, 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  ArrowRight,\n} from \"lucide-react\";\nimport { SolidButton } from \"../../shad-cn-ui\";\n\ntype FieldSelectorProps = {\n  handleTypeSelect: (value: string, label: string) => void;\n  modelMetaData?: any;\n  availableFieldTypes?: string[];\n  initialSelectedValue?: string | null;\n  requireExplicitContinue?: boolean;\n  continueLabel?: string;\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 = ({\n  handleTypeSelect,\n  availableFieldTypes,\n  initialSelectedValue = null,\n  requireExplicitContinue = false,\n  continueLabel = \"Next\",\n}: FieldSelectorProps) => {\n  const [selectedField, setSelectedField] = useState<string | null>(initialSelectedValue);\n\n  useEffect(() => {\n    setSelectedField(initialSelectedValue);\n  }, [initialSelectedValue]);\n\n  const visibleFieldOptions = useMemo(() => {\n    if (!availableFieldTypes?.length) {\n      return solidFieldOptions;\n    }\n\n    const allowedTypes = new Set(availableFieldTypes);\n    return solidFieldOptions.filter((option) => allowedTypes.has(option.value));\n  }, [availableFieldTypes]);\n\n  const handleSelect = (option: FieldOption) => {\n    setSelectedField(option.value);\n    if (!requireExplicitContinue) {\n      handleTypeSelect(option.value, option.label);\n    }\n  };\n\n  const handleContinue = () => {\n    const selectedOption = visibleFieldOptions.find((option) => option.value === selectedField);\n    if (!selectedOption) return;\n    handleTypeSelect(selectedOption.value, selectedOption.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        {visibleFieldOptions.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      {requireExplicitContinue ? (\n        <div className=\"mt-4 flex justify-end\">\n          <SolidButton\n            size=\"small\"\n            leftIcon={<ArrowRight size={14} />}\n            onClick={handleContinue}\n            disabled={!selectedField}\n          >\n            {continueLabel}\n          </SolidButton>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default FieldSelector;\n"]}

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

@@ -1,5 +1,5 @@
 
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import type { LucideIcon } from "lucide-react";
 import {
   AlignLeft,
@@ -22,11 +22,17 @@ import {
   Timer,
   ToggleLeft,
   Type,
+  ArrowRight,
 } from "lucide-react";
+import { SolidButton } from "../../shad-cn-ui";
 
 type FieldSelectorProps = {
   handleTypeSelect: (value: string, label: string) => void;
   modelMetaData?: any;
+  availableFieldTypes?: string[];
+  initialSelectedValue?: string | null;
+  requireExplicitContinue?: boolean;
+  continueLabel?: string;
 };
 
 type FieldOption = {
@@ -83,12 +89,39 @@ const solidFieldOptions: FieldOption[] = [
   { label: "UUID", description: "Unique identifier", Icon: Fingerprint, value: "uuid", tone: fieldToneMap.uuid },
 ];
 
-const FieldSelector = ({ handleTypeSelect }: FieldSelectorProps) => {
-  const [selectedField, setSelectedField] = useState<string | null>(null);
+const FieldSelector = ({
+  handleTypeSelect,
+  availableFieldTypes,
+  initialSelectedValue = null,
+  requireExplicitContinue = false,
+  continueLabel = "Next",
+}: FieldSelectorProps) => {
+  const [selectedField, setSelectedField] = useState<string | null>(initialSelectedValue);
+
+  useEffect(() => {
+    setSelectedField(initialSelectedValue);
+  }, [initialSelectedValue]);
+
+  const visibleFieldOptions = useMemo(() => {
+    if (!availableFieldTypes?.length) {
+      return solidFieldOptions;
+    }
+
+    const allowedTypes = new Set(availableFieldTypes);
+    return solidFieldOptions.filter((option) => allowedTypes.has(option.value));
+  }, [availableFieldTypes]);
 
   const handleSelect = (option: FieldOption) => {
     setSelectedField(option.value);
-    handleTypeSelect(option.value, option.label);
+    if (!requireExplicitContinue) {
+      handleTypeSelect(option.value, option.label);
+    }
+  };
+
+  const handleContinue = () => {
+    const selectedOption = visibleFieldOptions.find((option) => option.value === selectedField);
+    if (!selectedOption) return;
+    handleTypeSelect(selectedOption.value, selectedOption.label);
   };
 
   return (
@@ -98,7 +131,7 @@ const FieldSelector = ({ handleTypeSelect }: FieldSelectorProps) => {
         <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) => (
+        {visibleFieldOptions.map((option) => (
           <button
             key={option.value}
             type="button"
@@ -117,6 +150,18 @@ const FieldSelector = ({ handleTypeSelect }: FieldSelectorProps) => {
           </button>
         ))}
       </div>
+      {requireExplicitContinue ? (
+        <div className="mt-4 flex justify-end">
+          <SolidButton
+            size="small"
+            leftIcon={<ArrowRight size={14} />}
+            onClick={handleContinue}
+            disabled={!selectedField}
+          >
+            {continueLabel}
+          </SolidButton>
+        </div>
+      ) : null}
     </div>
   );
 };

package/dist/components/layout/DashboardHeader.d.ts

@@ -0,0 +1,3 @@
+declare const DashboardHeader: () => import("react/jsx-runtime").JSX.Element;
+export default DashboardHeader;
+//# sourceMappingURL=DashboardHeader.d.ts.map

package/dist/components/layout/DashboardHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardHeader.d.ts","sourceRoot":"","sources":["../../../src/components/layout/DashboardHeader.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,eAAe,+CAuFpB,CAAA;AACD,eAAe,eAAe,CAAC"}

package/dist/components/layout/DashboardHeader.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { SolidButton, SolidPopover, SolidPopoverContent, SolidPopoverTrigger } from "../shad-cn-ui";
+import { SolidIcon, parseSolidIconMeta } from "../shad-cn-ui/SolidIcon";
+var DashboardHeader = function () {
+    var _a = useState(false), menuOpen = _a[0], setMenuOpen = _a[1];
+    var items = [
+        {
+            label: 'Refresh',
+            icon: 'pi pi-refresh'
+        },
+        {
+            label: 'Export',
+            icon: 'pi pi-upload'
+        }
+    ];
+    return (_jsxs("div", { className: "flex justify-content-between  align-items-center px-5 surface-0 border-bottom-1 surface-border relative lg:static", style: { height: "60px" }, children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(SolidButton, { label: "New", size: "sm", type: "submit", className: "small-button" }), _jsxs(SolidPopover, { open: menuOpen, onOpenChange: setMenuOpen, children: [_jsx(SolidPopoverTrigger, { asChild: true, children: _jsx(SolidButton, { type: "button", icon: "pi pi-cog", variant: "ghost", size: "sm", className: "ml-2" }) }), _jsx(SolidPopoverContent, { side: "bottom", align: "start", className: "solid-form-actions-popover", children: _jsx("div", { className: "solid-row-actions-menu", children: items.map(function (item) { return (_jsxs("button", { type: "button", className: "solid-row-action-button", onClick: function () { return setMenuOpen(false); }, children: [(function () { var m = parseSolidIconMeta(item.icon); return m ? _jsx(SolidIcon, { name: m.name, spin: m.spin, className: "solid-row-action-button-icon" }) : _jsx("i", { className: "".concat(item.icon, " solid-row-action-button-icon") }); })(), _jsx("span", { className: "solid-row-action-button-label", children: item.label })] }, item.label)); }) }) })] })] }), _jsxs("div", { className: "flex align-items-center", children: [_jsx("div", { className: "bgCircle", children: _jsxs("div", { style: { position: "relative" }, children: [_jsx(SolidIcon, { name: "si-bell" }), _jsx("span", { className: "topbar-badge" })] }) }), _jsx("div", { className: "bgCircle ml-3", children: _jsxs("div", { style: { position: "relative" }, children: [_jsx(SolidIcon, { name: "si-envelope" }), _jsx("span", { className: "topbar-badge" })] }) }), _jsxs("div", { className: "topbar-profile", children: [_jsxs("button", { className: "topbar-profile-button p-link", type: "button", children: [_jsx("img", { alt: "avatar", src: "/images/dashboard/Ellipse 1.svg" }), _jsxs("span", { className: "profile-details", children: [_jsx("span", { className: "profile-name", children: "Gene Russell" }), _jsx("span", { className: "profile-email", children: "ben95@example.com" })] }), _jsx(SolidIcon, { name: "si-angle-down" })] }), _jsx("ul", { className: "list-none p-3 m-0 border-round shadow-2 absolute surface-overlay origin-top w-full sm:w-12rem mt-2 right-0 top-auto hidden", children: _jsxs("li", { children: [_jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx(SolidIcon, { name: "si-user", className: "mr-3" }), _jsx("span", { children: "Profile" })] }), _jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx(SolidIcon, { name: "si-inbox", className: "mr-3" }), _jsx("span", { children: "Inbox" })] }), _jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx(SolidIcon, { name: "si-cog", className: "mr-3" }), _jsx("span", { children: "Settings" })] }), _jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx(SolidIcon, { name: "si-power-off", className: "mr-3" }), _jsx("span", { children: "Sign Out" })] })] }) })] })] })] }));
+};
+export default DashboardHeader;
+//# sourceMappingURL=DashboardHeader.js.map

package/dist/components/layout/DashboardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardHeader.js","sourceRoot":"","sources":["../../../src/components/layout/DashboardHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { useState } from \"react\";\nimport { SolidButton, SolidPopover, SolidPopoverContent, SolidPopoverTrigger } from \"../shad-cn-ui\";\nimport { SolidIcon, parseSolidIconMeta } from \"../shad-cn-ui/SolidIcon\";\n\nconst DashboardHeader = () => {\n\n    const [menuOpen, setMenuOpen] = useState(false);\n    const items = [\n        {\n            label: 'Refresh',\n            icon: 'pi pi-refresh'\n        },\n        {\n            label: 'Export',\n            icon: 'pi pi-upload'\n        }\n    ];\n\n    return (\n        <div className=\"flex justify-content-between  align-items-center px-5 surface-0 border-bottom-1 surface-border relative lg:static\" style={{ height: \"60px\" }}>\n            <div className=\"flex align-items-center\">\n                <SolidButton label=\"New\" size=\"sm\" type=\"submit\" className=\"small-button\" />\n                <SolidPopover open={menuOpen} onOpenChange={setMenuOpen}>\n                    <SolidPopoverTrigger asChild>\n                        <SolidButton\n                            type=\"button\"\n                            icon=\"pi pi-cog\"\n                            variant=\"ghost\"\n                            size=\"sm\"\n                            className=\"ml-2\"\n                        />\n                    </SolidPopoverTrigger>\n                    <SolidPopoverContent side=\"bottom\" align=\"start\" className=\"solid-form-actions-popover\">\n                        <div className=\"solid-row-actions-menu\">\n                            {items.map((item) => (\n                                <button key={item.label} type=\"button\" className=\"solid-row-action-button\" onClick={() => setMenuOpen(false)}>\n                                    {(() => { const m = parseSolidIconMeta(item.icon); return m ? <SolidIcon name={m.name} spin={m.spin} className=\"solid-row-action-button-icon\" /> : <i className={`${item.icon} solid-row-action-button-icon`} />; })()}\n                                    <span className=\"solid-row-action-button-label\">{item.label}</span>\n                                </button>\n                            ))}\n                        </div>\n                    </SolidPopoverContent>\n                </SolidPopover>\n            </div>\n            <div className=\"flex align-items-center\">\n                <div className=\"bgCircle\">\n                    <div style={{ position: \"relative\" }}>\n                        <SolidIcon name=\"si-bell\" />\n                        <span className=\"topbar-badge\">\n                        </span>\n                    </div>\n                </div>\n                <div className=\"bgCircle ml-3\">\n                    <div style={{ position: \"relative\" }}>\n                        <SolidIcon name=\"si-envelope\" />\n                        <span className=\"topbar-badge\">\n                        </span>\n                    </div>\n                </div>\n                <div className=\"topbar-profile\">\n                    <button className=\"topbar-profile-button p-link\" type=\"button\">\n                        <img alt=\"avatar\" src=\"/images/dashboard/Ellipse 1.svg\" />\n                        <span className=\"profile-details\">\n                            <span className=\"profile-name\">Gene Russell</span>\n                            <span className=\"profile-email\">ben95@example.com</span>\n                        </span>\n                        <SolidIcon name=\"si-angle-down\" />\n                    </button>\n                    <ul className=\"list-none p-3 m-0 border-round shadow-2 absolute surface-overlay origin-top w-full sm:w-12rem mt-2 right-0 top-auto hidden\">\n                        <li>\n                            <a className=\"p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer\">\n                                <SolidIcon name=\"si-user\" className=\"mr-3\" />\n                                <span>Profile</span>\n                            </a>\n                            <a className=\"p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer\">\n                                <SolidIcon name=\"si-inbox\" className=\"mr-3\" />\n                                <span>Inbox</span></a>\n                            <a className=\"p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer\">\n                                <SolidIcon name=\"si-cog\" className=\"mr-3\" />\n                                <span>Settings</span>\n                            </a>\n                            <a className=\"p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer\">\n                                <SolidIcon name=\"si-power-off\" className=\"mr-3\" />\n                                <span>Sign Out</span>\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    );\n}\nexport default DashboardHeader;\n"]}

package/dist/components/layout/DashboardHeader.tsx

@@ -0,0 +1,94 @@
+
+import { useState } from "react";
+import { SolidButton, SolidPopover, SolidPopoverContent, SolidPopoverTrigger } from "../shad-cn-ui";
+import { SolidIcon, parseSolidIconMeta } from "../shad-cn-ui/SolidIcon";
+
+const DashboardHeader = () => {
+
+    const [menuOpen, setMenuOpen] = useState(false);
+    const items = [
+        {
+            label: 'Refresh',
+            icon: 'pi pi-refresh'
+        },
+        {
+            label: 'Export',
+            icon: 'pi pi-upload'
+        }
+    ];
+
+    return (
+        <div className="flex justify-content-between  align-items-center px-5 surface-0 border-bottom-1 surface-border relative lg:static" style={{ height: "60px" }}>
+            <div className="flex align-items-center">
+                <SolidButton label="New" size="sm" type="submit" className="small-button" />
+                <SolidPopover open={menuOpen} onOpenChange={setMenuOpen}>
+                    <SolidPopoverTrigger asChild>
+                        <SolidButton
+                            type="button"
+                            icon="pi pi-cog"
+                            variant="ghost"
+                            size="sm"
+                            className="ml-2"
+                        />
+                    </SolidPopoverTrigger>
+                    <SolidPopoverContent side="bottom" align="start" className="solid-form-actions-popover">
+                        <div className="solid-row-actions-menu">
+                            {items.map((item) => (
+                                <button key={item.label} type="button" className="solid-row-action-button" onClick={() => setMenuOpen(false)}>
+                                    {(() => { const m = parseSolidIconMeta(item.icon); return m ? <SolidIcon name={m.name} spin={m.spin} className="solid-row-action-button-icon" /> : <i className={`${item.icon} solid-row-action-button-icon`} />; })()}
+                                    <span className="solid-row-action-button-label">{item.label}</span>
+                                </button>
+                            ))}
+                        </div>
+                    </SolidPopoverContent>
+                </SolidPopover>
+            </div>
+            <div className="flex align-items-center">
+                <div className="bgCircle">
+                    <div style={{ position: "relative" }}>
+                        <SolidIcon name="si-bell" />
+                        <span className="topbar-badge">
+                        </span>
+                    </div>
+                </div>
+                <div className="bgCircle ml-3">
+                    <div style={{ position: "relative" }}>
+                        <SolidIcon name="si-envelope" />
+                        <span className="topbar-badge">
+                        </span>
+                    </div>
+                </div>
+                <div className="topbar-profile">
+                    <button className="topbar-profile-button p-link" type="button">
+                        <img alt="avatar" src="/images/dashboard/Ellipse 1.svg" />
+                        <span className="profile-details">
+                            <span className="profile-name">Gene Russell</span>
+                            <span className="profile-email">ben95@example.com</span>
+                        </span>
+                        <SolidIcon name="si-angle-down" />
+                    </button>
+                    <ul className="list-none p-3 m-0 border-round shadow-2 absolute surface-overlay origin-top w-full sm:w-12rem mt-2 right-0 top-auto hidden">
+                        <li>
+                            <a className="p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer">
+                                <SolidIcon name="si-user" className="mr-3" />
+                                <span>Profile</span>
+                            </a>
+                            <a className="p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer">
+                                <SolidIcon name="si-inbox" className="mr-3" />
+                                <span>Inbox</span></a>
+                            <a className="p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer">
+                                <SolidIcon name="si-cog" className="mr-3" />
+                                <span>Settings</span>
+                            </a>
+                            <a className="p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer">
+                                <SolidIcon name="si-power-off" className="mr-3" />
+                                <span>Sign Out</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+}
+export default DashboardHeader;

package/dist/components/shad-cn-ui/SolidSelect.d.ts

@@ -12,7 +12,8 @@ type SolidSelectProps = {
     }) => void;
     id?: string;
     native?: boolean;
+    menuPlacement?: "auto" | "top" | "bottom";
 };
-export declare function SolidSelect({ value, options, optionLabel, optionValue, placeholder, className, disabled, onChange, id, native, }: SolidSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function SolidSelect({ value, options, optionLabel, optionValue, placeholder, className, disabled, onChange, id, native, menuPlacement, }: SolidSelectProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=SolidSelect.d.ts.map

package/dist/components/shad-cn-ui/SolidSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidSelect.d.ts","sourceRoot":"","sources":["../../../src/components/shad-cn-ui/SolidSelect.tsx"],"names":[],"mappings":"AAGA,KAAK,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE7C,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,GAAG,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAMF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAY,EACZ,WAAqB,EACrB,WAAqB,EACrB,WAAW,EACX,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,MAAa,GACd,EAAE,gBAAgB,2CAiIlB"}
+{"version":3,"file":"SolidSelect.d.ts","sourceRoot":"","sources":["../../../src/components/shad-cn-ui/SolidSelect.tsx"],"names":[],"mappings":"AAGA,KAAK,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE7C,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,GAAG,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;CAC3C,CAAC;AAMF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAY,EACZ,WAAqB,EACrB,WAAqB,EACrB,WAAW,EACX,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,MAAa,EACb,aAAsB,GACvB,EAAE,gBAAgB,2CA2IlB"}