@raycast/api 1.26.2 → 1.28.0

package/types/api/components/Form.d.ts

@@ -0,0 +1,992 @@
+import { ReactElement, ReactNode } from "react";
+import { Image } from "../ui";
+import { ActionsInterface, NavigationChildInterface } from "./types";
+import PropTypes from "prop-types";
+/**
+ * Shows a list of form items such as {@link Form.TextField}, {@link Form.Checkbox} or {@link Form.Dropdown}.
+ */
+export declare function Form(props: Form.Props): ReactElement<Form.Props>;
+export declare namespace Form {
+    var propTypes: {
+        submitTitle: PropTypes.Requireable<string>;
+        navigationTitle: PropTypes.Requireable<string>;
+        isLoading: PropTypes.Requireable<boolean>;
+    };
+    var displayName: string;
+}
+/**
+ * See {@link Form.TextField}
+ */
+declare function FormTextField(props: Form.TextField.Props): ReactElement<Form.TextField.Props>;
+declare namespace FormTextField {
+    var propTypes: {
+        id: PropTypes.Validator<string>;
+        title: PropTypes.Requireable<string>;
+        storeValue: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<string>;
+        defaultValue: PropTypes.Requireable<string>;
+        placeholder: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    var displayName: string;
+}
+/**
+ * See {@link Form.PasswordField}
+ */
+declare function FormPasswordField(props: Form.PasswordField.Props): ReactElement<Form.PasswordField.Props>;
+declare namespace FormPasswordField {
+    var propTypes: {
+        id: PropTypes.Validator<string>;
+        title: PropTypes.Requireable<string>;
+        storeValue: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<string>;
+        defaultValue: PropTypes.Requireable<string>;
+        placeholder: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    var displayName: string;
+}
+/**
+ * See {@link Form.TextArea}
+ */
+declare function FormTextArea(props: Form.TextArea.Props): ReactElement<Form.TextArea.Props>;
+declare namespace FormTextArea {
+    var propTypes: {
+        id: PropTypes.Validator<string>;
+        title: PropTypes.Requireable<string>;
+        storeValue: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<string>;
+        defaultValue: PropTypes.Requireable<string>;
+        placeholder: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    var displayName: string;
+}
+/**
+ * See {@link Form.Checkbox}
+ */
+declare function FormCheckbox(props: Form.Checkbox.Props): ReactElement<Form.Checkbox.Props>;
+declare namespace FormCheckbox {
+    var propTypes: {
+        id: PropTypes.Validator<string>;
+        title: PropTypes.Requireable<string>;
+        storeValue: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<boolean>;
+        defaultValue: PropTypes.Requireable<boolean>;
+        label: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    var displayName: string;
+}
+/**
+ * See {@link Form.DatePicker}
+ */
+declare function FormDatePicker(props: Form.DatePicker.Props): ReactElement<Form.DatePicker.Props>;
+declare namespace FormDatePicker {
+    var propTypes: {
+        id: PropTypes.Validator<string>;
+        title: PropTypes.Requireable<string>;
+        storeValue: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<Date>;
+        defaultValue: PropTypes.Requireable<Date>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    var displayName: string;
+}
+/**
+ * See {@link Form.Separator}
+ */
+declare function FormSeparator(): ReactElement<Form.Separator.Props>;
+declare namespace FormSeparator {
+    var displayName: string;
+}
+/**
+ * See {@link Form.Description}
+ */
+declare function FormDescription(props: Form.Description.Props): ReactElement<Form.Description.Props>;
+declare namespace FormDescription {
+    var propTypes: {
+        text: PropTypes.Requireable<string>;
+    };
+    var displayName: string;
+}
+/**
+ * See {@link Form.Dropdown}
+ */
+declare function FormDropdown(props: Form.Dropdown.Props): ReactElement<Form.Dropdown.Props>;
+declare namespace FormDropdown {
+    var propTypes: {
+        id: PropTypes.Validator<string>;
+        title: PropTypes.Requireable<string>;
+        storeValue: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<string>;
+        defaultValue: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    var displayName: string;
+}
+/**
+ * See {@link Form.Dropdown.Section}
+ */
+declare function FormDropdownSection(props: Form.Dropdown.Section.Props): ReactElement<Form.Dropdown.Section.Props>;
+declare namespace FormDropdownSection {
+    var propTypes: {
+        title: PropTypes.Requireable<string>;
+    };
+    var displayName: string;
+}
+/**
+ * See {@link Form.Dropdown.Item}
+ */
+declare function FormDropdownItem(props: Form.Dropdown.Item.Props): ReactElement<Form.Dropdown.Item.Props>;
+declare namespace FormDropdownItem {
+    var propTypes: {
+        value: PropTypes.Requireable<string>;
+        title: PropTypes.Validator<string>;
+        icon: PropTypes.Requireable<string | Required<PropTypes.InferProps<{
+            fileIcon: PropTypes.Validator<string>;
+        }>> | PropTypes.InferProps<{
+            source: PropTypes.Requireable<string | PropTypes.InferProps<{
+                light: PropTypes.Validator<string>;
+                dark: PropTypes.Validator<string>;
+            }>>;
+            fallback: PropTypes.Requireable<string | PropTypes.InferProps<{
+                light: PropTypes.Validator<string>;
+                dark: PropTypes.Validator<string>;
+            }>>;
+            mask: PropTypes.Requireable<Image.Mask>;
+            tintColor: PropTypes.Requireable<string | PropTypes.InferProps<{
+                light: PropTypes.Validator<string>;
+                dark: PropTypes.Validator<string>;
+                adjustContrast: PropTypes.Requireable<boolean>;
+            }>>;
+        }>>;
+    };
+    var displayName: string;
+}
+/**
+ * See {@link Form.TagPicker}
+ */
+declare function FormTagPicker(props: Form.TagPicker.Props): ReactElement<Form.TagPicker.Props>;
+declare namespace FormTagPicker {
+    var propTypes: {
+        id: PropTypes.Validator<string>;
+        title: PropTypes.Requireable<string>;
+        storeValue: PropTypes.Requireable<boolean>;
+        placeholder: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string[]>;
+        defaultValue: PropTypes.Requireable<string[]>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    var displayName: string;
+}
+/**
+ * See {@link Form.TagPicker.Item}
+ */
+declare function FormTagPickerItem(props: Form.TagPicker.Item.Props): ReactElement<Form.TagPicker.Item.Props>;
+declare namespace FormTagPickerItem {
+    var propTypes: {
+        value: PropTypes.Validator<string>;
+        title: PropTypes.Validator<string>;
+        icon: PropTypes.Requireable<string | Required<PropTypes.InferProps<{
+            fileIcon: PropTypes.Validator<string>;
+        }>> | PropTypes.InferProps<{
+            source: PropTypes.Requireable<string | PropTypes.InferProps<{
+                light: PropTypes.Validator<string>;
+                dark: PropTypes.Validator<string>;
+            }>>;
+            fallback: PropTypes.Requireable<string | PropTypes.InferProps<{
+                light: PropTypes.Validator<string>;
+                dark: PropTypes.Validator<string>;
+            }>>;
+            mask: PropTypes.Requireable<Image.Mask>;
+            tintColor: PropTypes.Requireable<string | PropTypes.InferProps<{
+                light: PropTypes.Validator<string>;
+                dark: PropTypes.Validator<string>;
+                adjustContrast: PropTypes.Requireable<boolean>;
+            }>>;
+        }>>;
+    };
+    var displayName: string;
+}
+declare namespace FormDropdown {
+    /**
+     * Visually separated group of dropdown items.
+     *
+     * @remarks
+     * Use sections to group related menu items together.
+     *
+     * @example
+     * ```typescript
+     * import { ActionPanel, Form, Action } from "@raycast/api";
+     *
+     * export default function Command() {
+     *   return (
+     *     <Form
+     *       actions={
+     *         <ActionPanel>
+     *           <Action.SubmitForm title="Submit Favorite" onSubmit={(values) => console.log(values)} />
+     *         </ActionPanel>
+     *       }
+     *     >
+     *       <Form.Dropdown id="food" title="Favorite Food">
+     *         <Form.Dropdown.Section title="Fruits">
+     *           <Form.Dropdown.Item value="apple" title="Apple" icon="🍎" />
+     *           <Form.Dropdown.Item value="banana" title="Banana" icon="🍌" />
+     *         </Form.Dropdown.Section>
+     *         <Form.Dropdown.Section title="Vegetables">
+     *           <Form.Dropdown.Item value="broccoli" title="Broccoli" icon="🥦" />
+     *           <Form.Dropdown.Item value="carrot" title="Carrot" icon="🥕" />
+     *         </Form.Dropdown.Section>
+     *       </Form.Dropdown>
+     *     </Form>
+     *   );
+     * }
+     * ```
+     */
+    const Section: typeof FormDropdownSection;
+    /**
+     * A dropdown item in a {@link Form.Dropdown}
+     *
+     * @example
+     * ```typescript
+     * import { ActionPanel, Form, Action } from "@raycast/api";
+     *
+     * export default function Command() {
+     *   return (
+     *     <Form
+     *       actions={
+     *         <ActionPanel>
+     *           <Action.SubmitForm title="Submit Icon" onSubmit={(values) => console.log(values)} />
+     *         </ActionPanel>
+     *       }
+     *     >
+     *       <Form.Dropdown id="icon" title="Icon">
+     *         <Form.Dropdown.Item value="circle" title="Cirlce" icon={Icon.Circle} />
+     *       </Form.Dropdown>
+     *     </Form>
+     *   );
+     * }
+     * ```
+     */
+    const Item: typeof FormDropdownItem;
+}
+declare namespace FormTagPicker {
+    /**
+     * A tag picker item in a {@link Form.TagPicker}.
+     *
+     * @example
+     * ```typescript
+     * import { ActionPanel, Color, Form, Icon, Action } from "@raycast/api";
+     *
+     * export default function Command() {
+     *   return (
+     *     <Form
+     *       actions={
+     *         <ActionPanel>
+     *           <Action.SubmitForm title="Submit Color" onSubmit={(values) => console.log(values)} />
+     *         </ActionPanel>
+     *       }
+     *     >
+     *       <Form.TagPicker id="color" title="Color">
+     *         <Form.TagPicker.Item value="red" title="Red" icon={{ source: Icon.Circle, tintColor: Color.Red }} />
+     *         <Form.TagPicker.Item value="green" title="Green" icon={{ source: Icon.Circle, tintColor: Color.Green }} />
+     *         <Form.TagPicker.Item value="blue" title="Blue" icon={{ source: Icon.Circle, tintColor: Color.Blue }} />
+     *       </Form.TagPicker>
+     *     </Form>
+     *   );
+     * }
+     * ```
+     */
+    const Item: typeof FormTagPickerItem;
+}
+export declare namespace Form {
+    /**
+     * @deprecated Use `Form.Dropdown.Section` instead.
+     */
+    const DropdownSection: typeof FormDropdownSection;
+    /**
+     * @deprecated Use `Form.Dropdown.Item` instead.
+     */
+    const DropdownItem: typeof FormDropdownItem;
+    /**
+     * @deprecated Use `Form.TagPicker.Item` instead.
+     */
+    const TagPickerItem: typeof FormTagPickerItem;
+    /**
+     * A form item with a text field for input.
+     *
+     * @example
+     * Uncontrolled text field
+     *
+     * ```typescript
+     * import { ActionPanel, Form, Action } from "@raycast/api";
+     *
+     * export default function Command() {
+     *   return (
+     *     <Form
+     *       actions={
+     *         <ActionPanel>
+     *           <Action.SubmitForm title="Submit Name" onSubmit={(values) => console.log(values)} />
+     *         </ActionPanel>
+     *       }
+     *     >
+     *       <Form.TextField id="name" defaultValue="Steve" />
+     *     </Form>
+     *   );
+     * }
+     * ```
+     *
+     * @example
+     * Controlled text field
+     *
+     * ```typescript
+     * import { ActionPanel, Form, Action } from "@raycast/api";
+     * import { useState } from "react";
+     *
+     * export default function Command() {
+     *   const [name, setName] = useState<string>();
+     *
+     *   return (
+     *     <Form
+     *       actions={
+     *         <ActionPanel>
+     *           <Action.SubmitForm title="Submit Name" onSubmit={(values) => console.log(values)} />
+     *         </ActionPanel>
+     *       }
+     *     >
+     *       <Form.TextField id="name" value={name} onChange={setName} />
+     *     </Form>
+     *   );
+     * }
+     * ```
+     */
+    const TextField: typeof FormTextField;
+    /**
+     * A form item with a text area for input.
+     * The item supports multiline text entry.
+     *
+     * @example
+     * Uncontrolled text area
+     *
+     * ```typescript
+     * import { ActionPanel, Form, Action } from "@raycast/api";
+     *
+     * const DESCRIPTION =
+     *   "We spend too much time staring at loading indicators. The Raycast team is dedicated to make everybody interact faster with their computers.";
+     *
+     * export default function Command() {
+     *   return (
+     *     <Form
+     *       actions={
+     *         <ActionPanel>
+     *           <Action.SubmitForm title="Submit Description" onSubmit={(values) => console.log(values)} />
+     *         </ActionPanel>
+     *       }
+     *     >
+     *       <Form.TextArea id="description" defaultValue={DESCRIPTION} />
+     *     </Form>
+     *   );
+     * }
+     * ```
+     *
+     * @example
+     * Controlled text area
+     *
+     * ```typescript
+     * import { ActionPanel, Form, Action } from "@raycast/api";
+     * import { useState } from "react";
+     *
+     * export default function Command() {
+     *   const [description, setDescription] = useState<string>();
+     *
+     *   return (
+     *     <Form
+     *       actions={
+     *         <ActionPanel>
+     *           <Action.SubmitForm title="Submit Description" onSubmit={(values) => console.log(values)} />
+     *         </ActionPanel>
+     *       }
+     *     >
+     *       <Form.TextArea id="description" value={description} onChange={setDescription} />
+     *     </Form>
+     *   );
+     * }
+     * ```
+     */
+    const TextArea: typeof FormTextArea;
+    /**
+     * A form item with a checkbox.
+     *
+     * @example
+     * Uncontrolled checkbox
+     *
+     * ```typescript
+     * import { ActionPanel, Form, Action } from "@raycast/api";
+     *
+     * export default function Command() {
+     *   return (
+     *     <Form
+     *       actions={
+     *         <ActionPanel>
+     *           <Action.SubmitForm title="Submit Answer" onSubmit={(values) => console.log(values)} />
+     *         </ActionPanel>
+     *       }
+     *     >
+     *       <Form.Checkbox id="answer" label="Are you happy?" defaultValue={true} />
+     *     </Form>
+     *   );
+     * }
+     * ```
+     *
+     * @example
+     * Controlled checkbox
+     *
+     * ```typescript
+     * import { ActionPanel, Form, Action } from "@raycast/api";
+     * import { useState } from "react";
+     *
+     * export default function Command() {
+     *   const [checked, setChecked] = useState(true);
+     *
+     *   return (
+     *     <Form
+     *       actions={
+     *         <ActionPanel>
+     *           <Action.SubmitForm title="Submit Answer" onSubmit={(values) => console.log(values)} />
+     *         </ActionPanel>
+     *       }
+     *     >
+     *       <Form.Checkbox id="answer" label="Do you like orange juice?" value={checked} onChange={setChecked} />
+     *     </Form>
+     *   );
+     * }
+     * ```
+     */
+    const Checkbox: typeof FormCheckbox;
+    /**
+     * A form item with a date picker.
+     *
+     * @example
+     * Uncontrolled date picker
+     *
+     * ```typescript
+     * import { ActionPanel, Form, Action } from "@raycast/api";
+     *
+     * export default function Command() {
+     *   return (
+     *     <Form
+     *       actions={
+     *         <ActionPanel>
+     *           <Action.SubmitForm title="Submit Form" onSubmit={(values) => console.log(values)} />
+     *         </ActionPanel>
+     *       }
+     *     >
+     *       <Form.DatePicker id="dateOfBirth" title="Date of Birth" defaultValue={new Date(1955, 1, 24)} />
+     *     </Form>
+     *   );
+     * }
+     * ```
+     *
+     * @example
+     * Controlled date picker
+     *
+     * ```typescript
+     * import { ActionPanel, Form, Action } from "@raycast/api";
+     * import { useState } from "react";
+     *
+     * export default function Command() {
+     *   const [date, setDate] = useState<Date>();
+     *
+     *   return (
+     *     <Form
+     *       actions={
+     *         <ActionPanel>
+     *           <Action.SubmitForm title="Submit Form" onSubmit={(values) => console.log(values)} />
+     *         </ActionPanel>
+     *       }
+     *     >
+     *       <Form.DatePicker id="launchDate" title="Launch Date" value={date} onChange={setDate} />
+     *     </Form>
+     *   );
+     * }
+     * ```
+     */
+    const DatePicker: typeof FormDatePicker;
+    /**
+     * A form item that shows a separator line.
+     * Use for grouping and visually separating form items.
+     *
+     * @example
+     * ```typescript
+     * import { ActionPanel, Form, Action } from "@raycast/api";
+     *
+     * export default function Command() {
+     *   return (
+     *     <Form
+     *       actions={
+     *         <ActionPanel>
+     *           <Action.SubmitForm title="Submit Form" onSubmit={(values) => console.log(values)} />
+     *         </ActionPanel>
+     *       }
+     *     >
+     *       <Form.TextField id="textfield" />
+     *       <Form.Separator />
+     *       <Form.TextArea id="textarea" />
+     *     </Form>
+     *   );
+     * }
+     * ```
+     */
+    const Separator: typeof FormSeparator;
+    /**
+     * A form item with a dropdown menu.
+     *
+     * @example
+     * Uncontrolled dropdown
+     *
+     * ```typescript
+     * import { ActionPanel, Form, Action } from "@raycast/api";
+     *
+     * export default function Command() {
+     *   return (
+     *     <Form
+     *       actions={
+     *         <ActionPanel>
+     *           <Action.SubmitForm title="Submit Favorite" onSubmit={(values) => console.log(values)} />
+     *         </ActionPanel>
+     *       }
+     *     >
+     *       <Form.Dropdown id="emoji" title="Favorite Emoji" defaultValue="lol">
+     *         <Form.Dropdown.Item value="poop" title="Pile of poop" icon="💩" />
+     *         <Form.Dropdown.Item value="rocket" title="Rocket" icon="🚀" />
+     *         <Form.Dropdown.Item value="lol" title="Rolling on the floor laughing face" icon="🤣" />
+     *       </Form.Dropdown>
+     *     </Form>
+     *   );
+     * }
+     * ```
+     *
+     * @example
+     * Controlled dropdown
+     *
+     * ```typescript
+     * import { ActionPanel, Form, Action } from "@raycast/api";
+     * import { useState } from "react";
+     *
+     * export default function Command() {
+     *   const [programmingLanguage, setProgrammingLanguage] = useState<string>("typescript");
+     *
+     *   return (
+     *     <Form
+     *       actions={
+     *         <ActionPanel>
+     *           <Action.SubmitForm title="Submit Favorite" onSubmit={(values) => console.log(values)} />
+     *         </ActionPanel>
+     *       }
+     *     >
+     *       <Form.Dropdown
+     *         id="dropdown"
+     *         title="Favorite Language"
+     *         value={programmingLanguage}
+     *         onChange={setProgrammingLanguage}
+     *       >
+     *         <Form.Dropdown.Item value="cpp" title="C++" />
+     *         <Form.Dropdown.Item value="javascript" title="JavaScript" />
+     *         <Form.Dropdown.Item value="ruby" title="Ruby" />
+     *         <Form.Dropdown.Item value="python" title="Python" />
+     *         <Form.Dropdown.Item value="swift" title="Swift" />
+     *         <Form.Dropdown.Item value="typescript" title="TypeScript" />
+     *       </Form.Dropdown>
+     *     </Form>
+     *   );
+     * }
+     * ```
+     */
+    const Dropdown: typeof FormDropdown;
+    /**
+     * A form item with a tag picker that allows the user to select multiple items.
+     *
+     * @example
+     * Uncontrolled tag picker
+     *
+     * ```typescript
+     * import { ActionPanel, Form, Action } from "@raycast/api";
+     *
+     * export default function Command() {
+     *   return (
+     *     <Form
+     *       actions={
+     *         <ActionPanel>
+     *           <Action.SubmitForm title="Submit Favorite" onSubmit={(values) => console.log(values)} />
+     *         </ActionPanel>
+     *       }
+     *     >
+     *       <Form.TagPicker id="sports" title="Favorite Sports" defaultValue={["football"]}>
+     *         <Form.TagPicker.Item value="basketball" title="Basketball" icon="🏀" />
+     *         <Form.TagPicker.Item value="football" title="Football" icon="⚽️" />
+     *         <Form.TagPicker.Item value="tennis" title="Tennis" icon="🎾" />
+     *       </Form.TagPicker>
+     *     </Form>
+     *   );
+     * }
+     * ```
+     *
+     * @example
+     * Controlled tag picker
+     *
+     * ```typescript
+     * import { ActionPanel, Form, Action } from "@raycast/api";
+     * import { useState } from "react";
+     *
+     * export default function Command() {
+     *   const [countries, setCountries] = useState<string[]>(["ger", "ned", "pol"]);
+     *
+     *   return (
+     *     <Form
+     *       actions={
+     *         <ActionPanel>
+     *           <Action.SubmitForm title="Submit Countries" onSubmit={(values) => console.log(values)} />
+     *         </ActionPanel>
+     *       }
+     *     >
+     *       <Form.TagPicker id="countries" title="Visited Countries" value={countries} onChange={setCountries}>
+     *         <Form.TagPicker.Item value="ger" title="Germany" icon="🇩🇪" />
+     *         <Form.TagPicker.Item value="ind" title="India" icon="🇮🇳" />
+     *         <Form.TagPicker.Item value="ned" title="Netherlands" icon="🇳🇱" />
+     *         <Form.TagPicker.Item value="nor" title="Norway" icon="🇳🇴" />
+     *         <Form.TagPicker.Item value="pol" title="Poland" icon="🇵🇱" />
+     *         <Form.TagPicker.Item value="rus" title="Russia" icon="🇷🇺" />
+     *         <Form.TagPicker.Item value="sco" title="Scotland" icon="🏴󠁧󠁢󠁳󠁣󠁴󠁿" />
+     *       </Form.TagPicker>
+     *     </Form>
+     *   );
+     * }
+     * ```
+     */
+    const TagPicker: typeof FormTagPicker;
+    /**
+     * A form item with a secure text field for password-entry in which the entered characters must be kept secret.
+     *
+     * @example
+     * Uncontrolled password field
+     *
+     * ```typescript
+     * import { ActionPanel, Form, Action } from "@raycast/api";
+     *
+     * export default function Command() {
+     *   return (
+     *     <Form
+     *       actions={
+     *         <ActionPanel>
+     *           <Action.SubmitFormAction title="Submit Password" onSubmit={(values) => console.log(values)} />
+     *         </ActionPanel>
+     *       }
+     *     >
+     *       <Form.PasswordField id="password" title="Enter Password" />
+     *     </Form>
+     *   );
+     * }
+     * ```
+     *
+     * @example
+     * Controlled password field
+     *
+     * ```typescript
+     * import { ActionPanel, Form, Action } from "@raycast/api";
+     * import { useState } from "react";
+     *
+     * export default function Command() {
+     *   const [password, setPassword] = useState<string>();
+     *
+     *   return (
+     *     <Form
+     *       actions={
+     *         <ActionPanel>
+     *           <Action.SubmitForm title="Submit Password" onSubmit={(values) => console.log(values)} />
+     *         </ActionPanel>
+     *       }
+     *     >
+     *       <Form.PasswordField id="password" value={password} onChange={setPassword} />
+     *     </Form>
+     *   );
+     * }
+     * ```
+     */
+    const PasswordField: typeof FormPasswordField;
+    /**
+     * A form item with a simple text label.
+     *
+     * @remark Do *not* use this component to show validation messages for other form fields.
+     *
+     * @example
+     * Label
+     *
+     * ```typescript
+     * import { ActionPanel, Form, Action } from "@raycast/api";
+     *
+     * export default function Command() {
+     *   return (
+     *     <Form
+     *       actions={
+     *         <ActionPanel>
+     *           <Action.SubmitForm title="Submit" onSubmit={(values) => console.log(values)} />
+     *         </ActionPanel>
+     *       }
+     *     >
+     *       <Form.Description title="Import / Export" text="Exporting will back-up your preferences, quicklinks, snippets, floating notes, script-command folder paths, aliases, hotkeys, favorites and other data." />
+     *     </Form>
+     *   );
+     * }
+     * ```
+     */
+    const Description: typeof FormDescription;
+    /**
+     * Props of the {@link Form} React component.
+     *
+     * @category User Interface
+     * @subcategory Form
+     */
+    interface Props extends ActionsInterface, NavigationChildInterface {
+        /**
+         * The Form.Item elements of the form.
+         */
+        children?: ReactNode;
+    }
+    /**
+     * A possible form item value that will be used as an input for the submit callback of a form.
+     */
+    type Value = string | number | boolean | string[] | number[] | Date | null;
+    /**
+     * Values of items in the form.
+     *
+     * @remarks
+     * For type-safe form values, you can define your own interface. Use the ID's of the form items
+     * as the property names. See the example for more details.
+     *
+     * @example
+     * ```typescript
+     * import { Form, Action } from "@raycast/api";
+     *
+     * interface Values {
+     *   todo: string;
+     *   due?: Date;
+     * }
+     *
+     * export default function Command() {
+     *   function handleSubmit(values: Values) {
+     *     console.log(values);
+     *   }
+     *
+     *   return (
+     *     <Form
+     *        actions={
+     *          <ActionPanel>
+     *            <Action.SubmitForm title="Submit" onSubmit={handleSubmit} />
+     *          </ActionPanel>
+     *        }
+     *     >
+     *       <Form.TextField id="todo" title="Todo" />
+     *       <Form.DatePicker id="due" title="Due Date" />
+     *     </Form>
+     *   );
+     * };
+     * ```
+     */
+    interface Values {
+        /**
+         * The form value of a given item.
+         */
+        [item: string]: any;
+    }
+    /**
+     * Props of the Form.Item React component.
+     */
+    interface ItemProps<Value extends Form.Value> {
+        /**
+         * ID of the form item.
+         * Make sure to assign each form item a unique id.
+         */
+        id: string;
+        /**
+         * The title displayed on the left side of the item.
+         */
+        title?: string;
+        /**
+         * Indicates whether the value of the item should be persisted after submitting, and restored next time the form is rendered.
+         */
+        storeValue?: boolean;
+        /**
+         * The current value of the item.
+         */
+        value?: Value;
+        /**
+         * The default value of the item.
+         * Keep in mind that `defaultValue` will be configured once per component lifecycle. This means that if a user changes the value, `defaultValue` won't be configured on re-rendering.
+         * @important If you're using {@link Form.Item.Props.storeValue} and configured it as `true` then the stored value will be set.
+         * @important If you configure {@link Form.Item.Props.value} at the same time with {@link Form.Item.Props.defaultValue}, the `value` will be set instead of `defaultValue`.
+         */
+        defaultValue?: Value;
+        /**
+         * The callback which will be triggered on the {@link Form.Item.Props.value} change for the item.
+         */
+        onChange?: (newValue: Value) => void;
+    }
+    namespace TextField {
+        /**
+         * Props of the {@link Form.TextField} React component.
+         */
+        interface Props extends Form.ItemProps<string> {
+            /**
+             * Placeholder text shown in the text field.
+             */
+            placeholder?: string;
+        }
+    }
+    namespace TextArea {
+        /**
+         * Props of the {@link Form.TextArea} React component.
+         */
+        interface Props extends Form.ItemProps<string> {
+            /**
+             * Placeholder text shown in the text field.
+             */
+            placeholder?: string;
+        }
+    }
+    namespace Dropdown {
+        /**
+         * Props of the {@link Form.Dropdown} React component.
+         * The {@link Form.Dropdown.Props.value} here is ID ({@link Form.Dropdown.Item.Props.id}) of the default selected item.
+         */
+        interface Props extends Form.ItemProps<string> {
+            /**
+             * Sections or items. If {@link Form.Dropdown.Item} elements are specified, a default section is automatically created.
+             */
+            children?: ReactNode;
+        }
+        namespace Section {
+            /**
+             * Props of the {@link Form.Dropdown.Section} React component.
+             */
+            interface Props {
+                /**
+                 * The item elements of the section.
+                 */
+                children?: ReactNode;
+                /**
+                 * Title displayed above the section
+                 */
+                title?: string;
+            }
+        }
+        namespace Item {
+            /**
+             * Props of the {@link Form.Dropdown.Item} React component.
+             */
+            interface Props {
+                /**
+                 * Value of the dropdown item.
+                 * Make sure to assign each unique value for each item.
+                 */
+                value: string;
+                /**
+                 * The title displayed for the item.
+                 */
+                title: string;
+                /**
+                 * A optional icon displayed for the item.
+                 */
+                icon?: Image.ImageLike;
+            }
+        }
+    }
+    namespace Checkbox {
+        /**
+         * Props of the {@link Form.Checkbox} React component.
+         */
+        interface Props extends Form.ItemProps<boolean> {
+            /**
+             * The label displayed on the right side of the checkbox.
+             */
+            label: string;
+        }
+    }
+    namespace DatePicker {
+        /**
+         * Props of the {@link Form.DatePicker} React component.
+         */
+        interface Props extends Form.ItemProps<Date> {
+        }
+    }
+    namespace Separator {
+        /**
+         * Props of the {@link Form.Separator} React component.
+         */
+        interface Props {
+        }
+    }
+    namespace TagPicker {
+        /**
+         * Props of the {@link Form.TagPicker} React component.
+         * The {@link Form.TagPicker.Props.value} here is the IDs ({@link Form.TagPicker.Item.Props.id}) of the default selected items.
+         */
+        interface Props extends Form.ItemProps<string[]> {
+            /**
+             * The list of tag picker's items.
+             */
+            children?: ReactNode;
+            /**
+             * Placeholder text shown in the token field.
+             */
+            placeholder?: string;
+        }
+        namespace Item {
+            /**
+             * Props of the {@link Form.TagPicker.Item} React component.
+             */
+            interface Props {
+                /**
+                 * Value of the tag picker item.
+                 * Make sure to assign unique value for each item.
+                 */
+                value: string;
+                /**
+                 * The display title of the token.
+                 */
+                title: string;
+                /**
+                 * An icon to show in the token.
+                 */
+                icon?: Image.ImageLike;
+            }
+        }
+    }
+    namespace PasswordField {
+        /**
+         * Props of the {@link Form.PasswordField} React component.
+         */
+        interface Props extends Form.ItemProps<string> {
+            /**
+             * Placeholder text shown in the password field.
+             */
+            placeholder?: string;
+        }
+    }
+    namespace Description {
+        /**
+         * Props of the {@link Form.Description} React component.
+         */
+        interface Props {
+            /**
+             * The display title of the left side from the description item.
+             */
+            title?: string;
+            /**
+             * Text that will be displayed in the middle.
+             */
+            text: string;
+        }
+    }
+}
+export {};