@stratakit/structures/dist/Chip.d.ts

Medium-sized component structures for the Strata design system

import * as React from "react";
import type { BaseProps } from "@stratakit/foundations/secret-internals";
interface ChipRootProps extends BaseProps<"div"> {
    /**
     * The variant style of the Chip.
     * Use "solid" for primary states and "outline" for less prominent states.
     *
     * @default "solid"
     */
    variant?: "solid" | "outline";
}
/**
 * Root component of the compositional Chip component.
 *
 * Example:
 * ```tsx
 * <Chip.Root>
 *   <Chip.Label>Label</Chip.Label>
 *   <Chip.DismissButton onClick={onClick} />
 * </Chip.Root>
 * ```
 */
declare const ChipRoot: React.ForwardRefExoticComponent<ChipRootProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface ChipLabelProps extends BaseProps<"span"> {
}
/**
 * Label component that should be used with the compositional Chip component.
 */
declare const ChipLabel: React.ForwardRefExoticComponent<ChipLabelProps & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
interface ChipDismissButtonProps extends Omit<BaseProps<"button">, "children"> {
    /**
     * Label for the dismiss button.
     *
     * The final accessible name of the dismiss button is a combination of this `label` and the text content of `Chip.Label`.
     *
     * @default "Dismiss"
     */
    label?: string;
}
/**
 * Dismiss button component that should be used with the compositional Chip component.
 */
declare const ChipDismissButton: React.ForwardRefExoticComponent<ChipDismissButtonProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
interface ChipProps extends Omit<BaseProps<"div">, "children">, Pick<ChipRootProps, "variant"> {
    /**
     * The label displayed inside the chip.
     */
    label: React.ReactNode;
    /**
     * Callback invoked when the dismiss ("❌") button is clicked.
     *
     * If `undefined`, the dismiss button will not be rendered.
     *
     * @default undefined
     */
    onDismiss?: () => void;
}
/**
 * Chip is a UI component used to represent an item, attribute, or action in a compact visual style.
 * It supports two visual variants: `solid` for primary emphasis and `outline` for less prominent states.
 *
 * Example:
 * ```tsx
 * <Chip label="Value" />
 * <Chip label="Value" variant="outline" />
 * ```
 */
declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
export default Chip;
export { ChipRoot as Root, ChipLabel as Label, ChipDismissButton as DismissButton, };