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
37 lines
1 KiB
TypeScript
37 lines
1 KiB
TypeScript
"use client";
|
|
|
|
import { Input } from "@/components/ui/input";
|
|
import { motion } from "framer-motion";
|
|
import { useState } from "react";
|
|
|
|
export function FloatingLabelInput() {
|
|
const [isFocused, setIsFocused] = useState(false);
|
|
const [value, setValue] = useState("");
|
|
|
|
const isFloating = isFocused || value.length > 0;
|
|
|
|
return (
|
|
<div className="flex items-center justify-center p-12">
|
|
<div className="relative w-64">
|
|
<Input
|
|
type="text"
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
onFocus={() => setIsFocused(true)}
|
|
onBlur={() => setIsFocused(false)}
|
|
className="peer"
|
|
/>
|
|
<motion.label
|
|
animate={{
|
|
y: isFloating ? -24 : 10,
|
|
scale: isFloating ? 0.85 : 1,
|
|
}}
|
|
transition={{ duration: 0.2, ease: "easeInOut" }}
|
|
className="pointer-events-none absolute left-3 origin-left text-sm text-gray-500"
|
|
>
|
|
Email address
|
|
</motion.label>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|