entangle-ui 0.8.1 → 0.9.0

package/dist/types/components/feedback/Skeleton/SkeletonLayout.d.ts

@@ -0,0 +1,314 @@
+import React from 'react';
+import { SkeletonLayoutVariant, SkeletonAnimation } from './Skeleton.types.js';
+
+/**
+ * Pre-built skeleton layouts for common loading patterns — card, list, table,
+ * grid, and chat. Drop one in when the surrounding UI shape is known and you
+ * want the placeholder structure to mirror it without composing every block
+ * by hand.
+ *
+ * Each variant uses the base `Skeleton` primitive underneath, so animation
+ * and reduced-motion behavior match the rest of the library. Use `count` to
+ * scale the number of rows/cells, `columns` for `grid` and `table`, and
+ * `animation` to opt out of motion for dense surfaces.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonLayout variant="card" />
+ * <SkeletonLayout variant="list" count={8} />
+ * <SkeletonLayout variant="table" columns={5} count={6} />
+ * <SkeletonLayout variant="grid" columns={3} count={9} />
+ * <SkeletonLayout variant="chat" count={6} />
+ * ```
+ */
+declare const SkeletonLayout: React.NamedExoticComponent<{
+    variant: SkeletonLayoutVariant;
+    count?: number | undefined;
+    columns?: number | undefined;
+    animation?: SkeletonAnimation | undefined;
+    width?: number | string | undefined;
+    id?: string | undefined | undefined;
+    className?: string | undefined | undefined;
+    testId?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    ref?: React.Ref<HTMLDivElement> | 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;
+    lang?: string | undefined | undefined;
+    nonce?: string | undefined | undefined;
+    slot?: string | undefined | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined | undefined;
+    title?: string | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    role?: 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;
+    children?: React.ReactNode;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined | undefined;
+    onCopy?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: React.FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
+    onChangeCapture?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
+    onBeforeInput?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onInput?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onReset?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onDrag?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnd?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
+    onScrollEnd?: React.UIEventHandler<HTMLDivElement> | undefined;
+    onScrollEndCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+    onToggle?: React.ToggleEventHandler<HTMLDivElement> | undefined;
+    onBeforeToggle?: React.ToggleEventHandler<HTMLDivElement> | undefined;
+    onTransitionCancel?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionCancelCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionRun?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionRunCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionStart?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionStartCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+}>;
+
+export { SkeletonLayout };

package/dist/types/components/feedback/Stat/Stat.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { StatProps } from './Stat.types.js';
+
+/**
+ * KPI / metric display: label + value + optional trend delta.
+ *
+ * Use `delta.semantics` to indicate whether "up" is good. Errors and
+ * latency, for example, want `semantics: "negative"` so an upward
+ * direction shows red.
+ *
+ * @example
+ * ```tsx
+ * <Stat
+ *   label="MRR"
+ *   value="$12,400"
+ *   delta={{ value: '+8.2%', direction: 'up' }}
+ *   helper="vs. last month"
+ * />
+ * ```
+ */
+declare const Stat: React.FC<StatProps>;
+
+export { Stat };

package/dist/types/components/feedback/Stat/Stat.types.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { BaseComponent } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+
+type StatSize = 'sm' | 'md' | 'lg';
+type StatDeltaDirection = 'up' | 'down' | 'neutral';
+type StatDeltaSemantics = 'positive' | 'negative' | 'neutral';
+interface StatDelta {
+    /** Delta value to display (e.g. "+12.4%"). */
+    value: React.ReactNode;
+    /** Direction of change — drives the icon. */
+    direction: StatDeltaDirection;
+    /**
+     * What the "up" direction means for this metric.
+     * - `positive`: up is good (revenue, signups) — green for up, red for down
+     * - `negative`: up is bad (errors, latency) — red for up, green for down
+     * - `neutral`: just show the direction with muted color
+     * @default "positive"
+     */
+    semantics?: StatDeltaSemantics;
+}
+interface StatBaseProps extends Omit<BaseComponent<HTMLDivElement>, 'title'> {
+    /** Label above the value. */
+    label: React.ReactNode;
+    /** Primary value (already formatted by the consumer). */
+    value: React.ReactNode;
+    /** Optional delta — displayed below the value. */
+    delta?: StatDelta;
+    /** Helper text below the delta. */
+    helper?: React.ReactNode;
+    /** Optional leading icon. */
+    icon?: React.ReactNode;
+    /** Size variant. @default "md" */
+    size?: StatSize;
+}
+type StatProps = Prettify<StatBaseProps>;
+
+export type { StatBaseProps, StatDelta, StatDeltaDirection, StatDeltaSemantics, StatProps, StatSize };

package/dist/types/components/layout/Accordion/Accordion.types.d.ts

@@ -46,6 +46,13 @@ interface AccordionBaseProps extends Omit<BaseComponent, 'onChange'> {
      * @default 0
      */
     gap?: number;
+    /**
+     * Width of the accordion. Number → px, string → CSS value.
+     * Defaults to `100%` so the accordion fills its parent and keeps a stable
+     * width when items expand or collapse.
+     * @default "100%"
+     */
+    width?: number | string;
     /**
      * AccordionItem children
      */

package/dist/types/components/layout/Card/Card.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CardProps, CardHeaderProps, CardMediaProps, CardBodyProps, CardFooterProps } from './Card.types.js';
+
+interface CardComponent extends React.FC<CardProps> {
+    Header: React.FC<CardHeaderProps>;
+    Media: React.FC<CardMediaProps>;
+    Body: React.FC<CardBodyProps>;
+    Footer: React.FC<CardFooterProps>;
+}
+declare const Card: CardComponent;
+
+export { Card };

package/dist/types/components/layout/Card/Card.types.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import { BaseComponent } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+
+type CardVariant = 'outlined' | 'filled' | 'elevated';
+interface CardBaseProps extends Omit<BaseComponent<HTMLDivElement>, 'onClick'> {
+    /** Visual variant. @default "outlined" */
+    variant?: CardVariant;
+    /** Click handler — when set, the whole card becomes interactive (button role). */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /** Selected state (e.g. for a card grid). @default false */
+    selected?: boolean;
+    /** Disabled state. @default false */
+    disabled?: boolean;
+    /** Children — typically Card.Header / Card.Media / Card.Body / Card.Footer. */
+    children?: React.ReactNode;
+}
+type CardProps = Prettify<CardBaseProps>;
+interface CardHeaderBaseProps extends Omit<BaseComponent<HTMLDivElement>, 'title'> {
+    /** Title row content. Ignored when `children` is provided. */
+    title?: React.ReactNode;
+    /** Subtitle below the title. Ignored when `children` is provided. */
+    subtitle?: React.ReactNode;
+    /** Leading visual (icon, Avatar). */
+    leading?: React.ReactNode;
+    /** Trailing actions (IconButton, Menu). */
+    trailing?: React.ReactNode;
+    /** Custom content — overrides title/subtitle layout. */
+    children?: React.ReactNode;
+}
+type CardHeaderProps = Prettify<CardHeaderBaseProps>;
+interface CardMediaBaseProps extends BaseComponent<HTMLDivElement> {
+    /** Image source — shortcut for an `<img>` child. */
+    src?: string;
+    /** Alt text for the image. */
+    alt?: string;
+    /** Aspect ratio (width/height). @default 16/9 */
+    aspectRatio?: number;
+    children?: React.ReactNode;
+}
+type CardMediaProps = Prettify<CardMediaBaseProps>;
+interface CardBodyBaseProps extends BaseComponent<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+type CardBodyProps = Prettify<CardBodyBaseProps>;
+type CardFooterAlign = 'left' | 'center' | 'right' | 'space-between';
+interface CardFooterBaseProps extends BaseComponent<HTMLDivElement> {
+    /** Horizontal alignment of footer content. @default "right" */
+    align?: CardFooterAlign;
+    children?: React.ReactNode;
+}
+type CardFooterProps = Prettify<CardFooterBaseProps>;
+
+export type { CardBaseProps, CardBodyBaseProps, CardBodyProps, CardFooterAlign, CardFooterBaseProps, CardFooterProps, CardHeaderBaseProps, CardHeaderProps, CardMediaBaseProps, CardMediaProps, CardProps, CardVariant };

package/dist/types/components/layout/PageHeader/PageHeader.d.ts

@@ -25,8 +25,8 @@ declare const PageHeader: React.NamedExoticComponent<{
     breadcrumbs?: React.ReactNode;
     size?: PageHeaderSize | undefined;
     bordered?: boolean | undefined;
-    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
     children?: React.ReactNode;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
     id?: string | undefined | undefined;
     className?: string | undefined | undefined;
     testId?: string | undefined;

package/dist/types/components/navigation/Pagination/Pagination.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { PaginationProps } from './Pagination.types.js';
+export { PaginationSize } from './Pagination.types.js';
+
+/**
+ * Page navigator with sibling/boundary ellipsis logic. Controlled when `page`
+ * is set, otherwise uncontrolled with `defaultPage`. Pages are 1-based.
+ *
+ * @example
+ * ```tsx
+ * <Pagination count={20} defaultPage={1} onChange={(_, p) => setPage(p)} />
+ *
+ * // Compact: only prev/next + numbers
+ * <Pagination count={20} siblingCount={0} boundaryCount={1} />
+ *
+ * // Full controls
+ * <Pagination count={50} showFirstButton showLastButton />
+ * ```
+ */
+declare const Pagination: React.FC<PaginationProps>;
+
+export { Pagination };

package/dist/types/components/navigation/Pagination/Pagination.types.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { BaseComponent } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+
+type PaginationSize = 'sm' | 'md' | 'lg';
+type PaginationItemType = 'page' | 'ellipsis' | 'first' | 'previous' | 'next' | 'last';
+/**
+ * A single item resolved by the pagination algorithm. `page` is `null` for
+ * ellipsis items and for prev/next/first/last when the corresponding action
+ * is not available (e.g. `previous` while on page 1).
+ */
+interface PaginationItem {
+    type: PaginationItemType;
+    page: number | null;
+    selected: boolean;
+    disabled: boolean;
+}
+type PaginationItemAriaLabelGetter = (type: PaginationItemType, page: number | null, selected: boolean) => string;
+interface PaginationBaseProps extends Omit<BaseComponent<HTMLElement>, 'onChange'> {
+    /** Total number of pages. */
+    count: number;
+    /** Currently selected page (1-based). Controls the component when set. */
+    page?: number;
+    /** Default selected page in uncontrolled mode (1-based). @default 1 */
+    defaultPage?: number;
+    /** Called when the user requests a new page. */
+    onChange?: (event: React.SyntheticEvent, page: number) => void;
+    /** Pages shown on each side of the current page. @default 1 */
+    siblingCount?: number;
+    /** Pages always shown at the start and end of the list. @default 1 */
+    boundaryCount?: number;
+    /** Show the "jump to first" button. @default false */
+    showFirstButton?: boolean;
+    /** Show the "jump to last" button. @default false */
+    showLastButton?: boolean;
+    /** Hide the previous-page button. @default false */
+    hidePrevButton?: boolean;
+    /** Hide the next-page button. @default false */
+    hideNextButton?: boolean;
+    /** Visual size. @default "md" */
+    size?: PaginationSize;
+    /** Disable the whole control. @default false */
+    disabled?: boolean;
+    /** Custom aria-label generator for each item. */
+    getItemAriaLabel?: PaginationItemAriaLabelGetter;
+}
+type PaginationProps = Prettify<PaginationBaseProps>;
+
+export type { PaginationBaseProps, PaginationItem, PaginationItemAriaLabelGetter, PaginationItemType, PaginationProps, PaginationSize };

package/dist/types/components/primitives/HoverCard/HoverCard.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { HoverCardProps, HoverCardTriggerProps, HoverCardContentProps } from './HoverCard.types.js';
+
+interface HoverCardComponent extends React.FC<HoverCardProps> {
+    Trigger: React.FC<HoverCardTriggerProps>;
+    Content: React.FC<HoverCardContentProps>;
+}
+declare const HoverCard: HoverCardComponent;
+
+export { HoverCard };

package/dist/types/components/primitives/HoverCard/HoverCard.types.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import { UseFloatingReturn, FloatingContext } from '@floating-ui/react';
+import { BaseComponent } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+import { PopoverPlacement } from '../Popover/Popover.types.js';
+
+interface HoverCardBaseProps {
+    /** Open state (controlled). */
+    open?: boolean;
+    /** Default open state (uncontrolled). @default false */
+    defaultOpen?: boolean;
+    /** Side relative to the trigger. @default "bottom-start" */
+    placement?: PopoverPlacement;
+    /** Distance in pixels from the trigger. @default 8 */
+    offset?: number;
+    /** Delay before opening on hover, in ms. @default 400 */
+    openDelay?: number;
+    /** Delay before closing once cursor leaves, in ms. @default 150 */
+    closeDelay?: number;
+    /** Render the content in a portal. @default true */
+    portal?: boolean;
+    /**
+     * Disable the safe polygon that lets the cursor move from the trigger
+     * onto the content without closing. @default false
+     */
+    disableSafePolygon?: boolean;
+    /** Disable the entire HoverCard (never opens). @default false */
+    disabled?: boolean;
+    /** Callback when open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** `HoverCard.Trigger` + `HoverCard.Content` children. */
+    children: React.ReactNode;
+}
+type HoverCardProps = Prettify<HoverCardBaseProps>;
+interface HoverCardTriggerBaseProps {
+    /** Trigger element — must be a single React element. */
+    children: React.ReactElement;
+}
+type HoverCardTriggerProps = Prettify<HoverCardTriggerBaseProps>;
+interface HoverCardContentBaseProps extends BaseComponent<HTMLDivElement> {
+    /** Content rendered inside the floating panel. */
+    children: React.ReactNode;
+    /** Width of the content. */
+    width?: number | string;
+    /** Maximum height with scroll. */
+    maxHeight?: number | string;
+    /** Padding inside the content. @default "md" */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+type HoverCardContentProps = Prettify<HoverCardContentBaseProps>;
+interface HoverCardContextValue {
+    isOpen: boolean;
+    hoverCardId: string;
+    portal: boolean;
+    triggerRef: React.RefObject<HTMLElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    floatingRefs: UseFloatingReturn['refs'];
+    floatingStyles: React.CSSProperties;
+    floatingContext: FloatingContext;
+    getReferenceProps: (props?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getFloatingProps: (props?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+}
+
+export type { HoverCardBaseProps, HoverCardContentBaseProps, HoverCardContentProps, HoverCardContextValue, HoverCardProps, HoverCardTriggerBaseProps, HoverCardTriggerProps };

package/dist/types/components/primitives/Icon/Icon.d.ts

@@ -2,11 +2,24 @@ import React from 'react';
 import { LiteralUnion, Prettify } from '../../../types/utilities.js';
 import { Size } from '../../../types/common.js';
 
-type IconSize = Size;
+type IconSize = LiteralUnion<Size, string> | number;
 type IconColor = LiteralUnion<'primary' | 'secondary' | 'muted' | 'accent' | 'success' | 'warning' | 'error'>;
 interface IconBaseProps {
     children: React.ReactNode;
+    /**
+     * Icon size. `'sm' | 'md' | 'lg'` map to 12 / 16 / 20 px through the theme
+     * recipe. Pass a `number` for a custom pixel size, or a `string` for any
+     * CSS length (e.g. `'1.5em'`, `'24px'`).
+     * @default "md"
+     */
     size?: IconSize;
+    /**
+     * Icon color. Standard tokens (`'primary' | 'secondary' | 'muted' |
+     * 'accent' | 'success' | 'warning' | 'error'`) map to theme variables;
+     * any other string is forwarded as an inline `color` value (hex,
+     * `currentColor`, `var(--…)`, etc.).
+     * @default "primary"
+     */
     color?: IconColor;
     className?: string;
     title?: string;