@latte-macchiat-io/latte-vanilla-components 0.0.291 → 0.0.293

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.291",
+  "version": "0.0.293",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",
@@ -66,7 +66,8 @@
     ]
   },
   "dependencies": {
-    "@vanilla-extract/css-utils": "^0.1.6"
+    "@vanilla-extract/css-utils": "^0.1.6",
+    "html-react-parser": "^5.2.6"
   },
   "scripts": {
     "build": "echo \"Source-only distribution - no build needed\"",

package/src/components/Button/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { clsx } from 'clsx';
 
 import { buttonRecipe, type ButtonVariants } from './styles.css';

package/src/components/Carousel/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { clsx } from 'clsx';
 import { ReactNode, useEffect, useRef, useState } from 'react';
 

package/src/components/ConsentCookie/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { clsx } from 'clsx';
 import { useEffect, useState } from 'react';
 

package/src/components/Form/TextField/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { clsx } from 'clsx';
 import { useMemo } from 'react';
 

package/src/components/Header/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import clsx from 'clsx';
 import { useState } from 'react';
 

package/src/components/Heading/index.tsx

@@ -1,4 +1,5 @@
 import { clsx } from 'clsx';
+import parse from 'html-react-parser';
 
 import { headingRecipe, HeadingVariants } from './styles.css';
 import { AllowedHeading } from './types';
@@ -22,5 +23,9 @@ export const Heading = ({ as, size, align, className, children }: HeadingProps)
   const Component = as;
   const resolvedSize = size ?? levelToSize[as];
 
-  return <Component className={clsx(headingRecipe({ size: resolvedSize, align, as }), className)}>{children}</Component>;
+  return (
+    <Component className={clsx(headingRecipe({ size: resolvedSize, align, as }), className)}>
+      {parse(typeof children === 'string' ? children : '')}
+    </Component>
+  );
 };

package/src/components/Nav/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { clsx } from 'clsx';
 
 import { navRecipe, NavVariants } from './styles.css';

package/src/components/Paragraph/index.tsx

@@ -1,4 +1,5 @@
 import { clsx } from 'clsx';
+import parse from 'html-react-parser';
 
 import { paragraphRecipe, type ParagraphVariants } from './styles.css';
 
@@ -8,5 +9,5 @@ export type ParagraphProps = React.HTMLAttributes<HTMLDivElement> &
   };
 
 export const Paragraph = ({ align, className, children }: ParagraphProps) => (
-  <p className={clsx(paragraphRecipe({ align }), className)}>{children}</p>
+  <p className={clsx(paragraphRecipe({ align }), className)}>{parse(typeof children === 'string' ? children : '')}</p>
 );