@ngrok/mantle 0.81.0 → 0.81.1

package/dist/data-table.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./button-BAno7KIU.js";import{t as n}from"./button-DjpEKt2X.js";import{i as r}from"./direction-Wa9W2F61.js";import{t as i}from"./icons-B_DDQcVD.js";import{t as a}from"./table-CGxJwtbL.js";import{Fragment as o,createContext as s,useContext as c,useMemo as l}from"react";import u from"tiny-invariant";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{flexRender as m}from"@tanstack/react-table";import{MinusIcon as h}from"@phosphor-icons/react/Minus";import{PlusIcon as g}from"@phosphor-icons/react/Plus";export*from"@tanstack/react-table";const _=[`unsorted`,`asc`,`desc`],v=[`unsorted`,`desc`,`asc`];function y(e,t){return b(t===`alphanumeric`?_:v,e)??`unsorted`}function b(e,t,n){if(e.length===0)return n;let r=e.findIndex(e=>e===t);if(r===-1)return n;let i=(r+1)%e.length;return e.at(i)??n}const x=s(null);function S(){let e=c(x);return u(e,`useDataTableContext should only be used within a DataTable child component`),e}function C({children:e,table:t,...n}){let r=l(()=>({table:t}),[t]);return f(x.Provider,{value:r,children:f(a.Root,{"data-slot":`data-table`,...n,children:f(a.Element,{children:e})})})}function w({appearance:t=`ghost`,children:i,className:a,column:o,disableSorting:s=!1,iconPlacement:c=`end`,intent:l=`neutral`,sortingMode:u,sortIcon:d,onClick:m,...h}){let g=o.getIsSorted(),_=!s&&o.getCanSort(),v=_&&typeof g==`string`?g:`unsorted`,y=d?.(v)??f(B,{mode:u,direction:v});return p(n,{appearance:t,"data-slot":`data-table-header-sort-button`,className:e(`flex justify-start w-full h-full rounded-none not-disabled:active:scale-none`,t===`ghost`&&l===`neutral`&&`text-muted`,a),"data-sort-direction":v,"data-table-header-action":!0,icon:y,iconPlacement:c,onClick:e=>{m?.(e),!e.defaultPrevented&&(!_||s||u===void 0||V(o,u))},intent:l,type:`button`,...h,children:[_&&v!==`unsorted`&&p(`span`,{className:`sr-only`,children:[`Column sorted in`,` `,u===`alphanumeric`?v===`asc`?`ascending`:`descending`:r(v),` `,`order`]}),i]})}function T({children:t,className:n,...r}){return f(a.Header,{"data-slot":`data-table-header`,className:e(`has-data-table-header-action:px-0`,n),...r,children:t})}const E=e=>f(a.Body,{"data-slot":`data-table-body`,...e});function D(e){let{table:t}=S();return f(a.Head,{"data-slot":`data-table-head`,...e,children:t.getHeaderGroups().map(e=>f(a.Row,{children:e.headers.map(e=>f(o,{children:e.isPlaceholder?f(a.Header,{},e.id):m(e.column.columnDef.header,e.getContext())},e.id))},e.id))})}function O({className:t,renderExpanded:n,row:r,...i}){let s=f(a.Row,{"data-slot":`data-table-row`,"data-expanded":r.getIsExpanded()||void 0,className:e(i.onClick&&`cursor-pointer`,t),...i,children:r.getVisibleCells().map(e=>f(o,{children:m(e.column.columnDef.cell,e.getContext())},e.id))});return n==null?s:p(d,{children:[s,r.getIsExpanded()&&f(R,{row:r,children:n(r)})]})}function k({children:e,...t}){let{table:n}=S(),r=n.getAllColumns().length;return f(a.Row,{"data-slot":`data-table-empty-row`,...t,children:f(a.Cell,{colSpan:r,children:e})})}function A(){return f(`span`,{"aria-hidden":!0,className:e(`pointer-events-none absolute -inset-y-px -left-1.5 w-1.5`,`opacity-0 transition-opacity group-data-sticky-active/table:opacity-100`,`shadow-[1px_0_0_0_var(--border-color-card-muted)]`,`bg-linear-to-l to-transparent`,`from-[color-mix(in_oklab,var(--shadow-color)_var(--shadow-second-opacity),transparent)]`)})}function j({children:t,className:n,...r}){return p(a.Cell,{"data-mantle-table-sticky-right":!0,"data-slot":`data-table-action-cell`,className:e(`sticky z-10 right-0 text-end align-middle bg-inherit p-2`,n),...r,children:[f(A,{}),t]})}function M({children:t,className:n,...r}){let{table:i}=S(),o=i.getRowModel().rows.length>0;return p(a.Header,{...o?{"data-mantle-table-sticky-right":!0}:{},"data-slot":`data-table-action-header`,className:e(o&&`sticky z-10 right-0 bg-inherit`,n),...r,children:[o&&f(A,{}),t]})}function N(e){return`data-table-expanded-row-${encodeURIComponent(e.id)}`}function P({children:t,className:n,...r}){return f(a.Header,{"data-slot":`data-table-expand-header`,className:e(`w-9 px-0 text-center`,n),...r,children:t??f(`span`,{className:`sr-only`,children:`Row details`})})}const F=f(g,{weight:`bold`,className:`size-3.5`}),I=f(h,{weight:`bold`,className:`size-3.5`});function L({appearance:n=`ghost`,className:r,collapseIcon:i=I,expandIcon:a=F,intent:o=`neutral`,label:s,onClick:c,row:l,size:u=`sm`,...d}){if(!l.getCanExpand())return null;let p=l.getIsExpanded(),m=l.getToggleExpandedHandler();return f(t,{type:`button`,"data-slot":`data-table-row-expand-button`,appearance:n,intent:o,size:u,className:e(`rounded`,r),"aria-expanded":p,"aria-controls":p?N(l):void 0,icon:p?i:a,label:`${p?`Hide`:`Show`} details for ${s}`,onClick:e=>{e.stopPropagation(),c?.(e),!e.defaultPrevented&&m()},...d})}function R({children:t,className:n,colSpan:r,row:i,...o}){return f(a.Row,{"data-slot":`data-table-expanded-row`,"data-expanded-content":!0,className:e(`[&>td]:border-t-0`,n),...o,children:f(a.Cell,{id:N(i),colSpan:r??i.getVisibleCells().length,className:`bg-card font-sans text-body`,children:t})})}const z={Root:C,ActionCell:j,ActionHeader:M,Cell:a.Cell,Body:E,EmptyRow:k,Head:D,Header:T,HeaderSortButton:w,Row:O,ExpandHeader:P,RowExpandButton:L,ExpandedRow:R};function B({direction:e,mode:t,...n}){return e===`unsorted`||!t||!e?f(`svg`,{"aria-hidden":!0,...n}):f(i,{mode:t,direction:e,...n})}function V(e,t){if(!e.getCanSort())return;let n=e.getIsSorted();switch(y(typeof n==`string`?n:`unsorted`,t)){case`unsorted`:e.clearSorting();return;case`asc`:e.toggleSorting(!1);return;case`desc`:e.toggleSorting(!0);return;default:return}}export{z as DataTable,N as expandedRowId};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./button-DjpEKt2X.js";import{t as n}from"./button-BAno7KIU.js";import{i as r}from"./direction-Wa9W2F61.js";import{t as i}from"./icons-B_DDQcVD.js";import{t as a}from"./table-CGxJwtbL.js";import{Fragment as o,createContext as s,useContext as c,useMemo as l}from"react";import u from"tiny-invariant";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{flexRender as m}from"@tanstack/react-table";import{MinusIcon as h}from"@phosphor-icons/react/Minus";import{PlusIcon as g}from"@phosphor-icons/react/Plus";export*from"@tanstack/react-table";const _=[`unsorted`,`asc`,`desc`],v=[`unsorted`,`desc`,`asc`];function y(e,t){return b(t===`alphanumeric`?_:v,e)??`unsorted`}function b(e,t,n){if(e.length===0)return n;let r=e.findIndex(e=>e===t);if(r===-1)return n;let i=(r+1)%e.length;return e.at(i)??n}const x=s(null);function S(){let e=c(x);return u(e,`useDataTableContext should only be used within a DataTable child component`),e}function C({children:e,table:t,...n}){let r=l(()=>({table:t}),[t]);return f(x.Provider,{value:r,children:f(a.Root,{"data-slot":`data-table`,...n,children:f(a.Element,{children:e})})})}function w({appearance:n=`ghost`,children:i,className:a,column:o,disableSorting:s=!1,iconPlacement:c=`end`,intent:l=`neutral`,sortingMode:u,sortIcon:d,onClick:m,...h}){let g=o.getIsSorted(),_=!s&&o.getCanSort(),v=_&&typeof g==`string`?g:`unsorted`,y=d?.(v)??f(B,{mode:u,direction:v});return p(t,{appearance:n,"data-slot":`data-table-header-sort-button`,className:e(`flex justify-start w-full h-full rounded-none not-disabled:active:scale-none`,n===`ghost`&&l===`neutral`&&`text-muted`,a),"data-sort-direction":v,"data-table-header-action":!0,icon:y,iconPlacement:c,onClick:e=>{m?.(e),!e.defaultPrevented&&(!_||s||u===void 0||V(o,u))},intent:l,type:`button`,...h,children:[_&&v!==`unsorted`&&p(`span`,{className:`sr-only`,children:[`Column sorted in`,` `,u===`alphanumeric`?v===`asc`?`ascending`:`descending`:r(v),` `,`order`]}),i]})}function T({children:t,className:n,...r}){return f(a.Header,{"data-slot":`data-table-header`,className:e(`has-data-table-header-action:px-0`,n),...r,children:t})}const E=e=>f(a.Body,{"data-slot":`data-table-body`,...e});function D(e){let{table:t}=S();return f(a.Head,{"data-slot":`data-table-head`,...e,children:t.getHeaderGroups().map(e=>f(a.Row,{children:e.headers.map(e=>f(o,{children:e.isPlaceholder?f(a.Header,{},e.id):m(e.column.columnDef.header,e.getContext())},e.id))},e.id))})}function O({className:t,renderExpanded:n,row:r,...i}){let s=f(a.Row,{"data-slot":`data-table-row`,"data-expanded":r.getIsExpanded()||void 0,className:e(i.onClick&&`cursor-pointer`,t),...i,children:r.getVisibleCells().map(e=>f(o,{children:m(e.column.columnDef.cell,e.getContext())},e.id))});return n==null?s:p(d,{children:[s,r.getIsExpanded()&&f(R,{row:r,children:n(r)})]})}function k({children:e,...t}){let{table:n}=S(),r=n.getAllColumns().length;return f(a.Row,{"data-slot":`data-table-empty-row`,...t,children:f(a.Cell,{colSpan:r,children:e})})}function A(){return f(`span`,{"aria-hidden":!0,className:e(`pointer-events-none absolute -inset-y-px -left-1.5 w-1.5`,`opacity-0 transition-opacity group-data-sticky-active/table:opacity-100`,`shadow-[1px_0_0_0_var(--border-color-card-muted)]`,`bg-linear-to-l to-transparent`,`from-[color-mix(in_oklab,var(--shadow-color)_var(--shadow-second-opacity),transparent)]`)})}function j({children:t,className:n,...r}){return p(a.Cell,{"data-mantle-table-sticky-right":!0,"data-slot":`data-table-action-cell`,className:e(`sticky z-10 right-0 text-end align-middle bg-inherit p-2`,n),...r,children:[f(A,{}),t]})}function M({children:t,className:n,...r}){let{table:i}=S(),o=i.getRowModel().rows.length>0;return p(a.Header,{...o?{"data-mantle-table-sticky-right":!0}:{},"data-slot":`data-table-action-header`,className:e(o&&`sticky z-10 right-0 bg-inherit`,n),...r,children:[o&&f(A,{}),t]})}function N(e){return`data-table-expanded-row-${encodeURIComponent(e.id)}`}function P({children:t,className:n,...r}){return f(a.Header,{"data-slot":`data-table-expand-header`,className:e(`w-9 px-0 text-center`,n),...r,children:t??f(`span`,{className:`sr-only`,children:`Row details`})})}const F=f(g,{weight:`bold`,className:`size-3.5`}),I=f(h,{weight:`bold`,className:`size-3.5`});function L({appearance:t=`ghost`,className:r,collapseIcon:i=I,expandIcon:a=F,intent:o=`neutral`,label:s,onClick:c,row:l,size:u=`sm`,...d}){if(!l.getCanExpand())return null;let p=l.getIsExpanded(),m=l.getToggleExpandedHandler();return f(n,{type:`button`,"data-slot":`data-table-row-expand-button`,appearance:t,intent:o,size:u,className:e(`rounded`,r),"aria-expanded":p,"aria-controls":p?N(l):void 0,icon:p?i:a,label:`${p?`Hide`:`Show`} details for ${s}`,onClick:e=>{e.stopPropagation(),c?.(e),!e.defaultPrevented&&m()},...d})}function R({children:t,className:n,colSpan:r,row:i,...o}){return f(a.Row,{"data-slot":`data-table-expanded-row`,"data-expanded-content":!0,className:e(`[&>td]:border-t-0`,n),...o,children:f(a.Cell,{id:N(i),colSpan:r??i.getVisibleCells().length,className:`bg-card font-sans text-body`,children:t})})}const z={Root:C,ActionCell:j,ActionHeader:M,Cell:a.Cell,Body:E,EmptyRow:k,Head:D,Header:T,HeaderSortButton:w,Row:O,ExpandHeader:P,RowExpandButton:L,ExpandedRow:R};function B({direction:e,mode:t,...n}){return e===`unsorted`||!t||!e?f(`svg`,{"aria-hidden":!0,...n}):f(i,{mode:t,direction:e,...n})}function V(e,t){if(!e.getCanSort())return;let n=e.getIsSorted();switch(y(typeof n==`string`?n:`unsorted`,t)){case`unsorted`:e.clearSorting();return;case`asc`:e.toggleSorting(!1);return;case`desc`:e.toggleSorting(!0);return;default:return}}export{z as DataTable,N as expandedRowId};

package/dist/description-list.d.ts

@@ -32,10 +32,12 @@ type DescriptionListItemProps = ComponentProps<"div"> & WithAsChild;
  *
  * @example
  * ```tsx
- * <DescriptionList.Item>
- *   <DescriptionList.Label>ID</DescriptionList.Label>
- *   <DescriptionList.Value>aigk_2fKm9x8Hn3...</DescriptionList.Value>
- * </DescriptionList.Item>
+ * <DescriptionList.Root>
+ *   <DescriptionList.Item>
+ *     <DescriptionList.Label>Name</DescriptionList.Label>
+ *     <DescriptionList.Value>my-api-key</DescriptionList.Value>
+ *   </DescriptionList.Item>
+ * </DescriptionList.Root>
  * ```
  */
 declare const Item: ({ asChild, className, children, ref, ...rest }: DescriptionListItemProps) => import("react").JSX.Element;
@@ -47,7 +49,12 @@ type DescriptionListLabelProps = ComponentProps<"dt"> & WithAsChild;
  *
  * @example
  * ```tsx
- * <DescriptionList.Label>Name</DescriptionList.Label>
+ * <DescriptionList.Root>
+ *   <DescriptionList.Item>
+ *     <DescriptionList.Label>Name</DescriptionList.Label>
+ *     <DescriptionList.Value>my-api-key</DescriptionList.Value>
+ *   </DescriptionList.Item>
+ * </DescriptionList.Root>
  * ```
  */
 declare const Label: ({ asChild, className, children, ref, ...rest }: DescriptionListLabelProps) => import("react").JSX.Element;
@@ -61,9 +68,12 @@ type DescriptionListValueProps = ComponentProps<"dd"> & WithAsChild;
  *
  * @example
  * ```tsx
- * <DescriptionList.Value>
- *   aigk_2fKm9x8Hn3QpYT7zKlR0vW5
- * </DescriptionList.Value>
+ * <DescriptionList.Root>
+ *   <DescriptionList.Item>
+ *     <DescriptionList.Label>Name</DescriptionList.Label>
+ *     <DescriptionList.Value>my-api-key</DescriptionList.Value>
+ *   </DescriptionList.Item>
+ * </DescriptionList.Root>
  * ```
  */
 declare const Value: ({ asChild, className, children, ref, ...rest }: DescriptionListValueProps) => import("react").JSX.Element;
@@ -129,10 +139,12 @@ declare const DescriptionList: {
    *
    * @example
    * ```tsx
-   * <DescriptionList.Item>
-   *   <DescriptionList.Label>ID</DescriptionList.Label>
-   *   <DescriptionList.Value>aigk_2fKm9x8Hn3...</DescriptionList.Value>
-   * </DescriptionList.Item>
+   * <DescriptionList.Root>
+   *   <DescriptionList.Item>
+   *     <DescriptionList.Label>Name</DescriptionList.Label>
+   *     <DescriptionList.Value>my-api-key</DescriptionList.Value>
+   *   </DescriptionList.Item>
+   * </DescriptionList.Root>
    * ```
    */
   readonly Item: typeof Item;
@@ -143,7 +155,12 @@ declare const DescriptionList: {
    *
    * @example
    * ```tsx
-   * <DescriptionList.Label>Name</DescriptionList.Label>
+   * <DescriptionList.Root>
+   *   <DescriptionList.Item>
+   *     <DescriptionList.Label>Name</DescriptionList.Label>
+   *     <DescriptionList.Value>my-api-key</DescriptionList.Value>
+   *   </DescriptionList.Item>
+   * </DescriptionList.Root>
    * ```
    */
   readonly Label: typeof Label;
@@ -154,9 +171,12 @@ declare const DescriptionList: {
    *
    * @example
    * ```tsx
-   * <DescriptionList.Value>
-   *   aigk_2fKm9x8Hn3QpYT7zKlR0vW5
-   * </DescriptionList.Value>
+   * <DescriptionList.Root>
+   *   <DescriptionList.Item>
+   *     <DescriptionList.Label>Name</DescriptionList.Label>
+   *     <DescriptionList.Value>my-api-key</DescriptionList.Value>
+   *   </DescriptionList.Item>
+   * </DescriptionList.Root>
    * ```
    */
   readonly Value: typeof Value;

package/dist/dropdown-menu-BbbQuae2.d.ts

@@ -0,0 +1 @@
+import "./dropdown-menu-D6pMAY7I.js";

package/dist/{dropdown-menu-DZg-Cd69.d.ts → dropdown-menu-D6pMAY7I.d.ts}

@@ -23,12 +23,65 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
  * ```
  */
 declare const Trigger: (props: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) => import("react").JSX.Element;
+/**
+ * A group container for organizing related dropdown menu items.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/dropdown-menu#dropdownmenugroup
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu.Root>
+ *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.Group>
+ *       <DropdownMenu.Label>Account</DropdownMenu.Label>
+ *       <DropdownMenu.Item>Profile</DropdownMenu.Item>
+ *       <DropdownMenu.Item>Settings</DropdownMenu.Item>
+ *     </DropdownMenu.Group>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu.Root>
+ * ```
+ */
 declare const Group: ({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Group>) => import("react").JSX.Element;
+/**
+ * A radio group container for exclusive selection within the dropdown menu.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/dropdown-menu#dropdownmenuradiogroup
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu.Root>
+ *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.RadioGroup value={value} onValueChange={setValue}>
+ *       <DropdownMenu.RadioItem value="option1">Option 1</DropdownMenu.RadioItem>
+ *       <DropdownMenu.RadioItem value="option2">Option 2</DropdownMenu.RadioItem>
+ *     </DropdownMenu.RadioGroup>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu.Root>
+ * ```
+ */
 declare const RadioGroup: ({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) => import("react").JSX.Element;
 /**
  * A trigger for a dropdown menu sub-menu.
  *
  * @see https://mantle.ngrok.com/components/overlays/dropdown-menu#dropdownmenusubtrigger
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu.Root>
+ *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.Sub>
+ *       <DropdownMenu.SubTrigger>Share</DropdownMenu.SubTrigger>
+ *       <DropdownMenu.SubContent>
+ *         <DropdownMenu.Item>Email</DropdownMenu.Item>
+ *         <DropdownMenu.Item>Copy link</DropdownMenu.Item>
+ *       </DropdownMenu.SubContent>
+ *     </DropdownMenu.Sub>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu.Root>
+ * ```
  */
 declare const SubTrigger: ({ className, inset, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
   inset?: boolean;
@@ -41,6 +94,22 @@ declare const SubTrigger: ({ className, inset, children, ...props }: ComponentPr
  * mounted layer renders on top.
  *
  * @see https://mantle.ngrok.com/components/overlays/dropdown-menu#dropdownmenusubcontent
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu.Root>
+ *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.Sub>
+ *       <DropdownMenu.SubTrigger>Export</DropdownMenu.SubTrigger>
+ *       <DropdownMenu.SubContent>
+ *         <DropdownMenu.Item>Export as PDF</DropdownMenu.Item>
+ *         <DropdownMenu.Item>Export as CSV</DropdownMenu.Item>
+ *       </DropdownMenu.SubContent>
+ *     </DropdownMenu.Sub>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu.Root>
+ * ```
  */
 declare const SubContent: ({ className, loop, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) => import("react").JSX.Element;
 type DropdownMenuContentProps = ComponentProps<typeof DropdownMenuPrimitive.Content> & WithDataSlot & {
@@ -101,6 +170,18 @@ declare const Item: ({ className, inset, ...props }: ComponentProps<typeof Dropd
  * A menu item with a checkbox that can be controlled or uncontrolled.
  *
  * @see https://mantle.ngrok.com/components/overlays/dropdown-menu#dropdownmenucheckboxitem
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu.Root>
+ *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.CheckboxItem checked={true} onCheckedChange={setChecked}>
+ *       Show notifications
+ *     </DropdownMenu.CheckboxItem>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu.Root>
+ * ```
  */
 declare const CheckboxItem: ({ className, children, checked, ...props }: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) => import("react").JSX.Element;
 type DropdownMenuRadioItemProps = ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
@@ -112,12 +193,38 @@ type DropdownMenuRadioItemProps = ComponentProps<typeof DropdownMenuPrimitive.Ra
  * Used within a RadioGroup to create a set of mutually exclusive options.
  *
  * @see https://mantle.ngrok.com/components/overlays/dropdown-menu#dropdownmenuradioitem
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu.Root>
+ *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.RadioGroup value="small" onValueChange={setSize}>
+ *       <DropdownMenu.RadioItem value="small">Small</DropdownMenu.RadioItem>
+ *       <DropdownMenu.RadioItem value="medium">Medium</DropdownMenu.RadioItem>
+ *       <DropdownMenu.RadioItem value="large">Large</DropdownMenu.RadioItem>
+ *     </DropdownMenu.RadioGroup>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu.Root>
+ * ```
  */
 declare const RadioItem: ({ className, children, ...props }: DropdownMenuRadioItemProps) => import("react").JSX.Element;
 /**
  * A label for a group of dropdown menu items.
  *
  * @see https://mantle.ngrok.com/components/overlays/dropdown-menu#dropdownmenulabel
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu.Root>
+ *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.Label>My Account</DropdownMenu.Label>
+ *     <DropdownMenu.Item>Profile</DropdownMenu.Item>
+ *     <DropdownMenu.Item>Settings</DropdownMenu.Item>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu.Root>
+ * ```
  */
 declare const Label: ({ className, inset, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Label> & {
   inset?: boolean;
@@ -126,8 +233,39 @@ declare const Label: ({ className, inset, ...props }: ComponentProps<typeof Drop
  * A visual separator between dropdown menu items or groups.
  *
  * @see https://mantle.ngrok.com/components/overlays/dropdown-menu#dropdownmenuseparator
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu.Root>
+ *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.Item>Edit</DropdownMenu.Item>
+ *     <DropdownMenu.Item>Copy</DropdownMenu.Item>
+ *     <DropdownMenu.Separator />
+ *     <DropdownMenu.Item>Delete</DropdownMenu.Item>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu.Root>
+ * ```
  */
 declare const DropdownSeparator: ({ className, ...props }: ComponentProps<typeof Separator>) => import("react").JSX.Element;
+/**
+ * A keyboard shortcut indicator for dropdown menu items.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/dropdown-menu#dropdownmenushortcut
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu.Root>
+ *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.Item>
+ *       Save
+ *       <DropdownMenu.Shortcut>⌘S</DropdownMenu.Shortcut>
+ *     </DropdownMenu.Item>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu.Root>
+ * ```
+ */
 declare const Shortcut: ({ className, ...props }: ComponentProps<"span">) => import("react").JSX.Element;
 /**
  * A menu of options or actions, triggered by a button.

package/dist/dropdown-menu.d.ts

@@ -1,3 +1,3 @@
-import { t as DropdownMenu } from "./dropdown-menu-DZg-Cd69.js";
-import "./dropdown-menu-Dw-OtXPm.js";
+import { t as DropdownMenu } from "./dropdown-menu-D6pMAY7I.js";
+import "./dropdown-menu-BbbQuae2.js";
 export { DropdownMenu };

package/dist/field.d.ts

@@ -372,6 +372,17 @@ declare const Optional: ({ asChild, children, className, ref, ...props }: Compon
  * ```
  */
 declare const Group: ({ asChild, className, ref, ...props }: ComponentProps<"div"> & WithAsChild) => import("react").JSX.Element;
+/**
+ * Props for `Field.Item`.
+ */
+type FieldItemProps = ComponentProps<"div"> & WithAsChild & WithValidation & {
+  /**
+   * Form-value name for the field. Required so `Field.Control` can splat
+   * it onto the focusable child while `Field.Item` owns the stable
+   * generated control id used by `Field.Label`'s `htmlFor`.
+   */
+  name: string;
+};
 /**
  * A single form field — `Label`, a control (`Input`, `Select`, `Checkbox`,
  * etc.), and any `Field.Description`, `Field.Errors`, or `Field.ErrorList` siblings stacked
@@ -416,14 +427,6 @@ declare const Group: ({ asChild, className, ref, ...props }: ComponentProps<"div
  * </Field.Group>
  * ```
  */
-type FieldItemProps = ComponentProps<"div"> & WithAsChild & WithValidation & {
-  /**
-   * Form-value name for the field. Required so `Field.Control` can splat
-   * it onto the focusable child while `Field.Item` owns the stable
-   * generated control id used by `Field.Label`'s `htmlFor`.
-   */
-  name: string;
-};
 declare const Item: ({ asChild, children, className, name, ref, validation: validationProp, ...props }: FieldItemProps) => import("react").JSX.Element;
 type FieldControlSlotProps = Omit<ComponentProps<typeof Slot>, "aria-describedby" | "aria-errormessage" | "aria-invalid" | "children">;
 /**
@@ -874,7 +877,7 @@ declare const Field: {
    * opt out (e.g. when the focusable element is rendered outside of
    * `Field.Control`).
    *
-   * @see https://mantle.ngrok.com/components/forms/label
+   * @see https://mantle.ngrok.com/components/forms/field#fieldlabel
    *
    * @example
    * ```tsx

package/dist/flag.d.ts

@@ -57,7 +57,7 @@ type Props = Omit<ComponentProps<"div">, "children"> & {
  * **Loading.** Defaults to `loading="lazy"`. Use `loading="eager"` for flags
  * above the fold or in critical content.
  *
- * @see https://mantle.ngrok.com/components/data-display/flag#flag
+ * @see https://mantle.ngrok.com/components/data-display/flag
  *
  * @example
  * ```tsx

package/dist/icons.d.ts

@@ -1,6 +1,6 @@
 import { t as SvgAttributes } from "./icon-D1RY5Tcj.js";
 import { a as AlphanumericSortingDirection, c as TimeSortingDirection, o as SortingDirection, s as SortingMode } from "./direction-BjU0bPST.js";
-import { i as Theme } from "./theme-CYNpplwN.js";
+import { i as Theme } from "./theme-FbfjYiD3.js";
 import { ComponentProps } from "react";
 //#region src/components/icons/sort.d.ts
 type Props = SvgAttributes & ({
@@ -23,12 +23,26 @@ type Props = SvgAttributes & ({
 /**
  * A sorting icon that can be used to indicate the sorting direction of a table column or list.
  * It is aware of the sorting mode (alphanumeric or time) and the sorting direction (ascending or descending).
+ *
+ * @see https://mantle.ngrok.com/components/data-display/icons
+ *
+ * @example
+ * ```tsx
+ * <SortIcon mode="time" direction="newest-to-oldest" />
+ * ```
  */
 declare const SortIcon: ({ mode, direction, ...props }: Props) => import("react").JSX.Element;
 //#endregion
 //#region src/components/icons/traffic-policy-file.d.ts
 /**
  * An icon representing a traffic policy file.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/icons
+ *
+ * @example
+ * ```tsx
+ * <TrafficPolicyFileIcon className="size-5" />
+ * ```
  */
 declare function TrafficPolicyFileIcon(props: SvgAttributes): import("react").JSX.Element;
 //#endregion
@@ -39,6 +53,13 @@ declare function TrafficPolicyFileIcon(props: SvgAttributes): import("react").JS
  * - `dark`: MoonIcon
  * - `light-high-contrast`: SunIcon (fill)
  * - `dark-high-contrast`: MoonIcon (fill)
+ *
+ * @see https://mantle.ngrok.com/components/data-display/icons
+ *
+ * @example
+ * ```tsx
+ * <AutoThemeIcon className="size-5" />
+ * ```
  */
 declare function AutoThemeIcon(props: SvgAttributes): import("react").JSX.Element;
 type ThemeIconProps = SvgAttributes & {
@@ -52,12 +73,28 @@ type ThemeIconProps = SvgAttributes & {
  * - `dark`: MoonIcon
  * - `light-high-contrast`: SunIcon (fill)
  * - `dark-high-contrast`: MoonIcon (fill)
+ *
+ * @see https://mantle.ngrok.com/components/data-display/icons
+ *
+ * @example
+ * ```tsx
+ * <ThemeIcon theme="system" />
+ * ```
  */
 declare function ThemeIcon({ theme, ...props }: ThemeIconProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/icons/types.d.ts
 /**
  * Props for an inline svg icon.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/icons
+ *
+ * @example
+ * ```tsx
+ * function BrandIcon(props: InlineIconProps) {
+ * 	return <svg {...props} />;
+ * }
+ * ```
  */
 type InlineIconProps = Omit<ComponentProps<"svg">, "xmlns" | "fill" | "viewBox" | "color" | "children"> & {
   /**
@@ -72,10 +109,24 @@ type InlineIconProps = Omit<ComponentProps<"svg">, "xmlns" | "fill" | "viewBox"
 //#region src/components/icons/ngrok.d.ts
 /**
  * An inline svg icon that renders the ngrok wordmark logo. Fill color is determined by the `color` CSS property.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/icons
+ *
+ * @example
+ * ```tsx
+ * <NgrokWordmarkIcon />
+ * ```
  */
 declare function NgrokWordmarkIcon(props: Omit<InlineIconProps, "color">): import("react").JSX.Element;
 /**
  * An inline svg icon that renders the ngrok lettermark "n" logo. Fill color is determined by the `color` CSS property.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/icons
+ *
+ * @example
+ * ```tsx
+ * <NgrokLettermarkIcon />
+ * ```
  */
 declare function NgrokLettermarkIcon(props: Omit<InlineIconProps, "color">): import("react").JSX.Element;
 //#endregion

package/dist/line-chart.d.ts

@@ -1,11 +1,11 @@
-import { _ as SeriesColor, a as LegendPrimitiveProps, c as XAxisPrimitiveProps, f as ChartDatum, g as PointShape, h as CurveKind, i as GridPrimitiveProps, l as YAxisPrimitiveProps, m as ContinuousXScale, n as ChartRootBaseProps, o as ReferenceLinePrimitiveProps, p as ChartDatumEvent, r as CopyButtonPrimitiveProps, s as TooltipPrimitiveProps, t as ChartAccessibleName } from "./chart-BcOC6Qj0.js";
+import { _ as SeriesColor, a as LegendPrimitiveProps, c as XAxisPrimitiveProps, f as ChartDatum, g as PointShape, h as CurveKind, i as GridPrimitiveProps, l as YAxisPrimitiveProps, m as ContinuousXScale, n as ChartRootBaseProps, o as ReferenceLinePrimitiveProps, p as ChartDatumEvent, r as CopyButtonPrimitiveProps, s as TooltipPrimitiveProps, t as ChartAccessibilityProps } from "./chart-1cVjAcj8.js";
 //#region src/components/line-chart/line-chart.d.ts
 /**
  * Props for {@link LineChart.Root}. Lines encode value by vertical position,
  * not length from a baseline, so the full y domain stays overridable via
  * `yDomain` — and lines never stack, so there is no `stacked` prop.
  */
-type LineChartRootProps<TDatum extends ChartDatum = ChartDatum> = Omit<ChartRootBaseProps, "stacked"> & ChartAccessibleName & {
+type LineChartRootProps<TDatum extends ChartDatum = ChartDatum> = Omit<ChartRootBaseProps, "stacked"> & ChartAccessibilityProps & {
   /** Rows of data; each `LineChart.Line` reads one numeric key per row. */
   data: readonly TDatum[];
   /** The key of each row's x value. */
@@ -292,7 +292,8 @@ declare const CopyButton: (props: LineChartCopyButtonProps) => import("react").J
  * ├── LineChart.Line (one per series)
  * ├── LineChart.ReferenceLine
  * ├── LineChart.Tooltip
- * └── LineChart.Legend
+ * ├── LineChart.Legend
+ * └── LineChart.CopyButton
  * ```
  *
  * @example

package/dist/line-chart.js

@@ -1 +1 @@
-import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c}from"./chart-BROa2gqt.js";import{jsx as l}from"react/jsx-runtime";const u={Root:e=>l(o,{kind:`line`,componentName:`LineChart`,slotName:`line-chart`,...e}),Line:e=>a(`LineChart.Line`,`line`,e),Grid:e=>n(`LineChart.Grid`,e),XAxis:e=>t(`LineChart.XAxis`,e),YAxis:e=>r(`LineChart.YAxis`,e),ReferenceLine:t=>e(`LineChart.ReferenceLine`,t),Tooltip:e=>s(`LineChart.Tooltip`,e),Legend:e=>l(i,{partName:`LineChart.Legend`,slotName:`line-chart`,...e}),CopyButton:e=>l(c,{partName:`LineChart.CopyButton`,slotName:`line-chart`,...e})};export{u as LineChart};
+import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c}from"./chart-Do2qkrxl.js";import{jsx as l}from"react/jsx-runtime";const u={Root:e=>l(o,{kind:`line`,componentName:`LineChart`,slotName:`line-chart`,...e}),Line:e=>a(`LineChart.Line`,`line`,e),Grid:e=>n(`LineChart.Grid`,e),XAxis:e=>t(`LineChart.XAxis`,e),YAxis:e=>r(`LineChart.YAxis`,e),ReferenceLine:t=>e(`LineChart.ReferenceLine`,t),Tooltip:e=>s(`LineChart.Tooltip`,e),Legend:e=>l(i,{partName:`LineChart.Legend`,slotName:`line-chart`,...e}),CopyButton:e=>l(c,{partName:`LineChart.CopyButton`,slotName:`line-chart`,...e})};export{u as LineChart};

package/dist/llms.txt

@@ -1,4 +1,4 @@
-# @ngrok/mantle (0.81.0)
+# @ngrok/mantle (0.81.1)
 
 > Offline discovery hint shipped inside the @ngrok/mantle npm package. Authoritative metadata lives at https://mantle.ngrok.com/for-ai-agents.
 

package/dist/media-object.d.ts

@@ -6,14 +6,56 @@ 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.
+ *
+ * @see https://mantle.ngrok.com/components/structure/media-object#mediaobjectroot
+ *
+ * @example
+ * ```tsx
+ * <MediaObject.Root>
+ *   <MediaObject.Media>
+ *     <ExampleMedia />
+ *   </MediaObject.Media>
+ *   <MediaObject.Content>
+ *     <p>Ea culpa id id ea minim labore.</p>
+ *   </MediaObject.Content>
+ * </MediaObject.Root>
+ * ```
  */
 declare const Root: ({ asChild, className, children, style, ref }: Props) => import("react").JSX.Element;
 /**
  * The container for an image or icon to display in the media slot of the media object.
+ *
+ * @see https://mantle.ngrok.com/components/structure/media-object#mediaobjectmedia
+ *
+ * @example
+ * ```tsx
+ * <MediaObject.Root>
+ *   <MediaObject.Media>
+ *     <ExampleMedia />
+ *   </MediaObject.Media>
+ *   <MediaObject.Content>
+ *     <p>Ea culpa id id ea minim labore.</p>
+ *   </MediaObject.Content>
+ * </MediaObject.Root>
+ * ```
  */
 declare const Media: ({ asChild, className, children, style, ref }: Props) => import("react").JSX.Element;
 /**
  * The container for the content slot of a media object.
+ *
+ * @see https://mantle.ngrok.com/components/structure/media-object#mediaobjectcontent
+ *
+ * @example
+ * ```tsx
+ * <MediaObject.Root>
+ *   <MediaObject.Media>
+ *     <ExampleMedia />
+ *   </MediaObject.Media>
+ *   <MediaObject.Content>
+ *     <p>Ea culpa id id ea minim labore.</p>
+ *   </MediaObject.Content>
+ * </MediaObject.Root>
+ * ```
  */
 declare const Content: ({ asChild, className, children, style, ref }: Props) => import("react").JSX.Element;
 /**

package/dist/pagination.d.ts

@@ -1,4 +1,3 @@
-import { n as WithAsChild } from "./as-child-D23mGo4f.js";
 import { t as ButtonGroup } from "./button-C-gMbPso.js";
 import { t as Select } from "./select-0z7HVS6r.js";
 import { ComponentProps } from "react";
@@ -22,7 +21,7 @@ type CursorPaginationProps = ComponentProps<"div"> & {
  *
  * @example
  * ```tsx
- * <CursorPagination defaultPageSize={10}>
+ * <CursorPagination.Root defaultPageSize={10}>
  *   <CursorPagination.Buttons
  *     hasNextPage={hasNext}
  *     hasPreviousPage={hasPrevious}
@@ -30,7 +29,7 @@ type CursorPaginationProps = ComponentProps<"div"> & {
  *     onPreviousPage={handlePrevious}
  *   />
  *   <CursorPagination.PageSizeSelect />
- * </CursorPagination>
+ * </CursorPagination.Root>
  * ```
  */
 declare const Root: ({ className, children, defaultPageSize, ref, ...props }: CursorPaginationProps) => import("react").JSX.Element;
@@ -93,7 +92,7 @@ type CursorPageSizeSelectProps = Omit<ComponentProps<typeof Select.Trigger>, "ch
  * ```
  */
 declare const PageSizeSelect: ({ className, pageSizes, onChangePageSize, ref, ...rest }: CursorPageSizeSelectProps) => import("react").JSX.Element;
-type CursorPageSizeValueProps = Omit<ComponentProps<"span">, "children"> & WithAsChild;
+type CursorPageSizeValueProps = Omit<ComponentProps<"span">, "children">;
 /**
  * Displays the current page size when using cursor-based pagination as a read-only value.
  *
@@ -107,7 +106,7 @@ type CursorPageSizeValueProps = Omit<ComponentProps<"span">, "children"> & WithA
  * </div>
  * ```
  */
-declare function PageSizeValue({ asChild, className, ...props }: CursorPageSizeValueProps): import("react").JSX.Element;
+declare function PageSizeValue({ className, ...props }: CursorPageSizeValueProps): import("react").JSX.Element;
 /**
  * A pagination component for use with cursor-based pagination.
  *
@@ -130,7 +129,7 @@ declare function PageSizeValue({ asChild, className, ...props }: CursorPageSizeV
  *
  * @example
  * ```tsx
- * <CursorPagination defaultPageSize={10}>
+ * <CursorPagination.Root defaultPageSize={10}>
  *   <CursorPagination.Buttons
  *     hasNextPage={hasNext}
  *     hasPreviousPage={hasPrevious}
@@ -138,7 +137,7 @@ declare function PageSizeValue({ asChild, className, ...props }: CursorPageSizeV
  *     onPreviousPage={handlePrevious}
  *   />
  *   <CursorPagination.PageSizeSelect />
- * </CursorPagination>
+ * </CursorPagination.Root>
  * ```
  */
 declare const CursorPagination: {

package/dist/pagination.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{t as n}from"./button-BAno7KIU.js";import{t as r}from"./button-D9n09xUg.js";import{n as i}from"./separator-bpE_kooz.js";import{t as a}from"./select-BCHWvmyC.js";import{createContext as o,useContext as s,useEffect as c,useMemo as l,useState as u}from"react";import d from"tiny-invariant";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{CaretRightIcon as m}from"@phosphor-icons/react/CaretRight";import{CaretLeftIcon as h}from"@phosphor-icons/react/CaretLeft";const g=o(void 0),_=({className:t,children:n,defaultPageSize:r,ref:i,...a})=>{let[o,s]=u(r),c=l(()=>({defaultPageSize:r,pageSize:o,setPageSize:s}),[r,o]);return f(g.Provider,{value:c,children:f(`div`,{"data-slot":`cursor-pagination`,className:e(`inline-flex items-center justify-between gap-2`,t),ref:i,...a,children:n})})},v=({hasNextPage:e,hasPreviousPage:t,onNextPage:a,onPreviousPage:o,ref:s,...c})=>p(r,{"data-slot":`cursor-pagination-buttons`,appearance:`panel`,ref:s,...c,children:[f(n,{"data-slot":`cursor-pagination-previous`,appearance:`ghost`,disabled:!t,icon:f(h,{}),intent:`neutral`,label:`Previous page`,onClick:o,size:`sm`,type:`button`}),f(i,{"data-slot":`cursor-pagination-separator`,orientation:`vertical`,className:`min-h-5`}),f(n,{"data-slot":`cursor-pagination-next`,appearance:`ghost`,disabled:!e,icon:f(m,{}),intent:`neutral`,label:`Next page`,onClick:a,size:`sm`,type:`button`})]}),y=[5,10,20,50,100],b=({className:t,pageSizes:n=y,onChangePageSize:r,ref:i,...o})=>{let c=s(g);return d(c,`CursorPageSizeSelect must be used as a child of a CursorPagination component`),d(n.includes(c.defaultPageSize),`CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes`),d(n.includes(c.pageSize),`CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes`),p(a.Root,{defaultValue:`${c.pageSize}`,onValueChange:e=>{let t=Number.parseInt(e,10);Number.isNaN(t)&&(t=c.defaultPageSize),c.setPageSize(t),r?.(t)},children:[f(a.Trigger,{ref:i,"data-slot":`cursor-pagination-page-size-select`,className:e(`w-auto min-w-36`,t),value:c.pageSize,...o,children:f(a.Value,{})}),f(a.Content,{width:`trigger`,children:n.map(e=>p(a.Item,{value:`${e}`,children:[e,` per page`]},e))})]})};function x({asChild:n=!1,className:r,...i}){let a=s(g);return d(a,`CursorPageSizeValue must be used as a child of a CursorPagination component`),p(n?t:`span`,{"data-slot":`cursor-pagination-page-size-value`,className:e(`text-muted text-sm font-normal`,r),...i,children:[a.pageSize,` per page`]})}const S={Root:_,Buttons:v,PageSizeSelect:b,PageSizeValue:x};function C({listSize:e,pageSize:t}){let[n,r]=u(1),[i,a]=u(t);c(()=>{a(t),r(1)},[t]),c(()=>{r(1)},[e]);let o=Math.ceil(e/i),s=(n-1)*i,l=n>1,d=n<o;function f(e){r(Math.max(1,Math.min(e,o)))}function p(){d&&r(e=>Math.min(e+1,o))}function m(){l&&r(e=>Math.max(e-1,1))}function h(e){a(e),r(1)}function g(){r(o)}function _(){r(1)}return{currentPage:n,goToFirstPage:_,goToLastPage:g,goToPage:f,hasNextPage:d,hasPreviousPage:l,nextPage:p,offset:s,pageSize:i,previousPage:m,setPageSize:h,totalPages:o}}function w(e,t){return e.slice(t.offset,t.offset+t.pageSize)}export{S as CursorPagination,w as getOffsetPaginatedSlice,C as useOffsetPagination};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./button-BAno7KIU.js";import{t as n}from"./button-D9n09xUg.js";import{n as r}from"./separator-bpE_kooz.js";import{t as i}from"./select-BCHWvmyC.js";import{createContext as a,useContext as o,useEffect as s,useMemo as c,useState as l}from"react";import u from"tiny-invariant";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{CaretRightIcon as p}from"@phosphor-icons/react/CaretRight";import{CaretLeftIcon as m}from"@phosphor-icons/react/CaretLeft";const h=a(void 0),g=({className:t,children:n,defaultPageSize:r,ref:i,...a})=>{let[o,s]=l(r),u=c(()=>({defaultPageSize:r,pageSize:o,setPageSize:s}),[r,o]);return d(h.Provider,{value:u,children:d(`div`,{"data-slot":`cursor-pagination`,className:e(`inline-flex items-center justify-between gap-2`,t),ref:i,...a,children:n})})},_=({hasNextPage:e,hasPreviousPage:i,onNextPage:a,onPreviousPage:o,ref:s,...c})=>f(n,{"data-slot":`cursor-pagination-buttons`,appearance:`panel`,ref:s,...c,children:[d(t,{"data-slot":`cursor-pagination-previous`,appearance:`ghost`,disabled:!i,icon:d(m,{}),intent:`neutral`,label:`Previous page`,onClick:o,size:`sm`,type:`button`}),d(r,{"data-slot":`cursor-pagination-separator`,orientation:`vertical`,className:`min-h-5`}),d(t,{"data-slot":`cursor-pagination-next`,appearance:`ghost`,disabled:!e,icon:d(p,{}),intent:`neutral`,label:`Next page`,onClick:a,size:`sm`,type:`button`})]}),v=[5,10,20,50,100],y=({className:t,pageSizes:n=v,onChangePageSize:r,ref:a,...s})=>{let c=o(h);return u(c,`CursorPageSizeSelect must be used as a child of a CursorPagination component`),u(n.includes(c.defaultPageSize),`CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes`),u(n.includes(c.pageSize),`CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes`),f(i.Root,{defaultValue:`${c.pageSize}`,onValueChange:e=>{let t=Number.parseInt(e,10);Number.isNaN(t)&&(t=c.defaultPageSize),c.setPageSize(t),r?.(t)},children:[d(i.Trigger,{ref:a,"data-slot":`cursor-pagination-page-size-select`,className:e(`w-auto min-w-36`,t),value:c.pageSize,...s,children:d(i.Value,{})}),d(i.Content,{width:`trigger`,children:n.map(e=>f(i.Item,{value:`${e}`,children:[e,` per page`]},e))})]})};function b({className:t,...n}){let r=o(h);return u(r,`CursorPageSizeValue must be used as a child of a CursorPagination component`),f(`span`,{"data-slot":`cursor-pagination-page-size-value`,className:e(`text-muted text-sm font-normal`,t),...n,children:[r.pageSize,` per page`]})}const x={Root:g,Buttons:_,PageSizeSelect:y,PageSizeValue:b};function S({listSize:e,pageSize:t}){let[n,r]=l(1),[i,a]=l(t);s(()=>{a(t),r(1)},[t]),s(()=>{r(1)},[e]);let o=Math.ceil(e/i),c=(n-1)*i,u=n>1,d=n<o;function f(e){r(Math.max(1,Math.min(e,o)))}function p(){d&&r(e=>Math.min(e+1,o))}function m(){u&&r(e=>Math.max(e-1,1))}function h(e){a(e),r(1)}function g(){r(o)}function _(){r(1)}return{currentPage:n,goToFirstPage:_,goToLastPage:g,goToPage:f,hasNextPage:d,hasPreviousPage:u,nextPage:p,offset:c,pageSize:i,previousPage:m,setPageSize:h,totalPages:o}}function C(e,t){return e.slice(t.offset,t.offset+t.pageSize)}export{x as CursorPagination,C as getOffsetPaginatedSlice,S as useOffsetPagination};