@rfkit/charts 1.3.12 → 1.4.0

package/README.md

@@ -8,6 +8,63 @@
 pnpm add @rfkit/charts
 ```
 
+## 主题与 Tailwind 集成
+
+默认情况下，消费方只需要安装并直接使用组件：
+
+```ts
+import { Spectrum } from '@rfkit/charts';
+```
+
+本库发布产物已经默认携带新 UI 所需的样式，并会自动注入 charts 侧需要的主题 / 尺寸变量定义。外部项目不需要再额外引入 `tailwind-bridge.css` 才能让组件正常显示。
+
+也就是说，默认推荐接法仍然是：
+
+```ts
+import { Spectrum } from '@rfkit/charts';
+```
+
+如果你的应用已经在使用 `@rfkit/theme`，接法也不需要改。charts 会只读根节点上的这两个契约标识：
+
+- `theme`
+- `theme-follow-OS`
+
+也就是说，外部继续这样初始化即可：
+
+```ts
+import {
+  initTheme,
+  toggleTheme,
+  toggleThemeMode
+} from '@rfkit/theme';
+
+initTheme();
+toggleTheme();
+toggleThemeMode();
+```
+
+`initChartsTheme()` 现在主要用于两个场景：
+
+- 你想覆盖 charts 默认的 `themeConfigs` / `sizeConfigs`
+- 你想通过 `subscribeThemeChange` 订阅 charts 解析后的主题状态
+
+只有在外部项目自己也使用 `Tailwind CSS v4 + shadcn/ui`，并且希望复用本库这套语义 token 时，才需要额外引入 bridge：
+
+```css
+@import "tailwindcss";
+@import "@rfkit/charts/tailwind-bridge.css";
+```
+
+说明：
+
+- 默认包入口已经自动携带组件运行所需样式，并自动注入 charts 侧默认主题 / 尺寸变量
+- charts 默认只读取 `theme` / `theme-follow-OS`，不再把自己当主题真源
+- `@rfkit/charts/tailwind-bridge.css` 只提供 Tailwind/shadcn 语义 token 复用能力，不包含全局 reset
+- 如果外部项目继续使用 `@rfkit/theme` 的 `initTheme()` / `toggleTheme()` / `toggleThemeMode()`，charts 会自动跟随刷新
+- 更完整的主题桥接说明见 [docs/theme-migration.md](/Users/hugh/workspace/github/rfkit-charts/docs/theme-migration.md)
+
+更多项目说明见：[docs/README.md](/Users/hugh/workspace/github/rfkit-charts/docs/README.md)
+
 ## 基本使用
 
 ```jsx

package/components/AxisY/spectrum/controls/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AutorangingControl } from './AutorangingControl';
+export { default as StepControl } from './StepControl';
+export { default as UnitControl } from './UnitControl';

package/components/AxisY/spectrum/index.d.ts

@@ -1,9 +1,10 @@
 import type React from 'react';
 import type { RenderChartType } from '../../../types';
-import { useRangeAutoFocus } from './useRanging/ranging';
 interface Props {
     chart: RenderChartType;
 }
 declare const AxisYSpectrum: React.FC<Props>;
 export default AxisYSpectrum;
-export { useRangeAutoFocus };
+export * from './controls';
+export * from './presenters';
+export * from './useRanging';

package/components/AxisY/spectrum/{components/Ticks → presenters/TicksPanel}/index.d.ts

@@ -7,12 +7,12 @@ interface RangeProps {
         isHand: string;
     }) => void;
     moveBoundary?: (isUP: boolean, isTop: boolean) => void;
-    setAxisY(e: {
+    setAxisY(event: {
         realRange: AxisYRange;
     }): unknown;
 }
 interface Props {
     ranging: RangeProps;
 }
-declare const Ticks: React.FC<Props>;
-export default Ticks;
+declare const TicksPanel: React.FC<Props>;
+export default TicksPanel;

package/components/AxisY/spectrum/presenters/index.d.ts

@@ -0,0 +1 @@
+export { default as TicksPanel } from './TicksPanel';

package/components/AxisY/spectrum/useRanging/index.d.ts

@@ -1,7 +1,10 @@
+import { useVirtualRange } from './tools';
 import type { RenderChartType } from '../../../../types';
-import Ranging from './ranging';
+import Ranging, { RangeController, useRangeAutoFocus, useRangeMove, useRangeSet } from './ranging';
+import { getVirtualLevel, range2realRange } from './tools';
 interface Props {
     chart: RenderChartType;
 }
 declare const useRange: ({ chart }: Props) => Ranging;
 export default useRange;
+export { getVirtualLevel, RangeController, range2realRange, useRangeAutoFocus, useRangeMove, useRangeSet, useVirtualRange };

package/components/AxisY/spectrum/useRanging/ranging.d.ts

@@ -4,7 +4,7 @@ import type { AxisYRange, RecursiveFunction, RecursiveObject } from '../../../..
  *
  * @class Range
  */
-export default class Range {
+declare class RangeController {
     state: RecursiveObject;
     constructor(props: RecursiveObject);
     /**
@@ -47,3 +47,5 @@ export default class Range {
 export declare const useRangeAutoFocus: (id: string, func?: RecursiveFunction) => (...args: any[]) => void;
 export declare const useRangeMove: (globalID: string, func?: RecursiveFunction) => (...args: any[]) => void;
 export declare const useRangeSet: (globalID: string, func?: RecursiveFunction) => (...args: any[]) => void;
+export { RangeController };
+export default RangeController;

package/components/AxisYByCanvas/useCanvasAxisY.d.ts

@@ -1,6 +1,6 @@
-import type Range from '../AxisY/spectrum/useRanging/ranging';
+import type { RangeController } from '../AxisY/spectrum/useRanging';
 interface CanvasAxisYOptions {
-    ranging?: Range;
+    ranging?: RangeController;
 }
 interface TickData {
     value: number;

package/components/Cursor/registry.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+import { ModuleType } from '../../config';
+export declare const resolveCursorPopover: ({ id, mode, type }: {
+    id: string;
+    mode?: ModuleType;
+    type: ModuleType;
+}) => React.ReactNode;

package/components/DragSelectBox/index.d.ts

@@ -3,12 +3,14 @@
  * 用于创建可拖拽、可调整大小的矩形框
  */
 import type React from 'react';
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { type RectPosition } from '../../hooks/useDragSelect';
 export interface DragSelectBoxProps {
     enabled: boolean;
     defaultRect?: Partial<RectPosition>;
     minSize?: number;
+    minWidth?: number;
+    minHeight?: number;
     maxSize?: number;
     snapThreshold?: number;
     onChange?: (rect: RectPosition) => void;

package/components/FrequencyAllocation/index.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
-import AllocationInfo from './AllocationInfo';
+import { AllocationInfo } from './presenters';
+export { useAllocationFinder } from './model';
 export { AllocationInfo };
-export { useAllocationFinder } from './useAllocationFinder';
 declare const FrequencyAllocation: React.FC;
 export default FrequencyAllocation;

package/components/FrequencyAllocation/model/index.d.ts

@@ -0,0 +1,4 @@
+export { resolveFrequencyAllocationData } from './resolveFrequencyAllocationData';
+export { type FrequencyAllocationSegmentData, findFrequencyAllocationAtCursor, resolveFrequencyAllocationRange, resolveFrequencyAllocationSegments } from './resolver';
+export { useAllocationAtCursor, useAllocationFinder } from './useAllocationAtCursor';
+export { useFrequencyAllocationData } from './useFrequencyAllocationData';

package/components/FrequencyAllocation/model/resolveFrequencyAllocationData.d.ts

@@ -0,0 +1,2 @@
+import type { FrequencyAllocationItem } from '../../../types';
+export declare function resolveFrequencyAllocationData(data?: FrequencyAllocationItem[]): FrequencyAllocationItem[];

package/components/FrequencyAllocation/model/resolver.d.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties } from 'react';
+import type { FrequencyAllocationItem, SegmentType } from '../../../types';
+import type { BandPosition, FrequencyRange } from '../types';
+export interface FrequencyAllocationSegmentData {
+    segment: SegmentType;
+    segmentIndex: number;
+    bandPositions: BandPosition[];
+    style: CSSProperties;
+}
+export declare const resolveFrequencyAllocationRange: (band: FrequencyAllocationItem) => FrequencyRange | null;
+export declare const resolveFrequencyAllocationSegments: ({ segments, allocations }: {
+    segments: SegmentType[];
+    allocations: FrequencyAllocationItem[];
+}) => FrequencyAllocationSegmentData[];
+export declare const findFrequencyAllocationAtCursor: ({ allocations, frequency }: {
+    allocations: FrequencyAllocationItem[];
+    frequency: number;
+}) => FrequencyAllocationItem | undefined;

package/components/FrequencyAllocation/model/useAllocationAtCursor.d.ts

@@ -0,0 +1,6 @@
+interface UseAllocationFinderProps {
+    frequency: string;
+}
+export declare function useAllocationAtCursor({ frequency }: UseAllocationFinderProps): import("../../..").FrequencyAllocationItem;
+export declare const useAllocationFinder: typeof useAllocationAtCursor;
+export {};

package/components/FrequencyAllocation/model/useFrequencyAllocationData.d.ts

@@ -0,0 +1 @@
+export declare function useFrequencyAllocationData(): import("../../..").FrequencyAllocationItem[];

package/components/FrequencyAllocation/overlays/Tooltip/index.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { TooltipState } from '../../types';
+declare const Tooltip: React.FC<TooltipState>;
+export default Tooltip;

package/components/FrequencyAllocation/overlays/index.d.ts

@@ -0,0 +1 @@
+export { default as AllocationTooltip } from './Tooltip';

package/components/FrequencyAllocation/{AllocationInfo → presenters/AllocationInfo}/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { FrequencyAllocationItem } from '../../../types';
+import type { FrequencyAllocationItem } from '../../../../types';
 interface Props {
     allocationInfo?: FrequencyAllocationItem & {
         startFrequency?: string | number;

package/components/FrequencyAllocation/presenters/AllocationSegments/index.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+import type { BandPosition, FrequencyRange } from '../../types';
+import type { FrequencyAllocationItem } from '../../../../types';
+interface AllocationSegmentsProps {
+    style: React.CSSProperties;
+    bandPositions: BandPosition[];
+    onMouseEnter: (band: FrequencyAllocationItem, range: FrequencyRange) => (event: React.MouseEvent) => void;
+    onMouseMove: (event: React.MouseEvent) => void;
+    onMouseLeave: () => void;
+}
+declare const AllocationSegments: React.FC<AllocationSegmentsProps>;
+export default AllocationSegments;

package/components/FrequencyAllocation/presenters/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AllocationInfo } from './AllocationInfo';
+export { default as AllocationSegments } from './AllocationSegments';

package/components/FrequencyDataBoard/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useStationFinder, useStationInfoAtCursor } from './useStationInfoAtCursor';

package/components/FrequencyDataBoard/hooks/useStationInfoAtCursor.d.ts

@@ -0,0 +1 @@
+export { useStationFinder, useStationInfoAtCursor } from '../../Signal/model';

package/components/FrequencyDataBoard/index.d.ts

@@ -6,6 +6,7 @@ interface Props {
         frequency: string;
     }) => void;
     updateKey?: number;
+    showStationInfo?: boolean;
 }
 declare const _default: React.NamedExoticComponent<Props>;
 export default _default;

package/components/FrequencyDataBoard/{StationInfo → panels/StationInfoPanel}/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { StationInfoType } from '../../../types';
+import type { StationInfoType } from '../../../../types';
 interface Props {
     stationInfo?: StationInfoType;
 }

package/components/FrequencyDataBoard/panels/index.d.ts

@@ -0,0 +1 @@
+export { default as StationInfoPanel } from './StationInfoPanel';

package/components/FrequencyTagLine/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { ToolType } from '../../config';
 import FrequencyTagLineBoard from './Board';
 import FrequencyTagLineSwitch from './Switch';
-export { FrequencyTagLineSwitch, FrequencyTagLineBoard };
+export { FrequencyTagLineBoard, FrequencyTagLineSwitch };
 export declare const COMPONENT_KEY = ToolType.FrequencyTagLine;
 interface Props {
     id: string;

package/components/GridLines/OccupancyDashed/index.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+declare const OccupancyDashed: React.FC;
+export default OccupancyDashed;

package/components/{Dropdown → Overlay/Dropdown}/index.d.ts

@@ -1,17 +1,25 @@
 import type React from 'react';
 export interface DropdownOption {
-    value: string | number | null;
-    label: string;
+    type?: 'item' | 'separator';
+    value?: string | number | null;
+    label?: string;
     style?: React.CSSProperties;
     render?: () => React.ReactNode;
     disabled?: boolean;
+    onSelect?: (value: string | number | null) => void;
 }
 interface DropdownProps {
     value: string | number | null;
     options: DropdownOption[];
     onChange?: (value: string | number | null) => void;
     placeholder?: string | React.ReactNode;
+    triggerContent?: React.ReactNode;
+    triggerTitle?: React.ReactNode;
     closeOnSelect?: boolean;
+    triggerVariant?: 'default' | 'plain';
+    showChevron?: boolean;
+    triggerClassName?: string;
+    contentClassName?: string;
 }
 declare const Dropdown: React.FC<DropdownProps>;
 export default Dropdown;

package/components/{Tooltip → Overlay/Tooltip}/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 type TooltipTriggerProps = React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>;
 type TooltipTriggerElement = React.ReactElement<TooltipTriggerProps>;
 interface TooltipProps {

package/components/Overlay/index.d.ts

@@ -0,0 +1,4 @@
+export { type DropdownOption, default as Dropdown } from './Dropdown';
+export { default as Popover } from './Popover';
+export { default as Portal } from './Portal';
+export { default as Tooltip } from './Tooltip';

package/components/Signal/index.d.ts

@@ -1,7 +1,8 @@
 import type React from 'react';
 import SignalSwitch from './Switch';
+export { useStationFinder } from './model';
+export { useSignalDataManager } from './useSignalDataManager';
 export { SignalSwitch };
-export { useStationFinder } from './useStationFinder';
 interface Props {
     left?: number;
     show?: boolean;

package/components/Signal/metadata/index.d.ts

@@ -0,0 +1 @@
+export { SIGNAL_TYPE_MAP, SignalType, signalTypeMap } from './signalType';

package/components/Signal/model/index.d.ts

@@ -0,0 +1,3 @@
+export { findStationAtCursor, resolveSignalMatchCandidates, resolveSignalPositions, resolveSignalSegments, type SignalPosition, type SignalSegmentData } from './resolver';
+export { useStationFinder, useStationInfoAtCursor } from './useStationInfoAtCursor';
+export { useUnifiedSignals } from './useUnifiedSignals';

package/components/Signal/model/resolver.d.ts

@@ -0,0 +1,40 @@
+import type { CSSProperties } from 'react';
+import type { SegmentType, StationInfoType } from '../../../types';
+import { type SignalMatchCandidate, type UnifiedSignalItem } from '../utils';
+export interface SignalPosition extends SignalMatchCandidate {
+    key: string;
+    position: {
+        left: string;
+        width: string;
+    };
+    color: string;
+    tooltip?: string;
+}
+export interface SignalSegmentData {
+    segment: SegmentType;
+    segmentIndex: number;
+    signalPositions: SignalPosition[];
+    activeSignalKey?: string;
+    style: CSSProperties;
+}
+export declare const resolveSignalMatchCandidates: (signalItems: UnifiedSignalItem[], segment: SegmentType) => SignalMatchCandidate[];
+export declare const resolveSignalPositions: (signalItems: UnifiedSignalItem[], segment: SegmentType) => SignalPosition[];
+export declare const resolveSignalSegments: ({ segments, signalItems, isCursorActive, currentFrequency, currentPosition }: {
+    segments: SegmentType[];
+    signalItems: UnifiedSignalItem[];
+    isCursorActive: boolean;
+    currentFrequency: number;
+    currentPosition: {
+        segmentIndex: number;
+        pointIndex: number;
+    };
+}) => SignalSegmentData[];
+export declare const findStationAtCursor: ({ frequency, signalItems, segments, currentPosition }: {
+    frequency: number;
+    signalItems: UnifiedSignalItem[];
+    segments: SegmentType[];
+    currentPosition: {
+        segmentIndex: number;
+        pointIndex: number;
+    };
+}) => StationInfoType | undefined;

package/components/Signal/model/useStationInfoAtCursor.d.ts

@@ -0,0 +1,7 @@
+interface UseStationFinderProps {
+    frequency: string;
+    enabled?: boolean;
+}
+export declare function useStationInfoAtCursor({ frequency, enabled }: UseStationFinderProps): import("../../..").StationInfoType;
+export declare const useStationFinder: typeof useStationInfoAtCursor;
+export {};

package/components/Signal/model/useUnifiedSignals.d.ts

@@ -0,0 +1,6 @@
+import type { UnifiedSignalItem } from '../utils';
+interface UseUnifiedSignalsOptions {
+    respectVisibility?: boolean;
+}
+export declare function useUnifiedSignals({ respectVisibility }?: UseUnifiedSignalsOptions): UnifiedSignalItem[];
+export {};

package/components/Signal/presenters/SignalSegments/index.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+import type { SignalPosition } from '../../model';
+interface SignalSegmentsProps {
+    style: React.CSSProperties;
+    signalPositions: SignalPosition[];
+    activeSignalKey?: string;
+    segmentIndex: number;
+}
+declare const SignalSegments: React.FC<SignalSegmentsProps>;
+export default SignalSegments;

package/components/Signal/presenters/index.d.ts

@@ -0,0 +1 @@
+export { default as SignalSegments } from './SignalSegments';

package/components/Signal/utils.d.ts

@@ -1,15 +1,27 @@
 import type { StationInfoType } from '../../types';
 import type { SignalData } from '../../types/store';
-import type { FrequencyRangeInput } from '../../utils';
+import type { FrequencyRange, FrequencyRangeInput } from '../../utils';
 /**
  * 统一的信号数据类型（兼容 StationInfo 和 SignalData）
  */
 export type UnifiedSignalItem = StationInfoType | SignalData;
+export interface SignalMatchCandidate {
+    item: UnifiedSignalItem;
+    range: FrequencyRange;
+    startIndex: number;
+    stopIndex: number;
+}
 /**
  * 判断是否为完整的台站信息
  */
 export declare function isStationInfo(item: UnifiedSignalItem): item is StationInfoType;
+export declare function getUnifiedSignalKey(item: UnifiedSignalItem): string;
 /**
  * 将统一的信号数据转换为频率范围输入（处理 string | number 类型）
  */
 export declare function toFrequencyRangeInput(item: UnifiedSignalItem): FrequencyRangeInput;
+export declare function resolveBestSignalMatch<T extends SignalMatchCandidate>(candidates: T[], options: {
+    currentFrequency: number;
+    currentPointIndex: number;
+    indexTolerance?: number;
+}): T | undefined;

package/components/ToolsBar/{SeriesControl → controls/SeriesControl}/index.d.ts

@@ -1,4 +1,4 @@
-import { ChartType } from '../../../config';
+import { ChartType } from '../../../../config';
 interface Props {
     type?: ChartType;
 }

package/components/ToolsBar/controls/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Reset } from './Reset';
+export { default as SegmentsDisplayControl } from './SegmentsDisplayControl';
+export { default as SeriesControl } from './SeriesControl';
+export { default as SeriesDisplayControl } from './SeriesDisplayControl';

package/components/ToolsBar/{GradientRibbon → decorations/GradientRibbon}/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type CSMCallback } from '../../../utils/subscription';
+import { type CSMCallback } from '../../../../utils/subscription';
 export declare const handleColor: (globalID?: string, name?: string, func?: CSMCallback) => (...args: any[]) => void;
 declare const _default: React.NamedExoticComponent<{}>;
 export default _default;

package/components/ToolsBar/decorations/index.d.ts

@@ -0,0 +1,2 @@
+export { default as GradientRibbon, handleColor } from './GradientRibbon';
+export { default as SpacerLine } from './SpacerLine';

package/components/ToolsBar/primitives/IconBox.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+import type { ReactNode } from 'react';
+import { type ToolbarTone } from './styles';
+import { type ToolbarSurfaceProps } from './ToolbarSurface';
+export interface IconBoxProps extends Pick<ToolbarSurfaceProps, 'style' | 'className' | 'title' | 'disabled' | 'onClick' | 'onDoubleClick'> {
+    children: ReactNode;
+    active?: boolean;
+    tone?: ToolbarTone;
+}
+declare const IconBox: React.FC<IconBoxProps>;
+export default IconBox;

package/components/ToolsBar/primitives/ToolbarContentBox.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+import { type ToolbarTone } from './styles';
+import { type ToolbarSurfaceProps } from './ToolbarSurface';
+export interface ToolbarContentBoxProps extends Pick<ToolbarSurfaceProps, 'style' | 'className' | 'title' | 'disabled' | 'onClick' | 'onDoubleClick' | 'onWheel'> {
+    contentClassName?: string;
+    active?: boolean;
+    tone?: ToolbarTone;
+    children: React.ReactNode;
+}
+declare const ToolbarContentBox: React.FC<ToolbarContentBoxProps>;
+export default ToolbarContentBox;

package/components/ToolsBar/primitives/ToolbarDropdown.d.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+import { Dropdown } from '../../Overlay';
+type BaseDropdownProps = React.ComponentProps<typeof Dropdown>;
+type ToolbarDropdownProps = Omit<BaseDropdownProps, 'triggerVariant'>;
+interface ToolbarIconDropdownProps extends Omit<BaseDropdownProps, 'triggerVariant' | 'triggerContent'> {
+    icon: React.ReactNode;
+    title?: string;
+}
+interface ToolbarDropdownGroupProps extends Omit<BaseDropdownProps, 'triggerVariant' | 'triggerClassName'> {
+    leading: React.ReactNode;
+    triggerClassName?: string;
+}
+declare const ToolbarDropdown: React.FC<ToolbarDropdownProps>;
+declare const ToolbarIconDropdown: React.FC<ToolbarIconDropdownProps>;
+declare const ToolbarDropdownGroup: React.FC<ToolbarDropdownGroupProps>;
+export { ToolbarDropdown, ToolbarDropdownGroup, ToolbarIconDropdown };

package/components/ToolsBar/primitives/ToolbarGlyph.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+interface ToolbarGlyphProps {
+    children: React.ReactNode;
+    className?: string;
+    opticalOffsetX?: number;
+    opticalOffsetY?: number;
+    opticalScale?: number;
+}
+declare const ToolbarGlyph: React.FC<ToolbarGlyphProps>;
+export default ToolbarGlyph;

package/components/ToolsBar/primitives/ToolbarGroup.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+interface ToolbarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+interface ToolbarGroupSeparatorProps {
+    className?: string;
+}
+declare const ToolbarGroup: React.FC<ToolbarGroupProps>;
+declare const ToolbarGroupSeparator: React.FC<ToolbarGroupSeparatorProps>;
+export { ToolbarGroup, ToolbarGroupSeparator };

package/components/ToolsBar/primitives/ToolbarGroupIconBox.d.ts

@@ -0,0 +1,5 @@
+import type React from 'react';
+import IconBox from './IconBox';
+type ToolbarGroupIconBoxProps = React.ComponentProps<typeof IconBox>;
+declare const ToolbarGroupIconBox: React.FC<ToolbarGroupIconBoxProps>;
+export default ToolbarGroupIconBox;

package/components/ToolsBar/primitives/ToolbarSurface.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+type ToolbarSurfaceElement = HTMLElement;
+export interface ToolbarSurfaceProps {
+    style?: React.CSSProperties;
+    className?: string;
+    title?: React.ReactNode;
+    active?: boolean;
+    disabled?: boolean;
+    onClick?: (e: React.SyntheticEvent<ToolbarSurfaceElement>) => void;
+    onDoubleClick?: (e: React.SyntheticEvent<ToolbarSurfaceElement>) => void;
+    onWheel?: (e: React.WheelEvent<ToolbarSurfaceElement>) => void;
+    children: React.ReactNode;
+}
+declare const ToolbarSurface: React.FC<ToolbarSurfaceProps>;
+export default ToolbarSurface;

package/components/ToolsBar/primitives/index.d.ts

@@ -0,0 +1,8 @@
+export { default as IconBox, type IconBoxProps } from './IconBox';
+export * from './styles';
+export { default as ToolbarContentBox, type ToolbarContentBoxProps } from './ToolbarContentBox';
+export { ToolbarDropdown, ToolbarDropdownGroup, ToolbarIconDropdown } from './ToolbarDropdown';
+export { default as ToolbarGlyph } from './ToolbarGlyph';
+export { ToolbarGroup, ToolbarGroupSeparator } from './ToolbarGroup';
+export { default as ToolbarGroupIconBox } from './ToolbarGroupIconBox';
+export { default as ToolbarSurface, type ToolbarSurfaceProps } from './ToolbarSurface';