@ngrok/mantle 0.79.3 → 0.81.0

package/dist/accordion.d.ts

@@ -1,6 +1,6 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
-import { n as IconProps } from "./icon-Cevjo93X.js";
-import { ComponentPropsWithoutRef } from "react";
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { n as IconProps } from "./icon-k4E9yNWD.js";
+import { ComponentProps } from "react";
 //#region src/components/accordion/accordion.d.ts
 /**
  * `"single"` mode props: at most one item open at a time — opening a section
@@ -56,7 +56,94 @@ type AccordionMultipleProps = {
  * accordion that keeps at most one section open at a time. Also accepts all
  * standard `<div>` props (forwarded to the container) plus `asChild`.
  */
-type AccordionRootProps = (AccordionSingleProps | AccordionMultipleProps) & Omit<ComponentPropsWithoutRef<"div">, "defaultValue"> & WithAsChild;
+type AccordionRootProps = (AccordionSingleProps | AccordionMultipleProps) & Omit<ComponentProps<"div">, "defaultValue"> & WithAsChild;
+/**
+ * A vertically stacked set of disclosure sections. The root owns the open/closed
+ * state and provides it to its items.
+ *
+ * Built without a UI framework's collapsible: each section's collapsed content
+ * stays in the DOM with `hidden="until-found"`, so the browser's find-in-page
+ * (⌘F / Ctrl-F) can discover and auto-reveal matches inside closed sections (the
+ * `beforematch` event syncs that reveal back into this component's state). Works
+ * with controlled (`value` + `onValueChange`) and uncontrolled (`defaultValue`)
+ * usage in both `"single"` and `"multiple"` modes.
+ *
+ * `type` is optional and **defaults to `"multiple"`** — sections open
+ * independently and opening one never closes another. Pass `type="single"` for
+ * the classic accordion where opening a section auto-closes the previously open
+ * one.
+ *
+ * Items are separated by a hairline divider drawn with `divide-y` on the root,
+ * colored with the shared `separator` token so it matches `Separator` and every
+ * other divider in the system. Disable the dividers with `divide-y-0` on the root
+ * (e.g. pair it with `space-y-*` for a spaced-card layout).
+ *
+ * @see https://mantle.ngrok.com/components/data-display/accordion#api-accordion
+ *
+ * @example
+ * <Accordion.Root type="single" defaultValue="shipping">
+ *   <Accordion.Item value="shipping">
+ *     <Accordion.Trigger>
+ *       How long does shipping take?
+ *       <Accordion.TriggerIcon />
+ *     </Accordion.Trigger>
+ *     <Accordion.Content>
+ *       <Accordion.Body>Two to five business days.</Accordion.Body>
+ *     </Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion.Root>
+ */
+declare const Root: (props: AccordionRootProps) => import("react").JSX.Element;
+/**
+ * A single collapsible section, rendered as a plain `<div role="group">` — the
+ * same accessibility role the browser gives a native `<details>`. Derives its
+ * open state from {@link Root}.
+ *
+ * Because the item is just a `<div>`, its header can be any layout — e.g. a flex
+ * row with the {@link Trigger} alongside a separate, non-toggling action button.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/accordion#api-accordion-item
+ *
+ * @example
+ * <Accordion.Root type="single" defaultValue="item-1">
+ *   <Accordion.Item value="item-1">
+ *     <Accordion.Trigger>
+ *       Is it accessible?
+ *       <Accordion.TriggerIcon />
+ *     </Accordion.Trigger>
+ *     <Accordion.Content>
+ *       <Accordion.Body>Yes. It adheres to the WAI-ARIA disclosure pattern.</Accordion.Body>
+ *     </Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion.Root>
+ */
+declare const Item: ({ children, value, ref, ...props }: ComponentProps<"div"> & {
+  /** The unique value identifying this item within its accordion. */
+  value: string;
+}) => import("react").JSX.Element;
+/**
+ * The interactive header that toggles its section, rendered as a `<button>` with
+ * `aria-expanded` — the disclosure semantics a native `<summary>` provides, but
+ * via a real button so the role is consistent across browsers (native summary's
+ * role varies). Place the {@link TriggerIcon} as the last child so the default
+ * `justify-between` layout pushes it to the trailing edge.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/accordion#api-accordion-trigger
+ *
+ * @example
+ * <Accordion.Root type="single" defaultValue="item-1">
+ *   <Accordion.Item value="item-1">
+ *     <Accordion.Trigger>
+ *       Is it accessible?
+ *       <Accordion.TriggerIcon />
+ *     </Accordion.Trigger>
+ *     <Accordion.Content>
+ *       <Accordion.Body>Yes. It adheres to the WAI-ARIA disclosure pattern.</Accordion.Body>
+ *     </Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion.Root>
+ */
+declare const Trigger: ({ className, children, onClick, ref, ...props }: Omit<ComponentProps<"button">, "type">) => import("react").JSX.Element;
 /**
  * The icon that indicates the open/closed state of its {@link Trigger}. Defaults
  * to a downward caret that rotates 180° when the section is open. Pass `svg` to
@@ -95,13 +182,68 @@ type AccordionRootProps = (AccordionSingleProps | AccordionMultipleProps) & Omit
  *   </Accordion.Item>
  * </Accordion.Root>
  */
-declare const TriggerIcon: {
-  ({ className, svg, ...props }: Omit<IconProps, "svg"> & {
-    /** The icon to render. Defaults to a downward caret that rotates open. */
-    svg?: IconProps["svg"];
-  }): import("react").JSX.Element;
-  displayName: string;
-};
+declare const TriggerIcon: ({ className, svg, ...props }: Omit<IconProps, "svg"> & {
+  /** The icon to render. Defaults to a downward caret that rotates open. */
+  svg?: IconProps["svg"];
+}) => import("react").JSX.Element;
+/**
+ * The collapsible region of an {@link Item} — the zero-padding viewport that
+ * slides open and closed. Wrap its children in {@link Body} for the standard
+ * padding (text inherits the ambient size); `Content` itself stays unpadded so
+ * its `h-0` collapse can reach zero height. Always rendered into the DOM; when
+ * collapsed (in
+ * supporting browsers) it carries `hidden="until-found"` so its text stays
+ * discoverable by the browser's find-in-page, and a `beforematch` listener opens
+ * the section when the browser reveals a match. It is flow content, so it may
+ * contain anything — including interactive elements.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/accordion#api-accordion-content
+ *
+ * @example
+ * <Accordion.Root type="single" defaultValue="item-1">
+ *   <Accordion.Item value="item-1">
+ *     <Accordion.Trigger>
+ *       Is it accessible?
+ *       <Accordion.TriggerIcon />
+ *     </Accordion.Trigger>
+ *     <Accordion.Content>
+ *       <Accordion.Body>Yes. It adheres to the WAI-ARIA disclosure pattern.</Accordion.Body>
+ *     </Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion.Root>
+ */
+declare const Content: ({ className, children, ref, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+/**
+ * The padded inner region of an {@link Item}'s {@link Content} — where the
+ * section's body content lives. Owns the body's padding so {@link Content} can
+ * stay a zero-padding animation viewport: a padded `h-0` border-box can't
+ * collapse below its padding, so keeping the padding here lets the closed slide
+ * reach zero height. The `pt-2` doubles as the focus ring's vertical clearance —
+ * it pairs with the trigger's open-state `pb-2` so the gap below the trigger
+ * stays a uniform 16px while 8px of it sits outside the button box, keeping the
+ * ring off the body's first line (see {@link Trigger}). Text inherits the ambient
+ * size — it isn't forced — so set a size on the content where you need one.
+ * Override `className` to retune the padding (e.g. `pb-0`, `px-6`); `cx` resolves
+ * last-wins.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/accordion#api-accordion-body
+ *
+ * @example
+ * <Accordion.Root type="single" defaultValue="item-1">
+ *   <Accordion.Item value="item-1">
+ *     <Accordion.Trigger>
+ *       Is it accessible?
+ *       <Accordion.TriggerIcon />
+ *     </Accordion.Trigger>
+ *     <Accordion.Content>
+ *       <Accordion.Body className="pb-6">
+ *         Yes. It adheres to the WAI-ARIA disclosure pattern.
+ *       </Accordion.Body>
+ *     </Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion.Root>
+ */
+declare const Body: ({ className, ref, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
 /**
  * A vertically stacked set of disclosure sections styled after the shadcn /
  * ngrok.com accordion.
@@ -159,7 +301,7 @@ declare const Accordion: {
    *   </Accordion.Item>
    * </Accordion.Root>
    */
-  readonly Root: import("react").ForwardRefExoticComponent<AccordionRootProps & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Root: typeof Root;
   /**
    * A single collapsible section. See {@link Item}.
    *
@@ -176,10 +318,7 @@ declare const Accordion: {
    *   </Accordion.Item>
    * </Accordion.Root>
    */
-  readonly Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    /** The unique value identifying this item within its accordion. */
-    value: string;
-  } & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Item: typeof Item;
   /**
    * The `<button>` header that toggles a section. See {@link Trigger}.
    *
@@ -196,7 +335,7 @@ declare const Accordion: {
    *   </Accordion.Item>
    * </Accordion.Root>
    */
-  readonly Trigger: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "type"> & import("react").RefAttributes<HTMLButtonElement>>;
+  readonly Trigger: typeof Trigger;
   /**
    * The caret indicating open/closed state. See {@link TriggerIcon}.
    *
@@ -230,7 +369,7 @@ declare const Accordion: {
    *   </Accordion.Item>
    * </Accordion.Root>
    */
-  readonly Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Content: typeof Content;
   /**
    * The padded inner region of a {@link Content}. See {@link Body}.
    *
@@ -249,7 +388,7 @@ declare const Accordion: {
    *   </Accordion.Item>
    * </Accordion.Root>
    */
-  readonly Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Body: typeof Body;
 };
 //#endregion
 export { Accordion };

package/dist/accordion.js

@@ -1 +1 @@
-import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-Cjf2gfB8.js";import{t as n}from"./cx-IiQEAKf5.js";import{t as r}from"./icon-CDtYjF_H.js";import{t as i}from"./slot-DmPrjM7N.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{createContext as o,forwardRef as s,useCallback as c,useContext as l,useEffect as u,useMemo as d,useRef as f,useState as p}from"react";import m from"tiny-invariant";import{jsx as h}from"react/jsx-runtime";function g(e,t){return e.includes(t)}function _(e,t,n,r){let i=e.includes(t);return n?r===`single`?i&&e.length===1?e:[t]:i?e:[...e,t]:i?e.filter(e=>e!==t):e}function v(e){return e==null?[]:typeof e==`string`?e===``?[]:[e]:e}function y(e,t){e.type===`single`?e.onValueChange?.(t[0]??``):e.onValueChange?.([...t])}function b(){return typeof document<`u`&&document.body!=null&&`onbeforematch`in document.body}const x=o(null);function S(e){let t=l(x);return m(t,`\`${e}\` must be rendered within \`Accordion.Root\`.`),t}const C=o(null);function w(e){let t=l(C);return m(t,`\`${e}\` must be rendered within \`Accordion.Item\`.`),t}const T=s((e,t)=>{let{type:r=`multiple`,value:a,defaultValue:o,onValueChange:s,asChild:c,children:l,className:u,...f}=e,m=a!=null,[g,b]=p(()=>v(o)),S=m?v(a):g,C=d(()=>({type:r,openValues:S,setItemOpen:(t,n)=>{let i=_(S,t,n,r);i!==S&&(m||b(i),y(e,i))}}),[r,S,m,e]),w={...f,"data-slot":`accordion`,className:n(`w-full divide-y divide-separator`,u)};return h(x.Provider,{value:C,children:h(c?i:`div`,{ref:t,...w,children:l})})});T.displayName=`Accordion`;const E=s(({children:e,value:t,...n},r)=>{let{openValues:i,setItemOpen:a}=S(`Accordion.Item`),o=g(i,t),s=c(e=>{a(t,e)},[a,t]),l=d(()=>({open:o,setOpen:s}),[o,s]);return h(C.Provider,{value:l,children:h(`div`,{ref:r,...n,role:`group`,"data-slot":`accordion-item`,"data-state":o?`open`:`closed`,children:e})})});E.displayName=`AccordionItem`;const D=s(({className:e,children:t,onClick:r,...i},a)=>{let{open:o,setOpen:s}=w(`Accordion.Trigger`);return h(`button`,{ref:a,type:`button`,...i,"data-slot":`accordion-trigger`,"data-state":o?`open`:`closed`,"aria-expanded":o,className:n(`group flex w-full cursor-pointer items-center justify-between gap-4 py-4 text-left font-medium outline-none`,`-mx-2 rounded-md px-2`,`transition-[padding] duration-200 ease-out data-state-open:pb-2 motion-reduce:transition-none`,`focus:outline-hidden focus-visible:ring-4 focus-visible:ring-focus-accent`,e),onClick:e=>{r?.(e),s(!o)},children:t})});D.displayName=`AccordionTrigger`;const O=h(a,{weight:`bold`}),k=({className:e,svg:t=O,...i})=>h(r,{...i,"data-slot":`accordion-trigger-icon`,svg:t,className:n(`size-4 shrink-0 text-muted transition-transform duration-200 group-data-state-open:rotate-180`,e)});k.displayName=`AccordionTriggerIcon`;const A=s(({className:r,children:i,...a},o)=>{let{open:s,setOpen:c}=w(`Accordion.Content`),l=f(null),d=t(l,o);return u(()=>{let e=l.current;if(!e||!b())return;let t=()=>{e.removeAttribute(`hidden`),e.style.height=`auto`,c(!0)};return e.addEventListener(`beforematch`,t),()=>{e.removeEventListener(`beforematch`,t)}},[c]),e(()=>{let e=l.current;e&&(s||!b()?e.removeAttribute(`hidden`):(e.setAttribute(`hidden`,`until-found`),e.style.height=``))},[s]),h(`div`,{ref:d,...a,"data-slot":`accordion-content`,"data-state":s?`open`:`closed`,className:n(`h-0 overflow-hidden transition-[height,content-visibility] duration-200 ease-out [interpolate-size:allow-keywords] transition-discrete data-state-open:h-auto motion-reduce:transition-none`,r),children:i})});A.displayName=`AccordionContent`;const j=s(({className:e,...t},r)=>h(`div`,{ref:r,...t,"data-slot":`accordion-body`,className:n(`pt-2 pb-4`,e)}));j.displayName=`AccordionBody`;const M={Root:T,Item:E,Trigger:D,TriggerIcon:k,Content:A,Body:j};export{M as Accordion};
+import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-BdBMM9ga.js";import{t as n}from"./cx-IiQEAKf5.js";import{t as r}from"./icon-lZ48P8Nn.js";import{t as i}from"./slot-CDk0Bb9z.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{createContext as o,useCallback as s,useContext as c,useEffect as l,useMemo as u,useRef as d,useState as f}from"react";import p from"tiny-invariant";import{jsx as m}from"react/jsx-runtime";function h(e,t){return e.includes(t)}function g(e,t,n,r){let i=e.includes(t);return n?r===`single`?i&&e.length===1?e:[t]:i?e:[...e,t]:i?e.filter(e=>e!==t):e}function _(e){return e==null?[]:typeof e==`string`?e===``?[]:[e]:e}function v(e,t){e.type===`single`?e.onValueChange?.(t[0]??``):e.onValueChange?.([...t])}function y(){return typeof document<`u`&&document.body!=null&&`onbeforematch`in document.body}const b=o(null);function x(e){let t=c(b);return p(t,`\`${e}\` must be rendered within \`Accordion.Root\`.`),t}const S=o(null);function C(e){let t=c(S);return p(t,`\`${e}\` must be rendered within \`Accordion.Item\`.`),t}const w=e=>{let{type:t=`multiple`,value:r,defaultValue:a,onValueChange:o,asChild:s,children:c,className:l,ref:d,...p}=e,h=r!=null,[y,x]=f(()=>_(a)),S=h?_(r):y,C=u(()=>({type:t,openValues:S,setItemOpen:(n,r)=>{let i=g(S,n,r,t);i!==S&&(h||x(i),v(e,i))}}),[t,S,h,e]),w={...p,"data-slot":`accordion`,className:n(`w-full divide-y divide-separator`,l)};return m(b.Provider,{value:C,children:m(s?i:`div`,{ref:d,...w,children:c})})},T=({children:e,value:t,ref:n,...r})=>{let{openValues:i,setItemOpen:a}=x(`Accordion.Item`),o=h(i,t),c=s(e=>{a(t,e)},[a,t]),l=u(()=>({open:o,setOpen:c}),[o,c]);return m(S.Provider,{value:l,children:m(`div`,{ref:n,...r,role:`group`,"data-slot":`accordion-item`,"data-state":o?`open`:`closed`,children:e})})},E=({className:e,children:t,onClick:r,ref:i,...a})=>{let{open:o,setOpen:s}=C(`Accordion.Trigger`);return m(`button`,{ref:i,type:`button`,...a,"data-slot":`accordion-trigger`,"data-state":o?`open`:`closed`,"aria-expanded":o,className:n(`group flex w-full cursor-pointer items-center justify-between gap-4 py-4 text-left font-medium outline-none`,`-mx-2 rounded-md px-2`,`transition-[padding] duration-200 ease-out data-state-open:pb-2 motion-reduce:transition-none`,`focus:outline-hidden focus-visible:ring-4 focus-visible:ring-focus-accent`,e),onClick:e=>{r?.(e),s(!o)},children:t})},D=m(a,{weight:`bold`}),O={Root:w,Item:T,Trigger:E,TriggerIcon:({className:e,svg:t=D,...i})=>m(r,{...i,"data-slot":`accordion-trigger-icon`,svg:t,className:n(`size-4 shrink-0 text-muted transition-transform duration-200 group-data-state-open:rotate-180`,e)}),Content:({className:r,children:i,ref:a,...o})=>{let{open:s,setOpen:c}=C(`Accordion.Content`),u=d(null),f=t(u,a);return l(()=>{let e=u.current;if(!e||!y())return;let t=()=>{e.removeAttribute(`hidden`),e.style.height=`auto`,c(!0)};return e.addEventListener(`beforematch`,t),()=>{e.removeEventListener(`beforematch`,t)}},[c]),e(()=>{let e=u.current;e&&(s||!y()?e.removeAttribute(`hidden`):(e.setAttribute(`hidden`,`until-found`),e.style.height=``))},[s]),m(`div`,{ref:f,...o,"data-slot":`accordion-content`,"data-state":s?`open`:`closed`,className:n(`h-0 overflow-hidden transition-[height,content-visibility] duration-200 ease-out [interpolate-size:allow-keywords] transition-discrete data-state-open:h-auto motion-reduce:transition-none`,r),children:i})},Body:({className:e,ref:t,...r})=>m(`div`,{ref:t,...r,"data-slot":`accordion-body`,className:n(`pt-2 pb-4`,e)})};export{O as Accordion};

package/dist/agent.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ngrok/mantle",
-	"version": "0.79.3",
+	"version": "0.81.0",
 	"origin": "https://mantle.ngrok.com",
 	"endpoints": {
 		"docs": "https://mantle.ngrok.com/",
@@ -20,7 +20,9 @@
 		"@ngrok/mantle/alert",
 		"@ngrok/mantle/alert-dialog",
 		"@ngrok/mantle/anchor",
+		"@ngrok/mantle/area-chart",
 		"@ngrok/mantle/badge",
+		"@ngrok/mantle/bar-chart",
 		"@ngrok/mantle/breadcrumb",
 		"@ngrok/mantle/browser-only",
 		"@ngrok/mantle/button",
@@ -50,6 +52,7 @@
 		"@ngrok/mantle/input",
 		"@ngrok/mantle/kbd",
 		"@ngrok/mantle/label",
+		"@ngrok/mantle/line-chart",
 		"@ngrok/mantle/list",
 		"@ngrok/mantle/main",
 		"@ngrok/mantle/media-object",
@@ -61,6 +64,7 @@
 		"@ngrok/mantle/qr-code",
 		"@ngrok/mantle/radio-group",
 		"@ngrok/mantle/sandboxed-on-click",
+		"@ngrok/mantle/scatter-plot",
 		"@ngrok/mantle/select",
 		"@ngrok/mantle/selectable-list",
 		"@ngrok/mantle/separator",