support id and ref attributes

src/avatar.tsx

@@ -13,10 +13,12 @@ export type AvatarProps = {
   rounded?: boolean
   class?: string
   style?: JSX.CSSProperties
+  id?: string
+  ref?: any
 }
 
 export const Avatar: FC<AvatarProps> = (props) => {
-  const { src, size = 32, rounded, class: className, style, alt = "" } = props
+  const { src, size = 32, rounded, class: className, style, id, ref, alt = "" } = props
 
   const avatarStyle: JSX.CSSProperties = {
     width: `${size}px`,
@@ -25,7 +27,7 @@ export const Avatar: FC<AvatarProps> = (props) => {
     ...style,
   }
 
-  return <img src={src} alt={alt} class={cn("Avatar", className)} style={avatarStyle} />
+  return <img src={src} alt={alt} class={cn("Avatar", className)} style={avatarStyle} id={id} ref={ref} />
 }
 
 export const Test = () => {

src/box.tsx

@@ -9,9 +9,11 @@ type BoxProps = PropsWithChildren & {
   p?: number
   class?: string
   style?: JSX.CSSProperties
+  id?: string
+  ref?: any
 }
 
-export const Box: FC<BoxProps> = ({ children, bg, color, p, class: className, style }) => {
+export const Box: FC<BoxProps> = ({ children, bg, color, p, class: className, style, id, ref }) => {
   const boxStyle: JSX.CSSProperties = {
     backgroundColor: bg,
     color: color,
@@ -19,7 +21,7 @@ export const Box: FC<BoxProps> = ({ children, bg, color, p, class: className, st
     ...style,
   }
 
-  return <div class={cn("Box", className)} style={boxStyle}>{children}</div>
+  return <div class={cn("Box", className)} style={boxStyle} id={id} ref={ref}>{children}</div>
 }
 
 // Common demo box colors

src/button.tsx

@@ -12,7 +12,7 @@ export type ButtonProps = JSX.IntrinsicElements["button"] & {
 }
 
 export const Button: FC<ButtonProps> = (props) => {
-  const { variant = "primary", size = "md", style, class: className, ...buttonProps } = props
+  const { variant = "primary", size = "md", style, class: className, id, ref, ...buttonProps } = props
 
   const baseStyles: JSX.CSSProperties = {
     display: "inline-flex",
@@ -75,7 +75,7 @@ export const Button: FC<ButtonProps> = (props) => {
     ...(style as JSX.CSSProperties),
   }
 
-  return <button {...buttonProps} class={cn("Button", className)} style={combinedStyles} />
+  return <button {...buttonProps} class={cn("Button", className)} style={combinedStyles} id={id} ref={ref} />
 }
 
 export const Test = () => {

src/divider.tsx

@@ -9,9 +9,11 @@ import { cn } from "./cn"
 type DividerProps = PropsWithChildren & {
   class?: string
   style?: JSX.CSSProperties
+  id?: string
+  ref?: any
 }
 
-export const Divider: FC<DividerProps> = ({ children, class: className, style }) => {
+export const Divider: FC<DividerProps> = ({ children, class: className, style, id, ref }) => {
   const containerStyle: JSX.CSSProperties = {
     display: "flex",
     alignItems: "center",
@@ -32,7 +34,7 @@ export const Divider: FC<DividerProps> = ({ children, class: className, style })
   }
 
   return (
-    <div class={cn("Divider", className)} style={containerStyle}>
+    <div class={cn("Divider", className)} style={containerStyle} id={id} ref={ref}>
       <div style={lineStyle}></div>
       {children && (
         <>

src/grid.tsx

@@ -15,12 +15,14 @@ type GridProps = PropsWithChildren & {
   h?: keyof typeof justifyItemsMap
   class?: string
   style?: JSX.CSSProperties
+  id?: string
+  ref?: any
 }
 
 type GridCols = number | { sm?: number; md?: number; lg?: number; xl?: number }
 
 export const Grid: FC<GridProps> = (props) => {
-  const { cols = 2, gap = 4, v, h, class: className, style, children } = props
+  const { cols = 2, gap = 4, v, h, class: className, style, id, ref, children } = props
 
   const gapPx = gap * 4
 
@@ -43,7 +45,7 @@ export const Grid: FC<GridProps> = (props) => {
     ...style,
   }
 
-  return <div class={cn("Grid", className)} style={combinedStyles}>{children}</div>
+  return <div class={cn("Grid", className)} style={combinedStyles} id={id} ref={ref}>{children}</div>
 }
 
 function getColumnsValue(cols: GridCols): string {

src/icon.tsx

@@ -15,6 +15,8 @@ type IconProps = {
   size?: number
   class?: string
   style?: JSX.CSSProperties
+  id?: string
+  ref?: any
 }
 
 type IconLinkProps = IconProps & {
@@ -23,7 +25,7 @@ type IconLinkProps = IconProps & {
 }
 
 export const Icon: FC<IconProps> = (props) => {
-  const { name, size = 6, class: className, style } = props
+  const { name, size = 6, class: className, style, id, ref } = props
 
   const iconSvg = icons[name]
 
@@ -50,11 +52,11 @@ export const Icon: FC<IconProps> = (props) => {
       `<svg$1 style="display: block; flex-shrink: 0; width: ${pixelSize}px; height: ${pixelSize}px;" class="${cn("Icon", className)}">`
     )
 
-  return <div dangerouslySetInnerHTML={{ __html: modifiedSvg }} style={iconStyle} />
+  return <div dangerouslySetInnerHTML={{ __html: modifiedSvg }} style={iconStyle} id={id} ref={ref} />
 }
 
 export const IconLink: FC<IconLinkProps> = (props) => {
-  const { href = "#", target, class: className, style, ...iconProps } = props
+  const { href = "#", target, class: className, style, id, ref, ...iconProps } = props
 
   const linkStyle: JSX.CSSProperties = {
     display: "inline-flex",
@@ -65,7 +67,7 @@ export const IconLink: FC<IconLinkProps> = (props) => {
   }
 
   return (
-    <a href={href} target={target} class={cn("IconLink", className)} style={linkStyle}>
+    <a href={href} target={target} class={cn("IconLink", className)} style={linkStyle} id={id} ref={ref}>
       <Icon {...iconProps} />
     </a>
   )

src/image.tsx

@@ -15,9 +15,11 @@ export type ImageProps = {
   objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down"
   class?: string
   style?: JSX.CSSProperties
+  id?: string
+  ref?: any
 }
 
-export const Image: FC<ImageProps> = ({ src, alt = "", width, height, objectFit, class: className, style }) => {
+export const Image: FC<ImageProps> = ({ src, alt = "", width, height, objectFit, class: className, style, id, ref }) => {
   const imageStyle: JSX.CSSProperties = {
     width: width ? `${width}px` : undefined,
     height: height ? `${height}px` : undefined,
@@ -25,7 +27,7 @@ export const Image: FC<ImageProps> = ({ src, alt = "", width, height, objectFit,
     ...style,
   }
 
-  return <img src={src} alt={alt} class={cn("Image", className)} style={imageStyle} />
+  return <img src={src} alt={alt} class={cn("Image", className)} style={imageStyle} id={id} ref={ref} />
 }
 
 export const Test = () => {

src/index.tsx

@@ -33,4 +33,4 @@ export { Box, RedBox, GreenBox, BlueBox, GrayBox } from "./box"
 
 export { Section } from "./section"
 
-export type { TailwindSize } from "./types"
+export type { TailwindSize, CommonHTMLProps } from "./types"

src/input.tsx

@@ -12,7 +12,7 @@ export type InputProps = JSX.IntrinsicElements["input"] & {
 }
 
 export const Input: FC<InputProps> = (props) => {
-  const { labelPosition = "above", children, style, class: className, ...inputProps } = props
+  const { labelPosition = "above", children, style, class: className, id, ref, ...inputProps } = props
 
   const inputStyle: JSX.CSSProperties = {
     height: "40px",
@@ -26,7 +26,7 @@ export const Input: FC<InputProps> = (props) => {
   }
 
   if (!children) {
-    return <input style={inputStyle} {...inputProps} class={cn("Input", className)} />
+    return <input style={inputStyle} {...inputProps} class={cn("Input", className)} id={id} ref={ref} />
   }
 
   const labelStyle: JSX.CSSProperties = {
@@ -36,7 +36,7 @@ export const Input: FC<InputProps> = (props) => {
   }
 
   const labelElement = (
-    <label for={inputProps.id} style={labelStyle}>
+    <label for={id} style={labelStyle}>
       {children}
     </label>
   )
@@ -45,7 +45,7 @@ export const Input: FC<InputProps> = (props) => {
     return (
       <div style={{ display: "flex", flexDirection: "column", gap: "4px", flex: 1, minWidth: 0 }}>
         {labelElement}
-        <input style={inputStyle} {...inputProps} class={cn("Input", className)} />
+        <input style={inputStyle} {...inputProps} class={cn("Input", className)} id={id} ref={ref} />
       </div>
     )
   }
@@ -54,7 +54,7 @@ export const Input: FC<InputProps> = (props) => {
     return (
       <div style={{ display: "flex", alignItems: "center", gap: "4px", flex: 1 }}>
         {labelElement}
-        <input style={{ ...inputStyle, flex: 1 }} {...inputProps} class={cn("Input", className)} />
+        <input style={{ ...inputStyle, flex: 1 }} {...inputProps} class={cn("Input", className)} id={id} ref={ref} />
       </div>
     )
   }
@@ -62,7 +62,7 @@ export const Input: FC<InputProps> = (props) => {
   if (labelPosition === "right") {
     return (
       <div style={{ display: "flex", alignItems: "center", gap: "4px", flex: 1 }}>
-        <input style={{ ...inputStyle, flex: 1 }} {...inputProps} class={cn("Input", className)} />
+        <input style={{ ...inputStyle, flex: 1 }} {...inputProps} class={cn("Input", className)} id={id} ref={ref} />
         {labelElement}
       </div>
     )

src/placeholder.tsx

@@ -11,7 +11,7 @@ import { CodeExamples } from "./code"
 
 export const Placeholder = {
   Avatar(props: PlaceholderAvatarProps) {
-    const { size = 32, seed = "seed", type = "dylan", transparent, alt, style, rounded } = props
+    const { size = 32, seed = "seed", type = "dylan", transparent, alt, style, rounded, id, ref, class: className } = props
 
     // Generate DiceBear avatar URL
     const url = new URL(`https://api.dicebear.com/9.x/${type}/svg`)
@@ -22,16 +22,16 @@ export const Placeholder = {
       url.searchParams.set("backgroundColor", "transparent")
     }
 
-    return <Avatar src={url.toString()} alt={alt} style={style} size={size} rounded={rounded} />
+    return <Avatar src={url.toString()} alt={alt} style={style} size={size} rounded={rounded} id={id} ref={ref} class={className} />
   },
 
   Image(props: PlaceholderImageProps) {
-    const { width = 200, height = 200, seed = 1, alt = "Placeholder image", objectFit, style } = props
+    const { width = 200, height = 200, seed = 1, alt = "Placeholder image", objectFit, style, id, ref, class: className } = props
 
     // Generate Picsum Photos URL with seed for consistent images
     const src = `https://picsum.photos/${width}/${height}?random=${seed}`
 
-    return <Image src={src} alt={alt} width={width} height={height} objectFit={objectFit} style={style} />
+    return <Image src={src} alt={alt} width={width} height={height} objectFit={objectFit} style={style} id={id} ref={ref} class={className} />
   },
 }
 

src/section.tsx

@@ -9,11 +9,13 @@ type SectionProps = PropsWithChildren & {
   maxWidth?: string
   class?: string
   style?: JSX.CSSProperties
+  id?: string
+  ref?: any
 }
 
-export const Section: FC<SectionProps> = ({ children, gap = 8, maxWidth, class: className, style }) => {
+export const Section: FC<SectionProps> = ({ children, gap = 8, maxWidth, class: className, style, id, ref }) => {
   return (
-    <VStack gap={gap} class={className} style={{ padding: "24px", maxWidth, ...style }}>
+    <VStack gap={gap} class={className} style={{ padding: "24px", maxWidth, ...style }} id={id} ref={ref}>
       {children}
     </VStack>
   )

src/select.tsx

@@ -20,12 +20,10 @@ export type SelectProps = Omit<JSX.IntrinsicElements["select"], "children"> & {
 }
 
 export const Select: FC<SelectProps> = (props) => {
-  const { options, placeholder, labelPosition = "above", children, style, class: className, ...selectProps } = props
+  const { options, placeholder, labelPosition = "above", children, style, class: className, id, ref, ...selectProps } = props
 
   // If a label is provided but no id, generate a random id so the label can be clicked
-  if (children && !selectProps.id) {
+  const elementId = id || (children ? `random-${Math.random().toString(36)}` : undefined)
-    selectProps.id = `random-${Math.random().toString(36)}`
-  }
 
   const selectStyle: JSX.CSSProperties = {
     height: "40px",
@@ -44,7 +42,7 @@ export const Select: FC<SelectProps> = (props) => {
   }
 
   const selectElement = (
-    <select style={selectStyle} {...selectProps} class={cn("Select", className)}>
+    <select style={selectStyle} {...selectProps} class={cn("Select", className)} id={elementId} ref={ref}>
       {placeholder && (
         <option value="" disabled>
           {placeholder}
@@ -74,7 +72,7 @@ export const Select: FC<SelectProps> = (props) => {
   }
 
   const labelElement = (
-    <label for={selectProps.id} style={labelStyle}>
+    <label for={elementId} style={labelStyle}>
       {children}
     </label>
   )
@@ -92,7 +90,7 @@ export const Select: FC<SelectProps> = (props) => {
     return (
       <div style={{ display: "flex", alignItems: "center", gap: "4px", flex: 1 }}>
         {labelElement}
-        <select style={{ ...selectStyle, flex: 1 }} {...selectProps} class={cn("Select", className)}>
+        <select style={{ ...selectStyle, flex: 1 }} {...selectProps} class={cn("Select", className)} id={elementId} ref={ref}>
           {placeholder && (
             <option value="" disabled>
               {placeholder}
@@ -111,7 +109,7 @@ export const Select: FC<SelectProps> = (props) => {
   if (labelPosition === "right") {
     return (
       <div style={{ display: "flex", alignItems: "center", gap: "4px", flex: 1 }}>
-        <select style={{ ...selectStyle, flex: 1 }} {...selectProps} class={cn("Select", className)}>
+        <select style={{ ...selectStyle, flex: 1 }} {...selectProps} class={cn("Select", className)} id={elementId} ref={ref}>
           {placeholder && (
             <option value="" disabled>
               {placeholder}

src/stack.tsx

@@ -21,6 +21,8 @@ export const VStack: FC<VStackProps> = (props) => {
       componentName="VStack"
       class={props.class}
       style={props.style}
+      id={props.id}
+      ref={props.ref}
     >
       {props.children}
     </Stack>
@@ -40,6 +42,8 @@ export const HStack: FC<HStackProps> = (props) => {
       componentName="HStack"
       class={props.class}
       style={props.style}
+      id={props.id}
+      ref={props.ref}
     >
       {props.children}
     </Stack>
@@ -70,7 +74,7 @@ const Stack: FC<StackProps> = (props) => {
       ...props.style,
     }
 
-    return <div class={cn(props.componentName, props.class)} style={combinedStyles}>{props.children}</div>
+    return <div class={cn(props.componentName, props.class)} style={combinedStyles} id={props.id} ref={props.ref}>{props.children}</div>
   }
 
   // Default flexbox behavior
@@ -95,7 +99,7 @@ const Stack: FC<StackProps> = (props) => {
     ...props.style,
   }
 
-  return <div class={cn(props.componentName, props.class)} style={combinedStyles}>{props.children}</div>
+  return <div class={cn(props.componentName, props.class)} style={combinedStyles} id={props.id} ref={props.ref}>{props.children}</div>
 }
 
 export const Test = () => {
@@ -291,6 +295,8 @@ type StackProps = {
   componentName?: string // for data-howl attribute
   class?: string
   style?: JSX.CSSProperties
+  id?: string
+  ref?: any
   children?: any
 }
 
@@ -303,6 +309,8 @@ type CommonStackProps = PropsWithChildren & {
   maxWidth?: string
   class?: string
   style?: JSX.CSSProperties
+  id?: string
+  ref?: any
 }
 
 type VStackProps = CommonStackProps & {

src/text.tsx

@@ -6,34 +6,36 @@ import { cn } from "./cn"
 type TextProps = PropsWithChildren & {
   class?: string
   style?: JSX.CSSProperties
+  id?: string
+  ref?: any
 }
 
-export const H1: FC<TextProps> = ({ children, class: className, style }) => (
+export const H1: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
-  <h1 class={cn("H1", className)} style={{ fontSize: "24px", fontWeight: "bold", ...style }}>{children}</h1>
+  <h1 class={cn("H1", className)} style={{ fontSize: "24px", fontWeight: "bold", ...style }} id={id} ref={ref}>{children}</h1>
 )
 
-export const H2: FC<TextProps> = ({ children, class: className, style }) => (
+export const H2: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
-  <h2 class={cn("H2", className)} style={{ fontSize: "20px", fontWeight: "bold", ...style }}>{children}</h2>
+  <h2 class={cn("H2", className)} style={{ fontSize: "20px", fontWeight: "bold", ...style }} id={id} ref={ref}>{children}</h2>
 )
 
-export const H3: FC<TextProps> = ({ children, class: className, style }) => (
+export const H3: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
-  <h3 class={cn("H3", className)} style={{ fontSize: "18px", fontWeight: "600", ...style }}>{children}</h3>
+  <h3 class={cn("H3", className)} style={{ fontSize: "18px", fontWeight: "600", ...style }} id={id} ref={ref}>{children}</h3>
 )
 
-export const H4: FC<TextProps> = ({ children, class: className, style }) => (
+export const H4: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
-  <h4 class={cn("H4", className)} style={{ fontSize: "16px", fontWeight: "600", ...style }}>{children}</h4>
+  <h4 class={cn("H4", className)} style={{ fontSize: "16px", fontWeight: "600", ...style }} id={id} ref={ref}>{children}</h4>
 )
 
-export const H5: FC<TextProps> = ({ children, class: className, style }) => (
+export const H5: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
-  <h5 class={cn("H5", className)} style={{ fontSize: "14px", fontWeight: "500", ...style }}>{children}</h5>
+  <h5 class={cn("H5", className)} style={{ fontSize: "14px", fontWeight: "500", ...style }} id={id} ref={ref}>{children}</h5>
 )
 
-export const Text: FC<TextProps> = ({ children, class: className, style }) => (
+export const Text: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
-  <p class={cn("Text", className)} style={{ fontSize: "14px", ...style }}>{children}</p>
+  <p class={cn("Text", className)} style={{ fontSize: "14px", ...style }} id={id} ref={ref}>{children}</p>
 )
 
-export const SmallText: FC<TextProps> = ({ children, class: className, style }) => (
+export const SmallText: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
-  <p class={cn("SmallText", className)} style={{ fontSize: "12px", ...style }}>{children}</p>
+  <p class={cn("SmallText", className)} style={{ fontSize: "12px", ...style }} id={id} ref={ref}>{children}</p>
 )
 
 export const Test = () => {

src/types.ts

@@ -1 +1,14 @@
+import "hono/jsx"
+import type { JSX } from "hono/jsx"
+
 export type TailwindSize = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96
+
+/**
+ * Common HTML attributes that should be supported by all components
+ */
+export type CommonHTMLProps = {
+  class?: string
+  id?: string
+  style?: JSX.CSSProperties
+  ref?: any
+}