@lundal/zed-solid 0.0.9 → 0.0.11

package/dist/Message.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from 'solid-js';
+
+export type MessageProps = {
+    class?: string;
+    style?: JSX.CSSProperties;
+    type: "error" | "warning" | "info" | "success";
+    icon?: JSX.Element;
+    text: JSX.Element;
+};
+export declare function Message(props: MessageProps): JSX.Element;

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export * from './Headings.tsx';
 export * from './Icon.tsx';
 export * from './IconButton.tsx';
 export * from './Link.tsx';
+export * from './Message.tsx';
 export * from './Nav.tsx';
 export * from './NavHeader.tsx';
 export * from './NavLink.tsx';

package/dist/index.js

@@ -323,10 +323,10 @@ function mergeClasses(a, b) {
     return b;
   return void 0;
 }
-var _tmpl$$k = /* @__PURE__ */ template(`<button>`);
+var _tmpl$$l = /* @__PURE__ */ template(`<button>`);
 function Button(props) {
   return (() => {
-    var _el$ = _tmpl$$k();
+    var _el$ = _tmpl$$l();
     _el$.$$click = () => props.onClick !== "submit" && !props.busy && props.onClick();
     insert(_el$, () => props.label);
     createRenderEffect((_p$) => {
@@ -346,10 +346,10 @@ function Button(props) {
   })();
 }
 delegateEvents(["click"]);
-var _tmpl$$j = /* @__PURE__ */ template(`<div>`);
+var _tmpl$$k = /* @__PURE__ */ template(`<div>`);
 function Card(props) {
   return (() => {
-    var _el$ = _tmpl$$j();
+    var _el$ = _tmpl$$k();
     insert(_el$, () => props.children);
     createRenderEffect((_p$) => {
       var _v$ = mergeClasses("z-card", props.class), _v$2 = props.style;
@@ -363,10 +363,10 @@ function Card(props) {
     return _el$;
   })();
 }
-var _tmpl$$i = /* @__PURE__ */ template(`<div><input type=checkbox><label>`);
+var _tmpl$$j = /* @__PURE__ */ template(`<div><input type=checkbox><label>`);
 function CheckBox(props) {
   return (() => {
-    var _el$ = _tmpl$$i(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    var _el$ = _tmpl$$j(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
     _el$2.addEventListener("change", () => props.onChange(!props.value));
     insert(_el$3, () => props.label);
     createRenderEffect((_p$) => {
@@ -390,10 +390,10 @@ function CheckBox(props) {
     return _el$;
   })();
 }
-var _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>`);
+var _tmpl$$i = /* @__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 (() => {
-    var _el$ = _tmpl$$h(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$$i(), _el$2 = _el$.firstChild;
     insert(_el$2, () => props.label);
     insert(_el$, createComponent(For, {
       get each() {
@@ -445,10 +445,10 @@ function CheckBoxes(props) {
     return _el$;
   })();
 }
-var _tmpl$$g = /* @__PURE__ */ template(`<div>`);
+var _tmpl$$h = /* @__PURE__ */ template(`<div>`);
 function Column(props) {
   return (() => {
-    var _el$ = _tmpl$$g();
+    var _el$ = _tmpl$$h();
     insert(_el$, () => props.children);
     createRenderEffect((_p$) => {
       var _v$ = mergeClasses("z-column", props.class), _v$2 = props.style;
@@ -462,7 +462,7 @@ function Column(props) {
     return _el$;
   })();
 }
-var _tmpl$$f = /* @__PURE__ */ template(`<dialog>`);
+var _tmpl$$g = /* @__PURE__ */ template(`<dialog>`);
 function Dialog(props) {
   const [wasOutside, setWasOutside] = createSignal(false);
   function isOutside(e) {
@@ -482,7 +482,7 @@ function Dialog(props) {
     }, 100);
   }
   return (() => {
-    var _el$ = _tmpl$$f();
+    var _el$ = _tmpl$$g();
     _el$.$$click = (e) => {
       if (wasOutside() && isOutside(e)) {
         e.preventDefault();
@@ -512,10 +512,10 @@ function Dialog(props) {
   })();
 }
 delegateEvents(["mousedown", "click"]);
-var _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>`);
+var _tmpl$$f = /* @__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 (() => {
-    var _el$ = _tmpl$$e();
+    var _el$ = _tmpl$$f();
     insert(_el$, (() => {
       var _c$ = createMemo(() => !!props.label);
       return () => _c$() && (() => {
@@ -555,10 +555,10 @@ function Field(props) {
     return _el$;
   })();
 }
-var _tmpl$$d = /* @__PURE__ */ template(`<form>`);
+var _tmpl$$e = /* @__PURE__ */ template(`<form>`);
 function Form(props) {
   return (() => {
-    var _el$ = _tmpl$$d();
+    var _el$ = _tmpl$$e();
     _el$.addEventListener("submit", (event) => {
       event.preventDefault();
       props.onSubmit();
@@ -576,10 +576,10 @@ function Form(props) {
     return _el$;
   })();
 }
-var _tmpl$$c = /* @__PURE__ */ template(`<header><a class=z-header--app href=/><span></span></a><div class=z-header--buttons>`);
+var _tmpl$$d = /* @__PURE__ */ template(`<header><a class=z-header--app href=/><span></span></a><div class=z-header--buttons>`);
 function Header(props) {
   return (() => {
-    var _el$ = _tmpl$$c(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
+    var _el$ = _tmpl$$d(), _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);
@@ -595,10 +595,10 @@ function Header(props) {
     return _el$;
   })();
 }
-var _tmpl$$b = /* @__PURE__ */ template(`<h1>`), _tmpl$2$3 = /* @__PURE__ */ template(`<h2>`), _tmpl$3$1 = /* @__PURE__ */ template(`<h3>`);
+var _tmpl$$c = /* @__PURE__ */ template(`<h1>`), _tmpl$2$3 = /* @__PURE__ */ template(`<h2>`), _tmpl$3$1 = /* @__PURE__ */ template(`<h3>`);
 function H1(props) {
   return (() => {
-    var _el$ = _tmpl$$b();
+    var _el$ = _tmpl$$c();
     insert(_el$, () => props.children);
     createRenderEffect((_p$) => {
       var _v$ = mergeClasses("z-" + (props.lookLike ?? "h1"), props.class), _v$2 = props.style;
@@ -644,7 +644,7 @@ function H3(props) {
     return _el$3;
   })();
 }
-var _tmpl$$a = /* @__PURE__ */ template(`<svg>`), _tmpl$2$2 = /* @__PURE__ */ template(`<svg><path fill=currentColor></svg>`, false, true);
+var _tmpl$$b = /* @__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;
@@ -655,7 +655,7 @@ function Icon(props) {
     };
   });
   return (() => {
-    var _el$ = _tmpl$$a();
+    var _el$ = _tmpl$$b();
     insert(_el$, createComponent(For, {
       get each() {
         return data().paths;
@@ -680,10 +680,10 @@ function Icon(props) {
     return _el$;
   })();
 }
-var _tmpl$$9 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$$a = /* @__PURE__ */ template(`<button>`);
 function IconButton(props) {
   return (() => {
-    var _el$ = _tmpl$$9();
+    var _el$ = _tmpl$$a();
     _el$.$$click = () => !props.busy && props.onClick();
     insert(_el$, () => props.icon);
     createRenderEffect((_p$) => {
@@ -724,6 +724,64 @@ function Link(props) {
     }
   });
 }
+var faCircleCheck = {
+  prefix: "fas",
+  iconName: "circle-check",
+  icon: [512, 512, [61533, "check-circle"], "f058", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"]
+};
+var faCircleInfo = {
+  prefix: "fas",
+  iconName: "circle-info",
+  icon: [512, 512, ["info-circle"], "f05a", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"]
+};
+var faTriangleExclamation = {
+  prefix: "fas",
+  iconName: "triangle-exclamation",
+  icon: [512, 512, [9888, "exclamation-triangle", "warning"], "f071", "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"]
+};
+var faCircleXmark = {
+  prefix: "fas",
+  iconName: "circle-xmark",
+  icon: [512, 512, [61532, "times-circle", "xmark-circle"], "f057", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"]
+};
+var _tmpl$$9 = /* @__PURE__ */ template(`<div><div class=z-message--icon></div><div class=z-message--text>`);
+function Message(props) {
+  function defaultIcon() {
+    switch (props.type) {
+      case "error":
+        return createComponent(Icon, {
+          definition: faCircleXmark
+        });
+      case "warning":
+        return createComponent(Icon, {
+          definition: faTriangleExclamation
+        });
+      case "info":
+        return createComponent(Icon, {
+          definition: faCircleInfo
+        });
+      case "success":
+        return createComponent(Icon, {
+          definition: faCircleCheck
+        });
+    }
+  }
+  return (() => {
+    var _el$ = _tmpl$$9(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    insert(_el$2, () => props.icon ?? defaultIcon());
+    insert(_el$3, () => props.text);
+    createRenderEffect((_p$) => {
+      var _v$ = mergeClasses(`z-message z-message--${props.type}`, props.class), _v$2 = props.style;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+}
 var _tmpl$$8 = /* @__PURE__ */ template(`<nav>`);
 function Nav(props) {
   return (() => {
@@ -972,6 +1030,7 @@ export {
   Icon,
   IconButton,
   Link,
+  Message,
   Nav,
   NavHeader,
   NavLink,

package/dist/style.css

@@ -295,6 +295,43 @@ dialog:focus-visible {
 .z-link:focus-visible {
   outline-color: var(--z-focus);
 }
+.z-message {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border-radius: 6px;
+  background: var(--background);
+  border: 2px solid var(--border);
+}
+
+.z-message--icon {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  color: var(--border);
+}
+
+.z-message--error {
+  --background: var(--z-message-error-background);
+  --border: var(--z-message-error-border);
+}
+
+.z-message--warning {
+  --background: var(--z-message-warning-background);
+  --border: var(--z-message-warning-border);
+}
+
+.z-message--info {
+  --background: var(--z-message-info-background);
+  --border: var(--z-message-info-border);
+}
+
+.z-message--success {
+  --background: var(--z-message-success-background);
+  --border: var(--z-message-success-border);
+}
 .z-nav {
   min-width: 200px;
   padding-bottom: 12px;
@@ -580,6 +617,16 @@ dialog:focus-visible {
   --z-input-active-fill: #5252ff; /* Lc 75 */
   --z-input-error-border: #ff5252; /* Lc 60 */
   --z-input-error-fill: #cf1b1b; /* Lc 75 */
+
+  /* TODO: Tweak colors */
+  --z-message-error-border: #db3a32;
+  --z-message-error-background: #db3a3220;
+  --z-message-warning-border: #c47f2c;
+  --z-message-warning-background: #c47f2c20;
+  --z-message-info-border: #3276db;
+  --z-message-info-background: #3276db20;
+  --z-message-success-border: #21a341;
+  --z-message-success-background: #21a34120;
 }
 
 .z-theme--dark {
@@ -602,4 +649,14 @@ dialog:focus-visible {
   --z-input-active-fill: #7882ff; /* Lc 40 */
   --z-input-error-border: #db3a32; /* Lc 30 */
   --z-input-error-fill: #ff483f; /* Lc 40 */
+
+  /* TODO: Tweak colors */
+  --z-message-error-border: #db3a32;
+  --z-message-error-background: #db3a3220;
+  --z-message-warning-border: #c47f2c;
+  --z-message-warning-background: #c47f2c20;
+  --z-message-info-border: #3276db;
+  --z-message-info-background: #3276db20;
+  --z-message-success-border: #21a341;
+  --z-message-success-background: #21a34120;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lundal/zed-solid",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "license": "LGPL-3.0-or-later",
   "type": "module",
   "module": "dist/index.js",
@@ -31,6 +31,9 @@
     "@solidjs/router": "0.13",
     "solid-js": "1"
   },
+  "optionalDependencies": {
+    "@fortawesome/free-solid-svg-icons": "6"
+  },
   "dependencies": {
     "@fontsource/inter": "5"
   }