@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/field.js

@@ -1,345 +1,129 @@
-// src/components/ui/field.tsx
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { SizeProvider, useComponentSize } from "./size-context.js";
+import { Separator } from "./separator.js";
+import { Label } from "./label.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { useMemo } from "react";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/label.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function Label({
-  className,
-  children,
-  withAsterisk = false,
-  showOptionalText = false,
-  ...props
-}) {
-  const labelClassName = cn(
-    "flex w-fit max-w-full items-center gap-1 text-gdt-sm leading-none font-semibold text-fg-primary select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-    className
-  );
-  if (withAsterisk) {
-    return (
-      // biome-ignore lint/a11y/noLabelWithoutControl: association is supplied by callers through htmlFor or nesting patterns.
-      /* @__PURE__ */ jsxs("label", { "data-slot": "label", className: labelClassName, ...props, children: [
-        /* @__PURE__ */ jsx("div", { className: "inline-flex", children }),
-        withAsterisk && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 text-fg-danger", children: "*" }),
-        showOptionalText && /* @__PURE__ */ jsx("span", { className: "text-gdt-xs font-normal italic", children: "(optional)" })
-      ] })
-    );
-  }
-  return (
-    // biome-ignore lint/a11y/noLabelWithoutControl: association is supplied by callers through htmlFor or nesting patterns.
-    /* @__PURE__ */ jsx("label", { "data-slot": "label", className: labelClassName, ...props, children: /* @__PURE__ */ jsxs("div", { children: [
-      children,
-      " ",
-      showOptionalText && /* @__PURE__ */ jsx("span", { className: "text-gdt-xs font-normal italic", children: "(optional)" })
-    ] }) })
-  );
-}
-
-// src/components/ui/separator.tsx
-import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function Separator({
-  className,
-  orientation = "horizontal",
-  dashed = false,
-  shade = "feint",
-  thickness = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx2(
-    SeparatorPrimitive,
-    {
-      "data-slot": "separator",
-      orientation,
-      className: cn(
-        "shrink-0 data-horizontal:h-0 data-horizontal:w-full data-vertical:w-0 data-vertical:self-stretch",
-        // style
-        dashed ? "border-dashed" : "border-solid",
-        // shade
-        shade === "feint" && "border-line-subtle",
-        shade === "deep" && "border-line",
-        // thickness
-        thickness === "hairline" && "data-horizontal:border-t-[0.5px] data-vertical:border-l-[0.5px]",
-        thickness === "default" && "data-horizontal:border-t data-vertical:border-l",
-        thickness === "thick" && "data-horizontal:border-t-2 data-vertical:border-l-2",
-        thickness === "extra-thick" && "data-horizontal:border-t-[3px] data-vertical:border-l-[3px]",
-        className
-      ),
-      ...props
-    }
-  );
-}
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function SizeProvider({
-  children,
-  size
-}) {
-  if (!size) {
-    return /* @__PURE__ */ jsx3(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx3(SizeContext.Provider, { value: size, children });
-}
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/field.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+//#region src/field.tsx
 function FieldSet({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
-    "fieldset",
-    {
-      "data-slot": "field-set",
-      className: cn(
-        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("fieldset", {
+		"data-slot": "field-set",
+		className: cn("flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className),
+		...props
+	});
 }
-function FieldLegend({
-  className,
-  variant = "legend",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(
-    "legend",
-    {
-      "data-slot": "field-legend",
-      "data-variant": variant,
-      className: cn(
-        "text-fg-primary data-[variant=label]:text-gdt-sm data-[variant=label]:font-semibold data-[variant=legend]:text-gdt-md data-[variant=legend]:font-medium",
-        className
-      ),
-      ...props
-    }
-  );
+function FieldLegend({ className, variant = "legend", ...props }) {
+	return /* @__PURE__ */ jsx("legend", {
+		"data-slot": "field-legend",
+		"data-variant": variant,
+		className: cn("text-fg-primary data-[variant=label]:text-gdt-sm data-[variant=label]:font-semibold data-[variant=legend]:text-gdt-md data-[variant=legend]:font-medium", className),
+		...props
+	});
 }
 function FieldGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
-    "div",
-    {
-      "data-slot": "field-group",
-      className: cn(
-        "group/field-group @container/field-group flex w-full flex-col gap-6 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-group",
+		className: cn("group/field-group @container/field-group flex w-full flex-col gap-6 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", className),
+		...props
+	});
 }
-var fieldVariants = cva("group/field flex w-full", {
-  variants: {
-    orientation: {
-      vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
-      horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio],[role=switch]]:mt-px data-[size=sm]:gap-1.5 data-[size=md]:gap-2.5 data-[size=lg]:gap-3",
-      responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio],[role=switch]]:mt-px"
-    },
-    size: {
-      sm: "gap-1",
-      md: "gap-1.5",
-      lg: "gap-2"
-    }
-  },
-  defaultVariants: {
-    orientation: "vertical",
-    size: "md"
-  }
+const fieldVariants = cva("group/field flex w-full", {
+	variants: {
+		orientation: {
+			vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+			horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio],[role=switch]]:mt-px data-[size=sm]:gap-1.5 data-[size=md]:gap-2.5 data-[size=lg]:gap-3",
+			responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio],[role=switch]]:mt-px"
+		},
+		size: {
+			sm: "gap-1",
+			md: "gap-1.5",
+			lg: "gap-2"
+		}
+	},
+	defaultVariants: {
+		orientation: "vertical",
+		size: "md"
+	}
 });
-function Field({
-  className,
-  orientation = "vertical",
-  size,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  return /* @__PURE__ */ jsx4(SizeProvider, { size: resolvedSize, children: /* @__PURE__ */ jsx4(
-    "div",
-    {
-      role: "group",
-      "data-slot": "field",
-      "data-orientation": orientation,
-      "data-size": resolvedSize,
-      className: cn(
-        fieldVariants({ orientation, size: resolvedSize }),
-        className
-      ),
-      ...props
-    }
-  ) });
+function Field({ className, orientation = "vertical", size, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	return /* @__PURE__ */ jsx(SizeProvider, {
+		size: resolvedSize,
+		children: /* @__PURE__ */ jsx("div", {
+			role: "group",
+			"data-slot": "field",
+			"data-orientation": orientation,
+			"data-size": resolvedSize,
+			className: cn(fieldVariants({
+				orientation,
+				size: resolvedSize
+			}), className),
+			...props
+		})
+	});
 }
 function FieldContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
-    "div",
-    {
-      "data-slot": "field-content",
-      className: cn(
-        "group/field-content flex flex-1 flex-col leading-snug group-data-[size=sm]/field:gap-0.5 group-data-[size=md]/field:gap-0.5 group-data-[size=lg]/field:gap-1",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-content",
+		className: cn("group/field-content flex flex-1 flex-col leading-snug group-data-[size=sm]/field:gap-0.5 group-data-[size=md]/field:gap-0.5 group-data-[size=lg]/field:gap-1", className),
+		...props
+	});
 }
-function FieldLabel({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(
-    Label,
-    {
-      "data-slot": "field-label",
-      className: cn(
-        "group/field-label peer/field-label flex w-fit gap-1 leading-snug font-semibold text-fg-primary group-data-[size=sm]/field:text-gdt-xs group-data-[size=md]/field:text-gdt-sm group-data-[size=lg]/field:text-gdt-md group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
-        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:gap-2",
-        className
-      ),
-      ...props
-    }
-  );
+function FieldLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Label, {
+		"data-slot": "field-label",
+		className: cn("group/field-label peer/field-label flex w-fit gap-1 leading-snug font-semibold text-fg-primary group-data-[size=sm]/field:text-gdt-xs group-data-[size=md]/field:text-gdt-sm group-data-[size=lg]/field:text-gdt-md group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:gap-2", className),
+		...props
+	});
 }
 function FieldTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
-    "div",
-    {
-      "data-slot": "field-label",
-      className: cn(
-        "flex w-fit items-center gap-2 font-semibold text-fg-primary group-data-[size=sm]/field:text-gdt-xs group-data-[size=md]/field:text-gdt-sm group-data-[size=lg]/field:text-gdt-md group-data-[disabled=true]/field:opacity-50",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-label",
+		className: cn("flex w-fit items-center gap-2 font-semibold text-fg-primary group-data-[size=sm]/field:text-gdt-xs group-data-[size=md]/field:text-gdt-sm group-data-[size=lg]/field:text-gdt-md group-data-[disabled=true]/field:opacity-50", className),
+		...props
+	});
 }
 function FieldDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
-    "p",
-    {
-      "data-slot": "field-description",
-      className: cn(
-        "text-left font-normal text-fg-secondary group-data-[size=sm]/field:text-gdt-subtext group-data-[size=md]/field:text-gdt-xs group-data-[size=lg]/field:text-gdt-sm group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
-        "last:mt-0 nth-last-2:-mt-1",
-        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "field-description",
+		className: cn("text-left font-normal text-fg-secondary group-data-[size=sm]/field:text-gdt-subtext group-data-[size=md]/field:text-gdt-xs group-data-[size=lg]/field:text-gdt-sm group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		...props
+	});
 }
-function FieldSeparator({
-  children,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      "data-slot": "field-separator",
-      "data-content": !!children,
-      className: cn(
-        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx4(Separator, { className: "absolute inset-0 top-1/2" }),
-        children && /* @__PURE__ */ jsx4(
-          "span",
-          {
-            className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
-            "data-slot": "field-separator-content",
-            children
-          }
-        )
-      ]
-    }
-  );
+function FieldSeparator({ children, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field-separator",
+		"data-content": !!children,
+		className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && /* @__PURE__ */ jsx("span", {
+			className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
+			"data-slot": "field-separator-content",
+			children
+		})]
+	});
 }
-function FieldError({
-  className,
-  children,
-  errors,
-  ...props
-}) {
-  const content = useMemo(() => {
-    if (children) {
-      return children;
-    }
-    if (!errors?.length) {
-      return null;
-    }
-    const uniqueErrors = [
-      ...new Map(errors.map((error) => [error?.message, error])).values()
-    ];
-    if (uniqueErrors?.length === 1) {
-      return uniqueErrors[0]?.message;
-    }
-    return /* @__PURE__ */ jsx4("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map(
-      (error) => error?.message && /* @__PURE__ */ jsx4("li", { children: error.message }, error.message)
-    ) });
-  }, [children, errors]);
-  if (!content) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx4(
-    "div",
-    {
-      role: "alert",
-      "data-slot": "field-error",
-      className: cn("text-gdt-xs font-normal text-fg-danger", className),
-      ...props,
-      children: content
-    }
-  );
+function FieldError({ className, children, errors, ...props }) {
+	const content = useMemo(() => {
+		if (children) return children;
+		if (!errors?.length) return null;
+		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+		if (uniqueErrors?.length === 1) return uniqueErrors[0]?.message;
+		return /* @__PURE__ */ jsx("ul", {
+			className: "ml-4 flex list-disc flex-col gap-1",
+			children: uniqueErrors.map((error) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, error.message))
+		});
+	}, [children, errors]);
+	if (!content) return null;
+	return /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		"data-slot": "field-error",
+		className: cn("text-gdt-xs font-normal text-fg-danger", className),
+		...props,
+		children: content
+	});
 }
-export {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldTitle
-};
-//# sourceMappingURL=field.js.map
+//#endregion
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

package/dist/filter.d.ts

@@ -0,0 +1,118 @@
+import * as React from "react";
+//#region src/filter.d.ts
+type FilterJoin = "AND" | "OR";
+type FilterFieldType = "text" | "number" | "date" | "select" | "multiSelect" | "range" | "boolean";
+type FilterCondition = "equals" | "greaterThan" | "lessThan" | "contains";
+type FilterRangeValue = {
+  min?: number;
+  max?: number;
+};
+type FilterValue = string | number | boolean | Array<string | number> | FilterRangeValue;
+type SerializedFilter = {
+  connector: FilterJoin;
+  field: string;
+  action: FilterCondition;
+  value: string | number | boolean | Array<string | number>;
+};
+type FilterFieldOption = {
+  label: string;
+  value: string | number;
+};
+type FilterFieldValueProps = {
+  field: FilterFieldConfig;
+  value?: FilterValue;
+  onChange: (value?: FilterValue) => void;
+  invalid: boolean;
+  error?: string;
+};
+type FilterFieldConfig = {
+  /** The field id sent to the api e.g Name, for nested fields use dot notation e.g Address.City */
+  field: string;
+  label: string;
+  type: FilterFieldType;
+  /** Static options for select or multiSelect fields, also shown while `loadOptions` is in flight. */
+  options?: FilterFieldOption[];
+  /**
+   * Lazily load select options. Only called once the dropdown is opened and
+   * the result is cached per field, so wire it to `fetch`, a server action,
+   * or `queryClient.fetchQuery` — no data library is assumed.
+   */
+  loadOptions?: () => Promise<FilterFieldOption[]>;
+  /**
+   * Replace the built-in value input for this field. Compose the exported
+   * `FilterValue*` components to keep styling consistent, e.g. wire
+   * `FilterValueSelect` to React Query in your app.
+   */
+  renderValue?: (props: FilterFieldValueProps) => React.ReactNode;
+};
+type FilterProps = {
+  children: React.ReactNode;
+  /** Connector used between generated filters. */
+  defaultJoin?: FilterJoin;
+  fields: FilterFieldConfig[];
+  /** Receives the serialized filter JSON string plus the structured filters. */
+  onApply: (serialized: string, filters: SerializedFilter[]) => void;
+  /** Serialized filters used to initialize state, e.g. read from the URL. */
+  defaultValue?: string;
+};
+declare function Filter({ children, defaultJoin, fields, onApply, defaultValue }: FilterProps): React.JSX.Element;
+type FilterTriggerProps = {
+  children?: React.ReactNode;
+  className?: string;
+  countClassName?: string;
+  /** Hide the count badge while no filters are applied. */
+  hideCountWhenZero?: boolean;
+  render?: (props: {
+    count: number;
+  }) => React.ReactNode;
+};
+declare function FilterTrigger({ children, className, countClassName, hideCountWhenZero, render }: FilterTriggerProps): React.JSX.Element;
+type FilterContentProps = {
+  addFilterLabel?: React.ReactNode;
+  className?: string;
+  label?: React.ReactNode;
+};
+declare function FilterContent({ addFilterLabel, className, label }: FilterContentProps): React.JSX.Element;
+type FilterValueInputProps = {
+  value?: FilterValue;
+  onChange: (value?: FilterValue) => void;
+  invalid?: boolean;
+  placeholder?: string;
+};
+declare function FilterValueText({ value, onChange, invalid, placeholder }: FilterValueInputProps): React.JSX.Element;
+declare function FilterValueNumber({ value, onChange, invalid, placeholder }: FilterValueInputProps): React.JSX.Element;
+declare function FilterValueDate({ value, onChange, invalid }: FilterValueInputProps): React.JSX.Element;
+type FilterValueBooleanProps = FilterValueInputProps & {
+  trueLabel?: string;
+  falseLabel?: string;
+};
+declare function FilterValueBoolean({ value, onChange, invalid, placeholder, trueLabel, falseLabel }: FilterValueBooleanProps): React.JSX.Element;
+declare function FilterValueRange({ value, onChange, invalid }: FilterValueInputProps): React.JSX.Element;
+type FilterValueSelectProps = FilterValueInputProps & {
+  options: FilterFieldOption[];
+  multiple?: boolean;
+  loading?: boolean;
+  emptyMessage?: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+declare function FilterValueSelect({ value, onChange, invalid, placeholder, options, multiple, loading, emptyMessage, open, onOpenChange }: FilterValueSelectProps): React.JSX.Element;
+type FilterApplyButtonProps = {
+  children?: React.ReactNode;
+  className?: string;
+  onApplySuccess?: () => void;
+};
+declare function FilterApplyButton({ children, className, onApplySuccess }: FilterApplyButtonProps): React.JSX.Element;
+type FilterResetButtonProps = {
+  children?: React.ReactNode;
+  className?: string;
+  onReset?: () => void;
+};
+declare function FilterResetButton({ children, className, onReset }: FilterResetButtonProps): React.JSX.Element;
+/**
+ * Parse a serialized filter string (as produced by `onApply`) back into
+ * structured filters. Invalid or malformed entries are dropped.
+ */
+declare function parseSerializedFilters(value: string): SerializedFilter[];
+//#endregion
+export { Filter, FilterApplyButton, type FilterApplyButtonProps, type FilterCondition, FilterContent, type FilterContentProps, type FilterFieldConfig, type FilterFieldOption, type FilterFieldType, type FilterFieldValueProps, type FilterJoin, type FilterProps, type FilterRangeValue, FilterResetButton, type FilterResetButtonProps, FilterTrigger, type FilterTriggerProps, type FilterValue, FilterValueBoolean, type FilterValueBooleanProps, FilterValueDate, type FilterValueInputProps, FilterValueNumber, FilterValueRange, FilterValueSelect, type FilterValueSelectProps, FilterValueText, type SerializedFilter, parseSerializedFilters };