@cryptlex/web-components 5.2.0 → 5.3.0-alpha

package/dist/utils/resource-names.js

@@ -0,0 +1,2 @@
+import{jsx as s}from"react/jsx-runtime";import{convertCamelCaseToTitleCase as n}from"./primitives.js";import{createContext as i,use as l}from"react";import"clsx";const t={"product.displayName":"Product"},f=["access-token","account","activation","activation-log","admin-role","audit-log","automated-email","automated-email-event-log","card","feature-flag","invoice","license","license-template","maintenance-policy","organization","plan","product","product-version","profile","release","release-channel","release-file","release-platform","report","role","role-claim","saml-configuration","segment","sending-domain","setting","tag","team-member","trial","trial-policy","user","user-group","webhook","webhook-event-log","webhook-trigger","reseller","oidc-configuration","organization-claim","reseller-claim"],y={account:"Your organization account.",product:"Products are the software products you want to license",license:"Licenses represent a purchase of your software. These can be linked to customers, and the license key is required to use the product.","access-token":"Access Tokens are used to authenticate your API requests.",activation:"Activations, also known as devices/machines/seats are the devices consuming licenses.","activation-log":"Activation Log is a log entry of activation/deactivation of a particular license.",trial:"Trial/Trial Activation is a device that has activated a trial of your product.","audit-log":"Audit logs contain all the changes made to your account.","automated-email":"Automated Email allow you to send marketing emails based on events on the linked product.","automated-email-event-log":"Automated email event log is the log of all the automated email events for your product.",card:"The payment card for your account.","feature-flag":"Feature flags define features that make up tiers for your products.",invoice:"","license-template":"License templates are a blueprint for the licenses you create for your customers and prevent repetition when creating licenses.","maintenance-policy":"Maintenance policies represent support contracts and can be linked to licenses.",plan:"","product-version":"Product Versions are sets of Feature Flags that define the tiers of your products.","release-channel":"Release channel is the release channel for your product.","release-file":"Release files are files within your created releases.","release-platform":'Release Platforms differentiate the target platform for your release. Common platforms include "Windows", "macOS", and "Linux".',release:"Releases help you to manage different versions of your app, and secure distribute it to licensed users.",report:"Analytics data for your account","role-claim":"",role:"Roles define permissions for your team.","saml-configuration":"",segment:"Sets of filters that can be saved to filter resources.","trial-policy":"Trial policies are templates for creating trials for your products.","webhook-event-log":"Webhook Event Logs are logs of events that have occured on webhooks.","webhook-trigger":"",webhook:"Webhooks are HTTP callbacks which are triggered by specific events.",organization:"",profile:"",setting:"",tag:"Tags allow you to manage your licenses and customers on the dashboard.","team-member":"Team members can access the account based on their roles.",user:"A user refers to your customer whom you want to license your product.","sending-domain":"Allows Cryptlex to send emails on your behalf using your From Email address","admin-role":"Roles that have type admin","user-group":"Groups of users that you can assign licenses to.",reseller:"Resellers allow you to delegate user management to third parties or partners","oidc-configuration":"","organization-claim":"","reseller-claim":""},a={id:"ID",createdAt:"Creation Date",scopes:"Permissions",updatedAt:"Last Updated",expiresAt:"Expiration Date",lastSeenAt:"Last Seen",os:"OS",osVersion:"OS Version",key:"License Key",vmName:"VM Name",container:"Container",allowedIpRange:"Allowed IP Range",allowedIpRanges:"Allowed IP Ranges",allowedIpAddresses:"Allowed IP Addresses",disallowedIpAddresses:"Disallowed IP Addresses",allowVmActivation:"Allow VM Activation",disableGeoLocation:"Disable Geolocation","user.id":"User ID",userId:"User",productId:"Product",downloads:"Total Downloads",claims:"Permissions",googleSsoEnabled:"Google Login Enabled",lastAttemptedAt:"Last Attempt Date",url:"URL","trialPolicy.name":"Trial Policy Name","licensePolicy.name":"License Template Name",licensePolicy:"License Template",eventLog:"Audit Log",cc:"CC Recepients",bcc:"BCC Recepients",ipAddress:"IP Address",resellerId:"Reseller",productVersionId:"Product Version",releaseId:"Release",maintenancePolicyId:"Maintenance Policy",webhookId:"Webhook",automatedEmailId:"Automated Email","location.countryName":"Country","location.ipAddress":"IP Address","location.countryCode":"Country",organizationId:"Organization","address.country":"Country","address.addressLine1":"Address Line 1","address.addressLine2":"Address Line 2",responseStatusCode:"HTTP Status Code",resourceId:"Resource ID",Sso:"SAML SSO 2.0","reseller.name":"Reseller",sendingDomain:"Email Sending Domain"};function c(e,o){return o!=="admin-portal"&&e in t?t[e]:e in a?a[e]:n(e)}const r=i("admin-portal");function h({projectName:e,children:o}){return s(r.Provider,{value:e,children:o})}function d(){return l(r)}function A(){const e=d();return o=>c(o,e)}export{h as ProjectProvider,y as RESOURCE_DEFINITIONS,f as RESOURCE_NAMES,d as useProjectName,A as useResourceFormatter};
+//# sourceMappingURL=resource-names.js.map

package/dist/utils/resource-names.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resource-names.js","sources":["../../lib/utils/resource-names.tsx"],"sourcesContent":["import { convertCamelCaseToTitleCase, type CtxPortals } from \"lib/utils/primitives\";\nimport { createContext, use } from \"react\";\n\n// Display names specific to customer and reseller portal\nconst OTHER_PORTALS_DISPLAY_NAME: Record<string, string> = {\n    \"product.displayName\": \"Product\",\n};\n\n/** Resource Name should ALWAYS be in singular form */\nexport const RESOURCE_NAMES = [\n    \"access-token\",\n    \"account\",\n    \"activation\",\n    \"activation-log\",\n    \"admin-role\",\n    \"audit-log\",\n    \"automated-email\",\n    \"automated-email-event-log\",\n    \"card\",\n    \"feature-flag\",\n    \"invoice\",\n    \"license\",\n    \"license-template\",\n    \"maintenance-policy\",\n    \"organization\",\n    \"plan\",\n    \"product\",\n    \"product-version\",\n    \"profile\",\n    \"release\",\n    \"release-channel\",\n    \"release-file\",\n    \"release-platform\",\n    \"report\",\n    \"role\",\n    \"role-claim\",\n    \"saml-configuration\",\n    \"segment\",\n    \"sending-domain\",\n    \"setting\",\n    \"tag\",\n    \"team-member\",\n    \"trial\",\n    \"trial-policy\",\n    \"user\",\n    \"user-group\",\n    \"webhook\",\n    \"webhook-event-log\",\n    \"webhook-trigger\",\n    \"reseller\",\n    \"oidc-configuration\",\n    \"organization-claim\",\n    \"reseller-claim\",\n] as const;\nexport type ResourceName = (typeof RESOURCE_NAMES)[number];\nexport const RESOURCE_DEFINITIONS: Record<ResourceName, string> = {\n    account: \"Your organization account.\",\n    product: \"Products are the software products you want to license\",\n    license:\n        \"Licenses represent a purchase of your software. These can be linked to customers, and the license key is required to use the product.\",\n    \"access-token\": \"Access Tokens are used to authenticate your API requests.\",\n    activation:\n        \"Activations, also known as devices/machines/seats are the devices consuming licenses.\",\n    \"activation-log\":\n        \"Activation Log is a log entry of activation/deactivation of a particular license.\",\n    trial:\n        \"Trial/Trial Activation is a device that has activated a trial of your product.\",\n    \"audit-log\": \"Audit logs contain all the changes made to your account.\",\n    \"automated-email\":\n        \"Automated Email allow you to send marketing emails based on events on the linked product.\",\n    \"automated-email-event-log\":\n        \"Automated email event log is the log of all the automated email events for your product.\",\n    card: \"The payment card for your account.\",\n    \"feature-flag\":\n        \"Feature flags define features that make up tiers for your products.\",\n    invoice: \"\",\n    \"license-template\":\n        \"License templates are a blueprint for the licenses you create for your customers and prevent repetition when creating licenses.\",\n    \"maintenance-policy\":\n        \"Maintenance policies represent support contracts and can be linked to licenses.\",\n    plan: \"\",\n    \"product-version\":\n        \"Product Versions are sets of Feature Flags that define the tiers of your products.\",\n    \"release-channel\": \"Release channel is the release channel for your product.\",\n    \"release-file\": \"Release files are files within your created releases.\",\n    \"release-platform\":\n        'Release Platforms differentiate the target platform for your release. Common platforms include \"Windows\", \"macOS\", and \"Linux\".',\n    release:\n        \"Releases help you to manage different versions of your app, and secure distribute it to licensed users.\",\n    report: \"Analytics data for your account\",\n    \"role-claim\": \"\",\n    role: \"Roles define permissions for your team.\",\n    \"saml-configuration\": \"\",\n    segment: \"Sets of filters that can be saved to filter resources.\",\n    \"trial-policy\":\n        \"Trial policies are templates for creating trials for your products.\",\n    \"webhook-event-log\":\n        \"Webhook Event Logs are logs of events that have occured on webhooks.\",\n    \"webhook-trigger\": \"\",\n    webhook:\n        \"Webhooks are HTTP callbacks which are triggered by specific events.\",\n    organization: \"\",\n    profile: \"\",\n    setting: \"\",\n    tag: \"Tags allow you to manage your licenses and customers on the dashboard.\",\n    \"team-member\": \"Team members can access the account based on their roles.\",\n    user: \"A user refers to your customer whom you want to license your product.\",\n    \"sending-domain\":\n        \"Allows Cryptlex to send emails on your behalf using your From Email address\",\n    \"admin-role\": \"Roles that have type admin\",\n    \"user-group\": \"Groups of users that you can assign licenses to.\",\n    reseller:\n        \"Resellers allow you to delegate user management to third parties or partners\",\n    \"oidc-configuration\": \"\",\n    \"organization-claim\": \"\",\n    \"reseller-claim\": \"\",\n};\n\nconst RESOURCE_DISPLAY_NAMES: Record<string, string> = {\n    id: \"ID\",\n    createdAt: \"Creation Date\",\n    scopes: \"Permissions\",\n    updatedAt: \"Last Updated\",\n    expiresAt: \"Expiration Date\",\n    lastSeenAt: \"Last Seen\",\n    os: \"OS\",\n    osVersion: \"OS Version\",\n    key: \"License Key\",\n    vmName: \"VM Name\",\n    container: \"Container\",\n    allowedIpRange: \"Allowed IP Range\",\n    allowedIpRanges: \"Allowed IP Ranges\",\n    allowedIpAddresses: \"Allowed IP Addresses\",\n    disallowedIpAddresses: \"Disallowed IP Addresses\",\n    allowVmActivation: \"Allow VM Activation\",\n    disableGeoLocation: \"Disable Geolocation\",\n    \"user.id\": \"User ID\",\n    userId: \"User\",\n    productId: \"Product\",\n    downloads: \"Total Downloads\",\n    claims: \"Permissions\",\n    googleSsoEnabled: \"Google Login Enabled\",\n    lastAttemptedAt: \"Last Attempt Date\",\n    url: \"URL\",\n    \"trialPolicy.name\": \"Trial Policy Name\",\n    \"licensePolicy.name\": \"License Template Name\",\n    licensePolicy: \"License Template\",\n    eventLog: \"Audit Log\",\n    cc: \"CC Recepients\",\n    bcc: \"BCC Recepients\",\n    ipAddress: \"IP Address\",\n    resellerId: \"Reseller\",\n    productVersionId: \"Product Version\",\n    releaseId: \"Release\",\n    maintenancePolicyId: \"Maintenance Policy\",\n    webhookId: \"Webhook\",\n    automatedEmailId: \"Automated Email\",\n    \"location.countryName\": \"Country\",\n    \"location.ipAddress\": \"IP Address\",\n    \"location.countryCode\": \"Country\",\n    organizationId: \"Organization\",\n    \"address.country\": \"Country\",\n    \"address.addressLine1\": \"Address Line 1\",\n    \"address.addressLine2\": \"Address Line 2\",\n    responseStatusCode: \"HTTP Status Code\",\n    resourceId: \"Resource ID\",\n    Sso: \"SAML SSO 2.0\",\n    \"reseller.name\": \"Reseller\",\n    sendingDomain: \"Email Sending Domain\",\n};\n\nfunction getResourceDisplayName(\n    resourceName: string,\n    portal: CtxPortals,\n) {\n    if (portal !== \"admin-portal\" && resourceName in OTHER_PORTALS_DISPLAY_NAME) {\n        return OTHER_PORTALS_DISPLAY_NAME[resourceName];\n    } else if (resourceName in RESOURCE_DISPLAY_NAMES) {\n        return RESOURCE_DISPLAY_NAMES[resourceName];\n    } else {\n        return convertCamelCaseToTitleCase(resourceName);\n    }\n}\n\nconst ProjectContext = createContext<CtxPortals>('admin-portal');\n\nexport function ProjectProvider({ projectName, children }: { projectName: CtxPortals; children: React.ReactNode; }) {\n    return (\n        <ProjectContext.Provider value={projectName}>\n            {children}\n        </ProjectContext.Provider>\n    );\n}\n\nexport function useProjectName(): CtxPortals {\n    return use(ProjectContext);\n}\n\nexport function useResourceFormatter(): (resourceName: string) => string {\n    const portal = useProjectName();\n    return (resourceName: string) => getResourceDisplayName(resourceName, portal);\n}"],"names":["OTHER_PORTALS_DISPLAY_NAME","RESOURCE_NAMES","RESOURCE_DEFINITIONS","RESOURCE_DISPLAY_NAMES","getResourceDisplayName","resourceName","portal","convertCamelCaseToTitleCase","ProjectContext","createContext","ProjectProvider","projectName","children","useProjectName","use","useResourceFormatter"],"mappings":"kKAIA,MAAMA,EAAqD,CACvD,sBAAuB,SAC3B,EAGaC,EAAiB,CAC1B,eACA,UACA,aACA,iBACA,aACA,YACA,kBACA,4BACA,OACA,eACA,UACA,UACA,mBACA,qBACA,eACA,OACA,UACA,kBACA,UACA,UACA,kBACA,eACA,mBACA,SACA,OACA,aACA,qBACA,UACA,iBACA,UACA,MACA,cACA,QACA,eACA,OACA,aACA,UACA,oBACA,kBACA,WACA,qBACA,qBACA,gBACJ,EAEaC,EAAqD,CAC9D,QAAS,6BACT,QAAS,yDACT,QACI,wIACJ,eAAgB,4DAChB,WACI,wFACJ,iBACI,oFACJ,MACI,iFACJ,YAAa,2DACb,kBACI,4FACJ,4BACI,2FACJ,KAAM,qCACN,eACI,sEACJ,QAAS,GACT,mBACI,kIACJ,qBACI,kFACJ,KAAM,GACN,kBACI,qFACJ,kBAAmB,2DACnB,eAAgB,wDAChB,mBACI,kIACJ,QACI,0GACJ,OAAQ,kCACR,aAAc,GACd,KAAM,0CACN,qBAAsB,GACtB,QAAS,yDACT,eACI,sEACJ,oBACI,uEACJ,kBAAmB,GACnB,QACI,sEACJ,aAAc,GACd,QAAS,GACT,QAAS,GACT,IAAK,yEACL,cAAe,4DACf,KAAM,wEACN,iBACI,8EACJ,aAAc,6BACd,aAAc,mDACd,SACI,+EACJ,qBAAsB,GACtB,qBAAsB,GACtB,iBAAkB,EACtB,EAEMC,EAAiD,CACnD,GAAI,KACJ,UAAW,gBACX,OAAQ,cACR,UAAW,eACX,UAAW,kBACX,WAAY,YACZ,GAAI,KACJ,UAAW,aACX,IAAK,cACL,OAAQ,UACR,UAAW,YACX,eAAgB,mBAChB,gBAAiB,oBACjB,mBAAoB,uBACpB,sBAAuB,0BACvB,kBAAmB,sBACnB,mBAAoB,sBACpB,UAAW,UACX,OAAQ,OACR,UAAW,UACX,UAAW,kBACX,OAAQ,cACR,iBAAkB,uBAClB,gBAAiB,oBACjB,IAAK,MACL,mBAAoB,oBACpB,qBAAsB,wBACtB,cAAe,mBACf,SAAU,YACV,GAAI,gBACJ,IAAK,iBACL,UAAW,aACX,WAAY,WACZ,iBAAkB,kBAClB,UAAW,UACX,oBAAqB,qBACrB,UAAW,UACX,iBAAkB,kBAClB,uBAAwB,UACxB,qBAAsB,aACtB,uBAAwB,UACxB,eAAgB,eAChB,kBAAmB,UACnB,uBAAwB,iBACxB,uBAAwB,iBACxB,mBAAoB,mBACpB,WAAY,cACZ,IAAK,eACL,gBAAiB,WACjB,cAAe,sBACnB,EAEA,SAASC,EACLC,EACAC,EACF,CACE,OAAIA,IAAW,gBAAkBD,KAAgBL,EACtCA,EAA2BK,CAAY,EACvCA,KAAgBF,EAChBA,EAAuBE,CAAY,EAEnCE,EAA4BF,CAAY,CAEvD,CAEA,MAAMG,EAAiBC,EAA0B,cAAc,EAExD,SAASC,EAAgB,CAAE,YAAAC,EAAa,SAAAC,GAAqE,CAChH,SACKJ,EAAe,SAAf,CAAwB,MAAOG,EAC3B,SAAAC,EACL,CAER,CAEO,SAASC,GAA6B,CACzC,OAAOC,EAAIN,CAAc,CAC7B,CAEO,SAASO,GAAyD,CACrE,MAAMT,EAASO,EAAA,EACf,OAAQR,GAAyBD,EAAuBC,EAAcC,CAAM,CAChF"}

package/dist/utils/use-mobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

package/dist/utils/use-mobile.js

@@ -0,0 +1,2 @@
+import{useState as s,useEffect as r}from"react";const e=768;function c(){const[o,n]=s(void 0);return r(()=>{const t=window.matchMedia(`(max-width: ${e-1}px)`),i=()=>{n(window.innerWidth<e)};return t.addEventListener("change",i),n(window.innerWidth<e),()=>t.removeEventListener("change",i)},[]),!!o}export{c as useIsMobile};
+//# sourceMappingURL=use-mobile.js.map

package/dist/utils/use-mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.js","sources":["../../lib/utils/use-mobile.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n\tconst [isMobile, setIsMobile] = useState<boolean | undefined>(\n\t\tundefined,\n\t);\n\n\tuseEffect(() => {\n\t\tconst mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n\t\tconst onChange = () => {\n\t\t\tsetIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n\t\t};\n\t\tmql.addEventListener(\"change\", onChange);\n\t\tsetIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n\t\treturn () => mql.removeEventListener(\"change\", onChange);\n\t}, []);\n\n\treturn !!isMobile;\n}\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","useState","useEffect","mql","onChange"],"mappings":"gDAEA,MAAMA,EAAoB,IAEnB,SAASC,GAAc,CAC7B,KAAM,CAACC,EAAUC,CAAW,EAAIC,EAC/B,MAAA,EAGD,OAAAC,EAAU,IAAM,CACf,MAAMC,EAAM,OAAO,WAAW,eAAeN,EAAoB,CAAC,KAAK,EACjEO,EAAW,IAAM,CACtBJ,EAAY,OAAO,WAAaH,CAAiB,CAClD,EACA,OAAAM,EAAI,iBAAiB,SAAUC,CAAQ,EACvCJ,EAAY,OAAO,WAAaH,CAAiB,EAC1C,IAAMM,EAAI,oBAAoB,SAAUC,CAAQ,CACxD,EAAG,CAAA,CAAE,EAEE,CAAC,CAACL,CACV"}

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "5.2.0",
+  "version": "5.3.0-alpha",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",
   "private": false,
   "exports": {
     "./components/*": {
-      "import": "./lib/components/*"
+      "import": "./dist/components/*"
     },
     "./utils/*": {
-      "import": "./lib/utils/*"
+      "import": "./dist/utils/*"
     },
     "./index.css": "./lib/index.css",
     "./tokens.css": "./lib/tokens.css",
@@ -19,7 +19,12 @@
     "./utilities.css": "./lib/utilities.css"
   },
   "files": [
-    "lib"
+    "dist",
+    "./lib/index.css",
+    "./lib/tokens.css",
+    "./lib/theme.css",
+    "./lib/base.css",
+    "./lib/utilities.css"
   ],
   "repository": {
     "type": "git",
@@ -41,7 +46,7 @@
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@internationalized/date": "^3.8.2",
+    "@internationalized/date": "3.8.2",
     "@tanstack/react-form": "1.6.3",
     "@tanstack/react-query": "5.62.3",
     "@tanstack/react-table": "8.20.5",
@@ -61,6 +66,7 @@
     "tw-animate-css": "1.3.0"
   },
   "devDependencies": {
+    "@rollup/plugin-node-resolve": "16.0.1",
     "@storybook/addon-docs": "9.0.18",
     "@storybook/addon-links": "9.0.18",
     "@storybook/addon-onboarding": "9.0.18",
@@ -70,17 +76,19 @@
     "@types/node": "^22.7.8",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
-    "@vitejs/plugin-react": "^4.7.0",
+    "@vitejs/plugin-react": "4.7.0",
+    "rollup-preserve-directives": "1.1.3",
     "sass": "1.80.6",
     "storybook": "9.0.18",
     "typescript": "5.8.3",
     "typescript-eslint": "8.38.0",
     "vite": "7.0.6",
-    "vite-tsconfig-paths": "^5.1.4",
+    "vite-plugin-dts": "4.5.4",
+    "vite-tsconfig-paths": "5.1.4",
     "zod": "3.25.20"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && vite build",
     "lint": "eslint .",
     "storybook": "storybook dev -p 6006 --no-open",
     "build:storybook": "storybook build",

package/lib/components/data-table/data-table-filter.tsx

@@ -1,220 +0,0 @@
-import type { CalendarDateTime } from "@internationalized/date";
-import { useDataTable, type OperationKeys } from "lib/components/data-table/data-table";
-import { type ApiFilters } from "lib/components/data-table/table-commons";
-import { TfDatePicker } from "lib/components/inputs/date-picker";
-import { TfIdSearchInput } from "lib/components/inputs/id-search";
-import type { MultiSelectProps } from "lib/components/inputs/multi-select";
-import { Button } from "lib/components/ui/button";
-import { EasyMenu, MenuItem } from "lib/components/ui/menu";
-import { Popover, PopoverTrigger } from "lib/components/ui/popover";
-import { useAppForm } from "lib/utils/form-hook";
-import { cn } from "lib/utils/primitives";
-import { useResourceFormatter } from "lib/utils/resource-names";
-import { Filter, Trash } from "lucide-react";
-import { useRef } from "react";
-
-export const FILTER_COMPARISON_OPERATORS = [
-    'eq',
-    'ne',
-    'cn',
-    'nc',
-    'sw',
-    'ew',
-    'in',
-    'nin',
-    'gt',
-    'gte',
-    'lt',
-    'lte',
-] as const;
-export type FilterComparisonOperator =
-    (typeof FILTER_COMPARISON_OPERATORS)[number];
-
-export const COMPARISON_OPERATOR_LABELS: Record<
-    FilterComparisonOperator,
-    string
-> = {
-    eq: 'equal to',
-    ne: 'not equal to',
-    cn: 'contains',
-    nc: 'does not contain',
-    sw: 'starts with',
-    ew: 'ends with',
-    in: 'includes',
-    nin: 'does not include',
-    gt: 'greater than',
-    gte: 'greater than or equal to',
-    lt: 'less than',
-    lte: 'less than or equal to',
-};
-
-type BaseLocalFilter<T extends FilterType, V> = {
-    id: string;
-    type: T;
-    property: string;
-    operator: FilterComparisonOperator;
-    value: V | undefined;
-    displayValue?: string;
-};
-type EnumLocalFilter = BaseLocalFilter<'enum', Set<string | number>>;
-type IdLocalFilter = BaseLocalFilter<'id', string>;
-type BoolLocalFilter = BaseLocalFilter<'bool', boolean>;
-type StringLocalFilter = BaseLocalFilter<'string', string>;
-type DateLocalFilter = BaseLocalFilter<'date', CalendarDateTime>;
-type IdSearchLocalFilter = BaseLocalFilter<'id-search', Set<string | number>>;
-
-type LocalFilter = EnumLocalFilter
-    | IdLocalFilter
-    | BoolLocalFilter
-    | StringLocalFilter
-    | DateLocalFilter
-    | IdSearchLocalFilter;
-
-export type FilterConfig =
-    | { type: 'enum'; options: MultiSelectProps['items'] }
-    | { type: 'id-search'; search: () => Promise<{ id: string; name: string }[]> }
-    | { type: 'id' }
-    | { type: 'bool' }
-    | { type: 'string' }
-    | { type: 'date' }
-
-export type FilterType = FilterConfig['type'];
-
-const FilterOperations: Record<FilterType, FilterComparisonOperator[]> = {
-    'bool': ['eq'],
-    'enum': ['in', 'nin'],
-    'id': ['in', 'nin'],
-    'id-search': ['in', 'nin'],
-    'string': ['eq', 'ne', 'cn', 'nc', 'sw', 'ew', 'in', 'nin'],
-    'date': ['lt', 'gt'],
-}
-
-export type FiltersConfig<TOperation extends OperationKeys> = Required<Record<keyof ApiFilters<TOperation>, FilterConfig>>
-
-export function DataTableFilter({ className, ...props }: React.ComponentProps<'section'>) {
-    const { filters, query, setFilters, filterConfig } = useDataTable();
-    // TODO focus
-    // const localFilterRefs = useRef([]);
-    const addFilterButtonRef = useRef<HTMLButtonElement>(null);
-
-    const resourceFormatter = useResourceFormatter();
-
-    const DEFAULT_VALUES: { filters: LocalFilter[] } = {
-        // TODO, initialize with filters from tableState
-        filters: []
-    };
-    const form = useAppForm({
-        defaultValues: DEFAULT_VALUES,
-        onSubmit: ({ value }) => {
-            // TODO, instead of generic transformation, use type based tranform()
-            setFilters(value.filters.map(lf => { return { [lf.property]: { [lf.operator]: [lf.value] } } }))
-        }
-    })
-
-    // More reason to hate TS https://github.com/Microsoft/TypeScript/issues/12870
-    const filterKeys = Object.keys(filterConfig).sort();
-
-    return (
-        <section {...props} className={cn("flex gap-icon items-center", className)}>
-            <PopoverTrigger onOpenChange={(o) => {
-                // Set filters when the popover closes
-                if (!o) {
-                    form.handleSubmit();
-                } else {
-                    addFilterButtonRef.current?.focus();
-                }
-            }}>
-                <Button active={filters.length > 0} isDisabled={query.isPending || filterKeys.length === 0} type="button" size={'icon'} variant={'neutral'}><Filter /></Button>
-                {/* TODO, icon maps with dynamic imports? */}
-                {/* TODO open popover with form for property specific filter */}
-                {/* TODO, icons here??? */}
-                <Popover className="w-full p-icon">
-                    {/* const h3Styles = "body mb-icon text-muted-foreground"; */}
-                    {/* <h3 className={h3Styles}>{isFiltersActive ? "Active filters" : "Add filters"}</h3> */}
-                    <form onSubmit={(e) => { e.preventDefault(); }} className="flex flex-col gap-icon max-h-table overflow-auto ">
-                        <form.Field mode="array" name={"filters"}>
-                            {
-                                (field) => {
-                                    return <>
-                                        {field.state.value.map((lf, i) => {
-                                            return (
-                                                <div key={lf.id} className="flex gap-icon items-center justify-normal">
-                                                    <span className="text-sm">{resourceFormatter(lf.property)}</span>
-                                                    <form.AppField
-                                                        key={lf.id}
-                                                        name={`filters[${i}].operator`}
-                                                    >
-                                                        {(sf) => (<sf.TfSingleSelect items={FilterOperations[lf.type].map(op => ({ id: op, label: <>{COMPARISON_OPERATOR_LABELS[op]}</> }))} />)}
-                                                    </form.AppField>
-
-                                                    {lf.type === 'bool' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfCheckbox />)}</form.AppField>}
-                                                    {lf.type === 'date' && <form.AppField name={`filters[${i}].value`}>{(_) => (<TfDatePicker />)}</form.AppField>}
-                                                    {lf.type === 'id' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfTextField />)}</form.AppField>}
-                                                    {lf.type === 'string' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfTextField />)}</form.AppField>}
-                                                    {/* @ts-ignore */}
-                                                    {lf.type === 'enum' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfMultiSelect items={filterConfig[lf.property].options} />)}</form.AppField>}
-                                                    {/* @ts-ignore */}
-                                                    {lf.type === 'id-search' && <form.AppField name={`filters[${i}].value`}>{(_) => (<TfIdSearchInput multiple accessor="id" searchFn={filterConfig[lf.property].search} />)}</form.AppField>}
-
-                                                    <Button type="button" variant="destructive" size="icon" onPress={() => field.removeValue(i)}><Trash /></Button>
-                                                </div>
-                                            )
-                                        })}
-                                        <div className="flex w-full items-center justify-end gap-2 not-first:mt-icon">
-                                            <EasyMenu label="Add Filter">
-                                                {filterKeys.map(k => <MenuItem key={k} onAction={() => {
-                                                    //@ts-ignore
-                                                    const type = filterConfig[k].type as FilterType;
-
-                                                    const defaultValue = (t: FilterType) => {
-                                                        // TODO, ensure exhaustive???
-                                                        switch (t) {
-                                                            case 'bool':
-                                                                return true;
-                                                            case 'string':
-                                                                return '';
-                                                            case 'date':
-                                                                return new Date().toISOString();
-                                                            case 'id':
-                                                                return '';
-                                                            case 'id-search':
-                                                                return [] as string[];
-                                                            case 'enum':
-                                                                return [] as string[];
-                                                        }
-                                                    }
-
-                                                    const newFilter: LocalFilter = {
-                                                        id: `${k}-${Date.now()}`,
-                                                        operator: FilterOperations[type][0],
-                                                        //@ts-ignore
-                                                        value: defaultValue(type),
-                                                        type: type,
-                                                        property: k,
-                                                    };
-
-                                                    field.pushValue(newFilter);
-                                                    // TODO Focus to ref
-
-                                                }} className="dropdown-item">{resourceFormatter(k)}</MenuItem>)}
-                                            </EasyMenu>
-                                            {field.state.value.length > 0 ? (
-                                                <Button
-                                                    type="button"
-                                                    variant="neutral"
-                                                    onPress={() => { field.setValue([]) }}
-                                                >
-                                                    Reset filters
-                                                </Button>
-                                            ) : null}
-                                        </div>
-                                    </>
-                                }
-                            }
-                        </form.Field >
-                    </form>
-                </Popover>
-            </PopoverTrigger>
-        </section>
-    );
-};