@central-ui/react 0.2.0 → 0.4.0

package/dist/components/drawer/index.d.ts

@@ -1,7 +1,7 @@
 import type { StyleProps } from '../../types/Style.ts';
 import type { AsChildProps } from '../../utils/asChild.ts';
 import { Drawer as BaseDrawer } from '@base-ui/react/drawer';
-import type { ReactElement } from 'react';
+import type { ComponentProps, ReactElement } from 'react';
 import type { SVGIconProps } from '../../types/Icon.ts';
 /**
  * Choose swipeDirection on Root and keep trigger and Popup in that Root. Popup already includes its portal. Provider and Indent parts are for an optional indented-background composition, not required for a basic drawer.
@@ -47,44 +47,44 @@ export declare function Root<Payload = unknown>({ swipeDirection, ...props }: Ba
 /** Optional: use around IndentBackground, Indent and drawers when app indentation is needed. */
 export declare const Provider: typeof BaseDrawer.Provider;
 /** Optional: background layer for app indentation; use with Indent inside Provider. */
-export declare const IndentBackground: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").DrawerIndentBackgroundProps, "className"> & {
+export declare function IndentBackground({ disableStyle, className, ref, ...props }: (Omit<BaseDrawer.IndentBackground.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Optional: wraps the app content when indentation is needed; use inside Provider. */
-export declare const Indent: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").DrawerIndentProps, "className"> & {
+export declare function Indent({ disableStyle, className, ref, ...props }: (Omit<BaseDrawer.Indent.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Optional: a custom swipe-to-open area outside Popup but inside Root. Unpainted by default; style its size and position at the call site. */
-export declare const SwipeArea: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").DrawerSwipeAreaProps, "className"> & {
+export declare function SwipeArea({ disableStyle, className, ref, ...props }: (Omit<BaseDrawer.SwipeArea.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Opens the drawer. Pass asChild to give this behavior to your own element, like your app's Button. */
-export declare const OpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<BaseDrawer.Trigger.Props<unknown>, "className" | "render"> & {
+export declare function OpenButton({ asChild, disableStyle, children, ref, ...props }: Omit<BaseDrawer.Trigger.Props, 'className' | 'render'> & {
     className?: string;
-} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export type PopupProps = Omit<BaseDrawer.Popup.Props, 'className'> & {
+} & AsChildProps & StyleProps): import("react").JSX.Element;
+export type PopupProps = Omit<BaseDrawer.Popup.Props, 'className' | 'render'> & {
     className?: string;
 } & Pick<BaseDrawer.Portal.Props, 'container' | 'keepMounted'> & StyleProps;
 /** Already includes the portal. Keep it in the matching Root and let the native open state control visibility. */
-export declare const Popup: import("react").ForwardRefExoticComponent<Omit<PopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Backdrop: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").DrawerBackdropProps, "className"> & {
+export declare function Popup({ disableStyle, container, keepMounted, className, style, ref, ...props }: PopupProps): import("react").JSX.Element;
+export declare function Backdrop({ disableStyle, container, keepMounted, className, ref, ...props }: (Omit<BaseDrawer.Backdrop.Props, 'className' | 'render'> & {
     className?: string;
-} & Pick<import("@base-ui/react").DrawerPortalProps, "keepMounted" | "container"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Header: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Body: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Footer: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Title: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").DrawerTitleProps, "className"> & {
+} & Pick<BaseDrawer.Portal.Props, 'container' | 'keepMounted'>) & StyleProps): import("react").JSX.Element;
+export declare function Header({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Body({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Footer({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Title({ disableStyle, className, ref, ...props }: (Omit<BaseDrawer.Title.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
-export declare const Description: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").DrawerDescriptionProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function Description({ disableStyle, className, ref, ...props }: (Omit<BaseDrawer.Description.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Icon-only: put just a CloseButtonIcon inside, never text like "Close". Name it for screen readers with aria-label instead, e.g. aria-label="Close drawer". Pass asChild to give closing behavior to your own button instead, like a "Done" Button. */
-export declare const CloseButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").DrawerCloseProps, "className" | "render"> & {
+export declare function CloseButton({ asChild, disableStyle, children, ref, ...props }: Omit<BaseDrawer.Close.Props, 'className' | 'render'> & {
     className?: string;
-} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & AsChildProps & StyleProps): import("react").JSX.Element;
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
-export declare const CloseButtonIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & {
+export declare function CloseButtonIcon({ disableStyle, children, className, ref, ...props }: (SVGIconProps & {
     /** Omit for the supplied default icon; pass a child only to replace it. */
     children?: ReactElement<SVGIconProps>;
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+}) & StyleProps): import("react").FunctionComponentElement<any>;

package/dist/components/drawer/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { asChildRendering } from "../../utils/asChild.js";
 import { Drawer as BaseDrawer } from '@base-ui/react/drawer';
-import { cloneElement, forwardRef } from 'react';
+import { cloneElement } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { X } from "../../utils/icons.js";
 /**
@@ -50,24 +50,24 @@ export function Root({ swipeDirection = 'right', ...props }) {
 /** Optional: use around IndentBackground, Indent and drawers when app indentation is needed. */
 export const Provider = BaseDrawer.Provider;
 /** Optional: background layer for app indentation; use with Indent inside Provider. */
-export const IndentBackground = /* @__PURE__ */ forwardRef(function IndentBackground({ disableStyle, className, ...props }, ref) {
+export function IndentBackground({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseDrawer.IndentBackground, { ...props, ref: ref, "data-component": "drawer-indentbackground", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Optional: wraps the app content when indentation is needed; use inside Provider. */
-export const Indent = /* @__PURE__ */ forwardRef(function Indent({ disableStyle, className, ...props }, ref) {
+export function Indent({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseDrawer.Indent, { ...props, ref: ref, "data-component": "drawer-indent", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Optional: a custom swipe-to-open area outside Popup but inside Root. Unpainted by default; style its size and position at the call site. */
-export const SwipeArea = /* @__PURE__ */ forwardRef(function SwipeArea({ disableStyle, className, ...props }, ref) {
+export function SwipeArea({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseDrawer.SwipeArea, { ...props, ref: ref, "data-component": "drawer-swipearea", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Opens the drawer. Pass asChild to give this behavior to your own element, like your app's Button. */
-export const OpenButton = /* @__PURE__ */ forwardRef(function OpenButton({ asChild, disableStyle, children, ...props }, ref) {
+export function OpenButton({ asChild, disableStyle, children, ref, ...props }) {
     const rendering = asChildRendering({ asChild, children, component: 'drawer-openbutton', disableStyle });
     return _jsx(BaseDrawer.Trigger, { ...props, ref: ref, ...rendering });
-});
+}
 /** Already includes the portal. Keep it in the matching Root and let the native open state control visibility. */
-export const Popup = /* @__PURE__ */ forwardRef(function Popup({ disableStyle, container, keepMounted, className, style, ...props }, ref) {
+export function Popup({ disableStyle, container, keepMounted, className, style, ref, ...props }) {
     return (_jsx(BaseDrawer.Portal, { container: container, keepMounted: keepMounted, children: _jsx(BaseDrawer.Viewport, { children: _jsx(BaseDrawer.Popup, { ...props, ref: ref, "data-component": "drawer-popup", "data-style-disabled": disableStyle ? '' : undefined, className: className, style: (state) => {
                     const vertical = state.swipeDirection === 'up' || state.swipeDirection === 'down';
                     // Sliding in and out from the side it swipes towards, otherwise following the finger (and the snap point, vertically)
@@ -96,32 +96,32 @@ export const Popup = /* @__PURE__ */ forwardRef(function Popup({ disableStyle, c
                         ...(typeof style === 'function' ? style(state) : style),
                     };
                 } }) }) }));
-});
-export const Backdrop = /* @__PURE__ */ forwardRef(function Backdrop({ disableStyle, container, keepMounted, className, ...props }, ref) {
+}
+export function Backdrop({ disableStyle, container, keepMounted, className, ref, ...props }) {
     return (_jsx(BaseDrawer.Portal, { container: container, keepMounted: keepMounted, children: _jsx(BaseDrawer.Backdrop, { ...props, ref: ref, "data-component": "drawer-backdrop", "data-style-disabled": disableStyle ? '' : undefined, className: className }) }));
-});
-export const Header = /* @__PURE__ */ forwardRef(function Header({ disableStyle, className, ...props }, ref) {
+}
+export function Header({ disableStyle, className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "drawer-header", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Body = /* @__PURE__ */ forwardRef(function Body({ disableStyle, className, ...props }, ref) {
+}
+export function Body({ disableStyle, className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "drawer-body", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Footer = /* @__PURE__ */ forwardRef(function Footer({ disableStyle, className, ...props }, ref) {
+}
+export function Footer({ disableStyle, className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "drawer-footer", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Title = /* @__PURE__ */ forwardRef(function Title({ disableStyle, className, ...props }, ref) {
+}
+export function Title({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseDrawer.Title, { ...props, ref: ref, "data-component": "drawer-title", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, ...props }, ref) {
+}
+export function Description({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseDrawer.Description, { ...props, ref: ref, "data-component": "drawer-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Icon-only: put just a CloseButtonIcon inside, never text like "Close". Name it for screen readers with aria-label instead, e.g. aria-label="Close drawer". Pass asChild to give closing behavior to your own button instead, like a "Done" Button. */
-export const CloseButton = /* @__PURE__ */ forwardRef(function CloseButton({ asChild, disableStyle, children, ...props }, ref) {
+export function CloseButton({ asChild, disableStyle, children, ref, ...props }) {
     const rendering = asChildRendering({ asChild, children, component: 'drawer-closebutton', disableStyle });
     return _jsx(BaseDrawer.Close, { ...props, ref: ref, ...rendering });
-});
+}
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
-export const CloseButtonIcon = /* @__PURE__ */ forwardRef(function CloseButtonIcon({ disableStyle, children, className, ...props }, ref) {
+export function CloseButtonIcon({ disableStyle, children, className, ref, ...props }) {
     return cloneElement(children ?? _jsx(X, {}), {
         ...props,
         ref,
@@ -131,5 +131,6 @@ export const CloseButtonIcon = /* @__PURE__ */ forwardRef(function CloseButtonIc
             'data-style-disabled': disableStyle ? '' : undefined,
         },
         className: twMerge(children?.props.className, className),
+        strokeWidth: props.strokeWidth ?? children?.props.strokeWidth ?? 2,
     });
-});
+}

package/dist/components/empty/index.d.ts

@@ -28,7 +28,8 @@ import type { ComponentProps, HTMLAttributes, ImgHTMLAttributes, ReactElement }
  */
 export declare function Surface({ disableStyle, className, ...props }: HTMLAttributes<HTMLDivElement> & StyleProps): import("react").JSX.Element;
 export declare function Body({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
-export declare function Title({ disableStyle, className, ...props }: HTMLAttributes<HTMLParagraphElement> & StyleProps): import("react").JSX.Element;
+/** Renders an h2, so screen-reader users find it when jumping between headings, whether the panel fills a page or one section of it. */
+export declare function Title({ disableStyle, className, ...props }: HTMLAttributes<HTMLHeadingElement> & StyleProps): import("react").JSX.Element;
 export declare function Description({ disableStyle, className, ...props }: HTMLAttributes<HTMLParagraphElement> & StyleProps): import("react").JSX.Element;
 export declare function Image({ disableStyle, className, ...props }: ImgHTMLAttributes<HTMLImageElement> & StyleProps): import("react").JSX.Element;
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */

package/dist/components/empty/index.js

@@ -33,8 +33,9 @@ export function Surface({ disableStyle, className, ...props }) {
 export function Body({ disableStyle, className, ...props }) {
     return (_jsx("div", { ...props, "data-component": "empty-body", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
+/** Renders an h2, so screen-reader users find it when jumping between headings, whether the panel fills a page or one section of it. */
 export function Title({ disableStyle, className, ...props }) {
-    return (_jsx("p", { "data-component": "empty-title", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
+    return (_jsx("h2", { "data-component": "empty-title", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
 }
 export function Description({ disableStyle, className, ...props }) {
     return (_jsx("p", { "data-component": "empty-description", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));

package/dist/components/exception/index.d.ts

@@ -0,0 +1,98 @@
+import type { StyleProps } from '../../types/Style.ts';
+import type { ComponentProps, HTMLAttributes, ImgHTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
+type Tone = 'neutral' | 'critical';
+/**
+ * Explains why something can't be shown, like a page that doesn't exist or a section the user isn't allowed to see. It isn't an error, just a normal state of the app.
+ * Root holds the tone and renders nothing itself; Surface and Body render the panel. You decide when it appears. It's a section: put it where the missing content would have been, and it fills that container's height.
+ * Image/Icon, ActionsList and HelpText are optional. ActionsList takes your own buttons, since the actions belong to your app.
+ *
+ * @example A page the user can't access
+ * import { Button, Exception, TextLink } from '@central-ui/react'
+ * import { Link } from '@tanstack/react-router'
+ * import { Lock } from 'lucide-react'
+ *
+ * function Example() {
+ *   return (
+ *     // Inside the body of some page. That page's header shows no title or back button,
+ *     // since they would describe something the user can't see.
+ *     <Exception.Root>
+ *       <Exception.Surface>
+ *         <Exception.Body>
+ *           <Exception.Icon>
+ *             <Lock aria-hidden="true" />
+ *           </Exception.Icon>
+ *           <Exception.Title>You don't have access to this page</Exception.Title>
+ *           <Exception.Description>Ask a store owner to give your account the Orders permission.</Exception.Description>
+ *           <Exception.ActionsList>
+ *             <Button.default variant="primary">Go to dashboard</Button.default>
+ *           </Exception.ActionsList>
+ *           <Exception.HelpText>
+ *             Still stuck?{' '}
+ *             <TextLink.default>
+ *               <Link to="/support">Contact support</Link>
+ *             </TextLink.default>
+ *           </Exception.HelpText>
+ *         </Exception.Body>
+ *       </Exception.Surface>
+ *     </Exception.Root>
+ *   )
+ * }
+ *
+ * @example A page that doesn't exist
+ * // Also inside the body of some page with no title in its header; the code goes in the Title.
+ * ;<Exception.Root>
+ *   <Exception.Surface>
+ *     <Exception.Body>
+ *       <Exception.Title>404 · Page not found</Exception.Title>
+ *       <Exception.Description>The page may have moved, or the link is wrong.</Exception.Description>
+ *     </Exception.Body>
+ *   </Exception.Surface>
+ * </Exception.Root>
+ *
+ * @example A section that failed to load, inside a page that otherwise works
+ * // In place of that section only; the rest of the page stays.
+ * ;<Exception.Root tone="critical">
+ *   {
+ *     // Rest of components here
+ *   }
+ * </Exception.Root>
+ */
+export declare function Root({ tone, children, }: {
+    /**
+     * Neutral for expected situations, like no access or a missing page. Critical for failures, like a section that couldn't load; it turns the Title red.
+     * Every part carries it as data-tone.
+     * @default 'neutral'
+     */
+    tone?: Tone;
+    /** The Surface. */
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Centers the panel and fills its container's height. */
+export declare function Surface({ disableStyle, className, ref, ...props }: HTMLAttributes<HTMLDivElement> & {
+    ref?: Ref<HTMLDivElement>;
+} & StyleProps): import("react").JSX.Element;
+export declare function Body({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+/** Renders an h2, so screen-reader users find it when jumping between headings, whether the panel fills a page or one section of it. */
+export declare function Title({ disableStyle, className, ref, ...props }: HTMLAttributes<HTMLHeadingElement> & {
+    ref?: Ref<HTMLHeadingElement>;
+} & StyleProps): import("react").JSX.Element;
+export declare function Description({ disableStyle, className, ref, ...props }: HTMLAttributes<HTMLParagraphElement> & {
+    ref?: Ref<HTMLParagraphElement>;
+} & StyleProps): import("react").JSX.Element;
+export declare function Image({ disableStyle, className, ref, ...props }: ImgHTMLAttributes<HTMLImageElement> & {
+    ref?: Ref<HTMLImageElement>;
+} & StyleProps): import("react").JSX.Element;
+/** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
+export declare function Icon({ disableStyle, children, className, ref, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
+    /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
+    children: ReactElement<ComponentProps<'svg'>>;
+}) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
+/** Takes your own buttons, like a primary "Go to dashboard"; it creates no actions itself. */
+export declare function ActionsList({ disableStyle, className, ref, ...props }: HTMLAttributes<HTMLDivElement> & {
+    ref?: Ref<HTMLDivElement>;
+} & StyleProps): import("react").JSX.Element;
+/** A small footnote below the actions, like "Still stuck? Contact support" with a link. */
+export declare function HelpText({ disableStyle, className, ref, ...props }: HTMLAttributes<HTMLParagraphElement> & {
+    ref?: Ref<HTMLParagraphElement>;
+} & StyleProps): import("react").JSX.Element;
+export {};

package/dist/components/exception/index.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, createContext, useContext } from 'react';
+import { twMerge } from 'tailwind-merge';
+const ToneContext = /* @__PURE__ */ createContext(null);
+/**
+ * Explains why something can't be shown, like a page that doesn't exist or a section the user isn't allowed to see. It isn't an error, just a normal state of the app.
+ * Root holds the tone and renders nothing itself; Surface and Body render the panel. You decide when it appears. It's a section: put it where the missing content would have been, and it fills that container's height.
+ * Image/Icon, ActionsList and HelpText are optional. ActionsList takes your own buttons, since the actions belong to your app.
+ *
+ * @example A page the user can't access
+ * import { Button, Exception, TextLink } from '@central-ui/react'
+ * import { Link } from '@tanstack/react-router'
+ * import { Lock } from 'lucide-react'
+ *
+ * function Example() {
+ *   return (
+ *     // Inside the body of some page. That page's header shows no title or back button,
+ *     // since they would describe something the user can't see.
+ *     <Exception.Root>
+ *       <Exception.Surface>
+ *         <Exception.Body>
+ *           <Exception.Icon>
+ *             <Lock aria-hidden="true" />
+ *           </Exception.Icon>
+ *           <Exception.Title>You don't have access to this page</Exception.Title>
+ *           <Exception.Description>Ask a store owner to give your account the Orders permission.</Exception.Description>
+ *           <Exception.ActionsList>
+ *             <Button.default variant="primary">Go to dashboard</Button.default>
+ *           </Exception.ActionsList>
+ *           <Exception.HelpText>
+ *             Still stuck?{' '}
+ *             <TextLink.default>
+ *               <Link to="/support">Contact support</Link>
+ *             </TextLink.default>
+ *           </Exception.HelpText>
+ *         </Exception.Body>
+ *       </Exception.Surface>
+ *     </Exception.Root>
+ *   )
+ * }
+ *
+ * @example A page that doesn't exist
+ * // Also inside the body of some page with no title in its header; the code goes in the Title.
+ * ;<Exception.Root>
+ *   <Exception.Surface>
+ *     <Exception.Body>
+ *       <Exception.Title>404 · Page not found</Exception.Title>
+ *       <Exception.Description>The page may have moved, or the link is wrong.</Exception.Description>
+ *     </Exception.Body>
+ *   </Exception.Surface>
+ * </Exception.Root>
+ *
+ * @example A section that failed to load, inside a page that otherwise works
+ * // In place of that section only; the rest of the page stays.
+ * ;<Exception.Root tone="critical">
+ *   {
+ *     // Rest of components here
+ *   }
+ * </Exception.Root>
+ */
+export function Root({ tone = 'neutral', children, }) {
+    return _jsx(ToneContext.Provider, { value: tone, children: children });
+}
+/** Centers the panel and fills its container's height. */
+export function Surface({ disableStyle, className, ref, ...props }) {
+    const tone = useTone('Surface');
+    return (_jsx("div", { ...props, ref: ref, "data-component": "exception-surface", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
+}
+export function Body({ disableStyle, className, ref, ...props }) {
+    const tone = useTone('Body');
+    return (_jsx("div", { ...props, ref: ref, "data-component": "exception-body", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
+}
+/** Renders an h2, so screen-reader users find it when jumping between headings, whether the panel fills a page or one section of it. */
+export function Title({ disableStyle, className, ref, ...props }) {
+    const tone = useTone('Title');
+    return (_jsx("h2", { ...props, ref: ref, "data-component": "exception-title", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
+}
+export function Description({ disableStyle, className, ref, ...props }) {
+    const tone = useTone('Description');
+    return (_jsx("p", { ...props, ref: ref, "data-component": "exception-description", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
+}
+export function Image({ disableStyle, className, ref, ...props }) {
+    const tone = useTone('Image');
+    return (_jsx("img", { alt: "", ...props, ref: ref, "data-component": "exception-image", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
+}
+/** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
+export function Icon({ disableStyle, children, className, ref, ...props }) {
+    const tone = useTone('Icon');
+    return cloneElement(children, {
+        ...props,
+        ref,
+        ...{
+            'data-component': 'exception-icon',
+            'data-style-disabled': disableStyle ? '' : undefined,
+            'data-tone': tone,
+        },
+        className: twMerge(children.props.className, className),
+        strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 1.5,
+    });
+}
+/** Takes your own buttons, like a primary "Go to dashboard"; it creates no actions itself. */
+export function ActionsList({ disableStyle, className, ref, ...props }) {
+    const tone = useTone('ActionsList');
+    return (_jsx("div", { ...props, ref: ref, "data-component": "exception-actionslist", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
+}
+/** A small footnote below the actions, like "Still stuck? Contact support" with a link. */
+export function HelpText({ disableStyle, className, ref, ...props }) {
+    const tone = useTone('HelpText');
+    return (_jsx("p", { ...props, ref: ref, "data-component": "exception-helptext", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
+}
+function useTone(part) {
+    const tone = useContext(ToneContext);
+    if (!tone)
+        throw new Error(`Exception.${part} must be placed inside Exception.Root.`);
+    return tone;
+}

package/dist/components/fileupload/index.d.ts

@@ -48,8 +48,8 @@ import type { ComponentProps, ReactElement, ReactNode } from 'react';
  */
 export declare function Root({ children, ...props }: Omit<ArkFileUpload.RootProps, 'asChild'>): import("react").JSX.Element;
 export declare function Container({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
-export declare function Label({ disableStyle, className, ...props }: ArkFileUpload.LabelProps & StyleProps): import("react").JSX.Element;
-export declare function Dropzone({ disableStyle, children, className, ...props }: ArkFileUpload.DropzoneProps & StyleProps): import("react").JSX.Element;
+export declare function Label({ disableStyle, className, ...props }: Omit<ArkFileUpload.LabelProps, 'asChild'> & StyleProps): import("react").JSX.Element;
+export declare function Dropzone({ disableStyle, children, className, ...props }: Omit<ArkFileUpload.DropzoneProps, 'asChild'> & StyleProps): import("react").JSX.Element;
 /** Opens the file picker. Pass asChild to give this behavior to your own button, like an "Upload" Button; it keeps the state data attributes but none of this part's styling. */
 export declare function PickerButton({ asChild, disableStyle, ...props }: ArkFileUpload.TriggerProps & StyleProps): import("react").JSX.Element;
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
@@ -70,16 +70,16 @@ export declare function FileList({ disableStyle, children, className, style, onC
         errors: FileUploadFileRejection['errors'];
     }) => ReactNode;
 }) & StyleProps): import("react").JSX.Element;
-export declare function File({ disableStyle, status, className, children, ...props }: (ArkFileUpload.ItemProps & {
+export declare function File({ disableStyle, status, className, children, ...props }: (Omit<ArkFileUpload.ItemProps, 'asChild'> & {
     /** Pass the status from the FileList entry so rejected files get the matching error/removal behavior. */
     status: 'accepted' | 'rejected';
 }) & StyleProps): import("react").JSX.Element;
 /** Reads the surrounding File automatically. Omit children to keep the supplied text; override only for custom presentation. */
 export declare function FileErrorText({ disableStyle, children, className, ...props }: ComponentProps<'p'> & StyleProps): import("react").JSX.Element;
-export declare function FilePreview({ disableStyle, className, ...props }: ArkFileUpload.ItemPreviewProps & StyleProps): import("react").JSX.Element;
-export declare function FilePreviewImage({ disableStyle, className, ...props }: ArkFileUpload.ItemPreviewImageProps & StyleProps): import("react").JSX.Element;
+export declare function FilePreview({ disableStyle, className, ...props }: Omit<ArkFileUpload.ItemPreviewProps, 'asChild'> & StyleProps): import("react").JSX.Element;
+export declare function FilePreviewImage({ disableStyle, className, ...props }: Omit<ArkFileUpload.ItemPreviewImageProps, 'asChild'> & StyleProps): import("react").JSX.Element;
 /** Chooses image preview versus fallback from the file type automatically. Supply fallback content for non-image files; do not add a second file-type condition. */
-export declare function FileThumbnail({ disableStyle, children, className, ...props }: Omit<ArkFileUpload.ItemPreviewProps, 'type' | 'children'> & {
+export declare function FileThumbnail({ disableStyle, children, className, ...props }: Omit<ArkFileUpload.ItemPreviewProps, 'asChild' | 'type' | 'children'> & {
     children?: ReactNode;
 } & StyleProps): import("react").JSX.Element;
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
@@ -88,9 +88,9 @@ export declare function FileThumbnailIcon({ disableStyle, children, className, .
     children?: ReactElement<ComponentProps<'svg'>>;
 }) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
 /** Reads the surrounding File automatically. Omit children to keep the supplied text; override only for custom presentation. */
-export declare function FileName({ disableStyle, className, ...props }: ArkFileUpload.ItemNameProps & StyleProps): import("react").JSX.Element;
+export declare function FileName({ disableStyle, className, ...props }: Omit<ArkFileUpload.ItemNameProps, 'asChild'> & StyleProps): import("react").JSX.Element;
 /** Reads the surrounding File automatically. Omit children to keep the supplied text; override only for custom presentation. */
-export declare function FileSize({ disableStyle, className, ...props }: ArkFileUpload.ItemSizeTextProps & StyleProps): import("react").JSX.Element;
+export declare function FileSize({ disableStyle, className, ...props }: Omit<ArkFileUpload.ItemSizeTextProps, 'asChild'> & StyleProps): import("react").JSX.Element;
 /** Removes the surrounding file automatically, including rejected entries. No extra removal click handler needed. */
 export declare function FileRemoveButton({ disableStyle, children, className, ...props }: (Omit<ArkFileUpload.ItemDeleteTriggerProps, 'asChild' | 'children'> & {
     children?: ReactNode;

package/dist/components/input/index.d.ts

@@ -49,34 +49,34 @@ export declare function Root({ children, id, validation, value, defaultValue, on
 export type InputProps = Omit<BaseInput.Props, 'id' | 'name' | 'form' | 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'readOnly' | 'required' | 'type' | 'className' | 'render'> & {
     className?: string;
 } & StyleProps;
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-export declare const InputGroup: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Input({ disableStyle, className, 'aria-describedby': describedBy, ref, ...props }: InputProps): import("react").JSX.Element;
+export declare function InputGroup({ disableStyle, className, onClick, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Container({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 /** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
-export declare const Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "htmlFor"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-export declare const Description: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Label({ disableStyle, className, ref, ...props }: Omit<ComponentProps<'label'>, 'htmlFor'> & StyleProps): import("react").JSX.Element;
+export declare function Description({ disableStyle, className, id, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 type MessageProps = Omit<ComponentProps<'div'>, 'children'> & StyleProps & {
     children?: ValidationMessageChildren;
 };
 /** Shows itself only while Root's validation is `'error'`: with no children it shows the message from `['error', message]`, a function children formats that message, and other children replace it. */
-export declare const Error: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Error({ children, ref, ...props }: MessageProps): import("react").JSX.Element | null;
 /** Shows itself only while Root's validation is `'success'`: with no children it shows the message from `['success', message]`, a function children formats that message, and other children replace it. */
-export declare const Success: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Addon: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps & {
+export declare function Success({ children, ref, ...props }: MessageProps): import("react").JSX.Element | null;
+export declare function Addon({ disableStyle, className, variant, ref, ...props }: ComponentProps<'div'> & StyleProps & {
     /** Choose the preset appearance; this does not add action behavior. */
-    variant?: "normal" | "emphasized";
-}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const AddonText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    variant?: 'normal' | 'emphasized';
+}): import("react").JSX.Element;
+export declare function AddonText({ disableStyle, className, ref, ...props }: ComponentProps<'span'> & StyleProps): import("react").JSX.Element;
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
 export declare function AddonIcon(props: Omit<ComponentProps<'svg'>, 'children'> & StyleProps & {
     /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
     children: ReactElement<ComponentProps<'svg'>>;
 }): import("react").JSX.Element;
-export declare const AddonButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function AddonButton({ disableStyle, className, disabled, type, ref, ...props }: ComponentProps<'button'> & StyleProps): import("react").JSX.Element;
 /** Built-in icon; no children needed. Use it inside its matching control. */
-export declare const AddonLoadingIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "children"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare function AddonLoadingIcon({ disableStyle, className, strokeWidth, ref, ...props }: Omit<SVGIconProps, 'children'> & StyleProps): import("react").JSX.Element;
 /** Clears the control automatically; no clearing click handler needed. Supply the clear icon and an accessible name. */
-export declare const AddonClearButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function AddonClearButton({ disableStyle, className, disabled, onClick, ref, ...props }: ComponentProps<'button'> & StyleProps): import("react").JSX.Element;
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export declare function AddonClearButtonIcon({ children, ...props }: Omit<ComponentProps<'svg'>, 'children'> & StyleProps & {
     /** Omit for the supplied default icon; pass a child only to replace it. */