@wow-two-beta/ui-vue 0.0.5 → 0.0.6

package/dist/chunks/BackToTopButton.vue_vue_type_script_setup_true_lang-CSRUFdcY.js

@@ -0,0 +1,936 @@
+import { defineComponent, useAttrs, computed, useTemplateRef, openBlock, createElementBlock, mergeProps, renderSlot, useSlots, watch, createBlock, unref, withCtx, ref, nextTick, createCommentVNode, normalizeClass, createElementVNode, inject, provide, watchPostEffect, shallowRef, createVNode, normalizeStyle, Fragment, renderList, resolveDynamicComponent } from "vue";
+import { c as cn } from "./Cn-CzDCF-Ah.js";
+import { O as Orientation } from "./Orientation-u-sYunuG.js";
+import { Check, Copy, ChevronDown, X, Plus, ArrowUp } from "lucide-vue-next";
+import { u as useClipboard } from "./UseClipboard-x6nEdQ9f.js";
+import { A as AriaAttribute } from "./AriaAttribute-CmUjjXjp.js";
+import { D as DomEvent, A as AttributeValue, u as useOutsideClick } from "./UseOutsideClick-8TTSb9x6.js";
+import { O as OptionalExtensions } from "./OptionalExtensions-NiO6gV0W.js";
+import { a as ButtonVariant, _ as _sfc_main$e } from "./Button.vue_vue_type_script_setup_true_lang-CLqRVtAu.js";
+import { _ as _sfc_main$f } from "./Icon.vue_vue_type_script_setup_true_lang-BVWSqaoe.js";
+import { u as useGoogleIdentity, G as GoogleIdentityStatus } from "./GoogleIdentity-D12Kr334.js";
+import { d as dataAttr } from "./DataAttr-7BR67dTj.js";
+import { B as ButtonType, H as HtmlElement } from "./HtmlValues-jlKY5f9C.js";
+import { S as Side } from "./Side-Kw61CDou.js";
+import { u as useControlled } from "./UseControlled-BQneb7BW.js";
+import { _ as _sfc_main$g, b as useRovingFocusItem } from "./RovingFocusGroup.vue_vue_type_script_setup_true_lang-BGZe5AX4.js";
+import { P as Primitive } from "./Primitive-Bt_MgDir.js";
+import { O as OverlayPosition } from "./OverlayPosition-BNybkMGG.js";
+import { K as Key } from "./Key-CQlkK53D.js";
+import { u as useEscape } from "./UseEscape-CYPdpm_l.js";
+import { tv } from "tailwind-variants";
+import { P as Presence } from "./Presence-BwBquQOQ.js";
+import { r as renderableChildren } from "./Slot-CLT4PkWl.js";
+const _hoisted_1$7 = ["data-orientation"];
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  ...{ name: "ButtonGroup", inheritAttrs: false },
+  __name: "ButtonGroup",
+  props: {
+    orientation: { default: Orientation.Horizontal },
+    isAttached: { type: Boolean, default: true }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const OwnedAttributes2 = /* @__PURE__ */ new Set(["class"]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OwnedAttributes2.has(key)))
+    );
+    const isHorizontal = computed(() => props.orientation === Orientation.Horizontal);
+    const rootClass = computed(
+      () => cn(
+        "inline-flex",
+        isHorizontal.value ? "flex-row" : "flex-col",
+        props.isAttached ? isHorizontal.value ? "[&>*]:rounded-none [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md [&>*:not(:first-child)]:-ml-px" : "[&>*]:rounded-none [&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md [&>*:not(:first-child)]:-mt-px" : "gap-2",
+        attrs.class
+      )
+    );
+    const root = useTemplateRef("root");
+    __expose({ el: root });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "root",
+        ref: root,
+        role: "group",
+        "data-orientation": __props.orientation,
+        class: rootClass.value
+      }, passthroughAttrs.value), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16, _hoisted_1$7);
+    };
+  }
+});
+const FabButtonVariant = {
+  /** Refers to the primary brand-filled surface. */
+  Primary: "primary",
+  /** Refers to the neutral card surface with a hairline border. */
+  Secondary: "secondary",
+  /** Refers to the destructive / error-filled surface. */
+  Destructive: "destructive"
+};
+const FabButtonSize = {
+  /** Refers to the small (2.5rem) diameter. */
+  Sm: "sm",
+  /** Refers to the medium (3.5rem) default diameter. */
+  Md: "md",
+  /** Refers to the large (4rem) diameter. */
+  Lg: "lg"
+};
+const fabVariants = tv({
+  base: "fixed inline-flex items-center justify-center rounded-full shadow-lg transition-all hover:shadow-xl focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  variants: {
+    variant: {
+      primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+      secondary: "bg-card text-card-foreground border border-border hover:bg-muted",
+      destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+    },
+    size: {
+      sm: "h-10 w-10",
+      md: "h-14 w-14",
+      lg: "h-16 w-16"
+    },
+    position: {
+      "bottom-right": "bottom-6 right-6",
+      "bottom-left": "bottom-6 left-6",
+      "bottom-center": "bottom-6 left-1/2 -translate-x-1/2",
+      "top-right": "top-6 right-6",
+      "top-left": "top-6 left-6",
+      "top-center": "top-6 left-1/2 -translate-x-1/2"
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+    position: "bottom-right"
+  }
+});
+const _hoisted_1$6 = ["type"];
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  ...{ name: "FabButton", inheritAttrs: false },
+  __name: "FabButton",
+  props: {
+    variant: {},
+    size: {},
+    position: {},
+    type: { default: ButtonType.Button }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const OwnedAttributes2 = /* @__PURE__ */ new Set(["class"]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OwnedAttributes2.has(key)))
+    );
+    const rootClass = computed(
+      () => cn(fabVariants({ variant: props.variant, size: props.size, position: props.position }), attrs.class)
+    );
+    const root = useTemplateRef("root");
+    __expose({ el: root });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", mergeProps({
+        ref_key: "root",
+        ref: root,
+        type: __props.type,
+        class: rootClass.value
+      }, passthroughAttrs.value), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16, _hoisted_1$6);
+    };
+  }
+});
+const OwnedAttributes = [AriaAttribute.Label];
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  ...{ name: "CopyButton", inheritAttrs: false },
+  __name: "CopyButton",
+  props: {
+    text: {},
+    resetAfter: { default: 2e3 },
+    copiedAriaLabel: {},
+    variant: { default: ButtonVariant.Ghost }
+  },
+  emits: ["error"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const OwnedAttributeLookup = new Set(OwnedAttributes);
+    const attrs = useAttrs();
+    const { copied, error, copy } = useClipboard({ resetAfter: () => props.resetAfter });
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OwnedAttributeLookup.has(key)))
+    );
+    const effectiveAriaLabel = computed(() => {
+      const label = attrs[AriaAttribute.Label];
+      return copied.value ? props.copiedAriaLabel ?? label : label;
+    });
+    const fallbackIcon = computed(() => copied.value ? Check : Copy);
+    watch(error, (next) => {
+      if (next) emit(DomEvent.Error, next);
+    });
+    function handleClick() {
+      void copy(props.text);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$e, mergeProps({
+        variant: __props.variant,
+        "aria-label": effectiveAriaLabel.value,
+        "data-copied": unref(OptionalExtensions).from(unref(copied), unref(AttributeValue).True)
+      }, passthroughAttrs.value, { onClick: handleClick }), {
+        default: withCtx(() => [
+          slots.default ? renderSlot(_ctx.$slots, "default", {
+            copied: unref(copied),
+            error: unref(error)
+          }, void 0, void 0, 0) : (openBlock(), createBlock(unref(_sfc_main$f), {
+            key: 1,
+            icon: fallbackIcon.value,
+            size: 16
+          }, null, 8, ["icon"]))
+        ]),
+        _: 3
+      }, 16, ["variant", "aria-label", "data-copied"]);
+    };
+  }
+});
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  ...{ name: "GoogleSignInButton", inheritAttrs: false },
+  __name: "GoogleSignInButton",
+  props: {
+    clientId: {},
+    theme: { default: "outline" },
+    size: { default: "large" },
+    text: { default: "signin_with" },
+    shape: { default: "rectangular" },
+    width: {},
+    logoAlignment: { default: "left" },
+    locale: {},
+    autoSelect: { type: Boolean, default: false }
+  },
+  emits: ["credential", "error"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const host = ref(null);
+    const identity = useGoogleIdentity({
+      clientId: () => props.clientId,
+      onCredential: (credential, response) => emit("credential", credential, response),
+      onError: (error) => emit("error", error),
+      autoSelect: () => props.autoSelect
+    });
+    const buttonOptions = computed(() => ({
+      theme: props.theme,
+      size: props.size,
+      text: props.text,
+      shape: props.shape,
+      width: props.width,
+      logo_alignment: props.logoAlignment,
+      locale: props.locale
+    }));
+    const isReady = computed(() => identity.status.value === GoogleIdentityStatus.Ready);
+    watch(
+      [isReady, buttonOptions, host],
+      async () => {
+        if (!isReady.value) return;
+        await nextTick();
+        const target = host.value;
+        if (!target) return;
+        target.replaceChildren();
+        identity.renderButton(target, buttonOptions.value);
+      },
+      { immediate: true }
+    );
+    return (_ctx, _cache) => {
+      return __props.clientId ? (openBlock(), createElementBlock("div", mergeProps({
+        key: 0,
+        ref_key: "host",
+        ref: host
+      }, _ctx.$attrs), null, 16)) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$5 = ["type", "aria-expanded", "data-state", "data-disabled"];
+const _hoisted_2$1 = { class: "flex-1 text-left" };
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  ...{ name: "DisclosureButton", inheritAttrs: false },
+  __name: "DisclosureButton",
+  props: {
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: false },
+    chevronSide: { default: Side.Right },
+    type: { default: ButtonType.Button }
+  },
+  emits: ["update:open"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const { value: open, setValue: setOpen } = useControlled({
+      controlled: () => props.open,
+      default: props.defaultOpen,
+      onChange: (next) => emit("update:open", next)
+    });
+    const OwnedAttributes2 = /* @__PURE__ */ new Set(["class"]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OwnedAttributes2.has(key)))
+    );
+    const chevronClass = computed(() => cn("transition-transform", open.value && "rotate-180"));
+    const rootClass = computed(
+      () => cn(
+        "inline-flex w-full items-center justify-between gap-2 rounded-md px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+        attrs.class
+      )
+    );
+    function handleClick(event) {
+      if (event.defaultPrevented) return;
+      setOpen(!open.value);
+    }
+    const root = useTemplateRef("root");
+    __expose({ el: root });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", mergeProps({
+        ref_key: "root",
+        ref: root,
+        type: __props.type,
+        "aria-expanded": unref(open),
+        "data-state": unref(open) ? "open" : "closed",
+        "data-disabled": unref(dataAttr)(unref(attrs).disabled),
+        class: rootClass.value
+      }, passthroughAttrs.value, { onClick: handleClick }), [
+        __props.chevronSide === unref(Side).Left ? (openBlock(), createBlock(unref(_sfc_main$f), {
+          key: 0,
+          icon: unref(ChevronDown),
+          size: 16,
+          class: normalizeClass(chevronClass.value)
+        }, null, 8, ["icon", "class"])) : createCommentVNode("", true),
+        createElementVNode("span", _hoisted_2$1, [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        __props.chevronSide === unref(Side).Right ? (openBlock(), createBlock(unref(_sfc_main$f), {
+          key: 1,
+          icon: unref(ChevronDown),
+          size: 16,
+          class: normalizeClass(chevronClass.value)
+        }, null, 8, ["icon", "class"])) : createCommentVNode("", true)
+      ], 16, _hoisted_1$5);
+    };
+  }
+});
+const ToolbarKey = Symbol("wow-two.toolbar");
+function useToolbarContext() {
+  const context = inject(ToolbarKey, null);
+  if (!context) throw new Error("Toolbar.* must be used inside <Toolbar>");
+  return context;
+}
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  ...{ name: "Toolbar", inheritAttrs: false },
+  __name: "Toolbar",
+  props: {
+    orientation: { default: Orientation.Horizontal }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    provide(ToolbarKey, {
+      get orientation() {
+        return props.orientation;
+      }
+    });
+    const OwnedAttributes2 = /* @__PURE__ */ new Set(["class"]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OwnedAttributes2.has(key)))
+    );
+    const rootClass = computed(
+      () => cn(
+        "inline-flex items-center gap-1 rounded-md border border-border bg-background p-1",
+        props.orientation === Orientation.Vertical && "flex-col items-stretch",
+        attrs.class
+      )
+    );
+    const root = useTemplateRef("root");
+    const el = computed(() => {
+      const node = root.value?.$el;
+      return node instanceof HTMLElement ? node : null;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$g), mergeProps({
+        ref_key: "root",
+        ref: root,
+        orientation: __props.orientation,
+        "can-loop": "",
+        role: "toolbar",
+        "aria-orientation": __props.orientation,
+        "data-orientation": __props.orientation,
+        class: rootClass.value
+      }, passthroughAttrs.value), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["orientation", "aria-orientation", "data-orientation", "class"]);
+    };
+  }
+});
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  ...{ name: "ToolbarButton", inheritAttrs: false },
+  __name: "ToolbarButton",
+  props: {
+    asChild: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const attrs = useAttrs();
+    const roving = useRovingFocusItem();
+    const OwnedAttributes2 = /* @__PURE__ */ new Set(["class"]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OwnedAttributes2.has(key)))
+    );
+    const rootClass = computed(
+      () => props.asChild ? cn(attrs.class) : cn(
+        "inline-flex h-8 items-center justify-center rounded-sm px-2 text-sm transition-colors hover:bg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+        attrs.class
+      )
+    );
+    function handleKeydown(event) {
+      if (event.defaultPrevented) return;
+      roving.onKeydown(event);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), mergeProps({
+        ref: unref(roving).ref,
+        as: unref(HtmlElement).Button,
+        "as-child": __props.asChild,
+        type: __props.asChild ? void 0 : unref(ButtonType).Button,
+        tabindex: unref(roving).tabindex,
+        "data-roving-focus-item": unref(roving)["data-roving-focus-item"],
+        class: rootClass.value
+      }, passthroughAttrs.value, {
+        onFocus: _cache[0] || (_cache[0] = ($event) => unref(roving).onFocus()),
+        onKeydown: handleKeydown
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["as", "as-child", "type", "tabindex", "data-roving-focus-item", "class"]);
+    };
+  }
+});
+const _hoisted_1$4 = ["tabindex", "data-roving-focus-item"];
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  ...{ name: "ToolbarLink", inheritAttrs: false },
+  __name: "ToolbarLink",
+  setup(__props) {
+    const attrs = useAttrs();
+    const roving = useRovingFocusItem();
+    const OwnedAttributes2 = /* @__PURE__ */ new Set(["class"]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OwnedAttributes2.has(key)))
+    );
+    const rootClass = computed(
+      () => cn(
+        "inline-flex h-8 items-center justify-center rounded-sm px-2 text-sm text-foreground underline-offset-2 transition-colors hover:bg-muted hover:underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+        attrs.class
+      )
+    );
+    function handleKeydown(event) {
+      if (event.defaultPrevented) return;
+      roving.onKeydown(event);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("a", mergeProps({
+        ref: unref(roving).ref,
+        tabindex: unref(roving).tabindex,
+        "data-roving-focus-item": unref(roving)["data-roving-focus-item"],
+        class: rootClass.value
+      }, passthroughAttrs.value, {
+        onFocus: _cache[0] || (_cache[0] = ($event) => unref(roving).onFocus()),
+        onKeydown: handleKeydown
+      }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16, _hoisted_1$4);
+    };
+  }
+});
+const _hoisted_1$3 = ["aria-orientation"];
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...{ name: "ToolbarSeparator", inheritAttrs: false },
+  __name: "ToolbarSeparator",
+  setup(__props) {
+    const attrs = useAttrs();
+    const context = useToolbarContext();
+    const isVertical = computed(() => context.orientation === Orientation.Vertical);
+    const OwnedAttributes2 = /* @__PURE__ */ new Set(["class"]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OwnedAttributes2.has(key)))
+    );
+    const rootClass = computed(
+      () => cn("shrink-0 bg-border", isVertical.value ? "mx-1 h-px" : "my-1 w-px self-stretch", attrs.class)
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        role: "separator",
+        "aria-orientation": isVertical.value ? "horizontal" : "vertical",
+        class: rootClass.value
+      }, passthroughAttrs.value), null, 16, _hoisted_1$3);
+    };
+  }
+});
+const Toolbar = Object.assign(_sfc_main$8, {
+  Button: _sfc_main$7,
+  LinkItem: _sfc_main$6,
+  SeparatorLayout: _sfc_main$5
+});
+const SpeedDialGroupDirection = {
+  /** Refers to items stacking upward from the trigger. */
+  Up: "up",
+  /** Refers to items stacking downward from the trigger. */
+  Down: "down",
+  /** Refers to items stacking to the left of the trigger. */
+  Left: "left",
+  /** Refers to items stacking to the right of the trigger. */
+  Right: "right"
+};
+const SpeedDialGroupKey = Symbol("wow-two.speedDial");
+function useSpeedDialContext() {
+  const context = inject(SpeedDialGroupKey, null);
+  if (!context) throw new Error("SpeedDialGroup.* must be used inside <SpeedDialGroup>");
+  return context;
+}
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...{ name: "SpeedDialGroupList", inheritAttrs: false },
+  __name: "SpeedDialGroupList",
+  setup(__props) {
+    const attrs = useAttrs();
+    const OwnedAttributes2 = /* @__PURE__ */ new Set(["class"]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OwnedAttributes2.has(key)))
+    );
+    const rootClass = computed(
+      () => cn(
+        "group absolute flex",
+        /* list fade gated on data-state; motion-safe so reduced-motion users
+           get no movement. */
+        "motion-safe:data-[state=open]:animate-(--animate-fade-in)",
+        "motion-safe:data-[state=closed]:animate-(--animate-fade-out)",
+        "motion-reduce:animate-none",
+        /* Per-item enter stagger: ramp `animation-delay` on the first few items
+           while opening only (closed → delay 0 so no item outlasts the list's
+           own fade-out, which gates unmount). */
+        "motion-safe:group-data-[state=open]:[&>li:nth-child(2)]:[animation-delay:40ms]",
+        "motion-safe:group-data-[state=open]:[&>li:nth-child(3)]:[animation-delay:80ms]",
+        "motion-safe:group-data-[state=open]:[&>li:nth-child(4)]:[animation-delay:120ms]",
+        "motion-safe:group-data-[state=open]:[&>li:nth-child(n+5)]:[animation-delay:160ms]",
+        attrs.class
+      )
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("ul", mergeProps({
+        role: "menu",
+        class: rootClass.value
+      }, passthroughAttrs.value), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...{ name: "SpeedDialGroupTrigger", inheritAttrs: false },
+  __name: "SpeedDialGroupTrigger",
+  props: {
+    closedIcon: { type: [Object, String, Number, Boolean, null, Array], default: void 0 },
+    openIcon: { type: [Object, String, Number, Boolean, null, Array], default: void 0 },
+    variant: {},
+    size: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const attrs = useAttrs();
+    const context = useSpeedDialContext();
+    const ariaLabel = computed(() => attrs[AriaAttribute.Label] ?? "Toggle actions");
+    const OwnedAttributes2 = /* @__PURE__ */ new Set(["class", AriaAttribute.Label]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OwnedAttributes2.has(key)))
+    );
+    const ClosedIconProp = defineComponent({ render: () => props.closedIcon });
+    const OpenIconProp = defineComponent({ render: () => props.openIcon });
+    const fab = useTemplateRef("fab");
+    watchPostEffect(() => {
+      const node = fab.value?.$el;
+      context.triggerEl.value = node instanceof HTMLElement ? node : null;
+    });
+    const rootClass = computed(
+      () => cn("static !bottom-auto !left-auto !right-auto !top-auto !translate-x-0", attrs.class)
+    );
+    function handleClick(event) {
+      if (event.defaultPrevented) return;
+      context.setOpen(!context.open);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$c, mergeProps({
+        ref_key: "fab",
+        ref: fab
+      }, passthroughAttrs.value, {
+        "aria-label": ariaLabel.value,
+        "aria-haspopup": "menu",
+        "aria-expanded": unref(context).open,
+        variant: __props.variant,
+        size: __props.size,
+        position: unref(context).position,
+        class: rootClass.value,
+        onClick: handleClick
+      }), {
+        default: withCtx(() => [
+          unref(context).open ? renderSlot(_ctx.$slots, "open-icon", {}, () => [
+            __props.openIcon !== void 0 ? (openBlock(), createBlock(unref(OpenIconProp), { key: 0 })) : (openBlock(), createBlock(unref(_sfc_main$f), {
+              key: 1,
+              icon: unref(X),
+              size: 20
+            }, null, 8, ["icon"]))
+          ], void 0, 0) : renderSlot(_ctx.$slots, "closed-icon", {}, () => [
+            __props.closedIcon !== void 0 ? (openBlock(), createBlock(unref(ClosedIconProp), { key: 0 })) : (openBlock(), createBlock(unref(_sfc_main$f), {
+              key: 1,
+              icon: unref(Plus),
+              size: 20
+            }, null, 8, ["icon"]))
+          ], void 0, 1)
+        ]),
+        _: 3
+      }, 16, ["aria-label", "aria-expanded", "variant", "size", "position", "class"]);
+    };
+  }
+});
+const _hoisted_1$2 = ["data-state"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...{ name: "SpeedDialGroup", inheritAttrs: false },
+  __name: "SpeedDialGroup",
+  props: {
+    position: { default: OverlayPosition.BottomRight },
+    direction: { default: void 0 },
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: false },
+    gap: { default: 12 }
+  },
+  emits: ["update:open"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const OwnedAttributes2 = /* @__PURE__ */ new Set(["class"]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OwnedAttributes2.has(key)))
+    );
+    const PositionToDirection = {
+      "bottom-right": SpeedDialGroupDirection.Up,
+      "bottom-left": SpeedDialGroupDirection.Up,
+      "bottom-center": SpeedDialGroupDirection.Up,
+      "top-right": SpeedDialGroupDirection.Down,
+      "top-left": SpeedDialGroupDirection.Down,
+      "top-center": SpeedDialGroupDirection.Down
+    };
+    const PositionOffsets = {
+      "bottom-right": "bottom-6 right-6",
+      "bottom-left": "bottom-6 left-6",
+      "bottom-center": "bottom-6 left-1/2 -translate-x-1/2",
+      "top-right": "top-6 right-6",
+      "top-left": "top-6 left-6",
+      "top-center": "top-6 left-1/2 -translate-x-1/2"
+    };
+    const DirectionToStack = {
+      [SpeedDialGroupDirection.Up]: "flex-col-reverse bottom-full mb-3",
+      [SpeedDialGroupDirection.Down]: "flex-col top-full mt-3",
+      [SpeedDialGroupDirection.Left]: "flex-row-reverse right-full mr-3",
+      [SpeedDialGroupDirection.Right]: "flex-row top-1/2 -translate-y-1/2 left-full ml-3"
+    };
+    const { value: open, setValue: setOpen } = useControlled({
+      controlled: () => props.open,
+      default: props.defaultOpen,
+      onChange: (next) => emit("update:open", next)
+    });
+    const rootEl = useTemplateRef("rootEl");
+    const triggerEl = shallowRef(null);
+    const resolvedDirection = computed(() => props.direction ?? PositionToDirection[props.position]);
+    useEscape(() => {
+      setOpen(false);
+      requestAnimationFrame(() => triggerEl.value?.focus());
+    }, open);
+    useOutsideClick(
+      rootEl,
+      () => {
+        if (open.value) setOpen(false);
+      },
+      open
+    );
+    provide(SpeedDialGroupKey, {
+      get open() {
+        return open.value;
+      },
+      setOpen,
+      triggerEl,
+      get direction() {
+        return resolvedDirection.value;
+      },
+      get position() {
+        return props.position;
+      }
+    });
+    function splitChildren(keepTrigger) {
+      return renderableChildren(slots.default?.()).filter(
+        (child) => child.type === _sfc_main$3 === keepTrigger
+      );
+    }
+    const rootClass = computed(() => cn("fixed", PositionOffsets[props.position], attrs.class));
+    const stackClass = computed(() => DirectionToStack[resolvedDirection.value]);
+    function handleKeydown(event) {
+      if (!open.value || event.key !== Key.ArrowDown && event.key !== Key.ArrowUp) return;
+      const root = rootEl.value;
+      if (!root) return;
+      const items = Array.from(root.querySelectorAll('[role="menuitem"]'));
+      if (items.length === 0) return;
+      event.preventDefault();
+      const currentIndex = items.indexOf(document.activeElement);
+      const nextIndex = currentIndex === -1 ? event.key === Key.ArrowDown ? 0 : items.length - 1 : (currentIndex + (event.key === Key.ArrowDown ? 1 : -1) + items.length) % items.length;
+      items[nextIndex]?.focus();
+    }
+    __expose({ el: rootEl });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "rootEl",
+        ref: rootEl,
+        "data-state": unref(open) ? "open" : "closed",
+        class: rootClass.value
+      }, passthroughAttrs.value, { onKeydown: handleKeydown }), [
+        createVNode(unref(Presence), { "is-present": unref(open) }, {
+          default: withCtx(() => [
+            createVNode(_sfc_main$4, {
+              "data-direction": resolvedDirection.value,
+              style: normalizeStyle({ gap: `${__props.gap}px` }),
+              class: normalizeClass(stackClass.value)
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(splitChildren(false), (node, index) => {
+                  return openBlock(), createBlock(resolveDynamicComponent(node), {
+                    key: node.key ?? index
+                  });
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["data-direction", "style", "class"])
+          ]),
+          _: 1
+        }, 8, ["is-present"]),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(splitChildren(true), (node, index) => {
+          return openBlock(), createBlock(resolveDynamicComponent(node), {
+            key: node.key ?? index
+          });
+        }), 128))
+      ], 16, _hoisted_1$2);
+    };
+  }
+});
+const _hoisted_1$1 = ["data-side"];
+const _hoisted_2 = {
+  key: 0,
+  class: "rounded-md bg-popover px-2 py-1 text-xs text-popover-foreground shadow"
+};
+const _hoisted_3 = ["type"];
+const _hoisted_4 = {
+  key: 1,
+  class: "rounded-md bg-popover px-2 py-1 text-xs text-popover-foreground shadow"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{ name: "SpeedDialGroupAction", inheritAttrs: false },
+  __name: "SpeedDialGroupAction",
+  props: {
+    icon: { type: [Object, String, Number, Boolean, null, Array], default: void 0 },
+    tooltip: { type: [Object, String, Number, Boolean, null, Array], default: void 0 },
+    type: { default: ButtonType.Button }
+  },
+  emits: ["select"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const context = useSpeedDialContext();
+    const DirectionLabelSide = {
+      [SpeedDialGroupDirection.Up]: Side.Right,
+      [SpeedDialGroupDirection.Down]: Side.Right,
+      [SpeedDialGroupDirection.Left]: Side.Right,
+      [SpeedDialGroupDirection.Right]: Side.Left
+    };
+    const IconProp = defineComponent({ render: () => props.icon });
+    const TooltipProp = defineComponent({ render: () => props.tooltip });
+    const labelSide = computed(() => DirectionLabelSide[context.direction]);
+    const hasTooltip = computed(() => props.tooltip !== void 0 || slots.tooltip !== void 0);
+    const OwnedAttributes2 = /* @__PURE__ */ new Set(["class"]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OwnedAttributes2.has(key)))
+    );
+    const buttonClass = computed(
+      () => cn(
+        "inline-flex h-10 w-10 items-center justify-center rounded-full bg-card text-card-foreground shadow-md transition-all hover:shadow-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+        attrs.class
+      )
+    );
+    function handleClick(event) {
+      if (event.defaultPrevented) return;
+      emit("select");
+      context.setOpen(false);
+      requestAnimationFrame(() => context.triggerEl.value?.focus());
+    }
+    const root = useTemplateRef("root");
+    __expose({ el: root });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("li", {
+        role: "none",
+        "data-side": labelSide.value,
+        class: normalizeClass(
+          unref(cn)(
+            "flex items-center gap-2",
+            /* fade+scale each action off the list's `group` state; motion-safe so
+               reduced-motion users get no movement (delay ramp lives on the list). */
+            "motion-safe:group-data-[state=open]:animate-(--animate-pop-in)",
+            "motion-safe:group-data-[state=closed]:animate-(--animate-pop-out)",
+            "motion-reduce:animate-none"
+          )
+        )
+      }, [
+        hasTooltip.value && labelSide.value === unref(Side).Left ? (openBlock(), createElementBlock("span", _hoisted_2, [
+          renderSlot(_ctx.$slots, "tooltip", {}, () => [
+            __props.tooltip !== void 0 ? (openBlock(), createBlock(unref(TooltipProp), { key: 0 })) : createCommentVNode("", true)
+          ])
+        ])) : createCommentVNode("", true),
+        createElementVNode("button", mergeProps({
+          ref_key: "root",
+          ref: root
+        }, passthroughAttrs.value, {
+          type: __props.type,
+          role: "menuitem",
+          class: buttonClass.value,
+          onClick: handleClick
+        }), [
+          renderSlot(_ctx.$slots, "icon", {}, () => [
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              __props.icon !== void 0 ? (openBlock(), createBlock(unref(IconProp), { key: 0 })) : createCommentVNode("", true)
+            ])
+          ])
+        ], 16, _hoisted_3),
+        hasTooltip.value && labelSide.value === unref(Side).Right ? (openBlock(), createElementBlock("span", _hoisted_4, [
+          renderSlot(_ctx.$slots, "tooltip", {}, () => [
+            __props.tooltip !== void 0 ? (openBlock(), createBlock(unref(TooltipProp), { key: 0 })) : createCommentVNode("", true)
+          ])
+        ])) : createCommentVNode("", true)
+      ], 10, _hoisted_1$1);
+    };
+  }
+});
+const SpeedDialGroup = Object.assign(_sfc_main$2, {
+  Trigger: _sfc_main$3,
+  Action: _sfc_main$1
+});
+const _hoisted_1 = ["type", "aria-label"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "BackToTopButton", inheritAttrs: false },
+  __name: "BackToTopButton",
+  props: {
+    threshold: { default: 400 },
+    scrollContainer: { default: null },
+    position: { default: OverlayPosition.BottomRight },
+    label: { type: [Object, String, Number, Boolean, null, Array], default: void 0 },
+    type: { default: ButtonType.Button }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const slots = useSlots();
+    const attrs = useAttrs();
+    const PositionClasses = {
+      "bottom-right": "bottom-6 right-6",
+      "bottom-left": "bottom-6 left-6",
+      "bottom-center": "bottom-6 left-1/2 -translate-x-1/2",
+      "top-right": "top-6 right-6",
+      "top-left": "top-6 left-6",
+      "top-center": "top-6 left-1/2 -translate-x-1/2"
+    };
+    const LabelProp = defineComponent({ render: () => props.label });
+    const hasLabel = computed(() => props.label !== void 0 || slots.label !== void 0);
+    const visible = shallowRef(false);
+    watchPostEffect((onCleanup) => {
+      if (typeof window === "undefined") return;
+      const element = props.scrollContainer ?? window;
+      const read = () => {
+        const y = "scrollY" in element ? element.scrollY : element.scrollTop;
+        visible.value = y >= props.threshold;
+      };
+      read();
+      const target = element;
+      target.addEventListener("scroll", read, { passive: true });
+      onCleanup(() => target.removeEventListener("scroll", read));
+    });
+    const ariaLabel = computed(() => attrs[AriaAttribute.Label] ?? "Back to top");
+    const OwnedAttributes2 = /* @__PURE__ */ new Set(["class", AriaAttribute.Label]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OwnedAttributes2.has(key)))
+    );
+    const rootClass = computed(
+      () => cn(
+        "fixed z-banner inline-flex items-center justify-center gap-2 rounded-full bg-card text-card-foreground shadow-lg ring-1 ring-border transition-all hover:shadow-xl focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+        hasLabel.value ? "h-11 px-4 text-sm font-medium" : "h-11 w-11",
+        PositionClasses[props.position],
+        attrs.class
+      )
+    );
+    function handleClick(event) {
+      if (event.defaultPrevented) return;
+      const reducedMotion = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+      const target = props.scrollContainer ?? window;
+      if ("scrollTo" in target) {
+        target.scrollTo({ top: 0, behavior: reducedMotion ? "auto" : "smooth" });
+      }
+    }
+    const root = useTemplateRef("root");
+    __expose({ el: root });
+    return (_ctx, _cache) => {
+      return visible.value ? (openBlock(), createElementBlock("button", mergeProps({
+        key: 0,
+        ref_key: "root",
+        ref: root,
+        type: __props.type,
+        "aria-label": ariaLabel.value,
+        class: rootClass.value
+      }, passthroughAttrs.value, { onClick: handleClick }), [
+        createVNode(unref(_sfc_main$f), {
+          icon: unref(ArrowUp),
+          size: 16
+        }, null, 8, ["icon"]),
+        renderSlot(_ctx.$slots, "label", {}, () => [
+          __props.label !== void 0 ? (openBlock(), createBlock(unref(LabelProp), { key: 0 })) : createCommentVNode("", true)
+        ])
+      ], 16, _hoisted_1)) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  FabButtonSize as F,
+  SpeedDialGroup as S,
+  Toolbar as T,
+  _sfc_main as _,
+  _sfc_main$d as a,
+  _sfc_main$b as b,
+  _sfc_main$9 as c,
+  _sfc_main$c as d,
+  FabButtonVariant as e,
+  _sfc_main$a as f,
+  _sfc_main$1 as g,
+  SpeedDialGroupDirection as h,
+  SpeedDialGroupKey as i,
+  _sfc_main$3 as j,
+  _sfc_main$7 as k,
+  ToolbarKey as l,
+  _sfc_main$6 as m,
+  _sfc_main$5 as n,
+  fabVariants as o,
+  useToolbarContext as p,
+  useSpeedDialContext as u
+};
+//# sourceMappingURL=BackToTopButton.vue_vue_type_script_setup_true_lang-CSRUFdcY.js.map