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

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

import{a as e,i as t,n}from"../constants-CW2-utNH.js";import{n as r,r as i}from"../helpers-DBEwVIlX.js";import{Typography as a}from"../Typography/Typography.js";import{r as o}from"../utils-K22C_6qC.js";import{Button as s}from"../Button/Button.js";import{DEFAULT_COLOR as c,FONT_SIZES as l,GROUP_NAME as u}from"./Card.constants.js";import d from"lodash/fp/isFunction.js";import f from"lodash/fp/isString.js";import p from"lodash/fp/omit.js";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{UilTimes as g}from"@tooni/iconscout-unicons-react";import _ from"lodash/fp/isNumber.js";const v=({children:v,color:y=c,dismissable:b=!1,dismissButtonLabel:x=`Close`,fontSize:S=`1`,icon:C,onDismiss:w,title:T,...E})=>{let D=!!v,O=l[_(S)?String(S):S];[`1`,`2`].includes(O)||(O=`1`);let k=f(T)?T:o(T);return h(`div`,{"aria-label":k,className:i(`${e}-${u}`,`${e}-${u}--${y}`,`${e}-${u}--${S}`,`relative flex flex-col gap-1 rounded-sm p-2 text-dark`,y===`body`?`bg-body`:t[y],b?`${e}-${u}--dismissable pr-6`:``,E.className),title:k,...p([`className`],E),children:[(T||C)&&h(a,{className:r(`fractal-card__title`,`fractal-card__title--${S}`,`flex items-center gap-1`),element:`div`,variant:`body-${O}-bold`,children:[C&&m(`div`,{className:r(`fractal-card__title__icon`,`fractal-card__title__icon--${y}`,`h-3 w-3 text`,y===`body`?`text-black`:n[y]),children:C}),T]}),D&&m(a,{className:r(`fractal-card__content`,`fractal-card__content--${S}`,`max-h-full overflow-y-auto`),element:`div`,variant:`body-${O}`,children:v}),b&&m(`div`,{className:r(`fractal-card__dismiss`,`absolute right-2 top-2 h-3 w-3`),children:m(s,{icon:m(g,{}),iconOnly:!0,label:x,variant:`text`,...d(w)?{onClick:w}:{}})})]})};v.displayName=`Card`;export{v as Card,v as default};
//# sourceMappingURL=Card.js.map