@tarsis/toolkit 0.6.5 → 0.7.0

package/dist/index.d.ts

@@ -1,9 +1,8 @@
-import { AnchorHTMLAttributes } from 'react';
 import { ButtonHTMLAttributes } from 'react';
+import { ComponentPropsWithRef } from 'react';
 import { CSSProperties } from 'react';
 import { default as default_2 } from 'react';
 import { DependencyList } from 'react';
-import { DetailedHTMLProps } from 'react';
 import { ElementType } from 'react';
 import { HTMLAttributes } from 'react';
 import { IconType } from 'react-icons';
@@ -14,10 +13,13 @@ import { JSXElementConstructor } from 'react';
 import { MotionValue } from 'motion-dom';
 import { MotionValue as MotionValue_2 } from 'motion/react';
 import { MouseEvent as MouseEvent_2 } from 'react';
+import { OffsetOptions } from '@floating-ui/react';
+import { Placement } from '@floating-ui/react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
 import { Ref } from 'react';
+import { RefCallback } from 'react';
 import { RefObject } from 'react';
 
 export declare const AccentShardCard: () => JSX.Element;
@@ -32,6 +34,8 @@ export declare const AirplaneAnimation: () => JSX.Element;
 
 export declare const AlienSkeuomorphicLoaders: () => JSX.Element;
 
+declare type AnchorControlProps = ComponentPropsWithRef<'a'>;
+
 export declare const AnimatedBlendedCard: () => JSX.Element;
 
 export declare const AnimatedHeroTitle: () => JSX.Element;
@@ -44,6 +48,23 @@ export declare const AnimatedIconsNav: () => JSX.Element;
 
 export declare const AnimatedShareMenu: () => JSX.Element;
 
+/**
+ * JS-accessible animation duration values (in seconds)
+ * for use with GSAP, framer-motion, and Web Animations API.
+ * Source of truth for the CSS var equivalents in global.css.
+ */
+export declare const animationDuration: {
+    readonly fastest: 0.1;
+    readonly fast: 0.15;
+    readonly short: 0.2;
+    readonly medium: 0.3;
+    readonly long: 0.4;
+    readonly slow: 0.5;
+    readonly slowest: 0.8;
+};
+
+export declare type AnimationDurationName = keyof typeof animationDuration;
+
 export declare const animationLogger: BaseLogger;
 
 export declare const ApertureVideo: () => JSX.Element;
@@ -103,6 +124,13 @@ export declare const BorderLink: ({ children, className, ...rest }: Props_50) =>
 
 export declare const BouncyClock: () => JSX.Element;
 
+export declare type BoundedMap<K, V> = ReturnType<typeof createBoundedMap<K, V>>;
+
+export declare type BoundedMapOptions = {
+    maxSize: number;
+    ttlMs?: number;
+};
+
 export declare const BrandCard: ({ children, label, hoverColor, className, contentClassName, }: Props_32) => JSX.Element;
 
 export declare const BreakingProgress: ({ loop }: Props_8) => JSX.Element;
@@ -121,10 +149,38 @@ export declare const BulletsCarousel: () => JSX.Element;
 
 export declare const BurningButton: () => JSX.Element;
 
+export declare const ButtonBase: (props: ButtonBaseRenderProps) => JSX.Element;
+
+export declare type ButtonBaseAsChildProps = ButtonBaseOwnProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBaseOwnProps> & {
+    children: ReactNode;
+    ref?: Ref<HTMLElement>;
+};
+
+declare type ButtonBaseOwnProps = {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    pending?: boolean;
+    disabled?: boolean;
+    style?: CSSProperties;
+    className?: string;
+    asChild?: boolean;
+};
+
+export declare type ButtonBaseProps<E extends ElementType = 'button'> = ButtonBaseOwnProps & Omit<PolymorphicProps<E>, keyof ButtonBaseOwnProps>;
+
+declare type ButtonBaseRenderProps = (ButtonBaseProps<ElementType> | ButtonBaseAsChildProps) & {
+    as?: ElementType;
+    ref?: Ref<HTMLElement>;
+};
+
 export declare const ButtonHoverFill: () => JSX.Element;
 
 export declare const ButtonShimmer: () => JSX.Element;
 
+export declare type ButtonSize = 'sm' | 'md' | 'lg';
+
+export declare type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'unstyled';
+
 export declare const ButtonWithDot: () => JSX.Element;
 
 export declare const CanOfDigits: ({ className, controls, initialValue, }: Props_54) => JSX.Element;
@@ -157,6 +213,28 @@ export declare const ChaseLoader: () => JSX.Element;
 
 export declare const Checkbox: ({ rootClassName, className, inputClassName, ref, }: Props_41) => JSX.Element;
 
+export declare const CheckboxBase: ({ checked: controlledChecked, defaultChecked, indeterminate, onChange, disabled, name, value, className, style, children, ref, inputRef: externalInputRef, inputProps, asChild, ...ariaProps }: CheckboxBaseProps) => JSX.Element;
+
+export declare type CheckboxBaseProps = {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    name?: string;
+    value?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    ref?: Ref<HTMLLabelElement>;
+    inputRef?: Ref<HTMLInputElement>;
+    inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'disabled' | 'name' | 'value'>;
+    /** Render the root as the provided child element instead of `<label>`. */
+    asChild?: boolean;
+};
+
 export declare const ChequeredCard: () => JSX.Element;
 
 export declare const Chips: () => JSX.Element;
@@ -183,10 +261,29 @@ export declare const ClickButtonParticles: () => JSX.Element;
 
 export declare const ClickSpark: () => JSX.Element;
 
+export declare const Cluster: ({ gap, justify, align, asChild, className, style, children, ref, ...rest }: ClusterProps) => JSX.Element;
+
+export declare type ClusterProps = {
+    gap?: string;
+    justify?: 'start' | 'center' | 'end' | 'between';
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    asChild?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    ref?: Ref<HTMLElement>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
+
 export declare const CollapseAnimation: () => JSX.Element;
 
 export declare const ColorfulButtons: () => JSX.Element;
 
+export declare type ColorValidationResult = {
+    valid: boolean;
+    missing: SemanticVar[];
+    present: SemanticVar[];
+};
+
 export declare const ComingSoonBadge: () => JSX.Element;
 
 export declare const ComplexGradient: () => JSX.Element;
@@ -197,12 +294,45 @@ export declare const ConfettiButton: ({ className, onClick, children, ...props }
 
 declare type Constructor<T> = new (...args: any[]) => T;
 
+export declare const Container: ({ maxWidth, padding, asChild, className, style, children, ref, ...rest }: ContainerProps) => JSX.Element;
+
+export declare type ContainerProps = {
+    maxWidth?: string;
+    padding?: string;
+    asChild?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    ref?: Ref<HTMLElement>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
+
 export declare const ContrastBackgroundText: () => JSX.Element;
 
 export declare const Counter: () => JSX.Element;
 
 export declare const CoverFlowGallery: () => JSX.Element;
 
+/**
+ * LRU map with optional TTL. Evicts least-recently-used entries
+ * when maxSize is exceeded, and expired entries on access.
+ */
+export declare function createBoundedMap<K, V>(options: BoundedMapOptions): {
+    get(key: K): V | undefined;
+    has(key: K): boolean;
+    set(key: K, value: V): void;
+    delete(key: K): boolean;
+    clear(): void;
+    readonly size: number;
+};
+
+/**
+ * Create standardized enter/exit motion variants using toolkit tokens.
+ * Returns `{ initial, animate, exit }` for framer-motion / motion.
+ */
+export declare const createPresenceVariants: (enter: Record<string, unknown>, exit: Record<string, unknown>, duration?: number, easingCurve?: readonly [number, number, number, number]) => PresenceVariants;
+
+export declare type CssVarRef = `var(--${string})`;
+
 export declare const CubeLoader: () => JSX.Element;
 
 export declare const CurtainRevealMenu: () => JSX.Element;
@@ -231,6 +361,23 @@ export declare const DialControl: ({ limit }: Props_45) => JSX.Element;
 
 export declare const DialFuturistic: () => JSX.Element;
 
+export declare const DialogBase: ({ open, onClose, children, className, overlayClassName, style, ref: externalRef, closeOnOverlayClick, closeOnEscape, ...ariaProps }: DialogBaseProps) => JSX.Element;
+
+export declare type DialogBaseProps = {
+    open: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    className?: string;
+    overlayClassName?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLDialogElement>;
+    closeOnOverlayClick?: boolean;
+    closeOnEscape?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+};
+
 export declare const DissolveElementEffect: ({ children, duration, maxScale, className, onTrigger, trigger, }: Props_13) => JSX.Element;
 
 /**
@@ -398,6 +545,28 @@ export declare const DynamicIconButton: () => JSX.Element;
 
 export declare const DynamicIsland: ({ position }: Props_2) => JSX.Element;
 
+/**
+ * Cubic-bezier tuples for programmatic use.
+ * CSS equivalents live in global.css --ease-* vars.
+ */
+export declare const easing: {
+    readonly linear: readonly [0, 0, 1, 1];
+    readonly ease: readonly [0.25, 0.1, 0.25, 1];
+    readonly easeIn: readonly [0.42, 0, 1, 1];
+    readonly easeOut: readonly [0, 0, 0.58, 1];
+    readonly easeInOut: readonly [0.42, 0, 0.58, 1];
+    readonly easeInOutCubic: readonly [0.4, 0, 0.2, 1];
+    readonly easeOutCubic: readonly [0.215, 0.61, 0.355, 1];
+    readonly easeOutQuad: readonly [0.25, 0.46, 0.45, 0.94];
+    readonly easeInOutQuad: readonly [0.455, 0.03, 0.515, 0.955];
+    readonly easeInQuart: readonly [0.5, 0, 0.75, 0];
+    readonly easeOutQuart: readonly [0.25, 1, 0.5, 1];
+    readonly easeInOutQuart: readonly [0.76, 0, 0.24, 1];
+    readonly easeOutExpo: readonly [0.16, 1, 0.3, 1];
+};
+
+export declare type EasingName = keyof typeof easing;
+
 export declare const EchoClickButton: () => JSX.Element;
 
 export declare const ElasticCursor: () => JSX.Element;
@@ -431,6 +600,8 @@ declare type ExpansionProps = InteractiveElementProps & {
 
 declare type ExternalDockMotionItemSignature = (props: Omit<Props_46, 'mouseX'> & Use) => JSX_2.Element;
 
+export declare const fadePresence: PresenceVariants;
+
 export declare const FadeUp: ({ children, delay, duration, once, }: {
     children: ReactNode;
     delay?: number;
@@ -456,6 +627,67 @@ export declare const FluidGooeyTextBackground: () => JSX.Element;
 
 export declare const FootprintButton: () => JSX.Element;
 
+/**
+ * Formats seconds into MM:SS display string.
+ */
+export declare function formatDuration(totalSeconds: number): string;
+
+/**
+ * Formats milliseconds into MM:SS.ms display string.
+ * Useful for timers and stopwatches.
+ */
+export declare function formatTime(totalMs: number): string;
+
+export declare const FormField: (({ children, className, style, id, hasError, hasHint, }: FormFieldProps) => JSX.Element) & {
+    Label: ({ children, className }: FormFieldLabelProps) => JSX.Element;
+    Control: ({ children }: FormFieldControlProps) => JSX.Element;
+    Error: ({ children, className }: FormFieldErrorProps) => JSX.Element | null;
+    Hint: ({ children, className }: FormFieldHintProps) => JSX.Element | null;
+};
+
+declare type FormFieldAria = {
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+    'aria-errormessage'?: string;
+    id: string;
+};
+
+declare type FormFieldControlProps = {
+    children: (props: UseFormFieldReturn['fieldProps']) => ReactNode;
+};
+
+declare type FormFieldErrorProps = {
+    children: ReactNode;
+    className?: string;
+};
+
+declare type FormFieldHintProps = {
+    children: ReactNode;
+    className?: string;
+};
+
+export declare type FormFieldIds = {
+    fieldId: string;
+    labelId: string;
+    errorId: string;
+    hintId: string;
+    descriptionId: string;
+};
+
+declare type FormFieldLabelProps = {
+    children: ReactNode;
+    className?: string;
+};
+
+export declare type FormFieldProps = {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    id?: string;
+    hasError?: boolean;
+    hasHint?: boolean;
+};
+
 export declare const ForwardArrowLink: () => JSX.Element;
 
 export declare const FullScreenImageCarousel: () => JSX.Element;
@@ -470,6 +702,12 @@ export declare const getCurrentLogLevel: () => LogLevel;
 
 export declare function getPath(x: number, smoothing: number): string;
 
+/**
+ * Extract the CSS custom property name from a var() reference.
+ * `'var(--space-4)'` -> `'--space-4'`
+ */
+export declare const getVarName: (token: CssVarRef) => string;
+
 export declare const GlassIcon: () => JSX.Element;
 
 export declare const GlassMusicPlayer: ({ title, artist, imageUrl, variant, onPlay, onFastForward, className, children, }: Props_62) => JSX.Element;
@@ -489,7 +727,7 @@ export declare const GlidingReveal: () => JSX.Element;
 
 export declare const GlitterCard: () => JSX.Element;
 
-export declare const GlowButton: ({ children, className, type, ref, ...rest }: Props_24) => JSX.Element;
+export declare const GlowButton: ({ children, className, ref, ...rest }: Props_24) => JSX.Element;
 
 export declare const GlowingDropdown: () => JSX.Element;
 
@@ -529,6 +767,20 @@ export declare const GridHover: () => JSX.Element;
 
 export declare const GridViewTransition: () => JSX.Element;
 
+declare type GsapCallable = (...args: unknown[]) => unknown;
+
+declare type GsapCleanup = () => void;
+
+export declare type GsapContextLike = {
+    add(methodName: string, func: GsapCallable, scope?: Element | string | object): GsapCallable;
+    add<T extends GsapCallable>(func: T, scope?: Element | string | object): ReturnType<T>;
+    ignore(func: GsapCallable): void;
+    kill(revert?: boolean): void;
+    revert(config?: object): void;
+    clear(): void;
+    isReverted: boolean;
+};
+
 export declare const HamburgerMusic: () => JSX.Element;
 
 export declare const HamburgerX: ({ isOpen, onClick }: Props_47) => JSX.Element;
@@ -563,6 +815,28 @@ export declare const IndeterminateCheckboxes: () => JSX.Element;
 
 export declare const InfiniteLoader: () => JSX.Element;
 
+export declare const InputBase: ({ label, error, hint, prefix, suffix, disabled, className, wrapperClassName, style, ref, id: externalId, asChild, children, ...inputProps }: InputBaseProps & {
+    children?: ReactNode;
+}) => JSX.Element;
+
+export declare type InputBaseProps = {
+    label?: ReactNode;
+    error?: ReactNode;
+    hint?: ReactNode;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+    wrapperClassName?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLInputElement>;
+    id?: string;
+    /** Render the control slot as the provided child element instead of `<input>`. */
+    asChild?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'prefix'>;
+
+declare type InputControlProps = ComponentPropsWithRef<'input'>;
+
 export declare const InputFirework: () => JSX.Element;
 
 declare type Interaction = 'possible' | 'impossible';
@@ -657,6 +931,8 @@ export declare const MagneticButton: () => JSX.Element;
 
 export declare const MagnifiedNavItems: () => JSX.Element;
 
+export declare function mergeRefs<T>(...refs: PossibleRef<T>[]): RefCallback<T>;
+
 export declare const MetalCircleController: () => JSX.Element;
 
 export declare const MinimalisticAccordion: ({ summary, children, defaultOpen, onToggle, className, }: Props_15) => JSX.Element;
@@ -703,6 +979,12 @@ export declare const NoisyButton: () => JSX.Element;
 
 export declare const noop: (..._args: unknown[]) => void;
 
+/**
+ * Normalises unknown thrown values into proper Error instances.
+ * Preserves original Error objects; wraps strings and unknowns.
+ */
+export declare function normalizeError(err: unknown): Error;
+
 export declare const NotificationBell: () => JSX.Element;
 
 export declare const notReachable: (arg: never) => never;
@@ -731,7 +1013,7 @@ export declare const PieLoader: () => JSX.Element;
 
 export declare const PinDropdown: () => JSX.Element;
 
-declare type Placement = 'top' | 'bottom' | 'left' | 'right';
+declare type Placement_2 = 'top' | 'bottom' | 'left' | 'right';
 
 export declare const PlayPauseButton: () => JSX.Element;
 
@@ -739,10 +1021,47 @@ export declare const PlayPauseMusicButton: () => JSX.Element;
 
 export declare const PolaroidStack: () => JSX.Element;
 
+declare type PolymorphicOwnProps<E extends ElementType> = {
+    as?: E;
+};
+
+declare type PolymorphicProps<E extends ElementType> = PolymorphicOwnProps<E> & Omit<ComponentPropsWithRef<E>, keyof PolymorphicOwnProps<E>>;
+
+export declare const PopoverBase: ({ open, onOpenChange, trigger, children, placement, offsetValue, className, style, triggerRef: externalTriggerRef, ...ariaProps }: PopoverBaseProps) => JSX.Element;
+
+export declare type PopoverBaseProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    trigger: ReactNode;
+    children: ReactNode;
+    placement?: Placement;
+    offsetValue?: OffsetOptions;
+    className?: string;
+    style?: CSSProperties;
+    triggerRef?: Ref<HTMLElement>;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+};
+
+export declare const Portal: ({ children, container }: PortalProps) => ReactPortal | null;
+
+export declare type PortalProps = {
+    children: ReactNode;
+    container?: HTMLElement | null;
+};
+
 export declare const PositionHover: () => JSX.Element;
 
+declare type PossibleRef<T> = Ref<T> | undefined | null;
+
 export declare const PredictionButton: () => JSX.Element;
 
+export declare type PresenceVariants = {
+    initial: Record<string, unknown>;
+    animate: Record<string, unknown>;
+    exit: Record<string, unknown>;
+};
+
 export declare const ProductTile: ({ children, onClick, className, }: Props_38) => JSX.Element;
 
 export declare const ProfileCard: () => JSX.Element;
@@ -803,13 +1122,17 @@ declare type Props_16 = {
     className?: string;
 };
 
-declare type Props_17 = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+declare type Props_17 = ButtonBaseProps<ElementType> & {
+    ref?: Ref<HTMLElement>;
+};
 
 declare type Props_18 = {
     className?: string;
 };
 
-declare type Props_19 = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+declare type Props_19 = Omit<ButtonBaseProps<ElementType>, 'variant'> & {
+    ref?: Ref<HTMLElement>;
+};
 
 declare type Props_2 = {
     position?: 'static' | 'fixed';
@@ -821,32 +1144,35 @@ declare type Props_20 = {
     children?: ReactNode;
 };
 
-declare interface Props_21 extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+declare type Props_21 = ButtonBaseProps<ElementType> & {
     children?: ReactNode;
-    className?: string;
-}
+    ref?: Ref<HTMLElement>;
+};
 
 declare type Props_22 = {
     onClick?: VoidFunction;
     children?: ReactNode;
 };
 
-declare interface Props_23 extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
-    children?: ReactNode;
+declare type Props_23 = ButtonBaseProps<ElementType> & {
     alternativeChildren?: ReactNode;
-    className?: string;
-}
+    ref?: Ref<HTMLElement>;
+};
 
-declare type Props_24 = ButtonHTMLAttributes<HTMLButtonElement> & {
-    ref?: Ref<HTMLButtonElement>;
+declare type Props_24 = ButtonBaseProps<ElementType> & {
+    ref?: Ref<HTMLElement>;
 };
 
-declare type Props_25 = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+declare type Props_25 = ButtonBaseProps<ElementType> & {
+    ref?: Ref<HTMLElement>;
+};
 
-declare type Props_26 = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+declare type Props_26 = ButtonBaseProps<ElementType> & {
+    ref?: Ref<HTMLElement>;
+};
 
-declare type Props_27 = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
-    className?: string;
+declare type Props_27 = ButtonBaseProps<ElementType> & {
+    ref?: Ref<HTMLElement>;
 };
 
 declare type Props_28 = {
@@ -862,7 +1188,9 @@ declare type Props_3 = {
     className?: string;
 };
 
-declare type Props_30 = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+declare type Props_30 = ButtonBaseProps<ElementType> & {
+    ref?: Ref<HTMLElement>;
+};
 
 declare type Props_31 = {
     onClick?: (e: MouseEvent_2<HTMLButtonElement>) => void;
@@ -935,7 +1263,7 @@ declare type Props_40 = {
     children?: ReactElement<any> | ReactElement<any>[];
 };
 
-declare type Props_41 = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
+declare type Props_41 = InputControlProps & {
     rootClassName?: string;
     className?: string;
     inputClassName?: string;
@@ -989,15 +1317,15 @@ declare type Props_5 = {
     isVertical?: boolean;
 };
 
-declare type Props_50 = DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+declare type Props_50 = AnchorControlProps;
 
-declare type Props_51 = DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+declare type Props_51 = AnchorControlProps;
 
-declare interface Props_52 extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
+declare interface Props_52 extends AnchorControlProps {
     href: string;
 }
 
-declare interface Props_53 extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
+declare interface Props_53 extends AnchorControlProps {
     href: string;
 }
 
@@ -1061,7 +1389,7 @@ declare type Props_62 = {
     children?: ReactNode;
 };
 
-declare type Props_63 = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
+declare type Props_63 = InputControlProps & {
     className?: string;
 };
 
@@ -1166,6 +1494,21 @@ export declare const RegularLink: ({ children, href, className, target, rel, ref
 
 export declare const RepostButton: () => JSX.Element;
 
+/**
+ * All semantic CSS custom property names that must be defined per theme.
+ * Used for CI/test validation to assert theme completeness.
+ */
+export declare const REQUIRED_SEMANTIC_VARS: readonly ["--color-surface-canvas", "--color-surface-raised", "--color-surface-elevated", "--color-surface-overlay", "--color-surface-inverse", "--color-surface-disabled", "--color-text-primary", "--color-text-secondary", "--color-text-tertiary", "--color-text-inverse", "--color-text-disabled", "--color-border-muted", "--color-border-subtle", "--color-border-strong", "--color-accent-primary", "--color-accent-primary-muted", "--color-accent-primary-emphasis", "--color-accent-success", "--color-accent-success-emphasis", "--color-accent-warning", "--color-accent-warning-emphasis", "--color-accent-danger", "--color-accent-danger-emphasis", "--color-accent-highlight", "--color-accent-highlight-emphasis", "--color-focus-ring", "--color-bg"];
+
+export declare type ResolvedTheme = 'light' | 'dark';
+
+/**
+ * Resolve the computed value of a CSS variable token at runtime.
+ * Checks `document.body` first so semantic theme tokens resolve from the
+ * same element they are defined on, then falls back to `document.documentElement`.
+ */
+export declare const resolveToken: (token: CssVarRef, element?: Element) => string;
+
 export declare const RevealImageAnimation: () => JSX.Element;
 
 export declare const RhombusGallery: () => JSX.Element;
@@ -1180,6 +1523,8 @@ export declare const RubberButton: () => JSX.Element;
 
 export declare const RunningButton: () => JSX.Element;
 
+export declare const scalePresence: PresenceVariants;
+
 export declare const SchrodingerFormControls: () => JSX.Element;
 
 export declare const ScrambledText: ({ children, reveal }: Props_69) => JSX.Element;
@@ -1206,6 +1551,31 @@ export declare const SegmentedControls: ({ activeId, options, onChange, isVertic
 
 export declare const SegmentedToggle: () => JSX.Element;
 
+export declare const SelectBase: <V extends string = string>({ options, value: controlledValue, defaultValue, onChange, placeholder, disabled, name, className, style, ref, ...ariaProps }: SelectBaseProps<V>) => JSX.Element;
+
+export declare type SelectBaseProps<V extends string = string> = {
+    options: SelectOption<V>[];
+    value?: V;
+    defaultValue?: V;
+    onChange?: (value: V) => void;
+    placeholder?: ReactNode;
+    disabled?: boolean;
+    name?: string;
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLDivElement>;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+};
+
+export declare type SelectOption<V extends string = string> = {
+    value: V;
+    label: ReactNode;
+    disabled?: boolean;
+};
+
+export declare type SemanticVar = (typeof REQUIRED_SEMANTIC_VARS)[number];
+
 export declare const setLogLevel: (level: LogLevel) => void;
 
 export declare const setRequestId: (id: string) => void;
@@ -1265,8 +1635,12 @@ declare enum SlideDirection {
     RIGHT = "right"
 }
 
+export declare const slideDownPresence: PresenceVariants;
+
 export declare const SlideIn: ({ children, direction, delay }: Props_9) => JSX.Element;
 
+export declare const slideUpPresence: PresenceVariants;
+
 export declare const SlidingButton: () => JSX.Element;
 
 export declare const SlidingIcon: () => JSX.Element;
@@ -1275,6 +1649,20 @@ export declare const SlidingImages: () => JSX.Element;
 
 export declare const SlidingStepper: () => JSX.Element;
 
+export declare const Slot: ({ children, ref, ...slotProps }: SlotProps) => ReactElement<unknown, string | JSXElementConstructor<any>> | null;
+
+export declare type SlotProps = HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    ref?: Ref<HTMLElement>;
+};
+
+declare const Slottable_2: ({ children }: SlottableProps) => JSX.Element;
+export { Slottable_2 as Slottable }
+
+export declare type SlottableProps = {
+    children: ReactNode;
+};
+
 export declare const SmileyPreloader: () => JSX.Element;
 
 export declare const SmokeTextDisappearance: ({ children }: Props_10) => JSX.Element;
@@ -1297,12 +1685,73 @@ export declare const SpiralLoadingText: ({ text, className }: Props_72) => JSX.E
 
 export declare const SplashCursor: ({ onClick }: Props_44) => JSX.Element;
 
+/**
+ * Standardised spring presets for framer-motion / react-spring.
+ * Usage: <motion.div transition={springPreset.bouncy} />
+ */
+export declare const springPreset: {
+    readonly stiff: {
+        readonly type: "spring";
+        readonly stiffness: 400;
+        readonly damping: 30;
+        readonly mass: 1;
+    };
+    readonly bouncy: {
+        readonly type: "spring";
+        readonly stiffness: 300;
+        readonly damping: 15;
+        readonly mass: 1;
+    };
+    readonly gentle: {
+        readonly type: "spring";
+        readonly stiffness: 150;
+        readonly damping: 20;
+        readonly mass: 1;
+    };
+    readonly snappy: {
+        readonly type: "spring";
+        readonly stiffness: 500;
+        readonly damping: 35;
+        readonly mass: 0.8;
+    };
+    readonly slow: {
+        readonly type: "spring";
+        readonly stiffness: 100;
+        readonly damping: 20;
+        readonly mass: 1.5;
+    };
+};
+
+export declare type SpringPresetName = keyof typeof springPreset;
+
 export declare const SquircleAvatar: () => JSX.Element;
 
 export declare const SquishButton: ({ children, className, ...rest }: Props_30) => JSX.Element;
 
+export declare const Stack: ({ gap, align, divider, asChild, className, style, children, ref, ...rest }: StackProps) => JSX.Element;
+
 export declare const StackingCards: () => JSX.Element;
 
+export declare type StackProps = {
+    gap?: string;
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    divider?: ReactNode;
+    asChild?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    ref?: Ref<HTMLElement>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
+
+export declare const staggerDelay = 0.03;
+
+/**
+ * Wrapper around the View Transitions API.
+ * Uses `document.startViewTransition` when available (Chrome 111+, Safari 18+),
+ * falls back to calling the callback directly on unsupported browsers.
+ */
+export declare const startViewTransition: (callback: () => void | Promise<void>) => ViewTransitionReturn;
+
 export declare const StaticSolarEclipse: () => JSX.Element;
 
 export declare const StickyHeader: () => JSX.Element;
@@ -1327,6 +1776,31 @@ export declare const SuccessLoader: ({ status }: Props_58) => JSX.Element;
 
 export declare const SuccessLoadingButton: ({ onClick, onSuccess, children, className, disabled, }: Props_31) => JSX.Element;
 
+/**
+ * Check if the View Transitions API is supported in the current browser.
+ */
+export declare const supportsViewTransitions: () => boolean;
+
+export declare const SwitchBase: ({ checked: controlledChecked, defaultChecked, onChange, disabled, name, value, className, style, children, ref, inputProps, asChild, ...ariaProps }: SwitchBaseProps) => JSX.Element;
+
+export declare type SwitchBaseProps = {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    name?: string;
+    value?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    ref?: Ref<HTMLLabelElement>;
+    inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role' | 'checked' | 'disabled' | 'name' | 'value'>;
+    /** Render the root as the provided child element instead of `<label>`. */
+    asChild?: boolean;
+};
+
 /**
  * TabBarAnimation Component
  *
@@ -1358,6 +1832,25 @@ export declare const ThanosDisappearEffectList: () => JSX.Element;
 
 export declare const ThanosDissolve: ({ images, duration, maxScale, className, onDelete, }: Props_12) => JSX.Element;
 
+declare type ThemeContextValue = {
+    mode: ThemeMode;
+    resolvedTheme: ResolvedTheme;
+    setMode: (mode: ThemeMode) => void;
+    toggleTheme: () => void;
+};
+
+export declare type ThemeMode = 'light' | 'dark' | 'system';
+
+export declare const ThemeProvider: ({ children, defaultMode, mode: controlledMode, onModeChange, storageKey, }: ThemeProviderProps) => JSX.Element;
+
+export declare type ThemeProviderProps = {
+    children: ReactNode;
+    defaultMode?: ThemeMode;
+    mode?: ThemeMode;
+    onModeChange?: (mode: ThemeMode) => void;
+    storageKey?: string;
+};
+
 export declare const ThreadsLikeButton: () => JSX.Element;
 
 export declare const ThreeDotsLoader: () => JSX.Element;
@@ -1385,6 +1878,325 @@ export declare const ToggleBubble: () => JSX.Element;
 
 export declare const ToggleClipPath: () => JSX.Element;
 
+export declare const Token: {
+    readonly color: {
+        readonly black: "var(--color-black)";
+        readonly white: "var(--color-white)";
+        readonly accent1: "var(--color-accent1)";
+        readonly accent2: "var(--color-accent2)";
+        readonly accent3: "var(--color-accent3)";
+        readonly accentGreen: "var(--color-accent-green)";
+        readonly accentGreen1: "var(--color-accent-green1)";
+        readonly surfaceCanvas: "var(--color-surface-canvas)";
+        readonly surfaceRaised: "var(--color-surface-raised)";
+        readonly surfaceElevated: "var(--color-surface-elevated)";
+        readonly surfaceOverlay: "var(--color-surface-overlay)";
+        readonly surfaceInverse: "var(--color-surface-inverse)";
+        readonly surfaceDisabled: "var(--color-surface-disabled)";
+        readonly textPrimary: "var(--color-text-primary)";
+        readonly textSecondary: "var(--color-text-secondary)";
+        readonly textTertiary: "var(--color-text-tertiary)";
+        readonly textInverse: "var(--color-text-inverse)";
+        readonly textDisabled: "var(--color-text-disabled)";
+        readonly borderMuted: "var(--color-border-muted)";
+        readonly borderSubtle: "var(--color-border-subtle)";
+        readonly borderStrong: "var(--color-border-strong)";
+        readonly accentPrimary: "var(--color-accent-primary)";
+        readonly accentPrimaryMuted: "var(--color-accent-primary-muted)";
+        readonly accentPrimaryEmphasis: "var(--color-accent-primary-emphasis)";
+        readonly accentSuccess: "var(--color-accent-success)";
+        readonly accentSuccessEmphasis: "var(--color-accent-success-emphasis)";
+        readonly accentWarning: "var(--color-accent-warning)";
+        readonly accentWarningEmphasis: "var(--color-accent-warning-emphasis)";
+        readonly accentDanger: "var(--color-accent-danger)";
+        readonly accentDangerEmphasis: "var(--color-accent-danger-emphasis)";
+        readonly accentHighlight: "var(--color-accent-highlight)";
+        readonly accentHighlightEmphasis: "var(--color-accent-highlight-emphasis)";
+        readonly focusRing: "var(--color-focus-ring)";
+        readonly bg: "var(--color-bg)";
+        readonly gray1: "var(--color-gray1)";
+        readonly gray2: "var(--color-gray2)";
+        readonly gray3: "var(--color-gray3)";
+        readonly gray4: "var(--color-gray4)";
+        readonly gray5: "var(--color-gray5)";
+        readonly gray6: "var(--color-gray6)";
+        readonly gray7: "var(--color-gray7)";
+        readonly gray8: "var(--color-gray8)";
+        readonly gray9: "var(--color-gray9)";
+        readonly gray10: "var(--color-gray10)";
+        readonly gray11: "var(--color-gray11)";
+        readonly gray12: "var(--color-gray12)";
+        readonly grayA1: "var(--color-grayA1)";
+        readonly grayA2: "var(--color-grayA2)";
+        readonly grayA3: "var(--color-grayA3)";
+        readonly grayA4: "var(--color-grayA4)";
+        readonly grayA5: "var(--color-grayA5)";
+        readonly grayA6: "var(--color-grayA6)";
+        readonly grayA7: "var(--color-grayA7)";
+        readonly grayA8: "var(--color-grayA8)";
+        readonly grayA9: "var(--color-grayA9)";
+        readonly grayA10: "var(--color-grayA10)";
+        readonly grayA11: "var(--color-grayA11)";
+        readonly grayA12: "var(--color-grayA12)";
+        readonly blue1: "var(--color-blue1)";
+        readonly blue2: "var(--color-blue2)";
+        readonly blue3: "var(--color-blue3)";
+        readonly blue4: "var(--color-blue4)";
+        readonly blue5: "var(--color-blue5)";
+        readonly blue6: "var(--color-blue6)";
+        readonly blue7: "var(--color-blue7)";
+        readonly blue8: "var(--color-blue8)";
+        readonly blue9: "var(--color-blue9)";
+        readonly blue10: "var(--color-blue10)";
+        readonly blue11: "var(--color-blue11)";
+        readonly blue12: "var(--color-blue12)";
+        readonly green1: "var(--color-green1)";
+        readonly green2: "var(--color-green2)";
+        readonly green3: "var(--color-green3)";
+        readonly green4: "var(--color-green4)";
+        readonly green5: "var(--color-green5)";
+        readonly green6: "var(--color-green6)";
+        readonly green7: "var(--color-green7)";
+        readonly green8: "var(--color-green8)";
+        readonly green9: "var(--color-green9)";
+        readonly green10: "var(--color-green10)";
+        readonly green11: "var(--color-green11)";
+        readonly green12: "var(--color-green12)";
+        readonly amber1: "var(--color-amber1)";
+        readonly amber2: "var(--color-amber2)";
+        readonly amber3: "var(--color-amber3)";
+        readonly amber4: "var(--color-amber4)";
+        readonly amber5: "var(--color-amber5)";
+        readonly amber6: "var(--color-amber6)";
+        readonly amber7: "var(--color-amber7)";
+        readonly amber8: "var(--color-amber8)";
+        readonly amber9: "var(--color-amber9)";
+        readonly amber10: "var(--color-amber10)";
+        readonly amber11: "var(--color-amber11)";
+        readonly amber12: "var(--color-amber12)";
+        readonly purple1: "var(--color-purple1)";
+        readonly purple2: "var(--color-purple2)";
+        readonly purple3: "var(--color-purple3)";
+        readonly purple4: "var(--color-purple4)";
+        readonly purple5: "var(--color-purple5)";
+        readonly purple6: "var(--color-purple6)";
+        readonly purple7: "var(--color-purple7)";
+        readonly purple8: "var(--color-purple8)";
+        readonly purple9: "var(--color-purple9)";
+        readonly purple10: "var(--color-purple10)";
+        readonly purple11: "var(--color-purple11)";
+        readonly purple12: "var(--color-purple12)";
+        readonly red1: "var(--color-red1)";
+        readonly red2: "var(--color-red2)";
+        readonly red3: "var(--color-red3)";
+        readonly red4: "var(--color-red4)";
+        readonly red5: "var(--color-red5)";
+        readonly red6: "var(--color-red6)";
+        readonly red7: "var(--color-red7)";
+        readonly red8: "var(--color-red8)";
+        readonly red9: "var(--color-red9)";
+        readonly red10: "var(--color-red10)";
+        readonly red11: "var(--color-red11)";
+        readonly red12: "var(--color-red12)";
+    };
+    readonly space: {
+        readonly s1: "var(--space-1)";
+        readonly s2: "var(--space-2)";
+        readonly s3: "var(--space-3)";
+        readonly s4: "var(--space-4)";
+        readonly s5: "var(--space-5)";
+        readonly s6: "var(--space-6)";
+        readonly s7: "var(--space-7)";
+        readonly s8: "var(--space-8)";
+        readonly s9: "var(--space-9)";
+        readonly s10: "var(--space-10)";
+        readonly s11: "var(--space-11)";
+        readonly s12: "var(--space-12)";
+        readonly s13: "var(--space-13)";
+        readonly s14: "var(--space-14)";
+        readonly s15: "var(--space-15)";
+        readonly xs: "var(--space-xs)";
+        readonly sm: "var(--space-sm)";
+        readonly md: "var(--space-md)";
+        readonly lg: "var(--space-lg)";
+        readonly xl: "var(--space-xl)";
+        readonly '2xl': "var(--space-2xl)";
+        readonly '3xl': "var(--space-3xl)";
+    };
+    readonly radius: {
+        readonly r1: "var(--radius-1)";
+        readonly r2: "var(--radius-2)";
+        readonly r3: "var(--radius-3)";
+        readonly r4: "var(--radius-4)";
+        readonly r5: "var(--radius-5)";
+        readonly r6: "var(--radius-6)";
+        readonly r7: "var(--radius-7)";
+        readonly xs: "var(--radius-xs)";
+        readonly sm: "var(--radius-sm)";
+        readonly md: "var(--radius-md)";
+        readonly lg: "var(--radius-lg)";
+        readonly xl: "var(--radius-xl)";
+        readonly round: "var(--radius-round)";
+        readonly pill: "var(--radius-pill)";
+    };
+    readonly shadow: {
+        readonly sm: "var(--shadow-sm)";
+        readonly md: "var(--shadow-md)";
+        readonly lg: "var(--shadow-lg)";
+        readonly raised: "var(--shadow-raised)";
+        readonly overlay: "var(--shadow-overlay)";
+    };
+    readonly font: {
+        readonly fancy: "var(--font-fancy)";
+        readonly body: "var(--font-body)";
+        readonly numeric: "var(--font-numeric)";
+    };
+    readonly fontSize: {
+        readonly f1: "var(--font-size-1)";
+        readonly f2: "var(--font-size-2)";
+        readonly f3: "var(--font-size-3)";
+        readonly f4: "var(--font-size-4)";
+        readonly f5: "var(--font-size-5)";
+        readonly f6: "var(--font-size-6)";
+        readonly f7: "var(--font-size-7)";
+    };
+    readonly fontWeight: {
+        readonly regular: "var(--font-weight-regular)";
+        readonly medium: "var(--font-weight-medium)";
+        readonly semibold: "var(--font-weight-semibold)";
+        readonly bold: "var(--font-weight-bold)";
+    };
+    readonly lineHeight: {
+        readonly tight: "var(--line-height-tight)";
+        readonly snug: "var(--line-height-snug)";
+        readonly body: "var(--line-height-body)";
+        readonly loose: "var(--line-height-loose)";
+    };
+    readonly letterSpacing: {
+        readonly tight: "var(--letter-spacing-tight)";
+        readonly normal: "var(--letter-spacing-normal)";
+        readonly wide: "var(--letter-spacing-wide)";
+    };
+    readonly duration: {
+        readonly fastest: "var(--duration-fastest)";
+        readonly fast: "var(--duration-fast)";
+        readonly normal: "var(--duration-normal)";
+        readonly slow: "var(--duration-slow)";
+        readonly slowest: "var(--duration-slowest)";
+    };
+    readonly easing: {
+        readonly snappy: "var(--easing-snappy)";
+        readonly inQuad: "var(--ease-in-quad)";
+        readonly inCubic: "var(--ease-in-cubic)";
+        readonly inQuart: "var(--ease-in-quart)";
+        readonly inQuint: "var(--ease-in-quint)";
+        readonly inExpo: "var(--ease-in-expo)";
+        readonly inCirc: "var(--ease-in-circ)";
+        readonly outQuad: "var(--ease-out-quad)";
+        readonly outCubic: "var(--ease-out-cubic)";
+        readonly outQuart: "var(--ease-out-quart)";
+        readonly outQuint: "var(--ease-out-quint)";
+        readonly outExpo: "var(--ease-out-expo)";
+        readonly outCirc: "var(--ease-out-circ)";
+        readonly inOutQuad: "var(--ease-in-out-quad)";
+        readonly inOutCubic: "var(--ease-in-out-cubic)";
+        readonly inOutQuart: "var(--ease-in-out-quart)";
+        readonly inOutQuint: "var(--ease-in-out-quint)";
+        readonly inOutExpo: "var(--ease-in-out-expo)";
+        readonly inOutCirc: "var(--ease-in-out-circ)";
+    };
+    readonly transition: {
+        readonly all: "var(--transition-all)";
+        readonly shadow: "var(--transition-shadow)";
+        readonly colors: "var(--transition-colors)";
+        readonly background: "var(--transition-background)";
+        readonly border: "var(--transition-border)";
+        readonly opacity: "var(--transition-opacity)";
+        readonly transform: "var(--transition-transform)";
+    };
+    readonly colorChannel: {
+        readonly accent: "var(--color-channel-accent)";
+        readonly success: "var(--color-channel-success)";
+        readonly danger: "var(--color-channel-danger)";
+        readonly warning: "var(--color-channel-warning)";
+        readonly highlight: "var(--color-channel-highlight)";
+        readonly white: "var(--color-channel-white)";
+        readonly black: "var(--color-channel-black)";
+    };
+    readonly effectChannel: {
+        readonly accent: "var(--effect-channel-accent)";
+        readonly danger: "var(--effect-channel-danger)";
+        readonly focusOutline: "var(--effect-channel-focus-outline)";
+        readonly glass: "var(--effect-channel-glass)";
+        readonly highlight: "var(--effect-channel-highlight)";
+        readonly shadow: "var(--effect-channel-shadow)";
+    };
+    readonly effect: {
+        readonly accentRingSoft: "var(--effect-accent-ring-soft)";
+        readonly focusOutline: "var(--effect-focus-outline)";
+        readonly focusOutlineHighlight: "var(--effect-focus-outline-highlight)";
+        readonly focusShadowAccent: "var(--effect-focus-shadow-accent)";
+        readonly focusShadowHighlight: "var(--effect-focus-shadow-highlight)";
+        readonly glassBorder: "var(--effect-glass-border)";
+        readonly glassBorderSoft: "var(--effect-glass-border-soft)";
+        readonly glassRing: "var(--effect-glass-ring)";
+        readonly glassShadowDepth: "var(--effect-glass-shadow-depth)";
+        readonly glassShadowSoft: "var(--effect-glass-shadow-soft)";
+        readonly glassShell: "var(--effect-glass-shell)";
+        readonly glassSurface: "var(--effect-glass-surface)";
+        readonly glowBorder: "var(--effect-glow-border)";
+        readonly glowCool: "var(--effect-glow-cool)";
+        readonly glowOutline: "var(--effect-glow-outline)";
+        readonly glowSheenEnd: "var(--effect-glow-sheen-end)";
+        readonly glowSheenStart: "var(--effect-glow-sheen-start)";
+        readonly glowVeil: "var(--effect-glow-veil)";
+        readonly glowWarm: "var(--effect-glow-warm)";
+        readonly glossLineFaint: "var(--effect-gloss-line-faint)";
+        readonly glossLineMedium: "var(--effect-gloss-line-medium)";
+        readonly glossLineSoft: "var(--effect-gloss-line-soft)";
+        readonly glossLineStrong: "var(--effect-gloss-line-strong)";
+        readonly highlightTrail: "var(--effect-highlight-trail)";
+        readonly overlayScrim: "var(--effect-overlay-scrim)";
+        readonly selectionAccent: "var(--effect-selection-accent)";
+        readonly shadowFaint: "var(--effect-shadow-faint)";
+        readonly shadowInteractive: "var(--effect-shadow-interactive)";
+        readonly shadowMuted: "var(--effect-shadow-muted)";
+        readonly shadowSoft: "var(--effect-shadow-soft)";
+        readonly shadowStrong: "var(--effect-shadow-strong)";
+        readonly thumbShadow: "var(--effect-thumb-shadow)";
+        readonly tooltipSurface: "var(--effect-tooltip-surface)";
+    };
+    readonly utils: {
+        readonly opacity: (channel: string, value: number | string) => string;
+    };
+    readonly textStyle: {
+        readonly heading1: "var(--text-heading-1)";
+        readonly heading2: "var(--text-heading-2)";
+        readonly heading3: "var(--text-heading-3)";
+        readonly body: "var(--text-body)";
+        readonly bodyEmphasis: "var(--text-body-emphasis)";
+        readonly small: "var(--text-small)";
+        readonly caption: "var(--text-caption)";
+    };
+    readonly zIndex: {
+        readonly n1: "var(--z-index-n1)";
+        readonly z0: "var(--z-index-0)";
+        readonly z1: "var(--z-index-1)";
+        readonly z2: "var(--z-index-2)";
+        readonly z3: "var(--z-index-3)";
+        readonly z4: "var(--z-index-4)";
+        readonly z5: "var(--z-index-5)";
+        readonly max: "var(--z-index-max)";
+    };
+    readonly breakpoint: {
+        readonly sm: "var(--breakpoint-sm)";
+        readonly md: "var(--breakpoint-md)";
+        readonly lg: "var(--breakpoint-lg)";
+        readonly xl: "var(--breakpoint-xl)";
+    };
+    readonly focusRingWidth: "var(--focus-ring-width)";
+};
+
 declare type ToolbarButton = {
     icon: IconType;
     onClick?: VoidFunction;
@@ -1392,6 +2204,21 @@ declare type ToolbarButton = {
 
 export declare const Tooltip: ({ children, label, delay, className, placement, offset: offsetValue, animate, disableOnClick, variant, }: TooltipProps) => JSX.Element;
 
+export declare const TooltipBase: ({ content, children, placement, delayMs, closeDelayMs, open: controlledOpen, onOpenChange: controlledOnOpenChange, className, style, triggerRef: externalTriggerRef, }: TooltipBaseProps) => JSX.Element;
+
+export declare type TooltipBaseProps = {
+    content: ReactNode;
+    children: ReactNode;
+    placement?: Placement;
+    delayMs?: number;
+    closeDelayMs?: number;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+    style?: CSSProperties;
+    triggerRef?: Ref<HTMLElement>;
+};
+
 declare type TooltipOptions = {
     delay?: number;
     animate?: boolean;
@@ -1402,7 +2229,7 @@ export declare interface TooltipProps {
     label: ReactNode;
     delay?: number;
     className?: string;
-    placement?: Placement;
+    placement?: Placement_2;
     offset?: number;
     animate?: boolean;
     disableOnClick?: boolean;
@@ -1448,6 +2275,8 @@ declare interface UseBowserResult {
     isChrome: boolean;
 }
 
+export declare function useControllableState<T>(controlledValue: T | undefined, defaultValue: T, onChange?: (value: T) => void): [T, (next: T | ((prev: T) => T)) => void];
+
 /**
  * Custom hook that debounces a callback function to delay its execution until after
  * a specified wait time has elapsed since the last time it was invoked.
@@ -1512,6 +2341,39 @@ export declare function useEffectEvent<TArgs extends any[], TReturn>(callback: (
 
 export declare function useEffectEvent<TArgs extends any[], TReturn>(callback: ((...args: TArgs) => TReturn) | undefined): (...args: TArgs) => TReturn | undefined;
 
+export declare function useFormField(options?: UseFormFieldOptions): UseFormFieldReturn;
+
+export declare function useFormFieldContext(): UseFormFieldReturn;
+
+export declare type UseFormFieldOptions = {
+    id?: string;
+    hasError?: boolean;
+    hasHint?: boolean;
+};
+
+export declare type UseFormFieldReturn = {
+    ids: FormFieldIds;
+    labelProps: {
+        htmlFor: string;
+        id: string;
+    };
+    fieldProps: FormFieldAria;
+    errorProps: {
+        id: string;
+        role: 'alert';
+    };
+    hintProps: {
+        id: string;
+    };
+};
+
+/**
+ * Creates a GSAP context scoped to the given ref.
+ * All animations created inside the callback are automatically
+ * reverted on unmount — preventing DOM leak bugs.
+ */
+export declare function useGsapContext(scope: RefObject<HTMLElement | null>, callback: (ctx: GsapContextLike) => void | GsapCleanup, deps?: unknown[]): RefObject<GsapContextLike | null>;
+
 /**
  * Custom hook that manages an interval with automatic cleanup.
  * Provides a reliable way to handle intervals that are properly cleaned up
@@ -1541,6 +2403,8 @@ export declare const useLiveRef: <T>(value: T) => RefObject<T>;
 
 export declare const useMatchMedia: (query: string) => boolean | null;
 
+export declare function useMergeRefs<T>(...refs: PossibleRef<T>[]): RefCallback<T>;
+
 export declare const useOklch: () => void;
 
 /**
@@ -1594,6 +2458,10 @@ export declare const usePreviousState: <T>(value: T) => T | undefined;
  */
 export declare const useRaf: (callback: VoidFunction, enabled?: boolean) => VoidFunction;
 
+export declare function useReducedMotion(): boolean;
+
+export declare function useTheme(): ThemeContextValue;
+
 /**
  * Custom hook that throttles a callback function to limit how often it can be invoked.
  *
@@ -1650,12 +2518,30 @@ export declare const useWindowReady: () => boolean;
 
 export declare const utilsLogger: BaseLogger;
 
+/**
+ * Validate that all required semantic CSS variables are defined
+ * on the given element (defaults to `document.body`).
+ */
+export declare const validateColorScheme: (element?: Element) => ColorValidationResult;
+
 export declare const values: <T extends Record<string | number | symbol, any>>(input: T) => Array<T[keyof T]>;
 
 export declare const ViewTransitionAddToCard: () => JSX.Element;
 
 export declare const ViewTransitionImageGallery: () => JSX.Element;
 
+export declare type ViewTransitionReturn = {
+    finished: Promise<void>;
+    ready: Promise<void>;
+    updateCallbackDone: Promise<void>;
+};
+
+export declare const VisuallyHidden: ({ children, style, ...props }: VisuallyHiddenProps) => JSX.Element;
+
+export declare type VisuallyHiddenProps = HTMLAttributes<HTMLSpanElement> & {
+    children: ReactNode;
+};
+
 export declare const VoiceAnimation: () => JSX.Element;
 
 export declare const wait: (ms: number) => Promise<unknown>;