@symbo.ls/uikit 2.11.136 → 2.11.138

package/dist/index.cjs.js

@@ -4809,9 +4809,9 @@ var require_updateState = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/state/dist/cjs/createState.js
-var require_createState = __commonJS({
-  "../../node_modules/@domql/state/dist/cjs/createState.js"(exports, module2) {
+// ../../node_modules/@domql/state/dist/cjs/create.js
+var require_create = __commonJS({
+  "../../node_modules/@domql/state/dist/cjs/create.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4830,11 +4830,12 @@ var require_createState = __commonJS({
       return to;
     };
     var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
-    var createState_exports = {};
-    __export2(createState_exports, {
+    var create_exports = {};
+    __export2(create_exports, {
+      applyInitialState: () => applyInitialState,
       createState: () => createState
     });
-    module2.exports = __toCommonJS2(createState_exports);
+    module2.exports = __toCommonJS2(create_exports);
     var import_event = require_cjs4();
     var import_utils14 = require_cjs2();
     var import_ignore = require_ignore();
@@ -4842,7 +4843,9 @@ var require_createState = __commonJS({
     var import_updateState = require_updateState();
     var import_inherit = require_inherit();
     var createState = function(element, parent, options) {
-      const skipApplyMethods = Boolean(options && options.skipApplyMethods);
+      element.state = applyInitialState(element, parent, options);
+    };
+    var applyInitialState = function(element, parent, options) {
       const objectizeState = checkForTypes(element);
       if (objectizeState === false)
         return parent.state || {};
@@ -4858,14 +4861,6 @@ var require_createState = __commonJS({
       const dependentState = applyDependentState(element, element.state);
       if (dependentState)
         element.state = dependentState;
-      if (skipApplyMethods) {
-        if (element.parent && element.parent.state) {
-          element.state.parent = element.parent.state;
-        } else {
-          element.state.parent = {};
-        }
-        return element.state;
-      }
       applyMethods(element);
       (0, import_event.triggerEventOn)("stateCreated", element);
       return element.state;
@@ -4938,7 +4933,7 @@ var require_createState = __commonJS({
       } else {
         Object.setPrototypeOf(state, proto);
       }
-      if (state.parent)
+      if (state.parent && state.parent.__children)
         state.parent.__children[element.key] = state;
     };
   }
@@ -4965,7 +4960,7 @@ var require_cjs5 = __commonJS({
     var state_exports = {};
     module2.exports = __toCommonJS2(state_exports);
     __reExport(state_exports, require_ignore(), module2.exports);
-    __reExport(state_exports, require_createState(), module2.exports);
+    __reExport(state_exports, require_create(), module2.exports);
     __reExport(state_exports, require_updateState(), module2.exports);
     __reExport(state_exports, require_methods(), module2.exports);
     __reExport(state_exports, require_inherit(), module2.exports);
@@ -9265,6 +9260,7 @@ __export(domql_exports, {
   Avatar: () => Avatar,
   AvatarBundle: () => AvatarBundle,
   AvatarChooser: () => AvatarChooser,
+  AvatarWithIndicator: () => AvatarWithIndicator,
   Block: () => Block,
   Box: () => Box,
   Br: () => Br,
@@ -9272,13 +9268,18 @@ __export(domql_exports, {
   ButtonSet: () => ButtonSet,
   Caption: () => Caption,
   Card: () => Card,
-  Chat: () => Chat,
+  CardLabel: () => CardLabel,
+  ChatUser: () => ChatUser,
+  ChatUserWithButtonSet: () => ChatUserWithButtonSet,
+  ChatUserWithNotification: () => ChatUserWithNotification,
+  ChatUserWithUploadedFile: () => ChatUserWithUploadedFile,
   CheckBoxWithLabel: () => CheckBoxWithLabel,
   Checkbox: () => Checkbox,
   Circle: () => Circle,
   CircleButton: () => CircleButton,
   Clickable: () => Clickable,
   Collection: () => Collection,
+  DateIndicator: () => DateIndicator,
   DatePicker: () => DatePicker,
   DatePickerDay: () => DatePickerDay,
   DatePickerGrid: () => DatePickerGrid,
@@ -9315,6 +9316,8 @@ __export(domql_exports, {
   IconText: () => IconText2,
   Iframe: () => Iframe,
   Img: () => Img,
+  IndicatorDot: () => IndicatorDot,
+  InfoSet: () => InfoSet,
   Input: () => Input2,
   Interaction: () => Interaction,
   Italic: () => Italic,
@@ -9324,6 +9327,7 @@ __export(domql_exports, {
   List: () => List,
   Media: () => Media,
   Notification: () => Notification,
+  NotificationAlert: () => NotificationAlert,
   NumberInput: () => NumberInput,
   Overflow: () => Overflow,
   P: () => P,
@@ -9349,6 +9353,7 @@ __export(domql_exports, {
   Subhead: () => Subhead,
   Svg: () => Svg,
   Tab: () => Tab,
+  Table: () => Table,
   Text: () => Text,
   Textarea: () => Textarea,
   Theme: () => Theme,
@@ -9369,6 +9374,7 @@ __export(domql_exports, {
   UploadProgress: () => UploadProgress,
   UploadResult: () => UploadResult,
   User: () => User,
+  Video: () => Video,
   XYZ: () => XYZ,
   calendar: () => calendar,
   getSystemTheme: () => getSystemTheme,
@@ -12057,6 +12063,57 @@ var KangorooButton = {
   childExtend: IconText
 };
 
+// Accessories/index.js
+var IndicatorDot = {
+  props: {
+    boxSize: "Y+V1",
+    background: "#04F214",
+    round: "100%",
+    border: "solid, black 0",
+    borderWidth: "1px"
+  }
+};
+var NotificationAlert = {
+  span: { props: { text: "2" } },
+  props: {
+    background: "#0474F2",
+    boxSize: "fit-content",
+    padding: "- X",
+    round: "Y+V",
+    span: {
+      fontSize: "Y",
+      color: "white"
+    }
+  }
+};
+var DateIndicator = {
+  extend: Flex,
+  days: { ...[{ props: { text: "monday" } }] },
+  time: {
+    extend: Flex,
+    hour: { props: { text: "2" } },
+    ":after": { content: ":" },
+    minutes: { props: { text: "20" } }
+  },
+  timeFormat: {
+    ...[
+      { props: { text: "am" } },
+      { props: { text: "pm", display: "none" } }
+    ]
+  },
+  props: {
+    gap: "Y",
+    childProps: {
+      fontWeight: "400",
+      color: "#A3A3A8"
+    },
+    days: { childProps: { textTransform: "capitalize" } },
+    timeFormat: {
+      textTransform: "uppercase"
+    }
+  }
+};
+
 // Avatar/index.js
 var Avatar = {
   extend: Img,
@@ -12064,13 +12121,27 @@ var Avatar = {
     display: "block",
     avatarType: "initials",
     borderRadius: "100%",
-    boxSize: "B",
+    boxSize: "A+A",
     cursor: "pointer"
   },
   attr: {
     src: ({ key, props: props6 }) => props6.src || `https://avatars.dicebear.com/api/${props6.avatarType || "adventurer-neutral"}/${props6.key || key}.svg`
   }
 };
+var AvatarWithIndicator = {
+  avatar: { extend: Avatar },
+  indicator: { extend: IndicatorDot },
+  props: {
+    boxSize: "fit-content fit-content",
+    round: "100%",
+    position: "relative",
+    indicator: {
+      position: "absolute",
+      bottom: "0",
+      right: "0"
+    }
+  }
+};
 var AvatarBundle = {
   extend: Flex,
   childExtend: {
@@ -13294,6 +13365,30 @@ var Field = {
   input: { extend: [Focusable2, Input2] }
 };
 
+// Video/index.js
+var Video = {
+  tag: "video",
+  childExtend: {
+    tag: "source",
+    attr: {
+      src: ({ props: props6 }) => props6.src,
+      controls: ({ props: props6 }) => props6.controls
+    }
+  },
+  props: {
+    controls: true
+  },
+  attr: {
+    src: ({ props: props6 }) => props6.src,
+    autoplay: ({ props: props6 }) => props6.autoplay,
+    loop: ({ props: props6 }) => props6.loop,
+    poster: ({ props: props6 }) => props6.poster,
+    muted: ({ props: props6 }) => props6.muted,
+    preload: ({ props: props6 }) => props6.preload,
+    controls: ({ props: props6 }) => props6.controls
+  }
+};
+
 // Range/index.js
 var import_utils12 = __toESM(require_cjs2());
 var import_scratch19 = __toESM(require_cjs());
@@ -14107,16 +14202,281 @@ var Steps = {
   $setPropsCollection: ({ props: props6 }) => props6.options
 };
 
+// Table/index.js
+var Table = {};
+
+// InfoSet/index.js
+var InfoSet = {
+  extend: Flex,
+  childExtend: Flex,
+  props: {
+    flow: "column",
+    childProps: {
+      title: {
+        fontSize: "Z",
+        fontWeight: "500"
+      },
+      subTitle: {
+        fontSize: "Y",
+        color: "#A3A3A8"
+      }
+    }
+  }
+};
+
+// User/index.js
+var User = {
+  extend: Flex,
+  image: { extend: AvatarWithIndicator },
+  infos: {
+    extend: InfoSet,
+    ...[
+      {
+        title: { props: { text: "Erin Schleifer" } },
+        subTitle: { caption: { props: { text: "email@symbols.com" } } }
+      }
+    ]
+  },
+  props: {
+    boxSize: "fit-content",
+    align: "center flex-start",
+    gap: "A",
+    infos: {
+      childProps: {
+        flow: "column",
+        subTitle: { caption: { whiteSpace: "nowrap" } }
+      }
+    }
+  }
+};
+
 // Chat/index.js
-var Chat = {
-  text: "chat here"
+var ChatUser = {
+  extend: User,
+  image: {},
+  infos: {
+    ...[
+      {
+        title: {},
+        subTitle: {
+          extend: DateIndicator,
+          caption: null
+        }
+      },
+      { chatText: { props: { text: "Can you please review the latest design?" } } }
+    ]
+  },
+  props: {
+    align: "flex-start flex-start",
+    image: { fontSize: "C" },
+    infos: {
+      gap: "Y",
+      childProps: {
+        flow: "row",
+        align: "center space-between",
+        chatText: {
+          fontSize: "Z",
+          background: "#252527",
+          padding: "Z+W2 A+W",
+          round: "Z+W2"
+        }
+      }
+    }
+  }
+};
+var ChatUserWithUploadedFile = {
+  extend: ChatUser,
+  image: {},
+  infos: {
+    ...[
+      {},
+      {
+        chatText: null,
+        uploadedFile: {
+          extend: UploadResult,
+          FileIcon: {},
+          Flex: {
+            H6: { text: "File.jpg" },
+            caption: {
+              extend: Flex,
+              value: { props: { text: "1.2" } },
+              mb: "mb"
+            },
+            Captions: null,
+            UploadProgress: null
+          }
+        }
+      }
+    ]
+  },
+  props: {
+    infos: {
+      childProps: {
+        uploadedFile: {
+          background: "#1C1C1F",
+          minWidth: "G",
+          align: "center flex-start",
+          FileIcon: {
+            background: "#3F3F43",
+            boxSize: `${54 / 16}em`,
+            Icon: { fontSize: `${24 / 16}em` }
+          },
+          Flex: {
+            H6: {
+              fontSize: "Z",
+              fontWeight: "500"
+            },
+            caption: {
+              fontSize: "Z",
+              color: "#A3A3A8",
+              textTransform: "uppercase"
+            }
+          }
+        }
+      }
+    }
+  }
+};
+var ChatUserWithButtonSet = {
+  extend: User,
+  image: {},
+  infos: {
+    ...[
+      {
+        title: { props: { text: "Justin Dorwart" } },
+        subTitle: { caption: { props: { text: "Active now" } } }
+      },
+      {
+        extend: ButtonSet,
+        ...[
+          { props: { icon: "phone" } },
+          { props: { icon: "video" } },
+          { props: { icon: "info" } }
+        ]
+      }
+    ]
+  },
+  props: {
+    background: "#1C1C1F",
+    padding: "A B",
+    round: "A",
+    image: { fontSize: `${24 / 16}em` },
+    infos: {
+      flow: "row",
+      gap: "D",
+      alignItems: "center",
+      childProps: {
+        "&:last-child": {
+          flow: "row",
+          gap: "Y+V",
+          "& > button": {
+            boxSize: "B+Y",
+            background: "#141416",
+            round: "A",
+            "& > svg": {
+              fontSize: "C",
+              color: "white"
+            }
+          }
+        },
+        title: {
+          fontSize: "C",
+          fontWeight: "700"
+        }
+      }
+    }
+  }
+};
+var ChatUserWithNotification = {
+  extend: ChatUser,
+  image: {},
+  infos: {
+    ...[
+      {
+        title: {},
+        subTitle: { days: null }
+      },
+      {
+        chatText: { props: { text: "Hey team, Ive finished the re..." } },
+        notification: { extend: NotificationAlert }
+      }
+    ]
+  },
+  props: {
+    background: "#141416",
+    padding: "A",
+    round: "Z",
+    infos: {
+      childProps: {
+        ":last-child": { gap: "D" },
+        title: { fontSize: "A" },
+        chatText: {
+          padding: "0",
+          background: "transparent",
+          color: "#A3A3A8",
+          minWidth: "F+C",
+          maxWidth: "F+C"
+        }
+      }
+    }
+  }
 };
 
 // Card/index.js
-var Card = {};
-
-// User/index.js
-var User = {};
+var CardLabel = {
+  props: {
+    text: "-2.902x",
+    fontSize: "Y",
+    background: "#F4454E",
+    boxSize: "fit-content fit-content",
+    padding: "W Y",
+    round: "Y"
+  }
+};
+var Card = {
+  extend: InfoSet,
+  heading: {
+    title: { props: { text: "Total crypto assets" } },
+    icon: { extend: Icon, props: { name: "arrowUpRight" } }
+  },
+  content: {
+    extend: Flex,
+    amount: { props: { text: "$ 12,759" } },
+    percent: {
+      extend: CardLabel,
+      props: { text: "+ 8.8%" }
+    }
+  },
+  footer: {
+    subTitle: {
+      extend: Flex,
+      caption: { props: { text: "Last update:" } },
+      span: { props: { text: "an hour ago" } }
+    }
+  },
+  props: {
+    minWidth: "G",
+    maxWidth: "G",
+    padding: "A",
+    round: "Z+V",
+    gap: "Y",
+    style: { background: "linear-gradient(to right, rgba(4, 116, 242, 1), rgba(0, 48, 103, 1))" },
+    childProps: {
+      alignItems: "center",
+      title: { fontWeight: "700" },
+      icon: { fontSize: "C", color: "#A3A3A8" },
+      amount: { fontSize: `${24 / 16}em`, fontWeight: "700" },
+      percent: { padding: "Y Z", background: "#04040466" },
+      subTitle: {
+        gap: "Y",
+        caption: { color: "rgba(224, 224, 226, 1)" },
+        span: { color: "rgba(233, 233, 234, 1)" }
+      }
+    },
+    heading: { justifyContent: "space-between" },
+    content: { gap: "Y" }
+  }
+};
 /*! Bundled license information:
 
 moment/moment.js: