@chassis-ui/react 0.1.3 → 0.3.0

package/dist/chunks/index-CFnQubsV.d.ts

@@ -0,0 +1,123 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { t as NavVariant } from "./navVariant-CnD21GBS.js";
+import React, { AriaAttributes, ElementType, HTMLAttributes, ReactElement, ReactNode } from "react";
+import { Key as Key$1 } from "react-stately";
+//#region src/components/tabs/Tabs.d.ts
+type TabsOwnProps<C extends ElementType> = {
+  /**
+   * A `TabList` (containing `Tab` children) followed by one `TabPanel` per tab.
+   */
+  children?: ReactNode;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * The initially selected tab's key (uncontrolled).
+   */
+  defaultSelectedKey?: Key$1;
+  /**
+   * The keys of tabs that cannot be selected, focused, or otherwise interacted with.
+   */
+  disabledKeys?: Iterable<Key$1>;
+  /**
+   * Whether tabs are selected automatically on arrow-key focus (`'automatic'`, the default) or
+   * only on explicit activation — Enter/Space or click (`'manual'`).
+   */
+  keyboardActivation?: 'automatic' | 'manual';
+  /**
+   * Callback fired when the selected tab changes.
+   */
+  onSelectionChange?: (key: Key$1) => void;
+  /**
+   * The orientation of the tab list.
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * The selected tab's key (controlled).
+   */
+  selectedKey?: Key$1;
+};
+type TabsProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, TabsOwnProps<C>>;
+type TabsComponent = (<C extends ElementType = 'div'>(props: TabsProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const Tabs: TabsComponent;
+//#endregion
+//#region src/components/tabs/Tab.d.ts
+interface TabProps {
+  /**
+   * Label content for the tab. Must be a plain string for it to be used as the tab's accessible
+   * name when the rendered content itself doesn't expose one (e.g. an icon-only tab).
+   */
+  children: ReactNode;
+  /**
+   * Prevents the tab from being selected, focused, or otherwise interacted with.
+   */
+  disabled?: boolean;
+  /**
+   * Identifies this tab and pairs it with the `TabPanel` of the same `id`.
+   */
+  id: Key$1;
+  /**
+   * Keeps the tab in the list inside a `NavOverflow`, whatever the width.
+   */
+  keepVisible?: boolean;
+}
+declare const Tab: {
+  (_props: TabProps): null;
+  displayName: string;
+};
+//#endregion
+//#region src/components/tabs/TabList.d.ts
+interface TabListProps extends AriaAttributes {
+  /**
+   * `Tab` elements — read as data by `Tabs` to build the tab collection (see `Tabs.tsx`). Not
+   * rendered directly.
+   */
+  children: ReactNode;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Size the component sm or lg.
+   */
+  size?: 'sm' | 'lg';
+  /**
+   * Set the tab list variant to tabs, to segments (a segmented control) or to underline, which
+   * underlines the selected tab. `'pills'` is the former name of `'segments'`: deprecated, it
+   * renders the same.
+   *
+   * @type { 'tabs' | 'segments' | 'underline' | 'pills' }
+   */
+  variant?: NavVariant;
+}
+declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLUListElement>>;
+//#endregion
+//#region src/components/tabs/TabPanel.d.ts
+interface TabPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
+  /**
+   * Content of the panel, shown while the `Tab` of the same `id` is selected.
+   */
+  children: ReactNode;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Pairs this panel with the `Tab` of the same `id`.
+   */
+  id: Key$1;
+}
+declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Tab as a, TabsProps as c, TabListProps as i, TabPanelProps as n, TabProps as o, TabList as r, Tabs as s, TabPanel as t };
+//# sourceMappingURL=index-CFnQubsV.d.ts.map

package/dist/chunks/index-CJXKl97l.d.ts

@@ -0,0 +1,120 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, r as PolymorphicRefWithFallback, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { n as ContextColor, r as ContextStyle } from "./types-CS_40Txv.js";
+import React, { ElementType, ReactElement } from "react";
+//#region src/components/list/List.d.ts
+interface ListItemDef {
+  /**
+   * Stable key for the rendered item. Falls back to the item's index in `items`.
+   */
+  id?: number | string;
+  /**
+   * Item label content.
+   */
+  label: React.ReactNode;
+  /**
+   * Makes the item a link.
+   */
+  href?: string;
+  /**
+   * Sets the color of the item.
+   */
+  color?: ContextColor;
+  /**
+   * Marks the item as active.
+   */
+  active?: boolean;
+  /**
+   * Marks the item as disabled.
+   */
+  disabled?: boolean;
+}
+type ListOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   * Defaults to `'ul'`, unless an item (a data-driven item with `href`, or a `<ListItem>` child
+   * rendering an `<a>`/`<button>` through `component` or `asChild`) is interactive — a bare
+   * `<a>`/`<button>` isn't a valid direct child of `<ul>`/`<ol>`, so the default switches to
+   * `'div'` instead. Pass `component` explicitly to opt out of this.
+   */
+  component?: C;
+  /**
+   * Sets the color of the component to one of Chassis context colors.
+   */
+  color?: ContextColor;
+  /**
+   * Remove outer borders and rounded corners to render list items edge-to-edge in a parent component (e.g., `<Card>`).
+   */
+  flush?: boolean;
+  /**
+   * Array of item definitions for data-driven rendering. When provided, children are ignored.
+   */
+  items?: ListItemDef[];
+  /**
+   * Specify a layout type.
+   */
+  layout?: 'horizontal' | 'sm:horizontal' | 'md:horizontal' | 'lg:horizontal' | 'xl:horizontal' | '2xl:horizontal';
+  /**
+   * Number list items sequentially using CSS counters. Pair with `component="ol"` for semantic correctness.
+   */
+  numbered?: boolean;
+  /**
+   * Remove outer borders, rounded corners, and horizontal padding for a minimal, edge-to-edge appearance.
+   */
+  plain?: boolean;
+  /**
+   * Applies a `.solid`, `.outline`, or `.smooth` context style. Only meaningful together with `color`.
+   */
+  variant?: ContextStyle;
+};
+type ListProps<C extends ElementType = 'ul'> = PolymorphicComponentProps<C, ListOwnProps<C>>;
+type ListComponent = (<C extends ElementType = 'ul'>(props: ListProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const List: ListComponent;
+//#endregion
+//#region src/components/list/ListItem.d.ts
+type ListItemOwnProps<C extends ElementType> = {
+  /**
+   * Toggle the active state for the component.
+   */
+  active?: boolean;
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Sets the color of the component to one of Chassis context colors.
+   */
+  color?: ContextColor;
+  /**
+   * Toggle the disabled state for the component.
+   */
+  disabled?: boolean;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * The href attribute specifies the URL of the page the link goes to. Renders an `<a>` in place
+   * of the `<li>`, unless `component` or `asChild` chose the element. Inside a `List`, the list
+   * renders a `<div>` around it in place of the `<ul>`.
+   */
+  href?: string;
+};
+type ListItemProps<C extends ElementType = 'li'> = PolymorphicComponentProps<C, ListItemOwnProps<C>>;
+type ListItemComponent = (<C extends ElementType = 'li'>(props: ListItemProps<C> & {
+  ref?: PolymorphicRefWithFallback<C, HTMLLIElement | HTMLAnchorElement>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const ListItem: ListItemComponent;
+//#endregion
+export { ListProps as a, ListItemDef as i, ListItemProps as n, List as r, ListItem as t };
+//# sourceMappingURL=index-CJXKl97l.d.ts.map

package/dist/chunks/index-CJzKu7QI.d.ts

@@ -0,0 +1,41 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { n as ContextColor } from "./types-CS_40Txv.js";
+import { ElementType, ReactElement } from "react";
+//#region src/components/spinner/Spinner.d.ts
+type SpinnerOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Sets the color of the component to one of Chassis context colors.
+   */
+  color?: ContextColor;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * Size the component sm.
+   */
+  size?: 'sm';
+  /**
+   * Set the button variant to an outlined button or a ghost button.
+   */
+  variant?: 'border' | 'grow';
+  /**
+   * Set visually hidden label for accessibility purposes.
+   */
+  visuallyHiddenLabel?: string;
+};
+type SpinnerProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, SpinnerOwnProps<C>>;
+type SpinnerComponent = (<C extends ElementType = 'div'>(props: SpinnerProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const Spinner: SpinnerComponent;
+//#endregion
+export { SpinnerProps as n, Spinner as t };
+//# sourceMappingURL=index-CJzKu7QI.d.ts.map

package/dist/chunks/index-CKx1KHED.d.ts

@@ -0,0 +1,303 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { n as ContextColor, o as Sizing, r as ContextStyle, s as Spacing, t as Breakpoint } from "./types-CS_40Txv.js";
+import { t as FlexDirection } from "./breakpoints-CJ-498B7.js";
+import { n as LinkProps } from "./Link-nrd0JWlO.js";
+import { ElementType, ReactElement, ReactNode } from "react";
+//#region src/components/card/Card.d.ts
+type CardOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * Sets the color of the component to one of Chassis context colors.
+   */
+  color?: ContextColor;
+  /**
+   * Switches the card from its default stacked (column) layout to a side-by-side (row) layout.
+   * Wrap the image and body in `Col` to control each side's width.
+   */
+  direction?: FlexDirection;
+  /**
+   * Shorthand for a `CardFooter`, rendered after the image/title/subtitle/text/`children` block.
+   */
+  footer?: ReactNode;
+  /**
+   * Shorthand for a `CardImage` — pass either a `src` URL (combine with `imageAlt`/
+   * `imageOrientation`) or a fully-formed element — a `<CardImage>`, `<Skeleton>`,
+   * `<Placeholder>`, or anything else — rendered as-is in its place. `imageAlt`/`imageOrientation`
+   * only apply to the `src` form; set them directly on your own element otherwise. For a
+   * horizontal layout or an overlay, omit this and compose `CardImage` directly as a child
+   * instead.
+   */
+  image?: ReactNode;
+  /**
+   * Accessible alt text for `image`. Ignored unless `image` is set.
+   */
+  imageAlt?: string;
+  /**
+   * Orientates `image` to the top (default) or bottom of the card.
+   */
+  imageOrientation?: 'top' | 'bottom';
+  /**
+   * Overrides `direction` at one or more breakpoints — e.g. `{ lg: 'row' }` to lay the card
+   * out horizontally from `lg` up while stacking below it.
+   */
+  responsive?: Partial<Record<Breakpoint, FlexDirection>>;
+  /**
+   * Sets the size of the component to one of Chassis component sizes.
+   */
+  size?: Sizing;
+  /**
+   * Shorthand for a `CardSubtitle`, rendered directly after `title`.
+   */
+  subtitle?: ReactNode;
+  /**
+   * Shorthand for a `CardText`, rendered after `title`/`subtitle`.
+   */
+  text?: ReactNode;
+  /**
+   * Shorthand for a `CardTitle`. Set alongside `subtitle`/`text` (or plain `children`, e.g. a
+   * `Button`) to build a standard card without composing `CardBody`/`CardTitle` yourself — all
+   * render together inside a single `CardBody`, in that order. Only takes effect when at least
+   * one of `image`/`title`/`subtitle`/`text`/`footer` is set; otherwise `children` render as-is,
+   * so full manual composition (`CardHeader`, lists, overlays, nav headers, …) keeps working
+   * unchanged. Mixing shorthand props with a manually-composed `children` tree isn't supported —
+   * pick one approach per card.
+   */
+  title?: ReactNode;
+  /**
+   * Sets the context style of the component. `basic` (the default) renders with no extra class.
+   */
+  variant?: ContextStyle;
+};
+type CardProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, CardOwnProps<C>>;
+type CardComponent = (<C extends ElementType = 'div'>(props: CardProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const Card: CardComponent;
+//#endregion
+//#region src/components/card/CardBody.d.ts
+type CardBodyOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * Switches the body from its default stacked (column) layout to a side-by-side (row) layout —
+   * for placing an image beside text within a single padded region. Wrap the image and text in
+   * `Col` to control each side's width, and nest another `CardBody` (with `.p-0`) for the text
+   * side so it doesn't receive double padding.
+   */
+  direction?: FlexDirection;
+  /**
+   * Spacing between children, mapped to the `gap-*` utility classes. Overrides the card's default
+   * gap between body children.
+   */
+  gap?: Spacing | 0;
+  /**
+   * Overrides `direction` at one or more breakpoints.
+   */
+  responsive?: Partial<Record<Breakpoint, FlexDirection>>;
+};
+type CardBodyProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, CardBodyOwnProps<C>>;
+type CardBodyComponent = (<C extends ElementType = 'div'>(props: CardBodyProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const CardBody: CardBodyComponent;
+//#endregion
+//#region src/components/card/CardFooter.d.ts
+type CardFooterOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type CardFooterProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, CardFooterOwnProps<C>>;
+type CardFooterComponent = (<C extends ElementType = 'div'>(props: CardFooterProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const CardFooter: CardFooterComponent;
+//#endregion
+//#region src/components/card/CardGroup.d.ts
+type CardGroupOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type CardGroupProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, CardGroupOwnProps<C>>;
+type CardGroupComponent = (<C extends ElementType = 'div'>(props: CardGroupProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const CardGroup: CardGroupComponent;
+//#endregion
+//#region src/components/card/CardHeader.d.ts
+type CardHeaderOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type CardHeaderProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, CardHeaderOwnProps<C>>;
+type CardHeaderComponent = (<C extends ElementType = 'div'>(props: CardHeaderProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const CardHeader: CardHeaderComponent;
+//#endregion
+//#region src/components/card/CardImage.d.ts
+type CardImageOrientation = 'top' | 'bottom' | 'start' | 'end';
+type CardImageOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component —
+   * e.g. a framework's own `Image` component. Its own props (`src`, `fill`, `priority`, etc.)
+   * are type-checked at the call site once passed here.
+   */
+  component?: C;
+  /**
+   * Orientates the image to the top or bottom of the card as an "image cap", or to the start/end
+   * for a horizontal layout. Omit to round all four corners for use inside `CardBody`.
+   */
+  orientation?: CardImageOrientation;
+  /**
+   * Overrides `orientation` at one or more breakpoints — e.g. `{ lg: 'start' }` to switch an
+   * image cap from `top` to `start` once the card lays out horizontally.
+   */
+  responsive?: Partial<Record<Breakpoint, CardImageOrientation>>;
+};
+type CardImageProps<C extends ElementType = 'img'> = PolymorphicComponentProps<C, CardImageOwnProps<C>>;
+type CardImageComponent = (<C extends ElementType = 'img'>(props: CardImageProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const CardImage: CardImageComponent;
+//#endregion
+//#region src/components/card/CardImageOverlay.d.ts
+type CardImageOverlayOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type CardImageOverlayProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, CardImageOverlayOwnProps<C>>;
+type CardImageOverlayComponent = (<C extends ElementType = 'div'>(props: CardImageOverlayProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const CardImageOverlay: CardImageOverlayComponent;
+//#endregion
+//#region src/components/card/CardLink.d.ts
+type CardLinkOwnProps = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+};
+type CardLinkProps<C extends ElementType = 'a'> = LinkProps<C> & CardLinkOwnProps;
+type CardLinkComponent = (<C extends ElementType = 'a'>(props: CardLinkProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const CardLink: CardLinkComponent;
+//#endregion
+//#region src/components/card/CardSubtitle.d.ts
+type CardSubtitleOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type CardSubtitleProps<C extends ElementType = 'h6'> = PolymorphicComponentProps<C, CardSubtitleOwnProps<C>>;
+type CardSubtitleComponent = (<C extends ElementType = 'h6'>(props: CardSubtitleProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const CardSubtitle: CardSubtitleComponent;
+//#endregion
+//#region src/components/card/CardText.d.ts
+type CardTextOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type CardTextProps<C extends ElementType = 'p'> = PolymorphicComponentProps<C, CardTextOwnProps<C>>;
+type CardTextComponent = (<C extends ElementType = 'p'>(props: CardTextProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const CardText: CardTextComponent;
+//#endregion
+//#region src/components/card/CardTitle.d.ts
+type CardTitleOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type CardTitleProps<C extends ElementType = 'h5'> = PolymorphicComponentProps<C, CardTitleOwnProps<C>>;
+type CardTitleComponent = (<C extends ElementType = 'h5'>(props: CardTitleProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const CardTitle: CardTitleComponent;
+//#endregion
+export { CardProps as S, CardFooter as _, CardSubtitle as a, CardBodyProps as b, CardLinkProps as c, CardImage as d, CardImageProps as f, CardGroupProps as g, CardGroup as h, CardTextProps as i, CardImageOverlay as l, CardHeaderProps as m, CardTitleProps as n, CardSubtitleProps as o, CardHeader as p, CardText as r, CardLink as s, CardTitle as t, CardImageOverlayProps as u, CardFooterProps as v, Card as x, CardBody as y };
+//# sourceMappingURL=index-CKx1KHED.d.ts.map

package/dist/chunks/index-COsIPd8L.d.ts

@@ -0,0 +1,63 @@
+import "./focus-ring-SR_LwaN7.js";
+import { r as PolymorphicRefWithFallback, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { n as ContextColor, r as ContextStyle } from "./types-CS_40Txv.js";
+import { ElementType, MouseEventHandler, ReactElement } from "react";
+//#region src/components/chip/Chip.d.ts
+type ChipOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Sets the color of the component to one of Chassis context colors.
+   */
+  color?: ContextColor;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   * Defaults to `span`, or `a` when `href` is set.
+   */
+  component?: C;
+  /**
+   * Toggle the disabled state for the component. Applied as the native `disabled` attribute when
+   * `component` is `button`, or the `.disabled` class for every other element (a bare `<span>`/
+   * `<a>` has no real `disabled` attribute).
+   */
+  disabled?: boolean;
+  /**
+   * Renders the chip as a link to this URL. Defaults `component` to `a`.
+   */
+  href?: string;
+  /**
+   * Fires on click. Typed for every element `component` can actually render, rather than
+   * narrowed to whichever element `C` happens to be.
+   */
+  onClick?: MouseEventHandler<HTMLElement>;
+  /**
+   * Marks the chip as pressed for toggle-style usage (e.g. a filter chip). Applies the `.active`
+   * class and sets `aria-pressed` so assistive technology announces the toggle state.
+   */
+  pressed?: boolean;
+  /**
+   * Size the component sm or lg.
+   */
+  size?: 'sm' | 'lg';
+  /**
+   * Specifies the type of button. Only applies when `component` is `button`. Different browsers
+   * may use different default types for the `<button>` element, so always specify it explicitly.
+   */
+  type?: 'button' | 'submit' | 'reset';
+  /**
+   * Set the chip style variant. `solid`/`basic` render the default look with no extra class.
+   */
+  variant?: ContextStyle;
+};
+type ChipProps<C extends ElementType = 'span'> = PolymorphicComponentProps<C, ChipOwnProps<C>>;
+type ChipComponent = (<C extends ElementType = 'span'>(props: ChipProps<C> & {
+  ref?: PolymorphicRefWithFallback<C, HTMLSpanElement | HTMLAnchorElement>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const Chip: ChipComponent;
+//#endregion
+export { ChipProps as n, Chip as t };
+//# sourceMappingURL=index-COsIPd8L.d.ts.map