@ansh-ui/react 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,552 @@
+export { AnchoredPosition, AnchoredPositionOptions, DismissOptions, Portal, PortalProps, Presence, PresenceProps, Slot, SlotProps, composeEventHandlers, cx, getTabbable, mergeProps, mergeRefs, slotted, useAnchoredPosition, useAnimate, useAutoFocus, useControllableState, useDismiss, useFocusRestore, useFocusTrap, useIsMounted, useMotionStyle, useMotionValue, useMotionValueState, usePresence, useRovingFocus, useScrollLock, useSpringValue } from './primitives.js';
+export { I as InViewOptions, u as useElementSize, a as useFrameBudget, b as useInView, c as useMergedRef, d as usePointer, e as useReducedMotion, f as useScrollProgress, g as useTicker, h as useWindowScroll } from './use-observers-B9qtimrk.js';
+import * as react from 'react';
+import { ForwardRefExoticComponent, ElementType, ReactNode, ComponentPropsWithoutRef, RefAttributes, ButtonHTMLAttributes, HTMLAttributes } from 'react';
+import * as _ansh_ui_core from '@ansh-ui/core';
+import { BaseEffectOptions, EffectDefinition } from '@ansh-ui/core';
+export { AnimationControls, AnimationOptions, BaseEffectOptions, ColorInput, ColorSpace, EasingInput, EffectDefinition, FrameState, Gradient, Timeline as MotionTimeline, MotionValue, PaletteName, PointerState, ReducedMotionStrategy, Rgb, SpringOptions, StaggerFrom, StaggerOptions, animate, checkContrast, createGradient, createNoise, createScale, createTimeline, cubicBezier, easings, ensureContrast, generatePalette, getRegistry, getTicker, mixColors, motionValue, palettes, parseColor, pickReadable, prefersReducedMotion, registerEasing, setReducedMotionMode, signature as signatureEasings, springs, stagger, toHex, toOklchString } from '@ansh-ui/core';
+export { A as AnimatePresence, a as AnimatePresenceProps, b as AnimatedText, c as AnimatedTextProps, B as BehaviourComponent, d as BehaviourComponentBaseProps, e as BehaviourComponentProps, D as Draggable, f as DraggableProps, G as GradientText, g as GradientTextProps, M as MagneticButton, h as Marquee, i as Motion, j as MotionConfig, k as MotionConfigProps, l as MotionConfigValue, m as MotionTransition, n as MotionValues, P as Parallax, R as Ripple, S as ScrollReveal, T as ThemeContextValue, o as ThemeProvider, p as ThemeProviderProps, q as ThemeSetting, r as TiltCard, s as createBehaviourComponent, t as themeScript, u as useBehaviour, v as useMotionConfig, w as useTheme } from './motion-CQmCq6_k.js';
+export { A as Align, P as Placement, a as PositionOptions, b as PositionResult, R as Rect, S as Side, c as computePosition } from './position-DVScKcaa.js';
+export { AlertDialog, AlertDialogProps, CommandItem, CommandPalette, CommandPaletteProps, ContextMenu, ContextMenuProps, Dialog, DialogFooter, DialogProps, DialogSize, Drawer, DrawerProps, DrawerSide, DropdownMenu, HoverCard, HoverCardProps, MenuAction, MenuCheckbox, MenuEntry, MenuProps, MenuRadioGroup, MenuSubmenu, Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps, Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps, useCommandShortcut } from './overlay.js';
+export { AspectRatio, AspectRatioProps, Center, Container, ContainerProps, Divider, DividerProps, Grid, GridItem, GridItemProps, GridProps, HStack, Resizable, ResizableProps, ScrollArea, ScrollAreaProps, SpaceToken, Spacer, SpacerProps, Stack, StackProps, VStack } from './layout.js';
+export { Calendar, CalendarProps, Checkbox, CheckboxProps, ChoiceCard, ChoiceCardProps, ColorPicker, ColorPickerProps, Combobox, ComboboxProps, DatePicker, DatePickerProps, DateRange, DateRangePicker, DateRangePickerProps, Dropzone, DropzoneFile, DropzoneProps, Field, FieldContextValue, FieldProps, Fieldset, FieldsetProps, Input, InputProps, InputSize, NumberInput, NumberInputProps, OptionList, OptionListProps, PinInput, PinInputProps, Radio, RadioGroup, RadioGroupProps, RadioProps, RangeSlider, RangeSliderProps, Rating, RatingProps, Select, SelectOption, SelectProps, Slider, SliderMark, SliderProps, Switch, SwitchProps, TagsInput, TagsInputProps, Textarea, TextareaProps, VisuallyHidden, addDays, addMonths, filterOptions, firstEnabled, isSameDay, scoreOption, startOfDay, stepActive, useFieldContext, useFieldControl, useTypeahead } from './form.js';
+export { Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BadgeProps, BadgeTone, CircularProgress, CircularProgressProps, CodeBlock, CodeBlockProps, Column, DataTable, DataTableProps, DescriptionList, DescriptionListProps, EmptyState, EmptyStateProps, Kbd, Meter, MeterProps, Pagination, PaginationProps, Progress, ProgressProps, SortDirection, SortState, Stat, StatProps, Table, Timeline, TimelineItem } from './data.js';
+export { Accordion, AccordionItem, AccordionProps, Breadcrumbs, BreadcrumbsProps, Collapsible, CollapsibleProps, Crumb, DisclosureList, DisclosureListProps, MegaMenuColumn, MegaMenuLink, NavMenuItem, NavigationMenu, NavigationMenuProps, Step, Stepper, StepperProps, TabItem, Tabs, TabsProps } from './navigation.js';
+export { A as AppShell, a as AppShellProps, N as NavItem, b as NavSection, S as Sidebar, c as SidebarProps } from './sidebar-D-PafAXw.js';
+
+/**
+ * Turn an {@link EffectDefinition} into a React component.
+ *
+ * This factory is why the component count can scale without the maintenance cost scaling with it.
+ * Every canvas-backed component in the library is one line:
+ *
+ * ```tsx
+ * export const AuroraBackground = createEffectComponent(aurora, 'AuroraBackground')
+ * ```
+ *
+ * and gets, for free:
+ *
+ *  - **SSR safety.** The server renders only the host element and its children. The canvas is
+ *    created in an effect, so server and first-client markup are byte-identical and React never
+ *    reports a hydration mismatch.
+ *  - **Prop diffing that doesn't remount.** Options are compared shallowly and pushed through
+ *    `handle.update()`, which live-updates what it can and remounts only what it must.
+ *  - **A polymorphic `as` prop**, so a background can be a `<section>`, `<div>`, or `<aside>`
+ *    without a wrapper element.
+ *  - **Ref forwarding** to the host element.
+ *  - **Complete teardown**, verified by the leak harness in the test suite.
+ */
+/** Props every effect component accepts on top of its own options. */
+interface EffectComponentBaseProps {
+    /** Element to render as the host. Default `'div'`. */
+    as?: ElementType;
+    className?: string;
+    style?: React.CSSProperties;
+    /** Content rendered above the canvas. Positioned automatically. */
+    children?: ReactNode;
+}
+type EffectComponentProps<Options extends BaseEffectOptions> = Options & EffectComponentBaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof Options | 'style' | 'className' | 'children'>;
+/** The type of a component produced by {@link createEffectComponent}. */
+type EffectComponent<Options extends BaseEffectOptions> = ForwardRefExoticComponent<EffectComponentProps<Options> & RefAttributes<HTMLElement>>;
+declare function createEffectComponent<Options extends BaseEffectOptions>(definition: EffectDefinition<Options>, displayName?: string): EffectComponent<Options>;
+
+/**
+ * Canvas-backed background components.
+ *
+ * Each is a single call to {@link createEffectComponent}, which supplies SSR safety, prop
+ * diffing, ref forwarding, polymorphic `as`, and teardown. The visual behaviour lives entirely in
+ * `@ansh-ui/core`, so these definitions are the complete React binding — there is no per-component
+ * React logic to get wrong, and the Vue components are the same effects with a different factory.
+ *
+ * Every component accepts its effect's full option surface plus `as`, `className`, `style`,
+ * `children`, and any DOM attribute.
+ *
+ * ```tsx
+ * <AuroraBackground colors={['#0275f4', '#9f0550']} intensity={1.2} className="h-screen">
+ *   <h1>Motion, refined.</h1>
+ * </AuroraBackground>
+ * ```
+ */
+/** Vertical curtains of light with ridged filament structure. */
+declare const AuroraBackground: EffectComponent<_ansh_ui_core.AuroraOptions>;
+/** Soft overlapping colour fields that drift on non-repeating Lissajous paths. */
+declare const MeshGradient: EffectComponent<_ansh_ui_core.MeshGradientOptions>;
+/** A rotating multi-stop linear gradient. One fill per frame — the cheap option. */
+declare const AnimatedGradient: EffectComponent<_ansh_ui_core.AnimatedGradientOptions>;
+/** Points advected by a divergence-free curl-noise flow field. */
+declare const ParticleField: EffectComponent<_ansh_ui_core.ParticleFieldOptions>;
+/** Drifting nodes joined by lines, with the pointer as a live node. */
+declare const Constellation: EffectComponent<_ansh_ui_core.ConstellationOptions>;
+/** Streaks falling across the canvas, spawned as a Poisson process. */
+declare const MeteorShower: EffectComponent<_ansh_ui_core.MeteorsOptions>;
+/** Depth-parallaxed rain, optionally with splash rings. */
+declare const Rain: EffectComponent<_ansh_ui_core.RainOptions>;
+/** Depth-parallaxed snow with independent per-flake sway. */
+declare const Snow: EffectComponent<_ansh_ui_core.SnowOptions>;
+/** Wandering points with asymmetric bioluminescent pulsing. */
+declare const Fireflies: EffectComponent<_ansh_ui_core.FirefliesOptions>;
+/** Layered undulating bands built from three incommensurable sines plus noise. */
+declare const Waves: EffectComponent<_ansh_ui_core.WavesOptions>;
+/** Organic shapes morphing via noise sampled on a closed circle. */
+declare const LiquidBlob: EffectComponent<_ansh_ui_core.BlobOptions>;
+/**
+ * Film grain and dither overlay.
+ *
+ * Place this *above* a gradient to hide 8-bit banding and give flat colour a physical texture.
+ * It is the cheapest single change that makes a gradient look deliberate.
+ */
+declare const NoiseLayer: EffectComponent<_ansh_ui_core.NoiseLayerOptions>;
+/** A soft light that follows the pointer, easing in and out of existence. */
+declare const Spotlight: EffectComponent<_ansh_ui_core.SpotlightOptions>;
+
+/**
+ * Buttons.
+ *
+ * The visual treatments are CSS — a shimmer sweep, a rotating conic border, a fill that rises on
+ * hover. None of them need JavaScript, and doing them in JS would mean tracking hover in React
+ * state and re-rendering on every pointer event.
+ *
+ * What *does* need JavaScript is the physics: magnetic attraction and the ripple both read pointer
+ * position every frame. Those come from the engine's behaviours, attached via `useBehaviour`, so
+ * the button element itself carries them rather than being wrapped in another div.
+ */
+type ButtonVariant = 'solid' | 'ghost' | 'shimmer' | 'glow' | 'liquid';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Render as a different element — `'a'` for links. Default `'button'`. */
+    as?: ElementType;
+    /**
+     * Pull toward the pointer, in pixels of maximum displacement. `0` disables.
+     * Spring-driven, so it has weight rather than tracking the cursor rigidly. Default `0`.
+     */
+    magneticStrength?: number;
+    /** Emit a ripple from the point of contact. Default `false`. */
+    ripple?: boolean;
+    /** Colours for the `glow` variant's rotating border. */
+    glowColors?: readonly [string, string];
+    /** Seconds per rotation or sweep, depending on variant. */
+    duration?: number;
+    children?: ReactNode;
+}
+/**
+ * ```tsx
+ * <Button variant="shimmer" magneticStrength={14}>Get started</Button>
+ * <Button variant="glow" glowColors={['#0275f4', '#9f0550']}>Upgrade</Button>
+ * <Button variant="liquid" ripple>Deploy</Button>
+ * ```
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+interface IconButtonProps extends ButtonProps {
+    /** Required: an icon-only control has no visible text, so it needs an accessible name. */
+    label: string;
+}
+/**
+ * A square, icon-only button.
+ *
+ * `label` is required rather than optional. An icon-only control with no accessible name is
+ * announced as just "button" by a screen reader, and making the prop optional guarantees some
+ * consumers will omit it.
+ */
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Cards.
+ *
+ * `SpotlightCard` and `GlowCard` both need the pointer position, but neither needs the full
+ * `trackPointer` machinery from the engine — they write two CSS custom properties and let the
+ * stylesheet do the rest, which is cheaper and doesn't need a spring. Writing to
+ * `style.setProperty` bypasses React's render cycle entirely, which is what keeps a 60 Hz pointer
+ * handler from costing a re-render.
+ */
+interface SpotlightCardProps extends HTMLAttributes<HTMLDivElement> {
+    as?: ElementType;
+    /** Highlight colour. Any CSS colour. Default a soft brand blue. */
+    color?: string;
+    /** Diameter of the highlight in pixels. Default `320`. */
+    size?: number;
+    children?: ReactNode;
+}
+/**
+ * A card with a radial highlight that follows the pointer.
+ *
+ * ```tsx
+ * <SpotlightCard color="rgb(2 117 244 / 0.25)">
+ *   <h3>Fast by default</h3>
+ * </SpotlightCard>
+ * ```
+ */
+declare const SpotlightCard: react.ForwardRefExoticComponent<SpotlightCardProps & react.RefAttributes<HTMLDivElement>>;
+interface GlowCardProps extends HTMLAttributes<HTMLDivElement> {
+    as?: ElementType;
+    /** The rotating border's colour stops. Default the Ansh house gradient. */
+    colors?: readonly [string, string];
+    /** Seconds per full rotation. Default `6`. */
+    duration?: number;
+    children?: ReactNode;
+}
+/**
+ * A card with a slowly rotating conic-gradient border.
+ *
+ * The rotation is driven by an `@property`-registered custom angle animated via CSS `@keyframes`
+ * — no JavaScript runs per frame. `@property` is what makes a custom property animatable at all;
+ * without it browsers cannot interpolate between angle values and the gradient would jump.
+ */
+declare const GlowCard: react.ForwardRefExoticComponent<GlowCardProps & react.RefAttributes<HTMLDivElement>>;
+interface TiltCard3DProps extends HTMLAttributes<HTMLDivElement> {
+    as?: ElementType;
+    /** Maximum rotation in degrees. Default `12`. */
+    max?: number;
+    children?: ReactNode;
+}
+/**
+ * A lightweight 3D tilt, independent of the full `TiltCard` behaviour.
+ *
+ * `@ansh-ui/react` already exports `TiltCard` (spring-driven, glare, the engine's `tilt`
+ * behaviour) — reach for that when the interaction should feel weighted. This is the CSS-only
+ * sibling for a bento tile or a small preview card where a spring is more machinery than the
+ * moment calls for; it follows the pointer directly with a `transition` easing back to rest.
+ */
+declare const TiltCard3D: react.ForwardRefExoticComponent<TiltCard3DProps & react.RefAttributes<HTMLDivElement>>;
+interface BentoGridProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of columns at desktop width. Default `3`. */
+    columns?: number;
+    children?: ReactNode;
+}
+/** A responsive bento layout. Collapses to a single column below 768px. */
+declare function BentoGrid({ columns, className, style, children, ...rest }: BentoGridProps): react.JSX.Element;
+interface BentoItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Columns this tile spans. Default `1`. */
+    span?: number;
+    /** Rows this tile spans. Default `1`. */
+    rowSpan?: number;
+    children?: ReactNode;
+}
+declare function BentoItem({ span, rowSpan, className, style, children, ...rest }: BentoItemProps): react.JSX.Element;
+
+/**
+ * A macOS-style dock with pointer magnification.
+ *
+ * Two details separate a dock that feels right from one that doesn't:
+ *
+ * **Magnification is a distance falloff, not a hover state.** Only scaling the hovered item makes
+ * neighbours snap in and out abruptly. Real docks scale every item by its distance from the
+ * pointer, so the bulge is continuous and the whole row responds as one surface.
+ *
+ * **Sizes are eased toward their target, not set directly.** Writing the computed size straight to
+ * the node makes the dock track the cursor rigidly, which reads as weightless. A per-frame ease
+ * gives it a small amount of lag — the thing that makes it feel physical.
+ *
+ * Both run in the ticker's write phase and mutate `style.width` directly. Doing this through React
+ * state would re-render the whole dock on every pointer move.
+ */
+interface DockItem {
+    /** Icon or short label. Rendered inside the tile. */
+    icon: ReactNode;
+    /** Tooltip text, and the accessible name for the control. */
+    label: string;
+    onClick?: () => void;
+    href?: string;
+}
+interface DockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    items: readonly DockItem[];
+    /** Resting tile size in pixels. Default `48`. */
+    size?: number;
+    /** Size of a tile directly under the pointer. Default `80`. */
+    magnification?: number;
+    /**
+     * How far the magnification reaches, in pixels. Larger values bulge more neighbours.
+     * Default `140`.
+     */
+    distance?: number;
+}
+declare function Dock({ items, size, magnification, distance, className, ...rest }: DockProps): react.JSX.Element;
+
+/**
+ * Text effects.
+ *
+ * All three share one accessibility rule: the *complete* text is always present for assistive
+ * technology, even when only part of it is visible. A typewriter that renders one character at a
+ * time into the DOM would have a screen reader announce a partial word, then re-announce the
+ * string on every keystroke.
+ */
+interface TypewriterProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** Strings to type in sequence. A single string types once and stops. */
+    words: string | readonly string[];
+    /** Characters typed per second. Default `24`. */
+    speed?: number;
+    /** Characters deleted per second. Default `40` — deleting reads as faster than typing. */
+    deleteSpeed?: number;
+    /** Seconds to hold a completed word before deleting. Default `1.6`. */
+    pause?: number;
+    /** Loop through the list. Default `true` when given several words. */
+    loop?: boolean;
+    /** Show a blinking caret. Default `true`. */
+    caret?: boolean;
+}
+/**
+ * A typewriter that cycles through phrases.
+ *
+ * ```tsx
+ * <Typewriter words={['ship faster', 'sleep better', 'stay sane']} />
+ * ```
+ *
+ * Under reduced motion it renders the first phrase statically — a caret blinking indefinitely is a
+ * photosensitivity concern, and the content is the point rather than the typing.
+ */
+declare function Typewriter({ words, speed, deleteSpeed, pause, loop, caret, className, ...rest }: TypewriterProps): react.JSX.Element;
+interface ShinyTextProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Seconds per sweep. Default `3`. */
+    duration?: number;
+    children: React.ReactNode;
+}
+/**
+ * Text with a highlight sweeping across it.
+ *
+ * Pure CSS — a moving `background-position` on a gradient clipped to the glyphs. Nothing runs per
+ * frame on the main thread, so this is effectively free even repeated across a page.
+ */
+declare function ShinyText({ duration, className, style, children, ...rest }: ShinyTextProps): react.JSX.Element;
+interface NumberTickerProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    value: number;
+    /** Seconds to count up. Default `1.4`. */
+    duration?: number;
+    /** Decimal places. Default `0`. */
+    decimals?: number;
+    prefix?: string;
+    suffix?: string;
+    /** Start counting when scrolled into view. Default `true`. */
+    whenInView?: boolean;
+}
+/**
+ * A number that counts up to its value.
+ *
+ * Counts on the shared ticker with an ease-out curve, so it decelerates into the final figure
+ * rather than stopping dead. Formatting goes through `Intl.NumberFormat`, which means thousands
+ * separators follow the user's locale instead of being hardcoded to commas.
+ */
+declare function NumberTicker({ value, duration, decimals, prefix, suffix, whenInView, className, ...rest }: NumberTickerProps): react.JSX.Element;
+
+/**
+ * Loaders and feedback.
+ *
+ * The recurring theme: a loading or status indicator must be announced, not just drawn. A spinner
+ * with no accessible name is invisible to a screen reader, and a toast that appears silently is a
+ * message the user never receives.
+ */
+interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Diameter in pixels. Default `24`. */
+    size?: number;
+    /** Ring thickness in pixels. Default `3`. */
+    thickness?: number;
+    /** Accessible label. Default `'Loading'`. Pass `null` if a sibling already announces it. */
+    label?: string | null;
+}
+/**
+ * A ring spinner.
+ *
+ * One element: a conic gradient masked to a ring. No SVG, and it inherits `currentColor`, so it
+ * takes the colour of whatever it sits inside without configuration.
+ */
+declare function Spinner({ size, thickness, label, className, style, ...rest }: SpinnerProps): react.JSX.Element;
+interface DotsProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: number;
+    label?: string | null;
+}
+/** Three bouncing dots. Reads as "thinking" where a spinner reads as "fetching". */
+declare function LoadingDots({ size, label, className, style, ...rest }: DotsProps): react.JSX.Element;
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    width?: number | string;
+    height?: number | string;
+    /** Fully rounded, for avatars. Default `false`. */
+    circle?: boolean;
+}
+/**
+ * A loading placeholder with a moving sheen.
+ *
+ * Marked `aria-hidden` deliberately: a skeleton is a visual stand-in with no content to announce.
+ * The container should carry `aria-busy="true"` so assistive technology knows something is loading.
+ */
+declare function Skeleton({ width, height, circle, className, style, ...rest }: SkeletonProps): react.JSX.Element;
+type ToastVariant = 'info' | 'success' | 'error';
+interface Toast {
+    id: string;
+    title?: string;
+    message: ReactNode;
+    variant?: ToastVariant;
+    /** Milliseconds before auto-dismiss. `0` keeps it until dismissed. Default `4500`. */
+    duration?: number;
+}
+interface ToastContextValue {
+    toast: (toast: Omit<Toast, 'id'>) => string;
+    dismiss: (id: string) => void;
+}
+/**
+ * Provider for the toast system.
+ *
+ * ```tsx
+ * <ToastProvider><App /></ToastProvider>
+ *
+ * const { toast } = useToast()
+ * toast({ title: 'Deployed', message: 'Live in 1.2s', variant: 'success' })
+ * ```
+ */
+declare function ToastProvider({ children }: {
+    children?: ReactNode;
+}): react.JSX.Element;
+declare function useToast(): ToastContextValue;
+
+/**
+ * Marketing components.
+ *
+ * These are the ones a landing page actually needs, and the two places they usually go wrong are
+ * both handled here: an accordion that animates to intrinsic content height without JavaScript
+ * measurement, and a pricing table whose "recommended" plan is conveyed by more than colour.
+ */
+interface PricingPlan {
+    name: string;
+    price: string;
+    /** Billing period, e.g. `'/month'`. */
+    period?: string;
+    description?: string;
+    features: readonly string[];
+    /** Highlight this plan. Renders elevated with a badge. */
+    featured?: boolean;
+    badge?: string;
+    cta?: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+        variant?: ButtonVariant;
+    };
+}
+interface PricingTableProps {
+    plans: readonly PricingPlan[];
+    className?: string;
+}
+/**
+ * A responsive pricing table.
+ *
+ * The featured plan is distinguished three ways — elevation, a text badge, and a filled CTA —
+ * rather than by colour alone. Colour-only emphasis fails WCAG 1.4.1 and is invisible to a
+ * colour-blind user, which for a pricing page means the recommended plan simply isn't recommended.
+ */
+declare function PricingTable({ plans, className }: PricingTableProps): react.JSX.Element;
+/**
+ * A single question/answer pair.
+ *
+ * Named `FaqItem` rather than `AccordionItem` because the general-purpose `Accordion` owns that
+ * name. The two are genuinely different shapes: this one is question/answer, the general one is
+ * title/content with icons, subtitles and per-item disabled state.
+ */
+interface FaqItem {
+    question: string;
+    answer: ReactNode;
+}
+interface FAQAccordionProps {
+    items: readonly FaqItem[];
+    /** Allow several panels open at once. Default `false`. */
+    multiple?: boolean;
+    /** Index open on first render. Omit for all closed. */
+    defaultOpen?: number;
+    className?: string;
+}
+/**
+ * An accordion.
+ *
+ * The height transition uses `grid-template-rows: 0fr → 1fr`, which is the only way to animate to
+ * *intrinsic* content height in pure CSS. The usual alternatives both fail: a fixed `max-height`
+ * either clips long answers or eases at the wrong rate, and measuring `scrollHeight` in JavaScript
+ * means a layout read per toggle and a stale value whenever the content reflows.
+ *
+ * Uses native `<button>` triggers with `aria-expanded` and `aria-controls`, so keyboard and screen
+ * reader behaviour is correct without a roving tabindex.
+ */
+declare function FAQAccordion({ items, multiple, defaultOpen, className, }: FAQAccordionProps): react.JSX.Element;
+
+type AlertTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+interface AlertProps {
+    tone?: AlertTone;
+    title?: ReactNode;
+    children?: ReactNode;
+    /** Replace the default icon, or pass `null` to omit it. */
+    icon?: ReactNode | null;
+    /** Show a dismiss button. */
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    /** Buttons or links under the message. */
+    actions?: ReactNode;
+    variant?: 'soft' | 'outline' | 'solid';
+    className?: string;
+}
+/**
+ * An inline message.
+ *
+ * The `role` follows the tone, because it decides whether a screen reader interrupts:
+ * `role="alert"` (assertive) for errors and warnings, which the user needs to know about *now*;
+ * `role="status"` (polite) for information and success, which can wait for a pause.
+ *
+ * Using `alert` for everything is the common mistake, and it makes a screen reader cut off whatever
+ * it was saying to announce that a draft was saved.
+ *
+ * The tone is always carried by the icon and the text, never by colour alone.
+ */
+declare function Alert({ tone, title, children, icon, dismissible, onDismiss, actions, variant, className, }: AlertProps): react.JSX.Element | null;
+interface BannerProps extends Omit<AlertProps, 'variant'> {
+    /** Pin to the top of the viewport. */
+    sticky?: boolean;
+}
+/**
+ * A full-width page-level message — maintenance windows, trial expiry, a failed payment.
+ *
+ * Distinct from `Alert` in placement and weight rather than in mechanics: a banner concerns the
+ * whole application, an alert concerns the thing next to it.
+ */
+declare function Banner({ sticky, className, ...rest }: BannerProps): react.JSX.Element;
+interface CalloutProps {
+    /** Short label — "Note", "Tip", "Warning". */
+    label?: string;
+    tone?: AlertTone;
+    icon?: ReactNode;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * A documentation callout.
+ *
+ * Deliberately **not** a live region. Prose asides are part of the page's content and are read in
+ * document order; announcing them out of sequence would be disruptive rather than helpful, which is
+ * the opposite of what `Alert` is for.
+ */
+declare function Callout({ label, tone, icon, className, children }: CalloutProps): react.JSX.Element;
+
+/**
+ * @ansh-ui/react — Ansh for React 18/19 and Next.js.
+ *
+ * Every component here is a thin binding over `@ansh-ui/core`. The engine owns all behaviour; this
+ * package owns the React lifecycle, prop diffing, and SSR correctness.
+ *
+ * ```tsx
+ * import '@ansh-ui/tokens/ansh.css'
+ * import { AuroraBackground, AnimatedText, MagneticButton } from '@ansh-ui/react'
+ *
+ * export default function Hero() {
+ *   return (
+ *     <AuroraBackground className="min-h-screen grid place-items-center">
+ *       <AnimatedText by="chars" from="center">Motion, refined.</AnimatedText>
+ *       <MagneticButton strength={16}>Get started</MagneticButton>
+ *     </AuroraBackground>
+ *   )
+ * }
+ * ```
+ *
+ * ## Next.js App Router
+ *
+ * The package ships a `'use client'` banner, so these components work in server components without
+ * you wrapping them in your own client boundary.
+ */
+
+declare const VERSION = "0.1.0";
+
+export { Alert, type AlertProps, type AlertTone, AnimatedGradient, AuroraBackground, Banner, type BannerProps, BentoGrid, type BentoGridProps, BentoItem, type BentoItemProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, Constellation, Dock, type DockItem, type DockProps, type DotsProps, type EffectComponent, type EffectComponentBaseProps, type EffectComponentProps, FAQAccordion, type FAQAccordionProps, type FaqItem, Fireflies, GlowCard, type GlowCardProps, IconButton, type IconButtonProps, LiquidBlob, LoadingDots, MeshGradient, MeteorShower, NoiseLayer, NumberTicker, type NumberTickerProps, ParticleField, type PricingPlan, PricingTable, type PricingTableProps, Rain, ShinyText, type ShinyTextProps, Skeleton, type SkeletonProps, Snow, Spinner, type SpinnerProps, Spotlight, SpotlightCard, type SpotlightCardProps, TiltCard3D, type TiltCard3DProps, type Toast, ToastProvider, type ToastVariant, Typewriter, type TypewriterProps, VERSION, Waves, createEffectComponent, useToast };