Button

<script setup lang="ts">
import { ArrowUpRight, Sparkles } from "lucide-vue-next";
import { MetallicButton } from "@/components/orvui/motion/button";
</script>
<template><div class="flex flex-wrap items-center justify-center gap-3 px-6 py-10">
  <MetallicButton>Continue<ArrowUpRight class="size-4" /></MetallicButton>
  <MetallicButton size="sm"><Sparkles class="size-3.5" />Generate</MetallicButton>
  <MetallicButton size="icon" aria-label="Magic tools"><Sparkles class="size-4" /></MetallicButton>
</div></template>

<script setup lang="ts">
import { ArrowRight, Download, Trash2 } from "lucide-vue-next";
import { Button } from "@/components/orvui/motion/button";
const variants = ["outline", "ghost"] as const;
</script>
<template>
  <div class="flex flex-col items-center gap-6">
    <div class="flex flex-wrap items-center justify-center gap-3"><Button>Continue<ArrowRight class="h-4 w-4" /></Button><Button variant="secondary"><Download class="h-4 w-4" />Download</Button><Button v-for="variant in variants" :key="variant" :variant="variant">{{ variant === 'outline' ? 'Outline' : 'Ghost' }}</Button></div>
    <div class="flex flex-wrap items-center justify-center gap-3"><Button size="sm">Small</Button><Button>Medium</Button><Button size="lg">Large</Button><Button variant="secondary" size="icon" aria-label="Delete"><Trash2 class="h-4 w-4" /></Button></div>
    <div class="flex flex-wrap items-center justify-center gap-3"><Button ripple>Ripple</Button><Button variant="outline" ripple>Tap me</Button></div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, reactive } from "vue";
import { ArrowRight } from "lucide-vue-next";
import { StatefulButton, type ButtonState } from "@/components/orvui/motion/button";
const states = reactive<{ ok: ButtonState; err: ButtonState }>({ ok: "idle", err: "idle" });
const scheduled = new Set<ReturnType<typeof setTimeout>>();
function after(delay: number, callback: () => void) {
  const timer = setTimeout(() => { scheduled.delete(timer); callback(); }, delay);
  scheduled.add(timer);
}
function run(key: "ok" | "err") {
  if (states[key] === "loading") return;
  states[key] = "loading";
  after(1400, () => { states[key] = key === "ok" ? "success" : "error"; after(1800, () => { states[key] = "idle"; }); });
}
onBeforeUnmount(() => { scheduled.forEach(timer => clearTimeout(timer)); scheduled.clear(); });
</script>
<template><div class="flex flex-col items-center justify-center gap-3">
  <StatefulButton :state="states.ok" loading-text="Saving" success-text="Saved" :icon="ArrowRight" @click="run('ok')">Save changes</StatefulButton>
  <StatefulButton :state="states.err" variant="secondary" loading-text="Submitting" error-text="Failed" @click="run('err')">Submit</StatefulButton>
</div></template>

<script setup lang="ts">
import { ArrowRight } from "lucide-vue-next";
import { MagneticButton } from "@/components/orvui/motion/button";
const alternatives = [{ variant: "secondary", strength: 0.25, label: "Subtle pull" }, { variant: "outline", strength: 0.5, label: "Strong pull" }] as const;
</script>
<template><div class="flex flex-wrap items-center justify-center gap-4">
  <MagneticButton :strength="0.35">Hover me<ArrowRight class="h-4 w-4" /></MagneticButton>
  <MagneticButton v-for="sample in alternatives" :key="sample.variant" :variant="sample.variant" :strength="sample.strength">{{ sample.label }}</MagneticButton>
</div></template>