@kloudlite/design-system/atoms/toolbar.d.ts

A design system for building ambitious products.

import * as React from 'react';
import type { Scope } from '@radix-ui/react-context';
import { Direction } from '@radix-ui/react-direction';
import type * as Radix from '@radix-ui/react-primitive';
import * as SeparatorPrimitive from '@radix-ui/react-separator';
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
import { IButton, IIconButton } from './button';
import { IButtonGroupButton, IButtonGroupIconButton } from './button-group';
import { ITextInput } from './input';
interface IToolbarRoot {
    __scopeToolbar?: Scope<object | null>;
    orientation?: 'horizontal' | 'vertical';
    dir?: Direction;
    loop?: boolean;
    children: React.ReactNode;
}
type SeparatorProps = Radix.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>;
interface ToolbarSeparatorProps extends SeparatorProps {
}
type ToggleGroupProps = Radix.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>;
interface ToolbarToggleGroupSingleProps extends Extract<ToggleGroupProps, {
    type: 'single';
}> {
    selectable?: boolean;
}
interface ToolbarToggleGroupSinglePropsOmitted extends Omit<ToolbarToggleGroupSingleProps, 'onClick' | 'type'> {
    onClick?: (value?: string) => void;
    type?: 'single';
}
type ToggleGroupItemProps = Radix.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>;
interface ToolbarToggleItemPropsBase extends Omit<ToggleGroupItemProps, 'value' | 'content' | 'onPointerDown' | 'type' | 'prefix' | 'children'> {
    value: string | number | readonly string[] | undefined;
}
interface ToolbarButtonGroupButtonProps extends ToolbarToggleItemPropsBase, Omit<IButtonGroupButton, 'value' | 'onPointerDown' | 'type' | 'prefix' | 'children'> {
    'is-menu-button'?: string;
    'data-state'?: string;
}
interface ToolbarIconButtonProps extends ToolbarToggleItemPropsBase, Omit<IButtonGroupIconButton, 'value'> {
    'is-menu-button'?: string;
    'data-state'?: string;
}
declare const Toolbar: {
    ButtonGroup: {
        Root: React.ForwardRefExoticComponent<ToolbarToggleGroupSinglePropsOmitted & React.RefAttributes<HTMLDivElement>>;
        Button: React.ForwardRefExoticComponent<ToolbarButtonGroupButtonProps & React.RefAttributes<HTMLButtonElement>>;
        IconButton: React.ForwardRefExoticComponent<ToolbarIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
    };
    Button: React.ForwardRefExoticComponent<IButton & React.RefAttributes<HTMLButtonElement>>;
    IconButton: React.ForwardRefExoticComponent<IIconButton & React.RefAttributes<HTMLButtonElement>>;
    TextInput: React.ForwardRefExoticComponent<ITextInput & React.RefAttributes<HTMLInputElement>>;
    Separator: React.ForwardRefExoticComponent<ToolbarSeparatorProps & React.RefAttributes<HTMLDivElement>>;
    Root: React.ForwardRefExoticComponent<IToolbarRoot & React.RefAttributes<HTMLDivElement>>;
};
export default Toolbar;