@snowball-tech/fractal/dist/Skeleton/Skeleton.js

Fractal's (Snowball's design system) React component library based on RadixUI and TailwindCSS

import{a as e,i as t}from"../constants-CW2-utNH.js";import{r as n}from"../helpers-DBEwVIlX.js";import{DEFAULT_COLOR as r,GROUP_NAME as i}from"./Skeleton.constants.js";import a from"lodash/fp/isEmpty.js";import o from"lodash/fp/omit.js";import{jsx as s}from"react/jsx-runtime";const c=({children:c,color:l=r,shape:u,...d})=>{let f={...t,black:`bg-black`,"dark-grey":`bg-grey-30`,grey:`bg-grey-70`,"light-grey":`bg-grey-90`},p={blue:`after:bg-[linear-gradient(90deg,transparent,var(--color-decorative-blue-70),transparent)]`,green:`after:bg-[linear-gradient(90deg,transparent,var(--color-decorative-green-70),transparent)]`,pink:`after:bg-[linear-gradient(90deg,transparent,var(--color-decorative-pink-70),transparent)]`,purple:`after:bg-[linear-gradient(90deg,transparent,var(--color-decorative-purple-70),transparent)]`,yellow:`after:bg-[linear-gradient(90deg,transparent,var(--color-decorative-yellow-70),transparent)]`,black:``,"dark-grey":``,grey:`after:bg-[linear-gradient(90deg,transparent,var(--color-base-grey-50),transparent)]`,"light-grey":`after:bg-[linear-gradient(90deg,transparent,var(--color-base-grey-70),transparent)]`,white:`after:bg-[linear-gradient(90deg,transparent,var(--color-base-grey-90),transparent)]`},m=``;switch(u){case`circle`:m=`rounded-full [aspect-ratio:1/1]`;break;case`rectangle`:m=`w-full rounded-sm`;break;case`roundedRectangle`:m=`w-full rounded-full`;break;case`square`:m=`rounded-sm [aspect-ratio:1/1] `;break;default:return!1}return a(m)?!1:s(`div`,{className:n(`${e}-${i}`,`${e}-${i}--${u}`,`${e}-${i}--${l}`,f[l],`relative h-full overflow-hidden`,m,`after:absolute after:inset-0 after:-translate-x-full after:animate-wave after:bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent)] after:content-empty`,p[l],d.className),...o([`className`],d),children:c})};c.displayName=`Skeleton`;export{c as Skeleton,c as default};
//# sourceMappingURL=Skeleton.js.map