@ark-ui/react 5.32.0 → 5.34.0

package/dist/components/color-picker/color-picker.anatomy.d.cts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const colorPickerAnatomy: AnatomyInstance<"root" | "control" | "label" | "content" | "area" | "trigger" | "positioner" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect" | "view">;
+export declare const colorPickerAnatomy: AnatomyInstance<"root" | "control" | "label" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect" | "view">;

package/dist/components/color-picker/color-picker.anatomy.d.ts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const colorPickerAnatomy: AnatomyInstance<"root" | "control" | "label" | "content" | "area" | "trigger" | "positioner" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect" | "view">;
+export declare const colorPickerAnatomy: AnatomyInstance<"root" | "control" | "label" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect" | "view">;

package/dist/components/combobox/combobox.anatomy.d.cts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const comboboxAnatomy: AnatomyInstance<"root" | "itemGroup" | "item" | "control" | "label" | "content" | "trigger" | "positioner" | "list" | "input" | "clearTrigger" | "itemGroupLabel" | "itemIndicator" | "itemText" | "empty">;
+export declare const comboboxAnatomy: AnatomyInstance<"root" | "itemGroup" | "item" | "control" | "label" | "trigger" | "positioner" | "content" | "clearTrigger" | "input" | "itemGroupLabel" | "itemIndicator" | "itemText" | "list" | "empty">;

package/dist/components/combobox/combobox.anatomy.d.ts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const comboboxAnatomy: AnatomyInstance<"root" | "itemGroup" | "item" | "control" | "label" | "content" | "trigger" | "positioner" | "list" | "input" | "clearTrigger" | "itemGroupLabel" | "itemIndicator" | "itemText" | "empty">;
+export declare const comboboxAnatomy: AnatomyInstance<"root" | "itemGroup" | "item" | "control" | "label" | "trigger" | "positioner" | "content" | "clearTrigger" | "input" | "itemGroupLabel" | "itemIndicator" | "itemText" | "list" | "empty">;

package/dist/components/date-picker/date-picker-root.cjs

@@ -19,6 +19,7 @@ const DatePickerRoot = react.forwardRef((props, ref) => {
   const [presenceProps, datePickerProps] = splitPresenceProps.splitPresenceProps(props);
   const [useDatePickerProps, localProps] = splitRootProps(datePickerProps, [
     "closeOnSelect",
+    "createCalendar",
     "defaultFocusedValue",
     "defaultOpen",
     "defaultValue",

package/dist/components/date-picker/date-picker-root.js

@@ -15,6 +15,7 @@ const DatePickerRoot = forwardRef((props, ref) => {
   const [presenceProps, datePickerProps] = splitPresenceProps(props);
   const [useDatePickerProps, localProps] = splitRootProps(datePickerProps, [
     "closeOnSelect",
+    "createCalendar",
     "defaultFocusedValue",
     "defaultOpen",
     "defaultValue",

package/dist/components/date-picker/date-picker.anatomy.d.cts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const datePickerAnatomy: AnatomyInstance<"root" | "control" | "nextTrigger" | "prevTrigger" | "label" | "content" | "trigger" | "positioner" | "valueText" | "view" | "input" | "clearTrigger" | "table" | "monthSelect" | "presetTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect">;
+export declare const datePickerAnatomy: AnatomyInstance<"root" | "control" | "nextTrigger" | "prevTrigger" | "label" | "trigger" | "positioner" | "content" | "valueText" | "view" | "clearTrigger" | "input" | "monthSelect" | "presetTrigger" | "rangeText" | "table" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect">;

package/dist/components/date-picker/date-picker.anatomy.d.ts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const datePickerAnatomy: AnatomyInstance<"root" | "control" | "nextTrigger" | "prevTrigger" | "label" | "content" | "trigger" | "positioner" | "valueText" | "view" | "input" | "clearTrigger" | "table" | "monthSelect" | "presetTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect">;
+export declare const datePickerAnatomy: AnatomyInstance<"root" | "control" | "nextTrigger" | "prevTrigger" | "label" | "trigger" | "positioner" | "content" | "valueText" | "view" | "clearTrigger" | "input" | "monthSelect" | "presetTrigger" | "rangeText" | "table" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect">;

package/dist/components/format/format-time.cjs

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const i18nUtils = require('@zag-js/i18n-utils');
+const react = require('react');
+const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
+
+const FormatTime = (props) => {
+  const { locale } = useLocaleContext.useLocaleContext();
+  const text = react.useMemo(() => {
+    const { value, ...intlOptions } = props;
+    return i18nUtils.formatTime(value, locale, intlOptions);
+  }, [props, locale]);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: text });
+};
+FormatTime.displayName = "FormatTime";
+
+exports.FormatTime = FormatTime;

package/dist/components/format/format-time.d.cts

@@ -0,0 +1,11 @@
+import { FormatTimeOptions } from '@zag-js/i18n-utils';
+export interface FormatTimeProps extends FormatTimeOptions {
+    /**
+     * The time to format
+     */
+    value: string | Date;
+}
+export declare const FormatTime: {
+    (props: FormatTimeProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/format/format-time.d.ts

@@ -0,0 +1,11 @@
+import { FormatTimeOptions } from '@zag-js/i18n-utils';
+export interface FormatTimeProps extends FormatTimeOptions {
+    /**
+     * The time to format
+     */
+    value: string | Date;
+}
+export declare const FormatTime: {
+    (props: FormatTimeProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/format/format-time.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { formatTime } from '@zag-js/i18n-utils';
+import { useMemo } from 'react';
+import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
+
+const FormatTime = (props) => {
+  const { locale } = useLocaleContext();
+  const text = useMemo(() => {
+    const { value, ...intlOptions } = props;
+    return formatTime(value, locale, intlOptions);
+  }, [props, locale]);
+  return /* @__PURE__ */ jsx(Fragment, { children: text });
+};
+FormatTime.displayName = "FormatTime";
+
+export { FormatTime };

package/dist/components/format/format.cjs

@@ -5,9 +5,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const formatByte = require('./format-byte.cjs');
 const formatNumber = require('./format-number.cjs');
 const formatRelativeTime = require('./format-relative-time.cjs');
+const formatTime = require('./format-time.cjs');
 
 
 
 exports.Byte = formatByte.FormatByte;
 exports.Number = formatNumber.FormatNumber;
 exports.RelativeTime = formatRelativeTime.FormatRelativeTime;
+exports.Time = formatTime.FormatTime;

package/dist/components/format/format.d.cts

@@ -1,3 +1,4 @@
 export { FormatByte as Byte, type FormatByteProps as ByteProps } from './format-byte';
 export { FormatNumber as Number, type FormatNumberProps as NumberProps } from './format-number';
 export { FormatRelativeTime as RelativeTime, type FormatRelativeTimeProps as RelativeTimeProps, } from './format-relative-time';
+export { FormatTime as Time, type FormatTimeProps as TimeProps } from './format-time';

package/dist/components/format/format.d.ts

@@ -1,3 +1,4 @@
 export { FormatByte as Byte, type FormatByteProps as ByteProps } from './format-byte';
 export { FormatNumber as Number, type FormatNumberProps as NumberProps } from './format-number';
 export { FormatRelativeTime as RelativeTime, type FormatRelativeTimeProps as RelativeTimeProps, } from './format-relative-time';
+export { FormatTime as Time, type FormatTimeProps as TimeProps } from './format-time';

package/dist/components/format/format.js

@@ -1,3 +1,4 @@
 export { FormatByte as Byte } from './format-byte.js';
 export { FormatNumber as Number } from './format-number.js';
 export { FormatRelativeTime as RelativeTime } from './format-relative-time.js';
+export { FormatTime as Time } from './format-time.js';

package/dist/components/format/index.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const formatByte = require('./format-byte.cjs');
 const formatNumber = require('./format-number.cjs');
 const formatRelativeTime = require('./format-relative-time.cjs');
+const formatTime = require('./format-time.cjs');
 const format = require('./format.cjs');
 
 
@@ -12,4 +13,5 @@ const format = require('./format.cjs');
 exports.FormatByte = formatByte.FormatByte;
 exports.FormatNumber = formatNumber.FormatNumber;
 exports.FormatRelativeTime = formatRelativeTime.FormatRelativeTime;
+exports.FormatTime = formatTime.FormatTime;
 exports.Format = format;

package/dist/components/format/index.d.cts

@@ -1,4 +1,5 @@
 export { FormatByte, type FormatByteProps } from './format-byte';
 export { FormatNumber, type FormatNumberProps } from './format-number';
 export { FormatRelativeTime, type FormatRelativeTimeProps } from './format-relative-time';
+export { FormatTime, type FormatTimeProps } from './format-time';
 export * as Format from './format';

package/dist/components/format/index.d.ts

@@ -1,4 +1,5 @@
 export { FormatByte, type FormatByteProps } from './format-byte';
 export { FormatNumber, type FormatNumberProps } from './format-number';
 export { FormatRelativeTime, type FormatRelativeTimeProps } from './format-relative-time';
+export { FormatTime, type FormatTimeProps } from './format-time';
 export * as Format from './format';

package/dist/components/format/index.js

@@ -1,5 +1,6 @@
 export { FormatByte } from './format-byte.js';
 export { FormatNumber } from './format-number.js';
 export { FormatRelativeTime } from './format-relative-time.js';
+export { FormatTime } from './format-time.js';
 import * as format from './format.js';
 export { format as Format };

package/dist/components/index.cjs

@@ -293,6 +293,7 @@ const focusTrap = require('./focus-trap/focus-trap.cjs');
 const formatByte = require('./format/format-byte.cjs');
 const formatNumber = require('./format/format-number.cjs');
 const formatRelativeTime = require('./format/format-relative-time.cjs');
+const formatTime = require('./format/format-time.cjs');
 const format = require('./format/format.cjs');
 const frame = require('./frame/frame.cjs');
 const highlight = require('./highlight/highlight.cjs');
@@ -1091,6 +1092,7 @@ exports.FocusTrap = focusTrap.FocusTrap;
 exports.FormatByte = formatByte.FormatByte;
 exports.FormatNumber = formatNumber.FormatNumber;
 exports.FormatRelativeTime = formatRelativeTime.FormatRelativeTime;
+exports.FormatTime = formatTime.FormatTime;
 exports.Format = format;
 exports.Frame = frame.Frame;
 exports.Highlight = highlight.Highlight;

package/dist/components/index.js

@@ -306,6 +306,7 @@ export { FocusTrap } from './focus-trap/focus-trap.js';
 export { FormatByte } from './format/format-byte.js';
 export { FormatNumber } from './format/format-number.js';
 export { FormatRelativeTime } from './format/format-relative-time.js';
+export { FormatTime } from './format/format-time.js';
 import * as format from './format/format.js';
 export { format as Format };
 export { Frame } from './frame/frame.js';

package/dist/components/listbox/listbox-label.cjs

@@ -12,7 +12,7 @@ const useListboxContext = require('./use-listbox-context.cjs');
 const ListboxLabel = react.forwardRef((props, ref) => {
   const listbox = useListboxContext.useListboxContext();
   const mergedProps = react$1.mergeProps(listbox.getLabelProps(), props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
 });
 ListboxLabel.displayName = "ListboxLabel";
 

package/dist/components/listbox/listbox-label.d.cts

@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface ListboxLabelBaseProps extends PolymorphicProps {
 }
-export interface ListboxLabelProps extends HTMLProps<'label'>, ListboxLabelBaseProps {
+export interface ListboxLabelProps extends HTMLProps<'span'>, ListboxLabelBaseProps {
 }
-export declare const ListboxLabel: ForwardRefExoticComponent<ListboxLabelProps & RefAttributes<HTMLLabelElement>>;
+export declare const ListboxLabel: ForwardRefExoticComponent<ListboxLabelProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/listbox/listbox-label.d.ts

@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface ListboxLabelBaseProps extends PolymorphicProps {
 }
-export interface ListboxLabelProps extends HTMLProps<'label'>, ListboxLabelBaseProps {
+export interface ListboxLabelProps extends HTMLProps<'span'>, ListboxLabelBaseProps {
 }
-export declare const ListboxLabel: ForwardRefExoticComponent<ListboxLabelProps & RefAttributes<HTMLLabelElement>>;
+export declare const ListboxLabel: ForwardRefExoticComponent<ListboxLabelProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/listbox/listbox-label.js

@@ -8,7 +8,7 @@ import { useListboxContext } from './use-listbox-context.js';
 const ListboxLabel = forwardRef((props, ref) => {
   const listbox = useListboxContext();
   const mergedProps = mergeProps(listbox.getLabelProps(), props);
-  return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
 });
 ListboxLabel.displayName = "ListboxLabel";
 

package/dist/components/progress/progress-label.cjs

@@ -12,7 +12,7 @@ const useProgressContext = require('./use-progress-context.cjs');
 const ProgressLabel = react.forwardRef((props, ref) => {
   const progress = useProgressContext.useProgressContext();
   const mergedProps = react$1.mergeProps(progress.getLabelProps(), props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
 });
 ProgressLabel.displayName = "ProgressLabel";
 

package/dist/components/progress/progress-label.d.cts

@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface ProgressLabelBaseProps extends PolymorphicProps {
 }
-export interface ProgressLabelProps extends HTMLProps<'label'>, ProgressLabelBaseProps {
+export interface ProgressLabelProps extends HTMLProps<'span'>, ProgressLabelBaseProps {
 }
-export declare const ProgressLabel: ForwardRefExoticComponent<ProgressLabelProps & RefAttributes<HTMLLabelElement>>;
+export declare const ProgressLabel: ForwardRefExoticComponent<ProgressLabelProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/progress/progress-label.d.ts

@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface ProgressLabelBaseProps extends PolymorphicProps {
 }
-export interface ProgressLabelProps extends HTMLProps<'label'>, ProgressLabelBaseProps {
+export interface ProgressLabelProps extends HTMLProps<'span'>, ProgressLabelBaseProps {
 }
-export declare const ProgressLabel: ForwardRefExoticComponent<ProgressLabelProps & RefAttributes<HTMLLabelElement>>;
+export declare const ProgressLabel: ForwardRefExoticComponent<ProgressLabelProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/progress/progress-label.js

@@ -8,7 +8,7 @@ import { useProgressContext } from './use-progress-context.js';
 const ProgressLabel = forwardRef((props, ref) => {
   const progress = useProgressContext();
   const mergedProps = mergeProps(progress.getLabelProps(), props);
-  return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
 });
 ProgressLabel.displayName = "ProgressLabel";
 

package/dist/components/radio-group/radio-group-label.cjs

@@ -12,7 +12,7 @@ const useRadioGroupContext = require('./use-radio-group-context.cjs');
 const RadioGroupLabel = react.forwardRef((props, ref) => {
   const radioGroup = useRadioGroupContext.useRadioGroupContext();
   const mergedProps = react$1.mergeProps(radioGroup.getLabelProps(), props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
 });
 RadioGroupLabel.displayName = "RadioGroupLabel";
 

package/dist/components/radio-group/radio-group-label.d.cts

@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface RadioGroupLabelBaseProps extends PolymorphicProps {
 }
-export interface RadioGroupLabelProps extends HTMLProps<'label'>, RadioGroupLabelBaseProps {
+export interface RadioGroupLabelProps extends HTMLProps<'span'>, RadioGroupLabelBaseProps {
 }
-export declare const RadioGroupLabel: ForwardRefExoticComponent<RadioGroupLabelProps & RefAttributes<HTMLLabelElement>>;
+export declare const RadioGroupLabel: ForwardRefExoticComponent<RadioGroupLabelProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/radio-group/radio-group-label.d.ts

@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface RadioGroupLabelBaseProps extends PolymorphicProps {
 }
-export interface RadioGroupLabelProps extends HTMLProps<'label'>, RadioGroupLabelBaseProps {
+export interface RadioGroupLabelProps extends HTMLProps<'span'>, RadioGroupLabelBaseProps {
 }
-export declare const RadioGroupLabel: ForwardRefExoticComponent<RadioGroupLabelProps & RefAttributes<HTMLLabelElement>>;
+export declare const RadioGroupLabel: ForwardRefExoticComponent<RadioGroupLabelProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/radio-group/radio-group-label.js

@@ -8,7 +8,7 @@ import { useRadioGroupContext } from './use-radio-group-context.js';
 const RadioGroupLabel = forwardRef((props, ref) => {
   const radioGroup = useRadioGroupContext();
   const mergedProps = mergeProps(radioGroup.getLabelProps(), props);
-  return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
 });
 RadioGroupLabel.displayName = "RadioGroupLabel";
 

package/dist/components/segment-group/segment-group-label.cjs

@@ -13,7 +13,7 @@ const useSegmentGroupContext = require('./use-segment-group-context.cjs');
 const SegmentGroupLabel = react.forwardRef((props, ref) => {
   const segmentGroup = useSegmentGroupContext.useSegmentGroupContext();
   const mergedProps = react$1.mergeProps(segmentGroup.getLabelProps(), segmentGroup_anatomy.parts.label.attrs, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
 });
 SegmentGroupLabel.displayName = "SegmentGroupLabel";
 

package/dist/components/segment-group/segment-group-label.d.cts

@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface SegmentGroupLabelBaseProps extends PolymorphicProps {
 }
-export interface SegmentGroupLabelProps extends HTMLProps<'label'>, SegmentGroupLabelBaseProps {
+export interface SegmentGroupLabelProps extends HTMLProps<'span'>, SegmentGroupLabelBaseProps {
 }
-export declare const SegmentGroupLabel: ForwardRefExoticComponent<SegmentGroupLabelProps & RefAttributes<HTMLLabelElement>>;
+export declare const SegmentGroupLabel: ForwardRefExoticComponent<SegmentGroupLabelProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/segment-group/segment-group-label.d.ts

@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface SegmentGroupLabelBaseProps extends PolymorphicProps {
 }
-export interface SegmentGroupLabelProps extends HTMLProps<'label'>, SegmentGroupLabelBaseProps {
+export interface SegmentGroupLabelProps extends HTMLProps<'span'>, SegmentGroupLabelBaseProps {
 }
-export declare const SegmentGroupLabel: ForwardRefExoticComponent<SegmentGroupLabelProps & RefAttributes<HTMLLabelElement>>;
+export declare const SegmentGroupLabel: ForwardRefExoticComponent<SegmentGroupLabelProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/segment-group/segment-group-label.js

@@ -9,7 +9,7 @@ import { useSegmentGroupContext } from './use-segment-group-context.js';
 const SegmentGroupLabel = forwardRef((props, ref) => {
   const segmentGroup = useSegmentGroupContext();
   const mergedProps = mergeProps(segmentGroup.getLabelProps(), parts.label.attrs, props);
-  return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
 });
 SegmentGroupLabel.displayName = "SegmentGroupLabel";
 

package/dist/components/tour/tour.anatomy.d.cts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const tourAnatomy: AnatomyInstance<"control" | "progressText" | "content" | "positioner" | "title" | "actionTrigger" | "closeTrigger" | "description" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;
+export declare const tourAnatomy: AnatomyInstance<"control" | "progressText" | "positioner" | "content" | "title" | "actionTrigger" | "closeTrigger" | "description" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;

package/dist/components/tour/tour.anatomy.d.ts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const tourAnatomy: AnatomyInstance<"control" | "progressText" | "content" | "positioner" | "title" | "actionTrigger" | "closeTrigger" | "description" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;
+export declare const tourAnatomy: AnatomyInstance<"control" | "progressText" | "positioner" | "content" | "title" | "actionTrigger" | "closeTrigger" | "description" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;

package/dist/index.cjs

@@ -293,6 +293,7 @@ const focusTrap = require('./components/focus-trap/focus-trap.cjs');
 const formatByte = require('./components/format/format-byte.cjs');
 const formatNumber = require('./components/format/format-number.cjs');
 const formatRelativeTime = require('./components/format/format-relative-time.cjs');
+const formatTime = require('./components/format/format-time.cjs');
 const format = require('./components/format/format.cjs');
 const frame = require('./components/frame/frame.cjs');
 const highlight = require('./components/highlight/highlight.cjs');
@@ -1100,6 +1101,7 @@ exports.FocusTrap = focusTrap.FocusTrap;
 exports.FormatByte = formatByte.FormatByte;
 exports.FormatNumber = formatNumber.FormatNumber;
 exports.FormatRelativeTime = formatRelativeTime.FormatRelativeTime;
+exports.FormatTime = formatTime.FormatTime;
 exports.Format = format;
 exports.Frame = frame.Frame;
 exports.Highlight = highlight.Highlight;

package/dist/index.js

@@ -306,6 +306,7 @@ export { FocusTrap } from './components/focus-trap/focus-trap.js';
 export { FormatByte } from './components/format/format-byte.js';
 export { FormatNumber } from './components/format/format-number.js';
 export { FormatRelativeTime } from './components/format/format-relative-time.js';
+export { FormatTime } from './components/format/format-time.js';
 import * as format from './components/format/format.js';
 export { format as Format };
 export { Frame } from './components/frame/frame.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/react",
   "type": "module",
-  "version": "5.32.0",
+  "version": "5.34.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -150,70 +150,70 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.11.0",
-    "@zag-js/accordion": "1.34.1",
-    "@zag-js/anatomy": "1.34.1",
-    "@zag-js/angle-slider": "1.34.1",
-    "@zag-js/async-list": "1.34.1",
-    "@zag-js/auto-resize": "1.34.1",
-    "@zag-js/avatar": "1.34.1",
-    "@zag-js/carousel": "1.34.1",
-    "@zag-js/cascade-select": "1.34.1",
-    "@zag-js/checkbox": "1.34.1",
-    "@zag-js/clipboard": "1.34.1",
-    "@zag-js/collapsible": "1.34.1",
-    "@zag-js/collection": "1.34.1",
-    "@zag-js/color-picker": "1.34.1",
-    "@zag-js/color-utils": "1.34.1",
-    "@zag-js/combobox": "1.34.1",
-    "@zag-js/core": "1.34.1",
-    "@zag-js/date-picker": "1.34.1",
-    "@zag-js/date-utils": "1.34.1",
-    "@zag-js/dialog": "1.34.1",
-    "@zag-js/dom-query": "1.34.1",
-    "@zag-js/drawer": "1.34.1",
-    "@zag-js/editable": "1.34.1",
-    "@zag-js/file-upload": "1.34.1",
-    "@zag-js/file-utils": "1.34.1",
-    "@zag-js/floating-panel": "1.34.1",
-    "@zag-js/focus-trap": "1.34.1",
-    "@zag-js/highlight-word": "1.34.1",
-    "@zag-js/hover-card": "1.34.1",
-    "@zag-js/i18n-utils": "1.34.1",
-    "@zag-js/image-cropper": "1.34.1",
-    "@zag-js/json-tree-utils": "1.34.1",
-    "@zag-js/listbox": "1.34.1",
-    "@zag-js/marquee": "1.34.1",
-    "@zag-js/menu": "1.34.1",
-    "@zag-js/navigation-menu": "1.34.1",
-    "@zag-js/number-input": "1.34.1",
-    "@zag-js/pagination": "1.34.1",
-    "@zag-js/password-input": "1.34.1",
-    "@zag-js/pin-input": "1.34.1",
-    "@zag-js/popover": "1.34.1",
-    "@zag-js/presence": "1.34.1",
-    "@zag-js/progress": "1.34.1",
-    "@zag-js/qr-code": "1.34.1",
-    "@zag-js/radio-group": "1.34.1",
-    "@zag-js/rating-group": "1.34.1",
-    "@zag-js/react": "1.34.1",
-    "@zag-js/scroll-area": "1.34.1",
-    "@zag-js/select": "1.34.1",
-    "@zag-js/signature-pad": "1.34.1",
-    "@zag-js/slider": "1.34.1",
-    "@zag-js/splitter": "1.34.1",
-    "@zag-js/steps": "1.34.1",
-    "@zag-js/switch": "1.34.1",
-    "@zag-js/tabs": "1.34.1",
-    "@zag-js/tags-input": "1.34.1",
-    "@zag-js/timer": "1.34.1",
-    "@zag-js/toast": "1.34.1",
-    "@zag-js/toggle": "1.34.1",
-    "@zag-js/toggle-group": "1.34.1",
-    "@zag-js/tooltip": "1.34.1",
-    "@zag-js/tour": "1.34.1",
-    "@zag-js/tree-view": "1.34.1",
-    "@zag-js/types": "1.34.1",
-    "@zag-js/utils": "1.34.1"
+    "@zag-js/accordion": "1.35.2",
+    "@zag-js/anatomy": "1.35.2",
+    "@zag-js/angle-slider": "1.35.2",
+    "@zag-js/async-list": "1.35.2",
+    "@zag-js/auto-resize": "1.35.2",
+    "@zag-js/avatar": "1.35.2",
+    "@zag-js/carousel": "1.35.2",
+    "@zag-js/cascade-select": "1.35.2",
+    "@zag-js/checkbox": "1.35.2",
+    "@zag-js/clipboard": "1.35.2",
+    "@zag-js/collapsible": "1.35.2",
+    "@zag-js/collection": "1.35.2",
+    "@zag-js/color-picker": "1.35.2",
+    "@zag-js/color-utils": "1.35.2",
+    "@zag-js/combobox": "1.35.2",
+    "@zag-js/core": "1.35.2",
+    "@zag-js/date-picker": "1.35.2",
+    "@zag-js/date-utils": "1.35.2",
+    "@zag-js/dialog": "1.35.2",
+    "@zag-js/dom-query": "1.35.2",
+    "@zag-js/drawer": "1.35.2",
+    "@zag-js/editable": "1.35.2",
+    "@zag-js/file-upload": "1.35.2",
+    "@zag-js/file-utils": "1.35.2",
+    "@zag-js/floating-panel": "1.35.2",
+    "@zag-js/focus-trap": "1.35.2",
+    "@zag-js/highlight-word": "1.35.2",
+    "@zag-js/hover-card": "1.35.2",
+    "@zag-js/i18n-utils": "1.35.2",
+    "@zag-js/image-cropper": "1.35.2",
+    "@zag-js/json-tree-utils": "1.35.2",
+    "@zag-js/listbox": "1.35.2",
+    "@zag-js/marquee": "1.35.2",
+    "@zag-js/menu": "1.35.2",
+    "@zag-js/navigation-menu": "1.35.2",
+    "@zag-js/number-input": "1.35.2",
+    "@zag-js/pagination": "1.35.2",
+    "@zag-js/password-input": "1.35.2",
+    "@zag-js/pin-input": "1.35.2",
+    "@zag-js/popover": "1.35.2",
+    "@zag-js/presence": "1.35.2",
+    "@zag-js/progress": "1.35.2",
+    "@zag-js/qr-code": "1.35.2",
+    "@zag-js/radio-group": "1.35.2",
+    "@zag-js/rating-group": "1.35.2",
+    "@zag-js/react": "1.35.2",
+    "@zag-js/scroll-area": "1.35.2",
+    "@zag-js/select": "1.35.2",
+    "@zag-js/signature-pad": "1.35.2",
+    "@zag-js/slider": "1.35.2",
+    "@zag-js/splitter": "1.35.2",
+    "@zag-js/steps": "1.35.2",
+    "@zag-js/switch": "1.35.2",
+    "@zag-js/tabs": "1.35.2",
+    "@zag-js/tags-input": "1.35.2",
+    "@zag-js/timer": "1.35.2",
+    "@zag-js/toast": "1.35.2",
+    "@zag-js/toggle": "1.35.2",
+    "@zag-js/toggle-group": "1.35.2",
+    "@zag-js/tooltip": "1.35.2",
+    "@zag-js/tour": "1.35.2",
+    "@zag-js/tree-view": "1.35.2",
+    "@zag-js/types": "1.35.2",
+    "@zag-js/utils": "1.35.2"
   },
   "devDependencies": {
     "@biomejs/biome": "2.4.4",
@@ -244,9 +244,9 @@
     "resize-observer-polyfill": "1.5.1",
     "storybook": "10.2.10",
     "typescript": "5.9.3",
-    "vite": "7.3.0",
+    "vite": "7.3.1",
     "vite-plugin-dts": "4.5.4",
-    "vitest": "^4.0.0",
+    "vitest": "^4.0.18",
     "vitest-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {