@ngrok/mantle 0.27.0 → 0.27.2

package/dist/button-C8eGiHOm.d.ts

@@ -0,0 +1,166 @@
+import { D as DeepNonNullable } from './deep-non-nullable-SmpSvoSd.js';
+import * as class_variance_authority from 'class-variance-authority';
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, ComponentProps } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { V as VariantProps } from './variant-props-oDo2u-We.js';
+
+declare const buttonVariants: (props?: ({
+    appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
+    isLoading?: boolean | null | undefined;
+    priority?: "default" | "danger" | "neutral" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonVariants = VariantProps<typeof buttonVariants>;
+/**
+ * The props for the `Button` component.
+ */
+type ButtonProps = ComponentProps<"button"> & ButtonVariants & {
+    /**
+     * An icon to render inside the button. If the `state` is `"pending"`, then
+     * the icon will automatically be replaced with a spinner.
+     */
+    icon?: ReactNode;
+    /**
+     * The side that the icon will render on, if one is present. If `state="pending"`,
+     * then the loading icon will also render on this side.
+     * @default "start"
+     */
+    iconPlacement?: "start" | "end";
+} & ({
+    /**
+     * Use the `asChild` prop to compose Radix's functionality onto alternative
+     * element types or your own React components.
+     *
+     * When `asChild` is set to `true`, mantle will not render a default DOM
+     * element, instead cloning the component's child and passing it the props and
+     * behavior required to make it functional.
+     *
+     * asChild can be used as deeply as you need to. This means it is a great way
+     * to compose multiple primitive's behavior together.
+     *
+     * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition
+     */
+    asChild: true;
+    /**
+     * The default behavior of the button. Possible values are: `"button"`, `"submit"`, and `"reset"`.
+     *
+     * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.
+     *
+     * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type
+     *
+     * @enum
+     * - `"button"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.
+     * - `"reset"`: The button resets all the controls to their initial values.
+     * - `"submit"`: The button submits the form data to the server.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
+     */
+    type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
+} | {
+    asChild?: false | undefined;
+    /**
+     * The default behavior of the button. Possible values are: `"button"`, `"submit"`, and `"reset"`.
+     *
+     * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.
+     *
+     * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type
+     *
+     * @enum
+     * - `"button"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.
+     * - `"reset"`: The button resets all the controls to their initial values.
+     * - `"submit"`: The button submits the form data to the server.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
+     */
+    type: Exclude<ButtonHTMLAttributes<HTMLButtonElement>["type"], undefined>;
+});
+/**
+ * Renders a button or a component that looks like a button, an interactive
+ * element activated by a user with a mouse, keyboard, finger, voice command, or
+ * other assistive technology. Once activated, it then performs an action, such
+ * as submitting a form or opening a dialog.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
+ */
+declare const Button: react.ForwardRefExoticComponent<(Omit<react.ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
+    appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
+    isLoading?: boolean | null | undefined;
+    priority?: "default" | "danger" | "neutral" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
+    /**
+     * An icon to render inside the button. If the `state` is `"pending"`, then
+     * the icon will automatically be replaced with a spinner.
+     */
+    icon?: ReactNode;
+    /**
+     * The side that the icon will render on, if one is present. If `state="pending"`,
+     * then the loading icon will also render on this side.
+     * @default "start"
+     */
+    iconPlacement?: "start" | "end";
+} & {
+    /**
+     * Use the `asChild` prop to compose Radix's functionality onto alternative
+     * element types or your own React components.
+     *
+     * When `asChild` is set to `true`, mantle will not render a default DOM
+     * element, instead cloning the component's child and passing it the props and
+     * behavior required to make it functional.
+     *
+     * asChild can be used as deeply as you need to. This means it is a great way
+     * to compose multiple primitive's behavior together.
+     *
+     * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition
+     */
+    asChild: true;
+    /**
+     * The default behavior of the button. Possible values are: `"button"`, `"submit"`, and `"reset"`.
+     *
+     * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.
+     *
+     * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type
+     *
+     * @enum
+     * - `"button"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.
+     * - `"reset"`: The button resets all the controls to their initial values.
+     * - `"submit"`: The button submits the form data to the server.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
+     */
+    type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
+}, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
+    appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
+    isLoading?: boolean | null | undefined;
+    priority?: "default" | "danger" | "neutral" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
+    /**
+     * An icon to render inside the button. If the `state` is `"pending"`, then
+     * the icon will automatically be replaced with a spinner.
+     */
+    icon?: ReactNode;
+    /**
+     * The side that the icon will render on, if one is present. If `state="pending"`,
+     * then the loading icon will also render on this side.
+     * @default "start"
+     */
+    iconPlacement?: "start" | "end";
+} & {
+    asChild?: false | undefined;
+    /**
+     * The default behavior of the button. Possible values are: `"button"`, `"submit"`, and `"reset"`.
+     *
+     * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.
+     *
+     * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type
+     *
+     * @enum
+     * - `"button"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.
+     * - `"reset"`: The button resets all the controls to their initial values.
+     * - `"submit"`: The button submits the form data to the server.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
+     */
+    type: Exclude<ButtonHTMLAttributes<HTMLButtonElement>["type"], undefined>;
+}, "ref">) & react.RefAttributes<HTMLButtonElement>>;
+
+export { Button as B, type ButtonProps as a };

package/dist/button.d.ts

@@ -1,169 +1,9 @@
-import { D as DeepNonNullable } from './deep-non-nullable-SmpSvoSd.js';
-import * as class_variance_authority from 'class-variance-authority';
-import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, ComponentProps } from 'react';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { V as VariantProps } from './variant-props-oDo2u-We.js';
+export { B as Button, a as ButtonProps } from './button-C8eGiHOm.js';
 export { I as IconButton, a as IconButtonProps } from './icon-button-D41yiI7H.js';
 export { B as ButtonGroup, a as ButtonGroupProps } from './button-group-CpDp0fYZ.js';
+import './deep-non-nullable-SmpSvoSd.js';
+import 'class-variance-authority';
+import 'react';
+import 'class-variance-authority/types';
+import './variant-props-oDo2u-We.js';
 import './as-child-DJ7x3JFV.js';
-
-declare const buttonVariants: (props?: ({
-    appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
-    isLoading?: boolean | null | undefined;
-    priority?: "default" | "danger" | "neutral" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type ButtonVariants = VariantProps<typeof buttonVariants>;
-/**
- * The props for the `Button` component.
- */
-type ButtonProps = ComponentProps<"button"> & ButtonVariants & {
-    /**
-     * An icon to render inside the button. If the `state` is `"pending"`, then
-     * the icon will automatically be replaced with a spinner.
-     */
-    icon?: ReactNode;
-    /**
-     * The side that the icon will render on, if one is present. If `state="pending"`,
-     * then the loading icon will also render on this side.
-     * @default "start"
-     */
-    iconPlacement?: "start" | "end";
-} & ({
-    /**
-     * Use the `asChild` prop to compose Radix's functionality onto alternative
-     * element types or your own React components.
-     *
-     * When `asChild` is set to `true`, mantle will not render a default DOM
-     * element, instead cloning the component's child and passing it the props and
-     * behavior required to make it functional.
-     *
-     * asChild can be used as deeply as you need to. This means it is a great way
-     * to compose multiple primitive's behavior together.
-     *
-     * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition
-     */
-    asChild: true;
-    /**
-     * The default behavior of the button. Possible values are: `"button"`, `"submit"`, and `"reset"`.
-     *
-     * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.
-     *
-     * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type
-     *
-     * @enum
-     * - `"button"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.
-     * - `"reset"`: The button resets all the controls to their initial values.
-     * - `"submit"`: The button submits the form data to the server.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
-     */
-    type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
-} | {
-    asChild?: false | undefined;
-    /**
-     * The default behavior of the button. Possible values are: `"button"`, `"submit"`, and `"reset"`.
-     *
-     * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.
-     *
-     * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type
-     *
-     * @enum
-     * - `"button"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.
-     * - `"reset"`: The button resets all the controls to their initial values.
-     * - `"submit"`: The button submits the form data to the server.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
-     */
-    type: Exclude<ButtonHTMLAttributes<HTMLButtonElement>["type"], undefined>;
-});
-/**
- * Renders a button or a component that looks like a button, an interactive
- * element activated by a user with a mouse, keyboard, finger, voice command, or
- * other assistive technology. Once activated, it then performs an action, such
- * as submitting a form or opening a dialog.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
- */
-declare const Button: react.ForwardRefExoticComponent<(Omit<react.ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
-    appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
-    isLoading?: boolean | null | undefined;
-    priority?: "default" | "danger" | "neutral" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
-    /**
-     * An icon to render inside the button. If the `state` is `"pending"`, then
-     * the icon will automatically be replaced with a spinner.
-     */
-    icon?: ReactNode;
-    /**
-     * The side that the icon will render on, if one is present. If `state="pending"`,
-     * then the loading icon will also render on this side.
-     * @default "start"
-     */
-    iconPlacement?: "start" | "end";
-} & {
-    /**
-     * Use the `asChild` prop to compose Radix's functionality onto alternative
-     * element types or your own React components.
-     *
-     * When `asChild` is set to `true`, mantle will not render a default DOM
-     * element, instead cloning the component's child and passing it the props and
-     * behavior required to make it functional.
-     *
-     * asChild can be used as deeply as you need to. This means it is a great way
-     * to compose multiple primitive's behavior together.
-     *
-     * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition
-     */
-    asChild: true;
-    /**
-     * The default behavior of the button. Possible values are: `"button"`, `"submit"`, and `"reset"`.
-     *
-     * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.
-     *
-     * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type
-     *
-     * @enum
-     * - `"button"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.
-     * - `"reset"`: The button resets all the controls to their initial values.
-     * - `"submit"`: The button submits the form data to the server.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
-     */
-    type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
-}, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
-    appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
-    isLoading?: boolean | null | undefined;
-    priority?: "default" | "danger" | "neutral" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
-    /**
-     * An icon to render inside the button. If the `state` is `"pending"`, then
-     * the icon will automatically be replaced with a spinner.
-     */
-    icon?: ReactNode;
-    /**
-     * The side that the icon will render on, if one is present. If `state="pending"`,
-     * then the loading icon will also render on this side.
-     * @default "start"
-     */
-    iconPlacement?: "start" | "end";
-} & {
-    asChild?: false | undefined;
-    /**
-     * The default behavior of the button. Possible values are: `"button"`, `"submit"`, and `"reset"`.
-     *
-     * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.
-     *
-     * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type
-     *
-     * @enum
-     * - `"button"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.
-     * - `"reset"`: The button resets all the controls to their initial values.
-     * - `"submit"`: The button submits the form data to the server.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
-     */
-    type: Exclude<ButtonHTMLAttributes<HTMLButtonElement>["type"], undefined>;
-}, "ref">) & react.RefAttributes<HTMLButtonElement>>;
-
-export { Button, type ButtonProps };

package/dist/chunk-DD3VIOV5.js

@@ -0,0 +1,2 @@
+import{a as s}from"./chunk-AZ56JGNY.js";import{forwardRef as l,useEffect as p,useMemo as h,useRef as u,useState as v}from"react";import{jsx as n}from"react/jsx-runtime";var y=l(({children:t,className:o,style:r,...e},d)=>{let a=x();return n("div",{className:s("group/table scrollbar overflow-auto rounded-lg border border-gray-300 bg-white dark:bg-gray-100 relative",o),"data-sticky-active":a.state.hasOverflow&&!a.state.scrolledToEnd||void 0,"data-x-overflow":a.state.hasOverflow,"data-x-scroll-end":a.state.hasOverflow&&a.state.scrolledToEnd,ref:a.ref,children:n("table",{ref:d,className:"table-auto border-separate caption-bottom border-spacing-0 w-full text-left",...e,children:t})})});y.displayName="Table";var i=l(({children:t,className:o,...r},e)=>n("thead",{ref:e,className:s("text-strong bg-base [&_tr]:border-b",o),...r,children:t}));i.displayName="TableHead";var T=l(({children:t,className:o,...r},e)=>n("tbody",{className:s("text-body",o),ref:e,...r,children:t}));T.displayName="TableBody";var C=l(({children:t,className:o,...r},e)=>n("tfoot",{ref:e,className:s("bg-gray-50/50 font-medium [&>tr:first-child>td]:border-t text-body",o),...r,children:t}));C.displayName="TableFoot";var g=l(({children:t,className:o,...r},e)=>n("tr",{ref:e,className:s("[&>td]:border-b [&>td]:border-gray-300 [&>td]:last:border-b-0 [&>td]:bg-card [&>td]:hover:bg-card-hover",o),...r,children:t}));g.displayName="TableRow";var E=l(({children:t,className:o,...r},e)=>n("th",{ref:e,className:s("h-12 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0",o),...r,children:t}));i.displayName="TableHead";var w=l(({children:t,className:o,...r},e)=>n("td",{ref:e,className:s("p-4 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-size-mono",o),...r,children:t}));w.displayName="TableCell";var N=l(({children:t,className:o,...r},e)=>n("caption",{ref:e,className:s("border-t border-gray-300 py-4 text-sm text-gray-500",o),...r,children:t}));N.displayName="TableCaption";function x(){let t=u(null),[o,r]=v({hasOverflow:!1,scrolledToEnd:!1});return p(()=>{let e=t.current;if(!e)return;let d=()=>{let f=e.scrollWidth>e.clientWidth,m=Math.abs(e.scrollWidth-e.scrollLeft-e.clientWidth)<1;r(c=>c.hasOverflow!==f||c.scrolledToEnd!==m?{hasOverflow:f,scrolledToEnd:m}:c)},a=new ResizeObserver(d);a.observe(e);let b=new MutationObserver(d);return b.observe(e,{childList:!0,subtree:!0}),e.addEventListener("scroll",d,{passive:!0}),d(),()=>{a.disconnect(),b.disconnect(),e.removeEventListener("scroll",d)}},[]),h(()=>({ref:t,state:o}),[o])}export{y as a,i as b,T as c,C as d,g as e,E as f,w as g,N as h};
+//# sourceMappingURL=chunk-DD3VIOV5.js.map

package/dist/chunk-DD3VIOV5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/table/table.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * The `<Table>` is a structured way to display data in rows and columns. The API\n * matches the HTML `<table>` element 1:1.\n *\n * Permitted content in this order:\n * 1. optional: `<TableCaption>`\n * 2. 0 or more: `<colgroup>` elements\n * 3. optional: `<TableHead>`\n * 4. either one of the following:\n *    - 0 or more: `<TableBody>`\n *    - 0 or more: `<TableRow>`\n * 5. optional: `<TableFoot>`\n *\n * @description\n * Establishes a table formatting context. Elements inside the `<Table>`\n * generate rectangular boxes. Each box occupies a number of table cells\n * according to the following rules:\n *   1. The row boxes fill the table in the source code order from top to bottom.\n *      Each row box occupies one row of cells.\n *   2. A row group box occupies one or more row boxes.\n *   3. Column boxes are placed next to each other in source code order.\n *      Depending on the value of the dir attribute, the columns are laid in\n *      left-to-right or right-to-left direction. A column box occupies one or\n *      more columns of table cells.\n *   4. A column group box occupies one or more column boxes.\n *   5. A cell box may span over multiple rows and columns. User agents trim\n *      cells to fit in the available number of rows and columns.\n * Table cells do have padding. Boxes that make up a table do not have margins.\n * For more in depth information, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table).\n *\n * @example\n * ```tsx\n * <Table>\n *   <TableCaption>A list of your recent invoices.</TableCaption>\n *   <TableHead>\n *     <TableRow>\n *       <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *       <TableHeader>Status</TableHeader>\n *       <TableHeader>Method</TableHeader>\n *       <TableHeader className=\"text-right\">Amount</TableHeader>\n *     </TableRow>\n *   </TableHead>\n *   <TableBody>\n *     {invoices.map((invoice) => (\n *       <TableRow key={invoice.invoice}>\n *         <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *         <TableCell>{invoice.paymentStatus}</TableCell>\n *         <TableCell>{invoice.paymentMethod}</TableCell>\n *         <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *       </TableRow>\n *     ))}\n *   </TableBody>\n *   <TableFoot>\n *     <TableRow>\n *       <TableCell colSpan={3}>Total</TableCell>\n *       <TableCell className=\"text-right\">$2,500.00</TableCell>\n *     </TableRow>\n *   </TableFoot>\n * </Table>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table\n */\nconst Table = forwardRef<ComponentRef<\"table\">, ComponentProps<\"table\">>(\n\t({ children, className, style, ...props }, ref) => {\n\t\tconst horizontalOverflow =\n\t\t\tuseHorizontalOverflowObserver<ComponentRef<\"div\">>();\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/table scrollbar overflow-auto rounded-lg border border-gray-300 bg-white dark:bg-gray-100 relative\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-sticky-active={\n\t\t\t\t\t(horizontalOverflow.state.hasOverflow &&\n\t\t\t\t\t\t!horizontalOverflow.state.scrolledToEnd) ||\n\t\t\t\t\tundefined\n\t\t\t\t}\n\t\t\t\tdata-x-overflow={horizontalOverflow.state.hasOverflow}\n\t\t\t\tdata-x-scroll-end={\n\t\t\t\t\thorizontalOverflow.state.hasOverflow &&\n\t\t\t\t\thorizontalOverflow.state.scrolledToEnd\n\t\t\t\t}\n\t\t\t\tref={horizontalOverflow.ref}\n\t\t\t>\n\t\t\t\t<table\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName=\"table-auto border-separate caption-bottom border-spacing-0 w-full text-left\"\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t);\n\t},\n);\nTable.displayName = \"Table\";\n\n/**\n * The `<TableHead>` is a container for the table's column headers.\n * Encapsulates a set of `<TableRow>`s, indicating that they comprise the head\n * of a table with information about the table's columns. This is usually in the\n * form of column headers (`<TableHeader>`).\n *\n * Must be used as a child of a `<Table>`. It should only come after any\n * `<TableCaption>` or `<colgroup>` and before any `<TableBody>` or `<TableFoot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<TableRow>`\n *\n * @example\n * ```tsx\n * <Table>\n *   <TableCaption>A list of your recent invoices.</TableCaption>\n *   <TableHead>\n *     <TableRow>\n *       <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *       <TableHeader>Status</TableHeader>\n *       <TableHeader>Method</TableHeader>\n *       <TableHeader className=\"text-right\">Amount</TableHeader>\n *     </TableRow>\n *   </TableHead>\n *   <TableBody>\n *     {invoices.map((invoice) => (\n *       <TableRow key={invoice.invoice}>\n *         <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *         <TableCell>{invoice.paymentStatus}</TableCell>\n *         <TableCell>{invoice.paymentMethod}</TableCell>\n *         <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *       </TableRow>\n *     ))}\n *   </TableBody>\n *   <TableFoot>\n *     <TableRow>\n *       <TableCell colSpan={3}>Total</TableCell>\n *       <TableCell className=\"text-right\">$2,500.00</TableCell>\n *     </TableRow>\n *   </TableFoot>\n * </Table>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-header\n */\nconst TableHead = forwardRef<ComponentRef<\"thead\">, ComponentProps<\"thead\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<thead\n\t\t\tref={ref}\n\t\t\tclassName={cx(\"text-strong bg-base [&_tr]:border-b\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</thead>\n\t),\n);\nTableHead.displayName = \"TableHead\";\n\n/**\n * The `<TableBody>` encapsulates a set of `<TableRow>`s, indicating that they\n * comprise the body of a table's (main) data.\n *\n * Must be used as a child of a `<Table>` and only come after any\n * `<TableCaption>`, `<colgroup>`, or `<TableHead>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<TableRow>`\n *\n * @example\n * ```tsx\n * <Table>\n *   <TableCaption>A list of your recent invoices.</TableCaption>\n *   <TableHead>\n *     <TableRow>\n *       <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *       <TableHeader>Status</TableHeader>\n *       <TableHeader>Method</TableHeader>\n *       <TableHeader className=\"text-right\">Amount</TableHeader>\n *     </TableRow>\n *   </TableHead>\n *   <TableBody>\n *     {invoices.map((invoice) => (\n *       <TableRow key={invoice.invoice}>\n *         <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *         <TableCell>{invoice.paymentStatus}</TableCell>\n *         <TableCell>{invoice.paymentMethod}</TableCell>\n *         <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *       </TableRow>\n *     ))}\n *   </TableBody>\n *   <TableFoot>\n *     <TableRow>\n *       <TableCell colSpan={3}>Total</TableCell>\n *       <TableCell className=\"text-right\">$2,500.00</TableCell>\n *     </TableRow>\n *   </TableFoot>\n * </Table>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-body\n */\nconst TableBody = forwardRef<ComponentRef<\"tbody\">, ComponentProps<\"tbody\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tbody className={cx(\"text-body\", className)} ref={ref} {...props}>\n\t\t\t{children}\n\t\t</tbody>\n\t),\n);\nTableBody.displayName = \"TableBody\";\n\n/**\n * The `<TableFoot>` encapsulates a set of `<TableRow>`s, indicating that they\n * comprise the foot of a table with information about the table's columns. This\n * is usually a summary of the columns, e.g., a sum of the given numbers in a\n * column.\n *\n * Must be used as a child of a `<Table>` and only come after any\n * `<TableCaption>`, `<colgroup>`, `<TableHead>`, and `<TableBody>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<TableRow>` elements\n *\n * @example\n * ```tsx\n * <Table>\n *   <TableCaption>A list of your recent invoices.</TableCaption>\n *   <TableHead>\n *     <TableRow>\n *       <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *       <TableHeader>Status</TableHeader>\n *       <TableHeader>Method</TableHeader>\n *       <TableHeader className=\"text-right\">Amount</TableHeader>\n *     </TableRow>\n *   </TableHead>\n *   <TableBody>\n *     {invoices.map((invoice) => (\n *       <TableRow key={invoice.invoice}>\n *         <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *         <TableCell>{invoice.paymentStatus}</TableCell>\n *         <TableCell>{invoice.paymentMethod}</TableCell>\n *         <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *       </TableRow>\n *     ))}\n *   </TableBody>\n *   <TableFoot>\n *     <TableRow>\n *       <TableCell colSpan={3}>Total</TableCell>\n *       <TableCell className=\"text-right\">$2,500.00</TableCell>\n *     </TableRow>\n *   </TableFoot>\n * </Table>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-foot\n */\nconst TableFoot = forwardRef<ComponentRef<\"tfoot\">, ComponentProps<\"tfoot\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tfoot\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-gray-50/50 font-medium [&>tr:first-child>td]:border-t text-body\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tfoot>\n\t),\n);\nTableFoot.displayName = \"TableFoot\";\n\n/**\n * The `<TableRow>` defines a row of cells in a table. The row's cells can then\n * be established using a mix of `<TableCell>` and `<TableHeader>` components.\n *\n * Must be used as a child of a `<TableHead>`, `<TableBody>`, or `<TableFoot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<TableHeader>` or `<TableCell>`\n *\n * @example\n * ```tsx\n * <Table>\n *   <TableCaption>A list of your recent invoices.</TableCaption>\n *   <TableHead>\n *     <TableRow>\n *       <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *       <TableHeader>Status</TableHeader>\n *       <TableHeader>Method</TableHeader>\n *       <TableHeader className=\"text-right\">Amount</TableHeader>\n *     </TableRow>\n *   </TableHead>\n *   <TableBody>\n *     {invoices.map((invoice) => (\n *       <TableRow key={invoice.invoice}>\n *         <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *         <TableCell>{invoice.paymentStatus}</TableCell>\n *         <TableCell>{invoice.paymentMethod}</TableCell>\n *         <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *       </TableRow>\n *     ))}\n *   </TableBody>\n *   <TableFoot>\n *     <TableRow>\n *       <TableCell colSpan={3}>Total</TableCell>\n *       <TableCell className=\"text-right\">$2,500.00</TableCell>\n *     </TableRow>\n *   </TableFoot>\n * </Table>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-row\n */\nconst TableRow = forwardRef<ComponentRef<\"tr\">, ComponentProps<\"tr\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tr\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t// \"data-state-selected:bg-gray-200\",\n\t\t\t\t\"[&>td]:border-b [&>td]:border-gray-300 [&>td]:last:border-b-0 [&>td]:bg-card [&>td]:hover:bg-card-hover\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tr>\n\t),\n);\nTableRow.displayName = \"TableRow\";\n\n/**\n * The `<TableHeader>` defines a cell as the header of a group of table cells\n * and may be used as a child of a `<TableRow>`. The exact nature of this group\n * is defined by the scope and headers attributes.\n *\n * Must be used as a child of a `<TableRow>`.\n *\n * Permitted Content:\n * 1. Flow content, but with no header, footer, sectioning content, or heading\n * content descendants.\n *\n * @example\n * ```tsx\n * <Table>\n *   <TableCaption>A list of your recent invoices.</TableCaption>\n *   <TableHead>\n *     <TableRow>\n *       <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *       <TableHeader>Status</TableHeader>\n *       <TableHeader>Method</TableHeader>\n *       <TableHeader className=\"text-right\">Amount</TableHeader>\n *     </TableRow>\n *   </TableHead>\n *   <TableBody>\n *     {invoices.map((invoice) => (\n *       <TableRow key={invoice.invoice}>\n *         <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *         <TableCell>{invoice.paymentStatus}</TableCell>\n *         <TableCell>{invoice.paymentMethod}</TableCell>\n *         <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *       </TableRow>\n *     ))}\n *   </TableBody>\n *   <TableFoot>\n *     <TableRow>\n *       <TableCell colSpan={3}>Total</TableCell>\n *       <TableCell className=\"text-right\">$2,500.00</TableCell>\n *     </TableRow>\n *   </TableFoot>\n * </Table>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-header\n */\nconst TableHeader = forwardRef<ComponentRef<\"th\">, ComponentProps<\"th\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<th\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"h-12 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</th>\n\t),\n);\nTableHead.displayName = \"TableHead\";\n\n/**\n * The `<TableCell>` defines a cell of a table that contains data and may be\n * used as a child of a `<TableRow>`.\n *\n * Must be used as a child of a `<TableRow>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <Table>\n *   <TableCaption>A list of your recent invoices.</TableCaption>\n *   <TableHead>\n *     <TableRow>\n *       <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *       <TableHeader>Status</TableHeader>\n *       <TableHeader>Method</TableHeader>\n *       <TableHeader className=\"text-right\">Amount</TableHeader>\n *     </TableRow>\n *   </TableHead>\n *   <TableBody>\n *     {invoices.map((invoice) => (\n *       <TableRow key={invoice.invoice}>\n *         <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *         <TableCell>{invoice.paymentStatus}</TableCell>\n *         <TableCell>{invoice.paymentMethod}</TableCell>\n *         <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *       </TableRow>\n *     ))}\n *   </TableBody>\n *   <TableFoot>\n *     <TableRow>\n *       <TableCell colSpan={3}>Total</TableCell>\n *       <TableCell className=\"text-right\">$2,500.00</TableCell>\n *     </TableRow>\n *   </TableFoot>\n * </Table>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-cell\n */\nconst TableCell = forwardRef<ComponentRef<\"td\">, ComponentProps<\"td\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<td\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"p-4 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-size-mono\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</td>\n\t),\n);\nTableCell.displayName = \"TableCell\";\n\n/**\n * The optional `<TableCaption>` specifies the caption (or title) of a table,\n * providing the table an accessible description.\n *\n * If used, must be the first child of a `<Table>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <Table>\n *   <TableCaption>A list of your recent invoices.</TableCaption>\n *   <TableHead>\n *     <TableRow>\n *       <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *       <TableHeader>Status</TableHeader>\n *       <TableHeader>Method</TableHeader>\n *       <TableHeader className=\"text-right\">Amount</TableHeader>\n *     </TableRow>\n *   </TableHead>\n *   <TableBody>\n *     {invoices.map((invoice) => (\n *       <TableRow key={invoice.invoice}>\n *         <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *         <TableCell>{invoice.paymentStatus}</TableCell>\n *         <TableCell>{invoice.paymentMethod}</TableCell>\n *         <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *       </TableRow>\n *     ))}\n *   </TableBody>\n *   <TableFoot>\n *     <TableRow>\n *       <TableCell colSpan={3}>Total</TableCell>\n *       <TableCell className=\"text-right\">$2,500.00</TableCell>\n *     </TableRow>\n *   </TableFoot>\n * </Table>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-caption\n */\nconst TableCaption = forwardRef<\n\tComponentRef<\"caption\">,\n\tComponentProps<\"caption\">\n>(({ children, className, ...props }, ref) => (\n\t<caption\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"border-t border-gray-300 py-4 text-sm text-gray-500\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</caption>\n));\nTableCaption.displayName = \"TableCaption\";\n\nexport {\n\t//,\n\tTable,\n\tTableBody,\n\tTableCaption,\n\tTableCell,\n\tTableFoot,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n};\n\n/**\n * A custom hook that observes the horizontal overflow of an element and determines\n * if it has overflow and if it is scrolled to the end.\n *\n * @private\n */\nfunction useHorizontalOverflowObserver<T extends HTMLElement>() {\n\tconst ref = useRef<T | null>(null);\n\tconst [state, setState] = useState({\n\t\thasOverflow: false,\n\t\tscrolledToEnd: false,\n\t});\n\n\tuseEffect(() => {\n\t\tconst element = ref.current;\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst checkState = () => {\n\t\t\tconst hasOverflow = element.scrollWidth > element.clientWidth;\n\t\t\tconst scrolledToEnd =\n\t\t\t\tMath.abs(\n\t\t\t\t\telement.scrollWidth - element.scrollLeft - element.clientWidth,\n\t\t\t\t) < 1;\n\n\t\t\tsetState((previous) => {\n\t\t\t\tif (\n\t\t\t\t\tprevious.hasOverflow !== hasOverflow ||\n\t\t\t\t\tprevious.scrolledToEnd !== scrolledToEnd\n\t\t\t\t) {\n\t\t\t\t\treturn { hasOverflow, scrolledToEnd };\n\t\t\t\t}\n\t\t\t\treturn previous; // No state change\n\t\t\t});\n\t\t};\n\n\t\tconst resizeObserver = new ResizeObserver(checkState);\n\t\tresizeObserver.observe(element);\n\n\t\tconst mutationObserver = new MutationObserver(checkState);\n\t\tmutationObserver.observe(element, { childList: true, subtree: true });\n\n\t\telement.addEventListener(\"scroll\", checkState, { passive: true });\n\n\t\tcheckState();\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver.disconnect();\n\t\t\telement.removeEventListener(\"scroll\", checkState);\n\t\t};\n\t}, []);\n\n\treturn useMemo(() => ({ ref, state }), [state]);\n}\n"],"mappings":"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","names":["forwardRef","useEffect","useMemo","useRef","useState","jsx","Table","forwardRef","children","className","style","props","ref","horizontalOverflow","useHorizontalOverflowObserver","cx","TableHead","TableBody","TableFoot","TableRow","TableHeader","TableCell","TableCaption","useHorizontalOverflowObserver","ref","useRef","state","setState","useState","useEffect","element","checkState","hasOverflow","scrolledToEnd","previous","resizeObserver","mutationObserver","useMemo"]}

package/dist/data-table.d.ts

@@ -1,14 +1,41 @@
-import { HeaderContext } from '@tanstack/react-table';
+import { Table as Table$1, HeaderContext, Row } from '@tanstack/react-table';
 export * from '@tanstack/react-table';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ComponentProps, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { k as SortingMode } from './direction-veAOo2is.js';
-import { TableHeader } from './table.js';
+import { B as Button } from './button-C8eGiHOm.js';
+import { Table, TableCell, TableRow, TableHead, TableHeader } from './table.js';
+import './deep-non-nullable-SmpSvoSd.js';
+import 'class-variance-authority';
+import 'class-variance-authority/types';
+import './variant-props-oDo2u-We.js';
 
 declare const sortDirections: readonly ["asc", "desc", "unsorted"];
 type SortDirection = (typeof sortDirections)[number];
 
-type DataTableColumnHeaderProps<TData, TValue> = ComponentProps<typeof TableHeader> & Pick<HeaderContext<TData, TValue>, "column"> & {
+type DataTableProps<TData> = ComponentProps<typeof Table> & {
+    table: Table$1<TData>;
+};
+declare function DataTable<TData>({ children, table, ...props }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+type DataTableHeaderSortButtonProps<TData, TValue> = Omit<ComponentProps<typeof Button>, "icon"> & Pick<HeaderContext<TData, TValue>, "column"> & ({
+    /**
+     * Disable sorting for this column.
+     * It will prevent the sorting direction from being toggled and any icon
+     * from being shown.
+     */
+    disableSorting: true;
+    /**
+     * Use this to render a custom sort icon for the column if it is sortable
+     * and you want to override the default sort icon
+     */
+    sortIcon?: undefined;
+    /**
+     * The sorting mode of the column, whether it is alphanumeric or time based.
+     */
+    sortingMode?: undefined;
+} | {
+    disableSorting?: false;
     /**
      * Use this to render a custom sort icon for the column if it is sortable
      * and you want to override the default sort icon
@@ -18,10 +45,10 @@ type DataTableColumnHeaderProps<TData, TValue> = ComponentProps<typeof TableHead
      * The sorting mode of the column, whether it is alphanumeric or time based.
      */
     sortingMode: SortingMode;
-};
+});
 /**
- * The header for a column in a data table.
- * If the column is sortable, clicking the header will toggle the sorting
+ * A sortable button toggle for a column header in a data table.
+ * If the column is sortable, clicking the button will toggle the sorting
  * direction.
  *
  * @example
@@ -38,6 +65,24 @@ type DataTableColumnHeaderProps<TData, TValue> = ComponentProps<typeof TableHead
  *   unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...
  * ```
  */
-declare function DataTableHeader<TData, TValue>({ children, className, column, sortIcon: propsSortIcon, sortingMode, ...props }: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function DataTableHeaderSortButton<TData, TValue>({ children, className, column, disableSorting, iconPlacement, sortingMode, sortIcon: propSortIcon, onClick, ...props }: DataTableHeaderSortButtonProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+type DataTableHeaderProps = ComponentProps<typeof TableHeader>;
+/**
+ * A header for a data table.
+ * This is typically used to wrap the `DataTableHeaderSortButton` component.
+ */
+declare function DataTableHeader<TData, TValue>({ children, className, ...props }: DataTableHeaderProps): react_jsx_runtime.JSX.Element;
+declare const DataTableBody: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
+type DataTableHeadProps = Omit<ComponentProps<typeof TableHead>, "children">;
+declare function DataTableHead<TData>(props: DataTableHeadProps): react_jsx_runtime.JSX.Element;
+declare function DataTableRows<TData>(): react_jsx_runtime.JSX.Element;
+type DataTableRowProps<TData> = Omit<ComponentProps<typeof TableRow>, "children"> & {
+    row: Row<TData>;
+};
+declare function DataTableRow<TData>({ row, ...props }: DataTableRowProps<TData>): react_jsx_runtime.JSX.Element;
+type DataTableEmptyRowProps = ComponentProps<typeof TableRow>;
+declare function DataTableEmptyRow<TData>({ children, ...props }: DataTableEmptyRowProps): react_jsx_runtime.JSX.Element;
+type DataTableActionCellProps = ComponentProps<typeof TableCell>;
+declare function DataTableActionCell({ children, className, ...props }: DataTableActionCellProps): react_jsx_runtime.JSX.Element;
 
-export { DataTableHeader };
+export { DataTable, DataTableActionCell, DataTableBody, DataTableEmptyRow, DataTableHead, DataTableHeader, DataTableHeaderSortButton, DataTableRow, DataTableRows };

package/dist/data-table.js

@@ -1,2 +1,2 @@
-import{f}from"./chunk-YAT4IMMN.js";import{a as S}from"./chunk-FHW7SSNY.js";import"./chunk-GYPSB3OK.js";import{b as p}from"./chunk-J3NVDJIE.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-7O36LG52.js";import"./chunk-HDPLH5HC.js";import{a as u}from"./chunk-AZ56JGNY.js";export*from"@tanstack/react-table";var D=["unsorted","asc","desc"],T=["unsorted","desc","asc"];function g(t,r){return y(r==="alphanumeric"?D:T,t)??"unsorted"}function y(t,r,e){if(t.length===0)return e;let o=t.findIndex(s=>s===r);if(o===-1)return e;let n=(o+1)%t.length;return t.at(n)??e}import{jsx as a,jsxs as m}from"react/jsx-runtime";function x({children:t,className:r,column:e,sortIcon:o,sortingMode:n,...s}){let c=e.getIsSorted(),d=e.getCanSort(),i=d&&typeof c=="string"?c:"unsorted",l=o?.(i)??a(I,{mode:n,direction:i});return a(f,{className:u("px-0",r),...s,children:m(p,{className:"flex justify-start w-full h-full rounded-none",type:"button",appearance:"ghost",priority:"neutral",iconPlacement:"end","data-sort-direction":i,icon:l,onClick:()=>{d&&C(e,n)},children:[i!=="unsorted"&&m("span",{className:"sr-only",children:["Sorted in ",i==="asc"?"ascending":"descending"," ","order"]}),t]})})}function I({direction:t,mode:r,...e}){return t==="unsorted"?null:a(S,{mode:r,direction:t,...e})}function C(t,r){if(!t.getCanSort())return;let e=t.getIsSorted();switch(g(typeof e=="string"?e:"unsorted",r)){case"unsorted":t.clearSorting();return;case"asc":t.toggleSorting(!1);return;case"desc":t.toggleSorting(!0);return;default:return}}export{x as DataTableHeader};
+import{a as g,b as S,c as C,e as c,f as d,g as T}from"./chunk-DD3VIOV5.js";import{a as y}from"./chunk-FHW7SSNY.js";import{m as f}from"./chunk-GYPSB3OK.js";import{b as m}from"./chunk-J3NVDJIE.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-7O36LG52.js";import"./chunk-HDPLH5HC.js";import{a as l}from"./chunk-AZ56JGNY.js";export*from"@tanstack/react-table";import{flexRender as w}from"@tanstack/react-table";import{Fragment as R,createContext as A,useContext as M,useMemo as j}from"react";import E from"tiny-invariant";var k=["unsorted","asc","desc"],O=["unsorted","desc","asc"];function x(t,a){return V(a==="alphanumeric"?k:O,t)??"unsorted"}function V(t,a,e){if(t.length===0)return e;let n=t.findIndex(r=>r===a);if(n===-1)return e;let s=(n+1)%t.length;return t.at(s)??e}import{Fragment as U,jsx as o,jsxs as P}from"react/jsx-runtime";var h=A(null);function u(){let t=M(h);return E(t,"useDataTableContext should only be used within a DataTable child component"),t}function F({children:t,table:a,...e}){let n=j(()=>({table:a}),[a]);return o(h.Provider,{value:n,children:o(g,{...e,children:t})})}function z({children:t,className:a,column:e,disableSorting:n=!1,iconPlacement:s="end",sortingMode:r,sortIcon:N,onClick:B,...v}){let D=e.getIsSorted(),p=!n&&e.getCanSort(),i=p&&typeof D=="string"?D:"unsorted",_=N?.(i)??o(K,{mode:r,direction:i});return P(m,{appearance:"ghost",className:l("flex justify-start w-full h-full rounded-none",a),"data-sort-direction":i,"data-table-header-action":!0,icon:_,iconPlacement:s,onClick:b=>{B?.(b),!b.defaultPrevented&&(!p||n||typeof r>"u"||Q(e,r))},priority:"neutral",type:"button",...v,children:[p&&i!=="unsorted"&&P("span",{className:"sr-only",children:["Column sorted in"," ",r==="alphanumeric"?i==="asc"?"ascending":"descending":f(i)," ","order"]}),t]})}function L({children:t,className:a,...e}){return o(d,{className:l("has-[[data-table-header-action]]:px-0",a),...e,children:t})}var H=C;H.displayName="DataTableBody";function $(t){let{table:a}=u();return o(S,{...t,children:a.getHeaderGroups().map(e=>o(c,{children:e.headers.map(n=>o(R,{children:n.isPlaceholder?o(d,{},n.id):w(n.column.columnDef.header,n.getContext())},n.id))},e.id))})}function q(){let{table:t}=u(),a=t.getRowModel().rows;return o(U,{children:a.map(e=>o(I,{row:e},e.id))})}function I({row:t,...a}){return o(c,{...a,children:t.getVisibleCells().map(e=>o(R,{children:w(e.column.columnDef.cell,e.getContext())},e.id))})}function G({children:t,...a}){let{table:e}=u(),n=e.getAllColumns().length;return o(c,{...a,children:o(T,{colSpan:n,children:t})})}function J({children:t,className:a,...e}){return o(T,{className:l("sticky z-10 right-0 top-px -bottom-px group-data-[sticky-active]/table:[box-shadow:inset_10px_0_8px_-8px_hsl(0deg_0%_0%_/_15%)]",a),...e,children:o("div",{className:"flex justify-end",children:t})})}function K({direction:t,mode:a,...e}){return t==="unsorted"||!a||!t?o("svg",{"aria-hidden":!0,...e}):o(y,{mode:a,direction:t,...e})}function Q(t,a){if(!t.getCanSort())return;let e=t.getIsSorted();switch(x(typeof e=="string"?e:"unsorted",a)){case"unsorted":t.clearSorting();return;case"asc":t.toggleSorting(!1);return;case"desc":t.toggleSorting(!0);return;default:return}}export{F as DataTable,J as DataTableActionCell,H as DataTableBody,G as DataTableEmptyRow,$ as DataTableHead,L as DataTableHeader,z as DataTableHeaderSortButton,I as DataTableRow,q as DataTableRows};
 //# sourceMappingURL=data-table.js.map

package/dist/data-table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/data-table/index.ts","../src/components/data-table/helpers.ts","../src/components/data-table/data-table.tsx"],"sourcesContent":["export * from \"@tanstack/react-table\";\n\nexport {\n\t//,\n\tDataTableHeader,\n} from \"./data-table.js\";\n","import type { SortingMode } from \"../../utils/sorting/direction.js\";\nimport type { SortDirection } from \"./types.js\";\n\nconst alphanumericSortingOrder = [\n\t\"unsorted\",\n\t\"asc\",\n\t\"desc\",\n] as const satisfies SortDirection[];\n\nconst timeSortingOrder = [\n\t\"unsorted\",\n\t\"desc\",\n\t\"asc\",\n] as const satisfies SortDirection[];\n\n/**\n * Get the next sort direction based on the current sort direction and sorting mode.\n */\nfunction getNextSortDirection(\n\tcurrentSortDirection: SortDirection,\n\tsortingMode: SortingMode,\n) {\n\tconst sortOrder =\n\t\tsortingMode === \"alphanumeric\"\n\t\t\t? alphanumericSortingOrder\n\t\t\t: timeSortingOrder;\n\n\treturn getNextInCircularList(sortOrder, currentSortDirection) ?? \"unsorted\";\n}\n\n/**\n * Get the next item in a circular list.\n * If the current item is not found in the list (or it's empty), return the fallback value.\n */\nfunction getNextInCircularList<T>(\n\tlist: T[],\n\tcurrentItem: T,\n\tfallback?: T | undefined,\n) {\n\tif (list.length === 0) {\n\t\treturn fallback;\n\t}\n\n\tconst currentItemIndex = list.findIndex((item) => item === currentItem);\n\tif (currentItemIndex === -1) {\n\t\treturn fallback;\n\t}\n\n\tconst nextIndex = (currentItemIndex + 1) % list.length;\n\treturn list.at(nextIndex) ?? fallback;\n}\n\nexport {\n\t//,\n\tgetNextSortDirection,\n\tgetNextInCircularList,\n};\n","import type { Column, HeaderContext } from \"@tanstack/react-table\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport {\n\ttype SortingMode,\n\tsortingDirections as baseSortingDirections,\n} from \"../../utils/sorting/direction.js\";\nimport { Button } from \"../button/button.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Sort } from \"../icons/sort.js\";\nimport { TableHeader } from \"../table/table.js\";\nimport { getNextSortDirection } from \"./helpers.js\";\nimport type { SortDirection } from \"./types.js\";\n\ntype DataTableColumnHeaderProps<TData, TValue> = ComponentProps<\n\ttypeof TableHeader\n> &\n\tPick<HeaderContext<TData, TValue>, \"column\"> & {\n\t\t/**\n\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t * and you want to override the default sort icon\n\t\t */\n\t\tsortIcon?: (sortDirection: SortDirection) => ReactNode;\n\t\t/**\n\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t */\n\t\tsortingMode: SortingMode;\n\t};\n\n/**\n * The header for a column in a data table.\n * If the column is sortable, clicking the header will toggle the sorting\n * direction.\n *\n * @example\n * ```md\n * Each click cycles through...\n *\n * For alphanumeric sorting:\n *   unsorted ➡️ ascending ➡️ descending ➡️ unsorted ➡️ ...\n *\n * For time sorting:\n *   unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted ➡️ ...\n *\n *   this is equivalent to the inverse of alphanumeric sorting, or\n *   unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...\n * ```\n */\nfunction DataTableHeader<TData, TValue>({\n\tchildren,\n\tclassName,\n\tcolumn,\n\tsortIcon: propsSortIcon,\n\tsortingMode,\n\t...props\n}: DataTableColumnHeaderProps<TData, TValue>) {\n\tconst _sortDirection = column.getIsSorted();\n\tconst canSort = column.getCanSort();\n\n\tconst sortDirection: SortDirection =\n\t\tcanSort && typeof _sortDirection === \"string\" ? _sortDirection : \"unsorted\";\n\n\tconst sortIcon = propsSortIcon?.(sortDirection) ?? (\n\t\t<DefaultSortIcon mode={sortingMode} direction={sortDirection} />\n\t);\n\n\treturn (\n\t\t<TableHeader className={cx(\"px-0\", className)} {...props}>\n\t\t\t<Button\n\t\t\t\tclassName=\"flex justify-start w-full h-full rounded-none\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tappearance=\"ghost\"\n\t\t\t\tpriority=\"neutral\"\n\t\t\t\ticonPlacement=\"end\"\n\t\t\t\tdata-sort-direction={sortDirection}\n\t\t\t\ticon={sortIcon}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tif (!canSort) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\ttoggleNextSortingDirection(column, sortingMode);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{sortDirection !== \"unsorted\" && (\n\t\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\t\tSorted in {sortDirection === \"asc\" ? \"ascending\" : \"descending\"}{\" \"}\n\t\t\t\t\t\torder\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{children}\n\t\t\t</Button>\n\t\t</TableHeader>\n\t);\n}\n\nexport {\n\t//,\n\tDataTableHeader,\n};\n\ntype DefaultSortIconProps = SvgAttributes & {\n\tdirection: SortDirection;\n\tmode: SortingMode;\n};\n\nfunction DefaultSortIcon({ direction, mode, ...props }: DefaultSortIconProps) {\n\tif (direction === \"unsorted\") {\n\t\treturn null;\n\t}\n\n\treturn <Sort mode={mode} direction={direction} {...props} />;\n}\n\n/**\n * Toggle the sorting direction of a column.\n * This ordering is typically toggled by clicking the column header.\n *\n * @example\n * ```md\n * Each click cycles through...\n *\n * For alphanumeric sorting:\n *   unsorted ➡️ ascending ➡️ descending ➡️ unsorted ➡️ ...\n *\n * For time sorting:\n *   unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted ➡️ ...\n *\n *   this is equivalent to the inverse of alphanumeric sorting, or\n *   unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...\n * ```\n */\nfunction toggleNextSortingDirection<TData, TValue>(\n\tcolumn: Column<TData, TValue>,\n\tsortingMode: SortingMode,\n) {\n\tif (!column.getCanSort()) {\n\t\treturn;\n\t}\n\n\tconst sortDirection = column.getIsSorted();\n\tconst currentSortDirection: SortDirection =\n\t\ttypeof sortDirection === \"string\" ? sortDirection : \"unsorted\";\n\n\tconst nextSortDirection = getNextSortDirection(\n\t\tcurrentSortDirection,\n\t\tsortingMode,\n\t);\n\n\tswitch (nextSortDirection) {\n\t\tcase \"unsorted\":\n\t\t\tcolumn.clearSorting();\n\t\t\treturn;\n\t\tcase \"asc\":\n\t\t\tcolumn.toggleSorting(false);\n\t\t\treturn;\n\t\tcase \"desc\":\n\t\t\tcolumn.toggleSorting(true);\n\t\t\treturn;\n\t\tdefault:\n\t\t\treturn;\n\t}\n}\n"],"mappings":"mUAAA,WAAc,wBCGd,IAAMA,EAA2B,CAChC,WACA,MACA,MACD,EAEMC,EAAmB,CACxB,WACA,OACA,KACD,EAKA,SAASC,EACRC,EACAC,EACC,CAMD,OAAOC,EAJND,IAAgB,eACbJ,EACAC,EAEoCE,CAAoB,GAAK,UAClE,CAMA,SAASE,EACRC,EACAC,EACAC,EACC,CACD,GAAIF,EAAK,SAAW,EACnB,OAAOE,EAGR,IAAMC,EAAmBH,EAAK,UAAWI,GAASA,IAASH,CAAW,EACtE,GAAIE,IAAqB,GACxB,OAAOD,EAGR,IAAMG,GAAaF,EAAmB,GAAKH,EAAK,OAChD,OAAOA,EAAK,GAAGK,CAAS,GAAKH,CAC9B,CCaE,cAAAI,EAqBG,QAAAC,MArBH,oBAfF,SAASC,EAA+B,CACvC,SAAAC,EACA,UAAAC,EACA,OAAAC,EACA,SAAUC,EACV,YAAAC,EACA,GAAGC,CACJ,EAA8C,CAC7C,IAAMC,EAAiBJ,EAAO,YAAY,EACpCK,EAAUL,EAAO,WAAW,EAE5BM,EACLD,GAAW,OAAOD,GAAmB,SAAWA,EAAiB,WAE5DG,EAAWN,IAAgBK,CAAa,GAC7CX,EAACa,EAAA,CAAgB,KAAMN,EAAa,UAAWI,EAAe,EAG/D,OACCX,EAACc,EAAA,CAAY,UAAWC,EAAG,OAAQX,CAAS,EAAI,GAAGI,EAClD,SAAAP,EAACe,EAAA,CACA,UAAU,gDACV,KAAK,SACL,WAAW,QACX,SAAS,UACT,cAAc,MACd,sBAAqBL,EACrB,KAAMC,EACN,QAAS,IAAM,CACTF,GAGLO,EAA2BZ,EAAQE,CAAW,CAC/C,EAEC,UAAAI,IAAkB,YAClBV,EAAC,QAAK,UAAU,UAAU,uBACdU,IAAkB,MAAQ,YAAc,aAAc,IAAI,SAEtE,EAEAR,GACF,EACD,CAEF,CAYA,SAASe,EAAgB,CAAE,UAAAC,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAyB,CAC7E,OAAIF,IAAc,WACV,KAGDG,EAACC,EAAA,CAAK,KAAMH,EAAM,UAAWD,EAAY,GAAGE,EAAO,CAC3D,CAoBA,SAASG,EACRC,EACAC,EACC,CACD,GAAI,CAACD,EAAO,WAAW,EACtB,OAGD,IAAME,EAAgBF,EAAO,YAAY,EASzC,OAL0BG,EAFzB,OAAOD,GAAkB,SAAWA,EAAgB,WAIpDD,CACD,EAE2B,CAC1B,IAAK,WACJD,EAAO,aAAa,EACpB,OACD,IAAK,MACJA,EAAO,cAAc,EAAK,EAC1B,OACD,IAAK,OACJA,EAAO,cAAc,EAAI,EACzB,OACD,QACC,MACF,CACD","names":["alphanumericSortingOrder","timeSortingOrder","getNextSortDirection","currentSortDirection","sortingMode","getNextInCircularList","list","currentItem","fallback","currentItemIndex","item","nextIndex","jsx","jsxs","DataTableHeader","children","className","column","propsSortIcon","sortingMode","props","_sortDirection","canSort","sortDirection","sortIcon","DefaultSortIcon","TableHeader","cx","Button","toggleNextSortingDirection","DefaultSortIcon","direction","mode","props","jsx","Sort","toggleNextSortingDirection","column","sortingMode","sortDirection","getNextSortDirection"]}
+{"version":3,"sources":["../src/components/data-table/index.ts","../src/components/data-table/data-table.tsx","../src/components/data-table/helpers.ts"],"sourcesContent":["export * from \"@tanstack/react-table\";\n\nexport {\n\t//,\n\tDataTable,\n\tDataTableActionCell,\n\tDataTableBody,\n\tDataTableEmptyRow,\n\tDataTableHead,\n\tDataTableHeader,\n\tDataTableHeaderSortButton,\n\tDataTableRow,\n\tDataTableRows,\n} from \"./data-table.js\";\n","import {\n\ttype Column,\n\ttype HeaderContext,\n\ttype Row,\n\ttype Table as TableInstance,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\tFragment,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport {\n\t$timeSortingDirection,\n\ttype SortingMode,\n\tsortingDirections as baseSortingDirections,\n} from \"../../utils/sorting/direction.js\";\nimport { Button } from \"../button/button.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Sort } from \"../icons/sort.js\";\nimport {\n\tTable,\n\tTableBody,\n\tTableCell,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"../table/table.js\";\nimport { getNextSortDirection } from \"./helpers.js\";\nimport type { SortDirection } from \"./types.js\";\n\ntype DataTableContextShape<TData = unknown> = {\n\ttable: TableInstance<TData>;\n};\n\nconst DataTableContext = createContext<DataTableContextShape<any> | null>(null);\n\n/**\n * @private\n */\nfunction useDataTableContext<TData>() {\n\tconst context = useContext(DataTableContext);\n\n\tinvariant(\n\t\tcontext,\n\t\t\"useDataTableContext should only be used within a DataTable child component\",\n\t);\n\n\treturn context as DataTableContextShape<TData>;\n}\n\ntype DataTableProps<TData> = ComponentProps<typeof Table> & {\n\ttable: TableInstance<TData>;\n};\n\nfunction DataTable<TData>({\n\tchildren,\n\ttable,\n\t...props\n}: DataTableProps<TData>) {\n\tconst context: DataTableContextShape<TData> = useMemo(\n\t\t() => ({ table }),\n\t\t[table],\n\t);\n\n\treturn (\n\t\t<DataTableContext.Provider value={context}>\n\t\t\t<Table {...props}>{children}</Table>\n\t\t</DataTableContext.Provider>\n\t);\n}\n\ntype DataTableHeaderSortButtonProps<TData, TValue> = Omit<\n\tComponentProps<typeof Button>,\n\t\"icon\"\n> &\n\tPick<HeaderContext<TData, TValue>, \"column\"> &\n\t(\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Disable sorting for this column.\n\t\t\t\t * It will prevent the sorting direction from being toggled and any icon\n\t\t\t\t * from being shown.\n\t\t\t\t */\n\t\t\t\tdisableSorting: true;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: undefined;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode?: undefined;\n\t\t  }\n\t\t| {\n\t\t\t\tdisableSorting?: false;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: (sortDirection: SortDirection) => ReactNode;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode: SortingMode;\n\t\t  }\n\t);\n\n/**\n * A sortable button toggle for a column header in a data table.\n * If the column is sortable, clicking the button will toggle the sorting\n * direction.\n *\n * @example\n * ```md\n * Each click cycles through...\n *\n * For alphanumeric sorting:\n *   unsorted ➡️ ascending ➡️ descending ➡️ unsorted ➡️ ...\n *\n * For time sorting:\n *   unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted ➡️ ...\n *\n *   this is equivalent to the inverse of alphanumeric sorting, or\n *   unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...\n * ```\n */\nfunction DataTableHeaderSortButton<TData, TValue>({\n\tchildren,\n\tclassName,\n\tcolumn,\n\tdisableSorting = false,\n\ticonPlacement = \"end\",\n\tsortingMode,\n\tsortIcon: propSortIcon,\n\tonClick,\n\t...props\n}: DataTableHeaderSortButtonProps<TData, TValue>) {\n\tconst _sortDirection = column.getIsSorted();\n\tconst canSort = !disableSorting && column.getCanSort();\n\n\tconst sortDirection: SortDirection =\n\t\tcanSort && typeof _sortDirection === \"string\" ? _sortDirection : \"unsorted\";\n\n\tconst sortIcon = propSortIcon?.(sortDirection) ?? (\n\t\t<DefaultSortIcon mode={sortingMode} direction={sortDirection} />\n\t);\n\n\treturn (\n\t\t<Button\n\t\t\tappearance=\"ghost\"\n\t\t\tclassName={cx(\"flex justify-start w-full h-full rounded-none\", className)}\n\t\t\tdata-sort-direction={sortDirection}\n\t\t\tdata-table-header-action\n\t\t\ticon={sortIcon}\n\t\t\ticonPlacement={iconPlacement}\n\t\t\tonClick={(event) => {\n\t\t\t\tonClick?.(event);\n\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (!canSort || disableSorting || typeof sortingMode === \"undefined\") {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\ttoggleNextSortingDirection(column, sortingMode);\n\t\t\t}}\n\t\t\tpriority=\"neutral\"\n\t\t\ttype=\"button\"\n\t\t\t{...props}\n\t\t>\n\t\t\t{canSort && sortDirection !== \"unsorted\" && (\n\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\tColumn sorted in{\" \"}\n\t\t\t\t\t{sortingMode === \"alphanumeric\"\n\t\t\t\t\t\t? sortDirection === \"asc\"\n\t\t\t\t\t\t\t? \"ascending\"\n\t\t\t\t\t\t\t: \"descending\"\n\t\t\t\t\t\t: $timeSortingDirection(sortDirection)}{\" \"}\n\t\t\t\t\torder\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{children}\n\t\t</Button>\n\t);\n}\n\ntype DataTableHeaderProps = ComponentProps<typeof TableHeader>;\n\n/**\n * A header for a data table.\n * This is typically used to wrap the `DataTableHeaderSortButton` component.\n */\nfunction DataTableHeader<TData, TValue>({\n\tchildren,\n\tclassName,\n\t...props\n}: DataTableHeaderProps) {\n\treturn (\n\t\t<TableHeader\n\t\t\tclassName={cx(\"has-[[data-table-header-action]]:px-0\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</TableHeader>\n\t);\n}\n\nconst DataTableBody = TableBody;\nDataTableBody.displayName = \"DataTableBody\";\n\ntype DataTableHeadProps = Omit<ComponentProps<typeof TableHead>, \"children\">;\n\nfunction DataTableHead<TData>(props: DataTableHeadProps) {\n\tconst { table } = useDataTableContext<TData>();\n\n\treturn (\n\t\t<TableHead {...props}>\n\t\t\t{table.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t<Fragment key={header.id}>\n\t\t\t\t\t\t\t{header.isPlaceholder ? (\n\t\t\t\t\t\t\t\t<TableHeader key={header.id} />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\tflexRender(header.column.columnDef.header, header.getContext())\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t))}\n\t\t\t\t</TableRow>\n\t\t\t))}\n\t\t</TableHead>\n\t);\n}\n\nfunction DataTableRows<TData>() {\n\tconst { table } = useDataTableContext<TData>();\n\tconst rows = table.getRowModel().rows;\n\n\treturn (\n\t\t<>\n\t\t\t{rows.map((row) => (\n\t\t\t\t<DataTableRow key={row.id} row={row} />\n\t\t\t))}\n\t\t</>\n\t);\n}\n\ntype DataTableRowProps<TData> = Omit<\n\tComponentProps<typeof TableRow>,\n\t\"children\"\n> & {\n\trow: Row<TData>;\n};\n\nfunction DataTableRow<TData>({ row, ...props }: DataTableRowProps<TData>) {\n\treturn (\n\t\t<TableRow {...props}>\n\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t<Fragment key={cell.id}>\n\t\t\t\t\t{flexRender(cell.column.columnDef.cell, cell.getContext())}\n\t\t\t\t</Fragment>\n\t\t\t))}\n\t\t</TableRow>\n\t);\n}\n\ntype DataTableEmptyRowProps = ComponentProps<typeof TableRow>;\n\nfunction DataTableEmptyRow<TData>({\n\tchildren,\n\t...props\n}: DataTableEmptyRowProps) {\n\tconst { table } = useDataTableContext<TData>();\n\tconst numberOfColumns = table.getAllColumns().length;\n\n\treturn (\n\t\t<TableRow {...props}>\n\t\t\t<TableCell colSpan={numberOfColumns}>{children}</TableCell>\n\t\t</TableRow>\n\t);\n}\n\ntype DataTableActionCellProps = ComponentProps<typeof TableCell>;\n\nfunction DataTableActionCell({\n\tchildren,\n\tclassName,\n\t...props\n}: DataTableActionCellProps) {\n\treturn (\n\t\t<TableCell\n\t\t\tclassName={cx(\n\t\t\t\t\"sticky z-10 right-0 top-px -bottom-px group-data-[sticky-active]/table:[box-shadow:inset_10px_0_8px_-8px_hsl(0deg_0%_0%_/_15%)]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"flex justify-end\">{children}</div>\n\t\t</TableCell>\n\t);\n}\n\nexport {\n\t//,\n\tDataTable,\n\tDataTableActionCell,\n\tDataTableBody,\n\tDataTableEmptyRow,\n\tDataTableHead,\n\tDataTableHeader,\n\tDataTableHeaderSortButton,\n\tDataTableRow,\n\tDataTableRows,\n};\n\ntype DefaultSortIconProps = SvgAttributes & {\n\tdirection: SortDirection | undefined;\n\tmode: SortingMode | undefined;\n};\n\nfunction DefaultSortIcon({ direction, mode, ...props }: DefaultSortIconProps) {\n\tif (direction === \"unsorted\" || !mode || !direction) {\n\t\treturn <svg aria-hidden {...props} />;\n\t}\n\n\treturn <Sort mode={mode} direction={direction} {...props} />;\n}\n\n/**\n * Toggle the sorting direction of a column.\n * This ordering is typically toggled by clicking the column header.\n *\n * @example\n * ```md\n * Each click cycles through...\n *\n * For alphanumeric sorting:\n *   unsorted ➡️ ascending ➡️ descending ➡️ unsorted ➡️ ...\n *\n * For time sorting:\n *   unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted ➡️ ...\n *\n *   this is equivalent to the inverse of alphanumeric sorting, or\n *   unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...\n * ```\n */\nfunction toggleNextSortingDirection<TData, TValue>(\n\tcolumn: Column<TData, TValue>,\n\tsortingMode: SortingMode,\n) {\n\tif (!column.getCanSort()) {\n\t\treturn;\n\t}\n\n\tconst sortDirection = column.getIsSorted();\n\tconst currentSortDirection: SortDirection =\n\t\ttypeof sortDirection === \"string\" ? sortDirection : \"unsorted\";\n\n\tconst nextSortDirection = getNextSortDirection(\n\t\tcurrentSortDirection,\n\t\tsortingMode,\n\t);\n\n\tswitch (nextSortDirection) {\n\t\tcase \"unsorted\":\n\t\t\tcolumn.clearSorting();\n\t\t\treturn;\n\t\tcase \"asc\":\n\t\t\tcolumn.toggleSorting(false);\n\t\t\treturn;\n\t\tcase \"desc\":\n\t\t\tcolumn.toggleSorting(true);\n\t\t\treturn;\n\t\tdefault:\n\t\t\treturn;\n\t}\n}\n","import type { SortingMode } from \"../../utils/sorting/direction.js\";\nimport type { SortDirection } from \"./types.js\";\n\nconst alphanumericSortingOrder = [\n\t\"unsorted\",\n\t\"asc\",\n\t\"desc\",\n] as const satisfies SortDirection[];\n\nconst timeSortingOrder = [\n\t\"unsorted\",\n\t\"desc\",\n\t\"asc\",\n] as const satisfies SortDirection[];\n\n/**\n * Get the next sort direction based on the current sort direction and sorting mode.\n */\nfunction getNextSortDirection(\n\tcurrentSortDirection: SortDirection,\n\tsortingMode: SortingMode,\n) {\n\tconst sortOrder =\n\t\tsortingMode === \"alphanumeric\"\n\t\t\t? alphanumericSortingOrder\n\t\t\t: timeSortingOrder;\n\n\treturn getNextInCircularList(sortOrder, currentSortDirection) ?? \"unsorted\";\n}\n\n/**\n * Get the next item in a circular list.\n * If the current item is not found in the list (or it's empty), return the fallback value.\n */\nfunction getNextInCircularList<T>(\n\tlist: T[],\n\tcurrentItem: T,\n\tfallback?: T | undefined,\n) {\n\tif (list.length === 0) {\n\t\treturn fallback;\n\t}\n\n\tconst currentItemIndex = list.findIndex((item) => item === currentItem);\n\tif (currentItemIndex === -1) {\n\t\treturn fallback;\n\t}\n\n\tconst nextIndex = (currentItemIndex + 1) % list.length;\n\treturn list.at(nextIndex) ?? fallback;\n}\n\nexport {\n\t//,\n\tgetNextSortDirection,\n\tgetNextInCircularList,\n};\n"],"mappings":"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","names":["flexRender","Fragment","createContext","useContext","useMemo","invariant","alphanumericSortingOrder","timeSortingOrder","getNextSortDirection","currentSortDirection","sortingMode","getNextInCircularList","list","currentItem","fallback","currentItemIndex","item","nextIndex","Fragment","jsx","jsxs","DataTableContext","createContext","useDataTableContext","context","useContext","invariant","DataTable","children","table","props","useMemo","Table","DataTableHeaderSortButton","className","column","disableSorting","iconPlacement","sortingMode","propSortIcon","onClick","_sortDirection","canSort","sortDirection","sortIcon","DefaultSortIcon","Button","cx","event","toggleNextSortingDirection","$timeSortingDirection","DataTableHeader","TableHeader","DataTableBody","TableBody","DataTableHead","TableHead","headerGroup","TableRow","header","flexRender","DataTableRows","rows","row","DataTableRow","cell","DataTableEmptyRow","numberOfColumns","TableCell","DataTableActionCell","DefaultSortIcon","direction","mode","props","jsx","Sort","toggleNextSortingDirection","column","sortingMode","sortDirection","getNextSortDirection"]}

package/dist/pagination.js

@@ -1,2 +1,2 @@
-import{a as b,c as v,d as x,e as y,g as h}from"./chunk-WGF5NYWL.js";import"./chunk-MF2QITTY.js";import{b as z}from"./chunk-UXH22BMO.js";import{a as d}from"./chunk-7XIZZ4HQ.js";import{a as l}from"./chunk-XBVAQ3DV.js";import"./chunk-J3NVDJIE.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-7O36LG52.js";import"./chunk-HDPLH5HC.js";import{a as p}from"./chunk-AZ56JGNY.js";import{CaretLeft as k}from"@phosphor-icons/react/CaretLeft";import{CaretRight as A}from"@phosphor-icons/react/CaretRight";import{Slot as E}from"@radix-ui/react-slot";import{createContext as F,forwardRef as m,useContext as N,useState as W}from"react";import P from"tiny-invariant";import{jsx as s,jsxs as f}from"react/jsx-runtime";var c=F(void 0),O=m(({className:n,children:e,defaultPageSize:a,...t},i)=>{let[o,r]=W(a);return s(c.Provider,{value:{defaultPageSize:a,pageSize:o,setPageSize:r},children:s("div",{className:p("inline-flex items-center justify-between gap-2",n),ref:i,...t,children:e})})});O.displayName="CursorPagination";var T=m(({hasNextPage:n,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>f(d,{appearance:"panel",ref:o,...i,children:[s(l,{appearance:"ghost",disabled:!e,icon:s(k,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(z,{orientation:"vertical",className:"min-h-5"}),s(l,{appearance:"ghost",disabled:!n,icon:s(A,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));T.displayName="CursorButtons";var $=[5,10,20,50,100],B=m(({className:n,pageSizes:e=$,onChangePageSize:a,...t},i)=>{let o=N(c);return P(o,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),P(e.includes(o.defaultPageSize),"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes"),P(e.includes(o.pageSize),"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes"),f(b,{defaultValue:`${o.pageSize}`,onChange:r=>{let g=Number.parseInt(r,10);Number.isNaN(g)&&(g=o.defaultPageSize),o.setPageSize(g),a?.(g)},children:[s(x,{ref:i,className:p("w-auto min-w-36",n),value:o.pageSize,...t,children:s(v,{})}),s(y,{width:"trigger",children:e.map(r=>f(h,{value:`${r}`,children:[r," per page"]},r))})]})});B.displayName="CursorPageSizeSelect";function D({asChild:n=!1,className:e,...a}){let t=N(c);return P(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),f(n?E:"span",{className:p("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}import{useEffect as V,useState as w}from"react";function H({listSize:n,pageSize:e}){let[a,t]=w(1),[i,o]=w(e);V(()=>{o(e),t(1)},[e]),V(()=>{t(1)},[n]);let r=Math.ceil(n/i),g=(a-1)*i,S=a>1,C=a<r;function M(u){let j=Math.max(1,Math.min(u,r));t(j)}function R(){C&&t(u=>Math.min(u+1,r))}function G(){S&&t(u=>Math.max(u-1,1))}function I(u){o(u),t(1)}function L(){t(r)}function U(){t(1)}return{currentPage:a,goToFirstPage:U,goToLastPage:L,goToPage:M,hasNextPage:C,hasPreviousPage:S,nextPage:R,offset:g,pageSize:i,previousPage:G,setPageSize:I,totalPages:r}}function q(n,e){return n.slice(e.offset,e.offset+e.pageSize)}export{T as CursorButtons,B as CursorPageSizeSelect,D as CursorPageSizeValue,O as CursorPagination,q as getOffsetPaginatedSlice,H as useOffsetPagination};
+import{a as b,c as v,d as x,e as y,g as h}from"./chunk-WGF5NYWL.js";import"./chunk-MF2QITTY.js";import{b as z}from"./chunk-UXH22BMO.js";import{a as d}from"./chunk-7XIZZ4HQ.js";import{a as l}from"./chunk-XBVAQ3DV.js";import"./chunk-J3NVDJIE.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-7O36LG52.js";import"./chunk-HDPLH5HC.js";import{a as p}from"./chunk-AZ56JGNY.js";import{CaretLeft as k}from"@phosphor-icons/react/CaretLeft";import{CaretRight as A}from"@phosphor-icons/react/CaretRight";import{Slot as E}from"@radix-ui/react-slot";import{createContext as F,forwardRef as m,useContext as N,useState as W}from"react";import P from"tiny-invariant";import{jsx as s,jsxs as f}from"react/jsx-runtime";var c=F(void 0),O=m(({className:n,children:e,defaultPageSize:a,...t},i)=>{let[o,r]=W(a);return s(c.Provider,{value:{defaultPageSize:a,pageSize:o,setPageSize:r},children:s("div",{className:p("inline-flex items-center justify-between gap-2",n),ref:i,...t,children:e})})});O.displayName="CursorPagination";var T=m(({hasNextPage:n,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>f(d,{appearance:"panel",ref:o,...i,children:[s(l,{appearance:"ghost",disabled:!e,icon:s(k,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(z,{orientation:"vertical",className:"min-h-5"}),s(l,{appearance:"ghost",disabled:!n,icon:s(A,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));T.displayName="CursorButtons";var $=[5,10,20,50,100],B=m(({className:n,pageSizes:e=$,onChangePageSize:a,...t},i)=>{let o=N(c);return P(o,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),P(e.includes(o.defaultPageSize),"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes"),P(e.includes(o.pageSize),"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes"),f(b,{defaultValue:`${o.pageSize}`,onValueChange:r=>{let g=Number.parseInt(r,10);Number.isNaN(g)&&(g=o.defaultPageSize),o.setPageSize(g),a?.(g)},children:[s(x,{ref:i,className:p("w-auto min-w-36",n),value:o.pageSize,...t,children:s(v,{})}),s(y,{width:"trigger",children:e.map(r=>f(h,{value:`${r}`,children:[r," per page"]},r))})]})});B.displayName="CursorPageSizeSelect";function D({asChild:n=!1,className:e,...a}){let t=N(c);return P(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),f(n?E:"span",{className:p("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}import{useEffect as V,useState as w}from"react";function H({listSize:n,pageSize:e}){let[a,t]=w(1),[i,o]=w(e);V(()=>{o(e),t(1)},[e]),V(()=>{t(1)},[n]);let r=Math.ceil(n/i),g=(a-1)*i,S=a>1,C=a<r;function M(u){let j=Math.max(1,Math.min(u,r));t(j)}function R(){C&&t(u=>Math.min(u+1,r))}function G(){S&&t(u=>Math.max(u-1,1))}function I(u){o(u),t(1)}function L(){t(r)}function U(){t(1)}return{currentPage:a,goToFirstPage:U,goToLastPage:L,goToPage:M,hasNextPage:C,hasPreviousPage:S,nextPage:R,offset:g,pageSize:i,previousPage:G,setPageSize:I,totalPages:r}}function q(n,e){return n.slice(e.offset,e.offset+e.pageSize)}export{T as CursorButtons,B as CursorPageSizeSelect,D as CursorPageSizeValue,O as CursorPagination,q as getOffsetPaginatedSlice,H as useOffsetPagination};
 //# sourceMappingURL=pagination.js.map