@ngrok/mantle 0.82.1 → 0.83.1

package/dist/otp-input.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DpNWVci8.js";import{t as n}from"./types-D85fCNV3.js";import{a as r,r as i}from"./field-Bpptk_9t.js";import{t as a}from"./field-B1wqeZr4.js";import{useContext as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{MinusIcon as l}from"@phosphor-icons/react/Minus";import{OTPInput as u,OTPInputContext as d,REGEXP_ONLY_CHARS as f,REGEXP_ONLY_DIGITS as p,REGEXP_ONLY_DIGITS_AND_CHARS as m}from"input-otp";const h={error:`danger`,success:`success`,warning:`warning`},g=e=>`var(--color-${e}-600)`,_=e=>`var(--ring-color-focus-${e})`,v=({totalActive:e,total:t})=>e===0?`idle`:e===1?`caret`:e===t?`all`:`range`,y=({children:e,validation:t})=>{let r=o(d),i=r.slots.length,a=r.slots.reduce((e,t)=>e+ +!!t.isActive,0),c=v({totalActive:a,total:i}),l=t?h[t]:void 0,u=l?n({"--otp-validation-border":g(l),"--otp-validation-ring":_(l)}):void 0;return s(`div`,{className:`group/otp contents`,"data-otp-state":c,"data-validation":t||void 0,style:u,children:e})},b={Root:({"aria-invalid":t,children:n,className:c,containerClassName:l,ref:d,validation:f,...p})=>{let m=r(),h=o(a),{ariaInvalid:g,validation:_}=i({"aria-invalid":t,defaultAriaInvalid:!1,validation:f??m});return s(u,{ref:d,"aria-invalid":g,"data-slot":`otp-input`,containerClassName:e(`flex items-center gap-2 has-disabled:opacity-50`,l),className:e(`disabled:cursor-not-allowed`,c),...p,...h?{"aria-describedby":h[`aria-describedby`],"aria-errormessage":h[`aria-errormessage`],id:h.id,name:h.name}:void 0,children:s(y,{validation:_,children:n})})},Group:({asChild:n,children:r,className:i,ref:a,...o})=>s(n?t:`div`,{ref:a,"data-slot":`otp-input-group`,className:e(`relative flex items-center rounded-md`,`has-[[data-active]~[data-active]]:ring-focus-accent has-[[data-active]~[data-active]]:ring-4`,`group-data-validation/otp:has-[[data-active]~[data-active]]:ring-(--otp-validation-ring)`,i),...o,children:r}),Slot:({className:t,index:n,ref:r,...i})=>{let a=o(d).slots[n],l=a?.char??null,u=a?.hasFakeCaret??!1;return c(`div`,{ref:r,"data-slot":`otp-input-slot`,"data-active":a?.isActive??!1?``:void 0,className:e(`border-form bg-form text-strong relative flex h-10 w-10 items-center justify-center border-y border-r text-sm shadow-sm outline-hidden transition-all duration-150 ease-out`,`first:rounded-l-md first:border-l last:rounded-r-md`,`[&:has(+[data-active])]:group-data-[otp-state=caret]/otp:border-r-transparent`,`data-active:group-data-[otp-state=caret]/otp:border-accent-600`,`data-active:group-data-[otp-state=caret]/otp:border-l`,`data-active:group-data-[otp-state=caret]/otp:ring-focus-accent`,`data-active:group-data-[otp-state=caret]/otp:z-20`,`data-active:group-data-[otp-state=caret]/otp:ring-4`,`group-data-[otp-state=all]/otp:border-accent-600`,`group-data-validation/otp:border-y-(--otp-validation-border)`,`group-data-validation/otp:first:border-l-(--otp-validation-border)`,`group-data-validation/otp:last:border-r-(--otp-validation-border)`,`group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:border-(--otp-validation-border)`,`group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:ring-(--otp-validation-ring)`,`group-data-validation/otp:group-data-[otp-state=all]/otp:border-(--otp-validation-border)`,t),...i,children:[l,u&&s(`div`,{className:`pointer-events-none absolute inset-0 flex items-center justify-center`,children:s(`div`,{className:`bg-strong h-4 w-px animate-pulse`})})]})},Separator:({asChild:n,children:r,className:i,ref:a,semantic:o=!1,...c})=>{let u=n?t:`div`,d=o?{role:`separator`}:{"aria-hidden":!0,role:`none`};return s(u,{ref:a,"data-slot":`otp-input-separator`,className:e(`text-separator flex items-center`,i),...d,...c,children:r??s(l,{weight:`bold`})})}};export{b as OtpInput,f as REGEXP_ONLY_CHARS,p as REGEXP_ONLY_DIGITS,m as REGEXP_ONLY_DIGITS_AND_CHARS};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DpNWVci8.js";import{t as n}from"./types-D85fCNV3.js";import{a as r,r as i}from"./field-Bpptk_9t.js";import{t as a}from"./field-B1wqeZr4.js";import{useContext as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{MinusIcon as l}from"@phosphor-icons/react/Minus";import{OTPInput as u,OTPInputContext as d,REGEXP_ONLY_CHARS as f,REGEXP_ONLY_DIGITS as p,REGEXP_ONLY_DIGITS_AND_CHARS as m}from"input-otp";const h={error:`danger`,success:`success`,warning:`warning`},g=e=>`var(--color-${e}-600)`,_=e=>`var(--ring-color-focus-${e})`,v=({totalActive:e,total:t})=>e===0?`idle`:e===1?`caret`:e===t?`all`:`range`,y=({children:e,validation:t})=>{let r=o(d),i=r.slots.length,a=r.slots.reduce((e,t)=>e+ +!!t.isActive,0),c=v({totalActive:a,total:i}),l=t?h[t]:void 0,u=l?n({"--otp-validation-border":g(l),"--otp-validation-ring":_(l)}):void 0;return s(`div`,{className:`group/otp contents`,"data-otp-state":c,"data-validation":t||void 0,style:u,children:e})},b={Root:({"aria-invalid":t,children:n,className:c,containerClassName:l,ref:d,validation:f,...p})=>{let m=r(),h=o(a),{ariaInvalid:g,validation:_}=i({"aria-invalid":t,defaultAriaInvalid:!1,validation:f??m});return s(u,{ref:d,"aria-invalid":g,"data-slot":`otp-input`,containerClassName:e(`flex items-center gap-2 has-disabled:opacity-50`,l),className:e(`disabled:cursor-not-allowed`,c),...p,...h?{"aria-describedby":h[`aria-describedby`],"aria-errormessage":h[`aria-errormessage`],id:h.id,name:h.name}:void 0,children:s(y,{validation:_,children:n})})},Group:({asChild:n,children:r,className:i,ref:a,...o})=>s(n?t:`div`,{ref:a,"data-slot":`otp-input-group`,className:e(`relative flex items-center rounded-md`,`has-[[data-active]~[data-active]]:ring-focus-accent has-[[data-active]~[data-active]]:ring-4`,`group-data-validation/otp:has-[[data-active]~[data-active]]:ring-(--otp-validation-ring)`,i),...o,children:r}),Slot:({className:t,index:n,ref:r,...i})=>{let a=o(d).slots[n],l=a?.char??null,u=a?.hasFakeCaret??!1,f=a?.isActive??!1;return c(`div`,{ref:r,"data-slot":`otp-input-slot`,"data-active":f?``:void 0,className:e(`border-form bg-form text-strong relative flex h-10 w-10 items-center justify-center border-y border-r text-sm shadow-sm outline-hidden transition-all duration-150 ease-out`,`first:rounded-l-md first:border-l last:rounded-r-md`,`[&:has(+[data-active])]:group-data-[otp-state=caret]/otp:border-r-transparent`,`data-active:group-data-[otp-state=caret]/otp:border-accent-600`,`data-active:group-data-[otp-state=caret]/otp:border-l`,`data-active:group-data-[otp-state=caret]/otp:ring-focus-accent`,`data-active:group-data-[otp-state=caret]/otp:z-20`,`data-active:group-data-[otp-state=caret]/otp:ring-4`,`group-data-[otp-state=all]/otp:border-accent-600`,`group-data-validation/otp:border-y-(--otp-validation-border)`,`group-data-validation/otp:first:border-l-(--otp-validation-border)`,`group-data-validation/otp:last:border-r-(--otp-validation-border)`,`group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:border-(--otp-validation-border)`,`group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:ring-(--otp-validation-ring)`,`group-data-validation/otp:group-data-[otp-state=all]/otp:border-(--otp-validation-border)`,t),...i,children:[l,u&&s(`div`,{className:`pointer-events-none absolute inset-0 flex items-center justify-center`,children:s(`div`,{className:`bg-strong h-4 w-px animate-pulse`})})]})},Separator:({asChild:n,children:r,className:i,ref:a,semantic:o=!1,...c})=>{let u=n?t:`div`,d=o?{role:`separator`}:{"aria-hidden":!0,role:`none`};return s(u,{ref:a,"data-slot":`otp-input-separator`,className:e(`text-separator flex items-center`,i),...d,...c,children:r??s(l,{weight:`bold`})})}};export{b as OtpInput,f as REGEXP_ONLY_CHARS,p as REGEXP_ONLY_DIGITS,m as REGEXP_ONLY_DIGITS_AND_CHARS};

package/dist/pagination.d.ts

@@ -1,5 +1,5 @@
-import { t as ButtonGroup } from "./button-C-gMbPso.js";
-import { t as Select } from "./select-0z7HVS6r.js";
+import { t as ButtonGroup } from "./button-BIf69CSV.js";
+import { t as Select } from "./select-DVHmgih8.js";
 import { ComponentProps } from "react";
 //#region src/components/pagination/cursor-pagination.d.ts
 type CursorPaginationProps = ComponentProps<"div"> & {

package/dist/pagination.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./button-IlxHhjPK.js";import{t as n}from"./button-DmJkYfyl.js";import{n as r}from"./separator-D0D6VyyM.js";import{t as i}from"./select-BReznXaw.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};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./button-CCkGqE1t.js";import{t as n}from"./button-DmJkYfyl.js";import{n as r}from"./separator-D0D6VyyM.js";import{t as i}from"./select-LK9NX-vV.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};

package/dist/progress.d.ts

@@ -26,8 +26,8 @@ type Props = SvgAttributes & {
   strokeWidth?: StrokeWidth;
   /**
    * The current value of the progress bar.
-   * This attribute specifies how much of the task that has been completed.
-   * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.
+   * This attribute specifies how much of the task is complete.
+   * It must be a valid floating point number between 0 and `max`, or, when `max` is omitted, between 0 and 100.
    * If set to `"indeterminate"`, the progress bar is considered indeterminate.
    *
    * @default 0
@@ -159,8 +159,8 @@ type RootProps = ComponentProps<"div"> & {
   max?: number | undefined;
   /**
    * The current value of the progress bar.
-   * This attribute specifies how much of the task that has been completed.
-   * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.
+   * This attribute specifies how much of the task is complete.
+   * It must be a valid floating point number between 0 and `max`, or, when `max` is omitted, between 0 and 100.
    * If set to `"indeterminate"`, the progress bar is considered indeterminate. (for now there is no visual difference than 0)
    *
    * @default 0

package/dist/qr-code.d.ts

@@ -143,8 +143,8 @@ declare const Overlay: ({ asChild, className, ref, ...props }: QrCodeOverlayProp
 /**
  * A QR code. Compose `QrCode.Root` with a `QrCode.Frame` wrapping a
  * `QrCode.Pattern`, and optionally a `QrCode.Overlay` for a centered logo.
- * Encoding is handled by the dependency-free `uqr` library; the render logic is
- * owned by mantle (no headless runtime).
+ * The dependency-free `uqr` library encodes `value`; mantle owns the render
+ * logic (no headless runtime).
  *
  * `Root` and `Overlay` support the `asChild` prop for polymorphic composition.
  * `Frame` and `Pattern` render fixed SVG elements and do not.

package/dist/sandbar.d.ts

@@ -0,0 +1,471 @@
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
+import { r as ButtonProps } from "./button-PoIujPMX.js";
+import { ComponentProps, ReactNode, Ref } from "react";
+//#region src/components/sandbar/sandbar.d.ts
+/**
+ * The imperative surface of a {@link Sandbar}, exposed via `Sandbar.Root`'s
+ * `handleRef` prop. `shake()` is a compound feedback action — it wiggles the
+ * panel (skipped under `prefers-reduced-motion`) and always pushes an
+ * assertive live-region announcement, so blocked navigation is perceivable
+ * with or without motion.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/sandbar#sandbarhandle
+ *
+ * @example
+ * ```tsx
+ * const sandbarHandle = useRef<SandbarHandle>(null);
+ *
+ * // hand this to your router's guard — it owns the blocking, the bar reacts
+ * const onNavigationBlocked = () => sandbarHandle.current?.shake();
+ *
+ * <Sandbar.Root open={isDirty} handleRef={sandbarHandle}>
+ *   <Sandbar.Message>You have unsaved changes</Sandbar.Message>
+ *   <Sandbar.Actions>
+ *     <Sandbar.DiscardButton onClick={reset}>Discard</Sandbar.DiscardButton>
+ *     <Sandbar.SaveButton onClick={save} isLoading={isPending}>Save</Sandbar.SaveButton>
+ *   </Sandbar.Actions>
+ * </Sandbar.Root>
+ * ```
+ */
+type SandbarHandle = {
+  /**
+   * Signal that an action (usually navigation) was blocked because changes
+   * are still pending: wiggles the panel and announces assertively.
+   *
+   * The default announcement is save-flavored; pass `announcement` for other
+   * intents (e.g. "Publish or discard your pending items before leaving.").
+   */
+  shake: (options?: {
+    announcement?: string;
+  }) => void;
+};
+/**
+ * Props for `Sandbar.Root`. Extends `<div>` props — which target the visible
+ * panel, not the fixed-position wrapper — with the controlled `open` flag and
+ * the imperative `handleRef`. Deliberately no `asChild`: Root renders four
+ * nodes, so single-child polymorphism has no coherent meaning.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/sandbar#sandbarroot
+ *
+ * @example
+ * ```tsx
+ * <Sandbar.Root open={isDirty} handleRef={sandbarHandle}>
+ *   <Sandbar.Message>You have unsaved changes</Sandbar.Message>
+ *   <Sandbar.Actions>
+ *     <Sandbar.DiscardButton onClick={reset}>Discard</Sandbar.DiscardButton>
+ *     <Sandbar.SaveButton onClick={save} isLoading={isPending}>Save</Sandbar.SaveButton>
+ *   </Sandbar.Actions>
+ * </Sandbar.Root>
+ * ```
+ */
+type SandbarRootProps = ComponentProps<"div"> & WithDataSlot & {
+  /**
+   * Whether the sandbar is showing. Controlled-only — the pending state
+   * (e.g. a form's dirty flag) lives in your app, not in the component.
+   *
+   * `Sandbar.Root` must stay mounted and be toggled with `open`, never
+   * conditionally mounted (`{isDirty && <Sandbar.Root …>}`). The
+   * screen-reader announcement only works when the internal live regions
+   * exist in the tree before the message appears. The exit animation needs
+   * the panel alive to play. A Root that mounts with `open` already true
+   * does not announce (mounting is not a live-region change).
+   */
+  open: boolean;
+  /**
+   * Receives the imperative {@link SandbarHandle}. Kept separate from `ref`
+   * (which stays the panel's DOM element, like every other mantle part) —
+   * wire it to your navigation guard's blocked callback.
+   */
+  handleRef?: Ref<SandbarHandle>;
+};
+/**
+ * The always-mounted shell of the sandbar. Renders a private viewport-fixed
+ * wrapper, two persistent visually-hidden live regions (a polite `status`
+ * announcer and an assertive `alert` announcer), and the visible panel — a
+ * floating island with `role="group"`, named by `Sandbar.Message` via
+ * `aria-labelledby` (a consumer `aria-label` wins when passed).
+ *
+ * The panel is an `invert-theme` island: it renders in the opposite theme of
+ * the page (light ⇄ dark, light-high-contrast ⇄ dark-high-contrast), and so
+ * does everything composed inside it — the blessed buttons and any custom
+ * children.
+ *
+ * `ref`, `className`, and all other props target the panel. Render it in
+ * place at the end of the form it saves — `position: fixed` changes paint
+ * position, not tab order, so Tab from the last field lands on the actions.
+ * Escape is intentionally inert (a one-keypress discard would destroy data).
+ *
+ * Data attributes stamped on the panel:
+ *
+ * | Data Attribute | Value                  | Description                                                                                                                        |
+ * | -------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+ * | `data-slot`    | `"sandbar"`            | Stable styling hook for the panel. Survives `className` overrides.                                                                 |
+ * | `data-state`   | `"open"` \| `"closed"` | `"open"` only at the resting open pose — `"closed"` covers the pre-enter frame and the exit transition, which is what drives them. |
+ *
+ * @see https://mantle.ngrok.com/components/feedback/sandbar#sandbarroot
+ *
+ * @example
+ * ```tsx
+ * <Sandbar.Root open={isDirty} handleRef={sandbarHandle}>
+ *   <Sandbar.Message>You have unsaved changes</Sandbar.Message>
+ *   <Sandbar.Actions>
+ *     <Sandbar.DiscardButton onClick={reset}>Discard</Sandbar.DiscardButton>
+ *     <Sandbar.SaveButton onClick={save} isLoading={isPending}>Save</Sandbar.SaveButton>
+ *   </Sandbar.Actions>
+ * </Sandbar.Root>
+ * ```
+ */
+declare const Root: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children, className, "data-slot": dataSlot, handleRef, onTransitionEnd, open, ref, ...props }: SandbarRootProps) => import("react").JSX.Element;
+/**
+ * Props for `Sandbar.Message`. Extends `<p>` props with `asChild`. An `id` is
+ * generated when none is passed — it is what `Sandbar.Root` points
+ * `aria-labelledby` at, so passing your own keeps that wiring intact.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/sandbar#sandbarmessage
+ *
+ * @example
+ * ```tsx
+ * <Sandbar.Root open={isDirty} handleRef={sandbarHandle}>
+ *   <Sandbar.Message>You have unsaved changes</Sandbar.Message>
+ *   <Sandbar.Actions>
+ *     <Sandbar.DiscardButton onClick={reset}>Discard</Sandbar.DiscardButton>
+ *     <Sandbar.SaveButton onClick={save} isLoading={isPending}>Save</Sandbar.SaveButton>
+ *   </Sandbar.Actions>
+ * </Sandbar.Root>
+ * ```
+ */
+type SandbarMessageProps = ComponentProps<"p"> & WithAsChild & WithDataSlot;
+/**
+ * The visible pending-state text (e.g. "You have unsaved changes"). A plain
+ * paragraph: `Sandbar.Root`'s persistent announcer owns the live-region
+ * announcement, not this node. The panel's accessible name points here via
+ * `aria-labelledby`, so the group name always matches the visible text.
+ *
+ * Data attributes:
+ *
+ * | Data Attribute | Value                | Description                                                       |
+ * | -------------- | -------------------- | ----------------------------------------------------------------- |
+ * | `data-slot`    | `"sandbar-message"`  | Stable styling hook. Survives `className` overrides and `asChild`. |
+ *
+ * @see https://mantle.ngrok.com/components/feedback/sandbar#sandbarmessage
+ *
+ * @example
+ * ```tsx
+ * <Sandbar.Root open={isDirty} handleRef={sandbarHandle}>
+ *   <Sandbar.Message>You have unsaved changes</Sandbar.Message>
+ *   <Sandbar.Actions>
+ *     <Sandbar.DiscardButton onClick={reset}>Discard</Sandbar.DiscardButton>
+ *     <Sandbar.SaveButton onClick={save} isLoading={isPending}>Save</Sandbar.SaveButton>
+ *   </Sandbar.Actions>
+ * </Sandbar.Root>
+ * ```
+ */
+declare const Message: ({ asChild, className, "data-slot": dataSlot, id: propId, ref, ...props }: SandbarMessageProps) => import("react").JSX.Element;
+/**
+ * Props for `Sandbar.Actions`. Extends `<div>` props with `asChild`.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/sandbar#sandbaractions
+ *
+ * @example
+ * ```tsx
+ * <Sandbar.Root open={isDirty} handleRef={sandbarHandle}>
+ *   <Sandbar.Message>You have unsaved changes</Sandbar.Message>
+ *   <Sandbar.Actions>
+ *     <Sandbar.DiscardButton onClick={reset}>Discard</Sandbar.DiscardButton>
+ *     <Sandbar.SaveButton onClick={save} isLoading={isPending}>Save</Sandbar.SaveButton>
+ *   </Sandbar.Actions>
+ * </Sandbar.Root>
+ * ```
+ */
+type SandbarActionsProps = ComponentProps<"div"> & WithAsChild & WithDataSlot;
+/**
+ * The action-button row. A plain flex container — deliberately not
+ * `role="toolbar"`, which the ARIA APG reserves for 3+ controls with roving
+ * tab stops.
+ *
+ * Data attributes:
+ *
+ * | Data Attribute | Value                | Description                                                       |
+ * | -------------- | -------------------- | ----------------------------------------------------------------- |
+ * | `data-slot`    | `"sandbar-actions"`  | Stable styling hook. Survives `className` overrides and `asChild`. |
+ *
+ * @see https://mantle.ngrok.com/components/feedback/sandbar#sandbaractions
+ *
+ * @example
+ * ```tsx
+ * <Sandbar.Root open={isDirty} handleRef={sandbarHandle}>
+ *   <Sandbar.Message>You have unsaved changes</Sandbar.Message>
+ *   <Sandbar.Actions>
+ *     <Sandbar.DiscardButton onClick={reset}>Discard</Sandbar.DiscardButton>
+ *     <Sandbar.SaveButton onClick={save} isLoading={isPending}>Save</Sandbar.SaveButton>
+ *   </Sandbar.Actions>
+ * </Sandbar.Root>
+ * ```
+ */
+declare const Actions: ({ asChild, className, "data-slot": dataSlot, ...props }: SandbarActionsProps) => import("react").JSX.Element;
+/**
+ * Props for `Sandbar.SaveButton`. Extends `Button`'s props — including
+ * `asChild` and `isLoading` — but makes `appearance` and `intent` optional
+ * with save-flavored defaults, and `children` required.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/sandbar#sandbarsavebutton
+ *
+ * @example
+ * ```tsx
+ * <Sandbar.Root open={isDirty} handleRef={sandbarHandle}>
+ *   <Sandbar.Message>You have unsaved changes</Sandbar.Message>
+ *   <Sandbar.Actions>
+ *     <Sandbar.DiscardButton onClick={reset}>Discard</Sandbar.DiscardButton>
+ *     <Sandbar.SaveButton onClick={save} isLoading={isPending}>Save</Sandbar.SaveButton>
+ *   </Sandbar.Actions>
+ * </Sandbar.Root>
+ * ```
+ */
+type SandbarSaveButtonProps = Omit<ButtonProps, "appearance" | "children" | "intent"> & WithDataSlot & {
+  /**
+   * The visual style of the button.
+   * @default "filled"
+   */
+  appearance?: ButtonProps["appearance"];
+  /**
+   * The tone of the button.
+   * @default "neutral"
+   */
+  intent?: ButtonProps["intent"];
+  /**
+   * The visible action label (e.g. "Save"). Required — action labels are app
+   * voice and must be visible at the call site.
+   */
+  children: ReactNode;
+};
+/**
+ * The primary (save) action. A mantle `Button` defaulting to the system
+ * primary style (`appearance="filled" intent="neutral"`), wired into
+ * `Sandbar.Root`: while `isLoading`, Root announces "Saving changes…" via the
+ * polite live region and catches the focus drop caused by the button going
+ * natively disabled while focused.
+ *
+ * Defaults to `type="button"`; pass `type="submit"` when rendered inside the
+ * form it saves. Announce the save's resolution yourself (e.g. a success
+ * Toast) — the bar exits silently.
+ *
+ * Data attributes:
+ *
+ * | Data Attribute    | Value                     | Description                                                                                      |
+ * | ----------------- | ------------------------- | -------------------------------------------------------------------------------------------------- |
+ * | `data-slot`       | `"sandbar-save-button"`   | Stable styling hook. Replaces `Button`'s own `data-slot="button"`, as every Button wrapper does. |
+ * | `data-appearance` | the resolved `appearance` | Stamped by `Button`.                                                                             |
+ * | `data-intent`     | the resolved `intent`     | Stamped by `Button`.                                                                             |
+ * | `data-size`       | the resolved `size`       | Stamped by `Button`; absent for `appearance="link"`.                                             |
+ * | `data-disabled`   | `"true"` \| `"false"`     | Stamped by `Button`. Value-based, not presence-based — match on the value.                       |
+ * | `data-loading`    | `"true"` \| `"false"`     | Stamped by `Button`, tracking `isLoading`. Value-based, not presence-based.                      |
+ *
+ * @see https://mantle.ngrok.com/components/feedback/sandbar#sandbarsavebutton
+ *
+ * @example
+ * ```tsx
+ * <Sandbar.Root open={isDirty} handleRef={sandbarHandle}>
+ *   <Sandbar.Message>You have unsaved changes</Sandbar.Message>
+ *   <Sandbar.Actions>
+ *     <Sandbar.DiscardButton onClick={reset}>Discard</Sandbar.DiscardButton>
+ *     <Sandbar.SaveButton onClick={save} isLoading={isPending}>Save</Sandbar.SaveButton>
+ *   </Sandbar.Actions>
+ * </Sandbar.Root>
+ * ```
+ */
+declare const SaveButton: ({ appearance, children, "data-slot": dataSlot, intent, isLoading, ref, ...props }: SandbarSaveButtonProps) => import("react").JSX.Element;
+/**
+ * Props for `Sandbar.DiscardButton`. Extends `Button`'s props — including
+ * `asChild` — but makes `appearance` and `intent` optional with
+ * secondary-action defaults, and `children` required.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/sandbar#sandbardiscardbutton
+ *
+ * @example
+ * ```tsx
+ * <Sandbar.Root open={isDirty} handleRef={sandbarHandle}>
+ *   <Sandbar.Message>You have unsaved changes</Sandbar.Message>
+ *   <Sandbar.Actions>
+ *     <Sandbar.DiscardButton onClick={reset}>Discard</Sandbar.DiscardButton>
+ *     <Sandbar.SaveButton onClick={save} isLoading={isPending}>Save</Sandbar.SaveButton>
+ *   </Sandbar.Actions>
+ * </Sandbar.Root>
+ * ```
+ */
+type SandbarDiscardButtonProps = Omit<ButtonProps, "appearance" | "children" | "intent"> & WithDataSlot & {
+  /**
+   * The visual style of the button.
+   * @default "outlined"
+   */
+  appearance?: ButtonProps["appearance"];
+  /**
+   * The tone of the button.
+   * @default "neutral"
+   */
+  intent?: ButtonProps["intent"];
+  /**
+   * The visible action label (e.g. "Discard"). Required — action labels are
+   * app voice and must be visible at the call site.
+   */
+  children: ReactNode;
+};
+/**
+ * The secondary (discard/reset) action. A mantle `Button` defaulting to
+ * `appearance="outlined" intent="neutral"`. Discard is destructive-ish: for
+ * large forms, consider confirming before discarding.
+ *
+ * Data attributes:
+ *
+ * | Data Attribute    | Value                      | Description                                                                                      |
+ * | ----------------- | -------------------------- | -------------------------------------------------------------------------------------------------- |
+ * | `data-slot`       | `"sandbar-discard-button"` | Stable styling hook. Replaces `Button`'s own `data-slot="button"`, as every Button wrapper does. |
+ * | `data-appearance` | the resolved `appearance`  | Stamped by `Button`.                                                                             |
+ * | `data-intent`     | the resolved `intent`      | Stamped by `Button`.                                                                             |
+ * | `data-size`       | the resolved `size`        | Stamped by `Button`; absent for `appearance="link"`.                                             |
+ * | `data-disabled`   | `"true"` \| `"false"`      | Stamped by `Button`. Value-based, not presence-based — match on the value.                       |
+ * | `data-loading`    | `"true"` \| `"false"`      | Stamped by `Button`, tracking `isLoading`. Value-based, not presence-based.                      |
+ *
+ * @see https://mantle.ngrok.com/components/feedback/sandbar#sandbardiscardbutton
+ *
+ * @example
+ * ```tsx
+ * <Sandbar.Root open={isDirty} handleRef={sandbarHandle}>
+ *   <Sandbar.Message>You have unsaved changes</Sandbar.Message>
+ *   <Sandbar.Actions>
+ *     <Sandbar.DiscardButton onClick={reset}>Discard</Sandbar.DiscardButton>
+ *     <Sandbar.SaveButton onClick={save} isLoading={isPending}>Save</Sandbar.SaveButton>
+ *   </Sandbar.Actions>
+ * </Sandbar.Root>
+ * ```
+ */
+declare const DiscardButton: ({ appearance, children, "data-slot": dataSlot, intent, ...props }: SandbarDiscardButtonProps) => import("react").JSX.Element;
+/**
+ * A persistent, decision-bearing bar that floats near the bottom edge of the
+ * viewport. It surfaces pending state — primarily a form's unsaved ("dirty")
+ * changes — and stays until the user resolves it. Toast announces something
+ * that already happened and leaves on its own; a Sandbar waits for the user's
+ * decision. When the message needs no decision, reach for Toast or Alert.
+ *
+ * The name: a sandbar is a bar that blocks navigation — exactly what this
+ * component does while changes are pending. Pair it with your app's
+ * navigation guard and call `shake()` on the {@link SandbarHandle} when a
+ * navigation attempt is blocked.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/sandbar
+ *
+ * @example
+ * Composition:
+ * ```
+ * Sandbar.Root
+ * ├── Sandbar.Message
+ * └── Sandbar.Actions
+ *     ├── Sandbar.DiscardButton
+ *     └── Sandbar.SaveButton
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Sandbar.Root open={isDirty} handleRef={sandbarHandle}>
+ *   <Sandbar.Message>You have unsaved changes</Sandbar.Message>
+ *   <Sandbar.Actions>
+ *     <Sandbar.DiscardButton onClick={reset}>Discard</Sandbar.DiscardButton>
+ *     <Sandbar.SaveButton onClick={save} isLoading={isPending}>Save</Sandbar.SaveButton>
+ *   </Sandbar.Actions>
+ * </Sandbar.Root>
+ * ```
+ */
+declare const Sandbar: {
+  /**
+   * The always-mounted shell: fixed positioning, persistent live-region
+   * announcers, presence-managed panel. Toggle with the controlled `open`
+   * prop — never conditionally mount it.
+   *
+   * @see https://mantle.ngrok.com/components/feedback/sandbar#sandbarroot
+   *
+   * @example
+   * ```tsx
+   * <Sandbar.Root open={isDirty} handleRef={sandbarHandle}>
+   *   <Sandbar.Message>You have unsaved changes</Sandbar.Message>
+   *   <Sandbar.Actions>
+   *     <Sandbar.DiscardButton onClick={reset}>Discard</Sandbar.DiscardButton>
+   *     <Sandbar.SaveButton onClick={save} isLoading={isPending}>Save</Sandbar.SaveButton>
+   *   </Sandbar.Actions>
+   * </Sandbar.Root>
+   * ```
+   */
+  readonly Root: typeof Root;
+  /**
+   * The visible pending-state text. Also names the panel (via
+   * `aria-labelledby`) and feeds the polite screen-reader announcement.
+   *
+   * @see https://mantle.ngrok.com/components/feedback/sandbar#sandbarmessage
+   *
+   * @example
+   * ```tsx
+   * <Sandbar.Root open={isDirty} handleRef={sandbarHandle}>
+   *   <Sandbar.Message>You have unsaved changes</Sandbar.Message>
+   *   <Sandbar.Actions>
+   *     <Sandbar.DiscardButton onClick={reset}>Discard</Sandbar.DiscardButton>
+   *     <Sandbar.SaveButton onClick={save} isLoading={isPending}>Save</Sandbar.SaveButton>
+   *   </Sandbar.Actions>
+   * </Sandbar.Root>
+   * ```
+   */
+  readonly Message: typeof Message;
+  /**
+   * The action-button row. Holds `Sandbar.DiscardButton` and
+   * `Sandbar.SaveButton`, or your own composed `Button`s.
+   *
+   * @see https://mantle.ngrok.com/components/feedback/sandbar#sandbaractions
+   *
+   * @example
+   * ```tsx
+   * <Sandbar.Root open={isDirty} handleRef={sandbarHandle}>
+   *   <Sandbar.Message>You have unsaved changes</Sandbar.Message>
+   *   <Sandbar.Actions>
+   *     <Sandbar.DiscardButton onClick={reset}>Discard</Sandbar.DiscardButton>
+   *     <Sandbar.SaveButton onClick={save} isLoading={isPending}>Save</Sandbar.SaveButton>
+   *   </Sandbar.Actions>
+   * </Sandbar.Root>
+   * ```
+   */
+  readonly Actions: typeof Actions;
+  /**
+   * The primary (save) action — announces "Saving changes…" and keeps focus
+   * from being lost while the save is pending.
+   *
+   * @see https://mantle.ngrok.com/components/feedback/sandbar#sandbarsavebutton
+   *
+   * @example
+   * ```tsx
+   * <Sandbar.Root open={isDirty} handleRef={sandbarHandle}>
+   *   <Sandbar.Message>You have unsaved changes</Sandbar.Message>
+   *   <Sandbar.Actions>
+   *     <Sandbar.DiscardButton onClick={reset}>Discard</Sandbar.DiscardButton>
+   *     <Sandbar.SaveButton onClick={save} isLoading={isPending}>Save</Sandbar.SaveButton>
+   *   </Sandbar.Actions>
+   * </Sandbar.Root>
+   * ```
+   */
+  readonly SaveButton: typeof SaveButton;
+  /**
+   * The secondary (discard/reset) action.
+   *
+   * @see https://mantle.ngrok.com/components/feedback/sandbar#sandbardiscardbutton
+   *
+   * @example
+   * ```tsx
+   * <Sandbar.Root open={isDirty} handleRef={sandbarHandle}>
+   *   <Sandbar.Message>You have unsaved changes</Sandbar.Message>
+   *   <Sandbar.Actions>
+   *     <Sandbar.DiscardButton onClick={reset}>Discard</Sandbar.DiscardButton>
+   *     <Sandbar.SaveButton onClick={save} isLoading={isPending}>Save</Sandbar.SaveButton>
+   *   </Sandbar.Actions>
+   * </Sandbar.Root>
+   * ```
+   */
+  readonly DiscardButton: typeof DiscardButton;
+};
+//#endregion
+export { Sandbar, type SandbarActionsProps, type SandbarDiscardButtonProps, type SandbarHandle, type SandbarMessageProps, type SandbarRootProps, type SandbarSaveButtonProps };

package/dist/sandbar.js

@@ -0,0 +1 @@
+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"./data-slot-EM6s2WEU.js";import{t as i}from"./slot-DpNWVci8.js";import{t as a}from"./button-Cnja9Bsr.js";import{t as o}from"./use-prefers-reduced-motion-Bk5zAfHY.js";import{createContext as s,useCallback as c,useContext as l,useEffect as u,useId as d,useImperativeHandle as f,useMemo as p,useRef as m,useState as h}from"react";import g from"tiny-invariant";import{jsx as _,jsxs as v}from"react/jsx-runtime";const y=`Unsaved changes`,b=1e3,ee=[{transform:`translateX(0)`},{transform:`translateX(-8px)`},{transform:`translateX(8px)`},{transform:`translateX(-6px)`},{transform:`translateX(6px)`},{transform:`translateX(-3px)`},{transform:`translateX(3px)`},{transform:`translateX(0)`}];function x(e,t){let n=t.current?`${e}\u00A0`:e;return t.current=!t.current,n}const S=s(null);function C(e){let t=l(S);return g(t,`${e} must be rendered as a child of <Sandbar.Root>.`),t}const w={Root:({"aria-label":e,"aria-labelledby":i,children:a,className:s,"data-slot":l,handleRef:d,onTransitionEnd:g,open:C,ref:w,...T})=>{let[E,D]=h(C?`open`:`closed`),[O,k]=h(``),[A,j]=h(``),[M,N]=h(null),P=m(null),F=m(null),I=t(F,w),L=m(null),R=m(void 0),z=m(void 0),B=m(void 0),te=m(!1),ne=m(!1),V=m(!1),H=m(null),U=m(null),W=m(C),G=m(E),K=c(e=>{k(x(e,te)),window.clearTimeout(R.current),R.current=window.setTimeout(()=>{k(``)},b)},[]),q=c(e=>{j(x(e,ne)),window.clearTimeout(z.current),z.current=window.setTimeout(()=>{j(``)},b)},[]),J=c(e=>(N(e),()=>{N(t=>t===e?null:t)}),[]),Y=c(({button:e,isSaving:t})=>{let n=V.current;if(V.current=t,!t||n||(K(`Saving changes…`),e==null||!e.matches(`:disabled`)))return;let r=document.activeElement,i=r===e,a=r===document.body&&U.current===e;(i||a)&&F.current?.focus({preventScroll:!0})},[K]),X=c(e=>{q(e?.announcement??`You have unsaved changes. Save or discard them before leaving.`);let t=F.current;if(t==null||o()||typeof t.animate!=`function`)return;L.current!=null&&(L.current.cancel(),L.current=null);let n=t.animate(ee,{duration:400,easing:`ease-in-out`});n.onfinish=()=>{L.current=null},L.current=n},[q]);f(d,()=>({shake:X}),[X]);let re=p(()=>({announceAssertive:q,registerMessage:J,reportSaving:Y}),[q,J,Y]);u(()=>{D(C?e=>e===`open`||e===`opening`?e:e===`closing`?`open`:`opening`:e=>e===`closed`?e:e===`opening`?`closed`:`closing`)},[C]),u(()=>{if(E!==`opening`)return;let e=window.requestAnimationFrame(()=>{e=window.requestAnimationFrame(()=>{D(e=>e===`opening`?`open`:e)})});return()=>{window.cancelAnimationFrame(e)}},[E]),u(()=>{if(E!==`closing`)return;let e=window.setTimeout(()=>{D(`closed`)},400);return()=>{window.clearTimeout(e)}},[E]),u(()=>{let t=W.current;if(W.current=C,!C){t&&(window.clearTimeout(R.current),k(``));return}if(t)return;let n=(F.current?.querySelector(`[data-slot~="sandbar-message"]`))?.textContent?.trim();K(n||e||y)},[K,e,C]),u(()=>{let e=G.current;if(G.current=E,E!==`closed`||e!==`closing`)return;let t=P.current,n=document.activeElement,r=t!=null&&n instanceof HTMLElement&&t.contains(n),i=n===document.body&&U.current!=null,a=H.current;H.current=null,U.current=null,!(!r&&!i)&&(a==null||!a.isConnected||a.matches(`:disabled`)||typeof a.checkVisibility==`function`&&!a.checkVisibility()||a.focus())},[E]),u(()=>()=>{window.clearTimeout(R.current),window.clearTimeout(z.current),B.current!=null&&window.cancelAnimationFrame(B.current),L.current?.cancel()},[]);let ie=e=>{let t=P.current,n=e.relatedTarget;t!=null&&(n==null||!t.contains(n))&&n instanceof HTMLElement&&(H.current=n),e.target instanceof HTMLElement&&(U.current=e.target)},Z=e=>{if(e.relatedTarget!=null){let t=P.current;(t==null||!t.contains(e.relatedTarget))&&(U.current=null);return}let t=e.target;t instanceof HTMLElement&&(B.current!=null&&window.cancelAnimationFrame(B.current),B.current=window.requestAnimationFrame(()=>{B.current=void 0;let e=F.current;e==null||e.hidden||(!t.isConnected||t.matches(`:disabled`)||t.hidden)&&document.activeElement===document.body&&e.focus({preventScroll:!0})}))},ae=e=>{g?.(e),e.target===e.currentTarget&&(e.propertyName===`opacity`||e.propertyName===`translate`)&&D(e=>e===`closing`?`closed`:e)},Q=i??(e==null&&M!=null?M:void 0),oe=Q==null?e??y:e,$=E===`closed`,se=$||E===`closing`;return _(S.Provider,{value:re,children:v(`div`,{className:`pointer-events-none fixed inset-x-0 bottom-4 z-50 flex justify-center px-4 sm:bottom-10`,onBlur:Z,onFocus:ie,ref:P,children:[_(`div`,{"aria-atomic":`true`,"aria-live":`polite`,className:`sr-only`,role:`status`,children:O}),_(`div`,{className:`sr-only`,role:`alert`,children:A}),_(`div`,{className:n(`invert-theme pointer-events-auto flex w-fit max-w-full flex-wrap items-center justify-center gap-x-4 gap-y-2 rounded-2xl border border-transparent bg-base px-4 py-3 text-strong shadow-lg`,`max-h-[60svh] overflow-y-auto`,`focus:outline-hidden`,`[&[hidden]]:hidden`,`transition-[opacity,translate] ease-out`,`data-state-open:duration-400`,`data-state-closed:pointer-events-none data-state-closed:opacity-0 data-state-closed:duration-200 motion-safe:data-state-closed:translate-y-[calc(100%+2.5rem)]`,`data-state-closed:ease-[cubic-bezier(0.4,0,1,1),cubic-bezier(0,0,0.2,1)]`,s),...T,"aria-label":oe,"aria-labelledby":Q,"data-slot":r(l,`sandbar`),"data-state":E===`open`?`open`:`closed`,hidden:$?!0:void 0,inert:se?!0:void 0,onTransitionEnd:ae,ref:I,role:`group`,tabIndex:-1,children:a})]})})},Message:({asChild:a,className:o,"data-slot":s,id:c,ref:l,...u})=>{let{registerMessage:f}=C(`Sandbar.Message`),p=d(),h=c??p,g=m(null),v=t(g,l);return e(()=>f(g.current?.id||h),[h,f]),_(a?i:`p`,{className:n(`text-sm font-sans`,o),id:h,...u,"data-slot":r(s,`sandbar-message`),ref:v})},Actions:({asChild:e,className:t,"data-slot":a,...o})=>_(e?i:`div`,{className:n(`flex flex-wrap items-center justify-center gap-2`,t),...o,"data-slot":r(a,`sandbar-actions`)}),SaveButton:({appearance:n=`filled`,children:i,"data-slot":o,intent:s=`neutral`,isLoading:c=!1,ref:l,...u})=>{let{reportSaving:d}=C(`Sandbar.SaveButton`),f=m(null),p=t(f,l);return e(()=>{d({button:f.current,isSaving:!!c})},[c,d]),e(()=>()=>{d({button:null,isSaving:!1})},[d]),_(a,{appearance:n,intent:s,isLoading:c,ref:p,...u,"data-slot":r(o,`sandbar-save-button`),children:i})},DiscardButton:({appearance:e=`outlined`,children:t,"data-slot":n,intent:i=`neutral`,...o})=>_(a,{appearance:e,intent:i,...o,"data-slot":r(n,`sandbar-discard-button`),children:t})};export{w as Sandbar};

package/dist/sandboxed-on-click.d.ts

@@ -3,13 +3,11 @@ import { ComponentProps, MouseEventHandler } from "react";
 //#region src/components/sandboxed-on-click/sandboxed-on-click.d.ts
 type BaseProps = {
   /**
-   * Only call `event.preventDefault()` in the `onClick` handler if the user
-   * has not set `allowClickEventDefault` to `true`. This allows the user to
-   * control whether or not the default behavior of the click event should be
-   * allowed.
+   * Whether the click keeps its default behavior. When `false`, the `onClick`
+   * handler calls `event.preventDefault()`; propagation stops either way.
    *
-   * This is useful for links or buttons that should navigate or perform some
-   * action on click.
+   * Set it to `true` for links or buttons that must navigate or run an action
+   * on click.
    *
    * @default false
    */