@primitiv-ui/react 0.1.37 → 0.1.39

package/dist/CheckboxCard/CheckboxCard.js

@@ -0,0 +1,175 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Slot, composeEventHandlers } from "../Slot/index.js";
+import { CheckboxCardContext } from "./CheckboxCardContext.js";
+import { useCheckboxCardContext, useCheckboxCardRoot } from "./hooks/index.js";
+function dataStateOf(checked) {
+    if (checked === "indeterminate")
+        return "indeterminate";
+    return checked ? "checked" : "unchecked";
+}
+/**
+ * The root of a CheckboxCard — a native `<button role="checkbox">` whose
+ * entire card surface is the interactive area. Owns the tri-state checked
+ * value and provides {@link CheckboxCardContext | `CheckboxCardContext`} to
+ * descendant {@link CheckboxCardIndicator | `CheckboxCard.Indicator`}s.
+ *
+ * Supports two state modes, statically discriminated at the type level:
+ *
+ * - **Uncontrolled** — pass
+ *   {@link CheckboxCardRootProps.defaultChecked | `defaultChecked`} (or omit
+ *   for unchecked-on-mount). The component owns the value internally.
+ * - **Controlled** — pass
+ *   {@link CheckboxCardRootProps.checked | `checked`} *and*
+ *   {@link CheckboxCardRootProps.onCheckedChange | `onCheckedChange`}
+ *   together. The parent owns the value.
+ *
+ * Both `checked` and `defaultChecked` accept `boolean | "indeterminate"`.
+ * Clicking an indeterminate card resolves it to `true` per the WAI-ARIA
+ * tri-state convention, then flips boolean on subsequent clicks.
+ *
+ * **ARIA.** `role="checkbox"` and `aria-checked` are set automatically;
+ * `aria-checked="mixed"` represents the indeterminate state.
+ *
+ * **Styling hooks.** `data-state="checked" | "unchecked" | "indeterminate"`
+ * on the root, plus `data-disabled=""` when disabled.
+ *
+ * **`asChild` prop.** Pass `asChild` to render any consumer-supplied element
+ * with the checkbox's ARIA attributes, `data-state`, composed `onClick`, and
+ * `ref` merged in via the {@link Slot} pattern. See
+ * {@link CheckboxCardRootBaseProps}.
+ *
+ * @extends HTMLButtonElement
+ *
+ * @example Uncontrolled
+ * ```tsx
+ * <CheckboxCard.Root defaultChecked aria-label="Enable feature">
+ *   <CheckboxCard.Indicator>
+ *     <CheckIcon />
+ *   </CheckboxCard.Indicator>
+ *   <h3>Feature name</h3>
+ *   <p>Feature description</p>
+ * </CheckboxCard.Root>
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [enabled, setEnabled] = useState<CheckedState>(false);
+ *
+ * <CheckboxCard.Root checked={enabled} onCheckedChange={setEnabled} aria-label="...">
+ *   <CheckboxCard.Indicator />
+ *   Feature name
+ * </CheckboxCard.Root>
+ * ```
+ */
+export function CheckboxCardRoot(props) {
+    const { defaultChecked, checked, onCheckedChange, onClick, disabled, asChild = false, children, ...rest } = props;
+    const { checked: isChecked, toggle } = useCheckboxCardRoot({
+        defaultChecked,
+        checked,
+        onCheckedChange,
+    });
+    const contextValue = useMemo(() => ({ checked: isChecked }), [isChecked]);
+    const rootProps = {
+        ...rest,
+        role: "checkbox",
+        "aria-checked": isChecked === "indeterminate"
+            ? "mixed"
+            : isChecked,
+        "data-state": dataStateOf(isChecked),
+        "data-disabled": disabled ? "" : undefined,
+        disabled,
+        onClick: composeEventHandlers(onClick, toggle),
+    };
+    return (_jsx(CheckboxCardContext.Provider, { value: contextValue, children: asChild ? (_jsx(Slot, { ...rootProps, children: children })) : (_jsx("button", { type: "button", ...rootProps, children: children })) }));
+}
+// Runtime-dead: the compound alias below (same object via Object.assign)
+// overwrites this to "CheckboxCard" at load, so the value is never observable.
+// The assignment stays because it declares `displayName` on
+// `typeof CheckboxCardRoot`, which TCheckboxCardCompound extends.
+// Stryker disable next-line StringLiteral: overwritten by the compound alias — an equivalent mutant.
+CheckboxCardRoot.displayName = "CheckboxCardRoot";
+/**
+ * A decorative `<span aria-hidden="true">` that renders its children only
+ * while the parent {@link CheckboxCardRoot | `CheckboxCard.Root`} is
+ * **checked** or **indeterminate** — never when unchecked. The checkbox's
+ * accessible state is already conveyed by `aria-checked` on the root, so
+ * the indicator is purely visual.
+ *
+ * **Styling hook.** Mirrors the root's
+ * `data-state="checked" | "unchecked" | "indeterminate"`.
+ *
+ * **`asChild` prop.** Pass `asChild` to render the consumer's own element
+ * (typically an `<svg>` tick icon) as the indicator itself.
+ *
+ * **`forceMount` prop.** Pass `forceMount` to keep the indicator in the DOM
+ * while unchecked so a CSS exit animation can play against
+ * `data-state="unchecked"`. See {@link CheckboxCardIndicatorProps}.
+ *
+ * @extends HTMLSpanElement
+ *
+ * @example
+ * ```tsx
+ * <CheckboxCard.Indicator>
+ *   <CheckIcon />
+ * </CheckboxCard.Indicator>
+ * ```
+ *
+ * @throws if rendered outside a `CheckboxCard.Root`.
+ */
+export function CheckboxCardIndicator({ children, forceMount, asChild = false, ...rest }) {
+    const { checked } = useCheckboxCardContext();
+    const isVisible = checked !== false;
+    if (!isVisible && !forceMount)
+        return null;
+    const indicatorProps = {
+        ...rest,
+        "aria-hidden": "true",
+        "data-state": dataStateOf(checked),
+    };
+    if (asChild) {
+        return _jsx(Slot, { ...indicatorProps, children: children });
+    }
+    return _jsx("span", { ...indicatorProps, children: children });
+}
+/** @internal */
+CheckboxCardIndicator.displayName = "CheckboxCardIndicator";
+/**
+ * Headless, accessible **CheckboxCard** — a card/tile-shaped checkbox
+ * implementing the
+ * [WAI-ARIA Checkbox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/)
+ * including the tri-state ("mixed") variant. The entire card surface is the
+ * interactive element. Zero styles ship.
+ *
+ * `CheckboxCard` is both callable (an alias of
+ * {@link CheckboxCardRoot | `CheckboxCard.Root`}) and carries its
+ * sub-components as static properties.
+ *
+ * - {@link CheckboxCardRoot | `CheckboxCard.Root`} — state owner, context
+ *   provider, toggle button.
+ * - {@link CheckboxCardIndicator | `CheckboxCard.Indicator`} — decorative
+ *   tick, conditional on checked state.
+ *
+ * @example Minimal usage
+ * ```tsx
+ * import { CheckboxCard } from "@primitiv-ui/react";
+ *
+ * <CheckboxCard.Root aria-label="Enable feature">
+ *   <CheckboxCard.Indicator>
+ *     <CheckIcon />
+ *   </CheckboxCard.Indicator>
+ *   <h3>Feature name</h3>
+ *   <p>Enable this to unlock advanced capabilities.</p>
+ * </CheckboxCard.Root>
+ * ```
+ *
+ * @see {@link CheckboxCardRoot} for state modes and tri-state semantics.
+ * @see {@link CheckboxCardIndicator} for the mount gate and animation hooks.
+ */
+const CheckboxCardCompound = Object.assign(CheckboxCardRoot, {
+    Root: CheckboxCardRoot,
+    Indicator: CheckboxCardIndicator,
+});
+CheckboxCardCompound.displayName = "CheckboxCard";
+export { CheckboxCardCompound as CheckboxCard };

package/dist/CheckboxCard/CheckboxCardContext.d.ts

@@ -0,0 +1,15 @@
+import type { Context } from "react";
+import type { CheckedState } from "../Checkbox/types.js";
+/** The value shared by `CheckboxCard.Root` with its `CheckboxCard.Indicator`,
+ * exposing the current checked state. */
+export type CheckboxCardContextValue = {
+    /** Current checked state of the card. */
+    checked: CheckedState;
+};
+/** Strict React context carrying the {@link CheckboxCardContextValue} from
+ * `CheckboxCard.Root` to its indicator. `null` when read outside a
+ * `CheckboxCard.Root`. */
+export declare const CheckboxCardContext: Context<CheckboxCardContextValue | null>;
+/** Reads the {@link CheckboxCardContextValue}; throws when used outside a
+ * `CheckboxCard.Root`. */
+export declare const useCheckboxCardContext: () => CheckboxCardContextValue;

package/dist/CheckboxCard/CheckboxCardContext.js

@@ -0,0 +1,10 @@
+"use client";
+import { createStrictContext } from "../utils/index.js";
+const checkboxCardContextPair = createStrictContext("CheckboxCard sub-components must be rendered inside a <CheckboxCard.Root>.");
+/** Strict React context carrying the {@link CheckboxCardContextValue} from
+ * `CheckboxCard.Root` to its indicator. `null` when read outside a
+ * `CheckboxCard.Root`. */
+export const CheckboxCardContext = checkboxCardContextPair[0];
+/** Reads the {@link CheckboxCardContextValue}; throws when used outside a
+ * `CheckboxCard.Root`. */
+export const useCheckboxCardContext = checkboxCardContextPair[1];

package/dist/CheckboxCard/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useCheckboxCardContext } from "./useCheckboxCardContext.js";
+export { useCheckboxCardRoot } from "./useCheckboxCardRoot.js";

package/dist/CheckboxCard/hooks/index.js

@@ -0,0 +1,2 @@
+export { useCheckboxCardContext } from "./useCheckboxCardContext.js";
+export { useCheckboxCardRoot } from "./useCheckboxCardRoot.js";

package/dist/CheckboxCard/hooks/useCheckboxCardContext.d.ts

@@ -0,0 +1 @@
+export { useCheckboxCardContext } from "../CheckboxCardContext.js";

package/dist/CheckboxCard/hooks/useCheckboxCardContext.js

@@ -0,0 +1 @@
+export { useCheckboxCardContext } from "../CheckboxCardContext.js";

package/dist/CheckboxCard/hooks/useCheckboxCardRoot.d.ts

@@ -0,0 +1,11 @@
+import type { CheckedState } from "../../Checkbox/types.js";
+type UseCheckboxCardRootArgs = {
+    defaultChecked?: CheckedState;
+    checked?: CheckedState;
+    onCheckedChange?: (checked: boolean) => void;
+};
+export declare function useCheckboxCardRoot({ defaultChecked, checked: controlledChecked, onCheckedChange, }: UseCheckboxCardRootArgs): {
+    checked: CheckedState;
+    toggle: () => void;
+};
+export {};

package/dist/CheckboxCard/hooks/useCheckboxCardRoot.js

@@ -0,0 +1,12 @@
+"use client";
+import { useCallback } from "react";
+import { useControllableState } from "../../hooks/index.js";
+export function useCheckboxCardRoot({ defaultChecked, checked: controlledChecked, onCheckedChange, }) {
+    const [checked, setChecked] = useControllableState(controlledChecked, defaultChecked ?? false);
+    const toggle = useCallback(() => {
+        const next = checked === "indeterminate" ? true : !checked;
+        setChecked(next);
+        onCheckedChange?.(next);
+    }, [checked, setChecked, onCheckedChange]);
+    return { checked, toggle };
+}

package/dist/CheckboxCard/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./CheckboxCard.js";
+export * from "./CheckboxCardContext.js";
+export * from "./types.js";

package/dist/CheckboxCard/index.js

@@ -0,0 +1,3 @@
+export * from "./CheckboxCard.js";
+export * from "./CheckboxCardContext.js";
+export * from "./types.js";

package/dist/CheckboxCard/types.d.ts

@@ -0,0 +1,87 @@
+import { ComponentProps, ReactNode, Ref } from "react";
+import type { CheckedState } from "../Checkbox/types.js";
+/**
+ * Props for {@link CheckboxCardIndicator | `CheckboxCard.Indicator`} — the
+ * decorative visual marker (typically a tick icon) shown while the card is
+ * checked or indeterminate. All `HTMLSpanElement` attributes, plus the
+ * `forceMount` and `asChild` escape hatches.
+ */
+export type CheckboxCardIndicatorProps = ComponentProps<"span"> & {
+    /** The indicator content — typically an `<svg>` tick or check glyph. */
+    children?: ReactNode;
+    /**
+     * Keep the indicator mounted while the card is **unchecked** so a CSS exit
+     * animation can play against `data-state="unchecked"`. By default the
+     * indicator unmounts as soon as the card is unchecked.
+     * @default false
+     */
+    forceMount?: boolean;
+    /**
+     * When `true`, render the consumer's own element (typically an `<svg>`) as
+     * the indicator instead of the default `<span>`, merging `aria-hidden` and
+     * `data-state` onto it via the {@link Slot} pattern.
+     * @default false
+     */
+    asChild?: boolean;
+};
+/**
+ * Shared base for both {@link CheckboxCardRootProps} variants — the native
+ * `<button>` attributes (minus the ones the component owns: `type`, `role`,
+ * `aria-checked`, and `defaultChecked`), plus the `asChild` escape hatch and a
+ * typed `ref`.
+ */
+export type CheckboxCardRootBaseProps = Omit<ComponentProps<"button">, "type" | "role" | "aria-checked" | "defaultChecked"> & {
+    /**
+     * When `true`, render the consumer's own element instead of the default
+     * `<button type="button">`, merging `role`, `aria-checked`, `data-state`,
+     * the composed `onClick`, `disabled`, and `ref` onto it via the
+     * {@link Slot} pattern.
+     * @default false
+     */
+    asChild?: boolean;
+    /** Forwarded to the rendered element (the `<button>` by default). */
+    ref?: Ref<HTMLButtonElement>;
+};
+/**
+ * Uncontrolled variant of {@link CheckboxCardRootProps}: the component owns the
+ * checked state, seeded by an optional `defaultChecked`. Pass `defaultChecked`
+ * (or omit it); `checked` is forbidden.
+ */
+export type CheckboxCardRootUncontrolledProps = CheckboxCardRootBaseProps & {
+    /** Tri-state checked value on first render (`true` / `false` /
+     * `"indeterminate"`). Defaults to `false` when omitted.
+     * @default false */
+    defaultChecked?: CheckedState;
+    /** Forbidden in uncontrolled mode — use `defaultChecked` instead. */
+    checked?: never;
+    /** Called with the new **boolean** checked state whenever the card toggles.
+     * An indeterminate card resolves to `true` on first click. Optional in
+     * uncontrolled mode. */
+    onCheckedChange?: (checked: boolean) => void;
+};
+/**
+ * Controlled variant of {@link CheckboxCardRootProps}: the caller owns the
+ * checked state via `checked` and is notified through the required
+ * `onCheckedChange`. Pass both together; `defaultChecked` is forbidden.
+ */
+export type CheckboxCardRootControlledProps = CheckboxCardRootBaseProps & {
+    /** Forbidden in controlled mode — use `checked` instead. */
+    defaultChecked?: never;
+    /** The controlled tri-state checked value (`true` / `false` /
+     * `"indeterminate"`). Must be kept in sync by the parent via
+     * `onCheckedChange`. */
+    checked: CheckedState;
+    /** Called with the new **boolean** checked state when the user toggles. An
+     * indeterminate card resolves to `true` on click. Required in controlled
+     * mode. */
+    onCheckedChange: (checked: boolean) => void;
+};
+/**
+ * Props for {@link CheckboxCardRoot | `CheckboxCard.Root`}.
+ *
+ * Resolves to either {@link CheckboxCardRootUncontrolledProps} or
+ * {@link CheckboxCardRootControlledProps} — only one shape is accepted by
+ * TypeScript at a time. Both accept the tri-state {@link CheckedState}
+ * (`boolean | "indeterminate"`).
+ */
+export type CheckboxCardRootProps = CheckboxCardRootUncontrolledProps | CheckboxCardRootControlledProps;

package/dist/CheckboxCard/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Collapsible/Collapsible.d.ts

@@ -0,0 +1,243 @@
+import type { ReactElement } from "react";
+import type { CollapsibleRootProps, CollapsibleTriggerProps, CollapsibleContentProps, CollapsibleTriggerIconProps } from "./types.js";
+/**
+ * The root of a Collapsible widget — owns the open/closed state, provides
+ * context to descendants, and renders a plain `<div>`.
+ *
+ * Supports two state modes, statically discriminated at the type level:
+ *
+ * - **Uncontrolled** — pass `defaultOpen` (or omit it to start closed).
+ *   The component owns and updates the open state internally; consumers
+ *   may still observe transitions by passing `onOpenChange`.
+ * - **Controlled** — pass `open` *and* `onOpenChange` together. The parent
+ *   owns the open value; the component defers every state change back
+ *   through the callback. Passing `defaultOpen` alongside `open` is a type
+ *   error.
+ *
+ * Unlike Accordion in this library, Collapsible fires `onOpenChange` in
+ * **both** uncontrolled and controlled modes.
+ *
+ * **Disabled.** Pass `disabled` to render `aria-disabled="true"` on the
+ * Trigger and short-circuit click and keyboard activation. The Trigger
+ * remains focusable so keyboard users can discover it. `data-disabled` is
+ * mirrored onto Root, Trigger, and Content so a single selector covers
+ * every sub-component.
+ *
+ * **Context.** Root establishes {@link CollapsibleContext}, from which
+ * {@link CollapsibleTrigger}, {@link CollapsibleContent}, and
+ * {@link CollapsibleTriggerIcon} read the open state, the `disabled` flag,
+ * the `toggle` action, and the generated `triggerId` / `contentId` that
+ * wire the Trigger's `aria-controls` to the Content's `id`. Rendering any
+ * sub-component outside a Root throws.
+ *
+ * **Styling hooks.** `data-state="open" | "closed"` and
+ * `data-disabled="true" | "false"` are emitted on the rendered container.
+ *
+ * @extends HTMLDivElement
+ *
+ * @example Uncontrolled
+ * ```tsx
+ * <Collapsible.Root defaultOpen>
+ *   <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+ *   <Collapsible.Content>Hidden content</Collapsible.Content>
+ * </Collapsible.Root>
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <Collapsible.Root open={open} onOpenChange={setOpen}>
+ *   <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+ *   <Collapsible.Content>Hidden content</Collapsible.Content>
+ * </Collapsible.Root>
+ * ```
+ */
+export declare function CollapsibleRoot({ children, defaultOpen, open: controlledOpen, onOpenChange, disabled, ...rest }: CollapsibleRootProps): ReactElement;
+export declare namespace CollapsibleRoot {
+    var displayName: string;
+}
+/**
+ * The button that toggles the collapsible open or closed. Renders
+ * `<button type="button">` by default and wires up all required ARIA
+ * attributes, click handling, and keyboard activation automatically.
+ *
+ * **Disabled behaviour.** When the parent `Collapsible.Root` is `disabled`
+ * the Trigger is rendered with `aria-disabled="true"` and
+ * `data-disabled="true"` instead of the native HTML `disabled` attribute.
+ * This keeps the button focusable so keyboard users can discover it,
+ * while preventing toggle activation. Click handlers and keyboard
+ * activation are short-circuited entirely — no toggle, no consumer
+ * `onClick`.
+ *
+ * **`asChild` prop.** Pass `asChild` to render an arbitrary child element
+ * instead of the default `<button>`. All ARIA attributes, event handlers,
+ * and the internal ref are merged onto the child following the standard
+ * composition rules:
+ * - Event handlers compose — child's handler runs first, then the trigger's.
+ * - `style` is shallow-merged (child wins on collisions).
+ * - `className` strings are concatenated.
+ * - Refs from both sides are composed via `composeRefs`.
+ *
+ * When `asChild` is `true` and the parent is `disabled`, `role="button"`
+ * is automatically injected so that `aria-disabled` is semantically valid
+ * on non-button elements (e.g. `<a>`, `<div>`). Without a button role the
+ * `aria-disabled` attribute has no defined meaning in the ARIA spec.
+ *
+ * **Keyboard activation.** Native `<button>` activates on `Enter` and
+ * `Space` for free. Under `asChild`, the rendered element may not (e.g.
+ * `<div role="button">`), so the Trigger handles `Enter` and `Space`
+ * explicitly: `preventDefault` suppresses any native activation (such as
+ * an anchor following its `href`) and the toggle is dispatched directly.
+ *
+ * **Ref forwarding.** A `ref` prop (React 19 ref-as-prop style) is
+ * forwarded to the underlying DOM element — useful for imperative focus
+ * management. The generic defaults to `HTMLButtonElement`; supply a
+ * different type when using `asChild` with a non-button element.
+ *
+ * **Styling hooks.**
+ * - `data-state="open" | "closed"` on the rendered element.
+ * - `data-disabled="true" | "false"`.
+ *
+ * @extends HTMLButtonElement
+ *
+ * @example Basic
+ * ```tsx
+ * <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+ * ```
+ *
+ * @example asChild — render an anchor with collapsible semantics
+ * ```tsx
+ * <Collapsible.Trigger<HTMLAnchorElement> asChild>
+ *   <a href="#section">Toggle</a>
+ * </Collapsible.Trigger>
+ * ```
+ */
+export declare function CollapsibleTrigger<T extends HTMLElement = HTMLButtonElement>({ ref, children, onClick, onKeyDown, asChild, ...rest }: CollapsibleTriggerProps<T>): ReactElement;
+export declare namespace CollapsibleTrigger {
+    var displayName: string;
+}
+/**
+ * The panel that is revealed when the associated `Collapsible.Trigger` is
+ * activated. Renders a `<div>` whose visibility is controlled by the
+ * `hidden` attribute and whose `id` is automatically wired to the
+ * Trigger's `aria-controls`.
+ *
+ * **`forceMount` prop.** By default the panel is removed from the visual
+ * and accessibility trees with `hidden` when closed. Pass `forceMount` to
+ * keep the panel in the DOM at all times so consumers can drive open /
+ * close transitions with CSS — for instance with CSS Grid:
+ *
+ * ```css
+ * .panel {
+ *   display: grid;
+ *   grid-template-rows: 0fr;
+ *   transition: grid-template-rows 250ms;
+ * }
+ * .panel[data-state="open"] {
+ *   grid-template-rows: 1fr;
+ * }
+ * .panel > * {
+ *   overflow: hidden;
+ * }
+ * ```
+ *
+ * When `forceMount` is `true` and the panel is closed, `aria-hidden="true"`
+ * is set automatically so assistive technology ignores the off-screen
+ * content. It is removed when the panel opens. Consumers can override
+ * this by passing `aria-hidden` explicitly (it appears after the
+ * automatic value in the spread).
+ *
+ * **`collapsedHeight` prop.** Pass `collapsedHeight` to show a **clamped
+ * preview** of the panel while closed (the read-more pattern) instead of
+ * hiding it. A number is pixels; a string is a verbatim CSS length. When set,
+ * the panel is always mounted and never `hidden` / `aria-hidden` (the preview
+ * is real content), and the value is published as the
+ * `--primitiv-collapsible-collapsed-height` custom property for the styling
+ * layer to clamp the closed height to and anchor a bottom fade-shadow, keyed
+ * off `data-state="closed"`.
+ *
+ * **Styling hooks.**
+ * - `data-state="open" | "closed"` on the rendered element.
+ * - `data-disabled="true" | "false"`.
+ *
+ * @extends HTMLDivElement
+ *
+ * @example Default (hidden attribute)
+ * ```tsx
+ * <Collapsible.Content>Hidden content</Collapsible.Content>
+ * ```
+ *
+ * @example With forceMount for CSS-driven animation
+ * ```tsx
+ * <Collapsible.Content forceMount className="panel">
+ *   Content that animates open and closed.
+ * </Collapsible.Content>
+ * ```
+ */
+export declare function CollapsibleContent({ children, forceMount, collapsedHeight, style, ...rest }: CollapsibleContentProps): ReactElement;
+export declare namespace CollapsibleContent {
+    var displayName: string;
+}
+/**
+ * A wrapper that hides its icon child from the accessibility tree and
+ * provides a `data-state` hook for open/close animations. Accepts any
+ * renderable React content as a child — an inline `<svg>`, a component
+ * from a third-party icon library (lucide-react, react-icons, etc.), or
+ * any custom icon component.
+ *
+ * Renders a `<span>` with `aria-hidden="true"` around the child so the
+ * icon is hidden from assistive technology regardless of whether the
+ * child component forwards unknown props or emits its own ARIA surface.
+ *
+ * **Styling hooks.**
+ * - `data-state="open" | "closed"` on the rendered `<span>`.
+ * - `aria-hidden="true"` on the rendered `<span>`.
+ *
+ * @extends HTMLSpanElement
+ *
+ * @example Inline SVG
+ * ```tsx
+ * <Collapsible.Trigger>
+ *   Toggle
+ *   <Collapsible.TriggerIcon>
+ *     <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" /></svg>
+ *   </Collapsible.TriggerIcon>
+ * </Collapsible.Trigger>
+ * ```
+ *
+ * @example Third-party icon component
+ * ```tsx
+ * import { ChevronDown } from "lucide-react";
+ *
+ * <Collapsible.Trigger>
+ *   Toggle
+ *   <Collapsible.TriggerIcon>
+ *     <ChevronDown />
+ *   </Collapsible.TriggerIcon>
+ * </Collapsible.Trigger>
+ * ```
+ */
+export declare function CollapsibleTriggerIcon({ children, ...rest }: CollapsibleTriggerIconProps): ReactElement;
+export declare namespace CollapsibleTriggerIcon {
+    var displayName: string;
+}
+/** Type of the {@link Collapsible} compound — the Root callable plus its sub-components. */
+type CollapsibleCompound = typeof CollapsibleRoot & {
+    /** The root, owning open/closed state and context. */
+    Root: typeof CollapsibleRoot;
+    /** The button that toggles the panel. */
+    Trigger: typeof CollapsibleTrigger;
+    /** The collapsible panel. */
+    Content: typeof CollapsibleContent;
+    /** An aria-hidden icon wrapper with an open/closed `data-state` hook. */
+    TriggerIcon: typeof CollapsibleTriggerIcon;
+};
+/**
+ * Collapsible — a single disclosure widget pairing a trigger with a panel
+ * that expands and collapses. Use as a namespace (`Collapsible.Root`,
+ * `Collapsible.Trigger`, `Collapsible.Content`, `Collapsible.TriggerIcon`);
+ * the default export is also callable as the Root.
+ */
+declare const CollapsibleCompound: CollapsibleCompound;
+export { CollapsibleCompound as Collapsible };