@symbo.ls/uikit 2.11.270 → 2.11.271

package/dist/index.cjs.js

@@ -9254,8 +9254,8 @@ var CommonFieldTemplate = {
 
 // Field/Field.js
 var Field = {
+  extend: "Flex",
   tag: "label",
-  extend: [Focusable, IconText],
   props: {
     minWidth: "F2+Z2",
     maxWidth: "F2+Z2",
@@ -9263,14 +9263,10 @@ var Field = {
     align: "center flex-start",
     gap: "Y",
     boxSizing: "border-box",
-    padding: "- A - Z2",
-    round: "Z1",
-    border: "solid, gray .45 +80",
-    borderWidth: ".8px",
     position: "relative",
-    ":focus-within": { outline: "1px solid #0474F2" },
-    Icon: {
-      fontSize: "Z2"
+    Input: {
+      padding: "Z2 B2 Z2 B",
+      flex: "1"
     },
     Button: {
       padding: "0",
@@ -9280,19 +9276,15 @@ var Field = {
     }
   },
   Input: {
-    props: {
-      fontWeight: "400",
-      padding: "0",
-      background: "rgba(0, 0, 0, 0)",
-      round: "0",
-      color: "title",
-      fontFamily: "avenir",
-      placeholder: "Placeholder",
-      flex: "1",
-      minHeight: "100%",
-      outline: "none !important",
-      "::placeholder": { color: "gray 1 +64" }
-    }
+    placeholder: "Placeholder"
+  },
+  Icon: {
+    props: ({ parent }) => ({
+      name: parent.props.icon,
+      minWidth: "A",
+      margin: "- Z1 - -C",
+      position: "relative"
+    })
   }
 };
 var FieldTemplate = {
@@ -9348,25 +9340,35 @@ var FieldWithTitleTemplate = {
 
 // Field/Search.js
 var Search = {
-  extend: Field,
   tag: "search",
   props: {
     maxWidth: "G3",
     gap: "Z",
-    theme: "dialog",
-    padding: "Z+V Z+V2"
+    onSubmit: (ev, el, s) => {
+    }
   },
   Form: {
-    SquareButton: {
-      name: "search",
-      color: "title",
-      margin: "V - - -"
+    extend: "Field",
+    props: {
+      flow: "row-reverse",
+      Input: {
+        padding: "Z2 B Z2 C"
+      },
+      Icon: {
+        margin: "- -C - Z1",
+        name: "search"
+      }
     },
     Input: {
       props: {
-        placeholder: "type a command or search",
+        type: "search",
+        placeholder: "Search",
         "::placeholder": { color: "paragraph" }
       }
+    },
+    Icon: {},
+    on: {
+      submit: (ev, el, s) => el.parent.props.onSubmit(ev, el, s)
     }
   }
 };
@@ -9815,9 +9817,8 @@ var Input = {
     theme: "field",
     fontSize: "A",
     round: "C",
-    lineHeight: 1,
-    fontFamily: "smbls",
-    padding: "Z A"
+    lineHeight: "1",
+    padding: "Z2 B"
   },
   attr: {
     pattern: ({ props: props4 }) => props4.pattern,
@@ -10000,12 +10001,13 @@ var Textarea = {
     round: "Z1",
     placeholder: "Leave us a message...",
     padding: "A",
-    theme: "transparent",
+    theme: "field",
     border: "none",
     maxWidth: "G1_default",
     minHeight: "E_default",
     width: "100%",
     height: "E1_default",
+    fontFamily: "inherit",
     style: { resize: "none" }
   },
   ".simple": {
@@ -10017,10 +10019,11 @@ var Textarea = {
   },
   ".outlined": {
     props: {
-      background: "transparent",
+      theme: "field",
+      borderWidth: "1px",
+      borderStyle: "solid",
       lineHeight: 1.4,
       placeholder: "Leave us a message...",
-      outline: "none !important",
       resize: "none"
     }
   }
@@ -10087,7 +10090,8 @@ var Button = {
     textDecoration: "none",
     lineHeight: "1",
     whiteSpace: "nowrap",
-    padding: "Z A1",
+    padding: "Z B2",
+    fontWeight: "500",
     fontFamily: "inherit",
     round: "C2"
   },
@@ -10123,12 +10127,11 @@ var FlexButton = {
     boxSize: "fit-content",
     padding: "Z2 A2",
     round: "Z1",
-    gap: "X1",
-    position: "relative"
-  },
-  Icon: {
-    props: { fontSize: "B1" }
+    gap: "Z",
+    position: "relative",
+    Icon: { fontSize: "B1" }
   },
+  Icon: {},
   Text: { text: "Button" }
 };
 var ButtonSet = {
@@ -10392,16 +10395,40 @@ var props = {
     }
   }
 };
-var Range = {
-  props,
-  tag: "input",
-  attr: { type: "range" }
-};
 var returnPropertyValue = (el, property, def) => {
   const val = el.props && el.props[property];
-  const r = (0, import_utils14.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 50;
+  const r = (0, import_utils14.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 0;
   return r + "";
 };
+var Range = {
+  props,
+  tag: "input",
+  attr: {
+    type: "range",
+    value: (el, s) => parseFloat(el.state.value || el.props.value || el.props.defaultValue),
+    min: (el, s) => returnPropertyValue(el, "min", 0),
+    max: (el, s) => returnPropertyValue(el, "max", 100),
+    step: (el, s) => returnPropertyValue(el, "step", 1)
+  },
+  on: {
+    input: (ev, el, s) => {
+      const props4 = el.props;
+      if ((0, import_utils14.isFunction)(props4.onInput)) {
+        props4.onInput(ev, el, s);
+      } else {
+        s.update({ value: parseFloat(el.node.value) });
+      }
+    },
+    change: (ev, el, s) => {
+      const props4 = el.props;
+      if ((0, import_utils14.isFunction)(props4.onChange)) {
+        props4.onChange(ev, el, s);
+      } else {
+        s.update({ value: parseFloat(el.node.value) });
+      }
+    }
+  }
+};
 var RangeWithButtons = {
   minus: {
     extend: SquareButton,
@@ -10427,13 +10454,13 @@ var RangeWithButtons = {
     tag: "span",
     text: ({ state, parent }) => {
       const unit = returnPropertyValue(parent, "unit", "");
-      return "" + (state.value || 50) + unit;
+      return "" + (state.value || state.defaultValue || 0) + unit;
     }
   },
   input: {
     extend: Range,
     attr: {
-      value: (el, s) => parseFloat(el.state.value),
+      value: (el, s) => parseFloat(s.value || s.defaultValue),
       min: (el, s) => returnPropertyValue(el.parent, "min", 0),
       max: (el, s) => returnPropertyValue(el.parent, "max", 100),
       step: (el, s) => returnPropertyValue(el.parent, "step", 1)
@@ -10917,6 +10944,8 @@ var Tab = {
     align: "center flex-start",
     position: "relative",
     padding: "Z Z1",
+    theme: "field",
+    borderRadius: "A A X2 X2",
     icon: "smile"
   },
   Icon: {},