@cere/cere-design-system 0.0.45 → 0.2.0

package/dist/feedback.d.mts

@@ -0,0 +1,368 @@
+import * as React from 'react';
+import React__default from 'react';
+import { BadgeProps as BadgeProps$1 } from '@mui/material/Badge';
+import { ChipProps as ChipProps$1 } from '@mui/material/Chip';
+import { Theme } from '@mui/material/styles';
+import { TooltipProps as TooltipProps$1 } from '@mui/material/Tooltip';
+import { AlertProps as AlertProps$1 } from '@mui/material/Alert';
+import { SnackbarProps as SnackbarProps$1 } from '@mui/material/Snackbar';
+import { CircularProgressProps as CircularProgressProps$1 } from '@mui/material/CircularProgress';
+
+type BadgeVariant = 'default' | 'primary' | 'success' | 'error';
+interface BadgeProps extends Omit<BadgeProps$1, 'color' | 'variant'> {
+    variant?: BadgeVariant;
+    children?: React__default.ReactNode;
+}
+declare const Badge: React__default.FC<BadgeProps>;
+
+type ChipVariant = 'default' | 'active' | 'success' | 'error' | 'warning' | 'info';
+interface ChipVariantStyles {
+    backgroundColor: string;
+    color: string;
+    hoverBackgroundColor: string;
+}
+/**
+ * Resolve a Chip variant to its themed background/foreground/hover colors.
+ *
+ * Status variants (success/error/warning/info) use the `main` surface with
+ * `contrastText` (typically white) so chips read as loud solid pills.
+ * `default` is neutral grey; `active` uses the brand-selected background.
+ */
+declare function getChipVariantStyles(variant: ChipVariant, theme: Theme): ChipVariantStyles;
+
+type ChipTone = 'default' | 'onGradient';
+type ChipBaseProps = Omit<ChipProps$1, 'color' | 'variant'>;
+/**
+ * Default tone: `variant` controls the visual style of the chip.
+ */
+interface ChipDefaultProps extends ChipBaseProps {
+    tone?: 'default';
+    variant?: ChipVariant;
+}
+/**
+ * onGradient tone: white text, monospace caps, translucent border.
+ * Renders on dark gradient surfaces. `variant` must be omitted.
+ */
+interface ChipOnGradientProps extends ChipBaseProps {
+    tone: 'onGradient';
+    /**
+     * Not applicable when tone='onGradient'.
+     * @deprecated Passing variant with tone='onGradient' is a type error.
+     */
+    variant?: never;
+}
+/** ChipProps is a discriminated union on `tone`. */
+type ChipProps = ChipDefaultProps | ChipOnGradientProps;
+declare const Chip: React__default.ForwardRefExoticComponent<(Omit<ChipDefaultProps, "ref"> | Omit<ChipOnGradientProps, "ref">) & React__default.RefAttributes<HTMLDivElement>>;
+
+type StatusDotStatus = 'success' | 'error' | 'warning' | 'info' | 'primary' | 'neutral';
+interface StatusDotProps extends Omit<React__default.HTMLAttributes<HTMLSpanElement>, 'role'> {
+    /** Which themed color to render. `neutral` uses a grey for idle/queued states. */
+    status: StatusDotStatus;
+    /** Diameter in pixels. @default 8 */
+    size?: number;
+    /**
+     * Pulse animation for in-progress states (e.g., a running run). Respects
+     * `prefers-reduced-motion` and falls back to a static dot.
+     */
+    pulse?: boolean;
+    /**
+     * When provided, the dot becomes an accessible image with this label. When
+     * omitted, the dot is marked `aria-hidden` — assume an adjacent element
+     * carries the status semantics.
+     */
+    'aria-label'?: string;
+}
+/**
+ * StatusDot — a small colored circle indicating entity status.
+ *
+ * Use alongside a text label for a labeled status; use with `aria-label` to
+ * make the dot itself a standalone accessible indicator.
+ *
+ * @example
+ * ```tsx
+ * // Labeled context — the dot is decorative
+ * <>
+ *   <StatusDot status="success" />
+ *   <span>Succeeded</span>
+ * </>
+ *
+ * // Standalone — dot carries the status meaning
+ * <StatusDot status="info" pulse aria-label="Running" />
+ * ```
+ */
+declare const StatusDot: React__default.ForwardRefExoticComponent<StatusDotProps & React__default.RefAttributes<HTMLSpanElement>>;
+
+type StatusLabelSize = 'small' | 'medium';
+interface StatusLabelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Themed status; forwarded to StatusDot. */
+    status: StatusDotStatus;
+    /** Text rendered next to the dot. */
+    label: string;
+    /** Sizes the dot + text pair. @default 'medium' */
+    size?: StatusLabelSize;
+    /**
+     * Adds a pulsing animation on the dot for in-progress states. When true,
+     * the row also exposes an `aria-live="polite"` region so SR users hear
+     * updates.
+     */
+    pulse?: boolean;
+}
+/**
+ * StatusLabel — a flex row pairing `StatusDot` with a text label.
+ *
+ * Use this when a status indicator needs an accompanying label; the row
+ * keeps the dot baseline-aligned with the text at all sizes.
+ */
+declare const StatusLabel: React.ForwardRefExoticComponent<StatusLabelProps & React.RefAttributes<HTMLDivElement>>;
+
+interface CopyChipProps {
+    /** The text to display and copy to the clipboard. */
+    text: string;
+    /** Max width in pixels for the (ellipsized) text label. @default 260 */
+    maxWidth?: number;
+    /**
+     * Accessible label for the button. Defaults to `Copy <text>`. Override when
+     * the raw text would be unclear to a screen-reader user (e.g., long hex IDs).
+     */
+    'aria-label'?: string;
+    /** Tooltip copy shown before clicking. @default 'Copy' */
+    tooltipLabel?: string;
+    /** Tooltip copy shown after a successful copy. @default 'Copied' */
+    tooltipCopiedLabel?: string;
+    /** Fires after the clipboard write succeeds. */
+    onCopy?: () => void;
+}
+/**
+ * CopyChip — compact inline copy-to-clipboard control.
+ *
+ * Shows a monospace text label with an adjacent copy icon that toggles to a
+ * check mark for a moment after a successful copy. Use in dense metadata
+ * rows where an `IDBlock` would be visually too heavy; use `IDBlock` when
+ * the identifier is the primary affordance on the surface and deserves a
+ * full boxed treatment with snackbar feedback.
+ *
+ * @example
+ * ```tsx
+ * <CopyChip text="run_abc123" />
+ * <CopyChip text={longHexId} aria-label="Copy workspace ID" onCopy={track} />
+ * ```
+ */
+declare const CopyChip: React__default.FC<CopyChipProps>;
+
+/**
+ * Color variants for the RoleBadge component
+ */
+type RoleBadgeColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning';
+/**
+ * Size variants for the RoleBadge component
+ */
+type RoleBadgeSize = 'small' | 'medium';
+/**
+ * RoleBadge component props
+ */
+interface RoleBadgeProps extends Omit<ChipProps$1, 'label' | 'variant' | 'color' | 'size'> {
+    /**
+     * The text content to display in the badge
+     */
+    label: string;
+    /**
+     * The color theme of the badge
+     * @default 'primary'
+     */
+    color?: RoleBadgeColor;
+    /**
+     * The size of the badge
+     * @default 'small'
+     */
+    size?: RoleBadgeSize;
+}
+/**
+ * RoleBadge - Pill-shaped badge component for displaying roles or status labels
+ *
+ * A reusable badge component that extends MUI Chip with a pill-shaped outline style.
+ * Designed for displaying user roles, status indicators, or categorization labels.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <RoleBadge label="Manager" />
+ *
+ * // With color variants
+ * <RoleBadge label="Admin" color="error" />
+ * <RoleBadge label="Active" color="success" />
+ *
+ * // With size variants
+ * <RoleBadge label="Owner" size="medium" />
+ * ```
+ *
+ * @see Figma node 17-3595 for design specifications
+ */
+declare const RoleBadge: React__default.FC<RoleBadgeProps>;
+
+/**
+ * IDBlock component props
+ */
+interface IDBlockProps {
+    /**
+     * The identifier value to display and copy
+     */
+    id: string;
+    /**
+     * Label prefix text
+     * @default 'ID'
+     */
+    label?: string;
+    /**
+     * Entity type for accessibility (used in aria-label)
+     * @default 'entity'
+     */
+    entityType?: string;
+    /**
+     * Additional callback to execute after successful copy
+     */
+    onCopy?: () => void;
+}
+/**
+ * IDBlock - Read-only identifier display with integrated copy-to-clipboard button
+ *
+ * A component that displays an identifier (ID, account number, etc.) with a copy button.
+ * Provides user feedback via an inline Snackbar when copy succeeds or fails.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <IDBlock id="W1234567890" />
+ *
+ * // With custom label
+ * <IDBlock id="ACC-9876543" label="Account ID" entityType="account" />
+ *
+ * // With callback
+ * <IDBlock
+ *   id="DEPLOY-12345"
+ *   label="Deployment ID"
+ *   entityType="deployment"
+ *   onCopy={() => console.log('ID copied')}
+ * />
+ * ```
+ *
+ * @see Figma node 17-3596 for design specifications
+ */
+declare const IDBlock: React__default.FC<IDBlockProps>;
+
+type TooltipProps = TooltipProps$1;
+declare const Tooltip: React__default.ForwardRefExoticComponent<Omit<TooltipProps$1, "ref"> & React__default.RefAttributes<HTMLElement>>;
+
+type ProgressVariant = 'linear' | 'circular';
+interface ProgressProps {
+    variant?: ProgressVariant;
+    value?: number;
+    size?: number;
+    thickness?: number;
+}
+declare const Progress: React__default.FC<ProgressProps>;
+
+type AlertSeverity = 'success' | 'error' | 'warning' | 'info';
+interface AlertProps extends Omit<AlertProps$1, 'severity'> {
+    severity?: AlertSeverity;
+    /**
+     * Title to display above the alert message
+     */
+    title?: string;
+}
+declare const Alert: React__default.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+interface SnackbarProps extends Omit<SnackbarProps$1, 'children'> {
+    /**
+     * Message to display in the snackbar
+     */
+    message?: string;
+    /**
+     * Severity of the alert inside snackbar
+     */
+    severity?: AlertSeverity;
+    /**
+     * Title to display in the alert (optional)
+     */
+    title?: string;
+    /**
+     * Alert variant
+     * @default 'filled'
+     */
+    variant?: 'filled' | 'standard' | 'outlined';
+    /**
+     * Callback when snackbar is closed
+     */
+    onClose?: () => void;
+    /**
+     * Children to render instead of message (allows custom content)
+     * Must be a ReactElement to match MuiSnackbar requirements
+     */
+    children?: React__default.ReactElement;
+}
+declare const Snackbar: React__default.ForwardRefExoticComponent<Omit<SnackbarProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+interface EmptyStateProps {
+    title?: string;
+    description?: string;
+    icon?: React__default.ReactNode;
+    action?: React__default.ReactNode;
+}
+declare const EmptyState: React__default.ForwardRefExoticComponent<EmptyStateProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface LoadingProps {
+    message?: string;
+    size?: number;
+    fullScreen?: boolean;
+}
+declare const Loading: React__default.ForwardRefExoticComponent<LoadingProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface AppLoadingProps {
+    /**
+     * Loading message to display
+     * @default "Loading..."
+     */
+    message?: string;
+    /**
+     * Logo source URL or path
+     * @default "/icons/logo.png"
+     */
+    logo?: string;
+    /**
+     * Custom styles
+     */
+    sx?: any;
+}
+/**
+ * AppLoading component - Full-screen loading indicator with logo
+ *
+ * @example
+ * ```tsx
+ * <AppLoading message="Initializing application..." />
+ * ```
+ */
+declare const AppLoading: React__default.FC<AppLoadingProps>;
+
+interface CircularProgressProps extends CircularProgressProps$1 {
+    /**
+     * Size of the progress indicator
+     * @default 40
+     */
+    size?: number | string;
+    /**
+     * Thickness of the progress indicator
+     * @default 4
+     */
+    thickness?: number;
+}
+/**
+ * CircularProgress component - wrapper around MUI CircularProgress
+ *
+ * @example
+ * ```tsx
+ * <CircularProgress size={40} thickness={4} />
+ * ```
+ */
+declare const CircularProgress: React__default.ForwardRefExoticComponent<Omit<CircularProgressProps, "ref"> & React__default.RefAttributes<HTMLSpanElement>>;
+
+export { Alert, type AlertProps, type AlertSeverity, AppLoading, type AppLoadingProps, Badge, type BadgeProps, Chip, type ChipProps, type ChipTone, type ChipVariant, type ChipVariantStyles, CircularProgress, type CircularProgressProps, CopyChip, type CopyChipProps, EmptyState, type EmptyStateProps, IDBlock, type IDBlockProps, Loading, type LoadingProps, Progress, type ProgressProps, RoleBadge, type RoleBadgeColor, type RoleBadgeProps, type RoleBadgeSize, Snackbar, type SnackbarProps, StatusDot, type StatusDotProps, type StatusDotStatus, StatusLabel, type StatusLabelProps, type StatusLabelSize, Tooltip, type TooltipProps, getChipVariantStyles };