@ngrok/mantle 0.76.1 → 0.76.3

package/dist/agent.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ngrok/mantle",
-	"version": "0.76.1",
+	"version": "0.76.3",
 	"origin": "https://mantle.ngrok.com",
 	"endpoints": {
 		"docs": "https://mantle.ngrok.com/",

package/dist/alert-dialog.d.ts

@@ -198,7 +198,7 @@ declare const AlertDialog: {
    * ```
    */
   readonly Action: import("react").ForwardRefExoticComponent<(Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<import("class-variance-authority").VariantProps<(props?: ({
-    appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
+    appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
     isLoading?: boolean | null | undefined;
     priority?: "danger" | "neutral" | "default" | null | undefined;
   } & import("class-variance-authority/types").ClassProp) | undefined) => string>>> & {
@@ -208,7 +208,7 @@ declare const AlertDialog: {
     asChild: true;
     type?: ComponentProps<"button">["type"];
   }, "ref"> | Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<import("class-variance-authority").VariantProps<(props?: ({
-    appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
+    appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
     isLoading?: boolean | null | undefined;
     priority?: "danger" | "neutral" | "default" | null | undefined;
   } & import("class-variance-authority/types").ClassProp) | undefined) => string>>> & {
@@ -293,7 +293,7 @@ declare const AlertDialog: {
    * ```
    */
   readonly Cancel: import("react").ForwardRefExoticComponent<(Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<import("class-variance-authority").VariantProps<(props?: ({
-    appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
+    appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
     isLoading?: boolean | null | undefined;
     priority?: "danger" | "neutral" | "default" | null | undefined;
   } & import("class-variance-authority/types").ClassProp) | undefined) => string>>> & {
@@ -303,7 +303,7 @@ declare const AlertDialog: {
     asChild: true;
     type?: ComponentProps<"button">["type"];
   }, "ref"> | Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<import("class-variance-authority").VariantProps<(props?: ({
-    appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
+    appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
     isLoading?: boolean | null | undefined;
     priority?: "danger" | "neutral" | "default" | null | undefined;
   } & import("class-variance-authority/types").ClassProp) | undefined) => string>>> & {

package/dist/alert.d.ts

@@ -1,6 +1,6 @@
 import { t as SvgAttributes } from "./types-BvUzforF.js";
 import { t as WithAsChild } from "./as-child-uN_018tj.js";
-import { n as IconButtonProps } from "./icon-button-Ct3A7aoj.js";
+import { n as IconButtonProps } from "./icon-button-ntupABbM.js";
 import { ComponentProps, HTMLAttributes, ReactNode } from "react";
 
 //#region src/components/alert/alert.d.ts

package/dist/{button-BYZOBUgj.d.ts → button-BXZ_JTu_.d.ts}

@@ -4,7 +4,7 @@ import { ComponentProps, ReactNode } from "react";
 
 //#region src/components/button/button.d.ts
 declare const buttonVariants: (props?: ({
-  appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
+  appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
   isLoading?: boolean | null | undefined;
   priority?: "danger" | "neutral" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -88,7 +88,7 @@ type ButtonProps = ComponentProps<"button"> & ButtonVariants & {
  * ```
  */
 declare const Button: import("react").ForwardRefExoticComponent<(Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<import("class-variance-authority").VariantProps<(props?: ({
-  appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
+  appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
   isLoading?: boolean | null | undefined;
   priority?: "danger" | "neutral" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string>>> & {
@@ -134,7 +134,7 @@ declare const Button: import("react").ForwardRefExoticComponent<(Omit<import("re
    */
   type?: ComponentProps<"button">["type"];
 }, "ref"> | Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<import("class-variance-authority").VariantProps<(props?: ({
-  appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
+  appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
   isLoading?: boolean | null | undefined;
   priority?: "danger" | "neutral" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string>>> & {
@@ -169,4 +169,4 @@ declare const Button: import("react").ForwardRefExoticComponent<(Omit<import("re
 }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { ButtonProps as n, Button as t };
-//# sourceMappingURL=button-BYZOBUgj.d.ts.map
+//# sourceMappingURL=button-BXZ_JTu_.d.ts.map

package/dist/button.d.ts

@@ -1,4 +1,4 @@
-import { n as IconButtonProps, t as IconButton } from "./icon-button-Ct3A7aoj.js";
-import { n as ButtonProps, t as Button } from "./button-BYZOBUgj.js";
+import { n as IconButtonProps, t as IconButton } from "./icon-button-ntupABbM.js";
+import { n as ButtonProps, t as Button } from "./button-BXZ_JTu_.js";
 import { n as ButtonGroupProps, t as ButtonGroup } from "./index-DBZ3eRsl.js";
 export { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, IconButton, type IconButtonProps };

package/dist/checkbox.d.ts

@@ -28,6 +28,35 @@ declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<impo
    */
   defaultChecked?: CheckedState;
 } & import("react").RefAttributes<HTMLInputElement>>;
+/**
+ * Resolve the tri-state `checked` value for a "select all" checkbox from the
+ * current selection counts: `true` when everything is selected,
+ * `"indeterminate"` when only some is, and `false` when nothing is. The result
+ * is a {@link CheckedState}, ready to pass straight to `<Checkbox checked={…} />`.
+ *
+ * `allSelected` is checked first, so it wins even if a caller also reports
+ * `someSelected` for the all-selected case.
+ *
+ * @example
+ * ```tsx
+ * // Driving a TanStack Table "select all" header checkbox:
+ * <Checkbox
+ *   aria-label="Select all rows"
+ *   checked={selectAllChecked({
+ *     allSelected: table.getIsAllRowsSelected(),
+ *     someSelected: table.getIsSomeRowsSelected(),
+ *   })}
+ *   onChange={(event) => table.toggleAllRowsSelected(event.target.checked)}
+ * />
+ * ```
+ */
+declare function selectAllChecked({
+  allSelected,
+  someSelected
+}: {
+  /** Whether every selectable item is currently selected. */allSelected: boolean; /** Whether some (but not necessarily all) items are selected. */
+  someSelected: boolean;
+}): CheckedState;
 //#endregion
-export { Checkbox };
+export { Checkbox, type CheckedState, selectAllChecked };
 //# sourceMappingURL=checkbox.d.ts.map

package/dist/checkbox.js

@@ -1,2 +1,2 @@
-import{t as e}from"./compose-refs-Cjf2gfB8.js";import{a as t,r as n}from"./validation-DCyx-ceH.js";import{forwardRef as r,useEffect as i,useRef as a,useState as o}from"react";import s from"clsx";import{jsx as c}from"react/jsx-runtime";const l=e=>e===`indeterminate`,u=r(({"aria-invalid":r,className:u,checked:d,defaultChecked:f,defaultValue:p=`on`,onClick:m,readOnly:h,validation:g,..._},v)=>{let y=a(null),[b]=o(f),x=t(),{ariaInvalid:S,validation:C}=n({"aria-invalid":r,validation:g??x});i(()=>{y.current&&(y.current.indeterminate=l(d))},[d]),i(()=>{y.current&&(y.current.indeterminate=l(b))},[b]);let w=d===void 0?{defaultChecked:l(b)?void 0:b}:{checked:l(d)?void 0:d};return c(`input`,{"aria-checked":l(d)?`mixed`:d,"aria-invalid":S,"data-slot":`checkbox`,className:s(`border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50`,`bg-center bg-no-repeat focus:outline-hidden`,`focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4`,`checked:border-accent-600 checked:bg-accent-600 checked:bg-checked-icon`,`indeterminate:border-accent-600 indeterminate:bg-accent-600 indeterminate:bg-indeterminate-icon`,`data-validation-success:border-success-600 data-validation-success:checked:bg-success-600 data-validation-success:indeterminate:bg-success-600 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-600 data-validation-warning:indeterminate:bg-warning-600 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-600 data-validation-error:indeterminate:bg-danger-600 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger`,`where:block where:size-4 where:p-0`,u),...w,"data-validation":C||void 0,defaultValue:p,onClick:e=>{if(h){e.preventDefault();return}m?.(e)},readOnly:h,ref:e(y,v),type:`checkbox`,..._})});u.displayName=`Checkbox`;export{u as Checkbox};
+import{t as e}from"./compose-refs-Cjf2gfB8.js";import{a as t,r as n}from"./validation-DCyx-ceH.js";import{forwardRef as r,useEffect as i,useRef as a,useState as o}from"react";import s from"clsx";import{jsx as c}from"react/jsx-runtime";const l=e=>e===`indeterminate`,u=r(({"aria-invalid":r,className:u,checked:d,defaultChecked:f,defaultValue:p=`on`,onClick:m,readOnly:h,validation:g,..._},v)=>{let y=a(null),[b]=o(f),x=t(),{ariaInvalid:S,validation:C}=n({"aria-invalid":r,validation:g??x}),w=d??b;i(()=>{y.current&&(y.current.indeterminate=l(w))},[w]);let T=d==null?{defaultChecked:l(b)?void 0:b}:{checked:l(d)?!1:d};return c(`input`,{"aria-checked":l(d)?`mixed`:d,"aria-invalid":S,"data-slot":`checkbox`,className:s(`border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50`,`bg-center bg-no-repeat focus:outline-hidden`,`focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4`,`checked:border-accent-600 checked:bg-accent-600 checked:bg-checked-icon`,`indeterminate:border-accent-600 indeterminate:bg-accent-600 indeterminate:bg-indeterminate-icon`,`data-validation-success:border-success-600 data-validation-success:checked:bg-success-600 data-validation-success:indeterminate:bg-success-600 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-600 data-validation-warning:indeterminate:bg-warning-600 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-600 data-validation-error:indeterminate:bg-danger-600 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger`,`where:block where:size-4 where:p-0`,u),...T,"data-validation":C||void 0,defaultValue:p,onClick:e=>{if(h){e.preventDefault();return}m?.(e)},readOnly:h,ref:e(y,v),type:`checkbox`,..._})});u.displayName=`Checkbox`;function d({allSelected:e,someSelected:t}){return e?!0:t?`indeterminate`:!1}export{u as Checkbox,d as selectAllChecked};
 //# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["clsx"],"sources":["../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport clsx from \"clsx\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/index.js\";\nimport { parseValidation, useFieldValidation } from \"../field/validation.js\";\nimport type { WithValidation } from \"../field/validation.js\";\n\ntype CheckedState = boolean | \"indeterminate\";\n\nconst isIndeterminate = (checked: CheckedState | undefined): checked is \"indeterminate\" =>\n\tchecked === \"indeterminate\";\n\ntype Props = Omit<ComponentPropsWithoutRef<\"input\">, \"type\" | \"checked\" | \"defaultChecked\"> &\n\tWithValidation & {\n\t\t/**\n\t\t * The controlled checked state of the checkbox. Must be used in conjunction with onChange.\n\t\t */\n\t\tchecked?: CheckedState;\n\t\t/**\n\t\t * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n\t\t */\n\t\tdefaultChecked?: CheckedState;\n\t};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n * Supports indeterminate state.\n *\n * @see https://mantle.ngrok.com/components/checkbox\n *\n * @example\n * ```tsx\n * <form>\n *   <Label htmlFor=\"terms\" className=\"flex items-center gap-2\">\n *     <Checkbox name=\"terms\" id=\"terms\" />\n *     Accept terms and conditions\n *   </Label>\n * </form>\n * ```\n */\nconst Checkbox = forwardRef<ComponentRef<\"input\">, Props>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tchecked: _checked,\n\t\t\tdefaultChecked: _defaultChecked,\n\t\t\tdefaultValue = \"on\",\n\t\t\tonClick,\n\t\t\treadOnly,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst innerRef = useRef<ComponentRef<\"input\">>(null);\n\t\tconst [defaultChecked] = useState(_defaultChecked);\n\t\tconst fieldValidation = useFieldValidation();\n\t\tconst { ariaInvalid, validation } = parseValidation({\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tvalidation: _validation ?? fieldValidation,\n\t\t});\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(_checked);\n\t\t\t}\n\t\t}, [_checked]);\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(defaultChecked);\n\t\t\t}\n\t\t}, [defaultChecked]);\n\n\t\t// React warns (and the linter flags) when both `checked` and `defaultChecked` are\n\t\t// passed on the same input. Pick exactly one based on whether the consumer is in\n\t\t// controlled mode (`_checked !== undefined`). Indeterminate is still applied to the\n\t\t// DOM node via the `useEffect`s above on both paths.\n\t\tconst checkedProp =\n\t\t\t_checked !== undefined\n\t\t\t\t? { checked: isIndeterminate(_checked) ? undefined : _checked }\n\t\t\t\t: { defaultChecked: isIndeterminate(defaultChecked) ? undefined : defaultChecked };\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-checked={isIndeterminate(_checked) ? \"mixed\" : _checked}\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-slot=\"checkbox\"\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"bg-center bg-no-repeat focus:outline-hidden\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\t\"checked:border-accent-600 checked:bg-accent-600 checked:bg-checked-icon\",\n\t\t\t\t\t\"indeterminate:border-accent-600 indeterminate:bg-accent-600 indeterminate:bg-indeterminate-icon\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:checked:bg-success-600 data-validation-success:indeterminate:bg-success-600 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-600 data-validation-warning:indeterminate:bg-warning-600 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-600 data-validation-error:indeterminate:bg-danger-600 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger\",\n\t\t\t\t\t\"where:block where:size-4 where:p-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...checkedProp}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tref={composeRefs(innerRef, ref)}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport {\n\t//,\n\tCheckbox,\n};\n"],"mappings":"2OAWA,MAAM,EAAmB,GACxB,IAAY,gBA8BP,EAAW,GAEf,CACC,eAAgB,EAChB,YACA,QAAS,EACT,eAAgB,EAChB,eAAe,KACf,UACA,WACA,WAAY,EACZ,GAAG,GAEJ,IACI,CACJ,IAAM,EAAW,EAA8B,IAAI,EAC7C,CAAC,GAAkB,EAAS,CAAe,EAC3C,EAAkB,EAAmB,EACrC,CAAE,cAAa,cAAe,EAAgB,CACnD,eAAgB,EAChB,WAAY,GAAe,CAC5B,CAAC,EAED,MAAgB,CACX,EAAS,UACZ,EAAS,QAAQ,cAAgB,EAAgB,CAAQ,EAE3D,EAAG,CAAC,CAAQ,CAAC,EAEb,MAAgB,CACX,EAAS,UACZ,EAAS,QAAQ,cAAgB,EAAgB,CAAc,EAEjE,EAAG,CAAC,CAAc,CAAC,EAMnB,IAAM,EACL,IAAa,IAAA,GAEV,CAAE,eAAgB,EAAgB,CAAc,EAAI,IAAA,GAAY,CAAe,EAD/E,CAAE,QAAS,EAAgB,CAAQ,EAAI,IAAA,GAAY,CAAS,EAGhE,OACC,EAAC,QAAD,CACC,eAAc,EAAgB,CAAQ,EAAI,QAAU,EACpD,eAAc,EACd,YAAU,WACV,UAAWA,EACV,qIACA,8CACA,oHACA,0EACA,kGACA,mQACA,mQACA,oPACA,qCACA,CACD,EACA,GAAI,EACJ,kBAAiB,GAAc,IAAA,GACjB,eACd,QAAU,GAAU,CACnB,GAAI,EAAU,CACb,EAAM,eAAe,EACrB,MACD,CACA,IAAU,CAAK,CAChB,EACU,WACV,IAAK,EAAY,EAAU,CAAG,EAC9B,KAAK,WACL,GAAI,CACJ,CAAA,CAEH,CACD,EACA,EAAS,YAAc"}
+{"version":3,"file":"checkbox.js","names":["clsx"],"sources":["../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport clsx from \"clsx\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/index.js\";\nimport { parseValidation, useFieldValidation } from \"../field/validation.js\";\nimport type { WithValidation } from \"../field/validation.js\";\n\ntype CheckedState = boolean | \"indeterminate\";\n\nconst isIndeterminate = (checked: CheckedState | undefined): checked is \"indeterminate\" =>\n\tchecked === \"indeterminate\";\n\ntype Props = Omit<ComponentPropsWithoutRef<\"input\">, \"type\" | \"checked\" | \"defaultChecked\"> &\n\tWithValidation & {\n\t\t/**\n\t\t * The controlled checked state of the checkbox. Must be used in conjunction with onChange.\n\t\t */\n\t\tchecked?: CheckedState;\n\t\t/**\n\t\t * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n\t\t */\n\t\tdefaultChecked?: CheckedState;\n\t};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n * Supports indeterminate state.\n *\n * @see https://mantle.ngrok.com/components/checkbox\n *\n * @example\n * ```tsx\n * <form>\n *   <Label htmlFor=\"terms\" className=\"flex items-center gap-2\">\n *     <Checkbox name=\"terms\" id=\"terms\" />\n *     Accept terms and conditions\n *   </Label>\n * </form>\n * ```\n */\nconst Checkbox = forwardRef<ComponentRef<\"input\">, Props>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tchecked: _checked,\n\t\t\tdefaultChecked: _defaultChecked,\n\t\t\tdefaultValue = \"on\",\n\t\t\tonClick,\n\t\t\treadOnly,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst innerRef = useRef<ComponentRef<\"input\">>(null);\n\t\tconst [defaultChecked] = useState(_defaultChecked);\n\t\tconst fieldValidation = useFieldValidation();\n\t\tconst { ariaInvalid, validation } = parseValidation({\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tvalidation: _validation ?? fieldValidation,\n\t\t});\n\n\t\t// `indeterminate` is a DOM-only property (it has no HTML attribute), so set it\n\t\t// imperatively from the *effective* checked state — the controlled `checked`\n\t\t// when present, otherwise the (stable) initial `defaultChecked`. A single effect\n\t\t// keyed on that value avoids two competing effects clobbering each other on\n\t\t// mount, which previously dropped the indeterminate visual for a controlled\n\t\t// `checked=\"indeterminate\"`.\n\t\tconst effectiveChecked = _checked != null ? _checked : defaultChecked;\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(effectiveChecked);\n\t\t\t}\n\t\t}, [effectiveChecked]);\n\n\t\t// React warns (and the linter flags) when both `checked` and `defaultChecked` are\n\t\t// passed on the same input. Pick exactly one based on whether the consumer is in\n\t\t// controlled mode (`_checked != null`). The indeterminate *visual* is applied\n\t\t// to the DOM node imperatively via the `useEffect`s above on both paths — so in\n\t\t// controlled mode we still pass a boolean `checked` (treating indeterminate as\n\t\t// unchecked) and never let it become `undefined`. Passing `checked: undefined` for\n\t\t// the indeterminate frame flips the input controlled → uncontrolled and trips\n\t\t// React's \"changing a controlled input to be uncontrolled\" warning.\n\t\tconst checkedProp =\n\t\t\t_checked != null\n\t\t\t\t? { checked: isIndeterminate(_checked) ? false : _checked }\n\t\t\t\t: { defaultChecked: isIndeterminate(defaultChecked) ? undefined : defaultChecked };\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-checked={isIndeterminate(_checked) ? \"mixed\" : _checked}\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-slot=\"checkbox\"\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"bg-center bg-no-repeat focus:outline-hidden\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\t\"checked:border-accent-600 checked:bg-accent-600 checked:bg-checked-icon\",\n\t\t\t\t\t\"indeterminate:border-accent-600 indeterminate:bg-accent-600 indeterminate:bg-indeterminate-icon\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:checked:bg-success-600 data-validation-success:indeterminate:bg-success-600 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-600 data-validation-warning:indeterminate:bg-warning-600 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-600 data-validation-error:indeterminate:bg-danger-600 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger\",\n\t\t\t\t\t\"where:block where:size-4 where:p-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...checkedProp}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tref={composeRefs(innerRef, ref)}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCheckbox.displayName = \"Checkbox\";\n\n/**\n * Resolve the tri-state `checked` value for a \"select all\" checkbox from the\n * current selection counts: `true` when everything is selected,\n * `\"indeterminate\"` when only some is, and `false` when nothing is. The result\n * is a {@link CheckedState}, ready to pass straight to `<Checkbox checked={…} />`.\n *\n * `allSelected` is checked first, so it wins even if a caller also reports\n * `someSelected` for the all-selected case.\n *\n * @example\n * ```tsx\n * // Driving a TanStack Table \"select all\" header checkbox:\n * <Checkbox\n *   aria-label=\"Select all rows\"\n *   checked={selectAllChecked({\n *     allSelected: table.getIsAllRowsSelected(),\n *     someSelected: table.getIsSomeRowsSelected(),\n *   })}\n *   onChange={(event) => table.toggleAllRowsSelected(event.target.checked)}\n * />\n * ```\n */\nfunction selectAllChecked({\n\tallSelected,\n\tsomeSelected,\n}: {\n\t/** Whether every selectable item is currently selected. */\n\tallSelected: boolean;\n\t/** Whether some (but not necessarily all) items are selected. */\n\tsomeSelected: boolean;\n}): CheckedState {\n\tif (allSelected) {\n\t\treturn true;\n\t}\n\tif (someSelected) {\n\t\treturn \"indeterminate\";\n\t}\n\treturn false;\n}\n\nexport {\n\t//,\n\tCheckbox,\n\tselectAllChecked,\n};\n\nexport type {\n\t//,\n\tCheckedState,\n};\n"],"mappings":"2OAWA,MAAM,EAAmB,GACxB,IAAY,gBA8BP,EAAW,GAEf,CACC,eAAgB,EAChB,YACA,QAAS,EACT,eAAgB,EAChB,eAAe,KACf,UACA,WACA,WAAY,EACZ,GAAG,GAEJ,IACI,CACJ,IAAM,EAAW,EAA8B,IAAI,EAC7C,CAAC,GAAkB,EAAS,CAAe,EAC3C,EAAkB,EAAmB,EACrC,CAAE,cAAa,cAAe,EAAgB,CACnD,eAAgB,EAChB,WAAY,GAAe,CAC5B,CAAC,EAQK,EAAmB,GAA8B,EACvD,MAAgB,CACX,EAAS,UACZ,EAAS,QAAQ,cAAgB,EAAgB,CAAgB,EAEnE,EAAG,CAAC,CAAgB,CAAC,EAUrB,IAAM,EACL,GAAY,KAET,CAAE,eAAgB,EAAgB,CAAc,EAAI,IAAA,GAAY,CAAe,EAD/E,CAAE,QAAS,EAAgB,CAAQ,EAAI,GAAQ,CAAS,EAG5D,OACC,EAAC,QAAD,CACC,eAAc,EAAgB,CAAQ,EAAI,QAAU,EACpD,eAAc,EACd,YAAU,WACV,UAAWA,EACV,qIACA,8CACA,oHACA,0EACA,kGACA,mQACA,mQACA,oPACA,qCACA,CACD,EACA,GAAI,EACJ,kBAAiB,GAAc,IAAA,GACjB,eACd,QAAU,GAAU,CACnB,GAAI,EAAU,CACb,EAAM,eAAe,EACrB,MACD,CACA,IAAU,CAAK,CAChB,EACU,WACV,IAAK,EAAY,EAAU,CAAG,EAC9B,KAAK,WACL,GAAI,CACJ,CAAA,CAEH,CACD,EACA,EAAS,YAAc,WAwBvB,SAAS,EAAiB,CACzB,cACA,gBAMgB,CAOhB,OANI,EACI,GAEJ,EACI,gBAED,EACR"}

package/dist/command.d.ts

@@ -135,7 +135,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+  }, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -243,7 +243,7 @@ declare const Command: {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+  }, "key" | "asChild" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
     value?: string;
     onValueChange?: (search: string) => void;
   } & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -285,7 +285,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+  }, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
   } & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   /**
@@ -326,7 +326,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  }, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * The group component for the Command component.
    *
@@ -365,7 +365,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
+  }, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -408,7 +408,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
+  }, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
@@ -484,7 +484,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+  }, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild"> & {
     alwaysRender?: boolean;
   } & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };

package/dist/data-table.d.ts

@@ -1,4 +1,4 @@
-import { t as Button } from "./button-BYZOBUgj.js";
+import { t as Button } from "./button-BXZ_JTu_.js";
 import { s as SortingMode } from "./direction-CcTY0FmA.js";
 import { t as Table$1 } from "./table-BWD9IlIN.js";
 import { ComponentProps, ReactNode } from "react";
@@ -240,21 +240,55 @@ type DataTableEmptyRowProps = ComponentProps<typeof Table$1.Row>;
  * collapsing to an empty `<tbody>`. The cell `colSpan` is computed from the
  * TanStack Table instance via context, so no manual column count is needed.
  *
+ * Host an `Empty` for a real empty state, and branch on whether a filter is
+ * active so the user sees the right message (and a way out when filtered):
+ *
  * @see https://mantle.ngrok.com/components/data-table#datatableemptyrow
+ * @see https://mantle.ngrok.com/components/empty
  *
  * @example
  * ```tsx
- * const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
- * const rows = table.getRowModel().rows;
+ * import { DataTable } from "@ngrok/mantle/data-table";
+ * import { Empty } from "@ngrok/mantle/empty";
+ * import { Button } from "@ngrok/mantle/button";
+ * import { MagnifyingGlassIcon } from "@phosphor-icons/react/MagnifyingGlass";
+ * import { TrayIcon } from "@phosphor-icons/react/Tray";
  *
- * <DataTable.Root table={table}>
- *   <DataTable.Head />
- *   <DataTable.Body>
- *     {rows.length > 0
- *       ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)
- *       : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}
- *   </DataTable.Body>
- * </DataTable.Root>
+ * // `table` is your useReactTable instance; derive everything else from it.
+ * const rows = table.getRowModel().rows;
+ * const isFiltered = (table.getState().globalFilter ?? "") !== "";
+ *
+ * // EmptyRow already spans every column and Empty.Root centers itself — drop a
+ * // single Empty.Root in as the child; don't hand-roll a <td> or any centering.
+ * <DataTable.Body>
+ *   {rows.length > 0 ? (
+ *     rows.map((row) => <DataTable.Row key={row.id} row={row} />)
+ *   ) : isFiltered ? (
+ *     <DataTable.EmptyRow>
+ *       <Empty.Root>
+ *         <Empty.Icon svg={<MagnifyingGlassIcon />} />
+ *         <Empty.Title>No results match your filter</Empty.Title>
+ *         <Empty.Actions>
+ *           <Button
+ *             type="button"
+ *             appearance="outlined"
+ *             priority="neutral"
+ *             onClick={() => table.setGlobalFilter("")}
+ *           >
+ *             Clear filters
+ *           </Button>
+ *         </Empty.Actions>
+ *       </Empty.Root>
+ *     </DataTable.EmptyRow>
+ *   ) : (
+ *     <DataTable.EmptyRow>
+ *       <Empty.Root>
+ *         <Empty.Icon svg={<TrayIcon />} />
+ *         <Empty.Title>No endpoints yet</Empty.Title>
+ *       </Empty.Root>
+ *     </DataTable.EmptyRow>
+ *   )}
+ * </DataTable.Body>
  * ```
  */
 declare function EmptyRow<TData>({
@@ -397,7 +431,10 @@ declare namespace ActionHeader {
  * ```
  *
  * @example
- * Sortable + filterable + paginated — with a global text filter and page controls:
+ * Sortable, filterable, paginated, with both empty states — a global text
+ * filter, the no-data vs. no-results-for-filter empty states (an `Empty`
+ * dropped into `DataTable.EmptyRow`), and `CursorPagination` with a page-size
+ * dropdown:
  * ```tsx
  * import {
  *   DataTable,
@@ -409,11 +446,19 @@ declare namespace ActionHeader {
  *   useReactTable,
  * } from "@ngrok/mantle/data-table";
  * import { Button } from "@ngrok/mantle/button";
+ * import { CursorPagination } from "@ngrok/mantle/pagination";
+ * import { Empty } from "@ngrok/mantle/empty";
  * import { Input } from "@ngrok/mantle/input";
+ * import { MagnifyingGlassIcon } from "@phosphor-icons/react/MagnifyingGlass";
+ * import { TrayIcon } from "@phosphor-icons/react/Tray";
  * import { useState } from "react";
  *
  * type Payment = { id: string; amount: number; status: "pending" | "succeeded" | "failed"; email: string };
  *
+ * // `defaultPageSize` seeds an UNCONTROLLED <Select>, so keep it stable — a
+ * // module const (or the table's INITIAL page size), never the live page size.
+ * const DEFAULT_PAGE_SIZE = 10;
+ *
  * const columnHelper = createColumnHelper<Payment>();
  * const columns = [
  *   columnHelper.accessor("status", {
@@ -472,8 +517,10 @@ declare namespace ActionHeader {
  *     getSortedRowModel: getSortedRowModel(),
  *     getFilteredRowModel: getFilteredRowModel(),
  *     getPaginationRowModel: getPaginationRowModel(),
+ *     initialState: { pagination: { pageSize: DEFAULT_PAGE_SIZE } },
  *   });
  *   const rows = table.getRowModel().rows;
+ *   const isFiltered = globalFilter.trim() !== "";
  *
  *   return (
  *     <div className="space-y-4">
@@ -485,34 +532,57 @@ declare namespace ActionHeader {
  *       <DataTable.Root table={table}>
  *         <DataTable.Head />
  *         <DataTable.Body>
- *           {rows.length > 0
- *             ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)
- *             : <DataTable.EmptyRow>No payments match.</DataTable.EmptyRow>}
+ *           {rows.length > 0 ? (
+ *             rows.map((row) => <DataTable.Row key={row.id} row={row} />)
+ *           ) : isFiltered ? (
+ *             // No results for the active filter — give the user a way out.
+ *             <DataTable.EmptyRow>
+ *               <Empty.Root>
+ *                 <Empty.Icon svg={<MagnifyingGlassIcon />} />
+ *                 <Empty.Title>No payments match your filter</Empty.Title>
+ *                 <Empty.Description>
+ *                   <p>Try a different search, or clear the filter to see everything.</p>
+ *                 </Empty.Description>
+ *                 <Empty.Actions>
+ *                   <Button
+ *                     type="button"
+ *                     appearance="outlined"
+ *                     priority="neutral"
+ *                     onClick={() => setGlobalFilter("")}
+ *                   >
+ *                     Clear filters
+ *                   </Button>
+ *                 </Empty.Actions>
+ *               </Empty.Root>
+ *             </DataTable.EmptyRow>
+ *           ) : (
+ *             // No data yet — informational, optionally a primary "create" action.
+ *             <DataTable.EmptyRow>
+ *               <Empty.Root>
+ *                 <Empty.Icon svg={<TrayIcon />} />
+ *                 <Empty.Title>No payments yet</Empty.Title>
+ *                 <Empty.Description>
+ *                   <p>Payments you receive will appear here.</p>
+ *                 </Empty.Description>
+ *               </Empty.Root>
+ *             </DataTable.EmptyRow>
+ *           )}
  *         </DataTable.Body>
  *       </DataTable.Root>
- *       <div className="flex items-center justify-between gap-2">
- *         <span className="text-sm text-muted">
- *           Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
- *         </span>
- *         <div className="flex gap-2">
- *           <Button
- *             type="button"
- *             priority="neutral"
- *             onClick={() => table.previousPage()}
- *             disabled={!table.getCanPreviousPage()}
- *           >
- *             Previous
- *           </Button>
- *           <Button
- *             type="button"
- *             priority="neutral"
- *             onClick={() => table.nextPage()}
- *             disabled={!table.getCanNextPage()}
- *           >
- *             Next
- *           </Button>
- *         </div>
- *       </div>
+ *       <CursorPagination.Root className="flex justify-end" defaultPageSize={DEFAULT_PAGE_SIZE}>
+ *         <CursorPagination.PageSizeSelect
+ *           onChangePageSize={(size) => {
+ *             table.setPageSize(size);
+ *             table.setPageIndex(0); // reset to the first page when the size changes
+ *           }}
+ *         />
+ *         <CursorPagination.Buttons
+ *           hasPreviousPage={table.getCanPreviousPage()}
+ *           hasNextPage={table.getCanNextPage()}
+ *           onPreviousPage={() => table.previousPage()}
+ *           onNextPage={() => table.nextPage()}
+ *         />
+ *       </CursorPagination.Root>
  *     </div>
  *   );
  * }
@@ -707,15 +777,25 @@ declare const DataTable: {
    * branch when `rows.length === 0` to keep the table's frame intact instead
    * of collapsing to an empty `<tbody>`.
    *
+   * Drop an `Empty` in as the child for a real empty state — `EmptyRow` spans
+   * every column and `Empty.Root` centers itself, so no `<td>` or centering
+   * markup is needed.
+   *
    * @see https://mantle.ngrok.com/components/data-table#datatableemptyrow
+   * @see https://mantle.ngrok.com/components/empty
    *
    * @example
    * ```tsx
-   * <DataTable.Body>
-   *   {rows.length > 0
-   *     ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)
-   *     : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}
-   * </DataTable.Body>
+   * import { DataTable } from "@ngrok/mantle/data-table";
+   * import { Empty } from "@ngrok/mantle/empty";
+   * import { TrayIcon } from "@phosphor-icons/react/Tray";
+   *
+   * <DataTable.EmptyRow>
+   *   <Empty.Root>
+   *     <Empty.Icon svg={<TrayIcon />} />
+   *     <Empty.Title>No endpoints yet</Empty.Title>
+   *   </Empty.Root>
+   * </DataTable.EmptyRow>
    * ```
    */
   readonly EmptyRow: typeof EmptyRow;

package/dist/data-table.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-CBSnSC36.js";import{t}from"./button-uMIZVKit.js";import{i as n}from"./direction-Wa9W2F61.js";import{t as r}from"./sort-BPX2Fk9t.js";import{t as i}from"./table-eyoUW2Uv.js";import{Fragment as a,createContext as o,forwardRef as s,useContext as c,useMemo as l}from"react";import u from"tiny-invariant";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{flexRender as p}from"@tanstack/react-table";export*from"@tanstack/react-table";const m=[`unsorted`,`asc`,`desc`],h=[`unsorted`,`desc`,`asc`];function g(e,t){return _(t===`alphanumeric`?m:h,e)??`unsorted`}function _(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 v=o(null);function y(){let e=c(v);return u(e,`useDataTableContext should only be used within a DataTable child component`),e}function b({children:e,table:t,...n}){let r=l(()=>({table:t}),[t]);return d(v.Provider,{value:r,children:d(i.Root,{"data-slot":`data-table`,...n,children:d(i.Element,{children:e})})})}function x({children:r,className:i,column:a,disableSorting:o=!1,iconPlacement:s=`end`,sortingMode:c,sortIcon:l,onClick:u,...p}){let m=a.getIsSorted(),h=!o&&a.getCanSort(),g=h&&typeof m==`string`?m:`unsorted`,_=l?.(g)??d(j,{mode:c,direction:g});return f(t,{appearance:`ghost`,"data-slot":`data-table-header-sort-button`,className:e(`flex justify-start w-full h-full rounded-none not-disabled:active:scale-none text-muted`,i),"data-sort-direction":g,"data-table-header-action":!0,icon:_,iconPlacement:s,onClick:e=>{u?.(e),!e.defaultPrevented&&(!h||o||c===void 0||M(a,c))},priority:`neutral`,type:`button`,...p,children:[h&&g!==`unsorted`&&f(`span`,{className:`sr-only`,children:[`Column sorted in`,` `,c===`alphanumeric`?g===`asc`?`ascending`:`descending`:n(g),` `,`order`]}),r]})}function S({children:t,className:n,...r}){return d(i.Header,{"data-slot":`data-table-header`,className:e(`has-data-table-header-action:px-0`,n),...r,children:t})}const C=s((e,t)=>d(i.Body,{ref:t,"data-slot":`data-table-body`,...e}));C.displayName=`DataTableBody`;function w(e){let{table:t}=y();return d(i.Head,{"data-slot":`data-table-head`,...e,children:t.getHeaderGroups().map(e=>d(i.Row,{children:e.headers.map(e=>d(a,{children:e.isPlaceholder?d(i.Header,{},e.id):p(e.column.columnDef.header,e.getContext())},e.id))},e.id))})}function T({className:t,row:n,...r}){return d(i.Row,{"data-slot":`data-table-row`,className:e(r.onClick&&`cursor-pointer`,t),...r,children:n.getVisibleCells().map(e=>d(a,{children:p(e.column.columnDef.cell,e.getContext())},e.id))})}function E({children:e,...t}){let{table:n}=y(),r=n.getAllColumns().length;return d(i.Row,{"data-slot":`data-table-empty-row`,...t,children:d(i.Cell,{colSpan:r,children:e})})}function D(){return d(`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 O({children:t,className:n,...r}){return f(i.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:[d(D,{}),t]})}function k({children:t,className:n,...r}){let{table:a}=y(),o=a.getRowModel().rows.length>0;return f(i.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&&d(D,{}),t]})}b.displayName=`DataTable`,O.displayName=`DataTableActionCell`,k.displayName=`DataTableActionHeader`,C.displayName=`DataTableBody`,E.displayName=`DataTableEmptyRow`,w.displayName=`DataTableHead`,S.displayName=`DataTableHeader`,x.displayName=`DataTableHeaderSortButton`,T.displayName=`DataTableRow`;const A={Root:b,ActionCell:O,ActionHeader:k,Cell:i.Cell,Body:C,EmptyRow:E,Head:w,Header:S,HeaderSortButton:x,Row:T};function j({direction:e,mode:t,...n}){return e===`unsorted`||!t||!e?d(`svg`,{"aria-hidden":!0,...n}):d(r,{mode:t,direction:e,...n})}function M(e,t){if(!e.getCanSort())return;let n=e.getIsSorted();switch(g(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{A as DataTable};
+import{t as e}from"./cx-CBSnSC36.js";import{t}from"./button-uMIZVKit.js";import{i as n}from"./direction-Wa9W2F61.js";import{t as r}from"./sort-BPX2Fk9t.js";import{t as i}from"./table-DWy_oNta.js";import{Fragment as a,createContext as o,forwardRef as s,useContext as c,useMemo as l}from"react";import u from"tiny-invariant";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{flexRender as p}from"@tanstack/react-table";export*from"@tanstack/react-table";const m=[`unsorted`,`asc`,`desc`],h=[`unsorted`,`desc`,`asc`];function g(e,t){return _(t===`alphanumeric`?m:h,e)??`unsorted`}function _(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 v=o(null);function y(){let e=c(v);return u(e,`useDataTableContext should only be used within a DataTable child component`),e}function b({children:e,table:t,...n}){let r=l(()=>({table:t}),[t]);return d(v.Provider,{value:r,children:d(i.Root,{"data-slot":`data-table`,...n,children:d(i.Element,{children:e})})})}function x({children:r,className:i,column:a,disableSorting:o=!1,iconPlacement:s=`end`,sortingMode:c,sortIcon:l,onClick:u,...p}){let m=a.getIsSorted(),h=!o&&a.getCanSort(),g=h&&typeof m==`string`?m:`unsorted`,_=l?.(g)??d(j,{mode:c,direction:g});return f(t,{appearance:`ghost`,"data-slot":`data-table-header-sort-button`,className:e(`flex justify-start w-full h-full rounded-none not-disabled:active:scale-none text-muted`,i),"data-sort-direction":g,"data-table-header-action":!0,icon:_,iconPlacement:s,onClick:e=>{u?.(e),!e.defaultPrevented&&(!h||o||c===void 0||M(a,c))},priority:`neutral`,type:`button`,...p,children:[h&&g!==`unsorted`&&f(`span`,{className:`sr-only`,children:[`Column sorted in`,` `,c===`alphanumeric`?g===`asc`?`ascending`:`descending`:n(g),` `,`order`]}),r]})}function S({children:t,className:n,...r}){return d(i.Header,{"data-slot":`data-table-header`,className:e(`has-data-table-header-action:px-0`,n),...r,children:t})}const C=s((e,t)=>d(i.Body,{ref:t,"data-slot":`data-table-body`,...e}));C.displayName=`DataTableBody`;function w(e){let{table:t}=y();return d(i.Head,{"data-slot":`data-table-head`,...e,children:t.getHeaderGroups().map(e=>d(i.Row,{children:e.headers.map(e=>d(a,{children:e.isPlaceholder?d(i.Header,{},e.id):p(e.column.columnDef.header,e.getContext())},e.id))},e.id))})}function T({className:t,row:n,...r}){return d(i.Row,{"data-slot":`data-table-row`,className:e(r.onClick&&`cursor-pointer`,t),...r,children:n.getVisibleCells().map(e=>d(a,{children:p(e.column.columnDef.cell,e.getContext())},e.id))})}function E({children:e,...t}){let{table:n}=y(),r=n.getAllColumns().length;return d(i.Row,{"data-slot":`data-table-empty-row`,...t,children:d(i.Cell,{colSpan:r,children:e})})}function D(){return d(`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 O({children:t,className:n,...r}){return f(i.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:[d(D,{}),t]})}function k({children:t,className:n,...r}){let{table:a}=y(),o=a.getRowModel().rows.length>0;return f(i.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&&d(D,{}),t]})}b.displayName=`DataTable`,O.displayName=`DataTableActionCell`,k.displayName=`DataTableActionHeader`,C.displayName=`DataTableBody`,E.displayName=`DataTableEmptyRow`,w.displayName=`DataTableHead`,S.displayName=`DataTableHeader`,x.displayName=`DataTableHeaderSortButton`,T.displayName=`DataTableRow`;const A={Root:b,ActionCell:O,ActionHeader:k,Cell:i.Cell,Body:C,EmptyRow:E,Head:w,Header:S,HeaderSortButton:x,Row:T};function j({direction:e,mode:t,...n}){return e===`unsorted`||!t||!e?d(`svg`,{"aria-hidden":!0,...n}):d(r,{mode:t,direction:e,...n})}function M(e,t){if(!e.getCanSort())return;let n=e.getIsSorted();switch(g(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{A as DataTable};
 //# sourceMappingURL=data-table.js.map