From 31f0a2a63a8605ef84e5f42df6714b9539ecab0f Mon Sep 17 00:00:00 2001
From: Chris Wanstrath <chris@ozmm.org>
Date: Sun, 30 Nov 2025 08:53:25 -0800
Subject: [PATCH] class prop

---
 src/avatar.tsx  |  5 +++--
 src/box.tsx     |  5 +++--
 src/divider.tsx |  5 +++--
 src/grid.tsx    |  5 +++--
 src/image.tsx   |  5 +++--
 src/section.tsx |  5 +++--
 src/stack.tsx   |  6 +++++-
 src/text.tsx    | 29 +++++++++++++++--------------
 8 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/src/avatar.tsx b/src/avatar.tsx
index 1c59026..dacc3b8 100644
--- a/src/avatar.tsx
+++ b/src/avatar.tsx
@@ -10,11 +10,12 @@ export type AvatarProps = {
   alt?: string
   size?: number
   rounded?: boolean
+  class?: string
   style?: JSX.CSSProperties
 }
 
 export const Avatar: FC<AvatarProps> = (props) => {
-  const { src, size = 32, rounded, style, alt = "" } = props
+  const { src, size = 32, rounded, class: className, style, alt = "" } = props
 
   const avatarStyle: JSX.CSSProperties = {
     width: `${size}px`,
@@ -23,7 +24,7 @@ export const Avatar: FC<AvatarProps> = (props) => {
     ...style,
   }
 
-  return <img src={src} alt={alt} style={avatarStyle} />
+  return <img src={src} alt={alt} class={className} style={avatarStyle} />
 }
 
 export const Test = () => {
diff --git a/src/box.tsx b/src/box.tsx
index 19d3766..f152a3f 100644
--- a/src/box.tsx
+++ b/src/box.tsx
@@ -6,10 +6,11 @@ type BoxProps = PropsWithChildren & {
   bg?: string
   color?: string
   p?: number
+  class?: string
   style?: JSX.CSSProperties
 }
 
-export const Box: FC<BoxProps> = ({ children, bg, color, p, style }) => {
+export const Box: FC<BoxProps> = ({ children, bg, color, p, class: className, style }) => {
   const boxStyle: JSX.CSSProperties = {
     backgroundColor: bg,
     color: color,
@@ -17,7 +18,7 @@ export const Box: FC<BoxProps> = ({ children, bg, color, p, style }) => {
     ...style,
   }
 
-  return <div style={boxStyle}>{children}</div>
+  return <div class={className} style={boxStyle}>{children}</div>
 }
 
 // Common demo box colors
diff --git a/src/divider.tsx b/src/divider.tsx
index 078b6ff..6030215 100644
--- a/src/divider.tsx
+++ b/src/divider.tsx
@@ -6,10 +6,11 @@ import { VStack } from "./stack"
 import { CodeExamples } from "./code"
 
 type DividerProps = PropsWithChildren & {
+  class?: string
   style?: JSX.CSSProperties
 }
 
-export const Divider: FC<DividerProps> = ({ children, style }) => {
+export const Divider: FC<DividerProps> = ({ children, class: className, style }) => {
   const containerStyle: JSX.CSSProperties = {
     display: "flex",
     alignItems: "center",
@@ -30,7 +31,7 @@ export const Divider: FC<DividerProps> = ({ children, style }) => {
   }
 
   return (
-    <div style={containerStyle}>
+    <div class={className} style={containerStyle}>
       <div style={lineStyle}></div>
       {children && (
         <>
diff --git a/src/grid.tsx b/src/grid.tsx
index 15047b6..26039b1 100644
--- a/src/grid.tsx
+++ b/src/grid.tsx
@@ -12,13 +12,14 @@ type GridProps = PropsWithChildren & {
   gap?: TailwindSize
   v?: keyof typeof alignItemsMap
   h?: keyof typeof justifyItemsMap
+  class?: string
   style?: JSX.CSSProperties
 }
 
 type GridCols = number | { sm?: number; md?: number; lg?: number; xl?: number }
 
 export const Grid: FC<GridProps> = (props) => {
-  const { cols = 2, gap = 4, v, h, style, children } = props
+  const { cols = 2, gap = 4, v, h, class: className, style, children } = props
 
   const gapPx = gap * 4
 
@@ -41,7 +42,7 @@ export const Grid: FC<GridProps> = (props) => {
     ...style,
   }
 
-  return <div style={combinedStyles}>{children}</div>
+  return <div class={className} style={combinedStyles}>{children}</div>
 }
 
 function getColumnsValue(cols: GridCols): string {
diff --git a/src/image.tsx b/src/image.tsx
index bb487d0..9a09dda 100644
--- a/src/image.tsx
+++ b/src/image.tsx
@@ -12,10 +12,11 @@ export type ImageProps = {
   width?: number
   height?: number
   objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down"
+  class?: string
   style?: JSX.CSSProperties
 }
 
-export const Image: FC<ImageProps> = ({ src, alt = "", width, height, objectFit, style }) => {
+export const Image: FC<ImageProps> = ({ src, alt = "", width, height, objectFit, class: className, style }) => {
   const imageStyle: JSX.CSSProperties = {
     width: width ? `${width}px` : undefined,
     height: height ? `${height}px` : undefined,
@@ -23,7 +24,7 @@ export const Image: FC<ImageProps> = ({ src, alt = "", width, height, objectFit,
     ...style,
   }
 
-  return <img src={src} alt={alt} style={imageStyle} />
+  return <img src={src} alt={alt} class={className} style={imageStyle} />
 }
 
 export const Test = () => {
diff --git a/src/section.tsx b/src/section.tsx
index 35c1dbf..40871d1 100644
--- a/src/section.tsx
+++ b/src/section.tsx
@@ -7,12 +7,13 @@ import { CodeExamples } from "./code"
 type SectionProps = PropsWithChildren & {
   gap?: TailwindSize
   maxWidth?: string
+  class?: string
   style?: JSX.CSSProperties
 }
 
-export const Section: FC<SectionProps> = ({ children, gap = 8, maxWidth, style }) => {
+export const Section: FC<SectionProps> = ({ children, gap = 8, maxWidth, class: className, style }) => {
   return (
-    <VStack gap={gap} style={{ padding: "24px", maxWidth, ...style }}>
+    <VStack gap={gap} class={className} style={{ padding: "24px", maxWidth, ...style }}>
       {children}
     </VStack>
   )
diff --git a/src/stack.tsx b/src/stack.tsx
index 000841d..a777adc 100644
--- a/src/stack.tsx
+++ b/src/stack.tsx
@@ -15,6 +15,7 @@ export const VStack: FC<VStackProps> = (props) => {
       crossAxis={props.h}
       wrap={props.wrap}
       gap={props.gap}
+      class={props.class}
       style={props.style}
     >
       {props.children}
@@ -30,6 +31,7 @@ export const HStack: FC<HStackProps> = (props) => {
       crossAxis={props.v}
       wrap={props.wrap}
       gap={props.gap}
+      class={props.class}
       style={props.style}
     >
       {props.children}
@@ -60,7 +62,7 @@ const Stack: FC<StackProps> = (props) => {
     ...props.style,
   }
 
-  return <div style={combinedStyles}>{props.children}</div>
+  return <div class={props.class} style={combinedStyles}>{props.children}</div>
 }
 
 export const Test = () => {
@@ -160,6 +162,7 @@ type StackProps = {
   crossAxis?: string
   wrap?: boolean
   gap?: TailwindSize
+  class?: string
   style?: JSX.CSSProperties
   children?: any
 }
@@ -170,6 +173,7 @@ type CrossAxisOpts = "start" | "center" | "end" | "stretch" | "baseline"
 type CommonStackProps = PropsWithChildren & {
   wrap?: boolean
   gap?: TailwindSize
+  class?: string
   style?: JSX.CSSProperties
 }
 
diff --git a/src/text.tsx b/src/text.tsx
index cc20415..e9d1041 100644
--- a/src/text.tsx
+++ b/src/text.tsx
@@ -3,35 +3,36 @@ import type { FC, PropsWithChildren, JSX } from "hono/jsx"
 import { CodeExamples } from "./code"
 
 type TextProps = PropsWithChildren & {
+  class?: string
   style?: JSX.CSSProperties
 }
 
-export const H1: FC<TextProps> = ({ children, style }) => (
-  <h1 style={{ fontSize: "24px", fontWeight: "bold", ...style }}>{children}</h1>
+export const H1: FC<TextProps> = ({ children, class: className, style }) => (
+  <h1 class={className} style={{ fontSize: "24px", fontWeight: "bold", ...style }}>{children}</h1>
 )
 
-export const H2: FC<TextProps> = ({ children, style }) => (
-  <h2 style={{ fontSize: "20px", fontWeight: "bold", ...style }}>{children}</h2>
+export const H2: FC<TextProps> = ({ children, class: className, style }) => (
+  <h2 class={className} style={{ fontSize: "20px", fontWeight: "bold", ...style }}>{children}</h2>
 )
 
-export const H3: FC<TextProps> = ({ children, style }) => (
-  <h3 style={{ fontSize: "18px", fontWeight: "600", ...style }}>{children}</h3>
+export const H3: FC<TextProps> = ({ children, class: className, style }) => (
+  <h3 class={className} style={{ fontSize: "18px", fontWeight: "600", ...style }}>{children}</h3>
 )
 
-export const H4: FC<TextProps> = ({ children, style }) => (
-  <h4 style={{ fontSize: "16px", fontWeight: "600", ...style }}>{children}</h4>
+export const H4: FC<TextProps> = ({ children, class: className, style }) => (
+  <h4 class={className} style={{ fontSize: "16px", fontWeight: "600", ...style }}>{children}</h4>
 )
 
-export const H5: FC<TextProps> = ({ children, style }) => (
-  <h5 style={{ fontSize: "14px", fontWeight: "500", ...style }}>{children}</h5>
+export const H5: FC<TextProps> = ({ children, class: className, style }) => (
+  <h5 class={className} style={{ fontSize: "14px", fontWeight: "500", ...style }}>{children}</h5>
 )
 
-export const Text: FC<TextProps> = ({ children, style }) => (
-  <p style={{ fontSize: "14px", ...style }}>{children}</p>
+export const Text: FC<TextProps> = ({ children, class: className, style }) => (
+  <p class={className} style={{ fontSize: "14px", ...style }}>{children}</p>
 )
 
-export const SmallText: FC<TextProps> = ({ children, style }) => (
-  <p style={{ fontSize: "12px", ...style }}>{children}</p>
+export const SmallText: FC<TextProps> = ({ children, class: className, style }) => (
+  <p class={className} style={{ fontSize: "12px", ...style }}>{children}</p>
 )
 
 export const Test = () => {