@wow-two-beta/ui-vue 0.0.2

package/dist/chunks/OptionTileGroup.vue_vue_type_script_setup_true_lang-BGSmXM_u.js

@@ -0,0 +1,943 @@
+import { defineComponent, useAttrs, useSlots, computed, watchEffect, normalizeStyle, getCurrentInstance, onBeforeUnmount, useTemplateRef, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createElementBlock, Fragment, toDisplayString, createCommentVNode, createElementVNode, inject, provide } from "vue";
+import { O as Orientation } from "./Orientation-u-sYunuG.js";
+import { u as useControlled } from "./useControlled-B6M4kTLn.js";
+import { c as cn } from "./cn-CzDCF-Ah.js";
+import { u as useFormControl } from "./FormControlContext-B71MFW26.js";
+import { _ as _sfc_main$6 } from "./Spinner.vue_vue_type_script_setup_true_lang-BAepBy2n.js";
+import { T as Tones } from "./Tones-CI65uuq9.js";
+import { tv } from "tailwind-variants";
+import { P as PressExtensions } from "./PressExtensions-DXqhjlR2.js";
+import { B as ButtonType, H as HtmlElement } from "./HtmlExtensions-jlKY5f9C.js";
+import { I as IS_DEV, C as ColorExtensions, O as OptionalExtensions, a as ColorTone } from "./Environment-CuQav_mw.js";
+import { C as CssExtensions } from "./CssExtensions-BzLJG57F.js";
+import { c as composeEventHandlers } from "./Side-CSys3p-F.js";
+import { P as Primitive } from "./Primitive-Cm3ECaVw.js";
+import { u as useDebounceHandler } from "./useDebounceHandler-BIZgvvGp.js";
+import { K as Key } from "./KeyboardExtensions-CQlkK53D.js";
+const ButtonVariant = {
+  /** Refers to an opaque, filled surface. */
+  Solid: "solid",
+  /** Refers to a muted/tinted fill. */
+  Soft: "soft",
+  /** Refers to a subtle tinted fill + tone-colored border. */
+  Surface: "surface",
+  /** Refers to a transparent fill + tone border. */
+  Outline: "outline",
+  /** Refers to a borderless, transparent-at-rest button. */
+  Ghost: "ghost",
+  /** Refers to a borderless button that reveals a bordered chip on hover/focus. */
+  Reveal: "reveal",
+  /** Refers to an inline text link. */
+  Link: "link",
+  /** Refers to a translucent glass wash + blur. */
+  Glass: "glass",
+  /** Refers to a glass surface with a hairline border. */
+  GlassSurface: "glass-surface"
+};
+const ButtonShape = {
+  /** Refers to the default (text-width) shape. */
+  Default: "default",
+  /** Refers to a square (1:1) icon shape. */
+  Square: "square",
+  /** Refers to a circular icon shape. */
+  Circle: "circle"
+};
+const buttonVariants = tv({
+  base: [
+    // layout
+    "group inline-flex items-center justify-center gap-2",
+    // typography
+    "font-medium align-middle",
+    // borders (forced-colors fallback)
+    "border border-transparent",
+    "forced-colors:border-[ButtonBorder]",
+    // transitions (color only)
+    "transition-colors duration-150 ease-out",
+    "motion-reduce:transition-none",
+    // focus
+    "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    // disabled (native attr handles click-blocking; pointer-events-none would
+    // suppress the cursor visual, so we don't add it here)
+    "disabled:opacity-50 disabled:cursor-not-allowed",
+    // skeleton state — wins over everything
+    "data-[state=skeleton]:!bg-muted data-[state=skeleton]:!text-transparent data-[state=skeleton]:!border-transparent data-[state=skeleton]:!cursor-default data-[state=skeleton]:!pointer-events-none data-[state=skeleton]:animate-pulse",
+    "data-[state=skeleton]:[&>*]:!invisible"
+  ],
+  variants: {
+    variant: {
+      solid: "",
+      soft: "",
+      surface: "",
+      outline: "bg-transparent",
+      ghost: "bg-transparent",
+      // Borderless + transparent at rest; on hover / focus-visible a bordered chip is
+      // revealed (border + bg + foreground text). Per-tone reveal target set via
+      // compoundVariants below. Pairs with `hoverSlot` for the icon-swap affordance.
+      reveal: "bg-transparent border-transparent",
+      link: "bg-transparent !h-auto !p-0 !rounded-none underline-offset-4 hover:underline focus-visible:ring-offset-0",
+      // Base = neutral/default tone: dark image-overlay wash + blur. Non-neutral tones resolve
+      // through the shared `Tones.glass` palette via compoundVariants below (so tone + color
+      // overrides apply). `backdrop-blur-md` stays here for every tone.
+      glass: "backdrop-blur-md",
+      "glass-surface": "backdrop-blur-md border-white/10"
+    },
+    tone: {
+      primary: "",
+      neutral: "",
+      danger: "",
+      success: "",
+      warning: ""
+    },
+    size: {
+      // min-h/min-w floor keeps the hit-target ≥ 24×24 (WCAG 2.2 SC 2.5.8) even when
+      // --ui-density-scale < 1 would otherwise shrink it below the floor. Applies to
+      // square/circle xs too (the min-h sets the box height; min-w the width).
+      xs: "h-[calc(1.5rem*var(--ui-density-scale,1))] min-h-6 min-w-6 px-[calc(0.5rem*var(--ui-density-scale,1))] text-xs rounded-sm gap-1",
+      sm: "h-[calc(2rem*var(--ui-density-scale,1))] px-[calc(0.75rem*var(--ui-density-scale,1))] text-sm rounded-md gap-1.5",
+      md: "h-[calc(2.5rem*var(--ui-density-scale,1))] px-[calc(1rem*var(--ui-density-scale,1))] text-sm rounded-md gap-2",
+      lg: "h-[calc(3rem*var(--ui-density-scale,1))] px-[calc(1.5rem*var(--ui-density-scale,1))] text-base rounded-lg gap-2",
+      xl: "h-[calc(3.5rem*var(--ui-density-scale,1))] px-[calc(2rem*var(--ui-density-scale,1))] text-base rounded-lg gap-2.5"
+    },
+    shape: {
+      default: "",
+      square: "aspect-square !px-0",
+      circle: "aspect-square !px-0 !rounded-full"
+    },
+    fullWidth: {
+      true: "w-full",
+      false: ""
+    },
+    wrap: {
+      true: "whitespace-normal text-left",
+      false: "whitespace-nowrap text-ellipsis overflow-hidden"
+    }
+  },
+  compoundVariants: [
+    // === SOLID × tone ===
+    { variant: "solid", tone: "primary", class: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/95" },
+    { variant: "solid", tone: "neutral", class: "bg-muted text-foreground hover:bg-muted/80 active:bg-muted/85" },
+    { variant: "solid", tone: "danger", class: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/95" },
+    { variant: "solid", tone: "success", class: "bg-success text-success-foreground hover:bg-success/90 active:bg-success/95" },
+    { variant: "solid", tone: "warning", class: "bg-warning text-warning-foreground hover:bg-warning/90 active:bg-warning/95" },
+    // === SOFT × tone ===
+    { variant: "soft", tone: "primary", class: "bg-primary-soft text-primary-soft-foreground hover:bg-primary-soft/80 active:bg-primary-soft/85" },
+    { variant: "soft", tone: "neutral", class: "bg-muted/60 text-foreground hover:bg-muted/80 active:bg-muted/85" },
+    { variant: "soft", tone: "danger", class: "bg-destructive-soft text-destructive-soft-foreground hover:bg-destructive-soft/80 active:bg-destructive-soft/85" },
+    { variant: "soft", tone: "success", class: "bg-success-soft text-success-soft-foreground hover:bg-success-soft/80 active:bg-success-soft/85" },
+    { variant: "soft", tone: "warning", class: "bg-warning-soft text-warning-soft-foreground hover:bg-warning-soft/80 active:bg-warning-soft/85" },
+    // === SURFACE × tone (subtle tinted bg + visible tone-colored border) ===
+    { variant: "surface", tone: "primary", class: "bg-primary/5 border-primary/40 text-primary hover:bg-primary/10 active:bg-primary/15" },
+    { variant: "surface", tone: "neutral", class: "bg-muted/30 border-border-strong text-foreground hover:bg-muted/50 active:bg-muted/70" },
+    { variant: "surface", tone: "danger", class: "bg-destructive/5 border-destructive/40 text-destructive hover:bg-destructive/10 active:bg-destructive/15" },
+    { variant: "surface", tone: "success", class: "bg-success/5 border-success/40 text-success hover:bg-success/10 active:bg-success/15" },
+    { variant: "surface", tone: "warning", class: "bg-warning/10 border-warning/40 text-warning hover:bg-warning/15 active:bg-warning/20" },
+    // === OUTLINE × tone ===
+    { variant: "outline", tone: "primary", class: "border-primary/50 text-primary hover:bg-primary/10 active:bg-primary/15" },
+    { variant: "outline", tone: "neutral", class: "border-border-strong text-foreground hover:bg-muted/50 active:bg-muted/70" },
+    { variant: "outline", tone: "danger", class: "border-destructive/50 text-destructive hover:bg-destructive/10 active:bg-destructive/15" },
+    { variant: "outline", tone: "success", class: "border-success/50 text-success hover:bg-success/10 active:bg-success/15" },
+    { variant: "outline", tone: "warning", class: "border-warning/60 text-warning hover:bg-warning/10 active:bg-warning/15" },
+    // === GHOST × tone ===
+    { variant: "ghost", tone: "primary", class: "text-primary hover:bg-primary/10 active:bg-primary/15" },
+    { variant: "ghost", tone: "neutral", class: "text-foreground hover:bg-foreground/10 active:bg-foreground/15" },
+    { variant: "ghost", tone: "danger", class: "text-destructive hover:bg-destructive/10 active:bg-destructive/15" },
+    { variant: "ghost", tone: "success", class: "text-success hover:bg-success/10 active:bg-success/15" },
+    { variant: "ghost", tone: "warning", class: "text-warning hover:bg-warning/10 active:bg-warning/15" },
+    // === REVEAL × tone (idle: muted transparent · hover/focus-visible: bordered chip revealed) ===
+    // Idle text sits at reduced emphasis (muted-foreground / tone-tinted); hover & focus-visible
+    // resolve the border + a surface background + full-emphasis foreground so a bordered chip
+    // "appears". neutral is the common case (borderless icon affordance).
+    { variant: "reveal", tone: "primary", class: "text-primary/70 hover:border-border hover:bg-background hover:text-primary focus-visible:border-border focus-visible:bg-background focus-visible:text-primary active:bg-muted/70" },
+    { variant: "reveal", tone: "neutral", class: "text-muted-foreground hover:border-border hover:bg-background hover:text-foreground focus-visible:border-border focus-visible:bg-background focus-visible:text-foreground active:bg-muted/70" },
+    { variant: "reveal", tone: "danger", class: "text-destructive/70 hover:border-border hover:bg-background hover:text-destructive focus-visible:border-border focus-visible:bg-background focus-visible:text-destructive active:bg-muted/70" },
+    { variant: "reveal", tone: "success", class: "text-success/70 hover:border-border hover:bg-background hover:text-success focus-visible:border-border focus-visible:bg-background focus-visible:text-success active:bg-muted/70" },
+    { variant: "reveal", tone: "warning", class: "text-warning/70 hover:border-border hover:bg-background hover:text-warning focus-visible:border-border focus-visible:bg-background focus-visible:text-warning active:bg-muted/70" },
+    // === LINK × tone (h/padding/radius cleared by variant) ===
+    { variant: "link", tone: "primary", class: "text-primary" },
+    { variant: "link", tone: "neutral", class: "text-foreground" },
+    { variant: "link", tone: "danger", class: "text-destructive" },
+    { variant: "link", tone: "success", class: "text-success" },
+    { variant: "link", tone: "warning", class: "text-warning" },
+    // === GLASS / GLASS-SURFACE × tone ===
+    // neutral = the image-overlay default: fixed dark wash + light text (reads over any imagery).
+    { variant: ["glass", "glass-surface"], tone: "neutral", class: "bg-black/45 text-white/70 hover:bg-black/65 hover:text-white active:bg-black/75" },
+    // Every other tone resolves through the shared `Tones.glass` palette (`bg-{tone}/30 text-{tone}-foreground`)
+    // so `tone="success"` etc. AND per-instance `color` overrides actually apply, plus a tone-matched hover/active wash.
+    { variant: ["glass", "glass-surface"], tone: "primary", class: `${Tones.glass.primary} hover:bg-primary/45 active:bg-primary/55` },
+    { variant: ["glass", "glass-surface"], tone: "danger", class: `${Tones.glass.danger} hover:bg-destructive/45 active:bg-destructive/55` },
+    { variant: ["glass", "glass-surface"], tone: "success", class: `${Tones.glass.success} hover:bg-success/45 active:bg-success/55` },
+    { variant: ["glass", "glass-surface"], tone: "warning", class: `${Tones.glass.warning} hover:bg-warning/45 active:bg-warning/55` },
+    // glass-surface non-neutral tones swap the white hairline for a tone-accent border (50% alpha).
+    { variant: "glass-surface", tone: "primary", class: "border-primary/50" },
+    { variant: "glass-surface", tone: "danger", class: "border-destructive/50" },
+    { variant: "glass-surface", tone: "success", class: "border-success/50" },
+    { variant: "glass-surface", tone: "warning", class: "border-warning/50" }
+  ],
+  defaultVariants: {
+    variant: "solid",
+    tone: "primary",
+    size: "md",
+    shape: "default",
+    fullWidth: false,
+    wrap: false
+  }
+});
+const _hoisted_1$1 = { key: 0 };
+const _hoisted_2 = {
+  key: 1,
+  class: "sr-only"
+};
+const _hoisted_3 = { class: "relative inline-flex items-center justify-center" };
+const _hoisted_4 = { class: "inline-flex items-center justify-center group-hover:invisible group-focus-visible:invisible" };
+const _hoisted_5 = {
+  "aria-hidden": "true",
+  class: "invisible absolute inset-0 inline-flex items-center justify-center group-hover:visible group-focus-visible:visible"
+};
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...{ name: "Button", inheritAttrs: false },
+  __name: "Button",
+  props: {
+    variant: {},
+    tone: {},
+    shape: {},
+    size: {},
+    color: {},
+    leadingSlot: { type: [Object, String, Number, Boolean, null, Array], default: void 0 },
+    trailingSlot: { type: [Object, String, Number, Boolean, null, Array], default: void 0 },
+    hoverSlot: { type: [Object, String, Number, Boolean, null, Array], default: void 0 },
+    loadingSlot: { type: [Object, String, Number, Boolean, null, Array], default: void 0 },
+    isLoading: { type: Boolean, default: void 0 },
+    loadingText: {},
+    isSkeleton: { type: Boolean, default: void 0 },
+    isDisabled: { type: Boolean, default: void 0 },
+    isFullWidth: { type: Boolean, default: void 0 },
+    isMultiline: { type: Boolean, default: void 0 },
+    asChild: { type: Boolean, default: false },
+    padding: {},
+    radius: {},
+    width: {},
+    height: {},
+    minWidth: {},
+    minHeight: {},
+    boxSize: {},
+    type: { default: ButtonType.Button },
+    longPressDelay: { default: PressExtensions.longPressDelay.default },
+    debounceMs: {}
+  },
+  emits: ["press-start", "press-end", "long-press"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const COMPONENT_NAME = "Button";
+    const BUTTON_SIZE_PRESETS = /* @__PURE__ */ new Set([
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+    ]);
+    const ButtonDataState = {
+      Loading: "loading",
+      Skeleton: "skeleton",
+      Disabled: "disabled"
+    };
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const nodeProp = (read) => defineComponent({ render: read });
+    const LeadingSlotProp = nodeProp(() => props.leadingSlot);
+    const TrailingSlotProp = nodeProp(() => props.trailingSlot);
+    const HoverSlotProp = nodeProp(() => props.hoverSlot);
+    const LoadingSlotProp = nodeProp(() => props.loadingSlot);
+    const formControl = useFormControl();
+    const resolvedDisabled = computed(() => props.isDisabled ?? formControl?.isDisabled ?? false);
+    const skeletonActive = computed(() => !!props.isSkeleton);
+    const loadingActive = computed(() => !skeletonActive.value && !!props.isLoading);
+    const isInactive = computed(
+      () => loadingActive.value || skeletonActive.value || resolvedDisabled.value
+    );
+    const dataState = computed(
+      () => skeletonActive.value ? ButtonDataState.Skeleton : loadingActive.value ? ButtonDataState.Loading : resolvedDisabled.value ? ButtonDataState.Disabled : void 0
+    );
+    const safeLongPressDelay = computed(
+      () => props.longPressDelay < PressExtensions.longPressDelay.min || props.longPressDelay > PressExtensions.longPressDelay.max ? PressExtensions.longPressDelay.default : props.longPressDelay
+    );
+    watchEffect(() => {
+      if (!IS_DEV) return;
+      if (props.isLoading && props.isSkeleton) {
+        console.warn(
+          `[${COMPONENT_NAME}] \`isLoading\` and \`isSkeleton\` are mutually exclusive — \`isSkeleton\` takes precedence.`
+        );
+      }
+      if (safeLongPressDelay.value !== props.longPressDelay) {
+        console.warn(
+          `[${COMPONENT_NAME}] longPressDelay=${props.longPressDelay}ms is outside reasonable range (${PressExtensions.longPressDelay.min}–${PressExtensions.longPressDelay.max}ms). Falling back to ${PressExtensions.longPressDelay.default}ms.`
+        );
+      }
+      if (slots.default === void 0 && attrs["aria-label"] === void 0 && attrs["aria-labelledby"] === void 0) {
+        console.warn(
+          `[${COMPONENT_NAME}] icon-only button (no text children) is missing an accessible name — pass \`aria-label\` or \`aria-labelledby\` (Button.standard.md rule 12).`
+        );
+      }
+    });
+    const parsedSize = computed(
+      () => CssExtensions.parseSizeUnion(props.size, BUTTON_SIZE_PRESETS)
+    );
+    const rootClass = computed(
+      () => cn(
+        buttonVariants({
+          variant: props.variant,
+          tone: props.tone,
+          size: parsedSize.value.preset,
+          shape: props.shape,
+          fullWidth: props.isFullWidth,
+          wrap: props.isMultiline
+        }),
+        attrs.class
+      )
+    );
+    const overrideStyle = computed(() => {
+      const padStyle = CssExtensions.resolvePadding(props.padding);
+      const radStyle = CssExtensions.resolveRadius(props.radius);
+      const composedBox = {
+        ...parsedSize.value.box ?? {},
+        ...props.width !== void 0 ? { width: props.width } : {},
+        ...props.height !== void 0 ? { height: props.height } : {},
+        ...props.minWidth !== void 0 ? { minWidth: props.minWidth } : {},
+        ...props.minHeight !== void 0 ? { minHeight: props.minHeight } : {},
+        ...props.boxSize !== void 0 ? { boxSize: props.boxSize } : {}
+      };
+      const boxStyle = CssExtensions.resolveBoxSize(composedBox);
+      const colorStyle = ColorExtensions.toneColorOverride(props.color, props.tone);
+      const consumerStyle = attrs.style;
+      if (!padStyle && !radStyle && !boxStyle && !colorStyle && !consumerStyle) return void 0;
+      return normalizeStyle([colorStyle, padStyle, radStyle, boxStyle, consumerStyle]);
+    });
+    let isPressing = false;
+    let longPressTimer;
+    let longPressFired = false;
+    const instance = getCurrentInstance();
+    function hasLongPressListener() {
+      return instance?.vnode.props?.onLongPress !== void 0;
+    }
+    onBeforeUnmount(() => {
+      if (longPressTimer !== void 0) clearTimeout(longPressTimer);
+    });
+    function cancelLongPress() {
+      if (longPressTimer !== void 0) {
+        clearTimeout(longPressTimer);
+        longPressTimer = void 0;
+      }
+    }
+    function endPress(event) {
+      if (isPressing) {
+        isPressing = false;
+        emit("press-end", event);
+      }
+    }
+    function handlePointerDown(event) {
+      if (isInactive.value) return;
+      cancelLongPress();
+      if (!isPressing) {
+        const pressEvent = event;
+        isPressing = true;
+        longPressFired = false;
+        emit("press-start", pressEvent);
+        if (hasLongPressListener()) {
+          longPressTimer = setTimeout(() => {
+            longPressFired = true;
+            emit("long-press", pressEvent);
+            longPressTimer = void 0;
+          }, safeLongPressDelay.value);
+        }
+      }
+    }
+    function handlePointerUp(event) {
+      cancelLongPress();
+      endPress(event);
+    }
+    function handlePointerCancel(event) {
+      cancelLongPress();
+      endPress(event);
+    }
+    function handlePointerLeave() {
+      cancelLongPress();
+    }
+    const isActivationKey = (event) => event.key === Key.Space || event.key === Key.Enter;
+    function handleKeyDown(event) {
+      if (isInactive.value) return;
+      if (isActivationKey(event) && !event.repeat && !isPressing) {
+        isPressing = true;
+        longPressFired = false;
+        emit("press-start", event);
+      }
+    }
+    function handleKeyUp(event) {
+      if (isActivationKey(event) && isPressing) {
+        isPressing = false;
+        emit("press-end", event);
+      }
+    }
+    function toHandler(value) {
+      if (typeof value === "function") return value;
+      if (!Array.isArray(value)) return void 0;
+      const handlers = value.filter(
+        (entry) => typeof entry === "function"
+      );
+      if (handlers.length === 0) return void 0;
+      return (event) => {
+        for (const handler of handlers) handler(event);
+      };
+    }
+    const debouncedOnClick = useDebounceHandler(
+      (event) => toHandler(attrs.onClick)?.(event),
+      () => props.debounceMs
+    );
+    function handleClick(event) {
+      if (loadingActive.value || skeletonActive.value) {
+        event.preventDefault();
+        return;
+      }
+      if (longPressFired) {
+        longPressFired = false;
+        event.preventDefault();
+        return;
+      }
+      debouncedOnClick(event);
+    }
+    const OWNED_ATTRS = /* @__PURE__ */ new Set([
+      "class",
+      "style",
+      "onClick",
+      "onPointerdown",
+      "onPointerup",
+      "onPointercancel",
+      "onPointerleave",
+      "onKeydown",
+      "onKeyup"
+    ]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OWNED_ATTRS.has(key)))
+    );
+    function consumerHandler(name) {
+      return toHandler(attrs[name]);
+    }
+    const rootProps = computed(() => ({
+      type: props.asChild ? void 0 : props.type,
+      class: rootClass.value,
+      style: overrideStyle.value,
+      disabled: OptionalExtensions.from(resolvedDisabled.value, true),
+      "aria-busy": OptionalExtensions.from(loadingActive.value || skeletonActive.value, true),
+      "aria-disabled": OptionalExtensions.from(loadingActive.value || skeletonActive.value, true),
+      tabindex: OptionalExtensions.from(skeletonActive.value, -1),
+      "data-state": dataState.value,
+      onClick: handleClick,
+      onPointerdown: composeEventHandlers(consumerHandler("onPointerdown"), handlePointerDown),
+      onPointerup: composeEventHandlers(consumerHandler("onPointerup"), handlePointerUp),
+      onPointercancel: composeEventHandlers(
+        consumerHandler("onPointercancel"),
+        handlePointerCancel
+      ),
+      onPointerleave: composeEventHandlers(
+        consumerHandler("onPointerleave"),
+        handlePointerLeave
+      ),
+      onKeydown: composeEventHandlers(consumerHandler("onKeydown"), handleKeyDown),
+      onKeyup: composeEventHandlers(consumerHandler("onKeyup"), handleKeyUp),
+      ...passthroughAttrs.value
+    }));
+    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(Primitive), mergeProps({
+        ref_key: "root",
+        ref: root,
+        as: unref(HtmlElement).Button,
+        "as-child": __props.asChild
+      }, rootProps.value), {
+        default: withCtx(() => [
+          __props.asChild ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 0) : loadingActive.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            renderSlot(_ctx.$slots, "loading", {}, () => [
+              __props.loadingSlot !== void 0 ? (openBlock(), createBlock(unref(LoadingSlotProp), { key: 0 })) : (openBlock(), createBlock(unref(_sfc_main$6), { key: 1 }))
+            ]),
+            __props.loadingText !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_1$1, toDisplayString(__props.loadingText), 1)) : (openBlock(), createElementBlock("span", _hoisted_2, [
+              renderSlot(_ctx.$slots, "default")
+            ]))
+          ], 64)) : __props.hoverSlot !== void 0 || _ctx.$slots.hover ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+            renderSlot(_ctx.$slots, "leading", {}, () => [
+              __props.leadingSlot !== void 0 ? (openBlock(), createBlock(unref(LeadingSlotProp), { key: 0 })) : createCommentVNode("", true)
+            ]),
+            createElementVNode("span", _hoisted_3, [
+              createElementVNode("span", _hoisted_4, [
+                renderSlot(_ctx.$slots, "default")
+              ]),
+              createElementVNode("span", _hoisted_5, [
+                renderSlot(_ctx.$slots, "hover", {}, () => [
+                  __props.hoverSlot !== void 0 ? (openBlock(), createBlock(unref(HoverSlotProp), { key: 0 })) : createCommentVNode("", true)
+                ])
+              ])
+            ]),
+            renderSlot(_ctx.$slots, "trailing", {}, () => [
+              __props.trailingSlot !== void 0 ? (openBlock(), createBlock(unref(TrailingSlotProp), { key: 0 })) : createCommentVNode("", true)
+            ])
+          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+            renderSlot(_ctx.$slots, "leading", {}, () => [
+              __props.leadingSlot !== void 0 ? (openBlock(), createBlock(unref(LeadingSlotProp), { key: 0 })) : createCommentVNode("", true)
+            ]),
+            renderSlot(_ctx.$slots, "default"),
+            renderSlot(_ctx.$slots, "trailing", {}, () => [
+              __props.trailingSlot !== void 0 ? (openBlock(), createBlock(unref(TrailingSlotProp), { key: 0 })) : createCommentVNode("", true)
+            ])
+          ], 64))
+        ]),
+        _: 3
+      }, 16, ["as", "as-child"]);
+    };
+  }
+});
+const ToggleButtonGroupKey = Symbol(
+  "wow-two.toggleButtonGroup"
+);
+const ToggleButtonGroupVariant = {
+  /** Refers to a standard button row/column (borders + attached radii). */
+  Default: "default",
+  /** Refers to an iOS-style connected pill row on a muted track (active segment lifts). */
+  Segmented: "segmented",
+  /** Refers to individually-separated rounded pills (each item its own detached chip). */
+  Pill: "pill"
+};
+const ToggleMode = {
+  /** Refers to at-most-one active item; toggling the active one clears it. */
+  Single: "single",
+  /** Refers to any number of independently-active items. */
+  Multi: "multi"
+};
+const ToggleItemRole = {
+  /** Refers to the default `role="group"` of independent toggle buttons. */
+  Group: "group",
+  /** Refers to `role="tablist"` on the root + `role="tab"` (+ `aria-selected`) on items. */
+  Tab: "tab"
+};
+const ToggleButtonVariant = {
+  /** Refers to a borderless, transparent surface (text-color only). */
+  Ghost: "ghost",
+  /** Refers to a muted/tinted fill on press. */
+  Soft: "soft",
+  /** Refers to a bordered surface that swaps to a tone border on press. */
+  Outline: "outline",
+  /** Refers to a bordered surface that fills with the tone on press. */
+  Solid: "solid",
+  /** Refers to a translucent glass wash + blur. */
+  Glass: "glass",
+  /** Refers to a glass surface with a hairline border. */
+  GlassSurface: "glass-surface"
+};
+const ToggleButtonElement = {
+  /** Refers to a native `<button>`. */
+  Button: "button",
+  /** Refers to a `<div>` with `role="button"` + Space/Enter keyboard — lets you nest interactive children without invalid button-in-button markup. */
+  Div: "div"
+};
+const toggleButtonVariants = tv({
+  base: "",
+  variants: {
+    variant: {
+      ghost: "",
+      soft: "",
+      outline: "border",
+      solid: "border",
+      glass: "border border-transparent backdrop-blur-md",
+      "glass-surface": "border backdrop-blur-md"
+    },
+    tone: {
+      primary: "",
+      neutral: "",
+      danger: "",
+      success: "",
+      warning: ""
+    }
+  },
+  compoundVariants: [
+    // === GHOST × tone — text color only, transparent bg ===
+    { variant: "ghost", tone: "primary", class: "text-foreground/50 data-[pressed=true]:text-primary" },
+    { variant: "ghost", tone: "neutral", class: "text-foreground/50 data-[pressed=true]:text-foreground" },
+    { variant: "ghost", tone: "danger", class: "text-foreground/50 data-[pressed=true]:text-destructive" },
+    { variant: "ghost", tone: "success", class: "text-foreground/50 data-[pressed=true]:text-success" },
+    { variant: "ghost", tone: "warning", class: "text-foreground/50 data-[pressed=true]:text-warning" },
+    // === SOFT × tone — pressed gets tone-soft bg ===
+    { variant: "soft", tone: "primary", class: "text-foreground/70 data-[pressed=true]:bg-primary-soft data-[pressed=true]:text-primary-soft-foreground" },
+    { variant: "soft", tone: "neutral", class: "text-foreground/70 data-[pressed=true]:bg-muted data-[pressed=true]:text-foreground" },
+    { variant: "soft", tone: "danger", class: "text-foreground/70 data-[pressed=true]:bg-destructive-soft data-[pressed=true]:text-destructive-soft-foreground" },
+    { variant: "soft", tone: "success", class: "text-foreground/70 data-[pressed=true]:bg-success-soft data-[pressed=true]:text-success-soft-foreground" },
+    { variant: "soft", tone: "warning", class: "text-foreground/70 data-[pressed=true]:bg-warning-soft data-[pressed=true]:text-warning-soft-foreground" },
+    // === OUTLINE × tone — pressed swaps to tone border + tone text ===
+    { variant: "outline", tone: "primary", class: "border-input text-foreground/70 data-[pressed=true]:border-primary data-[pressed=true]:text-primary" },
+    { variant: "outline", tone: "neutral", class: "border-input text-foreground/70 data-[pressed=true]:border-foreground data-[pressed=true]:text-foreground" },
+    { variant: "outline", tone: "danger", class: "border-input text-foreground/70 data-[pressed=true]:border-destructive data-[pressed=true]:text-destructive" },
+    { variant: "outline", tone: "success", class: "border-input text-foreground/70 data-[pressed=true]:border-success data-[pressed=true]:text-success" },
+    { variant: "outline", tone: "warning", class: "border-input text-foreground/70 data-[pressed=true]:border-warning data-[pressed=true]:text-warning" },
+    // === SOLID × tone — pressed fills with tone ===
+    { variant: "solid", tone: "primary", class: "border-input bg-background text-foreground/70 data-[pressed=true]:bg-primary data-[pressed=true]:border-primary data-[pressed=true]:text-primary-foreground" },
+    { variant: "solid", tone: "neutral", class: "border-input bg-background text-foreground/70 data-[pressed=true]:bg-foreground data-[pressed=true]:border-foreground data-[pressed=true]:text-background" },
+    { variant: "solid", tone: "danger", class: "border-input bg-background text-foreground/70 data-[pressed=true]:bg-destructive data-[pressed=true]:border-destructive data-[pressed=true]:text-destructive-foreground" },
+    { variant: "solid", tone: "success", class: "border-input bg-background text-foreground/70 data-[pressed=true]:bg-success data-[pressed=true]:border-success data-[pressed=true]:text-success-foreground" },
+    { variant: "solid", tone: "warning", class: "border-input bg-background text-foreground/70 data-[pressed=true]:bg-warning data-[pressed=true]:border-warning data-[pressed=true]:text-warning-foreground" },
+    // === GLASS × tone — dark glass; pressed darkens slightly + tone-tinted text on tone variants ===
+    { variant: "glass", tone: "primary", class: "bg-black/45 text-white/60 data-[pressed=true]:bg-black/65 data-[pressed=true]:text-white" },
+    { variant: "glass", tone: "neutral", class: "bg-black/45 text-white/60 data-[pressed=true]:bg-black/65 data-[pressed=true]:text-white" },
+    { variant: "glass", tone: "danger", class: "bg-black/45 text-white/60 data-[pressed=true]:bg-black/65 data-[pressed=true]:text-destructive" },
+    { variant: "glass", tone: "success", class: "bg-black/45 text-white/60 data-[pressed=true]:bg-black/65 data-[pressed=true]:text-success" },
+    { variant: "glass", tone: "warning", class: "bg-black/45 text-white/60 data-[pressed=true]:bg-black/65 data-[pressed=true]:text-warning" },
+    // === GLASS-SURFACE × tone — same as glass + visible border emphasis on press ===
+    { variant: "glass-surface", tone: "primary", class: "bg-black/45 text-white/60 border-white/10 data-[pressed=true]:bg-black/65 data-[pressed=true]:text-white data-[pressed=true]:border-white/40" },
+    { variant: "glass-surface", tone: "neutral", class: "bg-black/45 text-white/60 border-white/10 data-[pressed=true]:bg-black/65 data-[pressed=true]:text-white data-[pressed=true]:border-white/40" },
+    { variant: "glass-surface", tone: "danger", class: "bg-black/45 text-white/60 border-white/10 data-[pressed=true]:bg-black/65 data-[pressed=true]:text-destructive data-[pressed=true]:border-destructive/60" },
+    { variant: "glass-surface", tone: "success", class: "bg-black/45 text-white/60 border-white/10 data-[pressed=true]:bg-black/65 data-[pressed=true]:text-success data-[pressed=true]:border-success/60" },
+    { variant: "glass-surface", tone: "warning", class: "bg-black/45 text-white/60 border-white/10 data-[pressed=true]:bg-black/65 data-[pressed=true]:text-warning data-[pressed=true]:border-warning/60" }
+  ],
+  defaultVariants: {
+    variant: "ghost",
+    tone: "primary"
+  }
+});
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...{ name: "ToggleButton", inheritAttrs: false },
+  __name: "ToggleButton",
+  props: {
+    variant: { default: ToggleButtonVariant.Ghost },
+    tone: { default: ColorTone.Primary },
+    isPressed: { type: Boolean, default: void 0 },
+    defaultPressed: { type: Boolean, default: void 0 },
+    value: {},
+    title: {},
+    color: {},
+    tooltip: { type: [Object, String, Number, Boolean, null, Array], default: void 0 },
+    as: { default: ToggleButtonElement.Button }
+  },
+  emits: ["pressed-change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const group = inject(ToggleButtonGroupKey, null);
+    const { value: pressed, setValue: setPressed } = useControlled({
+      /* Inside a group the selection lives on the group, which makes the item controlled — the same
+         state the original produced by cloning `isPressed` onto each child. An explicit `isPressed`
+         prop still wins over the group. */
+      controlled: () => props.isPressed ?? group?.isPressed(props.value),
+      default: props.defaultPressed ?? false,
+      onChange: (pressed2) => emit("pressed-change", pressed2)
+    });
+    const OWNED_ATTRS = /* @__PURE__ */ new Set(["class", "aria-label"]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OWNED_ATTRS.has(key)))
+    );
+    const isDiv = computed(() => props.as === ToggleButtonElement.Div);
+    const resolvedTitle = computed(() => {
+      const title = typeof props.title === "function" ? props.title({ pressed: pressed.value }) : props.title;
+      return title ?? (typeof props.tooltip === "string" ? props.tooltip : void 0);
+    });
+    const resolvedAriaLabel = computed(() => {
+      const label = attrs["aria-label"];
+      return typeof label === "function" ? label({ pressed: pressed.value }) : label;
+    });
+    const rootClass = computed(
+      () => cn(
+        toggleButtonVariants({ variant: props.variant, tone: props.tone }),
+        attrs.class
+      )
+    );
+    const itemRole = computed(
+      () => group?.itemRole === ToggleItemRole.Tab ? "tab" : void 0
+    );
+    const ariaSelected = computed(() => itemRole.value === "tab" ? pressed.value : void 0);
+    function toggle() {
+      setPressed(!pressed.value);
+      group?.toggle(props.value);
+    }
+    function handleClick(event) {
+      if (event.defaultPrevented) return;
+      toggle();
+    }
+    function handleDivKeyDown(event) {
+      if (event.key === Key.Space || event.key === Key.Enter) {
+        event.preventDefault();
+        toggle();
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$5, mergeProps({
+        variant: unref(ButtonVariant).Ghost,
+        tone: __props.tone ?? void 0,
+        color: __props.color,
+        "as-child": isDiv.value,
+        value: __props.value,
+        "aria-pressed": unref(pressed),
+        "aria-label": resolvedAriaLabel.value,
+        "data-pressed": unref(pressed) ? "true" : "false",
+        title: resolvedTitle.value,
+        role: itemRole.value,
+        "aria-selected": ariaSelected.value,
+        class: rootClass.value
+      }, passthroughAttrs.value, { onClick: handleClick }), {
+        default: withCtx(() => [
+          isDiv.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            role: "button",
+            tabindex: 0,
+            onKeydown: handleDivKeyDown
+          }, [
+            renderSlot(_ctx.$slots, "default", { pressed: unref(pressed) })
+          ], 32)) : renderSlot(_ctx.$slots, "default", { pressed: unref(pressed) }, void 0, void 0, 1)
+        ]),
+        _: 3
+      }, 16, ["variant", "tone", "color", "as-child", "value", "aria-pressed", "aria-label", "data-pressed", "title", "role", "aria-selected", "class"]);
+    };
+  }
+});
+const _hoisted_1 = ["role", "aria-orientation", "data-orientation"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...{ name: "ToggleButtonGroup", inheritAttrs: false },
+  __name: "ToggleButtonGroup",
+  props: {
+    type: { default: void 0 },
+    value: { default: void 0 },
+    defaultValue: { default: void 0 },
+    orientation: { default: Orientation.Horizontal },
+    isAttached: { type: Boolean, default: true },
+    variant: { default: ToggleButtonGroupVariant.Default },
+    itemRole: { default: ToggleItemRole.Group },
+    equalWidth: { type: Boolean, default: false }
+  },
+  emits: ["value-change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const mode = computed(
+      () => props.type === ToggleMode.Multi ? ToggleMode.Multi : ToggleMode.Single
+    );
+    const isSegmented = computed(() => props.variant === ToggleButtonGroupVariant.Segmented);
+    const isPill = computed(() => props.variant === ToggleButtonGroupVariant.Pill);
+    const isTablist = computed(() => props.itemRole === ToggleItemRole.Tab);
+    const isHorizontal = computed(() => props.orientation === Orientation.Horizontal);
+    const attached = computed(
+      () => isPill.value ? false : isSegmented.value || props.isAttached
+    );
+    const { value: singleValue, setValue: setSingleValue } = useControlled({
+      controlled: () => mode.value === ToggleMode.Single ? props.value : void 0,
+      default: props.type !== ToggleMode.Multi ? props.defaultValue ?? null : null,
+      onChange: (next) => {
+        if (mode.value === ToggleMode.Single) emit("value-change", next);
+      }
+    });
+    const { value: multiValue, setValue: setMultiValue } = useControlled({
+      controlled: () => mode.value === ToggleMode.Multi ? props.value : void 0,
+      default: props.type === ToggleMode.Multi ? props.defaultValue ?? [] : [],
+      onChange: (next) => {
+        if (mode.value === ToggleMode.Multi) emit("value-change", next);
+      }
+    });
+    function isPressed(childValue) {
+      if (childValue === void 0) return false;
+      return mode.value === ToggleMode.Single ? singleValue.value === childValue : multiValue.value.includes(childValue);
+    }
+    function togglePressed(childValue) {
+      if (childValue === void 0) return;
+      if (mode.value === ToggleMode.Single) {
+        setSingleValue(singleValue.value === childValue ? null : childValue);
+      } else {
+        setMultiValue(
+          multiValue.value.includes(childValue) ? multiValue.value.filter((entry) => entry !== childValue) : [...multiValue.value, childValue]
+        );
+      }
+    }
+    provide(ToggleButtonGroupKey, {
+      isPressed,
+      toggle: togglePressed,
+      get itemRole() {
+        return props.itemRole;
+      }
+    });
+    const OWNED_ATTRS = /* @__PURE__ */ new Set(["class"]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OWNED_ATTRS.has(key)))
+    );
+    const rootClass = computed(
+      () => cn(
+        "inline-flex",
+        isHorizontal.value ? "flex-row" : "flex-col",
+        attached.value ? 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",
+        // Segmented: muted track + reset segment chrome; active segment lifts to a `background` surface.
+        isSegmented.value && [
+          "rounded-md bg-muted p-1",
+          "[&>*]:!rounded-md [&>*]:!ml-0 [&>*]:!border-transparent [&>*]:!bg-transparent",
+          "[&>*[data-pressed=true]]:!bg-background [&>*[data-pressed=true]]:!text-foreground [&>*[data-pressed=true]]:shadow-sm"
+        ],
+        // Pill: fully-rounded detached chips (gap already applied via the non-attached branch above).
+        isPill.value && "[&>*]:!rounded-full",
+        // Equal-width tiles: every item shares the row/column extent (icon category strip).
+        props.equalWidth && "[&>*]:flex-1 [&>*]:basis-0",
+        attrs.class
+      )
+    );
+    const root = useTemplateRef("root");
+    __expose({ el: root });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "root",
+        ref: root,
+        role: isTablist.value ? "tablist" : "group",
+        "aria-orientation": isTablist.value ? __props.orientation : void 0,
+        "data-orientation": __props.orientation,
+        class: rootClass.value
+      }, passthroughAttrs.value), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16, _hoisted_1);
+    };
+  }
+});
+const optionTileVariants = tv({
+  base: "data-[pressed=true]:bg-primary/10"
+});
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...{ name: "OptionTile", inheritAttrs: false },
+  __name: "OptionTile",
+  props: {
+    selected: { type: Boolean },
+    label: {},
+    tone: { default: ColorTone.Primary },
+    size: { default: "sm" }
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const attrs = useAttrs();
+    const OWNED_ATTRS = /* @__PURE__ */ new Set(["class"]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OWNED_ATTRS.has(key)))
+    );
+    const rootClass = computed(() => cn(optionTileVariants(), attrs.class));
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$4, mergeProps({
+        shape: unref(ButtonShape).Square,
+        variant: unref(ToggleButtonVariant).Outline,
+        tone: __props.tone,
+        size: __props.size,
+        "is-pressed": __props.selected,
+        "aria-label": __props.label,
+        title: __props.label,
+        class: rootClass.value
+      }, passthroughAttrs.value, {
+        onPressedChange: _cache[0] || (_cache[0] = ($event) => emit("select"))
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["shape", "variant", "tone", "size", "is-pressed", "aria-label", "title", "class"]);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{ name: "Fieldset", inheritAttrs: false },
+  __name: "Fieldset",
+  setup(__props, { expose: __expose }) {
+    const attrs = useAttrs();
+    const OWNED_ATTRS = /* @__PURE__ */ new Set(["class"]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OWNED_ATTRS.has(key)))
+    );
+    const rootClass = computed(() => cn("m-0 min-w-0 border-0 p-0", attrs.class));
+    const root = useTemplateRef("root");
+    __expose({ el: root });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("fieldset", mergeProps({
+        ref_key: "root",
+        ref: root,
+        class: rootClass.value
+      }, passthroughAttrs.value), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const optionTileGroupVariants = tv({
+  base: "flex items-center gap-2",
+  variants: {
+    wrap: {
+      true: "flex-wrap",
+      false: ""
+    },
+    align: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end"
+    }
+  },
+  defaultVariants: {
+    wrap: false,
+    align: "start"
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "OptionTileGroup", inheritAttrs: false },
+  __name: "OptionTileGroup",
+  props: {
+    label: {},
+    disabled: { type: Boolean, default: void 0 },
+    wrap: { type: Boolean, default: void 0 },
+    align: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const OWNED_ATTRS = /* @__PURE__ */ new Set(["class"]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OWNED_ATTRS.has(key)))
+    );
+    const rootClass = computed(
+      () => cn(optionTileGroupVariants({ wrap: props.wrap, align: props.align }), attrs.class)
+    );
+    const root = useTemplateRef("root");
+    __expose({ el: computed(() => root.value?.el ?? null) });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), mergeProps({
+        ref_key: "root",
+        ref: root,
+        disabled: __props.disabled,
+        "aria-label": __props.label,
+        class: rootClass.value
+      }, passthroughAttrs.value), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["disabled", "aria-label", "class"]);
+    };
+  }
+});
+export {
+  ButtonShape as B,
+  ToggleButtonElement as T,
+  _sfc_main$5 as _,
+  ButtonVariant as a,
+  _sfc_main$1 as b,
+  _sfc_main$2 as c,
+  _sfc_main as d,
+  _sfc_main$4 as e,
+  _sfc_main$3 as f,
+  ToggleButtonGroupKey as g,
+  ToggleButtonGroupVariant as h,
+  ToggleButtonVariant as i,
+  ToggleItemRole as j,
+  ToggleMode as k,
+  buttonVariants as l,
+  optionTileVariants as m,
+  optionTileGroupVariants as o,
+  toggleButtonVariants as t
+};
+//# sourceMappingURL=OptionTileGroup.vue_vue_type_script_setup_true_lang-BGSmXM_u.js.map