@opencosmos/ui 1.3.1

package/src/components/data-display/VariableWeightText.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { motion, HTMLMotionProps } from 'framer-motion';
+import React from 'react';
+import { useCustomizer } from '../../lib/store';
+
+interface VariableWeightTextProps extends Omit<HTMLMotionProps<'div'>, 'children'> {
+    /**
+     * Minimum font weight for the animation
+     * @default 200
+     */
+    minWeight?: number;
+    /**
+     * Maximum font weight for the animation
+     * @default 700
+     */
+    maxWeight?: number;
+    /**
+     * Duration of one complete animation cycle (in seconds)
+     * @default 2
+     */
+    duration?: number;
+    /**
+     * Motion intensity override (0-10). If not provided, uses global customizer setting.
+     */
+    intensity?: number;
+    /**
+     * Font family to use. Recommended: 'Clash Display' or another variable font.
+     * @default 'Clash Display'
+     */
+    fontFamily?: string;
+    /**
+     * Text content to animate
+     */
+    children?: React.ReactNode;
+}
+
+/**
+ * VariableWeightText
+ *
+ * A motion component that creates a "breathing" effect by animating font weight.
+ * Works best with variable fonts like Clash Display that support smooth weight transitions.
+ *
+ * **Key Features:**
+ * - Animates font-weight in a continuous loop
+ * - Respects global motion intensity settings
+ * - Automatically centers text to prevent layout shifts during weight changes
+ * - Disables animation when motion intensity is 0 (accessibility)
+ *
+ * **Usage:**
+ * ```tsx
+ * <VariableWeightText minWeight={200} maxWeight={700}>
+ *   Variable Font Text
+ * </VariableWeightText>
+ * ```
+ */
+export const VariableWeightText = ({
+    children,
+    minWeight = 200,
+    maxWeight = 700,
+    duration = 2,
+    intensity,
+    fontFamily = 'Clash Display',
+    className,
+    style,
+    ...props
+}: VariableWeightTextProps) => {
+    const { motion: motionIntensity } = useCustomizer();
+
+    // Use provided intensity or global intensity
+    const effectiveIntensity = intensity ?? motionIntensity;
+
+    // Scale duration based on intensity (higher intensity = faster animation)
+    const scaledDuration = effectiveIntensity > 0
+        ? duration * (5 / effectiveIntensity)
+        : duration;
+
+    // If motion is disabled (intensity 0), render static text at maxWeight
+    if (effectiveIntensity === 0) {
+        return (
+            <div
+                className={className}
+                style={{
+                    fontFamily,
+                    fontWeight: maxWeight,
+                    fontVariationSettings: `'wght' ${maxWeight}`,
+                    textAlign: 'center',
+                    width: '100%',
+                    WebkitFontSmoothing: 'antialiased',
+                    MozOsxFontSmoothing: 'grayscale',
+                    ...style,
+                }}
+                {...props as any}
+            >
+                {children}
+            </div>
+        );
+    }
+
+    return (
+        <motion.div
+            initial={{
+                fontVariationSettings: `'wght' ${minWeight}`
+            }}
+            animate={{
+                fontVariationSettings: `'wght' ${maxWeight}`
+            }}
+            transition={{
+                duration: scaledDuration,
+                repeat: Infinity,
+                repeatType: "reverse",
+                ease: "easeInOut",
+            }}
+            style={{
+                fontFamily,
+                fontWeight: minWeight, // Fallback
+                textAlign: 'center',
+                width: '100%',
+                willChange: 'font-variation-settings', // GPU acceleration hint
+                WebkitFontSmoothing: 'antialiased',
+                MozOsxFontSmoothing: 'grayscale',
+                ...style,
+            }}
+            className={className}
+            {...props}
+        >
+            {children}
+        </motion.div>
+    );
+};

package/src/components/data-display/index.ts

@@ -0,0 +1,19 @@
+export * from './AspectImage';
+export * from './Avatar';
+export * from './Badge';
+export * from './Brand';
+export * from './Calendar';
+export * from './Card';
+export * from './Code';
+export * from './CollapsibleCodeBlock';
+export * from './DataTable';
+export * from './DescriptionList';
+export * from './GitHubIcon';
+export * from './Heading';
+export * from './Table';
+export * from './Text';
+export * from './VariableWeightText';
+export * from './Typewriter';
+export * from './StatCard';
+export * from './Timeline';
+export * from './TreeView';

package/src/components/feedback/Alert.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { Alert, AlertTitle, AlertDescription } from './Alert'
+
+describe('Alert', () => {
+  it('renders with default variant', () => {
+    render(<Alert>Alert content</Alert>)
+    expect(screen.getByRole('alert')).toBeInTheDocument()
+    expect(screen.getByRole('alert')).toHaveClass('bg-card')
+  })
+
+  it('renders destructive variant', () => {
+    render(<Alert variant="destructive">Error</Alert>)
+    expect(screen.getByRole('alert')).toHaveClass('text-destructive')
+  })
+
+  it('renders title and description', () => {
+    render(
+      <Alert>
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>Something went wrong.</AlertDescription>
+      </Alert>
+    )
+    expect(screen.getByText('Error')).toBeInTheDocument()
+    expect(screen.getByText('Something went wrong.')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    render(<Alert className="custom-alert">Content</Alert>)
+    expect(screen.getByRole('alert')).toHaveClass('custom-alert')
+  })
+
+  it('has correct data-slot attributes', () => {
+    render(
+      <Alert>
+        <AlertTitle>Title</AlertTitle>
+        <AlertDescription>Desc</AlertDescription>
+      </Alert>
+    )
+    expect(screen.getByRole('alert')).toHaveAttribute('data-slot', 'alert')
+    expect(screen.getByText('Title')).toHaveAttribute('data-slot', 'alert-title')
+    expect(screen.getByText('Desc')).toHaveAttribute('data-slot', 'alert-description')
+  })
+})

package/src/components/feedback/Alert.tsx

@@ -0,0 +1,65 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, alertVariants, AlertTitle, AlertDescription }

package/src/components/feedback/EmptyState.tsx

@@ -0,0 +1,113 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const emptyStateVariants = cva(
+  "flex flex-col items-center justify-center text-center",
+  {
+    variants: {
+      size: {
+        sm: "py-8 px-4 gap-2",
+        default: "py-12 px-6 gap-3",
+        lg: "py-16 px-8 gap-4",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+const emptyStateIconVariants = cva(
+  "flex items-center justify-center rounded-full bg-muted text-foreground-secondary",
+  {
+    variants: {
+      size: {
+        sm: "h-10 w-10 [&>svg]:h-5 [&>svg]:w-5",
+        default: "h-12 w-12 [&>svg]:h-6 [&>svg]:w-6",
+        lg: "h-16 w-16 [&>svg]:h-8 [&>svg]:w-8",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+const emptyStateTitleVariants = cva("font-semibold font-heading tracking-tight text-foreground", {
+  variants: {
+    size: {
+      sm: "text-base",
+      default: "text-lg",
+      lg: "text-xl",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+})
+
+export interface EmptyStateProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof emptyStateVariants> {
+  /** Icon displayed above the title */
+  icon?: React.ReactNode
+  /** Primary message */
+  title: string
+  /** Secondary explanation text */
+  description?: string
+  /** Call-to-action element (e.g. Button) */
+  action?: React.ReactNode
+}
+
+function EmptyState({
+  className,
+  size,
+  icon,
+  title,
+  description,
+  action,
+  children,
+  ...props
+}: EmptyStateProps) {
+  return (
+    <div
+      data-slot="empty-state"
+      role="status"
+      className={cn(emptyStateVariants({ size }), className)}
+      {...props}
+    >
+      {icon && (
+        <div
+          data-slot="empty-state-icon"
+          className={cn(emptyStateIconVariants({ size }))}
+          aria-hidden="true"
+        >
+          {icon}
+        </div>
+      )}
+      <h3
+        data-slot="empty-state-title"
+        className={cn(emptyStateTitleVariants({ size }))}
+      >
+        {title}
+      </h3>
+      {description && (
+        <p
+          data-slot="empty-state-description"
+          className="max-w-sm text-sm text-foreground-secondary"
+        >
+          {description}
+        </p>
+      )}
+      {action && (
+        <div data-slot="empty-state-action" className="mt-2">
+          {action}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+export { EmptyState, emptyStateVariants }

package/src/components/feedback/Progress.test.tsx

@@ -0,0 +1,60 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { createRef } from 'react'
+import { Progress } from './Progress'
+
+describe('Progress', () => {
+  it('renders the progress bar', () => {
+    render(<Progress value={50} />)
+    const progressbar = screen.getByRole('progressbar')
+    expect(progressbar).toBeInTheDocument()
+  })
+
+  it('has a max value of 100 by default', () => {
+    render(<Progress value={50} />)
+    const progressbar = screen.getByRole('progressbar')
+    expect(progressbar).toHaveAttribute('data-max', '100')
+  })
+
+  it('shows indicator with correct transform based on value', () => {
+    render(<Progress value={60} />)
+    const progressbar = screen.getByRole('progressbar')
+    // The indicator is the child inside the progress root
+    const indicator = progressbar.firstElementChild as HTMLElement
+    expect(indicator).toBeInTheDocument()
+    expect(indicator.style.transform).toBe('translateX(-40%)')
+  })
+
+  it('shows indicator at 0% when value is 0', () => {
+    render(<Progress value={0} />)
+    const progressbar = screen.getByRole('progressbar')
+    const indicator = progressbar.firstElementChild as HTMLElement
+    expect(indicator.style.transform).toBe('translateX(-100%)')
+  })
+
+  it('shows indicator at 100% when value is 100', () => {
+    render(<Progress value={100} />)
+    const progressbar = screen.getByRole('progressbar')
+    const indicator = progressbar.firstElementChild as HTMLElement
+    expect(indicator.style.transform).toBe('translateX(-0%)')
+  })
+
+  it('defaults to 0 when no value is provided', () => {
+    render(<Progress />)
+    const progressbar = screen.getByRole('progressbar')
+    const indicator = progressbar.firstElementChild as HTMLElement
+    expect(indicator.style.transform).toBe('translateX(-100%)')
+  })
+
+  it('applies custom className', () => {
+    render(<Progress value={50} className="custom-progress" />)
+    const progressbar = screen.getByRole('progressbar')
+    expect(progressbar).toHaveClass('custom-progress')
+  })
+
+  it('forwards ref', () => {
+    const ref = createRef<HTMLDivElement>()
+    render(<Progress ref={ref} value={50} />)
+    expect(ref.current).toBeInstanceOf(HTMLDivElement)
+  })
+})

package/src/components/feedback/Progress.tsx

@@ -0,0 +1,30 @@
+"use client";
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "../../lib/utils"
+
+const Progress = (
+  {
+    ref,
+    className,
+    value,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
+    ref?: React.Ref<React.ElementRef<typeof ProgressPrimitive.Root>>;
+  }
+) => (<ProgressPrimitive.Root
+  ref={ref}
+  className={cn(
+    "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+    className
+  )}
+  {...props}
+>
+  <ProgressPrimitive.Indicator
+    className="h-full w-full flex-1 bg-primary transition-all"
+    style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+  />
+</ProgressPrimitive.Root>)
+
+export { Progress }

package/src/components/feedback/ProgressBar.tsx

@@ -0,0 +1,158 @@
+import React from 'react';
+
+export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Progress value (0-100)
+   */
+  value: number;
+
+  /**
+   * Maximum value
+   * @default 100
+   */
+  max?: number;
+
+  /**
+   * Size of the progress bar
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg';
+
+  /**
+   * Color variant
+   * @default 'primary'
+   */
+  variant?: 'primary' | 'success' | 'warning' | 'error' | 'info';
+
+  /**
+   * Whether to show the percentage label
+   * @default false
+   */
+  showLabel?: boolean;
+
+  /**
+   * Whether to animate the progress bar
+   * @default true
+   */
+  animated?: boolean;
+
+  /**
+   * Indeterminate state (ignores value)
+   * @default false
+   */
+  indeterminate?: boolean;
+}
+
+/**
+ * ProgressBar Component
+ *
+ * A visual indicator of progress or completion.
+ *
+ * Features:
+ * - Determinate and indeterminate modes
+ * - Five color variants
+ * - Three size options
+ * - Optional percentage label
+ * - Smooth animations
+ * - Theme-aware colors
+ * - Accessible ARIA attributes
+ *
+ * Example:
+ * ```tsx
+ * <ProgressBar value={65} showLabel />
+ * <ProgressBar value={100} variant="success" />
+ * <ProgressBar indeterminate variant="primary" />
+ * ```
+ */
+export const ProgressBar = (
+  {
+    ref,
+    value,
+    max = 100,
+    size = 'md',
+    variant = 'primary',
+    showLabel = false,
+    animated = true,
+    indeterminate = false,
+    className = '',
+    ...props
+  }: ProgressBarProps & {
+    ref?: React.Ref<HTMLDivElement>;
+  }
+) => {
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+
+  const sizes = {
+    sm: 'h-1',
+    md: 'h-2',
+    lg: 'h-3',
+  };
+
+  const variants = {
+    primary: 'bg-[var(--color-primary)]',
+    success: 'bg-[var(--color-success)]',
+    warning: 'bg-[var(--color-warning)]',
+    error: 'bg-[var(--color-error)]',
+    info: 'bg-[var(--color-info)]',
+  };
+
+  return (
+    <div ref={ref} className={`w-full ${className}`} {...props}>
+      {showLabel && !indeterminate && (
+        <div className="flex justify-between items-center mb-2">
+          <span className="text-sm font-medium text-[var(--color-text-primary)]">
+            {Math.round(percentage)}%
+          </span>
+        </div>
+      )}
+      <div
+        className={`
+          w-full ${sizes[size]}
+          bg-[var(--color-surface)]
+          rounded-full
+          overflow-hidden
+          border border-[var(--color-border)]
+        `}
+        role="progressbar"
+        aria-valuenow={indeterminate ? undefined : Math.round(percentage)}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-label={indeterminate ? 'Loading' : `${Math.round(percentage)}% complete`}
+      >
+        <div
+          className={`
+            h-full
+            ${variants[variant]}
+            ${animated ? 'transition-all duration-300 ease-out' : ''}
+            ${indeterminate ? 'animate-progress-indeterminate w-1/3' : ''}
+          `}
+          style={{
+            width: indeterminate ? undefined : `${percentage}%`,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+// Add indeterminate animation
+if (typeof document !== 'undefined') {
+  const style = document.createElement('style');
+  style.textContent = `
+    @keyframes progress-indeterminate {
+      0% {
+        transform: translateX(-100%);
+      }
+      100% {
+        transform: translateX(400%);
+      }
+    }
+    .animate-progress-indeterminate {
+      animation: progress-indeterminate 1.5s ease-in-out infinite;
+    }
+  `;
+  if (!document.querySelector('style[data-progress-animations]')) {
+    style.setAttribute('data-progress-animations', 'true');
+    document.head.appendChild(style);
+  }
+}

package/src/components/feedback/Skeleton.test.tsx

@@ -0,0 +1,39 @@
+import { render } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { Skeleton } from './Skeleton'
+
+describe('Skeleton', () => {
+  it('renders with default variant', () => {
+    const { container } = render(<Skeleton />)
+    const skeleton = container.firstChild as HTMLElement
+    expect(skeleton).toBeInTheDocument()
+    expect(skeleton).toHaveClass('animate-pulse', 'bg-muted', 'rounded-md')
+  })
+
+  it('renders circular variant', () => {
+    const { container } = render(<Skeleton variant="circular" />)
+    expect(container.firstChild).toHaveClass('rounded-full')
+  })
+
+  it('renders rectangular variant', () => {
+    const { container } = render(<Skeleton variant="rectangular" />)
+    expect(container.firstChild).toHaveClass('rounded-none')
+  })
+
+  it('renders text variant', () => {
+    const { container } = render(<Skeleton variant="text" />)
+    expect(container.firstChild).toHaveClass('rounded-xs', 'h-4')
+  })
+
+  it('applies custom width and height', () => {
+    const { container } = render(<Skeleton width="200px" height="40px" />)
+    const skeleton = container.firstChild as HTMLElement
+    expect(skeleton.style.width).toBe('200px')
+    expect(skeleton.style.height).toBe('40px')
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<Skeleton className="custom-skeleton" />)
+    expect(container.firstChild).toHaveClass('custom-skeleton')
+  })
+})