@ngrok/mantle 0.71.1 → 0.73.0

package/dist/select-DOgdZO0Q.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"select-DOgdZO0Q.js","names":[],"sources":["../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport { CaretUpIcon } from \"@phosphor-icons/react/CaretUp\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tFocusEvent,\n\tPropsWithChildren,\n\tReactNode,\n\tRef,\n\tSelectHTMLAttributes,\n} from \"react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport type { WithValidation } from \"../input/types.js\";\nimport { Separator } from \"../separator/separator.js\";\n\ntype WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, \"aria-invalid\">;\ntype SelectContextType = WithValidation &\n\tWithAriaInvalid & {\n\t\t/**\n\t\t * Ref for the trigger button.\n\t\t */\n\t\tref?: Ref<HTMLButtonElement>;\n\t\t/**\n\t\t * Event handler called when Select blurs.\n\t\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t\t */\n\t\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t} & Pick<ComponentProps<\"button\">, \"id\">;\n\nconst SelectContext = createContext<SelectContextType>({});\n\ntype SelectProps = PropsWithChildren & {\n\tautoComplete?: string;\n\tdefaultOpen?: boolean;\n\tdefaultValue?: string;\n\tdir?: \"ltr\" | \"rtl\";\n\tdisabled?: boolean;\n\tform?: string;\n\tid?: string;\n\tname?: string;\n\t/**\n\t * Event handler called when Select blurs.\n\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t */\n\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t/**\n\t * Event handler called when the value changes.\n\t * @deprecated Use `onValueChange` instead.\n\t */\n\tonChange?: (value: string) => void;\n\tonOpenChange?(open: boolean): void;\n\tonValueChange?(value: string): void;\n\topen?: boolean;\n\trequired?: boolean;\n\tvalue?: string;\n} & WithValidation &\n\tWithAriaInvalid;\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n *\n * Use Select for a small, finite list of options (~2-15) where the user picks exactly one\n * and search/filtering is unnecessary. For larger lists or async/searchable data, use\n * Combobox. For picking multiple options, use MultiSelect.\n *\n * @see https://mantle.ngrok.com/components/select#selectroot\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Root = forwardRef<HTMLButtonElement, SelectProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tchildren,\n\t\t\tid,\n\t\t\tvalidation,\n\t\t\tonBlur,\n\t\t\tonValueChange,\n\t\t\tonChange,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<SelectPrimitive.Root\n\t\t\t\t{...props}\n\t\t\t\tonValueChange={(value) => {\n\t\t\t\t\tonChange?.(value);\n\t\t\t\t\tonValueChange?.(value);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SelectContext.Provider\n\t\t\t\t\tvalue={{ \"aria-invalid\": _ariaInvalid, id, validation, onBlur, ref }}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectContext.Provider>\n\t\t\t</SelectPrimitive.Root>\n\t\t);\n\t},\n);\nRoot.displayName = \"Select\";\n\n/**\n * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n *\n * @see https://mantle.ngrok.com/components/select#selectgroup\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Group = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Group>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Group>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Group\n\t\tref={ref}\n\t\tdata-slot=\"select-group\"\n\t\tclassName={cx(\"space-y-px\", className)}\n\t\t{...props}\n\t/>\n));\nGroup.displayName = \"SelectGroup\";\n\n/**\n * 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.\n *\n * @see https://mantle.ngrok.com/components/select#selectvalue\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Value = SelectPrimitive.Value;\nValue.displayName = \"SelectValue\";\n\ntype SelectTriggerProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &\n\tWithAriaInvalid &\n\tWithValidation;\n\n/**\n * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n *\n * @see https://mantle.ngrok.com/components/select#selecttrigger\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Trigger = forwardRef<ComponentRef<typeof SelectPrimitive.Trigger>, SelectTriggerProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": ariaInValidProp,\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tid: propId,\n\t\t\tvalidation: propValidation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ctx = useContext(SelectContext);\n\t\tconst rawAriaInvalid = ctx[\"aria-invalid\"] ?? ariaInValidProp;\n\t\tconst isInvalid = rawAriaInvalid != null && rawAriaInvalid !== \"false\";\n\t\tconst rawValidation = ctx.validation ?? propValidation;\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof rawValidation === \"function\"\n\t\t\t\t? rawValidation()\n\t\t\t\t: rawValidation;\n\t\tconst ariaInvalid = rawAriaInvalid ?? validation === \"error\";\n\t\tconst id = ctx.id ?? propId;\n\n\t\treturn (\n\t\t\t<SelectPrimitive.Trigger\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-slot=\"select-trigger\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"h-9 text-sm\",\n\t\t\t\t\t\"border-form bg-form text-strong font-sans placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left\",\n\t\t\t\t\t\"hover:border-neutral-400\",\n\t\t\t\t\t\"focus:outline-hidden focus:ring-4 aria-expanded:ring-4\",\n\t\t\t\t\t\"focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tid={id}\n\t\t\t\tref={composeRefs(ref, ctx.ref)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<SelectPrimitive.Icon asChild>\n\t\t\t\t\t<Icon svg={<CaretDownIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t\t</SelectPrimitive.Icon>\n\t\t\t</SelectPrimitive.Trigger>\n\t\t);\n\t},\n);\nTrigger.displayName = \"SelectTrigger\";\n\n/**\n * The button that scrolls the select content up.\n * @private\n */\nconst SelectScrollUpButton = forwardRef<\n\tComponentRef<typeof SelectPrimitive.ScrollUpButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollUpButton\n\t\tref={ref}\n\t\tclassName={cx(\"flex cursor-default items-center justify-center py-1\", className)}\n\t\t{...props}\n\t>\n\t\t<Icon svg={<CaretUpIcon weight=\"bold\" />} className=\"size-4\" />\n\t</SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = \"SelectScrollUpButton\";\n\n/**\n * The button that scrolls the select content down.\n * @private\n */\nconst SelectScrollDownButton = forwardRef<\n\tComponentRef<typeof SelectPrimitive.ScrollDownButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollDownButton\n\t\tref={ref}\n\t\tclassName={cx(\"flex cursor-default items-center justify-center py-1\", className)}\n\t\t{...props}\n\t>\n\t\t<Icon svg={<CaretDownIcon weight=\"bold\" />} className=\"size-4\" />\n\t</SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = \"SelectScrollDownButton\";\n\ntype SelectContentProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {\n\t/**\n\t * The width of the content. Defaults to the width of the trigger.\n\t * If set to \"content\", the content will use the intrinsic content width; it will be the width of the longest/widest item.\n\t * @default \"trigger\"\n\t */\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The component that pops out when the select is open as a portal adjacent to the trigger button.\n * It contains a scrolling viewport of the select items.\n *\n * @see https://mantle.ngrok.com/components/select#selectcontent\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<typeof SelectPrimitive.Content>, SelectContentProps>(\n\t({ className, children, position = \"popper\", width = \"trigger\", ...props }, ref) => (\n\t\t<SelectPrimitive.Portal>\n\t\t\t<SelectPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"select-content\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md\",\n\t\t\t\t\t\"bg-popover font-sans\",\n\t\t\t\t\tposition === \"popper\" &&\n\t\t\t\t\t\t\"data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-(--radix-select-content-available-height)\",\n\t\t\t\t\twidth === \"trigger\" && \"w-(--radix-select-trigger-width)\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tposition={position}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SelectScrollUpButton />\n\t\t\t\t<SelectPrimitive.Viewport\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"p-1 space-y-px\",\n\t\t\t\t\t\tposition === \"popper\" && \"h-(--radix-select-trigger-height) w-full\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectPrimitive.Viewport>\n\t\t\t\t<SelectScrollDownButton />\n\t\t\t</SelectPrimitive.Content>\n\t\t</SelectPrimitive.Portal>\n\t),\n);\nContent.displayName = \"SelectContent\";\n\n/**\n * Used to render the label of a group. It won't be focusable using arrow keys.\n *\n * @see https://mantle.ngrok.com/components/select#selectlabel\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Label = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Label\n\t\tref={ref}\n\t\tdata-slot=\"select-label\"\n\t\tclassName={cx(\"px-2 py-1.5 text-sm font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = \"SelectLabel\";\n\ntype SelectItemProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {\n\ticon?: ReactNode;\n};\n\n/**\n * An option within a select menu. Similar to an html `<option>` element.\n * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.\n * Displays the children as the option's text.\n *\n * @see https://mantle.ngrok.com/components/select#selectitem\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Item = forwardRef<ComponentRef<typeof SelectPrimitive.Item>, SelectItemProps>(\n\t({ className, children, icon, ...props }, ref) => (\n\t\t<SelectPrimitive.Item\n\t\t\tref={ref}\n\t\t\tdata-slot=\"select-item\"\n\t\t\tclassName={cx(\n\t\t\t\t\"relative flex gap-2 w-full cursor-pointer select-none items-center rounded-md py-1.5 pl-2 pr-8 text-strong text-sm outline-hidden\",\n\t\t\t\t\"focus:bg-active-menu-item\",\n\t\t\t\t\"data-disabled:pointer-events-none data-disabled:opacity-50\",\n\t\t\t\t\"data-state-checked:bg-selected-menu-item\",\n\t\t\t\t\"focus:data-state-checked:bg-active-selected-menu-item\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{icon && <Icon svg={icon} />}\n\t\t\t<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\t\t\t<SelectPrimitive.ItemIndicator className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4 text-accent-600\" />\n\t\t\t</SelectPrimitive.ItemIndicator>\n\t\t</SelectPrimitive.Item>\n\t),\n);\nItem.displayName = \"SelectItem\";\n\n/**\n * Used to visually separate items or groups of items in the select content.\n *\n * @see https://mantle.ngrok.com/components/select#selectseparator\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst SelectSeparatorComponent = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tdata-slot=\"select-separator\"\n\t\tclassName={cx(\"-mx-1 my-1 h-px w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nSelectSeparatorComponent.displayName = \"SelectSeparator\";\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n *\n * Use Select for a small, finite list of options (~2-15) where the user picks exactly one\n * and search/filtering is unnecessary. For larger lists or async/searchable data, use\n * Combobox. For picking multiple options, use MultiSelect.\n *\n * @see https://mantle.ngrok.com/components/select\n *\n * @example\n * Composition:\n * ```\n * Select.Root\n * ├── Select.Trigger\n * │   └── Select.Value\n * └── Select.Content\n *     ├── Select.Group\n *     │   ├── Select.Label\n *     │   └── Select.Item\n *     └── Select.Separator\n * ```\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Select = {\n\t/**\n\t * Displays a list of options for the user to pick from—triggered by a button.\n\t *\n\t * Use Select for a small, finite list of options (~2-15) where the user picks exactly one\n\t * and search/filtering is unnecessary. For larger lists or async/searchable data, use\n\t * Combobox. For picking multiple options, use MultiSelect.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The component that pops out when the select is open as a portal adjacent to the trigger button.\n\t * It contains a scrolling viewport of the select items.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n\t * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectgroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * An option within a select menu. Similar to an html `<option>` element.\n\t * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.\n\t * Displays the children as the option's text.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * Used to render the label of a group. It won't be focusable using arrow keys.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectlabel\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tLabel,\n\t/**\n\t * Used to visually separate items or groups of items in the select content.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectseparator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tSeparator: SelectSeparatorComponent,\n\t/**\n\t * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selecttrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * 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.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectvalue\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tValue,\n} as const;\n\nexport {\n\t//,\n\tSelect,\n};\n"],"mappings":"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"}

package/dist/types-DG0WQLTL.d.ts

@@ -1,78 +0,0 @@
-//#region src/components/input/types.d.ts
-/**
- * (Not a Boolean attribute!) The autocomplete attribute takes as its value a space-separated string that describes what,
- * if any, type of autocomplete functionality the input should provide. A typical implementation of autocomplete recalls
- * previous values entered in the same input field, but more complex forms of autocomplete can exist. For instance, a
- * browser could integrate with a device's contacts list to autocomplete email addresses in an email input field.
- *
- * The autocomplete attribute is valid on hidden, text, search, url, tel, email, date, month, week, time, datetime-local,
- * number, range, color, and password. This attribute has no effect on input types that do not return numeric or text
- * data, being valid for all input types except checkbox, radio, file, or any of the button types.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
- */
-type AutoComplete = "off" | "on" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo";
-type WithAutoComplete = {
-  /**
-   * (Not a Boolean attribute!) The autocomplete attribute takes as its value a space-separated string that describes what,
-   * if any, type of autocomplete functionality the input should provide. A typical implementation of autocomplete recalls
-   * previous values entered in the same input field, but more complex forms of autocomplete can exist. For instance, a
-   * browser could integrate with a device's contacts list to autocomplete email addresses in an email input field.
-   *
-   * The autocomplete attribute is valid on hidden, text, search, url, tel, email, date, month, week, time, datetime-local,
-   * number, range, color, and password. This attribute has no effect on input types that do not return numeric or text
-   * data, being valid for all input types except checkbox, radio, file, or any of the button types.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
-   */
-  autoComplete?: AutoComplete;
-};
-/**
- * A string specifying the type of control to render. For example, to create a checkbox, a value of `"checkbox"` is used.
- * If omitted (or an unknown value is specified), the input type `"text"` is used, creating a plaintext input field.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
- */
-type InputType = "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week";
-type WithInputType = {
-  /**
-   * A string specifying the type of control to render. For example, to create a checkbox, a value of `"checkbox"` is used.
-   * If omitted (or an unknown value is specified), the input type `"text"` is used, creating a plaintext input field.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
-   */
-  type?: InputType;
-};
-/**
- * The validation state of the input.
- *
- * @example
- * the false type is useful when using short-circuiting logic, e.g.
- *
- * ```tsx
- * validation={field.state.meta.errors.length > 0 && "error"}
- * ```
- */
-type Validation = "error" | "success" | "warning" | false;
-/**
- * An input component with a prop for validation state.
- */
-type WithValidation = {
-  /**
-   * The validation state of the input.
-   * Can be a literal `Validation` value or a function that returns
-   * a `Validation` value.
-   *
-   *
-   * @example
-   * the false type is useful when using short-circuiting logic, e.g.
-   *
-   * ```tsx
-   * validation={field.state.meta.errors.length > 0 && "error"}
-   * ```
-   */
-  validation?: Validation | (() => Validation);
-};
-//#endregion
-export { WithInputType as a, WithAutoComplete as i, InputType as n, WithValidation as o, Validation as r, AutoComplete as t };
-//# sourceMappingURL=types-DG0WQLTL.d.ts.map

package/dist/use-copy-to-clipboard-C7vsjJe-.js

@@ -1,2 +0,0 @@
-import{t as e}from"./copy-to-clipboard-DjOD_Mwb.js";function t(){return e}export{t};
-//# sourceMappingURL=use-copy-to-clipboard-C7vsjJe-.js.map