# zenpy-garden core


<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

## Garden Headers

Garden CSS is split into packages. The core packages (`bedrock` and
`variables`) are required, while component packages can be included as
needed.

The `garden_hdrs` tuple bundles all available CSS. Use it when creating
your FastHTML app:

``` python
app = FastHTML(hdrs=garden_hdrs)
```

For notebook development, see [Preview Helper](#preview-helper) which
handles this automatically.

<details open class="code-fold">
<summary>Exported source</summary>

``` python
# Core packages
bedrock_css = Link(href='https://cdn.jsdelivr.net/npm/@zendeskgarden/css-bedrock@^10/dist/index.css', rel='stylesheet')
variables_css = Link(href='https://cdn.jsdelivr.net/npm/@zendeskgarden/css-variables@^7/dist/index.css', rel='stylesheet')

# Component packages
buttons_css = Link(href='https://cdn.jsdelivr.net/npm/@zendeskgarden/css-buttons@^9/dist/index.css', rel='stylesheet')
forms_css = Link(href='https://cdn.jsdelivr.net/npm/@zendeskgarden/css-forms@^8/dist/index.css', rel='stylesheet')
tags_css = Link(href='https://cdn.jsdelivr.net/npm/@zendeskgarden/css-tags@^6/dist/index.css', rel='stylesheet')
avatars_css = Link(href='https://cdn.jsdelivr.net/npm/@zendeskgarden/css-avatars@^7/dist/index.css', rel='stylesheet')
anchors_css = Link(href='https://cdn.jsdelivr.net/npm/@zendeskgarden/css-anchors@^1/dist/index.css', rel='stylesheet')

garden_hdrs = (bedrock_css, variables_css, buttons_css, forms_css, tags_css, avatars_css, anchors_css)
```

</details>

## Component Factory

------------------------------------------------------------------------

<a
href="https://github.com/shawnemhe/zenpy-garden/blob/main/zpgarden/core.py#L39"
target="_blank" style="float:right; font-size:smaller">source</a>

### mk_compfn

>  mk_compfn (compcls, tag=None, name=None, xcls='', **compkw)

*Create a FastHTML component function for a Garden CSS class*

<table>
<colgroup>
<col style="width: 6%" />
<col style="width: 25%" />
<col style="width: 34%" />
<col style="width: 34%" />
</colgroup>
<thead>
<tr>
<th></th>
<th><strong>Type</strong></th>
<th><strong>Default</strong></th>
<th><strong>Details</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>compcls</td>
<td></td>
<td></td>
<td>Base CSS class (e.g. ‘c-btn’)</td>
</tr>
<tr>
<td>tag</td>
<td>NoneType</td>
<td>None</td>
<td>HTML tag function to use (defaults to name)</td>
</tr>
<tr>
<td>name</td>
<td>NoneType</td>
<td>None</td>
<td>Component function name (defaults to clstoname(compcls))</td>
</tr>
<tr>
<td>xcls</td>
<td>str</td>
<td></td>
<td>Extra classes to always include</td>
</tr>
<tr>
<td>compkw</td>
<td>VAR_KEYWORD</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Create a button component by passing the Garden CSS class to
[`mk_compfn`](https://shawnemhe.github.io/zenpy-garden/core.html#mk_compfn):

``` python
mk_compfn('c-btn')
```

This creates a `Btn` function that wraps the `c-btn` class. Use it like
any FastHTML component:

``` python
btn = Btn('Click me')
print(btn)
```

    <btn class="c-btn  ">Click me</btn>

Garden modifiers start with `--`. Pass them via `cls` and they’ll be
prefixed automatically:

``` python
pill = Btn('Click me', cls='--pill')
print(pill)
```

    <btn class="c-btn c-btn--pill ">Click me</btn>

## Preview Helper

------------------------------------------------------------------------

<a
href="https://github.com/shawnemhe/zenpy-garden/blob/main/zpgarden/core.py#L59"
target="_blank" style="float:right; font-size:smaller">source</a>

### mk_previewer

>  mk_previewer (app=None, cls='')

*Create a preview function for rendering Garden components in notebooks*

<table>
<colgroup>
<col style="width: 6%" />
<col style="width: 25%" />
<col style="width: 34%" />
<col style="width: 34%" />
</colgroup>
<thead>
<tr>
<th></th>
<th><strong>Type</strong></th>
<th><strong>Default</strong></th>
<th><strong>Details</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>app</td>
<td>NoneType</td>
<td>None</td>
<td>FastHTML app to use (creates one with garden_hdrs if None)</td>
</tr>
<tr>
<td>cls</td>
<td>str</td>
<td></td>
<td>CSS classes for the preview container div</td>
</tr>
</tbody>
</table>

``` python
p = mk_previewer()
p(
    Div(btn),
    Div(pill)
)
```

<iframe srcdoc=" &lt;!doctype html&gt;
 &lt;html&gt;
   &lt;head&gt;
     &lt;title&gt;FastHTML page&lt;/title&gt;
     &lt;link rel=&quot;canonical&quot; href=&quot;https://testserver/_oEjEGoPTRn2aVT6vXv4BHQ&quot;&gt;
     &lt;meta charset=&quot;utf-8&quot;&gt;
     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, viewport-fit=cover&quot;&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;https://cdn.jsdelivr.net/gh/answerdotai/fasthtml-js@1.0.12/fasthtml.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;https://cdn.jsdelivr.net/gh/answerdotai/surreal@main/surreal.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;https://cdn.jsdelivr.net/gh/gnat/css-scope-inline@main/script.js&quot;&gt;&lt;/script&gt;     &lt;link href=&quot;https://cdn.jsdelivr.net/npm/@zendeskgarden/css-bedrock@^10/dist/index.css&quot; rel=&quot;stylesheet&quot;&gt;
     &lt;link href=&quot;https://cdn.jsdelivr.net/npm/@zendeskgarden/css-variables@^7/dist/index.css&quot; rel=&quot;stylesheet&quot;&gt;
     &lt;link href=&quot;https://cdn.jsdelivr.net/npm/@zendeskgarden/css-buttons@^9/dist/index.css&quot; rel=&quot;stylesheet&quot;&gt;
     &lt;link href=&quot;https://cdn.jsdelivr.net/npm/@zendeskgarden/css-forms@^8/dist/index.css&quot; rel=&quot;stylesheet&quot;&gt;
     &lt;link href=&quot;https://cdn.jsdelivr.net/npm/@zendeskgarden/css-tags@^6/dist/index.css&quot; rel=&quot;stylesheet&quot;&gt;
     &lt;link href=&quot;https://cdn.jsdelivr.net/npm/@zendeskgarden/css-avatars@^7/dist/index.css&quot; rel=&quot;stylesheet&quot;&gt;
     &lt;link href=&quot;https://cdn.jsdelivr.net/npm/@zendeskgarden/css-anchors@^1/dist/index.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script&gt;
    function sendmsg() {
        window.parent.postMessage({height: document.documentElement.offsetHeight}, &#x27;*&#x27;);
    }
    window.onload = function() {
        sendmsg();
        document.body.addEventListener(&#x27;htmx:afterSettle&#x27;,    sendmsg);
        document.body.addEventListener(&#x27;htmx:wsAfterMessage&#x27;, sendmsg);
    };&lt;/script&gt;   &lt;/head&gt;
   &lt;body&gt;
     &lt;div class=&quot; &quot;&gt;
       &lt;div&gt;
&lt;btn class=&quot;c-btn  &quot;&gt;Click me&lt;/btn&gt;       &lt;/div&gt;
       &lt;div&gt;
&lt;btn class=&quot;c-btn c-btn--pill &quot;&gt;Click me&lt;/btn&gt;       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/body&gt;
 &lt;/html&gt;
" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe>