[pull] main from chakra-ui:main

packages/react/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## [Unreleased]
 
+### Added
+
+- **Locale**: Added `useDateFormatter` hook for localized date formatting using `@internationalized/date`
+
 ## [5.31.0] - 2026-02-04
 
 ### Added

packages/react/src/providers/locale/index.ts

@@ -1,4 +1,5 @@
 export { LocaleProvider, type LocaleProviderProps } from './locale-provider'
 export { useCollator, type UseCollatorProps } from './use-collator'
+export { useDateFormatter, type UseDateFormatterProps } from './use-date-formatter'
 export { useFilter, type UseFilterProps, type UseFilterReturn } from './use-filter'
 export { useLocaleContext, type UseLocaleContext } from './use-locale-context'

packages/react/src/providers/locale/use-date-formatter.ts

@@ -0,0 +1,16 @@
+import { DateFormatter } from '@internationalized/date'
+import { useMemo } from 'react'
+import { useLocaleContext } from './use-locale-context'
+
+export interface UseDateFormatterProps extends Intl.DateTimeFormatOptions {
+  locale?: string
+}
+
+export function useDateFormatter(props: UseDateFormatterProps = {}): DateFormatter {
+  const env = useLocaleContext()
+  const locale = props.locale ?? env.locale
+  return useMemo(() => {
+    const { locale: _, ...options } = props
+    return new DateFormatter(locale, options)
+  }, [locale, props])
+}

packages/solid/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## [Unreleased]
 
+### Added
+
+- **Locale**: Added `useDateFormatter` hook for localized date formatting using `@internationalized/date`
+
 ## [5.31.0] - 2026-02-04
 
 ### Added

packages/solid/src/providers/locale/index.tsx

@@ -1,4 +1,5 @@
 export { LocaleProvider, type LocaleProviderProps } from './locale-provider'
 export { useCollator, type UseCollatorProps } from './use-collator'
+export { useDateFormatter, type UseDateFormatterProps, type UseDateFormatterReturn } from './use-date-formatter'
 export { useFilter, type UseFilterProps, type UseFilterReturn } from './use-filter'
 export { useLocaleContext, type UseLocaleContext } from './use-locale-context'

packages/solid/src/providers/locale/use-date-formatter.ts

@@ -0,0 +1,21 @@
+import { DateFormatter } from '@internationalized/date'
+import { createMemo, type Accessor } from 'solid-js'
+import type { MaybeAccessor } from '../../types'
+import { runIfFn } from '../../utils/run-if-fn'
+import { useLocaleContext } from './use-locale-context'
+
+export interface UseDateFormatterProps extends Intl.DateTimeFormatOptions {
+  locale?: string
+}
+
+export interface UseDateFormatterReturn extends Accessor<DateFormatter> {}
+
+export function useDateFormatter(props: MaybeAccessor<UseDateFormatterProps> = {}): UseDateFormatterReturn {
+  const env = useLocaleContext()
+  return createMemo(() => {
+    const resolvedProps = runIfFn(props)
+    const locale = resolvedProps.locale ?? env().locale
+    const { locale: _, ...options } = resolvedProps
+    return new DateFormatter(locale, options)
+  })
+}

packages/svelte/CHANGELOG.md

@@ -6,6 +6,10 @@ description: All notable changes will be documented in this file.
 
 ## [Unreleased]
 
+### Added
+
+- **Locale**: Added `useDateFormatter` hook for localized date formatting using `@internationalized/date`
+
 ## [5.16.0] - 2026-02-04
 
 ### Added

packages/svelte/src/lib/providers/locale/index.ts

@@ -1,4 +1,5 @@
 export { default as LocaleProvider, type LocaleProviderProps } from './locale-provider.svelte'
 export { useCollator, type UseCollatorProps, type UseCollatorReturn } from './use-collator.svelte'
+export { useDateFormatter, type UseDateFormatterProps, type UseDateFormatterReturn } from './use-date-formatter.svelte'
 export { useFilter, type UseFilterProps, type UseFilterReturn } from './use-filter.svelte'
 export { useLocaleContext, type UseLocaleContext } from './use-locale-context'

packages/svelte/src/lib/providers/locale/use-date-formatter.svelte.ts

@@ -0,0 +1,21 @@
+import { DateFormatter } from '@internationalized/date'
+import { useLocaleContext } from './use-locale-context'
+import type { Accessor } from '$lib/types'
+
+export interface UseDateFormatterProps extends Intl.DateTimeFormatOptions {
+  locale?: string
+}
+
+export interface UseDateFormatterReturn extends Accessor<DateFormatter> {}
+
+export function useDateFormatter(props: UseDateFormatterProps = {}): UseDateFormatterReturn {
+  const env = useLocaleContext()
+  const locale = $derived(props.locale ?? env().locale)
+
+  const formatter = $derived.by(() => {
+    const { locale: _, ...options } = props
+    return new DateFormatter(locale, options)
+  })
+
+  return () => formatter
+}

packages/vue/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## [Unreleased]
 
+### Added
+
+- **Locale**: Added `useDateFormatter` hook for localized date formatting using `@internationalized/date`
+
 ## [5.31.0] - 2026-02-04
 
 ### Added

packages/vue/src/providers/locale/index.ts

@@ -1,4 +1,5 @@
 export { default as LocaleProvider, type LocaleProviderProps } from './locale-provider.vue'
 export { useCollator, type UseCollatorProps, type UseCollatorReturn } from './use-collator'
+export { useDateFormatter, type UseDateFormatterProps, type UseDateFormatterReturn } from './use-date-formatter'
 export { useFilter, type UseFilterProps, type UseFilterReturn } from './use-filter'
 export { DEFAULT_LOCALE, useLocaleContext, type LocaleContext } from './use-locale-context'

packages/vue/src/providers/locale/use-date-formatter.ts

@@ -0,0 +1,20 @@
+import { DateFormatter } from '@internationalized/date'
+import { type ComputedRef, type MaybeRef, computed, toValue } from 'vue'
+import { useLocaleContext } from './use-locale-context'
+
+export interface UseDateFormatterProps extends Intl.DateTimeFormatOptions {
+  locale?: string
+}
+
+export interface UseDateFormatterReturn extends ComputedRef<DateFormatter> {}
+
+export function useDateFormatter(propsOrFn: MaybeRef<UseDateFormatterProps> = {}): UseDateFormatterReturn {
+  const env = useLocaleContext()
+
+  return computed(() => {
+    const props = toValue(propsOrFn)
+    const locale = props.locale ?? env.value.locale
+    const { locale: _, ...options } = props
+    return new DateFormatter(locale, options)
+  })
+}