support more default props

src/avatar.tsx

@@ -6,28 +6,22 @@ import { VStack, HStack } from "./stack"
 import { CodeExamples } from "./code"
 import { cn } from "./cn"
 
-export type AvatarProps = {
+export type AvatarProps = JSX.IntrinsicElements["img"] & {
-  src: string
-  alt?: string
   size?: number
   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, id, ref, alt = "" } = props
+  const { src, size = 32, rounded, class: className, style, id, ref, alt = "", ...rest } = props
 
   const avatarStyle: JSX.CSSProperties = {
     width: `${size}px`,
     height: `${size}px`,
     borderRadius: rounded ? "9999px" : undefined,
-    ...style,
+    ...(style as JSX.CSSProperties),
   }
 
-  return <img src={src} alt={alt} class={cn("Avatar", className)} style={avatarStyle} id={id} ref={ref} />
+  return <img src={src} alt={alt} class={cn("Avatar", className)} style={avatarStyle} id={id} ref={ref} {...rest} />
 }
 
 export const Test = () => {

src/box.tsx

@@ -3,25 +3,23 @@ import type { FC, PropsWithChildren, JSX } from "hono/jsx"
 import { CodeExamples } from "./code"
 import { cn } from "./cn"
 
-type BoxProps = PropsWithChildren & {
+type BoxProps = JSX.IntrinsicElements["div"] & PropsWithChildren & {
   bg?: string
   color?: string
   p?: number
-  class?: string
-  style?: JSX.CSSProperties
-  id?: string
-  ref?: any
 }
 
-export const Box: FC<BoxProps> = ({ children, bg, color, p, class: className, style, id, ref }) => {
+export const Box: FC<BoxProps> = (props) => {
+  const { children, bg, color, p, class: className, style, id, ref, ...rest } = props
+
   const boxStyle: JSX.CSSProperties = {
     backgroundColor: bg,
     color: color,
     padding: p ? `${p}px` : undefined,
-    ...style,
+    ...(style as JSX.CSSProperties),
   }
 
-  return <div class={cn("Box", className)} style={boxStyle} id={id} ref={ref}>{children}</div>
+  return <div class={cn("Box", className)} style={boxStyle} id={id} ref={ref} {...rest}>{children}</div>
 }
 
 // Common demo box colors

src/cn.ts

@@ -6,6 +6,6 @@
  * cn('base-class', isActive && 'active', 'another-class') // => "base-class active another-class"
  * cn('foo', false, 'bar', null, undefined) // => "foo bar"
  */
-export function cn(...classes: (string | undefined | null | false)[]): string {
+export function cn(...classes: (string | Promise<string> | undefined | null | false)[]): string {
-  return classes.filter(Boolean).join(" ");
+  return classes.filter((c): c is string => typeof c === "string").join(" ");
 }

src/divider.tsx

@@ -6,19 +6,16 @@ import { VStack } from "./stack"
 import { CodeExamples } from "./code"
 import { cn } from "./cn"
 
-type DividerProps = PropsWithChildren & {
+type DividerProps = JSX.IntrinsicElements["div"] & PropsWithChildren
-  class?: string
+
-  style?: JSX.CSSProperties
+export const Divider: FC<DividerProps> = (props) => {
-  id?: string
+  const { children, class: className, style, id, ref, ...rest } = props
-  ref?: any
-}
 
-export const Divider: FC<DividerProps> = ({ children, class: className, style, id, ref }) => {
   const containerStyle: JSX.CSSProperties = {
     display: "flex",
     alignItems: "center",
     margin: "16px 0",
-    ...style,
+    ...(style as JSX.CSSProperties),
   }
 
   const lineStyle: JSX.CSSProperties = {
@@ -34,7 +31,7 @@ export const Divider: FC<DividerProps> = ({ children, class: className, style, i
   }
 
   return (
-    <div class={cn("Divider", className)} style={containerStyle} id={id} ref={ref}>
+    <div class={cn("Divider", className)} style={containerStyle} id={id} ref={ref} {...rest}>
       <div style={lineStyle}></div>
       {children && (
         <>

src/grid.tsx

@@ -8,21 +8,17 @@ import { H2, H3 } from "./text"
 import { CodeExamples } from "./code"
 import { cn } from "./cn"
 
-type GridProps = PropsWithChildren & {
+type GridCols = number | { sm?: number; md?: number; lg?: number; xl?: number }
+
+type GridProps = JSX.IntrinsicElements["div"] & PropsWithChildren & {
   cols?: GridCols
   gap?: TailwindSize
   v?: keyof typeof alignItemsMap
   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, id, ref, children } = props
+  const { cols = 2, gap = 4, v, h, class: className, style, id, ref, children, ...rest } = props
 
   const gapPx = gap * 4
 
@@ -42,10 +38,10 @@ export const Grid: FC<GridProps> = (props) => {
 
   const combinedStyles = {
     ...baseStyles,
-    ...style,
+    ...(style as JSX.CSSProperties),
   }
 
-  return <div class={cn("Grid", className)} style={combinedStyles} id={id} ref={ref}>{children}</div>
+  return <div class={cn("Grid", className)} style={combinedStyles} id={id} ref={ref} {...rest}>{children}</div>
 }
 
 function getColumnsValue(cols: GridCols): string {

src/icon.tsx

@@ -10,22 +10,18 @@ import { cn } from "./cn"
 
 export type IconName = keyof typeof icons
 
-type IconProps = {
+type IconProps = JSX.IntrinsicElements["div"] & {
   name: IconName
   size?: number
-  class?: string
-  style?: JSX.CSSProperties
-  id?: string
-  ref?: any
 }
 
-type IconLinkProps = IconProps & {
+type IconLinkProps = JSX.IntrinsicElements["a"] & {
-  href?: string
+  name: IconName
-  target?: string
+  size?: number
 }
 
 export const Icon: FC<IconProps> = (props) => {
-  const { name, size = 6, class: className, style, id, ref } = props
+  const { name, size = 6, class: className, style, id, ref, ...rest } = props
 
   const iconSvg = icons[name]
 
@@ -39,7 +35,7 @@ export const Icon: FC<IconProps> = (props) => {
     flexShrink: "0",
     width: `${pixelSize}px`,
     height: `${pixelSize}px`,
-    ...style,
+    ...(style as JSX.CSSProperties),
   }
 
   // Modify the SVG string to include our custom attributes
@@ -52,23 +48,23 @@ 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} id={id} ref={ref} />
+  return <div dangerouslySetInnerHTML={{ __html: modifiedSvg }} style={iconStyle} id={id} ref={ref} {...rest} />
 }
 
 export const IconLink: FC<IconLinkProps> = (props) => {
-  const { href = "#", target, class: className, style, id, ref, ...iconProps } = props
+  const { href = "#", target, class: className, style, id, ref, name, size, ...rest } = props
 
   const linkStyle: JSX.CSSProperties = {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
     transition: "opacity 0.2s",
-    ...style,
+    ...(style as JSX.CSSProperties),
   }
 
   return (
-    <a href={href} target={target} class={cn("IconLink", className)} style={linkStyle} id={id} ref={ref}>
+    <a href={href} target={target} class={cn("IconLink", className)} style={linkStyle} id={id} ref={ref} {...rest}>
-      <Icon {...iconProps} />
+      <Icon name={name} size={size} />
     </a>
   )
 }

src/image.tsx

@@ -7,27 +7,23 @@ import { Grid } from "./grid"
 import { CodeExamples } from "./code"
 import { cn } from "./cn"
 
-export type ImageProps = {
+export type ImageProps = JSX.IntrinsicElements["img"] & {
-  src: string
-  alt?: string
   width?: number
   height?: number
   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, id, ref }) => {
+export const Image: FC<ImageProps> = (props) => {
+  const { src, alt = "", width, height, objectFit, class: className, style, id, ref, ...rest } = props
+
   const imageStyle: JSX.CSSProperties = {
     width: width ? `${width}px` : undefined,
     height: height ? `${height}px` : undefined,
     objectFit: objectFit,
-    ...style,
+    ...(style as JSX.CSSProperties),
   }
 
-  return <img src={src} alt={alt} class={cn("Image", className)} style={imageStyle} id={id} ref={ref} />
+  return <img src={src} alt={alt} class={cn("Image", className)} style={imageStyle} id={id} ref={ref} {...rest} />
 }
 
 export const Test = () => {

src/section.tsx

@@ -4,18 +4,16 @@ import { VStack } from "./stack"
 import type { TailwindSize } from "./types"
 import { CodeExamples } from "./code"
 
-type SectionProps = PropsWithChildren & {
+type SectionProps = JSX.IntrinsicElements["div"] & PropsWithChildren & {
   gap?: TailwindSize
   maxWidth?: string
-  class?: string
-  style?: JSX.CSSProperties
-  id?: string
-  ref?: any
 }
 
-export const Section: FC<SectionProps> = ({ children, gap = 8, maxWidth, class: className, style, id, ref }) => {
+export const Section: FC<SectionProps> = (props) => {
+  const { children, gap = 8, maxWidth, class: className, style, id, ref, ...rest } = props
+
   return (
-    <VStack gap={gap} class={className} style={{ padding: "24px", maxWidth, ...style }} id={id} ref={ref}>
+    <VStack gap={gap} class={className} style={{ padding: "24px", maxWidth, ...(style as JSX.CSSProperties) }} id={id} ref={ref} {...rest}>
       {children}
     </VStack>
   )

src/stack.tsx

@@ -9,61 +9,66 @@ import { CodeExamples } from "./code"
 import { cn } from "./cn"
 
 export const VStack: FC<VStackProps> = (props) => {
+  const { v, h, wrap, gap, maxWidth, rows, class: className, style, id, ref, children, ...rest } = props
   return (
     <Stack
       direction="col"
-      mainAxis={props.v}
+      mainAxis={v}
-      crossAxis={props.h}
+      crossAxis={h}
-      wrap={props.wrap}
+      wrap={wrap}
-      gap={props.gap}
+      gap={gap}
-      maxWidth={props.maxWidth}
+      maxWidth={maxWidth}
-      gridSizes={props.rows}
+      gridSizes={rows}
       componentName="VStack"
-      class={props.class}
+      class={className}
-      style={props.style}
+      style={style}
-      id={props.id}
+      id={id}
-      ref={props.ref}
+      ref={ref}
+      {...rest}
     >
-      {props.children}
+      {children}
     </Stack>
   )
 }
 
 export const HStack: FC<HStackProps> = (props) => {
+  const { h, v, wrap, gap, maxWidth, cols, class: className, style, id, ref, children, ...rest } = props
   return (
     <Stack
       direction="row"
-      mainAxis={props.h}
+      mainAxis={h}
-      crossAxis={props.v}
+      crossAxis={v}
-      wrap={props.wrap}
+      wrap={wrap}
-      gap={props.gap}
+      gap={gap}
-      maxWidth={props.maxWidth}
+      maxWidth={maxWidth}
-      gridSizes={props.cols}
+      gridSizes={cols}
       componentName="HStack"
-      class={props.class}
+      class={className}
-      style={props.style}
+      style={style}
-      id={props.id}
+      id={id}
-      ref={props.ref}
+      ref={ref}
+      {...rest}
     >
-      {props.children}
+      {children}
     </Stack>
   )
 }
 
 const Stack: FC<StackProps> = (props) => {
-  const gapPx = props.gap ? props.gap * 4 : 0
+  const { direction, mainAxis, crossAxis, wrap, gap, maxWidth, gridSizes, componentName, class: className, style, id, ref, children, ...rest } = props
+  const gapPx = gap ? gap * 4 : 0
 
   // Use CSS Grid when gridSizes (cols/rows) is provided
-  if (props.gridSizes) {
+  if (gridSizes) {
-    const gridTemplate = props.gridSizes.map(size => `${size}fr`).join(" ")
+    const gridTemplate = gridSizes.map(size => `${size}fr`).join(" ")
 
     const gridStyles: JSX.CSSProperties = {
       display: "grid",
       gap: `${gapPx}px`,
-      maxWidth: props.maxWidth,
+      maxWidth: maxWidth,
     }
 
-    if (props.direction === "row") {
+    if (direction === "row") {
       gridStyles.gridTemplateColumns = gridTemplate
     } else {
       gridStyles.gridTemplateRows = gridTemplate
@@ -71,35 +76,35 @@ const Stack: FC<StackProps> = (props) => {
 
     const combinedStyles = {
       ...gridStyles,
-      ...props.style,
+      ...(style as JSX.CSSProperties),
     }
 
-    return <div class={cn(props.componentName, props.class)} style={combinedStyles} id={props.id} ref={props.ref}>{props.children}</div>
+    return <div class={cn(componentName, className)} style={combinedStyles} id={id} ref={ref} {...rest}>{children}</div>
   }
 
   // Default flexbox behavior
   const baseStyles: JSX.CSSProperties = {
     display: "flex",
-    flexDirection: props.direction === "row" ? "row" : "column",
+    flexDirection: direction === "row" ? "row" : "column",
-    flexWrap: props.wrap ? "wrap" : "nowrap",
+    flexWrap: wrap ? "wrap" : "nowrap",
     gap: `${gapPx}px`,
-    maxWidth: props.maxWidth,
+    maxWidth: maxWidth,
   }
 
-  if (props.mainAxis) {
+  if (mainAxis) {
-    baseStyles.justifyContent = getJustifyContent(props.mainAxis)
+    baseStyles.justifyContent = getJustifyContent(mainAxis)
   }
 
-  if (props.crossAxis) {
+  if (crossAxis) {
-    baseStyles.alignItems = getAlignItems(props.crossAxis)
+    baseStyles.alignItems = getAlignItems(crossAxis)
   }
 
   const combinedStyles = {
     ...baseStyles,
-    ...props.style,
+    ...(style as JSX.CSSProperties),
   }
 
-  return <div class={cn(props.componentName, props.class)} style={combinedStyles} id={props.id} ref={props.ref}>{props.children}</div>
+  return <div class={cn(componentName, className)} style={combinedStyles} id={id} ref={ref} {...rest}>{children}</div>
 }
 
 export const Test = () => {
@@ -284,7 +289,7 @@ export const Test = () => {
 
 type StackDirection = "row" | "col"
 
-type StackProps = {
+type StackProps = JSX.IntrinsicElements["div"] & {
   direction: StackDirection
   mainAxis?: string
   crossAxis?: string
@@ -293,24 +298,15 @@ type StackProps = {
   maxWidth?: string
   gridSizes?: number[] // cols for row, rows for col
   componentName?: string // for data-howl attribute
-  class?: string
-  style?: JSX.CSSProperties
-  id?: string
-  ref?: any
-  children?: any
 }
 
 type MainAxisOpts = "start" | "center" | "end" | "between" | "around" | "evenly"
 type CrossAxisOpts = "start" | "center" | "end" | "stretch" | "baseline"
 
-type CommonStackProps = PropsWithChildren & {
+type CommonStackProps = JSX.IntrinsicElements["div"] & PropsWithChildren & {
   wrap?: boolean
   gap?: TailwindSize
   maxWidth?: string
-  class?: string
-  style?: JSX.CSSProperties
-  id?: string
-  ref?: any
 }
 
 type VStackProps = CommonStackProps & {

src/text.tsx

@@ -3,40 +3,40 @@ import type { FC, PropsWithChildren, JSX } from "hono/jsx"
 import { CodeExamples } from "./code"
 import { cn } from "./cn"
 
-type TextProps = PropsWithChildren & {
+export const H1: FC<JSX.IntrinsicElements["h1"]> = (props) => {
-  class?: string
+  const { children, class: className, style, id, ref, ...rest } = props
-  style?: JSX.CSSProperties
+  return <h1 class={cn("H1", className)} style={{ fontSize: "24px", fontWeight: "bold", ...(style as JSX.CSSProperties) }} id={id} ref={ref} {...rest}>{children}</h1>
-  id?: string
-  ref?: any
 }
 
-export const H1: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
+export const H2: FC<JSX.IntrinsicElements["h2"]> = (props) => {
-  <h1 class={cn("H1", className)} style={{ fontSize: "24px", fontWeight: "bold", ...style }} id={id} ref={ref}>{children}</h1>
+  const { children, class: className, style, id, ref, ...rest } = props
-)
+  return <h2 class={cn("H2", className)} style={{ fontSize: "20px", fontWeight: "bold", ...(style as JSX.CSSProperties) }} id={id} ref={ref} {...rest}>{children}</h2>
+}
 
-export const H2: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
+export const H3: FC<JSX.IntrinsicElements["h3"]> = (props) => {
-  <h2 class={cn("H2", className)} style={{ fontSize: "20px", fontWeight: "bold", ...style }} id={id} ref={ref}>{children}</h2>
+  const { children, class: className, style, id, ref, ...rest } = props
-)
+  return <h3 class={cn("H3", className)} style={{ fontSize: "18px", fontWeight: "600", ...(style as JSX.CSSProperties) }} id={id} ref={ref} {...rest}>{children}</h3>
+}
 
-export const H3: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
+export const H4: FC<JSX.IntrinsicElements["h4"]> = (props) => {
-  <h3 class={cn("H3", className)} style={{ fontSize: "18px", fontWeight: "600", ...style }} id={id} ref={ref}>{children}</h3>
+  const { children, class: className, style, id, ref, ...rest } = props
-)
+  return <h4 class={cn("H4", className)} style={{ fontSize: "16px", fontWeight: "600", ...(style as JSX.CSSProperties) }} id={id} ref={ref} {...rest}>{children}</h4>
+}
 
-export const H4: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
+export const H5: FC<JSX.IntrinsicElements["h5"]> = (props) => {
-  <h4 class={cn("H4", className)} style={{ fontSize: "16px", fontWeight: "600", ...style }} id={id} ref={ref}>{children}</h4>
+  const { children, class: className, style, id, ref, ...rest } = props
-)
+  return <h5 class={cn("H5", className)} style={{ fontSize: "14px", fontWeight: "500", ...(style as JSX.CSSProperties) }} id={id} ref={ref} {...rest}>{children}</h5>
+}
 
-export const H5: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
+export const Text: FC<JSX.IntrinsicElements["p"]> = (props) => {
-  <h5 class={cn("H5", className)} style={{ fontSize: "14px", fontWeight: "500", ...style }} id={id} ref={ref}>{children}</h5>
+  const { children, class: className, style, id, ref, ...rest } = props
-)
+  return <p class={cn("Text", className)} style={{ fontSize: "14px", ...(style as JSX.CSSProperties) }} id={id} ref={ref} {...rest}>{children}</p>
+}
 
-export const Text: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
+export const SmallText: FC<JSX.IntrinsicElements["p"]> = (props) => {
-  <p class={cn("Text", className)} style={{ fontSize: "14px", ...style }} id={id} ref={ref}>{children}</p>
+  const { children, class: className, style, id, ref, ...rest } = props
-)
+  return <p class={cn("SmallText", className)} style={{ fontSize: "12px", ...(style as JSX.CSSProperties) }} id={id} ref={ref} {...rest}>{children}</p>
-
+}
-export const SmallText: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
-  <p class={cn("SmallText", className)} style={{ fontSize: "12px", ...style }} id={id} ref={ref}>{children}</p>
-)
 
 export const Test = () => {
   return (