@ngrok/mantle 0.79.2 → 0.80.0

package/dist/select-idm1jy7y.d.ts

@@ -0,0 +1,600 @@
+import { o as WithValidation } from "./validation-7QeiTFwl.js";
+import { n as Separator } from "./separator-B5UmkVRL.js";
+import { ComponentProps, FocusEvent, PropsWithChildren, ReactNode, Ref, SelectHTMLAttributes } from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+//#region src/components/select/select.d.ts
+type WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid">;
+type SelectProps = PropsWithChildren & {
+  autoComplete?: string;
+  defaultOpen?: boolean;
+  defaultValue?: string;
+  dir?: "ltr" | "rtl";
+  disabled?: boolean;
+  form?: string;
+  id?: string;
+  name?: string;
+  /**
+   * Event handler called when Select blurs.
+   * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur
+   */
+  onBlur?: (event: FocusEvent<HTMLButtonElement>) => void;
+  /**
+   * Event handler called when the value changes.
+   * @deprecated Use `onValueChange` instead.
+   */
+  onChange?: (value: string) => void;
+  onOpenChange?(open: boolean): void;
+  onValueChange?(value: string): void;
+  open?: boolean;
+  /**
+   * Ref for the trigger button.
+   */
+  ref?: Ref<HTMLButtonElement>;
+  required?: boolean;
+  value?: string;
+} & WithValidation & WithAriaInvalid;
+/**
+ * Displays a list of options for the user to pick from—triggered by a button.
+ *
+ * Use Select for a small, finite list of options (~2-15) where the user picks exactly one
+ * and search/filtering is unnecessary. For larger lists or async/searchable data, use
+ * Combobox. For picking multiple options, use MultiSelect.
+ *
+ * Pass `validation` here when the entire select has an explicit state. That
+ * root state is forwarded to `Select.Trigger` and takes precedence over the
+ * ambient `validation` from `Field.Item`. Note: rendered `Field.Errors` /
+ * `Field.ErrorList` set `aria-invalid="true"` on the trigger via
+ * `Field.Control`'s wiring, which still forces the trigger into the error
+ * state — suppress the inferred error by passing `validation` on `Field.Item`
+ * if a non-error `Select.Root` state needs to win in that case.
+ *
+ * `Select.Content` renders at Tailwind `z-50`, Mantle's shared floating
+ * z-index. When multiple shared layers are open, the most recently mounted
+ * layer renders on top.
+ *
+ * @see https://mantle.ngrok.com/components/forms/select#selectroot
+ *
+ * @example
+ * ```tsx
+ * <Select.Root>
+ *   <Select.Trigger>
+ *     <Select.Value placeholder="Select a fruit" />
+ *   </Select.Trigger>
+ *   <Select.Content>
+ *     <Select.Group>
+ *       <Select.Label>Fruits</Select.Label>
+ *       <Select.Item value="apple">Apple</Select.Item>
+ *       <Select.Item value="banana">Banana</Select.Item>
+ *       <Select.Item value="cherry">Cherry</Select.Item>
+ *     </Select.Group>
+ *     <Select.Separator />
+ *     <Select.Group>
+ *       <Select.Label>Veggies</Select.Label>
+ *       <Select.Item value="carrot">Carrot</Select.Item>
+ *       <Select.Item value="cucumber">Cucumber</Select.Item>
+ *     </Select.Group>
+ *   </Select.Content>
+ * </Select.Root>
+ * ```
+ */
+declare const Root: {
+  ({ "aria-invalid": _ariaInvalid, children, id, validation, onBlur, onValueChange, onChange, ref, ...props }: SelectProps): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * A group of related options within a select menu. Similar to an html `<optgroup>` element.
+ * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.
+ *
+ * @see https://mantle.ngrok.com/components/forms/select#selectgroup
+ *
+ * @example
+ * ```tsx
+ * <Select.Root>
+ *   <Select.Trigger>
+ *     <Select.Value placeholder="Select a fruit" />
+ *   </Select.Trigger>
+ *   <Select.Content>
+ *     <Select.Group>
+ *       <Select.Label>Fruits</Select.Label>
+ *       <Select.Item value="apple">Apple</Select.Item>
+ *       <Select.Item value="banana">Banana</Select.Item>
+ *       <Select.Item value="cherry">Cherry</Select.Item>
+ *     </Select.Group>
+ *     <Select.Separator />
+ *     <Select.Group>
+ *       <Select.Label>Veggies</Select.Label>
+ *       <Select.Item value="carrot">Carrot</Select.Item>
+ *       <Select.Item value="cucumber">Cucumber</Select.Item>
+ *     </Select.Group>
+ *   </Select.Content>
+ * </Select.Root>
+ * ```
+ */
+declare const Group: {
+  ({ className, ref, ...props }: ComponentProps<typeof SelectPrimitive.Group>): import("react").JSX.Element;
+  displayName: string;
+};
+type SelectTriggerProps = ComponentProps<typeof SelectPrimitive.Trigger> & WithAriaInvalid & WithValidation;
+/**
+ * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.
+ * When composing with `Field.Item`, wrap `Select.Root` in `Field.Control` —
+ * the generated `id`, `name`, and `aria-invalid` flow onto `Select.Root` (so
+ * the hidden form input gets the field name), and the trigger reads
+ * `aria-describedby` / `aria-errormessage` from `FieldControlContext`.
+ *
+ * @see https://mantle.ngrok.com/components/forms/select#selecttrigger
+ *
+ * @example
+ * ```tsx
+ * <Select.Root>
+ *   <Select.Trigger>
+ *     <Select.Value placeholder="Select a fruit" />
+ *   </Select.Trigger>
+ *   <Select.Content>
+ *     <Select.Group>
+ *       <Select.Label>Fruits</Select.Label>
+ *       <Select.Item value="apple">Apple</Select.Item>
+ *       <Select.Item value="banana">Banana</Select.Item>
+ *       <Select.Item value="cherry">Cherry</Select.Item>
+ *     </Select.Group>
+ *     <Select.Separator />
+ *     <Select.Group>
+ *       <Select.Label>Veggies</Select.Label>
+ *       <Select.Item value="carrot">Carrot</Select.Item>
+ *       <Select.Item value="cucumber">Cucumber</Select.Item>
+ *     </Select.Group>
+ *   </Select.Content>
+ * </Select.Root>
+ * ```
+ */
+declare const Trigger: {
+  ({ "aria-invalid": ariaInValidProp, className, children, id: propId, ref, validation: propValidation, ...props }: SelectTriggerProps): import("react").JSX.Element;
+  displayName: string;
+};
+type SelectContentProps = ComponentProps<typeof SelectPrimitive.Content> & {
+  /**
+   * The width of the content. Defaults to the width of the trigger.
+   * If set to "content", the content will use the intrinsic content width; it will be the width of the longest/widest item.
+   * @default "trigger"
+   */
+  width?: "trigger" | "content";
+};
+/**
+ * The component that pops out when the select is open as a portal adjacent to the trigger button.
+ * It contains a scrolling viewport of the select items.
+ *
+ * `Select.Content` renders at Tailwind `z-50`, Mantle's shared floating
+ * z-index. When multiple shared layers are open, the most recently mounted
+ * layer renders on top.
+ *
+ * @see https://mantle.ngrok.com/components/forms/select#selectcontent
+ *
+ * @example
+ * ```tsx
+ * <Select.Root>
+ *   <Select.Trigger>
+ *     <Select.Value placeholder="Select a fruit" />
+ *   </Select.Trigger>
+ *   <Select.Content>
+ *     <Select.Group>
+ *       <Select.Label>Fruits</Select.Label>
+ *       <Select.Item value="apple">Apple</Select.Item>
+ *       <Select.Item value="banana">Banana</Select.Item>
+ *       <Select.Item value="cherry">Cherry</Select.Item>
+ *     </Select.Group>
+ *     <Select.Separator />
+ *     <Select.Group>
+ *       <Select.Label>Veggies</Select.Label>
+ *       <Select.Item value="carrot">Carrot</Select.Item>
+ *       <Select.Item value="cucumber">Cucumber</Select.Item>
+ *     </Select.Group>
+ *   </Select.Content>
+ * </Select.Root>
+ * ```
+ */
+declare const Content: {
+  ({ className, children, position, ref, width, ...props }: SelectContentProps): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * Used to render the label of a group. It won't be focusable using arrow keys.
+ *
+ * @see https://mantle.ngrok.com/components/forms/select#selectlabel
+ *
+ * @example
+ * ```tsx
+ * <Select.Root>
+ *   <Select.Trigger>
+ *     <Select.Value placeholder="Select a fruit" />
+ *   </Select.Trigger>
+ *   <Select.Content>
+ *     <Select.Group>
+ *       <Select.Label>Fruits</Select.Label>
+ *       <Select.Item value="apple">Apple</Select.Item>
+ *       <Select.Item value="banana">Banana</Select.Item>
+ *       <Select.Item value="cherry">Cherry</Select.Item>
+ *     </Select.Group>
+ *     <Select.Separator />
+ *     <Select.Group>
+ *       <Select.Label>Veggies</Select.Label>
+ *       <Select.Item value="carrot">Carrot</Select.Item>
+ *       <Select.Item value="cucumber">Cucumber</Select.Item>
+ *     </Select.Group>
+ *   </Select.Content>
+ * </Select.Root>
+ * ```
+ */
+declare const Label: {
+  ({ className, ref, ...props }: ComponentProps<typeof SelectPrimitive.Label>): import("react").JSX.Element;
+  displayName: string;
+};
+type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item> & {
+  icon?: ReactNode;
+};
+/**
+ * An option within a select menu. Similar to an html `<option>` element.
+ * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.
+ * Displays the children as the option's text.
+ *
+ * @see https://mantle.ngrok.com/components/forms/select#selectitem
+ *
+ * @example
+ * ```tsx
+ * <Select.Root>
+ *   <Select.Trigger>
+ *     <Select.Value placeholder="Select a fruit" />
+ *   </Select.Trigger>
+ *   <Select.Content>
+ *     <Select.Group>
+ *       <Select.Label>Fruits</Select.Label>
+ *       <Select.Item value="apple">Apple</Select.Item>
+ *       <Select.Item value="banana">Banana</Select.Item>
+ *       <Select.Item value="cherry">Cherry</Select.Item>
+ *     </Select.Group>
+ *     <Select.Separator />
+ *     <Select.Group>
+ *       <Select.Label>Veggies</Select.Label>
+ *       <Select.Item value="carrot">Carrot</Select.Item>
+ *       <Select.Item value="cucumber">Cucumber</Select.Item>
+ *     </Select.Group>
+ *   </Select.Content>
+ * </Select.Root>
+ * ```
+ */
+declare const Item: {
+  ({ className, children, icon, ref, ...props }: SelectItemProps): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * Used to visually separate items or groups of items in the select content.
+ *
+ * @see https://mantle.ngrok.com/components/forms/select#selectseparator
+ *
+ * @example
+ * ```tsx
+ * <Select.Root>
+ *   <Select.Trigger>
+ *     <Select.Value placeholder="Select a fruit" />
+ *   </Select.Trigger>
+ *   <Select.Content>
+ *     <Select.Group>
+ *       <Select.Label>Fruits</Select.Label>
+ *       <Select.Item value="apple">Apple</Select.Item>
+ *       <Select.Item value="banana">Banana</Select.Item>
+ *       <Select.Item value="cherry">Cherry</Select.Item>
+ *     </Select.Group>
+ *     <Select.Separator />
+ *     <Select.Group>
+ *       <Select.Label>Veggies</Select.Label>
+ *       <Select.Item value="carrot">Carrot</Select.Item>
+ *       <Select.Item value="cucumber">Cucumber</Select.Item>
+ *     </Select.Group>
+ *   </Select.Content>
+ * </Select.Root>
+ * ```
+ */
+declare const SelectSeparatorComponent: {
+  ({ className, ref, ...props }: ComponentProps<typeof Separator>): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * Displays a list of options for the user to pick from—triggered by a button.
+ *
+ * Use Select for a small, finite list of options (~2-15) where the user picks exactly one
+ * and search/filtering is unnecessary. For larger lists or async/searchable data, use
+ * Combobox. For picking multiple options, use MultiSelect.
+ *
+ * `Select.Content` renders at Tailwind `z-50`, Mantle's shared floating
+ * z-index. When multiple shared layers are open, the most recently mounted
+ * layer renders on top.
+ *
+ * @see https://mantle.ngrok.com/components/forms/select
+ *
+ * @example
+ * Composition:
+ * ```
+ * Select.Root
+ * ├── Select.Trigger
+ * │   └── Select.Value
+ * └── Select.Content
+ *     ├── Select.Group
+ *     │   ├── Select.Label
+ *     │   └── Select.Item
+ *     └── Select.Separator
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Select.Root>
+ *   <Select.Trigger>
+ *     <Select.Value placeholder="Select a fruit" />
+ *   </Select.Trigger>
+ *   <Select.Content>
+ *     <Select.Group>
+ *       <Select.Label>Fruits</Select.Label>
+ *       <Select.Item value="apple">Apple</Select.Item>
+ *       <Select.Item value="banana">Banana</Select.Item>
+ *       <Select.Item value="cherry">Cherry</Select.Item>
+ *     </Select.Group>
+ *     <Select.Separator />
+ *     <Select.Group>
+ *       <Select.Label>Veggies</Select.Label>
+ *       <Select.Item value="carrot">Carrot</Select.Item>
+ *       <Select.Item value="cucumber">Cucumber</Select.Item>
+ *     </Select.Group>
+ *   </Select.Content>
+ * </Select.Root>
+ * ```
+ */
+declare const Select: {
+  /**
+   * Displays a list of options for the user to pick from—triggered by a button.
+   *
+   * Use Select for a small, finite list of options (~2-15) where the user picks exactly one
+   * and search/filtering is unnecessary. For larger lists or async/searchable data, use
+   * Combobox. For picking multiple options, use MultiSelect.
+   *
+   * `Select.Content` renders at Tailwind `z-50`, Mantle's shared floating
+   * z-index. When multiple shared layers are open, the most recently mounted
+   * layer renders on top.
+   *
+   * @see https://mantle.ngrok.com/components/forms/select#selectroot
+   *
+   * @example
+   * ```tsx
+   * <Select.Root>
+   *   <Select.Trigger>
+   *     <Select.Value placeholder="Select a fruit" />
+   *   </Select.Trigger>
+   *   <Select.Content>
+   *     <Select.Group>
+   *       <Select.Label>Fruits</Select.Label>
+   *       <Select.Item value="apple">Apple</Select.Item>
+   *       <Select.Item value="banana">Banana</Select.Item>
+   *       <Select.Item value="cherry">Cherry</Select.Item>
+   *     </Select.Group>
+   *     <Select.Separator />
+   *     <Select.Group>
+   *       <Select.Label>Veggies</Select.Label>
+   *       <Select.Item value="carrot">Carrot</Select.Item>
+   *       <Select.Item value="cucumber">Cucumber</Select.Item>
+   *     </Select.Group>
+   *   </Select.Content>
+   * </Select.Root>
+   * ```
+   */
+  readonly Root: typeof Root;
+  /**
+   * The component that pops out when the select is open as a portal adjacent to the trigger button.
+   * It contains a scrolling viewport of the select items.
+   *
+   * `Select.Content` renders at Tailwind `z-50`, Mantle's shared floating
+   * z-index. When multiple shared layers are open, the most recently mounted
+   * layer renders on top.
+   *
+   * @see https://mantle.ngrok.com/components/forms/select#selectcontent
+   *
+   * @example
+   * ```tsx
+   * <Select.Root>
+   *   <Select.Trigger>
+   *     <Select.Value placeholder="Select a fruit" />
+   *   </Select.Trigger>
+   *   <Select.Content>
+   *     <Select.Group>
+   *       <Select.Label>Fruits</Select.Label>
+   *       <Select.Item value="apple">Apple</Select.Item>
+   *       <Select.Item value="banana">Banana</Select.Item>
+   *       <Select.Item value="cherry">Cherry</Select.Item>
+   *     </Select.Group>
+   *     <Select.Separator />
+   *     <Select.Group>
+   *       <Select.Label>Veggies</Select.Label>
+   *       <Select.Item value="carrot">Carrot</Select.Item>
+   *       <Select.Item value="cucumber">Cucumber</Select.Item>
+   *     </Select.Group>
+   *   </Select.Content>
+   * </Select.Root>
+   * ```
+   */
+  readonly Content: typeof Content;
+  /**
+   * A group of related options within a select menu. Similar to an html `<optgroup>` element.
+   * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.
+   *
+   * @see https://mantle.ngrok.com/components/forms/select#selectgroup
+   *
+   * @example
+   * ```tsx
+   * <Select.Root>
+   *   <Select.Trigger>
+   *     <Select.Value placeholder="Select a fruit" />
+   *   </Select.Trigger>
+   *   <Select.Content>
+   *     <Select.Group>
+   *       <Select.Label>Fruits</Select.Label>
+   *       <Select.Item value="apple">Apple</Select.Item>
+   *       <Select.Item value="banana">Banana</Select.Item>
+   *       <Select.Item value="cherry">Cherry</Select.Item>
+   *     </Select.Group>
+   *     <Select.Separator />
+   *     <Select.Group>
+   *       <Select.Label>Veggies</Select.Label>
+   *       <Select.Item value="carrot">Carrot</Select.Item>
+   *       <Select.Item value="cucumber">Cucumber</Select.Item>
+   *     </Select.Group>
+   *   </Select.Content>
+   * </Select.Root>
+   * ```
+   */
+  readonly Group: typeof Group;
+  /**
+   * An option within a select menu. Similar to an html `<option>` element.
+   * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.
+   * Displays the children as the option's text.
+   *
+   * @see https://mantle.ngrok.com/components/forms/select#selectitem
+   *
+   * @example
+   * ```tsx
+   * <Select.Root>
+   *   <Select.Trigger>
+   *     <Select.Value placeholder="Select a fruit" />
+   *   </Select.Trigger>
+   *   <Select.Content>
+   *     <Select.Group>
+   *       <Select.Label>Fruits</Select.Label>
+   *       <Select.Item value="apple">Apple</Select.Item>
+   *       <Select.Item value="banana">Banana</Select.Item>
+   *       <Select.Item value="cherry">Cherry</Select.Item>
+   *     </Select.Group>
+   *     <Select.Separator />
+   *     <Select.Group>
+   *       <Select.Label>Veggies</Select.Label>
+   *       <Select.Item value="carrot">Carrot</Select.Item>
+   *       <Select.Item value="cucumber">Cucumber</Select.Item>
+   *     </Select.Group>
+   *   </Select.Content>
+   * </Select.Root>
+   * ```
+   */
+  readonly Item: typeof Item;
+  /**
+   * Used to render the label of a group. It won't be focusable using arrow keys.
+   *
+   * @see https://mantle.ngrok.com/components/forms/select#selectlabel
+   *
+   * @example
+   * ```tsx
+   * <Select.Root>
+   *   <Select.Trigger>
+   *     <Select.Value placeholder="Select a fruit" />
+   *   </Select.Trigger>
+   *   <Select.Content>
+   *     <Select.Group>
+   *       <Select.Label>Fruits</Select.Label>
+   *       <Select.Item value="apple">Apple</Select.Item>
+   *       <Select.Item value="banana">Banana</Select.Item>
+   *       <Select.Item value="cherry">Cherry</Select.Item>
+   *     </Select.Group>
+   *     <Select.Separator />
+   *     <Select.Group>
+   *       <Select.Label>Veggies</Select.Label>
+   *       <Select.Item value="carrot">Carrot</Select.Item>
+   *       <Select.Item value="cucumber">Cucumber</Select.Item>
+   *     </Select.Group>
+   *   </Select.Content>
+   * </Select.Root>
+   * ```
+   */
+  readonly Label: typeof Label;
+  /**
+   * Used to visually separate items or groups of items in the select content.
+   *
+   * @see https://mantle.ngrok.com/components/forms/select#selectseparator
+   *
+   * @example
+   * ```tsx
+   * <Select.Root>
+   *   <Select.Trigger>
+   *     <Select.Value placeholder="Select a fruit" />
+   *   </Select.Trigger>
+   *   <Select.Content>
+   *     <Select.Group>
+   *       <Select.Label>Fruits</Select.Label>
+   *       <Select.Item value="apple">Apple</Select.Item>
+   *       <Select.Item value="banana">Banana</Select.Item>
+   *       <Select.Item value="cherry">Cherry</Select.Item>
+   *     </Select.Group>
+   *     <Select.Separator />
+   *     <Select.Group>
+   *       <Select.Label>Veggies</Select.Label>
+   *       <Select.Item value="carrot">Carrot</Select.Item>
+   *       <Select.Item value="cucumber">Cucumber</Select.Item>
+   *     </Select.Group>
+   *   </Select.Content>
+   * </Select.Root>
+   * ```
+   */
+  readonly Separator: typeof SelectSeparatorComponent;
+  /**
+   * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.
+   *
+   * @see https://mantle.ngrok.com/components/forms/select#selecttrigger
+   *
+   * @example
+   * ```tsx
+   * <Select.Root>
+   *   <Select.Trigger>
+   *     <Select.Value placeholder="Select a fruit" />
+   *   </Select.Trigger>
+   *   <Select.Content>
+   *     <Select.Group>
+   *       <Select.Label>Fruits</Select.Label>
+   *       <Select.Item value="apple">Apple</Select.Item>
+   *       <Select.Item value="banana">Banana</Select.Item>
+   *       <Select.Item value="cherry">Cherry</Select.Item>
+   *     </Select.Group>
+   *     <Select.Separator />
+   *     <Select.Group>
+   *       <Select.Label>Veggies</Select.Label>
+   *       <Select.Item value="carrot">Carrot</Select.Item>
+   *       <Select.Item value="cucumber">Cucumber</Select.Item>
+   *     </Select.Group>
+   *   </Select.Content>
+   * </Select.Root>
+   * ```
+   */
+  readonly Trigger: typeof Trigger;
+  /**
+   * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.
+   *
+   * @see https://mantle.ngrok.com/components/forms/select#selectvalue
+   *
+   * @example
+   * ```tsx
+   * <Select.Root>
+   *   <Select.Trigger>
+   *     <Select.Value placeholder="Select a fruit" />
+   *   </Select.Trigger>
+   *   <Select.Content>
+   *     <Select.Group>
+   *       <Select.Label>Fruits</Select.Label>
+   *       <Select.Item value="apple">Apple</Select.Item>
+   *       <Select.Item value="banana">Banana</Select.Item>
+   *       <Select.Item value="cherry">Cherry</Select.Item>
+   *     </Select.Group>
+   *     <Select.Separator />
+   *     <Select.Group>
+   *       <Select.Label>Veggies</Select.Label>
+   *       <Select.Item value="carrot">Carrot</Select.Item>
+   *       <Select.Item value="cucumber">Cucumber</Select.Item>
+   *     </Select.Group>
+   *   </Select.Content>
+   * </Select.Root>
+   * ```
+   */
+  readonly Value: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { Select as t };

package/dist/select.d.ts

@@ -1,2 +1,2 @@
-import { t as Select } from "./select-Bwt2YduR.js";
+import { t as Select } from "./select-idm1jy7y.js";
 export { Select };

package/dist/select.js

@@ -1 +1 @@
-import{t as e}from"./select-D-5u0Blc.js";export{e as Select};
+import{t as e}from"./select-SR_9-bxA.js";export{e as Select};