@uniweb/kit 0.1.1

package/src/components/Icon/Icon.jsx

@@ -0,0 +1,214 @@
+/**
+ * Icon Component
+ *
+ * Renders SVG icons from various sources:
+ * - Direct SVG content
+ * - URL to SVG file
+ * - Built-in icons
+ *
+ * @module @uniweb/kit/Icon
+ */
+
+import React, { useState, useEffect, useMemo } from 'react'
+import { cn } from '../../utils/index.js'
+
+/**
+ * Built-in demo icons (simple SVG paths)
+ */
+const BUILT_IN_ICONS = {
+  check: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>',
+  alert: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>',
+  user: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>',
+  heart: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>',
+  settings: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>',
+  star: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>',
+  close: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>',
+  menu: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>',
+  chevronDown: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>',
+  chevronRight: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>',
+  externalLink: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>',
+  download: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>',
+  play: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>'
+}
+
+/**
+ * Parse SVG content and extract the inner elements
+ * @param {string} svgContent - Raw SVG string
+ * @returns {Object} { viewBox, content, width, height }
+ */
+function parseSvg(svgContent) {
+  if (!svgContent) return null
+
+  try {
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(svgContent, 'image/svg+xml')
+    const svg = doc.querySelector('svg')
+
+    if (!svg) return null
+
+    const viewBox = svg.getAttribute('viewBox') || '0 0 24 24'
+    const width = svg.getAttribute('width')
+    const height = svg.getAttribute('height')
+
+    // Get inner content
+    const content = svg.innerHTML
+
+    return { viewBox, content, width, height }
+  } catch (error) {
+    console.warn('[Icon] Error parsing SVG:', error)
+    return null
+  }
+}
+
+/**
+ * Icon - SVG icon component
+ *
+ * @param {Object} props
+ * @param {string} [props.name] - Built-in icon name or custom name
+ * @param {string} [props.svg] - Direct SVG content
+ * @param {string} [props.url] - URL to fetch SVG from
+ * @param {string} [props.size='24'] - Icon size in pixels
+ * @param {string} [props.color] - Icon color (defaults to currentColor)
+ * @param {boolean} [props.preserveColors=false] - Keep original SVG colors
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {React.ReactNode} [props.loadingComponent] - Custom loading UI
+ * @param {React.ReactNode} [props.errorComponent] - Custom error UI
+ *
+ * @example
+ * // Built-in icon
+ * <Icon name="check" size="20" color="green" />
+ *
+ * @example
+ * // From URL
+ * <Icon url="/icons/custom.svg" size="32" />
+ *
+ * @example
+ * // Direct SVG content
+ * <Icon svg="<svg>...</svg>" />
+ */
+export function Icon({
+  name,
+  svg,
+  url,
+  icon, // Legacy prop - can be string (URL) or object
+  size = '24',
+  color,
+  preserveColors = false,
+  className,
+  loadingComponent,
+  errorComponent,
+  ...props
+}) {
+  const [fetchedSvg, setFetchedSvg] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(false)
+
+  // Handle legacy icon prop
+  const iconUrl = url || (typeof icon === 'string' ? icon : icon?.url)
+  const iconSvg = svg || (typeof icon === 'object' ? icon.svg : null)
+  const iconName = name || (typeof icon === 'object' ? icon.name : null)
+
+  // Fetch SVG from URL
+  useEffect(() => {
+    if (!iconUrl) return
+
+    setLoading(true)
+    setError(false)
+
+    fetch(iconUrl)
+      .then((res) => {
+        if (!res.ok) throw new Error('Failed to fetch icon')
+        return res.text()
+      })
+      .then((svgText) => {
+        setFetchedSvg(svgText)
+        setLoading(false)
+      })
+      .catch((err) => {
+        console.warn('[Icon] Error fetching:', err)
+        setError(true)
+        setLoading(false)
+      })
+  }, [iconUrl])
+
+  // Determine the SVG content to render
+  const svgData = useMemo(() => {
+    // Priority: direct SVG > fetched SVG > built-in
+    if (iconSvg) {
+      return parseSvg(iconSvg)
+    }
+
+    if (fetchedSvg) {
+      return parseSvg(fetchedSvg)
+    }
+
+    // Built-in icons
+    const builtInName = iconName || name
+    if (builtInName && BUILT_IN_ICONS[builtInName]) {
+      return {
+        viewBox: '0 0 24 24',
+        content: BUILT_IN_ICONS[builtInName],
+        isBuiltIn: true
+      }
+    }
+
+    return null
+  }, [iconSvg, fetchedSvg, iconName, name])
+
+  // Loading state
+  if (loading) {
+    return loadingComponent || (
+      <span
+        className={cn('inline-block animate-pulse bg-gray-200 rounded', className)}
+        style={{ width: size, height: size }}
+      />
+    )
+  }
+
+  // Error state
+  if (error) {
+    return errorComponent || null
+  }
+
+  // No content
+  if (!svgData) {
+    // Fallback: render URL as img if we have a URL but couldn't parse SVG
+    if (iconUrl) {
+      return (
+        <img
+          src={iconUrl}
+          alt=""
+          width={size}
+          height={size}
+          className={className}
+          aria-hidden="true"
+          {...props}
+        />
+      )
+    }
+    return null
+  }
+
+  // Build style
+  const style = {
+    width: size,
+    height: size,
+    ...(color && !preserveColors ? { color } : {})
+  }
+
+  return (
+    <svg
+      viewBox={svgData.viewBox}
+      fill={svgData.isBuiltIn ? 'none' : (preserveColors ? undefined : 'currentColor')}
+      stroke={svgData.isBuiltIn ? 'currentColor' : undefined}
+      className={cn('inline-block', className)}
+      style={style}
+      role="img"
+      aria-hidden="true"
+      dangerouslySetInnerHTML={{ __html: svgData.content }}
+      {...props}
+    />
+  )
+}
+
+export default Icon

package/src/components/Icon/index.js

@@ -0,0 +1 @@
+export { Icon, default } from './Icon.jsx'

package/src/components/Image/Image.jsx

@@ -0,0 +1,194 @@
+/**
+ * Image Component
+ *
+ * Versatile image component supporting:
+ * - Profile avatars and banners
+ * - Asset-based images
+ * - Direct URLs
+ * - CSS filters
+ * - Responsive sizing
+ *
+ * @module @uniweb/kit/Image
+ */
+
+import React, { useState, useCallback } from 'react'
+import { Link } from '../Link/index.js'
+import { cn } from '../../utils/index.js'
+
+/**
+ * Size presets for images
+ */
+const SIZE_CLASSES = {
+  xs: 'w-8 h-8',
+  sm: 'w-12 h-12',
+  md: 'w-16 h-16',
+  lg: 'w-24 h-24',
+  xl: 'w-32 h-32',
+  '2xl': 'w-48 h-48',
+  full: 'w-full h-full'
+}
+
+/**
+ * Build CSS filter string from filter object
+ * @param {Object} filter - Filter settings
+ * @returns {string} CSS filter value
+ */
+function buildFilterStyle(filter) {
+  if (!filter || typeof filter !== 'object') return undefined
+
+  const filters = []
+
+  if (filter.blur) filters.push(`blur(${filter.blur}px)`)
+  if (filter.brightness) filters.push(`brightness(${filter.brightness}%)`)
+  if (filter.contrast) filters.push(`contrast(${filter.contrast}%)`)
+  if (filter.grayscale) filters.push(`grayscale(${filter.grayscale}%)`)
+  if (filter.saturate) filters.push(`saturate(${filter.saturate}%)`)
+  if (filter.sepia) filters.push(`sepia(${filter.sepia}%)`)
+
+  return filters.length > 0 ? filters.join(' ') : undefined
+}
+
+/**
+ * Image - Versatile image component
+ *
+ * @param {Object} props
+ * @param {Object} [props.profile] - Profile object for avatar/banner images
+ * @param {string} [props.type] - Image type: 'avatar', 'banner', or 'image'
+ * @param {string} [props.size] - Size preset: 'xs', 'sm', 'md', 'lg', 'xl', '2xl', 'full'
+ * @param {string|Object} [props.value] - Asset identifier or object
+ * @param {string} [props.src] - Direct image URL
+ * @param {string} [props.url] - Direct image URL (alias)
+ * @param {string} [props.alt] - Alt text for accessibility
+ * @param {string} [props.href] - Make image a clickable link
+ * @param {boolean|string} [props.rounded] - true for full rounding, or custom class
+ * @param {Object} [props.filter] - CSS filter settings
+ * @param {string} [props.loading='lazy'] - Loading strategy
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {boolean} [props.ariaHidden] - Hide from screen readers
+ * @param {Function} [props.onError] - Error callback
+ * @param {Function} [props.onLoad] - Load callback
+ *
+ * @example
+ * // Direct URL
+ * <Image src="/images/hero.jpg" alt="Hero image" />
+ *
+ * @example
+ * // Profile avatar
+ * <Image profile={profile} type="avatar" size="lg" rounded />
+ *
+ * @example
+ * // With filters
+ * <Image src="/photo.jpg" filter={{ grayscale: 100, brightness: 110 }} />
+ *
+ * @example
+ * // Clickable image
+ * <Image src="/logo.png" href="/about" alt="Company logo" />
+ */
+export function Image({
+  profile,
+  type,
+  size,
+  value,
+  src,
+  url,
+  alt = '',
+  href,
+  rounded,
+  filter,
+  loading = 'lazy',
+  className,
+  ariaHidden,
+  onError,
+  onLoad,
+  ...props
+}) {
+  const [hasError, setHasError] = useState(false)
+  const [imageSrc, setImageSrc] = useState(null)
+
+  // Determine the image source
+  let resolvedSrc = src || url || ''
+  let resolvedAlt = alt
+
+  // Handle profile-based images
+  if (profile && type) {
+    if (type === 'avatar' || type === 'banner') {
+      // Use profile methods if available
+      if (typeof profile.getImageInfo === 'function') {
+        const imageInfo = profile.getImageInfo(type, size)
+        resolvedSrc = imageInfo?.url || resolvedSrc
+        resolvedAlt = imageInfo?.alt || resolvedAlt
+      }
+    } else if (value && typeof profile.getAssetInfo === 'function') {
+      const assetInfo = profile.getAssetInfo(value, true, alt)
+      resolvedSrc = assetInfo?.src || resolvedSrc
+      resolvedAlt = assetInfo?.alt || resolvedAlt
+    }
+  }
+
+  // Handle value as direct source
+  if (!resolvedSrc && value) {
+    if (typeof value === 'string') {
+      resolvedSrc = value
+    } else if (value.url || value.src) {
+      resolvedSrc = value.url || value.src
+      resolvedAlt = value.alt || resolvedAlt
+    }
+  }
+
+  // Build classes
+  const sizeClass = size && SIZE_CLASSES[size]
+  const roundedClass = rounded === true ? 'rounded-full' : (typeof rounded === 'string' ? rounded : '')
+
+  const imageClasses = cn(
+    'object-cover',
+    sizeClass,
+    roundedClass,
+    className
+  )
+
+  // Build filter style
+  const filterStyle = buildFilterStyle(filter)
+
+  // Handle error
+  const handleError = useCallback((e) => {
+    setHasError(true)
+    onError?.(e)
+  }, [onError])
+
+  // Handle load
+  const handleLoad = useCallback((e) => {
+    onLoad?.(e)
+  }, [onLoad])
+
+  // Don't render if no source or error
+  if (!resolvedSrc || hasError) {
+    return null
+  }
+
+  const imageElement = (
+    <img
+      src={resolvedSrc}
+      alt={resolvedAlt}
+      loading={loading}
+      className={imageClasses}
+      style={filterStyle ? { filter: filterStyle } : undefined}
+      onError={handleError}
+      onLoad={handleLoad}
+      aria-hidden={ariaHidden}
+      {...props}
+    />
+  )
+
+  // Wrap in link if href provided
+  if (href) {
+    return (
+      <Link to={href} className="inline-block">
+        {imageElement}
+      </Link>
+    )
+  }
+
+  return imageElement
+}
+
+export default Image

package/src/components/Image/index.js

@@ -0,0 +1 @@
+export { Image, default } from './Image.jsx'

package/src/components/Link/Link.jsx

@@ -0,0 +1,261 @@
+/**
+ * Link Component
+ *
+ * A smart link wrapper that handles:
+ * - Internal navigation via React Router
+ * - External links with appropriate attributes
+ * - File downloads
+ * - Auto-generated accessible titles
+ *
+ * @module @uniweb/kit/Link
+ */
+
+import React from 'react'
+import { useWebsite } from '../../hooks/useWebsite.js'
+import { isExternalUrl, isFileUrl } from '../../utils/index.js'
+
+/**
+ * Social media platforms for auto-generating link titles
+ */
+const SOCIAL_PLATFORMS = {
+  'twitter.com': 'Twitter',
+  'x.com': 'X',
+  'facebook.com': 'Facebook',
+  'linkedin.com': 'LinkedIn',
+  'instagram.com': 'Instagram',
+  'youtube.com': 'YouTube',
+  'github.com': 'GitHub',
+  'medium.com': 'Medium'
+}
+
+/**
+ * Detect if URL is a social media link
+ * @param {string} url
+ * @returns {string|null} Platform name or null
+ */
+function detectSocialPlatform(url) {
+  if (!url) return null
+
+  try {
+    const urlObj = new URL(url)
+    const host = urlObj.hostname.replace('www.', '')
+
+    for (const [domain, name] of Object.entries(SOCIAL_PLATFORMS)) {
+      if (host.includes(domain)) return name
+    }
+  } catch {
+    // Invalid URL
+  }
+
+  return null
+}
+
+/**
+ * Generate an accessible title for a link
+ * @param {string} href - The link URL
+ * @param {Function} localize - Localization function
+ * @returns {string}
+ */
+function generateTitle(href, localize) {
+  if (!href) return ''
+
+  // Social media links
+  const platform = detectSocialPlatform(href)
+  if (platform) {
+    return localize({
+      en: `View on ${platform}`,
+      fr: `Voir sur ${platform}`,
+      es: `Ver en ${platform}`
+    })
+  }
+
+  // Email links
+  if (href.startsWith('mailto:')) {
+    const email = href.replace('mailto:', '').split('?')[0]
+    return localize({
+      en: `Send email to ${email}`,
+      fr: `Envoyer un e-mail à ${email}`,
+      es: `Enviar correo a ${email}`
+    })
+  }
+
+  // Phone links
+  if (href.startsWith('tel:')) {
+    const phone = href.replace('tel:', '')
+    return localize({
+      en: `Call ${phone}`,
+      fr: `Appeler ${phone}`,
+      es: `Llamar a ${phone}`
+    })
+  }
+
+  // File downloads
+  if (isFileUrl(href)) {
+    return localize({
+      en: 'Download file',
+      fr: 'Télécharger le fichier',
+      es: 'Descargar archivo'
+    })
+  }
+
+  // External links
+  if (isExternalUrl(href)) {
+    return localize({
+      en: 'Open external link',
+      fr: 'Ouvrir le lien externe',
+      es: 'Abrir enlace externo'
+    })
+  }
+
+  // Internal links - humanize the path
+  try {
+    const url = new URL(href, window.location.origin)
+    const path = decodeURIComponent(url.pathname)
+      .replace(/^\/+/, '')
+      .replace(/[-_]/g, ' ')
+      .replace(/\.\w+$/, '')
+      .trim()
+
+    if (path) {
+      return localize({
+        en: `Go to ${path}`,
+        fr: `Aller à ${path}`,
+        es: `Ir a ${path}`
+      })
+    }
+  } catch {
+    // Invalid URL
+  }
+
+  return ''
+}
+
+/**
+ * Link - Smart link component for Uniweb foundations
+ *
+ * @param {Object} props
+ * @param {string} [props.to] - Destination URL (alias for href)
+ * @param {string} [props.href] - Destination URL
+ * @param {string} [props.title] - Custom title/tooltip (auto-generated if not provided)
+ * @param {string} [props.target] - Link target (_blank, _self, etc.)
+ * @param {string} [props.className] - CSS classes
+ * @param {boolean} [props.download] - Force download behavior
+ * @param {React.ReactNode} props.children - Link content
+ *
+ * @example
+ * // Internal link
+ * <Link to="/about">About Us</Link>
+ *
+ * @example
+ * // External link (automatically opens in new tab)
+ * <Link href="https://github.com">GitHub</Link>
+ *
+ * @example
+ * // Download link
+ * <Link href="/files/report.pdf" download>Download Report</Link>
+ */
+export function Link({
+  to,
+  href,
+  title,
+  target,
+  download,
+  className,
+  children,
+  ...props
+}) {
+  const { localize, makeHref, getRoutingComponents } = useWebsite()
+  const RouterLink = getRoutingComponents()?.Link
+
+  // Normalize href
+  let linkHref = href || to || ''
+
+  // Handle topic: protocol (internal reference)
+  if (linkHref.startsWith('topic:')) {
+    linkHref = makeHref(linkHref)
+  }
+
+  // Auto-generate title if not provided
+  const linkTitle = title || generateTitle(linkHref, localize)
+
+  // Determine if this should be a download
+  const isDownload = download || isFileUrl(linkHref)
+
+  // Determine if external
+  const isExternal = isExternalUrl(linkHref)
+
+  // File downloads
+  if (isDownload) {
+    return (
+      <a
+        href={linkHref}
+        download
+        target="_blank"
+        rel="noopener noreferrer"
+        title={linkTitle}
+        className={className}
+        {...props}
+      >
+        {children}
+      </a>
+    )
+  }
+
+  // External links
+  if (isExternal) {
+    return (
+      <a
+        href={linkHref}
+        target={target || '_blank'}
+        rel="noopener noreferrer"
+        title={linkTitle}
+        className={className}
+        {...props}
+      >
+        {children}
+      </a>
+    )
+  }
+
+  // Special protocols (mailto:, tel:)
+  if (linkHref.startsWith('mailto:') || linkHref.startsWith('tel:')) {
+    return (
+      <a
+        href={linkHref}
+        title={linkTitle}
+        className={className}
+        {...props}
+      >
+        {children}
+      </a>
+    )
+  }
+
+  // Internal links - use React Router if available
+  if (RouterLink) {
+    return (
+      <RouterLink
+        to={linkHref}
+        title={linkTitle}
+        className={className}
+        {...props}
+      >
+        {children}
+      </RouterLink>
+    )
+  }
+
+  // Fallback to regular anchor
+  return (
+    <a
+      href={linkHref}
+      title={linkTitle}
+      className={className}
+      {...props}
+    >
+      {children}
+    </a>
+  )
+}
+
+export default Link

package/src/components/Link/index.js

@@ -0,0 +1 @@
+export { Link, default } from './Link.jsx'