@chayns-ui/core 0.6.0 → 0.7.0

package/dist/components/checkbox/Checkbox.js

@@ -1,6 +1,7 @@
+import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/checkbox/Checkbox.tsx
-function Checkbox({ children, className, ...inputProps }) {
+var Checkbox = forwardRef(function Checkbox({ children, className, description, ...inputProps }, ref) {
 	const inputClassName = ["chayns-checkbox__input", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsxs("label", {
 		className: "chayns-checkbox",
@@ -8,19 +9,27 @@ function Checkbox({ children, className, ...inputProps }) {
 			/* @__PURE__ */ jsx("input", {
 				...inputProps,
 				className: inputClassName,
+				ref,
 				type: "checkbox"
 			}),
 			/* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
-				className: "chayns-checkbox__control"
+				className: "chayns-checkbox__control",
+				children: /* @__PURE__ */ jsx("i", { className: "far fa-check" })
 			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "chayns-checkbox__label",
-				children
+			/* @__PURE__ */ jsxs("span", {
+				className: "chayns-checkbox__content",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "chayns-checkbox__label",
+					children
+				}), description !== void 0 ? /* @__PURE__ */ jsx("span", {
+					className: "chayns-checkbox__description",
+					children: description
+				}) : null]
 			})
 		]
 	});
-}
+});
 //#endregion
 export { Checkbox as default };
 

package/dist/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { CheckboxProps } from './Checkbox.types.js';\n\nfunction Checkbox({ children, className, ...inputProps }: CheckboxProps) {\n  const inputClassName = ['chayns-checkbox__input', className].filter(Boolean).join(' ');\n\n  return (\n    <label className=\"chayns-checkbox\">\n      <input {...inputProps} className={inputClassName} type=\"checkbox\" />\n      <span aria-hidden=\"true\" className=\"chayns-checkbox__control\" />\n      <span className=\"chayns-checkbox__label\">{children}</span>\n    </label>\n  );\n}\n\nexport default Checkbox;\n"],"mappings":";;AAEA,SAAS,SAAS,EAAE,UAAU,WAAW,GAAG,cAA6B;CACvE,MAAM,iBAAiB,CAAC,0BAA0B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAErF,OACE,qBAAC,SAAD;EAAO,WAAU;EAAjB,UAAA;GACE,oBAAC,SAAD;IAAO,GAAI;IAAY,WAAW;IAAgB,MAAK;GAAY,CAAA;GACnE,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;GAA4B,CAAA;GAC/D,oBAAC,QAAD;IAAM,WAAU;IAA0B;GAAe,CAAA;EACpD;;AAEX"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport type { CheckboxProps } from './Checkbox.types.js';\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  { children, className, description, ...inputProps },\n  ref,\n) {\n  const inputClassName = ['chayns-checkbox__input', className].filter(Boolean).join(' ');\n\n  return (\n    <label className=\"chayns-checkbox\">\n      <input {...inputProps} className={inputClassName} ref={ref} type=\"checkbox\" />\n      <span aria-hidden=\"true\" className=\"chayns-checkbox__control\">\n        <i className=\"far fa-check\" />\n      </span>\n      <span className=\"chayns-checkbox__content\">\n        <span className=\"chayns-checkbox__label\">{children}</span>\n        {description !== undefined ? (\n          <span className=\"chayns-checkbox__description\">{description}</span>\n        ) : null}\n      </span>\n    </label>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":";;;AAIA,IAAM,WAAW,WAA4C,SAAS,SACpE,EAAE,UAAU,WAAW,aAAa,GAAG,cACvC,KACA;CACA,MAAM,iBAAiB,CAAC,0BAA0B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAErF,OACE,qBAAC,SAAD;EAAO,WAAU;EAAjB,UAAA;GACE,oBAAC,SAAD;IAAO,GAAI;IAAY,WAAW;IAAqB;IAAK,MAAK;GAAY,CAAA;GAC7E,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;IACjC,UAAA,oBAAC,KAAD,EAAG,WAAU,eAAgB,CAAA;GACzB,CAAA;GACN,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACE,oBAAC,QAAD;KAAM,WAAU;KAA0B;IAAe,CAAA,GACxD,gBAAgB,KAAA,IACf,oBAAC,QAAD;KAAM,WAAU;KAAgC,UAAA;IAAkB,CAAA,IAChE,IACA;;EACD;;AAEX,CAAC"}

package/dist/components/checkbox/Checkbox.types.d.ts

@@ -3,6 +3,8 @@ import type { ComponentPropsWithRef, ReactNode } from 'react';
 export interface CheckboxProps extends Omit<ComponentPropsWithRef<'input'>, 'children' | 'type'> {
     /** Visible, localized label associated with the native checkbox. */
     children: Exclude<ReactNode, boolean | null | undefined>;
+    /** Optional localized supporting text associated with the checkbox label. */
+    description?: ReactNode;
     /** Checkbox owns its native input type. */
     type?: never;
 }

package/dist/components/checkbox/Checkbox.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,iDAAiD;AACjD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9F,oEAAoE;IACpE,QAAQ,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAEzD,2CAA2C;IAC3C,IAAI,CAAC,EAAE,KAAK,CAAC;CACd"}
+{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,iDAAiD;AACjD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9F,oEAAoE;IACpE,QAAQ,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAEzD,6EAA6E;IAC7E,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,KAAK,CAAC;CACd"}

package/dist/components/combo-box/ComboBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,mBAAmB,EAAiB,MAAM,qBAAqB,CAAC;AA2T9E,QAAA,MAAM,QAAQ;;CAA0C,CAAC;AAEzD,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,mBAAmB,EAAiB,MAAM,qBAAqB,CAAC;AA2U9E,QAAA,MAAM,QAAQ;;CAA0C,CAAC;AAEzD,eAAe,QAAQ,CAAC"}

package/dist/components/combo-box/ComboBox.js

@@ -1,13 +1,14 @@
+import ButtonIcon from "../button/button-icon/ButtonIcon.js";
 import { ComboBoxContext, getOptionLabel, useComboBoxContext } from "./ComboBoxContext.js";
+import { Children, Fragment, forwardRef, isValidElement, useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Children, Fragment as Fragment$1, forwardRef, isValidElement, useEffect, useId, useMemo, useRef, useState } from "react";
 //#region src/components/combo-box/ComboBox.tsx
 function getOptionElements(children) {
 	const options = [];
 	Children.forEach(children, (child) => {
 		if (!isValidElement(child)) return;
 		const element = child;
-		if (element.type === Fragment$1) options.push(...getOptionElements(element.props.children));
+		if (element.type === Fragment) options.push(...getOptionElements(element.props.children));
 		else if (typeof element.props.value === "string") options.push(element);
 	});
 	return options;
@@ -29,9 +30,20 @@ var Option = forwardRef(function Option({ children, className, value, ...optionP
 		className: resolvedClassName,
 		id: comboBox.optionId(value),
 		onMouseDown: (event) => event.preventDefault(),
-		onClick: () => comboBox.select(value),
+		onClick: (event) => {
+			optionProps.onClick?.(event);
+			if (!event.defaultPrevented) comboBox.select(value);
+		},
+		onKeyDown: (event) => {
+			optionProps.onKeyDown?.(event);
+			if (!event.defaultPrevented && (event.key === "Enter" || event.key === " ")) {
+				event.preventDefault();
+				comboBox.select(value);
+			}
+		},
 		ref,
 		role: "option",
+		tabIndex: -1,
 		children: [comboBox.multiple ? /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			className: "chayns-combo-box__checkbox",
@@ -199,6 +211,11 @@ var ComboBoxRoot = forwardRef(function ComboBoxRoot(props, ref) {
 					id: describedLabel,
 					children: placeholder
 				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "chayns-combo-box__chevron",
+					children: /* @__PURE__ */ jsx(ButtonIcon, { icon: "fa-chevron-down" })
+				}),
 				open ? /* @__PURE__ */ jsx("div", {
 					"aria-multiselectable": multiple || void 0,
 					className: "chayns-combo-box__popup",

package/dist/components/combo-box/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":[],"sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  Fragment,\n  isValidElement,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { ChangeEvent, FocusEvent, KeyboardEvent, ReactElement, ReactNode } from 'react';\n\nimport { ComboBoxContext, getOptionLabel, useComboBoxContext } from './ComboBoxContext.js';\nimport type { ComboBoxOptionProps, ComboBoxProps } from './ComboBox.types.js';\n\nfunction getOptionElements(children: ComboBoxProps['children']) {\n  const options: ReactElement<ComboBoxOptionProps>[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const element = child as ReactElement<{ children?: ReactNode; value?: string }>;\n\n    if (element.type === Fragment) {\n      options.push(...getOptionElements(element.props.children));\n    } else if (typeof element.props.value === 'string') {\n      options.push(element as ReactElement<ComboBoxOptionProps>);\n    }\n  });\n\n  return options;\n}\n\nconst Option = forwardRef<HTMLDivElement, ComboBoxOptionProps>(function Option(\n  { children, className, value, ...optionProps },\n  ref,\n) {\n  const comboBox = useComboBoxContext();\n  const isVisible = comboBox.visibleValues.includes(value);\n  const isSelected = comboBox.isSelected(value);\n  const resolvedClassName = [\n    'chayns-combo-box__option',\n    isSelected ? 'chayns-combo-box__option--selected' : '',\n    comboBox.activeValue === value ? 'chayns-combo-box__option--active' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  if (!isVisible) {\n    return null;\n  }\n\n  return (\n    <div\n      {...optionProps}\n      aria-selected={isSelected}\n      className={resolvedClassName}\n      id={comboBox.optionId(value)}\n      onMouseDown={(event) => event.preventDefault()}\n      onClick={() => comboBox.select(value)}\n      ref={ref}\n      role=\"option\"\n    >\n      {comboBox.multiple ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"chayns-combo-box__checkbox\"\n          data-checked={isSelected || undefined}\n        />\n      ) : null}\n      {children}\n    </div>\n  );\n});\n\nconst ComboBoxRoot = forwardRef<HTMLInputElement, ComboBoxProps>(function ComboBoxRoot(props, ref) {\n  const {\n    'aria-label': ariaLabel,\n    children,\n    className,\n    defaultValue,\n    disabled,\n    id,\n    multiple = false,\n    onValueChange,\n    openOnFocus = true,\n    placeholder,\n    value,\n    ...inputProps\n  } = props;\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const listboxId = `${inputId}-listbox`;\n  const rootRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const optionElements = useMemo(() => getOptionElements(children), [children]);\n  const optionMap = useMemo(\n    () => new Map(optionElements.map((option) => [option.props.value, option])),\n    [optionElements],\n  );\n  const defaultValues = multiple\n    ? ((defaultValue as ReactElement<ComboBoxOptionProps>[] | undefined)?.map(\n        (option) => option.props.value,\n      ) ?? [])\n    : [];\n  const controlledValues = multiple\n    ? ((value as ReactElement<ComboBoxOptionProps>[] | undefined)?.map(\n        (option) => option.props.value,\n      ) ?? [])\n    : [];\n  const [uncontrolledValue, setUncontrolledValue] = useState(\n    multiple ? '' : ((defaultValue as string | undefined) ?? ''),\n  );\n  const [uncontrolledValues, setUncontrolledValues] = useState(defaultValues);\n  const [inputText, setInputText] = useState(\n    multiple ? '' : ((defaultValue as string | undefined) ?? ''),\n  );\n  const [open, setOpen] = useState(false);\n  const [activeValue, setActiveValue] = useState<string>();\n  const isControlled = value !== undefined;\n  const selectedValue = multiple ? '' : isControlled ? (value as string) : uncontrolledValue;\n  const selectedValues = multiple ? (isControlled ? controlledValues : uncontrolledValues) : [];\n  const normalizedFilter = inputText.trim().toLocaleLowerCase();\n  const visibleValues = optionElements\n    .filter((option) => {\n      const label = getOptionLabel(option.props.children).toLocaleLowerCase();\n      return normalizedFilter === '' || label.includes(normalizedFilter);\n    })\n    .map((option) => option.props.value);\n\n  useEffect(() => {\n    if (open && activeValue === undefined) {\n      setActiveValue(visibleValues[0]);\n    }\n  }, [activeValue, open, visibleValues]);\n\n  useEffect(() => {\n    if (!open) {\n      return undefined;\n    }\n\n    function closeOnOutsidePress(event: PointerEvent) {\n      if (event.target instanceof Node && !rootRef.current?.contains(event.target)) {\n        commitInput();\n        setOpen(false);\n      }\n    }\n\n    document.addEventListener('pointerdown', closeOnOutsidePress);\n    return () => document.removeEventListener('pointerdown', closeOnOutsidePress);\n  });\n\n  function setInputElement(element: HTMLInputElement | null) {\n    inputRef.current = element;\n\n    if (typeof ref === 'function') {\n      ref(element);\n    } else if (ref !== null) {\n      ref.current = element;\n    }\n  }\n\n  function emitValue(nextValue: string) {\n    if (!isControlled) {\n      setUncontrolledValue(nextValue);\n    }\n\n    (onValueChange as ((next: string) => void) | undefined)?.(nextValue);\n  }\n\n  function emitValues(nextValues: string[]) {\n    if (!isControlled) {\n      setUncontrolledValues(nextValues);\n    }\n\n    const nextOptions = nextValues\n      .map((nextValue) => optionMap.get(nextValue))\n      .filter((option): option is ReactElement<ComboBoxOptionProps> => option !== undefined);\n    (onValueChange as ((next: ReactElement<ComboBoxOptionProps>[]) => void) | undefined)?.(\n      nextOptions,\n    );\n  }\n\n  function commitInput() {\n    if (!multiple && inputText !== selectedValue) {\n      emitValue(inputText);\n    }\n  }\n\n  function select(nextValue: string) {\n    if (multiple) {\n      const nextValues = selectedValues.includes(nextValue)\n        ? selectedValues.filter((selected) => selected !== nextValue)\n        : [...selectedValues, nextValue];\n      emitValues(nextValues);\n      setInputText('');\n      setActiveValue(undefined);\n      setOpen(true);\n      return;\n    }\n\n    const option = optionMap.get(nextValue);\n    emitValue(nextValue);\n    setInputText(option === undefined ? nextValue : getOptionLabel(option.props.children));\n    setActiveValue(undefined);\n    setOpen(false);\n  }\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    setInputText(event.target.value);\n    setActiveValue(undefined);\n    setOpen(true);\n    props.onChange?.(event);\n  }\n\n  function handleBlur(event: FocusEvent<HTMLInputElement>) {\n    props.onBlur?.(event);\n    if (!rootRef.current?.contains(event.relatedTarget)) {\n      commitInput();\n      setOpen(false);\n    }\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {\n    const currentIndex = activeValue === undefined ? -1 : visibleValues.indexOf(activeValue);\n    let nextIndex = currentIndex;\n\n    if (event.key === 'ArrowDown') nextIndex = Math.min(currentIndex + 1, visibleValues.length - 1);\n    if (event.key === 'ArrowUp') nextIndex = Math.max(currentIndex - 1, 0);\n    if (event.key === 'Home') nextIndex = 0;\n    if (event.key === 'End') nextIndex = visibleValues.length - 1;\n\n    if (nextIndex !== currentIndex && visibleValues[nextIndex] !== undefined) {\n      event.preventDefault();\n      setActiveValue(visibleValues[nextIndex]);\n      setOpen(true);\n    } else if (event.key === 'Enter' && activeValue !== undefined) {\n      event.preventDefault();\n      select(activeValue);\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      setInputText(multiple ? '' : selectedValue);\n      setActiveValue(undefined);\n      setOpen(false);\n    }\n\n    props.onKeyDown?.(event);\n  }\n\n  const resolvedClassName = ['chayns-combo-box', open ? 'chayns-combo-box--open' : '']\n    .filter(Boolean)\n    .join(' ');\n  const describedLabel = placeholder === undefined ? undefined : `${inputId}-label`;\n  const selectedOptions = selectedValues\n    .map((selected) => optionMap.get(selected))\n    .filter((option): option is ReactElement<ComboBoxOptionProps> => option !== undefined);\n  const inputClassName = ['chayns-combo-box__input', className].filter(Boolean).join(' ');\n\n  return (\n    <ComboBoxContext.Provider\n      value={{\n        activeValue,\n        close: () => setOpen(false),\n        inputText,\n        isSelected: (optionValue) =>\n          multiple ? selectedValues.includes(optionValue) : selectedValue === optionValue,\n        multiple,\n        optionId: (optionValue) => `${listboxId}-${optionValue.replace(/[^a-zA-Z0-9_-]/g, '-')}`,\n        select,\n        visibleValues,\n      }}\n    >\n      <div className={resolvedClassName} ref={rootRef}>\n        {multiple ? (\n          <div className=\"chayns-combo-box__chips\" aria-hidden=\"true\">\n            {selectedOptions.map((option) => (\n              <span className=\"chayns-combo-box__chip\" key={option.props.value}>\n                {option.props.children}\n              </span>\n            ))}\n          </div>\n        ) : null}\n        <input\n          {...inputProps}\n          aria-activedescendant={\n            open && activeValue\n              ? `${listboxId}-${activeValue.replace(/[^a-zA-Z0-9_-]/g, '-')}`\n              : undefined\n          }\n          aria-autocomplete=\"list\"\n          aria-controls={listboxId}\n          aria-expanded={open}\n          aria-label={ariaLabel}\n          className={inputClassName}\n          disabled={disabled}\n          id={inputId}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={() => openOnFocus && setOpen(true)}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder === undefined ? undefined : ' '}\n          ref={setInputElement}\n          role=\"combobox\"\n          value={inputText}\n        />\n        {placeholder !== undefined ? (\n          <label className=\"chayns-combo-box__label\" htmlFor={inputId} id={describedLabel}>\n            {placeholder}\n          </label>\n        ) : null}\n        {open ? (\n          <div\n            aria-multiselectable={multiple || undefined}\n            className=\"chayns-combo-box__popup\"\n            id={listboxId}\n            role=\"listbox\"\n          >\n            {children}\n          </div>\n        ) : null}\n      </div>\n    </ComboBoxContext.Provider>\n  );\n});\n\nconst ComboBox = Object.assign(ComboBoxRoot, { Option });\n\nexport default ComboBox;\n"],"mappings":"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"}
+{"version":3,"file":"ComboBox.js","names":[],"sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  Fragment,\n  isValidElement,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { ChangeEvent, FocusEvent, KeyboardEvent, ReactElement, ReactNode } from 'react';\n\nimport ButtonIcon from '../button/button-icon/ButtonIcon.js';\nimport { ComboBoxContext, getOptionLabel, useComboBoxContext } from './ComboBoxContext.js';\nimport type { ComboBoxOptionProps, ComboBoxProps } from './ComboBox.types.js';\n\nfunction getOptionElements(children: ComboBoxProps['children']) {\n  const options: ReactElement<ComboBoxOptionProps>[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const element = child as ReactElement<{ children?: ReactNode; value?: string }>;\n\n    if (element.type === Fragment) {\n      options.push(...getOptionElements(element.props.children));\n    } else if (typeof element.props.value === 'string') {\n      options.push(element as ReactElement<ComboBoxOptionProps>);\n    }\n  });\n\n  return options;\n}\n\nconst Option = forwardRef<HTMLDivElement, ComboBoxOptionProps>(function Option(\n  { children, className, value, ...optionProps },\n  ref,\n) {\n  const comboBox = useComboBoxContext();\n  const isVisible = comboBox.visibleValues.includes(value);\n  const isSelected = comboBox.isSelected(value);\n  const resolvedClassName = [\n    'chayns-combo-box__option',\n    isSelected ? 'chayns-combo-box__option--selected' : '',\n    comboBox.activeValue === value ? 'chayns-combo-box__option--active' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  if (!isVisible) {\n    return null;\n  }\n\n  return (\n    <div\n      {...optionProps}\n      aria-selected={isSelected}\n      className={resolvedClassName}\n      id={comboBox.optionId(value)}\n      onMouseDown={(event) => event.preventDefault()}\n      onClick={(event) => {\n        optionProps.onClick?.(event);\n        if (!event.defaultPrevented) {\n          comboBox.select(value);\n        }\n      }}\n      onKeyDown={(event) => {\n        optionProps.onKeyDown?.(event);\n        if (!event.defaultPrevented && (event.key === 'Enter' || event.key === ' ')) {\n          event.preventDefault();\n          comboBox.select(value);\n        }\n      }}\n      ref={ref}\n      role=\"option\"\n      tabIndex={-1}\n    >\n      {comboBox.multiple ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"chayns-combo-box__checkbox\"\n          data-checked={isSelected || undefined}\n        />\n      ) : null}\n      {children}\n    </div>\n  );\n});\n\nconst ComboBoxRoot = forwardRef<HTMLInputElement, ComboBoxProps>(function ComboBoxRoot(props, ref) {\n  const {\n    'aria-label': ariaLabel,\n    children,\n    className,\n    defaultValue,\n    disabled,\n    id,\n    multiple = false,\n    onValueChange,\n    openOnFocus = true,\n    placeholder,\n    value,\n    ...inputProps\n  } = props;\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const listboxId = `${inputId}-listbox`;\n  const rootRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const optionElements = useMemo(() => getOptionElements(children), [children]);\n  const optionMap = useMemo(\n    () => new Map(optionElements.map((option) => [option.props.value, option])),\n    [optionElements],\n  );\n  const defaultValues = multiple\n    ? ((defaultValue as ReactElement<ComboBoxOptionProps>[] | undefined)?.map(\n        (option) => option.props.value,\n      ) ?? [])\n    : [];\n  const controlledValues = multiple\n    ? ((value as ReactElement<ComboBoxOptionProps>[] | undefined)?.map(\n        (option) => option.props.value,\n      ) ?? [])\n    : [];\n  const [uncontrolledValue, setUncontrolledValue] = useState(\n    multiple ? '' : ((defaultValue as string | undefined) ?? ''),\n  );\n  const [uncontrolledValues, setUncontrolledValues] = useState(defaultValues);\n  const [inputText, setInputText] = useState(\n    multiple ? '' : ((defaultValue as string | undefined) ?? ''),\n  );\n  const [open, setOpen] = useState(false);\n  const [activeValue, setActiveValue] = useState<string>();\n  const isControlled = value !== undefined;\n  const selectedValue = multiple ? '' : isControlled ? (value as string) : uncontrolledValue;\n  const selectedValues = multiple ? (isControlled ? controlledValues : uncontrolledValues) : [];\n  const normalizedFilter = inputText.trim().toLocaleLowerCase();\n  const visibleValues = optionElements\n    .filter((option) => {\n      const label = getOptionLabel(option.props.children).toLocaleLowerCase();\n      return normalizedFilter === '' || label.includes(normalizedFilter);\n    })\n    .map((option) => option.props.value);\n\n  useEffect(() => {\n    if (open && activeValue === undefined) {\n      setActiveValue(visibleValues[0]);\n    }\n  }, [activeValue, open, visibleValues]);\n\n  useEffect(() => {\n    if (!open) {\n      return undefined;\n    }\n\n    function closeOnOutsidePress(event: PointerEvent) {\n      if (event.target instanceof Node && !rootRef.current?.contains(event.target)) {\n        commitInput();\n        setOpen(false);\n      }\n    }\n\n    document.addEventListener('pointerdown', closeOnOutsidePress);\n    return () => document.removeEventListener('pointerdown', closeOnOutsidePress);\n  });\n\n  function setInputElement(element: HTMLInputElement | null) {\n    inputRef.current = element;\n\n    if (typeof ref === 'function') {\n      ref(element);\n    } else if (ref !== null) {\n      ref.current = element;\n    }\n  }\n\n  function emitValue(nextValue: string) {\n    if (!isControlled) {\n      setUncontrolledValue(nextValue);\n    }\n\n    (onValueChange as ((next: string) => void) | undefined)?.(nextValue);\n  }\n\n  function emitValues(nextValues: string[]) {\n    if (!isControlled) {\n      setUncontrolledValues(nextValues);\n    }\n\n    const nextOptions = nextValues\n      .map((nextValue) => optionMap.get(nextValue))\n      .filter((option): option is ReactElement<ComboBoxOptionProps> => option !== undefined);\n    (onValueChange as ((next: ReactElement<ComboBoxOptionProps>[]) => void) | undefined)?.(\n      nextOptions,\n    );\n  }\n\n  function commitInput() {\n    if (!multiple && inputText !== selectedValue) {\n      emitValue(inputText);\n    }\n  }\n\n  function select(nextValue: string) {\n    if (multiple) {\n      const nextValues = selectedValues.includes(nextValue)\n        ? selectedValues.filter((selected) => selected !== nextValue)\n        : [...selectedValues, nextValue];\n      emitValues(nextValues);\n      setInputText('');\n      setActiveValue(undefined);\n      setOpen(true);\n      return;\n    }\n\n    const option = optionMap.get(nextValue);\n    emitValue(nextValue);\n    setInputText(option === undefined ? nextValue : getOptionLabel(option.props.children));\n    setActiveValue(undefined);\n    setOpen(false);\n  }\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    setInputText(event.target.value);\n    setActiveValue(undefined);\n    setOpen(true);\n    props.onChange?.(event);\n  }\n\n  function handleBlur(event: FocusEvent<HTMLInputElement>) {\n    props.onBlur?.(event);\n    if (!rootRef.current?.contains(event.relatedTarget)) {\n      commitInput();\n      setOpen(false);\n    }\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {\n    const currentIndex = activeValue === undefined ? -1 : visibleValues.indexOf(activeValue);\n    let nextIndex = currentIndex;\n\n    if (event.key === 'ArrowDown') nextIndex = Math.min(currentIndex + 1, visibleValues.length - 1);\n    if (event.key === 'ArrowUp') nextIndex = Math.max(currentIndex - 1, 0);\n    if (event.key === 'Home') nextIndex = 0;\n    if (event.key === 'End') nextIndex = visibleValues.length - 1;\n\n    if (nextIndex !== currentIndex && visibleValues[nextIndex] !== undefined) {\n      event.preventDefault();\n      setActiveValue(visibleValues[nextIndex]);\n      setOpen(true);\n    } else if (event.key === 'Enter' && activeValue !== undefined) {\n      event.preventDefault();\n      select(activeValue);\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      setInputText(multiple ? '' : selectedValue);\n      setActiveValue(undefined);\n      setOpen(false);\n    }\n\n    props.onKeyDown?.(event);\n  }\n\n  const resolvedClassName = ['chayns-combo-box', open ? 'chayns-combo-box--open' : '']\n    .filter(Boolean)\n    .join(' ');\n  const describedLabel = placeholder === undefined ? undefined : `${inputId}-label`;\n  const selectedOptions = selectedValues\n    .map((selected) => optionMap.get(selected))\n    .filter((option): option is ReactElement<ComboBoxOptionProps> => option !== undefined);\n  const inputClassName = ['chayns-combo-box__input', className].filter(Boolean).join(' ');\n\n  return (\n    <ComboBoxContext.Provider\n      value={{\n        activeValue,\n        close: () => setOpen(false),\n        inputText,\n        isSelected: (optionValue) =>\n          multiple ? selectedValues.includes(optionValue) : selectedValue === optionValue,\n        multiple,\n        optionId: (optionValue) => `${listboxId}-${optionValue.replace(/[^a-zA-Z0-9_-]/g, '-')}`,\n        select,\n        visibleValues,\n      }}\n    >\n      <div className={resolvedClassName} ref={rootRef}>\n        {multiple ? (\n          <div className=\"chayns-combo-box__chips\" aria-hidden=\"true\">\n            {selectedOptions.map((option) => (\n              <span className=\"chayns-combo-box__chip\" key={option.props.value}>\n                {option.props.children}\n              </span>\n            ))}\n          </div>\n        ) : null}\n        <input\n          {...inputProps}\n          aria-activedescendant={\n            open && activeValue\n              ? `${listboxId}-${activeValue.replace(/[^a-zA-Z0-9_-]/g, '-')}`\n              : undefined\n          }\n          aria-autocomplete=\"list\"\n          aria-controls={listboxId}\n          aria-expanded={open}\n          aria-label={ariaLabel}\n          className={inputClassName}\n          disabled={disabled}\n          id={inputId}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={() => openOnFocus && setOpen(true)}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder === undefined ? undefined : ' '}\n          ref={setInputElement}\n          role=\"combobox\"\n          value={inputText}\n        />\n        {placeholder !== undefined ? (\n          <label className=\"chayns-combo-box__label\" htmlFor={inputId} id={describedLabel}>\n            {placeholder}\n          </label>\n        ) : null}\n        <span aria-hidden=\"true\" className=\"chayns-combo-box__chevron\">\n          <ButtonIcon icon=\"fa-chevron-down\" />\n        </span>\n        {open ? (\n          <div\n            aria-multiselectable={multiple || undefined}\n            className=\"chayns-combo-box__popup\"\n            id={listboxId}\n            role=\"listbox\"\n          >\n            {children}\n          </div>\n        ) : null}\n      </div>\n    </ComboBoxContext.Provider>\n  );\n});\n\nconst ComboBox = Object.assign(ComboBoxRoot, { Option });\n\nexport default ComboBox;\n"],"mappings":";;;;;AAiBA,SAAS,kBAAkB,UAAqC;CAC9D,MAAM,UAA+C,CAAC;CAEtD,SAAS,QAAQ,WAAW,UAAU;EACpC,IAAI,CAAC,eAAe,KAAK,GACvB;EAGF,MAAM,UAAU;EAEhB,IAAI,QAAQ,SAAS,UACnB,QAAQ,KAAK,GAAG,kBAAkB,QAAQ,MAAM,QAAQ,CAAC;OACpD,IAAI,OAAO,QAAQ,MAAM,UAAU,UACxC,QAAQ,KAAK,OAA4C;CAE7D,CAAC;CAED,OAAO;AACT;AAEA,IAAM,SAAS,WAAgD,SAAS,OACtE,EAAE,UAAU,WAAW,OAAO,GAAG,eACjC,KACA;CACA,MAAM,WAAW,mBAAmB;CACpC,MAAM,YAAY,SAAS,cAAc,SAAS,KAAK;CACvD,MAAM,aAAa,SAAS,WAAW,KAAK;CAC5C,MAAM,oBAAoB;EACxB;EACA,aAAa,uCAAuC;EACpD,SAAS,gBAAgB,QAAQ,qCAAqC;EACtE;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,IAAI,CAAC,WACH,OAAO;CAGT,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,iBAAe;EACf,WAAW;EACX,IAAI,SAAS,SAAS,KAAK;EAC3B,cAAc,UAAU,MAAM,eAAe;EAC7C,UAAU,UAAU;GAClB,YAAY,UAAU,KAAK;GAC3B,IAAI,CAAC,MAAM,kBACT,SAAS,OAAO,KAAK;EAEzB;EACA,YAAY,UAAU;GACpB,YAAY,YAAY,KAAK;GAC7B,IAAI,CAAC,MAAM,qBAAqB,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;IAC3E,MAAM,eAAe;IACrB,SAAS,OAAO,KAAK;GACvB;EACF;EACK;EACL,MAAK;EACL,UAAU;EArBZ,UAAA,CAuBG,SAAS,WACR,oBAAC,QAAD;GACE,eAAY;GACZ,WAAU;GACV,gBAAc,cAAc,KAAA;EAC7B,CAAA,IACC,MACH,QACE;;AAET,CAAC;AAED,IAAM,eAAe,WAA4C,SAAS,aAAa,OAAO,KAAK;CACjG,MAAM,EACJ,cAAc,WACd,UACA,WACA,cACA,UACA,IACA,WAAW,OACX,eACA,cAAc,MACd,aACA,OACA,GAAG,eACD;CACJ,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,MAAM;CACtB,MAAM,YAAY,GAAG,QAAQ;CAC7B,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,iBAAiB,cAAc,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,CAAC;CAC5E,MAAM,YAAY,cACV,IAAI,IAAI,eAAe,KAAK,WAAW,CAAC,OAAO,MAAM,OAAO,MAAM,CAAC,CAAC,GAC1E,CAAC,cAAc,CACjB;CACA,MAAM,gBAAgB,WAChB,cAAkE,KACjE,WAAW,OAAO,MAAM,KAC3B,KAAK,CAAC,IACN,CAAC;CACL,MAAM,mBAAmB,WACnB,OAA2D,KAC1D,WAAW,OAAO,MAAM,KAC3B,KAAK,CAAC,IACN,CAAC;CACL,MAAM,CAAC,mBAAmB,wBAAwB,SAChD,WAAW,KAAO,gBAAuC,EAC3D;CACA,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,aAAa;CAC1E,MAAM,CAAC,WAAW,gBAAgB,SAChC,WAAW,KAAO,gBAAuC,EAC3D;CACA,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,CAAC,aAAa,kBAAkB,SAAiB;CACvD,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,gBAAgB,WAAW,KAAK,eAAgB,QAAmB;CACzE,MAAM,iBAAiB,WAAY,eAAe,mBAAmB,qBAAsB,CAAC;CAC5F,MAAM,mBAAmB,UAAU,KAAK,CAAC,CAAC,kBAAkB;CAC5D,MAAM,gBAAgB,eACnB,QAAQ,WAAW;EAClB,MAAM,QAAQ,eAAe,OAAO,MAAM,QAAQ,CAAC,CAAC,kBAAkB;EACtE,OAAO,qBAAqB,MAAM,MAAM,SAAS,gBAAgB;CACnE,CAAC,CAAC,CACD,KAAK,WAAW,OAAO,MAAM,KAAK;CAErC,gBAAgB;EACd,IAAI,QAAQ,gBAAgB,KAAA,GAC1B,eAAe,cAAc,EAAE;CAEnC,GAAG;EAAC;EAAa;EAAM;CAAa,CAAC;CAErC,gBAAgB;EACd,IAAI,CAAC,MACH;EAGF,SAAS,oBAAoB,OAAqB;GAChD,IAAI,MAAM,kBAAkB,QAAQ,CAAC,QAAQ,SAAS,SAAS,MAAM,MAAM,GAAG;IAC5E,YAAY;IACZ,QAAQ,KAAK;GACf;EACF;EAEA,SAAS,iBAAiB,eAAe,mBAAmB;EAC5D,aAAa,SAAS,oBAAoB,eAAe,mBAAmB;CAC9E,CAAC;CAED,SAAS,gBAAgB,SAAkC;EACzD,SAAS,UAAU;EAEnB,IAAI,OAAO,QAAQ,YACjB,IAAI,OAAO;OACN,IAAI,QAAQ,MACjB,IAAI,UAAU;CAElB;CAEA,SAAS,UAAU,WAAmB;EACpC,IAAI,CAAC,cACH,qBAAqB,SAAS;EAGhC,gBAA0D,SAAS;CACrE;CAEA,SAAS,WAAW,YAAsB;EACxC,IAAI,CAAC,cACH,sBAAsB,UAAU;EAGlC,MAAM,cAAc,WACjB,KAAK,cAAc,UAAU,IAAI,SAAS,CAAC,CAAC,CAC5C,QAAQ,WAAwD,WAAW,KAAA,CAAS;EACvF,gBACE,WACF;CACF;CAEA,SAAS,cAAc;EACrB,IAAI,CAAC,YAAY,cAAc,eAC7B,UAAU,SAAS;CAEvB;CAEA,SAAS,OAAO,WAAmB;EACjC,IAAI,UAAU;GAIZ,WAHmB,eAAe,SAAS,SAAS,IAChD,eAAe,QAAQ,aAAa,aAAa,SAAS,IAC1D,CAAC,GAAG,gBAAgB,SAAS,CACZ;GACrB,aAAa,EAAE;GACf,eAAe,KAAA,CAAS;GACxB,QAAQ,IAAI;GACZ;EACF;EAEA,MAAM,SAAS,UAAU,IAAI,SAAS;EACtC,UAAU,SAAS;EACnB,aAAa,WAAW,KAAA,IAAY,YAAY,eAAe,OAAO,MAAM,QAAQ,CAAC;EACrF,eAAe,KAAA,CAAS;EACxB,QAAQ,KAAK;CACf;CAEA,SAAS,aAAa,OAAsC;EAC1D,aAAa,MAAM,OAAO,KAAK;EAC/B,eAAe,KAAA,CAAS;EACxB,QAAQ,IAAI;EACZ,MAAM,WAAW,KAAK;CACxB;CAEA,SAAS,WAAW,OAAqC;EACvD,MAAM,SAAS,KAAK;EACpB,IAAI,CAAC,QAAQ,SAAS,SAAS,MAAM,aAAa,GAAG;GACnD,YAAY;GACZ,QAAQ,KAAK;EACf;CACF;CAEA,SAAS,cAAc,OAAwC;EAC7D,MAAM,eAAe,gBAAgB,KAAA,IAAY,KAAK,cAAc,QAAQ,WAAW;EACvF,IAAI,YAAY;EAEhB,IAAI,MAAM,QAAQ,aAAa,YAAY,KAAK,IAAI,eAAe,GAAG,cAAc,SAAS,CAAC;EAC9F,IAAI,MAAM,QAAQ,WAAW,YAAY,KAAK,IAAI,eAAe,GAAG,CAAC;EACrE,IAAI,MAAM,QAAQ,QAAQ,YAAY;EACtC,IAAI,MAAM,QAAQ,OAAO,YAAY,cAAc,SAAS;EAE5D,IAAI,cAAc,gBAAgB,cAAc,eAAe,KAAA,GAAW;GACxE,MAAM,eAAe;GACrB,eAAe,cAAc,UAAU;GACvC,QAAQ,IAAI;EACd,OAAO,IAAI,MAAM,QAAQ,WAAW,gBAAgB,KAAA,GAAW;GAC7D,MAAM,eAAe;GACrB,OAAO,WAAW;EACpB,OAAO,IAAI,MAAM,QAAQ,UAAU;GACjC,MAAM,eAAe;GACrB,aAAa,WAAW,KAAK,aAAa;GAC1C,eAAe,KAAA,CAAS;GACxB,QAAQ,KAAK;EACf;EAEA,MAAM,YAAY,KAAK;CACzB;CAEA,MAAM,oBAAoB,CAAC,oBAAoB,OAAO,2BAA2B,EAAE,CAAC,CACjF,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACX,MAAM,iBAAiB,gBAAgB,KAAA,IAAY,KAAA,IAAY,GAAG,QAAQ;CAC1E,MAAM,kBAAkB,eACrB,KAAK,aAAa,UAAU,IAAI,QAAQ,CAAC,CAAC,CAC1C,QAAQ,WAAwD,WAAW,KAAA,CAAS;CACvF,MAAM,iBAAiB,CAAC,2BAA2B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEtF,OACE,oBAAC,gBAAgB,UAAjB;EACE,OAAO;GACL;GACA,aAAa,QAAQ,KAAK;GAC1B;GACA,aAAa,gBACX,WAAW,eAAe,SAAS,WAAW,IAAI,kBAAkB;GACtE;GACA,WAAW,gBAAgB,GAAG,UAAU,GAAG,YAAY,QAAQ,mBAAmB,GAAG;GACrF;GACA;EACF;EAEA,UAAA,qBAAC,OAAD;GAAK,WAAW;GAAmB,KAAK;GAAxC,UAAA;IACG,WACC,oBAAC,OAAD;KAAK,WAAU;KAA0B,eAAY;KAClD,UAAA,gBAAgB,KAAK,WACpB,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA,OAAO,MAAM;KACV,GAFwC,OAAO,MAAM,KAErD,CACP;IACE,CAAA,IACH;IACJ,oBAAC,SAAD;KACE,GAAI;KACJ,yBACE,QAAQ,cACJ,GAAG,UAAU,GAAG,YAAY,QAAQ,mBAAmB,GAAG,MAC1D,KAAA;KAEN,qBAAkB;KAClB,iBAAe;KACf,iBAAe;KACf,cAAY;KACZ,WAAW;KACD;KACV,IAAI;KACJ,QAAQ;KACR,UAAU;KACV,eAAe,eAAe,QAAQ,IAAI;KAC1C,WAAW;KACX,aAAa,gBAAgB,KAAA,IAAY,KAAA,IAAY;KACrD,KAAK;KACL,MAAK;KACL,OAAO;IACR,CAAA;IACA,gBAAgB,KAAA,IACf,oBAAC,SAAD;KAAO,WAAU;KAA0B,SAAS;KAAS,IAAI;KAC9D,UAAA;IACI,CAAA,IACL;IACJ,oBAAC,QAAD;KAAM,eAAY;KAAO,WAAU;KACjC,UAAA,oBAAC,YAAD,EAAY,MAAK,kBAAmB,CAAA;IAChC,CAAA;IACL,OACC,oBAAC,OAAD;KACE,wBAAsB,YAAY,KAAA;KAClC,WAAU;KACV,IAAI;KACJ,MAAK;KAEJ;IACE,CAAA,IACH;GACD;;CACmB,CAAA;AAE9B,CAAC;AAED,IAAM,WAAW,OAAO,OAAO,cAAc,EAAE,OAAO,CAAC"}

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

@@ -0,0 +1,4 @@
+import { type DateTimePickerProps } from './DateTimePicker.types.js';
+declare const DateTimePicker: import("react").ForwardRefExoticComponent<Omit<DateTimePickerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default DateTimePicker;
+//# sourceMappingURL=DateTimePicker.d.ts.map

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

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

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

@@ -0,0 +1,339 @@
+import { DATE_TIME_PICKER_MINUTE_STEPS } from "./DateTimePicker.types.js";
+import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/date-time-picker/DateTimePicker.tsx
+var WHEEL_LOOP_CYCLES = 11;
+var WHEEL_CENTER_CYCLE = Math.floor(WHEEL_LOOP_CYCLES / 2);
+function dateAtMidnight(value) {
+	return new Date(value.getFullYear(), value.getMonth(), value.getDate());
+}
+function clampDate(value, minDate, maxDate) {
+	const date = dateAtMidnight(value);
+	if (minDate !== void 0 && date < dateAtMidnight(minDate)) return new Date(minDate);
+	if (maxDate !== void 0 && date > dateAtMidnight(maxDate)) return new Date(maxDate);
+	return value;
+}
+function normalizeMinute(value, minuteStep) {
+	const normalized = new Date(value);
+	normalized.setMinutes(Math.floor(normalized.getMinutes() / minuteStep) * minuteStep);
+	return normalized;
+}
+function Wheel({ ariaLabel, onEscape, onSelect, options, selected }) {
+	const wheelRef = useRef(null);
+	const selectedRef = useRef(null);
+	const dragRef = useRef(void 0);
+	const ignoreClickRef = useRef(false);
+	useEffect(() => {
+		if (typeof selectedRef.current?.scrollIntoView === "function") selectedRef.current.scrollIntoView({ block: "center" });
+	}, []);
+	function applyPerspective() {
+		const wheel = wheelRef.current;
+		const itemHeight = selectedRef.current?.offsetHeight;
+		if (!wheel || !itemHeight) return;
+		const position = wheel.scrollTop / itemHeight;
+		for (const option of wheel.querySelectorAll(".chayns-date-time-picker__wheel-option")) {
+			const index = Number(option.dataset.wheelIndex);
+			const distance = Math.max(-2.5, Math.min(2.5, index - position));
+			const progress = Math.min(1, Math.abs(distance) / 2.5);
+			option.style.color = progress < .2 ? "var(--text)" : "var(--text-3)";
+			option.style.fontWeight = progress < .2 ? "600" : "400";
+			option.style.opacity = String(1 - progress * .7);
+			option.style.transform = `rotateX(${distance * 22}deg) scale(${1 - progress * .24})`;
+		}
+	}
+	function selectCenteredValue() {
+		const wheel = wheelRef.current;
+		const itemHeight = selectedRef.current?.offsetHeight;
+		if (!wheel || !itemHeight) return;
+		const option = options[(Math.round(wheel.scrollTop / itemHeight) % options.length + options.length) % options.length];
+		if (option !== void 0 && option.value !== selected) onSelect(option.value);
+	}
+	function handleScroll() {
+		const wheel = wheelRef.current;
+		const itemHeight = selectedRef.current?.offsetHeight;
+		if (!wheel || !itemHeight) return;
+		const index = Math.round(wheel.scrollTop / itemHeight);
+		const normalizedIndex = (index % options.length + options.length) % options.length;
+		if (index < options.length * 2 || index >= options.length * 9) wheel.scrollTop = (WHEEL_CENTER_CYCLE * options.length + normalizedIndex) * itemHeight;
+		applyPerspective();
+		selectCenteredValue();
+	}
+	function handleKeyDown(event) {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			onEscape();
+			return;
+		}
+		const index = options.findIndex((option) => option.value === selected);
+		let nextIndex = index;
+		if (event.key === "ArrowDown") nextIndex = Math.min(index + 1, options.length - 1);
+		if (event.key === "ArrowUp") nextIndex = Math.max(index - 1, 0);
+		if (event.key === "Home") nextIndex = 0;
+		if (event.key === "End") nextIndex = options.length - 1;
+		const nextOption = options[nextIndex];
+		if (nextIndex !== index && nextOption !== void 0) {
+			event.preventDefault();
+			onSelect(nextOption.value);
+		}
+	}
+	function handlePointerDown(event) {
+		if (event.button !== 0) return;
+		if (typeof event.currentTarget.setPointerCapture === "function") event.currentTarget.setPointerCapture(event.pointerId);
+		dragRef.current = {
+			pointerId: event.pointerId,
+			scrollTop: event.currentTarget.scrollTop,
+			startY: event.clientY
+		};
+		ignoreClickRef.current = false;
+	}
+	function handlePointerMove(event) {
+		const drag = dragRef.current;
+		if (drag?.pointerId !== event.pointerId) return;
+		const distance = event.clientY - drag.startY;
+		if (Math.abs(distance) > 3) {
+			ignoreClickRef.current = true;
+			event.currentTarget.scrollTop = drag.scrollTop - distance;
+		}
+	}
+	function handlePointerUp(event) {
+		if (dragRef.current?.pointerId !== event.pointerId) return;
+		dragRef.current = void 0;
+		if (typeof event.currentTarget.releasePointerCapture === "function") event.currentTarget.releasePointerCapture(event.pointerId);
+		selectCenteredValue();
+	}
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": ariaLabel,
+		className: "chayns-date-time-picker__wheel",
+		onKeyDown: handleKeyDown,
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: handlePointerUp,
+		onScroll: handleScroll,
+		ref: wheelRef,
+		role: "listbox",
+		tabIndex: 0,
+		children: Array.from({ length: WHEEL_LOOP_CYCLES }, (_, cycle) => options.map((option, optionIndex) => /* @__PURE__ */ jsx("button", {
+			"aria-selected": option.value === selected,
+			className: "chayns-date-time-picker__wheel-option",
+			"data-wheel-index": cycle * options.length + optionIndex,
+			onClick: (event) => {
+				if (ignoreClickRef.current) {
+					event.preventDefault();
+					event.stopPropagation();
+					ignoreClickRef.current = false;
+					return;
+				}
+				onSelect(option.value);
+			},
+			ref: cycle === WHEEL_CENTER_CYCLE && option.value === selected ? selectedRef : void 0,
+			role: "option",
+			type: "button",
+			children: option.label
+		}, `${cycle}-${option.value}`)))
+	});
+}
+var DateTimePicker = forwardRef(function DateTimePicker({ className, disabled, id, 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();
+	const triggerId = id ?? generatedId;
+	const popupId = `${triggerId}-popup`;
+	const rootRef = useRef(null);
+	const triggerRef = useRef(null);
+	const [open, setOpen] = useState(false);
+	const displayValue = value === null ? null : mode === "date" ? clampDate(value, minDate, maxDate) : normalizeMinute(value, minuteStep);
+	const activeValue = displayValue ?? /* @__PURE__ */ new Date();
+	const isTwelveHour = new Intl.DateTimeFormat(locale, { hour: "numeric" }).resolvedOptions().hour12 === true;
+	useEffect(() => {
+		if (!open) return void 0;
+		function closeOnOutsidePress(event) {
+			if (event.target instanceof Node && !rootRef.current?.contains(event.target)) close();
+		}
+		document.addEventListener("pointerdown", closeOnOutsidePress);
+		return () => document.removeEventListener("pointerdown", closeOnOutsidePress);
+	});
+	const years = useMemo(() => {
+		const today = (/* @__PURE__ */ new Date()).getFullYear();
+		const first = minDate?.getFullYear() ?? today - 100;
+		const last = maxDate?.getFullYear() ?? today + 100;
+		return Array.from({ length: last - first + 1 }, (_, index) => first + index);
+	}, [maxDate, minDate]);
+	function close() {
+		setOpen(false);
+		triggerRef.current?.focus();
+	}
+	function emit(nextValue) {
+		onChange(mode === "date" ? clampDate(nextValue, minDate, maxDate) : nextValue);
+	}
+	function updateTime(part, nextValue) {
+		const next = new Date(activeValue);
+		if (part === "hours") {
+			const hour = isTwelveHour ? nextValue % 12 + (next.getHours() >= 12 ? 12 : 0) : nextValue;
+			next.setHours(hour);
+		} else next.setMinutes(nextValue);
+		emit(next);
+	}
+	function updatePeriod(period) {
+		const next = new Date(activeValue);
+		next.setHours(next.getHours() % 12 + period * 12);
+		emit(next);
+	}
+	function updateDate(part, nextValue) {
+		const next = new Date(activeValue);
+		const originalDay = next.getDate();
+		next.setDate(1);
+		if (part === "fullYear") next.setFullYear(nextValue);
+		if (part === "month") next.setMonth(nextValue);
+		if (part === "date") next.setDate(nextValue);
+		if (part !== "date") next.setDate(Math.min(originalDay, new Date(next.getFullYear(), next.getMonth() + 1, 0).getDate()));
+		emit(next);
+	}
+	const formattedValue = displayValue === null ? placeholder : mode === "time" ? `${new Intl.DateTimeFormat(locale, {
+		hour: "numeric",
+		minute: "2-digit"
+	}).format(displayValue)}${locale.toLowerCase().startsWith("de") ? " Uhr" : ""}` : new Intl.DateTimeFormat(locale, {
+		day: "numeric",
+		month: "long",
+		year: "numeric"
+	}).format(displayValue);
+	const hours = Array.from({ length: isTwelveHour ? 12 : 24 }, (_, index) => isTwelveHour ? index + 1 : index).map((hour) => ({
+		label: String(hour).padStart(2, "0"),
+		value: hour
+	}));
+	const minutes = Array.from({ length: 60 / minuteStep }, (_, index) => {
+		const minute = index * minuteStep;
+		return {
+			label: String(minute).padStart(2, "0"),
+			value: minute
+		};
+	});
+	const months = Array.from({ length: 12 }, (_, month) => ({
+		label: new Intl.DateTimeFormat(locale, { month: "long" }).format(new Date(2026, month, 1)),
+		value: month
+	})).filter((month) => {
+		const first = new Date(activeValue.getFullYear(), month.value, 1);
+		const last = new Date(activeValue.getFullYear(), month.value + 1, 0);
+		return (minDate === void 0 || last >= dateAtMidnight(minDate)) && (maxDate === void 0 || first <= dateAtMidnight(maxDate));
+	});
+	const days = Array.from({ length: new Date(activeValue.getFullYear(), activeValue.getMonth() + 1, 0).getDate() }, (_, index) => ({
+		label: String(index + 1).padStart(2, "0"),
+		value: index + 1
+	})).filter((day) => {
+		const candidate = new Date(activeValue.getFullYear(), activeValue.getMonth(), day.value);
+		return (minDate === void 0 || candidate >= dateAtMidnight(minDate)) && (maxDate === void 0 || candidate <= dateAtMidnight(maxDate));
+	});
+	const datePartOrder = new Intl.DateTimeFormat(locale, {
+		day: "numeric",
+		month: "numeric",
+		year: "numeric"
+	}).formatToParts(activeValue).flatMap((part) => {
+		if (part.type === "day") return ["date"];
+		if (part.type === "month") return ["month"];
+		if (part.type === "year") return ["fullYear"];
+		return [];
+	});
+	const yearOptions = years.map((year) => ({
+		label: String(year),
+		value: year
+	}));
+	function dateOptions(part) {
+		if (part === "date") return days;
+		if (part === "month") return months;
+		return yearOptions;
+	}
+	function dateValue(part) {
+		if (part === "date") return activeValue.getDate();
+		if (part === "month") return activeValue.getMonth();
+		return activeValue.getFullYear();
+	}
+	const dayPeriods = [0, 1].map((period) => ({
+		label: new Intl.DateTimeFormat(locale, { hour: "numeric" }).formatToParts(new Date(2026, 0, 1, period === 0 ? 1 : 13)).find((part) => part.type === "dayPeriod")?.value ?? (period === 0 ? "AM" : "PM"),
+		value: period
+	}));
+	const resolvedClassName = [
+		"chayns-date-time-picker",
+		`chayns-date-time-picker--${mode}`,
+		open ? "chayns-date-time-picker--open" : "",
+		displayValue !== null ? "chayns-date-time-picker--filled" : ""
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("div", {
+		className: resolvedClassName,
+		ref: rootRef,
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				...buttonProps,
+				"aria-controls": open ? popupId : void 0,
+				"aria-expanded": open,
+				"aria-haspopup": "dialog",
+				className: ["chayns-date-time-picker__trigger", className].filter(Boolean).join(" "),
+				disabled,
+				id: triggerId,
+				onClick: (event) => {
+					onClick?.(event);
+					if (!event.defaultPrevented) setOpen((current) => !current);
+				},
+				onKeyDown: (event) => {
+					onKeyDown?.(event);
+					if (event.key === "Escape" && open && !event.defaultPrevented) {
+						event.preventDefault();
+						close();
+					}
+				},
+				ref: (element) => {
+					triggerRef.current = element;
+					if (typeof ref === "function") ref(element);
+					else if (ref !== null) ref.current = element;
+				},
+				type: "button",
+				children: formattedValue
+			}),
+			/* @__PURE__ */ jsx("label", {
+				className: "chayns-date-time-picker__label",
+				htmlFor: triggerId,
+				children: label
+			}),
+			open && !disabled ? /* @__PURE__ */ jsxs("div", {
+				"aria-label": label,
+				className: "chayns-date-time-picker__popup",
+				id: popupId,
+				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: part === "date" ? wheelLabels.day : part === "month" ? wheelLabels.month : wheelLabels.year,
+						onEscape: close,
+						onSelect: (nextValue) => updateDate(part, nextValue),
+						options: dateOptions(part),
+						selected: dateValue(part)
+					}, part))
+				})]
+			}) : null
+		]
+	});
+});
+//#endregion
+export { DateTimePicker as default };
+
+//# sourceMappingURL=DateTimePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useId, useMemo, useRef, useState } from 'react';\nimport type { KeyboardEvent, PointerEvent as ReactPointerEvent } from 'react';\n\nimport { DATE_TIME_PICKER_MINUTE_STEPS, type DateTimePickerProps } from './DateTimePicker.types.js';\n\nconst WHEEL_LOOP_CYCLES = 11;\nconst WHEEL_CENTER_CYCLE = Math.floor(WHEEL_LOOP_CYCLES / 2);\ntype DatePart = 'date' | 'fullYear' | 'month';\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 dateAtMidnight(value: Date) {\n  return new Date(value.getFullYear(), value.getMonth(), value.getDate());\n}\n\nfunction clampDate(value: Date, minDate?: Date, maxDate?: Date) {\n  const date = dateAtMidnight(value);\n  if (minDate !== undefined && date < dateAtMidnight(minDate)) return new Date(minDate);\n  if (maxDate !== undefined && date > dateAtMidnight(maxDate)) return new Date(maxDate);\n  return value;\n}\n\nfunction normalizeMinute(value: Date, minuteStep: number) {\n  const normalized = new Date(value);\n  normalized.setMinutes(Math.floor(normalized.getMinutes() / minuteStep) * minuteStep);\n  return normalized;\n}\n\nfunction Wheel({ ariaLabel, onEscape, onSelect, options, selected }: WheelProps) {\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  useEffect(() => {\n    if (typeof selectedRef.current?.scrollIntoView === 'function') {\n      selectedRef.current.scrollIntoView({ block: 'center' });\n    }\n  }, []);\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    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-label={ariaLabel}\n      className=\"chayns-date-time-picker__wheel\"\n      onKeyDown={handleKeyDown}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onPointerUp={handlePointerUp}\n      onScroll={handleScroll}\n      ref={wheelRef}\n      role=\"listbox\"\n      tabIndex={0}\n    >\n      {Array.from({ length: WHEEL_LOOP_CYCLES }, (_, cycle) =>\n        options.map((option, optionIndex) => (\n          <button\n            aria-selected={option.value === selected}\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            type=\"button\"\n          >\n            {option.label}\n          </button>\n        )),\n      )}\n    </div>\n  );\n}\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 triggerRef = useRef<HTMLButtonElement>(null);\n  const [open, setOpen] = useState(false);\n  const displayValue =\n    value === null\n      ? null\n      : mode === 'date'\n        ? clampDate(value, minDate, maxDate)\n        : normalizeMinute(value, minuteStep);\n  const activeValue = displayValue ?? new Date();\n  const isTwelveHour =\n    new Intl.DateTimeFormat(locale, { hour: 'numeric' }).resolvedOptions().hour12 === true;\n\n  useEffect(() => {\n    if (!open) return undefined;\n    function closeOnOutsidePress(event: PointerEvent) {\n      if (event.target instanceof Node && !rootRef.current?.contains(event.target)) close();\n    }\n    document.addEventListener('pointerdown', closeOnOutsidePress);\n    return () => document.removeEventListener('pointerdown', closeOnOutsidePress);\n  });\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 close() {\n    setOpen(false);\n    triggerRef.current?.focus();\n  }\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  const formattedValue =\n    displayValue === null\n      ? placeholder\n      : mode === 'time'\n        ? `${new Intl.DateTimeFormat(locale, {\n            hour: 'numeric',\n            minute: '2-digit',\n          }).format(displayValue)}${locale.toLowerCase().startsWith('de') ? ' Uhr' : ''}`\n        : new Intl.DateTimeFormat(locale, {\n            day: 'numeric',\n            month: 'long',\n            year: 'numeric',\n          }).format(displayValue);\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: new Intl.DateTimeFormat(locale, { month: 'long' }).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 = new Intl.DateTimeFormat(locale, {\n    day: 'numeric',\n    month: 'numeric',\n    year: 'numeric',\n  })\n    .formatToParts(activeValue)\n    .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      new Intl.DateTimeFormat(locale, { hour: 'numeric' })\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  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      <button\n        {...buttonProps}\n        aria-controls={open ? popupId : undefined}\n        aria-expanded={open}\n        aria-haspopup=\"dialog\"\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={(element) => {\n          triggerRef.current = element;\n          if (typeof ref === 'function') ref(element);\n          else if (ref !== null) ref.current = element;\n        }}\n        type=\"button\"\n      >\n        {formattedValue}\n      </button>\n      <label className=\"chayns-date-time-picker__label\" htmlFor={triggerId}>\n        {label}\n      </label>\n      {open && !disabled ? (\n        <div\n          aria-label={label}\n          className=\"chayns-date-time-picker__popup\"\n          id={popupId}\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={\n                    part === 'date'\n                      ? wheelLabels.day\n                      : part === 'month'\n                        ? wheelLabels.month\n                        : wheelLabels.year\n                  }\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      ) : null}\n    </div>\n  );\n});\n\nexport default DateTimePicker;\n"],"mappings":"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"}

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

@@ -0,0 +1,26 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare const DATE_TIME_PICKER_MODES: readonly ["date", "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];
+export interface DateTimePickerWheelLabels {
+    day: string;
+    dayPeriod: string;
+    hour: string;
+    minute: string;
+    month: string;
+    year: string;
+}
+export interface DateTimePickerProps extends Omit<ComponentPropsWithRef<'button'>, 'aria-controls' | 'aria-expanded' | 'aria-haspopup' | 'aria-label' | 'aria-labelledby' | 'children' | 'onChange' | 'type' | 'value'> {
+    label: string;
+    locale: string;
+    minDate?: Date;
+    maxDate?: Date;
+    minuteStep?: DateTimePickerMinuteStep;
+    mode?: DateTimePickerMode;
+    onChange: (value: Date) => void;
+    placeholder: string;
+    value: Date | null;
+    wheelLabels: DateTimePickerWheelLabels;
+}
+//# sourceMappingURL=DateTimePicker.types.d.ts.map