npm - entangle-ui - Versions diffs - 0.8.2 → 0.10.0 - Mend

entangle-ui 0.8.2 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1032) hide show

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,38 @@
+import { BaseComponent } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
+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, '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/feedback/Toast/Toast.types.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 type ToastSeverity = 'info' | 'success' | 'warning' | 'error';
 type ToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';

package/dist/types/components/form/FormHelperText.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import React from 'react';
-import { BaseComponent } from '../../types/common.js';
 import { Prettify } from '../../types/utilities.js';
+import { BaseComponent } from '../../types/common.js';
-interface FormHelperTextBaseProps extends BaseComponent<HTMLDivElement> {
+interface FormHelperTextBaseProps extends BaseComponent {
     /**
      * Helper text content
      */

package/dist/types/components/form/FormLabel.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react';
-import { BaseComponent } from '../../types/common.js';
 import { Prettify } from '../../types/utilities.js';
+import { BaseComponent } from '../../types/common.js';
 interface FormLabelBaseProps extends BaseComponent<HTMLLabelElement> {
     /**

package/dist/types/components/form/InputWrapper.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Size, BaseComponent } from '../../types/common.js';
 import { Prettify } from '../../types/utilities.js';
+import { Size, BaseComponent } from '../../types/common.js';
-interface InputWrapperBaseProps extends BaseComponent<HTMLDivElement> {
+interface InputWrapperBaseProps extends BaseComponent {
     /**
      * Input wrapper content
      */

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

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Prettify } from '../../../types/utilities.js';
 import { BaseComponent, Size } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 type AccordionSize = Size;
 /**
@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,54 @@
+import { BaseComponent } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
+type CardVariant = 'outlined' | 'filled' | 'elevated';
+interface CardBaseProps extends Omit<BaseComponent, '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, '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 {
+    /** 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 {
+    children?: React.ReactNode;
+}
+type CardBodyProps = Prettify<CardBodyBaseProps>;
+type CardFooterAlign = 'left' | 'center' | 'right' | 'space-between';
+interface CardFooterBaseProps extends BaseComponent {
+    /** 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/Divider/Divider.types.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import React from 'react';
 import { BaseComponent } from '../../../types/common.js';
 import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 type DividerOrientation = 'horizontal' | 'vertical';
 type DividerVariant = 'solid' | 'dashed' | 'dotted';
@@ -17,7 +17,7 @@ type DividerVariant = 'solid' | 'dashed' | 'dotted';
  * - `7` → `xxxl` (32px)
  */
 type DividerSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
-interface DividerBaseProps extends BaseComponent<HTMLDivElement> {
+interface DividerBaseProps extends BaseComponent {
     /**
      * Divider axis.
      * @default "horizontal"

package/dist/types/components/layout/Flex/Flex.d.ts CHANGED Viewed

@@ -26,7 +26,7 @@ type FlexAlignContent = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'spac
  * Spacing multiplier (0-8) based on theme spacing unit
  */
 type FlexSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-interface FlexBaseProps extends BaseComponent<HTMLDivElement> {
+interface FlexBaseProps extends BaseComponent {
     /**
      * Flex content - any React elements
      */

package/dist/types/components/layout/Grid/Grid.d.ts CHANGED Viewed

@@ -11,7 +11,7 @@ type GridSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
  * 0 = no spacing, 1 = 1x base unit, 2 = 2x base unit, etc.
  */
 type GridSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-interface GridBaseProps extends Omit<BaseComponent<HTMLDivElement>, 'children'> {
+interface GridBaseProps extends Omit<BaseComponent, 'children'> {
     /**
      * Grid content - other Grid components or any React elements
      */

package/dist/types/components/layout/ListItem/ListItem.types.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
-import React from 'react';
 import { BaseComponent } from '../../../types/common.js';
 import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 type ListItemDensity = 'compact' | 'comfortable';
-interface ListItemBaseProps extends Omit<BaseComponent<HTMLDivElement>, 'onClick'> {
+interface ListItemBaseProps extends Omit<BaseComponent, 'onClick'> {
     /** Click handler — when set, the item becomes keyboard-activatable. */
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
     /** Leading content (icon, checkbox, avatar). */

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

@@ -1,6 +1,6 @@
-import React from 'react';
 import { Size, BaseComponent } from '../../../types/common.js';
 import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 type PageHeaderSize = Size;
 interface PageHeaderBaseProps extends Omit<BaseComponent<HTMLElement>, 'title'> {

package/dist/types/components/layout/PanelSurface/PanelSurface.types.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
-import React from 'react';
-import { Prettify } from '../../../types/utilities.js';
 import { Size, BaseComponent } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 type PanelSurfaceSize = Size;
-interface PanelSurfaceBaseProps extends Omit<BaseComponent<HTMLDivElement>, 'children'> {
+interface PanelSurfaceBaseProps extends Omit<BaseComponent, 'children'> {
     /**
      * Panel content. Typically PanelSurface.Header + PanelSurface.Body (+ optional Footer).
      */
@@ -25,7 +25,7 @@ interface PanelSurfaceBaseProps extends Omit<BaseComponent<HTMLDivElement>, 'chi
     background?: string;
 }
 type PanelSurfaceProps = Prettify<PanelSurfaceBaseProps>;
-interface PanelSurfaceHeaderBaseProps extends BaseComponent<HTMLDivElement> {
+interface PanelSurfaceHeaderBaseProps extends BaseComponent {
     /**
      * Header content (title/label section).
      */
@@ -36,7 +36,7 @@ interface PanelSurfaceHeaderBaseProps extends BaseComponent<HTMLDivElement> {
     actions?: React.ReactNode;
 }
 type PanelSurfaceHeaderProps = Prettify<PanelSurfaceHeaderBaseProps>;
-interface PanelSurfaceBodyBaseProps extends BaseComponent<HTMLDivElement> {
+interface PanelSurfaceBodyBaseProps extends BaseComponent {
     /**
      * Main panel content.
      */
@@ -53,7 +53,7 @@ interface PanelSurfaceBodyBaseProps extends BaseComponent<HTMLDivElement> {
     padding?: number | string;
 }
 type PanelSurfaceBodyProps = Prettify<PanelSurfaceBodyBaseProps>;
-interface PanelSurfaceFooterBaseProps extends BaseComponent<HTMLDivElement> {
+interface PanelSurfaceFooterBaseProps extends BaseComponent {
     /**
      * Footer content.
      */

package/dist/types/components/layout/ScrollArea/ScrollArea.types.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Prettify } from '../../../types/utilities.js';
 import { BaseComponent } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 /**
  * Which axes can scroll.

package/dist/types/components/layout/Stack/Stack.d.ts CHANGED Viewed

@@ -22,7 +22,7 @@ type StackAlign = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
  * Spacing multiplier (0-8) based on theme spacing unit
  */
 type StackSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-interface StackBaseProps extends Omit<BaseComponent<HTMLDivElement>, 'children'> {
+interface StackBaseProps extends Omit<BaseComponent, 'children'> {
     /**
      * Stack content - any React elements
      */

package/dist/types/components/navigation/Breadcrumbs/BreadcrumbItem.d.ts CHANGED Viewed

@@ -18,6 +18,7 @@ declare const BreadcrumbItem: React.NamedExoticComponent<{
     isCurrent?: boolean | undefined;
     icon?: React.ReactNode;
     maxLength?: number | undefined;
+    endContent?: React.ReactNode;
     children: React.ReactNode;
     id?: string | undefined | undefined;
     className?: string | undefined | undefined;