@blockscout/ui-toolkit 2.4.0-alpha → 2.4.0-alpha.1

package/README.md

@@ -34,6 +34,9 @@ Ensure you have the following peer dependencies installed:
     "@blockscout/ui-toolkit": "latest",
     "@chakra-ui/react": ">=3.15.0",
     "@emotion/react": ">=11.14.0",
+    "d3": ">=7.6.1",
+    "dayjs": ">=1.11.5",
+    "es-toolkit": ">=1.39.10",
     "next": ">=15.2.3",
     "next-themes": ">=0.4.4",
     "react": ">=18.3.1",

package/dist/chakra/link.d.ts

@@ -2,7 +2,7 @@ import { LinkProps as ChakraLinkProps } from '@chakra-ui/react';
 import { LinkProps as NextLinkProps } from 'next/link';
 import { default as React } from 'react';
 export declare const LinkExternalIcon: ({ color }: {
-    color?: ChakraLinkProps['color'];
+    color?: ChakraLinkProps["color"];
 }) => React.JSX.Element;
 interface LinkPropsChakra extends ChakraLinkProps {
     loading?: boolean;

package/dist/components/charts/Chart.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { AxesConfigFn, ChartMargin, TimeChartData, Resolution } from './types';
+export interface ChartProps {
+    charts: TimeChartData;
+    title: string;
+    zoomRange?: [Date, Date];
+    onZoom: (range: [Date, Date]) => void;
+    margin?: ChartMargin;
+    noAnimation?: boolean;
+    resolution?: Resolution;
+    axesConfig?: AxesConfigFn;
+    isEnlarged?: boolean;
+}
+export declare const Chart: React.MemoExoticComponent<({ isEnlarged, charts, onZoom, margin: marginProps, noAnimation, resolution, zoomRange, axesConfig: axesConfigProps, }: ChartProps) => React.JSX.Element>;

package/dist/components/charts/ChartFullscreenDialog.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { Resolution, TimeChartData } from './types';
+export interface Props {
+    open: boolean;
+    onOpenChange: ({ open }: {
+        open: boolean;
+    }) => void;
+    title: string;
+    description?: string;
+    charts: TimeChartData;
+    resolution?: Resolution;
+    zoomRange?: [Date, Date];
+    handleZoom: (range: [Date, Date]) => void;
+    handleZoomReset: () => void;
+}
+declare const FullscreenChartModal: ({ charts, open, onOpenChange, title, description, resolution, zoomRange, handleZoom, handleZoomReset, }: Props) => React.JSX.Element;
+export default FullscreenChartModal;

package/dist/components/charts/ChartWidget.d.ts

@@ -0,0 +1,18 @@
+import { FlexProps } from '@chakra-ui/react';
+import { default as React } from 'react';
+import { AxesConfigFn, TimeChartData } from './types';
+import { ChartMenuItemId } from './parts/ChartMenu';
+export interface ChartWidgetProps extends FlexProps {
+    charts: TimeChartData;
+    title: string;
+    description?: string;
+    isLoading: boolean;
+    isError: boolean;
+    emptyText?: string;
+    noAnimation?: boolean;
+    href?: string;
+    chartUrl?: string;
+    axesConfig?: AxesConfigFn;
+    menuItemIds?: Array<ChartMenuItemId>;
+}
+export declare const ChartWidget: React.MemoExoticComponent<({ charts, title, description, isLoading, isError, emptyText, noAnimation, href, chartUrl, axesConfig, menuItemIds, ...rest }: ChartWidgetProps) => React.JSX.Element>;

package/dist/components/charts/ChartWidgetContent.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { AxesConfigFn, Resolution, TimeChartData } from './types';
+export interface ChartWidgetContentProps {
+    charts: TimeChartData;
+    title: string;
+    isLoading?: boolean;
+    isError?: boolean;
+    empty?: boolean;
+    emptyText?: string;
+    zoomRange?: [Date, Date];
+    handleZoom: (range: [Date, Date]) => void;
+    isEnlarged?: boolean;
+    noAnimation?: boolean;
+    resolution?: Resolution;
+    axesConfig?: AxesConfigFn;
+}
+export declare const ChartWidgetContent: React.MemoExoticComponent<({ charts, title, isLoading, isError, empty, emptyText, zoomRange, handleZoom, isEnlarged, noAnimation, resolution, axesConfig, }: ChartWidgetContentProps) => React.JSX.Element>;

package/dist/components/charts/index.d.ts

@@ -0,0 +1,17 @@
+export * from './Chart';
+export * from './ChartWidget';
+export * from './ChartWidgetContent';
+export * from './parts/ChartArea';
+export * from './parts/ChartAxis';
+export * from './parts/ChartGridLine';
+export * from './parts/ChartLegend';
+export * from './parts/ChartLine';
+export * from './parts/ChartOverlay';
+export * from './parts/ChartSelectionX';
+export * from './parts/ChartTooltip';
+export * from './parts/ChartWatermark';
+export * from './utils/useChartBrushX';
+export * from './utils/useChartZoom';
+export * from './utils/useChartLegend';
+export * from './utils/useTimeChartController';
+export * from './types';

package/dist/components/charts/parts/ChartArea.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { TimeChartItem } from '../types';
+import * as d3 from 'd3';
+export interface ChartAreaProps extends React.SVGProps<SVGPathElement> {
+    id: string;
+    xScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
+    yScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
+    gradient: {
+        startColor: string;
+        stopColor: string;
+    };
+    data: Array<TimeChartItem>;
+    noAnimation?: boolean;
+}
+export declare const ChartArea: React.MemoExoticComponent<({ id, xScale, yScale, gradient, data, noAnimation, ...props }: ChartAreaProps) => React.JSX.Element>;

package/dist/components/charts/parts/ChartAxis.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import * as d3 from 'd3';
+export interface ChartAxisProps extends Omit<React.SVGProps<SVGGElement>, 'scale'> {
+    type: 'left' | 'bottom';
+    scale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
+    noAnimation?: boolean;
+    ticks: number;
+    tickFormatGenerator?: (axis: d3.Axis<d3.NumberValue>) => (domainValue: d3.AxisDomain, index: number) => string;
+    anchorEl?: SVGRectElement | null;
+}
+export declare const ChartAxis: React.MemoExoticComponent<({ type, scale, ticks, tickFormatGenerator, noAnimation, anchorEl, ...props }: ChartAxisProps) => React.JSX.Element>;

package/dist/components/charts/parts/ChartGridLine.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import * as d3 from 'd3';
+export interface ChartGridLineProps extends Omit<React.SVGProps<SVGGElement>, 'scale'> {
+    type: 'vertical' | 'horizontal';
+    scale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
+    noAnimation?: boolean;
+    size: number;
+    ticks: number;
+}
+export declare const ChartGridLine: React.MemoExoticComponent<({ type, scale, ticks, size, noAnimation, ...props }: ChartGridLineProps) => React.JSX.Element>;

package/dist/components/charts/parts/ChartLegend.d.ts

@@ -0,0 +1,9 @@
+import { BoxProps } from '@chakra-ui/react';
+import { default as React } from 'react';
+import { TimeChartData } from '../types';
+export interface ChartLegendProps extends BoxProps {
+    data: TimeChartData;
+    selectedIndexes?: Array<number>;
+    onItemClick?: (index: number) => void;
+}
+export declare const ChartLegend: React.MemoExoticComponent<({ data, selectedIndexes, onItemClick, ...props }: ChartLegendProps) => React.JSX.Element>;

package/dist/components/charts/parts/ChartLine.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { TimeChartItem } from '../types';
+import { AnimationType } from '../utils/animations';
+import * as d3 from 'd3';
+export interface ChartLineProps extends React.SVGProps<SVGPathElement> {
+    xScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
+    yScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
+    data: Array<TimeChartItem>;
+    animation: AnimationType;
+}
+export declare const ChartLine: React.MemoExoticComponent<({ xScale, yScale, data, animation, strokeDasharray, ...props }: ChartLineProps) => React.JSX.Element>;

package/dist/components/charts/parts/ChartMenu.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { Resolution, TimeChartData } from '../types';
+export declare const CHART_MENU_ITEMS_IDS: ("share" | "fullscreen" | "save_png" | "save_csv")[];
+export type ChartMenuItemId = (typeof CHART_MENU_ITEMS_IDS)[number];
+export interface Props {
+    itemIds?: Array<ChartMenuItemId>;
+    charts: TimeChartData;
+    title: string;
+    description?: string;
+    isLoading: boolean;
+    chartRef: React.RefObject<HTMLDivElement | null>;
+    chartUrl?: string;
+    resolution?: Resolution;
+    zoomRange?: [Date, Date];
+    handleZoom: (range: [Date, Date]) => void;
+    handleZoomReset: () => void;
+}
+declare const ChartMenu: ({ itemIds, charts, title, description, isLoading, chartRef, chartUrl, resolution, zoomRange, handleZoom, handleZoomReset, }: Props) => React.JSX.Element;
+export default ChartMenu;

package/dist/components/charts/parts/ChartOverlay.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface ChartOverlayProps {
+    width: number;
+    height: number;
+    children: React.ReactNode;
+}
+export declare const ChartOverlay: React.ForwardRefExoticComponent<ChartOverlayProps & React.RefAttributes<SVGRectElement>>;

package/dist/components/charts/parts/ChartSelectionX.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { TimeChartData } from '../types';
+import * as d3 from 'd3';
+export interface ChartSelectionXProps {
+    height: number;
+    anchorEl?: SVGRectElement | null;
+    scale: d3.ScaleTime<number, number>;
+    data: TimeChartData;
+    onSelect: (range: [Date, Date]) => void;
+}
+export declare const ChartSelectionX: React.MemoExoticComponent<({ anchorEl, height, scale, data, onSelect }: ChartSelectionXProps) => React.JSX.Element>;

package/dist/components/charts/parts/ChartTooltip.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { Resolution, TimeChartData } from '../types';
+import * as d3 from 'd3';
+export interface ChartTooltipProps {
+    width?: number;
+    tooltipWidth?: number;
+    height?: number;
+    data: TimeChartData;
+    xScale: d3.ScaleTime<number, number>;
+    yScale: d3.ScaleLinear<number, number>;
+    anchorEl: SVGRectElement | null;
+    noAnimation?: boolean;
+    resolution?: Resolution;
+}
+export declare const ChartTooltip: React.MemoExoticComponent<({ xScale, yScale, width, tooltipWidth, height, data, anchorEl, noAnimation, resolution, ...props }: ChartTooltipProps) => React.JSX.Element>;

package/dist/components/charts/parts/ChartWatermark.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from '@chakra-ui/react';
+import { default as React } from 'react';
+export declare const ChartWatermark: React.MemoExoticComponent<(props: IconProps) => React.JSX.Element>;

package/dist/components/charts/parts/tooltip/ChartTooltipBackdrop.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+declare const _default: React.MemoExoticComponent<() => React.JSX.Element>;
+export default _default;
+interface UseRenderBackdropParams {
+    seriesNum: number;
+    transitionDuration: number | null;
+}
+export declare function useRenderBackdrop(ref: React.RefObject<SVGGElement | null>, { seriesNum, transitionDuration }: UseRenderBackdropParams): (width: number, isIncompleteData: boolean) => void;

package/dist/components/charts/parts/tooltip/ChartTooltipContent.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+interface Props {
+    children: React.ReactNode;
+}
+declare const _default: React.MemoExoticComponent<({ children }: Props) => React.JSX.Element>;
+export default _default;
+interface UseRenderContentParams {
+    chart: {
+        width?: number;
+        height?: number;
+    };
+    transitionDuration: number | null;
+}
+export declare function useRenderContent(ref: React.RefObject<SVGGElement | null>, { chart, transitionDuration }: UseRenderContentParams): (x: number, y: number) => void;

package/dist/components/charts/parts/tooltip/ChartTooltipLine.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+declare const _default: React.MemoExoticComponent<() => React.JSX.Element>;
+export default _default;
+export declare function useRenderLine(ref: React.RefObject<SVGGElement | null>, chartHeight: number | undefined): (x: number) => void;

package/dist/components/charts/parts/tooltip/ChartTooltipPoint.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { TimeChartData, TimeChartItem } from '../../types';
+import * as d3 from 'd3';
+declare const _default: React.MemoExoticComponent<() => React.JSX.Element>;
+export default _default;
+interface UseRenderPointsParams {
+    data: TimeChartData;
+    xScale: d3.ScaleTime<number, number>;
+    yScale: d3.ScaleLinear<number, number>;
+}
+export interface CurrentPoint {
+    datumIndex: number;
+    item: TimeChartItem;
+}
+interface RenderPointsReturnType {
+    x: number;
+    y: number;
+    currentPoints: Array<CurrentPoint>;
+}
+export declare function useRenderPoints(ref: React.RefObject<SVGGElement | null>, params: UseRenderPointsParams): (x: number) => RenderPointsReturnType;

package/dist/components/charts/parts/tooltip/ChartTooltipRow.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { TimeChartData } from '../../types';
+import { CurrentPoint } from './ChartTooltipPoint';
+import * as d3 from 'd3';
+type Props = {
+    lineNum: number;
+} & ({
+    label: string;
+    children?: never;
+} | {
+    children: React.ReactNode;
+    label?: never;
+});
+declare const _default: React.MemoExoticComponent<({ label, lineNum, children }: Props) => React.JSX.Element>;
+export default _default;
+interface UseRenderRowsParams {
+    data: TimeChartData;
+    xScale: d3.ScaleTime<number, number>;
+    minWidth: number;
+}
+interface UseRenderRowsReturnType {
+    width: number;
+}
+export declare function useRenderRows(ref: React.RefObject<SVGGElement | null>, { data, xScale, minWidth }: UseRenderRowsParams): (x: number, currentPoints: Array<CurrentPoint>) => UseRenderRowsReturnType;

package/dist/components/charts/parts/tooltip/ChartTooltipTitle.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { Resolution } from '../../types';
+declare const _default: React.MemoExoticComponent<({ resolution }: {
+    resolution?: Resolution;
+}) => React.JSX.Element>;
+export default _default;
+export declare function useRenderTitle(ref: React.RefObject<SVGGElement | null>): (isVisible: boolean) => void;

package/dist/components/charts/parts/tooltip/pointerTracker.d.ts

@@ -0,0 +1,13 @@
+export interface Pointer {
+    id: number;
+    point: [number, number] | null;
+    prev: [number, number] | null;
+    sourceEvent?: PointerEvent;
+}
+export interface PointerOptions {
+    start?: (tracker: Pointer) => void;
+    move?: (tracker: Pointer) => void;
+    out?: (tracker: Pointer) => void;
+    end?: (tracker: Pointer) => void;
+}
+export declare function trackPointer(event: PointerEvent, { start, move, out, end }: PointerOptions): number;

package/dist/components/charts/parts/tooltip/utils.d.ts

@@ -0,0 +1,7 @@
+export declare const TEXT_LINE_HEIGHT = 12;
+export declare const PADDING = 16;
+export declare const LINE_SPACE = 10;
+export declare const POINT_SIZE = 16;
+export declare const LABEL_WIDTH = 80;
+export declare const calculateContainerHeight: (seriesNum: number, isIncomplete?: boolean) => number;
+export declare const calculateRowTransformValue: (rowNum: number) => string;

package/dist/components/charts/types.d.ts

@@ -0,0 +1,67 @@
+import { Resolution as ResolutionEnum } from '@blockscout/stats-types';
+import type * as d3 from 'd3';
+export { Resolution } from '@blockscout/stats-types';
+export declare const RESOLUTION_LABELS: Array<{
+    id: ResolutionEnum;
+    title: string;
+}>;
+export interface TimeChartItemRaw {
+    date: Date;
+    dateLabel?: string;
+    value: number | string | null;
+}
+export interface TimeChartItem {
+    date: Date;
+    date_to?: Date;
+    dateLabel?: string;
+    value: number;
+    isApproximate?: boolean;
+}
+export interface ChartMargin {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+export interface ChartOffset {
+    x?: number;
+    y?: number;
+}
+export type ChartConfig = {
+    type: 'line';
+    color: string;
+    strokeWidth?: number;
+    strokeDasharray?: string;
+} | {
+    type: 'area';
+    gradient: {
+        startColor: string;
+        stopColor: string;
+    };
+};
+export interface TimeChartDataItem {
+    id: string;
+    name: string;
+    items: Array<TimeChartItem>;
+    charts: Array<ChartConfig>;
+    units?: string;
+    valueFormatter?: (value: number) => string;
+}
+export type TimeChartData = Array<TimeChartDataItem>;
+export interface AxisConfig {
+    ticks?: number;
+    nice?: boolean;
+    noLabel?: boolean;
+    scale?: {
+        min?: number;
+    };
+    tickFormatter?: () => (d: d3.AxisDomain) => string;
+}
+export interface AxesConfig {
+    x?: AxisConfig;
+    y?: AxisConfig;
+}
+export type AxesConfigFn = (props: {
+    isEnlarged?: boolean;
+    isMobile?: boolean;
+}) => AxesConfig;

package/dist/components/charts/utils/animations.d.ts

@@ -0,0 +1,5 @@
+export type AnimationType = 'left' | 'fadeIn' | 'none';
+export declare const animateLeft: (path: SVGPathElement) => void;
+export declare const animateFadeIn: (path: SVGPathElement) => void;
+export declare const noneAnimation: (path: SVGPathElement) => void;
+export declare const ANIMATIONS: Record<AnimationType, (path: SVGPathElement) => void>;

package/dist/components/charts/utils/calculateInnerSize.d.ts

@@ -0,0 +1,5 @@
+import { ChartMargin, ChartOffset } from '../types';
+export declare function calculateInnerSize(rect: DOMRect | null, margin?: ChartMargin, offsets?: ChartOffset): {
+    innerWidth: number;
+    innerHeight: number;
+};

package/dist/components/charts/utils/formatters.d.ts

@@ -0,0 +1,2 @@
+import { TimeChartItem } from '../types';
+export declare const getIncompleteDataLineSource: (data: Array<TimeChartItem>) => Array<TimeChartItem>;

package/dist/components/charts/utils/getDateLabel.d.ts

@@ -0,0 +1,2 @@
+import { Resolution } from '../types';
+export declare function getDateLabel(date: Date, dateTo?: Date, resolution?: Resolution): string;

package/dist/components/charts/utils/timeChartAxis.d.ts

@@ -0,0 +1,22 @@
+import { AxesConfig, TimeChartData } from '../types';
+import * as d3 from 'd3';
+export declare const DEFAULT_MAXIMUM_SIGNIFICANT_DIGITS = 2;
+export declare const DEFAULT_MAXIMUM_FRACTION_DIGITS = 3;
+export declare const MAXIMUM_SIGNIFICANT_DIGITS_LIMIT = 8;
+export declare const DEFAULT_LABEL_LENGTH = 5;
+export interface LabelFormatParams extends Intl.NumberFormatOptions {
+    maxLabelLength: number;
+}
+type Data = TimeChartData;
+export declare function getAxesParams(data: Data, axesConfig?: AxesConfig): {
+    x: {
+        scale: d3.ScaleTime<number, number, never>;
+        tickFormatter: (axis: d3.Axis<d3.NumberValue>) => (d: d3.AxisDomain) => string;
+    };
+    y: {
+        scale: d3.ScaleLinear<number, number, never>;
+        labelFormatParams: LabelFormatParams;
+        tickFormatter: () => (d: d3.AxisDomain) => string;
+    };
+};
+export {};

package/dist/components/charts/utils/useChartBrushX.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    limits: [[number, number], [number, number]];
+    anchor: SVGSVGElement | null;
+    setRange: (range: [number, number]) => void;
+}
+export declare function useChartBrushX({ limits, anchor, setRange }: Props): void;
+export {};

package/dist/components/charts/utils/useChartLegend.d.ts

@@ -0,0 +1,4 @@
+export declare function useChartLegend(dataLength: number): {
+    selectedLines: number[];
+    handleLegendItemClick: (index: number) => void;
+};

package/dist/components/charts/utils/useChartZoom.d.ts

@@ -0,0 +1,6 @@
+export declare function useChartZoom(): {
+    isZoomResetInitial: boolean;
+    zoomRange: [Date, Date] | undefined;
+    handleZoom: (range: [Date, Date]) => void;
+    handleZoomReset: () => void;
+};

package/dist/components/charts/utils/useTimeChartController.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+import { AxesConfig, ChartMargin, TimeChartData } from '../types';
+interface Props {
+    data: TimeChartData;
+    margin?: ChartMargin;
+    axesConfig?: AxesConfig;
+}
+export declare function useTimeChartController({ data, margin, axesConfig }: Props): {
+    rect: DOMRect | null;
+    ref: React.LegacyRef<SVGSVGElement> | undefined;
+    chartMargin: {
+        left: number;
+        top?: number;
+        right?: number;
+        bottom?: number;
+    };
+    innerWidth: number;
+    innerHeight: number;
+    axes: {
+        x: {
+            tickFormatter: (axis: d3.Axis<d3.NumberValue>) => (d: d3.AxisDomain) => string;
+            scale: import('d3-scale').ScaleTime<number, number, never>;
+        };
+        y: {
+            tickFormatter: () => (d: d3.AxisDomain) => string;
+            scale: import('d3-scale').ScaleLinear<number, number, never>;
+        };
+    };
+};
+export {};

package/dist/components/forms/fields/FormFieldAddress.d.ts

@@ -2,4 +2,6 @@ import { default as React } from 'react';
 import { FieldValues } from 'react-hook-form';
 import { FormFieldPropsBase } from './types';
 import { PartialBy } from '../../../../types/utils';
-export declare const FormFieldAddress: <FormFields extends FieldValues>(props: PartialBy<FormFieldPropsBase<FormFields>, 'placeholder'>) => React.JSX.Element;
+declare const FormFieldAddressContent: <FormFields extends FieldValues>(props: PartialBy<FormFieldPropsBase<FormFields>, "placeholder">) => React.JSX.Element;
+export declare const FormFieldAddress: typeof FormFieldAddressContent;
+export {};

package/dist/components/forms/fields/FormFieldCheckbox.d.ts

@@ -5,4 +5,6 @@ import { CheckboxProps } from '../../../chakra/checkbox';
 export interface FormFieldCheckboxProps<FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>> extends Pick<FormFieldPropsBase<FormFields, Name>, 'rules' | 'name' | 'onChange' | 'readOnly' | 'controllerProps'>, Omit<CheckboxProps, 'name' | 'onChange'> {
     label: string;
 }
-export declare const FormFieldCheckbox: <FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>>({ name, label, rules, onChange, readOnly, controllerProps, ...rest }: FormFieldCheckboxProps<FormFields, Name>) => React.JSX.Element;
+declare const FormFieldCheckboxContent: <FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>>({ name, label, rules, onChange, readOnly, controllerProps, ...rest }: FormFieldCheckboxProps<FormFields, Name>) => React.JSX.Element;
+export declare const FormFieldCheckbox: typeof FormFieldCheckboxContent;
+export {};

package/dist/components/forms/fields/FormFieldCheckboxGroup.d.ts

@@ -9,4 +9,6 @@ export interface FormFieldCheckboxGroupProps<FormFields extends FieldValues, Nam
     }>;
     itemProps?: CheckboxProps;
 }
-export declare const FormFieldCheckboxGroup: <FormFields extends FieldValues, Name extends Path<FormFields>>(props: FormFieldCheckboxGroupProps<FormFields, Name>) => React.JSX.Element;
+declare const FormFieldCheckboxGroupContent: <FormFields extends FieldValues, Name extends Path<FormFields>>(props: FormFieldCheckboxGroupProps<FormFields, Name>) => React.JSX.Element;
+export declare const FormFieldCheckboxGroup: typeof FormFieldCheckboxGroupContent;
+export {};

package/dist/components/forms/fields/FormFieldColor.d.ts

@@ -5,4 +5,6 @@ import { FormFieldPropsBase } from './types';
 export interface FormFieldColorProps<FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>> extends FormFieldPropsBase<FormFields, Name> {
     sampleDefaultBgColor?: BoxProps['bgColor'];
 }
-export declare const FormFieldColor: <FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>>({ name, placeholder, rules, onBlur, group, inputProps, size, disabled, sampleDefaultBgColor, controllerProps, ...restProps }: FormFieldColorProps<FormFields, Name>) => React.JSX.Element;
+declare const FormFieldColorContent: <FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>>({ name, placeholder, rules, onBlur, group, inputProps, size, disabled, sampleDefaultBgColor, controllerProps, ...restProps }: FormFieldColorProps<FormFields, Name>) => React.JSX.Element;
+export declare const FormFieldColor: typeof FormFieldColorContent;
+export {};

package/dist/components/forms/fields/FormFieldEmail.d.ts

@@ -2,4 +2,6 @@ import { default as React } from 'react';
 import { FieldValues } from 'react-hook-form';
 import { FormFieldPropsBase } from './types';
 import { PartialBy } from '../../../../types/utils';
-export declare const FormFieldEmail: <FormFields extends FieldValues>(props: PartialBy<FormFieldPropsBase<FormFields>, 'placeholder'>) => React.JSX.Element;
+declare const FormFieldEmailContent: <FormFields extends FieldValues>(props: PartialBy<FormFieldPropsBase<FormFields>, "placeholder">) => React.JSX.Element;
+export declare const FormFieldEmail: typeof FormFieldEmailContent;
+export {};

package/dist/components/forms/fields/FormFieldNumber.d.ts

@@ -1,4 +1,6 @@
 import { default as React } from 'react';
 import { FieldValues } from 'react-hook-form';
 import { FormFieldPropsBase } from './types';
-export declare const FormFieldNumber: <FormFields extends FieldValues>({ inputProps, ...rest }: FormFieldPropsBase<FormFields>) => React.JSX.Element;
+declare const FormFieldNumberContent: <FormFields extends FieldValues>({ inputProps, ...rest }: FormFieldPropsBase<FormFields>) => React.JSX.Element;
+export declare const FormFieldNumber: typeof FormFieldNumberContent;
+export {};

package/dist/components/forms/fields/FormFieldRadio.d.ts

@@ -11,4 +11,6 @@ export interface FormFieldRadioProps<FormFields extends FieldValues, Name extend
     }>;
     itemProps?: RadioProps;
 }
-export declare const FormFieldRadio: <FormFields extends FieldValues, Name extends Path<FormFields>>({ name, options, itemProps, onValueChange, disabled, controllerProps, ...rest }: FormFieldRadioProps<FormFields, Name>) => React.JSX.Element;
+declare const FormFieldRadioContent: <FormFields extends FieldValues, Name extends Path<FormFields>>({ name, options, itemProps, onValueChange, disabled, controllerProps, ...rest }: FormFieldRadioProps<FormFields, Name>) => React.JSX.Element;
+export declare const FormFieldRadio: typeof FormFieldRadioContent;
+export {};

package/dist/components/forms/fields/FormFieldSelect.d.ts

@@ -3,4 +3,6 @@ import { Path, FieldValues } from 'react-hook-form';
 import { FormFieldPropsBase } from './types';
 import { SelectProps } from '../../../chakra/select';
 export type FormFieldSelectProps<FormFields extends FieldValues, Name extends Path<FormFields>> = FormFieldPropsBase<FormFields, Name> & SelectProps;
-export declare const FormFieldSelect: <FormFields extends FieldValues, Name extends Path<FormFields>>(props: FormFieldSelectProps<FormFields, Name>) => React.JSX.Element;
+declare const FormFieldSelectContent: <FormFields extends FieldValues, Name extends Path<FormFields>>(props: FormFieldSelectProps<FormFields, Name>) => React.JSX.Element;
+export declare const FormFieldSelect: typeof FormFieldSelectContent;
+export {};

package/dist/components/forms/fields/FormFieldSelectAsync.d.ts

@@ -3,4 +3,6 @@ import { Path, FieldValues } from 'react-hook-form';
 import { FormFieldPropsBase } from './types';
 import { SelectAsyncProps } from '../../../chakra/select';
 export type FormFieldSelectAsyncProps<FormFields extends FieldValues, Name extends Path<FormFields>> = FormFieldPropsBase<FormFields, Name> & SelectAsyncProps;
-export declare const FormFieldSelectAsync: <FormFields extends FieldValues, Name extends Path<FormFields>>(props: FormFieldSelectAsyncProps<FormFields, Name>) => React.JSX.Element;
+declare const FormFieldSelectAsyncContent: <FormFields extends FieldValues, Name extends Path<FormFields>>(props: FormFieldSelectAsyncProps<FormFields, Name>) => React.JSX.Element;
+export declare const FormFieldSelectAsync: typeof FormFieldSelectAsyncContent;
+export {};

package/dist/components/forms/fields/FormFieldSwitch.d.ts

@@ -3,4 +3,6 @@ import { FieldValues, Path } from 'react-hook-form';
 import { FormFieldPropsBase } from './types';
 import { SwitchProps } from '../../../chakra/switch';
 export type FormFieldSwitchProps<FormFields extends FieldValues, Name extends Path<FormFields>> = Pick<FormFieldPropsBase<FormFields, Name>, 'name' | 'placeholder' | 'rules' | 'controllerProps'> & SwitchProps;
-export declare const FormFieldSwitch: <FormFields extends FieldValues, Name extends Path<FormFields>>({ name, placeholder, onCheckedChange, rules, controllerProps, disabled, ...rest }: FormFieldSwitchProps<FormFields, Name>) => React.JSX.Element;
+declare const FormFieldSwitchContent: <FormFields extends FieldValues, Name extends Path<FormFields>>({ name, placeholder, onCheckedChange, rules, controllerProps, disabled, ...rest }: FormFieldSwitchProps<FormFields, Name>) => React.JSX.Element;
+export declare const FormFieldSwitch: typeof FormFieldSwitchContent;
+export {};

package/dist/components/forms/fields/FormFieldText.d.ts

@@ -4,4 +4,6 @@ import { FormFieldPropsBase } from './types';
 export interface FormFieldTextProps<FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>> extends FormFieldPropsBase<FormFields, Name> {
     asComponent?: 'Input' | 'Textarea';
 }
-export declare const FormFieldText: <FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>>({ name, placeholder, rules, onBlur, group, inputProps, asComponent, size: sizeProp, disabled, floating: floatingProp, controllerProps, ...restProps }: FormFieldTextProps<FormFields, Name>) => React.JSX.Element;
+declare const FormFieldTextContent: <FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>>({ name, placeholder, rules, onBlur, group, inputProps, asComponent, size: sizeProp, disabled, floating: floatingProp, controllerProps, ...restProps }: FormFieldTextProps<FormFields, Name>) => React.JSX.Element;
+export declare const FormFieldText: typeof FormFieldTextContent;
+export {};