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

package/dist/components/core/locales/SolidChatterLocaleTabView.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidChatterLocaleTabView.js","sourceRoot":"","sources":["../../../../src/components/core/locales/SolidChatterLocaleTabView.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAoBpE,IAAM,yBAAyB,GAAoB,UAAC,EAgBnD;;QAfC,qBAAqB,2BAAA,EACrB,EAAE,QAAA,EACF,qBAAqB,2BAAA,EACrB,wBAAwB,8BAAA,EACxB,cAAc,oBAAA,EACd,iBAAiB,uBAAA,EACjB,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,0BAA0B,gCAAA,EAC1B,qBAAqB,2BAAA,EACrB,iBAAiB,uBAAA,EACjB,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,MAAM,YAAA;IAQN,OAAO,CACL,MAAC,OAAO,IAAC,SAAS,EAAC,uCAAuC,EAAC,WAAW,EAAE,SAAS,aAC9E,CAAA,MAAA,MAAA,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,IAAI,0CAAE,SAAS,0CAAE,KAAK,0CAAE,oBAAoB;gBAClE,KAAC,QAAQ,IAAC,MAAM,EAAC,MAAM,EAAC,SAAS,EAAE,0BAA0B,YAC3D,KAAC,WAAW,IACV,iBAAiB,EAAE,iBAAiB,EACpC,qBAAqB,EAAE,qBAAqB,EAC5C,cAAc,EAAE,cAAc,EAC9B,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,0BAA0B,EAAE,0BAA0B,EACtD,qBAAqB,EAAE,qBAAqB,EAC5C,iBAAiB,EAAE,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,IAAI,0CAAE,iBAAiB,EACjE,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,SAAS,GACpB,GACO,EAEb,KAAC,QAAQ,IAAC,MAAM,EAAC,aAAa,EAAC,SAAS,EAAE,sBAAsB,EAAE,eAAe,EAAC,KAAK,YACrF,KAAC,YAAY,IACX,iBAAiB,EAAE,MAAA,MAAA,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,IAAI,0CAAE,SAAS,0CAAE,KAAK,0CAAE,YAAY,EAC9E,EAAE,EAAE,EAAE,EACN,qBAAqB,EAAE,qBAAqB,EAC5C,wBAAwB,EAAE,wBAAwB,EAClD,cAAc,EAAE,cAAc,GAC9B,GACO,EAET,MAAM;gBACN,CACE,KAAC,QAAQ,IAAC,MAAM,EAAC,WAAW,EAAC,SAAS,EAAE,2BAA2B,EAAE,gBAAgB,EAAC,QAAQ,YAC5F,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,oBAAoB,EAAE,YAC1C,KAAC,kBAAkB,IAAC,MAAM,EAAE,MAAM,GAAI,GAClC,GACG,CACZ,IAEK,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,yBAAyB,CAAC","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { TabView, TabPanel } from 'primereact/tabview';\nimport { SolidChatter } from '../chatter/SolidChatter';\nimport SolidLocale from './SolidLocale';\nimport './solid-locale.css';\nimport { SolidAiMainWrapper } from '../solid-ai/SolidAiMainWrapper';\ninterface Props {\n  solidFormViewMetaData: any;\n  id: string;\n  refreshChatterMessage: boolean;\n  setRefreshChatterMessage: (value: boolean) => void;\n  activeTab: number;\n  selectedLocale: string | null;\n  setSelectedLocale: (locale: string | null) => void;\n  viewMode: string;\n  createMode: boolean;\n  //setDefaultLocaleId: (localeId: string) => void;\n  handleLocaleChangeRedirect: (locale: string, defaultEntityLocaleId: string, viewMode: string) => void;\n  defaultEntityLocaleId: string | null;\n  solidFormViewData: any;\n  published: string | null;\n  actionsAllowed?: string[];\n  mcpUrl?: string | null;\n}\n\nconst SolidChatterLocaleTabView: React.FC<Props> = ({\n  solidFormViewMetaData,\n  id,\n  refreshChatterMessage,\n  setRefreshChatterMessage,\n  selectedLocale,\n  setSelectedLocale,\n  activeTab,\n  viewMode,\n  createMode,\n  handleLocaleChangeRedirect,\n  defaultEntityLocaleId,\n  solidFormViewData,\n  published,\n  actionsAllowed,\n  mcpUrl\n}) => {\n\n\n\n\n\n\n  return (\n    <TabView className=\"SolidCustomLocaleTabviewPanels h-full\" activeIndex={activeTab}>\n      {solidFormViewMetaData?.data?.solidView?.model?.draftPublishWorkflow &&\n        <TabPanel header=\"Info\" className={`SolidCustomLocaleTab p-2`}>\n          <SolidLocale\n            setSelectedLocale={setSelectedLocale}\n            solidFormViewMetaData={solidFormViewMetaData}\n            selectedLocale={selectedLocale}\n            id={id}\n            viewMode={viewMode}\n            createMode={createMode}\n            handleLocaleChangeRedirect={handleLocaleChangeRedirect}\n            defaultEntityLocaleId={defaultEntityLocaleId}\n            applicableLocales={solidFormViewMetaData?.data?.applicableLocales}\n            solidFormViewData={solidFormViewData}\n            published={published}\n          />\n        </TabPanel>\n      }\n      <TabPanel header=\"Audit Trail\" className={`SolidCustomLocaleTab`} headerClassName='p-2'>\n        <SolidChatter\n          modelSingularName={solidFormViewMetaData?.data?.solidView?.model?.singularName}\n          id={id}\n          refreshChatterMessage={refreshChatterMessage}\n          setRefreshChatterMessage={setRefreshChatterMessage}\n          actionsAllowed={actionsAllowed}\n        />\n      </TabPanel>\n      {\n        mcpUrl &&\n        (\n          <TabPanel header=\"SolidX AI\" className={`SolidCustomLocaleTab py-2`} contentClassName='h-full'>\n            <div style={{ height: \"calc(100vh - 60px)\" }}>\n              <SolidAiMainWrapper mcpUrl={mcpUrl} />\n            </div>\n          </TabPanel>\n        )\n      }\n    </TabView>\n  );\n};\n\nexport default SolidChatterLocaleTabView;\n"]}
+{"version":3,"file":"SolidChatterLocaleTabView.js","sourceRoot":"","sources":["../../../../src/components/core/locales/SolidChatterLocaleTabView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { SolidChatter } from '../chatter/SolidChatter';\nimport SolidLocale from './SolidLocale';\nimport './solid-locale.css';\nimport { SolidTabGroup } from '../../shad-cn-ui';\n// import { SolidAiMainWrapper } from '../solid-ai/SolidAiMainWrapper'; // moved to SolidX Studio panel\ninterface Props {\n  solidFormViewMetaData: any;\n  id: string;\n  refreshChatterMessage: boolean;\n  setRefreshChatterMessage: (value: boolean) => void;\n  activeTab: number;\n  selectedLocale: string | null;\n  setSelectedLocale: (locale: string | null) => void;\n  viewMode: string;\n  createMode: boolean;\n  //setDefaultLocaleId: (localeId: string) => void;\n  handleLocaleChangeRedirect: (locale: string, defaultEntityLocaleId: string, viewMode: string) => void;\n  defaultEntityLocaleId: string | null;\n  solidFormViewData: any;\n  published: string | null;\n  actionsAllowed?: string[];\n  mcpUrl?: string | null;\n}\n\nconst mapTabIndexToValue = (index: number, order: string[]) => {\n  if (!order.length) return '';\n  const safeIndex = Number.isFinite(index) ? index : 0;\n  if (safeIndex <= 0) return order[0];\n  if (safeIndex >= order.length) return order[order.length - 1];\n  return order[safeIndex];\n};\n\nconst SolidChatterLocaleTabView: React.FC<Props> = ({\n  solidFormViewMetaData,\n  id,\n  refreshChatterMessage,\n  setRefreshChatterMessage,\n  selectedLocale,\n  setSelectedLocale,\n  activeTab,\n  viewMode,\n  createMode,\n  handleLocaleChangeRedirect,\n  defaultEntityLocaleId,\n  solidFormViewData,\n  published,\n  actionsAllowed,\n  mcpUrl,\n}) => {\n  const showWorkflowInfo = Boolean(solidFormViewMetaData?.data?.solidView?.model?.draftPublishWorkflow);\n\n  const tabOrder = useMemo(() => {\n    const order: string[] = [];\n    if (showWorkflowInfo) {\n      order.push('info');\n    }\n    order.push('audit');\n    return order;\n  }, [showWorkflowInfo]);\n\n  const [activeTabValue, setActiveTabValue] = useState<string>(() => mapTabIndexToValue(activeTab, tabOrder));\n  const userKeyFieldName = solidFormViewMetaData?.data?.solidView?.model?.userKeyField?.name;\n  const modelUserKeyValue = solidFormViewData?.data?.[userKeyFieldName];\n\n  useEffect(() => {\n    const nextValue = mapTabIndexToValue(activeTab, tabOrder);\n    setActiveTabValue((prev) => (prev === nextValue ? prev : nextValue));\n  }, [activeTab, tabOrder]);\n\n  const tabs: { value: string; label: React.ReactNode; content: React.ReactNode; }[] = [\n    ...(showWorkflowInfo\n      ? [{\n        value: 'info',\n        label: 'Info',\n        content: (\n          <div className=\"solid-locale-tab-content solid-locale-tab-content--padded\">\n            <SolidLocale\n              setSelectedLocale={setSelectedLocale}\n              solidFormViewMetaData={solidFormViewMetaData}\n              selectedLocale={selectedLocale}\n              id={id}\n              viewMode={viewMode}\n              createMode={createMode}\n              handleLocaleChangeRedirect={handleLocaleChangeRedirect}\n              defaultEntityLocaleId={defaultEntityLocaleId}\n              applicableLocales={solidFormViewMetaData?.data?.applicableLocales}\n              solidFormViewData={solidFormViewData}\n              published={published}\n            />\n          </div>\n        )\n      }]\n      : []),\n    {\n      value: 'audit',\n      label: 'Audit Trail',\n      content: (\n        <div className=\"solid-locale-tab-content\">\n          <SolidChatter\n            modelSingularName={solidFormViewMetaData?.data?.solidView?.model?.singularName}\n            id={id}\n            refreshChatterMessage={refreshChatterMessage}\n            setRefreshChatterMessage={setRefreshChatterMessage}\n            actionsAllowed={actionsAllowed}\n            title={showWorkflowInfo ? undefined : 'Audit Trail'}\n            modelUserKey={modelUserKeyValue}\n          />\n        </div>\n      )\n    }\n  ];\n\n  if (!showWorkflowInfo) {\n    return (\n      <div className=\"solid-locale-panel solid-locale-panel--single\">\n        <div className=\"solid-locale-tab-content\">\n          <SolidChatter\n            modelSingularName={solidFormViewMetaData?.data?.solidView?.model?.singularName}\n            id={id}\n            refreshChatterMessage={refreshChatterMessage}\n            setRefreshChatterMessage={setRefreshChatterMessage}\n            actionsAllowed={actionsAllowed}\n            title=\"Audit Trail\"\n          />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"solid-locale-panel\">\n      <SolidTabGroup\n        className=\"solid-locale-tabs h-full\"\n        listClassName=\"solid-locale-tabs-list\"\n        panelClassName=\"solid-locale-tabs-panel\"\n        tabs={tabs}\n        value={activeTabValue}\n        onValueChange={setActiveTabValue}\n        tabPosition='left'\n      />\n    </div>\n  );\n};\n\nexport default SolidChatterLocaleTabView;\n"]}

package/dist/components/core/locales/SolidChatterLocaleTabView.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from 'react';
-import { TabView, TabPanel } from 'primereact/tabview';
+import React, { useEffect, useMemo, useState } from 'react';
 import { SolidChatter } from '../chatter/SolidChatter';
 import SolidLocale from './SolidLocale';
 import './solid-locale.css';
-import { SolidAiMainWrapper } from '../solid-ai/SolidAiMainWrapper';
+import { SolidTabGroup } from '../../shad-cn-ui';
+// import { SolidAiMainWrapper } from '../solid-ai/SolidAiMainWrapper'; // moved to SolidX Studio panel
 interface Props {
   solidFormViewMetaData: any;
   id: string;
@@ -23,6 +23,14 @@ interface Props {
   mcpUrl?: string | null;
 }
 
+const mapTabIndexToValue = (index: number, order: string[]) => {
+  if (!order.length) return '';
+  const safeIndex = Number.isFinite(index) ? index : 0;
+  if (safeIndex <= 0) return order[0];
+  if (safeIndex >= order.length) return order[order.length - 1];
+  return order[safeIndex];
+};
+
 const SolidChatterLocaleTabView: React.FC<Props> = ({
   solidFormViewMetaData,
   id,
@@ -38,53 +46,100 @@ const SolidChatterLocaleTabView: React.FC<Props> = ({
   solidFormViewData,
   published,
   actionsAllowed,
-  mcpUrl
+  mcpUrl,
 }) => {
+  const showWorkflowInfo = Boolean(solidFormViewMetaData?.data?.solidView?.model?.draftPublishWorkflow);
 
+  const tabOrder = useMemo(() => {
+    const order: string[] = [];
+    if (showWorkflowInfo) {
+      order.push('info');
+    }
+    order.push('audit');
+    return order;
+  }, [showWorkflowInfo]);
 
+  const [activeTabValue, setActiveTabValue] = useState<string>(() => mapTabIndexToValue(activeTab, tabOrder));
+  const userKeyFieldName = solidFormViewMetaData?.data?.solidView?.model?.userKeyField?.name;
+  const modelUserKeyValue = solidFormViewData?.data?.[userKeyFieldName];
 
+  useEffect(() => {
+    const nextValue = mapTabIndexToValue(activeTab, tabOrder);
+    setActiveTabValue((prev) => (prev === nextValue ? prev : nextValue));
+  }, [activeTab, tabOrder]);
 
+  const tabs: { value: string; label: React.ReactNode; content: React.ReactNode; }[] = [
+    ...(showWorkflowInfo
+      ? [{
+        value: 'info',
+        label: 'Info',
+        content: (
+          <div className="solid-locale-tab-content solid-locale-tab-content--padded">
+            <SolidLocale
+              setSelectedLocale={setSelectedLocale}
+              solidFormViewMetaData={solidFormViewMetaData}
+              selectedLocale={selectedLocale}
+              id={id}
+              viewMode={viewMode}
+              createMode={createMode}
+              handleLocaleChangeRedirect={handleLocaleChangeRedirect}
+              defaultEntityLocaleId={defaultEntityLocaleId}
+              applicableLocales={solidFormViewMetaData?.data?.applicableLocales}
+              solidFormViewData={solidFormViewData}
+              published={published}
+            />
+          </div>
+        )
+      }]
+      : []),
+    {
+      value: 'audit',
+      label: 'Audit Trail',
+      content: (
+        <div className="solid-locale-tab-content">
+          <SolidChatter
+            modelSingularName={solidFormViewMetaData?.data?.solidView?.model?.singularName}
+            id={id}
+            refreshChatterMessage={refreshChatterMessage}
+            setRefreshChatterMessage={setRefreshChatterMessage}
+            actionsAllowed={actionsAllowed}
+            title={showWorkflowInfo ? undefined : 'Audit Trail'}
+            modelUserKey={modelUserKeyValue}
+          />
+        </div>
+      )
+    }
+  ];
 
-
-  return (
-    <TabView className="SolidCustomLocaleTabviewPanels h-full" activeIndex={activeTab}>
-      {solidFormViewMetaData?.data?.solidView?.model?.draftPublishWorkflow &&
-        <TabPanel header="Info" className={`SolidCustomLocaleTab p-2`}>
-          <SolidLocale
-            setSelectedLocale={setSelectedLocale}
-            solidFormViewMetaData={solidFormViewMetaData}
-            selectedLocale={selectedLocale}
+  if (!showWorkflowInfo) {
+    return (
+      <div className="solid-locale-panel solid-locale-panel--single">
+        <div className="solid-locale-tab-content">
+          <SolidChatter
+            modelSingularName={solidFormViewMetaData?.data?.solidView?.model?.singularName}
             id={id}
-            viewMode={viewMode}
-            createMode={createMode}
-            handleLocaleChangeRedirect={handleLocaleChangeRedirect}
-            defaultEntityLocaleId={defaultEntityLocaleId}
-            applicableLocales={solidFormViewMetaData?.data?.applicableLocales}
-            solidFormViewData={solidFormViewData}
-            published={published}
+            refreshChatterMessage={refreshChatterMessage}
+            setRefreshChatterMessage={setRefreshChatterMessage}
+            actionsAllowed={actionsAllowed}
+            title="Audit Trail"
           />
-        </TabPanel>
-      }
-      <TabPanel header="Audit Trail" className={`SolidCustomLocaleTab`} headerClassName='p-2'>
-        <SolidChatter
-          modelSingularName={solidFormViewMetaData?.data?.solidView?.model?.singularName}
-          id={id}
-          refreshChatterMessage={refreshChatterMessage}
-          setRefreshChatterMessage={setRefreshChatterMessage}
-          actionsAllowed={actionsAllowed}
-        />
-      </TabPanel>
-      {
-        mcpUrl &&
-        (
-          <TabPanel header="SolidX AI" className={`SolidCustomLocaleTab py-2`} contentClassName='h-full'>
-            <div style={{ height: "calc(100vh - 60px)" }}>
-              <SolidAiMainWrapper mcpUrl={mcpUrl} />
-            </div>
-          </TabPanel>
-        )
-      }
-    </TabView>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="solid-locale-panel">
+      <SolidTabGroup
+        className="solid-locale-tabs h-full"
+        listClassName="solid-locale-tabs-list"
+        panelClassName="solid-locale-tabs-panel"
+        tabs={tabs}
+        value={activeTabValue}
+        onValueChange={setActiveTabValue}
+        tabPosition='left'
+      />
+    </div>
   );
 };
 

package/dist/components/core/locales/SolidLocale.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidLocale.d.ts","sourceRoot":"","sources":["../../../../src/components/core/locales/SolidLocale.tsx"],"names":[],"mappings":"AAKA,OAAO,oBAAoB,CAAC;AAC5B,QAAA,MAAM,WAAW;2BACsF,GAAG;QAAM,MAAM;oBAAkB,GAAG;uBAAqB,GAAG;cAAY,MAAM;gBAAc,OAAO;gCAA8B,GAAG;uBAAqB,GAAG;2BAAyB,MAAM,GAAG,IAAI;uBAAqB,GAAG;eAAa,MAAM,GAAG,IAAI;6CAqH1V,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SolidLocale.d.ts","sourceRoot":"","sources":["../../../../src/components/core/locales/SolidLocale.tsx"],"names":[],"mappings":"AAGA,OAAO,oBAAoB,CAAC;AAC5B,QAAA,MAAM,WAAW;2BACsF,GAAG;QAAM,MAAM;oBAAkB,GAAG;uBAAqB,GAAG;cAAY,MAAM;gBAAc,OAAO;gCAA8B,GAAG;uBAAqB,GAAG;2BAAyB,MAAM,GAAG,IAAI;uBAAqB,GAAG;eAAa,MAAM,GAAG,IAAI;6CAiH1V,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/core/locales/SolidLocale.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { Divider } from 'primereact/divider';
-import { Dropdown } from 'primereact/dropdown';
+import { SolidDivider, SolidSelect } from "../../shad-cn-ui";
 import "./solid-locale.css";
 var SolidLocale = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h;
@@ -31,8 +30,7 @@ var SolidLocale = function (_a) {
             }
         }
     }, [applicableLocales, id, viewMode, createMode]);
-    var handleLocaleChange = function (e) {
-        var newLocale = e.value;
+    var handleLocaleChange = function (newLocale) {
         if (newLocale === selectedLocale)
             return;
         setSelectedLocale(newLocale);
@@ -51,12 +49,10 @@ var SolidLocale = function (_a) {
         var minutes = String(date.getMinutes()).padStart(2, '0');
         return "".concat(day, "-").concat(month, "-").concat(year, " ").concat(hours, ":").concat(minutes);
     };
-    return (_jsxs("div", { className: "flex flex-column p-0 m-0", children: [_jsx("div", { className: "flex justify-content-end gap-3" }), solidFormViewData && (viewMode === 'edit') &&
-                (_jsx("div", { className: "w-full", style: { backgroundColor: 'var(--surface-ground)', margin: '10px 0', padding: 0, overflow: 'hidden' }, children: ((_c = (_b = solidFormViewMetaData.data.solidView) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.draftPublishWorkflow) &&
-                        published !== null ? (_jsxs("li", { className: "w-full text-left list-disc", style: { padding: '10px 0px', margin: '0 20px', color: '#15803D' }, children: ["Editing ", _jsx("span", { className: "font-bold", children: "published version" })] })) : (_jsxs("li", { className: "w-full text-left list-disc", style: { padding: '10px 0px', margin: '0 20px', color: '#EF4444' }, children: ["Editing ", _jsx("span", { className: "font-bold", children: "unpublished version" })] })) })), _jsxs("div", { className: "flex flex-column gap-2 mt-2", style: { backgroundColor: 'var(--surface-ground)', padding: '0.5rem' }, children: [_jsx("h3", { className: "text-lg font-semibold p-0 m-0", children: "Information" }), _jsx(Divider, { className: "my-2" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: 'flex align-items-center justify-content-between gap-2 p-2', children: [_jsx("p", { className: "text-sm font-bold text-gray-500 m-0", children: "Created At" }), _jsx("p", { className: "text-sm m-0", children: formatToDDMMYYWithTime((_d = solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data) === null || _d === void 0 ? void 0 : _d.createdAt) })] }), _jsxs("div", { className: 'flex align-items-center justify-content-between gap-2 p-2', children: [_jsx("p", { className: "text-sm font-bold text-gray-500 m-0", children: "Updated At" }), _jsx("p", { className: "text-sm m-0", children: formatToDDMMYYWithTime((_e = solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data) === null || _e === void 0 ? void 0 : _e.updatedAt) })] }), _jsxs("div", { className: 'flex align-items-center justify-content-between gap-2 p-2', children: [_jsx("p", { className: "text-sm font-bold text-gray-500 m-0", children: "Published At" }), _jsx("p", { className: "text-sm m-0", children: formatToDDMMYYWithTime(published !== null && published !== void 0 ? published : '') })] })] }), ((_h = (_g = (_f = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _f === void 0 ? void 0 : _f.solidView) === null || _g === void 0 ? void 0 : _g.model) === null || _h === void 0 ? void 0 : _h.internationalisation) &&
-                        _jsxs(_Fragment, { children: [_jsx("h3", { className: "text-lg font-semibold mt-6 mb-2", children: "Internationalisation" }), _jsx("label", { className: "form-field-label", children: "Locales" }), _jsx(Dropdown, { value: selectedLocale, onChange: function (e) { return handleLocaleChange(e); }, options: localeOptions, optionLabel: "label", placeholder: "Select locale", className: "w-full", 
-                                    //TODO: disable if createMode is true
-                                    disabled: createMode }), viewMode === 'view' || createMode && (_jsxs("p", { className: "text-sm text-gray-700 mt-0 ml-0", children: [" By default record will be created in ", _jsx("b", { children: defautlLocale })] }))] })] })] }));
+    return (_jsxs("div", { className: "flex flex-column p-0 m-0 solid-locale-stack", children: [_jsx("div", { className: "flex justify-content-end gap-3" }), solidFormViewData && (viewMode === 'edit') &&
+                (_jsx("div", { className: "w-full solid-locale-status-banner ".concat(published !== null ? 'is-published' : 'is-unpublished'), children: ((_c = (_b = solidFormViewMetaData.data.solidView) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.draftPublishWorkflow) &&
+                        published !== null ? (_jsxs("li", { className: "w-full text-left list-disc solid-locale-status-copy", children: ["Editing ", _jsx("span", { className: "font-bold", children: "published version" })] })) : (_jsxs("li", { className: "w-full text-left list-disc solid-locale-status-copy", children: ["Editing ", _jsx("span", { className: "font-bold", children: "unpublished version" })] })) })), _jsxs("div", { className: "flex flex-column gap-2 mt-2 solid-locale-info-card", children: [_jsx("h3", { className: "solid-locale-section-title p-0 m-0", children: "Information" }), _jsx(SolidDivider, { className: "my-2" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: 'flex align-items-center justify-content-between gap-2 p-2 solid-locale-info-row', children: [_jsx("p", { className: "text-sm font-bold m-0 solid-locale-info-label", children: "Created At" }), _jsx("p", { className: "text-sm m-0 solid-locale-info-value", children: formatToDDMMYYWithTime((_d = solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data) === null || _d === void 0 ? void 0 : _d.createdAt) })] }), _jsxs("div", { className: 'flex align-items-center justify-content-between gap-2 p-2 solid-locale-info-row', children: [_jsx("p", { className: "text-sm font-bold m-0 solid-locale-info-label", children: "Updated At" }), _jsx("p", { className: "text-sm m-0 solid-locale-info-value", children: formatToDDMMYYWithTime((_e = solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data) === null || _e === void 0 ? void 0 : _e.updatedAt) })] }), _jsxs("div", { className: 'flex align-items-center justify-content-between gap-2 p-2 solid-locale-info-row', children: [_jsx("p", { className: "text-sm font-bold m-0 solid-locale-info-label", children: "Published At" }), _jsx("p", { className: "text-sm m-0 solid-locale-info-value", children: formatToDDMMYYWithTime(published !== null && published !== void 0 ? published : '') })] })] }), ((_h = (_g = (_f = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _f === void 0 ? void 0 : _f.solidView) === null || _g === void 0 ? void 0 : _g.model) === null || _h === void 0 ? void 0 : _h.internationalisation) &&
+                        _jsxs(_Fragment, { children: [_jsx("h3", { className: "solid-locale-section-title mt-6 mb-2", children: "Internationalisation" }), _jsx("label", { className: "form-field-label", children: "Locales" }), _jsx(SolidSelect, { value: selectedLocale, onChange: function (e) { return handleLocaleChange(e.value); }, options: localeOptions, placeholder: "Select locale", className: "w-full", disabled: createMode }), (viewMode === 'view' || createMode) && (_jsxs("p", { className: "text-sm mt-0 ml-0 solid-locale-helper-copy", children: [" By default record will be created in ", _jsx("b", { children: defautlLocale })] }))] })] })] }));
 };
 export default SolidLocale;
 //# sourceMappingURL=SolidLocale.js.map

package/dist/components/core/locales/SolidLocale.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidLocale.js","sourceRoot":"","sources":["../../../../src/components/core/locales/SolidLocale.tsx"],"names":[],"mappings":"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","sourcesContent":["\n\nimport React, { useEffect, useState } from 'react';\nimport { Divider } from 'primereact/divider';\nimport { Dropdown } from 'primereact/dropdown';\nimport \"./solid-locale.css\";\nconst SolidLocale = ({ solidFormViewMetaData, id, selectedLocale, setSelectedLocale, viewMode, createMode, handleLocaleChangeRedirect,\n    applicableLocales, defaultEntityLocaleId, solidFormViewData, published }: { solidFormViewMetaData: any, id: string, selectedLocale: any, setSelectedLocale: any, viewMode: string, createMode: boolean, handleLocaleChangeRedirect: any, applicableLocales: any, defaultEntityLocaleId: string | null, solidFormViewData: any, published: string | null }) => {\n    const [localeOptions, setLocaleOptions] = useState([]);\n    const [defautlLocale, setDefaultLocale] = useState('');\n    useEffect(() => {\n        if (!applicableLocales) return;\n        // Set dropdown options\n        const localeOptions = applicableLocales.map((x: any) => ({\n            label: x.displayName,\n            value: x.locale,\n        }));\n        setLocaleOptions(localeOptions);\n\n        if (createMode) {\n            const defaultLocale = applicableLocales.find((x: any) => x.isDefault === 'yes');\n            setSelectedLocale(defaultLocale?.locale || null);\n            setDefaultLocale(defaultLocale?.displayName || '');\n            return;\n        }\n\n        if (viewMode === 'edit' || viewMode === 'view') {\n            //This is to check record entity matched defaultEntityLocaleId from query params & isDefault for default locale\n            const matchedLocale = applicableLocales.find(\n                (x: any) => x.isDefault === 'yes' && x.defaultEntityLocaleId == id\n            );\n            if (matchedLocale) {\n                setSelectedLocale(matchedLocale.locale);\n            }\n        }\n    }, [applicableLocales, id, viewMode, createMode]);\n\n    const handleLocaleChange = (e: any) => {\n\n        const newLocale = e.value;\n        if (newLocale === selectedLocale) return;\n        setSelectedLocale(newLocale);\n        const targetDefaultEntityLocaleId = id === 'new' ? defaultEntityLocaleId : defaultEntityLocaleId || id;\n        handleLocaleChangeRedirect(newLocale, targetDefaultEntityLocaleId, viewMode);\n    };\n\n    // utils/formatDate.ts\n    const formatToDDMMYYWithTime = (dateString: string) => {\n        if (!dateString) return 'N/A';\n        const date = new Date(dateString);\n\n        const day = String(date.getDate()).padStart(2, '0');\n        const month = String(date.getMonth() + 1).padStart(2, '0');\n        const year = String(date.getFullYear()).slice(-2);\n\n        const hours = String(date.getHours()).padStart(2, '0');\n        const minutes = String(date.getMinutes()).padStart(2, '0');\n\n        return `${day}-${month}-${year} ${hours}:${minutes}`;\n    }\n\n\n    return (\n        <div className=\"flex flex-column p-0 m-0\">\n            <div className=\"flex justify-content-end gap-3\">\n            </div>\n            {solidFormViewData && (viewMode === 'edit') &&\n                (<div className=\"w-full\" style={{ backgroundColor: 'var(--surface-ground)', margin: '10px 0', padding: 0, overflow:'hidden' }}>\n                    {solidFormViewMetaData.data.solidView?.model?.draftPublishWorkflow &&\n                        published !== null ? (\n                        <li className=\"w-full text-left list-disc\" style={{ padding: '10px 0px',margin: '0 20px', color: '#15803D' }}>\n                            Editing <span className=\"font-bold\">published version</span>\n                        </li>\n                    ) : (\n                        <li className=\"w-full text-left list-disc\" style={{ padding: '10px 0px',margin: '0 20px', color: '#EF4444' }}>\n                            Editing <span className=\"font-bold\">unpublished version</span>\n                        </li>\n                    )}\n                </div>\n                )\n            }\n            <div className=\"flex flex-column gap-2 mt-2\" style={{ backgroundColor: 'var(--surface-ground)', padding: '0.5rem' }}>\n                <h3 className=\"text-lg font-semibold p-0 m-0\">Information</h3>\n                <Divider className=\"my-2\" />\n                <div className=\"space-y-2\">\n                    <div className='flex align-items-center justify-content-between gap-2 p-2'>\n                        <p className=\"text-sm font-bold text-gray-500 m-0\">Created At</p>\n                        <p className=\"text-sm m-0\">{formatToDDMMYYWithTime(solidFormViewData?.data?.createdAt)}</p>\n                    </div>\n                    <div className='flex align-items-center justify-content-between gap-2 p-2'>\n                        <p className=\"text-sm font-bold text-gray-500 m-0\">Updated At</p>\n                        <p className=\"text-sm m-0\">\n                            {formatToDDMMYYWithTime(solidFormViewData?.data?.updatedAt)}\n                        </p>\n                    </div>\n                    <div className='flex align-items-center justify-content-between gap-2 p-2'>\n                        <p className=\"text-sm font-bold text-gray-500 m-0\">Published At</p>\n                        <p className=\"text-sm m-0\">{formatToDDMMYYWithTime(published ?? '')}</p>\n                    </div>\n                </div>\n\n                {solidFormViewMetaData?.data?.solidView?.model?.internationalisation &&\n                    <>\n                        <h3 className=\"text-lg font-semibold mt-6 mb-2\">Internationalisation</h3>\n                        <label className=\"form-field-label\">Locales</label>\n                        <Dropdown\n                            value={selectedLocale}\n                            onChange={(e) => handleLocaleChange(e)}\n                            options={localeOptions}\n                            optionLabel=\"label\"\n                            placeholder=\"Select locale\"\n                            className=\"w-full\"\n                            //TODO: disable if createMode is true\n                            disabled={createMode}\n                        />\n                        {viewMode === 'view' || createMode && (\n                            <p className=\"text-sm text-gray-700 mt-0 ml-0\"> By default record will be created in <b>{defautlLocale}</b></p>\n                        )}\n                    </>\n                }\n            </div>\n            {/* <p className=\"text-sm font-bold text-gray-500 px-2\">Fill in form another locale</p> */}\n        </div>\n    );\n};\n\nexport default SolidLocale;\n"]}
+{"version":3,"file":"SolidLocale.js","sourceRoot":"","sources":["../../../../src/components/core/locales/SolidLocale.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport React, { useEffect, useState } from 'react';\nimport { SolidDivider, SolidSelect } from \"../../shad-cn-ui\";\nimport \"./solid-locale.css\";\nconst SolidLocale = ({ solidFormViewMetaData, id, selectedLocale, setSelectedLocale, viewMode, createMode, handleLocaleChangeRedirect,\n    applicableLocales, defaultEntityLocaleId, solidFormViewData, published }: { solidFormViewMetaData: any, id: string, selectedLocale: any, setSelectedLocale: any, viewMode: string, createMode: boolean, handleLocaleChangeRedirect: any, applicableLocales: any, defaultEntityLocaleId: string | null, solidFormViewData: any, published: string | null }) => {\n    const [localeOptions, setLocaleOptions] = useState([]);\n    const [defautlLocale, setDefaultLocale] = useState('');\n    useEffect(() => {\n        if (!applicableLocales) return;\n        // Set dropdown options\n        const localeOptions = applicableLocales.map((x: any) => ({\n            label: x.displayName,\n            value: x.locale,\n        }));\n        setLocaleOptions(localeOptions);\n\n        if (createMode) {\n            const defaultLocale = applicableLocales.find((x: any) => x.isDefault === 'yes');\n            setSelectedLocale(defaultLocale?.locale || null);\n            setDefaultLocale(defaultLocale?.displayName || '');\n            return;\n        }\n\n        if (viewMode === 'edit' || viewMode === 'view') {\n            //This is to check record entity matched defaultEntityLocaleId from query params & isDefault for default locale\n            const matchedLocale = applicableLocales.find(\n                (x: any) => x.isDefault === 'yes' && x.defaultEntityLocaleId == id\n            );\n            if (matchedLocale) {\n                setSelectedLocale(matchedLocale.locale);\n            }\n        }\n    }, [applicableLocales, id, viewMode, createMode]);\n\n    const handleLocaleChange = (newLocale: string) => {\n        if (newLocale === selectedLocale) return;\n        setSelectedLocale(newLocale);\n        const targetDefaultEntityLocaleId = id === 'new' ? defaultEntityLocaleId : defaultEntityLocaleId || id;\n        handleLocaleChangeRedirect(newLocale, targetDefaultEntityLocaleId, viewMode);\n    };\n\n    // utils/formatDate.ts\n    const formatToDDMMYYWithTime = (dateString: string) => {\n        if (!dateString) return 'N/A';\n        const date = new Date(dateString);\n\n        const day = String(date.getDate()).padStart(2, '0');\n        const month = String(date.getMonth() + 1).padStart(2, '0');\n        const year = String(date.getFullYear()).slice(-2);\n\n        const hours = String(date.getHours()).padStart(2, '0');\n        const minutes = String(date.getMinutes()).padStart(2, '0');\n\n        return `${day}-${month}-${year} ${hours}:${minutes}`;\n    }\n\n\n    return (\n        <div className=\"flex flex-column p-0 m-0 solid-locale-stack\">\n            <div className=\"flex justify-content-end gap-3\">\n            </div>\n            {solidFormViewData && (viewMode === 'edit') &&\n                (<div className={`w-full solid-locale-status-banner ${published !== null ? 'is-published' : 'is-unpublished'}`}>\n                    {solidFormViewMetaData.data.solidView?.model?.draftPublishWorkflow &&\n                        published !== null ? (\n                        <li className=\"w-full text-left list-disc solid-locale-status-copy\">\n                            Editing <span className=\"font-bold\">published version</span>\n                        </li>\n                    ) : (\n                        <li className=\"w-full text-left list-disc solid-locale-status-copy\">\n                            Editing <span className=\"font-bold\">unpublished version</span>\n                        </li>\n                    )}\n                </div>\n                )\n            }\n            <div className=\"flex flex-column gap-2 mt-2 solid-locale-info-card\">\n                <h3 className=\"solid-locale-section-title p-0 m-0\">Information</h3>\n                <SolidDivider className=\"my-2\" />\n                <div className=\"space-y-2\">\n                    <div className='flex align-items-center justify-content-between gap-2 p-2 solid-locale-info-row'>\n                        <p className=\"text-sm font-bold m-0 solid-locale-info-label\">Created At</p>\n                        <p className=\"text-sm m-0 solid-locale-info-value\">{formatToDDMMYYWithTime(solidFormViewData?.data?.createdAt)}</p>\n                    </div>\n                    <div className='flex align-items-center justify-content-between gap-2 p-2 solid-locale-info-row'>\n                        <p className=\"text-sm font-bold m-0 solid-locale-info-label\">Updated At</p>\n                        <p className=\"text-sm m-0 solid-locale-info-value\">\n                            {formatToDDMMYYWithTime(solidFormViewData?.data?.updatedAt)}\n                        </p>\n                    </div>\n                    <div className='flex align-items-center justify-content-between gap-2 p-2 solid-locale-info-row'>\n                        <p className=\"text-sm font-bold m-0 solid-locale-info-label\">Published At</p>\n                        <p className=\"text-sm m-0 solid-locale-info-value\">{formatToDDMMYYWithTime(published ?? '')}</p>\n                    </div>\n                </div>\n\n                {solidFormViewMetaData?.data?.solidView?.model?.internationalisation &&\n                    <>\n                        <h3 className=\"solid-locale-section-title mt-6 mb-2\">Internationalisation</h3>\n                        <label className=\"form-field-label\">Locales</label>\n                        <SolidSelect\n                            value={selectedLocale}\n                            onChange={(e) => handleLocaleChange(e.value)}\n                            options={localeOptions}\n                            placeholder=\"Select locale\"\n                            className=\"w-full\"\n                            disabled={createMode}\n                        />\n                        {(viewMode === 'view' || createMode) && (\n                            <p className=\"text-sm mt-0 ml-0 solid-locale-helper-copy\"> By default record will be created in <b>{defautlLocale}</b></p>\n                        )}\n                    </>\n                }\n            </div>\n            {/* <p className=\"text-sm font-bold text-gray-500 px-2\">Fill in form another locale</p> */}\n        </div>\n    );\n};\n\nexport default SolidLocale;\n"]}

package/dist/components/core/locales/SolidLocale.tsx

@@ -1,8 +1,6 @@
 
-
 import React, { useEffect, useState } from 'react';
-import { Divider } from 'primereact/divider';
-import { Dropdown } from 'primereact/dropdown';
+import { SolidDivider, SolidSelect } from "../../shad-cn-ui";
 import "./solid-locale.css";
 const SolidLocale = ({ solidFormViewMetaData, id, selectedLocale, setSelectedLocale, viewMode, createMode, handleLocaleChangeRedirect,
     applicableLocales, defaultEntityLocaleId, solidFormViewData, published }: { solidFormViewMetaData: any, id: string, selectedLocale: any, setSelectedLocale: any, viewMode: string, createMode: boolean, handleLocaleChangeRedirect: any, applicableLocales: any, defaultEntityLocaleId: string | null, solidFormViewData: any, published: string | null }) => {
@@ -35,9 +33,7 @@ const SolidLocale = ({ solidFormViewMetaData, id, selectedLocale, setSelectedLoc
         }
     }, [applicableLocales, id, viewMode, createMode]);
 
-    const handleLocaleChange = (e: any) => {
-
-        const newLocale = e.value;
+    const handleLocaleChange = (newLocale: string) => {
         if (newLocale === selectedLocale) return;
         setSelectedLocale(newLocale);
         const targetDefaultEntityLocaleId = id === 'new' ? defaultEntityLocaleId : defaultEntityLocaleId || id;
@@ -61,60 +57,58 @@ const SolidLocale = ({ solidFormViewMetaData, id, selectedLocale, setSelectedLoc
 
 
     return (
-        <div className="flex flex-column p-0 m-0">
+        <div className="flex flex-column p-0 m-0 solid-locale-stack">
             <div className="flex justify-content-end gap-3">
             </div>
             {solidFormViewData && (viewMode === 'edit') &&
-                (<div className="w-full" style={{ backgroundColor: 'var(--surface-ground)', margin: '10px 0', padding: 0, overflow:'hidden' }}>
+                (<div className={`w-full solid-locale-status-banner ${published !== null ? 'is-published' : 'is-unpublished'}`}>
                     {solidFormViewMetaData.data.solidView?.model?.draftPublishWorkflow &&
                         published !== null ? (
-                        <li className="w-full text-left list-disc" style={{ padding: '10px 0px',margin: '0 20px', color: '#15803D' }}>
+                        <li className="w-full text-left list-disc solid-locale-status-copy">
                             Editing <span className="font-bold">published version</span>
                         </li>
                     ) : (
-                        <li className="w-full text-left list-disc" style={{ padding: '10px 0px',margin: '0 20px', color: '#EF4444' }}>
+                        <li className="w-full text-left list-disc solid-locale-status-copy">
                             Editing <span className="font-bold">unpublished version</span>
                         </li>
                     )}
                 </div>
                 )
             }
-            <div className="flex flex-column gap-2 mt-2" style={{ backgroundColor: 'var(--surface-ground)', padding: '0.5rem' }}>
-                <h3 className="text-lg font-semibold p-0 m-0">Information</h3>
-                <Divider className="my-2" />
+            <div className="flex flex-column gap-2 mt-2 solid-locale-info-card">
+                <h3 className="solid-locale-section-title p-0 m-0">Information</h3>
+                <SolidDivider className="my-2" />
                 <div className="space-y-2">
-                    <div className='flex align-items-center justify-content-between gap-2 p-2'>
-                        <p className="text-sm font-bold text-gray-500 m-0">Created At</p>
-                        <p className="text-sm m-0">{formatToDDMMYYWithTime(solidFormViewData?.data?.createdAt)}</p>
+                    <div className='flex align-items-center justify-content-between gap-2 p-2 solid-locale-info-row'>
+                        <p className="text-sm font-bold m-0 solid-locale-info-label">Created At</p>
+                        <p className="text-sm m-0 solid-locale-info-value">{formatToDDMMYYWithTime(solidFormViewData?.data?.createdAt)}</p>
                     </div>
-                    <div className='flex align-items-center justify-content-between gap-2 p-2'>
-                        <p className="text-sm font-bold text-gray-500 m-0">Updated At</p>
-                        <p className="text-sm m-0">
+                    <div className='flex align-items-center justify-content-between gap-2 p-2 solid-locale-info-row'>
+                        <p className="text-sm font-bold m-0 solid-locale-info-label">Updated At</p>
+                        <p className="text-sm m-0 solid-locale-info-value">
                             {formatToDDMMYYWithTime(solidFormViewData?.data?.updatedAt)}
                         </p>
                     </div>
-                    <div className='flex align-items-center justify-content-between gap-2 p-2'>
-                        <p className="text-sm font-bold text-gray-500 m-0">Published At</p>
-                        <p className="text-sm m-0">{formatToDDMMYYWithTime(published ?? '')}</p>
+                    <div className='flex align-items-center justify-content-between gap-2 p-2 solid-locale-info-row'>
+                        <p className="text-sm font-bold m-0 solid-locale-info-label">Published At</p>
+                        <p className="text-sm m-0 solid-locale-info-value">{formatToDDMMYYWithTime(published ?? '')}</p>
                     </div>
                 </div>
 
                 {solidFormViewMetaData?.data?.solidView?.model?.internationalisation &&
                     <>
-                        <h3 className="text-lg font-semibold mt-6 mb-2">Internationalisation</h3>
+                        <h3 className="solid-locale-section-title mt-6 mb-2">Internationalisation</h3>
                         <label className="form-field-label">Locales</label>
-                        <Dropdown
+                        <SolidSelect
                             value={selectedLocale}
-                            onChange={(e) => handleLocaleChange(e)}
+                            onChange={(e) => handleLocaleChange(e.value)}
                             options={localeOptions}
-                            optionLabel="label"
                             placeholder="Select locale"
                             className="w-full"
-                            //TODO: disable if createMode is true
                             disabled={createMode}
                         />
-                        {viewMode === 'view' || createMode && (
-                            <p className="text-sm text-gray-700 mt-0 ml-0"> By default record will be created in <b>{defautlLocale}</b></p>
+                        {(viewMode === 'view' || createMode) && (
+                            <p className="text-sm mt-0 ml-0 solid-locale-helper-copy"> By default record will be created in <b>{defautlLocale}</b></p>
                         )}
                     </>
                 }

package/dist/components/core/locales/solid-locale.css

@@ -1,36 +1,155 @@
-.SolidCustomLocaleTabviewPanels {
-  padding: 0 !important;
+.solid-locale-panel {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  margin-left: 10px;
+  background: transparent;
 }
 
-.SolidCustomLocaleTabHighlight .p-tabview-nav-link {
-  border: none !important;
+.solid-locale-panel--single {
+  margin-left: 0;
 }
 
-.SolidCustomLocaleTabviewPanels .p-unselectable-text.p-tabview-selected {
-  border-bottom: 2px solid var(--border-color) !important;
+.solid-locale-tabs {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
-.SolidCustomLocaleTabviewPanels .p-unselectable-text.p-tabview-selected.p-highlight {
-  border-bottom: 2px solid var(--primary-color) !important;
+
+.solid-locale-tabs-list {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 44px;
+  padding: 0 0.9rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+  background: color-mix(in srgb, var(--card) 97%, var(--background) 3%);
+  justify-content: flex-start;
 }
 
-.SolidCustomLocaleTabviewPanels .p-tabview-nav li .p-tabview-nav-link {
-  border: none !important;
-  text-align: center !important;
-  align-content: center !important;
-  justify-content: center !important;
-} 
+.solid-locale-tabs .solid-tabs-trigger {
+  position: relative;
+  background: transparent;
+  border: none;
+  padding: 0.65rem 0;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: color 150ms ease, border-color 150ms ease;
+}
 
-.SolidCustomLocaleTab {
+.solid-locale-tabs .solid-tabs-trigger:hover {
+  color: var(--foreground);
+}
+
+.solid-locale-tabs .solid-tabs-trigger.is-active {
+  color: var(--foreground);
+  border-bottom-color: var(--primary);
+}
+
+.solid-locale-tabs-panel {
   flex: 1;
-  /* text-align: center !important; */
+  min-height: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
 }
 
-.SolidCustomLocaleTabviewPanels .p-tabview-panels{
-  width: 100% !important;
-  height: 100%;
-  padding: 0 !important;
+.solid-locale-tab-content {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+.solid-locale-tab-content--padded {
+  padding: 0.85rem;
+}
+
+.solid-locale-stack {
+  gap: 0.2rem;
+}
+
+.solid-locale-status-banner {
+  margin: 0.25rem 0 0;
+  padding: 0;
+  overflow: hidden;
+  border-radius: 10px;
+  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+  background: color-mix(in srgb, var(--card) 97%, var(--background) 3%);
+}
+
+.solid-locale-status-banner.is-published {
+  border-color: color-mix(in srgb, #16a34a 24%, var(--border) 76%);
+  background: color-mix(in srgb, #16a34a 8%, var(--card) 92%);
+}
+
+.solid-locale-status-banner.is-unpublished {
+  border-color: color-mix(in srgb, #ef4444 24%, var(--border) 76%);
+  background: color-mix(in srgb, #ef4444 7%, var(--card) 93%);
 }
 
-.SolidCustomLocaleTabviewPanels .p-tabview-nav-link{
-  border: none !important;
-}
+.solid-locale-status-copy {
+  margin: 0 1rem;
+  padding: 0.7rem 0;
+  font-size: 0.78rem;
+  line-height: 1.4;
+}
+
+.solid-locale-status-banner.is-published .solid-locale-status-copy {
+  color: #15803d;
+}
+
+.solid-locale-status-banner.is-unpublished .solid-locale-status-copy {
+  color: #dc2626;
+}
+
+.dark .solid-locale-status-banner.is-published .solid-locale-status-copy,
+.theme-dark .solid-locale-status-banner.is-published .solid-locale-status-copy {
+  color: #4ade80;
+}
+
+.dark .solid-locale-status-banner.is-unpublished .solid-locale-status-copy,
+.theme-dark .solid-locale-status-banner.is-unpublished .solid-locale-status-copy {
+  color: #fda4af;
+}
+
+.solid-locale-info-card {
+  padding: 0.85rem;
+  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--card) 96%, var(--background) 4%);
+}
+
+.solid-locale-section-title {
+  font-size: 0.9rem;
+  line-height: 1.25;
+  font-weight: 600;
+  color: var(--foreground);
+}
+
+.solid-locale-info-row {
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--muted) 16%, var(--card) 84%);
+}
+
+.solid-locale-info-label {
+  color: var(--muted-foreground);
+  font-size: 0.72rem;
+}
+
+.solid-locale-info-value {
+  color: var(--foreground);
+  font-size: 0.75rem;
+  text-align: right;
+}
+
+.solid-locale-helper-copy {
+  color: var(--muted-foreground);
+  font-size: 0.74rem;
+  line-height: 1.4;
+}

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

@@ -1 +1 @@
-{"version":3,"file":"CreateModel.d.ts","sourceRoot":"","sources":["../../../../src/components/core/model/CreateModel.tsx"],"names":[],"mappings":"AA+BA,QAAA,MAAM,WAAW,qBAAsB,GAAG,4CAkezC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"CreateModel.d.ts","sourceRoot":"","sources":["../../../../src/components/core/model/CreateModel.tsx"],"names":[],"mappings":"AAmCA,QAAA,MAAM,WAAW,qBAAsB,GAAG,4CA4bzC,CAAC;AAEF,eAAe,WAAW,CAAC"}