mirror of
https://github.com/moumen-soliman/uitripled
synced 2026-04-21 13:37:20 +00:00
9ee2f7530a
* v1 prepration * Fix baseui tooltip components * Update native-liquid-button.tsx * Resumes fix * Add uitripled CLI package and update install tabs Introduces a new uitripled CLI package for installing animated UI components, including CLI source, documentation, and publish script. Updates the AnimationDetailPage to feature install instructions for both shadcn and uitripled, replacing the previous npx/yarn/pnpm tabs with shadcn/uitripled options and corresponding copy-to-clipboard functionality. * update package release * Update package.json * Hotfix
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { Check } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
export function AnimatedCheckbox() {
|
|
const [isChecked, setIsChecked] = useState(false);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
{[
|
|
"Subscribe to newsletter",
|
|
"Agree to terms and conditions",
|
|
"Enable notifications",
|
|
].map((label, index) => (
|
|
<label key={label} className="flex cursor-pointer items-center gap-3">
|
|
<motion.div
|
|
className="relative flex h-6 w-6 items-center justify-center rounded border-2"
|
|
style={{
|
|
borderColor:
|
|
index === 0 && isChecked
|
|
? "rgb(var(--accent))"
|
|
: "rgb(var(--border))",
|
|
backgroundColor:
|
|
index === 0 && isChecked ? "rgb(var(--accent))" : "transparent",
|
|
}}
|
|
whileHover={{ scale: 1.1 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
onClick={() => index === 0 && setIsChecked(!isChecked)}
|
|
>
|
|
<motion.div
|
|
initial={false}
|
|
animate={{
|
|
scale: index === 0 && isChecked ? 1 : 0,
|
|
opacity: index === 0 && isChecked ? 1 : 0,
|
|
}}
|
|
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
|
>
|
|
<Check
|
|
className="h-4 w-4 text-[var(--muted-foreground)]"
|
|
strokeWidth={3}
|
|
/>
|
|
</motion.div>
|
|
</motion.div>
|
|
<span className="text-sm">{label}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|