SrJuggernaut
d21d55f481
- Add chip, mark, and iconButton recipes with semantic color support - Introduce skeleton pattern and shimmer gradient for loading states - Enhance button and details recipes with refined transition properties - Update border radius tokens to include 'full' and negative spacing values - Refactor details recipe export and semantic color key handling - Bump package version to 0.0.6
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { definePattern } from '@pandacss/dev'
|
|
import type { SystemStyleObject } from '@pandacss/types'
|
|
|
|
const skeletonPattern = definePattern({
|
|
properties: {
|
|
variant: { type: 'enum', value: ['shimmerLeft', 'shimmerRight', 'pulse'] },
|
|
duration: { type: 'number' }
|
|
} as const,
|
|
defaultValues: {
|
|
variant: 'pulse',
|
|
duration: 2
|
|
},
|
|
transform(props) {
|
|
const { variant, ...allOther } = props as SystemStyleObject & {
|
|
variant: 'shimmerLeft' | 'shimmerRight' | 'pulse'
|
|
duration: number
|
|
}
|
|
|
|
return {
|
|
...allOther,
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
_before: {
|
|
content: '""',
|
|
display: 'block',
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
background: variant === 'pulse' ? '{colors.neutral.3}' : undefined,
|
|
backgroundImage: variant === 'shimmerRight' || variant === 'shimmerLeft' ? '{gradients.shimmer}' : undefined,
|
|
animationDirection: variant === 'shimmerLeft' ? 'reverse' : 'normal',
|
|
animationName: variant === 'pulse' ? 'pulse' : 'shimmer',
|
|
animationDuration: `${props.duration}s`,
|
|
animationIterationCount: 'infinite',
|
|
animationTimingFunction: 'easeInOut'
|
|
}
|
|
} as SystemStyleObject
|
|
}
|
|
})
|
|
|
|
export default skeletonPattern
|