commit dd0c8c326a7371d7ddf4b3af407a4f047c8e4d08
Author: Vyn <vyn@evalyte.net>
Date:   Wed Oct 16 11:40:45 2024 +0200

    First commit

diff --git a/ActionButton.slint b/ActionButton.slint
new file mode 100644
index 0000000..c763c27
--- /dev/null
+++ b/ActionButton.slint
@@ -0,0 +1,50 @@
+import { Palette } from "Palette.slint";
+import { VText } from "Text.slint";
+
+export component VActionButton inherits Rectangle {
+
+	in property<image> icon-source;
+	in property<brush> icon-colorize: Palette.foreground;
+	in property<length> icon-size: 1rem;
+	in property<string> icon-svg;
+	in property<length> icon-svg-stroke-width: 2px;
+	in property enabled <=> ta.enabled;
+	callback clicked;
+
+	private property<bool> active: false;
+
+	background: enabled ? Palette.control-background : Palette.control-background.darker(0.2);
+	border-radius: 4px;
+
+	ta := TouchArea {
+		mouse-cursor: pointer;
+		clicked => {
+			active = !active;
+			root.clicked();
+		}
+	}
+
+	HorizontalLayout {
+		alignment: center;
+		spacing: 8px;
+		padding: 8px;
+		if root.icon-svg != "" : VerticalLayout {
+			alignment: center;
+			Path {
+				padding: 8px;
+				commands: root.icon-svg;
+				stroke: icon-colorize;
+				stroke-width: icon-svg-stroke-width;
+				width: icon-size;
+				height: icon-size;
+				fill: icon-colorize;
+			}
+		}
+		if root.icon-source.width != 0 : Image {
+			padding: 8px;
+			source: icon-source;
+			colorize: icon-colorize;
+			width: icon-size;
+		}
+	}
+}
diff --git a/Button.slint b/Button.slint
new file mode 100644
index 0000000..1610c8d
--- /dev/null
+++ b/Button.slint
@@ -0,0 +1,61 @@
+import { Palette } from "Palette.slint";
+import { VText } from "Text.slint";
+
+export component VButton inherits Rectangle {
+
+	in property<string> text;
+	in property<brush> text-color: Palette.foreground;
+	in property<length> text-size: 1rem;
+	in property<image> icon-source;
+	in property<brush> icon-colorize: Palette.foreground;
+	in property<length> icon-size: 1rem;
+	in property <string> icon-svg;
+	in property enabled <=> ta.enabled;
+	callback clicked;
+
+	private property<bool> active: false;
+
+	background: enabled ? Palette.control-background : Palette.control-background.darker(0.2);
+	border-radius: 4px;
+
+	ta := TouchArea {
+		mouse-cursor: pointer;
+		clicked => {
+			active = !active;
+			root.clicked();
+		}
+	}
+
+	HorizontalLayout {
+		alignment: center;
+		spacing: 8px;
+		padding: 16px;
+		padding-top: 4px;
+		padding-bottom: 4px;
+		if root.icon-svg != "" : VerticalLayout {
+			alignment: center;
+			Path {
+				padding: 8px;
+				commands: root.icon-svg;
+				stroke: icon-colorize;
+				stroke-width: 2px;
+				width: icon-size;
+				height: icon-size;
+			}
+		}
+		if root.icon-source.width != 0 : Image {
+			padding: 8px;
+			source: icon-source;
+			colorize: icon-colorize;
+			width: icon-size;
+		}
+		if root.text != "" : VerticalLayout {
+			VText {
+				text: root.text;
+				font-size: root.text-size;
+				color: root.text-color;
+				horizontal-alignment: center;
+			}
+		}
+	}
+}
diff --git a/CheckBox.slint b/CheckBox.slint
new file mode 100644
index 0000000..a1f98c1
--- /dev/null
+++ b/CheckBox.slint
@@ -0,0 +1,42 @@
+import { VLabeledComponent } from "LabeledComponent.slint";
+import { VText } from "Text.slint";
+import { Palette } from "Palette.slint";
+
+export component VCheckBox {
+	in-out property<string> text;
+	in property <brush> color <=> textComponent.color;
+	in-out property<bool> checked: false;
+
+	callback toggled(bool); // toggled(state: bool)
+
+	HorizontalLayout {
+		spacing: 8px;
+		VerticalLayout {
+			alignment: center;
+			if checked : Rectangle {
+				background: Palette.accent;
+				height: 1rem;
+				width: self.height;
+				border-radius: 32px;
+			}
+			if !checked : Rectangle {
+				border-color: Palette.accent;
+				border-width: 2px;
+				height: 1rem;
+				width: self.height;
+				border-radius: 32px;
+			}
+		}
+		textComponent := VText {
+			text: root.text;
+			vertical-alignment: center;
+		}
+	}
+
+	ta := TouchArea {
+		clicked => {
+			checked = !checked;
+			root.toggled(checked)
+		}
+	}
+}
diff --git a/DatePicker.slint b/DatePicker.slint
new file mode 100644
index 0000000..0a6a10a
--- /dev/null
+++ b/DatePicker.slint
@@ -0,0 +1,48 @@
+import { Button, DatePickerPopup, Date, Palette } from "std-widgets.slint";
+import { VLabeledComponent } from "LabeledComponent.slint";
+import { VActionButton } from "ActionButton.slint";
+import { VButton } from "Button.slint";
+import { Svg } from "Svg.slint";
+
+export component VDatePicker inherits VLabeledComponent {
+	in-out property<Date> date;
+	in-out property<string> dateDisplay;
+
+	pure function formatZeroPadding(number: int) -> string {
+		if (number < 10) {
+			return "0\{number}";
+		}
+		return number;
+	}
+
+	pure function getDateDisplay() -> string {
+		if (date.year == 0) {
+			return "Unscheduled";
+		}
+		return formatZeroPadding(date.day) + "/" + formatZeroPadding(date.month) + "/" + date.year;
+	}
+
+	function resetDate() {
+		date.year = 0;
+		date.month = 0;
+		date.day = 0;
+	}
+
+	HorizontalLayout {
+		VButton {
+			text: getDateDisplay();
+			enabled: root.enabled;
+			clicked => { taskDateInput.show() }
+		}
+ 		VActionButton {
+			icon-svg: Svg.reset;
+			icon-svg-stroke-width: 1px;
+			enabled: root.enabled;
+			clicked => { resetDate() }
+		}
+	}
+
+	taskDateInput := DatePickerPopup {
+		accepted(date) => { root.date = date }
+	}
+}
diff --git a/LabeledComponent.slint b/LabeledComponent.slint
new file mode 100644
index 0000000..f112ca0
--- /dev/null
+++ b/LabeledComponent.slint
@@ -0,0 +1,60 @@
+import { Palette } from "Palette.slint";
+import { VText } from "Text.slint";
+
+export component VLabeledComponent {
+	in property<string> label;
+	in property<length> label-size: 1rem;
+	in property <TextHorizontalAlignment> label-alignment: TextHorizontalAlignment.left;
+	in property<bool> enabled: true;
+	in property<bool> no-background: false;
+
+	function calc-background() -> brush {
+		if (no-background == true) {
+			return Palette.control-background.transparentize(1);
+		}
+		if (enabled == false) {
+			return Palette.control-background.darker(0.2);
+		}
+		return Palette.control-background;
+	}
+
+	VerticalLayout {
+		if root.label != "" : VerticalLayout {
+			padding-left: 4px;
+			padding-right: 4px;
+			VText {
+				text: root.label;
+				font-size: label-size;
+				horizontal-alignment: root.label-alignment;
+			}
+		}	
+
+		Rectangle {
+			background: calc-background();
+			border-radius: 4px;
+			VerticalLayout {
+				@children
+			}
+		}
+	}
+}
+
+export component CommonComponentBackground {
+	in property<bool> enabled: true;
+	in property<bool> no-background: false;
+
+	function calc-background() -> brush {
+		if (no-background == true) {
+			return Palette.control-background.transparentize(1);
+		}
+		if (enabled == false) {
+			return Palette.control-background.darker(0.2);
+		}
+		return Palette.control-background;
+	}
+
+	Rectangle {
+		background: calc-background();
+		@children
+	}
+}
diff --git a/Palette.slint b/Palette.slint
new file mode 100644
index 0000000..e2e8b3b
--- /dev/null
+++ b/Palette.slint
@@ -0,0 +1,43 @@
+// OneDark
+
+//black = "#181a1f",
+//bg0 = "#282c34",
+//bg1 = "#31353f",
+//bg2 = "#393f4a",
+//bg3 = "#3b3f4c",
+//bg_d = "#21252b",
+//bg_blue = "#73b8f1",
+//bg_yellow = "#ebd09c",
+//fg = "#abb2bf",
+//purple = "#c678dd",
+//green = "#98c379",
+//orange = "#d19a66",
+//blue = "#61afef",
+//yellow = "#e5c07b",
+//cyan = "#56b6c2",
+//red = "#e86671",
+//grey = "#5c6370",
+//light_grey = "#848b98",
+//dark_cyan = "#2b6f77",
+//dark_red = "#993939",
+//dark_yellow = "#93691d",
+//dark_purple = "#8a3fa0",
+//diff_add = "#31392b",
+//diff_delete = "#382b2c",
+//diff_change = "#1c3448",
+//diff_text = "#2c5372",
+// ----
+
+export global Palette {
+	out property<brush> accent: Colors.cyan.darker(0.4);
+	out property<brush> foreground: #abb2bf;
+	out property<brush> foreground-hint: foreground.darker(0.2);
+	out property<brush> background: #282c34;
+	out property<brush> pane: #21252b;
+	out property<brush> control-foreground: #abb2bf;
+	out property<brush> control-background: #393f4a;
+	out property<brush> card-background: background.brighter(0.2);
+	out property<brush> green: Colors.greenyellow;
+	out property<brush> orange: Colors.orange;
+	out property<brush> red: Colors.red;
+}
diff --git a/PopupIconMenu.slint b/PopupIconMenu.slint
new file mode 100644
index 0000000..b50bd82
--- /dev/null
+++ b/PopupIconMenu.slint
@@ -0,0 +1,27 @@
+import { Palette } from "Palette.slint";
+import { VButton } from "Button.slint";
+
+export component VPopupIconMenu inherits Rectangle {
+	private property<length> popup-x: 200px;
+	private property<length> popup-y: 200px;
+
+	public function show(x: length, y: length) {
+		popup-x = x;
+		popup-y = y;
+		popup.show();
+	}
+
+	popup := PopupWindow {
+		x: popup-x;
+		y: popup-y;
+		Rectangle {
+			background: Palette.background.brighter(0.2);
+			border-radius: 8px;
+			clip: true;
+			HorizontalLayout {
+				alignment: start;
+				@children
+			}
+		}
+	}
+}
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e69de29
diff --git a/Slider.slint b/Slider.slint
new file mode 100644
index 0000000..f4a4a61
--- /dev/null
+++ b/Slider.slint
@@ -0,0 +1,34 @@
+import { VLabeledComponent } from "LabeledComponent.slint";
+import { Palette } from "Palette.slint";
+import { Slider } from "std-widgets.slint";
+import { VText } from "Text.slint";
+
+export component VSlider inherits VLabeledComponent {
+	in property <bool> show-value;
+	in-out property <float> value;
+
+	init => {
+		sliderComponent.value = root.value;
+	}
+
+	pure callback format-value(float) -> string;
+	format-value(value) => {
+		return "\{value}";
+	}
+
+	callback released <=> sliderComponent.released;
+	in property minimum <=> sliderComponent.minimum;
+	in property maximum <=> sliderComponent.maximum;
+
+	VerticalLayout {
+		spacing: 8px;
+		VText {
+			horizontal-alignment: center;
+			text: format-value(sliderComponent.value);
+			color: Palette.foreground-hint;
+		}
+		sliderComponent := Slider {
+
+		}
+	}
+}
diff --git a/Svg.slint b/Svg.slint
new file mode 100644
index 0000000..7d216de
--- /dev/null
+++ b/Svg.slint
@@ -0,0 +1,12 @@
+export global Svg  {
+    out property <string> burger: "M3 6h18M3 12h18M3 18h18";
+    out property <string> play: "M240 128a15.74 15.74 0 0 1-7.6 13.51L88.32 229.65a16 16 0 0 1-16.2.3A15.86 15.86 0 0 1 64 216.13V39.87a15.86 15.86 0 0 1 8.12-13.82a16 16 0 0 1 16.2.3l144.08 88.14A15.74 15.74 0 0 1 240 128";
+    out property <string> pause: "M216 48v160a16 16 0 0 1-16 16h-40a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h40a16 16 0 0 1 16 16M96 32H56a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h40a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16";
+    out property <string> reset: "M18 28A12 12 0 1 0 6 16v6.2l-3.6-3.6L1 20l6 6l6-6l-1.4-1.4L8 22.2V16a10 10 0 1 1 10 10Z";
+	out property <string> trash: "M19 4h-3.5l-1-1h-5l-1 1H5v2h14M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6z";
+	out property <string> plus: "M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z";
+	out property <string> pen: "M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1q-.15.15-.15.36M20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83l3.75 3.75z";
+	out property <string> visible: "M2.933 3.491C4.056 2.681 5.456 2 7 2s2.944.682 4.067 1.491c1.128.812 2.02 1.784 2.56 2.437l.005.005c.241.3.368.681.368 1.067s-.127.766-.368 1.067l-.005.005c-.54.653-1.432 1.625-2.56 2.437C9.944 11.32 8.544 12 7 12s-2.944-.682-4.067-1.49C1.805 9.696.913 8.724.373 8.071l-.005-.005A1.7 1.7 0 0 1 0 7c0-.386.127-.766.368-1.067l.005-.005c.54-.653 1.432-1.625 2.56-2.437M7 9.25a2.25 2.25 0 1 0 0-4.5a2.25 2.25 0 0 0 0 4.5";
+	out property <string> not-visible: "M.264 1.324a.75.75 0 0 1 1.06-1.06l2.629 2.628C4.86 2.393 5.893 2.04 7 2.04c1.532 0 2.92.677 4.035 1.48c1.118.805 2.003 1.769 2.539 2.417l.004.005c.24.298.366.675.366 1.058s-.126.76-.366 1.058l-.004.006a14.5 14.5 0 0 1-2.249 2.2l2.411 2.412a.75.75 0 0 1-1.06 1.06zm8.753 6.633a2.232 2.232 0 0 0-2.974-2.974zm-8.59-2.02c.319-.387.762-.885 1.305-1.395l7.104 7.104A5.7 5.7 0 0 1 7 11.96c-1.532 0-2.92-.676-4.035-1.479C1.847 9.675.962 8.711.426 8.064l-.004-.006A1.7 1.7 0 0 1 .056 7c0-.383.126-.76.366-1.058l.004-.005Z";
+
+}
diff --git a/Tag.slint b/Tag.slint
new file mode 100644
index 0000000..6180058
--- /dev/null
+++ b/Tag.slint
@@ -0,0 +1,31 @@
+import { Palette } from "Palette.slint";
+import { VText } from "Text.slint";
+
+export component VTag inherits Rectangle {
+
+	in property text <=> text-component.text;
+	in property text-color <=> text-component.color;
+	in property size <=> text-component.font-size;
+	in property background-color <=> self.background;
+
+	callback clicked;
+
+	background: Palette.control-background;
+	border-radius: 8px;
+
+	ta := TouchArea {
+		mouse-cursor: pointer;
+		clicked => {
+			root.clicked();
+		}
+	}
+
+	VerticalLayout {
+		padding-left: 8px;
+		padding-right: 8px;
+		alignment: center;
+		text-component := VText {
+			horizontal-alignment: center;
+		}
+	}
+}
diff --git a/Text.slint b/Text.slint
new file mode 100644
index 0000000..c254d49
--- /dev/null
+++ b/Text.slint
@@ -0,0 +1,5 @@
+import { Palette } from "Palette.slint";
+
+export component VText inherits Text {
+	color: Palette.foreground;
+}
diff --git a/TextInput.slint b/TextInput.slint
new file mode 100644
index 0000000..f7c485b
--- /dev/null
+++ b/TextInput.slint
@@ -0,0 +1,47 @@
+import { VLabeledComponent } from "LabeledComponent.slint";
+import { Palette } from "Palette.slint";
+import { VText } from "Text.slint";
+
+export component VTextInput inherits VLabeledComponent {
+	in-out property text <=> textInputComponent.text;
+	out property has-focus <=> textInputComponent.has-focus;
+	in-out property placeholder <=> textInputComponent.accessible-placeholder-text;
+	in-out property wrap <=> textInputComponent.wrap;
+	callback accepted();
+	callback edited();
+	callback started-writting();
+
+	public function edit-text(text: string) {
+		root.text = text;
+		root.old-text = text;
+	}
+
+	private property <string> old-text: "";
+
+	VerticalLayout {
+		padding: 4px;
+		padding-left: 8px;
+		padding-right: 8px;
+		textInputComponent := TextInput {
+			color: Palette.foreground;
+			accepted => { root.accepted() }
+			edited => { 
+				root.edited();
+				if (textInputComponent.text != "" && old-text == "") {
+					root.started-writting();
+				}
+				old-text = textInputComponent.text;
+			}
+			HorizontalLayout {
+				alignment: start;
+				VText {
+					visible: textInputComponent.text == "";
+					color: Palette.foreground-hint;
+					text: root.placeholder;
+				}
+			}
+			
+		}
+	}
+	
+}
diff --git a/TimePicker.slint b/TimePicker.slint
new file mode 100644
index 0000000..69b1c2f
--- /dev/null
+++ b/TimePicker.slint
@@ -0,0 +1,25 @@
+import { Button, TimePickerPopup, Date, Palette, Time } from "std-widgets.slint";
+import { VLabeledComponent } from "LabeledComponent.slint";
+import { VButton } from "Button.slint";
+
+export component VTimePicker inherits VLabeledComponent {
+	in-out property<Time> time;
+	in-out property<string> timeDisplay: formatZeroPadding(time.hour) + "h" + formatZeroPadding(time.minute);
+
+	pure function formatZeroPadding(number: int) -> string {
+		if (number < 10) {
+			return "0\{number}";
+		}
+		return number;
+	}
+
+	button := VButton {
+		text: timeDisplay;
+		enabled: root.enabled;
+		clicked => { timePickerPopup.show() }
+	}
+
+	timePickerPopup := TimePickerPopup {
+		accepted(time) => { root.time = time }
+	}
+}
diff --git a/ToggleButton.slint b/ToggleButton.slint
new file mode 100644
index 0000000..57da3a8
--- /dev/null
+++ b/ToggleButton.slint
@@ -0,0 +1,34 @@
+import { Palette } from "Palette.slint";
+import { VText } from "Text.slint";
+
+export component ToggleButton inherits Rectangle {
+
+	in property text <=> text-component.text;
+	in property text-color <=> text-component.color;
+	in property text-alignment <=> text-component.horizontal-alignment;
+	in property<bool> active: false;
+	callback clicked;
+
+
+	background: root.active ? Palette.control-background
+		: ta.has-hover ? Palette.control-background.transparentize(0.5)
+		: Colors.transparent;
+	border-radius: 4px;
+
+	ta := TouchArea {
+		mouse-cursor: pointer;
+		clicked => {
+			root.clicked();
+		}
+	}
+
+	VerticalLayout {
+		padding: 8px;
+		padding-top: 4px;
+		padding-bottom: 4px;
+		text-component := VText {
+			horizontal-alignment: center;
+		}
+	}
+	
+}
diff --git a/index.slint b/index.slint
new file mode 100644
index 0000000..fb7e304
--- /dev/null
+++ b/index.slint
@@ -0,0 +1,15 @@
+export { Palette } from "Palette.slint";
+export { VButton } from "Button.slint";
+export { VActionButton } from "ActionButton.slint";
+export { VText } from "Text.slint";
+export { VCheckBox } from "CheckBox.slint";
+export { VDatePicker } from "DatePicker.slint";
+export { VTimePicker } from "TimePicker.slint";
+export { VLabeledComponent, CommonComponentBackground } from "LabeledComponent.slint";
+export { VPopupIconMenu } from "PopupIconMenu.slint";
+export { VTag } from "Tag.slint";
+export { VTextInput } from "TextInput.slint";
+export { VSlider } from "Slider.slint";
+export { ToggleButton } from "ToggleButton.slint";
+
+export { Svg } from "Svg.slint";