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

class prop

Browse Source
This commit is contained in:
Chris Wanstrath 2025-11-30 08:53:25 -08:00
parent ed1e429a73
commit 31f0a2a63a
8 changed files with 38 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/avatar.tsx
View File

@ -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 = () => {

5
src/box.tsx
View File

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

5
src/divider.tsx
View File

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

5
src/grid.tsx
View File

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

5
src/image.tsx
View File

@ -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 = () => {

5
src/section.tsx
View File

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

6
src/stack.tsx
View File

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

29
src/text.tsx
View File

@ -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 = () => {