solid-tiny-ui 0.4.0 → 0.6.0

package/dist/components/form-components/text-field/text-field.jsx

@@ -0,0 +1,40 @@
+import { createClassStyles, extraAriasAndDatasets } from "../../../utils/index.jsx";
+import text_field_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/text-field/text-field.jsx";
+import { Show, children } from "solid-js";
+import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/form-components/text-field/text-field.tsx
+function TextField(props) {
+	mountStyle(text_field_default, "tiny-text-field");
+	const prefix = children(() => props.prefix);
+	const suffix = children(() => props.suffix);
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+		disabled: props.disabled ?? false,
+		invalid: props.invalid ?? false,
+		size: props.size || "medium"
+	}));
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter") {
+			props.onPressEnter?.(e);
+			e.currentTarget.blur();
+		}
+	};
+	return <div class={combineClass("tiny-text-field", classes().root)} data-disabled={dataIf(props.disabled ?? false)} data-invalid={dataIf(props.invalid ?? false)} data-size={props.size || "medium"} style={combineStyle({}, styles().root)}>
+      <Show when={prefix()}>
+        <div class={combineClass("tiny-text-field-prefix", classes().prefix)} style={combineStyle({}, styles().prefix)}>
+          {prefix()}
+        </div>
+      </Show>
+      <input {...extraAriasAndDatasets(props)} class={combineClass("tiny-text-field-input", classes().input)} disabled={props.disabled} id={props.id} name={props.name} onInput={(e) => {
+		props.onChange?.(e.currentTarget.value);
+	}} onKeyDown={handleKeyDown} placeholder={props.placeholder} style={combineStyle({}, styles().input)} type="text" value={props.value} />
+      <Show when={suffix()}>
+        <div class={combineClass("tiny-text-field-suffix", classes().suffix)} style={combineStyle({}, styles().suffix)}>
+          {suffix()}
+        </div>
+      </Show>
+    </div>;
+}
+
+//#endregion
+export { TextField };

package/dist/components/{textarea → form-components/textarea}/textarea.d.ts

@@ -1,7 +1,7 @@
-import { ClassNames, Styles } from "../../utils/types.js";
+import { ClassNames, Styles } from "../../../utils/types.js";
 import { JSX } from "solid-js";
 
-//#region src/components/textarea/textarea.d.ts
+//#region src/components/form-components/textarea/textarea.d.ts
 declare function Textarea(props: {
   autosize?: boolean;
   rows?: number;
@@ -16,7 +16,10 @@ declare function Textarea(props: {
     disabled: boolean;
   }>;
   onChange?: (value: string) => void;
+  invalid?: boolean;
   value?: string;
+  id?: string;
+  name?: string;
 }): JSX.Element;
 //#endregion
 export { Textarea };

package/dist/components/form-components/textarea/textarea.js

@@ -0,0 +1,55 @@
+import { createClassStyles } from "../../../utils/index.js";
+import textarea_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/textarea/textarea.js";
+import { className, delegateEvents, effect, setAttribute, style, template } from "solid-js/web";
+import { mergeProps as mergeProps$1 } from "solid-js";
+import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/form-components/textarea/textarea.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<textarea>`);
+function Textarea(props) {
+	mountStyle(textarea_default, "tiny-textarea");
+	const real = mergeProps$1({
+		autosize: false,
+		rows: 3,
+		disabled: false
+	}, props);
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({ disabled: real.disabled }));
+	return (() => {
+		var _el$ = _tmpl$();
+		_el$.$$input = (e) => {
+			props.onChange?.(e.target.value);
+		};
+		effect((_p$) => {
+			var _v$ = combineClass("tiny-textarea", classes().root), _v$2 = dataIf(real.invalid ?? false), _v$3 = real.disabled, _v$4 = props.id, _v$5 = real.maxLength, _v$6 = props.name, _v$7 = real.placeholder, _v$8 = real.rows, _v$9 = combineStyle({
+				resize: real.resize,
+				"min-height": "88px"
+			}, styles().root);
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "data-invalid", _p$.t = _v$2);
+			_v$3 !== _p$.a && (_el$.disabled = _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$, "id", _p$.o = _v$4);
+			_v$5 !== _p$.i && setAttribute(_el$, "maxlength", _p$.i = _v$5);
+			_v$6 !== _p$.n && setAttribute(_el$, "name", _p$.n = _v$6);
+			_v$7 !== _p$.s && setAttribute(_el$, "placeholder", _p$.s = _v$7);
+			_v$8 !== _p$.h && setAttribute(_el$, "rows", _p$.h = _v$8);
+			_p$.r = style(_el$, _v$9, _p$.r);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0,
+			h: void 0,
+			r: void 0
+		});
+		effect(() => _el$.value = real.value);
+		return _el$;
+	})();
+}
+delegateEvents(["input"]);
+
+//#endregion
+export { Textarea };

package/dist/components/form-components/textarea/textarea.jsx

@@ -0,0 +1,24 @@
+import { createClassStyles } from "../../../utils/index.jsx";
+import textarea_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/textarea/textarea.jsx";
+import { mergeProps } from "solid-js";
+import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/form-components/textarea/textarea.tsx
+function Textarea(props) {
+	mountStyle(textarea_default, "tiny-textarea");
+	const real = mergeProps({
+		autosize: false,
+		rows: 3,
+		disabled: false
+	}, props);
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({ disabled: real.disabled }));
+	return <textarea class={combineClass("tiny-textarea", classes().root)} data-invalid={dataIf(real.invalid ?? false)} disabled={real.disabled} id={props.id} maxLength={real.maxLength} name={props.name} onInput={(e) => {
+		props.onChange?.(e.target.value);
+	}} placeholder={real.placeholder} rows={real.rows} style={combineStyle({
+		resize: real.resize,
+		"min-height": "88px"
+	}, styles().root)} value={real.value} />;
+}
+
+//#endregion
+export { Textarea };

package/dist/components/form-components/time-picker/index.d.ts

@@ -0,0 +1,27 @@
+import { ClassNames, Styles } from "../../../utils/types.js";
+import * as solid_js43 from "solid-js";
+
+//#region src/components/form-components/time-picker/index.d.ts
+declare function TimePicker(props: {
+  type?: "hour" | "minute" | "second";
+  size?: "small" | "medium" | "large";
+  hour?: number | null;
+  minute?: number | null;
+  second?: number | null;
+  onChange?: (time: {
+    hour: number | null;
+    minute: number | null;
+    second: number | null;
+  }) => void;
+  disabled?: boolean;
+  classNames?: ClassNames<"trigger" | "popover", {
+    disabled: boolean;
+    size: "small" | "medium" | "large";
+  }>;
+  styles?: Styles<"trigger" | "popover", {
+    disabled: boolean;
+    size: "small" | "medium" | "large";
+  }>;
+}): solid_js43.JSX.Element;
+//#endregion
+export { TimePicker };

package/dist/components/form-components/time-picker/index.js

@@ -0,0 +1,106 @@
+import { createClassStyles } from "../../../utils/index.js";
+import { Popover } from "../../popover/index.js";
+import time_picker_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/time-picker/time-picker.js";
+import { TimePanel } from "./panel.js";
+import { TimeTrigger } from "./trigger.js";
+import { createComponent, memo } from "solid-js/web";
+import { combineClass, mountStyle, noop } from "solid-tiny-utils";
+import { getHours, getMinutes, getSeconds } from "time-core";
+
+//#region src/components/form-components/time-picker/index.tsx
+function TimePicker(props) {
+	mountStyle(time_picker_default, "tiny-time-picker");
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+		disabled: props.disabled ?? false,
+		size: props.size ?? "medium"
+	}));
+	return createComponent(Popover, {
+		get disabled() {
+			return props.disabled;
+		},
+		floatingOption: {
+			offset: ({ rects }) => {
+				return -rects.reference.height * 4 + 6;
+			},
+			flip: false,
+			shift: { crossAxis: true }
+		},
+		placement: "bottom",
+		trigger: "click",
+		children: (state, actions) => [createComponent(Popover.Trigger, { get children() {
+			return createComponent(TimeTrigger, {
+				get ["class"]() {
+					return classes().trigger;
+				},
+				get disabled() {
+					return props.disabled ?? false;
+				},
+				get hour() {
+					return props.hour ?? null;
+				},
+				get minute() {
+					return props.minute ?? null;
+				},
+				get second() {
+					return props.second ?? null;
+				},
+				get size() {
+					return props.size ?? "medium";
+				},
+				get style() {
+					return styles().trigger;
+				},
+				get type() {
+					return props.type ?? "hour";
+				}
+			});
+		} }), createComponent(Popover.Content, {
+			get ["class"]() {
+				return combineClass("tiny-time-picker-popover tiny-time-picker-popover-vars", classes().popover);
+			},
+			get ["data-size"]() {
+				return props.size || "medium";
+			},
+			get style() {
+				return styles().popover;
+			},
+			get children() {
+				return createComponent(TimePanel, {
+					get hour() {
+						return props.hour || getHours(Date.now());
+					},
+					get itemHeight() {
+						return state.refTrigger?.clientHeight || 32;
+					},
+					get minute() {
+						return props.minute || getMinutes(Date.now());
+					},
+					onCancel: () => {
+						actions.setOpen(false);
+					},
+					onChange: noop,
+					onConfirm: (hour, minute, second) => {
+						props.onChange?.({
+							hour,
+							minute,
+							second
+						});
+						actions.setOpen(false);
+					},
+					get second() {
+						return props.second || getSeconds(Date.now());
+					},
+					get type() {
+						return props.type || "hour";
+					},
+					get width() {
+						return state.refTrigger?.clientWidth || 128;
+					}
+				});
+			}
+		})]
+	});
+}
+
+//#endregion
+export { TimePicker };

package/dist/components/form-components/time-picker/index.jsx

@@ -0,0 +1,44 @@
+import { createClassStyles } from "../../../utils/index.jsx";
+import { Popover } from "../../popover/index.jsx";
+import time_picker_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/time-picker/time-picker.jsx";
+import { TimePanel } from "./panel.jsx";
+import { TimeTrigger } from "./trigger.jsx";
+import { combineClass, mountStyle, noop } from "solid-tiny-utils";
+import { getHours, getMinutes, getSeconds } from "time-core";
+
+//#region src/components/form-components/time-picker/index.tsx
+function TimePicker(props) {
+	mountStyle(time_picker_default, "tiny-time-picker");
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+		disabled: props.disabled ?? false,
+		size: props.size ?? "medium"
+	}));
+	return <Popover disabled={props.disabled} floatingOption={{
+		offset: ({ rects }) => {
+			return -rects.reference.height * 4 + 6;
+		},
+		flip: false,
+		shift: { crossAxis: true }
+	}} placement="bottom" trigger="click">
+      {(state, actions) => <>
+          <Popover.Trigger>
+            <TimeTrigger class={classes().trigger} disabled={props.disabled ?? false} hour={props.hour ?? null} minute={props.minute ?? null} second={props.second ?? null} size={props.size ?? "medium"} style={styles().trigger} type={props.type ?? "hour"} />
+          </Popover.Trigger>
+          <Popover.Content class={combineClass("tiny-time-picker-popover tiny-time-picker-popover-vars", classes().popover)} data-size={props.size || "medium"} style={styles().popover}>
+            <TimePanel hour={props.hour || getHours(Date.now())} itemHeight={state.refTrigger?.clientHeight || 32} minute={props.minute || getMinutes(Date.now())} onCancel={() => {
+		actions.setOpen(false);
+	}} onChange={noop} onConfirm={(hour, minute, second) => {
+		props.onChange?.({
+			hour,
+			minute,
+			second
+		});
+		actions.setOpen(false);
+	}} second={props.second || getSeconds(Date.now())} type={props.type || "hour"} width={state.refTrigger?.clientWidth || 128} />
+          </Popover.Content>
+        </>}
+    </Popover>;
+}
+
+//#endregion
+export { TimePicker };

package/dist/components/form-components/time-picker/panel.js

@@ -0,0 +1,185 @@
+import { CheckLine } from "../../../icons/check-line.js";
+import { CloseLine } from "../../../icons/close-line.js";
+import "../../../icons/index.js";
+import { FakeScrollListCore } from "../../../primitives/fake-scroll-list/index.js";
+import "../../../primitives/index.js";
+import { createComponent, delegateEvents, effect, insert, setStyleProperty, template } from "solid-js/web";
+import { Show, createMemo } from "solid-js";
+import { createWatch, list } from "solid-tiny-utils";
+import { createStore } from "solid-js/store";
+
+//#region src/components/form-components/time-picker/panel.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div style=display:flex;flex-direction:column;position:relative><div class=tiny-time-picker__thumb></div><div style=width:100%;display:flex;position:relative></div><div class=tiny-time-picker__action><button type=button></button><button type=button>`);
+function CommonTimeList(props) {
+	return createComponent(FakeScrollListCore, {
+		get inViewIndex() {
+			return props.inViewItem;
+		},
+		get itemHeight() {
+			return props.itemHeight;
+		},
+		get items() {
+			return props.items.map((v) => v.toString().padStart(2, "0"));
+		},
+		onInViewIndexChange: (i) => {
+			props.onChange(i);
+		},
+		visibleItemsCount: 7,
+		get children() {
+			return createComponent(FakeScrollListCore.Listbox, { children: (label, key) => createComponent(FakeScrollListCore.Item, {
+				"class": "tiny-time-picker__listbox-item",
+				key,
+				children: label
+			}) });
+		}
+	});
+}
+function HourList(props) {
+	return createComponent(CommonTimeList, {
+		get inViewItem() {
+			return props.hour;
+		},
+		get itemHeight() {
+			return props.itemHeight;
+		},
+		get items() {
+			return list(0, 23);
+		},
+		onChange: (hour) => {
+			props.onChange(hour);
+		}
+	});
+}
+function MinuteList(props) {
+	return createComponent(CommonTimeList, {
+		get inViewItem() {
+			return props.minute;
+		},
+		get itemHeight() {
+			return props.itemHeight;
+		},
+		get items() {
+			return list(0, 59);
+		},
+		onChange: (minute) => {
+			props.onChange(minute);
+		}
+	});
+}
+function SecondList(props) {
+	return createComponent(CommonTimeList, {
+		get inViewItem() {
+			return props.second;
+		},
+		get itemHeight() {
+			return props.itemHeight;
+		},
+		get items() {
+			return list(0, 59);
+		},
+		onChange: (second) => {
+			props.onChange(second);
+		}
+	});
+}
+function TimePanel(props) {
+	const [time, setTime] = createStore({
+		hour: 0,
+		minute: 0,
+		second: 0
+	});
+	createWatch(() => [
+		props.hour,
+		props.minute,
+		props.second
+	], ([hour, minute, second]) => {
+		setTime({
+			hour,
+			minute,
+			second
+		});
+	});
+	createWatch(() => [
+		time.hour,
+		time.minute,
+		time.second
+	], ([hour, minute, second]) => {
+		if (hour === props.hour && minute === props.minute && second === props.second) return;
+		props.onChange(hour, minute, second);
+	});
+	const typeIndex = createMemo(() => {
+		return [
+			"hour",
+			"minute",
+			"second"
+		].indexOf(props.type);
+	});
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$5 = _el$3.nextSibling.firstChild, _el$6 = _el$5.nextSibling;
+		insert(_el$3, createComponent(HourList, {
+			get hour() {
+				return time.hour;
+			},
+			get itemHeight() {
+				return props.itemHeight;
+			},
+			onChange: (hour) => setTime("hour", hour)
+		}), null);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return typeIndex() > 0;
+			},
+			get children() {
+				return createComponent(MinuteList, {
+					get itemHeight() {
+						return props.itemHeight;
+					},
+					get minute() {
+						return time.minute;
+					},
+					onChange: (minute) => setTime("minute", minute)
+				});
+			}
+		}), null);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return typeIndex() > 1;
+			},
+			get children() {
+				return createComponent(SecondList, {
+					get itemHeight() {
+						return props.itemHeight;
+					},
+					onChange: (second) => setTime("second", second),
+					get second() {
+						return time.second;
+					}
+				});
+			}
+		}), null);
+		_el$5.$$click = () => {
+			props.onCancel(time.hour, time.minute, time.second);
+		};
+		insert(_el$5, createComponent(CloseLine, {}));
+		_el$6.$$click = () => {
+			props.onConfirm(time.hour, time.minute, time.second);
+		};
+		insert(_el$6, createComponent(CheckLine, {}));
+		effect((_p$) => {
+			var _v$ = `${props.width}px`, _v$2 = `${props.itemHeight}px`, _v$3 = `${props.itemHeight * 7 / 2 - props.itemHeight / 2}px`;
+			_v$ !== _p$.e && setStyleProperty(_el$, "width", _p$.e = _v$);
+			_v$2 !== _p$.t && setStyleProperty(_el$2, "--tiny-time-picker-thumb-height", _p$.t = _v$2);
+			_v$3 !== _p$.a && setStyleProperty(_el$2, "--tiny-time-picker-thumb-top", _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$;
+	})();
+}
+delegateEvents(["click"]);
+
+//#endregion
+export { TimePanel };

package/dist/components/form-components/time-picker/panel.jsx

@@ -0,0 +1,108 @@
+import { CheckLine } from "../../../icons/check-line.jsx";
+import { CloseLine } from "../../../icons/close-line.jsx";
+import "../../../icons/index.jsx";
+import { FakeScrollListCore } from "../../../primitives/fake-scroll-list/index.jsx";
+import "../../../primitives/index.jsx";
+import { Show, createMemo } from "solid-js";
+import { createWatch, list } from "solid-tiny-utils";
+import { createStore } from "solid-js/store";
+
+//#region src/components/form-components/time-picker/panel.tsx
+function CommonTimeList(props) {
+	return <FakeScrollListCore inViewIndex={props.inViewItem} itemHeight={props.itemHeight} items={props.items.map((v) => v.toString().padStart(2, "0"))} onInViewIndexChange={(i) => {
+		props.onChange(i);
+	}} visibleItemsCount={7}>
+      <FakeScrollListCore.Listbox>
+        {(label, key) => <FakeScrollListCore.Item class="tiny-time-picker__listbox-item" key={key}>
+            {label}
+          </FakeScrollListCore.Item>}
+      </FakeScrollListCore.Listbox>
+    </FakeScrollListCore>;
+}
+function HourList(props) {
+	return <CommonTimeList inViewItem={props.hour} itemHeight={props.itemHeight} items={list(0, 23)} onChange={(hour) => {
+		props.onChange(hour);
+	}} />;
+}
+function MinuteList(props) {
+	return <CommonTimeList inViewItem={props.minute} itemHeight={props.itemHeight} items={list(0, 59)} onChange={(minute) => {
+		props.onChange(minute);
+	}} />;
+}
+function SecondList(props) {
+	return <CommonTimeList inViewItem={props.second} itemHeight={props.itemHeight} items={list(0, 59)} onChange={(second) => {
+		props.onChange(second);
+	}} />;
+}
+function TimePanel(props) {
+	const [time, setTime] = createStore({
+		hour: 0,
+		minute: 0,
+		second: 0
+	});
+	createWatch(() => [
+		props.hour,
+		props.minute,
+		props.second
+	], ([hour, minute, second]) => {
+		setTime({
+			hour,
+			minute,
+			second
+		});
+	});
+	createWatch(() => [
+		time.hour,
+		time.minute,
+		time.second
+	], ([hour, minute, second]) => {
+		if (hour === props.hour && minute === props.minute && second === props.second) return;
+		props.onChange(hour, minute, second);
+	});
+	const typeIndex = createMemo(() => {
+		return [
+			"hour",
+			"minute",
+			"second"
+		].indexOf(props.type);
+	});
+	return <div style={{
+		width: `${props.width}px`,
+		display: "flex",
+		"flex-direction": "column",
+		position: "relative"
+	}}>
+      <div class="tiny-time-picker__thumb" style={{
+		"--tiny-time-picker-thumb-height": `${props.itemHeight}px`,
+		"--tiny-time-picker-thumb-top": `${props.itemHeight * 7 / 2 - props.itemHeight / 2}px`
+	}} />
+      <div style={{
+		width: "100%",
+		display: "flex",
+		position: "relative"
+	}}>
+        <HourList hour={time.hour} itemHeight={props.itemHeight} onChange={(hour) => setTime("hour", hour)} />
+        <Show when={typeIndex() > 0}>
+          <MinuteList itemHeight={props.itemHeight} minute={time.minute} onChange={(minute) => setTime("minute", minute)} />
+        </Show>
+        <Show when={typeIndex() > 1}>
+          <SecondList itemHeight={props.itemHeight} onChange={(second) => setTime("second", second)} second={time.second} />
+        </Show>
+      </div>
+      <div class="tiny-time-picker__action">
+        <button onClick={() => {
+		props.onCancel(time.hour, time.minute, time.second);
+	}} type="button">
+          <CloseLine />
+        </button>
+        <button onClick={() => {
+		props.onConfirm(time.hour, time.minute, time.second);
+	}} type="button">
+          <CheckLine />
+        </button>
+      </div>
+    </div>;
+}
+
+//#endregion
+export { TimePanel };

package/dist/components/form-components/time-picker/trigger.js

@@ -0,0 +1,68 @@
+import { VisuallyHidden } from "../../visually-hidden/index.js";
+import { className, createComponent, effect, insert, memo, setAttribute, style, template } from "solid-js/web";
+import { Show, createMemo } from "solid-js";
+import { combineClass, combineStyle, dataIf } from "solid-tiny-utils";
+
+//#region src/components/form-components/time-picker/trigger.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<input readonly tabindex=-1 type=text>`), _tmpl$2 = /* @__PURE__ */ template(`<div class=tiny-time-picker-trigger__item>`), _tmpl$3 = /* @__PURE__ */ template(`<button type=button><div class=tiny-time-picker-trigger__item>`);
+function TimeTrigger(props) {
+	const typeIndex = createMemo(() => [
+		"hour",
+		"minute",
+		"second"
+	].indexOf(props.type));
+	const toStr = (num) => {
+		if (num === null) return "";
+		return num.toString().padStart(2, "0");
+	};
+	return (() => {
+		var _el$ = _tmpl$3(), _el$3 = _el$.firstChild;
+		insert(_el$, createComponent(VisuallyHidden, { get children() {
+			var _el$2 = _tmpl$();
+			effect(() => _el$2.disabled = props.disabled);
+			return _el$2;
+		} }), _el$3);
+		insert(_el$3, () => toStr(props.hour) || "hh");
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return typeIndex() > 0;
+			},
+			get children() {
+				var _el$4 = _tmpl$2();
+				insert(_el$4, () => toStr(props.minute) || "mm");
+				effect(() => setAttribute(_el$4, "data-empty", dataIf(props.minute === null)));
+				return _el$4;
+			}
+		}), null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return typeIndex() > 1;
+			},
+			get children() {
+				var _el$5 = _tmpl$2();
+				insert(_el$5, () => toStr(props.second) || "ss");
+				effect(() => setAttribute(_el$5, "data-empty", dataIf(props.second === null)));
+				return _el$5;
+			}
+		}), null);
+		effect((_p$) => {
+			var _v$ = combineClass("tiny-time-picker-trigger tiny-time-picker-trigger-vars", props.class), _v$2 = dataIf(props.disabled), _v$3 = props.size, _v$4 = combineStyle({}, props.style), _v$5 = dataIf(props.hour === null);
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "data-disabled", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "data-size", _p$.a = _v$3);
+			_p$.o = style(_el$, _v$4, _p$.o);
+			_v$5 !== _p$.i && setAttribute(_el$3, "data-empty", _p$.i = _v$5);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0
+		});
+		return _el$;
+	})();
+}
+
+//#endregion
+export { TimeTrigger };