diff --git a/playground-vue/src/app.vue b/playground-vue/src/app.vue index caaf932a0c..169d3517b7 100644 --- a/playground-vue/src/app.vue +++ b/playground-vue/src/app.vue @@ -63,6 +63,7 @@ const components = [ 'textarea', 'toast', 'tooltip', + 'time-field', 'tree' ] diff --git a/playground/app/app.vue b/playground/app/app.vue index 5bfd85766e..a6c522458d 100644 --- a/playground/app/app.vue +++ b/playground/app/app.vue @@ -61,6 +61,7 @@ const components = [ 'tabs', 'table', 'textarea', + 'time-field', 'toast', 'tooltip', 'tree' diff --git a/playground/app/pages/components/time-field.vue b/playground/app/pages/components/time-field.vue new file mode 100644 index 0000000000..422e315ff1 --- /dev/null +++ b/playground/app/pages/components/time-field.vue @@ -0,0 +1,171 @@ + + + diff --git a/src/runtime/components/TimeField.vue b/src/runtime/components/TimeField.vue new file mode 100644 index 0000000000..aebb1c9ed1 --- /dev/null +++ b/src/runtime/components/TimeField.vue @@ -0,0 +1,201 @@ + + + + + diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts index c5e73f665b..40053098ef 100644 --- a/src/runtime/types/index.ts +++ b/src/runtime/types/index.ts @@ -46,6 +46,7 @@ export * from '../components/Switch.vue' export * from '../components/Table.vue' export * from '../components/Tabs.vue' export * from '../components/Textarea.vue' +export * from '../components/TimeField.vue' export * from '../components/Toast.vue' export * from '../components/Toaster.vue' export * from '../components/Tooltip.vue' diff --git a/src/theme/index.ts b/src/theme/index.ts index 752065ec45..a7acc948c5 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -44,6 +44,7 @@ export { default as switch } from './switch' export { default as table } from './table' export { default as tabs } from './tabs' export { default as textarea } from './textarea' +export { default as timeField } from './time-field' export { default as toast } from './toast' export { default as toaster } from './toaster' export { default as tooltip } from './tooltip' diff --git a/src/theme/time-field.ts b/src/theme/time-field.ts new file mode 100644 index 0000000000..6841ce5950 --- /dev/null +++ b/src/theme/time-field.ts @@ -0,0 +1,164 @@ +import type { ModuleOptions } from '../module' +import { buttonGroupVariantWithRoot } from './button-group' + +export default (options: Required) => ({ + slots: { + root: 'relative inline-flex items-center border rounded-md', + base: ['mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed', options.theme.transitions && 'transition-colors'], + leading: 'flex items-center h-full px-2', + leadingIcon: 'shrink-0 text-dimmed', + trailing: 'flex items-center h-full px-2', + trailingIcon: 'shrink-0 text-dimmed' + }, + variants: { + ...buttonGroupVariantWithRoot, + size: { + xs: { + root: 'text-xs', + base: 'py-1 text-xs', + leadingIcon: 'size-4', + trailingIcon: 'size-4' + }, + sm: { + root: 'text-xs', + base: 'py-1.5 text-xs', + leadingIcon: 'size-4', + trailingIcon: 'size-4' + }, + md: { + root: 'text-sm', + base: 'py-1.5 text-sm', + leadingIcon: 'size-5', + trailingIcon: 'size-5' + }, + lg: { + root: 'text-sm', + base: 'py-2 text-sm', + leadingIcon: 'size-5', + trailingIcon: 'size-5' + }, + xl: { + root: 'text-base', + base: 'py-2 text-base', + leadingIcon: 'size-6', + trailingIcon: 'size-6' + } + }, + variant: { + outline: { + root: 'border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500' + }, + soft: { + root: 'border-transparent text-highlighted bg-elevated/50 hover:bg-elevated focus-within:bg-elevated disabled:bg-elevated/50' + }, + subtle: { + root: 'border-accented text-highlighted bg-elevated data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500' + }, + ghost: { + root: 'border-transparent text-highlighted bg-transparent hover:bg-elevated focus-within:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent' + }, + none: { + root: 'border-transparent text-highlighted bg-transparent' + } + }, + color: { + ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])), + neutral: '' + }, + leading: { + true: '' + }, + trailing: { + true: '' + }, + loading: { + true: '' + }, + highlight: { + true: '' + } + }, + compoundVariants: [...(options.theme.colors || []).map((color: string) => ({ + color, + variant: ['outline', 'subtle'], + class: { + root: `data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-${color}` + } + })), ...(options.theme.colors || []).map((color: string) => ({ + color, + highlight: true, + class: { + root: `ring ring-inset ring-${color}` + } + })), { + color: 'neutral', + variant: ['outline', 'subtle'], + class: { + root: 'data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-inverted' + } + }, { + color: 'neutral', + highlight: true, + class: { + root: 'ring ring-inset ring-inverted' + } + }, { + leading: true, + size: 'xs', + class: {} + }, { + leading: true, + size: 'sm', + class: {} + }, { + leading: true, + size: 'md', + class: {} + }, { + leading: true, + size: 'lg', + class: {} + }, { + leading: true, + size: 'xl', + class: {} + }, { + trailing: true, + size: 'xs', + class: {} + }, { + trailing: true, + size: 'sm', + class: {} + }, { + trailing: true, + size: 'md', + class: {} + }, { + trailing: true, + size: 'lg', + class: {} + }, { + trailing: true, + size: 'xl', + class: {} + }, { + loading: true, + leading: true, + class: { + leadingIcon: 'animate-spin' + } + }, { + loading: true, + leading: false, + trailing: true, + class: { + trailingIcon: 'animate-spin' + } + }], + defaultVariants: { + size: 'md', + color: 'primary', + variant: 'outline' + } +}) diff --git a/test/components/TimeField.spec.ts b/test/components/TimeField.spec.ts new file mode 100644 index 0000000000..309f70f73e --- /dev/null +++ b/test/components/TimeField.spec.ts @@ -0,0 +1,93 @@ +import { describe, it, expect, test } from 'vitest' +import { mount } from '@vue/test-utils' +import { Time } from '@internationalized/date' +import TimeField, { type TimeFieldProps, type TimeFieldSlots } from '../../src/runtime/components/TimeField.vue' +import ComponentRender from '../component-render' +import theme from '#build/ui/time-field' + +describe('TimeField', () => { + const sizes = Object.keys(theme.variants.size) as any + const variants = Object.keys(theme.variants.variant) as any + const defaultTime = new Time(10, 30) + + it.each([ + // Props + ['with id', { props: { id: 'id' } }], + ['with name', { props: { name: 'name' } }], + ['with placeholder', { props: { placeholder: 'Select time...' } }], + ['with disabled', { props: { disabled: true } }], + ['with required', { props: { required: true } }], + ['with readonly', { props: { readonly: true } }], + ['with icon', { props: { icon: 'i-lucide-clock' } }], + ['with leading and icon', { props: { leading: true, icon: 'i-lucide-clock' } }], + ['with leadingIcon', { props: { leadingIcon: 'i-lucide-clock' } }], + ['with trailing and icon', { props: { trailing: true, icon: 'i-lucide-chevron-down' } }], + ['with trailingIcon', { props: { trailingIcon: 'i-lucide-chevron-down' } }], + ['with loading', { props: { loading: true } }], + ['with loading trailing', { props: { loading: true, trailing: true } }], + ['with loadingIcon', { props: { loading: true, loadingIcon: 'i-lucide-loader' } }], + ['with granularity hour', { props: { granularity: 'hour' } }], + ['with granularity minute', { props: { granularity: 'minute' } }], + ['with granularity second', { props: { granularity: 'second' } }], + ['with 12 hour cycle', { props: { hourCycle: 12 } }], + ['with 24 hour cycle', { props: { hourCycle: 24 } }], + ['with hideTimeZone', { props: { hideTimeZone: true } }], + ['with locale', { props: { locale: 'fr-FR' } }], + ['with minValue', { props: { minValue: new Time(8, 0) } }], + ['with maxValue', { props: { maxValue: new Time(17, 0) } }], + ...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]), + ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { variant } }]), + ...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { variant, color: 'neutral' } }]), + ['with ariaLabel', { attrs: { 'aria-label': 'Time selector' } }], + ['with as', { props: { as: 'section' } }], + ['with class', { props: { class: 'absolute' } }], + ['with ui', { props: { ui: { base: 'rounded-full' } } }], + // Slots + ['with default slot', { slots: { default: () => 'Default slot' } }], + ['with leading slot', { slots: { leading: () => 'Leading slot' } }], + ['with trailing slot', { slots: { trailing: () => 'Trailing slot' } }] + ])('renders %s correctly', async (nameOrHtml: string, options: { props?: TimeFieldProps, slots?: Partial }) => { + const html = await ComponentRender(nameOrHtml, options, TimeField) + expect(html).toMatchSnapshot() + }) + + describe('emits', () => { + test('update:modelValue event', async () => { + const wrapper = mount(TimeField, { + props: { + modelValue: defaultTime + } + }) + + // Find the TimeFieldRoot component and trigger update:model-value event + const timeFieldRoot = wrapper.findComponent({ name: 'TimeFieldRoot' }) + const newTime = new Time(14, 45) + + await timeFieldRoot.vm.$emit('update:model-value', newTime) + + expect(wrapper.emitted()).toHaveProperty('update:modelValue') + expect(wrapper.emitted()['update:modelValue'][0]).toEqual([newTime]) + }) + + test('blur event', async () => { + const wrapper = mount(TimeField) + const timeFieldRoot = wrapper.findComponent({ name: 'TimeFieldRoot' }) + + await timeFieldRoot.vm.$emit('blur', { type: 'blur' }) + + expect(wrapper.emitted()).toHaveProperty('blur') + expect(wrapper.emitted().blur[0]).toEqual([{ type: 'blur' }]) + }) + + test('update:placeholder event', async () => { + const wrapper = mount(TimeField) + const timeFieldRoot = wrapper.findComponent({ name: 'TimeFieldRoot' }) + const placeholder = new Time(12, 0) + + await timeFieldRoot.vm.$emit('update:placeholder', placeholder) + + expect(wrapper.emitted()).toHaveProperty('update:placeholder') + expect(wrapper.emitted()['update:placeholder'][0]).toEqual([placeholder]) + }) + }) +}) diff --git a/test/components/__snapshots__/TimeField-vue.spec.ts.snap b/test/components/__snapshots__/TimeField-vue.spec.ts.snap new file mode 100644 index 0000000000..f0a2eabc17 --- /dev/null +++ b/test/components/__snapshots__/TimeField-vue.spec.ts.snap @@ -0,0 +1,837 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`TimeField > renders with 12 hour cycle correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with 24 hour cycle correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
+ +
+
" +`; + +exports[`TimeField > renders with ariaLabel correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with as correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with class correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with default slot correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
Default slot + + +
+
" +`; + +exports[`TimeField > renders with disabled correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with granularity hour correctly 1`] = ` +"
+
+ + + +
+
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with granularity minute correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with granularity second correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with hideTimeZone correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with icon correctly 1`] = ` +"
+
+ +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with id correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with leading and icon correctly 1`] = ` +"
+
+ +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with leading slot correctly 1`] = ` +"
+
+ Leading slot +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with leadingIcon correctly 1`] = ` +"
+
+ +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with loading correctly 1`] = ` +"
+
+ +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with loading trailing correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+
+
" +`; + +exports[`TimeField > renders with loadingIcon correctly 1`] = ` +"
+
+ +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with locale correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
+ +
+
" +`; + +exports[`TimeField > renders with maxValue correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with minValue correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with name correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with neutral variant ghost correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with neutral variant none correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with neutral variant outline correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with neutral variant soft correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with neutral variant subtle correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with placeholder correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with primary variant ghost correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with primary variant none correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with primary variant outline correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with primary variant soft correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with primary variant subtle correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with readonly correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with required correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with size lg correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with size md correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with size sm correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with size xl correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with size xs correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with trailing and icon correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+
+
" +`; + +exports[`TimeField > renders with trailing slot correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
Trailing slot +
+
" +`; + +exports[`TimeField > renders with trailingIcon correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+
+
" +`; + +exports[`TimeField > renders with ui correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; diff --git a/test/components/__snapshots__/TimeField.spec.ts.snap b/test/components/__snapshots__/TimeField.spec.ts.snap new file mode 100644 index 0000000000..3ba8422e20 --- /dev/null +++ b/test/components/__snapshots__/TimeField.spec.ts.snap @@ -0,0 +1,837 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`TimeField > renders with 12 hour cycle correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with 24 hour cycle correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
+ +
+
" +`; + +exports[`TimeField > renders with ariaLabel correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with as correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with class correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with default slot correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
Default slot + + +
+
" +`; + +exports[`TimeField > renders with disabled correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with granularity hour correctly 1`] = ` +"
+
+ + + +
+
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with granularity minute correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with granularity second correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with hideTimeZone correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with icon correctly 1`] = ` +"
+
+ +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with id correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with leading and icon correctly 1`] = ` +"
+
+ +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with leading slot correctly 1`] = ` +"
+
+ Leading slot +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with leadingIcon correctly 1`] = ` +"
+
+ +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with loading correctly 1`] = ` +"
+
+ +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with loading trailing correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+
+
" +`; + +exports[`TimeField > renders with loadingIcon correctly 1`] = ` +"
+
+ +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with locale correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
+ +
+
" +`; + +exports[`TimeField > renders with maxValue correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with minValue correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with name correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with neutral variant ghost correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with neutral variant none correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with neutral variant outline correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with neutral variant soft correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with neutral variant subtle correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with placeholder correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with primary variant ghost correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with primary variant none correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with primary variant outline correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with primary variant soft correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with primary variant subtle correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with readonly correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with required correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with size lg correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with size md correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with size sm correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with size xl correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with size xs correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`; + +exports[`TimeField > renders with trailing and icon correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+
+
" +`; + +exports[`TimeField > renders with trailing slot correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
Trailing slot +
+
" +`; + +exports[`TimeField > renders with trailingIcon correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+
+
" +`; + +exports[`TimeField > renders with ui correctly 1`] = ` +"
+
+ + + +
+
––
+ +
––
+ +
AM
+ +
+ +
+
" +`;