@symbo.ls/uikit 2.11.65 → 2.11.70

package/dist/index.cjs.js

@@ -11415,6 +11415,7 @@ __export(domql_exports, {
   Animation: () => Animation,
   Avatar: () => Avatar,
   AvatarBundle: () => AvatarBundle,
+  AvatarChooser: () => AvatarChooser,
   Block: () => Block,
   Box: () => Box,
   Button: () => Button,
@@ -11467,6 +11468,7 @@ __export(domql_exports, {
   List: () => List,
   Media: () => Media,
   Notification: () => Notification,
+  NumberInput: () => NumberInput,
   Overflow: () => Overflow,
   P: () => P,
   Picture: () => Picture,
@@ -11492,6 +11494,8 @@ __export(domql_exports, {
   Textarea: () => Textarea,
   Theme: () => Theme,
   TimePicker: () => TimePicker,
+  TimePickerItem: () => TimePickerItem,
+  TimeSwitcher: () => TimeSwitcher,
   Timing: () => Timing,
   ToggleSwitch: () => ToggleSwitch,
   ToggleSwithWithLabel: () => ToggleSwithWithLabel,
@@ -14039,34 +14043,6 @@ var Box = {
   }
 };
 
-// Avatar/index.js
-var Avatar = {
-  extend: Img,
-  props: {
-    display: "block",
-    avatarType: "initials",
-    borderRadius: "100%",
-    boxSize: "B",
-    cursor: "pointer"
-  },
-  attr: {
-    src: ({ key, props: props7 }) => props7.src || `https://avatars.dicebear.com/api/${props7.avatarType || "adventurer-neutral"}/${props7.key || key}.svg`
-  }
-};
-var AvatarBundle = {
-  extend: Flex,
-  childExtend: {
-    extend: Avatar,
-    props: {
-      boxSize: "B1",
-      border: "0.1312em, black .85, solid",
-      ":not(:last-child)": {
-        margin: "0 -Y2 0 0"
-      }
-    }
-  }
-};
-
 // Icon/index.js
 var Icon = {
   extend: Svg,
@@ -14157,7 +14133,7 @@ var SquareButton = {
     aspectRatio: "1 / 1",
     justifyContent: "center",
     round: "Z",
-    style: { boxSizing: "content-box" }
+    boxSizing: "content-box"
   }
 };
 var CircleButton = {
@@ -14169,6 +14145,74 @@ var KangorooButton = {
   childExtend: IconText
 };
 
+// Avatar/index.js
+var Avatar = {
+  extend: Img,
+  props: {
+    display: "block",
+    avatarType: "initials",
+    borderRadius: "100%",
+    boxSize: "B",
+    cursor: "pointer"
+  },
+  attr: {
+    src: ({ key, props: props7 }) => props7.src || `https://avatars.dicebear.com/api/${props7.avatarType || "adventurer-neutral"}/${props7.key || key}.svg`
+  }
+};
+var AvatarBundle = {
+  extend: Flex,
+  childExtend: {
+    extend: Avatar,
+    props: {
+      boxSize: "B1",
+      border: "0.1312em, black .85, solid",
+      ":not(:last-child)": {
+        margin: "0 -Y2 0 0"
+      }
+    }
+  }
+};
+var AvatarChooser = {
+  extend: Button,
+  tag: "label",
+  props: {
+    round: "C",
+    gap: "Y",
+    padding: "W2 A W2 W2",
+    theme: "tertiary",
+    position: "relative",
+    cursor: "pointer"
+  },
+  Avatar: {
+    boxSize: "B1",
+    pointerEvents: "none"
+  },
+  select: {
+    props: {
+      outline: "none",
+      pointerEvents: "all",
+      appearance: "none",
+      border: "none",
+      width: "100%",
+      height: "100%",
+      background: "none",
+      color: "currentColor",
+      fontSize: "A",
+      lineHeight: 1,
+      margin: "0 0 0 -B1+X",
+      padding: "0 A 0 B1+X"
+    },
+    attr: { name: "avatar-chooser", id: "avatar-chooser" },
+    childExtend: { tag: "option", text: ({ state }) => state.text },
+    $setCollection: ({ parent }) => parent.props.options,
+    on: {
+      change: (ev, { parent }) => {
+        parent.user.update({ key: ev.target.value });
+      }
+    }
+  }
+};
+
 // ButtonSet/index.js
 var ButtonSet = {
   tag: "nav",
@@ -14361,10 +14405,7 @@ var DatePickerMonthsSlider = {
       }
     }
   },
-  leftButton: {
-    extend: Button,
-    props: { icon: "arrowLeft" }
-  },
+  Button_left: { icon: "arrowLeft" },
   Flex: {
     props: {
       flex: "1",
@@ -14408,7 +14449,7 @@ var DatePickerMonthsSlider = {
       ];
     }
   },
-  rightButton: { extend: Button, props: { icon: "arrowRight" } }
+  Button_right: { icon: "arrowRight" }
 };
 var DatePickerWeekDays = {
   extend: Grid,
@@ -14567,64 +14608,32 @@ var DatePicker = {
 };
 var DatePickerTwoColumns = {
   extend: DatePicker,
+  DatePickerYears: {},
   Flex: {
     DatePickerMonthsSlider: {
-      maxWidth: `${544 / 16}em`
+      props: {
+        maxWidth: `${544 / 16}em`
+      }
     },
     DatePickerWeekDays: {
-      maxWidth: `${544 / 16}em`
+      props: {
+        maxWidth: `${544 / 16}em`
+      }
     },
     monthNumbersContainer: {
-      maxWidth: `${544 / 16}em`
+      props: {
+        maxWidth: `${544 / 16}em`
+      }
     }
   }
 };
 
-// Input/index.js
-var Input = {
-  extend: [Focusable],
-  tag: "input",
-  props: {
-    border: "none",
-    type: "input",
-    theme: "quaternary",
-    fontSize: "A",
-    round: "C",
-    lineHeight: 1,
-    fontFamily: "smbls",
-    padding: "Z A"
-  },
-  attr: {
-    pattern: ({ props: props7 }) => props7.pattern,
-    minlength: ({ props: props7 }) => props7.minlength,
-    maxlength: ({ props: props7 }) => props7.maxlength,
-    name: ({ props: props7 }) => props7.name,
-    autocomplete: ({ props: props7 }) => props7.autocomplete,
-    placeholder: ({ props: props7 }) => props7.placeholder,
-    value: ({ props: props7, state }) => props7.value,
-    disabled: ({ props: props7 }) => props7.disabled || null,
-    readonly: ({ props: props7 }) => props7.readonly,
-    required: ({ props: props7 }) => props7.required,
-    type: ({ props: props7 }) => props7.type
-  }
-};
-
 // TimePicker/TimePickerItem.js
 var props2 = {
   align: "center center",
   flow: "column",
   gap: "X",
   style: {
-    "input[type=number]::-webkit-inner-spin-button": {
-      "-webkit-appearance": "none",
-      margin: 0
-    },
-    "input[type=number]::-webkit-outer-spin-button": {
-      "-webkit-appearance": "none",
-      margin: 0
-    },
-    "input[type=number]": { "-webkit-appearance": "textfield" },
-    "input:focus < button": { border: "3px solid red" },
     "> button": {
       padding: "0",
       background: "transparent",
@@ -14632,50 +14641,130 @@ var props2 = {
       fontSize: `${12 / 16}em`,
       display: "none"
     }
-  },
-  input: {
-    boxSize: "C C",
-    round: "Z",
-    padding: "0",
-    align: "center center",
-    textAlign: "center",
-    color: "white",
-    background: "white .15"
   }
 };
 var TimePickerItem = {
   tag: "label",
   extend: Flex,
   props: props2,
-  upButton: { extend: Button, props: { icon: "plus" } },
-  input: { extend: [Input, Flex], attr: { type: "number", min: "1", max: "24", value: "1" } },
-  downButton: { extend: Button, props: { icon: "minus" } }
+  Button_plus: { icon: "plus" },
+  NumberInput: {
+    boxSize: "C C",
+    round: "Z",
+    padding: "0",
+    align: "center center",
+    textAlign: "center",
+    min: 0,
+    max: 24,
+    placeholder: "00",
+    appearance: "textfield",
+    theme: "secondary",
+    "::-webkit-inner-spin-button": {
+      style: { appearance: "none" },
+      margin: 0
+    },
+    "::-webkit-outer-spin-button": {
+      style: { appearance: "none" },
+      margin: 0
+    }
+  },
+  Button_minus: { icon: "minus" }
 };
 
-// TimePicker/index.js
+// TimePicker/TimeSwitcher.js
 var props3 = {
+  boxSize: "C B2",
   flow: "column",
-  width: "fit-content",
-  background: "rgba(255, 255, 255, .15)",
-  padding: "A A B A",
+  overflow: "hidden",
   round: "Z",
-  title: {
+  theme: "secondary"
+};
+var TimeSwitcher = {
+  props: props3,
+  extend: Flex,
+  childExtend: {
+    extend: Button,
+    props: ({ state, key }) => ({
+      active: state.activeShift === key,
+      padding: "0",
+      flex: "1",
+      width: "100%",
+      fontSize: "Y",
+      textTransform: "uppercase",
+      round: "0",
+      background: "transparent",
+      color: "currentColor",
+      lineHeight: "1",
+      ".active": { theme: "primary" }
+    }),
+    on: {
+      click: (event, element, state) => {
+        state.update({ activeShift: element.key });
+      }
+    }
+  },
+  am: { text: "am" },
+  pm: { text: "pm" }
+};
+
+// TimePicker/index.js
+var TimePicker = {
+  extend: [Dialog, Flex],
+  state: {
+    activeShift: "am"
+  },
+  props: {
+    flow: "column",
+    width: "fit-content",
+    padding: "Z A"
+  },
+  Title: {
     fontSize: "Z1",
     textTransform: "capitalize",
-    padding: "- - B -"
+    padding: "- - A -",
+    text: "enter time"
   },
-  content: {
-    align: "center center",
-    gap: "A",
-    timePickers: {
+  Flex: {
+    props: {
       align: "center center",
-      gap: "Y2"
-    }
+      gap: "A"
+    },
+    Flex: {
+      tag: "label",
+      props: {
+        align: "center center",
+        gap: "Y2"
+      },
+      TimePickerItem_hh: {
+        NumberInput: {
+          placeholder: "HH",
+          min: "0",
+          max: "11"
+        }
+      },
+      Span: ":",
+      TimePickerItem_mm: {
+        NumberInput: {
+          placeholder: "MM",
+          min: "0",
+          max: "59"
+        }
+      },
+      Span_2: ":",
+      TimePickerItem_ss: {
+        NumberInput: {
+          placeholder: "SS",
+          min: "0",
+          max: "59"
+        }
+      }
+    },
+    TimeSwitcher: {}
   },
-  footButtons: {
+  DialogFooter: {
     align: "center flex-end",
-    gap: "A1",
-    padding: "B1 - - -",
+    gap: "X",
+    margin: "Z2 -Z2 -Z",
     childProps: {
       background: "transparent",
       padding: "0",
@@ -14683,27 +14772,6 @@ var props3 = {
     }
   }
 };
-var TimePicker = {
-  extend: [Dialog, Flex],
-  props: props3,
-  title: { text: "enter time" },
-  content: {
-    extend: Flex,
-    timePickers: {
-      tag: "label",
-      extend: Flex,
-      ...[
-        { extend: TimePickerItem },
-        ":",
-        { extend: TimePickerItem },
-        ":",
-        { extend: TimePickerItem }
-      ]
-    },
-    TimeSwitcher: {}
-  },
-  DialogFooter: {}
-};
 
 // Dropdown/index.js
 var DropdownList = {
@@ -15027,6 +15095,46 @@ var RouteLink = {
   extend: [Link, RouterLink]
 };
 
+// Input/index.js
+var Input = {
+  extend: [Focusable],
+  tag: "input",
+  props: {
+    border: "none",
+    type: "input",
+    theme: "quaternary",
+    fontSize: "A",
+    round: "C",
+    lineHeight: 1,
+    fontFamily: "smbls",
+    padding: "Z A"
+  },
+  attr: {
+    pattern: ({ props: props7 }) => props7.pattern,
+    minlength: ({ props: props7 }) => props7.minlength,
+    maxlength: ({ props: props7 }) => props7.maxlength,
+    name: ({ props: props7 }) => props7.name,
+    autocomplete: ({ props: props7 }) => props7.autocomplete,
+    placeholder: ({ props: props7 }) => props7.placeholder,
+    value: ({ props: props7, state }) => props7.value,
+    disabled: ({ props: props7 }) => props7.disabled || null,
+    readonly: ({ props: props7 }) => props7.readonly,
+    required: ({ props: props7 }) => props7.required,
+    type: ({ props: props7 }) => props7.type
+  }
+};
+var NumberInput = {
+  extend: Input,
+  props: {
+    type: "number"
+  },
+  attr: {
+    step: ({ props: props7 }) => props7.step,
+    min: ({ props: props7 }) => props7.min,
+    max: ({ props: props7 }) => props7.max
+  }
+};
+
 // Field/node_modules/@symbo.ls/atoms/Block.js
 var import_scratch10 = __toESM(require_cjs());
 
@@ -15561,24 +15669,21 @@ var Upload = {
     round: "A",
     cursor: "pointer",
     border: "1.6px, dashed, white 0.1",
-    padding: "B B2",
-    input: {
-      position: "absolute",
-      inset: "0 0 0 0",
-      opacity: "0",
-      visibility: "hidden"
-    }
+    padding: "B B2"
   },
-  input: { attr: { type: "file" } },
-  icon: {
-    extend: Icon,
-    props: {
-      name: "upload",
-      fontSize: `${26 / 16}em`,
-      opacity: ".2"
-    }
+  Input: {
+    type: "file",
+    position: "absolute",
+    inset: "0 0 0 0",
+    opacity: "0",
+    visibility: "hidden"
+  },
+  Icon: {
+    name: "upload",
+    fontSize: `${26 / 16}em`,
+    opacity: ".2"
   },
-  p: {
+  P: {
     props: {
       text: " or click and upload from your computer",
       flexFlow: "column",
@@ -15586,21 +15691,28 @@ var Upload = {
       opacity: ".22",
       margin: "0"
     },
-    span: {
+    Span: {
       text: "Drag and drop your font file",
-      style: { display: "block" }
+      display: "block"
     }
   }
 };
 var DragNdropUser = {
   extend: Flex,
-  props: ({ state }) => ({
+  props: {
     flow: "column",
     align: "center center",
     gap: "A",
-    round: "A",
-    img: { boxSize: "C C", src: state.src },
-    buttons: {
+    round: "A"
+  },
+  Avatar: {
+    props: ({ state }) => ({
+      boxSize: "C C",
+      src: state.src
+    })
+  },
+  Flex: {
+    props: {
       gap: "Y",
       childProps: {
         padding: "0",
@@ -15610,11 +15722,7 @@ var DragNdropUser = {
         color: "gray6",
         style: { "> svg": { fontSize: `${14 / 16}em` } }
       }
-    }
-  }),
-  img: { extend: Avatar },
-  buttons: {
-    extend: Flex,
+    },
     childExtend: SquareButton,
     ...[
       { props: { icon: "reload" } },
@@ -15645,21 +15753,19 @@ var Label = {
 // Pills/index.js
 var Pills = {
   extend: Flex,
-  props: (el, s) => ({
-    display: "flex",
-    gap: "Y2",
-    childProps: {
-      background: "gray6",
-      width: "Y2",
-      height: "Y2",
+  props: {
+    gap: "Y2"
+  },
+  childExtend: {
+    props: (el, s) => ({
+      active: parseInt(el.key) === (el.parent.props.active || s.active),
+      theme: "tertiary",
+      boxSize: "Y2",
       round: "A",
       ".active": {
-        background: "gray9"
+        theme: "primary"
       }
-    }
-  }),
-  childExtend: {
-    props: (el, s) => ({ active: parseInt(el.key) === s.active })
+    })
   }
 };