@ngrok/mantle 0.79.3 → 0.81.0

package/dist/pagination.d.ts

@@ -1,6 +1,6 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
-import { t as ButtonGroup } from "./index-BSAizFod.js";
-import { t as Select } from "./select-Bwt2YduR.js";
+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";
 //#region src/components/pagination/cursor-pagination.d.ts
 type CursorPaginationProps = ComponentProps<"div"> & {
@@ -9,6 +9,31 @@ type CursorPaginationProps = ComponentProps<"div"> & {
    */
   defaultPageSize: number;
 };
+/**
+ * A pagination component for use with cursor-based pagination.
+ *
+ * Cursor-based pagination is a way of loading data in chunks by using a cursor
+ * from the last item on the current page to know where to start the next set,
+ * making sure nothing is missed or repeated. Like a linked list, but for chunks
+ * of data. It doesn't let you jump to a specific page or know how many total pages
+ * there are, but it's more efficient for large or real-time data sets.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/pagination#cursorpaginationroot
+ *
+ * @example
+ * ```tsx
+ * <CursorPagination defaultPageSize={10}>
+ *   <CursorPagination.Buttons
+ *     hasNextPage={hasNext}
+ *     hasPreviousPage={hasPrevious}
+ *     onNextPage={handleNext}
+ *     onPreviousPage={handlePrevious}
+ *   />
+ *   <CursorPagination.PageSizeSelect />
+ * </CursorPagination>
+ * ```
+ */
+declare const Root: ({ className, children, defaultPageSize, ref, ...props }: CursorPaginationProps) => import("react").JSX.Element;
 type CursorButtonsProps = Omit<ComponentProps<typeof ButtonGroup>, "appearance"> & {
   /**
    * Whether there is a next page of data to load.
@@ -27,6 +52,22 @@ type CursorButtonsProps = Omit<ComponentProps<typeof ButtonGroup>, "appearance">
    */
   onPreviousPage?: () => void;
 };
+/**
+ * A pair of buttons for navigating between pages of data when using cursor-based pagination.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/pagination#cursorpaginationbuttons
+ *
+ * @example
+ * ```tsx
+ * <CursorPagination.Buttons
+ *   hasNextPage={hasNext}
+ *   hasPreviousPage={hasPrevious}
+ *   onNextPage={() => loadNextPage()}
+ *   onPreviousPage={() => loadPreviousPage()}
+ * />
+ * ```
+ */
+declare const Buttons: ({ hasNextPage, hasPreviousPage, onNextPage, onPreviousPage, ref, ...props }: CursorButtonsProps) => import("react").JSX.Element;
 declare const defaultPageSizes: readonly [5, 10, 20, 50, 100];
 type CursorPageSizeSelectProps = Omit<ComponentProps<typeof Select.Trigger>, "children"> & {
   /**
@@ -38,6 +79,20 @@ type CursorPageSizeSelectProps = Omit<ComponentProps<typeof Select.Trigger>, "ch
    */
   onChangePageSize?: (value: number) => void;
 };
+/**
+ * A select input for changing the number of items per page when using cursor-based pagination.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/pagination#cursorpaginationpagesizeselect
+ *
+ * @example
+ * ```tsx
+ * <CursorPagination.PageSizeSelect
+ *   pageSizes={[10, 20, 50, 100]}
+ *   onChangePageSize={(size) => console.log('Page size changed to:', size)}
+ * />
+ * ```
+ */
+declare const PageSizeSelect: ({ className, pageSizes, onChangePageSize, ref, ...rest }: CursorPageSizeSelectProps) => import("react").JSX.Element;
 type CursorPageSizeValueProps = Omit<ComponentProps<"span">, "children"> & WithAsChild;
 /**
  * Displays the current page size when using cursor-based pagination as a read-only value.
@@ -105,7 +160,7 @@ declare const CursorPagination: {
    * </CursorPagination.Root>
    * ```
    */
-  readonly Root: import("react").ForwardRefExoticComponent<Omit<CursorPaginationProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Root: typeof Root;
   /**
    * A pair of buttons for navigating between pages of data when using cursor-based pagination.
    *
@@ -121,7 +176,7 @@ declare const CursorPagination: {
    * />
    * ```
    */
-  readonly Buttons: import("react").ForwardRefExoticComponent<Omit<CursorButtonsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Buttons: typeof Buttons;
   /**
    * A select input for changing the number of items per page when using cursor-based pagination.
    *
@@ -135,7 +190,7 @@ declare const CursorPagination: {
    * />
    * ```
    */
-  readonly PageSizeSelect: import("react").ForwardRefExoticComponent<Omit<CursorPageSizeSelectProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  readonly PageSizeSelect: typeof PageSizeSelect;
   /**
    * Displays the current page size when using cursor-based pagination as a read-only value.
    *

package/dist/pagination.js

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

package/dist/popover-CE4OlWkd.d.ts

@@ -0,0 +1,208 @@
+import { ComponentProps } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+//#region src/components/popover/popover.d.ts
+type PopoverContentProps = ComponentProps<typeof PopoverPrimitive.Content> & {
+  /**
+   * The preferred width of the `PopoverContent` as a tailwind `max-w-` class.
+   *
+   * By default, a `Popover`'s content width is responsive with a default
+   * preferred width: the maximum width of the `PopoverContent`
+   *
+   * @default `max-w-72`
+   */
+  preferredWidth?: `max-w-${string}`;
+};
+/**
+ * The content to render inside the popover.
+ *
+ * `Popover.Content` renders at Tailwind `z-50`, Mantle's shared floating
+ * z-index. When multiple shared layers are open, the most recently mounted
+ * layer renders on top.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/popover#popovercontent
+ *
+ * @example
+ * ```tsx
+ * <Popover.Root>
+ *   <Popover.Trigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">
+ *       Open Popover
+ *     </Button>
+ *   </Popover.Trigger>
+ *   <Popover.Content>
+ *     <p>This is the popover content.</p>
+ *   </Popover.Content>
+ * </Popover.Root>
+ * ```
+ */
+declare const Content: ({ align, className, onClick, preferredWidth, ref, sideOffset, ...props }: PopoverContentProps) => import("react").JSX.Element;
+/**
+ * A floating overlay that displays rich content in a portal, triggered by a button.
+ *
+ * Use `Popover` for INTERACTIVE overlay content — small forms, settings
+ * menus, color pickers, action lists. The user opens it deliberately
+ * (click/tap or focus + space). For short, non-interactive label hints
+ * triggered by hover, use `Tooltip` instead. For non-essential preview
+ * content shown on hover, use `HoverCard`.
+ *
+ * `Popover` is a non-modal dialog by default: focus moves into the content
+ * when it opens, `Escape` closes and returns focus to the trigger, clicking
+ * outside dismisses, and the page (body and any scroll containers) continues
+ * to scroll normally. Pass `modal` on `Popover.Root` to trap focus inside
+ * the content, block interaction with the rest of the page, and lock body
+ * scroll while the popover is open.
+ *
+ * `Popover.Content` renders at Tailwind `z-50`, Mantle's shared floating
+ * z-index. When multiple shared layers are open, the most recently mounted
+ * layer renders on top.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/popover
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+ *
+ * @example
+ * Composition:
+ * ```
+ * Popover.Root
+ * ├── Popover.Trigger
+ * ├── Popover.Anchor
+ * └── Popover.Content
+ *     └── Popover.Close
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Popover.Root>
+ *   <Popover.Trigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">
+ *       Open Popover
+ *     </Button>
+ *   </Popover.Trigger>
+ *   <Popover.Content>
+ *     <p>This is the popover content.</p>
+ *   </Popover.Content>
+ * </Popover.Root>
+ * ```
+ */
+declare const Popover: {
+  /**
+   * The root, stateful component that manages the open/closed state of the popover.
+   *
+   * `Popover.Content` renders at Tailwind `z-50`, Mantle's shared floating
+   * z-index. When multiple shared layers are open, the most recently mounted
+   * layer renders on top.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/popover#popoverroot
+   *
+   * @example
+   * ```tsx
+   * <Popover.Root>
+   *   <Popover.Trigger asChild>
+   *     <Button type="button" appearance="outlined" intent="neutral">Open popover</Button>
+   *   </Popover.Trigger>
+   *   <Popover.Content>
+   *     <p>This is the popover content.</p>
+   *   </Popover.Content>
+   * </Popover.Root>
+   * ```
+   */
+  readonly Root: import("react").FC<PopoverPrimitive.PopoverProps>;
+  /**
+   * An optional element to position the PopoverContent against. If not used, content positions alongside the trigger.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/popover#popoveranchor
+   *
+   * @example
+   * ```tsx
+   * <Popover.Root>
+   *   <Popover.Anchor asChild>
+   *     <div>Position relative to this element</div>
+   *   </Popover.Anchor>
+   *   <Popover.Trigger asChild>
+   *     <Button type="button" appearance="outlined" intent="neutral">Open Popover</Button>
+   *   </Popover.Trigger>
+   *   <Popover.Content>
+   *     <p>This popover is positioned relative to the anchor.</p>
+   *     <Popover.Close asChild>
+   *       <Button type="button" appearance="outlined" intent="neutral">Close</Button>
+   *     </Popover.Close>
+   *   </Popover.Content>
+   * </Popover.Root>
+   * ```
+   */
+  readonly Anchor: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+  /**
+   * A button that closes an open popover. Can be placed anywhere within the popover content.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/popover#popoverclose
+   *
+   * @example
+   * ```tsx
+   * <Popover.Root>
+   *   <Popover.Trigger asChild>
+   *     <Button type="button" appearance="outlined" intent="neutral">Settings</Button>
+   *   </Popover.Trigger>
+   *   <Popover.Content>
+   *     <div className="flex items-center justify-between">
+   *       <Text>Settings Panel</Text>
+   *       <Popover.Close asChild>
+   *         <IconButton type="button" appearance="ghost" intent="neutral" size="sm" label="Close" icon={<XIcon />} />
+   *       </Popover.Close>
+   *     </div>
+   *     <Text>Configure your preferences here.</Text>
+   *   </Popover.Content>
+   * </Popover.Root>
+   * ```
+   */
+  readonly Close: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+  /**
+   * The content to render inside the popover. Appears in a portal with rich styling and animations.
+   *
+   * `Popover.Content` renders at Tailwind `z-50`, Mantle's shared floating
+   * z-index. When multiple shared layers are open, the most recently mounted
+   * layer renders on top.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/popover#popovercontent
+   *
+   * @example
+   * ```tsx
+   * <Popover.Root>
+   *   <Popover.Trigger asChild>
+   *     <Button type="button" appearance="outlined" intent="neutral">Show Info</Button>
+   *   </Popover.Trigger>
+   *   <Popover.Content side="top" align="center">
+   *     <div className="space-y-2">
+   *       <Text weight="strong">Additional Information</Text>
+   *       <Text>This is the content inside the popover.</Text>
+   *       <Button type="button" appearance="filled" intent="neutral" size="sm">Action</Button>
+   *     </div>
+   *   </Popover.Content>
+   * </Popover.Root>
+   * ```
+   */
+  readonly Content: typeof Content;
+  /**
+   * The trigger button that opens the popover when clicked or focused.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/popover#popovertrigger
+   *
+   * @example
+   * ```tsx
+   * <Popover.Root>
+   *   <Popover.Trigger asChild>
+   *     <Button type="button" appearance="outlined" intent="neutral">
+   *       Options
+   *     </Button>
+   *   </Popover.Trigger>
+   *   <Popover.Content>
+   *     <div className="space-y-2">
+   *       <Button type="button" appearance="ghost" intent="neutral">Edit</Button>
+   *       <Button type="button" appearance="ghost" intent="danger">Delete</Button>
+   *     </div>
+   *   </Popover.Content>
+   * </Popover.Root>
+   * ```
+   */
+  readonly Trigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+//#endregion
+export { Popover as t };

package/dist/popover-CQ9s7jG5.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-IiQEAKf5.js";import{jsx as t}from"react/jsx-runtime";import*as n from"@radix-ui/react-popover";const r=n.Root,i=n.Trigger,a={Root:r,Anchor:n.Anchor,Close:n.Close,Content:({align:r=`center`,className:i,onClick:a,preferredWidth:o=`max-w-72`,ref:s,sideOffset:c=4,...l})=>t(n.Portal,{children:t(n.Content,{align:r,"data-slot":`popover-content`,className:e(`text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 rounded-md border p-4 shadow-md outline-hidden`,o,i),onClick:e=>{e.stopPropagation(),a?.(e)},ref:s,sideOffset:c,...l})}),Trigger:i};export{a as t};

package/dist/popover.d.ts

@@ -1,182 +1,2 @@
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-//#region src/components/popover/popover.d.ts
-/**
- * A floating overlay that displays rich content in a portal, triggered by a button.
- *
- * Use `Popover` for INTERACTIVE overlay content — small forms, settings
- * menus, color pickers, action lists. The user opens it deliberately
- * (click/tap or focus + space). For short, non-interactive label hints
- * triggered by hover, use `Tooltip` instead. For non-essential preview
- * content shown on hover, use `HoverCard`.
- *
- * `Popover` is a non-modal dialog by default: focus moves into the content
- * when it opens, `Escape` closes and returns focus to the trigger, clicking
- * outside dismisses, and the page (body and any scroll containers) continues
- * to scroll normally. Pass `modal` on `Popover.Root` to trap focus inside
- * the content, block interaction with the rest of the page, and lock body
- * scroll while the popover is open.
- *
- * `Popover.Content` renders at Tailwind `z-50`, Mantle's shared floating
- * z-index. When multiple shared layers are open, the most recently mounted
- * layer renders on top.
- *
- * @see https://mantle.ngrok.com/components/overlays/popover
- * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
- *
- * @example
- * Composition:
- * ```
- * Popover.Root
- * ├── Popover.Trigger
- * ├── Popover.Anchor
- * └── Popover.Content
- *     └── Popover.Close
- * ```
- *
- * @example
- * ```tsx
- * <Popover.Root>
- *   <Popover.Trigger asChild>
- *     <Button type="button" appearance="outlined" intent="neutral">
- *       Open Popover
- *     </Button>
- *   </Popover.Trigger>
- *   <Popover.Content>
- *     <p>This is the popover content.</p>
- *   </Popover.Content>
- * </Popover.Root>
- * ```
- */
-declare const Popover: {
-  /**
-   * The root, stateful component that manages the open/closed state of the popover.
-   *
-   * `Popover.Content` renders at Tailwind `z-50`, Mantle's shared floating
-   * z-index. When multiple shared layers are open, the most recently mounted
-   * layer renders on top.
-   *
-   * @see https://mantle.ngrok.com/components/overlays/popover#popoverroot
-   *
-   * @example
-   * ```tsx
-   * <Popover.Root>
-   *   <Popover.Trigger asChild>
-   *     <Button type="button" appearance="outlined" intent="neutral">Open popover</Button>
-   *   </Popover.Trigger>
-   *   <Popover.Content>
-   *     <p>This is the popover content.</p>
-   *   </Popover.Content>
-   * </Popover.Root>
-   * ```
-   */
-  readonly Root: import("react").FC<PopoverPrimitive.PopoverProps>;
-  /**
-   * An optional element to position the PopoverContent against. If not used, content positions alongside the trigger.
-   *
-   * @see https://mantle.ngrok.com/components/overlays/popover#popoveranchor
-   *
-   * @example
-   * ```tsx
-   * <Popover.Root>
-   *   <Popover.Anchor asChild>
-   *     <div>Position relative to this element</div>
-   *   </Popover.Anchor>
-   *   <Popover.Trigger asChild>
-   *     <Button type="button" appearance="outlined" intent="neutral">Open Popover</Button>
-   *   </Popover.Trigger>
-   *   <Popover.Content>
-   *     <p>This popover is positioned relative to the anchor.</p>
-   *     <Popover.Close asChild>
-   *       <Button type="button" appearance="outlined" intent="neutral">Close</Button>
-   *     </Popover.Close>
-   *   </Popover.Content>
-   * </Popover.Root>
-   * ```
-   */
-  readonly Anchor: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
-  /**
-   * A button that closes an open popover. Can be placed anywhere within the popover content.
-   *
-   * @see https://mantle.ngrok.com/components/overlays/popover#popoverclose
-   *
-   * @example
-   * ```tsx
-   * <Popover.Root>
-   *   <Popover.Trigger asChild>
-   *     <Button type="button" appearance="outlined" intent="neutral">Settings</Button>
-   *   </Popover.Trigger>
-   *   <Popover.Content>
-   *     <div className="flex items-center justify-between">
-   *       <Text>Settings Panel</Text>
-   *       <Popover.Close asChild>
-   *         <IconButton type="button" appearance="ghost" intent="neutral" size="sm" label="Close" icon={<XIcon />} />
-   *       </Popover.Close>
-   *     </div>
-   *     <Text>Configure your preferences here.</Text>
-   *   </Popover.Content>
-   * </Popover.Root>
-   * ```
-   */
-  readonly Close: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
-  /**
-   * The content to render inside the popover. Appears in a portal with rich styling and animations.
-   *
-   * `Popover.Content` renders at Tailwind `z-50`, Mantle's shared floating
-   * z-index. When multiple shared layers are open, the most recently mounted
-   * layer renders on top.
-   *
-   * @see https://mantle.ngrok.com/components/overlays/popover#popovercontent
-   *
-   * @example
-   * ```tsx
-   * <Popover.Root>
-   *   <Popover.Trigger asChild>
-   *     <Button type="button" appearance="outlined" intent="neutral">Show Info</Button>
-   *   </Popover.Trigger>
-   *   <Popover.Content side="top" align="center">
-   *     <div className="space-y-2">
-   *       <Text weight="strong">Additional Information</Text>
-   *       <Text>This is the content inside the popover.</Text>
-   *       <Button type="button" appearance="filled" intent="neutral" size="sm">Action</Button>
-   *     </div>
-   *   </Popover.Content>
-   * </Popover.Root>
-   * ```
-   */
-  readonly Content: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    /**
-     * The preferred width of the `PopoverContent` as a tailwind `max-w-` class.
-     *
-     * By default, a `Popover`'s content width is responsive with a default
-     * preferred width: the maximum width of the `PopoverContent`
-     *
-     * @default `max-w-72`
-     */
-    preferredWidth?: `max-w-${string}`;
-  } & import("react").RefAttributes<HTMLDivElement>>;
-  /**
-   * The trigger button that opens the popover when clicked or focused.
-   *
-   * @see https://mantle.ngrok.com/components/overlays/popover#popovertrigger
-   *
-   * @example
-   * ```tsx
-   * <Popover.Root>
-   *   <Popover.Trigger asChild>
-   *     <Button type="button" appearance="outlined" intent="neutral">
-   *       Options
-   *     </Button>
-   *   </Popover.Trigger>
-   *   <Popover.Content>
-   *     <div className="space-y-2">
-   *       <Button type="button" appearance="ghost" intent="neutral">Edit</Button>
-   *       <Button type="button" appearance="ghost" intent="danger">Delete</Button>
-   *     </div>
-   *   </Popover.Content>
-   * </Popover.Root>
-   * ```
-   */
-  readonly Trigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-};
-//#endregion
+import { t as Popover } from "./popover-CE4OlWkd.js";
 export { Popover };

package/dist/popover.js

@@ -1 +1 @@
-import{t as e}from"./popover-D5WxxnBY.js";export{e as Popover};
+import{t as e}from"./popover-CQ9s7jG5.js";export{e as Popover};

package/dist/primitive-trJDqIXJ.js

@@ -0,0 +1 @@
+import{t as e}from"./slot-CDk0Bb9z.js";import{t}from"./booleanish-BfvnW6vy.js";import{createContext as n,useContext as r,useEffect as i,useMemo as a,useState as o}from"react";import{jsx as s}from"react/jsx-runtime";import*as c from"@radix-ui/react-dialog";function l(e){e.target instanceof Element&&e.target.closest(`.overlay-prompt`)&&e.preventDefault()}const u=n({hasDescription:!1,setHasDescription:()=>{}});function d(e){let[t,n]=o(!1),r=a(()=>({hasDescription:t,setHasDescription:n}),[t]);return s(u.Provider,{value:r,children:s(c.Root,{...e})})}const f=c.Trigger,p=c.Portal,m=c.Close,h=e=>s(c.Overlay,{"data-overlay":!0,...e}),g=({onEscapeKeyDown:e,onInteractOutside:t,onPointerDownOutside:n,ref:i,...a})=>{let o=r(u);return s(c.Content,{ref:i,onEscapeKeyDown:t=>{b(t),e?.(t)},onInteractOutside:e=>{l(e),t?.(e)},onPointerDownOutside:e=>{l(e),n?.(e)},...o.hasDescription?{}:{"aria-describedby":void 0},...a})},_=c.Title,v=({asChild:t,children:n,ref:a,...o})=>{let l=r(u);i(()=>(l.setHasDescription(!0),()=>l.setHasDescription(!1)),[l]);let d=t?e:`div`;return s(c.Description,{ref:a,asChild:!0,children:s(d,{...o,children:n})})};function y(e){return e instanceof HTMLElement&&e.hasAttribute(`data-overlay`)}function b(e){if(!w(e.currentTarget))return;let n=e.currentTarget,r=n instanceof Document?n.activeElement:n.ownerDocument?.activeElement??null,i=x(e.target)??x(r),a=i?S(i):null;i!=null&&t(i.getAttribute(`aria-expanded`))&&a!=null&&n.contains(i)&&n.contains(a)&&(a.getAttribute(`data-open`)===`true`||a.getAttribute(`data-state`)===`open`)&&e.preventDefault()}function x(e){return C(e)?e.closest(`[aria-expanded='true'][aria-controls]`):null}function S(e){let t=e.getAttribute(`aria-controls`);if(!t)return null;let n=e.ownerDocument.getElementById(t);return n instanceof HTMLElement?n:null}function C(e){return e instanceof HTMLElement}function w(e){return e instanceof Node&&`querySelector`in e}export{p as a,f as c,h as i,y as l,g as n,d as o,v as r,_ as s,m as t};

package/dist/progress.d.ts

@@ -62,10 +62,7 @@ type Props = SvgAttributes & {
  * </ProgressDonut.Root>
  * ```
  */
-declare const Root$1: {
-  ({ children, className, max: _max, strokeWidth: _strokeWidth, value: _value, indeterminateRotationSpeed, ...props }: Props): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Root$1: ({ children, className, max: _max, strokeWidth: _strokeWidth, value: _value, indeterminateRotationSpeed, ...props }: Props) => import("react").JSX.Element;
 type ProgressDonutIndicatorProps = Omit<ComponentProps<"g">, "children">;
 /**
  * The indicator for the circular progress bar.
@@ -83,10 +80,7 @@ type ProgressDonutIndicatorProps = Omit<ComponentProps<"g">, "children">;
  * </ProgressDonut.Root>
  * ```
  */
-declare const Indicator$1: {
-  ({ className, ...props }: ProgressDonutIndicatorProps): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Indicator$1: ({ className, ...props }: ProgressDonutIndicatorProps) => import("react").JSX.Element;
 /**
  * A simple circular progress bar which shows the completion progress of a task.
  *

package/dist/progress.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./types-D85fCNV3.js";import{t as n}from"./clsx-DUGZgXfJ.js";import{createContext as r,useContext as i,useId as a,useMemo as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import*as l from"@radix-ui/react-progress";function u(e,{min:t,max:n}){return Math.min(n,Math.max(t,e))}function d(e){return typeof e==`number`}function f(e,t){return d(e)&&!Number.isNaN(e)&&e<=t&&e>=0}function p(e){return d(e)&&!Number.isNaN(e)&&e>0}const m={max:100,strokeWidth:`0.25rem`,value:0},h=r(m),g=({children:n,className:r,max:i=100,strokeWidth:a=4,value:l,indeterminateRotationSpeed:u,...g})=>{let _=p(i)?i:100,v=f(l,_)?l:l==null?0:`indeterminate`,x=y(a??m.strokeWidth),S=d(v)?v:void 0,C=b(x),w=o(()=>({max:_,strokeWidth:x,value:v}),[_,x,v]);return s(h.Provider,{value:w,children:c(`svg`,{"data-slot":`progress-donut`,"aria-valuemax":_,"aria-valuemin":0,"aria-valuenow":S,className:e(`size-6 text-gray-200 dark:text-gray-300`,v===`indeterminate`&&[`animate-spin`,u??`animation-duration-[15s]`],r),"data-max":_,"data-min":0,"data-value":S,height:`100%`,role:`progressbar`,width:`100%`,...g,children:[s(`circle`,{className:`[r:var(--radius)]`,cx:`50%`,cy:`50%`,fill:`transparent`,stroke:`currentColor`,strokeWidth:x,style:t({"--radius":C})}),n]})})};g.displayName=`ProgressDonut`;const _=({className:r,...o})=>{let l=a(),u=i(h)??m,d=(u.value===`indeterminate`?.6:u.value/u.max)*100,f=y(u.strokeWidth),p=b(f);return c(`g`,{"data-slot":`progress-donut-indicator`,className:e(`text-accent-600`,r),...o,children:[u.value===`indeterminate`&&s(`defs`,{children:c(`linearGradient`,{id:l,children:[s(`stop`,{className:`stop-opacity-100 stop-color-current`,offset:`0%`}),s(`stop`,{className:`stop-opacity-0 stop-color-current`,offset:`95%`})]})}),s(`circle`,{className:n(`[r:var(--radius)]`,`origin-center`),cx:`50%`,cy:`50%`,fill:`transparent`,pathLength:100,stroke:u.value===`indeterminate`?`url(#${l})`:`currentColor`,strokeDasharray:100,strokeDashoffset:100-d,strokeLinecap:`round`,strokeWidth:f,style:t({"--radius":p}),transform:`rotate(-90)`})]})};_.displayName=`ProgressDonutIndicator`;const v={Root:g,Indicator:_};function y(e){let t=4;return e==null?t:(t=typeof e==`number`?e:e.endsWith(`rem`)?Number(e.replace(`rem`,``))*16:Number(e),u(Number.isNaN(t)?4:t,{min:1,max:12}))}function b(e){return`calc(50% - ${e/2}px)`}const x=r({max:100,value:0});function S({className:t,children:n,max:r=100,value:i,...a}){let c=p(r)?r:100,u=f(i,c)?i:i==null?0:`indeterminate`,m=d(u)?u:void 0,h=o(()=>({max:c,value:u}),[c,u]);return s(x.Provider,{value:h,children:s(l.Root,{"data-slot":`progress-bar`,className:e(`bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md`,t),value:m,max:c,...a,children:n})})}S.displayName=`Root`;function C({className:t,style:n,...r}){let a=i(x),{max:o}=a,c=(o-(a.value===`indeterminate`?0:a.value))/o*100;return s(l.Indicator,{"data-slot":`progress-bar-indicator`,className:e(`bg-accent-600 h-full w-full flex-1 transition-all`,t),style:{...n,transform:`translateX(-${c}%)`},...r})}C.displayName=`Indicator`;const w={Root:S,Indicator:C};export{w as ProgressBar,v as ProgressDonut};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./types-D85fCNV3.js";import{t as n}from"./clsx-DUGZgXfJ.js";import{createContext as r,useContext as i,useId as a,useMemo as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import*as l from"@radix-ui/react-progress";function u(e,{min:t,max:n}){return Math.min(n,Math.max(t,e))}function d(e){return typeof e==`number`}function f(e,t){return d(e)&&!Number.isNaN(e)&&e<=t&&e>=0}function p(e){return d(e)&&!Number.isNaN(e)&&e>0}const m={max:100,strokeWidth:`0.25rem`,value:0},h=r(m),g={Root:({children:n,className:r,max:i=100,strokeWidth:a=4,value:l,indeterminateRotationSpeed:u,...g})=>{let y=p(i)?i:100,b=f(l,y)?l:l==null?0:`indeterminate`,x=_(a??m.strokeWidth),S=d(b)?b:void 0,C=v(x),w=o(()=>({max:y,strokeWidth:x,value:b}),[y,x,b]);return s(h.Provider,{value:w,children:c(`svg`,{"data-slot":`progress-donut`,"aria-valuemax":y,"aria-valuemin":0,"aria-valuenow":S,className:e(`size-6 text-gray-200 dark:text-gray-300`,b===`indeterminate`&&[`animate-spin`,u??`animation-duration-[15s]`],r),"data-max":y,"data-min":0,"data-value":S,height:`100%`,role:`progressbar`,width:`100%`,...g,children:[s(`circle`,{className:`[r:var(--radius)]`,cx:`50%`,cy:`50%`,fill:`transparent`,stroke:`currentColor`,strokeWidth:x,style:t({"--radius":C})}),n]})})},Indicator:({className:r,...o})=>{let l=a(),u=i(h)??m,d=(u.value===`indeterminate`?.6:u.value/u.max)*100,f=_(u.strokeWidth),p=v(f);return c(`g`,{"data-slot":`progress-donut-indicator`,className:e(`text-accent-600`,r),...o,children:[u.value===`indeterminate`&&s(`defs`,{children:c(`linearGradient`,{id:l,children:[s(`stop`,{className:`stop-opacity-100 stop-color-current`,offset:`0%`}),s(`stop`,{className:`stop-opacity-0 stop-color-current`,offset:`95%`})]})}),s(`circle`,{className:n(`[r:var(--radius)]`,`origin-center`),cx:`50%`,cy:`50%`,fill:`transparent`,pathLength:100,stroke:u.value===`indeterminate`?`url(#${l})`:`currentColor`,strokeDasharray:100,strokeDashoffset:100-d,strokeLinecap:`round`,strokeWidth:f,style:t({"--radius":p}),transform:`rotate(-90)`})]})}};function _(e){let t=4;return e==null?t:(t=typeof e==`number`?e:e.endsWith(`rem`)?Number(e.replace(`rem`,``))*16:Number(e),u(Number.isNaN(t)?4:t,{min:1,max:12}))}function v(e){return`calc(50% - ${e/2}px)`}const y=r({max:100,value:0});function b({className:t,children:n,max:r=100,value:i,...a}){let c=p(r)?r:100,u=f(i,c)?i:i==null?0:`indeterminate`,m=d(u)?u:void 0,h=o(()=>({max:c,value:u}),[c,u]);return s(y.Provider,{value:h,children:s(l.Root,{"data-slot":`progress-bar`,className:e(`bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md`,t),value:m,max:c,...a,children:n})})}function x({className:t,style:n,...r}){let a=i(y),{max:o}=a,c=(o-(a.value===`indeterminate`?0:a.value))/o*100;return s(l.Indicator,{"data-slot":`progress-bar-indicator`,className:e(`bg-accent-600 h-full w-full flex-1 transition-all`,t),style:{...n,transform:`translateX(-${c}%)`},...r})}const S={Root:b,Indicator:x};export{S as ProgressBar,g as ProgressDonut};