diff --git a/package.json b/package.json index 0681fc6..b0e2f96 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "howl", "module": "index.tsx", "type": "module", + "exports": "./src/index.tsx", "scripts": { "dev": "bun run --hot test/server.tsx" }, diff --git a/src/avatar.tsx b/src/avatar.tsx index 457c1f5..642c76c 100644 --- a/src/avatar.tsx +++ b/src/avatar.tsx @@ -35,6 +35,14 @@ export const Test = () => { return (
+ {/* API Usage Examples */} + +
<Avatar src="/user.jpg" />
+
<Avatar src="/user.jpg" size={64} />
+
<Avatar src="/user.jpg" size={48} rounded />
+
<Avatar src="/user.jpg" style={{ border: "2px solid blue" }} />
+ + {/* Size variations */}

Size Variations

diff --git a/src/box.tsx b/src/box.tsx index 0153864..8616760 100644 --- a/src/box.tsx +++ b/src/box.tsx @@ -47,6 +47,14 @@ export const GrayBox: FC = ({ export const Test = () => { return (
+ {/* API Usage Examples */} +
+
<Box>Content</Box>
+
<Box bg="#3b82f6" p={16}>Content</Box>
+
<RedBox>Content</RedBox>
+
<GrayBox>Content</GrayBox>
+
+

Box Component

diff --git a/src/button.tsx b/src/button.tsx index 431f093..0a3cff3 100644 --- a/src/button.tsx +++ b/src/button.tsx @@ -79,6 +79,14 @@ export const Button: FC = (props) => { export const Test = () => { return (
+ {/* API Usage Examples */} + +
<Button>Click Me</Button>
+
<Button variant="secondary">Secondary</Button>
+
<Button variant="outline" size="lg">Large</Button>
+
<Button onClick={handleClick}>Action</Button>
+ + {/* Variants */}

Button Variants

diff --git a/src/divider.tsx b/src/divider.tsx index b6032f1..b81d029 100644 --- a/src/divider.tsx +++ b/src/divider.tsx @@ -44,6 +44,13 @@ export const Divider: FC = ({ children, style }) => { export const Test = () => { return (
+ {/* API Usage Examples */} + +
<Divider />
+
<Divider>OR</Divider>
+
<Divider style={{ margin: "24px 0" }} />
+ +

Divider Examples

diff --git a/src/grid.tsx b/src/grid.tsx index 9ec3fe6..2b913a6 100644 --- a/src/grid.tsx +++ b/src/grid.tsx @@ -72,6 +72,14 @@ const justifyItemsMap = { export const Test = () => { return (
+ {/* API Usage Examples */} + +
<Grid cols={3}>...</Grid>
+
<Grid cols={4} gap={6}>...</Grid>
+
<Grid cols={{ sm: 1, md: 2, lg: 3 }}>...</Grid>
+
<Grid cols={2} v="center" h="center">...</Grid>
+ +

Grid Examples

diff --git a/src/icon.tsx b/src/icon.tsx index c51e81d..3f01805 100644 --- a/src/icon.tsx +++ b/src/icon.tsx @@ -72,6 +72,14 @@ export const IconLink: FC = (props) => { export const Test = () => { return (
+ {/* API Usage Examples */} + +
<Icon name="Heart" />
+
<Icon name="Star" size={8} />
+
<Icon name="Home" style={{ color: "#3b82f6" }} />
+
<IconLink name="ExternalLink" href="/link" />
+ + {/* === ICON TESTS === */} {/* Size variations */} diff --git a/src/image.tsx b/src/image.tsx index 72b29b7..e456816 100644 --- a/src/image.tsx +++ b/src/image.tsx @@ -35,6 +35,14 @@ export const Test = () => { return (
+ {/* API Usage Examples */} + +
<Image src="/photo.jpg" />
+
<Image src="/photo.jpg" width={200} height={200} />
+
<Image src="/photo.jpg" objectFit="cover" />
+
<Image src="/photo.jpg" style={{ borderRadius: "8px" }} />
+ +

Image Examples

{/* Size variations */} diff --git a/src/input.tsx b/src/input.tsx index f96ee3b..4bce523 100644 --- a/src/input.tsx +++ b/src/input.tsx @@ -72,6 +72,14 @@ export const Input: FC = (props) => { export const Test = () => { return (
+ {/* API Usage Examples */} + +
<Input placeholder="Enter name" />
+
<Input type="email" placeholder="Email" />
+
<Input>Label</Input>
+
<Input labelPosition="left">Name</Input>
+ + {/* Basic inputs */}

Basic Inputs

@@ -178,6 +186,6 @@ export const Test = () => { - +
) } diff --git a/src/placeholder.tsx b/src/placeholder.tsx index e5216c1..4c09745 100644 --- a/src/placeholder.tsx +++ b/src/placeholder.tsx @@ -37,6 +37,14 @@ export const Placeholder = { export const Test = () => { return (
+ {/* API Usage Examples */} + +
<Placeholder.Avatar />
+
<Placeholder.Avatar type="avataaars" size={64} />
+
<Placeholder.Image width={200} height={200} />
+
<Placeholder.Image seed={42} />
+ + {/* === AVATAR TESTS === */} {/* Show all available avatar styles */} @@ -48,7 +56,7 @@ export const Test = () => { {allStyles.map((style) => ( - {style} + {style} ))} @@ -189,7 +197,7 @@ export const Test = () => { - +
) } diff --git a/src/section.tsx b/src/section.tsx index 670219f..1fc089b 100644 --- a/src/section.tsx +++ b/src/section.tsx @@ -20,6 +20,14 @@ export const Section: FC = ({ children, gap = 8, maxWidth, style } export const Test = () => { return (
+ {/* API Usage Examples */} +
+
<Section>...</Section>
+
<Section gap={4}>...</Section>
+
<Section maxWidth="600px">...</Section>
+
<Section style={{ backgroundColor: "#f3f4f6" }}>...</Section>
+
+

Default Section

This is a section with default gap (8)

diff --git a/src/select.tsx b/src/select.tsx index 5e9a9e2..e0a1c87 100644 --- a/src/select.tsx +++ b/src/select.tsx @@ -130,6 +130,8 @@ export const Select: FC = (props) => { } export const Test = () => { + const options = [{ value: "1", label: "Option 1" }, { value: "2", label: "Option 2" }] + const months = [ { value: "01", label: "January" }, { value: "02", label: "February" }, @@ -161,6 +163,14 @@ export const Test = () => { return (
+ {/* API Usage Examples */} + +
<Select options={options} />
+
<Select options={options} placeholder="Choose" />
+
<Select options={options}>Label</Select>
+
<Select options={options} labelPosition="left">Label</Select>
+ + {/* Basic selects */}

Basic Selects

diff --git a/src/stack.tsx b/src/stack.tsx index f631b0f..b713b76 100644 --- a/src/stack.tsx +++ b/src/stack.tsx @@ -68,6 +68,14 @@ export const Test = () => { return (
+ {/* API Usage Examples */} + +
<VStack>...</VStack>
+
<VStack gap={4} v="center">...</VStack>
+
<HStack>...</HStack>
+
<HStack gap={6} h="between" v="center">...</HStack>
+ + {/* HStack layout matrix */}

HStack Layout

diff --git a/src/text.tsx b/src/text.tsx index a089f20..d1cf013 100644 --- a/src/text.tsx +++ b/src/text.tsx @@ -36,6 +36,14 @@ export const SmallText: FC = ({ children, style }) => ( export const Test = () => { return (
+ {/* API Usage Examples */} +
+
<H1>Heading 1</H1>
+
<H2>Heading 2</H2>
+
<Text>Regular text</Text>
+
<SmallText>Small text</SmallText>
+
+

Heading 1 (24px, bold)

Heading 2 (20px, bold)