@xcv-ui/ui 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,17 @@
+MIT License
+
+Copyright (c) 2026 XCV contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.

package/README.md

@@ -1,3 +1,73 @@
-# Temporary Holding Version
+# @xcv-ui/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Reusable, accessible React UI components and composition patterns from XCV.
+
+## Requirements
+
+- React >=18.2
+- React DOM >=18.2
+
+React and React DOM are peer dependencies and must be provided by the consuming application.
+
+## Installation
+
+```bash
+npm install @xcv-ui/ui @xcv-ui/tokens
+```
+
+## Styles and themes
+
+Import the token color mode and the component stylesheet explicitly in your application entry point:
+
+```tsx
+import "@xcv-ui/tokens/themes/dark.css";
+import "@xcv-ui/ui/styles.css";
+```
+
+Apply the color mode and optional brand to the subtree that should receive them:
+
+```tsx
+<div data-xcv-brand="default" data-xcv-mode="dark">
+  {/* XCV components */}
+</div>
+```
+
+Dark is the default color mode. Use `data-xcv-mode="light"` to opt into Light. Brand identity is independently selected with the optional `data-xcv-brand` attribute and consumer-owned token overrides. The legacy `data-xcv-theme` attribute remains supported as a deprecated mode alias. XCV does not modify global document styles or automatically detect the system color scheme.
+
+## Usage
+
+```tsx
+import { XcvButton, XcvCard, XcvText } from "@xcv-ui/ui";
+
+export function Example() {
+  return (
+    <XcvCard>
+      <XcvCard.Content>
+        <XcvText>Ready for the next session?</XcvText>
+      </XcvCard.Content>
+      <XcvCard.Footer>
+        <XcvButton>View sessions</XcvButton>
+      </XcvCard.Footer>
+    </XcvCard>
+  );
+}
+```
+
+See the [component guide](https://github.com/LuisAnaya/XCV/blob/main/docs/components/COMPONENTS.md) for the component inventory, props, and composition guidance.
+
+## Design principles
+
+- Native HTML semantics and keyboard accessibility first.
+- Public components and types use the `Xcv` prefix.
+- Icons are provided by consumers as React nodes.
+- Styles are namespaced and consume semantic design tokens.
+- Component interactions use one shared motion language with built-in behavior and reduced-motion support; no motion profiles or global effects API.
+- No dependency on React Router or a specific icon library.
+
+## Project status
+
+XCV is under active development. Do not treat this package as a production release until installation, typecheck, tests, build, package-content, and browser accessibility checks have passed.
+
+## License
+
+MIT. See the accompanying `LICENSE` file.

package/dist/index.d.ts

@@ -0,0 +1,424 @@
+import * as react from 'react';
+import { HTMLAttributes, OlHTMLAttributes, ReactNode, LabelHTMLAttributes, ButtonHTMLAttributes, AnchorHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, FieldsetHTMLAttributes, TableHTMLAttributes, ThHTMLAttributes, TdHTMLAttributes } from 'react';
+
+type XcvSize = "sm" | "md" | "lg";
+type XcvSpacing = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+type XcvRadius = "none" | "subtle" | "medium" | "large" | "full";
+type XcvFieldState = "default" | "error" | "success";
+type XcvAlignment = "start" | "center" | "end";
+type XcvLayoutAlignment = XcvAlignment | "stretch" | "baseline";
+type XcvJustification = "start" | "center" | "end" | "between" | "around" | "evenly";
+type XcvFlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
+
+interface XcvBoxProps extends HTMLAttributes<HTMLDivElement> {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+    display?: "block" | "flex" | "grid" | "inline-flex";
+    direction?: XcvFlexDirection;
+    align?: XcvLayoutAlignment;
+    justify?: XcvJustification;
+    gap?: XcvSpacing;
+    wrap?: boolean;
+}
+declare const XcvBox: react.ForwardRefExoticComponent<XcvBoxProps & react.RefAttributes<HTMLDivElement>>;
+
+interface XcvStackProps extends HTMLAttributes<HTMLDivElement> {
+    gap?: XcvSpacing;
+    align?: XcvLayoutAlignment;
+    justify?: XcvJustification;
+}
+declare const XcvStack: react.ForwardRefExoticComponent<XcvStackProps & react.RefAttributes<HTMLDivElement>>;
+
+interface XcvInlineProps extends HTMLAttributes<HTMLDivElement> {
+    gap?: XcvSpacing;
+    align?: XcvLayoutAlignment;
+    justify?: XcvJustification;
+    wrap?: boolean;
+}
+declare const XcvInline: react.ForwardRefExoticComponent<XcvInlineProps & react.RefAttributes<HTMLDivElement>>;
+
+interface XcvContainerProps extends HTMLAttributes<HTMLDivElement> {
+    size?: "sm" | "md" | "lg" | "xl" | "full";
+    centered?: boolean;
+}
+declare const XcvContainer: react.ForwardRefExoticComponent<XcvContainerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface XcvDividerProps extends Omit<HTMLAttributes<HTMLElement>, "children" | "role" | "aria-orientation"> {
+    orientation?: "horizontal" | "vertical";
+    spacing?: XcvSpacing;
+}
+declare const XcvDivider: react.ForwardRefExoticComponent<XcvDividerProps & react.RefAttributes<HTMLElement>>;
+
+interface XcvSurfaceProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "subtle" | "outlined";
+    padding?: XcvSpacing;
+    radius?: XcvRadius;
+}
+declare const XcvSurface: react.ForwardRefExoticComponent<XcvSurfaceProps & react.RefAttributes<HTMLDivElement>>;
+
+interface XcvCardVisualProps {
+    variant?: "default" | "outlined" | "subtle";
+    padding?: XcvSpacing;
+    radius?: XcvRadius;
+    /** Enables the component's standard hover and focus feedback. */
+    interactive?: boolean;
+    /** Shows a consumer-defined accent rail using --xcv-color-accent. */
+    accented?: boolean;
+}
+interface XcvCardProps extends XcvCardVisualProps, HTMLAttributes<HTMLDivElement> {
+}
+interface XcvCardSlotProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const XcvCard: react.ForwardRefExoticComponent<XcvCardProps & react.RefAttributes<HTMLDivElement>> & {
+    Content: react.ForwardRefExoticComponent<XcvCardSlotProps & react.RefAttributes<HTMLDivElement>>;
+    Footer: react.ForwardRefExoticComponent<XcvCardSlotProps & react.RefAttributes<HTMLDivElement>>;
+};
+
+type XcvMediaAspectRatio = "square" | "video" | "portrait" | "landscape" | "wide" | (string & {});
+interface XcvMediaProps extends HTMLAttributes<HTMLDivElement> {
+    aspectRatio?: XcvMediaAspectRatio;
+    radius?: XcvRadius;
+    fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+    position?: string;
+}
+declare const XcvMedia: react.ForwardRefExoticComponent<XcvMediaProps & react.RefAttributes<HTMLDivElement>>;
+
+type XcvListVariant = "plain" | "divided";
+type XcvListMarker = "none" | "disc" | "decimal";
+interface XcvListProps extends OlHTMLAttributes<HTMLOListElement> {
+    [key: `data-${string}`]: string | number | undefined;
+    /** Native list semantics: unordered (ul) or ordered (ol). */
+    as?: "ul" | "ol";
+    /** Plain spacing or separators between rows. */
+    variant?: XcvListVariant;
+    /** Token-based spacing between rows, or vertical inset for divided rows. */
+    gap?: XcvSpacing;
+    /** Visual marker style. Defaults to none for ul and decimal for ol. */
+    marker?: XcvListMarker;
+}
+interface XcvListItemProps extends HTMLAttributes<HTMLLIElement> {
+    [key: `data-${string}`]: string | number | undefined;
+    /** Optional leading content, such as an icon, avatar, or category. */
+    leading?: ReactNode;
+    /** Optional trailing content, such as metadata or actions. */
+    trailing?: ReactNode;
+    /** Vertical alignment of the three item regions. */
+    align?: "start" | "center";
+}
+declare const XcvList: react.ForwardRefExoticComponent<XcvListProps & react.RefAttributes<HTMLOListElement | HTMLUListElement>>;
+declare const XcvListItem: react.ForwardRefExoticComponent<XcvListItemProps & react.RefAttributes<HTMLLIElement>>;
+
+interface XcvTextProps extends HTMLAttributes<HTMLElement> {
+    as?: "p" | "span" | "div";
+    variant?: "body" | "small" | "caption" | "eyebrow";
+    weight?: "normal" | "medium" | "semibold" | "bold";
+    color?: "primary" | "secondary" | "muted" | "inverse";
+}
+declare const XcvText: react.ForwardRefExoticComponent<XcvTextProps & react.RefAttributes<HTMLElement>>;
+
+interface XcvTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+    weight?: "medium" | "semibold" | "bold";
+}
+declare const XcvTitle: react.ForwardRefExoticComponent<XcvTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+
+interface XcvLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    required?: boolean;
+}
+declare const XcvLabel: react.ForwardRefExoticComponent<XcvLabelProps & react.RefAttributes<HTMLLabelElement>>;
+
+type XcvButtonVariant = "primary" | "secondary" | "tertiary";
+type XcvButtonBaseProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & {
+    variant?: XcvButtonVariant;
+    size?: XcvSize;
+    radius?: XcvRadius;
+    loading?: boolean;
+    fullWidth?: boolean;
+    /** Icon-only buttons require an accessible name. */
+    iconOnly?: boolean;
+    "aria-label"?: string;
+};
+type XcvButtonProps = XcvButtonBaseProps & ({
+    iconOnly: true;
+    "aria-label": string;
+} | {
+    iconOnly?: false;
+    "aria-label"?: string;
+});
+declare const XcvButton: react.ForwardRefExoticComponent<XcvButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface XcvLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** A destination is required so XcvLink always renders an actual navigation link. */
+    href: string;
+    variant?: "default" | "subtle";
+}
+declare const XcvLink: react.ForwardRefExoticComponent<XcvLinkProps & react.RefAttributes<HTMLAnchorElement>>;
+
+interface XcvTextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    fieldState?: XcvFieldState;
+    radius?: XcvRadius;
+    inputSize?: "sm" | "md" | "lg";
+}
+declare const XcvTextInput: react.ForwardRefExoticComponent<XcvTextInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface XcvTextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    fieldState?: XcvFieldState;
+    radius?: XcvRadius;
+}
+declare const XcvTextArea: react.ForwardRefExoticComponent<XcvTextAreaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+interface XcvSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface XcvSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size" | "multiple" | "children"> {
+    options: readonly XcvSelectOption[];
+    fieldState?: XcvFieldState;
+    radius?: XcvRadius;
+    placeholder?: string;
+    selectSize?: "sm" | "md" | "lg";
+}
+declare const XcvSelect: react.ForwardRefExoticComponent<XcvSelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+interface XcvCheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    fieldState?: XcvFieldState;
+}
+declare const XcvCheckbox: react.ForwardRefExoticComponent<XcvCheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+interface XcvRadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    fieldState?: XcvFieldState;
+}
+declare const XcvRadio: react.ForwardRefExoticComponent<XcvRadioProps & react.RefAttributes<HTMLInputElement>>;
+
+interface XcvToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "role"> {
+    fieldState?: XcvFieldState;
+}
+declare const XcvToggle: react.ForwardRefExoticComponent<XcvToggleProps & react.RefAttributes<HTMLInputElement>>;
+
+interface XcvFormFieldProps extends HTMLAttributes<HTMLDivElement> {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+    label: ReactNode;
+    children: ReactNode;
+    id?: string;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+}
+declare const XcvFormField: react.ForwardRefExoticComponent<XcvFormFieldProps & react.RefAttributes<HTMLDivElement>>;
+
+type XcvNoticeTone = "info" | "success" | "warning" | "error";
+interface XcvNoticeProps extends Omit<HTMLAttributes<HTMLDivElement>, "aria-live" | "title"> {
+    tone?: XcvNoticeTone;
+    radius?: XcvRadius;
+    title?: ReactNode;
+    icon?: ReactNode;
+    announce?: "polite" | "assertive" | false;
+}
+declare const XcvNotice: react.ForwardRefExoticComponent<XcvNoticeProps & react.RefAttributes<HTMLDivElement>>;
+
+type XcvBadgeTone = "neutral" | "info" | "success" | "warning" | "error";
+interface XcvBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    tone?: XcvBadgeTone;
+    radius?: XcvRadius;
+}
+declare const XcvBadge: react.ForwardRefExoticComponent<XcvBadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+type XcvLoaderVariant = "orbit" | "comet" | "pulse" | "wave" | "ring";
+type XcvLoaderSize = "sm" | "md" | "lg";
+interface XcvLoaderProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** Visual pattern; animation follows the shared XCV motion and reduced-motion contracts. */ variant?: XcvLoaderVariant;
+    size?: XcvLoaderSize;
+    label?: string;
+    showLabel?: boolean;
+}
+declare const XcvLoader: react.ForwardRefExoticComponent<XcvLoaderProps & react.RefAttributes<HTMLSpanElement>>;
+
+type XcvAccordionMode = "single" | "multiple";
+type XcvAccordionValue = string | readonly string[];
+interface XcvAccordionProps extends HTMLAttributes<HTMLDivElement> {
+    radius?: XcvRadius;
+    mode?: XcvAccordionMode;
+    value?: XcvAccordionValue;
+    defaultValue?: XcvAccordionValue;
+    onValueChange?: (value: XcvAccordionValue | undefined) => void;
+}
+interface XcvAccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    value: string;
+    disabled?: boolean;
+}
+declare function XcvAccordionItem({ value, disabled, className, children, ...props }: XcvAccordionItemProps): react.JSX.Element;
+type XcvAccordionTriggerProps = ButtonHTMLAttributes<HTMLButtonElement>;
+declare function XcvAccordionTrigger({ className, children, type, disabled, ...props }: XcvAccordionTriggerProps): react.JSX.Element;
+type XcvAccordionContentProps = HTMLAttributes<HTMLDivElement>;
+declare function XcvAccordionContent({ className, children, ...props }: XcvAccordionContentProps): react.JSX.Element;
+declare const XcvAccordion: react.ForwardRefExoticComponent<XcvAccordionProps & react.RefAttributes<HTMLDivElement>> & {
+    Item: typeof XcvAccordionItem;
+    Trigger: typeof XcvAccordionTrigger;
+    Content: typeof XcvAccordionContent;
+};
+
+interface XcvActionsMenuProps extends HTMLAttributes<HTMLDivElement> {
+    radius?: XcvRadius;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+type XcvActionsMenuTriggerProps = ButtonHTMLAttributes<HTMLButtonElement>;
+declare function XcvActionsMenuTrigger({ className, children, type, onClick, onKeyDown, ...props }: XcvActionsMenuTriggerProps): react.JSX.Element;
+interface XcvActionsMenuContentProps extends HTMLAttributes<HTMLDivElement> {
+    label: string;
+}
+declare function XcvActionsMenuContent({ label, className, children, onKeyDown, ...props }: XcvActionsMenuContentProps): react.ReactPortal | null;
+interface XcvActionsMenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onSelect"> {
+    disabled?: boolean;
+    onSelect?: () => void;
+    children: ReactNode;
+}
+declare function XcvActionsMenuItem({ className, disabled, onSelect, onClick, children, ...props }: XcvActionsMenuItemProps): react.JSX.Element;
+declare function XcvActionsMenuSeparator(): react.JSX.Element;
+declare const XcvActionsMenu: react.ForwardRefExoticComponent<XcvActionsMenuProps & react.RefAttributes<HTMLDivElement>> & {
+    Trigger: typeof XcvActionsMenuTrigger;
+    Content: typeof XcvActionsMenuContent;
+    Item: typeof XcvActionsMenuItem;
+    Separator: typeof XcvActionsMenuSeparator;
+};
+
+type XcvTabsOrientation = "horizontal" | "vertical";
+type XcvTabsProps = HTMLAttributes<HTMLDivElement> & {
+    radius?: XcvRadius;
+    onValueChange?: (value: string) => void;
+    orientation?: XcvTabsOrientation;
+} & ({
+    value: string;
+    defaultValue?: never;
+} | {
+    value?: never;
+    defaultValue: string;
+});
+interface XcvTabsListProps extends HTMLAttributes<HTMLDivElement> {
+    label: string;
+}
+declare function XcvTabsList({ label, className, children, onKeyDown, ...props }: XcvTabsListProps): react.JSX.Element;
+interface XcvTabsTabProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
+    value: string;
+    children: ReactNode;
+}
+declare function XcvTabsTab({ value, className, children, disabled, ...props }: XcvTabsTabProps): react.JSX.Element;
+interface XcvTabsPanelProps extends HTMLAttributes<HTMLDivElement> {
+    value: string;
+}
+declare function XcvTabsPanel({ value, className, children, ...props }: XcvTabsPanelProps): react.JSX.Element;
+declare const XcvTabs: react.ForwardRefExoticComponent<XcvTabsProps & react.RefAttributes<HTMLDivElement>> & {
+    List: typeof XcvTabsList;
+    Tab: typeof XcvTabsTab;
+    Panel: typeof XcvTabsPanel;
+};
+
+interface XcvStepperStep {
+    /** Stable unique key for this step. */
+    id: string;
+    /** Visible step label. */
+    label: ReactNode;
+    /** Native anchor destination, including an in-page fragment when appropriate. */
+    href: string;
+}
+interface XcvStepperProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+    /** Steps to render as native navigation links. */
+    radius?: XcvRadius;
+    steps: readonly XcvStepperStep[];
+    /** Number of columns on wider viewports. Narrow layouts use two columns. */
+    columns?: 3 | 4;
+    /** Accessible name for the navigation landmark. */
+    label?: string;
+}
+declare const XcvStepper: react.ForwardRefExoticComponent<XcvStepperProps & react.RefAttributes<HTMLElement>>;
+
+interface XcvPaginationProps extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
+    radius?: XcvRadius;
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    /** @deprecated The page window is intentionally fixed at three slots. */
+    siblingCount?: number;
+    label?: string;
+    firstLabel?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    lastLabel?: string;
+    pageLabel?: (page: number) => string;
+}
+declare const XcvPagination: react.ForwardRefExoticComponent<XcvPaginationProps & react.RefAttributes<HTMLElement>>;
+
+interface XcvFilterOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface XcvFilterGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange"> {
+    label: string;
+    name?: string;
+    options: readonly XcvFilterOption[];
+    values?: readonly string[];
+    defaultValues?: readonly string[];
+    onValuesChange?: (values: string[]) => void;
+    orientation?: "vertical" | "horizontal";
+}
+declare const XcvFilterGroup: react.ForwardRefExoticComponent<XcvFilterGroupProps & react.RefAttributes<HTMLFieldSetElement>>;
+
+type XcvStatCardDetailTone = "neutral" | "positive" | "negative";
+interface XcvStatCardProps extends HTMLAttributes<HTMLDivElement> {
+    radius?: XcvRadius;
+    label: ReactNode;
+    value: ReactNode;
+    description?: ReactNode;
+    detail?: ReactNode;
+    detailTone?: XcvStatCardDetailTone;
+    icon?: ReactNode;
+}
+declare const XcvStatCard: react.ForwardRefExoticComponent<XcvStatCardProps & react.RefAttributes<HTMLDivElement>>;
+
+interface XcvTableProps extends TableHTMLAttributes<HTMLTableElement> {
+    density?: "comfortable" | "compact";
+    radius?: XcvRadius;
+    wrapperClassName?: string;
+    wrapperLabel?: string;
+}
+type XcvTableCaptionProps = HTMLAttributes<HTMLTableCaptionElement>;
+declare function XcvTableCaption({ className, ...props }: XcvTableCaptionProps): react.JSX.Element;
+type XcvTableHeadProps = HTMLAttributes<HTMLTableSectionElement>;
+declare function XcvTableHead({ className, ...props }: XcvTableHeadProps): react.JSX.Element;
+type XcvTableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
+declare function XcvTableBody({ className, ...props }: XcvTableBodyProps): react.JSX.Element;
+type XcvTableRowProps = HTMLAttributes<HTMLTableRowElement>;
+declare function XcvTableRow({ className, ...props }: XcvTableRowProps): react.JSX.Element;
+type XcvTableHeaderCellProps = ThHTMLAttributes<HTMLTableCellElement>;
+declare function XcvTableHeaderCell({ scope, className, ...props }: XcvTableHeaderCellProps): react.JSX.Element;
+type XcvTableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
+declare function XcvTableCell({ className, ...props }: XcvTableCellProps): react.JSX.Element;
+declare const XcvTable: react.ForwardRefExoticComponent<XcvTableProps & react.RefAttributes<HTMLTableElement>> & {
+    Caption: typeof XcvTableCaption;
+    Head: typeof XcvTableHead;
+    Body: typeof XcvTableBody;
+    Row: typeof XcvTableRow;
+    HeaderCell: typeof XcvTableHeaderCell;
+    Cell: typeof XcvTableCell;
+};
+
+interface XcvSearchBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "value" | "defaultValue" | "onChange"> {
+    label: string;
+    radius?: XcvRadius;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onSearch: (value: string) => void;
+    debounceMs?: number;
+    loading?: boolean;
+    clearable?: boolean;
+    clearLabel?: string;
+    submitLabel?: string;
+}
+declare const XcvSearchBox: react.ForwardRefExoticComponent<XcvSearchBoxProps & react.RefAttributes<HTMLInputElement>>;
+
+export { XcvAccordion, type XcvAccordionContentProps, type XcvAccordionItemProps, type XcvAccordionMode, type XcvAccordionProps, type XcvAccordionTriggerProps, type XcvAccordionValue, XcvActionsMenu, type XcvActionsMenuContentProps, type XcvActionsMenuItemProps, type XcvActionsMenuProps, type XcvActionsMenuTriggerProps, type XcvAlignment, XcvBadge, type XcvBadgeProps, type XcvBadgeTone, XcvBox, type XcvBoxProps, XcvButton, type XcvButtonProps, type XcvButtonVariant, XcvCard, type XcvCardProps, type XcvCardSlotProps, type XcvCardVisualProps, XcvCheckbox, type XcvCheckboxProps, XcvContainer, type XcvContainerProps, XcvDivider, type XcvDividerProps, type XcvFieldState, XcvFilterGroup, type XcvFilterGroupProps, type XcvFilterOption, type XcvFlexDirection, XcvFormField, type XcvFormFieldProps, XcvInline, type XcvInlineProps, type XcvJustification, XcvLabel, type XcvLabelProps, type XcvLayoutAlignment, XcvLink, type XcvLinkProps, XcvList, XcvListItem, type XcvListItemProps, type XcvListMarker, type XcvListProps, type XcvListVariant, XcvLoader, type XcvLoaderProps, type XcvLoaderSize, type XcvLoaderVariant, XcvMedia, type XcvMediaAspectRatio, type XcvMediaProps, XcvNotice, type XcvNoticeProps, type XcvNoticeTone, XcvPagination, type XcvPaginationProps, XcvRadio, type XcvRadioProps, type XcvRadius, XcvSearchBox, type XcvSearchBoxProps, XcvSelect, type XcvSelectOption, type XcvSelectProps, type XcvSize, type XcvSpacing, XcvStack, type XcvStackProps, XcvStatCard, type XcvStatCardDetailTone, type XcvStatCardProps, XcvStepper, type XcvStepperProps, type XcvStepperStep, XcvSurface, type XcvSurfaceProps, XcvTable, type XcvTableBodyProps, type XcvTableCaptionProps, type XcvTableCellProps, type XcvTableHeadProps, type XcvTableHeaderCellProps, type XcvTableProps, type XcvTableRowProps, XcvTabs, type XcvTabsListProps, type XcvTabsOrientation, type XcvTabsPanelProps, type XcvTabsProps, type XcvTabsTabProps, XcvText, XcvTextArea, type XcvTextAreaProps, XcvTextInput, type XcvTextInputProps, type XcvTextProps, XcvTitle, type XcvTitleProps, XcvToggle, type XcvToggleProps };