@ansh-ui/react 0.2.0 → 0.3.0

package/dist/index.d.cts

@@ -1,18 +1,18 @@
 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.cjs';
-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.cjs';
+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 useTickerSubscriberCount, i as useWindowScroll } from './use-observers-DvA7hSz4.cjs';
 import * as react from 'react';
-import { ForwardRefExoticComponent, ElementType, ReactNode, ComponentPropsWithoutRef, RefAttributes, ButtonHTMLAttributes, HTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, ElementType, ReactNode, ComponentPropsWithoutRef, RefAttributes, ButtonHTMLAttributes, HTMLAttributes, CSSProperties } from 'react';
 import * as _ansh_ui_core from '@ansh-ui/core';
-import { BaseEffectOptions, EffectDefinition } from '@ansh-ui/core';
+import { BaseEffectOptions, EffectDefinition, TextScrambleOptions } 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-CSX4g2N8.cjs';
-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.cjs';
+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-DsQPOsTT.cjs';
+export { A as Align, P as Placement, a as PositionOptions, b as PositionResult, R as Rect, S as Side, c as computePosition } from './position-CW6cGpSF.cjs';
 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.cjs';
 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.cjs';
 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.cjs';
 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.cjs';
 export { Accordion, AccordionItem, AccordionProps, Breadcrumbs, BreadcrumbsProps, Collapsible, CollapsibleProps, Crumb, DisclosureList, DisclosureListProps, MegaMenuColumn, MegaMenuLink, NavMenuItem, NavigationMenu, NavigationMenuProps, Step, Stepper, StepperProps, TabItem, Tabs, TabsProps } from './navigation.cjs';
-export { A as AppShell, a as AppShellProps, N as NavItem, b as NavSection, S as Sidebar, c as SidebarProps } from './sidebar-D-PafAXw.cjs';
+export { A as AppShell, a as AppShellProps, N as NavItem, b as NavSection, S as Sidebar, c as SidebarProps } from './sidebar-Dyt67t2z.cjs';
 
 /**
  * Turn an {@link EffectDefinition} into a React component.
@@ -98,6 +98,25 @@ declare const LiquidBlob: EffectComponent<_ansh_ui_core.BlobOptions>;
 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>;
+/** Volumetric shafts fanning from a source point, with noise-driven per-shaft brightness. */
+declare const LightRays: EffectComponent<_ansh_ui_core.LightRaysOptions>;
+/** A rising plume: curl-advected puffs that expand and dissipate over their life. */
+declare const Smoke: EffectComponent<_ansh_ui_core.SmokeOptions>;
+/**
+ * Bursts of fine particles that decelerate hard and settle.
+ *
+ * Bursts arrive on a Poisson schedule, and — with `burstOnPress` — on pointer press, which makes
+ * this the one background here that doubles as a click affordance.
+ */
+declare const PowderExplosion: EffectComponent<_ansh_ui_core.PowderExplosionOptions>;
+/** Polygons drifting in depth, projected through a real perspective divide. */
+declare const FloatingGeometry: EffectComponent<_ansh_ui_core.FloatingGeometryOptions>;
+/** Nested rings of points circling a centre, depth-ordered so near points occlude far ones. */
+declare const Orbit: EffectComponent<_ansh_ui_core.OrbitOptions>;
+/** A chaotic iterated map plotted as a drifting cloud — Clifford, de Jong or Svensson. */
+declare const StrangeAttractor: EffectComponent<_ansh_ui_core.StrangeAttractorOptions>;
+/** Particles bound to moving attractors, orbiting rather than collapsing. Follows the pointer. */
+declare const Swarm: EffectComponent<_ansh_ui_core.SwarmOptions>;
 
 /**
  * Buttons.
@@ -465,6 +484,199 @@ interface FAQAccordionProps {
  */
 declare function FAQAccordion({ items, multiple, defaultOpen, className, }: FAQAccordionProps): react.JSX.Element;
 
+interface ScrambleTextProps extends TextScrambleOptions {
+    /** The finished text. Must be a plain string — the behaviour owns this node's text content. */
+    children: string;
+    /** Element to render. Default `'span'`. */
+    as?: ElementType;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function ScrambleText({ children, as, className, style, ...options }: ScrambleTextProps): react.JSX.Element;
+
+/**
+ * A headline word that cycles through alternatives.
+ *
+ * ```tsx
+ * <h1>Built for <TextRotate words={['designers', 'engineers', 'teams']} /></h1>
+ * ```
+ *
+ * **The box is sized to the longest word, up front.** The naive version sizes to the current word,
+ * so the surrounding sentence reflows on every rotation — the text after it visibly jumps, and on
+ * a two-line headline the whole layout shifts. Every candidate is rendered once, hidden and
+ * unmeasured by the reader, purely to hold the width open. This is a layout-stability fix, not a
+ * visual one: it is the difference between a device that feels designed and one that feels broken.
+ *
+ * **It is not a live region.** Rotating text is decorative emphasis, not new information. Marking
+ * it `aria-live` would make a screen reader interrupt itself every two seconds, forever. The
+ * current word is in the accessible tree and read normally when traversed; changes are silent.
+ *
+ * **Reduced motion stops the rotation entirely**, rather than swapping instantly. A word that
+ * changes with no transition is more jarring than one that does not change at all, and the
+ * sentence still reads correctly with a single word in place.
+ */
+type TextRotateAnimation = 'slide' | 'fade' | 'flip';
+interface TextRotateProps {
+    /** The alternatives to cycle. The first is shown initially and under reduced motion. */
+    words: readonly string[];
+    /** Seconds each word is held. Default `2.2`. */
+    interval?: number;
+    /** How a word leaves and the next arrives. Default `'slide'`. */
+    animation?: TextRotateAnimation;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function TextRotate({ words, interval, animation, className, style, }: TextRotateProps): react.JSX.Element;
+
+/**
+ * A before/after comparison with a draggable divider.
+ *
+ * **The clip is on the top layer, not a width change.** Both layers are absolutely positioned at
+ * full size and the top one is revealed with `clip-path: inset(...)`. Resizing it instead would
+ * re-lay-out its contents as the handle moves, so an image would squash rather than be uncovered —
+ * which defeats the entire purpose of the control.
+ *
+ * **It is a real slider.** `role="slider"` with `aria-valuenow` and arrow-key handling, so it is
+ * operable without a pointer. Comparison sliders are very often built as a bare div with a
+ * `pointermove` listener, which makes them completely unusable by keyboard and invisible to
+ * assistive technology.
+ *
+ * **Pointer capture, not window listeners.** `setPointerCapture` keeps the drag attached to the
+ * handle even when the pointer leaves the element, and releases automatically if the gesture is
+ * cancelled — no global `pointermove`/`pointerup` pair to leak on unmount.
+ */
+interface BeforeAfterProps {
+    /** Content revealed on the left of the divider. */
+    before: ReactNode;
+    /** Content revealed on the right of the divider. */
+    after: ReactNode;
+    /** Divider position as a percentage, `0`–`100`. Controlled. */
+    value?: number;
+    /** Initial position when uncontrolled. Default `50`. */
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    /** Percentage points moved per arrow key press. Default `4`. */
+    step?: number;
+    /** Accessible name for the divider. Default `'Comparison position'`. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function BeforeAfter({ before, after, value, defaultValue, onValueChange, step, label, className, style, }: BeforeAfterProps): react.JSX.Element;
+
+/**
+ * A device or browser frame to present a screenshot, a demo, or a live component in.
+ *
+ * Purely presentational, and deliberately so — it exists because "here is the thing I built" is a
+ * layout problem, not an animation one. Anything placed inside keeps working: this renders a frame
+ * around real DOM, not a picture of one, so a live interactive demo can sit in it.
+ *
+ * **The chrome is `aria-hidden`.** Traffic-light dots, a notch and a fake URL are decoration; they
+ * carry no information a screen reader user needs, and announcing "three circles" before every
+ * demo is noise. Only the content inside the screen is in the accessible tree.
+ *
+ * **The URL is not a link and not an input.** It is a static label. Making it either would invite
+ * clicks that go nowhere, which is worse than obviously-inert chrome.
+ */
+type MockupVariant = 'browser' | 'window' | 'phone';
+interface DeviceMockupProps {
+    /** Frame style. Default `'browser'`. */
+    variant?: MockupVariant;
+    /** Address shown in the browser chrome. Ignored by the other variants. */
+    url?: string;
+    /** Title shown in the window chrome. Ignored by the other variants. */
+    title?: string;
+    /** Accessible name for the framed region, e.g. `'Dashboard preview'`. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+declare function DeviceMockup({ variant, url, title, label, className, style, children, }: DeviceMockupProps): react.JSX.Element;
+
+/**
+ * A deck of cards with the next few peeking out behind the top one.
+ *
+ * **Depth is a fixed ladder, not per-card state.** A card's offset, scale and rotation are derived
+ * from its distance from the top of the deck, so advancing only changes one number and every card
+ * transitions to its new rung. Animating each card's transform imperatively would mean tracking
+ * n transforms and reconciling them on every change — this way the CSS transition does it.
+ *
+ * **Only the top card is reachable, by any route.** The cards behind it get both `aria-hidden` and
+ * `inert`. Either alone is a trap: `aria-hidden` on its own leaves a buried button still reachable
+ * by Tab, so keyboard focus lands on a control the screen reader will not announce. A reader
+ * should encounter one card, not four overlapping ones, three of them 80% hidden.
+ *
+ * **Auto-play stops under reduced motion and while hovered or focused.** Content that moves itself
+ * away from a reader mid-sentence is a WCAG 2.2 pause/stop concern, not a preference — hovering or
+ * tabbing into the deck is a strong signal that someone is reading it.
+ */
+interface CardStackProps {
+    /** Cards, front to back. */
+    items: readonly ReactNode[];
+    /** Advance on a timer. Default `true`. */
+    autoPlay?: boolean;
+    /** Seconds each card is held when auto-playing. Default `3.5`. */
+    interval?: number;
+    /** How many cards behind the top one are visible. Default `2`. */
+    peek?: number;
+    /** Render previous/next buttons. Default `true`. */
+    controls?: boolean;
+    /** Accessible name for the deck. Default `'Card stack'`. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function CardStack({ items, autoPlay, interval, peek, controls, label, className, style, }: CardStackProps): react.JSX.Element | null;
+
+interface CarouselProps {
+    /** Slides, in order. */
+    items: readonly ReactNode[];
+    /** Active slide index. Controlled. */
+    value?: number;
+    /** Initial slide when uncontrolled. Default `0`. */
+    defaultValue?: number;
+    onChange?: (index: number) => void;
+    /** Wrap past the ends. Default `true`. */
+    loop?: boolean;
+    /** Advance on a timer. Default `false`. */
+    autoPlay?: boolean;
+    /** Seconds each slide is held when auto-playing. Default `5`. */
+    interval?: number;
+    /** Render the dot indicators. Default `true`. */
+    showDots?: boolean;
+    /** Render the previous/next arrows. Default `true`. */
+    showArrows?: boolean;
+    /** Allow dragging the track to change slides. Default `true`. */
+    draggable?: boolean;
+    /** Accessible name for the carousel region. */
+    label: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A carousel.
+ *
+ * **Transform, not scroll.** The track is translated by `index × 100%`. A scroll-snap carousel gets
+ * native touch feel for free but makes the *scroll position* the source of truth, so the active
+ * index has to be inferred back out of it with an observer — and that inference disagrees with the
+ * controlled `value` prop the moment both try to drive at once. One transform keeps the index
+ * authoritative, which is what a controlled component requires.
+ *
+ * **`aria-live` is tied to intent, not to movement.** The live region is `polite` only while the
+ * carousel is idle, and `off` while it is auto-playing. Announcing every automatic change would
+ * make a screen reader talk over the user indefinitely; announcing a change the user *asked* for
+ * is exactly what they need.
+ *
+ * **Auto-play ships with a real pause control**, not just pause-on-hover. WCAG 2.2.2 requires a
+ * mechanism to stop content that moves automatically for more than five seconds, and hover is not
+ * one — it is unavailable to keyboard and touch users, and vanishes the moment the pointer moves.
+ *
+ * **Off-screen slides are `inert`.** They are laid out beside the visible one, so without it every
+ * link and button in all of them sits in the tab order, and Tab appears to focus nothing.
+ */
+declare function Carousel({ items, value, defaultValue, onChange, loop, autoPlay, interval, showDots, showArrows, draggable, label, className, style, }: CarouselProps): react.JSX.Element | null;
+
 type AlertTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
 interface AlertProps {
     tone?: AlertTone;
@@ -549,4 +761,5 @@ declare function Callout({ label, tone, icon, className, children }: CalloutProp
 
 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 };
+export { Alert, AnimatedGradient, AuroraBackground, Banner, BeforeAfter, BentoGrid, BentoItem, Button, Callout, CardStack, Carousel, Constellation, DeviceMockup, Dock, FAQAccordion, Fireflies, FloatingGeometry, GlowCard, IconButton, LightRays, LiquidBlob, LoadingDots, MeshGradient, MeteorShower, NoiseLayer, NumberTicker, Orbit, ParticleField, PowderExplosion, PricingTable, Rain, ScrambleText, ShinyText, Skeleton, Smoke, Snow, Spinner, Spotlight, SpotlightCard, StrangeAttractor, Swarm, TextRotate, TiltCard3D, ToastProvider, Typewriter, VERSION, Waves, createEffectComponent, useToast };
+export type { AlertProps, AlertTone, BannerProps, BeforeAfterProps, BentoGridProps, BentoItemProps, ButtonProps, ButtonSize, ButtonVariant, CalloutProps, CardStackProps, CarouselProps, DeviceMockupProps, DockItem, DockProps, DotsProps, EffectComponent, EffectComponentBaseProps, EffectComponentProps, FAQAccordionProps, FaqItem, GlowCardProps, IconButtonProps, MockupVariant, NumberTickerProps, PricingPlan, PricingTableProps, ScrambleTextProps, ShinyTextProps, SkeletonProps, SpinnerProps, SpotlightCardProps, TextRotateAnimation, TextRotateProps, TiltCard3DProps, Toast, ToastVariant, TypewriterProps };

package/dist/index.d.ts

@@ -1,18 +1,18 @@
 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';
+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 useTickerSubscriberCount, i as useWindowScroll } from './use-observers-DvA7hSz4.js';
 import * as react from 'react';
-import { ForwardRefExoticComponent, ElementType, ReactNode, ComponentPropsWithoutRef, RefAttributes, ButtonHTMLAttributes, HTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, ElementType, ReactNode, ComponentPropsWithoutRef, RefAttributes, ButtonHTMLAttributes, HTMLAttributes, CSSProperties } from 'react';
 import * as _ansh_ui_core from '@ansh-ui/core';
-import { BaseEffectOptions, EffectDefinition } from '@ansh-ui/core';
+import { BaseEffectOptions, EffectDefinition, TextScrambleOptions } 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 { 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-DoT_sTl1.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-CW6cGpSF.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';
+export { A as AppShell, a as AppShellProps, N as NavItem, b as NavSection, S as Sidebar, c as SidebarProps } from './sidebar-Dyt67t2z.js';
 
 /**
  * Turn an {@link EffectDefinition} into a React component.
@@ -98,6 +98,25 @@ declare const LiquidBlob: EffectComponent<_ansh_ui_core.BlobOptions>;
 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>;
+/** Volumetric shafts fanning from a source point, with noise-driven per-shaft brightness. */
+declare const LightRays: EffectComponent<_ansh_ui_core.LightRaysOptions>;
+/** A rising plume: curl-advected puffs that expand and dissipate over their life. */
+declare const Smoke: EffectComponent<_ansh_ui_core.SmokeOptions>;
+/**
+ * Bursts of fine particles that decelerate hard and settle.
+ *
+ * Bursts arrive on a Poisson schedule, and — with `burstOnPress` — on pointer press, which makes
+ * this the one background here that doubles as a click affordance.
+ */
+declare const PowderExplosion: EffectComponent<_ansh_ui_core.PowderExplosionOptions>;
+/** Polygons drifting in depth, projected through a real perspective divide. */
+declare const FloatingGeometry: EffectComponent<_ansh_ui_core.FloatingGeometryOptions>;
+/** Nested rings of points circling a centre, depth-ordered so near points occlude far ones. */
+declare const Orbit: EffectComponent<_ansh_ui_core.OrbitOptions>;
+/** A chaotic iterated map plotted as a drifting cloud — Clifford, de Jong or Svensson. */
+declare const StrangeAttractor: EffectComponent<_ansh_ui_core.StrangeAttractorOptions>;
+/** Particles bound to moving attractors, orbiting rather than collapsing. Follows the pointer. */
+declare const Swarm: EffectComponent<_ansh_ui_core.SwarmOptions>;
 
 /**
  * Buttons.
@@ -465,6 +484,199 @@ interface FAQAccordionProps {
  */
 declare function FAQAccordion({ items, multiple, defaultOpen, className, }: FAQAccordionProps): react.JSX.Element;
 
+interface ScrambleTextProps extends TextScrambleOptions {
+    /** The finished text. Must be a plain string — the behaviour owns this node's text content. */
+    children: string;
+    /** Element to render. Default `'span'`. */
+    as?: ElementType;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function ScrambleText({ children, as, className, style, ...options }: ScrambleTextProps): react.JSX.Element;
+
+/**
+ * A headline word that cycles through alternatives.
+ *
+ * ```tsx
+ * <h1>Built for <TextRotate words={['designers', 'engineers', 'teams']} /></h1>
+ * ```
+ *
+ * **The box is sized to the longest word, up front.** The naive version sizes to the current word,
+ * so the surrounding sentence reflows on every rotation — the text after it visibly jumps, and on
+ * a two-line headline the whole layout shifts. Every candidate is rendered once, hidden and
+ * unmeasured by the reader, purely to hold the width open. This is a layout-stability fix, not a
+ * visual one: it is the difference between a device that feels designed and one that feels broken.
+ *
+ * **It is not a live region.** Rotating text is decorative emphasis, not new information. Marking
+ * it `aria-live` would make a screen reader interrupt itself every two seconds, forever. The
+ * current word is in the accessible tree and read normally when traversed; changes are silent.
+ *
+ * **Reduced motion stops the rotation entirely**, rather than swapping instantly. A word that
+ * changes with no transition is more jarring than one that does not change at all, and the
+ * sentence still reads correctly with a single word in place.
+ */
+type TextRotateAnimation = 'slide' | 'fade' | 'flip';
+interface TextRotateProps {
+    /** The alternatives to cycle. The first is shown initially and under reduced motion. */
+    words: readonly string[];
+    /** Seconds each word is held. Default `2.2`. */
+    interval?: number;
+    /** How a word leaves and the next arrives. Default `'slide'`. */
+    animation?: TextRotateAnimation;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function TextRotate({ words, interval, animation, className, style, }: TextRotateProps): react.JSX.Element;
+
+/**
+ * A before/after comparison with a draggable divider.
+ *
+ * **The clip is on the top layer, not a width change.** Both layers are absolutely positioned at
+ * full size and the top one is revealed with `clip-path: inset(...)`. Resizing it instead would
+ * re-lay-out its contents as the handle moves, so an image would squash rather than be uncovered —
+ * which defeats the entire purpose of the control.
+ *
+ * **It is a real slider.** `role="slider"` with `aria-valuenow` and arrow-key handling, so it is
+ * operable without a pointer. Comparison sliders are very often built as a bare div with a
+ * `pointermove` listener, which makes them completely unusable by keyboard and invisible to
+ * assistive technology.
+ *
+ * **Pointer capture, not window listeners.** `setPointerCapture` keeps the drag attached to the
+ * handle even when the pointer leaves the element, and releases automatically if the gesture is
+ * cancelled — no global `pointermove`/`pointerup` pair to leak on unmount.
+ */
+interface BeforeAfterProps {
+    /** Content revealed on the left of the divider. */
+    before: ReactNode;
+    /** Content revealed on the right of the divider. */
+    after: ReactNode;
+    /** Divider position as a percentage, `0`–`100`. Controlled. */
+    value?: number;
+    /** Initial position when uncontrolled. Default `50`. */
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    /** Percentage points moved per arrow key press. Default `4`. */
+    step?: number;
+    /** Accessible name for the divider. Default `'Comparison position'`. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function BeforeAfter({ before, after, value, defaultValue, onValueChange, step, label, className, style, }: BeforeAfterProps): react.JSX.Element;
+
+/**
+ * A device or browser frame to present a screenshot, a demo, or a live component in.
+ *
+ * Purely presentational, and deliberately so — it exists because "here is the thing I built" is a
+ * layout problem, not an animation one. Anything placed inside keeps working: this renders a frame
+ * around real DOM, not a picture of one, so a live interactive demo can sit in it.
+ *
+ * **The chrome is `aria-hidden`.** Traffic-light dots, a notch and a fake URL are decoration; they
+ * carry no information a screen reader user needs, and announcing "three circles" before every
+ * demo is noise. Only the content inside the screen is in the accessible tree.
+ *
+ * **The URL is not a link and not an input.** It is a static label. Making it either would invite
+ * clicks that go nowhere, which is worse than obviously-inert chrome.
+ */
+type MockupVariant = 'browser' | 'window' | 'phone';
+interface DeviceMockupProps {
+    /** Frame style. Default `'browser'`. */
+    variant?: MockupVariant;
+    /** Address shown in the browser chrome. Ignored by the other variants. */
+    url?: string;
+    /** Title shown in the window chrome. Ignored by the other variants. */
+    title?: string;
+    /** Accessible name for the framed region, e.g. `'Dashboard preview'`. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+declare function DeviceMockup({ variant, url, title, label, className, style, children, }: DeviceMockupProps): react.JSX.Element;
+
+/**
+ * A deck of cards with the next few peeking out behind the top one.
+ *
+ * **Depth is a fixed ladder, not per-card state.** A card's offset, scale and rotation are derived
+ * from its distance from the top of the deck, so advancing only changes one number and every card
+ * transitions to its new rung. Animating each card's transform imperatively would mean tracking
+ * n transforms and reconciling them on every change — this way the CSS transition does it.
+ *
+ * **Only the top card is reachable, by any route.** The cards behind it get both `aria-hidden` and
+ * `inert`. Either alone is a trap: `aria-hidden` on its own leaves a buried button still reachable
+ * by Tab, so keyboard focus lands on a control the screen reader will not announce. A reader
+ * should encounter one card, not four overlapping ones, three of them 80% hidden.
+ *
+ * **Auto-play stops under reduced motion and while hovered or focused.** Content that moves itself
+ * away from a reader mid-sentence is a WCAG 2.2 pause/stop concern, not a preference — hovering or
+ * tabbing into the deck is a strong signal that someone is reading it.
+ */
+interface CardStackProps {
+    /** Cards, front to back. */
+    items: readonly ReactNode[];
+    /** Advance on a timer. Default `true`. */
+    autoPlay?: boolean;
+    /** Seconds each card is held when auto-playing. Default `3.5`. */
+    interval?: number;
+    /** How many cards behind the top one are visible. Default `2`. */
+    peek?: number;
+    /** Render previous/next buttons. Default `true`. */
+    controls?: boolean;
+    /** Accessible name for the deck. Default `'Card stack'`. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function CardStack({ items, autoPlay, interval, peek, controls, label, className, style, }: CardStackProps): react.JSX.Element | null;
+
+interface CarouselProps {
+    /** Slides, in order. */
+    items: readonly ReactNode[];
+    /** Active slide index. Controlled. */
+    value?: number;
+    /** Initial slide when uncontrolled. Default `0`. */
+    defaultValue?: number;
+    onChange?: (index: number) => void;
+    /** Wrap past the ends. Default `true`. */
+    loop?: boolean;
+    /** Advance on a timer. Default `false`. */
+    autoPlay?: boolean;
+    /** Seconds each slide is held when auto-playing. Default `5`. */
+    interval?: number;
+    /** Render the dot indicators. Default `true`. */
+    showDots?: boolean;
+    /** Render the previous/next arrows. Default `true`. */
+    showArrows?: boolean;
+    /** Allow dragging the track to change slides. Default `true`. */
+    draggable?: boolean;
+    /** Accessible name for the carousel region. */
+    label: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A carousel.
+ *
+ * **Transform, not scroll.** The track is translated by `index × 100%`. A scroll-snap carousel gets
+ * native touch feel for free but makes the *scroll position* the source of truth, so the active
+ * index has to be inferred back out of it with an observer — and that inference disagrees with the
+ * controlled `value` prop the moment both try to drive at once. One transform keeps the index
+ * authoritative, which is what a controlled component requires.
+ *
+ * **`aria-live` is tied to intent, not to movement.** The live region is `polite` only while the
+ * carousel is idle, and `off` while it is auto-playing. Announcing every automatic change would
+ * make a screen reader talk over the user indefinitely; announcing a change the user *asked* for
+ * is exactly what they need.
+ *
+ * **Auto-play ships with a real pause control**, not just pause-on-hover. WCAG 2.2.2 requires a
+ * mechanism to stop content that moves automatically for more than five seconds, and hover is not
+ * one — it is unavailable to keyboard and touch users, and vanishes the moment the pointer moves.
+ *
+ * **Off-screen slides are `inert`.** They are laid out beside the visible one, so without it every
+ * link and button in all of them sits in the tab order, and Tab appears to focus nothing.
+ */
+declare function Carousel({ items, value, defaultValue, onChange, loop, autoPlay, interval, showDots, showArrows, draggable, label, className, style, }: CarouselProps): react.JSX.Element | null;
+
 type AlertTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
 interface AlertProps {
     tone?: AlertTone;
@@ -549,4 +761,5 @@ declare function Callout({ label, tone, icon, className, children }: CalloutProp
 
 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 };
+export { Alert, AnimatedGradient, AuroraBackground, Banner, BeforeAfter, BentoGrid, BentoItem, Button, Callout, CardStack, Carousel, Constellation, DeviceMockup, Dock, FAQAccordion, Fireflies, FloatingGeometry, GlowCard, IconButton, LightRays, LiquidBlob, LoadingDots, MeshGradient, MeteorShower, NoiseLayer, NumberTicker, Orbit, ParticleField, PowderExplosion, PricingTable, Rain, ScrambleText, ShinyText, Skeleton, Smoke, Snow, Spinner, Spotlight, SpotlightCard, StrangeAttractor, Swarm, TextRotate, TiltCard3D, ToastProvider, Typewriter, VERSION, Waves, createEffectComponent, useToast };
+export type { AlertProps, AlertTone, BannerProps, BeforeAfterProps, BentoGridProps, BentoItemProps, ButtonProps, ButtonSize, ButtonVariant, CalloutProps, CardStackProps, CarouselProps, DeviceMockupProps, DockItem, DockProps, DotsProps, EffectComponent, EffectComponentBaseProps, EffectComponentProps, FAQAccordionProps, FaqItem, GlowCardProps, IconButtonProps, MockupVariant, NumberTickerProps, PricingPlan, PricingTableProps, ScrambleTextProps, ShinyTextProps, SkeletonProps, SpinnerProps, SpotlightCardProps, TextRotateAnimation, TextRotateProps, TiltCard3DProps, Toast, ToastVariant, TypewriterProps };