@mercurjs/dashboard-shared 2.0.0-canary.0

package/dist/index.d.ts

@@ -0,0 +1,1102 @@
+import { QueryKey, UseQueryOptions } from '@tanstack/react-query';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default, { ReactNode, PropsWithChildren, ComponentPropsWithoutRef, CSSProperties, ComponentType, Ref, RefCallback } from 'react';
+import { Tooltip, Heading, Text, DataTableColumnDef, DataTableFilter, DataTableCommand, DataTableEmptyStateProps, DataTableRowSelectionState, DataTableRow, Drawer, FocusModal, ProgressStatus } from '@medusajs/ui';
+import { HttpTypes } from '@mercurjs/types';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps, UseFormReturn, Control } from 'react-hook-form';
+import { Label, Slot } from 'radix-ui';
+import { Link, Path } from 'react-router-dom';
+import { UniqueIdentifier } from '@dnd-kit/core';
+import * as _tanstack_react_table from '@tanstack/react-table';
+import { CellContext, Row, ColumnDef, ColumnDefTemplate, HeaderContext, Table, RowSelectionState, OnChangeFn } from '@tanstack/react-table';
+import { TFunction } from 'i18next';
+import { z } from 'zod';
+import { ClientError } from '@mercurjs/client';
+
+type TQueryKey<TKey, TListQuery = any, TDetailQuery = string> = {
+    all: readonly [TKey];
+    lists: () => readonly [...TQueryKey<TKey>["all"], "list"];
+    list: (query?: TListQuery) => readonly [...ReturnType<TQueryKey<TKey>["lists"]>, {
+        query: TListQuery;
+    }];
+    details: () => readonly [...TQueryKey<TKey>["all"], "detail"];
+    detail: (id: TDetailQuery, query?: TListQuery) => readonly [
+        ...ReturnType<TQueryKey<TKey>["details"]>,
+        TDetailQuery,
+        {
+            query: TListQuery;
+        }
+    ];
+};
+type UseQueryOptionsWrapper<TQueryFn = unknown, E = Error, TQueryKey extends QueryKey = QueryKey> = Omit<UseQueryOptions<TQueryFn, E, TQueryFn, TQueryKey>, "queryKey" | "queryFn">;
+declare const queryKeysFactory: <T, TListQueryType = any, TDetailQueryType = string>(globalKey: T) => TQueryKey<T, TListQueryType, TDetailQueryType>;
+
+type Action = {
+    icon: ReactNode;
+    label: string;
+    disabled?: boolean;
+    /**
+     * Optional tooltip to display when a disabled action is hovered.
+     */
+    disabledTooltip?: string | ReactNode;
+} & ({
+    to: string;
+    onClick?: never;
+} | {
+    onClick: () => void;
+    to?: never;
+});
+type ActionGroup = {
+    actions: Action[];
+};
+type ActionMenuProps = PropsWithChildren<{
+    groups: ActionGroup[];
+    variant?: "transparent" | "primary";
+}>;
+declare const ActionMenu: ({ groups, variant, children, }: ActionMenuProps) => react_jsx_runtime.JSX.Element;
+
+type BadgeListSummaryProps = {
+    /**
+     * Number of initial items to display
+     * @default 2
+     */
+    n?: number;
+    /**
+     * List of strings to display as abbreviated list
+     */
+    list: string[];
+    /**
+     * Is the summary displayed inline.
+     * Determines whether the center text is truncated if there is no space in the container
+     */
+    inline?: boolean;
+    /**
+     * Whether the badges should be rounded
+     */
+    rounded?: boolean;
+    className?: string;
+};
+declare const BadgeListSummary: ({ list, className, inline, rounded, n, }: BadgeListSummaryProps) => react_jsx_runtime.JSX.Element;
+
+type ChipGroupVariant = "base" | "component";
+type ChipGroupProps = PropsWithChildren<{
+    onClearAll?: () => void;
+    onRemove?: (index: number) => void;
+    variant?: ChipGroupVariant;
+    className?: string;
+}>;
+type ChipProps = PropsWithChildren<{
+    index: number;
+    className?: string;
+}>;
+declare const ChipGroup: (({ onClearAll, onRemove, variant, className, children, }: ChipGroupProps) => react_jsx_runtime.JSX.Element) & {
+    Chip: ({ index, className, children }: ChipProps) => react_jsx_runtime.JSX.Element;
+};
+
+type ConditionalTooltipProps = PropsWithChildren<ComponentPropsWithoutRef<typeof Tooltip> & {
+    showTooltip?: boolean;
+}>;
+declare const ConditionalTooltip: ({ children, showTooltip, ...props }: ConditionalTooltipProps) => string | number | boolean | Iterable<React$1.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+
+declare const CustomerInfo: {
+    ID: ({ data }: {
+        data: HttpTypes.AdminOrder;
+    }) => react_jsx_runtime.JSX.Element;
+    Company: ({ data }: {
+        data: HttpTypes.AdminOrder;
+    }) => react_jsx_runtime.JSX.Element | null;
+    Contact: ({ data }: {
+        data: HttpTypes.AdminOrder;
+    }) => react_jsx_runtime.JSX.Element;
+    Addresses: ({ data }: {
+        data: HttpTypes.AdminOrder;
+    }) => react_jsx_runtime.JSX.Element;
+};
+
+type DateRangeDisplayProps = {
+    startsAt?: Date | string | null;
+    endsAt?: Date | string | null;
+    showTime?: boolean;
+};
+declare const DateRangeDisplay: ({ startsAt, endsAt, showTime, }: DateRangeDisplayProps) => react_jsx_runtime.JSX.Element;
+
+type NoResultsProps = {
+    title?: string;
+    message?: string;
+    className?: string;
+};
+declare const NoResults: ({ title, message, className }: NoResultsProps) => react_jsx_runtime.JSX.Element;
+type ActionProps = {
+    action?: {
+        to: string;
+        label: string;
+    };
+};
+type NoRecordsProps = {
+    title?: string;
+    message?: string;
+    className?: string;
+    buttonVariant?: string;
+    icon?: React__default.ReactNode;
+} & ActionProps;
+declare const NoRecords: ({ title, message, action, className, buttonVariant, icon, }: NoRecordsProps) => react_jsx_runtime.JSX.Element;
+
+declare const FilePreview: ({ filename, url, loading, activity, actions, hideThumbnail, }: {
+    filename: string;
+    url?: string;
+    loading?: boolean;
+    activity?: string;
+    actions?: ActionGroup[];
+    hideThumbnail?: boolean;
+}) => react_jsx_runtime.JSX.Element;
+
+interface FileType {
+    id: string;
+    url: string;
+    file: File;
+}
+interface FileUploadProps {
+    label: string;
+    multiple?: boolean;
+    hint?: string;
+    hasError?: boolean;
+    formats: string[];
+    onUploaded: (files: FileType[]) => void;
+    uploadedImage?: string | null;
+}
+declare const FileUpload: ({ label, hint, multiple, hasError, formats, onUploaded, uploadedImage, }: FileUploadProps) => react_jsx_runtime.JSX.Element;
+
+declare const Form: (<TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React__default.JSX.Element) & {
+    Item: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
+    Label: React__default.ForwardRefExoticComponent<Omit<Label.LabelProps & React__default.RefAttributes<HTMLLabelElement>, "ref"> & {
+        optional?: boolean;
+        tooltip?: ReactNode;
+        icon?: ReactNode;
+    } & React__default.RefAttributes<HTMLLabelElement>>;
+    Control: React__default.ForwardRefExoticComponent<Omit<Slot.SlotProps & React__default.RefAttributes<HTMLElement>, "ref"> & React__default.RefAttributes<HTMLElement>>;
+    Hint: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLParagraphElement> & React__default.RefAttributes<HTMLParagraphElement>>;
+    ErrorMessage: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLParagraphElement> & React__default.RefAttributes<HTMLParagraphElement>>;
+    Field: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+};
+
+type IconAvatarProps = PropsWithChildren<{
+    className?: string;
+    size?: "small" | "large" | "xlarge";
+    variant?: "squared" | "rounded";
+}>;
+/**
+ * Use this component when a design calls for an avatar with an icon.
+ *
+ * The `<Avatar/>` component from `@medusajs/ui` does not support passing an icon as a child.
+ */
+declare const IconAvatar: ({ size, variant, children, className, }: IconAvatarProps) => react_jsx_runtime.JSX.Element;
+
+declare function ImageAvatar({ src, size, rounded, }: {
+    src: string;
+    size?: number;
+    rounded?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+type InfiniteListProps<TResponse, TEntity, TParams> = {
+    queryKey: QueryKey;
+    queryFn: (params: TParams) => Promise<TResponse>;
+    queryOptions?: {
+        enabled?: boolean;
+    };
+    renderItem: (item: TEntity) => ReactNode;
+    renderEmpty: () => ReactNode;
+    responseKey: keyof TResponse;
+    pageSize?: number;
+};
+declare const InfiniteList: <TResponse extends {
+    count: number;
+    offset: number;
+    limit: number;
+}, TEntity extends {
+    id: string;
+}, TParams extends {
+    offset?: number;
+    limit?: number;
+}>({ queryKey, queryFn, queryOptions, renderItem, renderEmpty, responseKey, pageSize, }: InfiniteListProps<TResponse, TEntity, TParams>) => react_jsx_runtime.JSX.Element;
+
+type JsonViewSectionProps = {
+    data: object;
+    title?: string;
+};
+declare const JsonViewSection: ({ data }: JsonViewSectionProps) => react_jsx_runtime.JSX.Element;
+
+interface LinkButtonProps extends ComponentPropsWithoutRef<typeof Link> {
+    variant?: "primary" | "interactive";
+}
+declare const LinkButton: ({ className, variant, ...props }: LinkButtonProps) => react_jsx_runtime.JSX.Element;
+
+type ListSummaryProps = {
+    /**
+     * Number of initial items to display
+     * @default 2
+     */
+    n?: number;
+    /**
+     * List of strings to display as abbreviated list
+     */
+    list: string[];
+    /**
+     * Is the summary displayed inline.
+     * Determines whether the center text is truncated if there is no space in the container
+     */
+    inline?: boolean;
+    variant?: "base" | "compact";
+    className?: string;
+};
+declare const ListSummary: ({ list, className, variant, inline, n, }: ListSummaryProps) => react_jsx_runtime.JSX.Element;
+
+interface ListicleProps {
+    labelKey: string;
+    descriptionKey: string;
+    children?: ReactNode;
+}
+declare const Listicle: ({ labelKey, descriptionKey, children, }: ListicleProps) => react_jsx_runtime.JSX.Element;
+
+type MetadataSectionProps<TData extends object> = {
+    data: TData;
+    href?: string;
+};
+declare const MetadataSection: <TData extends object>({ data, href, }: MetadataSectionProps<TData>) => react_jsx_runtime.JSX.Element | null;
+
+interface ProgressBarProps {
+    /**
+     * The duration of the animation in seconds.
+     *
+     * @default 2
+     */
+    duration?: number;
+}
+declare const ProgressBar: ({ duration }: ProgressBarProps) => react_jsx_runtime.JSX.Element;
+
+type SectionRowProps = {
+    title: string;
+    value?: ReactNode | string | null;
+    actions?: ReactNode;
+};
+declare const SectionRow: ({ title, value, actions }: SectionRowProps) => react_jsx_runtime.JSX.Element;
+
+type SegmentedControlOption = {
+    value: string;
+    label: ReactNode;
+};
+type SegmentedControlProps = {
+    value: string;
+    onValueChange: (value: string) => void;
+    options: SegmentedControlOption[];
+    className?: string;
+};
+declare const SegmentedControl: ({ value, onValueChange, options, className, }: SegmentedControlProps) => react_jsx_runtime.JSX.Element;
+
+interface SidebarLinkProps {
+    to: string;
+    labelKey: string;
+    descriptionKey: string;
+    icon: ReactNode;
+}
+declare const SidebarLink: ({ to, labelKey, descriptionKey, icon, }: SidebarLinkProps) => react_jsx_runtime.JSX.Element;
+
+type SkeletonProps = {
+    className?: string;
+    style?: CSSProperties;
+};
+declare const Skeleton: ({ className, style }: SkeletonProps) => react_jsx_runtime.JSX.Element;
+type TextSkeletonProps = {
+    size?: ComponentPropsWithoutRef<typeof Text>["size"];
+    leading?: ComponentPropsWithoutRef<typeof Text>["leading"];
+    characters?: number;
+};
+type HeadingSkeletonProps = {
+    level?: ComponentPropsWithoutRef<typeof Heading>["level"];
+    characters?: number;
+};
+declare const HeadingSkeleton: ({ level, characters, }: HeadingSkeletonProps) => react_jsx_runtime.JSX.Element;
+declare const TextSkeleton: ({ size, leading, characters, }: TextSkeletonProps) => react_jsx_runtime.JSX.Element;
+declare const IconButtonSkeleton: () => react_jsx_runtime.JSX.Element;
+type GeneralSectionSkeletonProps = {
+    rowCount?: number;
+};
+declare const GeneralSectionSkeleton: ({ rowCount, }: GeneralSectionSkeletonProps) => react_jsx_runtime.JSX.Element;
+declare const TableFooterSkeleton: ({ layout }: {
+    layout: "fill" | "fit";
+}) => react_jsx_runtime.JSX.Element;
+type TableSkeletonProps = {
+    rowCount?: number;
+    search?: boolean;
+    filters?: boolean;
+    orderBy?: boolean;
+    pagination?: boolean;
+    layout?: "fit" | "fill";
+};
+declare const TableSkeleton: ({ rowCount, search, filters, orderBy, pagination, layout, }: TableSkeletonProps) => react_jsx_runtime.JSX.Element;
+declare const TableSectionSkeleton: (props: TableSkeletonProps) => react_jsx_runtime.JSX.Element;
+declare const JsonViewSectionSkeleton: () => react_jsx_runtime.JSX.Element;
+type SingleColumnPageSkeletonProps = {
+    sections?: number;
+    showJSON?: boolean;
+    showMetadata?: boolean;
+};
+declare const SingleColumnPageSkeleton: ({ sections, showJSON, showMetadata, }: SingleColumnPageSkeletonProps) => react_jsx_runtime.JSX.Element;
+type TwoColumnPageSkeletonProps = {
+    mainSections?: number;
+    sidebarSections?: number;
+    showJSON?: boolean;
+    showMetadata?: boolean;
+};
+declare const TwoColumnPageSkeleton: ({ mainSections, sidebarSections, showJSON, showMetadata, }: TwoColumnPageSkeletonProps) => react_jsx_runtime.JSX.Element;
+
+type SortableBaseItem = {
+    id: UniqueIdentifier;
+};
+interface SortableListProps<TItem extends SortableBaseItem> {
+    items: TItem[];
+    onChange: (items: TItem[]) => void;
+    renderItem: (item: TItem, index: number) => ReactNode;
+}
+type SortableItemProps<TItem extends SortableBaseItem> = PropsWithChildren<{
+    id: TItem["id"];
+    className?: string;
+}>;
+declare const SortableList: (<TItem extends SortableBaseItem>({ items, onChange, renderItem, }: SortableListProps<TItem>) => react_jsx_runtime.JSX.Element) & {
+    Item: <TItem extends SortableBaseItem>({ id, className, children, }: SortableItemProps<TItem>) => react_jsx_runtime.JSX.Element;
+    DragHandle: () => react_jsx_runtime.JSX.Element;
+};
+
+interface TreeItem extends Record<string, unknown> {
+    id: UniqueIdentifier;
+}
+
+interface Props<T extends TreeItem> {
+    collapsible?: boolean;
+    childrenProp?: string;
+    items: T[];
+    indentationWidth?: number;
+    /**
+     * Enable drag for all items or provide a function to enable drag for specific items.
+     * @default true
+     */
+    enableDrag?: boolean | ((item: T) => boolean);
+    onChange: (updatedItem: {
+        id: UniqueIdentifier;
+        parentId: UniqueIdentifier | null;
+        index: number;
+    }, items: T[]) => void;
+    renderValue: (item: T) => ReactNode;
+}
+declare function SortableTree<T extends TreeItem>({ collapsible, childrenProp, // "children" is the default children prop name
+enableDrag, items, indentationWidth, onChange, renderValue, }: Props<T>): react_jsx_runtime.JSX.Element;
+
+interface HeadlessControllerProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<ControllerProps<TFieldValues, TName>, "render"> {
+}
+interface SwitchBoxProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends HeadlessControllerProps<TFieldValues, TName> {
+    label: string;
+    description: string;
+    optional?: boolean;
+    tooltip?: ReactNode;
+    /**
+     * Callback for performing additional actions when the checked state changes.
+     * This does not intercept the form control, it is only used for injecting side-effects.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+}
+/**
+ * Wrapper for the Switch component to be used with `react-hook-form`.
+ *
+ * Use this component whenever a design calls for wrapping the Switch component
+ * in a container with a label and description.
+ */
+declare const SwitchBox: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, description, optional, tooltip, onCheckedChange, ...props }: SwitchBoxProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+
+type IncludesTaxTooltipProps = {
+    includesTax?: boolean;
+};
+declare const IncludesTaxTooltip: ({ includesTax, }: IncludesTaxTooltipProps) => react_jsx_runtime.JSX.Element;
+
+type ThumbnailProps = {
+    src?: string | null;
+    alt?: string;
+    size?: "small" | "base";
+};
+declare const Thumbnail: ({ src, alt, size }: ThumbnailProps) => react_jsx_runtime.JSX.Element;
+
+type DataGridColumnType = "text" | "multiline-text" | "number" | "boolean" | "togglable-number";
+interface DataGridCellProps<TData = unknown, TValue = any> {
+    context: CellContext<TData, TValue>;
+}
+type FieldContext<TData> = {
+    row: Row<TData>;
+    column: ColumnDef<TData>;
+};
+type FieldFunction<TData, TFieldValues extends FieldValues> = (context: FieldContext<TData>) => FieldPath<TFieldValues> | null;
+
+interface DataGridCurrencyCellProps<TData, TValue = any> extends DataGridCellProps<TData, TValue> {
+    code: string;
+}
+
+interface DataGridRootProps<TData, TFieldValues extends FieldValues = FieldValues> {
+    data?: TData[];
+    columns: ColumnDef<TData>[];
+    state: UseFormReturn<TFieldValues>;
+    getSubRows?: (row: TData) => TData[] | undefined;
+    onEditingChange?: (isEditing: boolean) => void;
+    disableInteractions?: boolean;
+    multiColumnSelection?: boolean;
+    showColumnsDropdown?: boolean;
+    /**
+     * Custom content to render in the header, positioned between the column visibility
+     * controls and the error/shortcuts section.
+     */
+    headerContent?: ReactNode;
+    /**
+     * Lazy loading props - when totalRowCount is provided, the grid enters lazy loading mode.
+     * In this mode, the virtualizer will size based on totalRowCount and trigger onFetchMore
+     * when the user scrolls near the end of loaded data.
+     */
+    /** Total count of rows for scroll sizing (enables lazy loading mode when provided) */
+    totalRowCount?: number;
+    /** Called when more data should be fetched */
+    onFetchMore?: () => void;
+    /** Whether more data is currently being fetched */
+    isFetchingMore?: boolean;
+    /** Whether there is more data to fetch */
+    hasNextPage?: boolean;
+}
+
+interface DataGridProps<TData, TFieldValues extends FieldValues = FieldValues> extends DataGridRootProps<TData, TFieldValues> {
+    isLoading?: boolean;
+}
+declare const DataGrid: (<TData, TFieldValues extends FieldValues = FieldValues>({ isLoading, totalRowCount, onFetchMore, isFetchingMore, hasNextPage, ...props }: DataGridProps<TData, TFieldValues>) => react_jsx_runtime.JSX.Element) & {
+    BooleanCell: <TData, TValue = any>({ context, disabled, }: DataGridCellProps<TData, TValue> & {
+        disabled?: boolean;
+    }) => react_jsx_runtime.JSX.Element;
+    TextCell: <TData, TValue = any>({ context, }: DataGridCellProps<TData, TValue>) => react_jsx_runtime.JSX.Element;
+    MultilineCell: <TData, TValue = any>({ context, }: DataGridCellProps<TData, TValue>) => react_jsx_runtime.JSX.Element;
+    ExpandableTextCell: <TData, TValue = any>({ context, fieldLabel, }: DataGridCellProps<TData, TValue> & {
+        fieldLabel?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    NumberCell: <TData, TValue = any>({ context, ...rest }: DataGridCellProps<TData, TValue> & {
+        min?: number;
+        max?: number;
+        placeholder?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    CurrencyCell: <TData, TValue = any>({ context, code, }: DataGridCurrencyCellProps<TData, TValue>) => react_jsx_runtime.JSX.Element;
+    ReadonlyCell: <TData, TValue = any>({ context, color, children, isMultiLine, }: DataGridCellProps<TData, TValue> & {
+        children?: React$1.ReactNode | undefined;
+    } & {
+        color?: "muted" | "normal";
+        isMultiLine?: boolean;
+    }) => react_jsx_runtime.JSX.Element;
+};
+
+type DataGridHelperColumnsProps<TData, TFieldValues extends FieldValues> = {
+    /**
+     * The id of the column.
+     */
+    id: string;
+    /**
+     * The name of the column, shown in the column visibility menu.
+     */
+    name?: string;
+    /**
+     * The header template for the column.
+     */
+    header: ColumnDefTemplate<HeaderContext<TData, unknown>> | undefined;
+    /**
+     * The cell template for the column.
+     */
+    cell: ColumnDefTemplate<CellContext<TData, unknown>> | undefined;
+    /**
+     * Callback to set the field path for each cell in the column.
+     * If a callback is not provided, or returns null, the cell will not be editable.
+     */
+    field?: FieldFunction<TData, TFieldValues>;
+    /**
+     * Whether the column cannot be hidden by the user.
+     *
+     * @default false
+     */
+    disableHiding?: boolean;
+    /**
+     * The size of the column in pixels.
+     */
+    size?: number;
+    /**
+     * The minimum size of the column in pixels.
+     */
+    minSize?: number;
+    /**
+     * The maximum size of the column in pixels.
+     */
+    maxSize?: number;
+} & ({
+    field: FieldFunction<TData, TFieldValues>;
+    type: DataGridColumnType;
+} | {
+    field?: null | undefined;
+    type?: never;
+});
+declare function createDataGridHelper<TData, TFieldValues extends FieldValues>(): {
+    column: ({ id, name, header, cell, disableHiding, field, type, size, minSize, maxSize, }: DataGridHelperColumnsProps<TData, TFieldValues>) => _tanstack_react_table.DisplayColumnDef<TData, unknown>;
+};
+
+type CreateDataGridPriceColumnsProps<TData, TFieldValues extends FieldValues> = {
+    currencies?: string[];
+    regions?: HttpTypes.AdminRegion[];
+    pricePreferences?: HttpTypes.AdminPricePreference[];
+    isReadyOnly?: (context: FieldContext<TData>) => boolean;
+    getFieldName: (context: FieldContext<TData>, value: string) => FieldPath<TFieldValues> | null;
+    t: TFunction;
+};
+declare const createDataGridPriceColumns: <TData, TFieldValues extends FieldValues>({ currencies, regions, pricePreferences, isReadyOnly, getFieldName, t, }: CreateDataGridPriceColumnsProps<TData, TFieldValues>) => ColumnDef<TData, unknown>[];
+
+type VisibilityState = Record<string, boolean>;
+type ColumnOrderState = string[];
+type DataTableActionProps = {
+    label: string;
+    disabled?: boolean;
+} & ({
+    to: string;
+} | {
+    onClick: () => void;
+});
+type DataTableActionMenuActionProps = {
+    label: string;
+    icon: ReactNode;
+    disabled?: boolean;
+} & ({
+    to: string;
+} | {
+    onClick: () => void;
+});
+type DataTableActionMenuGroupProps = {
+    actions: DataTableActionMenuActionProps[];
+};
+type DataTableActionMenuProps = {
+    groups: DataTableActionMenuGroupProps[];
+};
+interface DataTableProps$1<TData> {
+    data?: TData[];
+    columns: DataTableColumnDef<TData, any>[];
+    filters?: DataTableFilter[];
+    commands?: DataTableCommand[];
+    action?: DataTableActionProps;
+    actions?: DataTableActionProps[];
+    actionMenu?: DataTableActionMenuProps;
+    rowCount?: number;
+    getRowId: (row: TData) => string;
+    enablePagination?: boolean;
+    enableSearch?: boolean;
+    autoFocusSearch?: boolean;
+    enableFilterMenu?: boolean;
+    rowHref?: (row: TData) => string;
+    emptyState?: DataTableEmptyStateProps;
+    heading?: string;
+    headingLevel?: "h1" | "h2" | "h3";
+    subHeading?: string;
+    prefix?: string;
+    pageSize?: number;
+    isLoading?: boolean;
+    rowSelection?: {
+        state: DataTableRowSelectionState;
+        onRowSelectionChange: (value: DataTableRowSelectionState) => void;
+        enableRowSelection?: boolean | ((row: DataTableRow<TData>) => boolean);
+    };
+    layout?: "fill" | "auto";
+    enableColumnVisibility?: boolean;
+    initialColumnVisibility?: VisibilityState;
+    onColumnVisibilityChange?: (visibility: VisibilityState) => void;
+    columnOrder?: ColumnOrderState;
+    onColumnOrderChange?: (order: ColumnOrderState) => void;
+    enableViewSelector?: boolean;
+    entity?: string;
+    currentColumns?: {
+        visible: string[];
+        order: string[];
+    };
+    filterBarContent?: React__default.ReactNode;
+}
+declare const DataTable: <TData>({ data, columns, filters, commands, action, actions, actionMenu, getRowId, rowCount, enablePagination, enableSearch, autoFocusSearch, enableFilterMenu, rowHref, heading, headingLevel, subHeading, prefix, pageSize, emptyState, rowSelection, isLoading, layout, enableColumnVisibility, initialColumnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, filterBarContent, }: DataTableProps$1<TData>) => react_jsx_runtime.JSX.Element;
+
+type FilterGroupProps = {
+    filters: {
+        [key: string]: ReactNode;
+    };
+};
+declare const FilterGroup: ({ filters }: FilterGroupProps) => react_jsx_runtime.JSX.Element | null;
+
+type OrderByProps = {
+    keys: string[];
+};
+declare const OrderBy: ({ keys }: OrderByProps) => react_jsx_runtime.JSX.Element;
+
+type QueryProps = {
+    placeholder?: string;
+};
+declare const Query: ({ placeholder }: QueryProps) => react_jsx_runtime.JSX.Element;
+
+declare const AddressSchema: z.ZodObject<{
+    first_name: z.ZodString;
+    last_name: z.ZodString;
+    company: z.ZodOptional<z.ZodString>;
+    address_1: z.ZodString;
+    address_2: z.ZodOptional<z.ZodString>;
+    city: z.ZodString;
+    postal_code: z.ZodString;
+    province: z.ZodOptional<z.ZodString>;
+    country_code: z.ZodString;
+    phone: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    first_name: string;
+    last_name: string;
+    address_1: string;
+    city: string;
+    postal_code: string;
+    country_code: string;
+    company?: string | undefined;
+    address_2?: string | undefined;
+    province?: string | undefined;
+    phone?: string | undefined;
+}, {
+    first_name: string;
+    last_name: string;
+    address_1: string;
+    city: string;
+    postal_code: string;
+    country_code: string;
+    company?: string | undefined;
+    address_2?: string | undefined;
+    province?: string | undefined;
+    phone?: string | undefined;
+}>;
+declare const EmailSchema: z.ZodObject<{
+    email: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    email: string;
+}, {
+    email: string;
+}>;
+
+type AddressFieldValues = z.infer<typeof AddressSchema>;
+type AddressFormProps = {
+    control: Control<AddressFieldValues>;
+    countries?: HttpTypes.AdminRegionCountry[];
+    layout: "grid" | "stack";
+};
+declare const AddressForm: ({ control, countries, layout, }: AddressFormProps) => react_jsx_runtime.JSX.Element;
+
+type EmailFieldValues = z.infer<typeof EmailSchema>;
+type EmailFormProps = {
+    control: Control<EmailFieldValues>;
+    layout?: "grid" | "stack";
+};
+declare const EmailForm: ({ control, layout }: EmailFormProps) => react_jsx_runtime.JSX.Element;
+
+type MetaDataSubmitHook<TRes> = (params: {
+    metadata?: Record<string, any> | null;
+}, callbacks: {
+    onSuccess: () => void;
+    onError: (error: ClientError) => void;
+}) => Promise<TRes>;
+type MetadataFormProps<TRes> = {
+    metadata?: Record<string, any> | null;
+    hook: MetaDataSubmitHook<TRes>;
+    isPending: boolean;
+    isMutating: boolean;
+};
+declare const MetadataForm: <TRes>(props: MetadataFormProps<TRes>) => react_jsx_runtime.JSX.Element;
+
+interface PageProps<TData> {
+    children: ReactNode;
+    data?: TData;
+    showJSON?: boolean;
+    showMetadata?: boolean;
+    hasOutlet?: boolean;
+}
+
+declare const SingleColumnPage: <TData>({ children, data, hasOutlet, showJSON, showMetadata, }: PageProps<TData>) => react_jsx_runtime.JSX.Element;
+
+interface TwoColumnPageProps<TData> extends PageProps<TData> {
+}
+declare const TwoColumnPage: (<TData>({ children, data, showJSON, showMetadata, hasOutlet, }: TwoColumnPageProps<TData>) => react_jsx_runtime.JSX.Element) & {
+    Main: ({ children, className, ...props }: ComponentPropsWithoutRef<"div">) => react_jsx_runtime.JSX.Element;
+    Sidebar: ({ children, className, ...props }: ComponentPropsWithoutRef<"div">) => react_jsx_runtime.JSX.Element;
+};
+
+type RouteModalFormProps<TFieldValues extends FieldValues> = PropsWithChildren<{
+    form: UseFormReturn<TFieldValues>;
+    blockSearchParams?: boolean;
+    onClose?: (isSubmitSuccessful: boolean) => void;
+}>;
+declare const RouteModalForm: <TFieldValues extends FieldValues = any>({ form, blockSearchParams: blockSearch, children, onClose, }: RouteModalFormProps<TFieldValues>) => react_jsx_runtime.JSX.Element;
+
+type RouteDrawerProps = PropsWithChildren<{
+    prev?: string | Partial<Path>;
+}>;
+declare const Root$4: ComponentType<RouteDrawerProps>;
+/**
+ * Drawer that is used to render a form on a separate route.
+ *
+ * Typically used for forms editing a resource.
+ */
+declare const RouteDrawer: typeof Root$4 & {
+    Header: typeof Drawer.Header;
+    Title: typeof Drawer.Title;
+    Body: typeof Drawer.Body;
+    Description: typeof Drawer.Description;
+    Footer: typeof Drawer.Footer;
+    Close: typeof Drawer.Close;
+    Form: typeof RouteModalForm;
+};
+
+type RouteFocusModalProps = PropsWithChildren<{
+    prev?: string | Partial<Path> | number;
+}>;
+declare const Root$3: ComponentType<RouteFocusModalProps>;
+/**
+ * FocusModal that is used to render a form on a separate route.
+ *
+ * Typically used for forms creating a resource or forms that require
+ * a lot of space.
+ */
+declare const RouteFocusModal: typeof Root$3 & {
+    Header: typeof FocusModal.Header;
+    Title: typeof FocusModal.Title;
+    Body: typeof FocusModal.Body;
+    Description: typeof FocusModal.Description;
+    Footer: typeof FocusModal.Footer;
+    Close: typeof FocusModal.Close;
+    Form: typeof RouteModalForm;
+};
+
+declare const useRouteModal: () => {
+    handleSuccess: (path?: string) => void;
+    setCloseOnEscape: (value: boolean) => void;
+    __internal: {
+        closeOnEscape: boolean;
+    };
+};
+
+type StackedDrawerProps = PropsWithChildren<{
+    /**
+     * A unique identifier for the modal. This is used to differentiate stacked modals,
+     * when multiple stacked modals are registered to the same parent modal.
+     */
+    id: string;
+}>;
+/**
+ * A stacked modal that can be rendered above a parent modal.
+ */
+declare const Root$2: ComponentType<StackedDrawerProps>;
+declare const StackedDrawer: typeof Root$2 & {
+    Close: typeof Drawer.Close;
+    Header: typeof Drawer.Header;
+    Body: typeof Drawer.Body;
+    Content: typeof Drawer.Content;
+    Trigger: typeof Drawer.Trigger;
+    Footer: typeof Drawer.Footer;
+    Description: typeof Drawer.Description;
+    Title: typeof Drawer.Title;
+};
+
+type StackedFocusModalProps = PropsWithChildren<{
+    /**
+     * A unique identifier for the modal. This is used to differentiate stacked modals,
+     * when multiple stacked modals are registered to the same parent modal.
+     */
+    id: string;
+    /**
+     * An optional callback that is called when the modal is opened or closed.
+     */
+    onOpenChangeCallback?: (open: boolean) => void;
+}>;
+/**
+ * A stacked modal that can be rendered above a parent modal.
+ */
+declare const Root$1: ComponentType<StackedFocusModalProps>;
+declare const StackedFocusModal: typeof Root$1 & {
+    Close: typeof FocusModal.Close;
+    Header: typeof FocusModal.Header;
+    Body: typeof FocusModal.Body;
+    Content: typeof FocusModal.Content;
+    Trigger: typeof FocusModal.Trigger;
+    Footer: typeof FocusModal.Footer;
+    Description: typeof FocusModal.Description;
+    Title: typeof FocusModal.Title;
+};
+
+declare const useStackedModal: () => {
+    getIsOpen: (id: string) => boolean;
+    setIsOpen: (id: string, open: boolean) => void;
+    register: (id: string) => void;
+    unregister: (id: string) => void;
+};
+
+interface TabDefinition<T extends FieldValues = FieldValues> {
+    id: string;
+    labelKey: string;
+    label?: string;
+    validationFields?: FieldPath<T>[];
+    isVisible?: (form: UseFormReturn<T>) => boolean;
+}
+
+declare const useTabbedForm: <T extends FieldValues = FieldValues>() => UseFormReturn<T>;
+type FooterRenderProps = {
+    isLastTab: boolean;
+    onNext: () => void;
+    isLoading?: boolean;
+};
+type TabbedFormProps<T extends FieldValues> = {
+    form: UseFormReturn<T>;
+    onSubmit: (e?: React.BaseSyntheticEvent) => void;
+    children: ReactNode;
+    isLoading?: boolean;
+    footer?: (props: FooterRenderProps) => ReactNode;
+    transformTabs?: (tabs: TabDefinition<T>[]) => TabDefinition<T>[];
+};
+declare function Root<T extends FieldValues>({ form, onSubmit, children, isLoading, footer, transformTabs, }: TabbedFormProps<T>): react_jsx_runtime.JSX.Element;
+declare const TabbedForm: typeof Root & {
+    Tab: ({ children, }: {
+        id: string;
+        label: string;
+        children?: ReactNode;
+    }) => react_jsx_runtime.JSX.Element;
+    useForm: <T extends FieldValues = FieldValues>() => UseFormReturn<T>;
+};
+
+type TabState = Record<string, ProgressStatus>;
+declare const useTabManagement: <T extends FieldValues>({ tabs, form, }: {
+    tabs: TabDefinition<T>[];
+    form: UseFormReturn<T>;
+}) => {
+    activeTabId: string;
+    setActiveTabId: React$1.Dispatch<React$1.SetStateAction<string>>;
+    tabState: TabState;
+    visibleTabs: TabDefinition<T>[];
+    isLastTab: boolean;
+    onNext: () => Promise<void>;
+    onTabChange: (tabId: string) => Promise<void>;
+};
+
+type DataTableOrderByKey<TData> = {
+    key: keyof TData;
+    label: string;
+};
+
+interface DataTableQueryProps<TData> {
+    search?: boolean | "autofocus";
+    orderBy?: DataTableOrderByKey<TData>[];
+    filters?: Filter[];
+    prefix?: string;
+}
+
+type BulkCommand = {
+    label: string;
+    shortcut: string;
+    action: (selection: Record<string, boolean>) => Promise<void>;
+};
+interface DataTableRootProps<TData> {
+    /**
+     * The table instance to render
+     */
+    table: Table<TData>;
+    /**
+     * The columns to render
+     */
+    columns: ColumnDef<TData, any>[];
+    /**
+     * Function to generate a link to navigate to when clicking on a row
+     */
+    navigateTo?: (row: Row<TData>) => string;
+    /**
+     * Bulk actions to render
+     */
+    commands?: BulkCommand[];
+    /**
+     * The total number of items in the table
+     */
+    count?: number;
+    /**
+     * Whether to display pagination controls
+     */
+    pagination?: boolean;
+    /**
+     * Whether the table is empty due to no results from the active query
+     */
+    noResults?: boolean;
+    /**
+     * Whether to display the tables header
+     */
+    noHeader?: boolean;
+    /**
+     * The layout of the table
+     */
+    layout?: "fill" | "fit";
+}
+
+interface DataTableProps<TData> extends Omit<DataTableRootProps<TData>, "noResults">, DataTableQueryProps<TData> {
+    isLoading?: boolean;
+    pageSize: number;
+    queryObject?: Record<string, any>;
+    noRecords?: Pick<NoResultsProps, "title" | "message">;
+}
+/**
+ * @deprecated Use the DataTable component from "/components/data-table" instead
+ */
+declare const _DataTable: <TData>({ table, columns, pagination, navigateTo, commands, count, search, orderBy, filters, prefix, queryObject, pageSize, isLoading, noHeader, layout, noRecords: noRecordsProps, }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
+
+type Option = {
+    label: string;
+    value: unknown;
+};
+type Filter = {
+    key: string;
+    label: string;
+} & ({
+    type: "select";
+    options: Option[];
+    multiple?: boolean;
+    searchable?: boolean;
+} | {
+    type: "date";
+    options?: never;
+} | {
+    type: "string";
+    options?: never;
+} | {
+    type: "number";
+    options?: never;
+});
+
+type CellProps$1 = {
+    code: string;
+};
+type HeaderProps$1 = {
+    text: string;
+};
+declare const CodeCell: ({ code }: CellProps$1) => react_jsx_runtime.JSX.Element;
+declare const CodeHeader: ({ text }: HeaderProps$1) => react_jsx_runtime.JSX.Element;
+
+type DateCellProps$1 = {
+    date: Date | string | undefined;
+};
+declare const CreatedAtCell: ({ date }: DateCellProps$1) => react_jsx_runtime.JSX.Element;
+declare const CreatedAtHeader: () => react_jsx_runtime.JSX.Element;
+
+type DateCellProps = {
+    date?: Date | string | null;
+};
+declare const DateCell: ({ date }: DateCellProps) => react_jsx_runtime.JSX.Element;
+declare const DateHeader: () => react_jsx_runtime.JSX.Element;
+
+type EmailCellProps = {
+    email?: string | null;
+};
+declare const EmailCell: ({ email }: EmailCellProps) => react_jsx_runtime.JSX.Element;
+declare const EmailHeader: () => react_jsx_runtime.JSX.Element;
+
+type MoneyAmountCellProps = {
+    currencyCode: string;
+    amount?: number | null;
+    align?: "left" | "right";
+    className?: string;
+};
+declare const MoneyAmountCell: ({ currencyCode, amount, align, className, }: MoneyAmountCellProps) => react_jsx_runtime.JSX.Element;
+
+type NameCellProps = {
+    firstName?: string | null;
+    lastName?: string | null;
+};
+declare const NameCell: ({ firstName, lastName }: NameCellProps) => react_jsx_runtime.JSX.Element;
+declare const NameHeader: () => react_jsx_runtime.JSX.Element;
+
+declare const PlaceholderCell: () => react_jsx_runtime.JSX.Element;
+
+type StatusCellProps = PropsWithChildren<{
+    color?: "green" | "red" | "blue" | "orange" | "grey" | "purple";
+}>;
+/**
+ * @deprecated Use the new DataTable and DataTableStatusCell instead
+ */
+declare const StatusCell: ({ color, children }: StatusCellProps) => react_jsx_runtime.JSX.Element;
+
+type CellProps = {
+    text?: string | number;
+    align?: "left" | "center" | "right";
+    maxWidth?: number;
+};
+type HeaderProps = {
+    text: string;
+    align?: "left" | "center" | "right";
+};
+declare const TextCell: ({ text, align, maxWidth }: CellProps) => react_jsx_runtime.JSX.Element;
+declare const TextHeader: ({ text, align }: HeaderProps) => react_jsx_runtime.JSX.Element;
+
+declare const useCombinedRefs: <T>(...refs: (Ref<T> | undefined)[]) => RefCallback<T>;
+
+/**
+ * Base interface for a command that can be managed
+ * by the `useCommandHistory` hook.
+ */
+interface Command {
+    execute: () => void;
+    undo: () => void;
+    redo: () => void;
+}
+/**
+ * Hook to manage a history of commands that can be undone, redone, and executed.
+ */
+declare const useCommandHistory: (maxHistory?: number) => {
+    undo: () => void;
+    redo: () => void;
+    execute: (command: Command) => void;
+    canUndo: boolean;
+    canRedo: boolean;
+};
+
+type UseDataTableProps<TData> = {
+    data?: TData[];
+    columns: ColumnDef<TData, any>[];
+    count?: number;
+    pageSize?: number;
+    enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
+    rowSelection?: {
+        state: RowSelectionState;
+        updater: OnChangeFn<RowSelectionState>;
+    };
+    enablePagination?: boolean;
+    enableExpandableRows?: boolean;
+    getRowId?: (original: TData, index: number) => string;
+    getSubRows?: (original: TData) => TData[];
+    meta?: Record<string, unknown>;
+    prefix?: string;
+};
+declare const useDataTable: <TData>({ data, columns, count, pageSize: _pageSize, enablePagination, enableRowSelection, enableExpandableRows, rowSelection: _rowSelection, getSubRows, getRowId, meta, prefix, }: UseDataTableProps<TData>) => {
+    table: _tanstack_react_table.Table<TData>;
+};
+
+declare const useDate: () => {
+    getFullDate: ({ date, includeTime, }: {
+        date: string | Date;
+        includeTime?: boolean;
+    }) => string;
+    getRelativeDate: (date: string | Date) => string;
+};
+
+/**
+ * Hook to get the current document direction (ltr/rtl) and listen for changes
+ * @returns The current document direction as "ltr" | "rtl" | undefined
+ */
+declare const useDocumentDirection: () => "ltr" | "rtl" | undefined;
+
+type QueryParams<T extends string> = {
+    [key in T]: string | undefined;
+};
+declare function useQueryParams<T extends string>(keys: T[], prefix?: string): QueryParams<T>;
+
+export { type Action, type ActionGroup, ActionMenu, AddressForm, BadgeListSummary, ChipGroup, CodeCell, CodeHeader, type Command, ConditionalTooltip, CreatedAtCell, CreatedAtHeader, CustomerInfo, DataGrid, DataTable, DateCell, DateHeader, DateRangeDisplay, EmailCell, EmailForm, EmailHeader, FilePreview, type FileType, FileUpload, type FileUploadProps, type Filter, FilterGroup, Form, GeneralSectionSkeleton, HeadingSkeleton, IconAvatar, IconButtonSkeleton, ImageAvatar, IncludesTaxTooltip, InfiniteList, JsonViewSection, JsonViewSectionSkeleton, LinkButton, ListSummary, Listicle, type ListicleProps, MetadataForm, MetadataSection, MoneyAmountCell, NameCell, NameHeader, NoRecords, NoResults, type NoResultsProps, OrderBy, PlaceholderCell, ProgressBar, Query, RouteDrawer, RouteFocusModal, SectionRow, type SectionRowProps, SegmentedControl, type SegmentedControlOption, SidebarLink, type SidebarLinkProps, SingleColumnPage, SingleColumnPageSkeleton, Skeleton, SortableList, SortableTree, StackedDrawer, StackedFocusModal, StatusCell, SwitchBox, type TQueryKey, type TabDefinition, TabbedForm, TableFooterSkeleton, TableSectionSkeleton, TableSkeleton, TextCell, TextHeader, TextSkeleton, Thumbnail, TwoColumnPage, TwoColumnPageSkeleton, type UseQueryOptionsWrapper, _DataTable, createDataGridHelper, createDataGridPriceColumns, queryKeysFactory, useCombinedRefs, useCommandHistory, useDataTable, useDate, useDocumentDirection, useQueryParams, useRouteModal, useStackedModal, useTabManagement, useTabbedForm };