@latte-macchiat-io/latte-vanilla-components 0.0.222 → 0.0.224

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.222",
+  "version": "0.0.224",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Columns/index.tsx

@@ -4,13 +4,15 @@ import { columnsRecipe, ColumnsVariants } from './styles.css';
 
 export type ColumnsProps = React.HTMLAttributes<HTMLDivElement> &
   ColumnsVariants & {
-    columns: number[]; // ex: [50, 50] ou [25, 75]
+    columns: number[];
     children: React.ReactNode;
   };
 
 export const Columns = ({ align, vAlign, columns, children, className }: ColumnsProps) => {
+  const columnsValue = columns.map((c) => `${c}fr`).join(' ');
+
   return (
-    <div className={clsx(columnsRecipe({ align, vAlign }), className)} style={{ ['--columns' as never]: columns.map((c) => `${c}%`).join(' ') }}>
+    <div className={clsx(columnsRecipe({ align, vAlign }), className)} style={{ ['--columns' as never]: columnsValue }}>
       {children}
     </div>
   );

package/src/components/Video/index.tsx

@@ -14,6 +14,7 @@ import {
   videoRecipe,
   type VideoVariants,
 } from './styles.css';
+import { Icon } from '../Icon';
 
 export type VideoProps = React.HTMLAttributes<HTMLDivElement> &
   VideoVariants & {
@@ -92,15 +93,27 @@ export const Video = ({
       )}
 
       {!hidePlayButton && !isAutoPlay && (
-        <button className={playButton} data-playing={isPlaying} onClick={playVideo} aria-label="Play video" type="button" />
+        <button className={playButton} data-playing={isPlaying} onClick={playVideo} aria-label="Play video" type="button">
+          <Icon icon="play" />
+        </button>
       )}
 
-      {isPlayingFullScreen && <button className={closeButton} onClick={closeVideo} aria-label="Close video" type="button" />}
+      {isPlayingFullScreen && (
+        <button className={closeButton} onClick={closeVideo} aria-label="Close video" type="button">
+          <Icon icon="close" />
+        </button>
+      )}
 
-      {isPlaying && showControls && <button className={pauseButton} onClick={pauseVideo} aria-label="Pause video" type="button" />}
+      {isPlaying && showControls && (
+        <button className={pauseButton} onClick={pauseVideo} aria-label="Pause video" type="button">
+          <Icon icon="pause" />
+        </button>
+      )}
 
       {showControls && (
-        <button className={soundButton} onClick={toggleMutedVideo} aria-label={isMuted ? 'Unmute video' : 'Mute video'} type="button" />
+        <button className={soundButton} onClick={toggleMutedVideo} aria-label={isMuted ? 'Unmute video' : 'Mute video'} type="button">
+          {isMuted ? <Icon icon="volumeUp" /> : <Icon icon="volumeMute" />}
+        </button>
       )}
     </div>
   );