goobs-frontend/dist/components/Chip/index.d.ts

A comprehensive React-based libary for building modern web applications

import { default as React, ReactNode } from 'react';
export type ChipVariant = 'chip' | 'pill';
/**
 * Semantic palette tokens. When a chip needs a status color but the
 * caller doesn't want to hand-tune `backgroundColor` + `borderColor` +
 * `color` + `dot` + alpha values, pass `tone="success"` (etc.) and the
 * CSS module derives the full color triplet at one canonical opacity.
 *
 * Token meanings:
 *   - `success`  — green (active / completed / paid / OK)
 *   - `info`     — blue  (informational / in-progress)
 *   - `warn`     — amber (pending / overdue-soon / draft)
 *   - `danger`   — red   (failed / overdue / archived-destructive)
 *   - `neutral`  — grey  (inactive / disabled)
 *   - `gold`     — sacred-gold (default / featured / starred)
 */
export type ChipTone = 'success' | 'info' | 'warn' | 'danger' | 'neutral' | 'gold';
export interface ChipStyles {
    /** Theme palette. Defaults to `'sacred'` (matches goobs-frontend overall). */
    theme?: 'light' | 'dark' | 'sacred';
    /** Disable the chip — drops opacity and blocks the click handler. */
    disabled?: boolean;
    /** Override the chip's background color (defaults via theme variables). */
    backgroundColor?: string;
    /** Override the chip's border color. */
    borderColor?: string;
    /** Override the chip's border width (e.g. '1px', '2px'). */
    borderWidth?: string;
    /** Override the chip's text color (also the dot color when `dot: true`). */
    color?: string;
    /** Override the chip's hover background. */
    hoverBackgroundColor?: string;
    /** Override the chip's hover border. */
    hoverBorderColor?: string;
    /** Optional explicit border radius (otherwise variant default). */
    borderRadius?: string;
    /** Optional inline padding override. */
    padding?: string;
    /** Optional font size override. */
    fontSize?: string;
    /** Optional font weight override. */
    fontWeight?: string | number;
    /** Optional font family override. */
    fontFamily?: string;
    /** Chip width override. */
    width?: string;
    /** Chip min-width override. */
    minWidth?: string;
    /** Chip max-width override. */
    maxWidth?: string;
    /** Chip height override. */
    height?: string;
    /** When the chip should wrap long content (e.g. selected items in
     *  `MultiSelect` that exceed the cell width). Defaults to `nowrap`. */
    whiteSpace?: React.CSSProperties['whiteSpace'];
    /** Word-break override for long unbroken content (used with whiteSpace wrapping). */
    wordBreak?: React.CSSProperties['wordBreak'];
}
export interface ChipProps {
    /**
     * Visible content. `string` for simple labels; `ReactNode` to embed
     * inline glyphs / icons next to text (status dots, count badges, etc).
     *
     * When `label` is a ReactNode (not a plain string), screen readers
     * can't announce the visual content as text — pass `ariaLabel` so
     * the chip stays announceable. Tests should also prefer the
     * `data-chip-field` / `data-chip-value` selectors over label-text
     * matching when ReactNode labels are in play.
     */
    label: ReactNode;
    /**
     * Accessible name used by screen readers AND by Playwright's
     * `getByRole('button', { name: ... })`. Defaults to the string form
     * of `label` when omitted and `label` is a string; required for
     * non-string labels (chip with a status dot, icon-only chip, etc.).
     */
    ariaLabel?: string;
    /** Leading icon — rendered before the label, sized to the variant. */
    icon?: ReactNode;
    /**
     * Convenience prop for the leading colored dot pattern (the use-case
     * the now-deleted `StatusPill` / `StatusBadge` covered). Pass `true`
     * to use the chip's current text color, or a CSS color string for an
     * explicit accent. Mutually exclusive with `icon`.
     */
    dot?: boolean | string;
    /** When set, renders an `×` delete button at the end of the chip. */
    onDelete?: () => void;
    /** Click handler. When omitted, the chip renders as non-interactive
     *  (no role, no tabindex, no hover lift). */
    onClick?: () => void;
    /**
     * Active / selected visual state. Forwarded as `data-chip-active` for
     * tests and drives the active-state background via CSS. Also sets
     * `aria-pressed` when the chip is interactive.
     */
    active?: boolean;
    /** Visual variant — see file header. Defaults to `'chip'`. */
    variant?: ChipVariant;
    /**
     * Semantic palette token — when set, the chip's background, border,
     * and text colors are derived at canonical opacities from the named
     * tone. Lets callsites stop hand-tuning `alpha(color, 0.15)` + border
     * + text triplets for every status pill. Overridden by explicit
     * `styles.backgroundColor` / `styles.color` / `styles.borderColor`
     * if both are supplied.
     */
    tone?: ChipTone;
    /**
     * Stable test selector — filter dimension this chip belongs to.
     * Surfaced as `data-chip-field="<value>"` on the root.
     */
    dataField?: string;
    /**
     * Stable test selector — filter value this chip represents. Survives
     * label-text changes. Surfaced as `data-chip-value="<value>"` on
     * the root.
     */
    dataValue?: string;
    /**
     * ARIA role override. Defaults are:
     *   - clickable chip   → `'button'`
     *   - pill (read-only) → `'status'` (status indicator)
     *   - chip  (read-only) → no role (decorative)
     * Pass an explicit role when the semantic differs (e.g. a checkbox
     * chip would use `'checkbox'`).
     */
    role?: string;
    /** Live-region politeness for status pills that update dynamically
     *  (e.g. "saving…" → "saved"). Only applied when the chip resolves to
     *  `role="status"`. */
    ariaLive?: 'off' | 'polite' | 'assertive';
    /** Style overrides (theme, colors, sizing). */
    styles?: ChipStyles;
    /**
     * Alias for {@link styles}. Accepted so callers can spell the prop either
     * way — `<Chip style={...} />` and `<Chip styles={...} />` resolve to the
     * same `ChipStyles` shape. When both are supplied, `styles` wins on a
     * per-key basis (the React-style `style` is treated as the base layer).
     */
    style?: ChipStyles;
}
/**
 * Compact label / token element with two variants: `variant="chip"` (default),
 * an interactive filter token matching the Button family's radius, and
 * `variant="pill"`, a fully-rounded read-only status indicator (replaces the
 * hand-rolled StatusPill / StatusBadge / Pill components). A clickable chip
 * (`onClick` set and not disabled) renders as `role="button"` with
 * Enter/Space keyboard activation; a read-only pill renders as
 * `role="status"`. Colors come from the semantic `tone` palette or explicit
 * `styles` overrides (applied as CSS custom properties), and `dot` renders
 * the common leading colored-dot pattern. Theming via `styles.theme` (default
 * `'sacred'`); the root emits `data-chip`, `data-chip-variant`,
 * `data-chip-field` / `data-chip-value`, and `data-chip-active` test
 * selectors.
 */
declare const Chip: React.FC<ChipProps>;
export default Chip;
//# sourceMappingURL=index.d.ts.map