@pearpages/pulp-react 0.0.0

package/dist/heading.css

@@ -0,0 +1,30 @@
+/* src/heading/Heading.module.css */
+@layer components {
+  .Heading_heading {
+    margin: 0;
+    font-family: var(--heading-font-family);
+    font-weight: var(--heading-font-weight);
+    line-height: var(--heading-line-height);
+    color: var(--heading-tone-default);
+    text-wrap: balance;
+    &[data-size=sm] {
+      font-size: var(--heading-size-sm);
+    }
+    &[data-size=md] {
+      font-size: var(--heading-size-md);
+    }
+    &[data-size=lg] {
+      font-size: var(--heading-size-lg);
+    }
+    &[data-size=xl] {
+      font-size: var(--heading-size-xl);
+    }
+    &[data-size="2xl"] {
+      font-size: var(--heading-size-2xl);
+    }
+    &[data-tone=muted] {
+      color: var(--heading-tone-muted);
+    }
+  }
+}
+/*# sourceMappingURL=heading.css.map */

package/dist/heading.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/heading/Heading.module.css"],"sourcesContent":["/* Every value is a token (--heading-*). Size is a data attribute, independent of the level. */\n\n@layer components {\n  .heading {\n    margin: 0;\n    font-family: var(--heading-font-family);\n    font-weight: var(--heading-font-weight);\n    line-height: var(--heading-line-height);\n    color: var(--heading-tone-default);\n    text-wrap: balance;\n\n    &[data-size=\"sm\"] { font-size: var(--heading-size-sm); }\n    &[data-size=\"md\"] { font-size: var(--heading-size-md); }\n    &[data-size=\"lg\"] { font-size: var(--heading-size-lg); }\n    &[data-size=\"xl\"] { font-size: var(--heading-size-xl); }\n    &[data-size=\"2xl\"] { font-size: var(--heading-size-2xl); }\n    &[data-tone=\"muted\"] { color: var(--heading-tone-muted); }\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,YAAQ;AACR,iBAAa,IAAI;AACjB,iBAAa,IAAI;AACjB,iBAAa,IAAI;AACjB,WAAO,IAAI;AACX,eAAW;AAEX,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAoB;AACvD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAoB;AACvD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAoB;AACvD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAoB;AACvD,KAAC,CAAC;AAAmB,iBAAW,IAAI;AAAqB;AACzD,KAAC,CAAC;AAAqB,aAAO,IAAI;AAAuB;AAC3D;AACF;","names":["heading"]}

package/dist/heading.d.ts

@@ -0,0 +1,316 @@
+import * as react from 'react';
+import { HTMLAttributes, Ref, ReactNode } from 'react';
+
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type HeadingSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type HeadingTone = 'default' | 'muted';
+interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    /** The document outline level; sets the element (`h1`–`h6`). */
+    level: HeadingLevel;
+    /** Visual size, decoupled from the level. Defaults by level: 1→2xl, 2→xl, 3→lg, 4→md, 5 and 6→sm. */
+    size?: HeadingSize;
+    /** @default 'default' */
+    tone?: HeadingTone;
+    ref?: Ref<HTMLHeadingElement>;
+    children: ReactNode;
+}
+/**
+ * A heading whose outline level and visual size are separate decisions, so
+ * the document structure stays honest while the design stays flexible.
+ * Display family and tight leading from `--heading-*` tokens.
+ *
+ * @status stable
+ * @category Typography
+ * @accessibility Renders the `h1`–`h6` element of `level`; `size` changes only the look, so the outline stays truthful.
+ * @do Pick `level` from the outline, then `size` from the design.
+ * @dont Skip heading levels to get a smaller size; change `size` instead.
+ */
+declare function Heading({ level, size, tone, className, ref, children, ...rest }: HeadingProps): react.DetailedReactHTMLElement<{
+    ref: Ref<HTMLHeadingElement> | undefined;
+    className: string;
+    'data-size': HeadingSize;
+    'data-tone': HeadingTone;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+    autoFocus?: boolean | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    style?: react.CSSProperties | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: react.AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+    popoverTarget?: string | undefined;
+    inert?: boolean | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+    is?: string | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | 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;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: react.ClipboardEventHandler<HTMLHeadingElement> | undefined;
+    onCopyCapture?: react.ClipboardEventHandler<HTMLHeadingElement> | undefined;
+    onCut?: react.ClipboardEventHandler<HTMLHeadingElement> | undefined;
+    onCutCapture?: react.ClipboardEventHandler<HTMLHeadingElement> | undefined;
+    onPaste?: react.ClipboardEventHandler<HTMLHeadingElement> | undefined;
+    onPasteCapture?: react.ClipboardEventHandler<HTMLHeadingElement> | undefined;
+    onCompositionEnd?: react.CompositionEventHandler<HTMLHeadingElement> | undefined;
+    onCompositionEndCapture?: react.CompositionEventHandler<HTMLHeadingElement> | undefined;
+    onCompositionStart?: react.CompositionEventHandler<HTMLHeadingElement> | undefined;
+    onCompositionStartCapture?: react.CompositionEventHandler<HTMLHeadingElement> | undefined;
+    onCompositionUpdate?: react.CompositionEventHandler<HTMLHeadingElement> | undefined;
+    onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLHeadingElement> | undefined;
+    onFocus?: react.FocusEventHandler<HTMLHeadingElement> | undefined;
+    onFocusCapture?: react.FocusEventHandler<HTMLHeadingElement> | undefined;
+    onBlur?: react.FocusEventHandler<HTMLHeadingElement> | undefined;
+    onBlurCapture?: react.FocusEventHandler<HTMLHeadingElement> | undefined;
+    onChange?: react.ChangeEventHandler<HTMLHeadingElement, Element> | undefined;
+    onChangeCapture?: react.ChangeEventHandler<HTMLHeadingElement, Element> | undefined;
+    onBeforeInput?: react.InputEventHandler<HTMLHeadingElement> | undefined;
+    onBeforeInputCapture?: react.InputEventHandler<HTMLHeadingElement> | undefined;
+    onInput?: react.InputEventHandler<HTMLHeadingElement> | undefined;
+    onInputCapture?: react.InputEventHandler<HTMLHeadingElement> | undefined;
+    onReset?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onResetCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSubmit?: react.SubmitEventHandler<HTMLHeadingElement> | undefined;
+    onSubmitCapture?: react.SubmitEventHandler<HTMLHeadingElement> | undefined;
+    onInvalid?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onInvalidCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoad?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onError?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onErrorCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onKeyDown?: react.KeyboardEventHandler<HTMLHeadingElement> | undefined;
+    onKeyDownCapture?: react.KeyboardEventHandler<HTMLHeadingElement> | undefined;
+    onKeyPress?: react.KeyboardEventHandler<HTMLHeadingElement> | undefined;
+    onKeyPressCapture?: react.KeyboardEventHandler<HTMLHeadingElement> | undefined;
+    onKeyUp?: react.KeyboardEventHandler<HTMLHeadingElement> | undefined;
+    onKeyUpCapture?: react.KeyboardEventHandler<HTMLHeadingElement> | undefined;
+    onAbort?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onAbortCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onCanPlay?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onCanPlayCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onCanPlayThrough?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onCanPlayThroughCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onDurationChange?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onDurationChangeCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onEmptied?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onEmptiedCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onEncrypted?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onEncryptedCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onEnded?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onEndedCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadedData?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadedDataCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadedMetadata?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadedMetadataCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadStart?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadStartCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onPause?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onPauseCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onPlay?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onPlayCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onPlaying?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onPlayingCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onProgress?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onProgressCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onRateChange?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onRateChangeCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSeeked?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSeekedCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSeeking?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSeekingCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onStalled?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onStalledCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSuspend?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSuspendCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onTimeUpdate?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onTimeUpdateCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onVolumeChange?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onVolumeChangeCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onWaiting?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onWaitingCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onAuxClick?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onAuxClickCapture?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onClick?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onClickCapture?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onContextMenu?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onContextMenuCapture?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onDoubleClick?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onDoubleClickCapture?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onDrag?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragCapture?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragEnd?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragEndCapture?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragEnter?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragEnterCapture?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragExit?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragExitCapture?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragLeave?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragLeaveCapture?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragOver?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragOverCapture?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragStart?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragStartCapture?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDrop?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDropCapture?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onMouseDown?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseDownCapture?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseEnter?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseLeave?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseMove?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseMoveCapture?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseOut?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseOutCapture?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseOver?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseOverCapture?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseUp?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseUpCapture?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onSelect?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSelectCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onTouchCancel?: react.TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchCancelCapture?: react.TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchEnd?: react.TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchEndCapture?: react.TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchMove?: react.TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchMoveCapture?: react.TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchStart?: react.TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchStartCapture?: react.TouchEventHandler<HTMLHeadingElement> | undefined;
+    onPointerDown?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerDownCapture?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerMove?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerMoveCapture?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerUp?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerUpCapture?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerCancel?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerCancelCapture?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerEnter?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerLeave?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerOver?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerOverCapture?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerOut?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerOutCapture?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onGotPointerCapture?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onLostPointerCapture?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onScroll?: react.UIEventHandler<HTMLHeadingElement> | undefined;
+    onScrollCapture?: react.UIEventHandler<HTMLHeadingElement> | undefined;
+    onScrollEnd?: react.UIEventHandler<HTMLHeadingElement> | undefined;
+    onScrollEndCapture?: react.UIEventHandler<HTMLHeadingElement> | undefined;
+    onWheel?: react.WheelEventHandler<HTMLHeadingElement> | undefined;
+    onWheelCapture?: react.WheelEventHandler<HTMLHeadingElement> | undefined;
+    onAnimationStart?: react.AnimationEventHandler<HTMLHeadingElement> | undefined;
+    onAnimationStartCapture?: react.AnimationEventHandler<HTMLHeadingElement> | undefined;
+    onAnimationEnd?: react.AnimationEventHandler<HTMLHeadingElement> | undefined;
+    onAnimationEndCapture?: react.AnimationEventHandler<HTMLHeadingElement> | undefined;
+    onAnimationIteration?: react.AnimationEventHandler<HTMLHeadingElement> | undefined;
+    onAnimationIterationCapture?: react.AnimationEventHandler<HTMLHeadingElement> | undefined;
+    onToggle?: react.ToggleEventHandler<HTMLHeadingElement> | undefined;
+    onBeforeToggle?: react.ToggleEventHandler<HTMLHeadingElement> | undefined;
+    onTransitionCancel?: react.TransitionEventHandler<HTMLHeadingElement> | undefined;
+    onTransitionCancelCapture?: react.TransitionEventHandler<HTMLHeadingElement> | undefined;
+    onTransitionEnd?: react.TransitionEventHandler<HTMLHeadingElement> | undefined;
+    onTransitionEndCapture?: react.TransitionEventHandler<HTMLHeadingElement> | undefined;
+    onTransitionRun?: react.TransitionEventHandler<HTMLHeadingElement> | undefined;
+    onTransitionRunCapture?: react.TransitionEventHandler<HTMLHeadingElement> | undefined;
+    onTransitionStart?: react.TransitionEventHandler<HTMLHeadingElement> | undefined;
+    onTransitionStartCapture?: react.TransitionEventHandler<HTMLHeadingElement> | undefined;
+}, HTMLHeadingElement>;
+declare namespace Heading {
+    var displayName: string;
+}
+
+export { Heading, type HeadingLevel, type HeadingProps, type HeadingSize, type HeadingTone };

package/dist/heading.js

@@ -0,0 +1,4 @@
+export { Heading } from './chunk-3GWESUGD.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=heading.js.map
+//# sourceMappingURL=heading.js.map

package/dist/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"heading.js"}

package/dist/icon-button.css

@@ -0,0 +1,177 @@
+/* src/icon/Icon.module.css */
+@layer components {
+  .Icon_icon {
+    display: inline-flex;
+    flex: none;
+    inline-size: 1em;
+    block-size: 1em;
+    font-size: var(--icon-size-md);
+    vertical-align: middle;
+    &[data-size=sm] {
+      font-size: var(--icon-size-sm);
+    }
+    &[data-size=lg] {
+      font-size: var(--icon-size-lg);
+    }
+    &[data-size=inherit] {
+      font-size: inherit;
+    }
+    & > * {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+  }
+}
+
+/* src/visually-hidden/VisuallyHidden.module.css */
+@layer components {
+  .VisuallyHidden_root {
+    position: absolute;
+    inline-size: var(--visually-hidden-size);
+    block-size: var(--visually-hidden-size);
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+/* src/spinner/Spinner.module.css */
+@layer components {
+  .Spinner_spinner {
+    --_size: var(--spinner-size-md);
+    --_track: var(--spinner-track);
+    --_indicator: var(--spinner-indicator);
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--_size);
+    block-size: var(--_size);
+    vertical-align: middle;
+    &[data-size=sm] {
+      --_size: var(--spinner-size-sm);
+    }
+    &[data-size=lg] {
+      --_size: var(--spinner-size-lg);
+    }
+    &[data-size=inherit] {
+      --_size: 1em;
+    }
+    &[data-tone=inherit] {
+      --_track: transparent;
+      --_indicator: currentcolor;
+    }
+  }
+  .Spinner_ring {
+    inline-size: 100%;
+    block-size: 100%;
+    border: var(--spinner-width) solid var(--_track);
+    border-block-start-color: var(--_indicator);
+    border-radius: var(--radius-full);
+    animation: Spinner_spin var(--spinner-duration) linear infinite;
+  }
+  @keyframes Spinner_spin {
+    to {
+      rotate: 1turn;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .Spinner_ring {
+      animation: none;
+    }
+  }
+}
+
+/* src/button/Button.module.css */
+@layer components {
+  .Button_button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--button-gap);
+    min-block-size: var(--button-height-md);
+    padding-block: 0;
+    padding-inline: var(--button-padding-inline-md);
+    border: 1px solid transparent;
+    border-radius: var(--button-radius);
+    font-family: var(--button-font-family);
+    font-size: var(--button-font-size-md);
+    font-weight: var(--button-font-weight);
+    line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background-color var(--button-motion-duration) var(--motion-easing-standard),
+      border-color var(--button-motion-duration) var(--motion-easing-standard),
+      color var(--button-motion-duration) var(--motion-easing-standard);
+    &:focus-visible {
+      outline: var(--button-focus-ring-width) solid var(--button-focus-ring);
+      outline-offset: var(--button-focus-ring-offset);
+    }
+    &:disabled,
+    &[aria-disabled=true] {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+    &[data-loading] {
+      cursor: progress;
+    }
+    &[data-size=sm] {
+      min-block-size: var(--button-height-sm);
+      padding-inline: var(--button-padding-inline-sm);
+      font-size: var(--button-font-size-sm);
+    }
+    &[data-size=lg] {
+      min-block-size: var(--button-height-lg);
+      padding-inline: var(--button-padding-inline-lg);
+      font-size: var(--button-font-size-lg);
+    }
+    &[data-variant=primary] {
+      background-color: var(--button-primary-bg);
+      color: var(--button-primary-fg);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-primary-bg-hover);
+      }
+      &:active:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-primary-bg-active);
+      }
+    }
+    &[data-variant=secondary] {
+      background-color: var(--button-secondary-bg);
+      border-color: var(--button-secondary-border);
+      color: var(--button-secondary-fg);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-secondary-bg-hover);
+      }
+    }
+    &[data-variant=ghost] {
+      background-color: transparent;
+      color: var(--button-ghost-fg);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-ghost-bg-hover);
+      }
+    }
+  }
+  .Button_label {
+    display: inline-block;
+  }
+}
+
+/* src/icon-button/IconButton.module.css */
+@layer components {
+  .IconButton_iconButton[data-icon-only] {
+    gap: 0;
+    inline-size: var(--icon-button-size-md);
+    padding-inline: 0;
+    &[data-size=sm] {
+      inline-size: var(--icon-button-size-sm);
+    }
+    &[data-size=lg] {
+      inline-size: var(--icon-button-size-lg);
+    }
+  }
+}
+/*# sourceMappingURL=icon-button.css.map */

package/dist/icon-button.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css","../src/icon-button/IconButton.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer components {\n  .root {\n    position: absolute;\n    inline-size: var(--visually-hidden-size);\n    block-size: var(--visually-hidden-size);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer components {\n  .spinner {\n    --_size: var(--spinner-size-md);\n    --_track: var(--spinner-track);\n    --_indicator: var(--spinner-indicator);\n\n    display: inline-flex;\n    flex: none;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n    &[data-size=\"inherit\"] { --_size: 1em; }\n\n    &[data-tone=\"inherit\"] {\n      --_track: transparent;\n      --_indicator: currentcolor;\n    }\n  }\n\n  .ring {\n    inline-size: 100%;\n    block-size: 100%;\n    border: var(--spinner-width) solid var(--_track);\n    border-block-start-color: var(--_indicator);\n    border-radius: var(--radius-full);\n    animation: spin var(--spinner-duration) linear infinite;\n  }\n\n  @keyframes spin {\n    to {\n      rotate: 1turn;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ring {\n      animation: none;\n    }\n  }\n}\n","/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer components {\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--button-gap);\n    min-block-size: var(--button-height-md);\n    padding-block: 0;\n    padding-inline: var(--button-padding-inline-md);\n    border: 1px solid transparent;\n    border-radius: var(--button-radius);\n    font-family: var(--button-font-family);\n    font-size: var(--button-font-size-md);\n    font-weight: var(--button-font-weight);\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    transition:\n      background-color var(--button-motion-duration) var(--motion-easing-standard),\n      border-color var(--button-motion-duration) var(--motion-easing-standard),\n      color var(--button-motion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n      outline-offset: var(--button-focus-ring-offset);\n    }\n\n    &:disabled,\n    &[aria-disabled=\"true\"] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-loading] {\n      cursor: progress;\n    }\n\n    &[data-size=\"sm\"] {\n      min-block-size: var(--button-height-sm);\n      padding-inline: var(--button-padding-inline-sm);\n      font-size: var(--button-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      min-block-size: var(--button-height-lg);\n      padding-inline: var(--button-padding-inline-lg);\n      font-size: var(--button-font-size-lg);\n    }\n\n    &[data-variant=\"primary\"] {\n      background-color: var(--button-primary-bg);\n      color: var(--button-primary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-hover);\n      }\n\n      &:active:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-active);\n      }\n    }\n\n    &[data-variant=\"secondary\"] {\n      background-color: var(--button-secondary-bg);\n      border-color: var(--button-secondary-border);\n      color: var(--button-secondary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-secondary-bg-hover);\n      }\n    }\n\n    &[data-variant=\"ghost\"] {\n      background-color: transparent;\n      color: var(--button-ghost-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-ghost-bg-hover);\n      }\n    }\n  }\n\n  .label {\n    display: inline-block;\n  }\n}\n","/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer components {\n  .iconButton[data-icon-only] {\n    gap: 0;\n    inline-size: var(--icon-button-size-md);\n    padding-inline: 0;\n\n    &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n    &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n  }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton"]}

package/dist/icon-button.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { ReactNode, ReactElement } from 'react';
+import { ButtonProps } from './button.js';
+
+interface IconButtonProps<E extends HTMLElement = HTMLButtonElement> extends Omit<ButtonProps<E>, 'children' | 'iconStart' | 'iconEnd'> {
+    /** The accessible name. Required: an icon alone is not a name. Also used as the tooltip unless `title` is given. */
+    label: string;
+    /** The glyph, for instance from `@pearpages/pulp-icons`. */
+    icon: ReactNode;
+    /** With `asChild`: the element to render (a link, for instance). Its own children are replaced by the icon. */
+    children?: ReactElement;
+}
+/**
+ * A square Button that shows only an icon and therefore *requires* a name.
+ * Everything else (variants, sizes, loading, asChild) is Button's; the
+ * `--icon-button-size-*` tokens make it square.
+ *
+ * @status stable
+ * @category Actions
+ * @accessibility A Button with `aria-label` from the required `label`; `title` shows it as a tooltip. Everything else is Button's.
+ * @do Write the label as the action ("Close", "Add item").
+ * @dont Use the icon's name as the label.
+ */
+declare function IconButton<E extends HTMLElement = HTMLButtonElement>({ label, icon, title, className, asChild, children, ...rest }: IconButtonProps<E>): react.JSX.Element;
+declare namespace IconButton {
+    var displayName: string;
+}
+
+export { IconButton, type IconButtonProps };

package/dist/icon-button.js

@@ -0,0 +1,9 @@
+export { IconButton } from './chunk-FXRSZUDH.js';
+import './chunk-KPQGS4PG.js';
+import './chunk-I4KC4V6A.js';
+import './chunk-ZVDN3GRI.js';
+import './chunk-Z4PN6B2C.js';
+import './chunk-ASNTNTJW.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=icon-button.js.map
+//# sourceMappingURL=icon-button.js.map

package/dist/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"icon-button.js"}

package/dist/icon.css

@@ -0,0 +1,25 @@
+/* src/icon/Icon.module.css */
+@layer components {
+  .Icon_icon {
+    display: inline-flex;
+    flex: none;
+    inline-size: 1em;
+    block-size: 1em;
+    font-size: var(--icon-size-md);
+    vertical-align: middle;
+    &[data-size=sm] {
+      font-size: var(--icon-size-sm);
+    }
+    &[data-size=lg] {
+      font-size: var(--icon-size-lg);
+    }
+    &[data-size=inherit] {
+      font-size: inherit;
+    }
+    & > * {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+  }
+}
+/*# sourceMappingURL=icon.css.map */

package/dist/icon.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icon/Icon.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,UAAM;AACN,iBAAa;AACb,gBAAY;AACZ,eAAW,IAAI;AACf,oBAAgB;AAEhB,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAuB,iBAAW;AAAS;AAE7C,MAAE,EAAE;AACF,mBAAa;AACb,kBAAY;AACd;AACF;AACF;","names":["icon"]}