@uniweb/kit 0.7.9 → 0.7.11

package/package.json

@@ -1,14 +1,11 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.7.9",
+  "version": "0.7.11",
   "description": "Standard component library for Uniweb foundations",
   "type": "module",
   "exports": {
     ".": "./src/index.js",
-    "./theme-tokens.css": {
-      "style": "./src/theme-tokens.css",
-      "default": "./src/theme-tokens.css"
-    }
+    "./theme-tokens.css": "./src/theme-tokens.css"
   },
   "files": [
     "src",
@@ -37,11 +34,11 @@
     "node": ">=20.19"
   },
   "dependencies": {
+    "@uniweb/core": "latest",
     "clsx": "^2.1.0",
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0",
-    "tailwind-merge": "^2.6.0",
-    "@uniweb/core": "0.5.9"
+    "tailwind-merge": "^2.6.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/components/Image/Image.jsx

@@ -19,13 +19,13 @@ 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",
+    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",
 };
 
 /**
@@ -34,18 +34,18 @@ const SIZE_CLASSES = {
  * @returns {string} CSS filter value
  */
 function buildFilterStyle(filter) {
-  if (!filter || typeof filter !== "object") return undefined;
+    if (!filter || typeof filter !== "object") return undefined;
 
-  const filters = [];
+    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}%)`);
+    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;
+    return filters.length > 0 ? filters.join(" ") : undefined;
 }
 
 /**
@@ -85,116 +85,115 @@ function buildFilterStyle(filter) {
  * <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
+    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;
+    const [hasError, setHasError] = useState(false);
+
+    // 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;
+
+    // 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;
     }
-  }
-
-  // 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>
+
+    const imageElement = (
+        <img
+            src={resolvedSrc}
+            alt={resolvedAlt}
+            loading={loading}
+            className={imageClasses}
+            style={filterStyle ? { filter: filterStyle } : undefined}
+            onError={handleError}
+            onLoad={handleLoad}
+            aria-hidden={ariaHidden}
+            {...props}
+        />
     );
-  }
 
-  return imageElement;
+    // 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/Media/Media.jsx

@@ -8,114 +8,136 @@
  * @module @uniweb/kit/Media
  */
 
-import React, { useState, useEffect, useRef, useCallback } from 'react'
-import { cn } from '../../utils/index.js'
-import { detectMediaType } from '../../utils/index.js'
+import React, { useState, useEffect, useRef } from "react";
+import { cn } from "../../utils/index.js";
+import { detectMediaType } from "../../utils/index.js";
 
 /**
  * Extract YouTube video ID from URL
  */
 function getYouTubeId(url) {
-  if (!url) return null
-  const match = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([^&?/]+)/)
-  return match?.[1] || null
+    if (!url) return null;
+    const match = url.match(
+        /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([^&?/]+)/,
+    );
+    return match?.[1] || null;
 }
 
 /**
  * Extract Vimeo video ID from URL
  */
 function getVimeoId(url) {
-  if (!url) return null
-  const match = url.match(/vimeo\.com\/(?:video\/)?(\d+)/)
-  return match?.[1] || null
+    if (!url) return null;
+    const match = url.match(/vimeo\.com\/(?:video\/)?(\d+)/);
+    return match?.[1] || null;
 }
 
 /**
  * YouTube Player Component
  */
 function YouTubePlayer({ videoId, autoplay, muted, loop, className }) {
-  const params = new URLSearchParams({
-    enablejsapi: '1',
-    autoplay: autoplay ? '1' : '0',
-    mute: muted ? '1' : '0',
-    loop: loop ? '1' : '0',
-    playlist: loop ? videoId : '',
-    rel: '0',
-    modestbranding: '1'
-  })
-
-  return (
-    <iframe
-      src={`https://www.youtube.com/embed/${videoId}?${params}`}
-      className={className}
-      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-      allowFullScreen
-      title="YouTube video"
-    />
-  )
+    const params = new URLSearchParams({
+        enablejsapi: "1",
+        autoplay: autoplay ? "1" : "0",
+        mute: muted ? "1" : "0",
+        loop: loop ? "1" : "0",
+        playlist: loop ? videoId : "",
+        rel: "0",
+        modestbranding: "1",
+    });
+
+    return (
+        <iframe
+            src={`https://www.youtube.com/embed/${videoId}?${params}`}
+            className={className}
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+            title="YouTube video"
+        />
+    );
 }
 
 /**
  * Vimeo Player Component
  */
 function VimeoPlayer({ videoId, autoplay, muted, loop, className }) {
-  const params = new URLSearchParams({
-    autoplay: autoplay ? '1' : '0',
-    muted: muted ? '1' : '0',
-    loop: loop ? '1' : '0',
-    dnt: '1'
-  })
-
-  return (
-    <iframe
-      src={`https://player.vimeo.com/video/${videoId}?${params}`}
-      className={className}
-      allow="autoplay; fullscreen; picture-in-picture"
-      allowFullScreen
-      title="Vimeo video"
-    />
-  )
+    const params = new URLSearchParams({
+        autoplay: autoplay ? "1" : "0",
+        muted: muted ? "1" : "0",
+        loop: loop ? "1" : "0",
+        dnt: "1",
+    });
+
+    return (
+        <iframe
+            src={`https://player.vimeo.com/video/${videoId}?${params}`}
+            className={className}
+            allow="autoplay; fullscreen; picture-in-picture"
+            allowFullScreen
+            title="Vimeo video"
+        />
+    );
 }
 
 /**
  * Local/Direct Video Player Component
  */
-function LocalVideo({ src, autoplay, muted, loop, controls, poster, onProgress, className }) {
-  const videoRef = useRef(null)
-  const [milestones, setMilestones] = useState({ 25: false, 50: false, 75: false, 95: false })
-
-  useEffect(() => {
-    const video = videoRef.current
-    if (!video || !onProgress) return
-
-    const handleTimeUpdate = () => {
-      const percent = (video.currentTime / video.duration) * 100
-
-      Object.entries({ 25: 25, 50: 50, 75: 75, 95: 95 }).forEach(([key, threshold]) => {
-        if (percent >= threshold && !milestones[key]) {
-          setMilestones((prev) => ({ ...prev, [key]: true }))
-          onProgress({ milestone: key, percent, currentTime: video.currentTime })
-        }
-      })
-    }
-
-    video.addEventListener('timeupdate', handleTimeUpdate)
-    return () => video.removeEventListener('timeupdate', handleTimeUpdate)
-  }, [milestones, onProgress])
-
-  return (
-    <video
-      ref={videoRef}
-      src={src}
-      autoPlay={autoplay}
-      muted={muted}
-      loop={loop}
-      controls={controls}
-      poster={poster}
-      playsInline
-      className={className}
-    />
-  )
+function LocalVideo({
+    src,
+    autoplay,
+    muted,
+    loop,
+    controls,
+    poster,
+    onProgress,
+    className,
+}) {
+    const videoRef = useRef(null);
+    const [milestones, setMilestones] = useState({
+        25: false,
+        50: false,
+        75: false,
+        95: false,
+    });
+
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video || !onProgress) return;
+
+        const handleTimeUpdate = () => {
+            const percent = (video.currentTime / video.duration) * 100;
+
+            Object.entries({ 25: 25, 50: 50, 75: 75, 95: 95 }).forEach(
+                ([key, threshold]) => {
+                    if (percent >= threshold && !milestones[key]) {
+                        setMilestones((prev) => ({ ...prev, [key]: true }));
+                        onProgress({
+                            milestone: key,
+                            percent,
+                            currentTime: video.currentTime,
+                        });
+                    }
+                },
+            );
+        };
+
+        video.addEventListener("timeupdate", handleTimeUpdate);
+        return () => video.removeEventListener("timeupdate", handleTimeUpdate);
+    }, [milestones, onProgress]);
+
+    return (
+        <video
+            ref={videoRef}
+            src={src}
+            autoPlay={autoplay}
+            muted={muted}
+            loop={loop}
+            controls={controls}
+            poster={poster}
+            playsInline
+            className={className}
+        />
+    );
 }
 
 /**
@@ -141,84 +163,85 @@ function LocalVideo({ src, autoplay, muted, loop, controls, poster, onProgress,
  * <Media src="/videos/intro.mp4" controls className="w-full" />
  */
 export function Media({
-  src,
-  media,
-  poster,
-  autoplay = false,
-  muted = false,
-  loop = false,
-  controls = true,
-  aspectRatio = '16/9',
-  className,
-  videoClassName,
-  onProgress,
-  ...props
+    src,
+    media,
+    poster,
+    autoplay = false,
+    muted = false,
+    loop = false,
+    controls = true,
+    aspectRatio = "16/9",
+    className,
+    videoClassName,
+    onProgress,
+    ...props
 }) {
-  // Normalize source
-  const videoSrc = typeof src === 'string' ? src : (src?.src || media?.src || '')
-
-  // Detect video type
-  const mediaType = detectMediaType(videoSrc)
-
-  // Render video player
-  const videoContent = (() => {
-    const playerClass = cn('w-full h-full', videoClassName)
-
-    switch (mediaType) {
-      case 'youtube': {
-        const videoId = getYouTubeId(videoSrc)
-        if (!videoId) return null
-        return (
-          <YouTubePlayer
-            videoId={videoId}
-            autoplay={autoplay}
-            muted={muted}
-            loop={loop}
-            className={playerClass}
-          />
-        )
-      }
-
-      case 'vimeo': {
-        const videoId = getVimeoId(videoSrc)
-        if (!videoId) return null
-        return (
-          <VimeoPlayer
-            videoId={videoId}
-            autoplay={autoplay}
-            muted={muted}
-            loop={loop}
-            className={playerClass}
-          />
-        )
-      }
-
-      case 'video':
-      default:
-        return (
-          <LocalVideo
-            src={videoSrc}
-            autoplay={autoplay}
-            muted={muted}
-            loop={loop}
-            controls={controls}
-            poster={poster}
-            onProgress={onProgress}
-            className={playerClass}
-          />
-        )
-    }
-  })()
-
-  return (
-    <div
-      className={cn('relative overflow-hidden', className)}
-      style={{ aspectRatio }}
-      {...props}
-    >
-      {videoContent}
-    </div>
-  )
+    // Normalize source
+    const videoSrc =
+        typeof src === "string" ? src : src?.src || media?.src || "";
+
+    // Detect video type
+    const mediaType = detectMediaType(videoSrc);
+
+    // Render video player
+    const videoContent = (() => {
+        const playerClass = cn("w-full h-full", videoClassName);
+
+        switch (mediaType) {
+            case "youtube": {
+                const videoId = getYouTubeId(videoSrc);
+                if (!videoId) return null;
+                return (
+                    <YouTubePlayer
+                        videoId={videoId}
+                        autoplay={autoplay}
+                        muted={muted}
+                        loop={loop}
+                        className={playerClass}
+                    />
+                );
+            }
+
+            case "vimeo": {
+                const videoId = getVimeoId(videoSrc);
+                if (!videoId) return null;
+                return (
+                    <VimeoPlayer
+                        videoId={videoId}
+                        autoplay={autoplay}
+                        muted={muted}
+                        loop={loop}
+                        className={playerClass}
+                    />
+                );
+            }
+
+            case "video":
+            default:
+                return (
+                    <LocalVideo
+                        src={videoSrc}
+                        autoplay={autoplay}
+                        muted={muted}
+                        loop={loop}
+                        controls={controls}
+                        poster={poster}
+                        onProgress={onProgress}
+                        className={playerClass}
+                    />
+                );
+        }
+    })();
+
+    return (
+        <div
+            className={cn("relative overflow-hidden", className)}
+            style={{ aspectRatio }}
+            {...props}
+        >
+            {videoContent}
+        </div>
+    );
 }
 
-export default Media
+export default Media;

package/src/styled/Visual/index.jsx

@@ -7,10 +7,10 @@
  * @module @uniweb/kit/styled/Visual
  */
 
-import React from 'react'
-import { Media } from '../../components/Media/Media.jsx'
-import { Image } from '../../components/Image/index.js'
-import { getChildBlockRenderer } from '../../utils/index.js'
+import React from "react";
+import { Media } from "../../components/Media/Media.jsx";
+import { Image } from "../../components/Image/index.js";
+import { getChildBlockRenderer } from "../../utils/index.js";
 
 /**
  * Renders the first non-empty visual from the given candidates.
@@ -35,18 +35,18 @@ import { getChildBlockRenderer } from '../../utils/index.js'
  * <Visual image={content.images[1]} className="aspect-video" />
  */
 export function Visual({ inset, video, image, className, fallback = null }) {
-  if (inset) {
-    const Renderer = getChildBlockRenderer()
-    return <Renderer blocks={[inset]} as="div" extra={{ className }} />
-  }
+    if (inset) {
+        const Renderer = getChildBlockRenderer();
+        return <Renderer blocks={[inset]} as="div" extra={{ className }} />;
+    }
 
-  if (video) {
-    return <Media src={video.src || video} className={className} />
-  }
+    if (video) {
+        return <Media {...video} className={className} />;
+    }
 
-  if (image) {
-    return <Image src={image.src || image} alt={image.alt} className={className} />
-  }
+    if (image) {
+        return <Image {...image} className={className} />;
+    }
 
-  return fallback
+    return fallback;
 }