@flanksource/clicky-ui 0.2.15 → 0.2.16

package/dist/components/DateTimePicker.js.map

@@ -1 +1 @@
-{"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  \"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  /** Trailing in-field adornment, rendered left of the calendar button. */\n  suffix?: 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      ...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        <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        {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":";;;;;AAmBO,MAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;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,GACvD,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,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;"}
+{"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

@@ -25,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,
@@ -365,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 })
                           ]
                         }
@@ -476,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)
@@ -561,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 } : {}
     }
@@ -588,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"
@@ -633,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 } : {}
     }
@@ -717,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)
@@ -733,6 +744,20 @@ 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";
 }
@@ -783,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,
@@ -802,7 +827,7 @@ function LookupMultiFilterField({
     Combobox.Combobox,
     {
       multiple: true,
-      label: filter.label,
+      ...comboboxLabelProps(filter),
       options: lookupOptionsToCombobox(filter.options),
       value: filter.value,
       onChange: filter.onChange,
@@ -910,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(
@@ -931,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(
@@ -1015,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(
@@ -1036,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(
@@ -1732,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"
@@ -2111,4 +2137,5 @@ function estimateFilterWidth(filter) {
 exports.FilterBar = FilterBar;
 exports.FilterBarFilterPanel = FilterBarFilterPanel;
 exports.FilterBarRangePanel = FilterBarRangePanel;
+exports.applyFilterExtensions = applyFilterExtensions;
 //# sourceMappingURL=FilterBar.cjs.map