@symbo.ls/uikit 2.11.75 → 2.11.77

package/dist/index.cjs.js

@@ -14099,7 +14099,13 @@ var IconText = {
     props: {},
     if: ({ props: props7 }) => props7.name || props7.icon
   },
-  text: ({ props: props7 }) => props7.text
+  text: ({ props: props7 }) => props7.text,
+  ".reversed": {
+    props: { flow: "row-reverse" }
+  },
+  ".vertical": {
+    props: { flow: "column" }
+  }
 };
 
 // Button/index.js
@@ -14241,7 +14247,7 @@ var DialogFooter = {
     extend: Button,
     props: {
       theme: "primary @dark .color-only",
-      fontSize: "Z1",
+      fontSize: "Z",
       textTransform: "uppercase",
       background: "transparent",
       "&": {
@@ -14265,18 +14271,59 @@ var DialogFooter = {
 
 // Datepicker/index.js
 var import_headless_datepicker = __toESM(require_headless_datepicker());
-var calendar = new import_headless_datepicker.HeadlessDatepicker.Calendar({
-  calendarMode: "exact"
-});
-var extractMonthDays = (data) => {
-  const result = [];
-  data.weeks.forEach((week) => {
-    week.dates.forEach((date) => {
-      result.push(date);
-    });
-  });
-  return result;
+
+// Datepicker/days.js
+var DatePickerDay = {
+  extend: Button,
+  state: true,
+  props: ({ state, key }) => {
+    const isSelected = state.parent.activeDay === parseInt(key) + 1;
+    const gridColumnStart = 7 - state.parent.weekItems.weeks[0].dates.length;
+    return {
+      isSelected,
+      textAlign: "center",
+      fontSize: "Z1",
+      round: "100%",
+      height: "B1",
+      aspectRatio: "1/1",
+      lineHeight: ".9",
+      background: "transparent",
+      theme: "secondary @dark .color",
+      text: parseInt(key) + 1,
+      ":first-child": {
+        style: { gridColumnStart }
+      },
+      ".isSelected": { theme: "primary" },
+      "!isSelected": {
+        ":hover": { theme: "secondary" },
+        ":nth-child(7n-1), &:nth-child(7n)": { opacity: ".5" }
+      }
+    };
+  },
+  on: {
+    click: (event, element, state) => {
+      state.parent.parent.update({
+        active: state.parse()
+      });
+      console.log(state);
+    }
+  }
 };
+var DatePickerGrid = {
+  extend: Grid,
+  props: {
+    columns: "repeat(7, 1fr)",
+    minWidth: "100%",
+    gap: "W2",
+    padding: "- Z"
+  },
+  childExtend: DatePickerDay,
+  $setStateCollection: (el, s) => {
+    return s.days;
+  }
+};
+
+// Datepicker/years.js
 var DatePickerYears = {
   tag: "aside",
   props: {
@@ -14362,6 +14409,8 @@ var DatePickerYears = {
     }
   }
 };
+
+// Datepicker/months.js
 var DatePickerMonthsSlider = {
   extend: Flex,
   props: {
@@ -14450,6 +14499,8 @@ var DatePickerMonthsSlider = {
   },
   Button_right: { icon: "arrowRight" }
 };
+
+// Datepicker/weekdays.js
 var DatePickerWeekDays = {
   extend: Grid,
   props: {
@@ -14479,54 +14530,19 @@ var DatePickerWeekDays = {
     { text: "Su" }
   ]
 };
-var DatePickerDay = {
-  extend: Button,
-  state: true,
-  props: ({ state, key }) => {
-    const isSelected = state.parent.activeDay === parseInt(key) + 1;
-    const gridColumnStart = 7 - state.parent.weekItems.weeks[0].dates.length;
-    return {
-      isSelected,
-      textAlign: "center",
-      fontSize: "Z1",
-      round: "100%",
-      height: "B1",
-      aspectRatio: "1/1",
-      lineHeight: ".9",
-      background: "transparent",
-      theme: "secondary @dark .color",
-      text: parseInt(key) + 1,
-      ":first-child": {
-        style: { gridColumnStart }
-      },
-      ".isSelected": { theme: "primary" },
-      "!isSelected": {
-        ":hover": { theme: "secondary" },
-        ":nth-child(7n-1), &:nth-child(7n)": { opacity: ".5" }
-      }
-    };
-  },
-  on: {
-    click: (event, element, state) => {
-      state.parent.parent.update({
-        active: state.parse()
-      });
-      console.log(state);
-    }
-  }
-};
-var DatePickerGrid = {
-  extend: Grid,
-  props: {
-    columns: "repeat(7, 1fr)",
-    minWidth: "100%",
-    gap: "W2",
-    padding: "- Z"
-  },
-  childExtend: DatePickerDay,
-  $setStateCollection: (el, s) => {
-    return s.days;
-  }
+
+// Datepicker/index.js
+var calendar = new import_headless_datepicker.HeadlessDatepicker.Calendar({
+  calendarMode: "exact"
+});
+var extractMonthDays = (data) => {
+  const result = [];
+  data.weeks.forEach((week) => {
+    week.dates.forEach((date) => {
+      result.push(date);
+    });
+  });
+  return result;
 };
 var monthNumbersContainer = {
   props: {
@@ -14576,7 +14592,7 @@ var monthNumbersContainer = {
 };
 var props = {
   yearRange: [1993, 2023],
-  maxHeight: "318px",
+  maxHeight: "G+B",
   boxSize: "fit-content fit-content",
   style: {
     button: {
@@ -14862,25 +14878,12 @@ var templateDefault = {
   boxSize: "fit-content fit-content",
   ":hover": { background: "#252527" },
   input: {
+    display: "none",
     ":checked + div": {
-      background: "#0474F2",
+      theme: "primary",
       border: "none"
     },
-    ":checked + div > svg": { opacity: "1" },
-    display: "none"
-  },
-  checkbox: {
-    align: "center center",
-    border: "1px solid #E9E9EA",
-    boxSize: "B B",
-    round: "Y",
-    Icon: {
-      height: "Z Z2",
-      color: "white",
-      name: "check",
-      opacity: "0",
-      transition: "opacity .15s ease"
-    }
+    ":checked + div > svg": { opacity: "1" }
   }
 };
 var Checkbox = {
@@ -14890,11 +14893,34 @@ var Checkbox = {
     attr: {
       type: "checkbox",
       checked: ({ parent }) => parent.props.checked
+    },
+    on: {
+      render: ({ parent, node: node2 }) => {
+        const { indeterminate } = parent.props;
+        console.log(indeterminate);
+        node2.indeterminate = indeterminate;
+      },
+      update: ({ parent, node: node2 }) => {
+        const { indeterminate } = parent.props;
+        console.log(indeterminate);
+        node2.indeterminate = indeterminate;
+      }
     }
   },
-  checkbox: {
-    extend: "Flex",
-    Icon: {}
+  Flex: {
+    props: {
+      align: "center center",
+      border: "1px solid #E9E9EA",
+      boxSize: "B B",
+      round: "Y"
+    },
+    Icon: {
+      height: "Z Z2",
+      color: "white",
+      name: "check",
+      opacity: "0",
+      transition: "opacity .15s ease"
+    }
   }
 };
 var CheckBoxWithLabel = {
@@ -14911,7 +14937,7 @@ var CheckBoxWithLabel = {
 // Form/Radio.js
 var templateDefault2 = {
   input: { ":checked + div > div": { opacity: "1" } },
-  checkbox: {
+  Flex: {
     round: "100%",
     circle: {
       boxSize: "Y2 Y2",
@@ -14926,7 +14952,7 @@ var Radio = {
   extend: Checkbox,
   props: templateDefault2,
   input: { attr: { type: "radio" } },
-  checkbox: {
+  Flex: {
     Icon: null,
     circle: {}
   }
@@ -14946,9 +14972,14 @@ var RadioWithLabel = {
 var templateDefault3 = {
   padding: "Y",
   round: "B",
-  input: { ":checked + div": { justifyContent: "flex-end", background: "#47FF09" } },
+  input: {
+    ":checked + div": {
+      justifyContent: "flex-end",
+      theme: "primary"
+    }
+  },
   ":hover > div": { opacity: "1" },
-  checkbox: {
+  Flex: {
     boxSize: "B C",
     padding: "- W",
     round: "D",
@@ -14961,9 +14992,7 @@ var templateDefault3 = {
       boxSize: "A1 A1",
       round: "100%",
       background: "white",
-      style: {
-        boxShadow: "1px 1px 8px rgba(0, 0, 0, 0.2)"
-      }
+      boxShadow: "1px, 1px, 8px, rgba(0, 0, 0, 0.2)"
     }
   }
 };
@@ -14971,7 +15000,7 @@ var ToggleSwitch = {
   extend: Checkbox,
   props: templateDefault3,
   input: {},
-  checkbox: {
+  Flex: {
     Icon: null,
     circle: {}
   }
@@ -15668,14 +15697,16 @@ var Upload = {
     round: "A",
     cursor: "pointer",
     border: "1.6px, dashed, white 0.1",
-    padding: "B B2"
+    padding: "B B2",
+    Input: {
+      position: "absolute",
+      inset: "0 0 0 0",
+      opacity: "0",
+      visibility: "hidden"
+    }
   },
   Input: {
-    type: "file",
-    position: "absolute",
-    inset: "0 0 0 0",
-    opacity: "0",
-    visibility: "hidden"
+    type: "file"
   },
   Icon: {
     name: "upload",