@osdk/react-components 0.1.0 → 0.2.0-beta.10

package/build/esm/base-components/draggable-list/DraggableList.js

@@ -0,0 +1,155 @@
+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 { Button } from "@base-ui/react/button";
+import { DragHandleVertical, SmallCross, Trash } from "@blueprintjs/icons";
+import { closestCenter, DndContext as BaseDndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import classNames from "classnames";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import styles from "./DraggableList.module.css";
+function DraggableListItem({
+  item,
+  onRemove,
+  removeIconVariant = "trash",
+  renderContent
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id: item.id
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  const handleRemove = useCallback(() => {
+    onRemove?.(item.id);
+  }, [item.id, onRemove]);
+  const RemoveIcon = removeIconVariant === "trash" ? Trash : SmallCross;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: setNodeRef,
+    style: style,
+    className: styles.draggableItem,
+    "data-dragging": isDragging
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    className: styles.dragHandle,
+    "aria-label": `Reorder ${item.label}`
+  }, attributes, listeners), /*#__PURE__*/React.createElement(DragHandleVertical, {
+    className: styles.icon
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.itemContent
+  }, renderContent ? renderContent(item) : item.label), onRemove && /*#__PURE__*/React.createElement(Button, {
+    className: styles.removeButton,
+    onClick: handleRemove,
+    "aria-label": `Remove ${item.label}`
+  }, /*#__PURE__*/React.createElement(RemoveIcon, {
+    className: styles.icon
+  })));
+}
+export function DraggableList({
+  items,
+  onReorder,
+  onRemove,
+  removeIconVariant = "cross",
+  renderContent,
+  emptyMessage,
+  className
+}) {
+  const itemIds = useMemo(() => items.map(item => item.id), [items]);
+  const sensors = useSensors(useSensor(PointerSensor, {
+    activationConstraint: {
+      distance: 5
+    }
+  }), useSensor(KeyboardSensor, {
+    coordinateGetter: sortableKeyboardCoordinates
+  }));
+  const handleDragEnd = useCallback(event => {
+    const {
+      active,
+      over
+    } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = items.findIndex(item => item.id === active.id);
+      const newIndex = items.findIndex(item => item.id === over.id);
+      onReorder(oldIndex, newIndex);
+    }
+  }, [items, onReorder]);
+  const containerRef = useRef(null);
+  useKeyboardEvents(containerRef);
+
+  // TODO: Revert when @types/react is fixed
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: classNames(styles.draggableListContainer, className)
+  }, /*#__PURE__*/React.createElement(BaseDndContext, {
+    sensors: sensors,
+    collisionDetection: closestCenter,
+    onDragEnd: handleDragEnd
+  }, /*#__PURE__*/React.createElement(SortableContext, {
+    items: itemIds,
+    strategy: verticalListSortingStrategy
+  }, items.map(item => /*#__PURE__*/React.createElement(DraggableListItem, {
+    key: item.id,
+    item: item,
+    onRemove: onRemove,
+    removeIconVariant: removeIconVariant,
+    renderContent: renderContent
+  })))), items.length === 0 && emptyMessage && /*#__PURE__*/React.createElement("div", {
+    className: styles.emptyState
+  }, emptyMessage));
+}
+const useKeyboardEvents = containerRef => {
+  // Base UI's DialogPopup calls stopPropagation on arrow key events, which
+  // prevents them from reaching @dnd-kit's document-level KeyboardSensor
+  // listener. We use a native capture-phase listener to intercept arrow keys
+  // before the dialog can swallow them, and re-dispatch them on the document
+  // so @dnd-kit can process keyboard-driven reordering.
+  useEffect(() => {
+    const el = containerRef.current;
+    if (el == null) {
+      return;
+    }
+    const ARROW_KEYS = new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
+    function handleCapture(event) {
+      if (!ARROW_KEYS.has(event.key)) {
+        return;
+      }
+
+      // Only intercept when a drag is active (an item has [data-dragging="true"])
+      if (el.querySelector("[data-dragging=\"true\"]") == null) {
+        return;
+      }
+      event.stopPropagation();
+      document.dispatchEvent(new KeyboardEvent("keydown", {
+        key: event.key,
+        code: event.code,
+        bubbles: true
+      }));
+    }
+    el.addEventListener("keydown", handleCapture, true);
+    return () => el.removeEventListener("keydown", handleCapture, true);
+  }, [containerRef]);
+};
+//# sourceMappingURL=DraggableList.js.map

package/build/esm/base-components/draggable-list/DraggableList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableList.js","names":["Button","DragHandleVertical","SmallCross","Trash","closestCenter","DndContext","BaseDndContext","KeyboardSensor","PointerSensor","useSensor","useSensors","SortableContext","sortableKeyboardCoordinates","useSortable","verticalListSortingStrategy","CSS","classNames","React","useCallback","useEffect","useMemo","useRef","styles","DraggableListItem","item","onRemove","removeIconVariant","renderContent","attributes","listeners","setNodeRef","transform","transition","isDragging","id","style","Transform","toString","handleRemove","RemoveIcon","createElement","ref","className","draggableItem","_extends","dragHandle","label","icon","itemContent","removeButton","onClick","DraggableList","items","onReorder","emptyMessage","itemIds","map","sensors","activationConstraint","distance","coordinateGetter","handleDragEnd","event","active","over","oldIndex","findIndex","newIndex","containerRef","useKeyboardEvents","draggableListContainer","collisionDetection","onDragEnd","strategy","key","length","emptyState","el","current","ARROW_KEYS","Set","handleCapture","has","querySelector","stopPropagation","document","dispatchEvent","KeyboardEvent","code","bubbles","addEventListener","removeEventListener"],"sources":["DraggableList.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 { DragHandleVertical, SmallCross, Trash } from \"@blueprintjs/icons\";\nimport {\n  closestCenter,\n  DndContext as BaseDndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport {\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport classNames from \"classnames\";\nimport type { RefObject } from \"react\";\nimport React, { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport styles from \"./DraggableList.module.css\";\n\nexport interface DraggableItem {\n  id: string;\n  label: string;\n}\n\ntype RemoveIconVariant = \"trash\" | \"cross\";\n\ninterface DraggableListItemProps<T extends DraggableItem> {\n  item: T;\n  onRemove?: (id: string) => void;\n  removeIconVariant?: RemoveIconVariant;\n  renderContent?: (item: T) => React.ReactNode;\n}\n\nfunction DraggableListItem<T extends DraggableItem>({\n  item,\n  onRemove,\n  removeIconVariant = \"trash\",\n  renderContent,\n}: DraggableListItemProps<T>): React.ReactElement {\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id: item.id });\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  };\n\n  const handleRemove = useCallback(() => {\n    onRemove?.(item.id);\n  }, [item.id, onRemove]);\n\n  const RemoveIcon = removeIconVariant === \"trash\" ? Trash : SmallCross;\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={style}\n      className={styles.draggableItem}\n      data-dragging={isDragging}\n    >\n      <div\n        className={styles.dragHandle}\n        aria-label={`Reorder ${item.label}`}\n        {...attributes}\n        {...listeners}\n      >\n        <DragHandleVertical className={styles.icon} />\n      </div>\n      <div className={styles.itemContent}>\n        {renderContent ? renderContent(item) : item.label}\n      </div>\n      {onRemove && (\n        <Button\n          className={styles.removeButton}\n          onClick={handleRemove}\n          aria-label={`Remove ${item.label}`}\n        >\n          <RemoveIcon className={styles.icon} />\n        </Button>\n      )}\n    </div>\n  );\n}\n\nexport interface DraggableListProps<T extends DraggableItem> {\n  items: T[];\n  onReorder: (fromIndex: number, toIndex: number) => void;\n  onRemove: (id: string) => void;\n  removeIconVariant?: RemoveIconVariant;\n  renderContent?: (item: T) => React.ReactNode;\n  emptyMessage?: string;\n  className?: string;\n}\n\nexport function DraggableList<T extends DraggableItem>({\n  items,\n  onReorder,\n  onRemove,\n  removeIconVariant = \"cross\",\n  renderContent,\n  emptyMessage,\n  className,\n}: DraggableListProps<T>): React.ReactElement {\n  const itemIds = useMemo(() => items.map((item) => item.id), [items]);\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  );\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event;\n\n      if (over && active.id !== over.id) {\n        const oldIndex = items.findIndex((item) => item.id === active.id);\n        const newIndex = items.findIndex((item) => item.id === over.id);\n        onReorder(oldIndex, newIndex);\n      }\n    },\n    [items, onReorder],\n  );\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useKeyboardEvents(containerRef);\n\n  // TODO: Revert when @types/react is fixed\n  const DndContext = BaseDndContext as any;\n\n  return (\n    <div\n      ref={containerRef}\n      className={classNames(styles.draggableListContainer, className)}\n    >\n      <DndContext\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        onDragEnd={handleDragEnd}\n      >\n        <SortableContext\n          items={itemIds}\n          strategy={verticalListSortingStrategy}\n        >\n          {items.map((item) => (\n            <DraggableListItem<T>\n              key={item.id}\n              item={item}\n              onRemove={onRemove}\n              removeIconVariant={removeIconVariant}\n              renderContent={renderContent}\n            />\n          ))}\n        </SortableContext>\n      </DndContext>\n      {items.length === 0 && emptyMessage && (\n        <div className={styles.emptyState}>{emptyMessage}</div>\n      )}\n    </div>\n  );\n}\n\nconst useKeyboardEvents = (containerRef: RefObject<HTMLDivElement>) => {\n  // Base UI's DialogPopup calls stopPropagation on arrow key events, which\n  // prevents them from reaching @dnd-kit's document-level KeyboardSensor\n  // listener. We use a native capture-phase listener to intercept arrow keys\n  // before the dialog can swallow them, and re-dispatch them on the document\n  // so @dnd-kit can process keyboard-driven reordering.\n  useEffect(() => {\n    const el = containerRef.current;\n    if (el == null) {\n      return;\n    }\n\n    const ARROW_KEYS = new Set([\n      \"ArrowUp\",\n      \"ArrowDown\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n    ]);\n\n    function handleCapture(event: KeyboardEvent) {\n      if (!ARROW_KEYS.has(event.key)) {\n        return;\n      }\n\n      // Only intercept when a drag is active (an item has [data-dragging=\"true\"])\n      if (el!.querySelector(\"[data-dragging=\\\"true\\\"]\") == null) {\n        return;\n      }\n\n      event.stopPropagation();\n\n      document.dispatchEvent(\n        new KeyboardEvent(\"keydown\", {\n          key: event.key,\n          code: event.code,\n          bubbles: true,\n        }),\n      );\n    }\n\n    el.addEventListener(\"keydown\", handleCapture, true);\n    return () => el.removeEventListener(\"keydown\", handleCapture, true);\n  }, [containerRef]);\n};\n"],"mappings":"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","ignoreList":[]}

package/build/esm/base-components/draggable-list/DraggableList.module.css

@@ -0,0 +1,108 @@
+/*
+ * 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.
+ */
+
+.draggableListContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--osdk-draggable-item-gap);
+  overflow-y: auto;
+}
+
+.draggableItem {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-draggable-item-gap);
+  padding: var(--osdk-draggable-item-padding);
+  background-color: var(--osdk-draggable-item-bg);
+  border: var(--osdk-draggable-item-border);
+  border-radius: var(--osdk-draggable-item-border-radius);
+  width: 100%;
+  touch-action: none;
+  user-select: none;
+}
+
+.draggableItem[data-dragging="true"] {
+  opacity: 0.5;
+}
+
+.dragHandle {
+  display: flex;
+  cursor: grab;
+  color: var(--osdk-draggable-item-drag-icon-color);
+
+  &:hover {
+    color: var(--osdk-draggable-item-drag-icon-color-hover);
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--osdk-focus-outline);
+    outline-offset: var(--osdk-focus-visible-outline-offset);
+  }
+}
+
+.itemContent {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.removeButton {
+  background: none;
+  border: none;
+  padding: var(--osdk-surface-spacing);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--osdk-draggable-item-drag-icon-color);
+  border-radius: var(--osdk-surface-border-radius);
+
+  &:hover {
+    color: var(--osdk-typography-color-danger-rest);
+  }
+
+  &:active {
+    color: var(--osdk-typography-color-danger-rest);
+    background: oklch(
+      from var(--osdk-surface-background-color-danger-hover) l c h / 0.2
+    );
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--osdk-focus-outline);
+    outline-offset: var(--osdk-focus-visible-outline-offset);
+  }
+}
+
+.emptyState {
+  padding: calc(var(--osdk-surface-spacing) * 5);
+  text-align: center;
+  color: var(--osdk-typography-color-muted);
+  font-style: italic;
+}

package/build/esm/base-components/search-bar/SearchBar.js

@@ -0,0 +1,44 @@
+/*
+ * 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 { Search } from "@blueprintjs/icons";
+import classNames from "classnames";
+import React from "react";
+import styles from "./SearchBar.module.css";
+export function SearchBar({
+  value,
+  onChange,
+  placeholder = "Search",
+  "aria-label": ariaLabel,
+  className,
+  onKeyDown
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.searchBar, className)
+  }, /*#__PURE__*/React.createElement(Search, {
+    className: styles.searchIcon
+  }), /*#__PURE__*/React.createElement(Input, {
+    type: "text",
+    placeholder: placeholder,
+    "aria-label": ariaLabel ?? placeholder,
+    value: value,
+    onChange: onChange,
+    className: styles.searchInput,
+    onKeyDown: onKeyDown
+  }));
+}
+//# sourceMappingURL=SearchBar.js.map

package/build/esm/base-components/search-bar/SearchBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.js","names":["Input","Search","classNames","React","styles","SearchBar","value","onChange","placeholder","ariaLabel","className","onKeyDown","createElement","searchBar","searchIcon","type","searchInput"],"sources":["SearchBar.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 { Search } from \"@blueprintjs/icons\";\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport styles from \"./SearchBar.module.css\";\n\ninterface SearchBarProps {\n  value: string;\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  placeholder?: string;\n  \"aria-label\"?: string;\n  className?: string;\n  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n}\n\nexport function SearchBar({\n  value,\n  onChange,\n  placeholder = \"Search\",\n  \"aria-label\": ariaLabel,\n  className,\n  onKeyDown,\n}: SearchBarProps): React.ReactElement {\n  return (\n    <div className={classNames(styles.searchBar, className)}>\n      <Search className={styles.searchIcon} />\n      <Input\n        type=\"text\"\n        placeholder={placeholder}\n        aria-label={ariaLabel ?? placeholder}\n        value={value}\n        onChange={onChange}\n        className={styles.searchInput}\n        onKeyDown={onKeyDown}\n      />\n    </div>\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,KAAK,QAAQ,sBAAsB;AAC5C,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,wBAAwB;AAW3C,OAAO,SAASC,SAASA,CAAC;EACxBC,KAAK;EACLC,QAAQ;EACRC,WAAW,GAAG,QAAQ;EACtB,YAAY,EAAEC,SAAS;EACvBC,SAAS;EACTC;AACc,CAAC,EAAsB;EACrC,oBACER,KAAA,CAAAS,aAAA;IAAKF,SAAS,EAAER,UAAU,CAACE,MAAM,CAACS,SAAS,EAAEH,SAAS;EAAE,gBACtDP,KAAA,CAAAS,aAAA,CAACX,MAAM;IAACS,SAAS,EAAEN,MAAM,CAACU;EAAW,CAAE,CAAC,eACxCX,KAAA,CAAAS,aAAA,CAACZ,KAAK;IACJe,IAAI,EAAC,MAAM;IACXP,WAAW,EAAEA,WAAY;IACzB,cAAYC,SAAS,IAAID,WAAY;IACrCF,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAEA,QAAS;IACnBG,SAAS,EAAEN,MAAM,CAACY,WAAY;IAC9BL,SAAS,EAAEA;EAAU,CACtB,CACE,CAAC;AAEV","ignoreList":[]}

package/build/esm/base-components/search-bar/SearchBar.module.css

@@ -0,0 +1,53 @@
+/*
+ * 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.
+ */
+
+.searchBar {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-surface-spacing);
+  padding: var(--osdk-surface-spacing) calc(var(--osdk-surface-spacing) * 1.5);
+  border: var(--osdk-surface-border);
+  border-radius: var(--osdk-surface-border-radius);
+
+  &:focus-within {
+    outline: var(--osdk-focus-outline);
+    outline-offset: calc(-1 * var(--osdk-focus-visible-outline-offset));
+  }
+}
+
+.searchIcon {
+  width: var(--osdk-iconography-size-small);
+  height: var(--osdk-iconography-size-small);
+  color: var(--osdk-typography-color-muted);
+  pointer-events: none;
+  flex-shrink: 0;
+}
+
+.searchInput {
+  border: none;
+  width: 100%;
+  padding: var(--osdk-surface-spacing) 0;
+  font-size: var(--osdk-typography-size-body-medium);
+  background: transparent;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: var(--osdk-typography-color-muted);
+  }
+}

package/build/esm/base-components/select/Select.js

@@ -0,0 +1,89 @@
+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 { Select as BaseUISelect } from "@base-ui/react/select";
+import { CaretDown } from "@blueprintjs/icons";
+import classnames from "classnames";
+import React from "react";
+import styles from "./Select.module.css";
+function SelectRoot({
+  children,
+  ...rest
+}) {
+  return /*#__PURE__*/React.createElement(BaseUISelect.Root, rest, children);
+}
+function SelectTrigger({
+  className,
+  placeholder,
+  children,
+  ...rest
+}) {
+  return /*#__PURE__*/React.createElement(BaseUISelect.Trigger, _extends({
+    className: classnames(styles.osdkSelectTrigger, className)
+  }, rest), children ?? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseUISelect.Value, null, value => value != null ? String(value) : placeholder), /*#__PURE__*/React.createElement(BaseUISelect.Icon, {
+    className: styles.osdkSelectIcon
+  }, /*#__PURE__*/React.createElement(CaretDown, {
+    color: "currentColor"
+  }))));
+}
+function SelectValue(props) {
+  const {
+    className,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(BaseUISelect.Value, _extends({
+    className: classnames(styles.osdkSelectValue, className)
+  }, rest));
+}
+function SelectPositioner({
+  className,
+  children,
+  ...rest
+}) {
+  return /*#__PURE__*/React.createElement(BaseUISelect.Positioner, _extends({
+    className: classnames(styles.osdkSelectPositioner, className),
+    sideOffset: 4
+  }, rest), children);
+}
+function SelectPopup({
+  className,
+  children,
+  ...rest
+}) {
+  return /*#__PURE__*/React.createElement(BaseUISelect.Popup, _extends({
+    className: classnames(styles.osdkSelectPopup, className)
+  }, rest), children);
+}
+function SelectItem({
+  className,
+  children,
+  ...rest
+}) {
+  return /*#__PURE__*/React.createElement(BaseUISelect.Item, _extends({
+    className: classnames(styles.osdkSelectItem, className)
+  }, rest), /*#__PURE__*/React.createElement(BaseUISelect.ItemText, null, children));
+}
+export const Select = {
+  Root: SelectRoot,
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  Portal: BaseUISelect.Portal,
+  Positioner: SelectPositioner,
+  Popup: SelectPopup,
+  Item: SelectItem
+};
+//# sourceMappingURL=Select.js.map

package/build/esm/base-components/select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","names":["Select","BaseUISelect","CaretDown","classnames","React","styles","SelectRoot","children","rest","createElement","Root","SelectTrigger","className","placeholder","Trigger","_extends","osdkSelectTrigger","Fragment","Value","value","String","Icon","osdkSelectIcon","color","SelectValue","props","osdkSelectValue","SelectPositioner","Positioner","osdkSelectPositioner","sideOffset","SelectPopup","Popup","osdkSelectPopup","SelectItem","Item","osdkSelectItem","ItemText","Portal"],"sources":["Select.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 {\n  Select as BaseUISelect,\n  type SelectItemProps,\n  type SelectPopupProps,\n  type SelectPositionerProps,\n  type SelectRootProps,\n  type SelectTriggerProps,\n  type SelectValueProps,\n} from \"@base-ui/react/select\";\nimport { CaretDown } from \"@blueprintjs/icons\";\nimport classnames from \"classnames\";\nimport React from \"react\";\nimport styles from \"./Select.module.css\";\n\nexport interface SelectProps<Value extends string | number>\n  extends Omit<SelectRootProps<Value, false>, \"className\" | \"multiple\">\n{}\n\nfunction SelectRoot<Value extends string | number>({\n  children,\n  ...rest\n}: SelectProps<Value>): React.ReactElement {\n  return (\n    <BaseUISelect.Root<Value> {...rest}>\n      {children}\n    </BaseUISelect.Root>\n  );\n}\n\ninterface SelectTriggerComponentProps\n  extends Omit<SelectTriggerProps, \"className\">\n{\n  className?: string;\n  placeholder?: string;\n}\n\nfunction SelectTrigger({\n  className,\n  placeholder,\n  children,\n  ...rest\n}: SelectTriggerComponentProps): React.ReactElement {\n  return (\n    <BaseUISelect.Trigger\n      className={classnames(styles.osdkSelectTrigger, className)}\n      {...rest}\n    >\n      {children ?? (\n        <>\n          <BaseUISelect.Value>\n            {(value) => (value != null ? String(value) : placeholder)}\n          </BaseUISelect.Value>\n          <BaseUISelect.Icon className={styles.osdkSelectIcon}>\n            <CaretDown color=\"currentColor\" />\n          </BaseUISelect.Icon>\n        </>\n      )}\n    </BaseUISelect.Trigger>\n  );\n}\n\nfunction SelectValue(\n  props: Omit<SelectValueProps, \"className\"> & { className?: string },\n): React.ReactElement {\n  const { className, ...rest } = props;\n  return (\n    <BaseUISelect.Value\n      className={classnames(styles.osdkSelectValue, className)}\n      {...rest}\n    />\n  );\n}\n\ninterface SelectPositionerComponentProps\n  extends Omit<SelectPositionerProps, \"className\">\n{\n  className?: string;\n}\n\nfunction SelectPositioner({\n  className,\n  children,\n  ...rest\n}: SelectPositionerComponentProps): React.ReactElement {\n  return (\n    <BaseUISelect.Positioner\n      className={classnames(styles.osdkSelectPositioner, className)}\n      sideOffset={4}\n      {...rest}\n    >\n      {children}\n    </BaseUISelect.Positioner>\n  );\n}\n\ninterface SelectPopupComponentProps\n  extends Omit<SelectPopupProps, \"className\">\n{\n  className?: string;\n}\n\nfunction SelectPopup({\n  className,\n  children,\n  ...rest\n}: SelectPopupComponentProps): React.ReactElement {\n  return (\n    <BaseUISelect.Popup\n      className={classnames(styles.osdkSelectPopup, className)}\n      {...rest}\n    >\n      {children}\n    </BaseUISelect.Popup>\n  );\n}\n\ninterface SelectItemComponentProps extends Omit<SelectItemProps, \"className\"> {\n  className?: string;\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...rest\n}: SelectItemComponentProps): React.ReactElement {\n  return (\n    <BaseUISelect.Item\n      className={classnames(styles.osdkSelectItem, className)}\n      {...rest}\n    >\n      <BaseUISelect.ItemText>{children}</BaseUISelect.ItemText>\n    </BaseUISelect.Item>\n  );\n}\n\nexport const Select: {\n  Root: typeof SelectRoot;\n  Trigger: typeof SelectTrigger;\n  Value: typeof SelectValue;\n  Portal: typeof BaseUISelect.Portal;\n  Positioner: typeof SelectPositioner;\n  Popup: typeof SelectPopup;\n  Item: typeof SelectItem;\n} = {\n  Root: SelectRoot,\n  Trigger: SelectTrigger,\n  Value: SelectValue,\n  Portal: BaseUISelect.Portal,\n  Positioner: SelectPositioner,\n  Popup: SelectPopup,\n  Item: SelectItem,\n};\n"],"mappings":"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","ignoreList":[]}

package/build/esm/base-components/select/Select.module.css

@@ -0,0 +1,138 @@
+/*
+ * 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.
+ */
+
+.osdkSelectTrigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--osdk-select-spacing, var(--osdk-surface-spacing));
+  width: 100%;
+  min-height: var(--osdk-select-min-height, 30px);
+  padding: calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 1.5)
+    calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 2.5);
+  box-sizing: border-box;
+  cursor: pointer;
+  border-radius: var(--osdk-select-border-radius, var(--osdk-surface-border-radius));
+  border: var(--osdk-select-border-width, var(--osdk-surface-border-width)) solid
+    var(--osdk-select-border-color, var(--osdk-surface-border-color-default));
+  background-color: var(--osdk-select-trigger-bg, var(--osdk-surface-background-color-default-rest));
+  color: var(--osdk-select-trigger-color, var(--osdk-typography-color-default-rest));
+  font-family: var(--osdk-select-font-family, var(--osdk-typography-family-default));
+  font-size: var(--osdk-select-font-size, var(--osdk-typography-size-body-medium));
+  line-height: var(--osdk-select-line-height, var(--osdk-typography-line-height-default));
+  transition: background-color var(--osdk-select-transition-duration, var(--osdk-emphasis-transition-duration))
+      var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default)),
+    border-color var(--osdk-select-transition-duration, var(--osdk-emphasis-transition-duration))
+      var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default));
+
+  &:hover {
+    background-color: var(--osdk-select-trigger-bg-hover, var(--osdk-surface-background-color-default-hover));
+  }
+
+  &:active {
+    background-color: var(--osdk-select-trigger-bg-active, var(--osdk-surface-background-color-default-active));
+  }
+
+  &:focus-visible {
+    outline: var(--osdk-select-focus-width, var(--osdk-emphasis-focus-width)) solid
+      var(--osdk-select-focus-color, var(--osdk-emphasis-focus-color));
+    outline-offset: var(--osdk-select-focus-offset, var(--osdk-emphasis-focus-offset));
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: var(--osdk-disabled-opacity, 0.5);
+  }
+
+  &[data-popup-open] {
+    border-color: var(--osdk-select-border-color-active, var(--osdk-intent-primary-rest));
+  }
+}
+
+.osdkSelectValue {
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &[data-placeholder] {
+    color: var(--osdk-select-placeholder-color, var(--osdk-typography-color-muted));
+  }
+}
+
+.osdkSelectIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--osdk-select-icon-color, var(--osdk-iconography-color-muted));
+  flex-shrink: 0;
+  transition: transform var(--osdk-select-transition-duration, var(--osdk-emphasis-transition-duration))
+    var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default));
+
+  [data-popup-open] > & {
+    transform: rotate(180deg);
+  }
+}
+
+.osdkSelectPositioner {
+  z-index: var(--osdk-select-z-index, var(--osdk-surface-z-index-3));
+}
+
+.osdkSelectPopup {
+  display: flex;
+  flex-direction: column;
+  min-width: var(--anchor-width);
+  max-height: var(--available-height);
+  overflow-y: auto;
+  padding: calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 1.5);
+  box-sizing: border-box;
+  border-radius: var(--osdk-select-border-radius, var(--osdk-surface-border-radius));
+  border: var(--osdk-select-border-width, var(--osdk-surface-border-width)) solid
+    var(--osdk-select-border-color, var(--osdk-surface-border-color-default));
+  background-color: var(--osdk-select-popup-bg, var(--osdk-surface-background-color-default-rest));
+  box-shadow: var(--osdk-select-popup-shadow, var(--osdk-surface-shadow-2));
+}
+
+.osdkSelectItem {
+  display: flex;
+  align-items: center;
+  padding: calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 1.5)
+    calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 2);
+  border-radius: var(--osdk-select-border-radius, var(--osdk-surface-border-radius));
+  cursor: pointer;
+  font-family: var(--osdk-select-font-family, var(--osdk-typography-family-default));
+  font-size: var(--osdk-select-font-size, var(--osdk-typography-size-body-medium));
+  line-height: var(--osdk-select-line-height, var(--osdk-typography-line-height-default));
+  color: var(--osdk-select-item-color, var(--osdk-typography-color-default-rest));
+  transition: background-color var(--osdk-select-transition-duration, var(--osdk-emphasis-transition-duration))
+    var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default));
+
+  &[data-highlighted] {
+    background-color: var(--osdk-select-item-bg-highlighted, var(--osdk-surface-background-color-default-hover));
+    outline: none;
+  }
+
+  &[data-selected] {
+    background-color: var(--osdk-select-item-bg-selected, var(--osdk-surface-layer-primary));
+    color: var(--osdk-select-item-color-selected, var(--osdk-intent-primary-rest));
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: var(--osdk-disabled-opacity, 0.5);
+  }
+}