@embeddable.com/remarkable-ui 1.0.5 → 2.0.1

package/dist/{remarkable-ui/styles/styles.tokensComponents.constants.d.ts → index-C2c7n1lv.d.ts}

@@ -1,4 +1,107 @@
-export declare const stylesTokensComponents: {
+declare const stylesTokensCore: {
+    '--em-core-border-radius--000': string;
+    '--em-core-border-radius--050': string;
+    '--em-core-border-radius--100': string;
+    '--em-core-border-radius--150': string;
+    '--em-core-border-radius--200': string;
+    '--em-core-border-radius--300': string;
+    '--em-core-border-radius--400': string;
+    '--em-core-border-radius--500': string;
+    '--em-core-border-width--000': string;
+    '--em-core-border-width--025': string;
+    '--em-core-border-width--050': string;
+    '--em-core-border-width--100': string;
+    '--em-core-color-gray--0000': string;
+    '--em-core-color-gray--0050': string;
+    '--em-core-color-gray--0100': string;
+    '--em-core-color-gray--0200': string;
+    '--em-core-color-gray--0300': string;
+    '--em-core-color-gray--0400': string;
+    '--em-core-color-gray--0500': string;
+    '--em-core-color-gray--0600': string;
+    '--em-core-color-gray--0700': string;
+    '--em-core-color-gray--0800': string;
+    '--em-core-color-gray--0900': string;
+    '--em-core-color-gray--1000': string;
+    '--em-core-font-family--base': string;
+    '--em-core-font-size--md': string;
+    '--em-core-font-size--sm': string;
+    '--em-core-font-size--xl': string;
+    '--em-core-font-size--xs': string;
+    '--em-core-font-size--xxl': string;
+    '--em-core-font-weight--bold': string;
+    '--em-core-font-weight--medium': string;
+    '--em-core-font-weight--regular': string;
+    '--em-core-line-height--l': string;
+    '--em-core-line-height--md': string;
+    '--em-core-line-height--sm': string;
+    '--em-core-line-height--xl': string;
+    '--em-core-shadow-blur': string;
+    '--em-core-shadow-color': string;
+    '--em-core-shadow-position-x': string;
+    '--em-core-shadow-position-y': string;
+    '--em-core-shadow-spread': string;
+    '--em-core-size--0000': string;
+    '--em-core-size--0050': string;
+    '--em-core-size--0100': string;
+    '--em-core-size--0150': string;
+    '--em-core-size--0200': string;
+    '--em-core-size--0300': string;
+    '--em-core-size--0400': string;
+    '--em-core-size--0500': string;
+    '--em-core-size--0600': string;
+    '--em-core-size--0700': string;
+    '--em-core-size--0800': string;
+    '--em-core-size--0900': string;
+    '--em-core-size--1000': string;
+    '--em-core-size--1200': string;
+    '--em-core-size--1600': string;
+    '--em-core-size--2000': string;
+    '--em-core-spacing--0000': string;
+    '--em-core-spacing--0050': string;
+    '--em-core-spacing--0100': string;
+    '--em-core-spacing--0150': string;
+    '--em-core-spacing--0200': string;
+    '--em-core-spacing--0300': string;
+    '--em-core-spacing--0400': string;
+    '--em-core-spacing--0500': string;
+    '--em-core-spacing--0600': string;
+    '--em-core-spacing--0700': string;
+    '--em-core-spacing--0800': string;
+    '--em-core-spacing--0900': string;
+    '--em-core-spacing--1000': string;
+    '--em-core-spacing--1200': string;
+    '--em-core-spacing--1600': string;
+    '--em-core-spacing--2000': string;
+};
+declare const stylesTokensSemantic: {
+    '--em-sem-background': string;
+    '--em-sem-background--inverted': string;
+    '--em-sem-background--light': string;
+    '--em-sem-background--muted': string;
+    '--em-sem-background--neutral': string;
+    '--em-sem-background--subtle': string;
+    '--em-sem-chart-color--1': string;
+    '--em-sem-chart-color--10': string;
+    '--em-sem-chart-color--2': string;
+    '--em-sem-chart-color--3': string;
+    '--em-sem-chart-color--4': string;
+    '--em-sem-chart-color--5': string;
+    '--em-sem-chart-color--6': string;
+    '--em-sem-chart-color--7': string;
+    '--em-sem-chart-color--8': string;
+    '--em-sem-chart-color--9': string;
+    '--em-sem-status-error-background': string;
+    '--em-sem-status-error-text': string;
+    '--em-sem-status-success-background': string;
+    '--em-sem-status-success-text': string;
+    '--em-sem-text': string;
+    '--em-sem-text--inverted': string;
+    '--em-sem-text--muted': string;
+    '--em-sem-text--neutral': string;
+    '--em-sem-text--subtle': string;
+};
+declare const stylesTokensComponents: {
     '--em-actionicon-background': string;
     '--em-actionicon-background--active': string;
     '--em-actionicon-background--hover': string;
@@ -10,7 +113,7 @@ export declare const stylesTokensComponents: {
     '--em-actionicon-padding-left-right': string;
     '--em-actionicon-padding-top-bottom': string;
     '--em-actionicon-width': string;
-    '--em-barchart-border-raidus': string;
+    '--em-barchart-border-radius': string;
     '--em-barchart-label-gap': string;
     '--em-button-background--disabled': string;
     '--em-button-background--primary': string;
@@ -96,17 +199,16 @@ export declare const stylesTokensComponents: {
     '--em-chart-category-line-height': string;
     '--em-chart-category-list-gap': string;
     '--em-chart-category-size': string;
+    '--em-chart-grid-font-family': string;
     '--em-chart-grid-label-color': string;
     '--em-chart-grid-label-color--light': string;
     '--em-chart-grid-label-color--muted': string;
     '--em-chart-grid-label-color--subtle': string;
+    '--em-chart-grid-label-font-size': string;
+    '--em-chart-grid-label-font-weight': string;
     '--em-chart-grid-line-color': string;
     '--em-chart-grid-line-color--light': string;
-    '--em-chart-grid-line-color--muted': string;
     '--em-chart-grid-line-color--subtle': string;
-    '--em-chart-grid-font-family': string;
-    '--em-chart-grid-label-font-size': string;
-    '--em-chart-grid-label-font-weight': string;
     '--em-chart-grid-line-width--medium': string;
     '--em-chart-grid-line-width--thick': string;
     '--em-chart-grid-line-width--thin': string;
@@ -345,7 +447,18 @@ export declare const stylesTokensComponents: {
     '--em-textfield-min-width': string;
     '--em-textfield-padding': string;
 };
-type StylesTokensComponents = typeof stylesTokensComponents;
-export type StylesTokensComponentsKeys = keyof StylesTokensComponents;
-export {};
-//# sourceMappingURL=styles.tokensComponents.constants.d.ts.map
+type StylesTokensCore$1 = typeof stylesTokensCore;
+type StylesTokensCoreKeys = keyof StylesTokensCore$1;
+type StylesTokensSemantic$1 = typeof stylesTokensSemantic;
+type StylesTokensSemanticKeys = keyof StylesTokensSemantic$1;
+type StylesTokensComponents$1 = typeof stylesTokensComponents;
+type StylesTokensComponentsKeys = keyof StylesTokensComponents$1;
+
+type StylesTokensCore = Record<StylesTokensCoreKeys, string>;
+type StylesTokensSemantic = Record<StylesTokensSemanticKeys, string>;
+type StylesTokensComponents = Record<StylesTokensComponentsKeys, string>;
+type Styles = StylesTokensCore & StylesTokensSemantic & StylesTokensComponents;
+declare const styles: Styles;
+type StylesKeys = keyof typeof styles;
+
+export { type StylesKeys as S, type Styles as a, styles as s };

package/dist/index.d.ts

@@ -1,3 +1,472 @@
-export * from './remarkable-ui';
-export * from './remarkable-pro';
-//# sourceMappingURL=index.d.ts.map
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default, { FC, SVGProps, ImgHTMLAttributes, ReactNode, ReactElement } from 'react';
+import * as _tabler_icons_react from '@tabler/icons-react';
+import { TablerIcon, Icon } from '@tabler/icons-react';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { ChartData, ChartOptions, CartesianTickOptions, GridLineOptions } from 'chart.js';
+import { S as StylesKeys } from './index-C2c7n1lv.js';
+export { a as Styles } from './index-C2c7n1lv.js';
+
+declare const Skeleton: () => react_jsx_runtime.JSX.Element;
+
+declare const Card: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & {
+    children?: React__default.ReactNode;
+} & React__default.RefAttributes<HTMLDivElement>>;
+type CardHeaderProps = {
+    title?: string;
+    subtitle?: string;
+    rightContent?: React__default.ReactNode;
+};
+declare const CardHeader: React__default.FC<CardHeaderProps>;
+type CardContentProps = {
+    children: React__default.ReactNode;
+};
+declare const CardContent: React__default.ForwardRefExoticComponent<CardContentProps & React__default.RefAttributes<HTMLDivElement>>;
+
+type CardFeedbackProps = {
+    className?: string;
+    icon?: TablerIcon;
+    title: string;
+    message: string;
+    variant?: 'error' | 'info';
+};
+declare const CardFeedback: React.FC<CardFeedbackProps>;
+
+type TypographyElement = 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'div';
+type TypographyProps = {
+    children: React__default.ReactNode;
+    as?: TypographyElement;
+    className?: string;
+    title?: string;
+    style?: React__default.CSSProperties;
+};
+declare function Typography({ children, as: Component, className, style, title, }: TypographyProps): React__default.JSX.Element;
+
+type ActionIconProps = {
+    className?: string;
+    icon: TablerIcon;
+} & React__default.ButtonHTMLAttributes<HTMLButtonElement>;
+declare const ActionIcon: React__default.FC<ActionIconProps>;
+
+type ButtonIconProps = {
+    variant?: 'primary' | 'secondary';
+    size?: 'small' | 'medium';
+    icon: TablerIcon;
+} & React__default.ButtonHTMLAttributes<HTMLButtonElement>;
+declare const ButtonIcon: React__default.FC<ButtonIconProps>;
+
+type DropdownProps = {
+    triggerComponent: React.ReactNode;
+    children: React.ReactNode;
+    disabled?: boolean;
+    open?: boolean;
+    side?: React.ComponentProps<typeof DropdownMenu.Content>['side'];
+    align?: React.ComponentProps<typeof DropdownMenu.Content>['align'];
+    onOpenChange?: (open: boolean) => void;
+};
+declare const Dropdown: FC<DropdownProps>;
+
+type SelectListOptionIcon = React.ReactElement<SVGProps<SVGSVGElement>> | React.ReactElement<ImgHTMLAttributes<HTMLImageElement>>;
+type SelectListOptionProps = {
+    value?: string;
+    isSelected?: boolean;
+    label: string;
+    rightLabel?: string;
+    startIcon?: SelectListOptionIcon;
+    endIcon?: SelectListOptionIcon;
+    disabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+};
+type SelectListOptionPropsWithCategory = SelectListOptionProps & {
+    category: string;
+};
+declare const SelectListOption: FC<SelectListOptionProps>;
+
+type ButtonProps = {
+    startIcon?: TablerIcon;
+    endIcon?: TablerIcon;
+    children: string;
+    size?: 'small' | 'medium';
+    variant?: 'primary' | 'secondary';
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+declare const Button: React.FC<ButtonProps>;
+
+type GhostButtonProps = {
+    startIcon?: Icon;
+    endIcon?: Icon;
+} & React__default.ButtonHTMLAttributes<HTMLButtonElement>;
+declare const GhostButton: React__default.FC<GhostButtonProps>;
+
+type OverlayProps = {
+    className?: string;
+    children?: ReactNode;
+};
+declare const Overlay: FC<OverlayProps>;
+
+type FieldHeaderProps = {
+    className?: string;
+    label?: string;
+    required?: boolean;
+    requiredLabel?: string;
+};
+declare const FieldHeader: ({ label, required, requiredLabel, className, }: FieldHeaderProps) => react_jsx_runtime.JSX.Element | null;
+
+type MultiSelectFieldProps = {
+    startIcon?: TablerIcon;
+    disabled?: boolean;
+    isClearable?: boolean;
+    isLoading?: boolean;
+    isSearchable?: boolean;
+    noOptionsMessage?: string;
+    options: (SelectListOptionProps | SelectListOptionPropsWithCategory)[];
+    placeholder?: string;
+    submitLabel?: string;
+    values?: string[];
+    onChange: (value: string[]) => void;
+    onSearch?: (search: string) => void;
+    error?: boolean;
+    errorMessage?: string;
+} & FieldHeaderProps;
+declare const MultiSelectField: FC<MultiSelectFieldProps>;
+
+type SwitchProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+    label?: string;
+};
+declare const Switch: React__default.FC<SwitchProps>;
+
+type FieldFeedbackProps = {
+    message: string;
+    variant?: 'error';
+    className?: string;
+};
+declare const FieldFeedback: FC<FieldFeedbackProps>;
+
+declare const SelectFieldTrigger: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
+    startIcon?: TablerIcon;
+    valueLabel?: string;
+    placeholder?: string;
+    isClearable?: boolean;
+    isLoading?: boolean;
+    onClear?: () => void;
+    error?: boolean;
+} & React$1.RefAttributes<HTMLButtonElement>>;
+
+type SelectFieldContentProps = {
+    children: ReactNode;
+    autoFocus?: boolean;
+    className?: string;
+};
+declare const SelectFieldContent: FC<SelectFieldContentProps>;
+type SelectFieldContentListProps = {
+    children: React.ReactNode;
+    autoFocus?: boolean;
+    className?: string;
+    disabled?: boolean;
+};
+declare const SelectFieldContentList: FC<SelectFieldContentListProps>;
+
+type SingleSelectFieldProps = {
+    options: (SelectListOptionProps | SelectListOptionPropsWithCategory)[];
+    startIcon?: TablerIcon;
+    value?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    searchable?: boolean;
+    clearable?: boolean;
+    isLoading?: boolean;
+    noOptionsMessage?: string;
+    onChange: (value: string) => void;
+    onSearch?: (search: string) => void;
+    error?: boolean;
+    errorMessage?: string;
+} & FieldHeaderProps;
+declare const SingleSelectField: FC<SingleSelectFieldProps>;
+
+declare const TextField: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
+    value?: string;
+    placeholder?: string;
+    startIcon?: _tabler_icons_react.TablerIcon;
+    endIcon?: _tabler_icons_react.TablerIcon;
+    onChange: (value: string) => void;
+    clearable?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+} & FieldHeaderProps & React$1.RefAttributes<HTMLInputElement>>;
+
+type InputFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
+    value?: string;
+    placeholder?: string;
+    startIcon?: TablerIcon;
+    endIcon?: TablerIcon;
+    onChange: (value: string) => void;
+    clearable?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+} & FieldHeaderProps;
+
+declare const NumberField: React$1.ForwardRefExoticComponent<Omit<InputFieldProps, "onChange" | "value"> & {
+    value?: number | null;
+    step?: number;
+    min?: number;
+    max?: number;
+    onChange?: (value: number | null) => void;
+} & React$1.RefAttributes<HTMLInputElement>>;
+
+type SelectFieldCategoryProps = {
+    label: string;
+};
+declare const SelectFieldCategory: FC<SelectFieldCategoryProps>;
+
+type BarChartDefaultConfigurationProps = {
+    horizontal?: boolean;
+    showLegend?: boolean;
+    showTooltips?: boolean;
+    showValueLabels?: boolean;
+    showLogarithmicScale?: boolean;
+    showTotalLabels?: boolean;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    stacked?: boolean;
+};
+type BarChartConfigurationProps = BarChartDefaultConfigurationProps & {
+    yAxisRangeMin?: number;
+    yAxisRangeMax?: number;
+    reverseXAxis?: boolean;
+};
+type BarChartHorizontalConfigurationProps = BarChartDefaultConfigurationProps & {
+    xAxisRangeMin?: number;
+    xAxisRangeMax?: number;
+    reverseYAxis?: boolean;
+};
+type BaseBarChartProps = {
+    data: ChartData<'bar'>;
+    options?: Partial<ChartOptions<'bar'>>;
+    onSegmentClick?: (index: number | undefined) => void;
+} & (BarChartConfigurationProps | BarChartHorizontalConfigurationProps);
+
+type BarChartProps = BaseBarChartProps;
+declare const BarChart: FC<BarChartProps>;
+
+declare const getBarChartData: (data: ChartData<"bar">) => ChartData<"bar">;
+declare const getBarChartOptions: (options: BarChartConfigurationProps) => Partial<ChartOptions<"bar">>;
+
+type LineChartConfigurationProps = {
+    showLegend?: boolean;
+    showTooltips?: boolean;
+    showValueLabels?: boolean;
+    showLogarithmicScale?: boolean;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    yAxisRangeMin?: number;
+    yAxisRangeMax?: number;
+    reverseXAxis?: boolean;
+};
+type BaseLineChartProps = {
+    data: ChartData<'line'>;
+    options?: Partial<ChartOptions<'line'>>;
+    onSegmentClick?: (index: number | undefined) => void;
+} & LineChartConfigurationProps;
+
+type LineChartProps = BaseLineChartProps;
+declare const LineChart: FC<LineChartProps>;
+
+declare const getLineChartData: (data: ChartData<"line">) => ChartData<"line", number[], unknown>;
+declare const getLineChartOptions: (options: LineChartConfigurationProps) => Partial<ChartOptions<"line">>;
+
+type CssSize = number | `${number}px` | `${number}rem` | `${number}em` | `${number}%`;
+
+type KpiChartProps = {
+    value: number;
+    changeFontSize?: number;
+    comparisonValue?: number;
+    showChangeAsPercentage?: boolean;
+    invertChangeColors?: boolean;
+    comparisonLabel?: string;
+    equalComparisonLabel?: string;
+    percentageDecimalPlaces?: number;
+    valueFontSize?: CssSize;
+    valueFormatter?: (value: number) => string;
+};
+
+declare const KpiChart: FC<KpiChartProps>;
+
+type PieChartConfigurationProps = {
+    showLegend?: boolean;
+    showTooltips?: boolean;
+    showValueLabels?: boolean;
+};
+type BasePieChartProps = {
+    data: ChartData<'pie'>;
+    options?: Partial<ChartOptions<'pie'>>;
+    onSegmentClick?: (index: number | undefined) => void;
+} & PieChartConfigurationProps;
+
+type DonutLabelChartProps = BasePieChartProps & {
+    label?: string;
+    subLabel?: string;
+};
+declare const DonutChart: FC<DonutLabelChartProps>;
+
+type PieChartProps = BasePieChartProps;
+declare const PieChart: FC<PieChartProps>;
+
+declare const getPieChartData: (data: ChartData<"pie">) => ChartData<"pie", number[], unknown>;
+declare const getPieChartOptions: (options: PieChartConfigurationProps) => Partial<ChartOptions<"pie">>;
+declare const getDonutChartOptions: (options: PieChartConfigurationProps & {
+    label?: string;
+    subLabel?: string;
+}) => Partial<ChartOptions<"pie">>;
+
+declare const TableSortDirection: {
+    readonly ASC: "asc";
+    readonly DESC: "desc";
+};
+type TableSort<T> = {
+    id: keyof T;
+    direction: (typeof TableSortDirection)[keyof typeof TableSortDirection];
+};
+declare const TableHeaderAlign: {
+    readonly LEFT: "left";
+    readonly CENTER: "center";
+    readonly RIGHT: "right";
+};
+type TableHeaderItemAlign = (typeof TableHeaderAlign)[keyof typeof TableHeaderAlign];
+type TableHeaderCell = (props: {
+    value: any;
+    className?: string;
+}) => React.ReactElement<HTMLTableCellElement>;
+type TableHeaderItem<T> = {
+    id: keyof T;
+    title: React.ReactNode;
+    align?: TableHeaderItemAlign;
+    field?: keyof T;
+    minWidth?: CssSize;
+    sort?: TableSort<T>;
+    accessor?: (row: T) => React.ReactNode;
+    cell?: TableHeaderCell;
+};
+type TablePaginatedProps<T> = {
+    showIndex?: boolean;
+    className?: string;
+    headers: TableHeaderItem<T>[];
+    rows: T[];
+    page: number;
+    pageSize: number;
+    paginationLabel?: string;
+    total?: number;
+    sort?: TableSort<T>;
+    onRowIndexClick?: (rowIndex: number) => void;
+    onPageChange: (page: number) => void;
+    onSortChange?: (value: TableSort<T> | undefined) => void;
+};
+
+declare const TablePaginated: React$1.ForwardRefExoticComponent<TablePaginatedProps<any> & React$1.RefAttributes<HTMLDivElement>>;
+
+type PivotTablePropsMeasure<T> = {
+    key: Extract<keyof T, string>;
+    label: string;
+    showAsPercentage?: boolean;
+    percentageDecimalPlaces?: number;
+    accessor?: (row: Record<string, any>) => any;
+    cell?: (props: {
+        value: any;
+        className?: string;
+    }) => ReactElement<HTMLTableCellElement>;
+};
+type PivotTablePropsRowDimension<T> = {
+    key: Extract<keyof T, string>;
+    label: string;
+    formatValue?: (value: any) => any;
+};
+type PivotTablePropsColumnDimension<T> = {
+    key: Extract<keyof T, string>;
+    label: string;
+    formatValue?: (value: any) => any;
+};
+type PivotTableProps<T> = {
+    data: T[];
+    measures: PivotTablePropsMeasure<T>[];
+    rowDimension: PivotTablePropsRowDimension<T>;
+    columnDimension: PivotTablePropsColumnDimension<T>;
+    progressive?: boolean;
+    batchSize?: number;
+    batchDelayMs?: number;
+    rowTotalsFor?: Array<Extract<keyof T, string>>;
+    columnTotalsFor?: Array<Extract<keyof T, string>>;
+    showColumnPercentages?: boolean;
+    totalLabel?: string;
+    percentageDecimalPlaces?: number;
+    columnWidth?: number;
+    firstColumnWidth?: number;
+    className?: string;
+};
+
+declare const PivotTable: FC<PivotTableProps<any>>;
+
+type HeatMapPropsDimension<T> = {
+    key: Extract<keyof T, string>;
+    label: string;
+    format?: (value: string) => string;
+};
+type HeatMapPropsMeasure<T> = {
+    key: Extract<keyof T, string>;
+    label: string;
+    format?: (value: number) => string;
+};
+type HeatMapPropsThreshold = string | number | `${number}%` | undefined;
+type HeatMapProps<T extends Record<string, unknown>> = {
+    data: T[];
+    measure: HeatMapPropsMeasure<T>;
+    rowDimension: HeatMapPropsDimension<T>;
+    columnDimension: HeatMapPropsDimension<T>;
+    showValues?: boolean;
+    className?: string;
+    displayNullAs?: string | number;
+    /** Color thresholds — number = raw value, "NN%" = percentage of [min..max]. */
+    minThreshold?: HeatMapPropsThreshold;
+    maxThreshold?: HeatMapPropsThreshold;
+    minColor: string;
+    midColor: string;
+    maxColor: string;
+    columnWidth?: number;
+    firstColumnWidth?: number;
+    missingCellColor?: string;
+};
+
+declare const HeatMap: <T extends Record<string, unknown>>({ data, showValues, className, columnDimension, rowDimension, measure, minThreshold, maxThreshold, minColor, midColor, maxColor, columnWidth, firstColumnWidth, displayNullAs, }: HeatMapProps<T>) => react_jsx_runtime.JSX.Element;
+
+type UseTableGetRowsPerPageProps = {
+    availableHeight: number;
+    headerHeight: number;
+    rowHeight: number;
+    footerHeight?: number;
+};
+declare const useTableGetRowsPerPage: ({ availableHeight, headerHeight, rowHeight, footerHeight, }: UseTableGetRowsPerPageProps) => number;
+
+declare const getTableTotalPages: (total: number | undefined, pageSize: number) => number | undefined;
+
+declare const getChartColors: () => string[];
+declare const getChartContrastColors: () => string[];
+
+declare const getChartjsAxisOptionsPlugins: () => Partial<ChartOptions["plugins"]>;
+declare const getChartjsAxisOptionsScalesTicksDefault: () => Partial<CartesianTickOptions>;
+declare const getChartjsAxisOptionsScalesTicksMuted: () => Partial<CartesianTickOptions>;
+declare const getChartjsAxisOptionsScalesTitle: () => any;
+declare const getChartjsAxisOptionsScalesGrid: () => Partial<GridLineOptions>;
+declare const getChartjsAxisOptionsScales: () => Partial<ChartOptions["scales"]>;
+declare const getChartjsAxisOptions: () => Partial<ChartOptions>;
+declare const chartjsAxisOptionsLayoutPadding: number;
+declare const getChartjsAxisOptionsScalesGridColor: (ctx: any) => string;
+
+declare const getStyle: (variableName: StylesKeys, fallbackValue?: string) => string;
+declare const getStyleNumber: (variableName: StylesKeys, fallbackValue?: string) => number | undefined;
+
+declare function useDebounce<T extends (...args: any[]) => void>(fn: T, delay?: number): (...args: Parameters<T>) => void;
+
+declare const useObserverHeight: (elRef: React.RefObject<HTMLDivElement | null>) => number;
+
+export { ActionIcon, BarChart, Button, ButtonIcon, Card, CardContent, CardFeedback, CardHeader, type CssSize, DonutChart, Dropdown, FieldFeedback, FieldHeader, GhostButton, HeatMap, type HeatMapProps, type HeatMapPropsDimension, type HeatMapPropsMeasure, type HeatMapPropsThreshold, KpiChart, LineChart, MultiSelectField, NumberField, Overlay, PieChart, PivotTable, type PivotTableProps, type PivotTablePropsColumnDimension, type PivotTablePropsMeasure, type PivotTablePropsRowDimension, SelectFieldCategory, SelectFieldContent, SelectFieldContentList, SelectFieldTrigger, SelectListOption, type SelectListOptionProps, SingleSelectField, Skeleton, Switch, TableHeaderAlign, type TableHeaderCell, type TableHeaderItem, type TableHeaderItemAlign, TablePaginated, type TablePaginatedProps, type TableSort, TableSortDirection, TextField, Typography, chartjsAxisOptionsLayoutPadding, getBarChartData, getBarChartOptions, getChartColors, getChartContrastColors, getChartjsAxisOptions, getChartjsAxisOptionsPlugins, getChartjsAxisOptionsScales, getChartjsAxisOptionsScalesGrid, getChartjsAxisOptionsScalesGridColor, getChartjsAxisOptionsScalesTicksDefault, getChartjsAxisOptionsScalesTicksMuted, getChartjsAxisOptionsScalesTitle, getDonutChartOptions, getLineChartData, getLineChartOptions, getPieChartData, getPieChartOptions, getStyle, getStyleNumber, getTableTotalPages, useDebounce, useObserverHeight, useTableGetRowsPerPage };