defunkt/howl
1
0
Fork 1
Code Issues Pull Requests Activity

support more default props

Browse Source
This commit is contained in:
Chris Wanstrath 2026-01-07 16:59:50 -08:00
parent c622073f6c
commit 655f488834
10 changed files with 118 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/avatar.tsx
View File

@ -6,28 +6,22 @@ import { VStack, HStack } from "./stack"
import { CodeExamples } from "./code"
import { cn } from "./cn"
export type AvatarProps = {
src: string
alt?: string
export type AvatarProps = JSX.IntrinsicElements["img"] & {
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 = () => {

14
src/box.tsx
View File

@ -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

4
src/cn.ts
View File

@ -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 {
return classes.filter(Boolean).join(" ");
export function cn(...classes: (string | Promise<string> | undefined | null | false)[]): string {
return classes.filter((c): c is string => typeof c === "string").join(" ");
}

15
src/divider.tsx
View File

@ -6,19 +6,16 @@ import { VStack } from "./stack"
import { CodeExamples } from "./code"
import { cn } from "./cn"
type DividerProps = PropsWithChildren & {
class?: string
style?: JSX.CSSProperties
id?: string
ref?: any
}
type DividerProps = JSX.IntrinsicElements["div"] & PropsWithChildren
export const Divider: FC<DividerProps> = (props) => {
const { children, class: className, style, id, ref, ...rest } = props
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 && (
<>

16
src/grid.tsx
View File

@ -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 {

26
src/icon.tsx
View File

@ -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 & {
href?: string
target?: string
type IconLinkProps = JSX.IntrinsicElements["a"] & {
name: IconName
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}>
<Icon {...iconProps} />
<a href={href} target={target} class={cn("IconLink", className)} style={linkStyle} id={id} ref={ref} {...rest}>
<Icon name={name} size={size} />
</a>
)
}

16
src/image.tsx
View File

@ -7,27 +7,23 @@ import { Grid } from "./grid"
import { CodeExamples } from "./code"
import { cn } from "./cn"
export type ImageProps = {
src: string
alt?: string
export type ImageProps = JSX.IntrinsicElements["img"] & {
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 = () => {

12
src/section.tsx
View File

@ -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>
)

94
src/stack.tsx
View File

@ -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}
crossAxis={props.h}
wrap={props.wrap}
gap={props.gap}
maxWidth={props.maxWidth}
gridSizes={props.rows}
mainAxis={v}
crossAxis={h}
wrap={wrap}
gap={gap}
maxWidth={maxWidth}
gridSizes={rows}
componentName="VStack"
class={props.class}
style={props.style}
id={props.id}
ref={props.ref}
class={className}
style={style}
id={id}
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}
crossAxis={props.v}
wrap={props.wrap}
gap={props.gap}
maxWidth={props.maxWidth}
gridSizes={props.cols}
mainAxis={h}
crossAxis={v}
wrap={wrap}
gap={gap}
maxWidth={maxWidth}
gridSizes={cols}
componentName="HStack"
class={props.class}
style={props.style}
id={props.id}
ref={props.ref}
class={className}
style={style}
id={id}
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) {
const gridTemplate = props.gridSizes.map(size => `${size}fr`).join(" ")
if (gridSizes) {
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",
flexWrap: props.wrap ? "wrap" : "nowrap",
flexDirection: direction === "row" ? "row" : "column",
flexWrap: wrap ? "wrap" : "nowrap",
gap: `${gapPx}px`,
maxWidth: props.maxWidth,
maxWidth: maxWidth,
}
if (props.mainAxis) {
baseStyles.justifyContent = getJustifyContent(props.mainAxis)
if (mainAxis) {
baseStyles.justifyContent = getJustifyContent(mainAxis)
}
if (props.crossAxis) {
baseStyles.alignItems = getAlignItems(props.crossAxis)
if (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 & {

54
src/text.tsx
View File

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