@ngrok/mantle 0.27.0 → 0.27.1

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/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, TableHead, TableHeader, TableRow } 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,22 @@ 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>, "chidlren"> & {
+    row: Row<TData>;
+};
+declare function DataTableRow<TData>({ row, ...props }: DataTableRowProps<TData>): react_jsx_runtime.JSX.Element;
+type EmptyDataTableRowProps = ComponentProps<typeof TableRow>;
+declare function EmptyDataTableRow<TData>({ children, ...props }: EmptyDataTableRowProps): react_jsx_runtime.JSX.Element;
 
-export { DataTableHeader };
+export { DataTable, DataTableBody, DataTableHead, DataTableHeader, DataTableHeaderSortButton, DataTableRow, DataTableRows, EmptyDataTableRow };

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 y,b as S,c as g,e as l,f as p,g as C}from"./chunk-YAT4IMMN.js";import{a as m}from"./chunk-FHW7SSNY.js";import{m as f}from"./chunk-GYPSB3OK.js";import{b}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 d}from"./chunk-AZ56JGNY.js";export*from"@tanstack/react-table";import{flexRender as P}from"@tanstack/react-table";import{createContext as j,useContext as k,useMemo as E}from"react";import A from"tiny-invariant";var V=["unsorted","asc","desc"],v=["unsorted","desc","asc"];function x(t,a){return M(a==="alphanumeric"?V:v,t)??"unsorted"}function M(t,a,e){if(t.length===0)return e;let o=t.findIndex(n=>n===a);if(o===-1)return e;let s=(o+1)%t.length;return t.at(s)??e}import{Fragment as K,jsx as r,jsxs as w}from"react/jsx-runtime";var R=j(null);function u(){let t=k(R);return A(t,"useDataTableContext should only be used within a DataTable child component"),t}function L({children:t,table:a,...e}){let o=E(()=>({table:a}),[a]);return r(R.Provider,{value:o,children:r(y,{...e,children:t})})}function _({children:t,className:a,column:e,disableSorting:o=!1,iconPlacement:s="end",sortingMode:n,sortIcon:I,onClick:B,...N}){let T=e.getIsSorted(),c=!o&&e.getCanSort(),i=c&&typeof T=="string"?T:"unsorted",O=I?.(i)??r(G,{mode:n,direction:i});return w(b,{appearance:"ghost",className:d("flex justify-start w-full h-full rounded-none",a),"data-sort-direction":i,"data-table-header-action":!0,icon:O,iconPlacement:s,onClick:D=>{B?.(D),!D.defaultPrevented&&(!c||o||typeof n>"u"||J(e,n))},priority:"neutral",type:"button",...N,children:[c&&i!=="unsorted"&&w("span",{className:"sr-only",children:["Column sorted in"," ",n==="alphanumeric"?i==="asc"?"ascending":"descending":f(i)," ","order"]}),t]})}function $({children:t,className:a,...e}){return r(p,{className:d("has-[[data-table-header-action]]:px-0",a),...e,children:t})}var h=g;h.displayName="DataTableBody";function q(t){let{table:a}=u();return r(S,{...t,children:a.getHeaderGroups().map(e=>r(l,{children:e.headers.map(o=>o.isPlaceholder?r(p,{},o.id):P(o.column.columnDef.header,o.getContext()))},e.id))})}function z(){let{table:t}=u(),a=t.getRowModel().rows;return r(K,{children:a.map(e=>r(H,{row:e},e.id))})}function H({row:t,...a}){return r(l,{...a,children:t.getVisibleCells().map(e=>P(e.column.columnDef.cell,e.getContext()))})}function F({children:t,...a}){let{table:e}=u(),o=e.getAllColumns().length;return r(l,{...a,children:r(C,{colSpan:o,children:t})})}function G({direction:t,mode:a,...e}){return t==="unsorted"||!a||!t?r("svg",{"aria-hidden":!0,...e}):r(m,{mode:a,direction:t,...e})}function J(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{L as DataTable,h as DataTableBody,q as DataTableHead,$ as DataTableHeader,_ as DataTableHeaderSortButton,H as DataTableRow,z as DataTableRows,F as EmptyDataTableRow};
 //# 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\tDataTableBody,\n\tDataTableHead,\n\tDataTableHeader,\n\tDataTableHeaderSortButton,\n\tDataTableRow,\n\tDataTableRows,\n\tEmptyDataTableRow,\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\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\treturn header.isPlaceholder ? (\n\t\t\t\t\t\t\t<TableHeader key={header.id} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tflexRender(header.column.columnDef.header, header.getContext())\n\t\t\t\t\t\t);\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\"chidlren\"\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\n\t\t\t\t.getVisibleCells()\n\t\t\t\t.map((cell) =>\n\t\t\t\t\tflexRender(cell.column.columnDef.cell, cell.getContext()),\n\t\t\t\t)}\n\t\t</TableRow>\n\t);\n}\n\ntype EmptyDataTableRowProps = ComponentProps<typeof TableRow>;\n\nfunction EmptyDataTableRow<TData>({\n\tchildren,\n\t...props\n}: EmptyDataTableRowProps) {\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\nexport {\n\t//,\n\tDataTable,\n\tDataTableBody,\n\tDataTableHead,\n\tDataTableHeader,\n\tDataTableHeaderSortButton,\n\tDataTableRow,\n\tDataTableRows,\n\tEmptyDataTableRow,\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","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","EmptyDataTableRow","numberOfColumns","TableCell","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

package/dist/pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/pagination/cursor-pagination.tsx","../src/components/pagination/use-offset-pagination.tsx"],"sourcesContent":["import { CaretLeft } from \"@phosphor-icons/react/CaretLeft\";\nimport { CaretRight } from \"@phosphor-icons/react/CaretRight\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseState,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { ButtonGroup, IconButton } from \"../button/index.js\";\nimport {\n\tSelect,\n\tSelectContent,\n\tSelectItem,\n\tSelectTrigger,\n\tSelectValue,\n} from \"../select/select.js\";\nimport { Separator } from \"../separator/separator.js\";\n\ntype CursorPaginationContextValue = {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n\t/**\n\t * The current number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * A function to set the number of items per page.\n\t */\n\tsetPageSize: (value: number) => void;\n};\n\nconst CursorPaginationContext = createContext<\n\tCursorPaginationContextValue | undefined\n>(undefined);\n\ntype CursorPaginationProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n};\n\n/**\n * A pagination component for use with cursor-based pagination.\n *\n * Cursor-based pagination is a way of loading data in chunks by using a cursor\n * from the last item on the current page to know where to start the next set,\n * making sure nothing is missed or repeated. Like a linked list, but for chunks\n * of data. It doesn't let you jump to a specific page or know how many total pages\n * there are, but it's more efficient for large or real-time data sets.\n */\nconst CursorPagination = forwardRef<HTMLDivElement, CursorPaginationProps>(\n\t({ className, children, defaultPageSize, ...props }, ref) => {\n\t\tconst [pageSize, setPageSize] = useState<number>(defaultPageSize);\n\n\t\treturn (\n\t\t\t<CursorPaginationContext.Provider\n\t\t\t\tvalue={{ defaultPageSize, pageSize, setPageSize }}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"inline-flex items-center justify-between gap-2\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</CursorPaginationContext.Provider>\n\t\t);\n\t},\n);\nCursorPagination.displayName = \"CursorPagination\";\n\ntype CursorButtonsProps = Omit<\n\tComponentProps<typeof ButtonGroup>,\n\t\"appearance\"\n> & {\n\t/**\n\t * Whether there is a next page of data to load.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Whether there is a previous page of data to load.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * A callback that is called when the next page button is clicked.\n\t */\n\tonNextPage?: () => void;\n\t/**\n\t * A callback that is called when the previous page button is clicked.\n\t */\n\tonPreviousPage?: () => void;\n};\n\n/**\n * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n */\nconst CursorButtons = forwardRef<\n\tComponentRef<typeof ButtonGroup>,\n\tCursorButtonsProps\n>(\n\t(\n\t\t{ hasNextPage, hasPreviousPage, onNextPage, onPreviousPage, ...props },\n\t\tref,\n\t) => {\n\t\t// TODO(cody): this _feels_ like a good spot for left and right arrow keys to navigate between pages when focused on the buttons\n\n\t\treturn (\n\t\t\t<ButtonGroup appearance=\"panel\" ref={ref} {...props}>\n\t\t\t\t<IconButton\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasPreviousPage}\n\t\t\t\t\ticon={<CaretLeft />}\n\t\t\t\t\tlabel=\"Previous page\"\n\t\t\t\t\tonClick={onPreviousPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t\t<Separator orientation=\"vertical\" className=\"min-h-5\" />\n\t\t\t\t<IconButton\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasNextPage}\n\t\t\t\t\ticon={<CaretRight />}\n\t\t\t\t\tlabel=\"Next page\"\n\t\t\t\t\tonClick={onNextPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t</ButtonGroup>\n\t\t);\n\t},\n);\nCursorButtons.displayName = \"CursorButtons\";\n\nconst defaultPageSizes = [5, 10, 20, 50, 100] as const;\n\ntype CursorPageSizeSelectProps = Omit<\n\tComponentProps<typeof SelectTrigger>,\n\t\"children\"\n> & {\n\t/**\n\t * A list of page sizes to choose from. The default page size must be included in this list.\n\t */\n\tpageSizes?: typeof defaultPageSizes | readonly number[];\n\t/**\n\t * A callback that is called when the page size is changed.\n\t */\n\tonChangePageSize?: (value: number) => void;\n};\n\n/**\n * A select input for changing the number of items per page when using cursor-based pagination.\n */\nconst CursorPageSizeSelect = forwardRef<\n\tComponentRef<typeof SelectTrigger>,\n\tCursorPageSizeSelectProps\n>(\n\t(\n\t\t{ className, pageSizes = defaultPageSizes, onChangePageSize, ...rest },\n\t\tref,\n\t) => {\n\t\tconst ctx = useContext(CursorPaginationContext);\n\n\t\tinvariant(\n\t\t\tctx,\n\t\t\t\"CursorPageSizeSelect must be used as a child of a CursorPagination component\",\n\t\t);\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.defaultPageSize),\n\t\t\t\"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.pageSize),\n\t\t\t\"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\treturn (\n\t\t\t<Select\n\t\t\t\tdefaultValue={`${ctx.pageSize}`}\n\t\t\t\tonChange={(value) => {\n\t\t\t\t\tlet newPageSize = Number.parseInt(value, 10);\n\t\t\t\t\tif (Number.isNaN(newPageSize)) {\n\t\t\t\t\t\tnewPageSize = ctx.defaultPageSize;\n\t\t\t\t\t}\n\t\t\t\t\tctx.setPageSize(newPageSize);\n\t\t\t\t\tonChangePageSize?.(newPageSize);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SelectTrigger\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(\"w-auto min-w-36\", className)}\n\t\t\t\t\tvalue={ctx.pageSize}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t<SelectValue />\n\t\t\t\t</SelectTrigger>\n\t\t\t\t<SelectContent width=\"trigger\">\n\t\t\t\t\t{pageSizes.map((size) => (\n\t\t\t\t\t\t<SelectItem key={size} value={`${size}`}>\n\t\t\t\t\t\t\t{size} per page\n\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t))}\n\t\t\t\t</SelectContent>\n\t\t\t</Select>\n\t\t);\n\t},\n);\nCursorPageSizeSelect.displayName = \"CursorPageSizeSelect\";\n\ntype CursorPageSizeValueProps = Omit<ComponentProps<\"span\">, \"children\"> &\n\tWithAsChild;\n\n/**\n * Displays the current page size when using cursor-based pagination as a read-only value.\n */\nfunction CursorPageSizeValue({\n\tasChild = false,\n\tclassName,\n\t...props\n}: CursorPageSizeValueProps) {\n\tconst ctx = useContext(CursorPaginationContext);\n\n\tinvariant(\n\t\tctx,\n\t\t\"CursorPageSizeValue must be used as a child of a CursorPagination component\",\n\t);\n\n\tconst Component = asChild ? Slot : \"span\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cx(\"text-muted text-sm font-normal\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{ctx.pageSize} per page\n\t\t</Component>\n\t);\n}\n\nexport {\n\t//,\n\tCursorButtons,\n\tCursorPageSizeSelect,\n\tCursorPageSizeValue,\n\tCursorPagination,\n};\n\nexport type {\n\t//,\n\tCursorButtonsProps,\n\tCursorPageSizeSelectProps,\n\tCursorPageSizeValueProps,\n\tCursorPaginationProps,\n};\n","import { useEffect, useState } from \"react\";\n\ntype UseOffsetPaginationProps = {\n\t/**\n\t * The total number of items in the list to be paginated.\n\t */\n\tlistSize: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n};\n\ntype OffsetPaginationState = {\n\t/**\n\t * The current page number, 1-indexed (starting at 1).\n\t */\n\tcurrentPage: number;\n\t/**\n\t * Whether there is a previous page.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * Whether there is a next page.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Go to a specific page.\n\t */\n\tgoToPage: (page: number) => void;\n\t/**\n\t * Go to the first page.\n\t */\n\tgoToFirstPage: () => void;\n\t/**\n\t * Go to the last page.\n\t */\n\tgoToLastPage: () => void;\n\t/**\n\t * Go to the next page.\n\t */\n\tnextPage: () => void;\n\t/**\n\t * The offset of the current page in the list.\n\t */\n\toffset: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * Go to the previous page.\n\t */\n\tpreviousPage: () => void;\n\t/**\n\t * Set the number of items per page. This will reset the current page to the first page.\n\t */\n\tsetPageSize: (size: number) => void;\n\t/**\n\t * The total number of pages.\n\t */\n\ttotalPages: number;\n};\n\n/**\n * A headless hook for managing offset-based pagination state\n */\nfunction useOffsetPagination({\n\tlistSize,\n\tpageSize,\n}: UseOffsetPaginationProps): OffsetPaginationState {\n\tconst [currentPage, setCurrentPage] = useState(1);\n\tconst [currentPageSize, setCurrentPageSize] = useState(pageSize);\n\n\t// Reset the current page to 1 when the page size prop changes\n\tuseEffect(() => {\n\t\tsetCurrentPageSize(pageSize);\n\t\tsetCurrentPage(1);\n\t}, [pageSize]);\n\n\t// Reset the current page to 1 when the list size prop changes\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: when the listSize prop changes, we want to reset the current page to the start\n\tuseEffect(() => {\n\t\tsetCurrentPage(1);\n\t}, [listSize]);\n\n\tconst totalPages = Math.ceil(listSize / currentPageSize);\n\tconst offset = (currentPage - 1) * currentPageSize;\n\n\tconst hasPreviousPage = currentPage > 1;\n\tconst hasNextPage = currentPage < totalPages;\n\n\tfunction goToPage(page: number) {\n\t\tconst nextPage = Math.max(1, Math.min(page, totalPages));\n\t\tsetCurrentPage(nextPage);\n\t}\n\n\tfunction nextPage() {\n\t\tif (hasNextPage) {\n\t\t\tsetCurrentPage((prev) => Math.min(prev + 1, totalPages));\n\t\t}\n\t}\n\n\tfunction previousPage() {\n\t\tif (hasPreviousPage) {\n\t\t\tsetCurrentPage((prev) => Math.max(prev - 1, 1));\n\t\t}\n\t}\n\n\tfunction setPageSize(size: number) {\n\t\tsetCurrentPageSize(size);\n\t\tsetCurrentPage(1); // reset to the first page when page size changes\n\t}\n\n\tfunction goToLastPage() {\n\t\tsetCurrentPage(totalPages);\n\t}\n\n\tfunction goToFirstPage() {\n\t\tsetCurrentPage(1);\n\t}\n\n\treturn {\n\t\tcurrentPage,\n\t\tgoToFirstPage,\n\t\tgoToLastPage,\n\t\tgoToPage,\n\t\thasNextPage,\n\t\thasPreviousPage,\n\t\tnextPage,\n\t\toffset,\n\t\tpageSize: currentPageSize,\n\t\tpreviousPage,\n\t\tsetPageSize,\n\t\ttotalPages,\n\t};\n}\n\n/**\n * Get a paginated slice of a list based on the current offset pagination state.\n */\nfunction getOffsetPaginatedSlice<T>(\n\tlist: readonly T[],\n\tpagination: OffsetPaginationState,\n): T[] {\n\treturn list.slice(pagination.offset, pagination.offset + pagination.pageSize);\n}\n\nexport {\n\t//,\n\tgetOffsetPaginatedSlice,\n\tuseOffsetPagination,\n};\n\nexport type {\n\t//,\n\tOffsetPaginationState,\n\tUseOffsetPaginationProps,\n};\n"],"mappings":"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","names":["CaretLeft","CaretRight","Slot","createContext","forwardRef","useContext","useState","invariant","jsx","jsxs","CursorPaginationContext","createContext","CursorPagination","forwardRef","className","children","defaultPageSize","props","ref","pageSize","setPageSize","useState","cx","CursorButtons","hasNextPage","hasPreviousPage","onNextPage","onPreviousPage","ButtonGroup","IconButton","CaretLeft","Separator","CaretRight","defaultPageSizes","CursorPageSizeSelect","pageSizes","onChangePageSize","rest","ctx","useContext","invariant","Select","value","newPageSize","SelectTrigger","SelectValue","SelectContent","size","SelectItem","CursorPageSizeValue","asChild","Slot","useEffect","useState","useOffsetPagination","listSize","pageSize","currentPage","setCurrentPage","currentPageSize","setCurrentPageSize","totalPages","offset","hasPreviousPage","hasNextPage","goToPage","page","nextPage","prev","previousPage","setPageSize","size","goToLastPage","goToFirstPage","getOffsetPaginatedSlice","list","pagination"]}
+{"version":3,"sources":["../src/components/pagination/cursor-pagination.tsx","../src/components/pagination/use-offset-pagination.tsx"],"sourcesContent":["import { CaretLeft } from \"@phosphor-icons/react/CaretLeft\";\nimport { CaretRight } from \"@phosphor-icons/react/CaretRight\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseState,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { ButtonGroup, IconButton } from \"../button/index.js\";\nimport {\n\tSelect,\n\tSelectContent,\n\tSelectItem,\n\tSelectTrigger,\n\tSelectValue,\n} from \"../select/select.js\";\nimport { Separator } from \"../separator/separator.js\";\n\ntype CursorPaginationContextValue = {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n\t/**\n\t * The current number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * A function to set the number of items per page.\n\t */\n\tsetPageSize: (value: number) => void;\n};\n\nconst CursorPaginationContext = createContext<\n\tCursorPaginationContextValue | undefined\n>(undefined);\n\ntype CursorPaginationProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n};\n\n/**\n * A pagination component for use with cursor-based pagination.\n *\n * Cursor-based pagination is a way of loading data in chunks by using a cursor\n * from the last item on the current page to know where to start the next set,\n * making sure nothing is missed or repeated. Like a linked list, but for chunks\n * of data. It doesn't let you jump to a specific page or know how many total pages\n * there are, but it's more efficient for large or real-time data sets.\n */\nconst CursorPagination = forwardRef<HTMLDivElement, CursorPaginationProps>(\n\t({ className, children, defaultPageSize, ...props }, ref) => {\n\t\tconst [pageSize, setPageSize] = useState<number>(defaultPageSize);\n\n\t\treturn (\n\t\t\t<CursorPaginationContext.Provider\n\t\t\t\tvalue={{ defaultPageSize, pageSize, setPageSize }}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"inline-flex items-center justify-between gap-2\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</CursorPaginationContext.Provider>\n\t\t);\n\t},\n);\nCursorPagination.displayName = \"CursorPagination\";\n\ntype CursorButtonsProps = Omit<\n\tComponentProps<typeof ButtonGroup>,\n\t\"appearance\"\n> & {\n\t/**\n\t * Whether there is a next page of data to load.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Whether there is a previous page of data to load.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * A callback that is called when the next page button is clicked.\n\t */\n\tonNextPage?: () => void;\n\t/**\n\t * A callback that is called when the previous page button is clicked.\n\t */\n\tonPreviousPage?: () => void;\n};\n\n/**\n * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n */\nconst CursorButtons = forwardRef<\n\tComponentRef<typeof ButtonGroup>,\n\tCursorButtonsProps\n>(\n\t(\n\t\t{ hasNextPage, hasPreviousPage, onNextPage, onPreviousPage, ...props },\n\t\tref,\n\t) => {\n\t\t// TODO(cody): this _feels_ like a good spot for left and right arrow keys to navigate between pages when focused on the buttons\n\n\t\treturn (\n\t\t\t<ButtonGroup appearance=\"panel\" ref={ref} {...props}>\n\t\t\t\t<IconButton\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasPreviousPage}\n\t\t\t\t\ticon={<CaretLeft />}\n\t\t\t\t\tlabel=\"Previous page\"\n\t\t\t\t\tonClick={onPreviousPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t\t<Separator orientation=\"vertical\" className=\"min-h-5\" />\n\t\t\t\t<IconButton\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasNextPage}\n\t\t\t\t\ticon={<CaretRight />}\n\t\t\t\t\tlabel=\"Next page\"\n\t\t\t\t\tonClick={onNextPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t</ButtonGroup>\n\t\t);\n\t},\n);\nCursorButtons.displayName = \"CursorButtons\";\n\nconst defaultPageSizes = [5, 10, 20, 50, 100] as const;\n\ntype CursorPageSizeSelectProps = Omit<\n\tComponentProps<typeof SelectTrigger>,\n\t\"children\"\n> & {\n\t/**\n\t * A list of page sizes to choose from. The default page size must be included in this list.\n\t */\n\tpageSizes?: typeof defaultPageSizes | readonly number[];\n\t/**\n\t * A callback that is called when the page size is changed.\n\t */\n\tonChangePageSize?: (value: number) => void;\n};\n\n/**\n * A select input for changing the number of items per page when using cursor-based pagination.\n */\nconst CursorPageSizeSelect = forwardRef<\n\tComponentRef<typeof SelectTrigger>,\n\tCursorPageSizeSelectProps\n>(\n\t(\n\t\t{ className, pageSizes = defaultPageSizes, onChangePageSize, ...rest },\n\t\tref,\n\t) => {\n\t\tconst ctx = useContext(CursorPaginationContext);\n\n\t\tinvariant(\n\t\t\tctx,\n\t\t\t\"CursorPageSizeSelect must be used as a child of a CursorPagination component\",\n\t\t);\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.defaultPageSize),\n\t\t\t\"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.pageSize),\n\t\t\t\"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\treturn (\n\t\t\t<Select\n\t\t\t\tdefaultValue={`${ctx.pageSize}`}\n\t\t\t\tonValueChange={(value) => {\n\t\t\t\t\tlet newPageSize = Number.parseInt(value, 10);\n\t\t\t\t\tif (Number.isNaN(newPageSize)) {\n\t\t\t\t\t\tnewPageSize = ctx.defaultPageSize;\n\t\t\t\t\t}\n\t\t\t\t\tctx.setPageSize(newPageSize);\n\t\t\t\t\tonChangePageSize?.(newPageSize);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SelectTrigger\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(\"w-auto min-w-36\", className)}\n\t\t\t\t\tvalue={ctx.pageSize}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t<SelectValue />\n\t\t\t\t</SelectTrigger>\n\t\t\t\t<SelectContent width=\"trigger\">\n\t\t\t\t\t{pageSizes.map((size) => (\n\t\t\t\t\t\t<SelectItem key={size} value={`${size}`}>\n\t\t\t\t\t\t\t{size} per page\n\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t))}\n\t\t\t\t</SelectContent>\n\t\t\t</Select>\n\t\t);\n\t},\n);\nCursorPageSizeSelect.displayName = \"CursorPageSizeSelect\";\n\ntype CursorPageSizeValueProps = Omit<ComponentProps<\"span\">, \"children\"> &\n\tWithAsChild;\n\n/**\n * Displays the current page size when using cursor-based pagination as a read-only value.\n */\nfunction CursorPageSizeValue({\n\tasChild = false,\n\tclassName,\n\t...props\n}: CursorPageSizeValueProps) {\n\tconst ctx = useContext(CursorPaginationContext);\n\n\tinvariant(\n\t\tctx,\n\t\t\"CursorPageSizeValue must be used as a child of a CursorPagination component\",\n\t);\n\n\tconst Component = asChild ? Slot : \"span\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cx(\"text-muted text-sm font-normal\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{ctx.pageSize} per page\n\t\t</Component>\n\t);\n}\n\nexport {\n\t//,\n\tCursorButtons,\n\tCursorPageSizeSelect,\n\tCursorPageSizeValue,\n\tCursorPagination,\n};\n\nexport type {\n\t//,\n\tCursorButtonsProps,\n\tCursorPageSizeSelectProps,\n\tCursorPageSizeValueProps,\n\tCursorPaginationProps,\n};\n","import { useEffect, useState } from \"react\";\n\ntype UseOffsetPaginationProps = {\n\t/**\n\t * The total number of items in the list to be paginated.\n\t */\n\tlistSize: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n};\n\ntype OffsetPaginationState = {\n\t/**\n\t * The current page number, 1-indexed (starting at 1).\n\t */\n\tcurrentPage: number;\n\t/**\n\t * Whether there is a previous page.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * Whether there is a next page.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Go to a specific page.\n\t */\n\tgoToPage: (page: number) => void;\n\t/**\n\t * Go to the first page.\n\t */\n\tgoToFirstPage: () => void;\n\t/**\n\t * Go to the last page.\n\t */\n\tgoToLastPage: () => void;\n\t/**\n\t * Go to the next page.\n\t */\n\tnextPage: () => void;\n\t/**\n\t * The offset of the current page in the list.\n\t */\n\toffset: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * Go to the previous page.\n\t */\n\tpreviousPage: () => void;\n\t/**\n\t * Set the number of items per page. This will reset the current page to the first page.\n\t */\n\tsetPageSize: (size: number) => void;\n\t/**\n\t * The total number of pages.\n\t */\n\ttotalPages: number;\n};\n\n/**\n * A headless hook for managing offset-based pagination state\n */\nfunction useOffsetPagination({\n\tlistSize,\n\tpageSize,\n}: UseOffsetPaginationProps): OffsetPaginationState {\n\tconst [currentPage, setCurrentPage] = useState(1);\n\tconst [currentPageSize, setCurrentPageSize] = useState(pageSize);\n\n\t// Reset the current page to 1 when the page size prop changes\n\tuseEffect(() => {\n\t\tsetCurrentPageSize(pageSize);\n\t\tsetCurrentPage(1);\n\t}, [pageSize]);\n\n\t// Reset the current page to 1 when the list size prop changes\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: when the listSize prop changes, we want to reset the current page to the start\n\tuseEffect(() => {\n\t\tsetCurrentPage(1);\n\t}, [listSize]);\n\n\tconst totalPages = Math.ceil(listSize / currentPageSize);\n\tconst offset = (currentPage - 1) * currentPageSize;\n\n\tconst hasPreviousPage = currentPage > 1;\n\tconst hasNextPage = currentPage < totalPages;\n\n\tfunction goToPage(page: number) {\n\t\tconst nextPage = Math.max(1, Math.min(page, totalPages));\n\t\tsetCurrentPage(nextPage);\n\t}\n\n\tfunction nextPage() {\n\t\tif (hasNextPage) {\n\t\t\tsetCurrentPage((prev) => Math.min(prev + 1, totalPages));\n\t\t}\n\t}\n\n\tfunction previousPage() {\n\t\tif (hasPreviousPage) {\n\t\t\tsetCurrentPage((prev) => Math.max(prev - 1, 1));\n\t\t}\n\t}\n\n\tfunction setPageSize(size: number) {\n\t\tsetCurrentPageSize(size);\n\t\tsetCurrentPage(1); // reset to the first page when page size changes\n\t}\n\n\tfunction goToLastPage() {\n\t\tsetCurrentPage(totalPages);\n\t}\n\n\tfunction goToFirstPage() {\n\t\tsetCurrentPage(1);\n\t}\n\n\treturn {\n\t\tcurrentPage,\n\t\tgoToFirstPage,\n\t\tgoToLastPage,\n\t\tgoToPage,\n\t\thasNextPage,\n\t\thasPreviousPage,\n\t\tnextPage,\n\t\toffset,\n\t\tpageSize: currentPageSize,\n\t\tpreviousPage,\n\t\tsetPageSize,\n\t\ttotalPages,\n\t};\n}\n\n/**\n * Get a paginated slice of a list based on the current offset pagination state.\n */\nfunction getOffsetPaginatedSlice<T>(\n\tlist: readonly T[],\n\tpagination: OffsetPaginationState,\n): T[] {\n\treturn list.slice(pagination.offset, pagination.offset + pagination.pageSize);\n}\n\nexport {\n\t//,\n\tgetOffsetPaginatedSlice,\n\tuseOffsetPagination,\n};\n\nexport type {\n\t//,\n\tOffsetPaginationState,\n\tUseOffsetPaginationProps,\n};\n"],"mappings":"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","names":["CaretLeft","CaretRight","Slot","createContext","forwardRef","useContext","useState","invariant","jsx","jsxs","CursorPaginationContext","createContext","CursorPagination","forwardRef","className","children","defaultPageSize","props","ref","pageSize","setPageSize","useState","cx","CursorButtons","hasNextPage","hasPreviousPage","onNextPage","onPreviousPage","ButtonGroup","IconButton","CaretLeft","Separator","CaretRight","defaultPageSizes","CursorPageSizeSelect","pageSizes","onChangePageSize","rest","ctx","useContext","invariant","Select","value","newPageSize","SelectTrigger","SelectValue","SelectContent","size","SelectItem","CursorPageSizeValue","asChild","Slot","useEffect","useState","useOffsetPagination","listSize","pageSize","currentPage","setCurrentPage","currentPageSize","setCurrentPageSize","totalPages","offset","hasPreviousPage","hasNextPage","goToPage","page","nextPage","prev","previousPage","setPageSize","size","goToLastPage","goToFirstPage","getOffsetPaginatedSlice","list","pagination"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",
@@ -28,7 +28,7 @@
     "@ariakit/react": "0.4.17",
     "@headlessui/react": "2.2.2",
     "@radix-ui/react-accordion": "1.2.8",
-    "@radix-ui/react-dialog": "1.1.10",
+    "@radix-ui/react-dialog": "1.1.11",
     "@radix-ui/react-dropdown-menu": "2.1.12",
     "@radix-ui/react-hover-card": "1.1.11",
     "@radix-ui/react-popover": "1.1.11",