@ngrok/mantle 0.79.2 → 0.80.0

package/dist/combobox.d.ts

@@ -1,5 +1,7 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
 import { o as WithValidation } from "./validation-7QeiTFwl.js";
+import { n as Separator } from "./separator-B5UmkVRL.js";
+import { ComponentProps } from "react";
 import * as Primitive from "@ariakit/react";
 //#region src/components/combobox/combobox.d.ts
 type ComboboxProps = Primitive.ComboboxProviderProps;
@@ -32,11 +34,191 @@ declare const Root: {
   displayName: string;
 };
 type ComboboxInputProps = Omit<Primitive.ComboboxProps, "render"> & WithValidation;
+/**
+ * Renders a combobox input element that can be used to filter a list of items.
+ *
+ * @see https://mantle.ngrok.com/components/forms/combobox#comboboxinput
+ *
+ * @example
+ * ```tsx
+ * <Combobox.Root>
+ *   <Combobox.Input />
+ *   <Combobox.Content>
+ *     <Combobox.Item value="Apple" />
+ *     <Combobox.Item value="Banana" />
+ *   </Combobox.Content>
+ * </Combobox.Root>
+ * ```
+ */
+declare const Input: {
+  ({ "aria-invalid": _ariaInvalid, autoComplete, autoSelect, className, ref, validation: _validation, ...props }: ComboboxInputProps): import("react").JSX.Element;
+  displayName: string;
+};
 type ComboboxContentProps = Omit<Primitive.ComboboxPopoverProps, "render"> & WithAsChild;
+/**
+ * Renders a popover that contains combobox content, e.g. Combobox.Items, Combobox.Groups, and Combobox.Separators.
+ *
+ * `Combobox.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/combobox#comboboxcontent
+ *
+ * @example
+ * ```tsx
+ * <Combobox.Root>
+ *   <Combobox.Input />
+ *   <Combobox.Content>
+ *     <Combobox.Item value="Apple" />
+ *     <Combobox.Item value="Banana" />
+ *   </Combobox.Content>
+ * </Combobox.Root>
+ * ```
+ */
+declare const Content: {
+  ({ asChild, children, className, ref, sameWidth, unmountOnHide, ...props }: ComboboxContentProps): import("react").JSX.Element;
+  displayName: string;
+};
 type ComboboxItemProps = Omit<Primitive.ComboboxItemProps, "render"> & WithAsChild;
+/**
+ * Renders a combobox item inside a Combobox.Content component.
+ *
+ * @see https://mantle.ngrok.com/components/forms/combobox#comboboxitem
+ *
+ * @example
+ * ```tsx
+ * <Combobox.Root>
+ *   <Combobox.Input />
+ *   <Combobox.Content>
+ *     <Combobox.Item value="Apple" />
+ *     <Combobox.Item value="Banana" />
+ *     <Combobox.Item value="Orange" />
+ *   </Combobox.Content>
+ * </Combobox.Root>
+ * ```
+ */
+declare const Item: {
+  ({ asChild, children, className, focusOnHover, ref, value, ...props }: ComboboxItemProps): import("react").JSX.Element;
+  displayName: string;
+};
 type ComboboxGroupProps = Omit<Primitive.ComboboxGroupProps, "render"> & WithAsChild;
+/**
+ * Renders a group for Combobox.Item elements.
+ *
+ * Optionally, a Combobox.GroupLabel can be rendered as a child to provide a label for the group.
+ *
+ * You should only reach for this component when it semantically makes sense to group items together, such as when a label is needed.
+ *
+ * @see https://mantle.ngrok.com/components/forms/combobox#comboboxgroup
+ *
+ * @example
+ * ```tsx
+ * <Combobox.Root>
+ *   <Combobox.Input />
+ *   <Combobox.Content>
+ *     <Combobox.Group>
+ *       <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>
+ *       <Combobox.Item value="Apple" />
+ *       <Combobox.Item value="Banana" />
+ *     </Combobox.Group>
+ *   </Combobox.Content>
+ * </Combobox.Root>
+ * ```
+ */
+declare const Group: {
+  ({ asChild, children, className, ref, ...props }: ComboboxGroupProps): import("react").JSX.Element;
+  displayName: string;
+};
 type ComboboxGroupLabelProps = Omit<Primitive.ComboboxGroupLabelProps, "render"> & WithAsChild;
+/**
+ * Renders a label in a combobox group.
+ *
+ * This component should be wrapped with Combobox.Group so the aria-labelledby is correctly set on the group element.
+ *
+ * You should only reach for this component when it semantically makes sense to group items together, such as when a label is needed.
+ *
+ * @see https://mantle.ngrok.com/components/forms/combobox#comboboxgrouplabel
+ *
+ * @example
+ * ```tsx
+ * <Combobox.Root>
+ *   <Combobox.Input />
+ *   <Combobox.Content>
+ *     <Combobox.Group>
+ *       <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>
+ *       <Combobox.Item value="Apple" />
+ *       <Combobox.Item value="Banana" />
+ *     </Combobox.Group>
+ *   </Combobox.Content>
+ * </Combobox.Root>
+ * ```
+ */
+declare const GroupLabel: {
+  ({ asChild, children, className, ref, ...props }: ComboboxGroupLabelProps): import("react").JSX.Element;
+  displayName: string;
+};
 type ComboboxItemValueProps = Omit<Primitive.ComboboxItemValueProps<"span">, "render"> & WithAsChild;
+/**
+ * Highlights the match between the current Combobox.Input value (userValue) and parent Combobox.Item value.
+ *
+ * Renders a span element with the combobox item value as children.
+ * The value is split into span elements.
+ * Portions of the value matching the user input will have a data-user-value attribute, while the rest will have a data-autocomplete-value attribute.
+ *
+ * Should only be used as a child of Combobox.Item.
+ * The item value is automatically set to the value of the closest Combobox.Item component's value prop.
+ * The user input value is automatically set to the combobox store's value state.
+ * Both values can be overridden by providing the value and userValue props, respectively.
+ *
+ * @see https://mantle.ngrok.com/components/forms/combobox#comboboxitemvalue
+ *
+ * @example
+ * ```tsx
+ * <Combobox.Root>
+ *   <Combobox.Input />
+ *   <Combobox.Content>
+ *     <Combobox.Item value="Apple">
+ *       🍎
+ *       <Combobox.ItemValue />
+ *     </Combobox.Item>
+ *     <Combobox.Item value="Banana">
+ *       🍌
+ *       <Combobox.ItemValue />
+ *     </Combobox.Item>
+ *   </Combobox.Content>
+ * </Combobox.Root>
+ * ```
+ */
+declare const ItemValue: {
+  ({ asChild, className, ref, ...props }: ComboboxItemValueProps): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * Renders a separator between Combobox.Items or Combobox.Groups.
+ *
+ * @see https://mantle.ngrok.com/components/forms/combobox#comboboxseparator
+ *
+ * @example
+ * ```tsx
+ * <Combobox.Root>
+ *   <Combobox.Input />
+ *   <Combobox.Content>
+ *     <Combobox.Group>
+ *       <Combobox.Item value="Apple" />
+ *       <Combobox.Item value="Banana" />
+ *     </Combobox.Group>
+ *     <Combobox.Separator />
+ *     <Combobox.Item>
+ *       Click me!
+ *     </Combobox.Item>
+ *   </Combobox.Content>
+ * </Combobox.Root>
+ * ```
+ */
+declare const ComboboxSeparatorComponent: {
+  ({ className, ref, ...props }: ComponentProps<typeof Separator>): import("react").JSX.Element;
+  displayName: string;
+};
 /**
  * Fill in a React input field with autocomplete & autosuggest functionalities.
  * Choose from a list of suggested values with full keyboard support.
@@ -126,7 +308,7 @@ declare const Combobox: {
    * </Combobox.Root>
    * ```
    */
-  readonly Content: import("react").ForwardRefExoticComponent<Omit<ComboboxContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Content: typeof Content;
   /**
    * Renders a group for Combobox.Item elements.
    *
@@ -146,7 +328,7 @@ declare const Combobox: {
    * </Combobox.Root>
    * ```
    */
-  readonly Group: import("react").ForwardRefExoticComponent<Omit<ComboboxGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Group: typeof Group;
   /**
    * Renders a label in a combobox group.
    *
@@ -166,7 +348,7 @@ declare const Combobox: {
    * </Combobox.Root>
    * ```
    */
-  readonly GroupLabel: import("react").ForwardRefExoticComponent<Omit<ComboboxGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly GroupLabel: typeof GroupLabel;
   /**
    * Renders a combobox input element that can be used to filter a list of items.
    *
@@ -183,7 +365,7 @@ declare const Combobox: {
    * </Combobox.Root>
    * ```
    */
-  readonly Input: import("react").ForwardRefExoticComponent<Omit<ComboboxInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  readonly Input: typeof Input;
   /**
    * Renders a combobox item inside a Combobox.Content component.
    *
@@ -201,7 +383,7 @@ declare const Combobox: {
    * </Combobox.Root>
    * ```
    */
-  readonly Item: import("react").ForwardRefExoticComponent<Omit<ComboboxItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Item: typeof Item;
   /**
    * Highlights the match between the current Combobox.Input value and parent Combobox.Item value.
    *
@@ -224,7 +406,7 @@ declare const Combobox: {
    * </Combobox.Root>
    * ```
    */
-  readonly ItemValue: import("react").ForwardRefExoticComponent<Omit<ComboboxItemValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  readonly ItemValue: typeof ItemValue;
   /**
    * Renders a separator between Combobox.Items or Combobox.Groups.
    *
@@ -247,10 +429,7 @@ declare const Combobox: {
    * </Combobox.Root>
    * ```
    */
-  readonly Separator: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & WithAsChild & {
-    orientation?: "horizontal" | "vertical";
-    semantic?: boolean;
-  }, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Separator: typeof ComboboxSeparatorComponent;
 };
 //#endregion
 export { Combobox };

package/dist/combobox.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DmPrjM7N.js";import{a as n,r}from"./validation-Bpptk_9t.js";import{n as i}from"./separator-kBnnv3Cw.js";import{createContext as a,forwardRef as o}from"react";import{jsx as s}from"react/jsx-runtime";import*as c from"@ariakit/react";const l=({children:e,...t})=>s(c.ComboboxProvider,{...t,children:e});l.displayName=`Combobox`;const u=o(({"aria-invalid":t,autoComplete:i=`list`,autoSelect:a=`always`,className:o,validation:l,...u},d)=>{let f=n(),{ariaInvalid:p,validation:m}=r({"aria-invalid":t,validation:l??f});return s(c.Combobox,{"aria-invalid":p,autoComplete:i,autoSelect:a,"data-slot":`combobox-input`,className:e(`pointer-coarse:text-base h-9 text-sm`,`bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong font-sans`,`placeholder:text-placeholder`,`aria-disabled:opacity-50`,`hover:border-neutral-400`,`focus:outline-hidden focus:ring-4 aria-expanded:ring-4`,`focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent`,`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`,`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`,`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`,`autofill:shadow-(--color-blue-50) autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]`,o),"data-validation":m||void 0,ref:d,...u})});u.displayName=`ComboboxInput`;const d=o(({asChild:n=!1,children:r,className:i,sameWidth:a=!0,unmountOnHide:o=!0,...l},u)=>s(c.ComboboxPopover,{"data-slot":`combobox-content`,className:e(`border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 space-y-px font-sans focus:outline-hidden`,i),ref:u,render:n?({ref:e,...n})=>s(t,{ref:e,...n}):void 0,sameWidth:a,unmountOnHide:o,...l,children:r}));d.displayName=`ComboboxContent`;const f=a(void 0),p=o(({asChild:n=!1,children:r,className:i,focusOnHover:a=!0,value:o,...l},u)=>s(f.Provider,{value:o,children:s(c.ComboboxItem,{"data-slot":`combobox-item`,className:e(`cursor-pointer rounded-md px-2 py-1.5 text-strong text-sm flex min-w-0 gap-2 items-center [&>svg]:size-5 [&_svg]:shrink-0`,`data-active-item:bg-active-menu-item`,`aria-disabled:opacity-50`,i),focusOnHover:a,ref:u,render:n?({ref:e,...n})=>s(t,{ref:e,...n}):void 0,value:o,...l,children:r})}));p.displayName=`ComboboxItem`;const m=o(({asChild:n=!1,children:r,className:i,...a},o)=>s(c.ComboboxGroup,{"data-slot":`combobox-group`,className:e(`space-y-px`,i),ref:o,render:n?({ref:e,...n})=>s(t,{ref:e,...n}):void 0,...a,children:r}));m.displayName=`ComboboxGroup`;const h=o(({asChild:n=!1,children:r,className:i,...a},o)=>s(c.ComboboxGroupLabel,{"data-slot":`combobox-group-label`,className:e(`text-muted px-2 py-1 text-xs font-medium`,i),ref:o,render:n?({ref:e,...n})=>s(t,{ref:e,...n}):void 0,...a,children:r}));h.displayName=`ComboboxGroupLabel`;const g=o(({asChild:n=!1,className:r,...i},a)=>s(c.ComboboxItemValue,{"data-slot":`combobox-item-value`,className:e(`*:data-user-value:font-medium flex-1 shrink-0 text-strong font-normal`,r),ref:a,render:n?({ref:e,...n})=>s(t,{ref:e,...n}):void 0,...i}));g.displayName=`ComboboxItemValue`;const _=o(({className:t,...n},r)=>s(i,{ref:r,"data-slot":`combobox-separator`,className:e(`-mx-1.25 my-1 w-auto`,t),...n}));_.displayName=`ComboboxSeparator`;const v={Root:l,Content:d,Group:m,GroupLabel:h,Input:u,Item:p,ItemValue:g,Separator:_};export{v as Combobox};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{a as n,r}from"./validation-Bpptk_9t.js";import{n as i}from"./separator-bpE_kooz.js";import{createContext as a}from"react";import{jsx as o}from"react/jsx-runtime";import*as s from"@ariakit/react";const c=({children:e,...t})=>o(s.ComboboxProvider,{...t,children:e});c.displayName=`Combobox`;const l=({"aria-invalid":t,autoComplete:i=`list`,autoSelect:a=`always`,className:c,ref:l,validation:u,...d})=>{let f=n(),{ariaInvalid:p,validation:m}=r({"aria-invalid":t,validation:u??f});return o(s.Combobox,{"aria-invalid":p,autoComplete:i,autoSelect:a,"data-slot":`combobox-input`,className:e(`pointer-coarse:text-base h-9 text-sm`,`bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong font-sans`,`placeholder:text-placeholder`,`aria-disabled:opacity-50`,`hover:border-neutral-400`,`focus:outline-hidden focus:ring-4 aria-expanded:ring-4`,`focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent`,`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`,`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`,`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`,`autofill:shadow-(--color-blue-50) autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]`,c),"data-validation":m||void 0,ref:l,...d})};l.displayName=`ComboboxInput`;const u=({asChild:n=!1,children:r,className:i,ref:a,sameWidth:c=!0,unmountOnHide:l=!0,...u})=>o(s.ComboboxPopover,{"data-slot":`combobox-content`,className:e(`border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 space-y-px font-sans focus:outline-hidden`,i),ref:a,render:n?({ref:e,...n})=>o(t,{ref:e,...n}):void 0,sameWidth:c,unmountOnHide:l,...u,children:r});u.displayName=`ComboboxContent`;const d=a(void 0),f=({asChild:n=!1,children:r,className:i,focusOnHover:a=!0,ref:c,value:l,...u})=>o(d.Provider,{value:l,children:o(s.ComboboxItem,{"data-slot":`combobox-item`,className:e(`cursor-pointer rounded-md px-2 py-1.5 text-strong text-sm flex min-w-0 gap-2 items-center [&>svg]:size-5 [&_svg]:shrink-0`,`data-active-item:bg-active-menu-item`,`aria-disabled:opacity-50`,i),focusOnHover:a,ref:c,render:n?({ref:e,...n})=>o(t,{ref:e,...n}):void 0,value:l,...u,children:r})});f.displayName=`ComboboxItem`;const p=({asChild:n=!1,children:r,className:i,ref:a,...c})=>o(s.ComboboxGroup,{"data-slot":`combobox-group`,className:e(`space-y-px`,i),ref:a,render:n?({ref:e,...n})=>o(t,{ref:e,...n}):void 0,...c,children:r});p.displayName=`ComboboxGroup`;const m=({asChild:n=!1,children:r,className:i,ref:a,...c})=>o(s.ComboboxGroupLabel,{"data-slot":`combobox-group-label`,className:e(`text-muted px-2 py-1 text-xs font-medium`,i),ref:a,render:n?({ref:e,...n})=>o(t,{ref:e,...n}):void 0,...c,children:r});m.displayName=`ComboboxGroupLabel`;const h=({asChild:n=!1,className:r,ref:i,...a})=>o(s.ComboboxItemValue,{"data-slot":`combobox-item-value`,className:e(`*:data-user-value:font-medium flex-1 shrink-0 text-strong font-normal`,r),ref:i,render:n?({ref:e,...n})=>o(t,{ref:e,...n}):void 0,...a});h.displayName=`ComboboxItemValue`;const g=({className:t,ref:n,...r})=>o(i,{ref:n,"data-slot":`combobox-separator`,className:e(`-mx-1.25 my-1 w-auto`,t),...r});g.displayName=`ComboboxSeparator`;const _={Root:c,Content:u,Group:p,GroupLabel:m,Input:l,Item:f,ItemValue:h,Separator:g};export{_ as Combobox};