@lundal/zed-solid 0.0.3 → 0.0.5

package/dist/Button.d.ts

@@ -5,6 +5,6 @@ export type ButtonProps = {
     busy?: boolean;
     type: "primary" | "secondary" | "tertiary";
     label: string;
-    onClick: () => void;
+    onClick: "submit" | (() => void);
 };
 export declare function Button(props: ButtonProps): JSX.Element;

package/dist/{App.d.ts → Page.d.ts}

@@ -1,9 +1,9 @@
 import { JSX } from "solid-js";
-export type AppProps = {
+export type PageProps = {
     class?: string;
     style?: JSX.CSSProperties;
     layout: "3";
     theme: "light" | "dark";
     children: JSX.Element;
 };
-export declare function App(props: AppProps): JSX.Element;
+export declare function Page(props: PageProps): JSX.Element;

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-export * from "./App.tsx";
 export * from "./Button.tsx";
 export * from "./Card.tsx";
 export * from "./CheckBox.tsx";
@@ -15,6 +14,7 @@ export * from "./Link.tsx";
 export * from "./Nav.tsx";
 export * from "./NavHeader.tsx";
 export * from "./NavLink.tsx";
+export * from "./Page.tsx";
 export * from "./RadioButtons.tsx";
 export * from "./Row.tsx";
 export * from "./Select.tsx";

package/dist/index.js

@@ -312,48 +312,33 @@ function mergeClasses(a, b) {
     return b;
   return void 0;
 }
-const _tmpl$$k = /* @__PURE__ */ template(`<div>`);
-function App(props) {
-  return (() => {
-    const _el$ = _tmpl$$k();
-    insert(_el$, () => props.children);
-    createRenderEffect((_p$) => {
-      const _v$ = mergeClasses(`z-app z-app--layout-${props.layout} z-theme--${props.theme}`, props.class), _v$2 = props.style;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
-      return _p$;
-    }, {
-      _v$: void 0,
-      _v$2: void 0
-    });
-    return _el$;
-  })();
-}
-const _tmpl$$j = /* @__PURE__ */ template(`<button>`);
+const _tmpl$$k = /* @__PURE__ */ template(`<button>`);
 function Button(props) {
   return (() => {
-    const _el$ = _tmpl$$j();
-    _el$.$$click = () => !props.busy && props.onClick();
+    const _el$ = _tmpl$$k();
+    _el$.$$click = () => props.onClick !== "submit" && !props.busy && props.onClick();
     insert(_el$, () => props.label);
     createRenderEffect((_p$) => {
-      const _v$ = mergeClasses(`z-button z-button--${props.type}`, props.class), _v$2 = props.style, _v$3 = props.busy;
+      const _v$ = mergeClasses(`z-button z-button--${props.type}`, props.class), _v$2 = props.style, _v$3 = props.busy, _v$4 = props.onClick === "submit" ? "submit" : "button";
       _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
       _p$._v$2 = style(_el$, _v$2, _p$._v$2);
       _v$3 !== _p$._v$3 && setAttribute(_el$, "aria-busy", _p$._v$3 = _v$3);
+      _v$4 !== _p$._v$4 && setAttribute(_el$, "type", _p$._v$4 = _v$4);
       return _p$;
     }, {
       _v$: void 0,
       _v$2: void 0,
-      _v$3: void 0
+      _v$3: void 0,
+      _v$4: void 0
     });
     return _el$;
   })();
 }
 delegateEvents(["click"]);
-const _tmpl$$i = /* @__PURE__ */ template(`<div>`);
+const _tmpl$$j = /* @__PURE__ */ template(`<div>`);
 function Card(props) {
   return (() => {
-    const _el$ = _tmpl$$i();
+    const _el$ = _tmpl$$j();
     insert(_el$, () => props.children);
     createRenderEffect((_p$) => {
       const _v$ = mergeClasses("z-card", props.class), _v$2 = props.style;
@@ -367,10 +352,10 @@ function Card(props) {
     return _el$;
   })();
 }
-const _tmpl$$h = /* @__PURE__ */ template(`<div><input type="checkbox"><label>`);
+const _tmpl$$i = /* @__PURE__ */ template(`<div><input type="checkbox"><label>`);
 function CheckBox(props) {
   return (() => {
-    const _el$ = _tmpl$$h(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    const _el$ = _tmpl$$i(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
     _el$2.addEventListener("change", () => props.onChange(!props.value));
     insert(_el$3, () => props.label);
     createRenderEffect((_p$) => {
@@ -394,10 +379,10 @@ function CheckBox(props) {
     return _el$;
   })();
 }
-const _tmpl$$g = /* @__PURE__ */ template(`<fieldset><legend>`), _tmpl$2$5 = /* @__PURE__ */ template(`<div class="z-checkbox"><input type="checkbox"><label>`), _tmpl$3$3 = /* @__PURE__ */ template(`<div class="z-error">`), _tmpl$4$2 = /* @__PURE__ */ template(`<div class="z-error-placeholder">`);
+const _tmpl$$h = /* @__PURE__ */ template(`<fieldset><legend>`), _tmpl$2$5 = /* @__PURE__ */ template(`<div class="z-checkbox"><input type="checkbox"><label>`), _tmpl$3$3 = /* @__PURE__ */ template(`<div class="z-error">`), _tmpl$4$2 = /* @__PURE__ */ template(`<div class="z-error-placeholder">`);
 function CheckBoxes(props) {
   return (() => {
-    const _el$ = _tmpl$$g(), _el$2 = _el$.firstChild;
+    const _el$ = _tmpl$$h(), _el$2 = _el$.firstChild;
     insert(_el$2, () => props.label);
     insert(_el$, createComponent(For, {
       get each() {
@@ -449,10 +434,10 @@ function CheckBoxes(props) {
     return _el$;
   })();
 }
-const _tmpl$$f = /* @__PURE__ */ template(`<div>`);
+const _tmpl$$g = /* @__PURE__ */ template(`<div>`);
 function Column(props) {
   return (() => {
-    const _el$ = _tmpl$$f();
+    const _el$ = _tmpl$$g();
     insert(_el$, () => props.children);
     createRenderEffect((_p$) => {
       const _v$ = mergeClasses("z-column", props.class), _v$2 = props.style;
@@ -466,7 +451,7 @@ function Column(props) {
     return _el$;
   })();
 }
-const _tmpl$$e = /* @__PURE__ */ template(`<dialog>`);
+const _tmpl$$f = /* @__PURE__ */ template(`<dialog>`);
 function Dialog(props) {
   const [wasOutside, setWasOutside] = createSignal(false);
   function isOutside(e) {
@@ -486,7 +471,7 @@ function Dialog(props) {
     }, 100);
   }
   return (() => {
-    const _el$ = _tmpl$$e();
+    const _el$ = _tmpl$$f();
     _el$.$$click = (e) => {
       if (wasOutside() && isOutside(e)) {
         e.preventDefault();
@@ -516,10 +501,10 @@ function Dialog(props) {
   })();
 }
 delegateEvents(["mousedown", "click"]);
-const _tmpl$$d = /* @__PURE__ */ template(`<div>`), _tmpl$2$4 = /* @__PURE__ */ template(`<label>`), _tmpl$3$2 = /* @__PURE__ */ template(`<div class="z-error">`), _tmpl$4$1 = /* @__PURE__ */ template(`<div class="z-error-placeholder">`);
+const _tmpl$$e = /* @__PURE__ */ template(`<div>`), _tmpl$2$4 = /* @__PURE__ */ template(`<label>`), _tmpl$3$2 = /* @__PURE__ */ template(`<div class="z-error">`), _tmpl$4$1 = /* @__PURE__ */ template(`<div class="z-error-placeholder">`);
 function Field(props) {
   return (() => {
-    const _el$ = _tmpl$$d();
+    const _el$ = _tmpl$$e();
     insert(_el$, (() => {
       const _c$ = createMemo(() => !!props.label);
       return () => _c$() && (() => {
@@ -559,10 +544,10 @@ function Field(props) {
     return _el$;
   })();
 }
-const _tmpl$$c = /* @__PURE__ */ template(`<div>`);
+const _tmpl$$d = /* @__PURE__ */ template(`<form>`);
 function Form(props) {
   return (() => {
-    const _el$ = _tmpl$$c();
+    const _el$ = _tmpl$$d();
     _el$.addEventListener("submit", (event) => {
       event.preventDefault();
       props.onSubmit();
@@ -580,10 +565,10 @@ function Form(props) {
     return _el$;
   })();
 }
-const _tmpl$$b = /* @__PURE__ */ template(`<header><a class="z-header--app" href="/"><span></span></a><div class="z-header--buttons">`);
+const _tmpl$$c = /* @__PURE__ */ template(`<header><a class="z-header--app" href="/"><span></span></a><div class="z-header--buttons">`);
 function Header(props) {
   return (() => {
-    const _el$ = _tmpl$$b(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
+    const _el$ = _tmpl$$c(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
     insert(_el$2, () => props.appIcon, _el$3);
     insert(_el$3, () => props.appName);
     insert(_el$4, () => props.children);
@@ -599,10 +584,10 @@ function Header(props) {
     return _el$;
   })();
 }
-const _tmpl$$a = /* @__PURE__ */ template(`<h1>`), _tmpl$2$3 = /* @__PURE__ */ template(`<h2>`), _tmpl$3$1 = /* @__PURE__ */ template(`<h3>`);
+const _tmpl$$b = /* @__PURE__ */ template(`<h1>`), _tmpl$2$3 = /* @__PURE__ */ template(`<h2>`), _tmpl$3$1 = /* @__PURE__ */ template(`<h3>`);
 function H1(props) {
   return (() => {
-    const _el$ = _tmpl$$a();
+    const _el$ = _tmpl$$b();
     insert(_el$, () => props.children);
     createRenderEffect((_p$) => {
       const _v$ = mergeClasses("z-" + (props.lookLike ?? "h1"), props.class), _v$2 = props.style;
@@ -648,7 +633,7 @@ function H3(props) {
     return _el$3;
   })();
 }
-const _tmpl$$9 = /* @__PURE__ */ template(`<svg>`), _tmpl$2$2 = /* @__PURE__ */ template(`<svg><path fill="currentColor"></svg>`, false, true);
+const _tmpl$$a = /* @__PURE__ */ template(`<svg>`), _tmpl$2$2 = /* @__PURE__ */ template(`<svg><path fill="currentColor"></svg>`, false, true);
 function Icon(props) {
   const data = createMemo(() => {
     const [width, height, , , paths] = props.definition.icon;
@@ -659,7 +644,7 @@ function Icon(props) {
     };
   });
   return (() => {
-    const _el$ = _tmpl$$9();
+    const _el$ = _tmpl$$a();
     insert(_el$, createComponent(For, {
       get each() {
         return data().paths;
@@ -684,10 +669,10 @@ function Icon(props) {
     return _el$;
   })();
 }
-const _tmpl$$8 = /* @__PURE__ */ template(`<button>`);
+const _tmpl$$9 = /* @__PURE__ */ template(`<button>`);
 function IconButton(props) {
   return (() => {
-    const _el$ = _tmpl$$8();
+    const _el$ = _tmpl$$9();
     _el$.$$click = () => !props.busy && props.onClick();
     insert(_el$, () => props.icon);
     createRenderEffect((_p$) => {
@@ -728,10 +713,10 @@ function Link(props) {
     }
   });
 }
-const _tmpl$$7 = /* @__PURE__ */ template(`<nav>`);
+const _tmpl$$8 = /* @__PURE__ */ template(`<nav>`);
 function Nav(props) {
   return (() => {
-    const _el$ = _tmpl$$7();
+    const _el$ = _tmpl$$8();
     insert(_el$, () => props.children);
     createRenderEffect((_p$) => {
       const _v$ = mergeClasses("z-nav", props.class), _v$2 = props.style;
@@ -745,10 +730,10 @@ function Nav(props) {
     return _el$;
   })();
 }
-const _tmpl$$6 = /* @__PURE__ */ template(`<div>`);
+const _tmpl$$7 = /* @__PURE__ */ template(`<div>`);
 function NavHeader(props) {
   return (() => {
-    const _el$ = _tmpl$$6();
+    const _el$ = _tmpl$$7();
     insert(_el$, () => props.children);
     createRenderEffect((_p$) => {
       const _v$ = mergeClasses("z-nav--header", props.class), _v$2 = props.style;
@@ -762,7 +747,7 @@ function NavHeader(props) {
     return _el$;
   })();
 }
-const _tmpl$$5 = /* @__PURE__ */ template(`<span>`);
+const _tmpl$$6 = /* @__PURE__ */ template(`<span>`);
 function NavLink(props) {
   return createComponent(A, {
     get ["class"]() {
@@ -779,13 +764,30 @@ function NavLink(props) {
     end: true,
     get children() {
       return [createMemo(() => props.icon), (() => {
-        const _el$ = _tmpl$$5();
+        const _el$ = _tmpl$$6();
         insert(_el$, () => props.text);
         return _el$;
       })()];
     }
   });
 }
+const _tmpl$$5 = /* @__PURE__ */ template(`<div>`);
+function Page(props) {
+  return (() => {
+    const _el$ = _tmpl$$5();
+    insert(_el$, () => props.children);
+    createRenderEffect((_p$) => {
+      const _v$ = mergeClasses(`z-page z-page--layout-${props.layout} z-theme--${props.theme}`, props.class), _v$2 = props.style;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0
+    });
+    return _el$;
+  })();
+}
 const _tmpl$$4 = /* @__PURE__ */ template(`<fieldset><legend>`), _tmpl$2$1 = /* @__PURE__ */ template(`<div class="z-radiobutton"><input type="radio"><label>`), _tmpl$3 = /* @__PURE__ */ template(`<div class="z-error">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="z-error-placeholder">`);
 function RadioButtons(props) {
   return (() => {
@@ -942,7 +944,6 @@ function TextBox(props) {
 }
 delegateEvents(["input"]);
 export {
-  App,
   Button,
   Card,
   CheckBox,
@@ -961,6 +962,7 @@ export {
   Nav,
   NavHeader,
   NavLink,
+  Page,
   RadioButtons,
   Row,
   Select,

package/dist/style.css

@@ -19,42 +19,6 @@
 *::-moz-focus-inner {
   border: none;
 }
-.z-app {
-  width: 100vw;
-  height: 100vh;
-
-  background: var(--z-background);
-  color: var(--z-text-body);
-
-  font-family: "Inter", sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-}
-
-.z-app > * {
-  overflow: auto;
-}
-
-.z-app--layout-3 {
-  display: grid;
-  grid-template-rows: auto 1fr;
-  grid-template-columns: auto 1fr;
-  grid-template-areas: "header header" "nav main";
-}
-
-.z-app--layout-3 > header {
-  grid-area: header;
-  border-bottom: 1px solid var(--z-border);
-}
-
-.z-app--layout-3 > nav {
-  grid-area: nav;
-  border-right: 1px solid var(--z-border);
-}
-
-.z-app--layout-3 > main {
-  grid-area: main;
-}
 .z-button {
   height: 36px;
   padding: 6px 24px;
@@ -381,6 +345,47 @@ dialog:focus-visible {
 .z-nav--link:focus-visible {
   outline-color: var(--z-focus);
 }
+.z-page {
+  width: 100vw;
+  height: 100vh;
+
+  background: var(--z-background);
+  color: var(--z-text-body);
+
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.z-page > * {
+  overflow: auto;
+}
+
+.z-page--layout-3 {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas: "header header header" "nav main aside";
+}
+
+.z-page--layout-3 > header {
+  grid-area: header;
+  border-bottom: 1px solid var(--z-border);
+}
+
+.z-page--layout-3 > nav {
+  grid-area: nav;
+  border-right: 1px solid var(--z-border);
+}
+
+.z-page--layout-3 > main {
+  grid-area: main;
+}
+
+.z-page--layout-3 > aside {
+  grid-area: aside;
+  border-left: 1px solid var(--z-border);
+}
 .z-radiobutton {
   display: flex;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lundal/zed-solid",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "license": "LGPL-3.0-or-later",
   "type": "module",
   "module": "dist/index.js",