@primitiv-ui/react 0.1.38 → 0.1.40

package/src/Accordion/hooks/useAccordionRoot.ts

@@ -1,188 +0,0 @@
-import { useRef, useMemo, useCallback, useId, useEffect } from "react";
-
-import { useCollection, useControllableState } from "../../hooks/index.ts";
-
-import type { AccordionReadingDirection } from "../types";
-
-type TriggerMeta = {
-  element: HTMLButtonElement;
-  disabled: boolean;
-};
-
-export function useAccordionRoot(
-  controlledValue: string[] | undefined,
-  defaultValue: string | (readonly string[] & string) | undefined,
-  multiple: boolean,
-  onValueChange: ((values: string[]) => void) | undefined,
-  orientation: "vertical" | "horizontal",
-  dir: AccordionReadingDirection,
-) {
-  const accordionId = useId();
-  // updateKeysOnCleanup is false so trigger unmounts don't fire setState
-  // outside act() after a render-time validation throw.
-  // `updateKeysOnCleanup: false` avoids a setState-outside-act warning when a
-  // trigger unmounts after a render-time validation throw (see below). Flipping
-  // it to the default (true) changes only the timing of internal keys-state on
-  // unmount; it has no user-facing behavioural difference the contract exposes,
-  // so no test can distinguish it.
-  // Stryker disable next-line all
-  const triggerCollectionOptions = { updateKeysOnCleanup: false };
-  const {
-    register: registerTriggerBase,
-    itemsRef: triggersRef,
-    keys: registeredTriggerItemIds,
-  } = useCollection<string, TriggerMeta>(triggerCollectionOptions);
-  const panelsRef = useRef<Set<string>>(new Set());
-
-  const registerTrigger = useCallback(
-    (
-      itemId: string,
-      element: HTMLButtonElement | null,
-      // The default is only reached by the cleanup call `registerTrigger(id,
-      // null)`, where `element` is null and `disabled` is discarded — so its
-      // value is never observable.
-      // Stryker disable next-line BooleanLiteral
-      disabled = false,
-    ) => {
-      registerTriggerBase(itemId, element ? { element, disabled } : null);
-    },
-    // `registerTriggerBase` is a stable useCollection callback, so emptying this
-    // array yields the identical memoised function.
-    // Stryker disable next-line ArrayDeclaration: equivalent — stable dependency.
-    [registerTriggerBase],
-  );
-
-  const disabledItemIds = useMemo(
-    () =>
-      new Set(
-        Array.from(triggersRef.current.entries())
-          .filter(([, meta]) => meta.disabled)
-          .map(([id]) => id),
-      ),
-    // registeredTriggerItemIds is a fresh array on every register call (new
-    // identity even when the keys are the same), so the memo re-runs whenever
-    // any trigger mounts, unmounts, or toggles disabled — which is exactly
-    // the trigger we want for re-deriving disabledItemIds.
-    [registeredTriggerItemIds, triggersRef],
-  );
-
-  const focusTrigger = useCallback(
-    (itemId: string) => {
-      // `itemId` is always sourced from the navigable set (registered triggers),
-      // so a value that reaches here is guaranteed to have a live entry.
-      // Stryker disable next-line OptionalChaining: unreachable given that invariant.
-      triggersRef.current.get(itemId)?.element.focus();
-    },
-    // `triggersRef` is a stable RefObject, so emptying this array yields the
-    // identical memoised function.
-    // Stryker disable next-line ArrayDeclaration: equivalent — stable dependency.
-    [triggersRef],
-  );
-
-  // Like Tabs, Accordion's existing public contract is that uncontrolled
-  // mode does NOT call onValueChange — only the controlled path notifies the
-  // consumer. So we don't pass onValueChange to useControllableState; the
-  // toggleItem branch below fires it directly in controlled mode.
-  const [expandedItems, setExpandedItems, isControlled] = useControllableState<
-    Set<string>
-  >(
-    controlledValue !== undefined ? new Set(controlledValue) : undefined,
-    // Forcing this condition true yields `new Set([undefined])` when no
-    // defaultValue is given; `undefined` can never equal an item id (ids are
-    // `value ?? useId()`), so it is observationally identical to the empty set.
-    // Stryker disable next-line ConditionalExpression
-    defaultValue !== undefined ? new Set([defaultValue]) : new Set(),
-  );
-
-  const computeNext = (prev: Set<string>, itemId: string): Set<string> => {
-    const next = new Set(prev);
-    if (next.has(itemId)) {
-      next.delete(itemId);
-    } else if (multiple) {
-      next.add(itemId);
-    } else {
-      next.clear();
-      next.add(itemId);
-    }
-    return next;
-  };
-
-  const toggleItem = useCallback(
-    (itemId: string) => {
-      const next = computeNext(expandedItems, itemId);
-      if (isControlled) {
-        // Controlled mode requires `onValueChange` (discriminated-union prop
-        // type), so the optional call can never no-op in valid usage.
-        // Stryker disable next-line OptionalChaining: unreachable — controlled requires onValueChange.
-        onValueChange?.(Array.from(next));
-      } else {
-        setExpandedItems(next);
-      }
-    },
-    [expandedItems, isControlled, multiple, setExpandedItems, onValueChange],
-  );
-
-  // Panels are tracked in a ref only. registerPanel does NOT call setState —
-  // the validation effect reads panelsRef.current directly. Because React 18
-  // runs all effects in a commit before flushing batched state updates, the
-  // panel effect always executes (and updates panelsRef) before the re-render
-  // triggered by trigger registration reaches the validation effect.
-  const registerPanel = useCallback(
-    (itemId: string) => {
-      panelsRef.current.add(itemId);
-    },
-    // Empty, stable deps — filling the array yields the identical callback.
-    // Stryker disable next-line ArrayDeclaration: equivalent — stable dependencies.
-    [],
-  );
-
-  const unregisterPanel = useCallback(
-    (itemId: string) => {
-      panelsRef.current.delete(itemId);
-    },
-    // Empty, stable deps — filling the array yields the identical callback.
-    // Stryker disable next-line ArrayDeclaration: equivalent — stable dependencies.
-    [],
-  );
-
-  useEffect(() => {
-    for (const triggerId of registeredTriggerItemIds) {
-      if (!panelsRef.current.has(triggerId)) {
-        throw new Error(
-          `AccordionTrigger (item "${triggerId}") has no corresponding AccordionContent. Every AccordionItem with a Trigger must also contain an AccordionContent.`,
-        );
-      }
-    }
-  }, [registeredTriggerItemIds]);
-
-  const contextValue = useMemo(
-    () => ({
-      accordionId,
-      expandedItems,
-      orientation,
-      dir,
-      toggleItem,
-      registerTrigger,
-      registeredTriggerItemIds,
-      disabledItemIds,
-      focusTrigger,
-      registerPanel,
-      unregisterPanel,
-    }),
-    [
-      accordionId,
-      expandedItems,
-      orientation,
-      dir,
-      toggleItem,
-      registerTrigger,
-      registeredTriggerItemIds,
-      disabledItemIds,
-      focusTrigger,
-      registerPanel,
-      unregisterPanel,
-    ],
-  );
-
-  return { contextValue };
-}

package/src/Accordion/hooks/useAccordionTrigger.ts

@@ -1,98 +0,0 @@
-import { useMemo, useRef, useEffect, MouseEvent, KeyboardEvent } from "react";
-
-import { useRovingTabindex } from "../../hooks/index.ts";
-import { composeRefs } from "../../Slot/index.ts";
-
-import { AccordionTriggerProps } from "../types";
-
-import { useAccordionContext } from "./useAccordionContext";
-import { useAccordionItemContext } from "./useAccordionItemContext";
-
-export function useAccordionTrigger({
-  ref,
-  onClick,
-  disabled,
-  // No default: the `AccordionTrigger` component always supplies a resolved
-  // `asChild` boolean, so a default here would be unreachable (dead) code.
-  asChild,
-  ...rest
-}: Omit<AccordionTriggerProps, "children">) {
-  const { buttonId, panelId, itemId, isExpanded } = useAccordionItemContext();
-  const {
-    toggleItem,
-    registerTrigger,
-    registeredTriggerItemIds,
-    disabledItemIds,
-    focusTrigger,
-    orientation,
-    dir,
-  } = useAccordionContext();
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  const composedRef = ref ? composeRefs(triggerRef, ref) : triggerRef;
-
-  // Register/unregister this trigger with the context. The disabled flag
-  // is now tracked in registration metadata (via useCollection's value
-  // type) instead of being read from the rendered aria-disabled attribute,
-  // which keeps Accordion consistent with RadioGroup and is the model
-  // useRovingTabindex expects.
-  useEffect(() => {
-    registerTrigger(itemId, triggerRef.current, disabled);
-    // Because the collection uses `updateKeysOnCleanup: false`, an unmount
-    // clears only this trigger's ref entry without a keys change, and focusing
-    // a removed trigger is a no-op whether the entry is absent or detached —
-    // so this cleanup has no observable effect the contract exposes. (On a dep
-    // change the effect body re-registers first, overwriting it.)
-    // Stryker disable next-line ArrowFunction: equivalent — no observable effect.
-    return () => registerTrigger(itemId, null);
-  }, [itemId, disabled, registerTrigger]);
-
-  function handleClick(e: MouseEvent<HTMLButtonElement>) {
-    if (disabled) return;
-    toggleItem(itemId);
-    onClick?.(e);
-  }
-
-  // Pre-filter disabled triggers out of the navigable list — Accordion's
-  // ARIA contract is that arrow keys skip past disabled triggers (unlike
-  // Tabs, which lands on disabled triggers without activating them).
-  const enabledItemIds = useMemo(
-    () => registeredTriggerItemIds.filter((id) => !disabledItemIds.has(id)),
-    [registeredTriggerItemIds, disabledItemIds],
-  );
-  const { handleKeyDown: rovingKeyDown } = useRovingTabindex<string>({
-    orientation,
-    dir,
-    navigable: enabledItemIds,
-    currentKey: itemId,
-    onNavigate: focusTrigger,
-    includeHomeEnd: true,
-  });
-
-  function handleKeyDown(e: KeyboardEvent<HTMLButtonElement>) {
-    // Accordion-specific: Enter / Space toggle the focused item rather than
-    // activate something else, so they're handled here before delegating
-    // arrow / Home / End to the shared hook.
-    if ((e.key === "Enter" || e.key === " ") && !disabled) {
-      e.preventDefault();
-      toggleItem(itemId);
-      return;
-    }
-    rovingKeyDown(e);
-  }
-
-  const triggerProps = {
-    ref: composedRef,
-    "aria-expanded": isExpanded,
-    id: buttonId,
-    "aria-controls": panelId,
-    "aria-disabled": disabled,
-    "data-disabled": disabled,
-    ...(asChild && disabled ? { role: "button" } : {}),
-    onClick: handleClick,
-    onKeyDown: handleKeyDown,
-    "data-state": isExpanded ? "open" : "closed",
-    ...rest,
-  };
-
-  return { triggerProps };
-}

package/src/Accordion/index.ts

@@ -1,2 +0,0 @@
-export * from "./Accordion";
-export * from "./types";

package/src/Accordion/types.ts

@@ -1,174 +0,0 @@
-import { ComponentProps, ReactNode, Ref } from "react";
-import { HeadingLevel } from "../types";
-
-/** Props shared by both control modes of `Accordion.Root`. `dir` is `Omit`ted
- * from the native `<div>` props because it is narrowed from the DOM's
- * `string` to {@link AccordionReadingDirection}; without the `Omit` the
- * docs-data extractor picks the wider native declaration and silently drops
- * the narrowed type and its JSDoc (§1.16). */
-export type AccordionRootBaseProps = Omit<
-  ComponentProps<"div">,
-  "dir" | "defaultValue"
-> & {
-  /** Allow more than one section to be expanded at a time. When `false`,
-   * opening an item collapses whichever item was previously open.
-   * @default false */
-  multiple?: boolean;
-  /** Layout axis, controlling arrow-key navigation: `"vertical"` binds
-   * ArrowUp/ArrowDown, `"horizontal"` binds ArrowLeft/ArrowRight. Surfaces as
-   * `data-orientation` on the root.
-   * @default "vertical" */
-  orientation?: "vertical" | "horizontal";
-  /** Reading direction; see {@link AccordionReadingDirection}. In `"rtl"` the
-   * horizontal arrow keys are mirrored. Also set as the container's `dir`
-   * attribute. Inherited from the nearest {@link DirectionProvider} when
-   * omitted, falling back to `"ltr"`. */
-  dir?: AccordionReadingDirection;
-};
-
-/** `Accordion.Root` props for the uncontrolled (self-managed) expanded state.
- * The component owns and updates the expanded set internally, and — matching
- * the Tabs contract — does **not** call `onValueChange` in this mode. */
-export type AccordionRootUncontrolledProps = AccordionRootBaseProps & {
-  /** Value of the item expanded on first render. A single value even in
-   * `multiple` mode — uncontrolled accordions can seed only one open item;
-   * pass controlled {@link AccordionRootControlledProps.value | `value`} to
-   * start with several. Omit to start with everything collapsed. */
-  defaultValue?: string;
-  /** Forbidden in uncontrolled mode — use `defaultValue`. */
-  value?: never;
-  /** Forbidden in uncontrolled mode. */
-  onValueChange?: never;
-};
-
-/** `Accordion.Root` props for the controlled expanded state — the parent owns
- * the expanded set and the component defers every change back through the
- * callback. */
-export type AccordionRootControlledProps = AccordionRootBaseProps & {
-  /** Forbidden in controlled mode — use `value`. */
-  defaultValue?: never;
-  /** The full set of currently expanded item values. Must be kept in sync by
-   * the parent via `onValueChange`. In single (`multiple={false}`) mode this
-   * holds at most one value. */
-  value: string[];
-  /** Called with the complete next array of expanded values whenever the user
-   * toggles an item. */
-  onValueChange: (values: string[]) => void;
-};
-
-/** Reading direction for an accordion. */
-export type AccordionReadingDirection = "ltr" | "rtl";
-
-/** Props for `Accordion.Root`, in either the controlled or uncontrolled mode. */
-export type AccordionRootProps =
-  | AccordionRootUncontrolledProps
-  | AccordionRootControlledProps;
-
-/** Props for `Accordion.Item` — a single collapsible section. */
-export type AccordionItemProps = ComponentProps<"div"> & {
-  /** Section contents — typically an {@link AccordionHeaderProps | `Accordion.Header`}
-   * + {@link AccordionContentProps | `Accordion.Content`} pair. */
-  children: ReactNode;
-  /** Stable identifier matched against the root's expanded set (and against
-   * `value` / `defaultValue`). When omitted, a stable id is generated via
-   * `useId()` — fine for anonymous items whose state is never driven from
-   * outside. */
-  value?: string;
-};
-
-/** Props for `Accordion.Trigger` — the button that toggles a section. */
-export type AccordionTriggerProps<T extends HTMLElement = HTMLButtonElement> =
-  Omit<ComponentProps<"button">, "disabled" | "ref"> & {
-    /** Trigger label / contents — the visible section heading text, plus an
-     * optional {@link AccordionTriggerIconProps | `Accordion.TriggerIcon`}. */
-    children: ReactNode;
-    /** Disable the trigger. Rendered as `aria-disabled` / `data-disabled`
-     * rather than the native `disabled` attribute, so the button stays
-     * focusable (discoverable by keyboard) but is excluded from arrow-key
-     * navigation and cannot be activated.
-     * @default false */
-    disabled?: boolean;
-    /** Render the consumer's own element instead of a `<button>`, merging all
-     * accordion ARIA attributes, event handlers, and the ref onto it via the
-     * {@link Slot} pattern. When combined with `disabled`, `role="button"` is
-     * injected so `aria-disabled` is valid on non-button children.
-     * @default false */
-    asChild?: boolean;
-    /** Ref to the rendered element. Defaults to `HTMLButtonElement`; when using
-     * `asChild`, specify the child's element type (e.g. `HTMLAnchorElement`). */
-    ref?: Ref<T>;
-  };
-
-/** Props for `Accordion.Header` — the heading wrapping a trigger. */
-export type AccordionHeaderProps = ComponentProps<"h3"> & {
-  /** Header contents — typically an
-   * {@link AccordionTriggerProps | `Accordion.Trigger`}. */
-  children: ReactNode;
-  /** Heading level to render (`h1`–`h6`). Choose the level that fits the
-   * surrounding document outline — the WAI-ARIA Accordion pattern requires
-   * each trigger to be wrapped in a heading at the right level.
-   * @default 3 */
-  level?: HeadingLevel;
-};
-
-/** Props for `Accordion.Content` — the collapsible panel. */
-export type AccordionContentProps = ComponentProps<"div"> & {
-  /** Panel contents, revealed when the matching trigger is expanded. */
-  children: ReactNode;
-  /** Keep the panel mounted in the DOM even while collapsed (instead of
-   * removing it from view with the `hidden` attribute), so CSS open/close
-   * transitions can run. While closed it receives `aria-hidden="true"` so
-   * assistive tech still ignores it; drive visibility yourself via
-   * `[data-state="closed"]`.
-   * @default false */
-  forceMount?: boolean;
-};
-
-/** Props for `Accordion.TriggerIcon` — a decorative open/closed indicator. */
-export type AccordionTriggerIconProps = ComponentProps<"span"> & {
-  /** Icon contents — an inline `<svg>` or any icon component. Rendered inside
-   * an `aria-hidden` `<span>` carrying a `data-state` open/close hook. */
-  children: ReactNode;
-};
-
-/** Context value published by `Accordion.Root` to coordinate its sections. */
-export type AccordionContextValue = {
-  /** Generated id namespacing the accordion's element ids. */
-  accordionId: string;
-  /** Set of currently expanded item values. */
-  expandedItems: Set<string>;
-  /** Layout axis used for arrow-key navigation. */
-  orientation: "vertical" | "horizontal";
-  /** Reading direction used for left/right key semantics. */
-  dir: AccordionReadingDirection;
-  /** Toggles the expanded state of the given item. */
-  toggleItem: (itemId: string) => void;
-  /** Registers a trigger element so roving focus can reach it. */
-  registerTrigger: (
-    itemId: string,
-    element: HTMLButtonElement | null,
-    disabled?: boolean,
-  ) => void;
-  /** Ordered ids of registered triggers, used for focus movement. */
-  registeredTriggerItemIds: string[];
-  /** Set of item ids whose triggers are disabled. */
-  disabledItemIds: Set<string>;
-  /** Moves focus to the given item's trigger. */
-  focusTrigger: (itemId: string) => void;
-  /** Registers a content panel as mounted. */
-  registerPanel: (itemId: string) => void;
-  /** Removes a previously registered content panel. */
-  unregisterPanel: (itemId: string) => void;
-};
-
-/** Context value published by `Accordion.Item` to its header and content. */
-export type AccordionItemContextValue = {
-  /** Id of the trigger button. */
-  buttonId: string;
-  /** Id of the content panel. */
-  panelId: string;
-  /** Stable value identifying this item. */
-  itemId: string;
-  /** Whether this item is currently expanded. */
-  isExpanded: boolean;
-};

package/src/Alert/Alert.tsx

@@ -1,79 +0,0 @@
-import type { ReactElement } from "react";
-
-import { Slot } from "../Slot/index.ts";
-import { AlertProps } from "./types";
-
-/**
- * An assertive live region for high-priority, time-sensitive messages,
- * implementing the WAI-ARIA `alert` role.
- *
- * Renders a `<div role="alert">`. The `alert` role carries an implicit
- * `aria-live="assertive"` and `aria-atomic="true"`, so assistive
- * technology interrupts the user to announce the message as soon as it
- * appears — use it for errors and other content the user must see now.
- * For non-urgent updates, reach for `Status` instead.
- *
- * **Announce on appearance.** A live region announces content that
- * changes *after* the region is already in the DOM. Render `Alert`
- * conditionally so the message appears into an already-mounted tree:
- *
- * ```tsx
- * {submitError && <Alert>{submitError}</Alert>}
- * ```
- *
- * Mounting an `Alert` that already contains its message may not be
- * announced reliably by all assistive technology.
- *
- * **Styling hooks.** The component emits no `data-*` attributes — it
- * carries no internal state. Target the rendered element directly via
- * `className` or the `[role="alert"]` selector.
- *
- * **`asChild` composition.** Renders the consumer's element instead of
- * a `<div>`, merging `role="alert"` and all other props onto it via the
- * {@link Slot} utility. Useful when you already have a semantic element
- * (e.g. `<section>`, `<aside>`) that should also function as an ARIA
- * alert.
- *
- * **Ref forwarding.** Pass a `ref` prop to access the underlying
- * `HTMLDivElement` (or, under `asChild`, the consumer's element):
- *
- * ```tsx
- * const ref = useRef<HTMLDivElement>(null);
- * <Alert ref={ref}>Something went wrong.</Alert>
- * ```
- *
- * @extends HTMLDivElement
- *
- * @example Form error
- * ```tsx
- * {error && <Alert>{error}</Alert>}
- * ```
- *
- * @example Inline styling via className
- * ```tsx
- * <Alert className="alert alert--error">Payment declined.</Alert>
- * ```
- *
- * @example asChild — apply the alert role to a semantic element
- * ```tsx
- * <Alert asChild>
- *   <section>Upload failed — try again.</section>
- * </Alert>
- * ```
- */
-export function Alert({
-  asChild = false,
-  children,
-  ...rest
-}: AlertProps): ReactElement {
-  const rootProps = { role: "alert", ...rest };
-
-  if (asChild) {
-    return <Slot {...rootProps}>{children}</Slot>;
-  }
-
-  return <div {...rootProps}>{children}</div>;
-}
-
-/** @internal */
-Alert.displayName = "Alert";

package/src/Alert/README.md

@@ -1,54 +0,0 @@
-# Alert
-
-An assertive live region for high-priority, time-sensitive messages,
-implementing the
-[WAI-ARIA `alert` role](https://www.w3.org/TR/wai-aria-1.2/#alert).
-
-```tsx
-import { Alert } from "@primitiv-ui/react";
-
-{
-  error && <Alert>{error}</Alert>;
-}
-```
-
-## Props
-
-| Prop        | Type                    | Default | Notes                                              |
-| ----------- | ----------------------- | ------- | -------------------------------------------------- |
-| `asChild`   | `boolean`               | `false` | Render the consumer's element instead of a `<div>` |
-| `className` | `string`                | —       | Applied directly to the rendered element           |
-| `...rest`   | `ComponentProps<"div">` | —       | All other `<div>` props, including `aria-*`         |
-
-## Behaviour
-
-`Alert` renders a `<div role="alert">`. The `alert` role carries an
-implicit `aria-live="assertive"` and `aria-atomic="true"`, so assistive
-technology interrupts the user to announce the message as soon as it
-appears. Use it for errors and other content the user must see now —
-for non-urgent updates, reach for [`Status`](../Status/README.md).
-
-## Announce on appearance
-
-A live region announces content that changes *after* the region is in
-the DOM. Render the `Alert` **conditionally** so the message appears
-into an already-mounted tree:
-
-```tsx
-{
-  submitError && <Alert>{submitError}</Alert>;
-}
-```
-
-Mounting an `Alert` that already contains its message may not be
-announced reliably.
-
-## asChild
-
-Pass `asChild` to apply `role="alert"` to the consumer's own element:
-
-```tsx
-<Alert asChild>
-  <section>Upload failed — try again.</section>
-</Alert>
-```

package/src/Alert/__tests__/Alert.test.tsx

@@ -1,33 +0,0 @@
-import { Alert } from "../index.ts";
-import { render, screen } from "@testing-library/react";
-
-describe("Alert component", () => {
-  it("should render a div with role alert containing its children", () => {
-    // Arrange
-    render(<Alert>Your changes could not be saved</Alert>);
-
-    // Assert
-    const alert = screen.getByRole("alert");
-    expect(alert.tagName).toBe("DIV");
-    expect(alert).toHaveTextContent("Your changes could not be saved");
-  });
-
-  it("should render the consumer element with asChild, keeping role alert", () => {
-    // Arrange
-    render(
-      <Alert asChild>
-        <section>Upload failed</section>
-      </Alert>,
-    );
-
-    // Assert
-    const alert = screen.getByRole("alert");
-    expect(alert.tagName).toBe("SECTION");
-    expect(alert).toHaveTextContent("Upload failed");
-  });
-
-  it('sets displayName to "Alert" for React DevTools and stack traces', () => {
-    // Assert — an empty displayName would render it as an anonymous component.
-    expect(Alert.displayName).toBe("Alert");
-  });
-});

package/src/Alert/index.ts

@@ -1,2 +0,0 @@
-export * from "./Alert";
-export * from "./types";

package/src/Alert/types.ts

@@ -1,22 +0,0 @@
-import { ComponentProps, ReactNode } from "react";
-
-/**
- * Props for {@link Alert} — all native `<div>` attributes plus the `asChild`
- * escape hatch.
- *
- * The `role` attribute is managed internally and set to `"alert"` regardless
- * of what is passed; there is no need to supply it.
- */
-export type AlertProps = ComponentProps<"div"> & {
-  /**
-   * Renders the child element instead of a native `<div>`, merging
-   * `role="alert"` and all other props onto it via {@link Slot}.
-   * Useful when you already have a semantic element (e.g. `<section>`,
-   * `<aside>`) that should also function as an ARIA alert.
-   * @default false
-   */
-  asChild?: boolean;
-  /** The live-region content. Injected after the region is already in the
-   * DOM so that assistive technology announces the change. */
-  children?: ReactNode;
-};