@cleen/ui 0.1.0

package/src/components/card/Card.tsx

@@ -0,0 +1,197 @@
+import { cn, ColorHelpers } from '@cleen/ui-core';
+import { transparentize } from 'color2k';
+import {
+  forwardRef,
+  useMemo,
+  type ComponentProps,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+
+export type CardProps = ComponentProps<'div'> & {
+  header?: { title?: ReactNode; content?: ReactNode; hasDivider?: boolean };
+  footer?: { content?: ReactNode; hasDivider?: boolean };
+  color?: string;
+  isGlass?: boolean;
+  p?: number;
+  gap?: number;
+  hoverable?: boolean;
+  classNames?: {
+    container?: string;
+    childrenContainer?: string;
+    header?: {
+      title?: string;
+      content?: string;
+      divider?: string;
+    };
+    footer?: {
+      content?: string;
+      divider?: string;
+    };
+  };
+  styles?: {
+    container?: CSSProperties;
+    childrenContainer?: CSSProperties;
+    header?: {
+      title?: CSSProperties;
+      content?: CSSProperties;
+      divider?: CSSProperties;
+    };
+    footer?: {
+      content?: CSSProperties;
+      divider?: CSSProperties;
+    };
+  };
+};
+
+/**
+ * The `Card` component is a versatile container used to display content in a structured format, optionally with a header and footer. The header and footer can include content and optional dividers.
+ */
+export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
+  {
+    header,
+    footer,
+    color,
+    isGlass = false,
+    hoverable = false,
+    p,
+    gap,
+    children,
+    className,
+    classNames,
+    style,
+    styles,
+    ...props
+  },
+  ref
+) {
+  const { cardColor, backgroundColor, borderColor } = useMemo(() => {
+    const cardColor = ColorHelpers.getComputedColor(color);
+
+    if (!cardColor) {
+      return {
+        cardColor,
+      };
+    }
+
+    return {
+      cardColor,
+      backgroundColor: transparentize(cardColor, 0.9),
+      borderColor: transparentize(cardColor, 0.8),
+    };
+  }, [color]);
+
+  return (
+    <div className={cn('cleen', className)} style={style} ref={ref} {...props}>
+      <div
+        className={cn(
+          'cleen-bg-background cleen-rounded-lg cleen-pt-6 cleen-border cleen-border-gray/10 cleen-flex cleen-flex-col cleen-gap-6 cleen-flex-grow',
+          hoverable &&
+            'cleen-transition-all cleen-duration-200 hover:cleen-border-gray/20 hover:cleen-shadow-md',
+          footer?.content ? 'cleen-pb-3' : 'cleen-pb-6',
+          classNames?.container
+        )}
+        style={{
+          ...(cardColor && {
+            backgroundColor,
+            borderColor,
+            color: cardColor,
+          }),
+          ...(isGlass && {
+            backgroundImage: `linear-gradient(to right, rgba(var(--cleen-black), 0.03) 0%, rgba(255, 255, 255, 0) 5%),
+                             linear-gradient(to bottom, rgba(var(--cleen-black), 0.03) 0%, rgba(255, 255, 255, 0) 10%)`,
+          }),
+          ...(p !== undefined && { paddingBlock: p }),
+          ...(gap !== undefined && { gap }),
+          ...styles?.container,
+        }}
+      >
+        {(header?.content || header?.title) && (
+          <div
+            className={cn('cleen-px-6', classNames?.header?.content)}
+            style={{
+              ...(cardColor && {
+                color: cardColor,
+              }),
+              ...(p !== undefined && { paddingInline: p }),
+              ...styles?.header?.content,
+            }}
+          >
+            {header?.title && (
+              <div
+                className={cn(
+                  'cleen-text-xl cleen-font-bold cleen-text-gray',
+                  classNames?.header?.title
+                )}
+                style={{
+                  ...(cardColor && {
+                    color: cardColor,
+                  }),
+                  ...styles?.header?.title,
+                }}
+              >
+                {header?.title}
+              </div>
+            )}
+
+            {header?.content}
+          </div>
+        )}
+
+        {(header?.content || header?.title) && header?.hasDivider && (
+          <hr
+            className={cn('cleen-text-gray/10', classNames?.header?.divider)}
+            style={{
+              ...(cardColor && {
+                color: borderColor,
+              }),
+              ...styles?.header?.divider,
+            }}
+          />
+        )}
+
+        {children && (
+          <div
+            className={cn('cleen-px-6', classNames?.childrenContainer)}
+            style={{
+              ...(p !== undefined && { paddingInline: p }),
+              ...styles?.childrenContainer,
+            }}
+          >
+            {children}
+          </div>
+        )}
+
+        {footer?.content && footer?.hasDivider && (
+          <hr
+            className={cn('cleen-text-gray/10', classNames?.footer?.divider)}
+            style={{
+              ...(cardColor && {
+                color: borderColor,
+              }),
+              ...styles?.footer?.divider,
+            }}
+          />
+        )}
+
+        {footer?.content && (
+          <div
+            className={cn(
+              'cleen-px-6 -cleen-mt-3 cleen-text-black',
+              classNames?.footer?.content
+            )}
+            style={{
+              ...(cardColor && {
+                color: cardColor,
+              }),
+              ...(p !== undefined && { paddingInline: p }),
+              ...styles?.footer?.content,
+            }}
+          >
+            {footer.content}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});

package/src/components/card/index.ts

@@ -0,0 +1,3 @@
+export { Card, type CardProps } from './Card';
+export { CardIcon, type CardIconProps } from './variants/CardIcon/CardIcon';
+export { CardMedia, type CardMediaProps } from './variants/CardMedia/CardMedia';

package/src/components/card/variants/CardIcon/CardIcon.tsx

@@ -0,0 +1,158 @@
+import { CleenIcon, IconName } from '@/components/cleenIcon';
+import { cn, ColorHelpers } from '@cleen/ui-core';
+import { transparentize } from 'color2k';
+import { forwardRef, type CSSProperties, type ReactNode } from 'react';
+import { Card, type CardProps } from '../../Card';
+
+export type CardIconProps = CardProps & {
+  /** Icon to display in the icon holder (using IconName enum) */
+  iconName?: IconName;
+  /** Custom icon source (SVG path or component) - alternative to iconName */
+  iconSrc?: string;
+  /** Custom icon element - alternative to iconName/iconSrc */
+  icon?: ReactNode;
+  /** Size of the icon in pixels */
+  iconSize?: number;
+
+  classNames?: CardProps['classNames'] & {
+    /** Custom class name for the icon holder */
+    iconHolder?: string;
+    /** Custom class name for the content wrapper */
+    content?: string;
+  };
+
+  styles?: CardProps['styles'] & {
+    /** Custom style for the icon holder */
+    iconHolder?: CSSProperties;
+    /** Custom style for the content wrapper */
+    content?: CSSProperties;
+  };
+};
+
+/**
+ * CardIcon - A card component with an icon holder on the left
+ *
+ * Built on top of the Card component with a styled icon container.
+ * Supports both light and dark modes with proper theming.
+ *
+ * @example
+ * ```tsx
+ * // Using IconName
+ * <IconCard iconName={IconName.HouseLine}>
+ *   <h3>Home</h3>
+ *   <p>Welcome to your dashboard</p>
+ * </IconCard>
+ *
+ * // Using custom icon source
+ * <IconCard iconSrc="/icons/custom.svg">
+ *   <h3>Custom Icon</h3>
+ *   <p>With custom SVG</p>
+ * </IconCard>
+ *
+ * // With header and footer (inherited from Card)
+ * <IconCard
+ *   iconName={IconName.Settings}
+ *   header={{ content: 'Settings', hasDivider: true }}
+ *   footer={{ content: 'Last updated: Today', hasDivider: true }}
+ * >
+ *   <p>Configure your preferences</p>
+ * </IconCard>
+ * ```
+ */
+export const CardIcon = forwardRef<HTMLDivElement, CardIconProps>(
+  function IconCard(
+    {
+      iconName,
+      iconSrc,
+      icon,
+      iconSize = 20,
+      header,
+      color,
+      children,
+      classNames,
+      styles,
+      ...props
+    },
+    ref
+  ) {
+    const cardColor = ColorHelpers.getComputedColor(color);
+
+    return (
+      <Card
+        ref={ref}
+        classNames={{
+          ...classNames,
+          header: {
+            ...classNames?.header,
+            title: cn('cleen-flex cleen-gap-4', classNames?.header?.title),
+          },
+        }}
+        header={{
+          ...header,
+          title: (
+            <>
+              {/* Icon holder */}
+              <div
+                className={cn(
+                  'cleen-flex cleen-w-10 cleen-h-10 cleen-justify-center cleen-items-center cleen-gap-2 cleen-flex-shrink-0 cleen-rounded-xl cleen-border cleen-border-gray/10 cleen-bg-background',
+                  classNames?.iconHolder
+                )}
+                style={{
+                  ...(cardColor && {
+                    backgroundColor: transparentize(cardColor, 0.85),
+                    color: cardColor,
+                    borderColor: 'transparent',
+                  }),
+                  ...styles?.iconHolder,
+                }}
+              >
+                {icon ? (
+                  icon
+                ) : iconName ? (
+                  <CleenIcon
+                    name={iconName}
+                    className="cleen-text-gray"
+                    style={{
+                      width: iconSize,
+                      height: iconSize,
+                      ...(cardColor && {
+                        color: cardColor,
+                      }),
+                    }}
+                  />
+                ) : iconSrc ? (
+                  <img
+                    src={iconSrc}
+                    alt="Icon"
+                    className="cleen-text-gray"
+                    style={{
+                      width: iconSize,
+                      height: iconSize,
+                      ...(cardColor && {
+                        color: cardColor,
+                      }),
+                    }}
+                  />
+                ) : null}
+              </div>
+
+              {header?.title}
+            </>
+          ),
+        }}
+        color={color}
+        {...props}
+      >
+        {/* Content */}
+        {children && (
+          <div
+            className={cn('cleen-flex-1', classNames?.content)}
+            style={styles?.content}
+          >
+            {children}
+          </div>
+        )}
+      </Card>
+    );
+  }
+);

package/src/components/card/variants/CardMedia/CardMedia.tsx

@@ -0,0 +1,127 @@
+import { cn } from '@cleen/ui-core';
+import {
+  forwardRef,
+  useMemo,
+  type ComponentProps,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+import { Card, type CardProps } from '../../Card';
+
+export type Media =
+  | (ComponentProps<'img'> & { type: 'image' })
+  | (ComponentProps<'video'> & {
+      type: 'video';
+    })
+  | (ComponentProps<'iframe'> & {
+      type: 'iframe';
+    });
+
+export type CardMediaProps = Omit<CardProps, 'header'> & {
+  media?: Media;
+  header?: { title?: ReactNode; hasDivider?: boolean };
+  classNames?: CardProps['classNames'] & {
+    media?: {
+      container?: string;
+      content?: string;
+    };
+  };
+  styles?: CardProps['styles'] & {
+    media?: {
+      container?: CSSProperties;
+      content?: CSSProperties;
+    };
+  };
+};
+
+/**
+ * CardMedia - a Card variant that places an image or video inside the header.content area.
+ * Only `header.title` and `header.hasDivider` are accepted via the `header` prop; `header.content` is reserved for the `media` prop.
+ */
+export const CardMedia = forwardRef<HTMLDivElement, CardMediaProps>(
+  function CardMedia(
+    { media, header, color, children, classNames, styles, ...props },
+    ref
+  ) {
+    const mediaNode = useMemo(() => {
+      switch (media?.type) {
+        case 'image':
+          return (
+            <img
+              {...media}
+              alt={media.alt ?? 'Card media'}
+              className={cn(
+                'cleen-w-full cleen-aspect-video cleen-object-cover',
+                classNames?.media?.content
+              )}
+              style={styles?.media?.content}
+            />
+          );
+
+        case 'video':
+          return (
+            <video
+              playsInline
+              controls
+              {...media}
+              className={cn(
+                'cleen-w-full cleen-aspect-video cleen-object-cover',
+                classNames?.media?.content
+              )}
+              style={styles?.media?.content}
+            />
+          );
+
+        case 'iframe':
+          return (
+            <iframe
+              {...media}
+              title={media.title ?? 'Card iframe'}
+              className={cn(
+                'cleen-w-full cleen-aspect-video cleen-object-cover',
+                classNames?.media?.content
+              )}
+              style={styles?.media?.content}
+            />
+          );
+
+        default:
+          return null;
+      }
+    }, [media, classNames?.media, styles?.media]);
+
+    return (
+      <Card
+        ref={ref}
+        color={color}
+        classNames={{
+          ...classNames,
+          container: cn('cleen-pt-0', classNames?.container),
+          header: {
+            ...classNames?.header,
+            content: cn('cleen-p-0', classNames?.header?.content),
+          },
+        }}
+        header={{
+          ...header,
+          ...(mediaNode && {
+            content: (
+              <div
+                className={cn(
+                  'cleen-w-full cleen-overflow-hidden cleen-rounded-t-lg',
+                  classNames?.media?.container
+                )}
+                style={styles?.media?.container}
+              >
+                {mediaNode}
+              </div>
+            ),
+          }),
+        }}
+        {...props}
+      >
+        {children}
+      </Card>
+    );
+  }
+);