@targoninc/jess-components 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./src/Components";
+export * from "./src/Types";

package/dist/index.js

@@ -0,0 +1,1006 @@
+// @bun
+// node_modules/@targoninc/jess/dist/index.js
+class Signal {
+  _callbacks = [];
+  _value;
+  _values = {};
+  constructor(initialValue, updateCallback = () => {}) {
+    this._value = initialValue;
+    this._values = {};
+    this._callbacks.push(updateCallback);
+  }
+  boolValues(assignments = {}) {
+    for (let key in assignments) {
+      if (assignments[key]) {
+        this._values[key] = signal(this._value ? assignments[key].onTrue : assignments[key].onFalse);
+      }
+    }
+    this.subscribe((newValue) => {
+      for (let key in assignments) {
+        if (assignments[key] && this._values[key]) {
+          this._values[key].value = newValue ? assignments[key].onTrue : assignments[key].onFalse;
+        }
+      }
+    });
+    return this._values;
+  }
+  unsubscribeAll() {
+    this._callbacks = [];
+  }
+  subscribe(callback) {
+    this._callbacks.push(callback);
+  }
+  unsubscribe(callback) {
+    const index = this._callbacks.indexOf(callback);
+    if (index >= 0) {
+      this._callbacks.splice(index, 1);
+    }
+  }
+  get onUpdate() {
+    return this._callbacks;
+  }
+  set onUpdate(callback) {
+    this._callbacks.push(callback);
+  }
+  get value() {
+    return this._value;
+  }
+  set value(value) {
+    const changed = this._value !== value;
+    this._value = value;
+    this._callbacks.forEach((callback) => callback(value, changed));
+  }
+}
+function signal(initialValue) {
+  return new Signal(initialValue);
+}
+function compute(valueFunction, ...signals) {
+  const getValues = () => signals.map((s) => s.value);
+  let out = signal(valueFunction(...getValues()));
+  for (const sig of signals) {
+    sig.subscribe((_, changed) => {
+      if (!changed) {
+        return;
+      }
+      out.value = valueFunction(...getValues());
+    });
+  }
+  return out;
+}
+function isSignal(obj) {
+  return obj?.constructor === Signal;
+}
+function asSignal(obj) {
+  return obj;
+}
+function create(tag) {
+  return new DomNode(tag);
+}
+function nullElement() {
+  return create("div").styles("display", "none").build();
+}
+function when(condition, element, inverted = false) {
+  function getElement() {
+    if (element.constructor === Function) {
+      return element();
+    }
+    return element;
+  }
+  if (condition && condition.constructor === Signal) {
+    const state = signal(condition.value ? inverted ? nullElement() : getElement() : inverted ? getElement() : nullElement());
+    condition.subscribe((newValue) => {
+      if (newValue) {
+        state.value = inverted ? nullElement() : getElement();
+      } else {
+        state.value = inverted ? getElement() : nullElement();
+      }
+    });
+    return state;
+  } else {
+    return condition ? inverted ? nullElement() : getElement() : inverted ? getElement() : nullElement();
+  }
+}
+function signalMap(arrayState, wrapper, callback, renderSequentially = false) {
+  if (!arrayState.subscribe) {
+    throw new Error("arrayState argument for signalMap is not a signal");
+  }
+  const update = (newValue) => {
+    if (!newValue) {
+      return;
+    }
+    const tmp = [...newValue].filter((t) => !!t);
+    const children = [];
+    if (renderSequentially) {
+      wrapper.overwriteChildren();
+      for (let i = 0;i < tmp.length; i++) {
+        wrapper.children(callback(tmp[i], i));
+      }
+    } else {
+      for (let i = 0;i < tmp.length; i++) {
+        children.push(callback(tmp[i], i));
+      }
+      wrapper.overwriteChildren(...children);
+    }
+  };
+  arrayState.subscribe(update);
+  update(arrayState.value);
+  return wrapper.build();
+}
+function stack(message, debugInfo = {}) {
+  console.warn(message, { debugInfo }, new Error().stack);
+}
+function isValidElement(element) {
+  const validTypes = [HTMLElement, SVGElement];
+  return validTypes.some((type) => element instanceof type);
+}
+class DomNode {
+  _node;
+  svgTags = ["svg", "g", "circle", "ellipse", "line", "path", "polygon", "polyline", "rect", "text", "textPath", "tspan"];
+  constructor(tag) {
+    if (this.svgTags.includes(tag)) {
+      this._node = document.createElementNS("http://www.w3.org/2000/svg", tag);
+    } else {
+      this._node = document.createElement(tag);
+    }
+  }
+  applyGenericConfig(config) {
+    return this.classes("jess", ...config.classes ?? []).attributes(...config.attributes ?? []).styles(...config.styles ?? []).id(config.id).css(config.css).title(config.title).role(config.role);
+  }
+  build() {
+    if (!isValidElement(this._node)) {
+      throw new Error("Invalid node type. Must be an HTMLElement or a subclass.");
+    }
+    return this._node;
+  }
+  wrapProperty(property, value) {
+    if (value && value.constructor === Signal) {
+      const sig = value;
+      this._node[property] = sig.value;
+      sig.subscribe((newValue) => {
+        this._node[property] = newValue;
+      });
+    } else {
+      if (value !== undefined && value !== null) {
+        this._node[property] = value;
+      }
+    }
+  }
+  class(className) {
+    return this.classes(className);
+  }
+  classes(...classes) {
+    for (let cls of classes) {
+      if (cls && cls.constructor === Signal) {
+        const sig = cls;
+        let previousValue = sig.value;
+        this._node.classList.add(previousValue);
+        sig.subscribe((newValue) => {
+          this._node.classList.remove(previousValue);
+          this._node.classList.add(newValue);
+          previousValue = newValue;
+        });
+      } else {
+        this._node.classList.add(cls);
+      }
+    }
+    return this;
+  }
+  attribute(key, value) {
+    return this.attributes(key, value);
+  }
+  attributes(...attributes) {
+    if (arguments.length % 2 === 0) {
+      for (let i = 0;i < arguments.length; i += 2) {
+        const key = arguments[i];
+        const value = arguments[i + 1];
+        if (value && value.constructor === Signal) {
+          this._node.setAttribute(key, value.value);
+          value.onUpdate = (newValue) => {
+            this._node.setAttribute(key, newValue);
+          };
+        } else {
+          this._node.setAttribute(key, value);
+        }
+      }
+    } else {
+      throw new Error("Invalid number of arguments for attributes. Must be even. (key, value, key, value, ...)");
+    }
+    return this;
+  }
+  id(id) {
+    this.wrapProperty("id", id);
+    return this;
+  }
+  text(text) {
+    this.wrapProperty("innerText", text);
+    return this;
+  }
+  title(title) {
+    this.wrapProperty("title", title);
+    return this;
+  }
+  html(html) {
+    this.wrapProperty("innerHTML", html);
+    return this;
+  }
+  children(...children) {
+    for (let node of arguments) {
+      if (isValidElement(node)) {
+        this._node.appendChild(node);
+      } else if (node instanceof DomNode) {
+        this._node.appendChild(node.build());
+      } else if (node && node.constructor === Signal) {
+        node.subscribe((newValue) => {
+          if (isValidElement(newValue)) {
+            this._node.replaceChild(newValue, childNode);
+            childNode = newValue;
+          } else if (newValue.constructor === DomNode) {
+            this._node.replaceChild(newValue.build(), childNode);
+            childNode = newValue.build();
+          } else {
+            stack("Unexpected value for child. Must be an HTMLElement or a subclass.", newValue);
+          }
+        });
+        let childNode = node.value;
+        if (!isValidElement(childNode)) {
+          childNode = nullElement();
+        }
+        this._node.appendChild(childNode);
+      } else if (node && node.constructor === Array) {
+        for (let childNode of node) {
+          this.children(childNode);
+        }
+      } else {
+        if (node) {
+          stack("Invalid node type. Must be an HTMLElement or a subclass.", node);
+        }
+      }
+    }
+    return this;
+  }
+  overwriteChildren() {
+    this._node.innerHTML = "";
+    return this.children(...arguments);
+  }
+  child() {
+    return this.children(...arguments);
+  }
+  role(role) {
+    this.wrapProperty("role", role);
+    return this;
+  }
+  prefixedAttribute(prefix, key, value) {
+    return this.attributes(`${prefix}-${key}`, value);
+  }
+  aria(key, value) {
+    return this.prefixedAttribute("aria", key, value);
+  }
+  data(key, value) {
+    return this.prefixedAttribute("data", key, value);
+  }
+  onclick(callback) {
+    this._node.onclick = callback;
+    return this;
+  }
+  onauxclick(callback) {
+    this._node.onauxclick = callback;
+    return this;
+  }
+  ondblclick(callback) {
+    this._node.ondblclick = callback;
+    return this;
+  }
+  onchange(callback) {
+    this._node.onchange = callback;
+    return this;
+  }
+  oninput(callback) {
+    this._node.oninput = callback;
+    return this;
+  }
+  onkeydown(callback) {
+    this._node.onkeydown = callback;
+    return this;
+  }
+  onkeyup(callback) {
+    this._node.onkeyup = callback;
+    return this;
+  }
+  onmousedown(callback) {
+    this._node.onmousedown = callback;
+    return this;
+  }
+  onmouseup(callback) {
+    this._node.onmouseup = callback;
+    return this;
+  }
+  onmouseover(callback) {
+    this._node.onmouseover = callback;
+    return this;
+  }
+  onmouseout(callback) {
+    this._node.onmouseout = callback;
+    return this;
+  }
+  onmousemove(callback) {
+    this._node.onmousemove = callback;
+    return this;
+  }
+  onmouseenter(callback) {
+    this._node.onmouseenter = callback;
+    return this;
+  }
+  onmouseleave(callback) {
+    this._node.onmouseleave = callback;
+    return this;
+  }
+  oncontextmenu(callback) {
+    this._node.oncontextmenu = callback;
+    return this;
+  }
+  onwheel(callback) {
+    this._node.onwheel = callback;
+    return this;
+  }
+  ondrag(callback) {
+    this._node.ondrag = callback;
+    return this;
+  }
+  ondragend(callback) {
+    this._node.ondragend = callback;
+    return this;
+  }
+  ondragenter(callback) {
+    this._node.ondragenter = callback;
+    return this;
+  }
+  ondragstart(callback) {
+    this._node.ondragstart = callback;
+    return this;
+  }
+  ondragleave(callback) {
+    this._node.ondragleave = callback;
+    return this;
+  }
+  ondragover(callback) {
+    this._node.ondragover = callback;
+    return this;
+  }
+  ondrop(callback) {
+    this._node.ondrop = callback;
+    return this;
+  }
+  onscroll(callback) {
+    this._node.onscroll = callback;
+    return this;
+  }
+  onfocus(callback) {
+    this._node.onfocus = callback;
+    return this;
+  }
+  onblur(callback) {
+    this._node.onblur = callback;
+    return this;
+  }
+  onresize(callback) {
+    this._node.onresize = callback;
+    return this;
+  }
+  onselect(callback) {
+    this._node.onselect = callback;
+    return this;
+  }
+  onsubmit(callback) {
+    this._node.onsubmit = callback;
+    return this;
+  }
+  onreset(callback) {
+    this._node.onreset = callback;
+    return this;
+  }
+  onabort(callback) {
+    this._node.onabort = callback;
+    return this;
+  }
+  onerror(callback) {
+    this._node.onerror = callback;
+    return this;
+  }
+  oncanplay(callback) {
+    this._node.oncanplay = callback;
+    return this;
+  }
+  oncanplaythrough(callback) {
+    this._node.oncanplaythrough = callback;
+    return this;
+  }
+  ondurationchange(callback) {
+    this._node.ondurationchange = callback;
+    return this;
+  }
+  onemptied(callback) {
+    this._node.onemptied = callback;
+    return this;
+  }
+  onended(callback) {
+    this._node.onended = callback;
+    return this;
+  }
+  onloadeddata(callback) {
+    this._node.onloadeddata = callback;
+    return this;
+  }
+  onloadedmetadata(callback) {
+    this._node.onloadedmetadata = callback;
+    return this;
+  }
+  onloadstart(callback) {
+    this._node.onloadstart = callback;
+    return this;
+  }
+  onpause(callback) {
+    this._node.onpause = callback;
+    return this;
+  }
+  onplay(callback) {
+    this._node.onplay = callback;
+    return this;
+  }
+  onplaying(callback) {
+    this._node.onplaying = callback;
+    return this;
+  }
+  onprogress(callback) {
+    this._node.onprogress = callback;
+    return this;
+  }
+  onratechange(callback) {
+    this._node.onratechange = callback;
+    return this;
+  }
+  onseeked(callback) {
+    this._node.onseeked = callback;
+    return this;
+  }
+  onseeking(callback) {
+    this._node.onseeking = callback;
+    return this;
+  }
+  onstalled(callback) {
+    this._node.onstalled = callback;
+    return this;
+  }
+  onsuspend(callback) {
+    this._node.onsuspend = callback;
+    return this;
+  }
+  ontimeupdate(callback) {
+    this._node.ontimeupdate = callback;
+    return this;
+  }
+  onvolumechange(callback) {
+    this._node.onvolumechange = callback;
+    return this;
+  }
+  onwaiting(callback) {
+    this._node.onwaiting = callback;
+    return this;
+  }
+  oncopy(callback) {
+    this._node.oncopy = callback;
+    return this;
+  }
+  oncut(callback) {
+    this._node.oncut = callback;
+    return this;
+  }
+  onpaste(callback) {
+    this._node.onpaste = callback;
+    return this;
+  }
+  onanimationstart(callback) {
+    this._node.onanimationstart = callback;
+    return this;
+  }
+  onanimationend(callback) {
+    this._node.onanimationend = callback;
+    return this;
+  }
+  onanimationiteration(callback) {
+    this._node.onanimationiteration = callback;
+    return this;
+  }
+  ontransitionend(callback) {
+    this._node.ontransitionend = callback;
+    return this;
+  }
+  on(eventName, callback) {
+    this._node.addEventListener(eventName, callback);
+    return this;
+  }
+  open(open) {
+    this.wrapProperty("open", open);
+    return this;
+  }
+  src(src) {
+    this.wrapProperty("src", src);
+    return this;
+  }
+  alt(alt) {
+    this.wrapProperty("alt", alt);
+    return this;
+  }
+  css(css) {
+    if (!css) {
+      return this;
+    }
+    for (const [key, value] of Object.entries(css)) {
+      this.styles(key, value);
+    }
+    return this;
+  }
+  style(key, value) {
+    return this.styles(key, value);
+  }
+  styles(...styles) {
+    if (arguments.length % 2 === 0) {
+      for (let i = 0;i < arguments.length; i += 2) {
+        const key = arguments[i];
+        const value = arguments[i + 1];
+        if (key.constructor !== String) {
+          throw new Error("Invalid key type for styles. Must be a string.");
+        }
+        if (value && value.constructor === Signal) {
+          this._node.style[key] = value.value;
+          value.onUpdate = (newValue) => {
+            this._node.style[key] = newValue;
+          };
+        } else {
+          this._node.style[key] = value;
+        }
+      }
+    } else {
+      throw new Error("Invalid number of arguments for styles. Must be even. (key, value, key, value, ...)");
+    }
+    return this;
+  }
+  width(width) {
+    this.wrapProperty("width", width);
+    return this;
+  }
+  height(height) {
+    this.wrapProperty("height", height);
+    return this;
+  }
+  type(type) {
+    this.wrapProperty("type", type);
+    return this;
+  }
+  name(name) {
+    this.wrapProperty("name", name);
+    return this;
+  }
+  value(value) {
+    this.wrapProperty("value", value);
+    return this;
+  }
+  placeholder(placeholder) {
+    this.wrapProperty("placeholder", placeholder);
+    return this;
+  }
+  for(forId) {
+    this.wrapProperty("for", forId);
+    return this;
+  }
+  checked(checked) {
+    this.wrapProperty("checked", checked);
+    return this;
+  }
+  disabled(disabled) {
+    this.wrapProperty("disabled", disabled);
+    return this;
+  }
+  selected(selected) {
+    this.wrapProperty("selected", selected);
+    return this;
+  }
+  href(href) {
+    this.wrapProperty("href", href);
+    return this;
+  }
+  target(target) {
+    this.wrapProperty("target", target);
+    return this;
+  }
+  rel(rel) {
+    this.wrapProperty("rel", rel);
+    return this;
+  }
+  required(required) {
+    this.wrapProperty("required", required);
+    return this;
+  }
+  multiple(multiple) {
+    this.wrapProperty("multiple", multiple);
+    return this;
+  }
+  accept(accept) {
+    this.wrapProperty("accept", accept);
+    return this;
+  }
+  acceptCharset(acceptCharset) {
+    this.wrapProperty("acceptCharset", acceptCharset);
+    return this;
+  }
+  action(action) {
+    this.wrapProperty("action", action);
+    return this;
+  }
+  autocomplete(autocomplete) {
+    this.wrapProperty("autocomplete", autocomplete);
+    return this;
+  }
+  enctype(enctype) {
+    this.wrapProperty("enctype", enctype);
+    return this;
+  }
+  method(method) {
+    this.wrapProperty("method", method);
+    return this;
+  }
+  novalidate(novalidate) {
+    this.wrapProperty("novalidate", novalidate);
+    return this;
+  }
+}
+var InputType;
+((InputType2) => {
+  InputType2["button"] = "button";
+  InputType2["checkbox"] = "checkbox";
+  InputType2["color"] = "color";
+  InputType2["date"] = "date";
+  InputType2["datetimelocal"] = "datetime-local";
+  InputType2["email"] = "email";
+  InputType2["file"] = "file";
+  InputType2["hidden"] = "hidden";
+  InputType2["image"] = "image";
+  InputType2["month"] = "month";
+  InputType2["number"] = "number";
+  InputType2["password"] = "password";
+  InputType2["radio"] = "radio";
+  InputType2["range"] = "range";
+  InputType2["reset"] = "reset";
+  InputType2["search"] = "search";
+  InputType2["submit"] = "submit";
+  InputType2["tel"] = "tel";
+  InputType2["text"] = "text";
+  InputType2["time"] = "time";
+  InputType2["url"] = "url";
+  InputType2["week"] = "week";
+})(InputType ||= {});
+
+// src/src/Components.ts
+function getDisabledClass(config) {
+  let disabledClass;
+  if (isSignal(config.disabled)) {
+    disabledClass = compute((newValue) => newValue ? "disabled" : "enabled", config.disabled);
+  } else {
+    disabledClass = config.disabled ? "disabled" : "enabled";
+  }
+  return disabledClass;
+}
+function button(config) {
+  config.classes ??= [];
+  return create("button").applyGenericConfig(config).onclick(config.onclick).classes(getDisabledClass(config)).attributes("tabindex", config.tabindex ?? "0").children(when(config.icon, () => icon(config.icon)), when(config.text, () => text({
+    text: config.text
+  }))).build();
+}
+function input(config) {
+  const errors = signal([]);
+  const hasError = compute((e) => [...e].length > 0, errors);
+  const invalidClass = compute((has) => has ? "invalid" : "valid", hasError);
+  const touched = signal(false);
+  const isPassword = config.type === InputType.password;
+  const passwordClass = isPassword ? "jessc-password-input" : "_";
+  const toggleState = signal(false);
+  const configTypeSignal = config.type.constructor === Signal ? config.type : signal(config.type);
+  const actualType = compute((t) => t ? InputType.text : configTypeSignal.value, toggleState);
+  let lastChange = 0;
+  let debounceTimeout;
+  function validate(newValue) {
+    errors.value = [];
+    if (config.debounce) {
+      if (Date.now() - lastChange < config.debounce) {
+        if (debounceTimeout) {
+          clearTimeout(debounceTimeout);
+        }
+        debounceTimeout = setTimeout(() => {
+          debounceTimeout = undefined;
+          validate(newValue);
+        }, config.debounce);
+        return;
+      }
+    }
+    config.validators?.forEach(async (valFunction) => {
+      const valErrors = await valFunction(newValue);
+      if (valErrors) {
+        errors.value = errors.value.concat(valErrors);
+      }
+    });
+    if (config.required && (newValue === null || newValue === undefined || newValue === "") && touched.value) {
+      errors.value = errors.value.concat(["This field is required."]);
+    }
+  }
+  let value = config.value;
+  if (isSignal(config.value)) {
+    asSignal(config.value).subscribe(validate);
+    validate(asSignal(config.value).value);
+  } else {
+    validate(config.value);
+    value = signal(config.value ?? "");
+  }
+  return create("div").classes("flex-v", "fjsc").children(create("label").classes("flex-v", "fjsc", getDisabledClass(config)).text(config.label ?? "").for(config.title).children(create("input").classes(invalidClass, passwordClass).applyGenericConfig(config).type(actualType).value(value).accept(config.accept ?? "").required(config.required ?? false).placeholder(config.placeholder ?? "").attributes("autofocus", config.autofocus ?? "").oninput((e) => {
+    touched.value = true;
+    lastChange = Date.now();
+    if (!isSignal(config.value)) {
+      validate(e.target.value);
+    }
+    if (config.onchange) {
+      config.onchange(e.target.value);
+    }
+  }).onchange((e) => {
+    touched.value = true;
+    lastChange = Date.now();
+    if (!isSignal(config.value)) {
+      validate(e.target.value);
+    }
+    if (config.onchange) {
+      config.onchange(e.target.value);
+    }
+  }).onkeydown(config.onkeydown ?? (() => {})).name(config.name).build(), when(isPassword, eyeButton(toggleState, () => {
+    toggleState.value = !toggleState.value;
+  }))).build(), when(hasError, errorList(errors))).build();
+}
+function eyeButton(toggleState, onClick) {
+  const icon$ = compute((t) => t ? "visibility" : "visibility_off", toggleState);
+  return create("div").classes("jessc-eye-button").onclick(onClick).children(icon({
+    icon: icon$,
+    adaptive: true,
+    isUrl: false
+  })).build();
+}
+function textarea(config) {
+  const errors = signal([]);
+  const hasError = compute((e) => e.length > 0, errors);
+  const invalidClass = compute((has) => has ? "invalid" : "valid", hasError);
+  function validate(newValue) {
+    errors.value = [];
+    config.validators?.forEach(async (valFunction) => {
+      const valErrors = await valFunction(newValue);
+      if (valErrors) {
+        errors.value = errors.value.concat(valErrors);
+      }
+    });
+    if (config.required && (newValue === null || newValue === undefined || newValue === "")) {
+      errors.value = errors.value.concat(["This field is required."]);
+    }
+  }
+  if (isSignal(config.value)) {
+    asSignal(config.value).subscribe(validate);
+    validate(asSignal(config.value).value);
+  } else {
+    validate(config.value);
+  }
+  return create("div").classes("flex-v", "fjsc", ...config.classes ?? []).children(create("label").classes("flex-v", "fjsc", getDisabledClass(config)).text(config.label ?? "").for(config.name).children(create("textarea").classes(invalidClass).applyGenericConfig(config).styles("resize", config.resize ?? "vertical").value(config.value).required(config.required ?? false).placeholder(config.placeholder ?? "").attributes("autofocus", config.autofocus ?? "", "rows", config.rows?.toString() ?? "3").oninput((e) => {
+    if (!isSignal(config.value)) {
+      validate(e.target.value);
+    }
+    if (config.onchange) {
+      config.onchange(e.target.value);
+    }
+  }).onchange((e) => {
+    if (!isSignal(config.value)) {
+      validate(e.target.value);
+    }
+    if (config.onchange) {
+      config.onchange(e.target.value);
+    }
+  }).name(config.name).build()).build(), when(hasError, errorList(errors))).build();
+}
+function errorList(errors) {
+  return signalMap(errors, create("div").classes("flex-v", "fjsc", "jessc-error-list"), error);
+}
+function error(error2) {
+  return create("span").classes("jessc-error").text(error2).build();
+}
+function area(config) {
+  config.classes ??= [];
+  config.children ??= [];
+  return create(config.tag ?? "div").applyGenericConfig(config).classes("jessc-area").children(...config.children).build();
+}
+function container(config) {
+  config.classes ??= [];
+  config.children ??= [];
+  return create(config.tag ?? "div").applyGenericConfig(config).classes("jessc-container").children(...config.children).build();
+}
+function text(config) {
+  return create(config.tag ?? "span").applyGenericConfig(config).text(config.text).build();
+}
+function heading(config) {
+  return create(`h${config.level ?? 1}`).applyGenericConfig(config).text(config.text).build();
+}
+function icon(config) {
+  const icon2 = config.icon;
+  const isMaterial = !config.isUrl;
+  const iconClass = config.adaptive ? "adaptive-icon" : "static-icon";
+  const pointerClass = config.title ? "_" : "no-pointer";
+  if (isMaterial) {
+    return create("i").applyGenericConfig(config).classes(iconClass, "material-symbols-outlined", pointerClass).text(icon2).onclick(config.onclick).build();
+  }
+  return create("img").applyGenericConfig(config).classes(iconClass, pointerClass).attributes("src", icon2).onclick(config.onclick).build();
+}
+function searchableSelect(config) {
+  const options = config.options ?? signal([]);
+  const value = config.value ?? signal(null);
+  const search = signal(options.value.find((o) => o.id === value.value)?.name ?? "");
+  value.subscribe((newVal) => {
+    search.value = options.value.find((o) => o.id === newVal)?.name ?? "";
+  });
+  const optionsVisible = signal(false);
+  const filtered = signal(options.value);
+  const selectedIndex = signal(0);
+  const filter = () => {
+    selectedIndex.value = options.value.findIndex((o) => o.name.toLowerCase().includes(search.value.toLowerCase()));
+  };
+  options.subscribe(filter);
+  search.subscribe(filter);
+  filter();
+  const selectedId = signal(options.value[0]?.id ?? null);
+  const updateSelectedId = () => {
+    selectedId.value = filtered.value[selectedIndex.value]?.id;
+  };
+  selectedIndex.subscribe(updateSelectedId);
+  filtered.subscribe(updateSelectedId);
+  updateSelectedId();
+  const currentIcon = compute((vis) => vis ? "arrow_drop_up" : "arrow_drop_down", optionsVisible);
+  return create("div").applyGenericConfig(config).classes("jessc-search-select", "flex-v", "relative").children(when(config.label, create("label").classes("fjsc").text(config.label).build()), create("div").classes("flex", "jessc-search-select-visible", "fjsc").children(create("input").classes("fjsc", "jessc-search-select-input", getDisabledClass(config)).value(search).onfocus(() => {
+    optionsVisible.value = true;
+  }).onkeydown((e) => {
+    switch (e.key) {
+      case "Enter":
+        e.preventDefault();
+        e.stopPropagation();
+        const selectedOption = filtered.value[selectedIndex.value];
+        value.value = selectedOption?.id ?? value.value;
+        search.value = selectedOption?.name ?? search.value;
+        optionsVisible.value = false;
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        e.stopPropagation();
+        selectedIndex.value = (selectedIndex.value + 1) % filtered.value.length;
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        e.stopPropagation();
+        selectedIndex.value = (selectedIndex.value - 1 + filtered.value.length) % filtered.value.length;
+        break;
+      case "Escape":
+      case "Tab":
+        optionsVisible.value = false;
+        break;
+      default:
+        if (e.keyCode > 32 && e.keyCode < 126 || e.key === "Backspace") {
+          setTimeout(() => {
+            search.value = e.target.value;
+          });
+        }
+        break;
+    }
+  }).build(), create("div").classes("jessc-search-select-dropdown", getDisabledClass(config)).onclick(() => {
+    optionsVisible.value = !optionsVisible.value;
+  }).children(icon({
+    icon: currentIcon,
+    adaptive: true,
+    isUrl: false
+  })).build()).build(), when(optionsVisible, signalMap(filtered, create("div").classes("jessc-search-select-options", "flex-v"), (option) => searchSelectOption({ option, value, search, optionsVisible, selectedId })))).build();
+}
+function searchSelectOption(config) {
+  let element;
+  const selectedClass = compute((id) => {
+    element?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    return id === config.option.id ? "selected" : "_";
+  }, config.selectedId);
+  element = create("div").classes("jessc-search-select-option", "flex", "gap", "padded", selectedClass).onclick(() => {
+    config.value.value = config.option.id;
+    config.search.value = config.option.name;
+    config.optionsVisible.value = false;
+  }).children(when(config.option.image, icon({
+    icon: config.option.image ?? "",
+    isUrl: config.option.imageIsUrl,
+    adaptive: true
+  })), create("span").text(config.option.name).build()).build();
+  return element;
+}
+function checkbox(config) {
+  const errors = signal([]);
+  const hasError = compute((e) => e.length > 0, errors);
+  const invalidClass = compute((has) => has ? "invalid" : "valid", hasError);
+  function validate(newValue) {
+    errors.value = [];
+    config.validators?.forEach(async (valFunction) => {
+      const valErrors = await valFunction(newValue);
+      if (valErrors) {
+        errors.value = errors.value.concat(valErrors);
+      }
+    });
+    if (config.required && (newValue === null || newValue === undefined || newValue === false)) {
+      errors.value = errors.value.concat(["This field is required."]);
+    }
+  }
+  let checked;
+  if (isSignal(config.checked)) {
+    const sig = config.checked;
+    sig.subscribe(validate);
+    validate(sig.value);
+    checked = compute((c) => c.toString(), sig);
+  } else {
+    validate(config.checked);
+    checked = config.checked.toString();
+  }
+  return create("div").classes("flex-v", "fjsc").children(create("label").applyGenericConfig(config).classes("jessc-checkbox-container", invalidClass, getDisabledClass(config)).text(config.text).children(create("input").type(InputType.checkbox).name(config.name ?? "").id(config.name ?? "").required(config.required ?? false).checked(checked).onclick((e) => {
+    const c = e.target.checked;
+    if (!isSignal(config.checked)) {
+      validate(c);
+    }
+    config.onchange && config.onchange(c);
+  }).build(), create("span").classes("jessc-checkmark").children(when(config.checked, create("span").classes("jessc-checkmark-icon").text("\u2713").build())).build()).build(), when(hasError, errorList(errors))).build();
+}
+function toggle(config) {
+  const errors = signal([]);
+  const hasError = compute((e) => e.length > 0, errors);
+  const invalidClass = compute((has) => has ? "invalid" : "valid", hasError);
+  function validate(newValue) {
+    errors.value = [];
+    config.validators?.forEach(async (valFunction) => {
+      const valErrors = await valFunction(newValue);
+      if (valErrors) {
+        errors.value = errors.value.concat(valErrors);
+      }
+    });
+    if (config.required && (newValue === null || newValue === undefined || newValue === false)) {
+      errors.value = errors.value.concat(["This field is required."]);
+    }
+  }
+  if (isSignal(config.checked)) {
+    const sig = config.checked;
+    sig.subscribe(validate);
+    validate(sig.value);
+  } else {
+    validate(config.checked);
+  }
+  return create("div").classes("flex-v", "fjsc").children(create("label").applyGenericConfig(config).classes("flex", "gap", "align-children", invalidClass, getDisabledClass(config)).for(config.name ?? "").children(create("input").type(InputType.checkbox).classes("hidden", "jessc-slider").id(config.name ?? "").required(config.required ?? false).checked(config.checked).onclick((e) => {
+    const checked = e.target.checked;
+    if (!isSignal(config.checked)) {
+      validate(checked);
+    }
+    config.onchange && config.onchange(checked);
+  }).build(), create("div").classes("jessc-toggle-container").children(create("span").classes("jessc-toggle-slider").build()).build(), create("span").classes("jessc-toggle-text").text(config.text ?? "").build()).build(), when(hasError, errorList(errors))).build();
+}
+export {
+  toggle,
+  textarea,
+  text,
+  searchableSelect,
+  searchSelectOption,
+  input,
+  icon,
+  heading,
+  eyeButton,
+  errorList,
+  error,
+  container,
+  checkbox,
+  button,
+  area
+};

package/dist/src/Components.d.ts

@@ -0,0 +1,17 @@
+import type { BooleanConfig, ButtonConfig, ContainerConfig, HeadingConfig, IconConfig, InputConfig, SearchableSelectConfig, SelectOptionConfig, TextareaConfig, TextConfig } from "./Types.ts";
+import { type AnyElement, Signal, type StringOrSignal } from "@targoninc/jess";
+export declare function button(config: ButtonConfig): AnyElement;
+export declare function input<T>(config: InputConfig<T>): AnyElement;
+export declare function eyeButton(toggleState: Signal<boolean>, onClick: Function): AnyElement;
+export declare function textarea(config: TextareaConfig): AnyElement;
+export declare function errorList(errors: Signal<string[]>): any;
+export declare function error(error: StringOrSignal): AnyElement;
+export declare function area(config: ContainerConfig): AnyElement;
+export declare function container(config: ContainerConfig): AnyElement;
+export declare function text(config: TextConfig): AnyElement;
+export declare function heading(config: HeadingConfig): AnyElement;
+export declare function icon(config: IconConfig): AnyElement;
+export declare function searchableSelect(config: SearchableSelectConfig): AnyElement;
+export declare function searchSelectOption(config: SelectOptionConfig): any;
+export declare function checkbox(config: BooleanConfig): AnyElement;
+export declare function toggle(config: BooleanConfig): AnyElement;

package/dist/src/Types.d.ts

@@ -0,0 +1,86 @@
+import { type CssClass, DomNode, type EventHandler, type HtmlPropertyValue, InputType, Signal, type StringOrSignal, type TypeOrSignal } from "@targoninc/jess";
+type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
+type IntRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
+export interface BaseComponentConfig {
+    classes?: StringOrSignal[];
+    attributes?: StringOrSignal[];
+    styles?: StringOrSignal[];
+    id?: HtmlPropertyValue;
+    title?: HtmlPropertyValue;
+    tabindex?: HtmlPropertyValue;
+    role?: HtmlPropertyValue;
+    ariaLabel?: HtmlPropertyValue;
+    css?: CssClass;
+}
+export interface ButtonConfig extends BaseComponentConfig {
+    text?: StringOrSignal;
+    onclick: EventHandler<MouseEvent>;
+    icon?: IconConfig;
+    disabled?: TypeOrSignal<boolean>;
+}
+export type ValidatorFunction<T> = (value: T) => (string[] | null | undefined) | Promise<string[] | null | undefined>;
+export interface ChangeableConfig<T = any> extends BaseComponentConfig {
+    onchange?: (value: T) => void;
+    validators?: ValidatorFunction<T>[];
+    required?: boolean;
+    autofocus?: boolean;
+    label?: HtmlPropertyValue;
+    disabled?: TypeOrSignal<boolean>;
+}
+export interface InputConfig<T> extends ChangeableConfig<T> {
+    name: StringOrSignal;
+    type: TypeOrSignal<InputType>;
+    value: TypeOrSignal<T>;
+    placeholder?: StringOrSignal;
+    accept?: StringOrSignal;
+    onkeydown?: EventHandler<KeyboardEvent>;
+    debounce?: number;
+}
+export interface TextareaConfig extends ChangeableConfig<string> {
+    name: StringOrSignal;
+    value: StringOrSignal;
+    placeholder?: StringOrSignal;
+    rows?: TypeOrSignal<number>;
+    resize?: "both" | "horizontal" | "vertical" | "none";
+}
+export interface ContainerConfig extends BaseComponentConfig {
+    tag: string;
+    children: (DomNode)[];
+}
+export interface TextConfig extends BaseComponentConfig {
+    text: HtmlPropertyValue;
+    tag: string;
+}
+export interface IconConfig extends BaseComponentConfig {
+    icon: StringOrSignal;
+    adaptive?: boolean;
+    isUrl?: boolean;
+    onclick?: Function;
+}
+export interface SelectOption extends BaseComponentConfig {
+    image?: string;
+    imageIsUrl?: boolean;
+    name: any;
+    id: any;
+}
+export interface SelectOptionConfig extends BaseComponentConfig {
+    option: SelectOption;
+    value: Signal<any>;
+    search: Signal<string>;
+    optionsVisible: Signal<boolean>;
+    selectedId: Signal<any>;
+}
+export interface SearchableSelectConfig<T = string> extends ChangeableConfig<T> {
+    options: Signal<SelectOption[]>;
+    value: Signal<T>;
+}
+export interface HeadingConfig extends BaseComponentConfig {
+    level?: IntRange<1, 6>;
+    text: StringOrSignal;
+}
+export interface BooleanConfig extends ChangeableConfig<boolean> {
+    text: HtmlPropertyValue;
+    checked: TypeOrSignal<boolean>;
+    name?: HtmlPropertyValue;
+}
+export {};

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@targoninc/jess-components",
+  "type": "module",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/targoninc/jess-components.git"
+  },
+  "scripts": {
+    "build": "bun build ./src/index.ts --outdir ./dist --target bun --format esm && tsc",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "bun run build"
+  },
+  "dependencies": {
+    "@targoninc/jess": "^0.0.6"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "bun-plugin-dtsx": "^0.21.9"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  }
+}