@flanksource/clicky-ui 0.1.0 → 0.2.1

package/README.md

@@ -11,7 +11,8 @@ pnpm add @flanksource/clicky-ui react react-dom tailwindcss
 ## Usage
 
 ```tsx
-import { Button, ThemeProvider, DensityProvider } from "@flanksource/clicky-ui";
+import { Button } from "@flanksource/clicky-ui/components";
+import { ThemeProvider, DensityProvider } from "@flanksource/clicky-ui/hooks";
 import "@flanksource/clicky-ui/styles.css";
 
 export function App() {
@@ -28,7 +29,7 @@ export function App() {
 ## Clicky AST Renderer
 
 ```tsx
-import { Clicky, type ClickyDocument } from "@flanksource/clicky-ui";
+import { Clicky, type ClickyDocument } from "@flanksource/clicky-ui/clicky";
 
 const document: ClickyDocument = {
   version: 1,
@@ -46,6 +47,32 @@ export function ClickyPanel() {
 
 `Clicky` also accepts a JSON string payload. The intended producer is the sibling `clicky` repo's tagged `html-react` AST, which preserves structural types such as trees, tables, code blocks, collapsed sections, buttons, and nested text content.
 
+## API Explorer
+
+`ApiExplorer` and `EntityExplorerApp` are exposed via a separate subpath and lazy-load `@scalar/api-reference-react`, so the main bundle and the initial API explorer chunk stay free of Scalar:
+
+```tsx
+import { ApiExplorer } from "@flanksource/clicky-ui/api-explorer";
+
+export function Docs() {
+  return <ApiExplorer openApiUrl="/api/openapi.json" />;
+}
+```
+
+`@scalar/api-reference-react` is a regular dependency of `@flanksource/clicky-ui`, so consumers don't need to add it to their own `package.json`. Consumers who never render this subpath avoid its runtime bundle cost, but still get it as an installed transitive dependency.
+
+## Bundle size guidance
+
+Prefer subpath imports in production apps:
+
+```tsx
+import { Button } from "@flanksource/clicky-ui/components";
+import { cn } from "@flanksource/clicky-ui/utils";
+import { DataTable } from "@flanksource/clicky-ui/data";
+```
+
+The root `@flanksource/clicky-ui` barrel remains supported for compatibility and convenience, but subpaths give bundlers a smaller entry surface. Import `@flanksource/clicky-ui/styles.css` once at the app root. Markdown parsing, code highlighting, and the Scalar API explorer are loaded asynchronously by their components.
+
 ## Tailwind preset
 
 ```ts

package/dist/api-explorer.d.ts

@@ -0,0 +1,5 @@
+import { EntityExplorerAppProps } from './rpc/EntityExplorerApp';
+export { ApiExplorer, DEFAULT_OPENAPI_URL, type ApiExplorerProps } from './rpc/ApiExplorer';
+export type { EntityExplorerAppProps };
+export declare function EntityExplorerApp(props: EntityExplorerAppProps): import('react').FunctionComponentElement<import('react').SuspenseProps>;
+//# sourceMappingURL=api-explorer.d.ts.map

package/dist/api-explorer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api-explorer.d.ts","sourceRoot":"","sources":["../src/api-explorer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAO5F,YAAY,EAAE,sBAAsB,EAAE,CAAC;AAEvC,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2EAY9D"}

package/dist/api-explorer.js

@@ -0,0 +1,25 @@
+import { lazy, createElement, Suspense } from "react";
+import { ApiExplorer, DEFAULT_OPENAPI_URL } from "./rpc/ApiExplorer.js";
+const LazyEntityExplorerApp = lazy(async () => {
+  const mod = await import("./rpc/EntityExplorerApp.js");
+  return { default: mod.EntityExplorerApp };
+});
+function EntityExplorerApp(props) {
+  return createElement(
+    Suspense,
+    {
+      fallback: createElement(
+        "div",
+        { className: "p-4 text-sm text-muted-foreground" },
+        "Loading explorer..."
+      )
+    },
+    createElement(LazyEntityExplorerApp, props)
+  );
+}
+export {
+  ApiExplorer,
+  DEFAULT_OPENAPI_URL,
+  EntityExplorerApp
+};
+//# sourceMappingURL=api-explorer.js.map

package/dist/api-explorer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"api-explorer.js","sources":["../src/api-explorer.ts"],"sourcesContent":["import { createElement, lazy, Suspense } from \"react\";\nimport type { EntityExplorerAppProps } from \"./rpc/EntityExplorerApp\";\n\nexport { ApiExplorer, DEFAULT_OPENAPI_URL, type ApiExplorerProps } from \"./rpc/ApiExplorer\";\n\nconst LazyEntityExplorerApp = lazy(async () => {\n  const mod = await import(\"./rpc/EntityExplorerApp\");\n  return { default: mod.EntityExplorerApp };\n});\n\nexport type { EntityExplorerAppProps };\n\nexport function EntityExplorerApp(props: EntityExplorerAppProps) {\n  return createElement(\n    Suspense,\n    {\n      fallback: createElement(\n        \"div\",\n        { className: \"p-4 text-sm text-muted-foreground\" },\n        \"Loading explorer...\",\n      ),\n    },\n    createElement(LazyEntityExplorerApp, props),\n  );\n}\n"],"names":[],"mappings":";;AAKA,MAAM,wBAAwB,KAAK,YAAY;AAC7C,QAAM,MAAM,MAAM,OAAO,4BAAyB;AAClD,SAAO,EAAE,SAAS,IAAI,kBAAA;AACxB,CAAC;AAIM,SAAS,kBAAkB,OAA+B;AAC/D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE,UAAU;AAAA,QACR;AAAA,QACA,EAAE,WAAW,oCAAA;AAAA,QACb;AAAA,MAAA;AAAA,IACF;AAAA,IAEF,cAAc,uBAAuB,KAAK;AAAA,EAAA;AAE9C;"}

package/dist/clicky.d.ts

@@ -0,0 +1,2 @@
+export { Clicky, type ClickyCommandRequest, type ClickyCommandRuntime, type ClickyLinkTarget, type ClickyResolvedCommand, type ClickyColumn, type ClickyDownloadOptions, type ClickyDocument, type ClickyField, type ClickyNode, type ClickyProps, type ClickyRemoteFormat, type ClickyRow, type ClickyStyle, type ClickyTableRowHref, type ClickyTableRowClick, type ClickyTableRowPredicate, type ClickyTreeItem, type ClickyViewOptions, } from './data/Clicky';
+//# sourceMappingURL=clicky.d.ts.map

package/dist/clicky.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clicky.d.ts","sourceRoot":"","sources":["../src/clicky.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACvB,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,uBAAuB,EAC5B,KAAK,cAAc,EACnB,KAAK,iBAAiB,GACvB,MAAM,eAAe,CAAC"}

package/dist/clicky.js

@@ -0,0 +1,5 @@
+import { Clicky } from "./data/Clicky.js";
+export {
+  Clicky
+};
+//# sourceMappingURL=clicky.js.map

package/dist/clicky.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clicky.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/DatePicker.d.ts

@@ -0,0 +1,18 @@
+import { InputHTMLAttributes } from 'react';
+export type DatePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> & {
+    value?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    openButtonLabel?: string;
+};
+export declare const DatePicker: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "onChange"> & {
+    value?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    openButtonLabel?: string;
+} & import('react').RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=DatePicker.d.ts.map

package/dist/components/DatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/components/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAIrE,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,OAAO,GAAG,UAAU,CAC9B,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,UAAU;YARb,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;gBACtB,MAAM;qBACD,MAAM;sBACL,MAAM;sBACN,MAAM;oDAyDzB,CAAC"}

package/dist/components/DatePicker.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { Icon } from "../data/Icon.js";
+import { cn } from "../lib/utils.js";
+const DatePicker = forwardRef(
+  ({
+    value = "",
+    onChange,
+    className,
+    inputClassName,
+    buttonClassName,
+    openButtonLabel = "Open date picker",
+    ...props
+  }, ref) => {
+    const localRef = useRef(null);
+    function assignRef(node) {
+      localRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    }
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...props,
+          ref: assignRef,
+          type: "date",
+          value,
+          className: cn(
+            "h-8 w-full rounded-md border border-input bg-background px-2 pr-8 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            inputClassName
+          ),
+          onChange: (event) => onChange == null ? void 0 : onChange(event.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": openButtonLabel,
+          className: cn(
+            "absolute inset-y-0 right-1 inline-flex items-center text-muted-foreground",
+            buttonClassName
+          ),
+          onClick: () => {
+            var _a, _b, _c;
+            (_a = localRef.current) == null ? void 0 : _a.focus();
+            (_c = (_b = localRef.current) == null ? void 0 : _b.showPicker) == null ? void 0 : _c.call(_b);
+          },
+          children: /* @__PURE__ */ jsx(Icon, { name: "codicon:calendar", className: "text-sm" })
+        }
+      )
+    ] });
+  }
+);
+DatePicker.displayName = "DatePicker";
+export {
+  DatePicker
+};
+//# sourceMappingURL=DatePicker.js.map

package/dist/components/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sources":["../../src/components/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { cn } from \"../lib/utils\";\n\nexport type DatePickerProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\" | \"value\" | \"onChange\"\n> & {\n  value?: string;\n  onChange?: (value: string) => void;\n  className?: string;\n  inputClassName?: string;\n  buttonClassName?: string;\n  openButtonLabel?: string;\n};\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\n  (\n    {\n      value = \"\",\n      onChange,\n      className,\n      inputClassName,\n      buttonClassName,\n      openButtonLabel = \"Open date picker\",\n      ...props\n    },\n    ref,\n  ) => {\n    const localRef = useRef<HTMLInputElement | null>(null);\n\n    function assignRef(node: HTMLInputElement | null) {\n      localRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    }\n\n    return (\n      <div className={cn(\"relative\", className)}>\n        <input\n          {...props}\n          ref={assignRef}\n          type=\"date\"\n          value={value}\n          className={cn(\n            \"h-8 w-full rounded-md border border-input bg-background px-2 pr-8 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            inputClassName,\n          )}\n          onChange={(event) => onChange?.(event.target.value)}\n        />\n        <button\n          type=\"button\"\n          aria-label={openButtonLabel}\n          className={cn(\n            \"absolute inset-y-0 right-1 inline-flex items-center text-muted-foreground\",\n            buttonClassName,\n          )}\n          onClick={() => {\n            localRef.current?.focus();\n            localRef.current?.showPicker?.();\n          }}\n        >\n          <Icon name=\"codicon:calendar\" className=\"text-sm\" />\n        </button>\n      </div>\n    );\n  },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":[],"mappings":";;;;AAgBO,MAAM,aAAa;AAAA,EACxB,CACE;AAAA,IACE,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,WAAW,OAAgC,IAAI;AAErD,aAAS,UAAU,MAA+B;AAChD,eAAS,UAAU;AACnB,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,IAAI;AAAA,MACV,WAAW,KAAK;AACd,YAAI,UAAU;AAAA,MAChB;AAAA,IACF;AAEA,gCACG,OAAA,EAAI,WAAW,GAAG,YAAY,SAAS,GACtC,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,UAAU,CAAC,UAAU,qCAAW,MAAM,OAAO;AAAA,QAAK;AAAA,MAAA;AAAA,MAEpD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,SAAS,MAAM;;AACb,2BAAS,YAAT,mBAAkB;AAClB,iCAAS,YAAT,mBAAkB,eAAlB;AAAA,UACF;AAAA,UAEA,UAAA,oBAAC,MAAA,EAAK,MAAK,oBAAmB,WAAU,UAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACpD,GACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;"}

package/dist/components/DateTimePicker.d.ts

@@ -0,0 +1,18 @@
+import { InputHTMLAttributes } from 'react';
+export type DateTimePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> & {
+    value?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    openButtonLabel?: string;
+};
+export declare const DateTimePicker: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "onChange"> & {
+    value?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    openButtonLabel?: string;
+} & import('react').RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=DateTimePicker.d.ts.map

package/dist/components/DateTimePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../src/components/DateTimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAIrE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,OAAO,GAAG,UAAU,CAC9B,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,cAAc;YARjB,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;gBACtB,MAAM;qBACD,MAAM;sBACL,MAAM;sBACN,MAAM;oDAoEzB,CAAC"}

package/dist/components/DateTimePicker.js

@@ -0,0 +1,84 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { Icon } from "../data/Icon.js";
+import { cn } from "../lib/utils.js";
+const DateTimePicker = forwardRef(
+  ({
+    value = "",
+    onChange,
+    className,
+    inputClassName,
+    buttonClassName,
+    openButtonLabel = "Open time picker",
+    ...props
+  }, ref) => {
+    const visibleRef = useRef(null);
+    const pickerRef = useRef(null);
+    function assignRef(node) {
+      visibleRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    }
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...props,
+          ref: assignRef,
+          type: "text",
+          value,
+          className: cn(
+            "h-8 w-full rounded-md border border-input bg-background px-2 pr-8 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+            inputClassName
+          ),
+          onChange: (event) => onChange == null ? void 0 : onChange(event.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: pickerRef,
+          type: "datetime-local",
+          tabIndex: -1,
+          "aria-hidden": "true",
+          className: "pointer-events-none absolute left-0 top-0 h-0 w-0 opacity-0",
+          value: toDateTimeLocalValue(value),
+          onChange: (event) => onChange == null ? void 0 : onChange(event.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": openButtonLabel,
+          disabled: props.disabled,
+          className: cn(
+            "absolute inset-y-0 right-1 inline-flex items-center text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+            buttonClassName
+          ),
+          onClick: () => {
+            var _a, _b, _c;
+            (_a = visibleRef.current) == null ? void 0 : _a.focus();
+            (_c = (_b = pickerRef.current) == null ? void 0 : _b.showPicker) == null ? void 0 : _c.call(_b);
+          },
+          children: /* @__PURE__ */ jsx(Icon, { name: "codicon:calendar", className: "text-sm" })
+        }
+      )
+    ] });
+  }
+);
+DateTimePicker.displayName = "DateTimePicker";
+function toDateTimeLocalValue(value) {
+  const trimmed = value.trim();
+  if (!trimmed) return "";
+  if (trimmed === "now" || trimmed.startsWith("now")) return "";
+  const withTime = /^\d{4}-\d{2}-\d{2}$/.test(trimmed) ? `${trimmed}T00:00` : trimmed;
+  return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(withTime) ? withTime.slice(0, 16) : "";
+}
+export {
+  DateTimePicker
+};
+//# sourceMappingURL=DateTimePicker.js.map

package/dist/components/DateTimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.js","sources":["../../src/components/DateTimePicker.tsx"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { cn } from \"../lib/utils\";\n\nexport type DateTimePickerProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\" | \"value\" | \"onChange\"\n> & {\n  value?: string;\n  onChange?: (value: string) => void;\n  className?: string;\n  inputClassName?: string;\n  buttonClassName?: string;\n  openButtonLabel?: string;\n};\n\nexport const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(\n  (\n    {\n      value = \"\",\n      onChange,\n      className,\n      inputClassName,\n      buttonClassName,\n      openButtonLabel = \"Open time picker\",\n      ...props\n    },\n    ref,\n  ) => {\n    const visibleRef = useRef<HTMLInputElement | null>(null);\n    const pickerRef = useRef<HTMLInputElement | null>(null);\n\n    function assignRef(node: HTMLInputElement | null) {\n      visibleRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    }\n\n    return (\n      <div className={cn(\"relative\", className)}>\n        <input\n          {...props}\n          ref={assignRef}\n          type=\"text\"\n          value={value}\n          className={cn(\n            \"h-8 w-full rounded-md border border-input bg-background px-2 pr-8 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n            inputClassName,\n          )}\n          onChange={(event) => onChange?.(event.target.value)}\n        />\n        <input\n          ref={pickerRef}\n          type=\"datetime-local\"\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute left-0 top-0 h-0 w-0 opacity-0\"\n          value={toDateTimeLocalValue(value)}\n          onChange={(event) => onChange?.(event.target.value)}\n        />\n        <button\n          type=\"button\"\n          aria-label={openButtonLabel}\n          disabled={props.disabled}\n          className={cn(\n            \"absolute inset-y-0 right-1 inline-flex items-center text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n            buttonClassName,\n          )}\n          onClick={() => {\n            visibleRef.current?.focus();\n            pickerRef.current?.showPicker?.();\n          }}\n        >\n          <Icon name=\"codicon:calendar\" className=\"text-sm\" />\n        </button>\n      </div>\n    );\n  },\n);\n\nDateTimePicker.displayName = \"DateTimePicker\";\n\nfunction toDateTimeLocalValue(value: string) {\n  const trimmed = value.trim();\n  if (!trimmed) return \"\";\n  if (trimmed === \"now\" || trimmed.startsWith(\"now\")) return \"\";\n\n  const withTime = /^\\d{4}-\\d{2}-\\d{2}$/.test(trimmed) ? `${trimmed}T00:00` : trimmed;\n\n  return /^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}/.test(withTime) ? withTime.slice(0, 16) : \"\";\n}\n"],"names":[],"mappings":";;;;AAgBO,MAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,aAAa,OAAgC,IAAI;AACvD,UAAM,YAAY,OAAgC,IAAI;AAEtD,aAAS,UAAU,MAA+B;AAChD,iBAAW,UAAU;AACrB,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,IAAI;AAAA,MACV,WAAW,KAAK;AACd,YAAI,UAAU;AAAA,MAChB;AAAA,IACF;AAEA,gCACG,OAAA,EAAI,WAAW,GAAG,YAAY,SAAS,GACtC,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,UAAU,CAAC,UAAU,qCAAW,MAAM,OAAO;AAAA,QAAK;AAAA,MAAA;AAAA,MAEpD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UACL,UAAU;AAAA,UACV,eAAY;AAAA,UACZ,WAAU;AAAA,UACV,OAAO,qBAAqB,KAAK;AAAA,UACjC,UAAU,CAAC,UAAU,qCAAW,MAAM,OAAO;AAAA,QAAK;AAAA,MAAA;AAAA,MAEpD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,UAAU,MAAM;AAAA,UAChB,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,SAAS,MAAM;;AACb,6BAAW,YAAX,mBAAoB;AACpB,kCAAU,YAAV,mBAAmB,eAAnB;AAAA,UACF;AAAA,UAEA,UAAA,oBAAC,MAAA,EAAK,MAAK,oBAAmB,WAAU,UAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACpD,GACF;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAE7B,SAAS,qBAAqB,OAAe;AAC3C,QAAM,UAAU,MAAM,KAAA;AACtB,MAAI,CAAC,QAAS,QAAO;AACrB,MAAI,YAAY,SAAS,QAAQ,WAAW,KAAK,EAAG,QAAO;AAE3D,QAAM,WAAW,sBAAsB,KAAK,OAAO,IAAI,GAAG,OAAO,WAAW;AAE5E,SAAO,iCAAiC,KAAK,QAAQ,IAAI,SAAS,MAAM,GAAG,EAAE,IAAI;AACnF;"}

package/dist/components/FilterBar.d.ts

@@ -0,0 +1,180 @@
+import { ReactNode } from 'react';
+import { FilterMode } from '../data/FilterPill';
+import { MultiSelectOption } from './MultiSelect';
+export type FilterBarSearchProps = {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    ariaLabel?: string;
+    className?: string;
+};
+export type FilterBarTextFilter = {
+    key: string;
+    kind: "text";
+    label: string;
+    description?: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+};
+export type FilterBarLookupOption = {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+    title?: string;
+};
+export type FilterBarLookupInputType = "text" | "number" | "date";
+export type FilterBarLookupFilter = {
+    key: string;
+    kind: "lookup";
+    label: string;
+    description?: string;
+    value: string;
+    options: FilterBarLookupOption[];
+    onChange: (value: string) => void;
+    placeholder?: string;
+    inputType?: FilterBarLookupInputType;
+    disabled?: boolean;
+    className?: string;
+};
+export type FilterBarLookupMultiFilter = {
+    key: string;
+    kind: "lookup-multi";
+    label: string;
+    description?: string;
+    value: string[];
+    options: FilterBarLookupOption[];
+    onChange: (value: string[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+};
+export type FilterBarMultiFilterMode = Extract<FilterMode, "include" | "exclude">;
+export type FilterBarMultiFilter = {
+    key: string;
+    kind: "multi";
+    label: string;
+    description?: string;
+    value: Record<string, FilterBarMultiFilterMode>;
+    options: MultiSelectOption[];
+    onChange: (value: Record<string, FilterBarMultiFilterMode>) => void;
+    disabled?: boolean;
+    className?: string;
+};
+export type FilterBarNestedMultiGroup = {
+    groupKey: string;
+    label?: string;
+    options: MultiSelectOption[];
+};
+export type FilterBarNestedMultiFilter = {
+    key: string;
+    kind: "nested-multi";
+    label: string;
+    description?: string;
+    value: Record<string, FilterBarMultiFilterMode>;
+    groups: FilterBarNestedMultiGroup[];
+    onChange: (value: Record<string, FilterBarMultiFilterMode>) => void;
+    disabled?: boolean;
+    className?: string;
+};
+export type FilterBarSelectMultiFilter = {
+    key: string;
+    kind: "select-multi";
+    label: string;
+    description?: string;
+    value: string[];
+    options: MultiSelectOption[];
+    onChange: (value: string[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+};
+export type FilterBarNumberValue = {
+    min?: string;
+    max?: string;
+};
+export type FilterBarNumberFilter = {
+    key: string;
+    kind: "number";
+    label: string;
+    description?: string;
+    value: FilterBarNumberValue;
+    onChange: (value: FilterBarNumberValue) => void;
+    domainMin?: number;
+    domainMax?: number;
+    step?: number;
+    formatValue?: (value: number) => string;
+    minPlaceholder?: string;
+    maxPlaceholder?: string;
+    disabled?: boolean;
+    className?: string;
+};
+export type FilterBarEnumFilter = {
+    key: string;
+    kind: "enum";
+    label: string;
+    description?: string;
+    value: string;
+    options: Array<{
+        value: string;
+        label?: string;
+    }>;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+};
+export type FilterBarBooleanFilter = {
+    key: string;
+    kind: "boolean";
+    label: string;
+    description?: string;
+    value: boolean;
+    onChange: (value: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+};
+export type FilterBarFilter = FilterBarTextFilter | FilterBarLookupFilter | FilterBarLookupMultiFilter | FilterBarMultiFilter | FilterBarNestedMultiFilter | FilterBarSelectMultiFilter | FilterBarNumberFilter | FilterBarEnumFilter | FilterBarBooleanFilter;
+export type FilterBarRangePreset = {
+    label: string;
+    from: string;
+    to: string;
+};
+export type FilterBarRangeProps = {
+    from?: string;
+    to?: string;
+    onApply: (from: string, to: string) => void;
+    presets?: FilterBarRangePreset[];
+    fromPlaceholder?: string;
+    toPlaceholder?: string;
+    emptyLabel?: string;
+    className?: string;
+};
+export type FilterBarProps = {
+    search?: FilterBarSearchProps;
+    filters?: FilterBarFilter[];
+    timeRange?: FilterBarRangeProps;
+    dateRange?: FilterBarRangeProps;
+    children?: ReactNode;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    className?: string;
+    autoSubmit?: boolean;
+    onApply?: () => void;
+    applyLabel?: string;
+    isPending?: boolean;
+};
+export declare function FilterBar({ search, filters, timeRange, dateRange, children, leading, trailing, className, autoSubmit, onApply, applyLabel, isPending, }: FilterBarProps): import("react/jsx-runtime").JSX.Element;
+type FilterBarFilterPanelChrome = "full" | "embedded";
+export declare function FilterBarFilterPanel({ filter, chrome, }: {
+    filter: FilterBarFilter;
+    chrome?: FilterBarFilterPanelChrome;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function FilterBarRangePanel({ kind, label, from, to, onApply, presets: _presets, fromPlaceholder, toPlaceholder, emptyLabel: _emptyLabel, }: FilterBarRangeProps & {
+    kind: "date" | "time";
+    label: string;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FilterBar.d.ts.map

package/dist/components/FilterBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBar.d.ts","sourceRoot":"","sources":["../../src/components/FilterBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,EAAc,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMjE,OAAO,EAAe,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAcpE,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAElE,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAAC,UAAU,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC;AAElF,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAC;IAChD,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,KAAK,IAAI,CAAC;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,iBAAiB,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAC;IAChD,MAAM,EAAE,yBAAyB,EAAE,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,KAAK,IAAI,CAAC;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GACvB,mBAAmB,GACnB,qBAAqB,GACrB,0BAA0B,GAC1B,oBAAoB,GACpB,0BAA0B,GAC1B,0BAA0B,GAC1B,qBAAqB,GACrB,mBAAmB,GACnB,sBAAsB,CAAC;AAE3B,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,OAAO,EACP,SAAS,EACT,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,UAAiB,EACjB,OAAO,EACP,UAAoB,EACpB,SAAiB,GAClB,EAAE,cAAc,2CA8EhB;AAED,KAAK,0BAA0B,GAAG,MAAM,GAAG,UAAU,CAAC;AAEtD,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,MAAe,GAChB,EAAE;IACD,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,0BAA0B,CAAC;CACrC,2CAgBA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,IAAS,EACT,EAAO,EACP,OAAO,EACP,OAAO,EAAE,QAAQ,EACjB,eAAe,EACf,aAAa,EACb,UAAU,EAAE,WAAW,GACxB,EAAE,mBAAmB,GAAG;IAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,2CA8DhE"}