import type React from 'react'; import type { ClickDetail, MenuActionDetail, SplitMenuEntry } from './types.js'; export interface SplitButtonRef extends HTMLElement { /** Opens the dropdown menu. */ open(): void; /** Closes the dropdown menu. */ close(): void; } /** * The primary action is a Button. The dropdown entries come from the `entries` prop. * Primary click fires `cx-click`. Dropdown item click fires `cx-action` with `MenuActionDetail.id`. * * In React, reach the imperative methods through a ref: * `const api = useRef(null)`, pass `ref={api}`, then `api.current?.open()`. * Available: open(), close(). * * @csspart base, panel, primary, trigger */ export interface SplitButtonOwnProps { /** * Unique identifier for the element. * @example 'example-id' */ id?: string; /** * Text label for the primary action button. * @example 'Example label' */ label?: string; /** * Visual style variant. Allowed values: `filled`, `outline`, `ghost`. * @example 'filled' */ variant?: 'filled' | 'outline' | 'ghost'; /** * Semantic color intent (e.g. primary, success, danger). Allowed values: `neutral`, `primary`, `info`, `success`, `warning`, `danger`. * @example 'neutral' */ intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger'; /** * Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. * @example 'sharp' */ shape?: 'sharp' | 'rounded' | 'pill'; /** * Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. * @example 'xs' */ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'; /** * Icon displayed before the primary button label. * @example 'example' */ iconLeading?: string; /** * Disables the component, preventing interaction. * @defaultValue false * @example true */ disabled?: boolean; /** * Disables only the primary action button (dropdown trigger remains active). * @defaultValue false * @example true */ primaryDisabled?: boolean; /** * Disables only the dropdown trigger button. * @defaultValue false * @example true */ triggerDisabled?: boolean; /** * Accessible label for the dropdown trigger button (default: "More options"). * @example 'example' */ triggerLabel?: string; /** * Menu or split-button entry definitions. Each entry has an `id` field — this is what `MenuActionDetail.id` returns in action events. * @example [{ id: 'duplicate', label: 'Duplicate' }] */ entries?: SplitMenuEntry[]; /** * Fires when the user activates the component. Detail: `ClickDetail`. * @example (event) => console.log(event.detail) */ onClick?: (event: CustomEvent) => void; /** * Fires when the user activates an action item. Detail: `MenuActionDetail`. * @example (event) => console.log(event.detail.id) */ onAction?: (event: CustomEvent) => void; /** CSS class applied to the Custom Element host. * @example 'my-component' */ className?: string; /** Inline styles applied to the Custom Element host. * @example { marginTop: 8 } */ style?: React.CSSProperties; } /** * Props for ``: the component's own API plus every standard DOM * attribute and native React event handler, forwarded verbatim to the * `` host — `id`, `data-*`, `aria-*`, `title`, `tabIndex`, * `slot`, `onMouseEnter`, and the rest. Own props always win over a * same-named DOM attribute. */ export type SplitButtonProps = SplitButtonOwnProps & Omit, keyof SplitButtonOwnProps | 'children' | 'dangerouslySetInnerHTML'>; export declare const SplitButton: React.ForwardRefExoticComponent, "children" | "dangerouslySetInnerHTML" | keyof SplitButtonOwnProps> & React.RefAttributes>;