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

package/build/esm/action-form/FormFieldApi.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldApi.js","names":[],"sources":["FormFieldApi.ts"],"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 type {\n  ActionDefinition,\n  CompileTimeMetadata,\n  ObjectSet,\n  ObjectTypeDefinition,\n} from \"@osdk/api\";\nimport type React from \"react\";\n\n/**\n * A form field definition specifies configuration for a single field\n */\nexport interface FormFieldDefinition<\n  Q extends ActionDefinition<unknown>,\n  K extends FieldKey<Q> = FieldKey<Q>,\n  V extends FieldValueType<Q, K> = FieldValueType<Q, K>,\n  C extends ValidFormFieldForPropertyType<V> = ValidFormFieldForPropertyType<V>,\n> {\n  /**\n   * The field's unique key\n   */\n  fieldKey: K;\n\n  /**\n   * Display label for the field\n   * If not provided, the form field will not show any label.\n   */\n  label?: string;\n\n  /**\n   * Current value of the field\n   * If provided, the field operates in controlled mode\n   */\n  value?: V;\n\n  /**\n   * Default value of the field\n   */\n  defaultValue?: V;\n\n  /**\n   * The form field component type to render\n   */\n  fieldComponent: C;\n\n  /**\n   * Whether the field is required\n   */\n  isRequired?: boolean;\n\n  /**\n   * Placeholder text\n   */\n  placeholder?: string;\n\n  /**\n   * Additional information to display on this field\n   * The placement of helper text depends on the value of helperTextPlacement prop\n   */\n  helperText?: string;\n\n  /**\n   * The placement of the helper text either below the field or in a tooltip\n   *\n   * @default \"tooltip\"\n   */\n  helperTextPlacement?: \"bottom\" | \"tooltip\";\n\n  /**\n   * Whether the field is disabled\n   */\n  isDisabled?: boolean;\n\n  /**\n   * A callback to return a custom error message if validation failed\n   *\n   * @param validationRule the validation rule that failed with the error message\n   * @returns the error message to display\n   */\n  onValidationError?: (error: ValidationError) => string;\n\n  /**\n   * Additional function to validate the field\n   *\n   * @param value the current field value\n   * @returns a boolean promise indicating whether the value is valid\n   */\n  validate?: (value: V) => Promise<boolean>;\n\n  /**\n   * The component props for the form field\n   * Excludes runtime props (key, onChange) which are managed by ActionForm\n   */\n  fieldComponentProps?: Omit<FormFieldPropsByType[C], \"key\" | \"onChange\">;\n}\n\ntype ValidationError = { type: ValidationRule; error: string };\n\ntype ValidationRule =\n  | \"required\"\n  | \"min\"\n  | \"max\"\n  | \"minLength\"\n  | \"maxLength\"\n  | \"pattern\"\n  | \"validate\";\n\n/**\n * Maps field types to their corresponding props\n */\nexport interface FormFieldPropsByType {\n  DATETIME_PICKER: DatetimePickerFieldProps;\n  DROPDOWN: DropdownFieldProps<unknown>;\n  FILE_PICKER: FilePickerProps;\n  NUMBER_INPUT: NumberInputFieldProps;\n  OBJECT_SET: ObjectSetFieldProps<ObjectTypeDefinition>;\n  RADIO_BUTTONS: RadioButtonsFieldProps<unknown>;\n  TEXT_AREA: TextAreaFieldProps;\n  TEXT_INPUT: TextInputFieldProps;\n  CUSTOM: CustomFieldProps<unknown>;\n}\n\n/**\n * Datetime picker field props\n */\nexport interface DatetimePickerFieldProps extends BaseFormFieldProps<Date> {\n  fieldComponent: \"DATETIME_PICKER\";\n\n  /**\n   * The earliest date the user can select\n   * If provided, this will be added to the field validation\n   */\n  min?: Date;\n\n  /**\n   * The latest date the user can select\n   * If provided, this will be added to the field validation\n   */\n  max?: Date;\n\n  /**\n   * Whether to show time picker\n   */\n  showTime?: boolean;\n\n  /**\n   * Function to format the date string\n   */\n  formatDate?: (date: Date) => string;\n}\n\n/**\n * Dropdown field props with selectable options\n */\nexport interface DropdownFieldProps<V, IsMulti extends boolean = false>\n  extends BaseFormFieldProps<IsMulti extends true ? V[] : V>\n{\n  fieldComponent: \"DROPDOWN\";\n\n  /**\n   * Available options for the dropdown\n   */\n  options: Option<V>[];\n\n  /**\n   * Whether the dropdown allows searching/filtering\n   */\n  isSearchable?: boolean;\n\n  /**\n   * Whether multiple values can be selected\n   */\n  isMulti?: boolean;\n}\n\nexport interface FilePickerProps extends BaseFormFieldProps<File | File[]> {\n  fieldComponent: \"FILE_PICKER\";\n\n  /**\n   * Whether multiple files can be selected\n   */\n  isMulti?: boolean;\n\n  /**\n   * Accepted file types (e.g., \"image/*\", \".pdf\")\n   */\n  accept?: string | string[];\n\n  /**\n   * Maximum file size in bytes\n   */\n  maxSize?: number;\n}\n\n/**\n * Text area field props\n */\nexport interface TextAreaFieldProps extends\n  BaseFormFieldProps<string>,\n  Pick<\n    React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    | \"rows\"\n    | \"wrap\"\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"minLength\"\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"maxLength\"\n  >\n{\n  fieldComponent: \"TEXT_AREA\";\n}\n\nexport interface TextInputFieldProps extends\n  BaseFormFieldProps<string>,\n  Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"minLength\"\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"maxLength\"\n  >\n{\n  fieldComponent: \"TEXT_INPUT\";\n}\n\n/**\n * Number input field props\n */\nexport interface NumberInputFieldProps extends\n  BaseFormFieldProps<number>,\n  Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"min\"\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"max\"\n    | \"step\"\n  >\n{\n  fieldComponent: \"NUMBER_INPUT\";\n}\n\n/**\n * Radio buttons field props\n */\nexport interface RadioButtonsFieldProps<V> extends BaseFormFieldProps<V> {\n  fieldComponent: \"RADIO_BUTTONS\";\n\n  /**\n   * Available options for radio buttons\n   */\n  options: Option<V>[];\n}\n\n/**\n * Option interface for dropdown and radio options\n */\nexport interface Option<V> {\n  label: string;\n  value: V;\n}\n\n/**\n * Object set field displays the summary of the count of the given object set\n */\nexport interface ObjectSetFieldProps<T extends ObjectTypeDefinition>\n  extends BaseFormFieldProps<ObjectSet<T>>\n{\n  fieldComponent: \"OBJECT_SET\";\n}\n\n/**\n * Custom field props for user-defined renderers\n */\nexport interface CustomFieldProps<V> extends BaseFormFieldProps<V> {\n  fieldComponent: \"CUSTOM\";\n\n  /**\n   * Custom renderer function\n   */\n  customRenderer: (props: BaseFormFieldProps<V>) => React.ReactNode;\n}\n\nexport interface BaseFormFieldProps<V> {\n  fieldComponent: FieldComponent;\n\n  /**\n   * Called when the field value changed.\n   *\n   * ActionForm internally wraps this to pass the key to onFieldValueChanged:\n   * ```\n   * <DropdownField\n   *   {...fieldDef}\n   *   onChange={(value) => onFieldValueChanged(fieldDef.key, value)}\n   * />\n   * ```\n   *\n   * @param value The new value of the form field\n   */\n  onChange?: (value?: V) => void;\n}\n\nexport type FieldKey<Q extends ActionDefinition<unknown>> =\n  keyof ActionParameters<Q>;\n\n/**\n * Extracts parameters from an ActionDefinition\n */\nexport type ActionParameters<Q extends ActionDefinition<unknown>> =\n  CompileTimeMetadata<Q>[\"parameters\"];\n\n/**\n * Extracts the value type for a specific parameter\n */\nexport type FieldValueType<\n  Q extends ActionDefinition<unknown> = ActionDefinition<unknown>,\n  K extends keyof ActionParameters<Q> = keyof ActionParameters<Q>,\n> = ActionParameters<Q>[K][\"type\"];\n\n/**\n * Available form field component types\n */\nexport type FieldComponent =\n  | \"DATETIME_PICKER\"\n  | \"DROPDOWN\"\n  | \"FILE_PICKER\"\n  | \"NUMBER_INPUT\"\n  | \"RADIO_BUTTONS\"\n  | \"OBJECT_SET\"\n  | \"TEXT_AREA\"\n  | \"TEXT_INPUT\"\n  | \"CUSTOM\";\n\n/**\n * Gets valid form field types for a given property type\n */\nexport type ValidFormFieldForPropertyType<P extends FieldValueType> = P extends\n  \"objectSet\" ? \"OBJECT_SET\"\n  : P extends \"object\" ? \"DROPDOWN\"\n  : P extends \"mediaReference\" | \"attachment\" ? \"FILE_PICKER\"\n  : P extends \"boolean\" ? \"RADIO_BUTTONS\" | \"DROPDOWN\"\n  : P extends \"string\" ? \"TEXT_INPUT\" | \"TEXT_AREA\"\n  : P extends \"datetime\" | \"timestamp\" ? \"DATETIME_PICKER\"\n  : P extends\n    | \"double\"\n    | \"integer\"\n    | \"long\"\n    | \"float\"\n    | \"short\"\n    | \"byte\"\n    | \"decimal\" ? \"NUMBER_INPUT\"\n  : never;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"FormFieldApi.js","names":[],"sources":["FormFieldApi.ts"],"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 type {\n  ActionDefinition,\n  ActionMetadata,\n  ActionParam,\n  CompileTimeMetadata,\n  DataValueClientToWire,\n  ObjectSet,\n  ObjectTypeDefinition,\n} from \"@osdk/api\";\nimport type React from \"react\";\n\n/**\n * A form field definition specifies configuration for a single field\n */\nexport interface FormFieldDefinition<\n  Q extends ActionDefinition<unknown>,\n  K extends FieldKey<Q> = FieldKey<Q>,\n> {\n  /**\n   * The field's unique key\n   */\n  fieldKey: K;\n\n  /**\n   * Display label for the field\n   */\n  label: string;\n\n  /**\n   * Default value of the field\n   */\n  defaultValue?: FieldValueType<Q, K>;\n\n  /**\n   * The form field component type to render\n   */\n  fieldComponent: ValidFormFieldForPropertyType<FieldDescriptorType<Q, K>>;\n\n  /**\n   * Whether the field is required\n   */\n  isRequired?: boolean;\n\n  /**\n   * Placeholder text\n   */\n  placeholder?: string;\n\n  /**\n   * Additional information to display on this field\n   * The placement of helper text depends on the value of helperTextPlacement prop\n   */\n  helperText?: string;\n\n  /**\n   * The placement of the helper text either below the field or in a tooltip\n   *\n   * @default \"tooltip\"\n   */\n  helperTextPlacement?: \"bottom\" | \"tooltip\";\n\n  /**\n   * Whether the field is disabled\n   */\n  isDisabled?: boolean;\n\n  /**\n   * A callback to return a custom error message if validation failed\n   *\n   * @param validationRule the validation rule that failed with the error message\n   * @returns the error message to display\n   */\n  onValidationError?: (error: ValidationError) => string;\n\n  /**\n   * Additional function to validate the field\n   *\n   * @param value the current field value\n   * @returns a boolean promise indicating whether the value is valid\n   */\n  validate?: (value: FieldValueType<Q, K>) => Promise<boolean>;\n\n  /**\n   * The component props for the form field\n   * Excludes runtime props (value, onChange) which are managed by ActionForm\n   */\n  fieldComponentProps: Omit<\n    FormFieldPropsByType[\n      ValidFormFieldForPropertyType<\n        FieldDescriptorType<Q, K>\n      >\n    ],\n    \"value\" | \"onChange\"\n  >;\n}\n\ntype ValidationError = { type: ValidationRule; error: string };\n\ntype ValidationRule =\n  | \"required\"\n  | \"min\"\n  | \"max\"\n  | \"minLength\"\n  | \"maxLength\"\n  | \"pattern\"\n  | \"validate\";\n\n/**\n * Maps field types to their corresponding props\n */\nexport interface FormFieldPropsByType {\n  DATETIME_PICKER: DatetimePickerFieldProps;\n  DROPDOWN: DropdownFieldProps<unknown, boolean>;\n  FILE_PICKER: FilePickerProps;\n  NUMBER_INPUT: NumberInputFieldProps;\n  OBJECT_SET: ObjectSetFieldProps<ObjectTypeDefinition>;\n  RADIO_BUTTONS: RadioButtonsFieldProps<unknown>;\n  TEXT_AREA: TextAreaFieldProps;\n  TEXT_INPUT: TextInputFieldProps;\n  CUSTOM: CustomFieldProps<unknown>;\n}\n\n/**\n * Datetime picker field props.\n *\n * When `formatDate` is omitted, ISO-like format is used (YYYY-MM-DD / YYYY-MM-DD HH:mm).\n */\nexport interface DatetimePickerFieldProps extends BaseFormFieldProps<Date> {\n  /**\n   * The earliest date the user can select.\n   * If provided, this will be added to the field validation.\n   */\n  min?: Date;\n\n  /**\n   * The latest date the user can select.\n   * If provided, this will be added to the field validation.\n   */\n  max?: Date;\n\n  /**\n   * Whether to show time picker.\n   */\n  showTime?: boolean;\n\n  /**\n   * Whether to close the popover after selecting a date.\n   * @default true when `showTime` is false, false when `showTime` is true\n   */\n  closeOnSelection?: boolean;\n\n  /**\n   * Placeholder text shown when no value is selected.\n   */\n  placeholder?: string;\n\n  /** Formats a Date for display in the trigger button. */\n  formatDate?: (date: Date) => string;\n}\n\n/**\n * Dropdown field props with selectable items\n */\nexport interface DropdownFieldProps<V, Multiple extends boolean = false>\n  extends BaseFormFieldProps<Multiple extends true ? V[] : V>\n{\n  /**\n   * Available items for the dropdown\n   */\n  items: V[];\n\n  /**\n   * Converts an item to a display string. Defaults to `String()`.\n   */\n  itemToStringLabel?: (item: V) => string;\n\n  /**\n   * Returns a unique string key for a list item. Used as the React `key`.\n   * Falls back to the item's index when not provided.\n   */\n  itemToKey?: (item: V) => string;\n\n  /**\n   * Custom equality check for item values. Defaults to `Object.is`.\n   * Required when items are objects to ensure correct selection matching.\n   */\n  isItemEqual?: (a: V, b: V) => boolean;\n\n  /**\n   * Whether the dropdown allows searching/filtering.\n   * When true, renders a Combobox with a search input.\n   * When false (default), renders a Select dropdown.\n   */\n  isSearchable?: boolean;\n\n  /**\n   * Placeholder text shown when no value is selected.\n   */\n  placeholder?: string;\n\n  /**\n   * Whether multiple values can be selected\n   */\n  isMultiple?: Multiple;\n}\n\nexport interface FilePickerProps extends BaseFormFieldProps<File | File[]> {\n  /**\n   * Whether multiple files can be selected\n   */\n  isMulti?: boolean;\n\n  /**\n   * Accepted file types (e.g., \"image/*\", \".pdf\")\n   */\n  accept?: string | string[];\n\n  /**\n   * Maximum file size in bytes\n   */\n  maxSize?: number;\n\n  /**\n   * The text displayed when no file is selected.\n   *\n   * @default \"No file chosen\"\n   */\n  text?: string;\n\n  /**\n   * The text displayed on the browse button.\n   *\n   * @default \"Browse\"\n   */\n  buttonText?: string;\n}\n\n/**\n * Text area field props\n */\nexport interface TextAreaFieldProps extends\n  BaseFormFieldProps<string>,\n  Pick<\n    React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    | \"rows\"\n    | \"wrap\"\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"minLength\"\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"maxLength\"\n  >\n{\n  placeholder?: string;\n}\n\nexport interface TextInputFieldProps extends\n  BaseFormFieldProps<string>,\n  Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"minLength\"\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"maxLength\"\n  >\n{\n  placeholder?: string;\n}\n\n/**\n * Number input field props\n */\nexport interface NumberInputFieldProps extends BaseFormFieldProps<number> {\n  /**\n   * Minimum allowed value.\n   */\n  min?: number;\n\n  /**\n   * Maximum allowed value.\n   */\n  max?: number;\n\n  /**\n   * Step increment for the input. Used by the stepper buttons and ArrowUp/ArrowDown keyboard stepping.\n   *\n   * @default 1\n   */\n  step?: number;\n\n  /**\n   * Placeholder text shown when the input is empty.\n   */\n  placeholder?: string;\n}\n\n/**\n * Radio buttons field props\n */\nexport interface RadioButtonsFieldProps<V> extends BaseFormFieldProps<V> {\n  /**\n   * Available options for radio buttons.\n   *\n   * Values are compared by reference equality (`===`). When options contain\n   * non-primitive values, pass the same object references for `value` and\n   * the corresponding option entry.\n   */\n  options: Option<V>[];\n}\n\n/**\n * Option interface for radio button options\n */\nexport interface Option<V> {\n  label: string;\n  value: V;\n}\n\n/**\n * Object set field displays the summary of the count of the given object set\n */\nexport interface ObjectSetFieldProps<T extends ObjectTypeDefinition>\n  extends BaseFormFieldProps<ObjectSet<T>>\n{}\n\n/**\n * Custom field props for user-defined renderers\n */\nexport interface CustomFieldProps<V> extends BaseFormFieldProps<V> {\n  /**\n   * Custom renderer function\n   */\n  customRenderer: (props: BaseFormFieldProps<V>) => React.ReactNode;\n}\n\nexport interface BaseFormFieldProps<V> {\n  /**\n   * The HTML `id` attribute for the field input element.\n   * Used for `<label htmlFor>` association.\n   */\n  id?: string;\n\n  /**\n   * The value of the form field\n   */\n  value: V | null;\n  /**\n   * Called when the field value changes.\n   *\n   * ActionForm internally wraps this to pass the key to `onFieldValueChange`:\n   * ```\n   * <DropdownField\n   *   {...fieldDef}\n   *   onChange={(value) => onFieldValueChange(fieldDef.key, value)}\n   * />\n   * ```\n   *\n   * @param value The new value of the form field\n   */\n  onChange?: (value: V | null) => void;\n}\n\nexport type FieldKey<Q extends ActionDefinition<unknown>> =\n  keyof ActionParameters<Q>;\n\n/**\n * Extracts parameters from an ActionDefinition\n */\nexport type ActionParameters<Q extends ActionDefinition<unknown>> =\n  CompileTimeMetadata<Q>[\"parameters\"];\n\n/**\n * Extracts the value type for a specific parameter\n *\n * TODO: Re-use `BaseType`\n */\nexport type FieldValueType<\n  Q extends ActionDefinition<unknown>,\n  K extends keyof ActionParameters<Q> = keyof ActionParameters<Q>,\n> = ActionParameters<Q>[K][\"type\"] extends\n  ActionMetadata.DataType.Object<infer T> ? ActionParam.ObjectType<T>\n  : ActionParameters<Q>[K][\"type\"] extends ActionMetadata.DataType.ObjectSet<\n    infer T\n  > ? ActionParam.ObjectSetType<T>\n  : ActionParameters<Q>[K][\"type\"] extends ActionMetadata.DataType.Struct<\n    infer T\n  > ? ActionParam.StructType<T>\n  : ActionParameters<Q>[K][\"type\"] extends keyof DataValueClientToWire\n    ? DataValueClientToWire[ActionParameters<Q>[K][\"type\"]]\n  : never;\n\n/**\n * Extracts the parameter type descriptor for a specific action parameter.\n */\nexport type FieldDescriptorType<\n  Q extends ActionDefinition<unknown> = ActionDefinition<unknown>,\n  K extends keyof ActionParameters<Q> = keyof ActionParameters<Q>,\n> = ActionParameters<Q>[K][\"type\"];\n\n/**\n * Available form field component types\n */\nexport type FieldComponent =\n  | \"DATETIME_PICKER\"\n  | \"DROPDOWN\"\n  | \"FILE_PICKER\"\n  | \"NUMBER_INPUT\"\n  | \"RADIO_BUTTONS\"\n  | \"OBJECT_SET\"\n  | \"TEXT_AREA\"\n  | \"TEXT_INPUT\"\n  | \"CUSTOM\";\n\n/**\n * Describes the data type of a form field, independent of OSDK.\n * Mirrors ActionMetadata.DataType to keep the rendering layer OSDK-agnostic.\n */\nexport type FieldType =\n  | \"boolean\"\n  | \"string\"\n  | \"integer\"\n  | \"long\"\n  | \"double\"\n  | \"datetime\"\n  | \"timestamp\"\n  | \"attachment\"\n  | \"marking\"\n  | \"mediaReference\"\n  | \"objectType\"\n  | \"geoshape\"\n  | \"geohash\"\n  | { type: \"object\"; object: string }\n  | { type: \"objectSet\"; objectSet: string }\n  | { type: \"interface\"; interface: string }\n  | { type: \"struct\"; struct: Record<string, string> };\n\n/**\n * An OSDK-agnostic field definition used by BaseForm and FormFieldRenderer.\n * Contains only the information needed to render a single field — no generics,\n * no compile-time parameter constraints.\n *\n * Implemented as a distributed mapped type: switching on `fieldComponent`\n * narrows `fieldComponentProps` to the correct props type automatically.\n */\nexport type RendererFieldDefinition = {\n  [K in FieldComponent]: {\n    fieldKey: string;\n    fieldComponent: K;\n    fieldType?: FieldType;\n    label: string;\n    defaultValue?: unknown;\n    isRequired?: boolean;\n    placeholder?: string;\n    helperText?: string;\n    helperTextPlacement?: \"bottom\" | \"tooltip\";\n    fieldComponentProps: Omit<FormFieldPropsByType[K], \"value\" | \"onChange\">;\n  };\n}[FieldComponent];\n\n/**\n * Gets valid form field types for a given property type\n */\nexport type ValidFormFieldForPropertyType<P extends FieldDescriptorType> =\n  P extends \"objectSet\" ? \"OBJECT_SET\"\n    : P extends \"object\" ? \"DROPDOWN\"\n    : P extends \"mediaReference\" | \"attachment\" ? \"FILE_PICKER\"\n    : P extends \"boolean\" ? \"RADIO_BUTTONS\" | \"DROPDOWN\"\n    : P extends \"string\" ? \"TEXT_INPUT\" | \"TEXT_AREA\"\n    : P extends \"datetime\" | \"timestamp\" ? \"DATETIME_PICKER\"\n    : P extends\n      | \"double\"\n      | \"integer\"\n      | \"long\"\n      | \"float\"\n      | \"short\"\n      | \"byte\"\n      | \"decimal\" ? \"NUMBER_INPUT\"\n    : never;\n"],"mappings":"","ignoreList":[]}

package/build/esm/action-form/FormHeader.js

@@ -0,0 +1,26 @@
+/*
+ * 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, { memo } from "react";
+import styles from "./FormHeader.module.css";
+export const FormHeader = /*#__PURE__*/memo(function ({
+  title
+}) {
+  return /*#__PURE__*/React.createElement("h2", {
+    className: styles.osdkFormHeader
+  }, title);
+});
+//# sourceMappingURL=FormHeader.js.map

package/build/esm/action-form/FormHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormHeader.js","names":["React","memo","styles","FormHeader","title","createElement","className","osdkFormHeader"],"sources":["FormHeader.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 styles from \"./FormHeader.module.css\";\n\ninterface FormHeaderProps {\n  title: string;\n}\n\nexport const FormHeader: React.FC<FormHeaderProps> = memo(\n  function FormHeaderFn({ title }: FormHeaderProps): React.ReactElement {\n    return (\n      <h2 className={styles.osdkFormHeader}>\n        {title}\n      </h2>\n    );\n  },\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,OAAOC,MAAM,MAAM,yBAAyB;AAM5C,OAAO,MAAMC,UAAqC,gBAAGF,IAAI,CACvD,UAAsB;EAAEG;AAAuB,CAAC,EAAsB;EACpE,oBACEJ,KAAA,CAAAK,aAAA;IAAIC,SAAS,EAAEJ,MAAM,CAACK;EAAe,GAClCH,KACC,CAAC;AAET,CACF,CAAC","ignoreList":[]}

package/build/esm/action-form/FormHeader.module.css

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+.osdkFormHeader {
+  margin: 0;
+  padding-block: var(--osdk-form-header-block-padding);
+  padding-inline: var(--osdk-form-header-inline-padding);
+  border-bottom: var(--osdk-surface-border-width) solid
+    var(--osdk-form-header-border-color);
+  font-size: var(--osdk-form-header-font-size);
+  font-weight: var(--osdk-form-header-font-weight);
+  color: var(--osdk-form-header-color);
+}

package/build/esm/action-form/fields/BaseInput.module.css

@@ -0,0 +1,56 @@
+/*
+ * 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.
+ */
+
+.osdkBaseInput {
+  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);
+  }
+}

package/build/esm/action-form/fields/CustomField.js

@@ -0,0 +1,30 @@
+/*
+ * 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 React, { memo } from "react";
+/**
+ * Renders a user-provided custom field. Delegates all rendering to the
+ * `customRenderer` callback, passing through the standard form field props
+ * (value, onChange, id) so the custom implementation can participate in
+ * form state management.
+ */
+export const CustomField = /*#__PURE__*/memo(function ({
+  customRenderer: CustomRenderer,
+  ...baseProps
+}) {
+  return /*#__PURE__*/React.createElement(CustomRenderer, baseProps);
+});
+//# sourceMappingURL=CustomField.js.map

package/build/esm/action-form/fields/CustomField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomField.js","names":["React","memo","CustomField","customRenderer","CustomRenderer","baseProps","createElement"],"sources":["CustomField.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 React, { memo } from \"react\";\nimport type { CustomFieldProps } from \"../FormFieldApi.js\";\n\n/**\n * Renders a user-provided custom field. Delegates all rendering to the\n * `customRenderer` callback, passing through the standard form field props\n * (value, onChange, id) so the custom implementation can participate in\n * form state management.\n */\nexport const CustomField: React.FC<CustomFieldProps<unknown>> = memo(\n  function CustomFieldFn({ customRenderer: CustomRenderer, ...baseProps }) {\n    return <CustomRenderer {...baseProps} />;\n  },\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;AAGnC;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAgD,gBAAGD,IAAI,CAClE,UAAuB;EAAEE,cAAc,EAAEC,cAAc;EAAE,GAAGC;AAAU,CAAC,EAAE;EACvE,oBAAOL,KAAA,CAAAM,aAAA,CAACF,cAAc,EAAKC,SAAY,CAAC;AAC1C,CACF,CAAC","ignoreList":[]}

package/build/esm/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";
+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/esm/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/esm/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/esm/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";
+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/esm/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/esm/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);
+  }
+}