@cleen/ui 0.1.0 → 0.1.1

package/src/components/sidebar/types.ts

@@ -1,157 +0,0 @@
-import type { ReactNode } from 'react';
-
-/**
- * Represents a single item in the sidebar navigation
- */
-export interface SidebarItemConfig {
-  /** Unique identifier for the menu item */
-  id: string;
-  /** Display name for the item */
-  name?: string;
-  /** Label shown in tooltip */
-  label: string;
-  /** Icon name from the Icon component library */
-  iconName?: string;
-  /** Custom icon source (SVG path or component) */
-  iconSrc?: string;
-  /** Optional path for navigation */
-  path?: string | null;
-  /** Optional badge count to display */
-  badgeCount?: number | string;
-  /** Optional divider below the item */
-  withBottomDivider?: boolean;
-  /** Any additional custom data */
-  [key: string]: unknown;
-}
-
-/**
- * Props for the SidebarItem component
- */
-export interface SidebarItemProps {
-  /** Configuration object for the sidebar item */
-  item: SidebarItemConfig;
-  /** ID of the currently active item */
-  activeId?: string | null;
-  /** Click handler for the item */
-  onClick?: (item: SidebarItemConfig) => void;
-  /** Optional badge count to display on the item */
-  countBadge?: number | string | null;
-  /** Additional CSS classes */
-  className?: string;
-  /** Custom icon render function */
-  renderIcon?: (item: SidebarItemConfig, isActive: boolean) => ReactNode;
-}
-
-/**
- * Submenu item for DrawerContentTitle
- */
-export interface SubmenuItem {
-  /** Unique identifier */
-  id: string;
-  /** Display title */
-  title: string;
-  /** Click handler */
-  onClick: (item: SubmenuItem) => void;
-  /** Optional icon */
-  iconSrc?: string;
-  /** Any additional custom data */
-  [key: string]: unknown;
-}
-
-/**
- * Props for the DrawerContentTitle component
- */
-export interface DrawerContentTitleProps {
-  /** Title text to display */
-  title: string;
-  /** Icon name from the Icon component library */
-  iconName?: string;
-  /** Icon source (SVG path or component) */
-  iconSrc?: string;
-  /** Icon size in pixels */
-  iconSize?: number;
-  /** Badge color */
-  badgeColor?: string;
-  /** Badge count to display */
-  badgeCount?: string | number;
-  /** Array of submenu items (creates collapsible submenu) */
-  submenu?: SubmenuItem[];
-  /** Click handler */
-  onClick?: () => void;
-  /** Additional CSS classes */
-  className?: string;
-  /** Additional title CSS classes */
-  titleClassName?: string;
-  /** Whether this item is active */
-  isActive?: boolean;
-}
-
-/**
- * Props for the DrawerContainer component
- */
-export interface DrawerContainerProps {
-  /** Content to render inside the drawer */
-  children: ReactNode;
-  /** Title displayed at the top of the drawer */
-  title: string;
-  /** Additional CSS classes */
-  className?: string;
-  /** Custom header render function */
-  renderHeader?: (title: string) => ReactNode;
-}
-
-/**
- * Configuration for drawer content based on menu ID
- */
-export interface DrawerConfig {
-  /** Menu ID that triggers this drawer */
-  menuId: string;
-  /** Content to render in the drawer */
-  content: ReactNode;
-}
-
-/**
- * Main Sidebar component props
- */
-export interface SidebarProps {
-  /** Array of main navigation menu items */
-  navigationItems: SidebarItemConfig[];
-  /** Array of bottom navigation menu items */
-  bottomNavigationItems?: SidebarItemConfig[];
-  /** Drawer configurations mapped by menu ID */
-  drawerContent?: Record<string, ReactNode>;
-  /** Logo component or element */
-  logo?: ReactNode;
-  /** Click handler for logo */
-  onLogoClick?: () => void;
-  /** User avatar component or element */
-  userAvatar?: ReactNode;
-  /** User information component or element (shown in drawer footer) */
-  userInfo?: ReactNode;
-  /** Footer content shown when drawer is open */
-  drawerFooter?: ReactNode | ((activeMenuId: string | null) => ReactNode);
-  /** Width of the drawer when open (in pixels) */
-  drawerWidth?: number;
-  /** Initial active menu ID */
-  defaultActiveId?: string | null;
-  /** Controlled active menu ID */
-  activeId?: string | null;
-  /** Callback when active menu changes */
-  onActiveChange?: (menuId: string | null) => void;
-  /** Whether clicking outside should close the drawer */
-  closeOnOutsideClick?: boolean;
-  /** Whether losing focus should close the drawer (default: true) */
-  closeOnBlur?: boolean;
-  /** Additional CSS classes for the sidebar container */
-  className?: string;
-  /** Additional CSS classes for the navigation section */
-  navigationClassName?: string;
-  /** Additional CSS classes for the drawer */
-  drawerClassName?: string;
-  /** Custom render function for sidebar items */
-  renderSidebarItem?: (
-    item: SidebarItemConfig,
-    isActive: boolean,
-    onClick: (item: SidebarItemConfig) => void
-  ) => ReactNode;
-}

package/src/components/skeletons/blocks/Skeleton.tsx

@@ -1,72 +0,0 @@
-import { getPulseAnimationClass } from '@/components/skeletons/styles/skeleton';
-import { cn } from '@cleen/ui-core';
-import type { CSSProperties } from 'react';
-import { forwardRef } from 'react';
-
-export type SkeletonRoundness =
-  | 'none'
-  | 'sm'
-  | 'md'
-  | 'lg'
-  | 'xl'
-  | '2xl'
-  | 'full';
-
-export interface SkeletonProps {
-  width?: string | number;
-  height?: string | number;
-  roundness?: SkeletonRoundness;
-  variant?: 'pulse' | 'default';
-  className?: string;
-  style?: CSSProperties;
-}
-
-const roundnessMap: Record<SkeletonRoundness, string> = {
-  none: 'cleen-rounded-none',
-  sm: 'cleen-rounded-sm',
-  md: 'cleen-rounded-md',
-  lg: 'cleen-rounded-lg',
-  xl: 'cleen-rounded-xl',
-  '2xl': 'cleen-rounded-2xl',
-  full: 'cleen-rounded-full',
-};
-
-/**
- * The most basic skeleton block - a single rectangle with customizable size, roundness, and animation.
- * Can be used on its own or as a building block for more complex skeleton components.
- */
-export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
-  function Skeleton(
-    { width, height, roundness = 'md', variant = 'default', className, style },
-    ref
-  ) {
-    const pulseClass = getPulseAnimationClass(variant);
-
-    const inlineStyle: CSSProperties = {
-      // Numeric values get treated as px, strings pass through as-is (e.g. '3/4' won't work here - use className for that)
-      ...(width !== undefined
-        ? { width: typeof width === 'number' ? `${width}px` : width }
-        : {}),
-      ...(height !== undefined
-        ? { height: typeof height === 'number' ? `${height}px` : height }
-        : {}),
-      ...style,
-    };
-
-    return (
-      <div ref={ref} className={cn('cleen', className)}>
-        <div
-          className={cn(
-            'cleen-bg-gray/10',
-            roundnessMap[roundness],
-            // Default to full width + sensible height when nothing is provided
-            width === undefined && 'cleen-w-full',
-            height === undefined && 'cleen-h-4',
-            pulseClass
-          )}
-          style={inlineStyle}
-        />
-      </div>
-    );
-  }
-);

package/src/components/skeletons/blocks/SkeletonAvatar.tsx

@@ -1,43 +0,0 @@
-import { getPulseAnimationClass } from '@/components/skeletons/styles/skeleton';
-import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
-import { cn } from '@cleen/ui-core';
-import { forwardRef } from 'react';
-
-// Single avatar or a row of them when itemCount > 1
-export const SkeletonAvatar = forwardRef<
-  HTMLDivElement,
-  SkeletonComponentProps
->(function SkeletonAvatar(
-  { className, style, variant = 'default', itemCount = 1 },
-  ref
-) {
-  const pulseClass = getPulseAnimationClass(variant);
-
-  return (
-    <div ref={ref} className={cn('cleen', className)} style={style}>
-      <div className="cleen-flex cleen-items-start cleen-gap-4 cleen-flex-wrap">
-        {Array.from({ length: itemCount }).map((_, index) => (
-          <div
-            key={index}
-            className="cleen-flex cleen-flex-col cleen-items-center cleen-gap-2"
-          >
-            {/* Circle avatar */}
-            <div
-              className={cn(
-                'cleen-bg-gray/10 cleen-rounded-full cleen-size-12 cleen-border cleen-border-gray/15',
-                pulseClass
-              )}
-            />
-            {/* Name underneath */}
-            <div
-              className={cn(
-                'cleen-bg-gray/10 cleen-rounded cleen-w-14 cleen-h-3',
-                pulseClass
-              )}
-            />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-});

package/src/components/skeletons/blocks/SkeletonBadge.tsx

@@ -1,30 +0,0 @@
-import { getPulseAnimationClass } from '@/components/skeletons/styles/skeleton';
-import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
-import { cn } from '@cleen/ui-core';
-import { forwardRef } from 'react';
-
-// Pill badges - short, rounded, the universe's smallest skeleton
-export const SkeletonBadge = forwardRef<HTMLDivElement, SkeletonComponentProps>(
-  function SkeletonBadge(
-    { className, style, variant = 'default', itemCount = 1 },
-    ref
-  ) {
-    const pulseClass = getPulseAnimationClass(variant);
-
-    return (
-      <div ref={ref} className={cn('cleen', className)} style={style}>
-        <div className="cleen-flex cleen-items-center cleen-flex-wrap cleen-gap-2">
-          {Array.from({ length: itemCount }).map((_, index) => (
-            <div
-              key={index}
-              className={cn(
-                'cleen-bg-gray/10 cleen-rounded-full cleen-h-6 cleen-w-16',
-                pulseClass
-              )}
-            />
-          ))}
-        </div>
-      </div>
-    );
-  }
-);

package/src/components/skeletons/blocks/SkeletonBanner.tsx

@@ -1,44 +0,0 @@
-import { getPulseAnimationClass } from '@/components/skeletons/styles/skeleton';
-import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
-import { cn } from '@cleen/ui-core';
-import { forwardRef } from 'react';
-
-// Full-width hero/banner placeholder - big, chunky, attention-grabbing
-export const SkeletonBanner = forwardRef<
-  HTMLDivElement,
-  SkeletonComponentProps
->(function SkeletonBanner({ className, style, variant = 'default' }, ref) {
-  const pulseClass = getPulseAnimationClass(variant);
-
-  return (
-    <div ref={ref} className={cn('cleen', className)} style={style}>
-      <div
-        className={cn(
-          'cleen-relative cleen-bg-gray/10 cleen-rounded-2xl cleen-w-full cleen-overflow-hidden',
-          pulseClass
-        )}
-      >
-        {/* Background image strip */}
-        <div className="cleen-h-48 cleen-w-full" />
-
-        {/* Overlay content */}
-        <div className="cleen-absolute cleen-inset-0 cleen-flex cleen-flex-col cleen-justify-center cleen-items-start cleen-gap-4 cleen-px-8">
-          {/* Badge */}
-          <div className="cleen-bg-gray/20 cleen-rounded-full cleen-w-24 cleen-h-6" />
-
-          {/* Heading */}
-          <div className="cleen-flex cleen-flex-col cleen-gap-2 cleen-w-full">
-            <div className="cleen-bg-gray/20 cleen-rounded cleen-w-2/3 cleen-h-8" />
-            <div className="cleen-bg-gray/20 cleen-rounded cleen-w-1/2 cleen-h-5" />
-          </div>
-
-          {/* CTA buttons */}
-          <div className="cleen-flex cleen-gap-3">
-            <div className="cleen-bg-gray/20 cleen-rounded-lg cleen-w-28 cleen-h-10" />
-            <div className="cleen-bg-gray/15 cleen-rounded-lg cleen-w-24 cleen-h-10" />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-});

package/src/components/skeletons/blocks/SkeletonButton.tsx

@@ -1,31 +0,0 @@
-import { getPulseAnimationClass } from '@/components/skeletons/styles/skeleton';
-import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
-import { cn } from '@cleen/ui-core';
-import { forwardRef } from 'react';
-
-// Single or multiple button placeholders in a row
-export const SkeletonButton = forwardRef<
-  HTMLDivElement,
-  SkeletonComponentProps
->(function SkeletonButton(
-  { className, style, variant = 'default', itemCount = 1 },
-  ref
-) {
-  const pulseClass = getPulseAnimationClass(variant);
-
-  return (
-    <div ref={ref} className={cn('cleen', className)} style={style}>
-      <div className="cleen-flex cleen-items-center cleen-gap-2">
-        {Array.from({ length: itemCount }).map((_, index) => (
-          <div
-            key={index}
-            className={cn(
-              'cleen-bg-gray/10 cleen-rounded-lg cleen-h-10 cleen-w-28',
-              pulseClass
-            )}
-          />
-        ))}
-      </div>
-    </div>
-  );
-});

package/src/components/skeletons/blocks/SkeletonCard.tsx

@@ -1,39 +0,0 @@
-import { getPulseAnimationClass } from '@/components/skeletons/styles/skeleton';
-import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
-import { forwardRef } from 'react';
-import { cn } from '@cleen/ui-core';
-
-export const SkeletonCard = forwardRef<HTMLDivElement, SkeletonComponentProps>(
-  function SkeletonCard({ className, style, variant = 'default' }, ref) {
-    const pulseClass = getPulseAnimationClass(variant);
-
-    return (
-      <div ref={ref} className={cn('cleen', className)} style={style}>
-        <div className="cleen-flex cleen-items-center cleen-gap-3 cleen-bg-white cleen-px-4 cleen-py-4 cleen-border cleen-border-gray/15 cleen-rounded-xl cleen-w-full">
-          <div
-            className={cn(
-              'cleen-flex cleen-justify-center cleen-items-center cleen-bg-gray/10 cleen-border cleen-border-gray/20 cleen-rounded-xl cleen-min-w-10 cleen-size-10',
-              pulseClass
-            )}
-          />
-
-          <div className="cleen-flex cleen-flex-col cleen-flex-1 cleen-gap-2">
-            <div
-              className={cn(
-                'cleen-bg-gray/10 cleen-rounded cleen-w-3/4 cleen-h-4',
-                pulseClass
-              )}
-            />
-
-            <div
-              className={cn(
-                'cleen-bg-gray/10 cleen-rounded cleen-w-1/2 cleen-h-3',
-                pulseClass
-              )}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-);

package/src/components/skeletons/blocks/SkeletonCard2.tsx

@@ -1,57 +0,0 @@
-import { getPulseAnimationClass } from '@/components/skeletons/styles/skeleton';
-import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
-import { cn } from '@cleen/ui-core';
-import { forwardRef } from 'react';
-
-export const SkeletonCard2 = forwardRef<HTMLDivElement, SkeletonComponentProps>(
-  ({ className, style, variant = 'default' }, ref) => {
-    const pulseClass = getPulseAnimationClass(variant);
-
-    return (
-      <div ref={ref} className={cn('cleen', className)} style={style}>
-        <div className="cleen-flex cleen-flex-col cleen-justify-between cleen-items-start cleen-gap-3 cleen-bg-white cleen-px-4 cleen-py-4 cleen-border cleen-border-gray/15 cleen-rounded-lg">
-          <div className="cleen-flex cleen-items-center cleen-gap-3 cleen-w-full">
-            <div
-              className={cn(
-                'cleen-flex cleen-justify-center cleen-items-center cleen-bg-gray/10 cleen-border cleen-border-gray/20 cleen-rounded-xl cleen-size-10',
-                pulseClass
-              )}
-            />
-
-            <div className="cleen-flex cleen-flex-col cleen-flex-1 cleen-gap-2">
-              <div
-                className={cn(
-                  'cleen-bg-gray/10 cleen-rounded cleen-w-1/2 cleen-h-5',
-                  pulseClass
-                )}
-              />
-              <div
-                className={cn(
-                  'cleen-bg-gray/10 cleen-rounded cleen-w-3/4 cleen-h-4',
-                  pulseClass
-                )}
-              />
-            </div>
-          </div>
-
-          <div className="cleen-space-y-2 cleen-w-full">
-            <div
-              className={cn(
-                'cleen-bg-gray/10 cleen-rounded cleen-w-full cleen-h-2',
-                pulseClass
-              )}
-            />
-            <div
-              className={cn(
-                'cleen-bg-gray/10 cleen-rounded cleen-w-16 cleen-h-3',
-                pulseClass
-              )}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-);
-
-SkeletonCard2.displayName = 'AssessmentHeaderSkeleton';

package/src/components/skeletons/blocks/SkeletonCard3.tsx

@@ -1,89 +0,0 @@
-import { getPulseAnimationClass } from '@/components/skeletons/styles/skeleton';
-import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
-import { cn } from '@cleen/ui-core';
-import { forwardRef } from 'react';
-
-// Like Card2 but on steroids - full thumbnail + tags + footer with avatar
-export const SkeletonCard3 = forwardRef<HTMLDivElement, SkeletonComponentProps>(
-  function SkeletonCard3({ className, style, variant = 'default' }, ref) {
-    const pulseClass = getPulseAnimationClass(variant);
-
-    return (
-      <div ref={ref} className={cn('cleen', className)} style={style}>
-        <div className="cleen-flex cleen-flex-col cleen-bg-white cleen-border cleen-border-gray/15 cleen-rounded-xl cleen-overflow-hidden cleen-w-full">
-          {/* Thumbnail area */}
-          <div
-            className={cn(
-              'cleen-bg-gray/10 cleen-w-full cleen-h-40',
-              pulseClass
-            )}
-          />
-
-          <div className="cleen-flex cleen-flex-col cleen-gap-3 cleen-px-4 cleen-py-4">
-            {/* Tags row */}
-            <div className="cleen-flex cleen-gap-2">
-              <div
-                className={cn(
-                  'cleen-bg-gray/10 cleen-rounded-full cleen-w-16 cleen-h-5',
-                  pulseClass
-                )}
-              />
-              <div
-                className={cn(
-                  'cleen-bg-gray/10 cleen-rounded-full cleen-w-12 cleen-h-5',
-                  pulseClass
-                )}
-              />
-            </div>
-
-            {/* Title + subtitle */}
-            <div className="cleen-flex cleen-flex-col cleen-gap-2">
-              <div
-                className={cn(
-                  'cleen-bg-gray/10 cleen-rounded cleen-w-4/5 cleen-h-5',
-                  pulseClass
-                )}
-              />
-              <div
-                className={cn(
-                  'cleen-bg-gray/10 cleen-rounded cleen-w-full cleen-h-3',
-                  pulseClass
-                )}
-              />
-              <div
-                className={cn(
-                  'cleen-bg-gray/10 cleen-rounded cleen-w-3/4 cleen-h-3',
-                  pulseClass
-                )}
-              />
-            </div>
-
-            {/* Footer: avatar + name + action */}
-            <div className="cleen-flex cleen-justify-between cleen-items-center cleen-pt-1">
-              <div className="cleen-flex cleen-items-center cleen-gap-2">
-                <div
-                  className={cn(
-                    'cleen-bg-gray/10 cleen-rounded-full cleen-size-7 cleen-shrink-0',
-                    pulseClass
-                  )}
-                />
-                <div
-                  className={cn(
-                    'cleen-bg-gray/10 cleen-rounded cleen-w-24 cleen-h-3',
-                    pulseClass
-                  )}
-                />
-              </div>
-              <div
-                className={cn(
-                  'cleen-bg-gray/10 cleen-rounded-lg cleen-w-16 cleen-h-7',
-                  pulseClass
-                )}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-);

package/src/components/skeletons/blocks/SkeletonCardStack.tsx

@@ -1,22 +0,0 @@
-import { SkeletonCard } from '@/components/skeletons/blocks/SkeletonCard';
-import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
-import { forwardRef } from 'react';
-import { cn } from '@cleen/ui-core';
-
-export const SkeletonCardStack = forwardRef<
-  HTMLDivElement,
-  SkeletonComponentProps
->(function SkeletonCardStack(
-  { className, style, itemCount = 3, variant = 'default' },
-  ref
-) {
-  return (
-    <div ref={ref} className={cn('cleen', className)} style={style}>
-      <div className="cleen-flex cleen-flex-col cleen-gap-3">
-        {Array.from({ length: itemCount }).map((_, index) => (
-          <SkeletonCard key={index} variant={variant} />
-        ))}
-      </div>
-    </div>
-  );
-});