@chayns-ui/core 0.11.1 → 0.11.2

package/dist/components/date-time-picker/DateTimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-time-picker/DateTimePicker.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAiC,KAAK,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEpG,QAAA,MAAM,cAAc,gIA6NlB,CAAC;AAIH,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-time-picker/DateTimePicker.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAiC,KAAK,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEpG,QAAA,MAAM,cAAc,gIA2PlB,CAAC;AAIH,eAAe,cAAc,CAAC"}

package/dist/components/date-time-picker/DateTimePicker.js

@@ -9,7 +9,7 @@ import { forwardRef, useEffect, useId, useLayoutEffect, useMemo, useRef, useStat
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/components/date-time-picker/DateTimePicker.tsx
-var DateTimePicker = forwardRef(function DateTimePicker({ className, disabled, id, label, locale, maxDate, minDate, minuteStep = 1, mode = "time", onChange, onClick, onKeyDown, placeholder, value, wheelLabels, ...buttonProps }, ref) {
+var DateTimePicker = forwardRef(function DateTimePicker({ className, disabled, id, inline = false, label, locale, maxDate, minDate, minuteStep = 1, mode = "time", onChange, onClick, onKeyDown, placeholder, value, wheelLabels, ...buttonProps }, ref) {
 	if (!DATE_TIME_PICKER_MINUTE_STEPS.includes(minuteStep)) throw new Error("DateTimePicker minuteStep must be one of: 1, 5, 15, 30.");
 	if (minDate !== void 0 && maxDate !== void 0 && dateAtMidnight(minDate) > dateAtMidnight(maxDate)) throw new Error("DateTimePicker requires minDate to be earlier than or equal to maxDate.");
 	const generatedId = useId();
@@ -20,7 +20,7 @@ var DateTimePicker = forwardRef(function DateTimePicker({ className, disabled, i
 	const triggerRef = useRef(null);
 	const setTriggerElement = useMemo(() => composeNativeRefs(triggerRef, ref), [ref]);
 	const [open, setOpen] = useState(false);
-	const { displayValue, formattedValue, activeValue, isTwelveHour, hours, minutes, dayPeriods, datePartOrder, dateOptions, dateValue, dateLabel, updateDate, updateTime, updatePeriod, sizingValues } = useDateTimePickerValue({
+	const { displayValue, formattedValue, activeValue, isTwelveHour, hours, minutes, dayPeriods, datePartOrder, dateOptions, dateValue, dateLabel, updateDate, updateTime, updatePeriod, sizingValueGroups } = useDateTimePickerValue({
 		value,
 		locale,
 		maxDate,
@@ -70,16 +70,62 @@ var DateTimePicker = forwardRef(function DateTimePicker({ className, disabled, i
 	const resolvedClassName = [
 		"chayns-date-time-picker",
 		`chayns-date-time-picker--${mode}`,
+		inline ? "chayns-date-time-picker--inline" : "",
 		open ? "chayns-date-time-picker--open" : "",
 		displayValue !== null ? "chayns-date-time-picker--filled" : ""
 	].filter(Boolean).join(" ");
+	const wheelContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		mode !== "time" ? datePartOrder.map((part) => /* @__PURE__ */ jsx(Wheel, {
+			ariaLabel: dateLabel(part),
+			disabled: disabled ?? false,
+			onEscape: inline ? () => void 0 : close,
+			onSelect: (nextValue) => updateDate(part, nextValue),
+			options: dateOptions(part),
+			selected: dateValue(part)
+		}, part)) : null,
+		mode === "date-time" ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "chayns-date-time-picker__date-time-gap"
+		}) : null,
+		mode !== "date" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(Wheel, {
+				ariaLabel: wheelLabels.hour,
+				disabled: disabled ?? false,
+				onEscape: inline ? () => void 0 : close,
+				onSelect: (hour) => updateTime("hours", hour),
+				options: hours,
+				selected: isTwelveHour ? activeValue.getHours() % 12 || 12 : activeValue.getHours()
+			}),
+			/* @__PURE__ */ jsx(Wheel, {
+				ariaLabel: wheelLabels.minute,
+				disabled: disabled ?? false,
+				onEscape: inline ? () => void 0 : close,
+				onSelect: (minute) => updateTime("minutes", minute),
+				options: minutes,
+				selected: activeValue.getMinutes()
+			}),
+			isTwelveHour ? /* @__PURE__ */ jsx(Wheel, {
+				ariaLabel: wheelLabels.dayPeriod,
+				disabled: disabled ?? false,
+				onEscape: inline ? () => void 0 : close,
+				onSelect: updatePeriod,
+				options: dayPeriods,
+				selected: activeValue.getHours() >= 12 ? 1 : 0
+			}) : null
+		] }) : null
+	] });
 	return /* @__PURE__ */ jsxs("div", {
 		className: resolvedClassName,
 		ref: rootRef,
-		children: [
+		children: [inline ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
+			"aria-label": label,
+			className: "chayns-date-time-picker__wheels",
+			role: "group",
+			children: [/* @__PURE__ */ jsx("div", { className: "chayns-date-time-picker__selection" }), wheelContent]
+		}) }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			/* @__PURE__ */ jsx(PickerSizer, {
-				values: sizingValues,
-				placeholder: displayValue === null ? placeholder : null
+				placeholder: displayValue === null ? placeholder : null,
+				valueGroups: sizingValueGroups
 			}),
 			/* @__PURE__ */ jsx("button", {
 				...buttonProps,
@@ -109,47 +155,18 @@ var DateTimePicker = forwardRef(function DateTimePicker({ className, disabled, i
 				className: "chayns-date-time-picker__label",
 				htmlFor: triggerId,
 				children: label
-			}) : null,
-			open && !disabled && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsxs("div", {
-				"aria-label": label,
-				className: "chayns-date-time-picker__popup",
-				id: popupId,
-				ref: popupRef,
-				role: "dialog",
-				children: [/* @__PURE__ */ jsx("div", { className: "chayns-date-time-picker__selection" }), /* @__PURE__ */ jsx("div", {
-					className: "chayns-date-time-picker__wheels",
-					children: mode === "time" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-						/* @__PURE__ */ jsx(Wheel, {
-							ariaLabel: wheelLabels.hour,
-							onEscape: close,
-							onSelect: (hour) => updateTime("hours", hour),
-							options: hours,
-							selected: isTwelveHour ? activeValue.getHours() % 12 || 12 : activeValue.getHours()
-						}),
-						/* @__PURE__ */ jsx(Wheel, {
-							ariaLabel: wheelLabels.minute,
-							onEscape: close,
-							onSelect: (minute) => updateTime("minutes", minute),
-							options: minutes,
-							selected: activeValue.getMinutes()
-						}),
-						isTwelveHour ? /* @__PURE__ */ jsx(Wheel, {
-							ariaLabel: wheelLabels.dayPeriod,
-							onEscape: close,
-							onSelect: updatePeriod,
-							options: dayPeriods,
-							selected: activeValue.getHours() >= 12 ? 1 : 0
-						}) : null
-					] }) : datePartOrder.map((part) => /* @__PURE__ */ jsx(Wheel, {
-						ariaLabel: dateLabel(part),
-						onEscape: close,
-						onSelect: (nextValue) => updateDate(part, nextValue),
-						options: dateOptions(part),
-						selected: dateValue(part)
-					}, part))
-				})]
-			}), document.body) : null
-		]
+			}) : null
+		] }), open && !disabled && !inline && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx("div", {
+			"aria-label": label,
+			className: ["chayns-date-time-picker__popup", `chayns-date-time-picker__popup--${mode}`].join(" "),
+			id: popupId,
+			ref: popupRef,
+			role: "dialog",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "chayns-date-time-picker__wheels",
+				children: [/* @__PURE__ */ jsx("div", { className: "chayns-date-time-picker__selection" }), wheelContent]
+			})
+		}), document.body) : null]
 	});
 });
 DateTimePicker.displayName = "DateTimePicker";

package/dist/components/date-time-picker/DateTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { composeNativeRefs } from '../../utils/native-ref.js';\nimport { useOverlayPosition } from '../../hooks/useOverlayPosition.js';\nimport { dateAtMidnight } from './date-time-picker-utils.js';\nimport { useDateTimePickerValue } from './hooks/useDateTimePickerValue.js';\nimport Wheel from './wheel/Wheel.js';\nimport PickerSizer from './sizer/PickerSizer.js';\nimport { DATE_TIME_PICKER_MINUTE_STEPS, type DateTimePickerProps } from './DateTimePicker.types.js';\n\nconst DateTimePicker = forwardRef<HTMLButtonElement, DateTimePickerProps>(function DateTimePicker(\n  {\n    className,\n    disabled,\n    id,\n    label,\n    locale,\n    maxDate,\n    minDate,\n    minuteStep = 1,\n    mode = 'time',\n    onChange,\n    onClick,\n    onKeyDown,\n    placeholder,\n    value,\n    wheelLabels,\n    ...buttonProps\n  },\n  ref,\n) {\n  if (!DATE_TIME_PICKER_MINUTE_STEPS.includes(minuteStep)) {\n    throw new Error('DateTimePicker minuteStep must be one of: 1, 5, 15, 30.');\n  }\n\n  if (\n    minDate !== undefined &&\n    maxDate !== undefined &&\n    dateAtMidnight(minDate) > dateAtMidnight(maxDate)\n  ) {\n    throw new Error('DateTimePicker requires minDate to be earlier than or equal to maxDate.');\n  }\n\n  const generatedId = useId();\n  const triggerId = id ?? generatedId;\n  const popupId = `${triggerId}-popup`;\n  const rootRef = useRef<HTMLDivElement>(null);\n  const popupRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const setTriggerElement = useMemo(() => composeNativeRefs(triggerRef, ref), [ref]);\n  const [open, setOpen] = useState(false);\n  const {\n    displayValue,\n    formattedValue,\n    activeValue,\n    isTwelveHour,\n    hours,\n    minutes,\n    dayPeriods,\n    datePartOrder,\n    dateOptions,\n    dateValue,\n    dateLabel,\n    updateDate,\n    updateTime,\n    updatePeriod,\n    sizingValues,\n  } = useDateTimePickerValue({\n    value,\n    locale,\n    maxDate,\n    minDate,\n    onChange,\n    placeholder,\n    wheelLabels,\n    minuteStep,\n    mode,\n  });\n  function close() {\n    setOpen(false);\n    triggerRef.current?.focus();\n  }\n\n  useLayoutEffect(() => {\n    const popup = popupRef.current;\n    const trigger = triggerRef.current;\n    if (!open || popup === null || trigger === null) return;\n\n    const popupStyle = window.getComputedStyle(popup);\n    const popupFrameWidth =\n      Number.parseFloat(popupStyle.borderInlineStartWidth) +\n      Number.parseFloat(popupStyle.borderInlineEndWidth) +\n      Number.parseFloat(popupStyle.paddingInlineStart) +\n      Number.parseFloat(popupStyle.paddingInlineEnd);\n    const wheels = Array.from(\n      popup.querySelectorAll<HTMLElement>('.chayns-date-time-picker__wheel'),\n    );\n    for (const wheel of wheels) {\n      const contentWidth = Math.max(\n        ...Array.from(\n          wheel.querySelectorAll<HTMLElement>('.chayns-date-time-picker__wheel-sizer-option'),\n        ).map((option) => option.getBoundingClientRect().width),\n        wheel.scrollWidth,\n      );\n      wheel.style.inlineSize = `${contentWidth}px`;\n      wheel.style.flex = `0 0 ${contentWidth}px`;\n    }\n    const wheelsWidth =\n      popup.querySelector<HTMLElement>('.chayns-date-time-picker__wheels')?.scrollWidth ?? 0;\n    const triggerWidth = trigger.getBoundingClientRect().width;\n\n    if (wheelsWidth === 0 && triggerWidth === 0) return;\n    popup.style.inlineSize = `${Math.max(triggerWidth, wheelsWidth + popupFrameWidth)}px`;\n  }, [locale, maxDate, minDate, mode, open]);\n\n  useOverlayPosition(popupRef, triggerRef.current, open, 'bottom', 4, true);\n\n  useEffect(() => {\n    if (!open) return undefined;\n    function closeOnOutsidePress(event: PointerEvent) {\n      if (\n        event.target instanceof Node &&\n        !rootRef.current?.contains(event.target) &&\n        !popupRef.current?.contains(event.target)\n      ) {\n        close();\n      }\n    }\n    document.addEventListener('pointerdown', closeOnOutsidePress);\n    return () => document.removeEventListener('pointerdown', closeOnOutsidePress);\n  });\n  const resolvedClassName = [\n    'chayns-date-time-picker',\n    `chayns-date-time-picker--${mode}`,\n    open ? 'chayns-date-time-picker--open' : '',\n    displayValue !== null ? 'chayns-date-time-picker--filled' : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={resolvedClassName} ref={rootRef}>\n      <PickerSizer values={sizingValues} placeholder={displayValue === null ? placeholder : null} />\n      <button\n        {...buttonProps}\n        aria-controls={open ? popupId : undefined}\n        aria-expanded={open}\n        aria-haspopup=\"dialog\"\n        aria-label={label}\n        className={['chayns-date-time-picker__trigger', className].filter(Boolean).join(' ')}\n        disabled={disabled}\n        id={triggerId}\n        onClick={(event) => {\n          onClick?.(event);\n          if (!event.defaultPrevented) setOpen((current) => !current);\n        }}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          if (event.key === 'Escape' && open && !event.defaultPrevented) {\n            event.preventDefault();\n            close();\n          }\n        }}\n        ref={setTriggerElement}\n        type=\"button\"\n      >\n        {formattedValue}\n      </button>\n      {displayValue === null ? (\n        <label className=\"chayns-date-time-picker__label\" htmlFor={triggerId}>\n          {label}\n        </label>\n      ) : null}\n      {open && !disabled && typeof document !== 'undefined'\n        ? createPortal(\n            <div\n              aria-label={label}\n              className=\"chayns-date-time-picker__popup\"\n              id={popupId}\n              ref={popupRef}\n              role=\"dialog\"\n            >\n              <div className=\"chayns-date-time-picker__selection\" />\n              <div className=\"chayns-date-time-picker__wheels\">\n                {mode === 'time' ? (\n                  <>\n                    <Wheel\n                      ariaLabel={wheelLabels.hour}\n                      onEscape={close}\n                      onSelect={(hour) => updateTime('hours', hour)}\n                      options={hours}\n                      selected={\n                        isTwelveHour ? activeValue.getHours() % 12 || 12 : activeValue.getHours()\n                      }\n                    />\n                    <Wheel\n                      ariaLabel={wheelLabels.minute}\n                      onEscape={close}\n                      onSelect={(minute) => updateTime('minutes', minute)}\n                      options={minutes}\n                      selected={activeValue.getMinutes()}\n                    />\n                    {isTwelveHour ? (\n                      <Wheel\n                        ariaLabel={wheelLabels.dayPeriod}\n                        onEscape={close}\n                        onSelect={updatePeriod}\n                        options={dayPeriods}\n                        selected={activeValue.getHours() >= 12 ? 1 : 0}\n                      />\n                    ) : null}\n                  </>\n                ) : (\n                  datePartOrder.map((part) => (\n                    <Wheel\n                      ariaLabel={dateLabel(part)}\n                      key={part}\n                      onEscape={close}\n                      onSelect={(nextValue) => updateDate(part, nextValue)}\n                      options={dateOptions(part)}\n                      selected={dateValue(part)}\n                    />\n                  ))\n                )}\n              </div>\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n});\n\nDateTimePicker.displayName = 'DateTimePicker';\n\nexport default DateTimePicker;\n"],"mappings":"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"}
+{"version":3,"file":"DateTimePicker.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { composeNativeRefs } from '../../utils/native-ref.js';\nimport { useOverlayPosition } from '../../hooks/useOverlayPosition.js';\nimport { dateAtMidnight } from './date-time-picker-utils.js';\nimport { useDateTimePickerValue } from './hooks/useDateTimePickerValue.js';\nimport Wheel from './wheel/Wheel.js';\nimport PickerSizer from './sizer/PickerSizer.js';\nimport { DATE_TIME_PICKER_MINUTE_STEPS, type DateTimePickerProps } from './DateTimePicker.types.js';\n\nconst DateTimePicker = forwardRef<HTMLButtonElement, DateTimePickerProps>(function DateTimePicker(\n  {\n    className,\n    disabled,\n    id,\n    inline = false,\n    label,\n    locale,\n    maxDate,\n    minDate,\n    minuteStep = 1,\n    mode = 'time',\n    onChange,\n    onClick,\n    onKeyDown,\n    placeholder,\n    value,\n    wheelLabels,\n    ...buttonProps\n  },\n  ref,\n) {\n  if (!DATE_TIME_PICKER_MINUTE_STEPS.includes(minuteStep)) {\n    throw new Error('DateTimePicker minuteStep must be one of: 1, 5, 15, 30.');\n  }\n\n  if (\n    minDate !== undefined &&\n    maxDate !== undefined &&\n    dateAtMidnight(minDate) > dateAtMidnight(maxDate)\n  ) {\n    throw new Error('DateTimePicker requires minDate to be earlier than or equal to maxDate.');\n  }\n\n  const generatedId = useId();\n  const triggerId = id ?? generatedId;\n  const popupId = `${triggerId}-popup`;\n  const rootRef = useRef<HTMLDivElement>(null);\n  const popupRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const setTriggerElement = useMemo(() => composeNativeRefs(triggerRef, ref), [ref]);\n  const [open, setOpen] = useState(false);\n  const {\n    displayValue,\n    formattedValue,\n    activeValue,\n    isTwelveHour,\n    hours,\n    minutes,\n    dayPeriods,\n    datePartOrder,\n    dateOptions,\n    dateValue,\n    dateLabel,\n    updateDate,\n    updateTime,\n    updatePeriod,\n    sizingValueGroups,\n  } = useDateTimePickerValue({\n    value,\n    locale,\n    maxDate,\n    minDate,\n    onChange,\n    placeholder,\n    wheelLabels,\n    minuteStep,\n    mode,\n  });\n  function close() {\n    setOpen(false);\n    triggerRef.current?.focus();\n  }\n\n  useLayoutEffect(() => {\n    const popup = popupRef.current;\n    const trigger = triggerRef.current;\n    if (!open || popup === null || trigger === null) return;\n\n    const popupStyle = window.getComputedStyle(popup);\n    const popupFrameWidth =\n      Number.parseFloat(popupStyle.borderInlineStartWidth) +\n      Number.parseFloat(popupStyle.borderInlineEndWidth) +\n      Number.parseFloat(popupStyle.paddingInlineStart) +\n      Number.parseFloat(popupStyle.paddingInlineEnd);\n    const wheels = Array.from(\n      popup.querySelectorAll<HTMLElement>('.chayns-date-time-picker__wheel'),\n    );\n    for (const wheel of wheels) {\n      const contentWidth = Math.max(\n        ...Array.from(\n          wheel.querySelectorAll<HTMLElement>('.chayns-date-time-picker__wheel-sizer-option'),\n        ).map((option) => option.getBoundingClientRect().width),\n        wheel.scrollWidth,\n      );\n      wheel.style.inlineSize = `${contentWidth}px`;\n      wheel.style.flex = `0 0 ${contentWidth}px`;\n    }\n    const wheelsWidth =\n      popup.querySelector<HTMLElement>('.chayns-date-time-picker__wheels')?.scrollWidth ?? 0;\n    const triggerWidth = trigger.getBoundingClientRect().width;\n\n    if (wheelsWidth === 0 && triggerWidth === 0) return;\n    popup.style.inlineSize = `${Math.max(triggerWidth, wheelsWidth + popupFrameWidth)}px`;\n  }, [locale, maxDate, minDate, mode, open]);\n\n  useOverlayPosition(popupRef, triggerRef.current, open, 'bottom', 4, true);\n\n  useEffect(() => {\n    if (!open) return undefined;\n    function closeOnOutsidePress(event: PointerEvent) {\n      if (\n        event.target instanceof Node &&\n        !rootRef.current?.contains(event.target) &&\n        !popupRef.current?.contains(event.target)\n      ) {\n        close();\n      }\n    }\n    document.addEventListener('pointerdown', closeOnOutsidePress);\n    return () => document.removeEventListener('pointerdown', closeOnOutsidePress);\n  });\n  const resolvedClassName = [\n    'chayns-date-time-picker',\n    `chayns-date-time-picker--${mode}`,\n    inline ? 'chayns-date-time-picker--inline' : '',\n    open ? 'chayns-date-time-picker--open' : '',\n    displayValue !== null ? 'chayns-date-time-picker--filled' : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const wheelContent = (\n    <>\n      {mode !== 'time'\n        ? datePartOrder.map((part) => (\n            <Wheel\n              ariaLabel={dateLabel(part)}\n              disabled={disabled ?? false}\n              key={part}\n              onEscape={inline ? () => undefined : close}\n              onSelect={(nextValue) => updateDate(part, nextValue)}\n              options={dateOptions(part)}\n              selected={dateValue(part)}\n            />\n          ))\n        : null}\n      {mode === 'date-time' ? (\n        <span aria-hidden=\"true\" className=\"chayns-date-time-picker__date-time-gap\" />\n      ) : null}\n      {mode !== 'date' ? (\n        <>\n          <Wheel\n            ariaLabel={wheelLabels.hour}\n            disabled={disabled ?? false}\n            onEscape={inline ? () => undefined : close}\n            onSelect={(hour) => updateTime('hours', hour)}\n            options={hours}\n            selected={isTwelveHour ? activeValue.getHours() % 12 || 12 : activeValue.getHours()}\n          />\n          <Wheel\n            ariaLabel={wheelLabels.minute}\n            disabled={disabled ?? false}\n            onEscape={inline ? () => undefined : close}\n            onSelect={(minute) => updateTime('minutes', minute)}\n            options={minutes}\n            selected={activeValue.getMinutes()}\n          />\n          {isTwelveHour ? (\n            <Wheel\n              ariaLabel={wheelLabels.dayPeriod}\n              disabled={disabled ?? false}\n              onEscape={inline ? () => undefined : close}\n              onSelect={updatePeriod}\n              options={dayPeriods}\n              selected={activeValue.getHours() >= 12 ? 1 : 0}\n            />\n          ) : null}\n        </>\n      ) : null}\n    </>\n  );\n\n  return (\n    <div className={resolvedClassName} ref={rootRef}>\n      {inline ? (\n        <>\n          <div aria-label={label} className=\"chayns-date-time-picker__wheels\" role=\"group\">\n            <div className=\"chayns-date-time-picker__selection\" />\n            {wheelContent}\n          </div>\n        </>\n      ) : (\n        <>\n          <PickerSizer\n            placeholder={displayValue === null ? placeholder : null}\n            valueGroups={sizingValueGroups}\n          />\n          <button\n            {...buttonProps}\n            aria-controls={open ? popupId : undefined}\n            aria-expanded={open}\n            aria-haspopup=\"dialog\"\n            aria-label={label}\n            className={['chayns-date-time-picker__trigger', className].filter(Boolean).join(' ')}\n            disabled={disabled}\n            id={triggerId}\n            onClick={(event) => {\n              onClick?.(event);\n              if (!event.defaultPrevented) setOpen((current) => !current);\n            }}\n            onKeyDown={(event) => {\n              onKeyDown?.(event);\n              if (event.key === 'Escape' && open && !event.defaultPrevented) {\n                event.preventDefault();\n                close();\n              }\n            }}\n            ref={setTriggerElement}\n            type=\"button\"\n          >\n            {formattedValue}\n          </button>\n          {displayValue === null ? (\n            <label className=\"chayns-date-time-picker__label\" htmlFor={triggerId}>\n              {label}\n            </label>\n          ) : null}\n        </>\n      )}\n      {open && !disabled && !inline && typeof document !== 'undefined'\n        ? createPortal(\n            <div\n              aria-label={label}\n              className={[\n                'chayns-date-time-picker__popup',\n                `chayns-date-time-picker__popup--${mode}`,\n              ].join(' ')}\n              id={popupId}\n              ref={popupRef}\n              role=\"dialog\"\n            >\n              <div className=\"chayns-date-time-picker__wheels\">\n                <div className=\"chayns-date-time-picker__selection\" />\n                {wheelContent}\n              </div>\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n});\n\nDateTimePicker.displayName = 'DateTimePicker';\n\nexport default DateTimePicker;\n"],"mappings":"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"}

package/dist/components/date-time-picker/DateTimePicker.types.d.ts

@@ -9,9 +9,10 @@ export declare enum DateTimePickerMinuteSteps {
 /** Named configuration values; existing literal props and value lists remain supported. */
 export declare enum DateTimePickerModes {
     Date = "date",
+    DateTime = "date-time",
     Time = "time"
 }
-export declare const DATE_TIME_PICKER_MODES: readonly ["date", "time"];
+export declare const DATE_TIME_PICKER_MODES: readonly ["date", "date-time", "time"];
 export declare const DATE_TIME_PICKER_MINUTE_STEPS: readonly [1, 5, 15, 30];
 export type DateTimePickerMode = (typeof DATE_TIME_PICKER_MODES)[number];
 export type DateTimePickerMinuteStep = (typeof DATE_TIME_PICKER_MINUTE_STEPS)[number];
@@ -25,6 +26,8 @@ export interface DateTimePickerWheelLabels {
 }
 export interface DateTimePickerProps extends Omit<ComponentPropsWithRef<'button'>, 'aria-controls' | 'aria-expanded' | 'aria-haspopup' | 'aria-label' | 'aria-labelledby' | 'children' | 'onChange' | 'type' | 'value'> {
     label: string;
+    /** Renders the wheel content without a trigger button or popup dialog. */
+    inline?: boolean;
     locale: string;
     minDate?: Date;
     maxDate?: Date;

package/dist/components/date-time-picker/DateTimePicker.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.types.d.ts","sourceRoot":"","sources":["../../../src/components/date-time-picker/DateTimePicker.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,2FAA2F;AAC3F,oBAAY,yBAAyB;IACnC,GAAG,IAAI;IACP,IAAI,IAAI;IACR,OAAO,KAAK;IACZ,MAAM,KAAK;CACZ;AAED,2FAA2F;AAC3F,oBAAY,mBAAmB;IAC7B,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,eAAO,MAAM,sBAAsB,2BAA4B,CAAC;AAChE,eAAO,MAAM,6BAA6B,yBAA0B,CAAC;AAErE,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AACzE,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,6BAA6B,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtF,MAAM,WAAW,yBAAyB;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,qBAAqB,CAAC,QAAQ,CAAC,EAC7B,eAAe,GACf,eAAe,GACf,eAAe,GACf,YAAY,GACZ,iBAAiB,GACjB,UAAU,GACV,UAAU,GACV,MAAM,GACN,OAAO,CACV;IACC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,WAAW,EAAE,yBAAyB,CAAC;CACxC"}
+{"version":3,"file":"DateTimePicker.types.d.ts","sourceRoot":"","sources":["../../../src/components/date-time-picker/DateTimePicker.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,2FAA2F;AAC3F,oBAAY,yBAAyB;IACnC,GAAG,IAAI;IACP,IAAI,IAAI;IACR,OAAO,KAAK;IACZ,MAAM,KAAK;CACZ;AAED,2FAA2F;AAC3F,oBAAY,mBAAmB;IAC7B,IAAI,SAAS;IACb,QAAQ,cAAc;IACtB,IAAI,SAAS;CACd;AAED,eAAO,MAAM,sBAAsB,wCAAyC,CAAC;AAC7E,eAAO,MAAM,6BAA6B,yBAA0B,CAAC;AAErE,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AACzE,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,6BAA6B,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtF,MAAM,WAAW,yBAAyB;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,qBAAqB,CAAC,QAAQ,CAAC,EAC7B,eAAe,GACf,eAAe,GACf,eAAe,GACf,YAAY,GACZ,iBAAiB,GACjB,UAAU,GACV,UAAU,GACV,MAAM,GACN,OAAO,CACV;IACC,KAAK,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,WAAW,EAAE,yBAAyB,CAAC;CACxC"}

package/dist/components/date-time-picker/DateTimePicker.types.js

@@ -10,10 +10,15 @@ var DateTimePickerMinuteSteps = /* @__PURE__ */ function(DateTimePickerMinuteSte
 /** Named configuration values; existing literal props and value lists remain supported. */
 var DateTimePickerModes = /* @__PURE__ */ function(DateTimePickerModes) {
 	DateTimePickerModes["Date"] = "date";
+	DateTimePickerModes["DateTime"] = "date-time";
 	DateTimePickerModes["Time"] = "time";
 	return DateTimePickerModes;
 }({});
-var DATE_TIME_PICKER_MODES = ["date", "time"];
+var DATE_TIME_PICKER_MODES = [
+	"date",
+	"date-time",
+	"time"
+];
 var DATE_TIME_PICKER_MINUTE_STEPS = [
 	1,
 	5,

package/dist/components/date-time-picker/DateTimePicker.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.types.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePicker.types.ts"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react';\n\n/** Named configuration values; existing literal props and value lists remain supported. */\nexport enum DateTimePickerMinuteSteps {\n  One = 1,\n  Five = 5,\n  Fifteen = 15,\n  Thirty = 30,\n}\n\n/** Named configuration values; existing literal props and value lists remain supported. */\nexport enum DateTimePickerModes {\n  Date = 'date',\n  Time = 'time',\n}\n\nexport const DATE_TIME_PICKER_MODES = ['date', 'time'] as const;\nexport const DATE_TIME_PICKER_MINUTE_STEPS = [1, 5, 15, 30] as const;\n\nexport type DateTimePickerMode = (typeof DATE_TIME_PICKER_MODES)[number];\nexport type DateTimePickerMinuteStep = (typeof DATE_TIME_PICKER_MINUTE_STEPS)[number];\n\nexport interface DateTimePickerWheelLabels {\n  day: string;\n  dayPeriod: string;\n  hour: string;\n  minute: string;\n  month: string;\n  year: string;\n}\n\nexport interface DateTimePickerProps extends Omit<\n  ComponentPropsWithRef<'button'>,\n  | 'aria-controls'\n  | 'aria-expanded'\n  | 'aria-haspopup'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'children'\n  | 'onChange'\n  | 'type'\n  | 'value'\n> {\n  label: string;\n  locale: string;\n  minDate?: Date;\n  maxDate?: Date;\n  minuteStep?: DateTimePickerMinuteStep;\n  mode?: DateTimePickerMode;\n  onChange: (value: Date) => void;\n  placeholder: string;\n  value: Date | null;\n  wheelLabels: DateTimePickerWheelLabels;\n}\n"],"mappings":";;AAGA,IAAY,4BAAL,yBAAA,2BAAA;CACL,0BAAA,0BAAA,SAAA,KAAA;CACA,0BAAA,0BAAA,UAAA,KAAA;CACA,0BAAA,0BAAA,aAAA,MAAA;CACA,0BAAA,0BAAA,YAAA,MAAA;;AACF,EAAA,CAAA,CAAA;;AAGA,IAAY,sBAAL,yBAAA,qBAAA;CACL,oBAAA,UAAA;CACA,oBAAA,UAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAa,yBAAyB,CAAC,QAAQ,MAAM;AACrD,IAAa,gCAAgC;CAAC;CAAG;CAAG;CAAI;AAAE"}
+{"version":3,"file":"DateTimePicker.types.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePicker.types.ts"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react';\n\n/** Named configuration values; existing literal props and value lists remain supported. */\nexport enum DateTimePickerMinuteSteps {\n  One = 1,\n  Five = 5,\n  Fifteen = 15,\n  Thirty = 30,\n}\n\n/** Named configuration values; existing literal props and value lists remain supported. */\nexport enum DateTimePickerModes {\n  Date = 'date',\n  DateTime = 'date-time',\n  Time = 'time',\n}\n\nexport const DATE_TIME_PICKER_MODES = ['date', 'date-time', 'time'] as const;\nexport const DATE_TIME_PICKER_MINUTE_STEPS = [1, 5, 15, 30] as const;\n\nexport type DateTimePickerMode = (typeof DATE_TIME_PICKER_MODES)[number];\nexport type DateTimePickerMinuteStep = (typeof DATE_TIME_PICKER_MINUTE_STEPS)[number];\n\nexport interface DateTimePickerWheelLabels {\n  day: string;\n  dayPeriod: string;\n  hour: string;\n  minute: string;\n  month: string;\n  year: string;\n}\n\nexport interface DateTimePickerProps extends Omit<\n  ComponentPropsWithRef<'button'>,\n  | 'aria-controls'\n  | 'aria-expanded'\n  | 'aria-haspopup'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'children'\n  | 'onChange'\n  | 'type'\n  | 'value'\n> {\n  label: string;\n  /** Renders the wheel content without a trigger button or popup dialog. */\n  inline?: boolean;\n  locale: string;\n  minDate?: Date;\n  maxDate?: Date;\n  minuteStep?: DateTimePickerMinuteStep;\n  mode?: DateTimePickerMode;\n  onChange: (value: Date) => void;\n  placeholder: string;\n  value: Date | null;\n  wheelLabels: DateTimePickerWheelLabels;\n}\n"],"mappings":";;AAGA,IAAY,4BAAL,yBAAA,2BAAA;CACL,0BAAA,0BAAA,SAAA,KAAA;CACA,0BAAA,0BAAA,UAAA,KAAA;CACA,0BAAA,0BAAA,aAAA,MAAA;CACA,0BAAA,0BAAA,YAAA,MAAA;;AACF,EAAA,CAAA,CAAA;;AAGA,IAAY,sBAAL,yBAAA,qBAAA;CACL,oBAAA,UAAA;CACA,oBAAA,cAAA;CACA,oBAAA,UAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAa,yBAAyB;CAAC;CAAQ;CAAa;AAAM;AAClE,IAAa,gCAAgC;CAAC;CAAG;CAAG;CAAI;AAAE"}

package/dist/components/date-time-picker/hooks/useDateTimePickerValue.d.ts

@@ -6,7 +6,7 @@ type ValueProps = Pick<DateTimePickerProps, 'value' | 'locale' | 'onChange' | 'p
 };
 export declare function useDateTimePickerValue({ value, locale, maxDate, minDate, onChange, placeholder, wheelLabels, minuteStep, mode, }: ValueProps): {
     displayValue: Date | null;
-    sizingValues: string[];
+    sizingValueGroups: string[][];
     formattedValue: string;
     activeValue: Date;
     isTwelveHour: boolean;

package/dist/components/date-time-picker/hooks/useDateTimePickerValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDateTimePickerValue.d.ts","sourceRoot":"","sources":["../../../../src/components/date-time-picker/hooks/useDateTimePickerValue.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACtE,KAAK,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;AAC9C,KAAK,UAAU,GAAG,IAAI,CACpB,mBAAmB,EACnB,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,aAAa,GAAG,aAAa,CAChE,GACC,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,YAAY,GAAG,MAAM,CAAC,CAAC,GAAG;IAC3D,OAAO,EAAE,IAAI,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,IAAI,GAAG,SAAS,CAAC;CAC3B,CAAC;AAEJ,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,WAAW,EACX,WAAW,EACX,UAAU,EACV,IAAI,GACL,EAAE,UAAU;;;;;;;;;;;;;;;;;;;wBAsJgB,QAAQ;;;;sBAMV,QAAQ;sBAYR,QAAQ;uBAhHP,QAAQ,aAAa,MAAM;uBAjB3B,OAAO,GAAG,SAAS,aAAa,MAAM;2BAWlC,MAAM;EA4IrC"}
+{"version":3,"file":"useDateTimePickerValue.d.ts","sourceRoot":"","sources":["../../../../src/components/date-time-picker/hooks/useDateTimePickerValue.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACtE,KAAK,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;AAC9C,KAAK,UAAU,GAAG,IAAI,CACpB,mBAAmB,EACnB,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,aAAa,GAAG,aAAa,CAChE,GACC,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,YAAY,GAAG,MAAM,CAAC,CAAC,GAAG;IAC3D,OAAO,EAAE,IAAI,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,IAAI,GAAG,SAAS,CAAC;CAC3B,CAAC;AAEJ,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,WAAW,EACX,WAAW,EACX,UAAU,EACV,IAAI,GACL,EAAE,UAAU;;;;;;;;;;;;;;;;;;;wBAkKgB,QAAQ;;;;sBAMV,QAAQ;sBAYR,QAAQ;uBA1HP,QAAQ,aAAa,MAAM;uBAjB3B,OAAO,GAAG,SAAS,aAAa,MAAM;2BAWlC,MAAM;EAsJrC"}

package/dist/components/date-time-picker/hooks/useDateTimePickerValue.js

@@ -1,5 +1,5 @@
 import { clampDate, dateAtMidnight, normalizeMinute } from "../date-time-picker-utils.js";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 //#region src/components/date-time-picker/hooks/useDateTimePickerValue.ts
 function useDateTimePickerValue({ value, locale, maxDate, minDate, onChange, placeholder, wheelLabels, minuteStep, mode }) {
 	const { hourFormatter, monthFormatter, timeFormatter, dateFormatter, dateOrderFormatter } = useMemo(() => ({
@@ -21,7 +21,7 @@ function useDateTimePickerValue({ value, locale, maxDate, minDate, onChange, pla
 		})
 	}), [locale]);
 	let displayValue = value;
-	if (value !== null) displayValue = mode === "date" ? clampDate(value, minDate, maxDate) : normalizeMinute(value, minuteStep);
+	if (value !== null) displayValue = mode === "time" ? normalizeMinute(value, minuteStep) : normalizeMinute(clampDate(value, minDate, maxDate), minuteStep);
 	const activeValue = displayValue ?? /* @__PURE__ */ new Date();
 	const isTwelveHour = hourFormatter.resolvedOptions().hour12 === true;
 	const years = useMemo(() => {
@@ -31,7 +31,7 @@ function useDateTimePickerValue({ value, locale, maxDate, minDate, onChange, pla
 		return Array.from({ length: last - first + 1 }, (_, index) => first + index);
 	}, [maxDate, minDate]);
 	function emit(nextValue) {
-		onChange(mode === "date" ? clampDate(nextValue, minDate, maxDate) : nextValue);
+		onChange(mode === "time" ? nextValue : clampDate(nextValue, minDate, maxDate));
 	}
 	function updateTime(part, nextValue) {
 		const next = new Date(activeValue);
@@ -57,26 +57,27 @@ function useDateTimePickerValue({ value, locale, maxDate, minDate, onChange, pla
 		emit(next);
 	}
 	let formattedValue = placeholder;
+	const formatTime = useCallback((date) => `${timeFormatter.format(date)}${locale.toLowerCase().startsWith("de") ? " Uhr" : ""}`, [locale, timeFormatter]);
 	if (displayValue !== null) {
-		if (mode === "time") formattedValue = `${timeFormatter.format(displayValue)}${locale.toLowerCase().startsWith("de") ? " Uhr" : ""}`;
-		else formattedValue = dateFormatter.format(displayValue);
+		if (mode === "time") formattedValue = formatTime(displayValue);
+		else if (mode === "date") formattedValue = dateFormatter.format(displayValue);
+		else formattedValue = `${dateFormatter.format(displayValue)} ${formatTime(displayValue)}`;
 	}
 	const timeSizingValues = useMemo(() => {
-		if (mode !== "time") return [];
+		if (mode === "date") return [];
 		return Array.from({ length: 24 * (60 / minuteStep) }, (_, index) => {
 			const candidate = new Date(2026, 0, 1);
 			candidate.setHours(Math.floor(index / (60 / minuteStep)));
 			candidate.setMinutes(index % (60 / minuteStep) * minuteStep);
-			return `${timeFormatter.format(candidate)}${locale.toLowerCase().startsWith("de") ? " Uhr" : ""}`;
+			return formatTime(candidate);
 		});
 	}, [
-		locale,
+		formatTime,
 		minuteStep,
-		mode,
-		timeFormatter
+		mode
 	]);
 	const dateSizingValues = useMemo(() => {
-		if (mode !== "date") return [];
+		if (mode === "time") return [];
 		return years.flatMap((year) => {
 			return Array.from({ length: 12 }, (_, month) => {
 				const first = new Date(year, month, 1);
@@ -95,7 +96,7 @@ function useDateTimePickerValue({ value, locale, maxDate, minDate, onChange, pla
 		mode,
 		years
 	]);
-	const sizingValues = mode === "time" ? timeSizingValues : dateSizingValues;
+	const sizingValueGroups = mode === "date" ? [dateSizingValues] : mode === "time" ? [timeSizingValues] : [dateSizingValues.map((value) => `${value} `), timeSizingValues];
 	const hours = Array.from({ length: isTwelveHour ? 12 : 24 }, (_, index) => isTwelveHour ? index + 1 : index).map((hour) => ({
 		label: String(hour).padStart(2, "0"),
 		value: hour
@@ -153,7 +154,7 @@ function useDateTimePickerValue({ value, locale, maxDate, minDate, onChange, pla
 	}
 	return {
 		displayValue,
-		sizingValues,
+		sizingValueGroups,
 		formattedValue,
 		activeValue,
 		isTwelveHour,

package/dist/components/date-time-picker/hooks/useDateTimePickerValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDateTimePickerValue.js","names":[],"sources":["../../../../src/components/date-time-picker/hooks/useDateTimePickerValue.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { clampDate, dateAtMidnight, normalizeMinute } from '../date-time-picker-utils.js';\nimport type { DateTimePickerProps } from '../DateTimePicker.types.js';\ntype DatePart = 'date' | 'fullYear' | 'month';\ntype ValueProps = Pick<\n  DateTimePickerProps,\n  'value' | 'locale' | 'onChange' | 'placeholder' | 'wheelLabels'\n> &\n  Required<Pick<DateTimePickerProps, 'minuteStep' | 'mode'>> & {\n    minDate: Date | undefined;\n    maxDate: Date | undefined;\n  };\n\nexport function useDateTimePickerValue({\n  value,\n  locale,\n  maxDate,\n  minDate,\n  onChange,\n  placeholder,\n  wheelLabels,\n  minuteStep,\n  mode,\n}: ValueProps) {\n  const { hourFormatter, monthFormatter, timeFormatter, dateFormatter, dateOrderFormatter } =\n    useMemo(\n      () => ({\n        hourFormatter: new Intl.DateTimeFormat(locale, { hour: 'numeric' }),\n        monthFormatter: new Intl.DateTimeFormat(locale, { month: 'long' }),\n        timeFormatter: new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit' }),\n        dateFormatter: new Intl.DateTimeFormat(locale, {\n          day: 'numeric',\n          month: 'long',\n          year: 'numeric',\n        }),\n        dateOrderFormatter: new Intl.DateTimeFormat(locale, {\n          day: 'numeric',\n          month: 'numeric',\n          year: 'numeric',\n        }),\n      }),\n      [locale],\n    );\n  let displayValue = value;\n  if (value !== null) {\n    displayValue =\n      mode === 'date' ? clampDate(value, minDate, maxDate) : normalizeMinute(value, minuteStep);\n  }\n  const activeValue = displayValue ?? new Date();\n  const isTwelveHour = hourFormatter.resolvedOptions().hour12 === true;\n\n  const years = useMemo(() => {\n    const today = new Date().getFullYear();\n    const first = minDate?.getFullYear() ?? today - 100;\n    const last = maxDate?.getFullYear() ?? today + 100;\n    return Array.from({ length: last - first + 1 }, (_, index) => first + index);\n  }, [maxDate, minDate]);\n\n  function emit(nextValue: Date) {\n    onChange(mode === 'date' ? clampDate(nextValue, minDate, maxDate) : nextValue);\n  }\n\n  function updateTime(part: 'hours' | 'minutes', nextValue: number) {\n    const next = new Date(activeValue);\n    if (part === 'hours') {\n      const hour = isTwelveHour ? (nextValue % 12) + (next.getHours() >= 12 ? 12 : 0) : nextValue;\n      next.setHours(hour);\n    } else {\n      next.setMinutes(nextValue);\n    }\n    emit(next);\n  }\n\n  function updatePeriod(period: number) {\n    const next = new Date(activeValue);\n    next.setHours((next.getHours() % 12) + period * 12);\n    emit(next);\n  }\n\n  function updateDate(part: DatePart, nextValue: number) {\n    const next = new Date(activeValue);\n    const originalDay = next.getDate();\n    next.setDate(1);\n    if (part === 'fullYear') next.setFullYear(nextValue);\n    if (part === 'month') next.setMonth(nextValue);\n    if (part === 'date') next.setDate(nextValue);\n    if (part !== 'date') {\n      next.setDate(\n        Math.min(originalDay, new Date(next.getFullYear(), next.getMonth() + 1, 0).getDate()),\n      );\n    }\n    emit(next);\n  }\n\n  let formattedValue = placeholder;\n  if (displayValue !== null) {\n    if (mode === 'time')\n      formattedValue = `${timeFormatter.format(displayValue)}${locale.toLowerCase().startsWith('de') ? ' Uhr' : ''}`;\n    else formattedValue = dateFormatter.format(displayValue);\n  }\n  const timeSizingValues = useMemo(() => {\n    if (mode !== 'time') return [];\n    return Array.from({ length: 24 * (60 / minuteStep) }, (_, index) => {\n      const candidate = new Date(2026, 0, 1);\n      candidate.setHours(Math.floor(index / (60 / minuteStep)));\n      candidate.setMinutes((index % (60 / minuteStep)) * minuteStep);\n      return `${timeFormatter.format(candidate)}${locale.toLowerCase().startsWith('de') ? ' Uhr' : ''}`;\n    });\n  }, [locale, minuteStep, mode, timeFormatter]);\n  const dateSizingValues = useMemo(() => {\n    if (mode !== 'date') return [];\n\n    return years.flatMap((year) => {\n      const values = Array.from({ length: 12 }, (_, month) => {\n        const first = new Date(year, month, 1);\n        const last = new Date(year, month + 1, 0);\n        if (\n          (minDate !== undefined && last < dateAtMidnight(minDate)) ||\n          (maxDate !== undefined && first > dateAtMidnight(maxDate))\n        ) {\n          return undefined;\n        }\n\n        const candidate = new Date(last);\n        if (minDate !== undefined && candidate < dateAtMidnight(minDate)) {\n          candidate.setDate(minDate.getDate());\n        }\n        if (maxDate !== undefined && candidate > dateAtMidnight(maxDate)) {\n          candidate.setDate(maxDate.getDate());\n        }\n        return dateFormatter.format(candidate);\n      });\n      return values.filter((value): value is string => value !== undefined);\n    });\n  }, [dateFormatter, maxDate, minDate, mode, years]);\n  const sizingValues = mode === 'time' ? timeSizingValues : dateSizingValues;\n\n  const hours = Array.from({ length: isTwelveHour ? 12 : 24 }, (_, index) =>\n    isTwelveHour ? index + 1 : index,\n  ).map((hour) => ({ label: String(hour).padStart(2, '0'), value: hour }));\n  const minutes = Array.from({ length: 60 / minuteStep }, (_, index) => {\n    const minute = index * minuteStep;\n    return { label: String(minute).padStart(2, '0'), value: minute };\n  });\n  const months = Array.from({ length: 12 }, (_, month) => ({\n    label: monthFormatter.format(new Date(2026, month, 1)),\n    value: month,\n  })).filter((month) => {\n    const first = new Date(activeValue.getFullYear(), month.value, 1);\n    const last = new Date(activeValue.getFullYear(), month.value + 1, 0);\n    return (\n      (minDate === undefined || last >= dateAtMidnight(minDate)) &&\n      (maxDate === undefined || first <= dateAtMidnight(maxDate))\n    );\n  });\n  const days = Array.from(\n    { length: new Date(activeValue.getFullYear(), activeValue.getMonth() + 1, 0).getDate() },\n    (_, index) => ({ label: String(index + 1).padStart(2, '0'), value: index + 1 }),\n  ).filter((day) => {\n    const candidate = new Date(activeValue.getFullYear(), activeValue.getMonth(), day.value);\n    return (\n      (minDate === undefined || candidate >= dateAtMidnight(minDate)) &&\n      (maxDate === undefined || candidate <= dateAtMidnight(maxDate))\n    );\n  });\n  const datePartOrder = dateOrderFormatter.formatToParts(activeValue).flatMap<DatePart>((part) => {\n    if (part.type === 'day') return ['date'];\n    if (part.type === 'month') return ['month'];\n    if (part.type === 'year') return ['fullYear'];\n    return [];\n  });\n  const yearOptions = years.map((year) => ({ label: String(year), value: year }));\n\n  function dateOptions(part: DatePart) {\n    if (part === 'date') return days;\n    if (part === 'month') return months;\n    return yearOptions;\n  }\n\n  function dateValue(part: DatePart) {\n    if (part === 'date') return activeValue.getDate();\n    if (part === 'month') return activeValue.getMonth();\n    return activeValue.getFullYear();\n  }\n  const dayPeriods = [0, 1].map((period) => ({\n    label:\n      hourFormatter\n        .formatToParts(new Date(2026, 0, 1, period === 0 ? 1 : 13))\n        .find((part) => part.type === 'dayPeriod')?.value ?? (period === 0 ? 'AM' : 'PM'),\n    value: period,\n  }));\n  function dateLabel(part: DatePart) {\n    if (part === 'date') return wheelLabels.day;\n    if (part === 'month') return wheelLabels.month;\n    return wheelLabels.year;\n  }\n  return {\n    displayValue,\n    sizingValues,\n    formattedValue,\n    activeValue,\n    isTwelveHour,\n    hours,\n    minutes,\n    dayPeriods,\n    datePartOrder,\n    dateOptions,\n    dateValue,\n    dateLabel,\n    updateDate,\n    updateTime,\n    updatePeriod,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"useDateTimePickerValue.js","names":[],"sources":["../../../../src/components/date-time-picker/hooks/useDateTimePickerValue.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\nimport { clampDate, dateAtMidnight, normalizeMinute } from '../date-time-picker-utils.js';\nimport type { DateTimePickerProps } from '../DateTimePicker.types.js';\ntype DatePart = 'date' | 'fullYear' | 'month';\ntype ValueProps = Pick<\n  DateTimePickerProps,\n  'value' | 'locale' | 'onChange' | 'placeholder' | 'wheelLabels'\n> &\n  Required<Pick<DateTimePickerProps, 'minuteStep' | 'mode'>> & {\n    minDate: Date | undefined;\n    maxDate: Date | undefined;\n  };\n\nexport function useDateTimePickerValue({\n  value,\n  locale,\n  maxDate,\n  minDate,\n  onChange,\n  placeholder,\n  wheelLabels,\n  minuteStep,\n  mode,\n}: ValueProps) {\n  const { hourFormatter, monthFormatter, timeFormatter, dateFormatter, dateOrderFormatter } =\n    useMemo(\n      () => ({\n        hourFormatter: new Intl.DateTimeFormat(locale, { hour: 'numeric' }),\n        monthFormatter: new Intl.DateTimeFormat(locale, { month: 'long' }),\n        timeFormatter: new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit' }),\n        dateFormatter: new Intl.DateTimeFormat(locale, {\n          day: 'numeric',\n          month: 'long',\n          year: 'numeric',\n        }),\n        dateOrderFormatter: new Intl.DateTimeFormat(locale, {\n          day: 'numeric',\n          month: 'numeric',\n          year: 'numeric',\n        }),\n      }),\n      [locale],\n    );\n  let displayValue = value;\n  if (value !== null) {\n    displayValue =\n      mode === 'time'\n        ? normalizeMinute(value, minuteStep)\n        : normalizeMinute(clampDate(value, minDate, maxDate), minuteStep);\n  }\n  const activeValue = displayValue ?? new Date();\n  const isTwelveHour = hourFormatter.resolvedOptions().hour12 === true;\n\n  const years = useMemo(() => {\n    const today = new Date().getFullYear();\n    const first = minDate?.getFullYear() ?? today - 100;\n    const last = maxDate?.getFullYear() ?? today + 100;\n    return Array.from({ length: last - first + 1 }, (_, index) => first + index);\n  }, [maxDate, minDate]);\n\n  function emit(nextValue: Date) {\n    onChange(mode === 'time' ? nextValue : clampDate(nextValue, minDate, maxDate));\n  }\n\n  function updateTime(part: 'hours' | 'minutes', nextValue: number) {\n    const next = new Date(activeValue);\n    if (part === 'hours') {\n      const hour = isTwelveHour ? (nextValue % 12) + (next.getHours() >= 12 ? 12 : 0) : nextValue;\n      next.setHours(hour);\n    } else {\n      next.setMinutes(nextValue);\n    }\n    emit(next);\n  }\n\n  function updatePeriod(period: number) {\n    const next = new Date(activeValue);\n    next.setHours((next.getHours() % 12) + period * 12);\n    emit(next);\n  }\n\n  function updateDate(part: DatePart, nextValue: number) {\n    const next = new Date(activeValue);\n    const originalDay = next.getDate();\n    next.setDate(1);\n    if (part === 'fullYear') next.setFullYear(nextValue);\n    if (part === 'month') next.setMonth(nextValue);\n    if (part === 'date') next.setDate(nextValue);\n    if (part !== 'date') {\n      next.setDate(\n        Math.min(originalDay, new Date(next.getFullYear(), next.getMonth() + 1, 0).getDate()),\n      );\n    }\n    emit(next);\n  }\n\n  let formattedValue = placeholder;\n  const formatTime = useCallback(\n    (date: Date) =>\n      `${timeFormatter.format(date)}${locale.toLowerCase().startsWith('de') ? ' Uhr' : ''}`,\n    [locale, timeFormatter],\n  );\n  if (displayValue !== null) {\n    if (mode === 'time') formattedValue = formatTime(displayValue);\n    else if (mode === 'date') formattedValue = dateFormatter.format(displayValue);\n    else formattedValue = `${dateFormatter.format(displayValue)} ${formatTime(displayValue)}`;\n  }\n  const timeSizingValues = useMemo(() => {\n    if (mode === 'date') return [];\n    return Array.from({ length: 24 * (60 / minuteStep) }, (_, index) => {\n      const candidate = new Date(2026, 0, 1);\n      candidate.setHours(Math.floor(index / (60 / minuteStep)));\n      candidate.setMinutes((index % (60 / minuteStep)) * minuteStep);\n      return formatTime(candidate);\n    });\n  }, [formatTime, minuteStep, mode]);\n  const dateSizingValues = useMemo(() => {\n    if (mode === 'time') return [];\n\n    return years.flatMap((year) => {\n      const values = Array.from({ length: 12 }, (_, month) => {\n        const first = new Date(year, month, 1);\n        const last = new Date(year, month + 1, 0);\n        if (\n          (minDate !== undefined && last < dateAtMidnight(minDate)) ||\n          (maxDate !== undefined && first > dateAtMidnight(maxDate))\n        ) {\n          return undefined;\n        }\n\n        const candidate = new Date(last);\n        if (minDate !== undefined && candidate < dateAtMidnight(minDate)) {\n          candidate.setDate(minDate.getDate());\n        }\n        if (maxDate !== undefined && candidate > dateAtMidnight(maxDate)) {\n          candidate.setDate(maxDate.getDate());\n        }\n        return dateFormatter.format(candidate);\n      });\n      return values.filter((value): value is string => value !== undefined);\n    });\n  }, [dateFormatter, maxDate, minDate, mode, years]);\n  const sizingValueGroups =\n    mode === 'date'\n      ? [dateSizingValues]\n      : mode === 'time'\n        ? [timeSizingValues]\n        : [dateSizingValues.map((value) => `${value} `), timeSizingValues];\n\n  const hours = Array.from({ length: isTwelveHour ? 12 : 24 }, (_, index) =>\n    isTwelveHour ? index + 1 : index,\n  ).map((hour) => ({ label: String(hour).padStart(2, '0'), value: hour }));\n  const minutes = Array.from({ length: 60 / minuteStep }, (_, index) => {\n    const minute = index * minuteStep;\n    return { label: String(minute).padStart(2, '0'), value: minute };\n  });\n  const months = Array.from({ length: 12 }, (_, month) => ({\n    label: monthFormatter.format(new Date(2026, month, 1)),\n    value: month,\n  })).filter((month) => {\n    const first = new Date(activeValue.getFullYear(), month.value, 1);\n    const last = new Date(activeValue.getFullYear(), month.value + 1, 0);\n    return (\n      (minDate === undefined || last >= dateAtMidnight(minDate)) &&\n      (maxDate === undefined || first <= dateAtMidnight(maxDate))\n    );\n  });\n  const days = Array.from(\n    { length: new Date(activeValue.getFullYear(), activeValue.getMonth() + 1, 0).getDate() },\n    (_, index) => ({ label: String(index + 1).padStart(2, '0'), value: index + 1 }),\n  ).filter((day) => {\n    const candidate = new Date(activeValue.getFullYear(), activeValue.getMonth(), day.value);\n    return (\n      (minDate === undefined || candidate >= dateAtMidnight(minDate)) &&\n      (maxDate === undefined || candidate <= dateAtMidnight(maxDate))\n    );\n  });\n  const datePartOrder = dateOrderFormatter.formatToParts(activeValue).flatMap<DatePart>((part) => {\n    if (part.type === 'day') return ['date'];\n    if (part.type === 'month') return ['month'];\n    if (part.type === 'year') return ['fullYear'];\n    return [];\n  });\n  const yearOptions = years.map((year) => ({ label: String(year), value: year }));\n\n  function dateOptions(part: DatePart) {\n    if (part === 'date') return days;\n    if (part === 'month') return months;\n    return yearOptions;\n  }\n\n  function dateValue(part: DatePart) {\n    if (part === 'date') return activeValue.getDate();\n    if (part === 'month') return activeValue.getMonth();\n    return activeValue.getFullYear();\n  }\n  const dayPeriods = [0, 1].map((period) => ({\n    label:\n      hourFormatter\n        .formatToParts(new Date(2026, 0, 1, period === 0 ? 1 : 13))\n        .find((part) => part.type === 'dayPeriod')?.value ?? (period === 0 ? 'AM' : 'PM'),\n    value: period,\n  }));\n  function dateLabel(part: DatePart) {\n    if (part === 'date') return wheelLabels.day;\n    if (part === 'month') return wheelLabels.month;\n    return wheelLabels.year;\n  }\n  return {\n    displayValue,\n    sizingValueGroups,\n    formattedValue,\n    activeValue,\n    isTwelveHour,\n    hours,\n    minutes,\n    dayPeriods,\n    datePartOrder,\n    dateOptions,\n    dateValue,\n    dateLabel,\n    updateDate,\n    updateTime,\n    updatePeriod,\n  };\n}\n"],"mappings":"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"}

package/dist/components/date-time-picker/sizer/PickerSizer.d.ts

@@ -1,7 +1,7 @@
 interface PickerSizerProps {
-    values: readonly string[];
+    valueGroups: readonly (readonly string[])[];
     placeholder: string | null;
 }
-declare const PickerSizer: import("react").MemoExoticComponent<({ values, placeholder }: PickerSizerProps) => import("react").JSX.Element>;
+declare const PickerSizer: import("react").MemoExoticComponent<({ valueGroups, placeholder }: PickerSizerProps) => import("react").JSX.Element>;
 export default PickerSizer;
 //# sourceMappingURL=PickerSizer.d.ts.map

package/dist/components/date-time-picker/sizer/PickerSizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PickerSizer.d.ts","sourceRoot":"","sources":["../../../../src/components/date-time-picker/sizer/PickerSizer.tsx"],"names":[],"mappings":"AAEA,UAAU,gBAAgB;IACxB,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED,QAAA,MAAM,WAAW,gEAAsD,gBAAgB,iCASrF,CAAC;AAEH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"PickerSizer.d.ts","sourceRoot":"","sources":["../../../../src/components/date-time-picker/sizer/PickerSizer.tsx"],"names":[],"mappings":"AAEA,UAAU,gBAAgB;IACxB,WAAW,EAAE,SAAS,CAAC,SAAS,MAAM,EAAE,CAAC,EAAE,CAAC;IAC5C,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED,QAAA,MAAM,WAAW,qEAA2D,gBAAgB,iCAa1F,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/components/date-time-picker/sizer/PickerSizer.js

@@ -1,11 +1,14 @@
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/date-time-picker/sizer/PickerSizer.tsx
-var PickerSizer = memo(function PickerSizer({ values, placeholder }) {
+var PickerSizer = memo(function PickerSizer({ valueGroups, placeholder }) {
 	return /* @__PURE__ */ jsxs("span", {
 		"aria-hidden": "true",
 		className: "chayns-date-time-picker__sizer",
-		children: [placeholder === null ? null : /* @__PURE__ */ jsx("span", { children: placeholder }), values.map((value) => /* @__PURE__ */ jsx("span", { children: value }, value))]
+		children: [placeholder === null ? null : /* @__PURE__ */ jsx("span", { children: placeholder }), valueGroups.map((values, index) => /* @__PURE__ */ jsx("span", {
+			className: "chayns-date-time-picker__sizer-group",
+			children: values.map((value) => /* @__PURE__ */ jsx("span", { children: value }, value))
+		}, index))]
 	});
 });
 PickerSizer.displayName = "DateTimePicker.Sizer";

package/dist/components/date-time-picker/sizer/PickerSizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"PickerSizer.js","names":[],"sources":["../../../../src/components/date-time-picker/sizer/PickerSizer.tsx"],"sourcesContent":["import { memo } from 'react';\n\ninterface PickerSizerProps {\n  values: readonly string[];\n  placeholder: string | null;\n}\n\nconst PickerSizer = memo(function PickerSizer({ values, placeholder }: PickerSizerProps) {\n  return (\n    <span aria-hidden=\"true\" className=\"chayns-date-time-picker__sizer\">\n      {placeholder === null ? null : <span>{placeholder}</span>}\n      {values.map((value) => (\n        <span key={value}>{value}</span>\n      ))}\n    </span>\n  );\n});\nPickerSizer.displayName = 'DateTimePicker.Sizer';\nexport default PickerSizer;\n"],"mappings":";;;AAOA,IAAM,cAAc,KAAK,SAAS,YAAY,EAAE,QAAQ,eAAiC;CACvF,OACE,qBAAC,QAAD;EAAM,eAAY;EAAO,WAAU;EAAnC,UAAA,CACG,gBAAgB,OAAO,OAAO,oBAAC,QAAD,EAAA,UAAO,YAAkB,CAAA,GACvD,OAAO,KAAK,UACX,oBAAC,QAAD,EAAA,UAAmB,MAAY,GAApB,KAAoB,CAChC,CACG;;AAEV,CAAC;AACD,YAAY,cAAc"}
+{"version":3,"file":"PickerSizer.js","names":[],"sources":["../../../../src/components/date-time-picker/sizer/PickerSizer.tsx"],"sourcesContent":["import { memo } from 'react';\n\ninterface PickerSizerProps {\n  valueGroups: readonly (readonly string[])[];\n  placeholder: string | null;\n}\n\nconst PickerSizer = memo(function PickerSizer({ valueGroups, placeholder }: PickerSizerProps) {\n  return (\n    <span aria-hidden=\"true\" className=\"chayns-date-time-picker__sizer\">\n      {placeholder === null ? null : <span>{placeholder}</span>}\n      {valueGroups.map((values, index) => (\n        <span className=\"chayns-date-time-picker__sizer-group\" key={index}>\n          {values.map((value) => (\n            <span key={value}>{value}</span>\n          ))}\n        </span>\n      ))}\n    </span>\n  );\n});\nPickerSizer.displayName = 'DateTimePicker.Sizer';\nexport default PickerSizer;\n"],"mappings":";;;AAOA,IAAM,cAAc,KAAK,SAAS,YAAY,EAAE,aAAa,eAAiC;CAC5F,OACE,qBAAC,QAAD;EAAM,eAAY;EAAO,WAAU;EAAnC,UAAA,CACG,gBAAgB,OAAO,OAAO,oBAAC,QAAD,EAAA,UAAO,YAAkB,CAAA,GACvD,YAAY,KAAK,QAAQ,UACxB,oBAAC,QAAD;GAAM,WAAU;GACb,UAAA,OAAO,KAAK,UACX,oBAAC,QAAD,EAAA,UAAmB,MAAY,GAApB,KAAoB,CAChC;EACG,GAJsD,KAItD,CACP,CACG;;AAEV,CAAC;AACD,YAAY,cAAc"}

package/dist/components/date-time-picker/wheel/Wheel.d.ts

@@ -4,11 +4,12 @@ interface WheelOption {
 }
 interface WheelProps {
     ariaLabel: string;
+    disabled?: boolean;
     onEscape: () => void;
     onSelect: (value: number) => void;
     options: readonly WheelOption[];
     selected: number;
 }
-declare function Wheel({ ariaLabel, onEscape, onSelect, options, selected }: WheelProps): import("react").JSX.Element;
+declare function Wheel({ ariaLabel, disabled, onEscape, onSelect, options, selected }: WheelProps): import("react").JSX.Element;
 export default Wheel;
 //# sourceMappingURL=Wheel.d.ts.map

package/dist/components/date-time-picker/wheel/Wheel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../../../src/components/date-time-picker/wheel/Wheel.tsx"],"names":[],"mappings":"AAMA,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,UAAU;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,UAAU,+BA0K9E;AAGD,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../../../src/components/date-time-picker/wheel/Wheel.tsx"],"names":[],"mappings":"AAMA,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,UAAU;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,QAAgB,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,UAAU,+BA8KhG;AAGD,eAAe,KAAK,CAAC"}

package/dist/components/date-time-picker/wheel/Wheel.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/date-time-picker/wheel/Wheel.tsx
 var WHEEL_LOOP_CYCLES = 11;
 var WHEEL_CENTER_CYCLE = Math.floor(WHEEL_LOOP_CYCLES / 2);
-function Wheel({ ariaLabel, onEscape, onSelect, options, selected }) {
+function Wheel({ ariaLabel, disabled = false, onEscape, onSelect, options, selected }) {
 	const wheelId = useId();
 	const wheelRef = useRef(null);
 	const selectedRef = useRef(null);
@@ -50,6 +50,7 @@ function Wheel({ ariaLabel, onEscape, onSelect, options, selected }) {
 		selectCenteredValue();
 	}
 	function handleKeyDown(event) {
+		if (disabled) return;
 		if (event.key === "Escape") {
 			event.preventDefault();
 			onEscape();
@@ -68,6 +69,7 @@ function Wheel({ ariaLabel, onEscape, onSelect, options, selected }) {
 		}
 	}
 	function handlePointerDown(event) {
+		if (disabled) return;
 		if (event.button !== 0) return;
 		event.preventDefault();
 		if (typeof event.currentTarget.setPointerCapture === "function") event.currentTarget.setPointerCapture(event.pointerId);
@@ -95,6 +97,7 @@ function Wheel({ ariaLabel, onEscape, onSelect, options, selected }) {
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-activedescendant": `${wheelId}-${selected}`,
+		"aria-disabled": disabled || void 0,
 		"aria-label": ariaLabel,
 		className: "chayns-date-time-picker__wheel",
 		onKeyDown: handleKeyDown,
@@ -105,7 +108,7 @@ function Wheel({ ariaLabel, onEscape, onSelect, options, selected }) {
 		onScroll: handleScroll,
 		ref: wheelRef,
 		role: "listbox",
-		tabIndex: 0,
+		tabIndex: disabled ? -1 : 0,
 		children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			className: "chayns-date-time-picker__wheel-sizer",
@@ -116,6 +119,7 @@ function Wheel({ ariaLabel, onEscape, onSelect, options, selected }) {
 		}), Array.from({ length: WHEEL_LOOP_CYCLES }, (_, cycle) => options.map((option, optionIndex) => /* @__PURE__ */ jsx("button", {
 			"aria-hidden": cycle !== WHEEL_CENTER_CYCLE || void 0,
 			"aria-selected": option.value === selected,
+			disabled,
 			id: cycle === WHEEL_CENTER_CYCLE ? `${wheelId}-${option.value}` : void 0,
 			className: "chayns-date-time-picker__wheel-option",
 			"data-wheel-index": cycle * options.length + optionIndex,

package/dist/components/date-time-picker/wheel/Wheel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Wheel.js","names":[],"sources":["../../../../src/components/date-time-picker/wheel/Wheel.tsx"],"sourcesContent":["import { useLayoutEffect, useId, useRef } from 'react';\nimport type { KeyboardEvent, PointerEvent as ReactPointerEvent } from 'react';\n\nconst WHEEL_LOOP_CYCLES = 11;\nconst WHEEL_CENTER_CYCLE = Math.floor(WHEEL_LOOP_CYCLES / 2);\n\ninterface WheelOption {\n  label: string;\n  value: number;\n}\n\ninterface WheelProps {\n  ariaLabel: string;\n  onEscape: () => void;\n  onSelect: (value: number) => void;\n  options: readonly WheelOption[];\n  selected: number;\n}\n\nfunction Wheel({ ariaLabel, onEscape, onSelect, options, selected }: WheelProps) {\n  const wheelId = useId();\n  const wheelRef = useRef<HTMLDivElement>(null);\n  const selectedRef = useRef<HTMLButtonElement>(null);\n  const dragRef = useRef<{ pointerId: number; scrollTop: number; startY: number } | undefined>(\n    undefined,\n  );\n  const ignoreClickRef = useRef(false);\n\n  useLayoutEffect(() => {\n    const wheel = wheelRef.current;\n    const itemHeight = selectedRef.current?.offsetHeight;\n    const selectedIndex = options.findIndex((option) => option.value === selected);\n    if (!wheel || !itemHeight || selectedIndex < 0) return;\n\n    wheel.scrollTop = (WHEEL_CENTER_CYCLE * options.length + selectedIndex) * itemHeight;\n    applyPerspective();\n  }, [options, selected]);\n\n  function applyPerspective() {\n    const wheel = wheelRef.current;\n    const itemHeight = selectedRef.current?.offsetHeight;\n    if (!wheel || !itemHeight) return;\n\n    const position = wheel.scrollTop / itemHeight;\n    for (const option of wheel.querySelectorAll<HTMLButtonElement>(\n      '.chayns-date-time-picker__wheel-option',\n    )) {\n      const index = Number(option.dataset.wheelIndex);\n      const distance = Math.max(-2.5, Math.min(2.5, index - position));\n      const progress = Math.min(1, Math.abs(distance) / 2.5);\n\n      option.style.color = progress < 0.2 ? 'var(--text)' : 'var(--text-3)';\n      option.style.fontWeight = progress < 0.2 ? '600' : '400';\n      option.style.opacity = String(1 - progress * 0.7);\n      option.style.transform = `rotateX(${distance * 22}deg) scale(${1 - progress * 0.24})`;\n    }\n  }\n\n  function selectCenteredValue() {\n    const wheel = wheelRef.current;\n    const itemHeight = selectedRef.current?.offsetHeight;\n    if (!wheel || !itemHeight) return;\n\n    const index = Math.round(wheel.scrollTop / itemHeight);\n    const option = options[((index % options.length) + options.length) % options.length];\n    if (option !== undefined && option.value !== selected) onSelect(option.value);\n  }\n\n  function handleScroll() {\n    const wheel = wheelRef.current;\n    const itemHeight = selectedRef.current?.offsetHeight;\n    if (!wheel || !itemHeight) return;\n\n    const index = Math.round(wheel.scrollTop / itemHeight);\n    const normalizedIndex = ((index % options.length) + options.length) % options.length;\n    if (index < options.length * 2 || index >= options.length * (WHEEL_LOOP_CYCLES - 2)) {\n      wheel.scrollTop = (WHEEL_CENTER_CYCLE * options.length + normalizedIndex) * itemHeight;\n    }\n\n    applyPerspective();\n    selectCenteredValue();\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      onEscape();\n      return;\n    }\n\n    const index = options.findIndex((option) => option.value === selected);\n    let nextIndex = index;\n    if (event.key === 'ArrowDown') nextIndex = Math.min(index + 1, options.length - 1);\n    if (event.key === 'ArrowUp') nextIndex = Math.max(index - 1, 0);\n    if (event.key === 'Home') nextIndex = 0;\n    if (event.key === 'End') nextIndex = options.length - 1;\n    const nextOption = options[nextIndex];\n    if (nextIndex !== index && nextOption !== undefined) {\n      event.preventDefault();\n      onSelect(nextOption.value);\n    }\n  }\n\n  function handlePointerDown(event: ReactPointerEvent<HTMLDivElement>) {\n    if (event.button !== 0) return;\n    event.preventDefault();\n    if (typeof event.currentTarget.setPointerCapture === 'function') {\n      event.currentTarget.setPointerCapture(event.pointerId);\n    }\n    dragRef.current = {\n      pointerId: event.pointerId,\n      scrollTop: event.currentTarget.scrollTop,\n      startY: event.clientY,\n    };\n    ignoreClickRef.current = false;\n  }\n\n  function handlePointerMove(event: ReactPointerEvent<HTMLDivElement>) {\n    const drag = dragRef.current;\n    if (drag?.pointerId !== event.pointerId) return;\n    const distance = event.clientY - drag.startY;\n    if (Math.abs(distance) > 3) {\n      ignoreClickRef.current = true;\n      event.currentTarget.scrollTop = drag.scrollTop - distance;\n    }\n  }\n\n  function handlePointerUp(event: ReactPointerEvent<HTMLDivElement>) {\n    if (dragRef.current?.pointerId !== event.pointerId) return;\n    dragRef.current = undefined;\n    if (typeof event.currentTarget.releasePointerCapture === 'function') {\n      event.currentTarget.releasePointerCapture(event.pointerId);\n    }\n    selectCenteredValue();\n  }\n\n  return (\n    <div\n      aria-activedescendant={`${wheelId}-${selected}`}\n      aria-label={ariaLabel}\n      className=\"chayns-date-time-picker__wheel\"\n      onKeyDown={handleKeyDown}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onPointerCancel={handlePointerUp}\n      onPointerUp={handlePointerUp}\n      onScroll={handleScroll}\n      ref={wheelRef}\n      role=\"listbox\"\n      tabIndex={0}\n    >\n      <span aria-hidden=\"true\" className=\"chayns-date-time-picker__wheel-sizer\">\n        {options.map((option) => (\n          <span className=\"chayns-date-time-picker__wheel-sizer-option\" key={option.value}>\n            {option.label}\n          </span>\n        ))}\n      </span>\n      {Array.from({ length: WHEEL_LOOP_CYCLES }, (_, cycle) =>\n        options.map((option, optionIndex) => (\n          <button\n            aria-hidden={cycle !== WHEEL_CENTER_CYCLE || undefined}\n            aria-selected={option.value === selected}\n            id={cycle === WHEEL_CENTER_CYCLE ? `${wheelId}-${option.value}` : undefined}\n            className=\"chayns-date-time-picker__wheel-option\"\n            data-wheel-index={cycle * options.length + optionIndex}\n            key={`${cycle}-${option.value}`}\n            onClick={(event) => {\n              if (ignoreClickRef.current) {\n                event.preventDefault();\n                event.stopPropagation();\n                ignoreClickRef.current = false;\n                return;\n              }\n              onSelect(option.value);\n            }}\n            ref={\n              cycle === WHEEL_CENTER_CYCLE && option.value === selected ? selectedRef : undefined\n            }\n            role=\"option\"\n            tabIndex={-1}\n            type=\"button\"\n          >\n            {option.label}\n          </button>\n        )),\n      )}\n    </div>\n  );\n}\n\nObject.assign(Wheel, { displayName: 'DateTimePicker.Wheel' });\nexport default Wheel;\n"],"mappings":"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"}
+{"version":3,"file":"Wheel.js","names":[],"sources":["../../../../src/components/date-time-picker/wheel/Wheel.tsx"],"sourcesContent":["import { useLayoutEffect, useId, useRef } from 'react';\nimport type { KeyboardEvent, PointerEvent as ReactPointerEvent } from 'react';\n\nconst WHEEL_LOOP_CYCLES = 11;\nconst WHEEL_CENTER_CYCLE = Math.floor(WHEEL_LOOP_CYCLES / 2);\n\ninterface WheelOption {\n  label: string;\n  value: number;\n}\n\ninterface WheelProps {\n  ariaLabel: string;\n  disabled?: boolean;\n  onEscape: () => void;\n  onSelect: (value: number) => void;\n  options: readonly WheelOption[];\n  selected: number;\n}\n\nfunction Wheel({ ariaLabel, disabled = false, onEscape, onSelect, options, selected }: WheelProps) {\n  const wheelId = useId();\n  const wheelRef = useRef<HTMLDivElement>(null);\n  const selectedRef = useRef<HTMLButtonElement>(null);\n  const dragRef = useRef<{ pointerId: number; scrollTop: number; startY: number } | undefined>(\n    undefined,\n  );\n  const ignoreClickRef = useRef(false);\n\n  useLayoutEffect(() => {\n    const wheel = wheelRef.current;\n    const itemHeight = selectedRef.current?.offsetHeight;\n    const selectedIndex = options.findIndex((option) => option.value === selected);\n    if (!wheel || !itemHeight || selectedIndex < 0) return;\n\n    wheel.scrollTop = (WHEEL_CENTER_CYCLE * options.length + selectedIndex) * itemHeight;\n    applyPerspective();\n  }, [options, selected]);\n\n  function applyPerspective() {\n    const wheel = wheelRef.current;\n    const itemHeight = selectedRef.current?.offsetHeight;\n    if (!wheel || !itemHeight) return;\n\n    const position = wheel.scrollTop / itemHeight;\n    for (const option of wheel.querySelectorAll<HTMLButtonElement>(\n      '.chayns-date-time-picker__wheel-option',\n    )) {\n      const index = Number(option.dataset.wheelIndex);\n      const distance = Math.max(-2.5, Math.min(2.5, index - position));\n      const progress = Math.min(1, Math.abs(distance) / 2.5);\n\n      option.style.color = progress < 0.2 ? 'var(--text)' : 'var(--text-3)';\n      option.style.fontWeight = progress < 0.2 ? '600' : '400';\n      option.style.opacity = String(1 - progress * 0.7);\n      option.style.transform = `rotateX(${distance * 22}deg) scale(${1 - progress * 0.24})`;\n    }\n  }\n\n  function selectCenteredValue() {\n    const wheel = wheelRef.current;\n    const itemHeight = selectedRef.current?.offsetHeight;\n    if (!wheel || !itemHeight) return;\n\n    const index = Math.round(wheel.scrollTop / itemHeight);\n    const option = options[((index % options.length) + options.length) % options.length];\n    if (option !== undefined && option.value !== selected) onSelect(option.value);\n  }\n\n  function handleScroll() {\n    const wheel = wheelRef.current;\n    const itemHeight = selectedRef.current?.offsetHeight;\n    if (!wheel || !itemHeight) return;\n\n    const index = Math.round(wheel.scrollTop / itemHeight);\n    const normalizedIndex = ((index % options.length) + options.length) % options.length;\n    if (index < options.length * 2 || index >= options.length * (WHEEL_LOOP_CYCLES - 2)) {\n      wheel.scrollTop = (WHEEL_CENTER_CYCLE * options.length + normalizedIndex) * itemHeight;\n    }\n\n    applyPerspective();\n    selectCenteredValue();\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    if (disabled) return;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      onEscape();\n      return;\n    }\n\n    const index = options.findIndex((option) => option.value === selected);\n    let nextIndex = index;\n    if (event.key === 'ArrowDown') nextIndex = Math.min(index + 1, options.length - 1);\n    if (event.key === 'ArrowUp') nextIndex = Math.max(index - 1, 0);\n    if (event.key === 'Home') nextIndex = 0;\n    if (event.key === 'End') nextIndex = options.length - 1;\n    const nextOption = options[nextIndex];\n    if (nextIndex !== index && nextOption !== undefined) {\n      event.preventDefault();\n      onSelect(nextOption.value);\n    }\n  }\n\n  function handlePointerDown(event: ReactPointerEvent<HTMLDivElement>) {\n    if (disabled) return;\n    if (event.button !== 0) return;\n    event.preventDefault();\n    if (typeof event.currentTarget.setPointerCapture === 'function') {\n      event.currentTarget.setPointerCapture(event.pointerId);\n    }\n    dragRef.current = {\n      pointerId: event.pointerId,\n      scrollTop: event.currentTarget.scrollTop,\n      startY: event.clientY,\n    };\n    ignoreClickRef.current = false;\n  }\n\n  function handlePointerMove(event: ReactPointerEvent<HTMLDivElement>) {\n    const drag = dragRef.current;\n    if (drag?.pointerId !== event.pointerId) return;\n    const distance = event.clientY - drag.startY;\n    if (Math.abs(distance) > 3) {\n      ignoreClickRef.current = true;\n      event.currentTarget.scrollTop = drag.scrollTop - distance;\n    }\n  }\n\n  function handlePointerUp(event: ReactPointerEvent<HTMLDivElement>) {\n    if (dragRef.current?.pointerId !== event.pointerId) return;\n    dragRef.current = undefined;\n    if (typeof event.currentTarget.releasePointerCapture === 'function') {\n      event.currentTarget.releasePointerCapture(event.pointerId);\n    }\n    selectCenteredValue();\n  }\n\n  return (\n    <div\n      aria-activedescendant={`${wheelId}-${selected}`}\n      aria-disabled={disabled || undefined}\n      aria-label={ariaLabel}\n      className=\"chayns-date-time-picker__wheel\"\n      onKeyDown={handleKeyDown}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onPointerCancel={handlePointerUp}\n      onPointerUp={handlePointerUp}\n      onScroll={handleScroll}\n      ref={wheelRef}\n      role=\"listbox\"\n      tabIndex={disabled ? -1 : 0}\n    >\n      <span aria-hidden=\"true\" className=\"chayns-date-time-picker__wheel-sizer\">\n        {options.map((option) => (\n          <span className=\"chayns-date-time-picker__wheel-sizer-option\" key={option.value}>\n            {option.label}\n          </span>\n        ))}\n      </span>\n      {Array.from({ length: WHEEL_LOOP_CYCLES }, (_, cycle) =>\n        options.map((option, optionIndex) => (\n          <button\n            aria-hidden={cycle !== WHEEL_CENTER_CYCLE || undefined}\n            aria-selected={option.value === selected}\n            disabled={disabled}\n            id={cycle === WHEEL_CENTER_CYCLE ? `${wheelId}-${option.value}` : undefined}\n            className=\"chayns-date-time-picker__wheel-option\"\n            data-wheel-index={cycle * options.length + optionIndex}\n            key={`${cycle}-${option.value}`}\n            onClick={(event) => {\n              if (ignoreClickRef.current) {\n                event.preventDefault();\n                event.stopPropagation();\n                ignoreClickRef.current = false;\n                return;\n              }\n              onSelect(option.value);\n            }}\n            ref={\n              cycle === WHEEL_CENTER_CYCLE && option.value === selected ? selectedRef : undefined\n            }\n            role=\"option\"\n            tabIndex={-1}\n            type=\"button\"\n          >\n            {option.label}\n          </button>\n        )),\n      )}\n    </div>\n  );\n}\n\nObject.assign(Wheel, { displayName: 'DateTimePicker.Wheel' });\nexport default Wheel;\n"],"mappings":"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"}

package/dist/date-time-picker.css

@@ -28,18 +28,37 @@
   }
 
   .chayns-date-time-picker__sizer {
-    display: grid;
+    box-sizing: border-box;
+    display: flex;
     grid-area: 1 / 1;
+    padding: var(--input-py) var(--input-px);
+    border: 1.5px solid transparent;
+    font: inherit;
+    line-height: 1.2;
     visibility: hidden;
     white-space: nowrap;
   }
 
-  .chayns-date-time-picker__sizer > span {
+  .chayns-date-time-picker__sizer-group {
+    display: grid;
+  }
+
+  .chayns-date-time-picker__sizer-group > span,
+  .chayns-date-time-picker__sizer > span:not(.chayns-date-time-picker__sizer-group) {
     grid-area: 1 / 1;
-    padding: var(--input-py) var(--input-px);
-    border: 1.5px solid transparent;
-    font: inherit;
-    line-height: 1.2;
+  }
+
+  .chayns-date-time-picker__sizer > span:not(.chayns-date-time-picker__sizer-group) {
+    display: grid;
+  }
+
+  .chayns-date-time-picker--inline {
+    display: inline-block;
+    overflow: hidden;
+    padding: var(--k12);
+    border: 1px solid var(--border);
+    border-radius: var(--k12);
+    background: var(--surface);
   }
 
   .chayns-date-time-picker__trigger:focus-visible {
@@ -88,6 +107,16 @@
     block-size: calc(var(--k40) * 5);
   }
 
+  .chayns-date-time-picker__popup .chayns-date-time-picker__wheels {
+    inline-size: max-content;
+    margin-inline: auto;
+  }
+
+  .chayns-date-time-picker__popup--time .chayns-date-time-picker__wheels {
+    inline-size: auto;
+    justify-content: center;
+  }
+
   .chayns-date-time-picker__selection {
     position: absolute;
     inset-block-start: 50%;
@@ -100,6 +129,20 @@
     transform: translateY(-50%);
   }
 
+  .chayns-date-time-picker--inline .chayns-date-time-picker__selection {
+    inset-inline: 0;
+  }
+
+  .chayns-date-time-picker__popup--date .chayns-date-time-picker__selection {
+    inset-inline-end: var(--k5);
+  }
+
+  .chayns-date-time-picker__date-time-gap {
+    z-index: 2;
+    flex: 0 0 var(--k8);
+    background: var(--surface);
+  }
+
   .chayns-date-time-picker__wheel {
     flex: 1;
     overflow-y: auto;
@@ -154,12 +197,14 @@
     transform-style: preserve-3d;
   }
 
-  .chayns-date-time-picker--date .chayns-date-time-picker__wheel {
+  .chayns-date-time-picker--date .chayns-date-time-picker__wheel,
+  .chayns-date-time-picker--date-time .chayns-date-time-picker__wheel {
     flex: 0 0 auto;
     inline-size: max-content;
   }
 
-  .chayns-date-time-picker--date .chayns-date-time-picker__wheel-option {
+  .chayns-date-time-picker--date .chayns-date-time-picker__wheel-option,
+  .chayns-date-time-picker--date-time .chayns-date-time-picker__wheel-option {
     inline-size: max-content;
     min-inline-size: 100%;
     padding-inline: var(--k8);

package/dist/split-button.css

@@ -20,6 +20,8 @@
     padding: 0 var(--sp-2);
     border: 0;
     border-inline-start: 1px solid color-mix(in srgb, currentcolor 30%, transparent);
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
     border-start-end-radius: 999px;
     border-end-end-radius: 999px;
     font: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chayns-ui/core",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "description": "Accessible React core components for chayns UI",
   "license": "MIT",
   "type": "module",