@osdk/react-components 0.2.0-beta.9 → 0.2.1-main-20260407074313

package/build/esm/filter-list/base/inputs/RangeInput.js

@@ -0,0 +1,159 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Input } from "@base-ui/react/input";
+import classnames from "classnames";
+import { debounce } from "lodash-es";
+import React, { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { createHistogramBuckets, getMaxBucketCount } from "./createHistogramBuckets.js";
+import styles from "./RangeInput.module.css";
+import sharedStyles from "./shared.module.css";
+import { useStableData } from "./useStableData.js";
+const DEBOUNCE_MS = 300;
+function RangeInputInner({
+  valueCountPairs,
+  isLoading,
+  minValue,
+  maxValue,
+  onChange,
+  showHistogram = true,
+  className,
+  style,
+  config
+}) {
+  const minInputId = useId();
+  const maxInputId = useId();
+  const [localMin, setLocalMin] = useState(config.formatValue(minValue));
+  const [localMax, setLocalMax] = useState(config.formatValue(maxValue));
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const minValueRef = useRef(minValue);
+  minValueRef.current = minValue;
+  const maxValueRef = useRef(maxValue);
+  maxValueRef.current = maxValue;
+  const debouncedMinChange = useMemo(() => debounce(newValue => {
+    const parsed = config.parseValue(newValue);
+    onChangeRef.current(parsed, maxValueRef.current);
+  }, DEBOUNCE_MS), [config]);
+  const debouncedMaxChange = useMemo(() => debounce(newValue => {
+    const parsed = config.parseValue(newValue);
+    onChangeRef.current(minValueRef.current, parsed);
+  }, DEBOUNCE_MS), [config]);
+  useEffect(() => {
+    setLocalMin(config.formatValue(minValue));
+    debouncedMinChange.cancel();
+  }, [minValue, config, debouncedMinChange]);
+  useEffect(() => {
+    setLocalMax(config.formatValue(maxValue));
+    debouncedMaxChange.cancel();
+  }, [maxValue, config, debouncedMaxChange]);
+  useEffect(() => {
+    return () => {
+      debouncedMinChange.cancel();
+      debouncedMaxChange.cancel();
+    };
+  }, [debouncedMinChange, debouncedMaxChange]);
+  const displayPairs = useStableData(valueCountPairs, isLoading);
+  const computedRange = useMemo(() => {
+    if (displayPairs.length === 0) return {
+      min: undefined,
+      max: undefined
+    };
+    const min = displayPairs.reduce((acc, p) => Math.min(acc, config.toNumber(p.value)), Infinity);
+    const max = displayPairs.reduce((acc, p) => Math.max(acc, config.toNumber(p.value)), -Infinity);
+    return {
+      min: config.fromNumber(min),
+      max: config.fromNumber(max)
+    };
+  }, [displayPairs, config]);
+  const dataRange = useMemo(() => ({
+    dataMin: computedRange.min,
+    dataMax: computedRange.max
+  }), [computedRange.min, computedRange.max]);
+  const buckets = useMemo(() => {
+    if (!showHistogram || displayPairs.length === 0 || computedRange.min === undefined || computedRange.max === undefined) {
+      return [];
+    }
+    return createHistogramBuckets(displayPairs, {
+      min: computedRange.min,
+      max: computedRange.max
+    }, config.toNumber, config.fromNumber);
+  }, [showHistogram, displayPairs, computedRange, config]);
+  const maxBucketCount = useMemo(() => getMaxBucketCount(buckets), [buckets]);
+  const handleMinChange = useCallback(e => {
+    const newValue = e.target.value;
+    setLocalMin(newValue);
+    debouncedMinChange(newValue);
+  }, [debouncedMinChange]);
+  const handleMaxChange = useCallback(e => {
+    const newValue = e.target.value;
+    setLocalMax(newValue);
+    debouncedMaxChange(newValue);
+  }, [debouncedMaxChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(styles.rangeInput, className),
+    style: style,
+    "data-loading": isLoading
+  }, showHistogram && buckets.length === 0 && !isLoading && /*#__PURE__*/React.createElement("div", {
+    className: sharedStyles.emptyMessage
+  }, "No values available"), showHistogram && buckets.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: styles.histogramContainer
+  }, buckets.map((bucket, index) => {
+    const height = bucket.count / maxBucketCount * 100;
+    const isInRange = (minValue === undefined || config.toNumber(bucket.max) >= config.toNumber(minValue)) && (maxValue === undefined || config.toNumber(bucket.min) <= config.toNumber(maxValue));
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: styles.histogramBar,
+      "data-in-range": isInRange,
+      style: {
+        height: `${Math.max(height, 2)}%`
+      },
+      title: config.formatTooltip(bucket.min, bucket.max, bucket.count)
+    });
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.rangeInputs
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.inputWrapper
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: minInputId,
+    className: styles.inputLabel
+  }, config.minLabel), /*#__PURE__*/React.createElement(Input, _extends({
+    id: minInputId,
+    type: config.inputType,
+    className: styles.input,
+    value: localMin,
+    onChange: handleMinChange,
+    placeholder: dataRange.dataMin !== undefined && config.formatPlaceholder ? config.formatPlaceholder(dataRange.dataMin) : undefined
+  }, config.inputProps))), /*#__PURE__*/React.createElement("span", {
+    className: styles.separator,
+    "aria-hidden": "true"
+  }, "\u2013"), /*#__PURE__*/React.createElement("div", {
+    className: styles.inputWrapper
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: maxInputId,
+    className: styles.inputLabel
+  }, config.maxLabel), /*#__PURE__*/React.createElement(Input, _extends({
+    id: maxInputId,
+    type: config.inputType,
+    className: styles.input,
+    value: localMax,
+    onChange: handleMaxChange,
+    placeholder: dataRange.dataMax !== undefined && config.formatPlaceholder ? config.formatPlaceholder(dataRange.dataMax) : undefined
+  }, config.inputProps)))));
+}
+export const RangeInput = /*#__PURE__*/memo(RangeInputInner);
+//# sourceMappingURL=RangeInput.js.map

package/build/esm/filter-list/base/inputs/RangeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeInput.js","names":["Input","classnames","debounce","React","memo","useCallback","useEffect","useId","useMemo","useRef","useState","createHistogramBuckets","getMaxBucketCount","styles","sharedStyles","useStableData","DEBOUNCE_MS","RangeInputInner","valueCountPairs","isLoading","minValue","maxValue","onChange","showHistogram","className","style","config","minInputId","maxInputId","localMin","setLocalMin","formatValue","localMax","setLocalMax","onChangeRef","current","minValueRef","maxValueRef","debouncedMinChange","newValue","parsed","parseValue","debouncedMaxChange","cancel","displayPairs","computedRange","length","min","undefined","max","reduce","acc","p","Math","toNumber","value","Infinity","fromNumber","dataRange","dataMin","dataMax","buckets","maxBucketCount","handleMinChange","e","target","handleMaxChange","createElement","rangeInput","emptyMessage","histogramContainer","map","bucket","index","height","count","isInRange","key","histogramBar","title","formatTooltip","rangeInputs","inputWrapper","htmlFor","inputLabel","minLabel","_extends","id","type","inputType","input","placeholder","formatPlaceholder","inputProps","separator","maxLabel","RangeInput"],"sources":["RangeInput.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Input } from \"@base-ui/react/input\";\nimport classnames from \"classnames\";\nimport { debounce } from \"lodash-es\";\nimport React, {\n  memo,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  createHistogramBuckets,\n  getMaxBucketCount,\n  type HistogramBucket,\n} from \"./createHistogramBuckets.js\";\nimport styles from \"./RangeInput.module.css\";\nimport sharedStyles from \"./shared.module.css\";\nimport { useStableData } from \"./useStableData.js\";\n\nconst DEBOUNCE_MS = 300;\n\nexport interface RangeInputConfig<T> {\n  inputType: \"number\" | \"date\";\n  formatValue: (value: T | undefined) => string;\n  parseValue: (value: string) => T | undefined;\n  toNumber: (value: T) => number;\n  fromNumber: (value: number) => T;\n  minLabel: string;\n  maxLabel: string;\n  formatTooltip: (min: T, max: T, count: number) => string;\n  formatPlaceholder?: (value: T) => string;\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n}\n\nexport interface RangeInputProps<T> {\n  valueCountPairs: Array<{ value: T; count: number }>;\n  isLoading: boolean;\n  minValue: T | undefined;\n  maxValue: T | undefined;\n  onChange: (min: T | undefined, max: T | undefined) => void;\n  showHistogram?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  config: RangeInputConfig<T>;\n}\n\nfunction RangeInputInner<T>({\n  valueCountPairs,\n  isLoading,\n  minValue,\n  maxValue,\n  onChange,\n  showHistogram = true,\n  className,\n  style,\n  config,\n}: RangeInputProps<T>): React.ReactElement {\n  const minInputId = useId();\n  const maxInputId = useId();\n\n  const [localMin, setLocalMin] = useState<string>(\n    config.formatValue(minValue),\n  );\n  const [localMax, setLocalMax] = useState<string>(\n    config.formatValue(maxValue),\n  );\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n  const minValueRef = useRef(minValue);\n  minValueRef.current = minValue;\n  const maxValueRef = useRef(maxValue);\n  maxValueRef.current = maxValue;\n\n  const debouncedMinChange = useMemo(\n    () =>\n      debounce((newValue: string) => {\n        const parsed = config.parseValue(newValue);\n        onChangeRef.current(parsed, maxValueRef.current);\n      }, DEBOUNCE_MS),\n    [config],\n  );\n\n  const debouncedMaxChange = useMemo(\n    () =>\n      debounce((newValue: string) => {\n        const parsed = config.parseValue(newValue);\n        onChangeRef.current(minValueRef.current, parsed);\n      }, DEBOUNCE_MS),\n    [config],\n  );\n\n  useEffect(() => {\n    setLocalMin(config.formatValue(minValue));\n    debouncedMinChange.cancel();\n  }, [minValue, config, debouncedMinChange]);\n\n  useEffect(() => {\n    setLocalMax(config.formatValue(maxValue));\n    debouncedMaxChange.cancel();\n  }, [maxValue, config, debouncedMaxChange]);\n\n  useEffect(() => {\n    return () => {\n      debouncedMinChange.cancel();\n      debouncedMaxChange.cancel();\n    };\n  }, [debouncedMinChange, debouncedMaxChange]);\n\n  const displayPairs = useStableData(valueCountPairs, isLoading);\n\n  const computedRange = useMemo(() => {\n    if (displayPairs.length === 0) return { min: undefined, max: undefined };\n    const min = displayPairs.reduce(\n      (acc, p) => Math.min(acc, config.toNumber(p.value)),\n      Infinity,\n    );\n    const max = displayPairs.reduce(\n      (acc, p) => Math.max(acc, config.toNumber(p.value)),\n      -Infinity,\n    );\n    return {\n      min: config.fromNumber(min),\n      max: config.fromNumber(max),\n    };\n  }, [displayPairs, config]);\n\n  const dataRange = useMemo(() => ({\n    dataMin: computedRange.min,\n    dataMax: computedRange.max,\n  }), [computedRange.min, computedRange.max]);\n\n  const buckets = useMemo<Array<HistogramBucket<T>>>(() => {\n    if (\n      !showHistogram\n      || displayPairs.length === 0\n      || computedRange.min === undefined\n      || computedRange.max === undefined\n    ) {\n      return [];\n    }\n\n    return createHistogramBuckets(\n      displayPairs,\n      { min: computedRange.min, max: computedRange.max },\n      config.toNumber,\n      config.fromNumber,\n    );\n  }, [showHistogram, displayPairs, computedRange, config]);\n\n  const maxBucketCount = useMemo(() => getMaxBucketCount(buckets), [buckets]);\n\n  const handleMinChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value;\n      setLocalMin(newValue);\n      debouncedMinChange(newValue);\n    },\n    [debouncedMinChange],\n  );\n\n  const handleMaxChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value;\n      setLocalMax(newValue);\n      debouncedMaxChange(newValue);\n    },\n    [debouncedMaxChange],\n  );\n\n  return (\n    <div\n      className={classnames(styles.rangeInput, className)}\n      style={style}\n      data-loading={isLoading}\n    >\n      {showHistogram && buckets.length === 0 && !isLoading && (\n        <div className={sharedStyles.emptyMessage}>\n          No values available\n        </div>\n      )}\n\n      {showHistogram && buckets.length > 0 && (\n        <div className={styles.histogramContainer}>\n          {buckets.map((bucket, index) => {\n            const height = (bucket.count / maxBucketCount) * 100;\n            const isInRange = (minValue === undefined\n              || config.toNumber(bucket.max) >= config.toNumber(minValue))\n              && (maxValue === undefined\n                || config.toNumber(bucket.min) <= config.toNumber(maxValue));\n\n            return (\n              <div\n                key={index}\n                className={styles.histogramBar}\n                data-in-range={isInRange}\n                style={{ height: `${Math.max(height, 2)}%` }}\n                title={config.formatTooltip(\n                  bucket.min,\n                  bucket.max,\n                  bucket.count,\n                )}\n              />\n            );\n          })}\n        </div>\n      )}\n\n      <div className={styles.rangeInputs}>\n        <div className={styles.inputWrapper}>\n          <label htmlFor={minInputId} className={styles.inputLabel}>\n            {config.minLabel}\n          </label>\n          <Input\n            id={minInputId}\n            type={config.inputType}\n            className={styles.input}\n            value={localMin}\n            onChange={handleMinChange}\n            placeholder={dataRange.dataMin !== undefined\n                && config.formatPlaceholder\n              ? config.formatPlaceholder(dataRange.dataMin)\n              : undefined}\n            {...config.inputProps}\n          />\n        </div>\n\n        <span className={styles.separator} aria-hidden=\"true\">\n          –\n        </span>\n\n        <div className={styles.inputWrapper}>\n          <label htmlFor={maxInputId} className={styles.inputLabel}>\n            {config.maxLabel}\n          </label>\n          <Input\n            id={maxInputId}\n            type={config.inputType}\n            className={styles.input}\n            value={localMax}\n            onChange={handleMaxChange}\n            placeholder={dataRange.dataMax !== undefined\n                && config.formatPlaceholder\n              ? config.formatPlaceholder(dataRange.dataMax)\n              : undefined}\n            {...config.inputProps}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport const RangeInput = memo(RangeInputInner) as typeof RangeInputInner;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,KAAK,QAAQ,sBAAsB;AAC5C,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,QAAQ,QAAQ,WAAW;AACpC,OAAOC,KAAK,IACVC,IAAI,EACJC,WAAW,EACXC,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,SACEC,sBAAsB,EACtBC,iBAAiB,QAEZ,6BAA6B;AACpC,OAAOC,MAAM,MAAM,yBAAyB;AAC5C,OAAOC,YAAY,MAAM,qBAAqB;AAC9C,SAASC,aAAa,QAAQ,oBAAoB;AAElD,MAAMC,WAAW,GAAG,GAAG;AA2BvB,SAASC,eAAeA,CAAI;EAC1BC,eAAe;EACfC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,aAAa,GAAG,IAAI;EACpBC,SAAS;EACTC,KAAK;EACLC;AACkB,CAAC,EAAsB;EACzC,MAAMC,UAAU,GAAGpB,KAAK,CAAC,CAAC;EAC1B,MAAMqB,UAAU,GAAGrB,KAAK,CAAC,CAAC;EAE1B,MAAM,CAACsB,QAAQ,EAAEC,WAAW,CAAC,GAAGpB,QAAQ,CACtCgB,MAAM,CAACK,WAAW,CAACX,QAAQ,CAC7B,CAAC;EACD,MAAM,CAACY,QAAQ,EAAEC,WAAW,CAAC,GAAGvB,QAAQ,CACtCgB,MAAM,CAACK,WAAW,CAACV,QAAQ,CAC7B,CAAC;EACD,MAAMa,WAAW,GAAGzB,MAAM,CAACa,QAAQ,CAAC;EACpCY,WAAW,CAACC,OAAO,GAAGb,QAAQ;EAC9B,MAAMc,WAAW,GAAG3B,MAAM,CAACW,QAAQ,CAAC;EACpCgB,WAAW,CAACD,OAAO,GAAGf,QAAQ;EAC9B,MAAMiB,WAAW,GAAG5B,MAAM,CAACY,QAAQ,CAAC;EACpCgB,WAAW,CAACF,OAAO,GAAGd,QAAQ;EAE9B,MAAMiB,kBAAkB,GAAG9B,OAAO,CAChC,MACEN,QAAQ,CAAEqC,QAAgB,IAAK;IAC7B,MAAMC,MAAM,GAAGd,MAAM,CAACe,UAAU,CAACF,QAAQ,CAAC;IAC1CL,WAAW,CAACC,OAAO,CAACK,MAAM,EAAEH,WAAW,CAACF,OAAO,CAAC;EAClD,CAAC,EAAEnB,WAAW,CAAC,EACjB,CAACU,MAAM,CACT,CAAC;EAED,MAAMgB,kBAAkB,GAAGlC,OAAO,CAChC,MACEN,QAAQ,CAAEqC,QAAgB,IAAK;IAC7B,MAAMC,MAAM,GAAGd,MAAM,CAACe,UAAU,CAACF,QAAQ,CAAC;IAC1CL,WAAW,CAACC,OAAO,CAACC,WAAW,CAACD,OAAO,EAAEK,MAAM,CAAC;EAClD,CAAC,EAAExB,WAAW,CAAC,EACjB,CAACU,MAAM,CACT,CAAC;EAEDpB,SAAS,CAAC,MAAM;IACdwB,WAAW,CAACJ,MAAM,CAACK,WAAW,CAACX,QAAQ,CAAC,CAAC;IACzCkB,kBAAkB,CAACK,MAAM,CAAC,CAAC;EAC7B,CAAC,EAAE,CAACvB,QAAQ,EAAEM,MAAM,EAAEY,kBAAkB,CAAC,CAAC;EAE1ChC,SAAS,CAAC,MAAM;IACd2B,WAAW,CAACP,MAAM,CAACK,WAAW,CAACV,QAAQ,CAAC,CAAC;IACzCqB,kBAAkB,CAACC,MAAM,CAAC,CAAC;EAC7B,CAAC,EAAE,CAACtB,QAAQ,EAAEK,MAAM,EAAEgB,kBAAkB,CAAC,CAAC;EAE1CpC,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACXgC,kBAAkB,CAACK,MAAM,CAAC,CAAC;MAC3BD,kBAAkB,CAACC,MAAM,CAAC,CAAC;IAC7B,CAAC;EACH,CAAC,EAAE,CAACL,kBAAkB,EAAEI,kBAAkB,CAAC,CAAC;EAE5C,MAAME,YAAY,GAAG7B,aAAa,CAACG,eAAe,EAAEC,SAAS,CAAC;EAE9D,MAAM0B,aAAa,GAAGrC,OAAO,CAAC,MAAM;IAClC,IAAIoC,YAAY,CAACE,MAAM,KAAK,CAAC,EAAE,OAAO;MAAEC,GAAG,EAAEC,SAAS;MAAEC,GAAG,EAAED;IAAU,CAAC;IACxE,MAAMD,GAAG,GAAGH,YAAY,CAACM,MAAM,CAC7B,CAACC,GAAG,EAAEC,CAAC,KAAKC,IAAI,CAACN,GAAG,CAACI,GAAG,EAAEzB,MAAM,CAAC4B,QAAQ,CAACF,CAAC,CAACG,KAAK,CAAC,CAAC,EACnDC,QACF,CAAC;IACD,MAAMP,GAAG,GAAGL,YAAY,CAACM,MAAM,CAC7B,CAACC,GAAG,EAAEC,CAAC,KAAKC,IAAI,CAACJ,GAAG,CAACE,GAAG,EAAEzB,MAAM,CAAC4B,QAAQ,CAACF,CAAC,CAACG,KAAK,CAAC,CAAC,EACnD,CAACC,QACH,CAAC;IACD,OAAO;MACLT,GAAG,EAAErB,MAAM,CAAC+B,UAAU,CAACV,GAAG,CAAC;MAC3BE,GAAG,EAAEvB,MAAM,CAAC+B,UAAU,CAACR,GAAG;IAC5B,CAAC;EACH,CAAC,EAAE,CAACL,YAAY,EAAElB,MAAM,CAAC,CAAC;EAE1B,MAAMgC,SAAS,GAAGlD,OAAO,CAAC,OAAO;IAC/BmD,OAAO,EAAEd,aAAa,CAACE,GAAG;IAC1Ba,OAAO,EAAEf,aAAa,CAACI;EACzB,CAAC,CAAC,EAAE,CAACJ,aAAa,CAACE,GAAG,EAAEF,aAAa,CAACI,GAAG,CAAC,CAAC;EAE3C,MAAMY,OAAO,GAAGrD,OAAO,CAA4B,MAAM;IACvD,IACE,CAACe,aAAa,IACXqB,YAAY,CAACE,MAAM,KAAK,CAAC,IACzBD,aAAa,CAACE,GAAG,KAAKC,SAAS,IAC/BH,aAAa,CAACI,GAAG,KAAKD,SAAS,EAClC;MACA,OAAO,EAAE;IACX;IAEA,OAAOrC,sBAAsB,CAC3BiC,YAAY,EACZ;MAAEG,GAAG,EAAEF,aAAa,CAACE,GAAG;MAAEE,GAAG,EAAEJ,aAAa,CAACI;IAAI,CAAC,EAClDvB,MAAM,CAAC4B,QAAQ,EACf5B,MAAM,CAAC+B,UACT,CAAC;EACH,CAAC,EAAE,CAAClC,aAAa,EAAEqB,YAAY,EAAEC,aAAa,EAAEnB,MAAM,CAAC,CAAC;EAExD,MAAMoC,cAAc,GAAGtD,OAAO,CAAC,MAAMI,iBAAiB,CAACiD,OAAO,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAE3E,MAAME,eAAe,GAAG1D,WAAW,CAChC2D,CAAsC,IAAK;IAC1C,MAAMzB,QAAQ,GAAGyB,CAAC,CAACC,MAAM,CAACV,KAAK;IAC/BzB,WAAW,CAACS,QAAQ,CAAC;IACrBD,kBAAkB,CAACC,QAAQ,CAAC;EAC9B,CAAC,EACD,CAACD,kBAAkB,CACrB,CAAC;EAED,MAAM4B,eAAe,GAAG7D,WAAW,CAChC2D,CAAsC,IAAK;IAC1C,MAAMzB,QAAQ,GAAGyB,CAAC,CAACC,MAAM,CAACV,KAAK;IAC/BtB,WAAW,CAACM,QAAQ,CAAC;IACrBG,kBAAkB,CAACH,QAAQ,CAAC;EAC9B,CAAC,EACD,CAACG,kBAAkB,CACrB,CAAC;EAED,oBACEvC,KAAA,CAAAgE,aAAA;IACE3C,SAAS,EAAEvB,UAAU,CAACY,MAAM,CAACuD,UAAU,EAAE5C,SAAS,CAAE;IACpDC,KAAK,EAAEA,KAAM;IACb,gBAAcN;EAAU,GAEvBI,aAAa,IAAIsC,OAAO,CAACf,MAAM,KAAK,CAAC,IAAI,CAAC3B,SAAS,iBAClDhB,KAAA,CAAAgE,aAAA;IAAK3C,SAAS,EAAEV,YAAY,CAACuD;EAAa,GAAC,qBAEtC,CACN,EAEA9C,aAAa,IAAIsC,OAAO,CAACf,MAAM,GAAG,CAAC,iBAClC3C,KAAA,CAAAgE,aAAA;IAAK3C,SAAS,EAAEX,MAAM,CAACyD;EAAmB,GACvCT,OAAO,CAACU,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK,KAAK;IAC9B,MAAMC,MAAM,GAAIF,MAAM,CAACG,KAAK,GAAGb,cAAc,GAAI,GAAG;IACpD,MAAMc,SAAS,GAAG,CAACxD,QAAQ,KAAK4B,SAAS,IACpCtB,MAAM,CAAC4B,QAAQ,CAACkB,MAAM,CAACvB,GAAG,CAAC,IAAIvB,MAAM,CAAC4B,QAAQ,CAAClC,QAAQ,CAAC,MACvDC,QAAQ,KAAK2B,SAAS,IACrBtB,MAAM,CAAC4B,QAAQ,CAACkB,MAAM,CAACzB,GAAG,CAAC,IAAIrB,MAAM,CAAC4B,QAAQ,CAACjC,QAAQ,CAAC,CAAC;IAEhE,oBACElB,KAAA,CAAAgE,aAAA;MACEU,GAAG,EAAEJ,KAAM;MACXjD,SAAS,EAAEX,MAAM,CAACiE,YAAa;MAC/B,iBAAeF,SAAU;MACzBnD,KAAK,EAAE;QAAEiD,MAAM,EAAE,GAAGrB,IAAI,CAACJ,GAAG,CAACyB,MAAM,EAAE,CAAC,CAAC;MAAI,CAAE;MAC7CK,KAAK,EAAErD,MAAM,CAACsD,aAAa,CACzBR,MAAM,CAACzB,GAAG,EACVyB,MAAM,CAACvB,GAAG,EACVuB,MAAM,CAACG,KACT;IAAE,CACH,CAAC;EAEN,CAAC,CACE,CACN,eAEDxE,KAAA,CAAAgE,aAAA;IAAK3C,SAAS,EAAEX,MAAM,CAACoE;EAAY,gBACjC9E,KAAA,CAAAgE,aAAA;IAAK3C,SAAS,EAAEX,MAAM,CAACqE;EAAa,gBAClC/E,KAAA,CAAAgE,aAAA;IAAOgB,OAAO,EAAExD,UAAW;IAACH,SAAS,EAAEX,MAAM,CAACuE;EAAW,GACtD1D,MAAM,CAAC2D,QACH,CAAC,eACRlF,KAAA,CAAAgE,aAAA,CAACnE,KAAK,EAAAsF,QAAA;IACJC,EAAE,EAAE5D,UAAW;IACf6D,IAAI,EAAE9D,MAAM,CAAC+D,SAAU;IACvBjE,SAAS,EAAEX,MAAM,CAAC6E,KAAM;IACxBnC,KAAK,EAAE1B,QAAS;IAChBP,QAAQ,EAAEyC,eAAgB;IAC1B4B,WAAW,EAAEjC,SAAS,CAACC,OAAO,KAAKX,SAAS,IACrCtB,MAAM,CAACkE,iBAAiB,GAC3BlE,MAAM,CAACkE,iBAAiB,CAAClC,SAAS,CAACC,OAAO,CAAC,GAC3CX;EAAU,GACVtB,MAAM,CAACmE,UAAU,CACtB,CACE,CAAC,eAEN1F,KAAA,CAAAgE,aAAA;IAAM3C,SAAS,EAAEX,MAAM,CAACiF,SAAU;IAAC,eAAY;EAAM,GAAC,QAEhD,CAAC,eAEP3F,KAAA,CAAAgE,aAAA;IAAK3C,SAAS,EAAEX,MAAM,CAACqE;EAAa,gBAClC/E,KAAA,CAAAgE,aAAA;IAAOgB,OAAO,EAAEvD,UAAW;IAACJ,SAAS,EAAEX,MAAM,CAACuE;EAAW,GACtD1D,MAAM,CAACqE,QACH,CAAC,eACR5F,KAAA,CAAAgE,aAAA,CAACnE,KAAK,EAAAsF,QAAA;IACJC,EAAE,EAAE3D,UAAW;IACf4D,IAAI,EAAE9D,MAAM,CAAC+D,SAAU;IACvBjE,SAAS,EAAEX,MAAM,CAAC6E,KAAM;IACxBnC,KAAK,EAAEvB,QAAS;IAChBV,QAAQ,EAAE4C,eAAgB;IAC1ByB,WAAW,EAAEjC,SAAS,CAACE,OAAO,KAAKZ,SAAS,IACrCtB,MAAM,CAACkE,iBAAiB,GAC3BlE,MAAM,CAACkE,iBAAiB,CAAClC,SAAS,CAACE,OAAO,CAAC,GAC3CZ;EAAU,GACVtB,MAAM,CAACmE,UAAU,CACtB,CACE,CACF,CACF,CAAC;AAEV;AAEA,OAAO,MAAMG,UAAU,gBAAG5F,IAAI,CAACa,eAAe,CAA2B","ignoreList":[]}

package/build/esm/filter-list/base/inputs/RangeInput.module.css

@@ -0,0 +1,106 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.rangeInput {
+  display: flex;
+  flex-direction: column;
+  gap: var(--osdk-filter-range-gap);
+  min-width: 0;
+  transition: opacity var(--osdk-filter-content-fade-duration);
+}
+
+.rangeInput[data-loading="true"] {
+  opacity: 0.5;
+}
+
+.histogramContainer {
+  display: flex;
+  align-items: flex-end;
+  height: var(--osdk-filter-range-histogram-height);
+  gap: var(--osdk-filter-range-histogram-bar-gap);
+  padding-bottom: var(--osdk-filter-range-histogram-padding-bottom);
+  padding-inline: var(--osdk-filter-range-histogram-padding-inline);
+  overflow: hidden;
+}
+
+.histogramBar {
+  flex: 1;
+  background: var(--osdk-filter-range-histogram-bar-color);
+  min-width: var(--osdk-filter-range-histogram-bar-min-width);
+  transition: background-color var(--osdk-filter-range-histogram-bar-transition);
+}
+
+.histogramBar[data-in-range="true"] {
+  background: var(--osdk-filter-range-histogram-bar-active-color);
+}
+
+.rangeInputs {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--osdk-filter-range-inputs-gap);
+  min-width: 0;
+}
+
+.inputWrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--osdk-filter-range-input-wrapper-gap);
+  min-width: 0;
+}
+
+.inputLabel {
+  font-family: var(--osdk-filter-range-label-font-family);
+  font-size: var(--osdk-filter-range-label-font-size);
+  color: var(--osdk-filter-range-label-color);
+}
+
+.input {
+  font-family: var(--osdk-filter-input-font-family);
+  font-size: var(--osdk-filter-input-font-size);
+  padding: var(--osdk-filter-input-padding);
+  border: var(--osdk-filter-input-border);
+  border-radius: var(--osdk-filter-input-border-radius);
+  background: var(--osdk-filter-input-bg);
+  color: var(--osdk-filter-input-color);
+  min-width: 0;
+
+  &:focus {
+    border-color: var(--osdk-filter-input-focus-border);
+    outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-input-focus-outline-color);
+    outline-offset: var(--osdk-filter-input-focus-outline-offset);
+  }
+
+  &::placeholder {
+    color: var(--osdk-filter-input-placeholder-color);
+  }
+}
+
+.separator {
+  display: flex;
+  align-items: center;
+  height: calc(
+    var(--osdk-filter-input-font-size) + var(--osdk-filter-input-padding) * 2
+  );
+  color: var(--osdk-filter-range-separator-color);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .histogramContainer,
+  .rangeInput {
+    transition: none;
+  }
+}

package/build/esm/filter-list/base/inputs/SingleDateInput.js

@@ -18,7 +18,7 @@ import { Button } from "@base-ui/react/button";
 import { Input } from "@base-ui/react/input";
 import classnames from "classnames";
 import React, { memo, useCallback } from "react";
-import { formatDateForInput, parseDateFromInput } from "./dateUtils.js";
+import { formatDateForInput, parseDateFromInput } from "../../../shared/dateUtils.js";
 import styles from "./SingleDateInput.module.css";
 function SingleDateInputInner({
   selectedDate,

package/build/esm/filter-list/base/inputs/SingleDateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleDateInput.js","names":["Button","Input","classnames","React","memo","useCallback","formatDateForInput","parseDateFromInput","styles","SingleDateInputInner","selectedDate","onChange","className","style","minDate","maxDate","placeholder","showClearButton","handleChange","e","date","target","value","handleClear","undefined","createElement","singleDate","dateContainer","type","input","min","max","clearButton","onClick","SingleDateInput"],"sources":["SingleDateInput.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Button } from \"@base-ui/react/button\";\nimport { Input } from \"@base-ui/react/input\";\nimport classnames from \"classnames\";\nimport React, { memo, useCallback } from \"react\";\nimport { formatDateForInput, parseDateFromInput } from \"./dateUtils.js\";\nimport styles from \"./SingleDateInput.module.css\";\n\ninterface SingleDateInputProps {\n  selectedDate: Date | undefined;\n  onChange: (date: Date | undefined) => void;\n  className?: string;\n  style?: React.CSSProperties;\n  minDate?: Date;\n  maxDate?: Date;\n  placeholder?: string;\n  showClearButton?: boolean;\n}\n\nfunction SingleDateInputInner({\n  selectedDate,\n  onChange,\n  className,\n  style,\n  minDate,\n  maxDate,\n  placeholder = \"Select a date...\",\n  showClearButton = true,\n}: SingleDateInputProps): React.ReactElement {\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const date = parseDateFromInput(e.target.value);\n      onChange(date);\n    },\n    [onChange],\n  );\n\n  const handleClear = useCallback(() => {\n    onChange(undefined);\n  }, [onChange]);\n\n  return (\n    <div className={classnames(styles.singleDate, className)} style={style}>\n      <div className={styles.dateContainer}>\n        <Input\n          type=\"date\"\n          className={styles.input}\n          value={formatDateForInput(selectedDate)}\n          onChange={handleChange}\n          min={minDate ? formatDateForInput(minDate) : undefined}\n          max={maxDate ? formatDateForInput(maxDate) : undefined}\n          placeholder={placeholder}\n          aria-label=\"Select date\"\n        />\n        {showClearButton && selectedDate !== undefined && (\n          <Button\n            className={styles.clearButton}\n            onClick={handleClear}\n            aria-label=\"Clear date\"\n          >\n            ×\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport const SingleDateInput: React.NamedExoticComponent<SingleDateInputProps> =\n  memo(SingleDateInputInner);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,KAAK,QAAQ,sBAAsB;AAC5C,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,IAAI,EAAEC,WAAW,QAAQ,OAAO;AAChD,SAASC,kBAAkB,EAAEC,kBAAkB,QAAQ,gBAAgB;AACvE,OAAOC,MAAM,MAAM,8BAA8B;AAajD,SAASC,oBAAoBA,CAAC;EAC5BC,YAAY;EACZC,QAAQ;EACRC,SAAS;EACTC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,WAAW,GAAG,kBAAkB;EAChCC,eAAe,GAAG;AACE,CAAC,EAAsB;EAC3C,MAAMC,YAAY,GAAGb,WAAW,CAC7Bc,CAAsC,IAAK;IAC1C,MAAMC,IAAI,GAAGb,kBAAkB,CAACY,CAAC,CAACE,MAAM,CAACC,KAAK,CAAC;IAC/CX,QAAQ,CAACS,IAAI,CAAC;EAChB,CAAC,EACD,CAACT,QAAQ,CACX,CAAC;EAED,MAAMY,WAAW,GAAGlB,WAAW,CAAC,MAAM;IACpCM,QAAQ,CAACa,SAAS,CAAC;EACrB,CAAC,EAAE,CAACb,QAAQ,CAAC,CAAC;EAEd,oBACER,KAAA,CAAAsB,aAAA;IAAKb,SAAS,EAAEV,UAAU,CAACM,MAAM,CAACkB,UAAU,EAAEd,SAAS,CAAE;IAACC,KAAK,EAAEA;EAAM,gBACrEV,KAAA,CAAAsB,aAAA;IAAKb,SAAS,EAAEJ,MAAM,CAACmB;EAAc,gBACnCxB,KAAA,CAAAsB,aAAA,CAACxB,KAAK;IACJ2B,IAAI,EAAC,MAAM;IACXhB,SAAS,EAAEJ,MAAM,CAACqB,KAAM;IACxBP,KAAK,EAAEhB,kBAAkB,CAACI,YAAY,CAAE;IACxCC,QAAQ,EAAEO,YAAa;IACvBY,GAAG,EAAEhB,OAAO,GAAGR,kBAAkB,CAACQ,OAAO,CAAC,GAAGU,SAAU;IACvDO,GAAG,EAAEhB,OAAO,GAAGT,kBAAkB,CAACS,OAAO,CAAC,GAAGS,SAAU;IACvDR,WAAW,EAAEA,WAAY;IACzB,cAAW;EAAa,CACzB,CAAC,EACDC,eAAe,IAAIP,YAAY,KAAKc,SAAS,iBAC5CrB,KAAA,CAAAsB,aAAA,CAACzB,MAAM;IACLY,SAAS,EAAEJ,MAAM,CAACwB,WAAY;IAC9BC,OAAO,EAAEV,WAAY;IACrB,cAAW;EAAY,GACxB,MAEO,CAEP,CACF,CAAC;AAEV;AAEA,OAAO,MAAMW,eAAiE,gBAC5E9B,IAAI,CAACK,oBAAoB,CAAC","ignoreList":[]}
+{"version":3,"file":"SingleDateInput.js","names":["Button","Input","classnames","React","memo","useCallback","formatDateForInput","parseDateFromInput","styles","SingleDateInputInner","selectedDate","onChange","className","style","minDate","maxDate","placeholder","showClearButton","handleChange","e","date","target","value","handleClear","undefined","createElement","singleDate","dateContainer","type","input","min","max","clearButton","onClick","SingleDateInput"],"sources":["SingleDateInput.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Button } from \"@base-ui/react/button\";\nimport { Input } from \"@base-ui/react/input\";\nimport classnames from \"classnames\";\nimport React, { memo, useCallback } from \"react\";\nimport {\n  formatDateForInput,\n  parseDateFromInput,\n} from \"../../../shared/dateUtils.js\";\nimport styles from \"./SingleDateInput.module.css\";\n\ninterface SingleDateInputProps {\n  selectedDate: Date | undefined;\n  onChange: (date: Date | undefined) => void;\n  className?: string;\n  style?: React.CSSProperties;\n  minDate?: Date;\n  maxDate?: Date;\n  placeholder?: string;\n  showClearButton?: boolean;\n}\n\nfunction SingleDateInputInner({\n  selectedDate,\n  onChange,\n  className,\n  style,\n  minDate,\n  maxDate,\n  placeholder = \"Select a date...\",\n  showClearButton = true,\n}: SingleDateInputProps): React.ReactElement {\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const date = parseDateFromInput(e.target.value);\n      onChange(date);\n    },\n    [onChange],\n  );\n\n  const handleClear = useCallback(() => {\n    onChange(undefined);\n  }, [onChange]);\n\n  return (\n    <div className={classnames(styles.singleDate, className)} style={style}>\n      <div className={styles.dateContainer}>\n        <Input\n          type=\"date\"\n          className={styles.input}\n          value={formatDateForInput(selectedDate)}\n          onChange={handleChange}\n          min={minDate ? formatDateForInput(minDate) : undefined}\n          max={maxDate ? formatDateForInput(maxDate) : undefined}\n          placeholder={placeholder}\n          aria-label=\"Select date\"\n        />\n        {showClearButton && selectedDate !== undefined && (\n          <Button\n            className={styles.clearButton}\n            onClick={handleClear}\n            aria-label=\"Clear date\"\n          >\n            ×\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport const SingleDateInput: React.NamedExoticComponent<SingleDateInputProps> =\n  memo(SingleDateInputInner);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,KAAK,QAAQ,sBAAsB;AAC5C,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,IAAI,EAAEC,WAAW,QAAQ,OAAO;AAChD,SACEC,kBAAkB,EAClBC,kBAAkB,QACb,8BAA8B;AACrC,OAAOC,MAAM,MAAM,8BAA8B;AAajD,SAASC,oBAAoBA,CAAC;EAC5BC,YAAY;EACZC,QAAQ;EACRC,SAAS;EACTC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,WAAW,GAAG,kBAAkB;EAChCC,eAAe,GAAG;AACE,CAAC,EAAsB;EAC3C,MAAMC,YAAY,GAAGb,WAAW,CAC7Bc,CAAsC,IAAK;IAC1C,MAAMC,IAAI,GAAGb,kBAAkB,CAACY,CAAC,CAACE,MAAM,CAACC,KAAK,CAAC;IAC/CX,QAAQ,CAACS,IAAI,CAAC;EAChB,CAAC,EACD,CAACT,QAAQ,CACX,CAAC;EAED,MAAMY,WAAW,GAAGlB,WAAW,CAAC,MAAM;IACpCM,QAAQ,CAACa,SAAS,CAAC;EACrB,CAAC,EAAE,CAACb,QAAQ,CAAC,CAAC;EAEd,oBACER,KAAA,CAAAsB,aAAA;IAAKb,SAAS,EAAEV,UAAU,CAACM,MAAM,CAACkB,UAAU,EAAEd,SAAS,CAAE;IAACC,KAAK,EAAEA;EAAM,gBACrEV,KAAA,CAAAsB,aAAA;IAAKb,SAAS,EAAEJ,MAAM,CAACmB;EAAc,gBACnCxB,KAAA,CAAAsB,aAAA,CAACxB,KAAK;IACJ2B,IAAI,EAAC,MAAM;IACXhB,SAAS,EAAEJ,MAAM,CAACqB,KAAM;IACxBP,KAAK,EAAEhB,kBAAkB,CAACI,YAAY,CAAE;IACxCC,QAAQ,EAAEO,YAAa;IACvBY,GAAG,EAAEhB,OAAO,GAAGR,kBAAkB,CAACQ,OAAO,CAAC,GAAGU,SAAU;IACvDO,GAAG,EAAEhB,OAAO,GAAGT,kBAAkB,CAACS,OAAO,CAAC,GAAGS,SAAU;IACvDR,WAAW,EAAEA,WAAY;IACzB,cAAW;EAAa,CACzB,CAAC,EACDC,eAAe,IAAIP,YAAY,KAAKc,SAAS,iBAC5CrB,KAAA,CAAAsB,aAAA,CAACzB,MAAM;IACLY,SAAS,EAAEJ,MAAM,CAACwB,WAAY;IAC9BC,OAAO,EAAEV,WAAY;IACrB,cAAW;EAAY,GACxB,MAEO,CAEP,CACF,CAAC;AAEV;AAEA,OAAO,MAAMW,eAAiE,gBAC5E9B,IAAI,CAACK,oBAAoB,CAAC","ignoreList":[]}

package/build/esm/filter-list/base/inputs/SingleDateInput.module.css

@@ -27,8 +27,8 @@
 
 .input {
   flex: 1;
-  font-family: var(--bp-typography-family-default);
-  font-size: var(--bp-typography-size-bodyMedium);
+  font-family: var(--osdk-filter-input-font-family);
+  font-size: var(--osdk-filter-timeline-input-font-size);
   padding: var(--osdk-filter-input-padding);
   border: var(--osdk-filter-input-border);
   border-radius: var(--osdk-filter-input-border-radius);

package/build/esm/filter-list/base/inputs/SingleSelectInput.js

@@ -0,0 +1,77 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import classnames from "classnames";
+import React, { memo, useCallback, useMemo } from "react";
+import { Combobox } from "../../../base-components/combobox/Combobox.js";
+import sharedStyles from "./shared.module.css";
+import styles from "./SingleSelectInput.module.css";
+function SingleSelectInputInner({
+  values,
+  isLoading,
+  error,
+  selectedValue,
+  onChange,
+  className,
+  style,
+  placeholder = "Select a value...",
+  showClearButton = true,
+  showCounts = false,
+  ariaLabel = "Select value"
+}) {
+  const handleValueChange = useCallback(value => {
+    onChange(value ?? undefined);
+  }, [onChange]);
+  const items = useMemo(() => values.map(({
+    value
+  }) => value), [values]);
+  const countByValue = useMemo(() => new Map(values.map(({
+    value,
+    count
+  }) => [value, count])), [values]);
+  const renderItem = useCallback(value => /*#__PURE__*/React.createElement(Combobox.Item, {
+    key: value,
+    value: value
+  }, /*#__PURE__*/React.createElement(Combobox.ItemIndicator, null), /*#__PURE__*/React.createElement("span", {
+    className: styles.itemLabel
+  }, value), showCounts && /*#__PURE__*/React.createElement("span", {
+    className: styles.itemCount
+  }, "(", (countByValue.get(value) ?? 0).toLocaleString(), ")")), [countByValue, showCounts]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(styles.singleSelect, className),
+    style: style,
+    "data-loading": isLoading
+  }, isLoading && /*#__PURE__*/React.createElement("div", {
+    className: sharedStyles.loadingMessage
+  }, "Loading options..."), error && /*#__PURE__*/React.createElement("div", {
+    className: sharedStyles.errorMessage
+  }, "Error loading options: ", error.message), !isLoading && !error && values.length === 0 && /*#__PURE__*/React.createElement("div", {
+    className: sharedStyles.emptyMessage
+  }, "No options available"), (values.length > 0 || isLoading) && /*#__PURE__*/React.createElement("div", {
+    className: styles.selectContainer
+  }, /*#__PURE__*/React.createElement(Combobox.Root, {
+    value: selectedValue ?? null,
+    onValueChange: handleValueChange,
+    items: items
+  }, /*#__PURE__*/React.createElement(Combobox.SearchInput, {
+    placeholder: placeholder,
+    "aria-label": ariaLabel
+  }), showClearButton && selectedValue !== undefined && /*#__PURE__*/React.createElement(Combobox.Clear, {
+    className: styles.clearButton
+  }), /*#__PURE__*/React.createElement(Combobox.Portal, null, /*#__PURE__*/React.createElement(Combobox.Positioner, null, /*#__PURE__*/React.createElement(Combobox.Popup, null, /*#__PURE__*/React.createElement(Combobox.Empty, null, "No matching options"), /*#__PURE__*/React.createElement(Combobox.List, null, renderItem)))))));
+}
+export const SingleSelectInput = /*#__PURE__*/memo(SingleSelectInputInner);
+//# sourceMappingURL=SingleSelectInput.js.map

package/build/esm/filter-list/base/inputs/SingleSelectInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleSelectInput.js","names":["classnames","React","memo","useCallback","useMemo","Combobox","sharedStyles","styles","SingleSelectInputInner","values","isLoading","error","selectedValue","onChange","className","style","placeholder","showClearButton","showCounts","ariaLabel","handleValueChange","value","undefined","items","map","countByValue","Map","count","renderItem","createElement","Item","key","ItemIndicator","itemLabel","itemCount","get","toLocaleString","singleSelect","loadingMessage","errorMessage","message","length","emptyMessage","selectContainer","Root","onValueChange","SearchInput","Clear","clearButton","Portal","Positioner","Popup","Empty","List","SingleSelectInput"],"sources":["SingleSelectInput.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport classnames from \"classnames\";\nimport React, { memo, useCallback, useMemo } from \"react\";\nimport { Combobox } from \"../../../base-components/combobox/Combobox.js\";\nimport type { PropertyAggregationValue } from \"../../types/AggregationTypes.js\";\nimport sharedStyles from \"./shared.module.css\";\nimport styles from \"./SingleSelectInput.module.css\";\n\ninterface SingleSelectInputProps {\n  values: PropertyAggregationValue[];\n  isLoading: boolean;\n  error: Error | null;\n  selectedValue: string | undefined;\n  onChange: (value: string | undefined) => void;\n  className?: string;\n  style?: React.CSSProperties;\n  placeholder?: string;\n  showClearButton?: boolean;\n  showCounts?: boolean;\n  ariaLabel?: string;\n}\n\nfunction SingleSelectInputInner({\n  values,\n  isLoading,\n  error,\n  selectedValue,\n  onChange,\n  className,\n  style,\n  placeholder = \"Select a value...\",\n  showClearButton = true,\n  showCounts = false,\n  ariaLabel = \"Select value\",\n}: SingleSelectInputProps): React.ReactElement {\n  const handleValueChange = useCallback(\n    (value: string | null) => {\n      onChange(value ?? undefined);\n    },\n    [onChange],\n  );\n\n  const items = useMemo(\n    () => values.map(({ value }) => value),\n    [values],\n  );\n\n  const countByValue = useMemo(\n    () => new Map(values.map(({ value, count }) => [value, count])),\n    [values],\n  );\n\n  const renderItem = useCallback(\n    (value: string) => (\n      <Combobox.Item key={value} value={value}>\n        <Combobox.ItemIndicator />\n        <span className={styles.itemLabel}>{value}</span>\n        {showCounts && (\n          <span className={styles.itemCount}>\n            ({(countByValue.get(value) ?? 0).toLocaleString()})\n          </span>\n        )}\n      </Combobox.Item>\n    ),\n    [countByValue, showCounts],\n  );\n\n  return (\n    <div\n      className={classnames(styles.singleSelect, className)}\n      style={style}\n      data-loading={isLoading}\n    >\n      {isLoading && (\n        <div className={sharedStyles.loadingMessage}>\n          Loading options...\n        </div>\n      )}\n\n      {error && (\n        <div className={sharedStyles.errorMessage}>\n          Error loading options: {error.message}\n        </div>\n      )}\n\n      {!isLoading && !error && values.length === 0 && (\n        <div className={sharedStyles.emptyMessage}>\n          No options available\n        </div>\n      )}\n\n      {(values.length > 0 || isLoading) && (\n        <div className={styles.selectContainer}>\n          <Combobox.Root<string>\n            value={selectedValue ?? null}\n            onValueChange={handleValueChange}\n            items={items}\n          >\n            <Combobox.SearchInput\n              placeholder={placeholder}\n              aria-label={ariaLabel}\n            />\n            {showClearButton && selectedValue !== undefined && (\n              <Combobox.Clear className={styles.clearButton} />\n            )}\n            <Combobox.Portal>\n              <Combobox.Positioner>\n                <Combobox.Popup>\n                  <Combobox.Empty>No matching options</Combobox.Empty>\n                  <Combobox.List>{renderItem}</Combobox.List>\n                </Combobox.Popup>\n              </Combobox.Positioner>\n            </Combobox.Portal>\n          </Combobox.Root>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const SingleSelectInput = memo(\n  SingleSelectInputInner,\n) as typeof SingleSelectInputInner;\n"],"mappings":"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","ignoreList":[]}

package/build/esm/filter-list/base/inputs/SingleSelectInput.module.css

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.singleSelect {
+  display: flex;
+  flex-direction: column;
+}
+
+.selectContainer {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-filter-select-container-gap);
+  position: relative;
+}
+
+.clearButton {
+  flex-shrink: 0;
+}
+
+.itemLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.itemCount {
+  font-variant-numeric: tabular-nums;
+  color: var(--osdk-typography-color-muted);
+  flex-shrink: 0;
+}

package/build/esm/filter-list/base/inputs/TextTagsInput.js

@@ -0,0 +1,133 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Button } from "@base-ui/react/button";
+import classnames from "classnames";
+import React, { memo, useCallback, useMemo, useState } from "react";
+import { Combobox } from "../../../base-components/combobox/Combobox.js";
+import sharedStyles from "./shared.module.css";
+import styles from "./TextTagsInput.module.css";
+const TAG_SEPARATOR_PATTERN = /[,\n]/;
+const TagItem = /*#__PURE__*/memo(function ({
+  tag,
+  onRemove
+}) {
+  const handleRemove = useCallback(() => {
+    onRemove(tag);
+  }, [tag, onRemove]);
+  return /*#__PURE__*/React.createElement("span", {
+    className: sharedStyles.tag
+  }, tag, /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    className: sharedStyles.tagRemove,
+    onClick: handleRemove,
+    "aria-label": `Remove ${tag}`
+  }, "\xD7"));
+});
+function TextTagsInputInner({
+  suggestions,
+  isLoading,
+  error,
+  tags,
+  onChange,
+  className,
+  style,
+  placeholder = "Add a tag...",
+  allowCustomTags = true,
+  suggestionLimit = 10,
+  ariaLabel = "Add tag"
+}) {
+  const [inputValue, setInputValue] = useState("");
+  const filteredSuggestions = useMemo(() => {
+    if (!suggestionLimit) return [];
+    const lowerInput = inputValue.toLowerCase();
+    return suggestions.filter(s => (!inputValue.trim() || s.value.toLowerCase().includes(lowerInput)) && !tags.includes(s.value)).slice(0, suggestionLimit);
+  }, [suggestions, inputValue, tags, suggestionLimit]);
+  const addTag = useCallback(tag => {
+    const trimmedTag = tag.trim();
+    if (trimmedTag && !tags.includes(trimmedTag)) {
+      onChange([...tags, trimmedTag]);
+    }
+    setInputValue("");
+  }, [tags, onChange]);
+  const removeTag = useCallback(tag => {
+    onChange(tags.filter(t => t !== tag));
+  }, [tags, onChange]);
+  const handleValueChange = useCallback(newTags => {
+    onChange(newTags ?? []);
+  }, [onChange]);
+  const handleInputValueChange = useCallback(value => {
+    setInputValue(value);
+  }, []);
+  const handleKeyDown = useCallback(e => {
+    if (e.key === "Enter" && inputValue.trim()) {
+      if (filteredSuggestions.length > 0) {
+        return;
+      }
+      e.preventDefault();
+      if (allowCustomTags) {
+        addTag(inputValue);
+      }
+    } else if (e.key === "Backspace" && !inputValue && tags.length > 0) {
+      removeTag(tags[tags.length - 1]);
+    }
+  }, [inputValue, tags, addTag, removeTag, allowCustomTags, filteredSuggestions]);
+  const handlePaste = useCallback(e => {
+    const pastedText = e.clipboardData.getData("text");
+    if (TAG_SEPARATOR_PATTERN.test(pastedText)) {
+      e.preventDefault();
+      const newTags = pastedText.split(TAG_SEPARATOR_PATTERN).map(t => t.trim()).filter(t => t && !tags.includes(t));
+      if (newTags.length > 0) {
+        onChange([...tags, ...newTags]);
+      }
+    }
+  }, [tags, onChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(styles.textTags, className),
+    style: style,
+    "data-loading": isLoading
+  }, error && /*#__PURE__*/React.createElement("div", {
+    className: sharedStyles.errorMessage
+  }, "Error loading suggestions: ", error.message), /*#__PURE__*/React.createElement(Combobox.Root, {
+    multiple: true,
+    value: tags,
+    onValueChange: handleValueChange,
+    inputValue: inputValue,
+    onInputValueChange: handleInputValueChange
+  }, tags.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: sharedStyles.tagContainer
+  }, tags.map(tag => /*#__PURE__*/React.createElement(TagItem, {
+    key: tag,
+    tag: tag,
+    onRemove: removeTag
+  }))), /*#__PURE__*/React.createElement(Combobox.SearchInput, {
+    className: styles.input,
+    placeholder: tags.length > 0 ? "" : placeholder,
+    onKeyDown: handleKeyDown,
+    onPaste: handlePaste,
+    "aria-label": ariaLabel
+  }), /*#__PURE__*/React.createElement(Combobox.Portal, null, /*#__PURE__*/React.createElement(Combobox.Positioner, null, /*#__PURE__*/React.createElement(Combobox.Popup, null, filteredSuggestions.length === 0 ? allowCustomTags && inputValue.trim() ? /*#__PURE__*/React.createElement(Combobox.Empty, null, "Press Enter to add \"", inputValue, "\"") : /*#__PURE__*/React.createElement(Combobox.Empty, null, suggestionLimit ? "No suggestions" : "Type to add a tag") : filteredSuggestions.map(({
+    value,
+    count
+  }) => /*#__PURE__*/React.createElement(Combobox.Item, {
+    key: value,
+    value: value
+  }, value, " (", count.toLocaleString(), ")")))))), isLoading && !!suggestionLimit && /*#__PURE__*/React.createElement("div", {
+    className: sharedStyles.loadingMessage
+  }, "Loading suggestions..."));
+}
+export const TextTagsInput = /*#__PURE__*/memo(TextTagsInputInner);
+//# sourceMappingURL=TextTagsInput.js.map