@ansh-ui/vue 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,439 @@
+export { AnchoredPosition, AnchoredPositionOptions, DismissOptions, UseInViewOptions, getLayerStack, getTabbable, useAnchoredPosition, useAnimate, useAnimatedFrom, useAutoFocus, useControllableState, useDismiss, useElementSize, useFocusRestore, useFocusTrap, useFrameBudget, useInView, useMotionRef, useMotionStyle, useMotionValue, usePointer, usePresence, useReducedMotion, useRovingFocus, useScrollLock, useScrollProgress, useSpringValue, useTicker, useWindowScroll } from './primitives.js';
+import * as vue from 'vue';
+import { DefineComponent, Ref, PropType, Plugin } from 'vue';
+import * as _ansh_ui_core from '@ansh-ui/core';
+import { BaseEffectOptions, EffectDefinition, BaseBehaviourOptions, BehaviourDefinition, ReducedMotionMode } 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 { AnimatePresence, AnimatePresenceProps, AnimatedText, Draggable, DraggableProps, GradientText, Motion, MotionConfig, MotionConfigValue, MotionTransition, MotionValues, ThemeContextValue, ThemeProvider, ThemeSetting, themeScript, useMotionConfig, useTheme } from './motion.js';
+import { S as SlotContent } from './utils-IKPG3zcC.js';
+export { R as ReadonlyRef, c as cx, r as resolveSlotContent, u as useId } from './utils-IKPG3zcC.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-Cn7qP1pn.js';
+export { AspectRatio, AspectRatioProps, Center, CenterProps, 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, ChoiceCard, ColorPicker, ColorPickerProps, Combobox, DatePicker, DatePickerProps, DateRange, DateRangePicker, DateRangePickerProps, Dropzone, DropzoneFile, Field, FieldContextValue, FieldControlAttrs, Fieldset, Input, InputSize, NumberInput, OptionList, OptionListProps, PinInput, Radio, RadioGroup, RadioGroupProps, RangeSlider, Rating, RatingSize, Select, SelectOption, Slider, SliderMark, Switch, TagsInput, Textarea, VisuallyHidden, addDays, addMonths, filterOptions, firstEnabled, isSameDay, scoreOption, startOfDay, stepActive, useFieldContext, useFieldControl, useTypeahead } from './form.js';
+export { AlertDialog, ContextMenu, Dialog, DialogFooter, DialogSize, Drawer, DrawerSide, DropdownMenu, HoverCard, MenuAction, MenuCheckbox, MenuEntry, MenuRadioGroup, MenuSubmenu, Popover, PopoverContent, PopoverTrigger, Tooltip, TooltipProvider } from './overlay.js';
+export { Avatar, AvatarGroup, AvatarProps, Badge, 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, AccordionVariant, Breadcrumbs, Collapsible, CollapsibleProps, Crumb, DisclosureList, DisclosureListProps, MegaMenuColumn, MegaMenuLink, NavMenuItem, NavigationMenu, Step, Stepper, StepperOrientation, TabItem, Tabs, TabsOrientation, TabsSize, TabsVariant } from './navigation.js';
+export { A as AppShell, N as NavItem, a as NavSection, S as Sidebar } from './sidebar-CTZ-Ckko.js';
+
+/**
+ * Turn an {@link EffectDefinition} into a Vue 3 component.
+ *
+ * The Vue counterpart of the React factory, and the reason both frameworks are supported without
+ * duplicating a single line of visual logic. All behaviour lives in `@ansh-ui/core`; this file owns
+ * only the Vue lifecycle.
+ *
+ * ```ts
+ * export const AuroraBackground = createEffectComponent(aurora, 'AuroraBackground')
+ * ```
+ *
+ * What each generated component provides:
+ *
+ *  - **SSR safety.** `mountEffect` runs in `onMounted`, which never executes on the server, so the
+ *    server-rendered markup is the host element and its slot content — identical to the first
+ *    client render, so hydration is clean.
+ *  - **Live prop updates.** A deep watcher on the resolved options calls `handle.update()`, which
+ *    live-updates what it can and remounts only structural changes.
+ *  - **Attribute fall-through** via `inheritAttrs: false` plus explicit binding, so `class`,
+ *    `style` and listeners land on the host element and merge with our own positioning styles
+ *    rather than replacing them.
+ *  - **Complete teardown** in `onBeforeUnmount`.
+ */
+/** Props every generated effect component accepts beyond its own options. */
+interface EffectComponentBaseProps {
+    /** Tag or component to render as the host. Default `'div'`. */
+    as?: string;
+}
+/**
+ * The public type of a generated component.
+ *
+ * `DefineComponent<Props>` gives full prop autocompletion and type-checking inside SFC templates,
+ * which is the whole point of generating a real component rather than exposing a directive.
+ */
+type VueEffectComponent<Options extends BaseEffectOptions> = DefineComponent<Options & EffectComponentBaseProps>;
+declare function createEffectComponent<Options extends BaseEffectOptions>(definition: EffectDefinition<Options>, name?: string): VueEffectComponent<Options>;
+
+/**
+ * Turn a {@link BehaviourDefinition} into a Vue 3 component.
+ *
+ * Unlike the effect factory this renders its slot content **directly**, with no positioned wrapper:
+ * a behaviour manipulates the host element itself, and injecting a wrapper would break the author's
+ * layout — a magnetic button inside an extra div is no longer a flex child of its container.
+ */
+interface BehaviourComponentBaseProps {
+    as?: string;
+}
+type VueBehaviourComponent<Options extends BaseBehaviourOptions> = DefineComponent<Options & BehaviourComponentBaseProps>;
+declare function createBehaviourComponent<Options extends BaseBehaviourOptions, El extends HTMLElement = HTMLElement>(definition: BehaviourDefinition<Options, El>, name?: string, defaultTag?: string): VueBehaviourComponent<Options>;
+/**
+ * Attach a behaviour to an element you already have a template ref to.
+ *
+ * The composable form, for when a behaviour must apply to an existing component's own element
+ * rather than to a wrapper — which is most of the time when integrating with a design system.
+ *
+ * ```vue
+ * <script setup>
+ * const button = ref(null)
+ * useBehaviour(button, magnetic, { strength: 16 })
+ * </script>
+ * <template><button ref="button">Go</button></template>
+ * ```
+ *
+ * The target is watched rather than read once, so it works with `v-if` and with elements that
+ * mount after setup.
+ */
+declare function useBehaviour<Options extends BaseBehaviourOptions, El extends HTMLElement>(target: Ref<El | null | undefined>, definition: BehaviourDefinition<Options, El>, options?: Options | (() => Partial<Options>)): void;
+
+/**
+ * The Vue component set.
+ *
+ * Every component is one factory call over the same `@ansh-ui/core` definition the React package
+ * uses. That is the payoff of the layered architecture: parity between frameworks is structural
+ * rather than something to be maintained by hand, and a fix to an effect fixes it everywhere.
+ *
+ * ```vue
+ * <script setup>
+ * import { AuroraBackground, MagneticButton } from '@ansh-ui/vue'
+ * </script>
+ *
+ * <template>
+ *   <AuroraBackground :colors="['#0275f4', '#9f0550']" class="hero">
+ *     <h1>Motion, refined.</h1>
+ *     <MagneticButton :strength="16">Get started</MagneticButton>
+ *   </AuroraBackground>
+ * </template>
+ * ```
+ */
+/** Vertical curtains of light with ridged filament structure. */
+declare const AuroraBackground: VueEffectComponent<_ansh_ui_core.AuroraOptions>;
+/** Soft overlapping colour fields drifting on non-repeating Lissajous paths. */
+declare const MeshGradient: VueEffectComponent<_ansh_ui_core.MeshGradientOptions>;
+/** A rotating multi-stop linear gradient. One fill per frame. */
+declare const AnimatedGradient: VueEffectComponent<_ansh_ui_core.AnimatedGradientOptions>;
+/** Points advected by a divergence-free curl-noise flow field. */
+declare const ParticleField: VueEffectComponent<_ansh_ui_core.ParticleFieldOptions>;
+/** Drifting nodes joined by lines, with the pointer as a live node. */
+declare const Constellation: VueEffectComponent<_ansh_ui_core.ConstellationOptions>;
+/** Streaks falling across the canvas, spawned as a Poisson process. */
+declare const MeteorShower: VueEffectComponent<_ansh_ui_core.MeteorsOptions>;
+/** Depth-parallaxed rain, optionally with splash rings. */
+declare const Rain: VueEffectComponent<_ansh_ui_core.RainOptions>;
+/** Depth-parallaxed snow with independent per-flake sway. */
+declare const Snow: VueEffectComponent<_ansh_ui_core.SnowOptions>;
+/** Wandering points with asymmetric bioluminescent pulsing. */
+declare const Fireflies: VueEffectComponent<_ansh_ui_core.FirefliesOptions>;
+/** Layered undulating bands from three incommensurable sines plus noise. */
+declare const Waves: VueEffectComponent<_ansh_ui_core.WavesOptions>;
+/** Organic shapes morphing via noise sampled on a closed circle. */
+declare const LiquidBlob: VueEffectComponent<_ansh_ui_core.BlobOptions>;
+/** Film grain overlay. Hides gradient banding and gives flat colour texture. */
+declare const NoiseLayer: VueEffectComponent<_ansh_ui_core.NoiseLayerOptions>;
+/** A soft light following the pointer, easing in and out. */
+declare const Spotlight: VueEffectComponent<_ansh_ui_core.SpotlightOptions>;
+/** An element that leans toward the pointer, spring-driven. Renders a `<button>` by default. */
+declare const MagneticButton: VueBehaviourComponent<_ansh_ui_core.MagneticOptions>;
+/** A card that rotates in 3D toward the pointer, with a moving specular highlight. */
+declare const TiltCard: VueBehaviourComponent<_ansh_ui_core.TiltOptions>;
+/** A wave expanding from the point of contact. Also fires on Enter and Space. */
+declare const Ripple: VueBehaviourComponent<_ansh_ui_core.RippleOptions>;
+/** Seamless infinite scrolling. Speed is in pixels per second, not a duration. */
+declare const Marquee: VueBehaviourComponent<_ansh_ui_core.MarqueeOptions>;
+/** Reveal content as it enters the viewport. Degrades to visible if JavaScript never runs. */
+declare const ScrollReveal: VueBehaviourComponent<_ansh_ui_core.ScrollRevealOptions>;
+/** Move an element at a different rate from the scroll. Disabled under reduced motion. */
+declare const Parallax: VueBehaviourComponent<_ansh_ui_core.ParallaxOptions>;
+
+type AlertTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+type AlertVariant = 'soft' | 'outline' | 'solid';
+/**
+ * An inline message — the Vue counterpart of `@ansh-ui/react`'s `Alert`.
+ *
+ * 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.
+ *
+ * The React version's `children` prop (the message body) is this component's default slot — the
+ * primary content, same split `Field` uses between its default slot (the control) and its
+ * `label`/`description`/`error` props (short annotations). `title` and `actions` stay props for the
+ * same reason those are props on `Field`.
+ */
+declare const Alert: vue.DefineComponent<vue.ExtractPropTypes<{
+    tone: {
+        type: PropType<AlertTone>;
+        default: string;
+    };
+    title: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+    /** Replace the default icon, or pass `null` to omit it. */
+    icon: {
+        type: PropType<SlotContent | null>;
+        default: undefined;
+    };
+    /** Show a dismiss button. */
+    dismissible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Buttons or links under the message. */
+    actions: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+    variant: {
+        type: PropType<AlertVariant>;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "dismiss"[], "dismiss", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    tone: {
+        type: PropType<AlertTone>;
+        default: string;
+    };
+    title: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+    /** Replace the default icon, or pass `null` to omit it. */
+    icon: {
+        type: PropType<SlotContent | null>;
+        default: undefined;
+    };
+    /** Show a dismiss button. */
+    dismissible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Buttons or links under the message. */
+    actions: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+    variant: {
+        type: PropType<AlertVariant>;
+        default: string;
+    };
+}>> & Readonly<{
+    onDismiss?: ((...args: any[]) => any) | undefined;
+}>, {
+    title: SlotContent;
+    icon: SlotContent;
+    variant: AlertVariant;
+    tone: AlertTone;
+    dismissible: boolean;
+    actions: SlotContent;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+/**
+ * A full-width page-level message — the Vue counterpart of `@ansh-ui/react`'s `Banner`. 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. Implemented as a thin wrapper over
+ * `Alert` (fixed `variant="solid"`), forwarding every slot.
+ */
+declare const Banner: vue.DefineComponent<vue.ExtractPropTypes<{
+    tone: {
+        type: PropType<AlertTone>;
+        default: string;
+    };
+    title: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+    icon: {
+        type: PropType<SlotContent | null>;
+        default: undefined;
+    };
+    dismissible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    actions: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+    /** Pin to the top of the viewport. */
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "dismiss"[], "dismiss", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    tone: {
+        type: PropType<AlertTone>;
+        default: string;
+    };
+    title: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+    icon: {
+        type: PropType<SlotContent | null>;
+        default: undefined;
+    };
+    dismissible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    actions: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+    /** Pin to the top of the viewport. */
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onDismiss?: ((...args: any[]) => any) | undefined;
+}>, {
+    sticky: boolean;
+    title: SlotContent;
+    icon: SlotContent;
+    tone: AlertTone;
+    dismissible: boolean;
+    actions: SlotContent;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+/**
+ * A documentation callout — the Vue counterpart of `@ansh-ui/react`'s `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 const Callout: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Short label — "Note", "Tip", "Warning". */
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tone: {
+        type: PropType<AlertTone>;
+        default: string;
+    };
+    icon: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Short label — "Note", "Tip", "Warning". */
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tone: {
+        type: PropType<AlertTone>;
+        default: string;
+    };
+    icon: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    label: string;
+    icon: SlotContent;
+    tone: AlertTone;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * The Vue plugin.
+ *
+ * Optional. Importing components directly is the tree-shakeable path and what most applications
+ * should do; this exists for two cases where global registration is genuinely better:
+ *
+ *  1. **Prototyping and playgrounds**, where per-file imports are friction.
+ *  2. **Applications with runtime-compiled templates** (a CMS, a low-code builder), where the
+ *     component name is a string and cannot be statically imported at all.
+ *
+ * It also provides the single place to apply app-wide motion configuration, which is the React
+ * package's `<MotionConfig>` equivalent.
+ *
+ * ## Why the application components are imported by name rather than `import * as`
+ *
+ * The effects and behaviours (`./components/index`) get the blanket `import * as` treatment because
+ * that module exports *only* components — every named export is safe to hand to `app.component()`.
+ * The application-layer modules don't have that property: `form/listbox.ts` exports `OptionList` (a
+ * component) alongside `filterOptions`, `firstEnabled`, `stepActive` and `useTypeahead` (plain
+ * functions), and several others mix a component with its `useXxx` composable or context accessor
+ * the same way. A blanket spread would hand those functions to `app.component()` too, which either
+ * throws or silently registers something that isn't a component — so every application component
+ * is imported and listed explicitly here instead.
+ */
+interface AnshPluginOptions {
+    /**
+     * Prefix for globally registered component names. Default `'Ansh'`, giving
+     * `<AnshAuroraBackground>`. Pass `''` for the bare names.
+     */
+    prefix?: string;
+    /** Register components globally. Default `true`. */
+    registerComponents?: boolean;
+    /**
+     * Application-level reduced-motion override.
+     *
+     * `'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.
+     */
+    reducedMotion?: ReducedMotionMode;
+    /** Global playback rate. `0.5` is slow motion across every animation. Default `1`. */
+    timeScale?: number;
+    /** Pin adaptive quality. Omit to let the frame budget decide, which is almost always right. */
+    quality?: number;
+    /**
+     * 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.
+     */
+    pauseWhenHidden?: boolean;
+    /** Also pause when the window loses focus. Default `false`. */
+    pauseWhenBlurred?: boolean;
+    /** Reduce quality on low battery where the platform exposes it. Default `true`. */
+    respectBattery?: boolean;
+}
+declare const AnshPlugin: Plugin<AnshPluginOptions[]>;
+
+/**
+ * @ansh-ui/vue — Ansh for Vue 3 and Nuxt.
+ *
+ * Every component is a thin binding over `@ansh-ui/core`. The engine owns all behaviour; this
+ * package owns the Vue lifecycle, reactivity boundaries and SSR correctness.
+ *
+ * ```vue
+ * <script setup>
+ * import { AuroraBackground, AnimatedText, MagneticButton } from '@ansh-ui/vue'
+ * </script>
+ *
+ * <template>
+ *   <AuroraBackground :colors="['#0275f4', '#9f0550']" class="hero">
+ *     <AnimatedText text="Motion, refined." by="chars" from="center" />
+ *     <MagneticButton :strength="16">Get started</MagneticButton>
+ *   </AuroraBackground>
+ * </template>
+ * ```
+ *
+ * For Nuxt, install `@ansh-ui/nuxt` instead — it registers every component for auto-import and
+ * handles the SSR transpile.
+ *
+ * ## Designed UI components
+ *
+ * Everything under "Forms" / "Overlays" / "Data" / "Navigation" / "Feedback" / "Layout" below needs
+ * the stylesheet:
+ *
+ * ```ts
+ * import '@ansh-ui/tokens/ansh.css'
+ * import '@ansh-ui/vue/styles.css'
+ * ```
+ */
+
+declare const VERSION = "0.1.0";
+
+export { Alert, type AlertTone, type AlertVariant, AnimatedGradient, AnshPlugin, type AnshPluginOptions, AuroraBackground, Banner, type BehaviourComponentBaseProps, Callout, Constellation, type EffectComponentBaseProps, Fireflies, LiquidBlob, MagneticButton, Marquee, MeshGradient, MeteorShower, NoiseLayer, Parallax, ParticleField, Rain, Ripple, ScrollReveal, SlotContent, Snow, Spotlight, TiltCard, VERSION, type VueBehaviourComponent, type VueEffectComponent, Waves, createBehaviourComponent, createEffectComponent, useBehaviour };