@ngrok/mantle 0.32.2 → 0.40.0

package/dist/select.d.ts

@@ -1,6 +1,6 @@
 import { W as WithAsChild } from './as-child-DJ7x3JFV.js';
 import * as react from 'react';
-import { SelectHTMLAttributes, ReactNode, FocusEvent } from 'react';
+import { ReactNode, FocusEvent, SelectHTMLAttributes } from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { W as WithValidation } from './types-DehRoXC5.js';
 
@@ -8,226 +8,256 @@ type WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, "aria-inval
 /**
  * Displays a list of options for the user to pick from—triggered by a button.
  *
- * @see https://mantle.ngrok.com/components/select#api-select
+ * @see https://mantle.ngrok.com/components/select
  *
  * @example
  * ```tsx
- * <Select>
- *   <SelectTrigger>
- *     <SelectValue placeholder="Select a fruit" />
- *   </SelectTrigger>
- *   <SelectContent>
- *     <SelectGroup>
- *       <SelectLabel>Fruits</SelectLabel>
- *       <SelectItem value="apple">Apple</SelectItem>
- *       <SelectItem value="banana">Banana</SelectItem>
- *       <SelectItem value="cherry">Cherry</SelectItem>
- *     </SelectGroup>
- *     <SelectSeparator />
- *     <SelectGroup>
- *       <SelectLabel>Veggies</SelectLabel>
- *       <SelectItem value="carrot">Carrot</SelectItem>
- *       <SelectItem value="cucumber">Cucumber</SelectItem>
- *     </SelectGroup>
- *   </SelectContent>
- * </Select>
+ * <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: react.ForwardRefExoticComponent<{
-    children?: ReactNode | undefined;
-} & {
-    autoComplete?: string;
-    defaultOpen?: boolean;
-    defaultValue?: string;
-    dir?: "ltr" | "rtl";
-    disabled?: boolean;
-    form?: string;
-    id?: string;
-    name?: string;
+declare const Select: {
     /**
-     * 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
+     * Displays a list of options for the user to pick from—triggered by a button.
+     *
+     * @see https://mantle.ngrok.com/components/select#api-select
+     *
+     * @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>
+     * ```
      */
-    onBlur?: (event: FocusEvent<HTMLButtonElement>) => void;
+    readonly Root: react.ForwardRefExoticComponent<{
+        children?: ReactNode | undefined;
+    } & {
+        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;
+        required?: boolean;
+        value?: string;
+    } & WithValidation & WithAriaInvalid & react.RefAttributes<HTMLButtonElement>>;
     /**
-     * Event handler called when the value changes.
-     * @deprecated Use `onValueChange` instead.
+     * 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.
+     *
+     * @see https://mantle.ngrok.com/components/select#api-select-content
+     *
+     * @example
+     * <Select.Root>
+     *   <Select.Trigger>
+     *     <Select.Value placeholder="Select a fruit" />
+     *   </Select.Trigger>
+     *   <Select.Content>
+     *     <Select.Item value="apple">Apple</Select.Item>
+     *     <Select.Item value="banana">Banana</Select.Item>
+     *     <Select.Item value="cherry">Cherry</Select.Item>
+     *   </Select.Content>
+     * </Select.Root>
      */
-    onChange?: (value: string) => void;
-    onOpenChange?(open: boolean): void;
-    onValueChange?(value: string): void;
-    open?: boolean;
-    required?: boolean;
-    value?: string;
-} & WithValidation & WithAriaInvalid & react.RefAttributes<HTMLButtonElement>>;
-/**
- * A group of related options within a select menu. Similar to an html `<optgroup>` element.
- * Use in conjunction with SelectLabel to ensure good accessibility via automatic labelling.
- *
- * @example
- * <Select>
- *   <SelectTrigger>
- *     <SelectValue placeholder="Select a fruit" />
- *   </SelectTrigger>
- *   <SelectContent>
- *     <SelectGroup>
- *       <SelectLabel>Fruits</SelectLabel>
- *       <SelectItem value="apple">Apple</SelectItem>
- *       <SelectItem value="banana">Banana</SelectItem>
- *       <SelectItem value="cherry">Cherry</SelectItem>
- *     </SelectGroup>
- *     <SelectGroup>
- *       <SelectLabel>Veggies</SelectLabel>
- *       <SelectItem value="carrot">Carrot</SelectItem>
- *       <SelectItem value="cucumber">Cucumber</SelectItem>
- *     </SelectGroup>
- *   </SelectContent>
- * </Select>
- *
- * @see https://mantle.ngrok.com/components/select#api-select-group
- */
-declare const SelectGroup: react.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & react.RefAttributes<HTMLDivElement>>;
-/**
- * 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.
- *
- * @example
- * <Select>
- *   <SelectTrigger>
- *     <SelectValue placeholder="Select a fruit" />
- *   </SelectTrigger>
- *   <SelectContent>
- *     <SelectItem value="apple">Apple</SelectItem>
- *     <SelectItem value="banana">Banana</SelectItem>
- *     <SelectItem value="cherry">Cherry</SelectItem>
- *   </SelectContent>
- * </Select>
- *
- * @see https://mantle.ngrok.com/components/select#api-select-value
- */
-declare const SelectValue: react.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & react.RefAttributes<HTMLSpanElement>>;
-/**
- * The button that toggles the select. The SelectContent will position itself adjacent to the trigger.
- *
- * @see https://mantle.ngrok.com/components/select#api-select-trigger
- *
- * @example
- * ```tsx
- * <Select>
- *   <SelectTrigger>
- *     <SelectValue placeholder="Select a fruit" />
- *   </SelectTrigger>
- *   <SelectContent>
- *     <SelectItem value="apple">Apple</SelectItem>
- *     <SelectItem value="banana">Banana</SelectItem>
- *     <SelectItem value="cherry">Cherry</SelectItem>
- *   </SelectContent>
- * </Select>
- * ```
- */
-declare const SelectTrigger: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & WithAriaInvalid & WithValidation & react.RefAttributes<HTMLButtonElement>>;
-/**
- * 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.
- *
- * @example
- * <Select>
- *   <SelectTrigger>
- *     <SelectValue placeholder="Select a fruit" />
- *   </SelectTrigger>
- *   <SelectContent>
- *     <SelectItem value="apple">Apple</SelectItem>
- *     <SelectItem value="banana">Banana</SelectItem>
- *     <SelectItem value="cherry">Cherry</SelectItem>
- *   </SelectContent>
- * </Select>
- *
- * @see https://mantle.ngrok.com/components/select#api-select-content
- */
-declare const SelectContent: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+    readonly Content: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+        /**
+         * 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";
+    } & react.RefAttributes<HTMLDivElement>>;
     /**
-     * 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"
+     * 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/select#api-select-group
+     *
+     * @example
+     * <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.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>
      */
-    width?: "trigger" | "content";
-} & react.RefAttributes<HTMLDivElement>>;
-/**
- * Used to render the label of a group. It won't be focusable using arrow keys.
- *
- * @example
- * <Select>
- *   <SelectTrigger>
- *     <SelectValue placeholder="Select a fruit" />
- *   </SelectTrigger>
- *   <SelectContent>
- *     <SelectGroup>
- *       <SelectLabel>Fruits</SelectLabel>
- *       <SelectItem value="apple">Apple</SelectItem>
- *       <SelectItem value="banana">Banana</SelectItem>
- *       <SelectItem value="cherry">Cherry</SelectItem>
- *     </SelectGroup>
- *     <SelectGroup>
- *       <SelectLabel>Veggies</SelectLabel>
- *       <SelectItem value="carrot">Carrot</SelectItem>
- *       <SelectItem value="cucumber">Cucumber</SelectItem>
- *     </SelectGroup>
- *   </SelectContent>
- * </Select>
- *
- * @see https://mantle.ngrok.com/components/select#api-select-label
- */
-declare const SelectLabel: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-/**
- * 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.
- *
- * @example
- * <Select>
- *   <SelectTrigger>
- *     <SelectValue placeholder="Select a fruit" />
- *   </SelectTrigger>
- *   <SelectContent>
- *     <SelectItem value="apple">Apple</SelectItem>
- *     <SelectItem value="banana">Banana</SelectItem>
- *     <SelectItem value="cherry">Cherry</SelectItem>
- *   </SelectContent>
- * </Select>
- *
- * @see https://mantle.ngrok.com/components/select#api-select-item
- */
-declare const SelectItem: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
-    icon?: ReactNode;
-} & react.RefAttributes<HTMLDivElement>>;
-/**
- * Used to visually separate items or groups of items in the select content.
- *
- * @example
- * <Select>
- *   <SelectTrigger>
- *     <SelectValue placeholder="Select a fruit" />
- *   </SelectTrigger>
- *   <SelectContent>
- *     <SelectGroup>
- *       <SelectLabel>Fruits</SelectLabel>
- *       <SelectItem value="apple">Apple</SelectItem>
- *       <SelectItem value="banana">Banana</SelectItem>
- *       <SelectItem value="cherry">Cherry</SelectItem>
- *     </SelectGroup>
- *     <SelectSeparator />
- *     <SelectGroup>
- *       <SelectLabel>Veggies</SelectLabel>
- *       <SelectItem value="carrot">Carrot</SelectItem>
- *       <SelectItem value="cucumber">Cucumber</SelectItem>
- *     </SelectGroup>
- *   </SelectContent>
- * </Select>
- *
- * @see https://mantle.ngrok.com/components/select#api-select-separator
- */
-declare const SelectSeparator: react.ForwardRefExoticComponent<Omit<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & WithAsChild & {
-    orientation?: "horizontal" | "vertical";
-    semantic?: boolean;
-}, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    readonly Group: react.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * 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/select#api-select-item
+     *
+     * @example
+     * <Select.Root>
+     *   <Select.Trigger>
+     *     <Select.Value placeholder="Select a fruit" />
+     *   </Select.Trigger>
+     *   <Select.Content>
+     *     <Select.Item value="apple">Apple</Select.Item>
+     *     <Select.Item value="banana">Banana</Select.Item>
+     *     <Select.Item value="cherry">Cherry</Select.Item>
+     *   </Select.Content>
+     * </Select.Root>
+     */
+    readonly Item: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+        icon?: ReactNode;
+    } & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * Used to render the label of a group. It won't be focusable using arrow keys.
+     *
+     * @see https://mantle.ngrok.com/components/select#api-select-label
+     *
+     * @example
+     * <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.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: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * Used to visually separate items or groups of items in the select content.
+     *
+     * @see https://mantle.ngrok.com/components/select#api-select-separator
+     *
+     * @example
+     * <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: react.ForwardRefExoticComponent<Omit<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & WithAsChild & {
+        orientation?: "horizontal" | "vertical";
+        semantic?: boolean;
+    }, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.
+     *
+     * @see https://mantle.ngrok.com/components/select#api-select-trigger
+     *
+     * @example
+     * ```tsx
+     * <Select.Root>
+     *   <Select.Trigger>
+     *     <Select.Value placeholder="Select a fruit" />
+     *   </Select.Trigger>
+     *   <Select.Content>
+     *     <Select.Item value="apple">Apple</Select.Item>
+     *     <Select.Item value="banana">Banana</Select.Item>
+     *     <Select.Item value="cherry">Cherry</Select.Item>
+     *   </Select.Content>
+     * </Select.Root>
+     * ```
+     */
+    readonly Trigger: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & WithAriaInvalid & WithValidation & react.RefAttributes<HTMLButtonElement>>;
+    /**
+     * 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/select#api-select-value
+     *
+     * @example
+     * <Select.Root>
+     *   <Select.Trigger>
+     *     <Select.Value placeholder="Select a fruit" />
+     *   </Select.Trigger>
+     *   <Select.Content>
+     *     <Select.Item value="apple">Apple</Select.Item>
+     *     <Select.Item value="banana">Banana</Select.Item>
+     *     <Select.Item value="cherry">Cherry</Select.Item>
+     *   </Select.Content>
+     * </Select.Root>
+     */
+    readonly Value: react.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & react.RefAttributes<HTMLSpanElement>>;
+};
 
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue };
+export { Select };

package/dist/select.js

@@ -1,2 +1,2 @@
-import{a as e,b as t,c as l,d as S,e as c,f as r,g as o,h as a}from"./chunk-3X4AKTRA.js";import"./chunk-MF2QITTY.js";import"./chunk-J6ZF5J72.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import"./chunk-AZ56JGNY.js";export{e as Select,c as SelectContent,t as SelectGroup,o as SelectItem,r as SelectLabel,a as SelectSeparator,S as SelectTrigger,l as SelectValue};
+import{a as e}from"./chunk-4GGDPFNZ.js";import"./chunk-MF2QITTY.js";import"./chunk-J6ZF5J72.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import"./chunk-AZ56JGNY.js";export{e as Select};
 //# sourceMappingURL=select.js.map