@opencosmos/ui 1.3.1

package/src/components/layout/Footer/Footer.tsx

@@ -0,0 +1,175 @@
+'use client';;
+import React from 'react';
+import { GitHubIcon } from '../../data-display/GitHubIcon';
+
+export interface FooterLink {
+    label: string;
+    href: string;
+    external?: boolean;
+}
+
+export interface FooterSection {
+    title: string;
+    links: FooterLink[];
+}
+
+export interface FooterProps {
+    /**
+     * Brand/logo element or text
+     */
+    logo?: React.ReactNode;
+    /**
+     * Sections with links organized in columns
+     */
+    sections?: FooterSection[];
+    /**
+     * Social links (will be displayed with icons)
+     */
+    socialLinks?: {
+        github?: string;
+        linkedin?: string;
+        email?: string;
+    };
+    /**
+     * Copyright text
+     */
+    copyright?: string;
+    /**
+     * Additional className for customization
+     */
+    className?: string;
+}
+
+/**
+ * Footer Organism
+ *
+ * Inspired by Swiss Grid design principles:
+ * - 8px base unit spacing system
+ * - Clear typographic hierarchy with structured columns
+ * - Generous whitespace for breathing room
+ * - Grid-based layout with precise alignment
+ * - Minimal, functional aesthetic
+ *
+ * Features:
+ * - Responsive multi-column layout
+ * - Social links with icons
+ * - Organized content sections
+ * - Clean typography and spacing
+ */
+export const Footer = (
+    {
+        ref,
+        logo,
+        sections = [],
+        socialLinks,
+        copyright,
+        className = ''
+    }: FooterProps & {
+        ref?: React.Ref<HTMLElement>;
+    }
+) => {
+    const currentYear = new Date().getFullYear();
+
+    return (
+        <footer
+            ref={ref}
+            className={`
+                border-t border-[var(--color-border)]
+                bg-[var(--color-background)]
+                ${className}
+            `}
+        >
+            {/* Main Footer Content - Swiss Grid: 8px base units */}
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24">
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12 lg:gap-8">
+                    {/* Brand Section - Swiss Grid: Takes 4 columns on large screens */}
+                    <div className="lg:col-span-4">
+                        {logo && (
+                            <div className="mb-6 text-2xl font-bold text-[var(--color-text-primary)]">
+                                {logo}
+                            </div>
+                        )}
+                    </div>
+
+                    {/* Navigation Sections - Swiss Grid: Evenly distributed columns */}
+                    {sections.map((section, index) => (
+                        <div key={section.title} className="lg:col-span-2">
+                            <h3 className="text-sm font-semibold text-[var(--color-text-primary)] uppercase tracking-wider mb-4">
+                                {section.title}
+                            </h3>
+                            <ul className="space-y-3">
+                                {section.links.map((link) => (
+                                    <li key={link.label}>
+                                        <a
+                                            href={link.href}
+                                            target={link.external ? '_blank' : undefined}
+                                            rel={link.external ? 'noopener noreferrer' : undefined}
+                                            className="text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] transition-colors duration-200 text-sm"
+                                        >
+                                            {link.label}
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    ))}
+
+                    {/* Social Links - Swiss Grid: Takes remaining columns */}
+                    {socialLinks && (
+                        <div className="lg:col-span-2">
+                            <h3 className="text-sm font-semibold text-[var(--color-text-primary)] uppercase tracking-wider mb-4">
+                                Connect
+                            </h3>
+                            <ul className="space-y-3">
+                                {socialLinks.github && (
+                                    <li>
+                                        <a
+                                            href={socialLinks.github}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className="text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] transition-colors duration-200 text-sm flex items-center gap-2"
+                                        >
+                                            <GitHubIcon size={16} />
+                                            GitHub
+                                        </a>
+                                    </li>
+                                )}
+                                {socialLinks.linkedin && (
+                                    <li>
+                                        <a
+                                            href={socialLinks.linkedin}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className="text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] transition-colors duration-200 text-sm"
+                                        >
+                                            LinkedIn
+                                        </a>
+                                    </li>
+                                )}
+                                {socialLinks.email && (
+                                    <li>
+                                        <a
+                                            href={`mailto:${socialLinks.email}`}
+                                            className="text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] transition-colors duration-200 text-sm"
+                                        >
+                                            Email
+                                        </a>
+                                    </li>
+                                )}
+                            </ul>
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* Bottom Bar - Swiss Grid: 8px base unit spacing */}
+            <div className="border-t border-[var(--color-border)]">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                    <p className="text-sm text-[var(--color-text-secondary)] text-center">
+                        {copyright || `© ${currentYear} All rights reserved.`}
+                    </p>
+                </div>
+            </div>
+        </footer>
+    );
+};

package/src/components/layout/Footer/index.ts

@@ -0,0 +1,2 @@
+export { Footer } from './Footer';
+export type { FooterProps, FooterSection, FooterLink } from './Footer';

package/src/components/layout/GlassSurface.tsx

@@ -0,0 +1,82 @@
+import type { CSSProperties, ReactNode, Ref } from 'react'
+
+export type GlassThickness = 'ultrathin' | 'thin' | 'medium' | 'thick' | 'ultrathick'
+
+/** 0 = pure white, 9 = pure black. 10 even steps. */
+export type GlassTint = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
+
+const TINT_COLORS: Record<GlassTint, string> = {
+  0: '255, 255, 255',
+  1: '227, 227, 227',
+  2: '200, 200, 200',
+  3: '170, 170, 170',
+  4: '142, 142, 142',
+  5: '128, 128, 128',
+  6: '113, 113, 113',
+  7: '85, 85, 85',
+  8: '57, 57, 57',
+  9: '0, 0, 0',
+}
+
+export interface GlassSurfaceProps {
+  /** Whether the frosted glass effect is active (background + shadow). */
+  active?: boolean
+  /** Shadow direction: 'top' casts downward, 'bottom' casts upward. */
+  position?: 'top' | 'bottom'
+  /** Glass opacity tier (default 'thin').
+   *  ultrathin 28% → thin 38% → medium 48% → thick 58% → ultrathick 68%. */
+  thickness?: GlassThickness
+  /** Glass fill color for light mode: 0 = white, 9 = black (default 2). */
+  tint?: GlassTint
+  /** Glass fill color for dark mode. Defaults to `9 - tint` (auto-invert). */
+  darkTint?: GlassTint
+  className?: string
+  style?: CSSProperties
+  children: ReactNode
+  ref?: Ref<HTMLDivElement>
+}
+
+/**
+ * Liquid glass surface with five thickness tiers and a 10-step tint scale.
+ *
+ * `backdrop-filter: blur(20px) saturate(180%)` provides the frosted
+ * blur; `thickness` controls opacity; `tint` controls the fill color
+ * from pure white (0) through neutral gray to pure black (9).
+ */
+export function GlassSurface({
+  active = true,
+  position = 'top',
+  thickness = 'thin',
+  tint = 2,
+  darkTint,
+  className,
+  style,
+  children,
+  ref,
+}: GlassSurfaceProps) {
+  const resolvedDarkTint = darkTint ?? (9 - tint) as GlassTint
+
+  const classes = [
+    'glass-surface',
+    position === 'top' ? 'glass-surface--top' : 'glass-surface--bottom',
+    `glass-surface--${thickness}`,
+    active && 'glass-surface--active',
+    className,
+  ].filter(Boolean).join(' ')
+
+  const inlineStyles: CSSProperties = {
+    WebkitBackdropFilter: 'blur(20px) saturate(180%)',
+    backdropFilter: 'blur(20px) saturate(180%)',
+    ...(active ? {
+      '--glass-tint-light': TINT_COLORS[tint],
+      '--glass-tint-dark': TINT_COLORS[resolvedDarkTint],
+    } as CSSProperties : undefined),
+    ...style,
+  }
+
+  return (
+    <div ref={ref} className={classes} style={inlineStyles}>
+      {children}
+    </div>
+  )
+}

package/src/components/layout/Grid.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { Grid } from './Grid'
+
+describe('Grid', () => {
+  it('renders children in a grid container', () => {
+    render(
+      <Grid>
+        <div>Cell 1</div>
+        <div>Cell 2</div>
+      </Grid>
+    )
+    expect(screen.getByText('Cell 1')).toBeInTheDocument()
+    expect(screen.getByText('Cell 2')).toBeInTheDocument()
+  })
+
+  it('defaults to 1 column', () => {
+    const { container } = render(<Grid><div>Child</div></Grid>)
+    expect(container.firstChild).toHaveClass('grid', 'grid-cols-1')
+  })
+
+  it('renders specified columns', () => {
+    const { container } = render(<Grid columns={3}><div>Child</div></Grid>)
+    expect(container.firstChild).toHaveClass('grid-cols-3')
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<Grid className="custom-grid"><div>Child</div></Grid>)
+    expect(container.firstChild).toHaveClass('custom-grid')
+  })
+})

package/src/components/layout/Grid.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+
+type ResponsiveValue<T> = T | { base?: T; sm?: T; md?: T; lg?: T; xl?: T };
+
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Number of columns. Supports responsive object.
+     * @example columns={3} or columns={{ base: 1, md: 3 }}
+     */
+    columns?: ResponsiveValue<number>;
+    /**
+     * Gap between items. Supports responsive object.
+     * Maps to Tailwind gap scale.
+     */
+    gap?: ResponsiveValue<number>;
+    /**
+     * HTML element to render as
+     */
+    as?: any;
+}
+
+const mapResponsive = (prop: ResponsiveValue<number>, prefix: string, mapFunc: (v: number) => string) => {
+    if (typeof prop === 'number') {
+        return mapFunc(prop);
+    }
+    const classes = [];
+    if (prop.base) classes.push(mapFunc(prop.base));
+    if (prop.sm) classes.push(`sm:${mapFunc(prop.sm)}`);
+    if (prop.md) classes.push(`md:${mapFunc(prop.md)}`);
+    if (prop.lg) classes.push(`lg:${mapFunc(prop.lg)}`);
+    if (prop.xl) classes.push(`xl:${mapFunc(prop.xl)}`);
+    return classes.join(' ');
+};
+
+export const Grid = (
+    {
+        ref,
+        children,
+        columns = 1,
+        gap = 4,
+        as: Component = 'div',
+        className = '',
+        ...props
+    }: GridProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }
+) => {
+
+    // Safe mapping for Tailwind scanner
+    const getColClass = (n: number) => {
+        const map: Record<number, string> = {
+            1: 'grid-cols-1', 2: 'grid-cols-2', 3: 'grid-cols-3', 4: 'grid-cols-4',
+            5: 'grid-cols-5', 6: 'grid-cols-6', 7: 'grid-cols-7', 8: 'grid-cols-8',
+            9: 'grid-cols-9', 10: 'grid-cols-10', 11: 'grid-cols-11', 12: 'grid-cols-12'
+        };
+        return map[n] || 'grid-cols-1';
+    };
+
+    const getGapClass = (n: number) => `gap-${n}`;
+
+    const colClasses = mapResponsive(columns, 'grid-cols', getColClass);
+    const gapClasses = mapResponsive(gap, 'gap', getGapClass);
+
+    return (
+        <Component
+            ref={ref}
+            className={`grid ${colClasses} ${gapClasses} ${className}`}
+            {...props}
+        >
+            {children}
+        </Component>
+    );
+};
+
+export interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    colSpan?: ResponsiveValue<number>;
+    rowSpan?: ResponsiveValue<number>;
+    colStart?: ResponsiveValue<number>;
+    as?: any;
+}
+
+export const GridItem = (
+    {
+        ref,
+        children,
+        colSpan,
+        rowSpan,
+        colStart,
+        as: Component = 'div',
+        className = '',
+        ...props
+    }: GridItemProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }
+) => {
+
+    const getSpanClass = (n: number) => {
+        const map: Record<number, string> = {
+            1: 'col-span-1', 2: 'col-span-2', 3: 'col-span-3', 4: 'col-span-4',
+            5: 'col-span-5', 6: 'col-span-6', 7: 'col-span-7', 8: 'col-span-8',
+            9: 'col-span-9', 10: 'col-span-10', 11: 'col-span-11', 12: 'col-span-12'
+        };
+        return map[n] || '';
+    };
+
+    const getRowSpanClass = (n: number) => {
+        const map: Record<number, string> = {
+            1: 'row-span-1', 2: 'row-span-2', 3: 'row-span-3', 4: 'row-span-4',
+            5: 'row-span-5', 6: 'row-span-6'
+        };
+        return map[n] || '';
+    };
+
+    const getColStartClass = (n: number) => `col-start-${n}`;
+
+    const classes = [
+        colSpan ? mapResponsive(colSpan, 'col-span', getSpanClass) : '',
+        rowSpan ? mapResponsive(rowSpan, 'row-span', getRowSpanClass) : '',
+        colStart ? mapResponsive(colStart, 'col-start', getColStartClass) : '',
+        className
+    ].filter(Boolean).join(' ');
+
+    return (
+        <Component ref={ref} className={classes} {...props}>
+            {children}
+        </Component>
+    );
+};