Renaming Placeholder component to Skeleton

src/components/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,27 @@
+import { StoryObj, Meta } from '@storybook/react'
+
+import { Box } from '~/components/Box'
+
+import { Skeleton } from './Skeleton'
+
+export default {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+} as Meta<typeof Skeleton>
+
+type Story = StoryObj<typeof Skeleton>
+
+export const Default: Story = {
+  render: () => (
+    <Box gap="2">
+      <Skeleton gap="2" padding="2">
+        <Skeleton style={{ width: 72, height: 72 }} />
+        <Box flexDirection="column" gap="2">
+          <Skeleton size="md" />
+          <Skeleton size="sm" />
+          <Skeleton size="sm" />
+        </Box>
+      </Skeleton>
+    </Box>
+  ),
+}

src/components/Placeholder/Placeholder.tsx → src/components/Skeleton/Skeleton.tsx

@@ -6,15 +6,15 @@ import { Box, BoxProps } from '../Box'
 
 import * as styles from './styles.css'
 
-type PlaceholderProps = BoxProps & styles.PlaceholderVariants
+type SkeletonProps = BoxProps & styles.SkeletonVariants
 
-export const Placeholder = (props: PlaceholderProps) => {
+export const Skeleton = (props: SkeletonProps) => {
   const { size, ...rest } = props
 
   return (
     <Box
       as={motion.div}
-      className={styles.placeholder({ size })}
+      className={styles.skeleton({ size })}
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       borderRadius="sm"

src/components/Skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton, Skeleton as Placeholder /* deprecated */ } from './Skeleton'

src/components/Placeholder/styles.css.ts → src/components/Skeleton/styles.css.ts

@@ -3,7 +3,7 @@ import { recipe, RecipeVariants } from '@vanilla-extract/recipes'
 
 import { vars } from '~/css'
 
-const placeholderBackgroundAnimation = keyframes({
+const skeletonAnimation = keyframes({
   '0%': {
     backgroundPosition: '0% 50%',
   },
@@ -15,12 +15,12 @@ const placeholderBackgroundAnimation = keyframes({
   },
 })
 
-export const placeholder = recipe({
+export const skeleton = recipe({
   base: {
     backgroundImage: `linear-gradient(-45deg, transparent, ${vars.colors.backgroundSecondary}, transparent)`,
     backgroundSize: '400% 400%',
     backgroundRepeat: 'no-repeat',
-    animation: `${placeholderBackgroundAnimation} 1s ease infinite`,
+    animation: `${skeletonAnimation} 1s ease infinite`,
   },
 
   variants: {
@@ -49,4 +49,4 @@ export const placeholder = recipe({
   },
 })
 
-export type PlaceholderVariants = RecipeVariants<typeof placeholder>
+export type SkeletonVariants = RecipeVariants<typeof skeleton>

src/components/index.ts

@@ -34,7 +34,7 @@ export { Image } from './Image'
 export { ModalPrimitive, Modal } from './Modal'
 export { NumericInput } from './NumericInput'
 export { PINCodeInput } from './PINCodeInput'
-export { Placeholder } from './Placeholder'
+export { Skeleton, Placeholder /* deprecated */ } from './Skeleton'
 export { Progress } from './Progress'
 export { ControlledRadioGroup, RadioGroup } from './RadioGroup'
 export { Scroll } from './Scroll'