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

package/build/browser/action-form/FormHeader.module.css.js

@@ -0,0 +1,6 @@
+// CSS Module proxy for FormHeader.module.css
+const styles = {
+  "osdkFormHeader": "FormHeader-module__osdkFormHeader___CkEkQTWh"
+};
+
+export default styles;

package/build/browser/action-form/fields/DateCalendar.js

@@ -0,0 +1,70 @@
+/*
+ * 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 React, { useMemo } from "react";
+import { DayPicker } from "react-day-picker";
+import styles from "./DateCalendar.module.css.js";
+const CLASS_NAMES = {
+  root: styles.calendar,
+  months: styles.calendarMonths,
+  month_grid: styles.calendarMonthGrid,
+  weekday: styles.calendarWeekday,
+  day: styles.calendarDay,
+  day_button: styles.calendarDayButton,
+  selected: styles.calendarSelected,
+  today: styles.calendarToday,
+  outside: styles.calendarOutside,
+  disabled: styles.calendarDisabled,
+  hidden: styles.calendarHidden,
+  nav: styles.calendarNav,
+  button_previous: styles.calendarNavButton,
+  button_next: styles.calendarNavButton,
+  month_caption: styles.calendarMonthCaption,
+  caption_label: styles.calendarCaptionLabel,
+  chevron: styles.calendarChevron
+};
+export default function DateCalendar({
+  dateSelected,
+  onSelect,
+  min,
+  max,
+  footer
+}) {
+  const disabled = useMemo(() => {
+    const matchers = [];
+    if (min != null) {
+      matchers.push({
+        before: min
+      });
+    }
+    if (max != null) {
+      matchers.push({
+        after: max
+      });
+    }
+    return matchers;
+  }, [min, max]);
+  return /*#__PURE__*/React.createElement(DayPicker, {
+    mode: "single",
+    selected: dateSelected,
+    onSelect: onSelect,
+    disabled: disabled,
+    defaultMonth: dateSelected,
+    classNames: CLASS_NAMES,
+    footer: footer
+  });
+}
+//# sourceMappingURL=DateCalendar.js.map

package/build/browser/action-form/fields/DateCalendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateCalendar.js","names":["React","useMemo","DayPicker","styles","CLASS_NAMES","root","calendar","months","calendarMonths","month_grid","calendarMonthGrid","weekday","calendarWeekday","day","calendarDay","day_button","calendarDayButton","selected","calendarSelected","today","calendarToday","outside","calendarOutside","disabled","calendarDisabled","hidden","calendarHidden","nav","calendarNav","button_previous","calendarNavButton","button_next","month_caption","calendarMonthCaption","caption_label","calendarCaptionLabel","chevron","calendarChevron","DateCalendar","dateSelected","onSelect","min","max","footer","matchers","push","before","after","createElement","mode","defaultMonth","classNames"],"sources":["DateCalendar.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 React, { useMemo } from \"react\";\nimport type {\n  ClassNames,\n  DateAfter,\n  DateBefore,\n  Matcher,\n} from \"react-day-picker\";\nimport { DayPicker } from \"react-day-picker\";\nimport styles from \"./DateCalendar.module.css\";\n\nconst CLASS_NAMES: Partial<ClassNames> = {\n  root: styles.calendar,\n  months: styles.calendarMonths,\n  month_grid: styles.calendarMonthGrid,\n  weekday: styles.calendarWeekday,\n  day: styles.calendarDay,\n  day_button: styles.calendarDayButton,\n  selected: styles.calendarSelected,\n  today: styles.calendarToday,\n  outside: styles.calendarOutside,\n  disabled: styles.calendarDisabled,\n  hidden: styles.calendarHidden,\n  nav: styles.calendarNav,\n  button_previous: styles.calendarNavButton,\n  button_next: styles.calendarNavButton,\n  month_caption: styles.calendarMonthCaption,\n  caption_label: styles.calendarCaptionLabel,\n  chevron: styles.calendarChevron,\n};\n\nexport interface DateCalendarProps {\n  dateSelected: Date | undefined;\n  onSelect: (date: Date | undefined) => void;\n  min?: Date;\n  max?: Date;\n  footer?: React.ReactNode;\n}\n\nexport default function DateCalendar({\n  dateSelected,\n  onSelect,\n  min,\n  max,\n  footer,\n}: DateCalendarProps): React.ReactElement {\n  const disabled = useMemo((): Matcher[] => {\n    const matchers: Matcher[] = [];\n    if (min != null) {\n      const before: DateBefore = { before: min };\n      matchers.push(before);\n    }\n    if (max != null) {\n      const after: DateAfter = { after: max };\n      matchers.push(after);\n    }\n    return matchers;\n  }, [min, max]);\n\n  return (\n    <DayPicker\n      mode=\"single\"\n      selected={dateSelected}\n      onSelect={onSelect}\n      disabled={disabled}\n      defaultMonth={dateSelected}\n      classNames={CLASS_NAMES}\n      footer={footer}\n    />\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAOtC,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,OAAOC,MAAM,MAAM,2BAA2B;AAE9C,MAAMC,WAAgC,GAAG;EACvCC,IAAI,EAAEF,MAAM,CAACG,QAAQ;EACrBC,MAAM,EAAEJ,MAAM,CAACK,cAAc;EAC7BC,UAAU,EAAEN,MAAM,CAACO,iBAAiB;EACpCC,OAAO,EAAER,MAAM,CAACS,eAAe;EAC/BC,GAAG,EAAEV,MAAM,CAACW,WAAW;EACvBC,UAAU,EAAEZ,MAAM,CAACa,iBAAiB;EACpCC,QAAQ,EAAEd,MAAM,CAACe,gBAAgB;EACjCC,KAAK,EAAEhB,MAAM,CAACiB,aAAa;EAC3BC,OAAO,EAAElB,MAAM,CAACmB,eAAe;EAC/BC,QAAQ,EAAEpB,MAAM,CAACqB,gBAAgB;EACjCC,MAAM,EAAEtB,MAAM,CAACuB,cAAc;EAC7BC,GAAG,EAAExB,MAAM,CAACyB,WAAW;EACvBC,eAAe,EAAE1B,MAAM,CAAC2B,iBAAiB;EACzCC,WAAW,EAAE5B,MAAM,CAAC2B,iBAAiB;EACrCE,aAAa,EAAE7B,MAAM,CAAC8B,oBAAoB;EAC1CC,aAAa,EAAE/B,MAAM,CAACgC,oBAAoB;EAC1CC,OAAO,EAAEjC,MAAM,CAACkC;AAClB,CAAC;AAUD,eAAe,SAASC,YAAYA,CAAC;EACnCC,YAAY;EACZC,QAAQ;EACRC,GAAG;EACHC,GAAG;EACHC;AACiB,CAAC,EAAsB;EACxC,MAAMpB,QAAQ,GAAGtB,OAAO,CAAC,MAAiB;IACxC,MAAM2C,QAAmB,GAAG,EAAE;IAC9B,IAAIH,GAAG,IAAI,IAAI,EAAE;MAEfG,QAAQ,CAACC,IAAI,CADc;QAAEC,MAAM,EAAEL;MAAI,CACrB,CAAC;IACvB;IACA,IAAIC,GAAG,IAAI,IAAI,EAAE;MAEfE,QAAQ,CAACC,IAAI,CADY;QAAEE,KAAK,EAAEL;MAAI,CACnB,CAAC;IACtB;IACA,OAAOE,QAAQ;EACjB,CAAC,EAAE,CAACH,GAAG,EAAEC,GAAG,CAAC,CAAC;EAEd,oBACE1C,KAAA,CAAAgD,aAAA,CAAC9C,SAAS;IACR+C,IAAI,EAAC,QAAQ;IACbhC,QAAQ,EAAEsB,YAAa;IACvBC,QAAQ,EAAEA,QAAS;IACnBjB,QAAQ,EAAEA,QAAS;IACnB2B,YAAY,EAAEX,YAAa;IAC3BY,UAAU,EAAE/C,WAAY;IACxBuC,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN","ignoreList":[]}

package/build/browser/action-form/fields/DateCalendar.module.css

@@ -0,0 +1,136 @@
+/* DateCalendar — DayPicker classNames */
+
+.calendar {
+  position: relative;
+  width: 100%;
+  font-family: var(--osdk-datetime-calendar-font-family);
+  font-size: var(--osdk-datetime-calendar-font-size);
+}
+
+.calendarMonths {
+  display: flex;
+}
+
+.calendarMonthGrid {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.calendarWeekday {
+  padding: var(--osdk-datetime-calendar-gap);
+  font-size: var(--osdk-datetime-calendar-weekday-font-size);
+  color: var(--osdk-datetime-calendar-weekday-color);
+  text-align: center;
+  width: var(--osdk-datetime-calendar-cell-size);
+}
+
+.calendarDay {
+  padding: var(--osdk-datetime-calendar-gap);
+  text-align: center;
+}
+
+.calendarDayButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--osdk-datetime-calendar-cell-size);
+  height: var(--osdk-datetime-calendar-cell-size);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--osdk-datetime-calendar-day-border-radius);
+  font: inherit;
+  color: inherit;
+
+  &:hover {
+    background: var(--osdk-datetime-calendar-day-hover-bg);
+  }
+
+  &:active {
+    background: var(--osdk-datetime-calendar-day-active-bg);
+  }
+}
+
+.calendarSelected .calendarDayButton {
+  background: var(--osdk-datetime-calendar-selected-bg);
+  color: var(--osdk-datetime-calendar-selected-color);
+
+  &:hover {
+    background: var(--osdk-datetime-calendar-selected-hover-bg);
+  }
+}
+
+.calendarToday .calendarDayButton {
+  font-weight: var(--osdk-datetime-calendar-today-font-weight);
+}
+
+.calendarOutside .calendarDayButton {
+  color: var(--osdk-datetime-calendar-outside-color);
+}
+
+.calendarDisabled .calendarDayButton {
+  color: var(--osdk-datetime-calendar-disabled-color);
+  cursor: default;
+
+  &:hover {
+    background: transparent;
+  }
+}
+
+.calendarHidden {
+  visibility: hidden;
+}
+
+/* Calendar navigation */
+.calendarNav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  pointer-events: none;
+}
+
+.calendarNavButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--osdk-datetime-calendar-nav-button-size);
+  height: var(--osdk-datetime-calendar-nav-button-size);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--osdk-datetime-calendar-nav-button-border-radius);
+  padding: 0;
+  pointer-events: auto;
+
+  &:hover {
+    background: var(--osdk-datetime-calendar-nav-button-hover-bg);
+  }
+}
+
+.calendarMonthCaption {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--osdk-datetime-calendar-nav-button-size);
+}
+
+.calendarCaptionLabel {
+  font-size: var(--osdk-datetime-calendar-caption-font-size);
+  font-weight: var(--osdk-datetime-calendar-caption-font-weight);
+}
+
+.calendarChevron {
+  width: var(--osdk-datetime-calendar-chevron-size);
+  height: var(--osdk-datetime-calendar-chevron-size);
+  fill: currentColor;
+}
+
+/* Calendar fallback / loading */
+.calendarFallback {
+  width: var(--osdk-datetime-calendar-fallback-width);
+  height: var(--osdk-datetime-calendar-fallback-height);
+}

package/build/browser/action-form/fields/DateCalendar.module.css.js

@@ -0,0 +1,22 @@
+// CSS Module proxy for DateCalendar.module.css
+const styles = {
+  "calendar": "DateCalendar-module__calendar___l3nEo6Ad",
+  "calendarMonths": "DateCalendar-module__calendarMonths___lGxU5Qmt",
+  "calendarMonthGrid": "DateCalendar-module__calendarMonthGrid___EF09HyTt",
+  "calendarWeekday": "DateCalendar-module__calendarWeekday___vRgO02bB",
+  "calendarDay": "DateCalendar-module__calendarDay___sUMDmHH-",
+  "calendarDayButton": "DateCalendar-module__calendarDayButton___SoPcp9U0",
+  "calendarSelected": "DateCalendar-module__calendarSelected___I-1tOp-J",
+  "calendarToday": "DateCalendar-module__calendarToday___laVEjkhA",
+  "calendarOutside": "DateCalendar-module__calendarOutside___uEAuOUjF",
+  "calendarDisabled": "DateCalendar-module__calendarDisabled___4FOd5zD2",
+  "calendarHidden": "DateCalendar-module__calendarHidden___DMxoFqL0",
+  "calendarNav": "DateCalendar-module__calendarNav___jB5QsZfT",
+  "calendarNavButton": "DateCalendar-module__calendarNavButton___4x8m8Pg9",
+  "calendarMonthCaption": "DateCalendar-module__calendarMonthCaption___YpcqdHUV",
+  "calendarCaptionLabel": "DateCalendar-module__calendarCaptionLabel___v5rFCob9",
+  "calendarChevron": "DateCalendar-module__calendarChevron___YfBbSEGJ",
+  "calendarFallback": "DateCalendar-module__calendarFallback___6NTtjLx5"
+};
+
+export default styles;

package/build/browser/action-form/fields/DatetimePickerField.js

@@ -0,0 +1,98 @@
+/*
+ * 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 { Popover } from "@base-ui/react/popover";
+import classnames from "classnames";
+import React, { useCallback, useMemo, useState } from "react";
+import { formatDateForInput, formatDatetimeForDisplay, formatTime } from "../../shared/dateUtils.js";
+import styles from "./DatetimePickerField.module.css.js";
+import { LazyDateCalendar } from "./LazyDateCalendar.js";
+
+/** Midnight fallback so `extractTime` can reuse `formatTime` when no date is selected. */
+const DATE_ZERO = new Date(2000, 0, 1, 0, 0, 0, 0);
+function extractTime(date) {
+  return formatTime(date ?? DATE_ZERO);
+}
+export function DatetimePickerField({
+  id,
+  value,
+  onChange,
+  min,
+  max,
+  placeholder,
+  formatDate,
+  showTime = false,
+  closeOnSelection
+}) {
+  const shouldCloseOnSelection = closeOnSelection ?? !showTime;
+  const [isOpen, setIsOpen] = useState(false);
+  const formatFn = formatDate ?? (showTime ? formatDatetimeForDisplay : formatDateForInput);
+  const formattedValue = value != null ? formatFn(value) : "";
+  const handleCalendarSelect = useCallback(selected => {
+    if (selected == null) {
+      onChange?.(null);
+      return;
+    }
+    const date = new Date(selected.getTime());
+    if (showTime && value != null) {
+      date.setHours(value.getHours(), value.getMinutes());
+    }
+    onChange?.(date);
+    if (shouldCloseOnSelection) {
+      setIsOpen(false);
+    }
+  }, [onChange, showTime, value, shouldCloseOnSelection]);
+  const handleTimeChange = useCallback(timeString => {
+    const [hoursStr, minutesStr] = timeString.split(":");
+    const hours = parseInt(hoursStr ?? "0", 10);
+    const minutes = parseInt(minutesStr ?? "0", 10);
+    const base = value != null ? new Date(value.getTime()) : new Date();
+    base.setHours(hours, minutes, 0, 0);
+    onChange?.(base);
+  }, [value, onChange]);
+  const displayText = formattedValue !== "" ? formattedValue : placeholder ?? "";
+  const hasValue = formattedValue !== "";
+  const timeValue = extractTime(value);
+  const footer = useMemo(() => showTime ? /*#__PURE__*/React.createElement("div", {
+    className: styles.timeFooter
+  }, /*#__PURE__*/React.createElement(Input, {
+    type: "time",
+    value: timeValue,
+    onValueChange: handleTimeChange,
+    className: styles.timeInput,
+    "aria-label": "Time"
+  })) : undefined, [showTime, timeValue, handleTimeChange]);
+  return /*#__PURE__*/React.createElement(Popover.Root, {
+    open: isOpen,
+    onOpenChange: setIsOpen
+  }, /*#__PURE__*/React.createElement(Popover.Trigger, {
+    id: id,
+    className: classnames(styles.triggerButton, !hasValue && styles.triggerButtonPlaceholder),
+    "aria-label": hasValue ? undefined : "Select date"
+  }, displayText), /*#__PURE__*/React.createElement(Popover.Portal, null, /*#__PURE__*/React.createElement(Popover.Positioner, {
+    sideOffset: 4
+  }, /*#__PURE__*/React.createElement(Popover.Popup, {
+    className: styles.popover
+  }, /*#__PURE__*/React.createElement(LazyDateCalendar, {
+    dateSelected: value ?? undefined,
+    onSelect: handleCalendarSelect,
+    min: min,
+    max: max,
+    footer: footer
+  })))));
+}
+//# sourceMappingURL=DatetimePickerField.js.map

package/build/browser/action-form/fields/DatetimePickerField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatetimePickerField.js","names":["Input","Popover","classnames","React","useCallback","useMemo","useState","formatDateForInput","formatDatetimeForDisplay","formatTime","styles","LazyDateCalendar","DATE_ZERO","Date","extractTime","date","DatetimePickerField","id","value","onChange","min","max","placeholder","formatDate","showTime","closeOnSelection","shouldCloseOnSelection","isOpen","setIsOpen","formatFn","formattedValue","handleCalendarSelect","selected","getTime","setHours","getHours","getMinutes","handleTimeChange","timeString","hoursStr","minutesStr","split","hours","parseInt","minutes","base","displayText","hasValue","timeValue","footer","createElement","className","timeFooter","type","onValueChange","timeInput","undefined","Root","open","onOpenChange","Trigger","triggerButton","triggerButtonPlaceholder","Portal","Positioner","sideOffset","Popup","popover","dateSelected","onSelect"],"sources":["DatetimePickerField.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 { Popover } from \"@base-ui/react/popover\";\nimport classnames from \"classnames\";\nimport React, { useCallback, useMemo, useState } from \"react\";\nimport {\n  formatDateForInput,\n  formatDatetimeForDisplay,\n  formatTime,\n} from \"../../shared/dateUtils.js\";\nimport type { DatetimePickerFieldProps } from \"../FormFieldApi.js\";\nimport styles from \"./DatetimePickerField.module.css\";\nimport { LazyDateCalendar } from \"./LazyDateCalendar.js\";\n\n/** Midnight fallback so `extractTime` can reuse `formatTime` when no date is selected. */\nconst DATE_ZERO = new Date(2000, 0, 1, 0, 0, 0, 0);\n\nfunction extractTime(date: Date | null): string {\n  return formatTime(date ?? DATE_ZERO);\n}\n\nexport function DatetimePickerField({\n  id,\n  value,\n  onChange,\n  min,\n  max,\n  placeholder,\n  formatDate,\n  showTime = false,\n  closeOnSelection,\n}: DatetimePickerFieldProps): React.ReactElement {\n  const shouldCloseOnSelection = closeOnSelection ?? !showTime;\n  const [isOpen, setIsOpen] = useState(false);\n\n  const formatFn = formatDate\n    ?? (showTime ? formatDatetimeForDisplay : formatDateForInput);\n\n  const formattedValue = value != null ? formatFn(value) : \"\";\n\n  const handleCalendarSelect = useCallback(\n    (selected: Date | undefined) => {\n      if (selected == null) {\n        onChange?.(null);\n        return;\n      }\n\n      const date = new Date(selected.getTime());\n      if (showTime && value != null) {\n        date.setHours(value.getHours(), value.getMinutes());\n      }\n\n      onChange?.(date);\n\n      if (shouldCloseOnSelection) {\n        setIsOpen(false);\n      }\n    },\n    [onChange, showTime, value, shouldCloseOnSelection],\n  );\n\n  const handleTimeChange = useCallback(\n    (timeString: string) => {\n      const [hoursStr, minutesStr] = timeString.split(\":\");\n      const hours = parseInt(hoursStr ?? \"0\", 10);\n      const minutes = parseInt(minutesStr ?? \"0\", 10);\n\n      const base = value != null ? new Date(value.getTime()) : new Date();\n      base.setHours(hours, minutes, 0, 0);\n\n      onChange?.(base);\n    },\n    [value, onChange],\n  );\n\n  const displayText = formattedValue !== \"\"\n    ? formattedValue\n    : (placeholder ?? \"\");\n  const hasValue = formattedValue !== \"\";\n\n  const timeValue = extractTime(value);\n  const footer = useMemo(\n    () =>\n      showTime\n        ? (\n          <div className={styles.timeFooter}>\n            <Input\n              type=\"time\"\n              value={timeValue}\n              onValueChange={handleTimeChange}\n              className={styles.timeInput}\n              aria-label=\"Time\"\n            />\n          </div>\n        )\n        : undefined,\n    [showTime, timeValue, handleTimeChange],\n  );\n\n  return (\n    <Popover.Root open={isOpen} onOpenChange={setIsOpen}>\n      <Popover.Trigger\n        id={id}\n        className={classnames(\n          styles.triggerButton,\n          !hasValue && styles.triggerButtonPlaceholder,\n        )}\n        aria-label={hasValue ? undefined : \"Select date\"}\n      >\n        {displayText}\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner sideOffset={4}>\n          <Popover.Popup className={styles.popover}>\n            <LazyDateCalendar\n              dateSelected={value ?? undefined}\n              onSelect={handleCalendarSelect}\n              min={min}\n              max={max}\n              footer={footer}\n            />\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/build/browser/action-form/fields/DatetimePickerField.module.css

@@ -0,0 +1,66 @@
+/* DatetimePickerField — button trigger + popover + time input */
+
+/* Trigger button — styled to look like an input */
+.triggerButton {
+  width: 100%;
+  text-align: left;
+  font-family: var(--osdk-datetime-input-font-family);
+  font-size: var(--osdk-datetime-input-font-size);
+  padding: var(--osdk-datetime-input-padding);
+  border: var(--osdk-datetime-input-border);
+  border-radius: var(--osdk-datetime-input-border-radius);
+  background: var(--osdk-datetime-input-bg);
+  color: var(--osdk-datetime-input-color);
+  cursor: pointer;
+  box-sizing: border-box;
+
+  &:focus-visible {
+    border-color: var(--osdk-datetime-input-focus-border-color);
+    outline: var(--osdk-datetime-input-focus-outline);
+    outline-offset: var(--osdk-datetime-input-focus-outline-offset);
+  }
+}
+
+.triggerButtonPlaceholder {
+  color: var(--osdk-datetime-input-placeholder-color, currentColor);
+  opacity: var(--osdk-datetime-input-placeholder-opacity);
+}
+
+/* Popover */
+.popover {
+  background: var(--osdk-datetime-popover-bg);
+  padding: var(--osdk-datetime-popover-padding);
+  z-index: var(--osdk-datetime-popover-z-index);
+  border: var(--osdk-datetime-popover-border);
+  border-radius: var(--osdk-datetime-popover-border-radius);
+}
+
+/* Time input footer — negative horizontal margin counters the popover padding
+   so the border-top spans the full width of the popover. */
+.timeFooter {
+  padding-top: var(--osdk-datetime-time-padding-top);
+  padding-left: var(--osdk-datetime-popover-padding);
+  padding-right: var(--osdk-datetime-popover-padding);
+  border-top: var(--osdk-datetime-time-border-top);
+  margin-top: var(--osdk-datetime-time-padding-top);
+  margin-left: calc(var(--osdk-datetime-popover-padding) * -1);
+  margin-right: calc(var(--osdk-datetime-popover-padding) * -1);
+}
+
+.timeInput {
+  width: 100%;
+  font-family: var(--osdk-datetime-input-font-family);
+  font-size: var(--osdk-datetime-input-font-size);
+  padding: var(--osdk-datetime-input-padding);
+  border: var(--osdk-datetime-input-border);
+  border-radius: var(--osdk-datetime-input-border-radius);
+  background: var(--osdk-datetime-input-bg);
+  color: var(--osdk-datetime-input-color);
+  box-sizing: border-box;
+
+  &:focus {
+    border-color: var(--osdk-datetime-input-focus-border-color);
+    outline: var(--osdk-datetime-input-focus-outline);
+    outline-offset: var(--osdk-datetime-input-focus-outline-offset);
+  }
+}

package/build/browser/action-form/fields/DatetimePickerField.module.css.js

@@ -0,0 +1,10 @@
+// CSS Module proxy for DatetimePickerField.module.css
+const styles = {
+  "triggerButton": "DatetimePickerField-module__triggerButton___De1vGdXb",
+  "triggerButtonPlaceholder": "DatetimePickerField-module__triggerButtonPlaceholder___-sYBtL8e",
+  "popover": "DatetimePickerField-module__popover___t7Mh7CsI",
+  "timeFooter": "DatetimePickerField-module__timeFooter___A4P-iuSf",
+  "timeInput": "DatetimePickerField-module__timeInput___Qt1b6wEt"
+};
+
+export default styles;

package/build/browser/action-form/fields/FormFieldRenderer.js

@@ -16,6 +16,8 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
  */
 
 import React, { memo } from "react";
+import { FormField } from "../FormField.js";
+import { DatetimePickerField } from "./DatetimePickerField.js";
 import { DropdownField } from "./DropdownField.js";
 import { TextInputField } from "./TextInputField.js";
 const EMPTY_ITEMS = [];
@@ -30,11 +32,12 @@ export const FormFieldRenderer = /*#__PURE__*/memo(function ({
     helperText,
     helperTextPlacement
   } = fieldDefinition;
-  return /*#__PURE__*/React.createElement("div", null, label != null && /*#__PURE__*/React.createElement("label", {
-    htmlFor: fieldDefinition.fieldKey
-  }, label, isRequired === true && /*#__PURE__*/React.createElement("span", {
-    "aria-label": "required"
-  }, "*")), renderFieldComponent(fieldDefinition, value, onFieldValueChange), helperText != null && helperTextPlacement !== "tooltip" && /*#__PURE__*/React.createElement("div", null, helperText));
+  return /*#__PURE__*/React.createElement(FormField, {
+    label: label,
+    isRequired: isRequired,
+    fieldKey: fieldDefinition.fieldKey,
+    helperText: helperTextPlacement !== "tooltip" ? helperText : undefined
+  }, renderFieldComponent(fieldDefinition, value, onFieldValueChange));
 });
 function renderFieldComponent(fieldDefinition, value, onChange) {
   switch (fieldDefinition.fieldComponent) {
@@ -62,9 +65,17 @@ function renderFieldComponent(fieldDefinition, value, onChange) {
           placeholder: fieldDefinition.placeholder
         }, dropdownProps));
       }
+    case "DATETIME_PICKER":
+      return /*#__PURE__*/React.createElement(DatetimePickerField, _extends({
+        id: fieldDefinition.fieldKey,
+        placeholder: fieldDefinition.placeholder
+        // TODO: Use coerceFieldValue
+        ,
+        value: value instanceof Date ? value : null,
+        onChange: onChange
+      }, fieldDefinition.fieldComponentProps));
     case "NUMBER_INPUT":
     case "RADIO_BUTTONS":
-    case "DATETIME_PICKER":
     case "FILE_PICKER":
     case "OBJECT_SET":
     case "CUSTOM":

package/build/browser/action-form/fields/FormFieldRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldRenderer.js","names":["React","memo","DropdownField","TextInputField","EMPTY_ITEMS","FormFieldRenderer","fieldDefinition","value","onFieldValueChange","label","isRequired","helperText","helperTextPlacement","createElement","htmlFor","fieldKey","renderFieldComponent","onChange","fieldComponent","id","String","placeholder","items","dropdownProps","fieldComponentProps","_extends","assertUnreachableFieldComponent","Error"],"sources":["FormFieldRenderer.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 React, { memo } from \"react\";\nimport type { RendererFieldDefinition } from \"../FormFieldApi.js\";\nimport { DropdownField } from \"./DropdownField.js\";\nimport { TextInputField } from \"./TextInputField.js\";\n\nconst EMPTY_ITEMS: unknown[] = [];\n\nexport interface FormFieldRendererProps {\n  fieldDefinition: RendererFieldDefinition;\n  value: unknown;\n  onFieldValueChange: (value: unknown) => void;\n}\n\nexport const FormFieldRenderer: React.FC<FormFieldRendererProps> = memo(\n  function FormFieldRendererFn({\n    fieldDefinition,\n    value,\n    onFieldValueChange,\n  }: FormFieldRendererProps): React.ReactElement {\n    const { label, isRequired, helperText, helperTextPlacement } =\n      fieldDefinition;\n\n    return (\n      <div>\n        {label != null && (\n          <label htmlFor={fieldDefinition.fieldKey}>\n            {label}\n            {isRequired === true && <span aria-label=\"required\">*</span>}\n          </label>\n        )}\n        {renderFieldComponent(fieldDefinition, value, onFieldValueChange)}\n        {helperText != null && helperTextPlacement !== \"tooltip\" && (\n          <div>{helperText}</div>\n        )}\n      </div>\n    );\n  },\n);\n\nfunction renderFieldComponent(\n  fieldDefinition: RendererFieldDefinition,\n  value: unknown,\n  onChange: (value: unknown) => void,\n): React.ReactElement {\n  switch (fieldDefinition.fieldComponent) {\n    case \"TEXT_INPUT\":\n    // TODO: Render a <textarea> for TEXT_AREA instead of falling through\n    case \"TEXT_AREA\":\n      return (\n        <TextInputField\n          id={fieldDefinition.fieldKey}\n          // TODO: Use coerceFieldValue\n          value={value != null ? String(value) : \"\"}\n          onChange={onChange}\n          placeholder={fieldDefinition.placeholder}\n        />\n      );\n    case \"DROPDOWN\": {\n      const { items = EMPTY_ITEMS, ...dropdownProps } =\n        fieldDefinition.fieldComponentProps ?? {};\n      return (\n        <DropdownField\n          value={value}\n          onChange={onChange}\n          items={items}\n          placeholder={fieldDefinition.placeholder}\n          {...dropdownProps}\n        />\n      );\n    }\n    case \"NUMBER_INPUT\":\n    case \"RADIO_BUTTONS\":\n    case \"DATETIME_PICKER\":\n    case \"FILE_PICKER\":\n    case \"OBJECT_SET\":\n    case \"CUSTOM\":\n      return (\n        <div>\n          Unsupported field type: {fieldDefinition.fieldComponent}\n        </div>\n      );\n    default:\n      return assertUnreachableFieldComponent(fieldDefinition);\n  }\n}\n\nfunction assertUnreachableFieldComponent(value: never): never {\n  throw new Error(`Unhandled field component: ${String(value)}`);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AAEnC,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,cAAc,QAAQ,qBAAqB;AAEpD,MAAMC,WAAsB,GAAG,EAAE;AAQjC,OAAO,MAAMC,iBAAmD,gBAAGJ,IAAI,CACrE,UAA6B;EAC3BK,eAAe;EACfC,KAAK;EACLC;AACsB,CAAC,EAAsB;EAC7C,MAAM;IAAEC,KAAK;IAAEC,UAAU;IAAEC,UAAU;IAAEC;EAAoB,CAAC,GAC1DN,eAAe;EAEjB,oBACEN,KAAA,CAAAa,aAAA,cACGJ,KAAK,IAAI,IAAI,iBACZT,KAAA,CAAAa,aAAA;IAAOC,OAAO,EAAER,eAAe,CAACS;EAAS,GACtCN,KAAK,EACLC,UAAU,KAAK,IAAI,iBAAIV,KAAA,CAAAa,aAAA;IAAM,cAAW;EAAU,GAAC,GAAO,CACtD,CACR,EACAG,oBAAoB,CAACV,eAAe,EAAEC,KAAK,EAAEC,kBAAkB,CAAC,EAChEG,UAAU,IAAI,IAAI,IAAIC,mBAAmB,KAAK,SAAS,iBACtDZ,KAAA,CAAAa,aAAA,cAAMF,UAAgB,CAErB,CAAC;AAEV,CACF,CAAC;AAED,SAASK,oBAAoBA,CAC3BV,eAAwC,EACxCC,KAAc,EACdU,QAAkC,EACd;EACpB,QAAQX,eAAe,CAACY,cAAc;IACpC,KAAK,YAAY;IACjB;IACA,KAAK,WAAW;MACd,oBACElB,KAAA,CAAAa,aAAA,CAACV,cAAc;QACbgB,EAAE,EAAEb,eAAe,CAACS;QACpB;QAAA;QACAR,KAAK,EAAEA,KAAK,IAAI,IAAI,GAAGa,MAAM,CAACb,KAAK,CAAC,GAAG,EAAG;QAC1CU,QAAQ,EAAEA,QAAS;QACnBI,WAAW,EAAEf,eAAe,CAACe;MAAY,CAC1C,CAAC;IAEN,KAAK,UAAU;MAAE;QACf,MAAM;UAAEC,KAAK,GAAGlB,WAAW;UAAE,GAAGmB;QAAc,CAAC,GAC7CjB,eAAe,CAACkB,mBAAmB,IAAI,CAAC,CAAC;QAC3C,oBACExB,KAAA,CAAAa,aAAA,CAACX,aAAa,EAAAuB,QAAA;UACZlB,KAAK,EAAEA,KAAM;UACbU,QAAQ,EAAEA,QAAS;UACnBK,KAAK,EAAEA,KAAM;UACbD,WAAW,EAAEf,eAAe,CAACe;QAAY,GACrCE,aAAa,CAClB,CAAC;MAEN;IACA,KAAK,cAAc;IACnB,KAAK,eAAe;IACpB,KAAK,iBAAiB;IACtB,KAAK,aAAa;IAClB,KAAK,YAAY;IACjB,KAAK,QAAQ;MACX,oBACEvB,KAAA,CAAAa,aAAA,cAAK,0BACqB,EAACP,eAAe,CAACY,cACtC,CAAC;IAEV;MACE,OAAOQ,+BAA+B,CAACpB,eAAe,CAAC;EAC3D;AACF;AAEA,SAASoB,+BAA+BA,CAACnB,KAAY,EAAS;EAC5D,MAAM,IAAIoB,KAAK,CAAC,8BAA8BP,MAAM,CAACb,KAAK,CAAC,EAAE,CAAC;AAChE","ignoreList":[]}
+{"version":3,"file":"FormFieldRenderer.js","names":["React","memo","FormField","DatetimePickerField","DropdownField","TextInputField","EMPTY_ITEMS","FormFieldRenderer","fieldDefinition","value","onFieldValueChange","label","isRequired","helperText","helperTextPlacement","createElement","fieldKey","undefined","renderFieldComponent","onChange","fieldComponent","id","String","placeholder","items","dropdownProps","fieldComponentProps","_extends","Date","assertUnreachableFieldComponent","Error"],"sources":["FormFieldRenderer.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 React, { memo } from \"react\";\nimport { FormField } from \"../FormField.js\";\nimport type { RendererFieldDefinition } from \"../FormFieldApi.js\";\nimport { DatetimePickerField } from \"./DatetimePickerField.js\";\nimport { DropdownField } from \"./DropdownField.js\";\nimport { TextInputField } from \"./TextInputField.js\";\n\nconst EMPTY_ITEMS: unknown[] = [];\n\nexport interface FormFieldRendererProps {\n  fieldDefinition: RendererFieldDefinition;\n  value: unknown;\n  onFieldValueChange: (value: unknown) => void;\n}\n\nexport const FormFieldRenderer: React.FC<FormFieldRendererProps> = memo(\n  function FormFieldRendererFn({\n    fieldDefinition,\n    value,\n    onFieldValueChange,\n  }: FormFieldRendererProps): React.ReactElement {\n    const { label, isRequired, helperText, helperTextPlacement } =\n      fieldDefinition;\n\n    return (\n      <FormField\n        label={label}\n        isRequired={isRequired}\n        fieldKey={fieldDefinition.fieldKey}\n        helperText={helperTextPlacement !== \"tooltip\" ? helperText : undefined}\n      >\n        {renderFieldComponent(fieldDefinition, value, onFieldValueChange)}\n      </FormField>\n    );\n  },\n);\n\nfunction renderFieldComponent(\n  fieldDefinition: RendererFieldDefinition,\n  value: unknown,\n  onChange: (value: unknown) => void,\n): React.ReactElement {\n  switch (fieldDefinition.fieldComponent) {\n    case \"TEXT_INPUT\":\n    // TODO: Render a <textarea> for TEXT_AREA instead of falling through\n    case \"TEXT_AREA\":\n      return (\n        <TextInputField\n          id={fieldDefinition.fieldKey}\n          // TODO: Use coerceFieldValue\n          value={value != null ? String(value) : \"\"}\n          onChange={onChange}\n          placeholder={fieldDefinition.placeholder}\n        />\n      );\n    case \"DROPDOWN\": {\n      const { items = EMPTY_ITEMS, ...dropdownProps } =\n        fieldDefinition.fieldComponentProps ?? {};\n      return (\n        <DropdownField\n          value={value}\n          onChange={onChange}\n          items={items}\n          placeholder={fieldDefinition.placeholder}\n          {...dropdownProps}\n        />\n      );\n    }\n    case \"DATETIME_PICKER\":\n      return (\n        <DatetimePickerField\n          id={fieldDefinition.fieldKey}\n          placeholder={fieldDefinition.placeholder}\n          // TODO: Use coerceFieldValue\n          value={value instanceof Date ? value : null}\n          onChange={onChange}\n          {...fieldDefinition.fieldComponentProps}\n        />\n      );\n    case \"NUMBER_INPUT\":\n    case \"RADIO_BUTTONS\":\n    case \"FILE_PICKER\":\n    case \"OBJECT_SET\":\n    case \"CUSTOM\":\n      return <div>Unsupported field type: {fieldDefinition.fieldComponent}\n      </div>;\n    default:\n      return assertUnreachableFieldComponent(fieldDefinition);\n  }\n}\n\nfunction assertUnreachableFieldComponent(value: never): never {\n  throw new Error(`Unhandled field component: ${String(value)}`);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,SAASC,mBAAmB,QAAQ,0BAA0B;AAC9D,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,cAAc,QAAQ,qBAAqB;AAEpD,MAAMC,WAAsB,GAAG,EAAE;AAQjC,OAAO,MAAMC,iBAAmD,gBAAGN,IAAI,CACrE,UAA6B;EAC3BO,eAAe;EACfC,KAAK;EACLC;AACsB,CAAC,EAAsB;EAC7C,MAAM;IAAEC,KAAK;IAAEC,UAAU;IAAEC,UAAU;IAAEC;EAAoB,CAAC,GAC1DN,eAAe;EAEjB,oBACER,KAAA,CAAAe,aAAA,CAACb,SAAS;IACRS,KAAK,EAAEA,KAAM;IACbC,UAAU,EAAEA,UAAW;IACvBI,QAAQ,EAAER,eAAe,CAACQ,QAAS;IACnCH,UAAU,EAAEC,mBAAmB,KAAK,SAAS,GAAGD,UAAU,GAAGI;EAAU,GAEtEC,oBAAoB,CAACV,eAAe,EAAEC,KAAK,EAAEC,kBAAkB,CACvD,CAAC;AAEhB,CACF,CAAC;AAED,SAASQ,oBAAoBA,CAC3BV,eAAwC,EACxCC,KAAc,EACdU,QAAkC,EACd;EACpB,QAAQX,eAAe,CAACY,cAAc;IACpC,KAAK,YAAY;IACjB;IACA,KAAK,WAAW;MACd,oBACEpB,KAAA,CAAAe,aAAA,CAACV,cAAc;QACbgB,EAAE,EAAEb,eAAe,CAACQ;QACpB;QAAA;QACAP,KAAK,EAAEA,KAAK,IAAI,IAAI,GAAGa,MAAM,CAACb,KAAK,CAAC,GAAG,EAAG;QAC1CU,QAAQ,EAAEA,QAAS;QACnBI,WAAW,EAAEf,eAAe,CAACe;MAAY,CAC1C,CAAC;IAEN,KAAK,UAAU;MAAE;QACf,MAAM;UAAEC,KAAK,GAAGlB,WAAW;UAAE,GAAGmB;QAAc,CAAC,GAC7CjB,eAAe,CAACkB,mBAAmB,IAAI,CAAC,CAAC;QAC3C,oBACE1B,KAAA,CAAAe,aAAA,CAACX,aAAa,EAAAuB,QAAA;UACZlB,KAAK,EAAEA,KAAM;UACbU,QAAQ,EAAEA,QAAS;UACnBK,KAAK,EAAEA,KAAM;UACbD,WAAW,EAAEf,eAAe,CAACe;QAAY,GACrCE,aAAa,CAClB,CAAC;MAEN;IACA,KAAK,iBAAiB;MACpB,oBACEzB,KAAA,CAAAe,aAAA,CAACZ,mBAAmB,EAAAwB,QAAA;QAClBN,EAAE,EAAEb,eAAe,CAACQ,QAAS;QAC7BO,WAAW,EAAEf,eAAe,CAACe;QAC7B;QAAA;QACAd,KAAK,EAAEA,KAAK,YAAYmB,IAAI,GAAGnB,KAAK,GAAG,IAAK;QAC5CU,QAAQ,EAAEA;MAAS,GACfX,eAAe,CAACkB,mBAAmB,CACxC,CAAC;IAEN,KAAK,cAAc;IACnB,KAAK,eAAe;IACpB,KAAK,aAAa;IAClB,KAAK,YAAY;IACjB,KAAK,QAAQ;MACX,oBAAO1B,KAAA,CAAAe,aAAA,cAAK,0BAAwB,EAACP,eAAe,CAACY,cAChD,CAAC;IACR;MACE,OAAOS,+BAA+B,CAACrB,eAAe,CAAC;EAC3D;AACF;AAEA,SAASqB,+BAA+BA,CAACpB,KAAY,EAAS;EAC5D,MAAM,IAAIqB,KAAK,CAAC,8BAA8BR,MAAM,CAACb,KAAK,CAAC,EAAE,CAAC;AAChE","ignoreList":[]}

package/build/browser/action-form/fields/LazyDateCalendar.js

@@ -0,0 +1,27 @@
+/*
+ * 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 React, { Suspense } from "react";
+import styles from "./DateCalendar.module.css.js";
+const DateCalendarLazy = /*#__PURE__*/React.lazy(() => import("./DateCalendar.js"));
+export function LazyDateCalendar(props) {
+  return /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement("div", {
+      className: styles.calendarFallback
+    })
+  }, /*#__PURE__*/React.createElement(DateCalendarLazy, props));
+}
+//# sourceMappingURL=LazyDateCalendar.js.map

package/build/browser/action-form/fields/LazyDateCalendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LazyDateCalendar.js","names":["React","Suspense","styles","DateCalendarLazy","lazy","LazyDateCalendar","props","createElement","fallback","className","calendarFallback"],"sources":["LazyDateCalendar.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 React, { Suspense } from \"react\";\nimport type { DateCalendarProps } from \"./DateCalendar.js\";\nimport styles from \"./DateCalendar.module.css\";\n\nconst DateCalendarLazy = React.lazy(() => import(\"./DateCalendar.js\"));\n\nexport function LazyDateCalendar(props: DateCalendarProps): React.ReactElement {\n  return (\n    <Suspense fallback={<div className={styles.calendarFallback} />}>\n      <DateCalendarLazy {...props} />\n    </Suspense>\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,OAAOC,MAAM,MAAM,2BAA2B;AAE9C,MAAMC,gBAAgB,gBAAGH,KAAK,CAACI,IAAI,CAAC,MAAM,MAAM,CAAC,mBAAmB,CAAC,CAAC;AAEtE,OAAO,SAASC,gBAAgBA,CAACC,KAAwB,EAAsB;EAC7E,oBACEN,KAAA,CAAAO,aAAA,CAACN,QAAQ;IAACO,QAAQ,eAAER,KAAA,CAAAO,aAAA;MAAKE,SAAS,EAAEP,MAAM,CAACQ;IAAiB,CAAE;EAAE,gBAC9DV,KAAA,CAAAO,aAAA,CAACJ,gBAAgB,EAAKG,KAAQ,CACtB,CAAC;AAEf","ignoreList":[]}

package/build/browser/action-form/fields/TextInputField.js

@@ -16,6 +16,7 @@
 
 import { Input } from "@base-ui/react/input";
 import React from "react";
+import styles from "./TextInputField.module.css.js";
 export function TextInputField({
   id,
   value,
@@ -26,6 +27,7 @@ export function TextInputField({
 }) {
   return /*#__PURE__*/React.createElement(Input, {
     id: id,
+    className: styles.osdkTextInput,
     type: "text",
     value: value ?? "",
     onValueChange: onChange,

package/build/browser/action-form/fields/TextInputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInputField.js","names":["Input","React","TextInputField","id","value","onChange","placeholder","minLength","maxLength","createElement","type","onValueChange"],"sources":["TextInputField.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 React from \"react\";\nimport type { TextInputFieldProps } from \"../FormFieldApi.js\";\n\nexport function TextInputField({\n  id,\n  value,\n  onChange,\n  placeholder,\n  minLength,\n  maxLength,\n}: TextInputFieldProps & { id?: string }): React.ReactElement {\n  return (\n    <Input\n      id={id}\n      type=\"text\"\n      value={value ?? \"\"}\n      onValueChange={onChange}\n      placeholder={placeholder}\n      minLength={minLength}\n      maxLength={maxLength}\n    />\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,OAAOC,KAAK,MAAM,OAAO;AAGzB,OAAO,SAASC,cAAcA,CAAC;EAC7BC,EAAE;EACFC,KAAK;EACLC,QAAQ;EACRC,WAAW;EACXC,SAAS;EACTC;AACqC,CAAC,EAAsB;EAC5D,oBACEP,KAAA,CAAAQ,aAAA,CAACT,KAAK;IACJG,EAAE,EAAEA,EAAG;IACPO,IAAI,EAAC,MAAM;IACXN,KAAK,EAAEA,KAAK,IAAI,EAAG;IACnBO,aAAa,EAAEN,QAAS;IACxBC,WAAW,EAAEA,WAAY;IACzBC,SAAS,EAAEA,SAAU;IACrBC,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN","ignoreList":[]}
+{"version":3,"file":"TextInputField.js","names":["Input","React","styles","TextInputField","id","value","onChange","placeholder","minLength","maxLength","createElement","className","osdkTextInput","type","onValueChange"],"sources":["TextInputField.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 React from \"react\";\nimport type { TextInputFieldProps } from \"../FormFieldApi.js\";\nimport styles from \"./TextInputField.module.css\";\n\nexport function TextInputField({\n  id,\n  value,\n  onChange,\n  placeholder,\n  minLength,\n  maxLength,\n}: TextInputFieldProps & { id?: string }): React.ReactElement {\n  return (\n    <Input\n      id={id}\n      className={styles.osdkTextInput}\n      type=\"text\"\n      value={value ?? \"\"}\n      onValueChange={onChange}\n      placeholder={placeholder}\n      minLength={minLength}\n      maxLength={maxLength}\n    />\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,OAAOC,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,6BAA6B;AAEhD,OAAO,SAASC,cAAcA,CAAC;EAC7BC,EAAE;EACFC,KAAK;EACLC,QAAQ;EACRC,WAAW;EACXC,SAAS;EACTC;AACqC,CAAC,EAAsB;EAC5D,oBACER,KAAA,CAAAS,aAAA,CAACV,KAAK;IACJI,EAAE,EAAEA,EAAG;IACPO,SAAS,EAAET,MAAM,CAACU,aAAc;IAChCC,IAAI,EAAC,MAAM;IACXR,KAAK,EAAEA,KAAK,IAAI,EAAG;IACnBS,aAAa,EAAER,QAAS;IACxBC,WAAW,EAAEA,WAAY;IACzBC,SAAS,EAAEA,SAAU;IACrBC,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN","ignoreList":[]}

package/build/browser/action-form/fields/TextInputField.module.css

@@ -0,0 +1,56 @@
+/*
+ * 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.
+ */
+
+.osdkTextInput {
+  display: block;
+  width: 100%;
+  min-height: var(--osdk-input-min-height);
+  padding: var(--osdk-input-padding);
+  border-radius: var(--osdk-input-border-radius);
+  border: var(--osdk-input-border-width) solid var(--osdk-input-border-color);
+  background-color: var(--osdk-input-bg);
+  color: var(--osdk-input-color);
+  font-family: var(--osdk-input-font-family);
+  font-size: var(--osdk-input-font-size);
+  line-height: var(
+    --osdk-input-line-height,
+    var(--osdk-typography-line-height-default)
+  );
+  transition:
+    background-color var(--osdk-input-transition-duration)
+      var(--osdk-input-transition-ease),
+    border-color var(--osdk-input-transition-duration)
+      var(--osdk-input-transition-ease);
+
+  &::placeholder {
+    color: var(--osdk-input-placeholder-color);
+  }
+
+  &:hover {
+    background-color: var(--osdk-input-bg-hover);
+  }
+
+  &:focus-visible {
+    outline: var(--osdk-input-focus-width) solid var(--osdk-input-focus-color);
+    outline-offset: var(--osdk-input-focus-offset);
+    border-color: var(--osdk-input-border-color-focus);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--osdk-input-disabled-opacity);
+  }
+}