@cleen/ui 0.1.0 → 0.1.2

package/src/components/card/Card.tsx

@@ -1,197 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,158 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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>
-    );
-  }
-);