@bagelink/vue 0.0.1084 → 0.0.1090

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAI/D,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,IAAI,GAAE,MAAY,QAO1D;AAED,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,UAMlC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EACnD,KAAK,CAAC,EAAE,UAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC,OAcP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,UAAU,CAAC,EAAE,MAAM,EAAE,GACnB,cAAc,CAAC,CAAC,CAAC,CAWnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAoBlF;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAatD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAIvC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,SAAO,GAAG,MAAM,GAAG,SAAS,CAG/G;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAI/D,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,IAAI,GAAE,MAAY,QAO1D;AAED,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,UAMlC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EACnD,KAAK,CAAC,EAAE,UAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC,OAcP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,UAAU,CAAC,EAAE,MAAM,EAAE,GACnB,cAAc,CAAC,CAAC,CAAC,CAgBnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAoBlF;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAatD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAIvC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,SAAO,GAAG,MAAM,GAAG,SAAS,CAG/G;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1084",
+  "version": "0.0.1090",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/form/BglForm.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { BglField, type BglFormSchemaFnT, Title, useBglSchema, useModal } from '@bagelink/vue'
-import { inject, onMounted, useSlots, watch } from 'vue'
+import { inject, useSlots, watch } from 'vue'
 import { FORM_STATE_KEY, provideBagelFormState, type BagelFormState } from './useBagelFormState'
 
 export type FormStatus = 'idle' | 'loading' | 'success' | 'error'

package/src/components/form/inputs/CodeEditor/Index.vue

@@ -10,22 +10,24 @@ import { appendStyle, appendScript } from '@bagelink/vue'
 import { nextTick, onMounted, watch } from 'vue'
 
 // Props
-const { language, readonly = false, modelValue = '', autodetect, ignoreIllegals = true } = defineProps<{
+const { language, readonly = false, modelValue = '', autodetect, ignoreIllegals = true, label, height = '300px' } = defineProps<{
 	language?: Language
 	readonly?: boolean
 	modelValue?: string
 	autodetect?: boolean
 	ignoreIllegals?: boolean
+	label?: string
+	height?: string
 }>()
 
 const emit = defineEmits(['update:modelValue'])
 
 let hljs = $ref<HilightJS | null>(null)
 
+let elHeight = $ref(height)
 // State and refs
 let code = $ref('')
 const textarea = $ref<HTMLTextAreaElement>()
-let height = $ref('300px')
 let loaded = $ref(false)
 
 // Computed properties
@@ -76,8 +78,8 @@ function handleTab(event: KeyboardEvent) {
 }
 
 function adjustHeight() {
-	if (textarea?.scrollHeight && textarea.scrollHeight > 300) {
-		height = `${textarea.scrollHeight}px`
+	if (textarea?.scrollHeight && textarea.scrollHeight > Number.parseInt(elHeight)) {
+		elHeight = `${textarea.scrollHeight}px`
 	}
 }
 
@@ -105,30 +107,33 @@ watch(() => modelValue, (newVal) => {
 </script>
 
 <template>
-	<div v-if="loaded" class="code-editor-wrap grid rounded p-1 overflow hm-300px ">
-		<div class="relative block h-100" :style="{ height }">
-			<pre class=" overflow-hidden absolute inset-0 p-0 m-0  h-100  codeText">
-				<code :class="className" v-html="highlightedCode" />
-			</pre>
-			<textarea
-				v-if="!readonly"
-				ref="textarea"
-				v-model="code"
-				class="code-editor absolute inset-0 bg-transparent overflow-hidden h-100 p-0 m-0 codeText border-none"
-				spellcheck="false"
-				placeholder="Write your code here"
-				aria-label="Code Editor"
-				data-gramm="false"
-				@keydown.tab.prevent="handleTab"
-				@input="emit('update:modelValue', code)"
-			/>
+	<div class="mb-05">
+		<label v-if="label" class="label txt-start">{{ label }}</label>
+		<div v-if="loaded" class="code-editor-wrap grid rounded p-1 overflow hm-300px ltr  txt-start relative h-100p">
+			<div class="relative block h-100" :style="{ height: `calc(${elHeight} - 2rem)` }">
+				<pre class=" overflow-hidden absolute inset-0 p-0 m-0  h-100  codeText">
+					<code class="absolute inset-0" :class="className" v-html="highlightedCode" />
+				</pre>
+				<textarea
+					v-if="!readonly"
+					ref="textarea"
+					v-model="code"
+					class="code-editor absolute inset-0 bg-transparent overflow-hidden h-100 p-0 m-0 codeText border-none txt-start"
+					spellcheck="false"
+					placeholder="Write your code here"
+					aria-label="Code Editor"
+					data-gramm="false"
+					@keydown.tab.prevent="handleTab"
+					@input="emit('update:modelValue', code)"
+				/>
+			</div>
 		</div>
 	</div>
 </template>
 
 <style>
 pre code.hljs{
-    padding: 0 !important;
+	padding: 0 !important;
 	inset: 0 !important;
 	position: absolute;
 }
@@ -140,6 +145,7 @@ pre code.hljs{
   white-space: pre-wrap;
   word-wrap: break-word;
   caret-color: var(--bgl-white);
+  color: var(--bgl-white);
 }
 .code-editor-wrap {
   background: #282c34;

package/src/components/form/inputs/DatePick.vue

@@ -0,0 +1,459 @@
+<script setup lang="ts">
+import { Btn, TextInput } from '@bagelink/vue'
+import { computed, ref } from 'vue'
+
+const props = withDefaults(
+	defineProps<{
+		required?: boolean
+		label?: string
+		editMode?: boolean
+		small?: boolean
+		enableTime?: boolean
+		modelValue?: string | Date
+		defaultValue?: string | Date
+		rtl?: boolean
+		min?: string | Date
+		max?: string | Date
+		showInput?: boolean
+		timezone?: string // e.g. 'America/New_York', 'Europe/London'
+	}>(),
+	{
+		enableTime: false,
+		editMode: true,
+		small: false,
+		rtl: false,
+		showInput: true,
+		timezone: 'UTC'
+	},
+)
+
+const emit = defineEmits(['update:modelValue'])
+const isOpen = ref(false)
+const currentMonth = ref(new Date())
+
+const inputType = computed(() => props.enableTime ? 'datetime-local' : 'date')
+
+function toLocalDate(date: Date): Date {
+	if (!date) return date
+	try {
+		return new Date(date.toLocaleString('en-US', { timeZone: props.timezone }))
+	} catch (e) {
+		console.warn(`Invalid timezone: ${props.timezone}, falling back to UTC`)
+		return date
+	}
+}
+
+function fromLocalDate(date: Date): Date {
+	if (!date) return date
+	try {
+		const localDate = new Date(date.toLocaleString('en-US', { timeZone: 'UTC' }))
+		const tzDate = new Date(date.toLocaleString('en-US', { timeZone: props.timezone }))
+		const diff = localDate.getTime() - tzDate.getTime()
+		return new Date(date.getTime() + diff)
+	} catch (e) {
+		console.warn(`Invalid timezone: ${props.timezone}, falling back to UTC`)
+		return date
+	}
+}
+
+const formattedValue = computed(() => {
+	if (!props.modelValue) return ''
+	const date = typeof props.modelValue === 'string' ? new Date(props.modelValue) : props.modelValue
+	const localDate = toLocalDate(date)
+
+	if (props.enableTime) {
+		return localDate.toISOString().slice(0, 16) // Format: YYYY-MM-DDTHH:mm
+	}
+	return localDate.toISOString().split('T')[0] // Format: YYYY-MM-DD
+})
+
+const formattedMin = computed(() => {
+	if (!props.min) return undefined
+	const date = typeof props.min === 'string' ? new Date(props.min) : props.min
+	const localDate = toLocalDate(date)
+	return props.enableTime ? localDate.toISOString().slice(0, 16) : localDate.toISOString().split('T')[0]
+})
+
+const formattedMax = computed(() => {
+	if (!props.max) return undefined
+	const date = typeof props.max === 'string' ? new Date(props.max) : props.max
+	const localDate = toLocalDate(date)
+	return props.enableTime ? localDate.toISOString().slice(0, 16) : localDate.toISOString().split('T')[0]
+})
+
+const selectedDate = computed(() => {
+	if (!props.modelValue) return null
+	const date = typeof props.modelValue === 'string' ? new Date(props.modelValue) : props.modelValue
+	return toLocalDate(date)
+})
+
+const currentMonthDays = computed(() => {
+	const localCurrentMonth = toLocalDate(currentMonth.value)
+	const year = localCurrentMonth.getFullYear()
+	const month = localCurrentMonth.getMonth()
+	const firstDay = new Date(year, month, 1)
+	const lastDay = new Date(year, month + 1, 0)
+	const days = []
+
+	// Add empty slots for days before the first of the month
+	const firstDayOfWeek = firstDay.getDay()
+	for (let i = 0; i < firstDayOfWeek; i++) {
+		days.push(null)
+	}
+
+	// Add all days of the month
+	for (let i = 1; i <= lastDay.getDate(); i++) {
+		days.push(new Date(year, month, i))
+	}
+
+	return days
+})
+
+const monthYear = computed(() => {
+	const localCurrentMonth = toLocalDate(currentMonth.value)
+	return localCurrentMonth.toLocaleString('default', {
+		month: 'long',
+		year: 'numeric',
+		timeZone: props.timezone
+	})
+})
+
+function handleInput(event: Event) {
+	const input = event.target as HTMLInputElement
+	if (!input.value) {
+		emit('update:modelValue', '')
+		return
+	}
+
+	let date = new Date(input.value)
+	date = fromLocalDate(date)
+
+	if (props.enableTime) {
+		emit('update:modelValue', date.toISOString())
+	} else {
+		emit('update:modelValue', date.toISOString().split('T')[0])
+	}
+}
+
+function previousMonth() {
+	const localCurrentMonth = toLocalDate(currentMonth.value)
+	currentMonth.value = new Date(
+		localCurrentMonth.getFullYear(),
+		localCurrentMonth.getMonth() - 1,
+		1
+	)
+}
+
+function nextMonth() {
+	const localCurrentMonth = toLocalDate(currentMonth.value)
+	currentMonth.value = new Date(
+		localCurrentMonth.getFullYear(),
+		localCurrentMonth.getMonth() + 1,
+		1
+	)
+}
+
+function selectDate(date: Date | null) {
+	if (!date || !props.editMode) return
+
+	let selectedTime = { hours: 0, minutes: 0 }
+	if (props.enableTime && selectedDate.value) {
+		selectedTime = {
+			hours: selectedDate.value.getHours(),
+			minutes: selectedDate.value.getMinutes()
+		}
+	}
+
+	const localDate = new Date(date)
+	localDate.setHours(selectedTime.hours)
+	localDate.setMinutes(selectedTime.minutes)
+
+	const utcDate = fromLocalDate(localDate)
+
+	emit('update:modelValue', props.enableTime ? utcDate.toISOString() : utcDate.toISOString().split('T')[0])
+	isOpen.value = false
+}
+
+function isSelected(date: Date | null) {
+	if (!date || !selectedDate.value) return false
+	const localDate = toLocalDate(date)
+	return localDate.toISOString().split('T')[0] === selectedDate.value.toISOString().split('T')[0]
+}
+
+function isToday(date: Date | null) {
+	if (!date) return false
+	const today = toLocalDate(new Date())
+	const localDate = toLocalDate(date)
+	return localDate.toISOString().split('T')[0] === today.toISOString().split('T')[0]
+}
+
+function isDisabled(date: Date | null) {
+	if (!date) return true
+	const localDate = toLocalDate(date)
+	const minDate = props.min ? toLocalDate(new Date(props.min)) : null
+	const maxDate = props.max ? toLocalDate(new Date(props.max)) : null
+
+	if (minDate && localDate < minDate) return true
+	if (maxDate && localDate > maxDate) return true
+	return false
+}
+
+// Add timezone display if time is enabled
+const timezoneDisplay = computed(() => {
+	if (!props.enableTime) return ''
+	try {
+		const date = new Date()
+		return date.toLocaleString('en-US', {
+			timeZoneName: 'short',
+			timeZone: props.timezone
+		}).split(' ').pop()
+	} catch (e) {
+		return 'UTC'
+	}
+})
+</script>
+
+<template>
+	<div
+		class="bagel-input"
+		:class="{ small, 'rtl-date': rtl }"
+		:title="label"
+	>
+		<label v-if="label">
+			{{ label }}
+			<span v-if="required" class="required">*</span>
+		</label>
+
+		<div class="date-picker-container">
+			<TextInput @input="handleInput" @click="isOpen = true" />
+			<!-- <input
+				v-if="showInput"
+				:type="inputType"
+				:value="formattedValue"
+				:min="formattedMin"
+				:max="formattedMax"
+				:required="required"
+				:disabled="!editMode"
+				class="date-input"
+			> -->
+
+			<div
+				v-if="!showInput"
+				class="date-display"
+				:class="{ disabled: !editMode }"
+				@click="editMode && (isOpen = !isOpen)"
+			>
+				{{ formattedValue || 'Select date' }}
+				<span v-if="enableTime" class="timezone-display">{{ timezoneDisplay }}</span>
+			</div>
+
+			<div
+				v-if="isOpen"
+				class="calendar-popup"
+				@click.stop
+			>
+				<div class="calendar-header">
+					<Btn flat icon="chevron_left" @click="previousMonth" />
+					<span class="month-year">{{ monthYear }}</span>
+					<Btn flat icon="chevron_right" @click="nextMonth" />
+				</div>
+
+				<div class="calendar-grid">
+					<div
+						v-for="day in ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']"
+						:key="day"
+						class="weekday"
+					>
+						{{ day }}
+					</div>
+
+					<button
+						v-for="(date, index) in currentMonthDays"
+						:key="index"
+						type="button"
+						class="day"
+						:class="{
+							selected: isSelected(date),
+							today: isToday(date),
+							disabled: isDisabled(date),
+						}"
+						:disabled="isDisabled(date)"
+						@click="selectDate(date)"
+					>
+						{{ date?.getDate() }}
+					</button>
+				</div>
+
+				<div
+					v-if="enableTime && selectedDate"
+					class="time-picker"
+				>
+					<input
+						type="time"
+						:value="selectedDate.toISOString().slice(11, 16)"
+						@input="handleInput"
+					>
+					<span class="timezone-display">{{ timezoneDisplay }}</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.bagel-input {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	position: relative;
+}
+
+.date-picker-container {
+	position: relative;
+}
+
+.date-input,
+.date-display {
+	padding: 0.5rem;
+	border: 1px solid #ddd;
+	border-radius: 4px;
+	font-size: 1rem;
+	width: 100%;
+	background: white;
+}
+
+.date-display {
+	cursor: pointer;
+}
+
+.date-display.disabled {
+	background-color: #f5f5f5;
+	cursor: not-allowed;
+}
+
+.date-input:focus,
+.date-display:focus {
+	outline: none;
+	border-color: #4a90e2;
+	box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
+}
+
+.date-input:disabled {
+	background-color: #f5f5f5;
+	cursor: not-allowed;
+}
+
+.small .date-input,
+.small .date-display {
+	padding: 0.25rem;
+	font-size: 0.875rem;
+}
+
+.rtl-date input {
+	direction: rtl;
+}
+
+.required {
+	color: #ff4d4f;
+	margin-left: 4px;
+}
+
+.calendar-popup {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	z-index: 1000;
+	background: white;
+	border: 1px solid #ddd;
+	border-radius: 4px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+	padding: 1rem;
+	margin-top: 0.5rem;
+	width: 300px;
+}
+
+.calendar-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 1rem;
+}
+
+.nav-button {
+	background: none;
+	border: none;
+	font-size: 1.5rem;
+	cursor: pointer;
+	padding: 0 0.5rem;
+	color: #666;
+}
+
+.nav-button:hover {
+	color: #4a90e2;
+}
+
+.month-year {
+	font-weight: 500;
+}
+
+.calendar-grid {
+	display: grid;
+	grid-template-columns: repeat(7, 1fr);
+	gap: 0.25rem;
+}
+
+.weekday {
+	text-align: center;
+	font-size: 0.875rem;
+	color: #666;
+	padding: 0.5rem 0;
+}
+
+.day {
+	aspect-ratio: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	background: none;
+	cursor: pointer;
+	border-radius: 50%;
+	font-size: 0.875rem;
+	color: #333;
+	padding: 0;
+}
+
+.day:hover:not(.disabled) {
+	background-color: #f5f5f5;
+}
+
+.day.selected {
+	background-color: #4a90e2;
+	color: white;
+}
+
+.day.today:not(.selected) {
+	border: 1px solid #4a90e2;
+}
+
+.day.disabled {
+	color: #ccc;
+	cursor: not-allowed;
+}
+
+.timezone-display {
+	margin-left: 0.5rem;
+	color: #666;
+	font-size: 0.875rem;
+}
+
+.time-picker {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.time-picker input {
+	flex: 1;
+}
+</style>

package/src/components/form/inputs/RangeInput.vue

@@ -183,7 +183,7 @@ input[type="range"]::-webkit-slider-thumb {
   appearance: none;
   width: var(--bgl-range-thumb-size);
   height: var(--bgl-range-thumb-size);
-  background: var(--bgl-white);
+  background: var(--bgl-range-thumb-color);
   border-radius: 50%;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   position: relative;

package/src/components/form/inputs/RichText/components/EditorToolbar.vue

@@ -34,6 +34,7 @@ function runAction(name: ToolbarConfigOption, value?: string) {
 			<Btn
 				v-else-if="action.name !== 'separator'" v-tooltip="action.label" :icon="action.icon" thin flat
 				:aria-label="action.name" :class="[action.class, { active: selectedStyles.has(action.name) }]"
+				class=""
 				@click="runAction(action.name)"
 			/>
 			<span v-else-if="action.name === 'separator'" :key="`separator-${index}`" class="opacity-2 mb-025">|</span>

package/src/components/form/inputs/ToggleInput.vue

@@ -54,6 +54,7 @@ onMounted(() => {
 .bagel-input.bgl-toggle input{
     padding:  unset !important;
     min-width:  unset !important;
+    margin: 0 !important;
 }
 .bgl-toggle input {
     appearance: none;
@@ -90,6 +91,7 @@ onMounted(() => {
   user-select: none;
   line-height: var(--input-height);
   font-size: var(--input-font-size);
+  vertical-align: middle;
 }
 
 .bgl-toggle label:hover {

package/src/components/form/inputs/index.ts

@@ -3,6 +3,7 @@ export { default as CheckInput } from './CheckInput.vue'
 export { default as CodeEditor } from './CodeEditor/Index.vue'
 export { default as ColorPicker } from './ColorPicker.vue'
 export { default as DateInput } from './DateInput.vue'
+// export { default as DatePick } from './DatePick.vue'
 export { default as DatePicker } from './DatePicker.vue'
 export { default as FileUpload } from './FileUpload.vue'
 export { default as JSONInput } from './JSONInput.vue'