@ansh-ui/react 0.2.0

package/dist/layout.d.ts

@@ -0,0 +1,169 @@
+import * as react from 'react';
+import { HTMLAttributes, ElementType, ReactNode, CSSProperties } from 'react';
+export { A as AppShell, a as AppShellProps, N as NavItem, b as NavSection, S as Sidebar, c as SidebarProps } from './sidebar-D-PafAXw.js';
+
+/**
+ * Layout primitives.
+ *
+ * These exist because every application rebuilds them, badly. The rebuilt versions hardcode gaps in
+ * pixels, so they don't respond to a density setting; they use margins, so they collapse
+ * unpredictably; and they don't handle the RTL case.
+ *
+ * Everything here takes a **token key**, not a raw value: `gap={4}` means `--ansh-space-4`, so a
+ * layout is guaranteed to sit on the spacing scale. Passing an arbitrary string is still possible
+ * for the genuine one-off, but the type nudges toward the scale first.
+ */
+/** A key into the spacing scale, or a raw CSS length for the rare exception. */
+type SpaceToken = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | (string & {});
+interface BaseProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    children?: ReactNode;
+}
+interface StackProps extends BaseProps {
+    /** Default `'vertical'` — the direction that needs a helper more often. */
+    direction?: 'horizontal' | 'vertical';
+    gap?: SpaceToken;
+    align?: CSSProperties['alignItems'];
+    justify?: CSSProperties['justifyContent'];
+    wrap?: boolean;
+    /** Grow to fill the cross axis. */
+    stretch?: boolean;
+    /** Insert a hairline divider between children. */
+    divide?: boolean;
+}
+/**
+ * One-dimensional flex layout.
+ *
+ * ```tsx
+ * <Stack direction="horizontal" gap={3} align="center">
+ *   <Avatar src={user.avatar} name={user.name} />
+ *   <Stack gap={0.5}>
+ *     <strong>{user.name}</strong>
+ *     <Text tone="secondary">{user.email}</Text>
+ *   </Stack>
+ * </Stack>
+ * ```
+ */
+declare const Stack: react.ForwardRefExoticComponent<StackProps & react.RefAttributes<HTMLElement>>;
+/** Horizontal `Stack`, for readability at call sites. */
+declare const HStack: react.ForwardRefExoticComponent<StackProps & react.RefAttributes<HTMLElement>>;
+/** Vertical `Stack`, for symmetry with `HStack`. */
+declare const VStack: react.ForwardRefExoticComponent<StackProps & react.RefAttributes<HTMLElement>>;
+interface GridProps extends BaseProps {
+    /** Fixed column count, or `'auto'` for a responsive `auto-fill` track. */
+    columns?: number | 'auto';
+    /** Minimum column width when `columns="auto"`. Default `'16rem'`. */
+    minColumnWidth?: string;
+    gap?: SpaceToken;
+    /** Row gap, when it should differ from the column gap. */
+    rowGap?: SpaceToken;
+    align?: CSSProperties['alignItems'];
+}
+/**
+ * Two-dimensional layout.
+ *
+ * `columns="auto"` uses `repeat(auto-fill, minmax(min(N, 100%), 1fr))`. The inner `min()` is what
+ * stops the grid overflowing on a phone: without it, a 16rem minimum on a 15rem-wide viewport
+ * produces a track wider than the screen and a horizontal scrollbar.
+ */
+declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLElement>>;
+interface GridItemProps extends BaseProps {
+    /** Columns to span. `'full'` spans the whole row. */
+    span?: number | 'full';
+    rowSpan?: number;
+}
+declare const GridItem: react.ForwardRefExoticComponent<GridItemProps & react.RefAttributes<HTMLElement>>;
+interface ContainerProps extends BaseProps {
+    /** Max content width. Default `'lg'` (72rem). */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Horizontal padding. Default `6`. */
+    padding?: SpaceToken;
+}
+/** Centred, width-constrained page content. */
+declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLElement>>;
+interface DividerProps extends Omit<BaseProps, 'children'> {
+    orientation?: 'horizontal' | 'vertical';
+    /** Optional label rendered in the middle of the rule. */
+    label?: ReactNode;
+}
+/**
+ * A rule.
+ *
+ * With a label it becomes a labelled separator — the "or continue with" divider on a sign-in form.
+ * `role="separator"` is set only when there's no label; with one, it's a heading-like element and
+ * announcing it as a separator loses the text.
+ */
+declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
+interface SpacerProps {
+    size?: SpaceToken;
+    /** Grow to absorb free space in a flex container. */
+    grow?: boolean;
+}
+/** Explicit empty space. `grow` pushes siblings apart in a flex row. */
+declare function Spacer({ size, grow }: SpacerProps): react.JSX.Element;
+/** Centre a child on both axes. */
+declare const Center: react.ForwardRefExoticComponent<BaseProps & react.RefAttributes<HTMLElement>>;
+interface AspectRatioProps extends BaseProps {
+    /** Width ÷ height. `16 / 9` reads better than `1.777`. Default `16 / 9`. */
+    ratio?: number;
+}
+/**
+ * Reserve space at a fixed aspect ratio.
+ *
+ * Uses the `aspect-ratio` property rather than the padding-top hack. The reserved space is what
+ * matters: an image that loads without it shifts everything below, which is a Cumulative Layout
+ * Shift penalty and the most common cause of a failing Core Web Vitals score.
+ */
+declare const AspectRatio: react.ForwardRefExoticComponent<AspectRatioProps & react.RefAttributes<HTMLElement>>;
+interface ScrollAreaProps extends BaseProps {
+    /** Max height before scrolling starts. */
+    maxHeight?: string;
+    axis?: 'y' | 'x' | 'both';
+    /** Fade the content at the scrollable edges. Default `true`. */
+    fade?: boolean;
+}
+/**
+ * A scroll container with styled scrollbars and edge fades.
+ *
+ * The native scrollbar is kept — a JavaScript-rendered one breaks keyboard scrolling, mobile
+ * momentum, and the OS "scroll bar is always visible" accessibility setting. It is only *styled*,
+ * via `scrollbar-width`/`scrollbar-color` with a `::-webkit-scrollbar` fallback.
+ *
+ * The edge fade is a mask that appears only when there is more content in that direction. It is
+ * driven by `animation-timeline: scroll()` where supported, so it costs nothing on the main thread
+ * and degrades to no fade where it isn't.
+ */
+declare const ScrollArea: react.ForwardRefExoticComponent<ScrollAreaProps & react.RefAttributes<HTMLElement>>;
+
+interface ResizableProps {
+    /** Exactly two children: the two panes. */
+    children: [ReactNode, ReactNode];
+    direction?: 'horizontal' | 'vertical';
+    /** First pane's size as a percentage, `0`–`100`. Default `50`. */
+    defaultSize?: number;
+    size?: number;
+    onSizeChange?: (size: number) => void;
+    /** Clamp, as percentages. Defaults `10` and `90`. */
+    minSize?: number;
+    maxSize?: number;
+    /** Snap points in percent, e.g. `[25, 50, 75]`. Within 3% the handle snaps. */
+    snapPoints?: readonly number[];
+    className?: string;
+    /** Accessible name for the handle — "Resize sidebar", not "Resize". */
+    label?: string;
+}
+/**
+ * A two-pane split with a draggable divider.
+ *
+ * The layout every IDE, mail client and admin console needs, and the one most often shipped as
+ * mouse-only. The handle here is a real `role="separator"` with `aria-valuenow`, and arrow keys
+ * move it in 2% steps — WAI-ARIA calls this a window splitter and it is a documented pattern, not
+ * an invention.
+ *
+ * Sizes are percentages rather than pixels so the split survives a window resize proportionally.
+ * Dragging writes to a CSS custom property directly, bypassing React: a re-render per pointer move
+ * makes the drag feel heavy on a complex page, and the value is only committed to state on release.
+ */
+declare function Resizable({ children, direction, defaultSize, size, onSizeChange, minSize, maxSize, snapPoints, className, label, }: ResizableProps): react.JSX.Element;
+
+export { AspectRatio, type AspectRatioProps, Center, Container, type ContainerProps, Divider, type DividerProps, Grid, GridItem, type GridItemProps, type GridProps, HStack, Resizable, type ResizableProps, ScrollArea, type ScrollAreaProps, type SpaceToken, Spacer, type SpacerProps, Stack, type StackProps, VStack };

package/dist/layout.js

@@ -0,0 +1,7 @@
+'use client';
+export { AspectRatio, Center, Container, Divider, Grid, GridItem, HStack, Resizable, ScrollArea, Spacer, Stack, VStack } from './chunk-EGG4CP7C.js';
+export { AppShell, Sidebar } from './chunk-5CFQFMP5.js';
+import './chunk-LXCIXR5T.js';
+import './chunk-H34OXXJU.js';
+//# sourceMappingURL=layout.js.map
+//# sourceMappingURL=layout.js.map

package/dist/layout.js.map

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

package/dist/motion-CQmCq6_k.d.ts

@@ -0,0 +1,395 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties, ElementType, ForwardRefExoticComponent, ComponentPropsWithoutRef, RefAttributes } from 'react';
+import * as _ansh_ui_core from '@ansh-ui/core';
+import { EasingInput, SpringOptions, springs, StaggerFrom, resolvePalette, BaseBehaviourOptions, BehaviourDefinition, ReducedMotionMode } from '@ansh-ui/core';
+import './use-observers-B9qtimrk.js';
+
+/**
+ * Declarative motion.
+ *
+ * A deliberately **small** subset of what a full motion library does: transform properties and
+ * opacity, animated from `initial` to `animate`, plus hover and press states and an exit animation
+ * when paired with `AnimatePresence`.
+ *
+ * That scope is a decision, not a gap. Layout animation (FLIP), shared-element transitions and
+ * variant propagation each need machinery an order of magnitude larger than this file, and a
+ * half-implementation of them is worse than none — it works in the demo and fails on the real page.
+ * For those, use a dedicated library; for the 90% case of "fade this in, slide that up, spring the
+ * card on hover", this costs a fraction of the bundle.
+ *
+ * Values are written straight to the element's `style` from the ticker's write phase. React never
+ * re-renders during an animation.
+ */
+interface MotionValues {
+    opacity?: number;
+    x?: number;
+    y?: number;
+    scale?: number;
+    scaleX?: number;
+    scaleY?: number;
+    rotate?: number;
+    /** Blur radius in px. */
+    blur?: number;
+}
+interface MotionTransition {
+    /** Seconds. Ignored when `spring` is set. Default `0.4`. */
+    duration?: number;
+    /** Seconds to wait. Default `0`. */
+    delay?: number;
+    easing?: EasingInput;
+    /** Use a spring instead of a tween. `true` uses the `smooth` preset. */
+    spring?: boolean | SpringOptions | keyof typeof springs;
+}
+type MotionElementProps = {
+    as?: ElementType;
+    /** Starting values. Applied before the first paint. */
+    initial?: MotionValues;
+    /** Target values. Changing these animates to the new target. */
+    animate?: MotionValues;
+    /** Values to animate to when removed by `AnimatePresence`. */
+    exit?: MotionValues;
+    transition?: MotionTransition;
+    whileHover?: MotionValues;
+    whileTap?: MotionValues;
+    /** Animate to `animate` only once scrolled into view. */
+    whileInView?: boolean;
+    /** Fraction visible before `whileInView` triggers. Default `0.2`. */
+    inViewAmount?: number;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+};
+/**
+ * An animated element.
+ *
+ * ```tsx
+ * <Motion initial={{ opacity: 0, y: 24 }} animate={{ opacity: 1, y: 0 }} whileInView>
+ *   <Card />
+ * </Motion>
+ * ```
+ */
+declare function Motion({ as: Component, initial, animate: target, exit: _exit, transition, whileHover, whileTap, whileInView, inViewAmount, className, style, children, ...rest }: MotionElementProps & Record<string, unknown>): react.JSX.Element;
+interface AnimatePresenceProps {
+    children: ReactNode;
+    /** Seconds to keep a removed child mounted. Default `0.35`. */
+    exitDuration?: number;
+}
+/**
+ * Keep removed children mounted long enough to animate out.
+ *
+ * React unmounts immediately when a child disappears from the tree, so an exit animation never gets
+ * a chance to run. This holds departing children in its own state, plays their `exit` values, then
+ * drops them.
+ *
+ * Children **must** have stable `key`s — that is how removals are detected at all. Without keys,
+ * React reuses element positions and this sees no removal to animate.
+ */
+declare function AnimatePresence({ children, exitDuration }: AnimatePresenceProps): react.JSX.Element;
+interface DraggableProps {
+    /** Constrain movement. */
+    axis?: 'x' | 'y' | 'both';
+    /** Bounds relative to the starting position, in px. */
+    bounds?: {
+        left?: number;
+        right?: number;
+        top?: number;
+        bottom?: number;
+    };
+    /** Spring back to the origin on release. */
+    snapBack?: boolean;
+    /** Carry momentum after release. Default `true` when not snapping back. */
+    momentum?: boolean;
+    onDragStart?: () => void;
+    onDragEnd?: (offset: {
+        x: number;
+        y: number;
+    }) => void;
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+}
+/**
+ * A draggable surface with inertia.
+ *
+ * The momentum on release is what separates a drag that feels physical from one that stops dead.
+ * Velocity is measured over the last few pointer samples rather than the last two — a single pair
+ * of events is dominated by whatever jitter the final sample had, which produces a flick in the
+ * wrong direction often enough to be noticeable.
+ */
+declare function Draggable({ axis, bounds, snapBack, momentum, onDragStart, onDragEnd, className, style, children, }: DraggableProps): react.JSX.Element;
+
+interface GradientTextProps {
+    children: string;
+    /** Any number of colours, or a built-in palette name. */
+    colors?: readonly string[] | Parameters<typeof resolvePalette>[0];
+    /** Gradient angle in degrees. Default `100`. */
+    angle?: number;
+    /** Seconds for one full cycle. `0` holds a static gradient. Default `0` (static). */
+    duration?: number;
+    /** Interpolated stops handed to CSS. More is smoother. Default `16`. */
+    stops?: number;
+    as?: ElementType;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Text filled with a perceptual gradient.
+ *
+ * Uses `background-clip: text`, and the stops are generated through the OKLab interpolator rather
+ * than handed to CSS as two endpoints. That is the whole point: a CSS
+ * `linear-gradient(#0275f4, #9f0550)` passes through a desaturated grey-brown at its midpoint,
+ * which on text — where the gradient crosses a narrow band — is exactly where the eye lands.
+ *
+ * Animation is a CSS `background-position` shift rather than a JS loop, because for a single
+ * property with no interaction the browser's own compositor is strictly better than anything we
+ * could do on the main thread.
+ */
+declare function GradientText({ children, colors, angle, duration, stops, as: Component, className, style, }: GradientTextProps): react.JSX.Element;
+interface AnimatedTextProps {
+    children: string;
+    /** Split granularity. Default `'chars'`. */
+    by?: 'chars' | 'words';
+    /** Seconds per unit's animation. Default `0.6`. */
+    duration?: number;
+    /** Seconds between units. Default `0.03`. */
+    each?: number;
+    /** Where the reveal wave begins. Default `'first'`. */
+    from?: StaggerFrom;
+    easing?: EasingInput;
+    /** Distance each unit travels into place, in pixels. Default `18`. */
+    distance?: number;
+    /** Starting blur in pixels — the "focus in" look. Default `0`. */
+    blur?: number;
+    /** Starting rotation in degrees. Default `0`. */
+    rotate?: number;
+    /** Clip each unit so it rises from behind a mask. Default `false`. */
+    mask?: boolean;
+    /** Wait until scrolled into view. Default `true`. */
+    whenInView?: boolean;
+    /** Replay every time it re-enters the viewport. Default `false`. */
+    repeat?: boolean;
+    /** Seconds to wait before starting. Default `0`. */
+    delay?: number;
+    as?: ElementType;
+    className?: string;
+    style?: React.CSSProperties;
+    onComplete?: () => void;
+}
+/**
+ * Text that reveals unit by unit.
+ *
+ * The split happens in React (so the markup is server-rendered and present in the HTML source for
+ * SEO and for no-JS readers) while the animation runs on the shared ticker (so a page full of these
+ * shares one clock and cannot drift).
+ *
+ * Under `prefers-reduced-motion` the text renders in its final state immediately — no hidden
+ * frame, no fade.
+ */
+declare function AnimatedText({ children, by, duration, each, from, easing, distance, blur, rotate, mask, whenInView, repeat, delay, as: Component, className, style, onComplete, }: AnimatedTextProps): react.JSX.Element;
+
+/**
+ * Turn a {@link BehaviourDefinition} into a React component.
+ *
+ * The DOM counterpart of {@link import('./create-effect-component').createEffectComponent}. The
+ * difference in the API is deliberate and small: a behaviour component renders its children
+ * *directly* rather than wrapping them in a positioned layer, because a behaviour manipulates the
+ * host element itself and inserting a wrapper would break the author's layout.
+ *
+ * ```tsx
+ * export const MagneticButton = createBehaviourComponent(magnetic, 'MagneticButton', 'button')
+ * ```
+ */
+interface BehaviourComponentBaseProps {
+    as?: ElementType;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+}
+type BehaviourComponentProps<Options extends BaseBehaviourOptions> = Options & BehaviourComponentBaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof Options | 'style' | 'className' | 'children'> & 
+/**
+ * Attributes that only make sense on the elements `as` is actually used with.
+ *
+ * `as="a"` without this is a type error on `href`, which makes the prop useless for the case it
+ * exists for — turning a magnetic button into a link. Full polymorphic typing (`as` as a generic
+ * that rewrites the whole prop set) is the textbook answer and it collapses inference for every
+ * behaviour option in the intersection, producing error messages nobody can read. Naming the two
+ * element types `as` is realistically pointed at is the trade that keeps both working.
+ */
+Partial<Pick<ComponentPropsWithoutRef<'a'>, 'href' | 'target' | 'rel' | 'download'>> & Partial<Pick<ComponentPropsWithoutRef<'button'>, 'type' | 'disabled' | 'form' | 'name' | 'value'>>;
+/** The type of a component produced by {@link createBehaviourComponent}. */
+type BehaviourComponent<Options extends BaseBehaviourOptions, El extends HTMLElement = HTMLElement> = ForwardRefExoticComponent<BehaviourComponentProps<Options> & RefAttributes<El>>;
+declare function createBehaviourComponent<Options extends BaseBehaviourOptions, El extends HTMLElement = HTMLElement>(definition: BehaviourDefinition<Options, El>, displayName?: string, defaultElement?: ElementType): BehaviourComponent<Options, El>;
+/**
+ * Attach a behaviour to an element you already have a ref to.
+ *
+ * The hook form, for when a component's own element must carry the behaviour rather than being
+ * wrapped — which is most of the time when integrating with an existing design system.
+ *
+ * ```tsx
+ * const ref = useRef<HTMLButtonElement>(null)
+ * useBehaviour(ref, magnetic, { strength: 16 })
+ * ```
+ */
+declare function useBehaviour<Options extends BaseBehaviourOptions, El extends HTMLElement>(ref: React.RefObject<El | null>, definition: BehaviourDefinition<Options, El>, options?: Partial<Options>): void;
+
+interface MotionConfigValue {
+    reducedMotion: ReducedMotionMode;
+    /** Global playback rate. `0.5` is slow motion across every animation on the page. */
+    timeScale: number;
+    /** Pin adaptive quality, or `null` to let the frame budget decide. */
+    quality: number | null;
+}
+interface MotionConfigProps extends Partial<MotionConfigValue> {
+    /**
+     * Pause every animation while the document is hidden. Default `true`.
+     *
+     * Leave this on. Animating a background tab burns battery and spins fans for output nobody can
+     * see, and it is the most common performance complaint about animation-heavy sites.
+     */
+    pauseWhenHidden?: boolean;
+    /** Also pause when the window loses focus. Default `false` — a visible unfocused window still
+     * expects to animate. */
+    pauseWhenBlurred?: boolean;
+    /** Reduce quality on low battery where the platform exposes it. Default `true`. */
+    respectBattery?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Application-level motion configuration.
+ *
+ * Optional — every component works without it. Mount it once at the root when you need
+ * app-wide control:
+ *
+ * ```tsx
+ * <MotionConfig reducedMotion={userPrefersCalm ? 'always' : 'auto'}>
+ *   <App />
+ * </MotionConfig>
+ * ```
+ *
+ * `reducedMotion="always"` is genuinely useful in production, as the backing for an in-app
+ * "reduce motion" setting — many users who want calmer interfaces have never found the OS toggle.
+ */
+declare function MotionConfig({ reducedMotion, timeScale, quality, pauseWhenHidden, pauseWhenBlurred, respectBattery, children, }: MotionConfigProps): react.JSX.Element;
+/** Read the nearest {@link MotionConfig}. Returns sensible defaults with no provider present. */
+declare function useMotionConfig(): MotionConfigValue;
+type ThemeSetting = 'light' | 'dark' | 'system';
+interface ThemeContextValue {
+    /** What was requested, including `'system'`. */
+    theme: ThemeSetting;
+    /** What is actually rendering. `'system'` is resolved to one or the other. */
+    resolved: 'light' | 'dark';
+    setTheme: (theme: ThemeSetting) => void;
+}
+interface ThemeProviderProps {
+    /** Initial setting. Default `'system'`. */
+    defaultTheme?: ThemeSetting;
+    /** Persist the choice under this `localStorage` key. Pass `null` to disable. Default `'ansh-theme'`. */
+    storageKey?: string | null;
+    children?: ReactNode;
+}
+/**
+ * Theme control over the `@ansh-ui/tokens` stylesheet.
+ *
+ * Sets `data-theme` on `<html>`, which the token stylesheet already understands. Two details that
+ * are easy to get wrong and are handled here:
+ *
+ * **`'system'` removes the attribute rather than writing a resolved value.** The token stylesheet
+ * guards its `prefers-color-scheme` rule with `:root:not([data-theme])`, so removing the attribute
+ * hands control back to the OS — and, importantly, means the theme keeps following the OS if the
+ * user changes it while the page is open.
+ *
+ * **The initial render always reports `'light'`.** Reading `localStorage` during render would be a
+ * hydration mismatch, since the server has no access to it. The stored value is applied in an
+ * effect. To avoid a flash of the wrong theme, ship the small inline script from
+ * {@link themeScript} in your document `<head>` — that is the only way to set the attribute before
+ * first paint, and it is what every correct implementation does.
+ */
+declare function ThemeProvider({ defaultTheme, storageKey, children, }: ThemeProviderProps): react.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+/**
+ * The blocking script that prevents a theme flash.
+ *
+ * Inject this in `<head>`, before any stylesheet. It reads the stored preference and sets
+ * `data-theme` synchronously, before the browser paints — which is the only point at which it can
+ * be done without a visible flash. It is deliberately tiny and dependency-free.
+ *
+ * ```tsx
+ * // Next.js app/layout.tsx
+ * <head>
+ *   <script dangerouslySetInnerHTML={{ __html: themeScript() }} />
+ * </head>
+ * ```
+ */
+declare function themeScript(storageKey?: string): string;
+
+/**
+ * DOM behaviour components.
+ *
+ * Unlike the canvas backgrounds these render their children directly — no wrapper, no positioned
+ * layer — because a behaviour manipulates the host element and inserting a wrapper would break the
+ * author's layout.
+ */
+/**
+ * An element that leans toward the pointer, spring-driven.
+ *
+ * Renders a `<button>` by default so it is keyboard-focusable and announced correctly. Pass
+ * `as="a"` or `as="div"` when it isn't a button — but if it *acts* like a button, leave it.
+ *
+ * ```tsx
+ * <MagneticButton strength={16} scale={1.04} onClick={submit}>
+ *   Get started
+ * </MagneticButton>
+ * ```
+ */
+declare const MagneticButton: BehaviourComponent<_ansh_ui_core.MagneticOptions, HTMLElement>;
+/**
+ * A card that rotates in 3D toward the pointer, with a moving specular highlight.
+ *
+ * The `perspective()` is baked into the transform as its first function, so no parent wrapper is
+ * needed — which is the usual reason tilt implementations come out looking sheared rather than 3D.
+ */
+declare const TiltCard: BehaviourComponent<_ansh_ui_core.TiltOptions, HTMLElement>;
+/**
+ * A wave that expands from the point of contact.
+ *
+ * Also fires on Enter and Space, so keyboard activation gets the same feedback as a click. The
+ * ripple layer inherits the host's `border-radius`, so a pill button clips its ripple to a pill
+ * with no extra configuration.
+ */
+declare const Ripple: BehaviourComponent<_ansh_ui_core.RippleOptions, HTMLElement>;
+/**
+ * Seamless infinite scrolling content.
+ *
+ * Speed is in **pixels per second**, not a duration, so adding an item to a logo strip doesn't
+ * change how fast it scrolls. Content is duplicated as many times as needed to cover the
+ * container, and clones are `aria-hidden` so a screen reader reads the list once.
+ *
+ * ```tsx
+ * <Marquee speed={40} fadeEdges={64} pauseOnHover>
+ *   {logos.map((logo) => <img key={logo.id} src={logo.src} alt={logo.name} />)}
+ * </Marquee>
+ * ```
+ */
+declare const Marquee: BehaviourComponent<_ansh_ui_core.MarqueeOptions, HTMLElement>;
+/**
+ * Reveal content as it enters the viewport.
+ *
+ * The hidden starting state is applied **in JavaScript**, not CSS. If the script never runs, the
+ * content is simply visible — degraded but readable. A CSS-hidden initial state means content that
+ * is permanently invisible when JavaScript fails, which has shipped to production on a lot of
+ * marketing sites.
+ *
+ * Pass `children=".selector"` to stagger descendants instead of revealing the host as one block.
+ */
+declare const ScrollReveal: BehaviourComponent<_ansh_ui_core.ScrollRevealOptions, HTMLElement>;
+/**
+ * Move an element at a different rate from the scroll.
+ *
+ * All measurement happens in the ticker's `read` phase, so fifty parallax elements cost one layout
+ * read per frame between them rather than one per scroll event each. Disabled outright under
+ * `prefers-reduced-motion` — parallax is the canonical vestibular trigger, and a slow parallax is
+ * still parallax.
+ */
+declare const Parallax: BehaviourComponent<_ansh_ui_core.ParallaxOptions, HTMLElement>;
+
+export { AnimatePresence as A, type BehaviourComponent as B, Draggable as D, GradientText as G, MagneticButton as M, Parallax as P, Ripple as R, ScrollReveal as S, type ThemeContextValue as T, type AnimatePresenceProps as a, AnimatedText as b, type AnimatedTextProps as c, type BehaviourComponentBaseProps as d, type BehaviourComponentProps as e, type DraggableProps as f, type GradientTextProps as g, Marquee as h, Motion as i, MotionConfig as j, type MotionConfigProps as k, type MotionConfigValue as l, type MotionTransition as m, type MotionValues as n, ThemeProvider as o, type ThemeProviderProps as p, type ThemeSetting as q, TiltCard as r, createBehaviourComponent as s, themeScript as t, useBehaviour as u, useMotionConfig as v, useTheme as w };