@flanksource/clicky-ui 0.2.14 → 0.2.16

package/dist/components/DateTimePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.cjs","sources":["../../src/components/DateTimePicker.tsx"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCalendar } from \"../icons\";\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 icon={UiCalendar} 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":["forwardRef","useRef","cn","jsx","Icon","UiCalendar"],"mappings":";;;;;;;AAiBO,MAAM,iBAAiBA,MAAAA;AAAAA,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,aAAaC,MAAAA,OAAgC,IAAI;AACvD,UAAM,YAAYA,MAAAA,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,2CACG,OAAA,EAAI,WAAWC,MAAAA,GAAG,YAAY,SAAS,GACtC,UAAA;AAAA,MAAAC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL;AAAA,UACA,WAAWD,MAAAA;AAAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,UAAU,CAAC,UAAU,qCAAW,MAAM,OAAO;AAAA,QAAK;AAAA,MAAA;AAAA,MAEpDC,2BAAAA;AAAAA,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,MAEpDA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,UAAU,MAAM;AAAA,UAChB,WAAWD,MAAAA;AAAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,SAAS,MAAM;;AACb,6BAAW,YAAX,mBAAoB;AACpB,kCAAU,YAAV,mBAAmB,eAAnB;AAAA,UACF;AAAA,UAEA,UAAAC,2BAAAA,IAACC,WAAA,EAAK,MAAMC,WAAAA,YAAY,WAAU,UAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAC9C,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;;"}
+{"version":3,"file":"DateTimePicker.cjs","sources":["../../src/components/DateTimePicker.tsx"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCalendar } from \"../icons\";\nimport { cn } from \"../lib/utils\";\n\nexport type DateTimePickerProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  // `prefix` is a global HTML attribute typed as string; omit it so our\n  // ReactNode adornment prop below is not intersected down to `string & ReactNode`.\n  \"type\" | \"value\" | \"onChange\" | \"prefix\"\n> & {\n  value?: string;\n  onChange?: (value: string) => void;\n  className?: string;\n  inputClassName?: string;\n  buttonClassName?: string;\n  openButtonLabel?: string;\n  /** Trailing in-field adornment, rendered left of the calendar button. */\n  suffix?: ReactNode;\n  /** Leading in-field adornment, rendered at the left edge of the input. */\n  prefix?: ReactNode;\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      suffix,\n      prefix,\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 data-jsf-control className={cn(\"relative\", className)}>\n        {prefix && <div className=\"absolute inset-y-0 left-1.5 flex items-center\">{prefix}</div>}\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            prefix && \"pl-8\",\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        {suffix && (\n          <div className=\"absolute inset-y-0 right-7 flex items-center\">{suffix}</div>\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 icon={UiCalendar} 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":["forwardRef","useRef","jsxs","cn","jsx","Icon","UiCalendar"],"mappings":";;;;;;;AAuBO,MAAM,iBAAiBA,MAAAA;AAAAA,EAC5B,CACE;AAAA,IACE,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,aAAaC,MAAAA,OAAgC,IAAI;AACvD,UAAM,YAAYA,MAAAA,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,WACEC,gCAAC,SAAI,oBAAgB,MAAC,WAAWC,MAAAA,GAAG,YAAY,SAAS,GACtD,UAAA;AAAA,MAAA,UAAUC,2BAAAA,IAAC,OAAA,EAAI,WAAU,iDAAiD,UAAA,QAAO;AAAA,MAClFA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL;AAAA,UACA,WAAWD,MAAAA;AAAAA,YACT;AAAA,YACA,UAAU;AAAA,YACV;AAAA,UAAA;AAAA,UAEF,UAAU,CAAC,UAAU,qCAAW,MAAM,OAAO;AAAA,QAAK;AAAA,MAAA;AAAA,MAEpDC,2BAAAA;AAAAA,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,MAEnD,UACCA,2BAAAA,IAAC,OAAA,EAAI,WAAU,gDAAgD,UAAA,QAAO;AAAA,MAExEA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,UAAU,MAAM;AAAA,UAChB,WAAWD,MAAAA;AAAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,SAAS,MAAM;;AACb,6BAAW,YAAX,mBAAoB;AACpB,kCAAU,YAAV,mBAAmB,eAAnB;AAAA,UACF;AAAA,UAEA,UAAAC,2BAAAA,IAACC,WAAA,EAAK,MAAMC,WAAAA,YAAY,WAAU,UAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAC9C,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/DateTimePicker.d.ts

@@ -1,18 +1,26 @@
-import { InputHTMLAttributes } from 'react';
-export type DateTimePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> & {
+import { InputHTMLAttributes, ReactNode } from 'react';
+export type DateTimePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange" | "prefix"> & {
     value?: string;
     onChange?: (value: string) => void;
     className?: string;
     inputClassName?: string;
     buttonClassName?: string;
     openButtonLabel?: string;
+    /** Trailing in-field adornment, rendered left of the calendar button. */
+    suffix?: ReactNode;
+    /** Leading in-field adornment, rendered at the left edge of the input. */
+    prefix?: ReactNode;
 };
-export declare const DateTimePicker: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "onChange"> & {
+export declare const DateTimePicker: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "onChange" | "prefix"> & {
     value?: string;
     onChange?: (value: string) => void;
     className?: string;
     inputClassName?: string;
     buttonClassName?: string;
     openButtonLabel?: string;
+    /** Trailing in-field adornment, rendered left of the calendar button. */
+    suffix?: ReactNode;
+    /** Leading in-field adornment, rendered at the left edge of the input. */
+    prefix?: ReactNode;
 } & import('react').RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=DateTimePicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../src/components/DateTimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAKrE,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"}
+{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../src/components/DateTimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,mBAAmB,CAAC,gBAAgB,CAAC,EAGrC,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CACzC,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;IACzB,yEAAyE;IACzE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,cAAc;YAZjB,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;gBACtB,MAAM;qBACD,MAAM;sBACL,MAAM;sBACN,MAAM;IACxB,yEAAyE;aAChE,SAAS;IAClB,0EAA0E;aACjE,SAAS;oDA2EnB,CAAC"}

package/dist/components/DateTimePicker.js

@@ -11,6 +11,8 @@ const DateTimePicker = forwardRef(
     inputClassName,
     buttonClassName,
     openButtonLabel = "Open time picker",
+    suffix,
+    prefix,
     ...props
   }, ref) => {
     const visibleRef = useRef(null);
@@ -23,7 +25,8 @@ const DateTimePicker = forwardRef(
         ref.current = node;
       }
     }
-    return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    return /* @__PURE__ */ jsxs("div", { "data-jsf-control": true, className: cn("relative", className), children: [
+      prefix && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-1.5 flex items-center", children: prefix }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -33,6 +36,7 @@ const DateTimePicker = forwardRef(
           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",
+            prefix && "pl-8",
             inputClassName
           ),
           onChange: (event) => onChange == null ? void 0 : onChange(event.target.value)
@@ -50,6 +54,7 @@ const DateTimePicker = forwardRef(
           onChange: (event) => onChange == null ? void 0 : onChange(event.target.value)
         }
       ),
+      suffix && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-7 flex items-center", children: suffix }),
       /* @__PURE__ */ jsx(
         "button",
         {

package/dist/components/DateTimePicker.js.map

@@ -1 +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 { UiCalendar } from \"../icons\";\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 icon={UiCalendar} 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":";;;;;AAiBO,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,MAAM,YAAY,WAAU,UAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAC9C,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;"}
+{"version":3,"file":"DateTimePicker.js","sources":["../../src/components/DateTimePicker.tsx"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCalendar } from \"../icons\";\nimport { cn } from \"../lib/utils\";\n\nexport type DateTimePickerProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  // `prefix` is a global HTML attribute typed as string; omit it so our\n  // ReactNode adornment prop below is not intersected down to `string & ReactNode`.\n  \"type\" | \"value\" | \"onChange\" | \"prefix\"\n> & {\n  value?: string;\n  onChange?: (value: string) => void;\n  className?: string;\n  inputClassName?: string;\n  buttonClassName?: string;\n  openButtonLabel?: string;\n  /** Trailing in-field adornment, rendered left of the calendar button. */\n  suffix?: ReactNode;\n  /** Leading in-field adornment, rendered at the left edge of the input. */\n  prefix?: ReactNode;\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      suffix,\n      prefix,\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 data-jsf-control className={cn(\"relative\", className)}>\n        {prefix && <div className=\"absolute inset-y-0 left-1.5 flex items-center\">{prefix}</div>}\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            prefix && \"pl-8\",\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        {suffix && (\n          <div className=\"absolute inset-y-0 right-7 flex items-center\">{suffix}</div>\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 icon={UiCalendar} 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":";;;;;AAuBO,MAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA,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,WACE,qBAAC,SAAI,oBAAgB,MAAC,WAAW,GAAG,YAAY,SAAS,GACtD,UAAA;AAAA,MAAA,UAAU,oBAAC,OAAA,EAAI,WAAU,iDAAiD,UAAA,QAAO;AAAA,MAClF;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA,UAAU;AAAA,YACV;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,MAEnD,UACC,oBAAC,OAAA,EAAI,WAAU,gDAAgD,UAAA,QAAO;AAAA,MAExE;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,MAAM,YAAY,WAAU,UAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAC9C,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/Field.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+function Field({
+  label,
+  htmlFor,
+  required,
+  error,
+  helper,
+  className,
+  labelClassName,
+  onBlur,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex w-full flex-col gap-1", className), onBlur, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        htmlFor,
+        className: utils.cn("flex min-w-0 items-center gap-1 text-sm font-medium", labelClassName),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0", children: label }),
+          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-destructive", "aria-hidden": true, children: "*" })
+        ]
+      }
+    ),
+    children,
+    error ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: error }) : helper ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: helper }) : null
+  ] });
+}
+exports.Field = Field;
+//# sourceMappingURL=Field.cjs.map

package/dist/components/Field.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.cjs","sources":["../../src/components/Field.tsx"],"sourcesContent":["import type { FocusEventHandler, ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport interface FieldProps {\n  /** Field label text (or node). */\n  label: ReactNode;\n  /** Associates the label with a control by id (optional for non-input controls). */\n  htmlFor?: string;\n  /** Appends a destructive \"*\" after the label. */\n  required?: boolean;\n  /**\n   * Inline validation message rendered under the control in destructive color.\n   * When set it takes the place of `helper`.\n   */\n  error?: ReactNode;\n  /** Muted helper/description text under the control (shown when there's no error). */\n  helper?: ReactNode;\n  className?: string;\n  /** Overrides the label classes (e.g. an uppercase form style). */\n  labelClassName?: string;\n  /**\n   * Fires when focus leaves the field (focusout bubbles), so a form can mark the\n   * field touched and reveal its error on blur.\n   */\n  onBlur?: FocusEventHandler<HTMLDivElement>;\n  children: ReactNode;\n}\n\n// Field is the generic label-over-control chrome: a label (with an optional\n// required \"*\"), the control, and an inline error or helper line beneath it.\n// Pair it with useForm for blur/submit-gated error display, or pass `error`\n// directly. The same primitive JsonSchemaForm renders internally, exposed for\n// hand-built forms.\nexport function Field({\n  label,\n  htmlFor,\n  required,\n  error,\n  helper,\n  className,\n  labelClassName,\n  onBlur,\n  children,\n}: FieldProps) {\n  return (\n    <div className={cn(\"flex w-full flex-col gap-1\", className)} onBlur={onBlur}>\n      <label\n        htmlFor={htmlFor}\n        className={cn(\"flex min-w-0 items-center gap-1 text-sm font-medium\", labelClassName)}\n      >\n        <span className=\"min-w-0\">{label}</span>\n        {required && (\n          <span className=\"shrink-0 text-destructive\" aria-hidden>\n            *\n          </span>\n        )}\n      </label>\n      {children}\n      {error ? (\n        <p className=\"text-xs text-destructive\">{error}</p>\n      ) : helper ? (\n        <p className=\"text-xs text-muted-foreground\">{helper}</p>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["cn","jsxs","jsx"],"mappings":";;;;AAiCO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,yCACG,OAAA,EAAI,WAAWA,MAAAA,GAAG,8BAA8B,SAAS,GAAG,QAC3D,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWD,MAAAA,GAAG,uDAAuD,cAAc;AAAA,QAEnF,UAAA;AAAA,UAAAE,2BAAAA,IAAC,QAAA,EAAK,WAAU,WAAW,UAAA,OAAM;AAAA,UAChC,YACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,6BAA4B,eAAW,MAAC,UAAA,IAAA,CAExD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGH;AAAA,IACA,QACCA,2BAAAA,IAAC,KAAA,EAAE,WAAU,4BAA4B,UAAA,MAAA,CAAM,IAC7C,SACFA,2BAAAA,IAAC,KAAA,EAAE,WAAU,iCAAiC,kBAAO,IACnD;AAAA,EAAA,GACN;AAEJ;;"}

package/dist/components/Field.d.ts

@@ -0,0 +1,27 @@
+import { FocusEventHandler, ReactNode } from 'react';
+export interface FieldProps {
+    /** Field label text (or node). */
+    label: ReactNode;
+    /** Associates the label with a control by id (optional for non-input controls). */
+    htmlFor?: string;
+    /** Appends a destructive "*" after the label. */
+    required?: boolean;
+    /**
+     * Inline validation message rendered under the control in destructive color.
+     * When set it takes the place of `helper`.
+     */
+    error?: ReactNode;
+    /** Muted helper/description text under the control (shown when there's no error). */
+    helper?: ReactNode;
+    className?: string;
+    /** Overrides the label classes (e.g. an uppercase form style). */
+    labelClassName?: string;
+    /**
+     * Fires when focus leaves the field (focusout bubbles), so a form can mark the
+     * field touched and reveal its error on blur.
+     */
+    onBlur?: FocusEventHandler<HTMLDivElement>;
+    children: ReactNode;
+}
+export declare function Field({ label, htmlFor, required, error, helper, className, labelClassName, onBlur, children, }: FieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/components/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1D,MAAM,WAAW,UAAU;IACzB,kCAAkC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,mFAAmF;IACnF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qFAAqF;IACrF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAC3C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAOD,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,EACL,MAAM,EACN,SAAS,EACT,cAAc,EACd,MAAM,EACN,QAAQ,GACT,EAAE,UAAU,2CAsBZ"}

package/dist/components/Field.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+function Field({
+  label,
+  htmlFor,
+  required,
+  error,
+  helper,
+  className,
+  labelClassName,
+  onBlur,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-1", className), onBlur, children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor,
+        className: cn("flex min-w-0 items-center gap-1 text-sm font-medium", labelClassName),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0", children: label }),
+          required && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-destructive", "aria-hidden": true, children: "*" })
+        ]
+      }
+    ),
+    children,
+    error ? /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: error }) : helper ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: helper }) : null
+  ] });
+}
+export {
+  Field
+};
+//# sourceMappingURL=Field.js.map

package/dist/components/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sources":["../../src/components/Field.tsx"],"sourcesContent":["import type { FocusEventHandler, ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport interface FieldProps {\n  /** Field label text (or node). */\n  label: ReactNode;\n  /** Associates the label with a control by id (optional for non-input controls). */\n  htmlFor?: string;\n  /** Appends a destructive \"*\" after the label. */\n  required?: boolean;\n  /**\n   * Inline validation message rendered under the control in destructive color.\n   * When set it takes the place of `helper`.\n   */\n  error?: ReactNode;\n  /** Muted helper/description text under the control (shown when there's no error). */\n  helper?: ReactNode;\n  className?: string;\n  /** Overrides the label classes (e.g. an uppercase form style). */\n  labelClassName?: string;\n  /**\n   * Fires when focus leaves the field (focusout bubbles), so a form can mark the\n   * field touched and reveal its error on blur.\n   */\n  onBlur?: FocusEventHandler<HTMLDivElement>;\n  children: ReactNode;\n}\n\n// Field is the generic label-over-control chrome: a label (with an optional\n// required \"*\"), the control, and an inline error or helper line beneath it.\n// Pair it with useForm for blur/submit-gated error display, or pass `error`\n// directly. The same primitive JsonSchemaForm renders internally, exposed for\n// hand-built forms.\nexport function Field({\n  label,\n  htmlFor,\n  required,\n  error,\n  helper,\n  className,\n  labelClassName,\n  onBlur,\n  children,\n}: FieldProps) {\n  return (\n    <div className={cn(\"flex w-full flex-col gap-1\", className)} onBlur={onBlur}>\n      <label\n        htmlFor={htmlFor}\n        className={cn(\"flex min-w-0 items-center gap-1 text-sm font-medium\", labelClassName)}\n      >\n        <span className=\"min-w-0\">{label}</span>\n        {required && (\n          <span className=\"shrink-0 text-destructive\" aria-hidden>\n            *\n          </span>\n        )}\n      </label>\n      {children}\n      {error ? (\n        <p className=\"text-xs text-destructive\">{error}</p>\n      ) : helper ? (\n        <p className=\"text-xs text-muted-foreground\">{helper}</p>\n      ) : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAiCO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,8BACG,OAAA,EAAI,WAAW,GAAG,8BAA8B,SAAS,GAAG,QAC3D,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,uDAAuD,cAAc;AAAA,QAEnF,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,WAAW,UAAA,OAAM;AAAA,UAChC,YACC,oBAAC,QAAA,EAAK,WAAU,6BAA4B,eAAW,MAAC,UAAA,IAAA,CAExD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGH;AAAA,IACA,QACC,oBAAC,KAAA,EAAE,WAAU,4BAA4B,UAAA,MAAA,CAAM,IAC7C,SACF,oBAAC,KAAA,EAAE,WAAU,iCAAiC,kBAAO,IACnD;AAAA,EAAA,GACN;AAEJ;"}

package/dist/components/FilterBar.cjs

@@ -3,8 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const FilterPill = require("../data/FilterPill.cjs");
+const filterBarUtils = require("./filter-bar-utils.cjs");
 const Icon = require("../data/Icon.cjs");
-const Timestamp = require("../data/cells/Timestamp.cjs");
+const timestampFormat = require("../data/cells/timestamp-format.cjs");
 const utils = require("../lib/utils.cjs");
 const button = require("./button.cjs");
 const Combobox = require("./Combobox.cjs");
@@ -24,6 +25,10 @@ const FILTER_BAR_OVERFLOW_TRIGGER_ESTIMATE_PX = 44;
 const FilterBarContext = react.createContext({
   autoSubmit: true
 });
+function applyFilterExtensions(filter, extensions) {
+  if (!extensions || extensions.length === 0) return filter;
+  return extensions.reduce((current, ext) => ext(current), filter);
+}
 function FilterBar({
   search,
   filters,
@@ -117,7 +122,7 @@ function FilterBar({
   }, [measureOverflow, responsiveOverflow]);
   const inlineFilters = responsiveOverflow ? allFilters.slice(0, Math.min(visibleFilterCount, allFilters.length)) : allFilters;
   const overflowFilters = responsiveOverflow ? allFilters.slice(Math.min(visibleFilterCount, allFilters.length)) : [];
-  const activeOverflowCount = overflowFilters.filter(isFilterBarFilterActive).length;
+  const activeOverflowCount = overflowFilters.filter(filterBarUtils.isFilterBarFilterActive).length;
   const setFilterNode = react.useCallback((key, node) => {
     if (!node) {
       filterNodeRefs.current.delete(key);
@@ -331,8 +336,8 @@ function OverflowFiltersMenu({
                     {
                       type: "button",
                       className: "rounded px-1.5 py-0.5 text-xs text-primary transition-colors hover:bg-accent focus:bg-accent focus:outline-none disabled:text-muted-foreground",
-                      onClick: () => stagedFilters.forEach(clearFilterBarFilter),
-                      disabled: stagedFilters.every((filter) => !isFilterBarFilterActive(filter)),
+                      onClick: () => stagedFilters.forEach(filterBarUtils.clearFilterBarFilter),
+                      disabled: stagedFilters.every((filter) => !filterBarUtils.isFilterBarFilterActive(filter)),
                       children: "Clear all"
                     }
                   ),
@@ -350,7 +355,7 @@ function OverflowFiltersMenu({
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-border/70 rounded-md border border-border/70", children: stagedFilters.map((filter) => {
-                const active = isFilterBarFilterActive(filter);
+                const active = filterBarUtils.isFilterBarFilterActive(filter);
                 return /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
@@ -364,7 +369,13 @@ function OverflowFiltersMenu({
                           className: "flex min-w-0 items-center gap-1 truncate text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
                           title: filter.description ?? filter.label,
                           children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon: filter.icon, className: "text-[12px] normal-case" }),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              Icon.LabelIcon,
+                              {
+                                icon: sizedIcon(filter.icon, 12),
+                                className: "text-[12px] normal-case"
+                              }
+                            ),
                             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: filter.label })
                           ]
                         }
@@ -378,7 +389,7 @@ function OverflowFiltersMenu({
                           "aria-label": `Clear ${filter.label}`,
                           title: `Clear ${filter.label}`,
                           className: "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none disabled:text-muted-foreground/40",
-                          onClick: () => clearFilterBarFilter(filter),
+                          onClick: () => filterBarUtils.clearFilterBarFilter(filter),
                           disabled: !active,
                           children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose, className: "text-sm" })
                         }
@@ -475,7 +486,7 @@ function TextFilterValueControl({ filter }) {
       type: "text",
       "aria-label": filter.label,
       className: valueInputClassName(filter.disabled),
-      placeholder: filter.placeholder ?? "Filter...",
+      ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
       value: draft,
       disabled: filter.disabled,
       onChange: (event) => setDraft(event.target.value)
@@ -560,7 +571,7 @@ function EnumFilterValueControl({ filter }) {
       value: filter.value,
       onChange: filter.onChange,
       allowCustomValue: false,
-      placeholder: filter.placeholder ?? `Any ${filter.label.toLowerCase()}`,
+      ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
       className: "w-full",
       ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {}
     }
@@ -587,7 +598,8 @@ function SelectMultiFilterValueControl({ filter }) {
       options: filter.options,
       value: filter.value,
       onChange: filter.onChange,
-      placeholder: filter.placeholder ?? `Any ${filter.label.toLowerCase()}`,
+      ariaLabel: `${filter.label} filter`,
+      ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
       ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {},
       triggerClassName: "h-8 w-full rounded-md border border-input bg-background px-2 text-sm shadow-none",
       menuClassName: "left-auto right-0"
@@ -632,12 +644,12 @@ function EnumFilterField({ filter, grow }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Combobox.Combobox,
     {
-      label: filter.label,
+      ...comboboxLabelProps(filter),
       options: enumOptionsToCombobox(filter.options),
       value: filter.value,
       onChange: filter.onChange,
       allowCustomValue: false,
-      placeholder: filter.placeholder ?? `Any ${filter.label.toLowerCase()}`,
+      ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
       className: utils.cn(lookupFieldWidthClass(grow), filter.className),
       ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {}
     }
@@ -716,7 +728,7 @@ function TextFilterField({ filter, grow }) {
             type: "text",
             "aria-label": filter.label,
             className: "w-full min-w-0 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
-            placeholder: filter.placeholder ?? "Filter…",
+            ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
             value: draft,
             disabled: filter.disabled,
             onChange: (event) => setDraft(event.target.value)
@@ -732,13 +744,27 @@ function FilterFieldLabel({ icon, label }) {
     label
   ] });
 }
+function sizedIcon(icon, px) {
+  if (!react.isValidElement(icon)) return icon;
+  const el = icon;
+  return react.cloneElement(el, {
+    style: { width: `${px}px`, height: `${px}px`, ...el.props.style ?? {} }
+  });
+}
+function comboboxLabelProps(filter) {
+  if (filter.icon == null) return { label: filter.label };
+  return {
+    label: /* @__PURE__ */ jsxRuntime.jsx("span", { title: filter.label, className: "inline-flex items-center text-[10px]", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon: sizedIcon(filter.icon, 10), className: "normal-case" }) }),
+    ariaLabel: filter.label
+  };
+}
 function lookupFieldWidthClass(grow) {
   return grow ? "min-w-[12rem] max-w-[18rem] flex-1" : "min-w-[11rem] max-w-[15rem] shrink-0";
 }
 function LookupFilterField({ filter, grow }) {
   const [draft, setDraft] = useDebouncedTextDraft(filter.value, filter.onChange);
   if (filter.inputType === "date" || filter.inputType === "number") {
-    const dateTitle = filter.inputType === "date" && draft ? Timestamp.formatDateTimeRelative(draft) : void 0;
+    const dateTitle = filter.inputType === "date" && draft ? timestampFormat.formatDateTimeRelative(draft) : void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
@@ -782,7 +808,7 @@ function LookupFilterField({ filter, grow }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Combobox.Combobox,
     {
-      label: filter.label,
+      ...comboboxLabelProps(filter),
       options: lookupOptionsToCombobox(filter.options),
       value: filter.value,
       onChange: filter.onChange,
@@ -801,7 +827,7 @@ function LookupMultiFilterField({
     Combobox.Combobox,
     {
       multiple: true,
-      label: filter.label,
+      ...comboboxLabelProps(filter),
       options: lookupOptionsToCombobox(filter.options),
       value: filter.value,
       onChange: filter.onChange,
@@ -909,7 +935,7 @@ function NumberFilterField({ filter, grow }) {
                     step: bounds.step,
                     "aria-label": `${filter.label} minimum`,
                     className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                    placeholder: filter.minPlaceholder ?? formatNumberValue(bounds.min, filter),
+                    ...filter.minPlaceholder !== void 0 ? { placeholder: filter.minPlaceholder } : {},
                     value: draft.min ?? "",
                     onChange: (event) => setDraft(
                       normalizeNumberFilterValue(
@@ -930,7 +956,7 @@ function NumberFilterField({ filter, grow }) {
                     step: bounds.step,
                     "aria-label": `${filter.label} maximum`,
                     className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                    placeholder: filter.maxPlaceholder ?? formatNumberValue(bounds.max, filter),
+                    ...filter.maxPlaceholder !== void 0 ? { placeholder: filter.maxPlaceholder } : {},
                     value: draft.max ?? "",
                     onChange: (event) => setDraft(
                       normalizeNumberFilterValue(
@@ -1014,7 +1040,7 @@ function NumberFilterPanel({
                   step: bounds.step,
                   "aria-label": `${filter.label} minimum`,
                   className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                  placeholder: filter.minPlaceholder ?? formatNumberValue(bounds.min, filter),
+                  ...filter.minPlaceholder !== void 0 ? { placeholder: filter.minPlaceholder } : {},
                   value: draft.min ?? "",
                   onChange: (event) => setDraft(
                     normalizeNumberFilterValue(
@@ -1035,7 +1061,7 @@ function NumberFilterPanel({
                   step: bounds.step,
                   "aria-label": `${filter.label} maximum`,
                   className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                  placeholder: filter.maxPlaceholder ?? formatNumberValue(bounds.max, filter),
+                  ...filter.maxPlaceholder !== void 0 ? { placeholder: filter.maxPlaceholder } : {},
                   value: draft.max ?? "",
                   onChange: (event) => setDraft(
                     normalizeNumberFilterValue(
@@ -1731,7 +1757,8 @@ function SelectMultiFilterField({
             options: filter.options,
             value: filter.value,
             onChange: filter.onChange,
-            placeholder: filter.placeholder ?? `Any ${filter.label.toLowerCase()}`,
+            ariaLabel: `${filter.label} filter`,
+            ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
             ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {},
             triggerClassName: "h-6 min-w-0 border-0 bg-transparent px-1 text-xs shadow-none focus-visible:ring-0",
             menuClassName: "left-auto right-0"
@@ -1981,38 +2008,6 @@ function nextFilterMode(mode) {
   if (mode === "exclude") return "neutral";
   return "include";
 }
-function clearFilterBarFilter(filter) {
-  if (filter.kind === "text" || filter.kind === "lookup" || filter.kind === "enum") {
-    filter.onChange("");
-    return;
-  }
-  if (filter.kind === "lookup-multi" || filter.kind === "select-multi") {
-    filter.onChange([]);
-    return;
-  }
-  if (filter.kind === "number") {
-    filter.onChange({});
-    return;
-  }
-  if (filter.kind === "boolean") {
-    filter.onChange(false);
-    return;
-  }
-  filter.onChange({});
-}
-function isFilterBarFilterActive(filter) {
-  if (filter.kind === "text" || filter.kind === "lookup" || filter.kind === "enum") {
-    return String(filter.value ?? "").trim() !== "";
-  }
-  if (filter.kind === "lookup-multi" || filter.kind === "select-multi") {
-    return filter.value.length > 0;
-  }
-  if (filter.kind === "number") {
-    return String(filter.value.min ?? "").trim() !== "" || String(filter.value.max ?? "").trim() !== "";
-  }
-  if (filter.kind === "boolean") return filter.value;
-  return Object.keys(filter.value).length > 0;
-}
 function createFilterValueMap(filters) {
   return Object.fromEntries(filters.map((filter) => [filter.key, filterBarFilterValue(filter)]));
 }
@@ -2142,6 +2137,5 @@ function estimateFilterWidth(filter) {
 exports.FilterBar = FilterBar;
 exports.FilterBarFilterPanel = FilterBarFilterPanel;
 exports.FilterBarRangePanel = FilterBarRangePanel;
-exports.clearFilterBarFilter = clearFilterBarFilter;
-exports.isFilterBarFilterActive = isFilterBarFilterActive;
+exports.applyFilterExtensions = applyFilterExtensions;
 //# sourceMappingURL=FilterBar.cjs.map