xote 4.3.1 → 4.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xote",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "repository": {
     "url": "https://github.com/brnrdog/xote"
   },

package/src/Xote__JSX.res

@@ -63,23 +63,76 @@ module Elements = {
   /* Helper to convert a computed function to an attributeValue */
   let computed = (f: unit => string): attributeValue => Any(f)
 
-  /* Props type for HTML elements - supports common attributes and events */
-  type props<'id, 'class, 'style, 'typ, 'value, 'placeholder, 'href, 'target, 'data> = {
-    /* Standard attributes - can be static strings or reactive values */
+  /* Props type for HTML elements - supports common attributes and events
+   * String-like attributes use polymorphic types to accept strings, signals, or computed functions
+   */
+  type props<
+    'id,
+    'class,
+    'style,
+    'typ,
+    'name,
+    'value,
+    'placeholder,
+    'min,
+    'max,
+    'step,
+    'pattern,
+    'autoComplete,
+    'accept,
+    'forAttr,
+    'href,
+    'target,
+    'src,
+    'alt,
+    'width,
+    'height,
+    'role,
+    'ariaLabel,
+  > = {
+    /* Standard attributes - can be static strings, signals, or computed values */
     id?: 'id,
     class?: 'class,
     style?: 'style,
-    /* Input attributes */
+    /* Form/Input attributes */
     @as("type") type_?: 'typ,
+    name?: 'name,
     value?: 'value,
     placeholder?: 'placeholder,
     disabled?: bool,
     checked?: bool,
+    required?: bool,
+    readOnly?: bool,
+    maxLength?: int,
+    minLength?: int,
+    min?: 'min,
+    max?: 'max,
+    step?: 'step,
+    pattern?: 'pattern,
+    autoComplete?: 'autoComplete,
+    multiple?: bool,
+    accept?: 'accept,
+    rows?: int,
+    cols?: int,
+    /* Label attributes */
+    @as("for") for_?: 'forAttr,
     /* Link attributes */
     href?: 'href,
     target?: 'target,
+    /* Image attributes */
+    src?: 'src,
+    alt?: 'alt,
+    width?: 'width,
+    height?: 'height,
+    /* Accessibility attributes */
+    role?: 'role,
+    tabIndex?: int,
+    @as("aria-label") ariaLabel?: 'ariaLabel,
+    @as("aria-hidden") ariaHidden?: bool,
+    @as("aria-expanded") ariaExpanded?: bool,
+    @as("aria-selected") ariaSelected?: bool,
     /* Data attributes */
-    data?: 'data,
+    data?: Obj.t,
     /* Event handlers */
     onClick?: Dom.event => unit,
     onInput?: Dom.event => unit,
@@ -118,10 +171,34 @@ module Elements = {
 
   /* Convert props to attrs array */
   let propsToAttrs = (
-    props: props<'id, 'class, 'style, 'typ, 'value, 'placeholder, 'href, 'target, 'data>,
+    props: props<
+      'id,
+      'class,
+      'style,
+      'typ,
+      'name,
+      'value,
+      'placeholder,
+      'min,
+      'max,
+      'step,
+      'pattern,
+      'autoComplete,
+      'accept,
+      'forAttr,
+      'href,
+      'target,
+      'src,
+      'alt,
+      'width,
+      'height,
+      'role,
+      'ariaLabel,
+    >,
   ): array<(string, Component.attrValue)> => {
     let attrs = []
 
+    /* Standard attributes */
     switch props.id {
     | Some(v) => attrs->Array.push(convertAttrValue("id", v))
     | None => ()
@@ -137,11 +214,17 @@ module Elements = {
     | None => ()
     }
 
+    /* Form/Input attributes */
     switch props.type_ {
     | Some(v) => attrs->Array.push(convertAttrValue("type", v))
     | None => ()
     }
 
+    switch props.name {
+    | Some(v) => attrs->Array.push(convertAttrValue("name", v))
+    | None => ()
+    }
+
     switch props.value {
     | Some(v) => attrs->Array.push(convertAttrValue("value", v))
     | None => ()
@@ -162,6 +245,78 @@ module Elements = {
     | _ => ()
     }
 
+    switch props.required {
+    | Some(true) => attrs->Array.push(Component.attr("required", "true"))
+    | _ => ()
+    }
+
+    switch props.readOnly {
+    | Some(true) => attrs->Array.push(Component.attr("readonly", "true"))
+    | _ => ()
+    }
+
+    switch props.maxLength {
+    | Some(v) => attrs->Array.push(Component.attr("maxlength", Int.toString(v)))
+    | None => ()
+    }
+
+    switch props.minLength {
+    | Some(v) => attrs->Array.push(Component.attr("minlength", Int.toString(v)))
+    | None => ()
+    }
+
+    switch props.min {
+    | Some(v) => attrs->Array.push(convertAttrValue("min", v))
+    | None => ()
+    }
+
+    switch props.max {
+    | Some(v) => attrs->Array.push(convertAttrValue("max", v))
+    | None => ()
+    }
+
+    switch props.step {
+    | Some(v) => attrs->Array.push(convertAttrValue("step", v))
+    | None => ()
+    }
+
+    switch props.pattern {
+    | Some(v) => attrs->Array.push(convertAttrValue("pattern", v))
+    | None => ()
+    }
+
+    switch props.autoComplete {
+    | Some(v) => attrs->Array.push(convertAttrValue("autocomplete", v))
+    | None => ()
+    }
+
+    switch props.multiple {
+    | Some(true) => attrs->Array.push(Component.attr("multiple", "true"))
+    | _ => ()
+    }
+
+    switch props.accept {
+    | Some(v) => attrs->Array.push(convertAttrValue("accept", v))
+    | None => ()
+    }
+
+    switch props.rows {
+    | Some(v) => attrs->Array.push(Component.attr("rows", Int.toString(v)))
+    | None => ()
+    }
+
+    switch props.cols {
+    | Some(v) => attrs->Array.push(Component.attr("cols", Int.toString(v)))
+    | None => ()
+    }
+
+    /* Label attributes */
+    switch props.for_ {
+    | Some(v) => attrs->Array.push(convertAttrValue("for", v))
+    | None => ()
+    }
+
+    /* Link attributes */
     switch props.href {
     | Some(v) => attrs->Array.push(convertAttrValue("href", v))
     | None => ()
@@ -172,6 +327,62 @@ module Elements = {
     | None => ()
     }
 
+    /* Image attributes */
+    switch props.src {
+    | Some(v) => attrs->Array.push(convertAttrValue("src", v))
+    | None => ()
+    }
+
+    switch props.alt {
+    | Some(v) => attrs->Array.push(convertAttrValue("alt", v))
+    | None => ()
+    }
+
+    switch props.width {
+    | Some(v) => attrs->Array.push(convertAttrValue("width", v))
+    | None => ()
+    }
+
+    switch props.height {
+    | Some(v) => attrs->Array.push(convertAttrValue("height", v))
+    | None => ()
+    }
+
+    /* Accessibility attributes */
+    switch props.role {
+    | Some(v) => attrs->Array.push(convertAttrValue("role", v))
+    | None => ()
+    }
+
+    switch props.tabIndex {
+    | Some(v) => attrs->Array.push(Component.attr("tabindex", Int.toString(v)))
+    | None => ()
+    }
+
+    switch props.ariaLabel {
+    | Some(v) => attrs->Array.push(convertAttrValue("aria-label", v))
+    | None => ()
+    }
+
+    switch props.ariaHidden {
+    | Some(true) => attrs->Array.push(Component.attr("aria-hidden", "true"))
+    | Some(false) => attrs->Array.push(Component.attr("aria-hidden", "false"))
+    | None => ()
+    }
+
+    switch props.ariaExpanded {
+    | Some(true) => attrs->Array.push(Component.attr("aria-expanded", "true"))
+    | Some(false) => attrs->Array.push(Component.attr("aria-expanded", "false"))
+    | None => ()
+    }
+
+    switch props.ariaSelected {
+    | Some(true) => attrs->Array.push(Component.attr("aria-selected", "true"))
+    | Some(false) => attrs->Array.push(Component.attr("aria-selected", "false"))
+    | None => ()
+    }
+
+    /* Data attributes */
     switch props.data {
     | Some(_dataObj) => {
         let _ = %raw(`
@@ -188,7 +399,30 @@ module Elements = {
 
   /* Convert props to events array */
   let propsToEvents = (
-    props: props<'id, 'class, 'style, 'typ, 'value, 'placeholder, 'href, 'target, 'data>,
+    props: props<
+      'id,
+      'class,
+      'style,
+      'typ,
+      'name,
+      'value,
+      'placeholder,
+      'min,
+      'max,
+      'step,
+      'pattern,
+      'autoComplete,
+      'accept,
+      'forAttr,
+      'href,
+      'target,
+      'src,
+      'alt,
+      'width,
+      'height,
+      'role,
+      'ariaLabel,
+    >,
   ): array<(string, Dom.event => unit)> => {
     let events = []
 
@@ -247,7 +481,30 @@ module Elements = {
 
   /* Extract children from props */
   let getChildren = (
-    props: props<'id, 'class, 'style, 'typ, 'value, 'placeholder, 'href, 'target, 'data>,
+    props: props<
+      'id,
+      'class,
+      'style,
+      'typ,
+      'name,
+      'value,
+      'placeholder,
+      'min,
+      'max,
+      'step,
+      'pattern,
+      'autoComplete,
+      'accept,
+      'forAttr,
+      'href,
+      'target,
+      'src,
+      'alt,
+      'width,
+      'height,
+      'role,
+      'ariaLabel,
+    >,
   ): array<element> => {
     switch props.children {
     | Some(Fragment(children)) => children
@@ -259,7 +516,30 @@ module Elements = {
   /* Create an element from a tag string and props */
   let createElement = (
     tag: string,
-    props: props<'id, 'class, 'style, 'typ, 'value, 'placeholder, 'href, 'target, 'data>,
+    props: props<
+      'id,
+      'class,
+      'style,
+      'typ,
+      'name,
+      'value,
+      'placeholder,
+      'min,
+      'max,
+      'step,
+      'pattern,
+      'autoComplete,
+      'accept,
+      'forAttr,
+      'href,
+      'target,
+      'src,
+      'alt,
+      'width,
+      'height,
+      'role,
+      'ariaLabel,
+    >,
   ): element => {
     Component.Element({
       tag,
@@ -272,17 +552,86 @@ module Elements = {
   /* JSX functions for HTML elements */
   let jsx = (
     tag: string,
-    props: props<'id, 'class, 'style, 'typ, 'value, 'placeholder, 'href, 'target, 'data>,
+    props: props<
+      'id,
+      'class,
+      'style,
+      'typ,
+      'name,
+      'value,
+      'placeholder,
+      'min,
+      'max,
+      'step,
+      'pattern,
+      'autoComplete,
+      'accept,
+      'forAttr,
+      'href,
+      'target,
+      'src,
+      'alt,
+      'width,
+      'height,
+      'role,
+      'ariaLabel,
+    >,
   ): element => createElement(tag, props)
 
   let jsxs = (
     tag: string,
-    props: props<'id, 'class, 'style, 'typ, 'value, 'placeholder, 'href, 'target, 'data>,
+    props: props<
+      'id,
+      'class,
+      'style,
+      'typ,
+      'name,
+      'value,
+      'placeholder,
+      'min,
+      'max,
+      'step,
+      'pattern,
+      'autoComplete,
+      'accept,
+      'forAttr,
+      'href,
+      'target,
+      'src,
+      'alt,
+      'width,
+      'height,
+      'role,
+      'ariaLabel,
+    >,
   ): element => createElement(tag, props)
 
   let jsxKeyed = (
     tag: string,
-    props: props<'id, 'class, 'style, 'typ, 'value, 'placeholder, 'href, 'target, 'data>,
+    props: props<
+      'id,
+      'class,
+      'style,
+      'typ,
+      'name,
+      'value,
+      'placeholder,
+      'min,
+      'max,
+      'step,
+      'pattern,
+      'autoComplete,
+      'accept,
+      'forAttr,
+      'href,
+      'target,
+      'src,
+      'alt,
+      'width,
+      'height,
+      'role,
+      'ariaLabel,
+    >,
     ~key: option<string>=?,
     _: unit,
   ): element => {
@@ -292,7 +641,30 @@ module Elements = {
 
   let jsxsKeyed = (
     tag: string,
-    props: props<'id, 'class, 'style, 'typ, 'value, 'placeholder, 'href, 'target, 'data>,
+    props: props<
+      'id,
+      'class,
+      'style,
+      'typ,
+      'name,
+      'value,
+      'placeholder,
+      'min,
+      'max,
+      'step,
+      'pattern,
+      'autoComplete,
+      'accept,
+      'forAttr,
+      'href,
+      'target,
+      'src,
+      'alt,
+      'width,
+      'height,
+      'role,
+      'ariaLabel,
+    >,
     ~key: option<string>=?,
     _: unit,
   ): element => {

package/src/Xote__JSX.res.mjs

@@ -71,13 +71,17 @@ function propsToAttrs(props) {
   if (v$3 !== undefined) {
     attrs.push(convertAttrValue("type", Primitive_option.valFromOption(v$3)));
   }
-  let v$4 = props.value;
+  let v$4 = props.name;
   if (v$4 !== undefined) {
-    attrs.push(convertAttrValue("value", Primitive_option.valFromOption(v$4)));
+    attrs.push(convertAttrValue("name", Primitive_option.valFromOption(v$4)));
   }
-  let v$5 = props.placeholder;
+  let v$5 = props.value;
   if (v$5 !== undefined) {
-    attrs.push(convertAttrValue("placeholder", Primitive_option.valFromOption(v$5)));
+    attrs.push(convertAttrValue("value", Primitive_option.valFromOption(v$5)));
+  }
+  let v$6 = props.placeholder;
+  if (v$6 !== undefined) {
+    attrs.push(convertAttrValue("placeholder", Primitive_option.valFromOption(v$6)));
   }
   let match = props.disabled;
   if (match !== undefined && match) {
@@ -87,13 +91,121 @@ function propsToAttrs(props) {
   if (match$1 !== undefined && match$1) {
     attrs.push(Xote__Component.attr("checked", "true"));
   }
-  let v$6 = props.href;
-  if (v$6 !== undefined) {
-    attrs.push(convertAttrValue("href", Primitive_option.valFromOption(v$6)));
+  let match$2 = props.required;
+  if (match$2 !== undefined && match$2) {
+    attrs.push(Xote__Component.attr("required", "true"));
   }
-  let v$7 = props.target;
+  let match$3 = props.readOnly;
+  if (match$3 !== undefined && match$3) {
+    attrs.push(Xote__Component.attr("readonly", "true"));
+  }
+  let v$7 = props.maxLength;
   if (v$7 !== undefined) {
-    attrs.push(convertAttrValue("target", Primitive_option.valFromOption(v$7)));
+    attrs.push(Xote__Component.attr("maxlength", v$7.toString()));
+  }
+  let v$8 = props.minLength;
+  if (v$8 !== undefined) {
+    attrs.push(Xote__Component.attr("minlength", v$8.toString()));
+  }
+  let v$9 = props.min;
+  if (v$9 !== undefined) {
+    attrs.push(convertAttrValue("min", Primitive_option.valFromOption(v$9)));
+  }
+  let v$10 = props.max;
+  if (v$10 !== undefined) {
+    attrs.push(convertAttrValue("max", Primitive_option.valFromOption(v$10)));
+  }
+  let v$11 = props.step;
+  if (v$11 !== undefined) {
+    attrs.push(convertAttrValue("step", Primitive_option.valFromOption(v$11)));
+  }
+  let v$12 = props.pattern;
+  if (v$12 !== undefined) {
+    attrs.push(convertAttrValue("pattern", Primitive_option.valFromOption(v$12)));
+  }
+  let v$13 = props.autoComplete;
+  if (v$13 !== undefined) {
+    attrs.push(convertAttrValue("autocomplete", Primitive_option.valFromOption(v$13)));
+  }
+  let match$4 = props.multiple;
+  if (match$4 !== undefined && match$4) {
+    attrs.push(Xote__Component.attr("multiple", "true"));
+  }
+  let v$14 = props.accept;
+  if (v$14 !== undefined) {
+    attrs.push(convertAttrValue("accept", Primitive_option.valFromOption(v$14)));
+  }
+  let v$15 = props.rows;
+  if (v$15 !== undefined) {
+    attrs.push(Xote__Component.attr("rows", v$15.toString()));
+  }
+  let v$16 = props.cols;
+  if (v$16 !== undefined) {
+    attrs.push(Xote__Component.attr("cols", v$16.toString()));
+  }
+  let v$17 = props.for;
+  if (v$17 !== undefined) {
+    attrs.push(convertAttrValue("for", Primitive_option.valFromOption(v$17)));
+  }
+  let v$18 = props.href;
+  if (v$18 !== undefined) {
+    attrs.push(convertAttrValue("href", Primitive_option.valFromOption(v$18)));
+  }
+  let v$19 = props.target;
+  if (v$19 !== undefined) {
+    attrs.push(convertAttrValue("target", Primitive_option.valFromOption(v$19)));
+  }
+  let v$20 = props.src;
+  if (v$20 !== undefined) {
+    attrs.push(convertAttrValue("src", Primitive_option.valFromOption(v$20)));
+  }
+  let v$21 = props.alt;
+  if (v$21 !== undefined) {
+    attrs.push(convertAttrValue("alt", Primitive_option.valFromOption(v$21)));
+  }
+  let v$22 = props.width;
+  if (v$22 !== undefined) {
+    attrs.push(convertAttrValue("width", Primitive_option.valFromOption(v$22)));
+  }
+  let v$23 = props.height;
+  if (v$23 !== undefined) {
+    attrs.push(convertAttrValue("height", Primitive_option.valFromOption(v$23)));
+  }
+  let v$24 = props.role;
+  if (v$24 !== undefined) {
+    attrs.push(convertAttrValue("role", Primitive_option.valFromOption(v$24)));
+  }
+  let v$25 = props.tabIndex;
+  if (v$25 !== undefined) {
+    attrs.push(Xote__Component.attr("tabindex", v$25.toString()));
+  }
+  let v$26 = props["aria-label"];
+  if (v$26 !== undefined) {
+    attrs.push(convertAttrValue("aria-label", Primitive_option.valFromOption(v$26)));
+  }
+  let match$5 = props["aria-hidden"];
+  if (match$5 !== undefined) {
+    if (match$5) {
+      attrs.push(Xote__Component.attr("aria-hidden", "true"));
+    } else {
+      attrs.push(Xote__Component.attr("aria-hidden", "false"));
+    }
+  }
+  let match$6 = props["aria-expanded"];
+  if (match$6 !== undefined) {
+    if (match$6) {
+      attrs.push(Xote__Component.attr("aria-expanded", "true"));
+    } else {
+      attrs.push(Xote__Component.attr("aria-expanded", "false"));
+    }
+  }
+  let match$7 = props["aria-selected"];
+  if (match$7 !== undefined) {
+    if (match$7) {
+      attrs.push(Xote__Component.attr("aria-selected", "true"));
+    } else {
+      attrs.push(Xote__Component.attr("aria-selected", "false"));
+    }
   }
   let _dataObj = props.data;
   if (_dataObj !== undefined) {