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

package/dist/components/core/chatter/chatter.module.css

@@ -1,15 +1,19 @@
 .chatterTitle {
-    padding: 15px;
-    border-bottom: 1px solid #D8E2EA;
+    padding: 0.2rem 0 0.55rem;
+    border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+}
+
+.chatterTitleWithLabel {
+    padding-left: 2.4rem;
 }
 
 .chatterMessageComposer .chatterMessageInput {
-    background-color: #FEFCFF;
-    border: 1px solid #D8E2EA;
+    background-color: var(--background);
+    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
 }
 
 .chatterMessageComposer .chatterMessageInput::placeholder {
-    color: rgba(51, 51, 51, 0.20);
+    color: color-mix(in srgb, var(--muted-foreground) 52%, transparent);
 }
 
 .chatterEmails {
@@ -28,8 +32,8 @@
     position: absolute;
     right: 0px !important;
     top: 1;
-    background-color: #fff;
-    border: 1px solid #D8E2EA;
+    background-color: var(--card);
+    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
     padding: 8px;
     border-radius: 8px !important;
     min-width: 200;
@@ -43,7 +47,7 @@
 }
 
 .chatterDatetimeDivider {
-    border-top: 1px dashed #00000026;
+    border-top: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
     position: relative;
     margin: 30px 0 15px 0;
 }
@@ -53,22 +57,218 @@
     left: 50%;
     transform: translate(-50%, -50%);
     border-radius: 6.25rem;
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    background: #FAFAFA;
+    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
+    background: color-mix(in srgb, var(--card) 96%, var(--background) 4%);
     padding: 0.25rem 0.5rem;
     text-wrap: nowrap;
     font-size: 0.625rem;
     font-weight: 600;
-    color: var(--secondary-dark-color);
+    color: var(--muted-foreground);
 }
 
 .solidMessageWrapper {
-    border: 1px solid #D8E2EA;
-    padding: 10px;
-    border-radius: 0.25rem;
+    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+    padding: 0.7rem 0.8rem;
+    border-radius: 0.7rem;
     width: 100%;
+    background: color-mix(in srgb, var(--card) 96%, var(--background) 4%);
+    font-size: 12px;
+    line-height: 1.45;
+    color: var(--solid-text-secondary, #475569);
+    font-weight: 400;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+}
+
+:global(.solidMessageWrapper p) {
+    margin: 0;
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+}
+
+:global(.solid-purple-button) {
+    --solid-btn-bg: #722ED1;
+    --solid-btn-border: #722ED1;
+    --solid-btn-fg: #fff;
+}
+
+:global(.solid-purple-button:hover) {
+    --solid-btn-bg: #5b1bb7;
+    --solid-btn-border: #5b1bb7;
+}
+
+.solidChatterMessageBox {
+    margin-top: 0px;
+    padding-left: 0.3rem;
+}
+
+.solidChatterMessageCard {
+    border-radius: 0.75rem;
+    background: transparent;
+    padding: 0.25rem 0;
+}
+
+.solidChatterMessageLayout {
+    display: flex;
+    gap: 0.65rem;
+    align-items: flex-start;
+}
+
+.solidChatterAvatar {
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    font-size: 0.55rem;
+    font-weight: 500;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-transform: uppercase;
+    border: 1px solid color-mix(in srgb, var(--card) 82%, transparent);
+    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
+}
+
+.solidChatterMessageContent {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+.solidChatterMessageHeader {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.35rem;
+    flex-wrap: wrap;
+}
+
+.solidChatterUser {
+    margin: 0;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--foreground);
+}
+
+.solidChatterMeta {
+    margin: 0;
+    font-size: 0.70rem;
+    color: var(--muted-foreground);
+}
+
+.solidChatterTime {
+    font-size: 0.70rem;
+    color: var(--muted-foreground);
+    white-space: nowrap;
 }
 
-.solidChatterMessageBox{
-    margin-top: 15px;
-}
+.solidChatterAttachments {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+}
+
+.solidChatterAttachment {
+    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+    border-radius: 0.55rem;
+    padding: 0.3rem 0.5rem;
+    background: color-mix(in srgb, var(--muted) 16%, var(--card) 84%);
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.solidChatterAttachment img {
+    border-radius: 0.45rem;
+}
+
+.chatterSelectedFiles {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 0.75rem;
+}
+
+.chatterSelectedFileCard {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.45rem 0.75rem;
+    border-radius: 0.5rem;
+    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+    background: color-mix(in srgb, var(--card) 95%, var(--background) 5%);
+    min-width: 220px;
+}
+
+.chatterSelectedFileIcon {
+    width: 28px;
+    height: 28px;
+    border-radius: 0.45rem;
+    background: color-mix(in srgb, var(--primary) 14%, var(--card) 86%);
+    color: var(--primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.chatterSelectedFileMeta {
+    flex: 1;
+    min-width: 0;
+}
+
+.chatterSelectedFileName {
+    margin: 0;
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--foreground);
+    word-break: break-word;
+}
+
+.chatterSelectedFileSize {
+    font-size: 0.7rem;
+    color: var(--muted-foreground);
+}
+
+.solidChatterBadge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.2rem;
+    font-size: 0.62rem;
+    padding: 0.1rem 0.35rem;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+    background: color-mix(in srgb, var(--muted) 16%, var(--card) 84%);
+}
+
+.solidChatterBadge.audit {
+    color: #9333ea;
+    border-color: rgba(147, 51, 234, 0.2);
+    background: rgba(147, 51, 234, 0.08);
+}
+
+.solidChatterBadge.custom {
+    color: #2563eb;
+    border-color: rgba(37, 99, 235, 0.2);
+    background: rgba(37, 99, 235, 0.08);
+}
+
+:global(.solid-chatter-body) {
+    padding: 0.35rem 0.85rem 1rem 0.2rem;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+}
+:global(.solidMessageWrapper .solidMessageText) {
+    margin: 0;
+    font-size: inherit;
+    color: inherit;
+    line-height: inherit;
+}
+.solidMessageText {
+    margin: 0;
+    font-size: inherit;
+    color: inherit;
+    line-height: inherit;
+}

package/dist/components/core/common/DateFieldViewComponent.d.ts

@@ -2,7 +2,8 @@ type DateFieldViewProps = {
     value: unknown;
     format?: string;
     fallback?: string;
+    showTime?: boolean;
 };
-export declare const DateFieldViewComponent: ({ value, format, fallback, }: DateFieldViewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateFieldViewComponent: ({ value, format, fallback, showTime, }: DateFieldViewProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DateFieldViewComponent.d.ts.map

package/dist/components/core/common/DateFieldViewComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateFieldViewComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/core/common/DateFieldViewComponent.tsx"],"names":[],"mappings":"AAIA,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,sBAAsB,iCAIhC,kBAAkB,4CAqBpB,CAAC"}
+{"version":3,"file":"DateFieldViewComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/core/common/DateFieldViewComponent.tsx"],"names":[],"mappings":"AAIA,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,sBAAsB,2CAKhC,kBAAkB,4CAqBpB,CAAC"}

package/dist/components/core/common/DateFieldViewComponent.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import dayjs from "dayjs";
 export var DateFieldViewComponent = function (_a) {
-    var value = _a.value, format = _a.format, _b = _a.fallback, fallback = _b === void 0 ? "-" : _b;
+    var value = _a.value, format = _a.format, _b = _a.fallback, fallback = _b === void 0 ? "-" : _b, _c = _a.showTime, showTime = _c === void 0 ? false : _c;
     if (!value) {
         return _jsx(_Fragment, { children: fallback });
     }
@@ -16,6 +16,6 @@ export var DateFieldViewComponent = function (_a) {
         return _jsx(_Fragment, { children: dayjs(date).format(format) });
     }
     // Default → browser locale
-    return _jsx(_Fragment, { children: date.toLocaleDateString() });
+    return _jsx(_Fragment, { children: showTime ? date.toLocaleString() : date.toLocaleDateString() });
 };
 //# sourceMappingURL=DateFieldViewComponent.js.map

package/dist/components/core/common/DateFieldViewComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateFieldViewComponent.js","sourceRoot":"","sources":["../../../../src/components/core/common/DateFieldViewComponent.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,CAAC,IAAM,sBAAsB,GAAG,UAAC,EAIlB;QAHnB,KAAK,WAAA,EACL,MAAM,YAAA,EACN,gBAAc,EAAd,QAAQ,mBAAG,GAAG,KAAA;IAEd,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,4BAAG,QAAQ,GAAI,CAAC;KACxB;IAED,0BAA0B;IAC1B,IAAM,IAAI,GACR,KAAK,YAAY,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,KAAY,CAAC,CAAC;IAEzD,kCAAkC;IAClC,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE;QACzB,OAAO,4BAAG,MAAM,CAAC,KAAK,CAAC,GAAI,CAAC;KAC7B;IAED,0BAA0B;IAC1B,IAAI,MAAM,EAAE;QACV,OAAO,4BAAG,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GAAI,CAAC;KAC1C;IAED,2BAA2B;IAC3B,OAAO,4BAAG,IAAI,CAAC,kBAAkB,EAAE,GAAI,CAAC;AAC1C,CAAC,CAAC","sourcesContent":["\n\nimport dayjs from \"dayjs\";\n\ntype DateFieldViewProps = {\n  value: unknown;\n  format?: string; // dayjs format tokens (optional)\n  fallback?: string; // optional fallback text (default: \"-\")\n};\n\nexport const DateFieldViewComponent = ({\n  value,\n  format,\n  fallback = \"-\",\n}: DateFieldViewProps) => {\n  if (!value) {\n    return <>{fallback}</>;\n  }\n\n  // Normalize value to Date\n  const date =\n    value instanceof Date ? value : new Date(value as any);\n\n  // Invalid date → render raw value\n  if (isNaN(date.getTime())) {\n    return <>{String(value)}</>;\n  }\n\n  // Explicit format → dayjs\n  if (format) {\n    return <>{dayjs(date).format(format)}</>;\n  }\n\n  // Default → browser locale\n  return <>{date.toLocaleDateString()}</>;\n};\n"]}
+{"version":3,"file":"DateFieldViewComponent.js","sourceRoot":"","sources":["../../../../src/components/core/common/DateFieldViewComponent.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,CAAC,IAAM,sBAAsB,GAAG,UAAC,EAKlB;QAJnB,KAAK,WAAA,EACL,MAAM,YAAA,EACN,gBAAc,EAAd,QAAQ,mBAAG,GAAG,KAAA,EACd,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA;IAEhB,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,4BAAG,QAAQ,GAAI,CAAC;KACxB;IAED,0BAA0B;IAC1B,IAAM,IAAI,GACR,KAAK,YAAY,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,KAAY,CAAC,CAAC;IAEzD,kCAAkC;IAClC,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE;QACzB,OAAO,4BAAG,MAAM,CAAC,KAAK,CAAC,GAAI,CAAC;KAC7B;IAED,0BAA0B;IAC1B,IAAI,MAAM,EAAE;QACV,OAAO,4BAAG,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GAAI,CAAC;KAC1C;IAED,2BAA2B;IAC3B,OAAO,4BAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE,GAAI,CAAC;AAC7E,CAAC,CAAC","sourcesContent":["\n\nimport dayjs from \"dayjs\";\n\ntype DateFieldViewProps = {\n  value: unknown;\n  format?: string; // dayjs format tokens (optional)\n  fallback?: string; // optional fallback text (default: \"-\")\n  showTime?: boolean; // include time in default locale formatting\n};\n\nexport const DateFieldViewComponent = ({\n  value,\n  format,\n  fallback = \"-\",\n  showTime = false,\n}: DateFieldViewProps) => {\n  if (!value) {\n    return <>{fallback}</>;\n  }\n\n  // Normalize value to Date\n  const date =\n    value instanceof Date ? value : new Date(value as any);\n\n  // Invalid date → render raw value\n  if (isNaN(date.getTime())) {\n    return <>{String(value)}</>;\n  }\n\n  // Explicit format → dayjs\n  if (format) {\n    return <>{dayjs(date).format(format)}</>;\n  }\n\n  // Default → browser locale\n  return <>{showTime ? date.toLocaleString() : date.toLocaleDateString()}</>;\n};\n"]}

package/dist/components/core/common/DateFieldViewComponent.tsx

@@ -6,12 +6,14 @@ type DateFieldViewProps = {
   value: unknown;
   format?: string; // dayjs format tokens (optional)
   fallback?: string; // optional fallback text (default: "-")
+  showTime?: boolean; // include time in default locale formatting
 };
 
 export const DateFieldViewComponent = ({
   value,
   format,
   fallback = "-",
+  showTime = false,
 }: DateFieldViewProps) => {
   if (!value) {
     return <>{fallback}</>;
@@ -32,5 +34,5 @@ export const DateFieldViewComponent = ({
   }
 
   // Default → browser locale
-  return <>{date.toLocaleDateString()}</>;
+  return <>{showTime ? date.toLocaleString() : date.toLocaleDateString()}</>;
 };

package/dist/components/core/common/FilterComponent.d.ts

@@ -1,3 +1,4 @@
+import { type FilterMatchModeValue } from '../filter/filterMatchMode';
 export declare enum FilterRuleType {
     RULE = "rule",
     RULE_GROUP = "rule_group"
@@ -6,19 +7,12 @@ export declare enum FilterOperator {
     AND = "and",
     OR = "or"
 }
-export declare enum FilterMatchMode {
-    STARTS_WITH = "startsWith",
-    CONTAINS = "contains",
-    EQUALS = "equals",
-    GREATER_THAN = "gt",
-    LESS_THAN = "lt"
-}
 export interface FilterRule {
     id: number;
     type: FilterRuleType;
     matchOperator?: FilterOperator;
     fieldName?: string | null;
-    matchMode?: FilterMatchMode | null;
+    matchMode?: FilterMatchModeValue | null;
     value?: any;
     parentRule: number | null;
     children?: FilterRule[];

package/dist/components/core/common/FilterComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/core/common/FilterComponent.tsx"],"names":[],"mappings":"AAaA,oBAAY,cAAc;IACxB,IAAI,SAAS;IACb,UAAU,eAAe;CAC1B;AAED,oBAAY,cAAc;IACxB,GAAG,QAAQ;IACX,EAAE,OAAO;CACV;AAED,oBAAY,eAAe;IACzB,WAAW,eAAe;IAC1B,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,YAAY,OAAO;IACnB,SAAS,OAAO;CACjB;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,cAAc,CAAC;IACrB,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;CACpC;AAkND,QAAA,MAAM,eAAe;;;;;;;6CAuMpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"FilterComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/core/common/FilterComponent.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEvF,oBAAY,cAAc;IACxB,IAAI,SAAS;IACb,UAAU,eAAe;CAC1B;AAED,oBAAY,cAAc;IACxB,GAAG,QAAQ;IACX,EAAE,OAAO;CACV;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,cAAc,CAAC;IACrB,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;CACpC;AAmKD,QAAA,MAAM,eAAe;;;;;;;6CAuMpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/core/common/FilterComponent.js

@@ -18,14 +18,16 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { InputText } from 'primereact/inputtext';
-import { useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import { useState } from 'react';
 import { SolidFilterFields } from '../filter/SolidFilterFields';
-import { Button } from 'primereact/button';
-import { Fieldset } from 'primereact/fieldset';
-import { OverlayPanel } from 'primereact/overlaypanel';
-import { AutoComplete } from 'primereact/autocomplete';
+import { FolderPlus, Plus, Trash2 } from 'lucide-react';
+import { SolidButton } from '../../shad-cn-ui/SolidButton';
+import { SolidAutocomplete } from '../../shad-cn-ui/SolidAutocomplete';
+import { SolidInput } from '../../shad-cn-ui/SolidInput';
+import { SolidSelect } from '../../shad-cn-ui/SolidSelect';
+import { FilterMatchMode } from '../filter/filterMatchMode';
 export var FilterRuleType;
 (function (FilterRuleType) {
     FilterRuleType["RULE"] = "rule";
@@ -36,14 +38,6 @@ export var FilterOperator;
     FilterOperator["AND"] = "and";
     FilterOperator["OR"] = "or";
 })(FilterOperator || (FilterOperator = {}));
-export var FilterMatchMode;
-(function (FilterMatchMode) {
-    FilterMatchMode["STARTS_WITH"] = "startsWith";
-    FilterMatchMode["CONTAINS"] = "contains";
-    FilterMatchMode["EQUALS"] = "equals";
-    FilterMatchMode["GREATER_THAN"] = "gt";
-    FilterMatchMode["LESS_THAN"] = "lt";
-})(FilterMatchMode || (FilterMatchMode = {}));
 // const fields: Field[] = [
 //   { name: 'name', type: 'string' },
 //   { name: 'dob', type: 'date' },
@@ -83,7 +77,6 @@ var FilterRuleComponent = function (_a) {
     // const applicableOperators = rule.fieldName ? operatorOptions[fields.find(f => f.name === rule.fieldName)?.value.type].map(e => { return { name: e } }) : [];
     // const applicableInputField = rule.fieldName ? fields.find(f => f.name === rule.fieldName)?.type : "";
     var viewData = _a.viewData, fields = _a.fields, rule = _a.rule, onChange = _a.onChange, onAddRule = _a.onAddRule, onAddGroup = _a.onAddGroup, onDelete = _a.onDelete, level = _a.level;
-    var autoCompleteRef = useRef(null);
     var _b = useState({ name: rule.fieldName }), fieldName = _b[0], setFieldName = _b[1];
     var _c = useState({ name: rule.matchMode }), matchMode = _c[0], setMatchMode = _c[1];
     var _d = useState([]), filteredFields = _d[0], setFilteredFields = _d[1];
@@ -95,47 +88,32 @@ var FilterRuleComponent = function (_a) {
                 return item.name.toLowerCase().startsWith(query);
             });
         setFilteredFields(filtered);
-        setTimeout(function () {
-            var _a;
-            (_a = autoCompleteRef.current) === null || _a === void 0 ? void 0 : _a.show();
-        }, 0);
     };
-    return (
-    // <div style={{ marginLeft: (level - 1) * 10 + 'px' }} className="filter-rule">
-    _jsxs("div", { className: 'mt-2', children: [_jsxs("div", { className: 'flex flex-column md:flex-row  align-items-start md:align-items-center gap-2 md:gap-3', children: [_jsxs("div", { className: 'formgrid grid w-full', children: [_jsx("div", { className: 'col-12 md:col-4 pb-2 md:pb-0', children: _jsx(AutoComplete, { ref: autoCompleteRef, value: fieldName.name, suggestions: filteredFields, completeMethod: searchFields, field: "name", dropdown: true, forceSelection // only values from list
-                                    : true, placeholder: "Select Field", className: "w-full p-inputtext-sm solid-filter-auto-complete-field", onChange: function (e) {
-                                        setFieldName({ name: e.value }); // e.value will be an object or null
-                                        if (e.value) {
-                                            onChange(rule.id, 'fieldName', e.value.value); // send value to parent
-                                        }
-                                        else {
-                                            onChange(rule.id, 'fieldName', '');
-                                        }
-                                    } }) }), _jsx("div", { className: 'col-12 md:col-8', children: _jsx("div", { className: 'formgrid grid w-full', children: rule.fieldName ?
-                                        _jsx("div", { className: 'col-12', children: _jsx(SolidFilterFields, { viewData: viewData, fieldMetadata: viewData.data.solidFieldsMetadata[rule.fieldName], onChange: onChange, index: rule.id, rule: rule }) })
-                                        : _jsxs(_Fragment, { children: [_jsx("div", { className: 'col-12 md:col-6 pb-2 md:pb-0', children: _jsx(InputText, { disabled: true, value: rule.value || '', placeholder: "operator", className: 'w-full p-inputtext-sm ' }) }), _jsx("div", { className: 'col-12 md:col-6', children: _jsx(InputText, { disabled: true, value: rule.value || '', placeholder: "value", className: 'w-full p-inputtext-sm' }) })] }) }) })] }), _jsxs("div", { className: 'formgrid grid', children: [_jsx("div", { className: 'col-4 px-0 flex align-items-center', children: _jsx(Button, { text: true, severity: 'secondary', icon: "pi pi-plus", size: 'small', onClick: function () { return onAddRule(rule.parentRule); }, className: 'solid-filter-action-btn' }) }), _jsx("div", { className: 'col-4 px-0 flex align-items-center', children: _jsx(Button, { text: true, severity: 'secondary', icon: "pi pi-folder-plus", size: 'small', onClick: function () { return onAddGroup(rule.id); }, className: 'solid-filter-action-btn' }) }), _jsx("div", { className: 'col-4 px-0 flex align-items-center', children: _jsx(Button, { text: true, severity: 'secondary', icon: "pi pi-trash", size: 'small', onClick: function () { return onDelete(rule.id); }, className: 'solid-filter-action-btn' }) })] })] }), rule.children && rule.children.map(function (nestedRule) { return (_jsx("div", { className: 'py-3 nested-custom-filter', children: nestedRule.type === FilterRuleType.RULE
+    return (_jsxs("div", { className: 'solid-filter-rule-row', children: [_jsxs("div", { className: 'solid-filter-rule-main', children: [_jsx("div", { className: 'solid-filter-rule-field', children: _jsx("div", { className: 'solid-filter-control-wrap', children: _jsx(SolidAutocomplete, { value: fieldName.name, suggestions: filteredFields, completeMethod: searchFields, field: "name", dropdown: true, forceSelection // only values from list
+                                : true, placeholder: "Select Field", className: "w-full solid-filter-auto-complete-field solid-filter-compact-control", onChange: function (e) {
+                                    setFieldName({ name: e.value }); // e.value will be an object or null
+                                    if (e.value && typeof e.value === "object" && e.value.value) {
+                                        onChange(rule.id, 'fieldName', e.value.value); // send value to parent
+                                    }
+                                    else {
+                                        onChange(rule.id, 'fieldName', '');
+                                    }
+                                } }) }) }), _jsx("div", { className: 'solid-filter-rule-value', children: _jsx("div", { className: 'solid-filter-control-wrap', children: rule.fieldName ?
+                                _jsx(SolidFilterFields, { viewData: viewData, fieldMetadata: viewData.data.solidFieldsMetadata[rule.fieldName], onChange: onChange, index: rule.id, rule: rule })
+                                : _jsxs("div", { className: 'solid-filter-empty-pair', children: [_jsx(SolidInput, { disabled: true, value: rule.value || '', placeholder: "Operator", className: 'w-full solid-filter-compact-control' }), _jsx(SolidInput, { disabled: true, value: rule.value || '', placeholder: "Value", className: 'w-full solid-filter-compact-control' })] }) }) })] }), _jsxs("div", { className: 'solid-filter-rule-actions', children: [_jsx(SolidButton, { variant: "ghost", size: 'sm', onClick: function () { return onAddRule(rule.parentRule); }, className: 'solid-filter-action-btn solid-filter-action-icon-btn', children: _jsx(Plus, { size: 14 }) }), _jsx(SolidButton, { variant: "ghost", size: 'sm', onClick: function () { return onAddGroup(rule.id); }, className: 'solid-filter-action-btn solid-filter-action-icon-btn', children: _jsx(FolderPlus, { size: 14 }) }), _jsx(SolidButton, { variant: "ghost", size: 'sm', onClick: function () { return onDelete(rule.id); }, className: 'solid-filter-action-btn solid-filter-action-icon-btn is-danger', children: _jsx(Trash2, { size: 14 }) })] }), rule.children && rule.children.map(function (nestedRule) { return (_jsx("div", { className: 'nested-custom-filter', children: nestedRule.type === FilterRuleType.RULE
                     ? _jsx(FilterRuleComponent, { viewData: viewData, fields: fields, rule: nestedRule, onChange: onChange, onAddRule: onAddRule, onAddGroup: onAddGroup, onDelete: onDelete, level: level + 1 }, nestedRule.id)
                     : _jsx(FilterGroupComponent, { viewData: viewData, fields: fields, group: nestedRule, onChange: onChange, onAddRule: onAddRule, onAddGroup: onAddGroup, onDelete: onDelete, level: level + 1 }, nestedRule.id) }, nestedRule.id)); })] }));
 };
 // Component to render a group of filter rules
 var FilterGroupComponent = function (_a) {
     var viewData = _a.viewData, fields = _a.fields, group = _a.group, onChange = _a.onChange, onAddRule = _a.onAddRule, onAddGroup = _a.onAddGroup, onDelete = _a.onDelete, level = _a.level;
-    var op = useRef(null);
-    var legendTemplate = (_jsxs(_Fragment, { children: [_jsx(Button, { size: 'small', label: group.matchOperator, className: 'small-button', icon: "pi pi-angle-down", iconPos: 'right', onClick: function (e) { return op.current.toggle(e); }, style: {
-                    textTransform: "uppercase"
-                } }), _jsx(OverlayPanel, { ref: op, className: 'm-0', children: _jsxs("div", { className: 'flex flex-column', children: [_jsx(Button, { size: "small", label: "AND", text: true, className: 'small-button', onClick: function (e) { onChange(group.id, 'matchOperator', FilterOperator.AND); op.current.hide(e); } }), _jsx(Button, { size: "small", label: "OR", text: true, className: 'small-button', onClick: function (e) { onChange(group.id, 'matchOperator', FilterOperator.OR); op.current.hide(e); } })] }) })] })
-    // <select className='filter-select'
-    //   value={group.matchOperator}
-    //   onChange={e => onChange(group.id, 'matchOperator', e.target.value)}
-    // >
-    //   <option value={FilterOperator.AND}>AND</option>
-    //   <option value={FilterOperator.OR}>OR</option>
-    // </select>
-    );
-    return (_jsxs(Fieldset, { legend: legendTemplate, className: 'primary-filter-fieldset', children: [group.children && group.children.map(function (rule) { return (rule.type === FilterRuleType.RULE
+    return (_jsxs("div", { className: 'primary-filter-fieldset solid-filter-group-shell', children: [_jsx("div", { className: "solid-filter-group-operator-wrap", children: _jsx(SolidSelect, { value: group.matchOperator, options: [
+                        { label: "OR", value: FilterOperator.OR },
+                        { label: "AND", value: FilterOperator.AND },
+                    ], placeholder: "Operator", className: "solid-filter-group-operator-select", onChange: function (event) { return onChange(group.id, 'matchOperator', event.value); } }) }), group.children && group.children.map(function (rule) { return (rule.type === FilterRuleType.RULE
                 ? _jsx(FilterRuleComponent, { viewData: viewData, fields: fields, rule: rule, onChange: onChange, onAddRule: onAddRule, onAddGroup: onAddGroup, onDelete: onDelete, level: level + 1 }, rule.id)
                 : _jsx(FilterGroupComponent, { viewData: viewData, fields: fields, group: rule, onChange: onChange, onAddRule: onAddRule, onAddGroup: onAddGroup, onDelete: onDelete, level: level + 1 }, rule.id)); }), level === 0 &&
-                _jsx(Button, { text: true, label: 'Add Condition', icon: "pi pi-plus", size: 'small', onClick: function () { return onAddRule(group.id); }, className: 'px-0 mt-2' })] }));
+                _jsxs(SolidButton, { variant: "ghost", size: 'sm', onClick: function () { return onAddRule(group.id); }, className: 'px-0 mt-2 solid-filter-add-condition-btn', children: [_jsx(Plus, { size: 14 }), "Add Condition"] })] }));
 };
 // Main Filter component
 var FilterComponent = function (_a) {
@@ -282,7 +260,7 @@ var FilterComponent = function (_a) {
     //   // setPrintedState(JSON.stringify(filterRules, null, 2)); // Pretty format the state
     //   transformFilterRules(filterRules)
     // };
-    return (_jsxs("div", { className: '', children: [filterRules.map(function (rule) { return (_jsx(FilterGroupComponent, { viewData: viewData, fields: fields, group: rule, onChange: handleChange, onAddRule: handleAddRule, onAddGroup: handleAddGroup, onDelete: handleDeleteRule, level: 0 }, rule.id)); }), _jsxs("div", { className: 'flex gap-3 mt-3', children: [_jsx(Button, { label: "Apply", size: "small", onClick: function () { return transformFilterRules(filterRules); }, type: "submit" }), _jsx(Button, { type: 'button', label: 'Cancel', outlined: true, size: 'small', onClick: closeDialog })] })] }));
+    return (_jsxs("div", { className: 'solid-filter-builder', children: [filterRules.map(function (rule) { return (_jsx(FilterGroupComponent, { viewData: viewData, fields: fields, group: rule, onChange: handleChange, onAddRule: handleAddRule, onAddGroup: handleAddGroup, onDelete: handleDeleteRule, level: 0 }, rule.id)); }), _jsxs("div", { className: 'solid-filter-builder-actions', children: [_jsx(SolidButton, { variant: "primary", size: "sm", onClick: function () { return transformFilterRules(filterRules); }, type: "submit", className: "solid-filter-submit-btn", children: "Apply" }), _jsx(SolidButton, { type: 'button', variant: "outline", size: 'sm', onClick: closeDialog, className: "solid-filter-cancel-btn", children: "Cancel" })] })] }));
 };
 export default FilterComponent;
 //# sourceMappingURL=FilterComponent.js.map