@uniweb/kit 0.1.4 → 0.1.6

package/src/hooks/useTheme.js

@@ -0,0 +1,205 @@
+/**
+ * useTheme Hook
+ *
+ * Provides standardized theme classes for components.
+ * Eliminates duplicated theme objects across 25+ components.
+ *
+ * @example
+ * function Hero({ params }) {
+ *   const t = useTheme(params.theme)
+ *
+ *   return (
+ *     <section className={t.section}>
+ *       <h1 className={t.title}>...</h1>
+ *       <p className={t.body}>...</p>
+ *     </section>
+ *   )
+ * }
+ *
+ * @example
+ * // With custom overrides
+ * const t = useTheme('dark', {
+ *   card: 'bg-gray-800 rounded-xl',
+ *   cardHover: 'hover:bg-gray-700'
+ * })
+ */
+
+/**
+ * Standard theme definitions.
+ * Keys are standardized across all components.
+ */
+const THEMES = {
+  light: {
+    // Section backgrounds
+    section: 'bg-white',
+    sectionAlt: 'bg-gray-50',
+
+    // Typography
+    title: 'text-gray-900',
+    subtitle: 'text-gray-700',
+    pretitle: 'text-primary',
+    body: 'text-gray-600',
+    muted: 'text-gray-500',
+
+    // Cards
+    card: 'bg-gray-50',
+    cardHover: 'hover:shadow-lg',
+    cardBorder: 'border border-gray-200',
+
+    // Interactive
+    link: 'text-primary hover:text-primary-dark',
+    linkMuted: 'text-gray-600 hover:text-gray-900',
+
+    // Borders & Dividers
+    border: 'border-gray-200',
+    divider: 'bg-gray-200',
+  },
+
+  gray: {
+    section: 'bg-gray-50',
+    sectionAlt: 'bg-gray-100',
+
+    title: 'text-gray-900',
+    subtitle: 'text-gray-700',
+    pretitle: 'text-primary',
+    body: 'text-gray-600',
+    muted: 'text-gray-500',
+
+    card: 'bg-white shadow-sm',
+    cardHover: 'hover:shadow-lg',
+    cardBorder: 'border border-gray-200',
+
+    link: 'text-primary hover:text-primary-dark',
+    linkMuted: 'text-gray-600 hover:text-gray-900',
+
+    border: 'border-gray-200',
+    divider: 'bg-gray-300',
+  },
+
+  dark: {
+    section: 'bg-gray-900',
+    sectionAlt: 'bg-gray-800',
+
+    title: 'text-white',
+    subtitle: 'text-gray-300',
+    pretitle: 'text-primary',
+    body: 'text-gray-400',
+    muted: 'text-gray-500',
+
+    card: 'bg-gray-800',
+    cardHover: 'hover:bg-gray-750',
+    cardBorder: 'border border-gray-700',
+
+    link: 'text-primary hover:text-primary-light',
+    linkMuted: 'text-gray-400 hover:text-white',
+
+    border: 'border-gray-700',
+    divider: 'bg-gray-700',
+  },
+
+  primary: {
+    section: 'bg-primary',
+    sectionAlt: 'bg-primary-dark',
+
+    title: 'text-white',
+    subtitle: 'text-white/90',
+    pretitle: 'text-white/80',
+    body: 'text-white/80',
+    muted: 'text-white/60',
+
+    card: 'bg-white/10',
+    cardHover: 'hover:bg-white/20',
+    cardBorder: 'border border-white/20',
+
+    link: 'text-white hover:text-white/80',
+    linkMuted: 'text-white/70 hover:text-white',
+
+    border: 'border-white/20',
+    divider: 'bg-white/20',
+  },
+
+  gradient: {
+    section: 'bg-gradient-to-br from-primary to-indigo-600',
+    sectionAlt: 'bg-gradient-to-br from-primary-dark to-indigo-700',
+
+    title: 'text-white',
+    subtitle: 'text-white/90',
+    pretitle: 'text-white/80',
+    body: 'text-white/80',
+    muted: 'text-white/60',
+
+    card: 'bg-white/10 backdrop-blur-sm',
+    cardHover: 'hover:bg-white/20',
+    cardBorder: 'border border-white/20',
+
+    link: 'text-white hover:text-white/80',
+    linkMuted: 'text-white/70 hover:text-white',
+
+    border: 'border-white/20',
+    divider: 'bg-white/20',
+  },
+
+  glass: {
+    section: 'bg-white/10 backdrop-blur-lg',
+    sectionAlt: 'bg-white/5 backdrop-blur-lg',
+
+    title: 'text-white',
+    subtitle: 'text-white/90',
+    pretitle: 'text-primary',
+    body: 'text-white/80',
+    muted: 'text-white/60',
+
+    card: 'bg-white/10 backdrop-blur-sm',
+    cardHover: 'hover:bg-white/20',
+    cardBorder: 'border border-white/20',
+
+    link: 'text-white hover:text-primary',
+    linkMuted: 'text-white/70 hover:text-white',
+
+    border: 'border-white/20',
+    divider: 'bg-white/20',
+  },
+}
+
+/**
+ * Hook to get theme classes by name.
+ *
+ * @param {string} themeName - Theme name (light, gray, dark, primary, gradient, glass)
+ * @param {Object} overrides - Custom class overrides
+ * @returns {Object} Theme classes object
+ */
+export function useTheme(themeName = 'light', overrides = {}) {
+  const baseTheme = THEMES[themeName] || THEMES.light
+
+  if (Object.keys(overrides).length === 0) {
+    return baseTheme
+  }
+
+  return {
+    ...baseTheme,
+    ...overrides,
+  }
+}
+
+/**
+ * Get theme classes without the hook (for non-React contexts)
+ * @param {string} themeName
+ * @param {Object} overrides
+ * @returns {Object}
+ */
+export function getThemeClasses(themeName = 'light', overrides = {}) {
+  const baseTheme = THEMES[themeName] || THEMES.light
+  return { ...baseTheme, ...overrides }
+}
+
+/**
+ * All available theme names
+ */
+export const THEME_NAMES = Object.keys(THEMES)
+
+/**
+ * Export theme definitions for customization
+ */
+export { THEMES }
+
+export default useTheme

package/src/index.js

@@ -3,6 +3,9 @@
  *
  * Standard component library for Uniweb foundations.
  *
+ * For pre-styled components (Section, SidebarLayout, Disclaimer, etc.),
+ * import from '@uniweb/kit/styled'.
+ *
  * @example
  * import { Link, Image, useWebsite } from '@uniweb/kit'
  *
@@ -18,10 +21,10 @@
  */
 
 // ============================================================================
-// Components
+// Components (Primitives - no Tailwind dependency)
 // ============================================================================
 
-// Primitives
+// Navigation
 export { Link } from './components/Link/index.js'
 export { Image } from './components/Image/index.js'
 export { SafeHtml } from './components/SafeHtml/index.js'
@@ -35,24 +38,40 @@ export {
   PlainText
 } from './components/Text/index.js'
 
-// Media
+// Media (plain version - for styled facade, use @uniweb/kit/tailwind)
 export { Media } from './components/Media/index.js'
 export { FileLogo } from './components/FileLogo/index.js'
 export { MediaIcon } from './components/MediaIcon/index.js'
 
-// Content
-export { Section, Render } from './components/Section/index.js'
-export { Code, Alert, Warning, Table, Details, Divider } from './components/Section/renderers/index.js'
-
-// Utilities
+// Files (plain version - for styled card, use @uniweb/kit/tailwind)
 export { Asset } from './components/Asset/index.js'
-export { Disclaimer } from './components/Disclaimer/index.js'
+
+// Social
+export {
+  SocialIcon,
+  getSocialPlatform,
+  isSocialLink,
+  filterSocialLinks
+} from './components/SocialIcon/index.jsx'
 
 // ============================================================================
 // Hooks
 // ============================================================================
 
-export { useWebsite } from './hooks/index.js'
+export {
+  useWebsite,
+  useRouting,
+  useActiveRoute,
+  useScrolled,
+  useMobileMenu,
+  useAccordion,
+  useGridLayout,
+  getGridClasses,
+  useTheme,
+  getThemeClasses,
+  THEMES,
+  THEME_NAMES
+} from './hooks/index.js'
 
 // ============================================================================
 // Utilities

package/src/styled/Asset/Asset.jsx

@@ -0,0 +1,161 @@
+/**
+ * Asset Component
+ *
+ * File asset preview with download functionality.
+ *
+ * @module @uniweb/kit/Asset
+ */
+
+import React, { useState, useCallback, forwardRef, useImperativeHandle } from 'react'
+import { cn } from '../../utils/index.js'
+import { FileLogo } from '../FileLogo/index.js'
+import { Image } from '../Image/index.js'
+import { useWebsite } from '../../hooks/useWebsite.js'
+
+/**
+ * Check if file is an image
+ * @param {string} filename
+ * @returns {boolean}
+ */
+function isImageFile(filename) {
+  if (!filename) return false
+  const ext = filename.toLowerCase().split('.').pop()
+  return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)
+}
+
+/**
+ * Asset - File preview with download
+ *
+ * @param {Object} props
+ * @param {string|Object} props.value - Asset identifier or object
+ * @param {Object} [props.profile] - Profile object for asset resolution
+ * @param {boolean} [props.withDownload=true] - Show download button
+ * @param {string} [props.className] - Additional CSS classes
+ *
+ * @example
+ * <Asset value="document.pdf" profile={profile} />
+ *
+ * @example
+ * <Asset value={{ src: "/files/report.pdf", filename: "report.pdf" }} />
+ */
+export const Asset = forwardRef(function Asset(
+  { value, profile, withDownload = true, className, ...props },
+  ref
+) {
+  const { localize } = useWebsite()
+  const [imageError, setImageError] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
+
+  // Resolve asset info
+  let src = ''
+  let filename = ''
+  let alt = ''
+
+  if (typeof value === 'string') {
+    src = value
+    filename = value.split('/').pop() || value
+  } else if (value && typeof value === 'object') {
+    src = value.src || value.url || ''
+    filename = value.filename || value.name || src.split('/').pop() || ''
+    alt = value.alt || filename
+  }
+
+  // Use profile to resolve asset if available
+  if (profile && typeof profile.getAssetInfo === 'function') {
+    const assetInfo = profile.getAssetInfo(value, true, filename)
+    src = assetInfo?.src || src
+    filename = assetInfo?.filename || filename
+    alt = assetInfo?.alt || alt
+  }
+
+  const isImage = isImageFile(filename)
+
+  // Handle download
+  const handleDownload = useCallback(async () => {
+    if (!src) return
+
+    try {
+      // Try to trigger download
+      const downloadUrl = src.includes('?') ? `${src}&download=true` : `${src}?download=true`
+      const response = await fetch(downloadUrl)
+      const blob = await response.blob()
+
+      const link = document.createElement('a')
+      link.href = URL.createObjectURL(blob)
+      link.download = filename
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      URL.revokeObjectURL(link.href)
+    } catch (error) {
+      // Fallback: open in new tab
+      window.open(src, '_blank')
+    }
+  }, [src, filename])
+
+  // Expose download method via ref
+  useImperativeHandle(ref, () => ({
+    triggerDownload: handleDownload
+  }), [handleDownload])
+
+  // Handle image error
+  const handleImageError = useCallback(() => {
+    setImageError(true)
+  }, [])
+
+  if (!src) return null
+
+  return (
+    <div
+      className={cn(
+        'relative inline-block rounded-lg overflow-hidden border border-gray-200',
+        'transition-shadow hover:shadow-md',
+        className
+      )}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      {...props}
+    >
+      {/* Preview */}
+      <div className="w-32 h-32 flex items-center justify-center bg-gray-50">
+        {isImage && !imageError ? (
+          <Image
+            src={src}
+            alt={alt}
+            className="w-full h-full object-cover"
+            onError={handleImageError}
+          />
+        ) : (
+          <FileLogo filename={filename} size="48" className="text-gray-400" />
+        )}
+      </div>
+
+      {/* Filename */}
+      <div className="px-2 py-1 text-xs text-gray-600 truncate max-w-[128px]" title={filename}>
+        {filename}
+      </div>
+
+      {/* Download overlay */}
+      {withDownload && (
+        <button
+          onClick={handleDownload}
+          className={cn(
+            'absolute inset-0 flex items-center justify-center',
+            'bg-black/50 text-white transition-opacity',
+            isHovered ? 'opacity-100' : 'opacity-0'
+          )}
+          aria-label={localize({
+            en: 'Download file',
+            fr: 'Télécharger le fichier'
+          })}
+        >
+          <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+          </svg>
+        </button>
+      )}
+    </div>
+  )
+})
+
+export default Asset

package/src/styled/Asset/index.js

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

package/src/{components → styled}/Disclaimer/Disclaimer.jsx

@@ -9,7 +9,7 @@
 import React, { useState, useCallback, useEffect } from 'react'
 import { cn } from '../../utils/index.js'
 import { useWebsite } from '../../hooks/useWebsite.js'
-import { SafeHtml } from '../SafeHtml/index.js'
+import { SafeHtml } from '../../components/SafeHtml/index.js'
 
 /**
  * Disclaimer Modal