feat: add card component

Author: Ohh-889

packages/ui-variants/src/variants/card.ts

@@ -0,0 +1,80 @@
+import { tv } from 'tailwind-variants';
+
+export const cardVariants = tv({
+  defaultVariants: {
+    flexHeight: false,
+    size: 'md'
+  },
+  slots: {
+    content: 'flex-grow',
+    footer: 'flex items-center justify-between',
+    header: 'flex items-center justify-between',
+    root: 'flex flex-col items-stretch rounded-md border bg-card text-card-foreground shadow-sm',
+    title: 'font-semibold tracking-tight',
+    titleRoot: 'flex items-center'
+  },
+  variants: {
+    flexHeight: {
+      true: {
+        content: 'overflow-hidden'
+      }
+    },
+    size: {
+      '2xl': {
+        content: 'px-7 py-6',
+        footer: 'px-7 py-6',
+        header: 'px-7 py-6',
+        root: 'text-lg',
+        title: 'text-xl',
+        titleRoot: 'gap-3.5'
+      },
+      lg: {
+        content: 'px-5 py-4',
+        footer: 'px-5 py-5',
+        header: 'px-5 py-4',
+        root: 'text-base',
+        title: 'text-lg',
+        titleRoot: 'gap-2.5'
+      },
+      md: {
+        content: 'px-4 py-3',
+        footer: 'px-4 py-3',
+        header: 'px-4 py-3',
+        root: 'text-sm',
+        title: 'text-base',
+        titleRoot: 'gap-2'
+      },
+      sm: {
+        content: 'px-3 py-2',
+        footer: 'px-3 py-2',
+        header: 'px-3 py-2',
+        root: 'text-xs',
+        title: 'text-sm',
+        titleRoot: 'gap-1.75'
+      },
+      xl: {
+        content: 'px-6 py-5',
+        footer: 'px-6 py-6',
+        header: 'px-6 py-5',
+        root: 'text-base',
+        title: 'text-lg',
+        titleRoot: 'gap-3'
+      },
+      xs: {
+        content: 'px-2 py-1.5',
+        footer: 'px-2 py-1.5',
+        header: 'px-2 py-1.5',
+        root: 'text-2xs',
+        title: 'text-xs',
+        titleRoot: 'gap-1.5'
+      }
+    },
+    split: {
+      true: {
+        root: 'divide-y divide-border'
+      }
+    }
+  }
+});
+
+export type CardSlots = keyof typeof cardVariants.slots;

packages/ui/src/components/card/index.ts

@@ -0,0 +1,9 @@
+export * from './source/Card';
+export * from './source/CardContent';
+export * from './source/CardFooter';
+export * from './source/CardHeader';
+export * from './source/CardRoot';
+export * from './source/CardTitle';
+export * from './source/CardTitleRoot';
+
+export * from './type';

packages/ui/src/components/card/source/Card.tsx

@@ -0,0 +1,104 @@
+import { cardVariants, cn } from '@skyroc-ui/variants';
+import React, { isValidElement } from 'react';
+
+import { If } from '../../if';
+import type { CardProps } from '../type';
+
+import { CardContent } from './CardContent';
+import { CardFooter } from './CardFooter';
+import { CardHeader } from './CardHeader';
+import { CardRoot } from './CardRoot';
+import { CardTitle } from './CardTitle';
+import { CardTitleRoot } from './CardTitleRoot';
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
+  const {
+    children,
+    className,
+    classNames,
+    extra,
+    flexHeight,
+    footer,
+    header,
+    size,
+    split,
+    title,
+    titleLeading,
+    titleRoot,
+    titleTrailing,
+    ...rest
+  } = props;
+
+  const showHeader = Boolean(header || title || extra);
+
+  const { root } = cardVariants({ size, split });
+
+  const mergedCls = cn(root(), className);
+
+  return (
+    <CardRoot
+      className={mergedCls}
+      {...rest}
+      ref={ref}
+    >
+      <If condition={showHeader}>
+        <CardHeader
+          className={classNames?.header}
+          size={size}
+        >
+          <If
+            condition={!header}
+            fallback={header}
+          >
+            <If
+              condition={!titleRoot}
+              fallback={titleRoot}
+            >
+              <CardTitleRoot
+                className={classNames?.titleRoot}
+                size={size}
+              >
+                {titleLeading}
+                <If
+                  condition={!isValidElement(title)}
+                  fallback={title}
+                >
+                  <CardTitle
+                    className={classNames?.title}
+                    size={size}
+                  >
+                    {title}
+                  </CardTitle>
+                </If>
+                {titleTrailing}
+              </CardTitleRoot>
+            </If>
+
+            {extra}
+          </If>
+        </CardHeader>
+      </If>
+      <CardContent
+        className={classNames?.content}
+        flexHeight={flexHeight}
+        size={size}
+      >
+        {children}
+      </CardContent>
+
+      <If
+        condition={!isValidElement(footer) && Boolean(footer)}
+        fallback={footer}
+      >
+        <CardFooter
+          className={classNames?.footer}
+          size={size}
+        >
+          {footer}
+        </CardFooter>
+      </If>
+    </CardRoot>
+  );
+});
+
+Card.displayName = 'Card';

packages/ui/src/components/card/source/CardContent.tsx

@@ -0,0 +1,22 @@
+import { cardVariants, cn } from '@skyroc-ui/variants';
+import React from 'react';
+
+import type { CardContentProps } from '../type';
+
+export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((props, ref) => {
+  const { className, flexHeight, size, ...rest } = props;
+
+  const { content } = cardVariants({ flexHeight, size });
+
+  const mergedCls = cn(content(), className);
+
+  return (
+    <div
+      className={mergedCls}
+      {...rest}
+      ref={ref}
+    />
+  );
+});
+
+CardContent.displayName = 'CardContent';

packages/ui/src/components/card/source/CardFooter.tsx

@@ -0,0 +1,22 @@
+import { cardVariants, cn } from '@skyroc-ui/variants';
+import React from 'react';
+
+import type { CardFooterProps } from '../type';
+
+export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const { footer } = cardVariants({ size });
+
+  const mergedCls = cn(footer(), className);
+
+  return (
+    <div
+      className={mergedCls}
+      {...rest}
+      ref={ref}
+    />
+  );
+});
+
+CardFooter.displayName = 'CardFooter';

packages/ui/src/components/card/source/CardHeader.tsx

@@ -0,0 +1,22 @@
+import { cardVariants, cn } from '@skyroc-ui/variants';
+import React, { useMemo } from 'react';
+
+import type { CardHeaderProps } from '../type';
+
+export const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const { header } = cardVariants({ size });
+
+  const mergedCls = cn(header(), className);
+
+  return (
+    <div
+      className={mergedCls}
+      {...rest}
+      ref={ref}
+    />
+  );
+});
+
+CardHeader.displayName = 'CardHeader';

packages/ui/src/components/card/source/CardRoot.tsx

@@ -0,0 +1,22 @@
+import { cardVariants, cn } from '@skyroc-ui/variants';
+import React, { useMemo } from 'react';
+
+import type { CardRootProps } from '../type';
+
+export const CardRoot = React.forwardRef<HTMLDivElement, CardRootProps>((props, ref) => {
+  const { className, size, split, ...rest } = props;
+
+  const { root } = cardVariants({ size, split });
+
+  const mergedCls = cn(root(), className);
+
+  return (
+    <div
+      className={mergedCls}
+      {...rest}
+      ref={ref}
+    />
+  );
+});
+
+CardRoot.displayName = 'CardRoot';

packages/ui/src/components/card/source/CardTitle.tsx

@@ -0,0 +1,22 @@
+import { cardVariants, cn } from '@skyroc-ui/variants';
+import React from 'react';
+
+import type { CardTitleProps } from '../type';
+
+export const CardTitle = React.forwardRef<HTMLDivElement, CardTitleProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const { title } = cardVariants({ size });
+
+  const mergedCls = cn(title(), className);
+
+  return (
+    <div
+      className={mergedCls}
+      {...rest}
+      ref={ref}
+    />
+  );
+});
+
+CardTitle.displayName = 'CardTitle';

packages/ui/src/components/card/source/CardTitleRoot.tsx

@@ -0,0 +1,26 @@
+import { cardVariants, cn } from '@skyroc-ui/variants';
+import React from 'react';
+
+import type { CardTitleRootProps } from '../type';
+
+export const CardTitleRoot = React.forwardRef<HTMLDivElement, CardTitleRootProps>((props, ref) => {
+  const { children, className, leading, size, trailing, ...rest } = props;
+
+  const { titleRoot } = cardVariants({ size });
+
+  const mergedCls = cn(titleRoot(), className);
+
+  return (
+    <div
+      className={mergedCls}
+      {...rest}
+      ref={ref}
+    >
+      {leading}
+      {children}
+      {trailing}
+    </div>
+  );
+});
+
+CardTitleRoot.displayName = 'CardTitleRoot';