@milktop/react-ui 0.0.0-stage → 0.1.2

package/dist/card/Card.d.ts

@@ -0,0 +1,355 @@
+/**
+ * A card: a surface grouping related content.
+ *
+ *   <Card heading="Next lesson" description="Thursday at 16:00" icon="lucide:calendar"
+ *     actions={<Button size="sm">Reschedule</Button>}>
+ *     …body…
+ *   </Card>
+ *
+ * - `heading`, `description`: the header; `icon`: an Iconify name in a
+ *   tinted tile beside them
+ * - `actions`: beside the heading; `footer`: a tinted strip along the bottom
+ * - `variant`: 'default' (a bordered surface), 'elevated' (lifted, no
+ *   border), 'outline' (a border, no fill or shadow) or 'subtle' (a tinted
+ *   fill, for a panel inside a page or another card)
+ * - `size`: 'sm', 'md' (default) or 'lg': the padding
+ * - `divided`: a line between the header and the body
+ * - `href`: the whole card is a link, lifting on hover
+ * - `flush`: no padding round the body, for content that runs edge to edge (a table, a list)
+ *
+ * Or composed from Card.Header (which takes heading, description, icon and
+ * actions too), Card.Body and Card.Footer, placed as they are:
+ *
+ *   <Card>
+ *     <Card.Header heading="Invoices" actions={<Button size="sm">New</Button>} />
+ *     <Card.Body>…</Card.Body>
+ *     <Card.Footer>…</Card.Footer>
+ *   </Card>
+ */
+import { type ComponentProps, type ReactNode } from 'react';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './card.css';
+type HeaderContent = {
+    heading?: ReactNode;
+    description?: ReactNode;
+    icon?: string | null;
+    actions?: ReactNode;
+};
+type CardPart = 'root' | 'header' | 'icon' | 'titles' | 'heading' | 'description' | 'actions' | 'body' | 'footer';
+export type CardProps = Omit<ComponentProps<'div'>, 'title'> & HeaderContent & {
+    footer?: ReactNode;
+    variant?: 'default' | 'elevated' | 'outline' | 'subtle';
+    size?: 'sm' | 'md' | 'lg';
+    divided?: boolean;
+    href?: string | null;
+    flush?: boolean;
+    classes?: Classes<CardPart>;
+};
+type HeaderProps = ComponentProps<'div'> & HeaderContent & {
+    classes?: Classes<CardPart>;
+};
+declare function Header({ heading, description, icon, actions, classes, className, children, ...rest }: HeaderProps): import("react").JSX.Element;
+declare function CardShortcut({ heading, description, icon, actions, footer, variant, size, divided, href, flush, className, classes, children, ...rest }: CardProps): import("react").DetailedReactHTMLElement<{
+    href: string | undefined;
+    className: string | undefined;
+    'data-variant': "default" | "outline" | "elevated" | "subtle";
+    'data-size': "sm" | "md" | "lg";
+    'data-flush': true | undefined;
+    'data-divided': true | undefined;
+    'data-link': string | undefined;
+    'data-scope': string;
+    'data-part': string;
+    slot?: string | undefined | undefined;
+    style?: import("react").CSSProperties | undefined;
+    ref?: import("react").Ref<HTMLDivElement> | undefined;
+    key?: import("react").Key | null | undefined;
+    defaultChecked?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    suppressHydrationWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    id?: string | undefined | undefined;
+    lang?: string | undefined | undefined;
+    nonce?: string | undefined | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    color?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
+    exportparts?: string | undefined | undefined;
+    part?: string | undefined | undefined;
+    "aria-activedescendant"?: string | undefined | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    "aria-braillelabel"?: string | undefined | undefined;
+    "aria-brailleroledescription"?: string | undefined | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-colcount"?: number | undefined | undefined;
+    "aria-colindex"?: number | undefined | undefined;
+    "aria-colindextext"?: string | undefined | undefined;
+    "aria-colspan"?: number | undefined | undefined;
+    "aria-controls"?: string | undefined | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+    "aria-describedby"?: string | undefined | undefined;
+    "aria-description"?: string | undefined | undefined;
+    "aria-details"?: string | undefined | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    "aria-errormessage"?: string | undefined | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+    "aria-keyshortcuts"?: string | undefined | undefined;
+    "aria-label"?: string | undefined | undefined;
+    "aria-labelledby"?: string | undefined | undefined;
+    "aria-level"?: number | undefined | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+    "aria-owns"?: string | undefined | undefined;
+    "aria-placeholder"?: string | undefined | undefined;
+    "aria-posinset"?: number | undefined | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined | undefined;
+    "aria-rowcount"?: number | undefined | undefined;
+    "aria-rowindex"?: number | undefined | undefined;
+    "aria-rowindextext"?: string | undefined | undefined;
+    "aria-rowspan"?: number | undefined | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    "aria-valuemax"?: number | undefined | undefined;
+    "aria-valuemin"?: number | undefined | undefined;
+    "aria-valuenow"?: number | undefined | undefined;
+    "aria-valuetext"?: string | undefined | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: import("react").ChangeEventHandler<HTMLDivElement, Element> | undefined;
+    onChangeCapture?: import("react").ChangeEventHandler<HTMLDivElement, Element> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+    onInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+    onReset?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: import("react").SubmitEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: import("react").SubmitEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollEnd?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollEndCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
+    onBeforeToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
+    onTransitionCancel?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionRun?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionStart?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+}, HTMLDivElement>;
+export declare const Card: typeof CardShortcut & {
+    Header: typeof Header;
+    Body: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Footer: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};
+export {};

package/dist/card/Card.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * A card: a surface grouping related content.
+ *
+ *   <Card heading="Next lesson" description="Thursday at 16:00" icon="lucide:calendar"
+ *     actions={<Button size="sm">Reschedule</Button>}>
+ *     …body…
+ *   </Card>
+ *
+ * - `heading`, `description`: the header; `icon`: an Iconify name in a
+ *   tinted tile beside them
+ * - `actions`: beside the heading; `footer`: a tinted strip along the bottom
+ * - `variant`: 'default' (a bordered surface), 'elevated' (lifted, no
+ *   border), 'outline' (a border, no fill or shadow) or 'subtle' (a tinted
+ *   fill, for a panel inside a page or another card)
+ * - `size`: 'sm', 'md' (default) or 'lg': the padding
+ * - `divided`: a line between the header and the body
+ * - `href`: the whole card is a link, lifting on hover
+ * - `flush`: no padding round the body, for content that runs edge to edge (a table, a list)
+ *
+ * Or composed from Card.Header (which takes heading, description, icon and
+ * actions too), Card.Body and Card.Footer, placed as they are:
+ *
+ *   <Card>
+ *     <Card.Header heading="Invoices" actions={<Button size="sm">New</Button>} />
+ *     <Card.Body>…</Card.Body>
+ *     <Card.Footer>…</Card.Footer>
+ *   </Card>
+ */
+import { Children, createElement, isValidElement } from 'react';
+import 'iconify-icon';
+import { cx, partOf, partsOf, withParts } from '../utils.js';
+import '../theme.css';
+import './card.css';
+// The header's content, shared by the props version and Card.Header.
+function headerContent({ heading, description, icon, actions }, part) {
+    return _jsxs(_Fragment, { children: [icon && _jsx("span", { ...part('icon'), "aria-hidden": "true", children: _jsx("iconify-icon", { icon: icon }) }), (heading || description) && (_jsxs("div", { ...part('titles'), children: [heading && _jsx("h3", { ...part('heading'), children: heading }), description && _jsx("p", { ...part('description'), children: description })] })), actions && _jsx("div", { ...part('actions'), children: actions })] });
+}
+function Header({ heading = null, description = null, icon = null, actions = null, classes, className, children, ...rest }) {
+    const part = partsOf('card', classes);
+    return (_jsxs("div", { ...rest, ...part('header'), className: cx(className, classes?.header), children: [headerContent({ heading, description, icon, actions }, part), children] }));
+}
+const Body = partOf('card', 'body');
+const Footer = partOf('card', 'footer');
+const layout = [Header, Body, Footer];
+function CardShortcut({ heading = null, description = null, icon = null, actions = null, footer = null, variant = 'default', size = 'md', divided = false, href = null, flush = false, className, classes, children, ...rest }) {
+    const part = partsOf('card', classes);
+    // Composed from Card.Header, Body and Footer: they go in as they are.
+    const composed = Children.toArray(children).some((node) => isValidElement(node) && layout.includes(node.type));
+    return createElement(href ? 'a' : 'div', {
+        ...rest, ...part('root'), href: href ?? undefined, className: cx(className, classes?.root),
+        'data-variant': variant, 'data-size': size, 'data-flush': flush || undefined, 'data-divided': divided || undefined,
+        'data-link': href ? '' : undefined,
+    }, composed ? children : _jsxs(_Fragment, { children: [(heading || description || actions || icon) && (_jsx("div", { ...part('header'), children: headerContent({ heading, description, icon, actions }, part) })), children != null && _jsx("div", { ...part('body'), children: children }), footer && _jsx("div", { ...part('footer'), children: footer })] }));
+}
+export const Card = withParts(CardShortcut, { Header, Body, Footer });

package/dist/card/card.css

@@ -0,0 +1,43 @@
+/* A card holds other components, so its rules use > to stay off them. */
+@layer ui {
+  [data-scope=card][data-part=root] {
+    display: flex; flex-direction: column; width: 100%; min-width: 0; box-sizing: border-box;
+    background: var(--ui-surface); color: var(--ui-text); font-family: var(--ui-font); font-size: 14px; text-decoration: none;
+    border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 4px); box-shadow: var(--ui-card-shadow);
+    --card-pad: 1.25rem;
+    /* Clipped only when flush, so a picker's popup inside isn't cut off. */
+    &[data-flush] { overflow: hidden; }
+    &[data-size=sm] { --card-pad: 0.875rem; }
+    &[data-size=lg] { --card-pad: 1.75rem; }
+    /* Lifted off the page: a soft shadow does the border's work. */
+    &[data-variant=elevated] { border-color: transparent;
+      box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px -2px rgba(16, 24, 40, 0.08); }
+    &[data-variant=outline] { background: transparent; box-shadow: none; }
+    /* A tinted fill, for a panel inside a page or another card. */
+    &[data-variant=subtle] { background: color-mix(in srgb, var(--ui-hover) 70%, var(--ui-surface)); border-color: transparent; box-shadow: none; }
+    :is(.dark, [data-theme=dark]) &[data-variant=elevated] { border-color: var(--ui-border); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6); }
+    /* A link: lifts and darkens its border on hover. */
+    &[data-link] { cursor: pointer; transition: border-color 150ms, box-shadow 150ms, translate 150ms;
+      &:hover { border-color: color-mix(in srgb, var(--ui-muted) 50%, var(--ui-border)); translate: 0 -1px;
+        box-shadow: 0 2px 4px rgba(16, 24, 40, 0.06), 0 8px 20px -6px rgba(16, 24, 40, 0.12); }
+      &:focus-visible { outline: 2px solid var(--ui-ring); outline-offset: 2px; } }
+  }
+  [data-scope=card][data-part=header] { display: flex; align-items: flex-start; gap: 0.75rem; padding: var(--card-pad) var(--card-pad) 0;
+    [data-divided] > &, [data-flush] > & { padding-bottom: calc(var(--card-pad) * 0.8); border-bottom: 1px solid var(--ui-border); }
+    /* A card that is all header (a link card): padded all round. */
+    &:last-child { padding-bottom: var(--card-pad); border-bottom: none; } }
+  [data-scope=card][data-part=icon] { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; margin-top: -0.125rem;
+    border-radius: var(--ui-radius); background: var(--ui-accent-soft); color: var(--ui-accent-soft-text); font-size: 18px; }
+  [data-scope=card][data-part=titles] { flex: 1; min-width: 0; }
+  [data-scope=card][data-part=heading] { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
+  [data-scope=card][data-part=description] { margin: 0.25rem 0 0; color: var(--ui-muted); }
+  [data-scope=card][data-part=actions] { display: flex; gap: 0.5rem; flex-shrink: 0; }
+  [data-scope=card][data-part=body] { padding: var(--card-pad); flex-grow: 1;
+    [data-part=header] + & { padding-top: calc(var(--card-pad) * 0.8); }
+    [data-flush] > & { padding: 0; } }
+  /* The footer on a faint band, so actions read as the card's own. */
+  [data-scope=card][data-part=footer] { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem;
+    padding: calc(var(--card-pad) * 0.6) var(--card-pad); border-top: 1px solid var(--ui-border);
+    background: color-mix(in srgb, var(--ui-hover) 55%, var(--ui-surface)); border-radius: 0 0 calc(var(--ui-radius) + 3px) calc(var(--ui-radius) + 3px);
+    [data-variant=outline] > &, [data-variant=subtle] > & { background: transparent; } }
+}

package/dist/chart/AreaChart.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes } from 'react';
+import { type ChartClasses } from './ChartFrame.js';
+import { type ChartRow, type ChartSeries } from './chart.js';
+export type ChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    data?: ChartRow[];
+    x?: string;
+    y?: string | null;
+    series?: ChartSeries[] | null;
+    height?: number;
+    format?: ((value: number) => string) | null;
+    label?: string;
+    grid?: boolean;
+    stacked?: boolean;
+    classes?: ChartClasses;
+};
+export type AreaChartProps = ChartProps & {
+    curve?: 'smooth' | 'linear';
+};
+export declare function AreaChart({ data, x, y, series, height, format, label: labelProp, grid, curve, stacked, classes, ...rest }: AreaChartProps): import("react").JSX.Element;

package/dist/chart/AreaChart.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * A filled line chart, drawn to its width, with a tooltip on hover.
+ *
+ *   <AreaChart data={months} x="month" y="revenue" format={(v) => `£${v}`} />
+ *   <AreaChart data={months} x="month" series={[{ key: 'maths', label: 'Maths' }, { key: 'english', label: 'English' }]} />
+ *
+ * - `data`: rows of objects; `x` names the label property ('label')
+ * - `y`: the value property, or `series` for several, each `{ key, label, color }`
+ *   (colours from the theme's --ui-chart-1…5 by default)
+ * - `curve`: 'smooth' (default) or 'linear'; `stacked`: series sit on top of one another
+ * - `height` (240 px), `format(value)` for ticks and tooltips, `grid` (lines; true)
+ * - `label`: what it shows, for assistive tech (a hidden table of the data)
+ */
+import { useLocale, useMessages } from '../format/LocaleProvider.js';
+import { useId, useState } from 'react';
+import { scalePoint } from 'd3-scale';
+import { area, line, curveMonotoneX, curveLinear } from 'd3-shape';
+import { ChartFrame } from './ChartFrame.js';
+import { seriesOf, formatter, pad, yScale, leftFor, labelStep, num } from './chart.js';
+import { partsOf } from '../utils.js';
+export function AreaChart({ data = [], x = 'label', y = null, series = null, height = 240, format = null, label: labelProp, grid = true, curve = 'smooth', stacked = false, classes, ...rest }) {
+    const t = useMessages();
+    const label = labelProp ?? t.chart.label;
+    const part = partsOf('chart', classes);
+    // Safe inside url(#…), whatever React's ids look like.
+    const id = useId().replace(/[^\w-]/g, '');
+    const [hover, setHover] = useState(null);
+    const [width, setWidth] = useState(0);
+    const rows = data ?? [];
+    const list = seriesOf(series, y);
+    const fmt = formatter(format, useLocale());
+    const innerH = Math.max(0, height - pad.top - pad.bottom);
+    // Each series' [low, high] per row: from 0, or stacked on the ones before.
+    const base = rows.map(() => 0);
+    const bands = list.map((s) => rows.map((row, i) => {
+        const value = num(row[s.key]);
+        const low = stacked ? base[i] : 0;
+        if (stacked)
+            base[i] = low + value;
+        return [low, low + value];
+    }));
+    const ys = yScale(Math.max(0, ...bands.flatMap((b) => b.map((v) => v[1]))), innerH);
+    const ticks = ys.ticks(4);
+    const left = leftFor(ticks, fmt);
+    const innerW = Math.max(0, width - left - pad.right);
+    const xs = scalePoint().domain(rows.map((_, i) => i)).range([0, innerW]);
+    const at = (i) => xs(i) ?? 0;
+    const shape = curve === 'linear' ? curveLinear : curveMonotoneX;
+    const fill = area().x((_, i) => at(i)).y0((d) => ys(d[0])).y1((d) => ys(d[1])).curve(shape);
+    const stroke = line().x((_, i) => at(i)).y((d) => ys(d[1])).curve(shape);
+    const step = labelStep(rows.length, innerW);
+    function move(e) {
+        if (!rows.length)
+            return;
+        const pos = e.clientX - e.currentTarget.getBoundingClientRect().left - left;
+        const gap = rows.length > 1 ? innerW / (rows.length - 1) : 0;
+        setHover(Math.max(0, Math.min(rows.length - 1, gap ? Math.round(pos / gap) : 0)));
+    }
+    return (_jsx(ChartFrame, { ...rest, rows: rows, x: x, list: list, fmt: fmt, height: height, label: label, classes: classes, hover: hover, onHover: setHover, onMove: move, width: width, onWidth: setWidth, tipLeft: hover == null ? 0 : left + at(hover), flip: hover != null && at(hover) > innerW * 0.6, children: _jsxs("svg", { ...part('svg'), width: width, height: height, "aria-hidden": "true", children: [_jsx("defs", { children: list.map((s, i) => (_jsxs("linearGradient", { id: `${id}-${i}`, x1: "0", x2: "0", y1: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: s.color, stopOpacity: "0.28" }), _jsx("stop", { offset: "100%", stopColor: s.color, stopOpacity: "0.02" })] }, s.key))) }), _jsxs("g", { transform: `translate(${left},${pad.top})`, children: [ticks.map((tick) => (_jsxs("g", { children: [grid && _jsx("line", { ...part('grid'), x1: "0", x2: innerW, y1: ys(tick), y2: ys(tick) }), _jsx("text", { ...part('tick'), x: "-8", y: ys(tick), dy: "0.32em", textAnchor: "end", children: fmt(tick) })] }, tick))), rows.map((row, i) => i % step === 0 && (_jsx("text", { ...part('tick'), x: at(i), y: innerH + 18, textAnchor: i === 0 ? 'start' : i === rows.length - 1 ? 'end' : 'middle', children: String(row[x] ?? '') }, i))), list.map((s, i) => (_jsxs("g", { children: [_jsx("path", { ...part('area'), d: fill(bands[i]) ?? '', fill: `url(#${id}-${i})` }), _jsx("path", { ...part('line'), d: stroke(bands[i]) ?? '', stroke: s.color })] }, s.key))), hover != null && _jsxs(_Fragment, { children: [_jsx("line", { ...part('cursor'), x1: at(hover), x2: at(hover), y1: "0", y2: innerH }), list.map((s, i) => _jsx("circle", { ...part('dot'), cx: at(hover), cy: ys(bands[i][hover][1]), r: "4", fill: s.color }, s.key))] })] })] }) }));
+}

package/dist/chart/BarChart.d.ts

@@ -0,0 +1,3 @@
+import type { ChartProps } from './AreaChart.js';
+export type BarChartProps = ChartProps;
+export declare function BarChart({ data, x, y, series, height, format, label: labelProp, grid, stacked, classes, ...rest }: BarChartProps): import("react").JSX.Element;

package/dist/chart/BarChart.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Vertical bars, one per row (or a group per row for several series), drawn
+ * to its width, with a tooltip on hover.
+ *
+ *   <BarChart data={weeks} x="week" y="lessons" />
+ *   <BarChart data={months} x="month" series={subjects} stacked />
+ *
+ * - `data`, `x`, `y`, `series`, `height`, `format`, `grid`, `label`: as for AreaChart
+ * - `stacked`: series sit on top of one another instead of side by side
+ */
+import { useLocale, useMessages } from '../format/LocaleProvider.js';
+import { useState } from 'react';
+import { scaleBand } from 'd3-scale';
+import { ChartFrame } from './ChartFrame.js';
+import { seriesOf, formatter, pad, yScale, leftFor, labelStep, num } from './chart.js';
+import { partsOf } from '../utils.js';
+export function BarChart({ data = [], x = 'label', y = null, series = null, height = 240, format = null, label: labelProp, grid = true, stacked = false, classes, ...rest }) {
+    const t = useMessages();
+    const label = labelProp ?? t.chart.label;
+    const part = partsOf('chart', classes);
+    const [hover, setHover] = useState(null);
+    const [width, setWidth] = useState(0);
+    const rows = data ?? [];
+    const list = seriesOf(series, y);
+    const fmt = formatter(format, useLocale());
+    const innerH = Math.max(0, height - pad.top - pad.bottom);
+    const sum = (row) => list.reduce((total, s) => total + num(row[s.key]), 0);
+    const max = Math.max(0, ...rows.map((row) => (stacked ? sum(row) : Math.max(0, ...list.map((s) => num(row[s.key]))))));
+    const ys = yScale(max, innerH);
+    const ticks = ys.ticks(4);
+    const left = leftFor(ticks, fmt);
+    const innerW = Math.max(0, width - left - pad.right);
+    const xs = scaleBand().domain(rows.map((_, i) => i)).range([0, innerW]).padding(0.3);
+    const at = (i) => xs(i) ?? 0;
+    const inner = scaleBand().domain(list.map((s) => s.key)).range([0, xs.bandwidth()]).padding(0.12);
+    const step = labelStep(rows.length, innerW);
+    // Each bar's box: side by side, or stacked.
+    const bars = rows.map((row, i) => {
+        let base = 0;
+        return list.map((s) => {
+            const value = num(row[s.key]);
+            const low = stacked ? base : 0;
+            if (stacked)
+                base += value;
+            return {
+                key: s.key, x: stacked ? at(i) : at(i) + (inner(s.key) ?? 0), y: ys(low + value), color: s.color,
+                w: stacked ? xs.bandwidth() : inner.bandwidth(), h: Math.max(0, ys(low) - ys(low + value)),
+            };
+        });
+    });
+    function move(e) {
+        if (!rows.length)
+            return;
+        const pos = e.clientX - e.currentTarget.getBoundingClientRect().left - left;
+        setHover(Math.max(0, Math.min(rows.length - 1, Math.floor(pos / (innerW / rows.length)))));
+    }
+    const flip = hover != null && at(hover) > innerW * 0.6;
+    return (_jsx(ChartFrame, { ...rest, rows: rows, x: x, list: list, fmt: fmt, height: height, label: label, classes: classes, hover: hover, onHover: setHover, onMove: move, width: width, onWidth: setWidth, tipLeft: hover == null ? 0 : left + at(hover) + (flip ? 0 : xs.bandwidth()), flip: flip, children: _jsx("svg", { ...part('svg'), width: width, height: height, "aria-hidden": "true", children: _jsxs("g", { transform: `translate(${left},${pad.top})`, children: [ticks.map((tick) => (_jsxs("g", { children: [grid && _jsx("line", { ...part('grid'), x1: "0", x2: innerW, y1: ys(tick), y2: ys(tick) }), _jsx("text", { ...part('tick'), x: "-8", y: ys(tick), dy: "0.32em", textAnchor: "end", children: fmt(tick) })] }, tick))), hover != null && (_jsx("rect", { ...part('band'), x: at(hover) - (xs.step() * xs.paddingInner()) / 2, y: "0", width: xs.step(), height: innerH })), rows.map((row, i) => (_jsxs("g", { children: [i % step === 0 && _jsx("text", { ...part('tick'), x: at(i) + xs.bandwidth() / 2, y: innerH + 18, textAnchor: "middle", children: String(row[x] ?? '') }), bars[i].map((bar) => (_jsx("rect", { ...part('bar'), x: bar.x, y: bar.y, width: bar.w, height: bar.h, rx: stacked ? 0 : 3, fill: bar.color, "data-dim": (hover != null && hover !== i) || undefined }, bar.key)))] }, i)))] }) }) }));
+}