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

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

import{DARK_FG_COLORS_CLASSNAMES as e,LIGHT_BG_COLORS_CLASSNAMES as t,PREFIX as n}from"../../constants.js";import{cj as r,cn as i}from"../../styles/helpers.js";import a from"../Typography/Typography.js";import{onlyText as o}from"../../utils.js";import 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(`${n}-${u}`,`${n}-${u}--${y}`,`${n}-${u}--${S}`,`relative flex flex-col gap-1 rounded-sm p-2 text-dark`,y===`body`?`bg-body`:t[y],b?`${n}-${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`:e[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 default};
//# sourceMappingURL=Card.js.map