@ngrok/mantle 0.70.2 → 0.71.0

package/dist/label.d.ts

@@ -2,23 +2,54 @@ import * as _$react from "react";
 
 //#region src/components/label/label.d.ts
 /**
- * A Label represents a caption for an item in a user interface. It is used to
- * provide a description or title for a form control, such as an input field,
- * checkbox, radio button, etc. The label is typically displayed next to the
- * form control and helps users understand its purpose.
+ * A caption for a form control — input, checkbox, radio, switch, select.
+ * Renders a native `<label>`. Pair every form control with a `Label` so the
+ * control has an accessible name, clicks on the label focus the control, and
+ * screen readers announce the field correctly.
+ *
+ * **When to use**
+ * - Every visible form control. Always.
+ * - Above or beside an input to describe it ("Email", "API key").
+ * - Wrapping a checkbox or radio next to its descriptive text.
+ *
+ * **When not to use**
+ * - For static UI text that isn't labeling a control — use a heading or
+ *   plain `<p>`/`<span>`.
+ * - As a substitute for `aria-label` on non-`<input>` widgets that don't
+ *   support `<label for>` association.
+ *
+ * **Two ways to associate.** Either wrap the control inside the `<Label>`
+ * (implicit association — simplest) or set `htmlFor` to the control's `id`
+ * (explicit — required when the control isn't a child).
+ *
+ * **Disabled state.** Pass `disabled` to render the label in a disabled
+ * style. Typically you'll want this to mirror the underlying control's
+ * disabled state so the visual treatment stays consistent.
  *
  * @see https://mantle.ngrok.com/components/label
  *
  * @example
  * ```tsx
- * <Label htmlFor="name">
- *   Name: <Input type="text" id="name" />
+ * import { Label } from "@ngrok/mantle/label";
+ * import { Input } from "@ngrok/mantle/input";
+ *
+ * // Implicit — control nested inside the label.
+ * <Label className="grid gap-1">
+ *   <span>Email</span>
+ *   <Input type="email" name="email" />
  * </Label>
  *
- * <div className="flex items-center gap-2">
- *   <Label htmlFor="name-2">Name:</Label>
- *   <Input type="text" id="name-2" />
+ * // Explicit — htmlFor matches the control's id.
+ * <div className="grid gap-1">
+ *   <Label htmlFor="api-key">API key</Label>
+ *   <Input id="api-key" name="apiKey" />
  * </div>
+ *
+ * // Inline label for a checkbox.
+ * <Label className="flex items-center gap-2">
+ *   <Checkbox name="terms" />
+ *   <span>I agree to the terms</span>
+ * </Label>
  * ```
  */
 declare const Label: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {

package/dist/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","names":[],"sources":["../src/components/label/label.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype LabelProps = ComponentPropsWithoutRef<\"label\"> & {\n\t/**\n\t * If set, the label will appear disabled.\n\t */\n\tdisabled?: boolean;\n};\n\n/**\n * A Label represents a caption for an item in a user interface. It is used to\n * provide a description or title for a form control, such as an input field,\n * checkbox, radio button, etc. The label is typically displayed next to the\n * form control and helps users understand its purpose.\n *\n * @see https://mantle.ngrok.com/components/label\n *\n * @example\n * ```tsx\n * <Label htmlFor=\"name\">\n *   Name: <Input type=\"text\" id=\"name\" />\n * </Label>\n *\n * <div className=\"flex items-center gap-2\">\n *   <Label htmlFor=\"name-2\">Name:</Label>\n *   <Input type=\"text\" id=\"name-2\" />\n * </div>\n * ```\n */\nconst Label = forwardRef<ComponentRef<\"label\">, LabelProps>(\n\t(\n\t\t{ \"aria-disabled\": _ariaDisabled, children, className, disabled, onMouseDown, ...props },\n\t\tref,\n\t) => (\n\t\t// biome-ignore lint/a11y/noLabelWithoutControl: this is a composable label component\n\t\t<label\n\t\t\taria-disabled={disabled ?? _ariaDisabled}\n\t\t\tdata-slot=\"label\"\n\t\t\tclassName={cx(\n\t\t\t\t\"text-strong cursor-pointer text-sm peer-disabled:cursor-default has-disabled:cursor-default aria-disabled:cursor-default font-sans\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonMouseDown={(event) => {\n\t\t\t\t// only prevent text selection if clicking inside the label itself\n\t\t\t\tconst target = event.target as HTMLElement;\n\t\t\t\tif (target.closest(\"button, input, select, textarea\")) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tonMouseDown?.(event);\n\n\t\t\t\t// prevent text selection when double clicking label\n\t\t\t\tif (!event.defaultPrevented && event.detail > 1) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t}}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</label>\n\t),\n);\nLabel.displayName = \"Label\";\n\nexport {\n\t//\n\tLabel,\n};\n"],"mappings":"gHA+BA,MAAM,EAAQ,GAEZ,CAAE,gBAAiB,EAAe,WAAU,YAAW,WAAU,cAAa,GAAG,GACjF,IAGA,EAAC,QAAD,CACC,gBAAe,GAAY,EAC3B,YAAU,QACV,UAAW,EACV,qIACA,EACA,CACD,YAAc,GAAU,CAER,EAAM,OACV,QAAQ,kCAAkC,GAIrD,IAAc,EAAM,CAGhB,CAAC,EAAM,kBAAoB,EAAM,OAAS,GAC7C,EAAM,gBAAgB,GAGnB,MACL,GAAI,EAEH,WACM,CAAA,CAET,CACD,EAAM,YAAc"}
+{"version":3,"file":"label.js","names":[],"sources":["../src/components/label/label.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype LabelProps = ComponentPropsWithoutRef<\"label\"> & {\n\t/**\n\t * If set, the label will appear disabled.\n\t */\n\tdisabled?: boolean;\n};\n\n/**\n * A caption for a form control — input, checkbox, radio, switch, select.\n * Renders a native `<label>`. Pair every form control with a `Label` so the\n * control has an accessible name, clicks on the label focus the control, and\n * screen readers announce the field correctly.\n *\n * **When to use**\n * - Every visible form control. Always.\n * - Above or beside an input to describe it (\"Email\", \"API key\").\n * - Wrapping a checkbox or radio next to its descriptive text.\n *\n * **When not to use**\n * - For static UI text that isn't labeling a control — use a heading or\n *   plain `<p>`/`<span>`.\n * - As a substitute for `aria-label` on non-`<input>` widgets that don't\n *   support `<label for>` association.\n *\n * **Two ways to associate.** Either wrap the control inside the `<Label>`\n * (implicit association — simplest) or set `htmlFor` to the control's `id`\n * (explicit — required when the control isn't a child).\n *\n * **Disabled state.** Pass `disabled` to render the label in a disabled\n * style. Typically you'll want this to mirror the underlying control's\n * disabled state so the visual treatment stays consistent.\n *\n * @see https://mantle.ngrok.com/components/label\n *\n * @example\n * ```tsx\n * import { Label } from \"@ngrok/mantle/label\";\n * import { Input } from \"@ngrok/mantle/input\";\n *\n * // Implicit — control nested inside the label.\n * <Label className=\"grid gap-1\">\n *   <span>Email</span>\n *   <Input type=\"email\" name=\"email\" />\n * </Label>\n *\n * // Explicit — htmlFor matches the control's id.\n * <div className=\"grid gap-1\">\n *   <Label htmlFor=\"api-key\">API key</Label>\n *   <Input id=\"api-key\" name=\"apiKey\" />\n * </div>\n *\n * // Inline label for a checkbox.\n * <Label className=\"flex items-center gap-2\">\n *   <Checkbox name=\"terms\" />\n *   <span>I agree to the terms</span>\n * </Label>\n * ```\n */\nconst Label = forwardRef<ComponentRef<\"label\">, LabelProps>(\n\t(\n\t\t{ \"aria-disabled\": _ariaDisabled, children, className, disabled, onMouseDown, ...props },\n\t\tref,\n\t) => (\n\t\t// biome-ignore lint/a11y/noLabelWithoutControl: this is a composable label component\n\t\t<label\n\t\t\taria-disabled={disabled ?? _ariaDisabled}\n\t\t\tdata-slot=\"label\"\n\t\t\tclassName={cx(\n\t\t\t\t\"text-strong cursor-pointer text-sm peer-disabled:cursor-default has-disabled:cursor-default aria-disabled:cursor-default font-sans\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonMouseDown={(event) => {\n\t\t\t\t// only prevent text selection if clicking inside the label itself\n\t\t\t\tconst target = event.target as HTMLElement;\n\t\t\t\tif (target.closest(\"button, input, select, textarea\")) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tonMouseDown?.(event);\n\n\t\t\t\t// prevent text selection when double clicking label\n\t\t\t\tif (!event.defaultPrevented && event.detail > 1) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t}}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</label>\n\t),\n);\nLabel.displayName = \"Label\";\n\nexport {\n\t//\n\tLabel,\n};\n"],"mappings":"gHA8DA,MAAM,EAAQ,GAEZ,CAAE,gBAAiB,EAAe,WAAU,YAAW,WAAU,cAAa,GAAG,GACjF,IAGA,EAAC,QAAD,CACC,gBAAe,GAAY,EAC3B,YAAU,QACV,UAAW,EACV,qIACA,EACA,CACD,YAAc,GAAU,CAER,EAAM,OACV,QAAQ,kCAAkC,GAIrD,IAAc,EAAM,CAGhB,CAAC,EAAM,kBAAoB,EAAM,OAAS,GAC7C,EAAM,gBAAgB,GAGnB,MACL,GAAI,EAEH,WACM,CAAA,CAET,CACD,EAAM,YAAc"}

package/dist/media-object.d.ts

@@ -5,17 +5,30 @@ import { ComponentProps } from "react";
 //#region src/components/media-object/media-object.d.ts
 type Props = ComponentProps<"div"> & WithAsChild;
 /**
- * The media object is an image/icon (media) to the left, with descriptive
- * content (title and subtitle/description) to the right. This is the root
- * component of the media object.
+ * A small, reusable layout primitive for "image/icon on one side,
+ * descriptive content on the other" — the foundational
+ * {@link https://www.stubbornella.org/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/ "media object" pattern}.
+ * Use it to compose avatars-with-text, icons-with-copy, thumbnails-with-titles,
+ * and similar two-up rows without re-implementing flexbox each time.
  *
- * Change the spacing between the media and content by passing a `gap-*` class.
- * The default gap is `gap-4`.
+ * **When to use**
+ * - Comment threads (avatar + name + body).
+ * - Compact list items (icon + label + secondary text).
+ * - Notification rows.
+ * - Feature lists, profile cards, attachment previews.
  *
- * Use flexbox utilities to change the alignment of the media and content.
+ * **When not to use**
+ * - For complex multi-region layouts — reach for {@link https://mantle.ngrok.com/components/card Card} or build a bespoke flex/grid.
+ * - When the media is purely decorative and adds no information — drop it
+ *   and use a plain block.
  *
- * Compose the media object with the `MediaObject.Media` and `MediaObject.Content`
- * components as direct children.
+ * **Spacing & alignment.** Default gap is `gap-4`; override by passing a
+ * different `gap-*` class to `MediaObject.Root`. Use standard flex
+ * utilities (`items-start`, `items-center`, etc.) to align media and
+ * content vertically.
+ *
+ * **Polymorphism.** Each part accepts `asChild` for swapping the rendered
+ * element (e.g. render `Root` as an `<a>` to make the whole row clickable).
  *
  * @see https://mantle.ngrok.com/components/media-object
  *
@@ -29,12 +42,15 @@ type Props = ComponentProps<"div"> & WithAsChild;
  *
  * @example
  * ```tsx
+ * import { MediaObject } from "@ngrok/mantle/media-object";
+ *
  * <MediaObject.Root>
  *   <MediaObject.Media>
- *     <ExampleMedia />
+ *     <Avatar src={user.avatarUrl} alt="" />
  *   </MediaObject.Media>
  *   <MediaObject.Content>
- *     <p>Ea culpa id id ea minim labore.</p>
+ *     <p className="font-medium">{user.name}</p>
+ *     <p className="text-muted text-sm">{comment}</p>
  *   </MediaObject.Content>
  * </MediaObject.Root>
  * ```

package/dist/media-object.js.map

@@ -1 +1 @@
-{"version":3,"file":"media-object.js","names":[],"sources":["../src/components/media-object/media-object.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype Props = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * The media object is an image/icon (media) to the left, with descriptive\n * content (title and subtitle/description) to the right. This is the root\n * component of the media object.\n */\nconst Root = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"media-object\"\n\t\t\t\tclassName={cx(\"flex gap-4\", className)}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nRoot.displayName = \"MediaObject\";\n\n/**\n * The container for an image or icon to display in the media slot of the media object.\n */\nconst Media = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"media-object-media\"\n\t\t\t\tclassName={cx(\"shrink-0 leading-none\", className)}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nMedia.displayName = \"MediaObjectMedia\";\n\n/**\n * The container for the content slot of a media object.\n */\nconst Content = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"media-object-content\"\n\t\t\t\tclassName={cx(\"min-w-0 flex-1\", className)}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nContent.displayName = \"MediaObject.Content\";\n\n/**\n * The media object is an image/icon (media) to the left, with descriptive\n * content (title and subtitle/description) to the right. This is the root\n * component of the media object.\n *\n * Change the spacing between the media and content by passing a `gap-*` class.\n * The default gap is `gap-4`.\n *\n * Use flexbox utilities to change the alignment of the media and content.\n *\n * Compose the media object with the `MediaObject.Media` and `MediaObject.Content`\n * components as direct children.\n *\n * @see https://mantle.ngrok.com/components/media-object\n *\n * @example\n * Composition:\n * ```\n * MediaObject.Root\n * ├── MediaObject.Media\n * └── MediaObject.Content\n * ```\n *\n * @example\n * ```tsx\n * <MediaObject.Root>\n *   <MediaObject.Media>\n *     <ExampleMedia />\n *   </MediaObject.Media>\n *   <MediaObject.Content>\n *     <p>Ea culpa id id ea minim labore.</p>\n *   </MediaObject.Content>\n * </MediaObject.Root>\n * ```\n */\nconst MediaObject = {\n\t/**\n\t * The media object is an image/icon (media) to the left, with descriptive\n\t * content (title and subtitle/description) to the right. This is the root\n\t * component of the media object.\n\t *\n\t * Change the spacing between the media and content by passing a `gap-*` class.\n\t * The default gap is `gap-4`.\n\t *\n\t * Use flexbox utilities to change the alignment of the media and content.\n\t *\n\t * Compose the media object with the `MediaObject.Media` and `MediaObject.Content`\n\t * components as direct children.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#mediaobjectroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The container for an image or icon to display in the media slot of the media object.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#mediaobjectmedia\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tMedia,\n\t/**\n\t * The container for the content slot of a media object.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#mediaobjectcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tContent,\n} as const;\n\nexport {\n\t//,\n\tMediaObject,\n};\n"],"mappings":"kJAaA,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,WAAU,SAAS,IAIhD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,YAAU,eACV,UAAW,EAAG,aAAc,EAAU,CAC/B,QAEN,WACU,CAAA,CAGd,CACD,EAAK,YAAc,cAKnB,MAAM,EAAQ,GACZ,CAAE,UAAU,GAAO,YAAW,WAAU,SAAS,IAIhD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,YAAU,qBACV,UAAW,EAAG,wBAAyB,EAAU,CAC1C,QAEN,WACU,CAAA,CAGd,CACD,EAAM,YAAc,mBAKpB,MAAM,EAAU,GACd,CAAE,UAAU,GAAO,YAAW,WAAU,SAAS,IAIhD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,YAAU,uBACV,UAAW,EAAG,iBAAkB,EAAU,CACnC,QAEN,WACU,CAAA,CAGd,CACD,EAAQ,YAAc,sBAqCtB,MAAM,EAAc,CA4BnB,OAkBA,QAkBA,UACA"}
+{"version":3,"file":"media-object.js","names":[],"sources":["../src/components/media-object/media-object.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype Props = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * The media object is an image/icon (media) to the left, with descriptive\n * content (title and subtitle/description) to the right. This is the root\n * component of the media object.\n */\nconst Root = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"media-object\"\n\t\t\t\tclassName={cx(\"flex gap-4\", className)}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nRoot.displayName = \"MediaObject\";\n\n/**\n * The container for an image or icon to display in the media slot of the media object.\n */\nconst Media = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"media-object-media\"\n\t\t\t\tclassName={cx(\"shrink-0 leading-none\", className)}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nMedia.displayName = \"MediaObjectMedia\";\n\n/**\n * The container for the content slot of a media object.\n */\nconst Content = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"media-object-content\"\n\t\t\t\tclassName={cx(\"min-w-0 flex-1\", className)}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nContent.displayName = \"MediaObject.Content\";\n\n/**\n * A small, reusable layout primitive for \"image/icon on one side,\n * descriptive content on the other\" — the foundational\n * {@link https://www.stubbornella.org/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/ \"media object\" pattern}.\n * Use it to compose avatars-with-text, icons-with-copy, thumbnails-with-titles,\n * and similar two-up rows without re-implementing flexbox each time.\n *\n * **When to use**\n * - Comment threads (avatar + name + body).\n * - Compact list items (icon + label + secondary text).\n * - Notification rows.\n * - Feature lists, profile cards, attachment previews.\n *\n * **When not to use**\n * - For complex multi-region layouts — reach for {@link https://mantle.ngrok.com/components/card Card} or build a bespoke flex/grid.\n * - When the media is purely decorative and adds no information — drop it\n *   and use a plain block.\n *\n * **Spacing & alignment.** Default gap is `gap-4`; override by passing a\n * different `gap-*` class to `MediaObject.Root`. Use standard flex\n * utilities (`items-start`, `items-center`, etc.) to align media and\n * content vertically.\n *\n * **Polymorphism.** Each part accepts `asChild` for swapping the rendered\n * element (e.g. render `Root` as an `<a>` to make the whole row clickable).\n *\n * @see https://mantle.ngrok.com/components/media-object\n *\n * @example\n * Composition:\n * ```\n * MediaObject.Root\n * ├── MediaObject.Media\n * └── MediaObject.Content\n * ```\n *\n * @example\n * ```tsx\n * import { MediaObject } from \"@ngrok/mantle/media-object\";\n *\n * <MediaObject.Root>\n *   <MediaObject.Media>\n *     <Avatar src={user.avatarUrl} alt=\"\" />\n *   </MediaObject.Media>\n *   <MediaObject.Content>\n *     <p className=\"font-medium\">{user.name}</p>\n *     <p className=\"text-muted text-sm\">{comment}</p>\n *   </MediaObject.Content>\n * </MediaObject.Root>\n * ```\n */\nconst MediaObject = {\n\t/**\n\t * The media object is an image/icon (media) to the left, with descriptive\n\t * content (title and subtitle/description) to the right. This is the root\n\t * component of the media object.\n\t *\n\t * Change the spacing between the media and content by passing a `gap-*` class.\n\t * The default gap is `gap-4`.\n\t *\n\t * Use flexbox utilities to change the alignment of the media and content.\n\t *\n\t * Compose the media object with the `MediaObject.Media` and `MediaObject.Content`\n\t * components as direct children.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#mediaobjectroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The container for an image or icon to display in the media slot of the media object.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#mediaobjectmedia\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tMedia,\n\t/**\n\t * The container for the content slot of a media object.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#mediaobjectcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tContent,\n} as const;\n\nexport {\n\t//,\n\tMediaObject,\n};\n"],"mappings":"kJAaA,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,WAAU,SAAS,IAIhD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,YAAU,eACV,UAAW,EAAG,aAAc,EAAU,CAC/B,QAEN,WACU,CAAA,CAGd,CACD,EAAK,YAAc,cAKnB,MAAM,EAAQ,GACZ,CAAE,UAAU,GAAO,YAAW,WAAU,SAAS,IAIhD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,YAAU,qBACV,UAAW,EAAG,wBAAyB,EAAU,CAC1C,QAEN,WACU,CAAA,CAGd,CACD,EAAM,YAAc,mBAKpB,MAAM,EAAU,GACd,CAAE,UAAU,GAAO,YAAW,WAAU,SAAS,IAIhD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,YAAU,uBACV,UAAW,EAAG,iBAAkB,EAAU,CACnC,QAEN,WACU,CAAA,CAGd,CACD,EAAQ,YAAc,sBAqDtB,MAAM,EAAc,CA4BnB,OAkBA,QAkBA,UACA"}

package/dist/multi-select.d.ts

@@ -80,6 +80,11 @@ type MultiSelectGroupLabelProps = Omit<Primitive.ComboboxGroupLabelProps, "rende
  * Built on top of Ariakit's Combobox primitives with full keyboard support
  * and WAI-ARIA compliance.
  *
+ * Use MultiSelect when the user can choose multiple values from a list, with selected
+ * items rendered as removable tags/chips. For single selection, use Combobox (with search)
+ * or Select (without).
+ *
+ * @see https://mantle.ngrok.com/components/multi-select
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
  * @see https://ariakit.org/components/combobox
  *
@@ -120,6 +125,12 @@ declare const MultiSelect: {
    * Root component for a multi-select combobox. Provides state management for
    * selecting multiple values with typeahead filtering.
    *
+   * Use MultiSelect when the user can choose multiple values from a list, with selected
+   * items rendered as removable tags/chips. For single selection, use Combobox (with search)
+   * or Select (without).
+   *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselectroot
+   *
    * @example
    * ```tsx
    * <MultiSelect.Root>
@@ -145,12 +156,19 @@ declare const MultiSelect: {
    * The trigger container for the multi-select. Wraps the tags and input
    * in a styled container.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselecttrigger
+   *
    * @example
    * ```tsx
-   * <MultiSelect.Trigger>
-   *   <MultiSelect.TagValues />
-   *   <MultiSelect.Input placeholder="Select items..." />
-   * </MultiSelect.Trigger>
+   * <MultiSelect.Root>
+   *   <MultiSelect.Trigger>
+   *     <MultiSelect.TagValues />
+   *     <MultiSelect.Input placeholder="Select items..." />
+   *   </MultiSelect.Trigger>
+   *   <MultiSelect.Content>
+   *     <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+   *   </MultiSelect.Content>
+   * </MultiSelect.Root>
    * ```
    */
   readonly Trigger: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & WithValidation & _$react.RefAttributes<HTMLDivElement>>;
@@ -161,17 +179,35 @@ declare const MultiSelect: {
    * Use `lockedValues` to prevent specific tags from being removed. Locked tags
    * have their remove button disabled and shake when Backspace is pressed.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselecttagvalues
+   *
    * @example
    * ```tsx
-   * // Default tags with locking
-   * <MultiSelect.TagValues lockedValues={["global"]} />
+   * <MultiSelect.Root>
+   *   <MultiSelect.Trigger>
+   *     <MultiSelect.TagValues lockedValues={["global"]} />
+   *     <MultiSelect.Input placeholder="Select items..." />
+   *   </MultiSelect.Trigger>
+   *   <MultiSelect.Content>
+   *     <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+   *   </MultiSelect.Content>
+   * </MultiSelect.Root>
+   * ```
    *
-   * // Custom tags via children render function — locked is forwarded via props
-   * <MultiSelect.TagValues lockedValues={["global"]}>
-   *   {(props) => (
-   *     <MultiSelect.Tag key={props.value} {...props} />
-   *   )}
-   * </MultiSelect.TagValues>
+   * @example
+   * Custom tags via children render function — `locked` is forwarded via props.
+   * ```tsx
+   * <MultiSelect.Root>
+   *   <MultiSelect.Trigger>
+   *     <MultiSelect.TagValues lockedValues={["global"]}>
+   *       {(props) => <MultiSelect.Tag key={props.value} {...props} />}
+   *     </MultiSelect.TagValues>
+   *     <MultiSelect.Input placeholder="Select items..." />
+   *   </MultiSelect.Trigger>
+   *   <MultiSelect.Content>
+   *     <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+   *   </MultiSelect.Content>
+   * </MultiSelect.Root>
    * ```
    */
   readonly TagValues: {
@@ -185,9 +221,19 @@ declare const MultiSelect: {
    * The combobox input for filtering items. Place this inside
    * `MultiSelect.Trigger`, after `MultiSelect.TagValues`.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselectinput
+   *
    * @example
    * ```tsx
-   * <MultiSelect.Input placeholder="Select items..." />
+   * <MultiSelect.Root>
+   *   <MultiSelect.Trigger>
+   *     <MultiSelect.TagValues />
+   *     <MultiSelect.Input placeholder="Select items..." />
+   *   </MultiSelect.Trigger>
+   *   <MultiSelect.Content>
+   *     <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+   *   </MultiSelect.Content>
+   * </MultiSelect.Root>
    * ```
    */
   readonly Input: _$react.ForwardRefExoticComponent<Omit<MultiSelectInputProps, "ref"> & _$react.RefAttributes<HTMLInputElement>>;
@@ -195,23 +241,41 @@ declare const MultiSelect: {
    * The default tag rendered inside `MultiSelect.TagValues` for each selected value.
    * Displays the value label with a remove button and keyboard navigation support.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselecttag
+   *
    * @example
    * ```tsx
-   * <MultiSelect.Tag
-   *   value="apple"
-   *   onRemove={() => removeValue("apple")}
-   * />
+   * <MultiSelect.Root>
+   *   <MultiSelect.Trigger>
+   *     <MultiSelect.TagValues>
+   *       {(props) => <MultiSelect.Tag key={props.value} {...props} />}
+   *     </MultiSelect.TagValues>
+   *     <MultiSelect.Input placeholder="Select items..." />
+   *   </MultiSelect.Trigger>
+   *   <MultiSelect.Content>
+   *     <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+   *   </MultiSelect.Content>
+   * </MultiSelect.Root>
    * ```
    */
   readonly Tag: _$react.ForwardRefExoticComponent<Omit<TagProps, "ref"> & _$react.RefAttributes<HTMLSpanElement>>;
   /**
    * Renders a popover that contains multi-select content.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselectcontent
+   *
    * @example
    * ```tsx
-   * <MultiSelect.Content>
-   *   <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
-   * </MultiSelect.Content>
+   * <MultiSelect.Root>
+   *   <MultiSelect.Trigger>
+   *     <MultiSelect.TagValues />
+   *     <MultiSelect.Input placeholder="Select items..." />
+   *   </MultiSelect.Trigger>
+   *   <MultiSelect.Content>
+   *     <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+   *     <MultiSelect.Item value="banana">Banana</MultiSelect.Item>
+   *   </MultiSelect.Content>
+   * </MultiSelect.Root>
    * ```
    */
   readonly Content: _$react.ForwardRefExoticComponent<Omit<MultiSelectContentProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
@@ -219,61 +283,136 @@ declare const MultiSelect: {
    * Renders a sticky footer pinned to the bottom inside `MultiSelect.Content`,
    * with a separator border at the top.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselectcontentfooter
+   *
    * @example
    * ```tsx
-   * <MultiSelect.ContentFooter>
-   *   <p>Upgrade to unlock more options.</p>
-   * </MultiSelect.ContentFooter>
+   * <MultiSelect.Root>
+   *   <MultiSelect.Trigger>
+   *     <MultiSelect.TagValues />
+   *     <MultiSelect.Input placeholder="Select items..." />
+   *   </MultiSelect.Trigger>
+   *   <MultiSelect.Content>
+   *     <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+   *     <MultiSelect.ContentFooter>
+   *       <p>Upgrade to unlock more options.</p>
+   *     </MultiSelect.ContentFooter>
+   *   </MultiSelect.Content>
+   * </MultiSelect.Root>
    * ```
    */
   readonly ContentFooter: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Renders a selectable item with a checkbox indicator inside a `MultiSelect.Content`.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselectitem
+   *
    * @example
    * ```tsx
-   * <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+   * <MultiSelect.Root>
+   *   <MultiSelect.Trigger>
+   *     <MultiSelect.TagValues />
+   *     <MultiSelect.Input placeholder="Select items..." />
+   *   </MultiSelect.Trigger>
+   *   <MultiSelect.Content>
+   *     <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+   *     <MultiSelect.Item value="banana">Banana</MultiSelect.Item>
+   *   </MultiSelect.Content>
+   * </MultiSelect.Root>
    * ```
    */
   readonly Item: _$react.ForwardRefExoticComponent<Omit<MultiSelectItemProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Renders a group for MultiSelect.Item elements.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselectgroup
+   *
    * @example
    * ```tsx
-   * <MultiSelect.Group>
-   *   <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>
-   *   <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
-   * </MultiSelect.Group>
+   * <MultiSelect.Root>
+   *   <MultiSelect.Trigger>
+   *     <MultiSelect.TagValues />
+   *     <MultiSelect.Input placeholder="Select items..." />
+   *   </MultiSelect.Trigger>
+   *   <MultiSelect.Content>
+   *     <MultiSelect.Group>
+   *       <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>
+   *       <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+   *     </MultiSelect.Group>
+   *   </MultiSelect.Content>
+   * </MultiSelect.Root>
    * ```
    */
   readonly Group: _$react.ForwardRefExoticComponent<Omit<MultiSelectGroupProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Renders a label in a multi-select group.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselectgrouplabel
+   *
    * @example
    * ```tsx
-   * <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>
+   * <MultiSelect.Root>
+   *   <MultiSelect.Trigger>
+   *     <MultiSelect.TagValues />
+   *     <MultiSelect.Input placeholder="Select items..." />
+   *   </MultiSelect.Trigger>
+   *   <MultiSelect.Content>
+   *     <MultiSelect.Group>
+   *       <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>
+   *       <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+   *     </MultiSelect.Group>
+   *   </MultiSelect.Content>
+   * </MultiSelect.Root>
    * ```
    */
   readonly GroupLabel: _$react.ForwardRefExoticComponent<Omit<MultiSelectGroupLabelProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Renders a description below a `MultiSelect.GroupLabel` inside a `MultiSelect.Group`.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselectgroupdescription
+   *
    * @example
    * ```tsx
-   * <MultiSelect.GroupDescription>
-   *   Include all points of presence within the region.
-   * </MultiSelect.GroupDescription>
+   * <MultiSelect.Root>
+   *   <MultiSelect.Trigger>
+   *     <MultiSelect.TagValues />
+   *     <MultiSelect.Input placeholder="Select regions..." />
+   *   </MultiSelect.Trigger>
+   *   <MultiSelect.Content>
+   *     <MultiSelect.Group>
+   *       <MultiSelect.GroupLabel>Regional Aliases</MultiSelect.GroupLabel>
+   *       <MultiSelect.GroupDescription>
+   *         Include all points of presence within the region.
+   *       </MultiSelect.GroupDescription>
+   *       <MultiSelect.Item value="global">global</MultiSelect.Item>
+   *     </MultiSelect.Group>
+   *   </MultiSelect.Content>
+   * </MultiSelect.Root>
    * ```
    */
   readonly GroupDescription: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & _$react.RefAttributes<HTMLParagraphElement>>;
   /**
    * Renders a separator between items or groups.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselectseparator
+   *
    * @example
    * ```tsx
-   * <MultiSelect.Separator />
+   * <MultiSelect.Root>
+   *   <MultiSelect.Trigger>
+   *     <MultiSelect.TagValues />
+   *     <MultiSelect.Input placeholder="Select items..." />
+   *   </MultiSelect.Trigger>
+   *   <MultiSelect.Content>
+   *     <MultiSelect.Group>
+   *       <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+   *     </MultiSelect.Group>
+   *     <MultiSelect.Separator />
+   *     <MultiSelect.Group>
+   *       <MultiSelect.Item value="carrot">Carrot</MultiSelect.Item>
+   *     </MultiSelect.Group>
+   *   </MultiSelect.Content>
+   * </MultiSelect.Root>
    * ```
    */
   readonly Separator: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.ClassAttributes<HTMLDivElement> & _$react.HTMLAttributes<HTMLDivElement> & WithAsChild & {
@@ -283,9 +422,21 @@ declare const MultiSelect: {
   /**
    * Renders a message when no items match the current filter.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselectempty
+   *
    * @example
    * ```tsx
-   * <MultiSelect.Empty>No results found</MultiSelect.Empty>
+   * <MultiSelect.Root>
+   *   <MultiSelect.Trigger>
+   *     <MultiSelect.TagValues />
+   *     <MultiSelect.Input placeholder="Select items..." />
+   *   </MultiSelect.Trigger>
+   *   <MultiSelect.Content>
+   *     {matches.length === 0 && (
+   *       <MultiSelect.Empty>No results found</MultiSelect.Empty>
+   *     )}
+   *   </MultiSelect.Content>
+   * </MultiSelect.Root>
    * ```
    */
   readonly Empty: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;