niuma-ui 1.1.12 → 1.2.0

package/dist/components/RsTimePicker.css

@@ -0,0 +1,106 @@
+
+.rs-time-picker[data-v-92f32a71] {
+  width: 100%;
+}
+.rs-time-picker-embedded[data-v-92f32a71] {
+  min-width: 0;
+}
+.rs-time-picker__trigger[data-v-92f32a71] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rs-space-sm);
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--rs-control-height-md);
+  min-height: var(--rs-control-height-md);
+  padding: 0 var(--rs-space-md);
+  border: 1px solid var(--rs-input-border, var(--rs-border));
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-input-bg);
+  color: var(--rs-text);
+  font: inherit;
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-tight);
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+  box-shadow: var(--rs-input-shadow, none);
+  transition:
+    border-color var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast),
+    background var(--rs-transition-fast);
+}
+.rs-time-picker--ssm .rs-time-picker__trigger[data-v-92f32a71] {
+  height: var(--rs-control-height-ssm);
+  min-height: var(--rs-control-height-ssm);
+  padding: 0 var(--rs-space-xs);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-time-picker--sm .rs-time-picker__trigger[data-v-92f32a71] {
+  height: var(--rs-control-height-sm);
+  min-height: var(--rs-control-height-sm);
+  padding: 0 var(--rs-space-sm);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-time-picker--lg .rs-time-picker__trigger[data-v-92f32a71] {
+  height: var(--rs-control-height-lg);
+  min-height: var(--rs-control-height-lg);
+  padding: 0 var(--rs-space-lg);
+  font-size: var(--rs-font-size-base);
+}
+.rs-time-picker__trigger--embedded[data-v-92f32a71] {
+  min-width: 5.5rem;
+  background: color-mix(in srgb, var(--rs-surface) 72%, transparent);
+}
+.rs-time-picker--ssm .rs-time-picker__trigger--embedded[data-v-92f32a71] {
+  min-width: 4.75rem;
+}
+.rs-time-picker--lg .rs-time-picker__trigger--embedded[data-v-92f32a71] {
+  min-width: 6.25rem;
+}
+.rs-time-picker__trigger[data-v-92f32a71]:hover:not(:disabled) {
+  border-color: var(--rs-input-border-hover, var(--rs-border));
+}
+.rs-time-picker__trigger[data-v-92f32a71]:focus-visible {
+  outline: none;
+  border-color: var(--rs-focus-border, var(--rs-primary));
+  box-shadow:
+    var(--rs-input-shadow, none),
+    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-time-picker__trigger[data-v-92f32a71]:disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+.rs-time-picker__trigger--placeholder .rs-time-picker__value[data-v-92f32a71] {
+  color: var(--rs-placeholder);
+}
+.rs-time-picker__trigger--invalid[data-v-92f32a71] {
+  border-color: var(--rs-danger, var(--rs-color-danger, #dc2626));
+}
+.rs-time-picker__trigger--invalid[data-v-92f32a71]:focus-visible {
+  border-color: var(--rs-danger, var(--rs-color-danger, #dc2626));
+  box-shadow:
+    var(--rs-input-shadow, none),
+    0 0 0 var(--rs-focus-ring-width, 2px)
+      color-mix(in srgb, var(--rs-danger, #dc2626) 14%, transparent);
+}
+.rs-time-picker__leading[data-v-92f32a71] {
+  display: inline-flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  gap: var(--rs-space-sm);
+}
+.rs-time-picker__icon[data-v-92f32a71],
+.rs-time-picker__chevron[data-v-92f32a71] {
+  flex-shrink: 0;
+  color: var(--rs-muted);
+}
+.rs-time-picker__value[data-v-92f32a71] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/components/RsTimePicker.d.ts

@@ -0,0 +1,41 @@
+import { type RsComponentSize } from '../theme/types';
+import { type RsTimeRangeValue } from './time-picker-utils';
+export type { RsTimeRangeValue } from './time-picker-utils';
+export type RsTimePickerLabelPosition = 'top' | 'left';
+type __VLS_Props = {
+    label?: string;
+    hint?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    range?: boolean;
+    withSeconds?: boolean;
+    minTime?: string;
+    maxTime?: string;
+    embedded?: boolean;
+    labelPosition?: RsTimePickerLabelPosition;
+    size?: RsComponentSize;
+    id?: string;
+    invalid?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | RsTimeRangeValue;
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | RsTimeRangeValue) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | RsTimeRangeValue) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    required: boolean;
+    disabled: boolean;
+    range: boolean;
+    labelPosition: RsTimePickerLabelPosition;
+    withSeconds: boolean;
+    embedded: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/RsTimePicker.impl.js

@@ -0,0 +1,374 @@
+import { useRsI18n } from "../composables/useRsI18n.js";
+import RsIcon_default from "./RsIcon.js";
+import { RS_COMPONENT_SIZE_ICON_PX } from "../theme/types.js";
+import { isRsFormItemBoundControl, useRsFormItemContext } from "./form-utils.js";
+import { useResolvedRsComponentSize } from "./resolve-size.js";
+import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "./reka.js";
+import { EMPTY_TIME_RANGE, formatTimeFromParts, formatTimeRangeDisplay, getCurrentTime, isTimeRangeEmpty, isTimeRangeOrderedValues, isTimeWithinBounds, parseTimeValue, pickEarlierTime, pickLaterTime } from "./time-picker-utils.js";
+import RsTimePickerColumns_default from "./RsTimePickerColumns.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, openBlock, ref, resolveComponent, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx } from "vue";
+//#region src/components/RsTimePicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "rs-field__label"
+};
+var _hoisted_2 = ["for"];
+var _hoisted_3 = {
+	key: 2,
+	class: "rs-field__required",
+	"aria-hidden": "true"
+};
+var _hoisted_4 = { class: "rs-time-picker" };
+var _hoisted_5 = { class: "rs-time-picker__leading" };
+var _hoisted_6 = { class: "rs-time-picker__value" };
+var _hoisted_7 = {
+	key: 0,
+	class: "rs-time-picker__panel"
+};
+var _hoisted_8 = {
+	key: 0,
+	class: "rs-time-picker__range-grid"
+};
+var _hoisted_9 = { class: "rs-time-picker__range-pane" };
+var _hoisted_10 = { class: "rs-time-picker__pane-title" };
+var _hoisted_11 = { class: "rs-time-picker__range-pane" };
+var _hoisted_12 = { class: "rs-time-picker__pane-title" };
+var _hoisted_13 = { class: "rs-time-picker__footer" };
+var _hoisted_14 = { class: "rs-time-picker__actions" };
+var _hoisted_15 = ["disabled"];
+var _hoisted_16 = {
+	key: 1,
+	class: "rs-field__hint"
+};
+var RsTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsTimePicker",
+	inheritAttrs: false,
+	__name: "RsTimePicker",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		hint: {},
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		range: {
+			type: Boolean,
+			default: false
+		},
+		withSeconds: {
+			type: Boolean,
+			default: false
+		},
+		minTime: {},
+		maxTime: {},
+		embedded: {
+			type: Boolean,
+			default: false
+		},
+		labelPosition: { default: "top" },
+		size: {},
+		id: {},
+		invalid: { type: Boolean }
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {},
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {}
+	}),
+	emits: ["update:modelValue", "update:open"],
+	setup(__props) {
+		function isTimeRangeModel(value) {
+			return typeof value === "object" && value !== null && ("start" in value || "end" in value);
+		}
+		const model = useModel(__props, "modelValue");
+		const open = useModel(__props, "open");
+		const props = __props;
+		const fieldId = useId();
+		const attrs = useAttrs();
+		const { t } = useRsI18n();
+		const formItem = useRsFormItemContext();
+		const boundToItem = computed(() => isRsFormItemBoundControl(formItem, { id: props.id }));
+		const isInvalid = computed(() => Boolean(props.invalid || boundToItem.value && formItem?.invalid.value));
+		const triggerId = computed(() => props.id || fieldId);
+		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const triggerIconSize = computed(() => RS_COMPONENT_SIZE_ICON_PX[resolvedSize.value]);
+		const columnsRef = useTemplateRef("columnsRef");
+		const draftHour = ref(0);
+		const draftMinute = ref(0);
+		const draftSecond = ref(0);
+		const draftStartTime = ref("");
+		const draftEndTime = ref("");
+		const rangeModel = computed({
+			get() {
+				if (!props.range) return { ...EMPTY_TIME_RANGE };
+				return isTimeRangeModel(model.value) ? model.value : { ...EMPTY_TIME_RANGE };
+			},
+			set(value) {
+				model.value = value;
+			}
+		});
+		const singleModel = computed({
+			get() {
+				if (props.range) return "";
+				return typeof model.value === "string" ? model.value : "";
+			},
+			set(value) {
+				model.value = value;
+			}
+		});
+		const startMaxTime = computed(() => pickEarlierTime(props.maxTime, draftEndTime.value, props.withSeconds));
+		const endMinTime = computed(() => pickLaterTime(props.minTime, draftStartTime.value, props.withSeconds));
+		const isEmpty = computed(() => props.range ? isTimeRangeEmpty(rangeModel.value) : !singleModel.value);
+		const displayValue = computed(() => {
+			if (props.range) {
+				const formatted = formatTimeRangeDisplay(rangeModel.value, { separator: t("timePicker.separator") });
+				if (formatted) return formatted;
+				return props.placeholder ?? t("timePicker.rangePlaceholder");
+			}
+			if (!singleModel.value) return props.placeholder ?? (props.embedded ? t("timePicker.embeddedPlaceholder") : t("timePicker.placeholder"));
+			return singleModel.value;
+		});
+		const draftTime = computed({
+			get() {
+				return formatTimeFromParts(draftHour.value, draftMinute.value, draftSecond.value, props.withSeconds);
+			},
+			set(value) {
+				const parsed = parseTimeValue(value, props.withSeconds);
+				if (!parsed) return;
+				draftHour.value = parsed.hour;
+				draftMinute.value = parsed.minute;
+				draftSecond.value = parsed.second;
+			}
+		});
+		function syncSingleDraft() {
+			const parsed = parseTimeValue(singleModel.value, props.withSeconds);
+			if (parsed) {
+				draftHour.value = parsed.hour;
+				draftMinute.value = parsed.minute;
+				draftSecond.value = parsed.second;
+				return;
+			}
+			const current = getCurrentTime();
+			draftHour.value = current.hour;
+			draftMinute.value = current.minute;
+			draftSecond.value = current.second;
+		}
+		function syncRangeDraft() {
+			const start = parseTimeValue(rangeModel.value.start, props.withSeconds);
+			const end = parseTimeValue(rangeModel.value.end, props.withSeconds);
+			const current = getCurrentTime();
+			draftStartTime.value = start ? formatTimeFromParts(start.hour, start.minute, start.second, props.withSeconds) : formatTimeFromParts(9, 0, 0, props.withSeconds);
+			draftEndTime.value = end ? formatTimeFromParts(end.hour, end.minute, end.second, props.withSeconds) : formatTimeFromParts(start?.hour ?? Math.min(current.hour + 1, 23), start?.minute ?? current.minute, start?.second ?? current.second, props.withSeconds);
+		}
+		function syncDraftFromModel() {
+			if (props.range) {
+				syncRangeDraft();
+				return;
+			}
+			syncSingleDraft();
+		}
+		function isUnitDisabled(unit, value) {
+			return !isTimeWithinBounds(unit === "hour" ? value : draftHour.value, unit === "minute" ? value : draftMinute.value, unit === "second" ? value : draftSecond.value, {
+				minTime: props.minTime,
+				maxTime: props.maxTime,
+				withSeconds: props.withSeconds
+			});
+		}
+		function confirmSingleSelection() {
+			if (!isTimeWithinBounds(draftHour.value, draftMinute.value, draftSecond.value, {
+				minTime: props.minTime,
+				maxTime: props.maxTime,
+				withSeconds: props.withSeconds
+			})) return;
+			singleModel.value = formatTimeFromParts(draftHour.value, draftMinute.value, draftSecond.value, props.withSeconds);
+			open.value = false;
+		}
+		function confirmRangeSelection() {
+			const start = draftStartTime.value;
+			const end = draftEndTime.value;
+			const startParsed = parseTimeValue(start, props.withSeconds);
+			const endParsed = parseTimeValue(end, props.withSeconds);
+			if (!startParsed || !endParsed) return;
+			if (!isTimeRangeOrderedValues(start, end, props.withSeconds)) return;
+			if (!isTimeWithinBounds(startParsed.hour, startParsed.minute, startParsed.second, {
+				minTime: props.minTime,
+				maxTime: startMaxTime.value,
+				withSeconds: props.withSeconds
+			}) || !isTimeWithinBounds(endParsed.hour, endParsed.minute, endParsed.second, {
+				minTime: endMinTime.value,
+				maxTime: props.maxTime,
+				withSeconds: props.withSeconds
+			})) return;
+			rangeModel.value = {
+				start,
+				end
+			};
+			open.value = false;
+		}
+		function confirmSelection() {
+			if (props.range) {
+				confirmRangeSelection();
+				return;
+			}
+			confirmSingleSelection();
+		}
+		function clearSelection() {
+			if (props.range) rangeModel.value = { ...EMPTY_TIME_RANGE };
+			else singleModel.value = "";
+			open.value = false;
+		}
+		function selectPreset() {
+			if (props.range) {
+				draftStartTime.value = formatTimeFromParts(9, 0, 0, props.withSeconds);
+				draftEndTime.value = formatTimeFromParts(18, 0, 0, props.withSeconds);
+				confirmRangeSelection();
+				return;
+			}
+			const current = getCurrentTime();
+			draftHour.value = current.hour;
+			draftMinute.value = current.minute;
+			draftSecond.value = current.second;
+			confirmSingleSelection();
+		}
+		watch(open, async (isOpen) => {
+			if (!isOpen) return;
+			syncDraftFromModel();
+			if (!props.range) {
+				await nextTick();
+				columnsRef.value?.scrollToSelectionAfterPaint();
+			}
+		});
+		return (_ctx, _cache) => {
+			const _component_RsTimePicker = resolveComponent("RsTimePicker", true);
+			return openBlock(), createElementBlock("div", { class: normalizeClass([
+				__props.embedded ? "rs-time-picker-embedded" : "rs-field",
+				`rs-time-picker--${unref(resolvedSize)}`,
+				!__props.embedded && `rs-field--label-${__props.labelPosition}`
+			]) }, [
+				!__props.embedded && __props.label ? (openBlock(), createElementBlock("span", _hoisted_1, [__props.labelPosition === "left" ? (openBlock(), createElementBlock("label", {
+					key: 0,
+					for: unref(fieldId)
+				}, toDisplayString(__props.label), 9, _hoisted_2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(__props.label), 1)], 64)), __props.required ? (openBlock(), createElementBlock("span", _hoisted_3, "*")) : createCommentVNode("", true)])) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_4, [createVNode(unref(PopoverRoot), {
+					open: open.value,
+					"onUpdate:open": _cache[3] || (_cache[3] = ($event) => open.value = $event),
+					modal: !__props.embedded
+				}, {
+					default: withCtx(() => [createVNode(unref(PopoverTrigger), mergeProps(__props.embedded ? void 0 : unref(attrs), {
+						id: __props.embedded ? void 0 : triggerId.value,
+						type: "button",
+						class: ["rs-time-picker__trigger", {
+							"rs-time-picker__trigger--placeholder": isEmpty.value,
+							"rs-time-picker__trigger--embedded": __props.embedded,
+							"rs-time-picker__trigger--invalid": !__props.embedded && isInvalid.value
+						}],
+						disabled: __props.disabled,
+						"aria-invalid": !__props.embedded && isInvalid.value ? true : void 0
+					}), {
+						default: withCtx(() => [createElementVNode("span", _hoisted_5, [!__props.embedded ? (openBlock(), createBlock(RsIcon_default, {
+							key: 0,
+							name: "clock",
+							size: triggerIconSize.value,
+							class: "rs-time-picker__icon"
+						}, null, 8, ["size"])) : createCommentVNode("", true), createElementVNode("span", _hoisted_6, toDisplayString(displayValue.value), 1)]), createVNode(RsIcon_default, {
+							name: "chevron-down",
+							size: triggerIconSize.value,
+							class: "rs-time-picker__chevron"
+						}, null, 8, ["size"])]),
+						_: 1
+					}, 16, [
+						"id",
+						"class",
+						"disabled",
+						"aria-invalid"
+					]), createVNode(unref(PopoverPortal), null, {
+						default: withCtx(() => [createVNode(unref(PopoverContent), {
+							class: normalizeClass(["rs-time-picker__content", {
+								"rs-time-picker__content--range": __props.range && !__props.embedded,
+								"rs-time-picker__content--embedded": __props.embedded
+							}]),
+							"side-offset": 6,
+							align: "start"
+						}, {
+							default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", _hoisted_7, [__props.range ? (openBlock(), createElementBlock("div", _hoisted_8, [createElementVNode("section", _hoisted_9, [createElementVNode("span", _hoisted_10, toDisplayString(unref(t)("timePicker.rangeStart")), 1), createVNode(_component_RsTimePicker, {
+								modelValue: draftStartTime.value,
+								"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => draftStartTime.value = $event),
+								embedded: "",
+								size: unref(resolvedSize),
+								"with-seconds": __props.withSeconds,
+								"min-time": __props.minTime,
+								"max-time": startMaxTime.value,
+								disabled: __props.disabled
+							}, null, 8, [
+								"modelValue",
+								"size",
+								"with-seconds",
+								"min-time",
+								"max-time",
+								"disabled"
+							])]), createElementVNode("section", _hoisted_11, [createElementVNode("span", _hoisted_12, toDisplayString(unref(t)("timePicker.rangeEnd")), 1), createVNode(_component_RsTimePicker, {
+								modelValue: draftEndTime.value,
+								"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => draftEndTime.value = $event),
+								embedded: "",
+								size: unref(resolvedSize),
+								"with-seconds": __props.withSeconds,
+								"min-time": endMinTime.value,
+								"max-time": __props.maxTime,
+								disabled: __props.disabled
+							}, null, 8, [
+								"modelValue",
+								"size",
+								"with-seconds",
+								"min-time",
+								"max-time",
+								"disabled"
+							])])])) : (openBlock(), createBlock(RsTimePickerColumns_default, {
+								key: 1,
+								ref_key: "columnsRef",
+								ref: columnsRef,
+								modelValue: draftTime.value,
+								"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => draftTime.value = $event),
+								second: __props.withSeconds,
+								size: unref(resolvedSize),
+								disabled: __props.disabled,
+								"is-unit-disabled": isUnitDisabled
+							}, null, 8, [
+								"modelValue",
+								"second",
+								"size",
+								"disabled"
+							])), createElementVNode("footer", _hoisted_13, [createElementVNode("button", {
+								type: "button",
+								class: "rs-time-picker__link",
+								onClick: selectPreset
+							}, toDisplayString(__props.range ? unref(t)("timePicker.rangePreset") : unref(t)("timePicker.now")), 1), createElementVNode("div", _hoisted_14, [createElementVNode("button", {
+								type: "button",
+								class: "rs-time-picker__ghost",
+								onClick: clearSelection
+							}, toDisplayString(__props.range ? unref(t)("timePicker.rangeClear") : unref(t)("timePicker.clear")), 1), createElementVNode("button", {
+								type: "button",
+								class: "rs-time-picker__confirm",
+								disabled: __props.range && (!draftStartTime.value || !draftEndTime.value),
+								onClick: confirmSelection
+							}, toDisplayString(unref(t)("timePicker.confirm")), 9, _hoisted_15)])])])) : createCommentVNode("", true)]),
+							_: 1
+						}, 8, ["class"])]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["open", "modal"])]),
+				!__props.embedded && __props.hint ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { RsTimePicker_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/RsTimePicker.js

@@ -0,0 +1,10 @@
+import './RsTimePicker.css'
+import './RsTimePicker-1.css'
+import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-helper.js";
+import RsTimePicker_vue_vue_type_script_setup_true_lang_default from "./RsTimePicker.impl.js";
+
+
+//#region src/components/RsTimePicker.vue
+var RsTimePicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsTimePicker_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-92f32a71"]]);
+//#endregion
+export { RsTimePicker_default as default };

package/dist/components/RsTimePickerColumns.css

@@ -0,0 +1,104 @@
+
+.rs-time-columns[data-v-af4da4ba] {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--rs-space-sm);
+  --rs-time-columns-list-max-height: 10rem;
+  --rs-time-columns-item-padding-y: 0.375rem;
+  --rs-time-columns-item-font-size: var(--rs-font-size-sm);
+  --rs-time-columns-label-font-size: var(--rs-font-size-xs);
+}
+.rs-time-columns--seconds[data-v-af4da4ba] {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.rs-time-columns--ssm[data-v-af4da4ba] {
+  --rs-time-columns-list-max-height: 7.5rem;
+  --rs-time-columns-item-padding-y: 0.2rem;
+  --rs-time-columns-item-font-size: var(--rs-font-size-xs);
+  --rs-time-columns-label-font-size: var(--rs-font-size-xs);
+  gap: var(--rs-space-xs);
+}
+.rs-time-columns--sm[data-v-af4da4ba] {
+  --rs-time-columns-list-max-height: 8.5rem;
+  --rs-time-columns-item-padding-y: 0.28rem;
+  --rs-time-columns-item-font-size: var(--rs-font-size-xs);
+  --rs-time-columns-label-font-size: var(--rs-font-size-xs);
+}
+.rs-time-columns--lg[data-v-af4da4ba] {
+  --rs-time-columns-list-max-height: 12rem;
+  --rs-time-columns-item-padding-y: 0.5rem;
+  --rs-time-columns-item-font-size: var(--rs-font-size-base);
+  --rs-time-columns-label-font-size: var(--rs-font-size-xs);
+}
+.rs-time-columns__column[data-v-af4da4ba] {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.rs-time-columns__label[data-v-af4da4ba] {
+  text-align: center;
+  font-size: var(--rs-time-columns-label-font-size);
+  font-weight: var(--rs-font-weight-medium);
+  letter-spacing: 0.02em;
+  color: var(--rs-muted);
+}
+.rs-time-columns__list-shell[data-v-af4da4ba] {
+  overflow: hidden;
+  border: 1px solid var(--rs-border-subtle);
+  border-radius: var(--rs-radius-sm);
+  background: color-mix(in srgb, var(--rs-surface) 72%, transparent);
+}
+.rs-time-columns__list[data-v-af4da4ba] {
+  position: relative;
+  max-height: var(--rs-time-columns-list-max-height);
+  overflow-y: auto;
+  padding: 0.25rem;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--rs-muted) 42%, transparent) transparent;
+}
+/* 去掉 Windows 原生滚动条上下三角，避免盖住圆角描边 */
+.rs-time-columns__list[data-v-af4da4ba]::-webkit-scrollbar {
+  width: 6px;
+}
+.rs-time-columns__list[data-v-af4da4ba]::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
+}
+.rs-time-columns__list[data-v-af4da4ba]::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--rs-muted) 42%, transparent);
+}
+.rs-time-columns__list[data-v-af4da4ba]::-webkit-scrollbar-track {
+  background: transparent;
+}
+.rs-time-columns__item[data-v-af4da4ba] {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--rs-radius-sm);
+  padding: var(--rs-time-columns-item-padding-y) 0;
+  background: transparent;
+  color: var(--rs-text);
+  font-size: var(--rs-time-columns-item-font-size);
+  line-height: var(--rs-line-height-tight);
+  cursor: pointer;
+  transition: background var(--rs-transition-fast), color var(--rs-transition-fast);
+}
+.rs-time-columns__item[data-v-af4da4ba]:hover:not(:disabled) {
+  background: var(--rs-surface-hover);
+}
+.rs-time-columns__item--active[data-v-af4da4ba] {
+  background: var(--rs-primary);
+  color: var(--rs-primary-foreground);
+}
+.rs-time-columns__item--active[data-v-af4da4ba]:hover:not(:disabled) {
+  opacity: 0.92;
+}
+.rs-time-columns__item[data-v-af4da4ba]:disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+}

package/dist/components/RsTimePickerColumns.d.ts

@@ -0,0 +1,30 @@
+import type { RsComponentSize } from '../theme/types';
+import { type RsTimeUnit } from './time-picker-utils';
+type __VLS_Props = {
+    minuteStep?: number;
+    second?: boolean;
+    disabled?: boolean;
+    size?: RsComponentSize;
+    isUnitDisabled?: (unit: RsTimeUnit, value: number) => boolean;
+};
+declare function scrollToSelection(): void;
+declare function scrollToSelectionAfterPaint(): void;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    scrollToSelection: typeof scrollToSelection;
+    scrollToSelectionAfterPaint: typeof scrollToSelectionAfterPaint;
+    resolvedSize: import("vue").ComputedRef<RsComponentSize>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    second: boolean;
+    minuteStep: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;