@ansh-ui/vue 0.2.0

package/dist/index.js

@@ -0,0 +1,547 @@
+import { Resizable, VStack, Stack, Spacer, ScrollArea, HStack, GridItem, Grid, Divider, Container, Center, AspectRatio } from './chunk-B6OXKW5Q.js';
+export { AspectRatio, Center, Container, Divider, Grid, GridItem, HStack, Resizable, ScrollArea, Spacer, Stack, VStack } from './chunk-B6OXKW5Q.js';
+import { DateRangePicker, DatePicker, Calendar, ColorPicker, Dropzone, Rating, TagsInput, PinInput, Slider, RangeSlider, Combobox, Select, OptionList, Switch, RadioGroup, Radio, ChoiceCard, Checkbox, Textarea, NumberInput, Input, VisuallyHidden, Fieldset, Field } from './chunk-SOYRICHU.js';
+export { Calendar, Checkbox, ChoiceCard, ColorPicker, Combobox, DatePicker, DateRangePicker, Dropzone, Field, Fieldset, Input, NumberInput, OptionList, PinInput, Radio, RadioGroup, RangeSlider, Rating, Select, Slider, Switch, TagsInput, Textarea, VisuallyHidden, addDays, addMonths, filterOptions, firstEnabled, isSameDay, scoreOption, startOfDay, stepActive, useFieldContext, useFieldControl, useTypeahead } from './chunk-SOYRICHU.js';
+import { DropdownMenu, ContextMenu, Drawer, TooltipProvider, Tooltip, PopoverTrigger, PopoverContent, Popover, HoverCard, DialogFooter, Dialog, AlertDialog } from './chunk-2VSROZ2N.js';
+export { AlertDialog, ContextMenu, Dialog, DialogFooter, Drawer, DropdownMenu, HoverCard, Popover, PopoverContent, PopoverTrigger, Tooltip, TooltipProvider } from './chunk-2VSROZ2N.js';
+export { usePresence } from './chunk-6XJOB6LE.js';
+export { computePosition, getLayerStack, useAnchoredPosition, useDismiss, useScrollLock } from './chunk-XZ5ZFLZM.js';
+import { Progress, Meter, CircularProgress, Timeline, Stat, Kbd, EmptyState, DescriptionList, CodeBlock, Badge, AvatarGroup, Avatar, Table, Pagination, DataTable } from './chunk-FVKLCGA4.js';
+export { Avatar, AvatarGroup, Badge, CircularProgress, CodeBlock, DataTable, DescriptionList, EmptyState, Kbd, Meter, Pagination, Progress, Stat, Table, Timeline } from './chunk-FVKLCGA4.js';
+import { DisclosureList, Collapsible, Accordion, Tabs, NavigationMenu, Stepper, Breadcrumbs } from './chunk-T425FIC7.js';
+export { Accordion, Breadcrumbs, Collapsible, DisclosureList, NavigationMenu, Stepper, Tabs } from './chunk-T425FIC7.js';
+import { AppShell, Sidebar } from './chunk-ZGMXOMCB.js';
+export { AppShell, Sidebar } from './chunk-ZGMXOMCB.js';
+export { getTabbable, useAutoFocus, useFocusRestore, useFocusTrap, useRovingFocus } from './chunk-TMG3M6TK.js';
+export { useControllableState } from './chunk-OAQ7MDYX.js';
+import { Motion, Draggable, AnimatePresence, ThemeProvider, MotionConfig, AnimatedText, GradientText } from './chunk-6ABPGOJP.js';
+export { AnimatePresence, AnimatedText, Draggable, GradientText, Motion, MotionConfig, ThemeProvider, themeScript, useMotionConfig, useTheme } from './chunk-6ABPGOJP.js';
+export { useAnimate, useAnimatedFrom, useElementSize, useFrameBudget, useInView, useMotionRef, useMotionStyle, useMotionValue, usePointer, useReducedMotion, useScrollProgress, useSpringValue, useTicker, useWindowScroll } from './chunk-EVO23GUS.js';
+import { __export, resolveSlotContent, cx } from './chunk-NJDDNO4C.js';
+export { cx, resolveSlotContent, useId } from './chunk-NJDDNO4C.js';
+import { defineComponent, ref, h, onMounted, watch, onBeforeUnmount, getCurrentScope, onScopeDispose } from 'vue';
+import { mountEffect, mountBehaviour, aurora, meshGradient, animatedGradient, particleField, constellation, meteors, rain, snow, fireflies, waves, blob, noiseLayer, spotlight, magnetic, tilt, ripple, marquee, scrollReveal, parallax, setReducedMotionMode, getTicker, attachLifecycle } from '@ansh-ui/core';
+export { MotionValue, 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';
+
+var HOST_STYLE = {
+  position: "relative",
+  isolation: "isolate",
+  overflow: "hidden"
+};
+var CONTENT_STYLE = {
+  position: "relative",
+  zIndex: 1
+};
+function createEffectComponent(definition, name) {
+  const optionKeys = Object.keys(definition.defaults);
+  const props = {};
+  for (const key of optionKeys) {
+    props[key] = { type: null, default: void 0 };
+  }
+  props.as = { type: String, default: void 0 };
+  const component = defineComponent({
+    name: name ?? `Ansh${pascal(definition.name)}`,
+    // Attributes are bound explicitly below so our positioning styles merge with the author's
+    // rather than being overwritten by automatic inheritance.
+    inheritAttrs: false,
+    props,
+    setup(componentProps, { slots, attrs, expose }) {
+      const host = ref(null);
+      let handle = null;
+      const collect = () => {
+        const out = {};
+        for (const key of optionKeys) {
+          const value = componentProps[key];
+          if (value !== void 0) out[key] = value;
+        }
+        return out;
+      };
+      onMounted(() => {
+        if (!host.value) return;
+        handle = mountEffect(definition, host.value, collect());
+      });
+      watch(collect, (next) => handle?.update(next), { deep: true, flush: "post" });
+      onBeforeUnmount(() => {
+        handle?.destroy();
+        handle = null;
+      });
+      expose({
+        pause: () => handle?.pause(),
+        resume: () => handle?.resume(),
+        renderOnce: () => handle?.renderOnce(),
+        get canvas() {
+          return handle?.canvas ?? null;
+        }
+      });
+      return () => {
+        const tag = componentProps.as ?? "div";
+        const { class: className, style, ...rest } = attrs;
+        return h(
+          tag,
+          {
+            ref: host,
+            class: className,
+            // Array form lets Vue merge our styles with the author's, with theirs winning.
+            style: [HOST_STYLE, style],
+            ...rest
+          },
+          slots.default ? [h("div", { style: CONTENT_STYLE }, slots.default())] : void 0
+        );
+      };
+    }
+  });
+  return component;
+}
+function pascal(value) {
+  return value.replace(/(^|-)([a-z])/g, (_, __, letter) => letter.toUpperCase());
+}
+function createBehaviourComponent(definition, name, defaultTag = "div") {
+  const optionKeys = Object.keys(definition.defaults);
+  const props = {};
+  for (const key of optionKeys) {
+    props[key] = { type: null, default: void 0 };
+  }
+  props.as = { type: String, default: void 0 };
+  const component = defineComponent({
+    name: name ?? `Ansh${pascal2(definition.name)}`,
+    inheritAttrs: false,
+    props,
+    setup(componentProps, { slots, attrs, expose }) {
+      const host = ref(null);
+      let handle = null;
+      const collect = () => {
+        const out = {};
+        for (const key of optionKeys) {
+          const value = componentProps[key];
+          if (value !== void 0) out[key] = value;
+        }
+        return out;
+      };
+      onMounted(() => {
+        if (!host.value) return;
+        handle = mountBehaviour(definition, host.value, collect());
+      });
+      watch(collect, (next) => handle?.update(next), { deep: true, flush: "post" });
+      onBeforeUnmount(() => {
+        handle?.destroy();
+        handle = null;
+      });
+      expose({
+        get element() {
+          return host.value;
+        }
+      });
+      return () => {
+        const tag = componentProps.as ?? defaultTag;
+        return h(tag, { ref: host, ...attrs }, slots.default?.());
+      };
+    }
+  });
+  return component;
+}
+function useBehaviour(target, definition, options) {
+  let handle = null;
+  const resolve = () => typeof options === "function" ? options() : options ?? {};
+  watch(
+    target,
+    (element) => {
+      handle?.destroy();
+      handle = null;
+      if (!element) return;
+      handle = mountBehaviour(definition, element, resolve());
+    },
+    { immediate: true, flush: "post" }
+  );
+  watch(resolve, (next) => handle?.update(next), { deep: true, flush: "post" });
+  if (getCurrentScope()) {
+    onScopeDispose(() => {
+      handle?.destroy();
+      handle = null;
+    });
+  }
+}
+function pascal2(value) {
+  return value.replace(/(^|-)([a-z])/g, (_, __, letter) => letter.toUpperCase());
+}
+
+// src/components/index.ts
+var components_exports = {};
+__export(components_exports, {
+  AnimatedGradient: () => AnimatedGradient,
+  AuroraBackground: () => AuroraBackground,
+  Constellation: () => Constellation,
+  Fireflies: () => Fireflies,
+  LiquidBlob: () => LiquidBlob,
+  MagneticButton: () => MagneticButton,
+  Marquee: () => Marquee,
+  MeshGradient: () => MeshGradient,
+  MeteorShower: () => MeteorShower,
+  NoiseLayer: () => NoiseLayer,
+  Parallax: () => Parallax,
+  ParticleField: () => ParticleField,
+  Rain: () => Rain,
+  Ripple: () => Ripple,
+  ScrollReveal: () => ScrollReveal,
+  Snow: () => Snow,
+  Spotlight: () => Spotlight,
+  TiltCard: () => TiltCard,
+  Waves: () => Waves
+});
+var AuroraBackground = createEffectComponent(aurora, "AuroraBackground");
+var MeshGradient = createEffectComponent(meshGradient, "MeshGradient");
+var AnimatedGradient = createEffectComponent(animatedGradient, "AnimatedGradient");
+var ParticleField = createEffectComponent(particleField, "ParticleField");
+var Constellation = createEffectComponent(constellation, "Constellation");
+var MeteorShower = createEffectComponent(meteors, "MeteorShower");
+var Rain = createEffectComponent(rain, "Rain");
+var Snow = createEffectComponent(snow, "Snow");
+var Fireflies = createEffectComponent(fireflies, "Fireflies");
+var Waves = createEffectComponent(waves, "Waves");
+var LiquidBlob = createEffectComponent(blob, "LiquidBlob");
+var NoiseLayer = createEffectComponent(noiseLayer, "NoiseLayer");
+var Spotlight = createEffectComponent(spotlight, "Spotlight");
+var MagneticButton = createBehaviourComponent(magnetic, "MagneticButton", "button");
+var TiltCard = createBehaviourComponent(tilt, "TiltCard");
+var Ripple = createBehaviourComponent(ripple, "Ripple");
+var Marquee = createBehaviourComponent(marquee, "Marquee");
+var ScrollReveal = createBehaviourComponent(scrollReveal, "ScrollReveal");
+var Parallax = createBehaviourComponent(parallax, "Parallax");
+var ICONS = {
+  info: () => h(
+    "svg",
+    {
+      viewBox: "0 0 20 20",
+      width: "18",
+      height: "18",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "1.6"
+    },
+    [
+      h("circle", { cx: "10", cy: "10", r: "7.5" }),
+      h("path", { d: "M10 9v4.5", "stroke-linecap": "round" }),
+      h("circle", { cx: "10", cy: "6.5", r: "0.9", fill: "currentColor", stroke: "none" })
+    ]
+  ),
+  success: () => h(
+    "svg",
+    {
+      viewBox: "0 0 20 20",
+      width: "18",
+      height: "18",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "1.6"
+    },
+    [
+      h("circle", { cx: "10", cy: "10", r: "7.5" }),
+      h("path", {
+        d: "M6.5 10.3l2.4 2.4 4.6-5.2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      })
+    ]
+  ),
+  warning: () => h(
+    "svg",
+    {
+      viewBox: "0 0 20 20",
+      width: "18",
+      height: "18",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "1.6"
+    },
+    [
+      h("path", {
+        d: "M8.6 3.2L1.9 14.6a1.6 1.6 0 001.4 2.4h13.4a1.6 1.6 0 001.4-2.4L11.4 3.2a1.6 1.6 0 00-2.8 0z",
+        "stroke-linejoin": "round"
+      }),
+      h("path", { d: "M10 7.5v3.5", "stroke-linecap": "round" }),
+      h("circle", { cx: "10", cy: "13.6", r: "0.9", fill: "currentColor", stroke: "none" })
+    ]
+  ),
+  danger: () => h(
+    "svg",
+    {
+      viewBox: "0 0 20 20",
+      width: "18",
+      height: "18",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "1.6"
+    },
+    [
+      h("circle", { cx: "10", cy: "10", r: "7.5" }),
+      h("path", { d: "M7.5 7.5l5 5M12.5 7.5l-5 5", "stroke-linecap": "round" })
+    ]
+  ),
+  neutral: null
+};
+var Alert = defineComponent({
+  name: "AnshAlert",
+  inheritAttrs: false,
+  props: {
+    tone: { type: String, default: "info" },
+    title: { type: [String, Object, Function], default: void 0 },
+    /** Replace the default icon, or pass `null` to omit it. */
+    icon: { type: [String, Object, Function], default: void 0 },
+    /** Show a dismiss button. */
+    dismissible: { type: Boolean, default: false },
+    /** Buttons or links under the message. */
+    actions: { type: [String, Object, Function], default: void 0 },
+    variant: { type: String, default: "soft" }
+  },
+  emits: ["dismiss"],
+  setup(props, { attrs, emit, slots }) {
+    const visible = ref(true);
+    return () => {
+      if (!visible.value) return null;
+      const { class: attrClass, ...restAttrs } = attrs;
+      const urgent = props.tone === "danger" || props.tone === "warning";
+      const resolvedIcon = props.icon === void 0 ? ICONS[props.tone]?.() ?? null : props.icon === null ? null : resolveSlotContent(props.icon);
+      return h(
+        "div",
+        {
+          class: cx(
+            "ansh-alert",
+            `ansh-alert--${props.tone}`,
+            `ansh-alert--${props.variant}`,
+            attrClass
+          ),
+          role: urgent ? "alert" : "status",
+          // Errors are assertive; everything else waits for a natural pause.
+          "aria-live": urgent ? "assertive" : "polite",
+          ...restAttrs
+        },
+        [
+          resolvedIcon !== null ? h("span", { class: "ansh-alert__icon", "aria-hidden": "true" }, [resolvedIcon]) : null,
+          h("div", { class: "ansh-alert__body" }, [
+            props.title ? h("p", { class: "ansh-alert__title" }, [resolveSlotContent(props.title)]) : null,
+            slots.default ? h("div", { class: "ansh-alert__message" }, slots.default()) : null,
+            props.actions ? h("div", { class: "ansh-alert__actions" }, [resolveSlotContent(props.actions)]) : null
+          ]),
+          props.dismissible ? h(
+            "button",
+            {
+              type: "button",
+              class: "ansh-alert__close ansh-focusable",
+              "aria-label": "Dismiss message",
+              onClick: () => {
+                visible.value = false;
+                emit("dismiss");
+              }
+            },
+            [
+              h(
+                "svg",
+                { viewBox: "0 0 16 16", width: "12", height: "12", "aria-hidden": "true" },
+                [
+                  h("path", {
+                    d: "M4 4l8 8M12 4l-8 8",
+                    stroke: "currentColor",
+                    "stroke-width": "1.75",
+                    "stroke-linecap": "round",
+                    fill: "none"
+                  })
+                ]
+              )
+            ]
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var Banner = defineComponent({
+  name: "AnshBanner",
+  inheritAttrs: false,
+  props: {
+    tone: { type: String, default: "info" },
+    title: { type: [String, Object, Function], default: void 0 },
+    icon: { type: [String, Object, Function], default: void 0 },
+    dismissible: { type: Boolean, default: false },
+    actions: { type: [String, Object, Function], default: void 0 },
+    /** Pin to the top of the viewport. */
+    sticky: { type: Boolean, default: false }
+  },
+  emits: ["dismiss"],
+  setup(props, { attrs, emit, slots }) {
+    return () => {
+      const { class: attrClass, ...restAttrs } = attrs;
+      return h(
+        Alert,
+        {
+          tone: props.tone,
+          title: props.title,
+          icon: props.icon,
+          dismissible: props.dismissible,
+          actions: props.actions,
+          variant: "solid",
+          class: cx("ansh-banner", props.sticky && "ansh-banner--sticky", attrClass),
+          onDismiss: () => emit("dismiss"),
+          ...restAttrs
+        },
+        slots
+      );
+    };
+  }
+});
+var Callout = defineComponent({
+  name: "AnshCallout",
+  inheritAttrs: false,
+  props: {
+    /** Short label — "Note", "Tip", "Warning". */
+    label: { type: String, default: void 0 },
+    tone: { type: String, default: "info" },
+    icon: { type: [String, Object, Function], default: void 0 }
+  },
+  setup(props, { attrs, slots }) {
+    return () => {
+      const { class: attrClass, ...restAttrs } = attrs;
+      const resolvedIcon = props.icon !== void 0 ? resolveSlotContent(props.icon) : ICONS[props.tone]?.() ?? null;
+      return h(
+        "aside",
+        {
+          class: cx("ansh-callout", `ansh-callout--${props.tone}`, attrClass),
+          ...restAttrs
+        },
+        [
+          h("span", { class: "ansh-callout__icon", "aria-hidden": "true" }, [resolvedIcon]),
+          h("div", { class: "ansh-callout__body" }, [
+            props.label ? h("p", { class: "ansh-callout__label" }, props.label) : null,
+            h("div", { class: "ansh-callout__content" }, slots.default?.())
+          ])
+        ]
+      );
+    };
+  }
+});
+var applicationComponents = {
+  MotionConfig,
+  ThemeProvider,
+  Field,
+  Fieldset,
+  VisuallyHidden,
+  Input,
+  NumberInput,
+  Textarea,
+  Checkbox,
+  ChoiceCard,
+  Radio,
+  RadioGroup,
+  Switch,
+  OptionList,
+  Select,
+  Combobox,
+  RangeSlider,
+  Slider,
+  PinInput,
+  TagsInput,
+  Rating,
+  Dropzone,
+  ColorPicker,
+  Calendar,
+  DatePicker,
+  DateRangePicker,
+  AlertDialog,
+  Dialog,
+  DialogFooter,
+  HoverCard,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Tooltip,
+  TooltipProvider,
+  Drawer,
+  ContextMenu,
+  DropdownMenu,
+  DataTable,
+  Pagination,
+  Table,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  CodeBlock,
+  DescriptionList,
+  EmptyState,
+  Kbd,
+  Stat,
+  Timeline,
+  CircularProgress,
+  Meter,
+  Progress,
+  Breadcrumbs,
+  Stepper,
+  Sidebar,
+  AppShell,
+  NavigationMenu,
+  Tabs,
+  Alert,
+  Banner,
+  Callout,
+  Accordion,
+  Collapsible,
+  DisclosureList,
+  AspectRatio,
+  Center,
+  Container,
+  Divider,
+  Grid,
+  GridItem,
+  HStack,
+  ScrollArea,
+  Spacer,
+  Stack,
+  VStack,
+  Resizable,
+  AnimatePresence,
+  Draggable,
+  Motion
+};
+var AnshPlugin = {
+  install(app, options = {}) {
+    const {
+      prefix = "Ansh",
+      registerComponents = true,
+      reducedMotion,
+      timeScale,
+      quality,
+      pauseWhenHidden = true,
+      pauseWhenBlurred = false,
+      respectBattery = true
+    } = options;
+    if (registerComponents) {
+      const all = {
+        ...components_exports,
+        GradientText,
+        AnimatedText,
+        ...applicationComponents
+      };
+      for (const [name, component] of Object.entries(all)) {
+        app.component(`${prefix}${name}`, component);
+      }
+    }
+    if (reducedMotion) setReducedMotionMode(reducedMotion);
+    const ticker = getTicker();
+    if (timeScale !== void 0) ticker.timeScale = timeScale;
+    if (quality !== void 0) ticker.lockQuality(quality);
+    if (typeof document !== "undefined") {
+      const detach = attachLifecycle(ticker, {
+        pauseWhenHidden,
+        pauseWhenBlurred,
+        respectBattery
+      });
+      const originalUnmount = app.unmount.bind(app);
+      app.unmount = () => {
+        detach();
+        originalUnmount();
+      };
+    }
+  }
+};
+var VERSION = "0.1.0";
+
+export { Alert, AnimatedGradient, AnshPlugin, AuroraBackground, Banner, Callout, Constellation, Fireflies, LiquidBlob, MagneticButton, Marquee, MeshGradient, MeteorShower, NoiseLayer, Parallax, ParticleField, Rain, Ripple, ScrollReveal, Snow, Spotlight, TiltCard, VERSION, Waves, createBehaviourComponent, createEffectComponent, useBehaviour };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map