[pull] main from chakra-ui:main

packages/react/src/components/date-input/date-input.stories.tsx

@@ -19,6 +19,7 @@ export { Range } from './examples/range'
 export { ReadOnly } from './examples/read-only'
 export { RootProvider } from './examples/root-provider'
 export { RTL } from './examples/rtl'
+export { TimeOnly } from './examples/time-only'
 export { TimeZone } from './examples/time-zone'
 export { WithClearButton } from './examples/with-clear-button'
 export { WithDatePicker } from './examples/with-date-picker'

packages/react/src/components/date-input/examples/time-only.tsx

@@ -0,0 +1,23 @@
+import { DateInput } from '@ark-ui/react/date-input'
+import { DateFormatter } from '@internationalized/date'
+import styles from 'styles/date-input.module.css'
+
+const timeFormatter = new DateFormatter('en-US', {
+  hour: '2-digit',
+  minute: '2-digit',
+  hourCycle: 'h23',
+})
+
+export const TimeOnly = () => (
+  <DateInput.Root className={styles.Root} granularity="minute" hourCycle={24} formatter={timeFormatter}>
+    <DateInput.Label className={styles.Label}>Time</DateInput.Label>
+    <DateInput.Control className={styles.Control}>
+      <DateInput.SegmentGroup className={styles.SegmentGroup}>
+        <DateInput.SegmentContext>
+          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
+        </DateInput.SegmentContext>
+      </DateInput.SegmentGroup>
+    </DateInput.Control>
+    <DateInput.HiddenInput />
+  </DateInput.Root>
+)

packages/solid/src/components/date-input/date-input.stories.tsx

@@ -19,6 +19,7 @@ export { Range } from './examples/range'
 export { ReadOnly } from './examples/read-only'
 export { RootProvider } from './examples/root-provider'
 export { RTL } from './examples/rtl'
+export { TimeOnly } from './examples/time-only'
 export { TimeZone } from './examples/time-zone'
 export { WithClearButton } from './examples/with-clear-button'
 export { WithDatePicker } from './examples/with-date-picker'

packages/solid/src/components/date-input/examples/time-only.tsx

@@ -0,0 +1,23 @@
+import { DateInput } from '@ark-ui/solid/date-input'
+import { DateFormatter } from '@internationalized/date'
+import styles from 'styles/date-input.module.css'
+
+const timeFormatter = new DateFormatter('en-US', {
+  hour: '2-digit',
+  minute: '2-digit',
+  hourCycle: 'h23',
+})
+
+export const TimeOnly = () => (
+  <DateInput.Root class={styles.Root} granularity="minute" hourCycle={24} formatter={timeFormatter}>
+    <DateInput.Label class={styles.Label}>Time</DateInput.Label>
+    <DateInput.Control class={styles.Control}>
+      <DateInput.SegmentGroup class={styles.SegmentGroup}>
+        <DateInput.SegmentContext>
+          {(segment) => <DateInput.Segment class={styles.Segment} segment={segment} />}
+        </DateInput.SegmentContext>
+      </DateInput.SegmentGroup>
+    </DateInput.Control>
+    <DateInput.HiddenInput />
+  </DateInput.Root>
+)

packages/svelte/src/lib/components/date-input/date-input.stories.ts

@@ -12,6 +12,7 @@ import RangeExample from './examples/range.svelte'
 import ReadOnlyExample from './examples/read-only.svelte'
 import RootProviderExample from './examples/root-provider.svelte'
 import RTLExample from './examples/rtl.svelte'
+import TimeOnlyExample from './examples/time-only.svelte'
 import TimeZoneExample from './examples/time-zone.svelte'
 import WithClearButtonExample from './examples/with-clear-button.svelte'
 import WithDatePickerExample from './examples/with-date-picker.svelte'
@@ -100,6 +101,12 @@ export const RTL = {
   }),
 }
 
+export const TimeOnly = {
+  render: () => ({
+    Component: TimeOnlyExample,
+  }),
+}
+
 export const TimeZone = {
   render: () => ({
     Component: TimeZoneExample,

packages/svelte/src/lib/components/date-input/examples/time-only.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { DateInput } from '@ark-ui/svelte/date-input'
+  import { DateFormatter } from '@internationalized/date'
+  import styles from 'styles/date-input.module.css'
+
+  const timeFormatter = new DateFormatter('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hourCycle: 'h23',
+  })
+</script>
+
+<DateInput.Root class={styles.Root} granularity="minute" hourCycle={24} formatter={timeFormatter}>
+  <DateInput.Label class={styles.Label}>Time</DateInput.Label>
+  <DateInput.Control class={styles.Control}>
+    <DateInput.SegmentGroup class={styles.SegmentGroup}>
+      <DateInput.SegmentContext>
+        {#snippet render(segment)}
+          <DateInput.Segment class={styles.Segment} {segment} />
+        {/snippet}
+      </DateInput.SegmentContext>
+    </DateInput.SegmentGroup>
+  </DateInput.Control>
+  <DateInput.HiddenInput />
+</DateInput.Root>

packages/vue/src/components/date-input/date-input.stories.ts

@@ -13,6 +13,7 @@ import RangeExample from './examples/range.vue'
 import ReadOnlyExample from './examples/read-only.vue'
 import RootProviderExample from './examples/root-provider.vue'
 import RTLExample from './examples/rtl.vue'
+import TimeOnlyExample from './examples/time-only.vue'
 import TimeZoneExample from './examples/time-zone.vue'
 import WithClearButtonExample from './examples/with-clear-button.vue'
 import WithDatePickerExample from './examples/with-date-picker.vue'
@@ -114,6 +115,13 @@ export const RTL = {
   }),
 }
 
+export const TimeOnly = {
+  render: () => ({
+    components: { Component: TimeOnlyExample },
+    template: '<Component />',
+  }),
+}
+
 export const TimeZone = {
   render: () => ({
     components: { Component: TimeZoneExample },

packages/vue/src/components/date-input/examples/time-only.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { DateInput } from '@ark-ui/vue/date-input'
+import { DateFormatter } from '@internationalized/date'
+import styles from 'styles/date-input.module.css'
+
+const timeFormatter = new DateFormatter('en-US', {
+  hour: '2-digit',
+  minute: '2-digit',
+  hourCycle: 'h23',
+})
+</script>
+
+<template>
+  <DateInput.Root :class="styles.Root" granularity="minute" :hour-cycle="24" :formatter="timeFormatter">
+    <DateInput.Label :class="styles.Label">Time</DateInput.Label>
+    <DateInput.Control :class="styles.Control">
+      <DateInput.SegmentGroup :class="styles.SegmentGroup">
+        <DateInput.SegmentContext v-slot="segment">
+          <DateInput.Segment :class="styles.Segment" :segment="segment" />
+        </DateInput.SegmentContext>
+      </DateInput.SegmentGroup>
+    </DateInput.Control>
+    <DateInput.HiddenInput />
+  </DateInput.Root>
+</template>

website/src/content/pages/components/date-input.mdx

@@ -2,6 +2,7 @@
 id: date-input
 title: Date Input
 description: A segment-based date input that allows users to enter dates by navigating individual date parts.
+status: Preview
 ---
 
 <ComponentPreview id="DateInput" />
@@ -52,6 +53,13 @@ Use the `granularity` prop to control which date fields are displayed. Supported
 
 <Example id="granularity" />
 
+### Time Only
+
+To create a time-only input, set `granularity` to `minute` (or `second`) and provide a `formatter` that only includes
+time fields. Use the `hourCycle` prop to switch between 12 and 24 hour formats.
+
+<Example id="time-only" />
+
 ### Range
 
 To create a date input that allows a range selection, set the `selectionMode` prop to `range` and render two

website/src/lib/example-registry.ts

@@ -124,6 +124,7 @@ import * as DateInput_Range from '@examples/date-input/examples/range'
 import * as DateInput_ReadOnly from '@examples/date-input/examples/read-only'
 import * as DateInput_RootProvider from '@examples/date-input/examples/root-provider'
 import * as DateInput_Rtl from '@examples/date-input/examples/rtl'
+import * as DateInput_TimeOnly from '@examples/date-input/examples/time-only'
 import * as DateInput_TimeZone from '@examples/date-input/examples/time-zone'
 import * as DateInput_WithClearButton from '@examples/date-input/examples/with-clear-button'
 import * as DateInput_WithDatePicker from '@examples/date-input/examples/with-date-picker'
@@ -721,6 +722,7 @@ const exampleModules: Record<string, ExampleModule> = {
   'date-input/read-only': DateInput_ReadOnly,
   'date-input/root-provider': DateInput_RootProvider,
   'date-input/rtl': DateInput_Rtl,
+  'date-input/time-only': DateInput_TimeOnly,
   'date-input/time-zone': DateInput_TimeZone,
   'date-input/with-clear-button': DateInput_WithClearButton,
   'date-input/with-date-picker': DateInput_WithDatePicker,

website/src/lib/sidebar-config.ts

@@ -44,7 +44,7 @@ export const sidebarConfig: SidebarGroupConfig[] = [
       { id: 'collapsible' },
       { id: 'color-picker' },
       { id: 'combobox' },
-      // { id: 'date-input' },
+      { id: 'date-input' },
       { id: 'date-picker' },
       { id: 'dialog' },
       { id: 'drawer' },