This commit is contained in:
ryan
2026-07-13 15:08:40 +08:00
parent 08e8eea932
commit 1eff7878a1
441 changed files with 26491 additions and 18405 deletions
@@ -1,16 +1,16 @@
'use client';
import * as React from 'react';
import {type VariantProps} from 'class-variance-authority';
import { type VariantProps } from 'class-variance-authority';
import {buttonVariants} from '@/components/animate-ui/components/buttons/button';
import { buttonVariants } from '@/components/animate-ui/components/buttons/button';
import {
RippleButton as RippleButtonPrimitive,
type RippleButtonProps as RippleButtonPrimitiveProps,
RippleButtonRipples as RippleButtonRipplesPrimitive,
type RippleButtonRipplesProps as RippleButtonRipplesPrimitiveProps,
} from '@/components/animate-ui/primitives/buttons/ripple';
import {cn} from '@/lib/utils';
import { cn } from '@/lib/utils';
const rippleButtonVariants = {
default: '[--ripple-button-ripple-color:var(--primary-foreground)]',
@@ -34,23 +34,23 @@ function IconComponent({ size, ...props }: CheckProps) {
return (
<motion.svg
xmlns="http://www.w3.org/2000/svg"
xmlns='http://www.w3.org/2000/svg'
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
initial="initial"
strokeLinecap='round'
strokeLinejoin='round'
initial='initial'
animate={controls}
{...props}
>
<motion.path
d="m4 12 5 5L20 6"
d='m4 12 5 5L20 6'
variants={variants.path}
initial="initial"
initial='initial'
animate={controls}
/>
</motion.svg>
@@ -39,21 +39,21 @@ function IconComponent({ size, ...props }: ChevronDownProps) {
return (
<motion.svg
xmlns="http://www.w3.org/2000/svg"
xmlns='http://www.w3.org/2000/svg'
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
strokeLinecap='round'
strokeLinejoin='round'
{...props}
>
<motion.path
d="m6 9 6 6 6-6"
d='m6 9 6 6 6-6'
variants={variants.path}
initial="initial"
initial='initial'
animate={controls}
/>
</motion.svg>
@@ -39,21 +39,21 @@ function IconComponent({ size, ...props }: ChevronLeftProps) {
return (
<motion.svg
xmlns="http://www.w3.org/2000/svg"
xmlns='http://www.w3.org/2000/svg'
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
strokeLinecap='round'
strokeLinejoin='round'
{...props}
>
<motion.path
d="m15 18-6-6 6-6"
d='m15 18-6-6 6-6'
variants={variants.path}
initial="initial"
initial='initial'
animate={controls}
/>
</motion.svg>
@@ -39,21 +39,21 @@ function IconComponent({ size, ...props }: ChevronRightProps) {
return (
<motion.svg
xmlns="http://www.w3.org/2000/svg"
xmlns='http://www.w3.org/2000/svg'
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
strokeLinecap='round'
strokeLinejoin='round'
{...props}
>
<motion.path
d="m9 18 6-6-6-6"
d='m9 18 6-6-6-6'
variants={variants.path}
initial="initial"
initial='initial'
animate={controls}
/>
</motion.svg>
@@ -35,29 +35,29 @@ function IconComponent({ size, ...props }: CircleCheckProps) {
return (
<motion.svg
xmlns="http://www.w3.org/2000/svg"
xmlns='http://www.w3.org/2000/svg'
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
strokeLinecap='round'
strokeLinejoin='round'
{...props}
>
<motion.circle
cx="12"
cy="12"
r="10"
cx='12'
cy='12'
r='10'
variants={variants.circle}
initial="initial"
initial='initial'
animate={controls}
/>
<motion.path
d="m9 12 2 2 4-4"
d='m9 12 2 2 4-4'
variants={variants.path}
initial="initial"
initial='initial'
animate={controls}
/>
</motion.svg>
@@ -11,9 +11,12 @@ import {
type Variants,
} from 'motion/react';
import {cn} from '@/lib/utils';
import {useIsInView} from '@/hooks/use-is-in-view';
import {Slot, type WithAsChild} from '@/components/animate-ui/primitives/animate/slot';
import { cn } from '@/lib/utils';
import { useIsInView } from '@/hooks/use-is-in-view';
import {
Slot,
type WithAsChild,
} from '@/components/animate-ui/primitives/animate/slot';
const staticAnimations = {
path: {
+18 -13
View File
@@ -1,9 +1,14 @@
'use client';
import * as React from 'react';
import {motion, type Variants} from 'motion/react';
import { motion, type Variants } from 'motion/react';
import {getVariants, type IconProps, IconWrapper, useAnimateIconContext,} from '@/components/animate-ui/icons/icon';
import {
getVariants,
type IconProps,
IconWrapper,
useAnimateIconContext,
} from '@/components/animate-ui/icons/icon';
type SendProps = IconProps<keyof typeof animations>;
@@ -45,28 +50,28 @@ function IconComponent({ size, ...props }: SendProps) {
return (
<motion.svg
xmlns="http://www.w3.org/2000/svg"
xmlns='http://www.w3.org/2000/svg'
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
strokeLinecap='round'
strokeLinejoin='round'
{...props}
>
<motion.g variants={variants.group} initial="initial" animate={controls}>
<motion.g variants={variants.group} initial='initial' animate={controls}>
<motion.path
d="M14.5,21.7c.1.3.4.4.7.3.1,0,.2-.2.3-.3L22,2.7c0-.3,0-.5-.3-.6-.1,0-.2,0-.3,0L2.3,8.5c-.3,0-.4.4-.3.6,0,.1.2.2.3.3l7.9,3.2c.5.2.9.6,1.1,1.1l3.2,7.9Z"
d='M14.5,21.7c.1.3.4.4.7.3.1,0,.2-.2.3-.3L22,2.7c0-.3,0-.5-.3-.6-.1,0-.2,0-.3,0L2.3,8.5c-.3,0-.4.4-.3.6,0,.1.2.2.3.3l7.9,3.2c.5.2.9.6,1.1,1.1l3.2,7.9Z'
variants={variants.path1}
initial="initial"
initial='initial'
animate={controls}
/>
<motion.path
d="M21.9,2.1l-10.9,10.9"
d='M21.9,2.1l-10.9,10.9'
variants={variants.path2}
initial="initial"
initial='initial'
animate={controls}
/>
</motion.g>
@@ -1,8 +1,8 @@
'use client';
import * as React from 'react';
import {type HTMLMotionProps, isMotionComponent, motion} from 'motion/react';
import {cn} from '@/lib/utils';
import { type HTMLMotionProps, isMotionComponent, motion } from 'motion/react';
import { cn } from '@/lib/utils';
type AnyProps = Record<string, unknown>;
@@ -3,7 +3,7 @@
import * as React from 'react';
import {type HTMLMotionProps, motion} from 'motion/react';
import {Slot, type WithAsChild} from '@/components/animate-ui/primitives/animate/slot';
import {Slot, type WithAsChild,} from '@/components/animate-ui/primitives/animate/slot';
type ButtonProps = WithAsChild<
HTMLMotionProps<'button'> & {
@@ -1,10 +1,13 @@
'use client';
import * as React from 'react';
import {type HTMLMotionProps, motion} from 'motion/react';
import { type HTMLMotionProps, motion } from 'motion/react';
import {getStrictContext} from '@/lib/utils/get-strict-context';
import {Slot, type WithAsChild} from '@/components/animate-ui/primitives/animate/slot';
import { getStrictContext } from '@/lib/utils/get-strict-context';
import {
Slot,
type WithAsChild,
} from '@/components/animate-ui/primitives/animate/slot';
type Ripple = {
id: number;
@@ -80,7 +83,7 @@ function RippleButton({
<RippleButtonProvider value={{ ripples, setRipples }}>
<Component
ref={buttonRef}
data-slot="ripple-button"
data-slot='ripple-button'
onClick={handleClick}
whileTap={{ scale: tapScale }}
whileHover={{ scale: hoverScale }}
@@ -27,7 +27,7 @@ function Collapsible(props: CollapsibleProps) {
return (
<CollapsibleProvider value={{ isOpen, setIsOpen }}>
<CollapsiblePrimitive.Root
data-slot="collapsible"
data-slot='collapsible'
{...props}
onOpenChange={setIsOpen}
/>
@@ -41,7 +41,7 @@ type CollapsibleTriggerProps = React.ComponentProps<
function CollapsibleTrigger(props: CollapsibleTriggerProps) {
return (
<CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
<CollapsiblePrimitive.Trigger data-slot='collapsible-trigger' {...props} />
);
}
@@ -65,8 +65,8 @@ function CollapsibleContent({
{keepRendered ? (
<CollapsiblePrimitive.Content asChild forceMount>
<motion.div
key="collapsible-content"
data-slot="collapsible-content"
key='collapsible-content'
data-slot='collapsible-content'
layout
initial={{ opacity: 0, height: 0, overflow: 'hidden', y: 20 }}
animate={
@@ -82,8 +82,8 @@ function CollapsibleContent({
isOpen && (
<CollapsiblePrimitive.Content asChild forceMount>
<motion.div
key="collapsible-content"
data-slot="collapsible-content"
key='collapsible-content'
data-slot='collapsible-content'
layout
initial={{ opacity: 0, height: 0, overflow: 'hidden', y: 20 }}
animate={{ opacity: 1, height: 'auto', overflow: 'hidden', y: 0 }}
@@ -3,7 +3,7 @@
import * as React from 'react';
import {type SpringOptions, useMotionValue, useSpring} from 'motion/react';
import {useIsInView, type UseIsInViewOptions,} from '@/hooks/use-is-in-view';
import {useIsInView, type UseIsInViewOptions} from '@/hooks/use-is-in-view';
type CountingNumberProps = Omit<React.ComponentProps<'span'>, 'children'> & {
number: number;
@@ -78,7 +78,7 @@ function CountingNumber({
const [intPart, fracPart] = formatted.split(decimalSeparator);
const paddedInt = intPart?.padStart(finalIntLength, '0') ?? '';
formatted = fracPart
? `${ paddedInt }${ decimalSeparator }${ fracPart }`
? `${paddedInt}${decimalSeparator}${fracPart}`
: paddedInt;
}
@@ -87,7 +87,7 @@ function CountingNumber({
const regex = /\B(?=(\d{3})+(?!\d))/g;
const separatedInt = intPart.replace(regex, thousandSeparator);
formatted = fracPart
? `${ separatedInt }${ decimalSeparator }${ fracPart }`
? `${separatedInt}${decimalSeparator}${fracPart}`
: separatedInt;
}
@@ -95,7 +95,15 @@ function CountingNumber({
}
});
return () => unsubscribe();
}, [springVal, decimals, padStart, number, decimalSeparator, localRef, thousandSeparator]);
}, [
springVal,
decimals,
padStart,
number,
decimalSeparator,
localRef,
thousandSeparator,
]);
const finalIntLength = Math.floor(Math.abs(number)).toString().length;
@@ -105,26 +113,28 @@ function CountingNumber({
if (padStart) {
const [intPart, fracPart] = out.split(decimalSeparator);
const paddedInt = (intPart ?? '').padStart(finalIntLength, '0');
out = fracPart ? `${ paddedInt }${ decimalSeparator }${ fracPart }` : paddedInt;
out = fracPart ? `${paddedInt}${decimalSeparator}${fracPart}` : paddedInt;
}
if (thousandSeparator) {
const [intPart, fracPart] = out.split(decimalSeparator);
const regex = /\B(?=(\d{3})+(?!\d))/g;
const separatedInt = intPart.replace(regex, thousandSeparator);
out = fracPart ? `${ separatedInt }${ decimalSeparator }${ fracPart }` : separatedInt;
out = fracPart
? `${separatedInt}${decimalSeparator}${fracPart}`
: separatedInt;
}
return out;
};
const zeroText = padStart
? '0'.padStart(finalIntLength, '0') +
(decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '')
(decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '')
: '0' + (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '');
const initialText = initiallyStable ? formatValue(number) : zeroText;
return (
<span ref={localRef} data-slot="counting-number" {...props}>
<span ref={localRef} data-slot='counting-number' {...props}>
{initialText}
</span>
);