@osdk/react-components 0.2.0-beta.2 → 0.2.0-beta.21

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","color","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} color={\"currentColor\"} />\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} color={\"currentColor\"} />\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,100 @@
+/*
+ * 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: var(--osdk-drag-handle-cursor);
+  color: var(--osdk-draggable-item-drag-icon-color);
+
+  &:hover {
+    color: var(--osdk-draggable-item-drag-icon-color-hover);
+  }
+
+  &:active {
+    cursor: var(--osdk-drag-handle-cursor-active);
+  }
+
+  &: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-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,95 @@
+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("div", {
+    className: styles.osdkSelectValueContainer
+  }, /*#__PURE__*/React.createElement(BaseUISelect.Value, {
+    className: styles.osdkSelectValue
+  }), placeholder != null && /*#__PURE__*/React.createElement("span", {
+    className: styles.osdkSelectPlaceholder
+  }, 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","osdkSelectValueContainer","Value","osdkSelectValue","osdkSelectPlaceholder","Icon","osdkSelectIcon","color","SelectValue","props","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, Multiple extends boolean = false>\n  extends Omit<SelectRootProps<Value, Multiple>, \"className\">\n{}\n\nfunction SelectRoot<Value, Multiple extends boolean = false>({\n  children,\n  ...rest\n}: SelectProps<Value, Multiple>): React.ReactElement {\n  return (\n    <BaseUISelect.Root<Value, Multiple> {...rest}>{children}</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          <div className={styles.osdkSelectValueContainer}>\n            <BaseUISelect.Value className={styles.osdkSelectValue} />\n            {placeholder != null && (\n              <span className={styles.osdkSelectPlaceholder}>\n                {placeholder}\n              </span>\n            )}\n          </div>\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,235 @@
+/*
+ * 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)
+    );
+  }
+}
+
+.osdkSelectValueContainer {
+  flex: 1;
+  display: grid;
+  min-width: 0;
+
+  & > * {
+    grid-area: 1 / 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.osdkSelectValue {
+  text-align: left;
+}
+
+.osdkSelectPlaceholder {
+  text-align: left;
+  color: var(
+    --osdk-select-placeholder-color,
+    var(--osdk-typography-color-muted)
+  );
+  pointer-events: none;
+}
+
+.osdkSelectValue:not([data-placeholder]) ~ .osdkSelectPlaceholder {
+  display: none;
+}
+
+.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);
+  }
+}

package/build/esm/base-components/skeleton/SkeletonBar.js

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2026 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 from "react";
+import styles from "./SkeletonBar.module.css";
+export function SkeletonBar({
+  width,
+  height,
+  maxWidth,
+  className
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": "true",
+    className: classnames(styles.skeletonBar, className),
+    style: {
+      width,
+      height,
+      maxWidth
+    }
+  });
+}
+//# sourceMappingURL=SkeletonBar.js.map

package/build/esm/base-components/skeleton/SkeletonBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonBar.js","names":["classnames","React","styles","SkeletonBar","width","height","maxWidth","className","createElement","skeletonBar","style"],"sources":["SkeletonBar.tsx"],"sourcesContent":["/*\n * Copyright 2026 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 from \"react\";\nimport styles from \"./SkeletonBar.module.css\";\n\ninterface SkeletonBarProps {\n  width?: string | number;\n  height?: string | number;\n  maxWidth?: string | number;\n  className?: string;\n}\n\nexport function SkeletonBar({\n  width,\n  height,\n  maxWidth,\n  className,\n}: SkeletonBarProps): React.ReactElement {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={classnames(styles.skeletonBar, className)}\n      style={{ width, height, maxWidth }}\n    />\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,0BAA0B;AAS7C,OAAO,SAASC,WAAWA,CAAC;EAC1BC,KAAK;EACLC,MAAM;EACNC,QAAQ;EACRC;AACgB,CAAC,EAAsB;EACvC,oBACEN,KAAA,CAAAO,aAAA;IACE,eAAY,MAAM;IAClBD,SAAS,EAAEP,UAAU,CAACE,MAAM,CAACO,WAAW,EAAEF,SAAS,CAAE;IACrDG,KAAK,EAAE;MAAEN,KAAK;MAAEC,MAAM;MAAEC;IAAS;EAAE,CACpC,CAAC;AAEN","ignoreList":[]}

package/build/esm/base-components/skeleton/SkeletonBar.module.css

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2026 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.
+ */
+
+@keyframes skeleton-glow {
+  from {
+    background: var(--osdk-background-skeleton-from);
+  }
+
+  to {
+    background: var(--osdk-background-skeleton-to);
+  }
+}
+
+.skeletonBar {
+  animation: 1000ms linear infinite alternate skeleton-glow;
+  background: var(--osdk-background-skeleton-from);
+  border-radius: var(--osdk-surface-border-radius);
+  pointer-events: none;
+  user-select: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeletonBar {
+    animation: none;
+  }
+}