@chassis-ui/react 0.2.0 → 0.3.0

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

@@ -0,0 +1,182 @@
+import "./focus-ring-SR_LwaN7.js";
+import { i as IconValue } from "./iconConfig-C6gbYhsD.js";
+import { CSSProperties, ReactElement, ReactNode, Ref } from "react";
+import { Key as Key$1, Selection } from "react-aria-components";
+//#region src/components/tree/Tree.d.ts
+interface TreeProps<T extends object> {
+  /**
+   * An accessible name for the tree, when no visible heading names it.
+   */
+  'aria-label'?: string;
+  /**
+   * The id of the visible heading that names the tree.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * Focus the tree when it mounts: `true` or `'first'` focuses its first item, `'last'` its last.
+   */
+  autoFocus?: boolean | 'first' | 'last';
+  /**
+   * Draw a checkbox in every item, which selects the item. On by default with
+   * `selectionMode="multiple"` and the `'toggle'` selection behavior, off otherwise.
+   */
+  checkboxes?: boolean;
+  /**
+   * `TreeItem` elements, or a render function called once per entry of `items`, returning that
+   * entry's `TreeItem`.
+   */
+  children: ReactNode | ((item: T) => ReactElement);
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * The keys of the items expanded at first (uncontrolled).
+   */
+  defaultExpandedKeys?: Iterable<Key$1>;
+  /**
+   * The keys of the items selected at first (uncontrolled): `'all'`, or an iterable of keys.
+   */
+  defaultSelectedKeys?: 'all' | Iterable<Key$1>;
+  /**
+   * Values that should rebuild the items when using the `items`/render-function form of
+   * `children` — e.g. a value from outside `items` that the render function reads. Without this,
+   * changing that value won't re-render the items, which are only rebuilt when `items` or
+   * `dependencies` change by reference.
+   */
+  dependencies?: ReadonlyArray<unknown>;
+  /**
+   * Whether `disabledKeys` disables every interaction with an item, or only its selection.
+   *
+   * @default 'all'
+   */
+  disabledBehavior?: 'all' | 'selection';
+  /**
+   * The keys of the items that are disabled.
+   */
+  disabledKeys?: Iterable<Key$1>;
+  /**
+   * Keep at least one item selected: the last selected item can't be deselected.
+   */
+  disallowEmptySelection?: boolean;
+  /**
+   * The keys of the expanded items (controlled).
+   */
+  expandedKeys?: Iterable<Key$1>;
+  /**
+   * The chevron of an item with child items, in place of `IconProvider`'s `expand` icon: an icon
+   * name, or an element.
+   */
+  expandIcon?: IconValue;
+  /**
+   * The id of the tree element.
+   */
+  id?: string;
+  /**
+   * The data to render as items, through the function form of `children`.
+   */
+  items?: Iterable<T>;
+  /**
+   * Called with an item's key when the item is activated: with Enter, or with a click when the
+   * tree has no selection. An item's own `onAction` is called too.
+   */
+  onAction?: (key: Key$1) => void;
+  /**
+   * Called with the keys of the expanded items when an item expands or collapses.
+   */
+  onExpandedChange?: (keys: Set<Key$1>) => void;
+  /**
+   * Called with the keys of the selected items (`'all'`, or a `Set`) when the selection changes.
+   */
+  onSelectionChange?: (keys: Selection) => void;
+  /**
+   * What to render in place of the items when there are none.
+   */
+  renderEmptyState?: () => ReactNode;
+  /**
+   * The keys of the selected items (controlled): `'all'`, or an iterable of keys.
+   */
+  selectedKeys?: 'all' | Iterable<Key$1>;
+  /**
+   * How a click changes a multiple selection: `'toggle'` adds or removes the clicked item,
+   * `'replace'` selects it alone, with Ctrl, Cmd and Shift for more, as a file manager does.
+   *
+   * @default 'toggle'
+   */
+  selectionBehavior?: 'toggle' | 'replace';
+  /**
+   * Whether items can be selected, and how many at a time.
+   *
+   * @default 'none'
+   */
+  selectionMode?: 'none' | 'single' | 'multiple';
+  /**
+   * Inline styles for the tree element.
+   */
+  style?: CSSProperties;
+}
+declare const Tree$1: <T extends object>(props: TreeProps<T> & {
+  ref?: Ref<HTMLDivElement>;
+}) => ReactElement;
+//#endregion
+//#region src/components/tree/TreeItem.d.ts
+interface TreeItemProps<T extends object = object> {
+  /**
+   * The item's child items: `TreeItem` elements, or a render function called once per entry of
+   * `items`, returning that entry's `TreeItem`.
+   */
+  children?: ReactNode | ((item: T) => ReactElement);
+  /**
+   * A string of all className you want applied to the item.
+   */
+  className?: string;
+  /**
+   * Values that should rebuild the child items when using the `items`/render-function form of
+   * `children`, as `Tree`'s `dependencies`.
+   */
+  dependencies?: ReadonlyArray<unknown>;
+  /**
+   * Toggle the disabled state for the item, as a key in the tree's `disabledKeys` does.
+   */
+  disabled?: boolean;
+  /**
+   * An icon drawn before the label.
+   */
+  icon?: ReactNode;
+  /**
+   * The item's key, named by `expandedKeys`, `selectedKeys` and `disabledKeys`. Defaults to the
+   * key of the data entry the item renders, or to the item's position.
+   */
+  id?: Key$1;
+  /**
+   * The data to render as child items, through the function form of `children`.
+   */
+  items?: Iterable<T>;
+  /**
+   * The item's content.
+   */
+  label: ReactNode;
+  /**
+   * Called when the item is activated: with Enter, or with a click when the tree has no
+   * selection.
+   */
+  onAction?: () => void;
+  /**
+   * Inline styles for the item's row.
+   */
+  style?: CSSProperties;
+  /**
+   * The item's text, which typing a letter in the tree searches. Defaults to `label` when it is a
+   * string.
+   */
+  textValue?: string;
+}
+/**
+ * An item of a `Tree`: a row with a label, an optional icon, and child items among its children.
+ */
+declare const TreeItem$1: <T extends object = object>(props: TreeItemProps<T> & {
+  ref?: Ref<HTMLDivElement>;
+}) => ReactElement;
+//#endregion
+export { TreeProps as i, TreeItemProps as n, Tree$1 as r, TreeItem$1 as t };
+//# sourceMappingURL=index-DaHQdNul.d.ts.map

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

@@ -143,4 +143,5 @@ interface AccordionItemProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
 }
 declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDetailsElement>>;
 //#endregion
-export { AccordionBody as a, AccordionItemDef as c, AccordionHeaderProps as i, AccordionProps as l, AccordionItemProps as n, AccordionBodyProps as o, AccordionHeader as r, Accordion as s, AccordionItem as t };
+export { AccordionBody as a, AccordionItemDef as c, AccordionHeaderProps as i, AccordionProps as l, AccordionItemProps as n, AccordionBodyProps as o, AccordionHeader as r, Accordion as s, AccordionItem as t };
+//# sourceMappingURL=index-Dcc_W6Kv.d.ts.map

package/dist/chunks/{index-nklPDKlC.d.ts → index-DceCODH9.d.ts}

@@ -1,7 +1,7 @@
 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, t as Breakpoint } from "./types-CS_40Txv.js";
-import { i as IconValue } from "./iconConfig-Bu6Pt9o3.js";
+import { i as IconValue } from "./iconConfig-C6gbYhsD.js";
 import React, { ElementType, HTMLAttributes, ReactElement } from "react";
 //#region src/components/navbar/Navbar.d.ts
 type NavbarOwnProps<C extends ElementType> = {
@@ -134,4 +134,5 @@ interface NavbarTogglerProps extends HTMLAttributes<HTMLButtonElement> {
 }
 declare const NavbarToggler: React.ForwardRefExoticComponent<NavbarTogglerProps & React.RefAttributes<HTMLButtonElement>>;
 //#endregion
-export { NavbarNav as a, NavbarBrandProps as c, NavbarTextProps as i, Navbar as l, NavbarTogglerProps as n, NavbarNavProps as o, NavbarText as r, NavbarBrand as s, NavbarToggler as t, NavbarProps as u };
+export { NavbarNav as a, NavbarBrandProps as c, NavbarTextProps as i, Navbar as l, NavbarTogglerProps as n, NavbarNavProps as o, NavbarText as r, NavbarBrand as s, NavbarToggler as t, NavbarProps as u };
+//# sourceMappingURL=index-DceCODH9.d.ts.map

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

@@ -0,0 +1,32 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { ElementType, ReactElement } from "react";
+//#region src/components/visually-hidden/VisuallyHidden.d.ts
+type VisuallyHiddenOwnProps<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 an HTML element or a component.
+   *
+   * @default 'span'
+   */
+  component?: C;
+  /**
+   * Shows the element while it, or an element inside it, has keyboard focus: a skip link, or a
+   * group of controls only keyboard users reach. Renders `.visually-hidden-focusable` instead of
+   * `.visually-hidden`.
+   */
+  focusable?: boolean;
+};
+type VisuallyHiddenProps<C extends ElementType = 'span'> = PolymorphicComponentProps<C, VisuallyHiddenOwnProps<C>>;
+type VisuallyHiddenComponent = (<C extends ElementType = 'span'>(props: VisuallyHiddenProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const VisuallyHidden: VisuallyHiddenComponent;
+//#endregion
+export { VisuallyHiddenProps as n, VisuallyHidden as t };
+//# sourceMappingURL=index-Ddd7iWfm.d.ts.map

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

@@ -65,4 +65,5 @@ interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>
 }
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 //#endregion
-export { TextareaProps as n, Textarea as t };
+export { TextareaProps as n, Textarea as t };
+//# sourceMappingURL=index-Dfg4Ftb8.d.ts.map

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

@@ -70,4 +70,5 @@ interface StaticTableProps extends TableStyleProps, Omit<TableHTMLAttributes<HTM
 }
 declare const StaticTable: React.ForwardRefExoticComponent<StaticTableProps & React.RefAttributes<HTMLTableElement>>;
 //#endregion
-export { StaticTableProps as n, StaticTable as t };
+export { StaticTableProps as n, StaticTable as t };
+//# sourceMappingURL=index-Dfy1YW5j.d.ts.map

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

@@ -0,0 +1,208 @@
+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 { n as ButtonProps } from "./Button-Cptd4Yk7.js";
+import { n as IconProps } from "./Icon-CioraWLF.js";
+import React, { DialogHTMLAttributes, ElementType, ReactElement } from "react";
+//#region src/components/alert/Alert.d.ts
+interface AlertProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onCancel' | 'onClose'> {
+  /**
+   * Whether a click on the backdrop closes the alert. By default it doesn't (`'static'`): the
+   * alert bounces, since an alert dialog waits for an explicit choice. Set `true` to let it close.
+   */
+  backdrop?: true | 'static';
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Adds a close button in the corner, for an alert that needs a way out besides its actions.
+   */
+  closeButton?: boolean;
+  /**
+   * The close button's accessible name. Defaults to `'Close'`; set it for non-English UIs.
+   */
+  closeLabel?: string;
+  /**
+   * Whether the alert is open when it first renders. Such an alert is uncontrolled: it closes
+   * itself on a close request. Use `visible` to open and close it from outside.
+   */
+  defaultVisible?: boolean;
+  /**
+   * Disable the open/close transition entirely.
+   */
+  instant?: boolean;
+  /**
+   * Whether the Escape key closes the alert. By default it doesn't: the alert bounces instead.
+   */
+  keyboard?: boolean;
+  /**
+   * Renders the alert open from its first paint, server HTML included, as a non-modal dialog: a
+   * static preview. It stays open until a close request. Use `visible` or `defaultVisible` to
+   * open it as a modal dialog.
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the alert asks to be closed: `AlertCancel`, the close button, and, when
+   * allowed, Escape or a backdrop click.
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when a close attempt is blocked: a click on a static backdrop, or Escape
+   * while `keyboard` is off.
+   */
+  onClosePrevented?: () => void;
+  /**
+   * Callback fired after the exit transition completes and the alert is fully hidden.
+   */
+  onHidden?: () => void;
+  /**
+   * Callback fired when the alert starts to open.
+   */
+  onShow?: () => void;
+  /**
+   * Callback fired after the entry transition completes and the alert is fully visible.
+   */
+  onShown?: () => void;
+  /**
+   * Callback fired with `false` when the alert asks to be closed, at the same moments as
+   * `onClose`. It makes `visible` and `onVisibleChange` a pair that takes a state setter.
+   */
+  onVisibleChange?: (visible: boolean) => void;
+  /**
+   * Whether the alert is open. The alert is then controlled: a close request only fires `onClose`
+   * and `onVisibleChange`, and the alert closes when this becomes `false`.
+   */
+  visible?: boolean;
+}
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDialogElement>>;
+//#endregion
+//#region src/components/alert/AlertBody.d.ts
+type AlertBodyOwnProps<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 an HTML element or a component.
+   *
+   * @default 'div'
+   */
+  component?: C;
+};
+type AlertBodyProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, AlertBodyOwnProps<C>>;
+type AlertBodyComponent = (<C extends ElementType = 'div'>(props: AlertBodyProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const AlertBody: AlertBodyComponent;
+//#endregion
+//#region src/components/alert/AlertCancel.d.ts
+type AlertCancelProps = Omit<ButtonProps<'button'>, 'asChild' | 'component' | 'href'>;
+declare const AlertCancel: React.ForwardRefExoticComponent<AlertCancelProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+//#region src/components/alert/AlertCode.d.ts
+type AlertCodeOwnProps<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 an HTML element or a component.
+   *
+   * @default 'code'
+   */
+  component?: C;
+};
+type AlertCodeProps<C extends ElementType = 'code'> = PolymorphicComponentProps<C, AlertCodeOwnProps<C>>;
+type AlertCodeComponent = (<C extends ElementType = 'code'>(props: AlertCodeProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const AlertCode: AlertCodeComponent;
+//#endregion
+//#region src/components/alert/AlertFooter.d.ts
+type AlertFooterOwnProps<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 an HTML element or a component.
+   *
+   * @default 'div'
+   */
+  component?: C;
+  /**
+   * Stacks the actions as full-width rows on small screens, instead of sharing one row.
+   */
+  stacked?: boolean;
+};
+type AlertFooterProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, AlertFooterOwnProps<C>>;
+type AlertFooterComponent = (<C extends ElementType = 'div'>(props: AlertFooterProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const AlertFooter: AlertFooterComponent;
+//#endregion
+//#region src/components/alert/AlertIcon.d.ts
+type AlertIconProps = IconProps & {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Colors the icon with one of Chassis context colors, such as `danger` for a destructive
+   * confirmation.
+   */
+  color?: ContextColor;
+};
+declare const AlertIcon: React.ForwardRefExoticComponent<AlertIconProps & React.RefAttributes<HTMLSpanElement | SVGSVGElement>>;
+//#endregion
+//#region src/components/alert/AlertText.d.ts
+type AlertTextOwnProps<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 an HTML element or a component.
+   *
+   * @default 'p'
+   */
+  component?: C;
+};
+type AlertTextProps<C extends ElementType = 'p'> = PolymorphicComponentProps<C, AlertTextOwnProps<C>>;
+type AlertTextComponent = (<C extends ElementType = 'p'>(props: AlertTextProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const AlertText: AlertTextComponent;
+//#endregion
+//#region src/components/alert/AlertTitle.d.ts
+type AlertTitleOwnProps<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 an HTML element or a component.
+   *
+   * @default 'h2'
+   */
+  component?: C;
+};
+type AlertTitleProps<C extends ElementType = 'h2'> = PolymorphicComponentProps<C, AlertTitleOwnProps<C>>;
+type AlertTitleComponent = (<C extends ElementType = 'h2'>(props: AlertTitleProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const AlertTitle: AlertTitleComponent;
+//#endregion
+export { AlertIcon as a, AlertFooterProps as c, AlertCancel as d, AlertCancelProps as f, AlertProps as g, Alert as h, AlertTextProps as i, AlertCode as l, AlertBodyProps as m, AlertTitleProps as n, AlertIconProps as o, AlertBody as p, AlertText as r, AlertFooter as s, AlertTitle as t, AlertCodeProps as u };
+//# sourceMappingURL=index-DgHvXzVh.d.ts.map

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

@@ -41,4 +41,5 @@ type BadgeComponent = (<C extends ElementType = 'span'>(props: BadgeProps<C> & {
 };
 declare const Badge: BadgeComponent;
 //#endregion
-export { BadgeProps as n, Badge as t };
+export { BadgeProps as n, Badge as t };
+//# sourceMappingURL=index-Dh5CaHTP.d.ts.map

package/dist/chunks/{index-8PhBSbNQ.d.ts → index-DjXRq-n3.d.ts}

@@ -1,7 +1,7 @@
 import "./focus-ring-SR_LwaN7.js";
 import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
 import { n as ContextColor, t as Breakpoint } from "./types-CS_40Txv.js";
-import { n as Span } from "./breakpoints-SLMTNHF9.js";
+import { r as WidthSpan } from "./breakpoints-CJ-498B7.js";
 import { ComponentPropsWithoutRef, ElementType, ReactElement, ReactNode } from "react";
 //#region src/components/skeleton/Skeleton.d.ts
 type SkeletonOwnProps<C extends ElementType> = {
@@ -28,20 +28,22 @@ type SkeletonOwnProps<C extends ElementType> = {
    */
   component?: C;
   /**
-   * Width of the skeleton, expressed as a column span (of 12), or `'auto'`/`true` for a
-   * natural-width skeleton. Unset by default, so the rendered element's own intrinsic width
-   * applies — set it explicitly (e.g. `span={12}`) for a full-width text line; leave it unset
-   * when `component` is something that sizes itself, like `Avatar` or `Button`.
+   * Width of the skeleton in twelfths of its parent (`span={6}` is half, mapped to the
+   * `w-{n}/12` class; `span={12}` is `w-100`), `'auto'` for its natural width (`w-auto`), or
+   * `true` to fill the rest of a flex row (`flex-fill`). Unset by default, so the rendered
+   * element's own intrinsic width applies — set it explicitly (e.g. `span={12}`) for a
+   * full-width text line; leave it unset when `component` is something that sizes itself, like
+   * `Avatar` or `Button`.
    *
    * @type { 'auto' | number | string | boolean }
    */
-  span?: Span;
+  span?: WidthSpan;
   /**
    * Overrides `span` at a breakpoint and up.
    *
    * @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', 'auto' | number | string | boolean>> }
    */
-  responsive?: Partial<Record<Breakpoint, Span>>;
+  responsive?: Partial<Record<Breakpoint, WidthSpan>>;
 };
 type SkeletonProps<C extends ElementType = 'span'> = PolymorphicComponentProps<C, SkeletonOwnProps<C>>;
 type SkeletonComponent = (<C extends ElementType = 'span'>(props: SkeletonProps<C> & {
@@ -82,12 +84,15 @@ type SkeletonLoaderOwnProps<C extends ElementType> = {
    *
    * @type { 'auto' | number | string | boolean | Array<'auto' | number | string | boolean> }
    */
-  spans?: Span | Span[];
+  spans?: WidthSpan | WidthSpan[];
 };
 type SkeletonLoaderProps<C extends ElementType = 'span'> = SkeletonLoaderOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof SkeletonLoaderOwnProps<C> | 'asChild'>;
-type SkeletonLoaderComponent = (<C extends ElementType = 'span'>(props: SkeletonLoaderProps<C>) => ReactElement | null) & {
+type SkeletonLoaderComponent = (<C extends ElementType = 'span'>(props: SkeletonLoaderProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
   displayName?: string;
 };
 declare const SkeletonLoader: SkeletonLoaderComponent;
 //#endregion
-export { SkeletonProps as i, SkeletonLoaderProps as n, Skeleton as r, SkeletonLoader as t };
+export { SkeletonProps as i, SkeletonLoaderProps as n, Skeleton as r, SkeletonLoader as t };
+//# sourceMappingURL=index-DjXRq-n3.d.ts.map

package/dist/chunks/{index-JllMXhVx.d.ts → index-DjrEvKd-.d.ts}

@@ -29,6 +29,14 @@ interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
    * Sets the color of the component to one of Chassis context colors.
    */
   color?: ContextColor;
+  /**
+   * Whether the notification is shown when it first renders. Such a notification is
+   * uncontrolled: its close button and the `autohide` timer hide it. Use `visible` to show and
+   * hide it from outside.
+   *
+   * @default true
+   */
+  defaultVisible?: boolean;
   /**
    * Delay in ms before an `autohide` notification dismisses itself.
    */
@@ -63,13 +71,19 @@ interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
    */
   titleComponent?: ElementType;
   /**
-   * Callback fired when the component requests to be closed.
+   * Callback fired once the notification has hidden: after its exit transition.
    */
   onClose?: () => void;
   /**
-   * Callback fired when the component requests to be shown.
+   * Callback fired when the notification starts to show.
    */
   onShow?: () => void;
+  /**
+   * Callback fired with `false` when the notification asks to hide: its close button, `close`
+   * from `useNotification`, or the `autohide` timer. With `visible` set, the notification hides
+   * only when `visible` becomes `false`.
+   */
+  onVisibleChange?: (visible: boolean) => void;
   /**
    * ARIA live-region role. Use `status` (the default) for confirmation, progress, and
    * informational messages, which announce politely. Use `alert` for messages that need
@@ -77,7 +91,9 @@ interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
    */
   role?: 'status' | 'alert';
   /**
-   * Toggle the visibility of component.
+   * Whether the notification is shown. Setting it makes the notification controlled: it hides
+   * only when this becomes `false`, so pair it with `onVisibleChange`. Left unset, the
+   * notification is shown and hides itself (see `defaultVisible`).
    */
   visible?: boolean;
 }
@@ -173,4 +189,5 @@ interface NotificationContextProps {
 type UseNotificationResult = NotificationContextProps;
 declare const useNotification: () => UseNotificationResult;
 //#endregion
-export { closeNotification as a, NotificationStackProps as c, NotificationIcon as d, NotificationIconProps as f, NotificationProps as g, Notification as h, addNotification as i, NotificationText as l, NotificationTitleProps as m, useNotification as n, notificationQueue as o, NotificationTitle as p, NotificationContent as r, NotificationStack as s, UseNotificationResult as t, NotificationTextProps as u };
+export { closeNotification as a, NotificationStackProps as c, NotificationIcon as d, NotificationIconProps as f, NotificationProps as g, Notification as h, addNotification as i, NotificationText as l, NotificationTitleProps as m, useNotification as n, notificationQueue as o, NotificationTitle as p, NotificationContent as r, NotificationStack as s, UseNotificationResult as t, NotificationTextProps as u };
+//# sourceMappingURL=index-DjrEvKd-.d.ts.map

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

@@ -50,4 +50,5 @@ interface BreadcrumbItemProps extends HTMLAttributes<HTMLLIElement> {
 }
 declare const BreadcrumbItem: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;
 //#endregion
-export { BreadcrumbProps as a, BreadcrumbItemDef as i, BreadcrumbItemProps as n, Breadcrumb as r, BreadcrumbItem as t };
+export { BreadcrumbProps as a, BreadcrumbItemDef as i, BreadcrumbItemProps as n, Breadcrumb as r, BreadcrumbItem as t };
+//# sourceMappingURL=index-DtbUXxjz.d.ts.map

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

@@ -0,0 +1,56 @@
+import "./focus-ring-SR_LwaN7.js";
+import { t as Placement } from "./overlayPlacement-CIsLpycT.js";
+import React, { HTMLAttributes, ReactElement, ReactNode } from "react";
+//#region src/components/popover/Popover.d.ts
+interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'content' | 'title'> {
+  /**
+   * The trigger: a single element, which opens the popover on click.
+   */
+  children: ReactElement;
+  /**
+   * Content node for your component.
+   */
+  content: ReactNode | string;
+  /**
+   * Whether the popover is open when it first renders. Use it instead of `visible` when nothing
+   * outside needs to control the popover.
+   */
+  defaultVisible?: boolean;
+  /**
+   * Offset of the popover relative to its target, as `[crossAxis, mainAxis]`.
+   */
+  offset?: [number, number];
+  /**
+   * Callback fired when the popover hides.
+   */
+  onHide?: () => void;
+  /**
+   * Callback fired when the popover shows.
+   */
+  onShow?: () => void;
+  /**
+   * Callback fired when the popover asks to show or hide: a click on the trigger, a click
+   * outside, the Escape key, or the closing of the dialog it is in. Receives the state it asks
+   * for. With `visible` set, the popover changes only when `visible` does.
+   */
+  onVisibleChange?: (visible: boolean) => void;
+  /**
+   * Title node for your component.
+   */
+  title?: ReactNode | string;
+  /**
+   * Describes the preferred placement of your component. Chassis will flip it to keep it in
+   * view.
+   */
+  placement?: Placement;
+  /**
+   * Whether the popover is open. Setting it makes the popover controlled: it shows and hides
+   * only when this changes, so pair it with `onVisibleChange`. Leave it unset, or use
+   * `defaultVisible`, for a popover that opens and closes itself.
+   */
+  visible?: boolean;
+}
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { PopoverProps as n, Popover as t };
+//# sourceMappingURL=index-Du9fBqkT.d.ts.map