WidgetTimeRangeField

Source: client/lib/theme/vueda-tailwind/widgets/index.js

The row holding both bounds and the separator. Without it the two shells are block-level and stack, so a time range reads as two unrelated fields.

Slot	Default classes	Description
root	`flex w-full items-center gap-2`	The row holding both bounds and the separator. Without it the two shells are block-level and stack, so a time range reads as two unrelated fields.
field	`flex-1 min-w-0`	Each bound's segment shell. Shares the row evenly and may shrink, so a narrow column keeps both bounds on one line.
literal		Pass-through hook for the literal separators inside a bound ("😊. Segment type comes from TimeFieldInput.root.
separator	`shrink-0 text-muted-foreground`	The en dash between the two bounds. Muted and fixed-width so it reads as a range connector rather than a segment.

root

The row holding both bounds and the separator. Without it the two shells are block-level and stack, so a time range reads as two unrelated fields.

Default classes:

flex w-full items-center gap-2

Source: client/lib/theme/vueda-tailwind/widgets/WidgetTimeRangeField.theme.js:18

Each bound's segment shell. Shares the row evenly and may shrink, so a narrow column keeps both bounds on one line.

Default classes:

flex-1 min-w-0

Source: client/lib/theme/vueda-tailwind/widgets/WidgetTimeRangeField.theme.js:22

Pass-through hook for the literal separators inside a bound ("😊. Segment type comes from TimeFieldInput.root.

Source: client/lib/theme/vueda-tailwind/widgets/WidgetTimeRangeField.theme.js:26

The en dash between the two bounds. Muted and fixed-width so it reads as a range connector rather than a segment.

Default classes:

shrink-0 text-muted-foreground

Source: client/lib/theme/vueda-tailwind/widgets/WidgetTimeRangeField.theme.js:30