@cube-dev/ui-kit 0.152.0 → 0.154.0

package/dist/components/fields/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.152.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Text } from "../../content/Text.js";
@@ -85,7 +85,7 @@ function Checkbox(props, ref) {
 		}),
 		unsafe__isDisabled: !!groupState
 	});
-	let { qa, isIndeterminate = false, isDisabled = false, insideForm, isRequired, children, label, isInvalid, isValid, labelProps, labelStyles, labelPosition, inputStyles, isHidden, form, ...otherProps } = props;
+	let { qa, isIndeterminate = false, isDisabled = false, insideForm, isRequired, children, label, isInvalid, isValid, labelProps, labelStyles, labelPosition, inputStyles, isHidden, form, onChange, ...otherProps } = props;
 	let styles = extractStyles(props, CONTAINER_STYLES);
 	labelStyles = useMemo(() => ({
 		...!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES,

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["useFocus","mergeProps","Text","CheckboxGroup"],"sources":["../../../../src/components/fields/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Element,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useContext, useMemo, useRef } from 'react';\nimport {\n  AriaCheckboxProps,\n  useCheckbox,\n  useCheckboxGroupItem,\n  useHover,\n} from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { Icon } from '../../../icons/index';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport {\n  getValidationMods,\n  INLINE_LABEL_STYLES,\n  LABEL_STYLES,\n  resolveValidationProps,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\n\nimport { CheckboxGroup } from './CheckboxGroup';\nimport { CheckboxGroupContext } from './context';\n\nimport type { FocusableRef } from '@react-types/shared';\n\nexport interface CubeCheckboxProps\n  extends BaseProps,\n    ContainerStyleProps,\n    AriaCheckboxProps,\n    FieldBaseProps {\n  inputStyles?: Styles;\n  isIndeterminate?: boolean;\n  value?: string;\n}\n\nconst CheckboxWrapperElement = tasty({\n  as: 'label',\n  qa: 'CheckboxWrapper',\n  styles: {\n    position: 'relative',\n    display: 'flex',\n    placeItems: 'center start',\n    placeContent: 'baseline',\n    gap: '1x',\n    flow: 'row',\n    preset: 'default',\n    cursor: '$pointer',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst CheckboxElement = tasty({\n  qa: 'Checkbox',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: '.5r',\n    fill: {\n      '': '#surface',\n      'checked | indeterminate': '#primary',\n      'invalid & !checked': '#surface',\n      'invalid & checked': '#danger',\n      'valid & !checked': '#surface',\n      'valid & checked': '#success',\n      disabled: '#dark.12',\n    },\n    // The check / minus icon is always rendered inside the box, so the\n    // default color must be transparent when the checkbox is neither\n    // checked nor indeterminate — otherwise the white stroke shows through\n    // the dark `#surface` fill in dark schemes (it used to be hidden\n    // accidentally by the legacy white-on-white `fill: '#white'`).\n    color: {\n      '': '#clear',\n      'checked | indeterminate': '#white',\n    },\n    border: {\n      '': '#dark.30',\n      invalid: '#danger',\n      valid: '#success',\n      'disabled | ((indeterminate | checked) & !invalid & !valid)': '#clear',\n    },\n    width: '(2x - 2bw)',\n    height: '(2x - 2bw)',\n    outline: {\n      '': '#primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 1,\n    transition: 'theme',\n  },\n});\n\nfunction Checkbox(\n  props: WithNullableSelected<CubeCheckboxProps>,\n  ref: FocusableRef,\n) {\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n\n  props = castNullableIsSelected(props);\n\n  let originalProps = props;\n\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value ?? false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n    unsafe__isDisabled: !!groupState,\n  });\n\n  let {\n    qa,\n    isIndeterminate = false,\n    isDisabled = false,\n    insideForm,\n    isRequired,\n    children,\n    label,\n    isInvalid,\n    isValid,\n    labelProps,\n    labelStyles,\n    labelPosition,\n    inputStyles,\n    isHidden,\n    form,\n    ...otherProps\n  } = props;\n\n  let styles: Styles = extractStyles(props, CONTAINER_STYLES);\n\n  labelStyles = useMemo(\n    () => ({\n      ...(!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),\n      ...labelStyles,\n    }),\n    [groupState, labelStyles],\n  );\n\n  let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  const toggleState = useToggleState(props);\n\n  let { inputProps } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...props,\n          // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n          // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).\n          value: props.value || '',\n          // Only pass isRequired and the validation state to react-aria if they came from\n          // the props for this individual checkbox, and not from the group via context.\n          isRequired: originalProps.isRequired,\n          isInvalid: resolveValidationProps(originalProps).isInvalid,\n        },\n        groupState,\n        inputRef,\n      )\n    : useCheckbox(\n        {\n          ...props,\n          ...(typeof label === 'string' && label.trim()\n            ? { 'aria-label': label }\n            : {}),\n        },\n        toggleState,\n        inputRef,\n      );\n\n  let markIcon = isIndeterminate ? (\n    <Icon size={12} stroke={3}>\n      <IconMinus />\n    </Icon>\n  ) : (\n    <Icon size={12} stroke={3}>\n      <IconCheck />\n    </Icon>\n  );\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      if (originalProps[key] != null) {\n        console.warn(\n          `CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`,\n        );\n      }\n    }\n    if (props.value == null) {\n      console.warn(\n        'CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.',\n      );\n    }\n  }\n\n  const mods = {\n    checked: inputProps.checked,\n    indeterminate: isIndeterminate,\n    ...getValidationMods({ isInvalid, isValid }),\n    disabled: isDisabled,\n    hovered: isHovered,\n    focused: isFocused,\n    'side-label': labelPosition === 'side',\n    'inside-form': insideForm,\n  };\n\n  const checkbox = (\n    <>\n      <HiddenInput\n        qa={qa || 'Checkbox'}\n        data-input-type=\"checkbox\"\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n      />\n      <CheckboxElement mods={mods} styles={inputStyles}>\n        {markIcon}\n      </CheckboxElement>\n    </>\n  );\n\n  const checkboxField = (\n    <CheckboxWrapperElement isHidden={isHidden} mods={mods}>\n      {checkbox}\n      {children && <Text nowrap>{children}</Text>}\n    </CheckboxWrapperElement>\n  );\n\n  if (!groupState) {\n    return wrapWithField(checkboxField, domRef, props);\n  }\n\n  return (\n    <CheckboxWrapperElement\n      styles={styles}\n      isHidden={isHidden}\n      {...hoverProps}\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n    >\n      {checkbox}\n      {label ?? children ? (\n        <Element\n          styles={labelStyles}\n          mods={{\n            ...getValidationMods({ isInvalid, isValid }),\n            disabled: isDisabled,\n          }}\n          {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n        >\n          {label ?? children}\n        </Element>\n      ) : null}\n    </CheckboxWrapperElement>\n  );\n}\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\n\n(_Checkbox as any).cubeInputType = 'Checkbox';\nlet __Checkbox = Object.assign(\n  _Checkbox as typeof _Checkbox & { Group: typeof CheckboxGroup },\n  { Group: CheckboxGroup },\n);\n\n__Checkbox.displayName = 'Checkbox';\n\nexport { __Checkbox as Checkbox };\nexport type { AriaCheckboxProps };\nexport { useCheckbox };\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["useFocus","mergeProps","Text","CheckboxGroup"],"sources":["../../../../src/components/fields/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Element,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useContext, useMemo, useRef } from 'react';\nimport {\n  AriaCheckboxProps,\n  useCheckbox,\n  useCheckboxGroupItem,\n  useHover,\n} from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { Icon } from '../../../icons/index';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport {\n  getValidationMods,\n  INLINE_LABEL_STYLES,\n  LABEL_STYLES,\n  resolveValidationProps,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\n\nimport { CheckboxGroup } from './CheckboxGroup';\nimport { CheckboxGroupContext } from './context';\n\nimport type { FocusableRef } from '@react-types/shared';\n\nexport interface CubeCheckboxProps\n  extends BaseProps,\n    ContainerStyleProps,\n    AriaCheckboxProps,\n    ToggleSelectionProps,\n    FieldBaseProps {\n  inputStyles?: Styles;\n  isIndeterminate?: boolean;\n  value?: string;\n}\n\nconst CheckboxWrapperElement = tasty({\n  as: 'label',\n  qa: 'CheckboxWrapper',\n  styles: {\n    position: 'relative',\n    display: 'flex',\n    placeItems: 'center start',\n    placeContent: 'baseline',\n    gap: '1x',\n    flow: 'row',\n    preset: 'default',\n    cursor: '$pointer',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst CheckboxElement = tasty({\n  qa: 'Checkbox',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: '.5r',\n    fill: {\n      '': '#surface',\n      'checked | indeterminate': '#primary',\n      'invalid & !checked': '#surface',\n      'invalid & checked': '#danger',\n      'valid & !checked': '#surface',\n      'valid & checked': '#success',\n      disabled: '#dark.12',\n    },\n    // The check / minus icon is always rendered inside the box, so the\n    // default color must be transparent when the checkbox is neither\n    // checked nor indeterminate — otherwise the white stroke shows through\n    // the dark `#surface` fill in dark schemes (it used to be hidden\n    // accidentally by the legacy white-on-white `fill: '#white'`).\n    color: {\n      '': '#clear',\n      'checked | indeterminate': '#white',\n    },\n    border: {\n      '': '#dark.30',\n      invalid: '#danger',\n      valid: '#success',\n      'disabled | ((indeterminate | checked) & !invalid & !valid)': '#clear',\n    },\n    width: '(2x - 2bw)',\n    height: '(2x - 2bw)',\n    outline: {\n      '': '#primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 1,\n    transition: 'theme',\n  },\n});\n\nfunction Checkbox(\n  props: WithNullableSelected<CubeCheckboxProps>,\n  ref: FocusableRef,\n) {\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n\n  props = castNullableIsSelected(props);\n\n  let originalProps = props;\n\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value ?? false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n    unsafe__isDisabled: !!groupState,\n  });\n\n  let {\n    qa,\n    isIndeterminate = false,\n    isDisabled = false,\n    insideForm,\n    isRequired,\n    children,\n    label,\n    isInvalid,\n    isValid,\n    labelProps,\n    labelStyles,\n    labelPosition,\n    inputStyles,\n    isHidden,\n    form,\n    // Pulled out so it stays off the `<label>` spread below. The Aria hooks read\n    // it from `props` directly; `filterBaseProps` already dropped it at runtime,\n    // but it typed as a DOM `FormEventHandler` there, which it is not.\n    onChange,\n    ...otherProps\n  } = props;\n\n  let styles: Styles = extractStyles(props, CONTAINER_STYLES);\n\n  labelStyles = useMemo(\n    () => ({\n      ...(!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),\n      ...labelStyles,\n    }),\n    [groupState, labelStyles],\n  );\n\n  let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  const toggleState = useToggleState(props);\n\n  let { inputProps } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...props,\n          // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n          // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).\n          value: props.value || '',\n          // Only pass isRequired and the validation state to react-aria if they came from\n          // the props for this individual checkbox, and not from the group via context.\n          isRequired: originalProps.isRequired,\n          isInvalid: resolveValidationProps(originalProps).isInvalid,\n        },\n        groupState,\n        inputRef,\n      )\n    : useCheckbox(\n        {\n          ...props,\n          ...(typeof label === 'string' && label.trim()\n            ? { 'aria-label': label }\n            : {}),\n        },\n        toggleState,\n        inputRef,\n      );\n\n  let markIcon = isIndeterminate ? (\n    <Icon size={12} stroke={3}>\n      <IconMinus />\n    </Icon>\n  ) : (\n    <Icon size={12} stroke={3}>\n      <IconCheck />\n    </Icon>\n  );\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      if (originalProps[key] != null) {\n        console.warn(\n          `CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`,\n        );\n      }\n    }\n    if (props.value == null) {\n      console.warn(\n        'CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.',\n      );\n    }\n  }\n\n  const mods = {\n    checked: inputProps.checked,\n    indeterminate: isIndeterminate,\n    ...getValidationMods({ isInvalid, isValid }),\n    disabled: isDisabled,\n    hovered: isHovered,\n    focused: isFocused,\n    'side-label': labelPosition === 'side',\n    'inside-form': insideForm,\n  };\n\n  const checkbox = (\n    <>\n      <HiddenInput\n        qa={qa || 'Checkbox'}\n        data-input-type=\"checkbox\"\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n      />\n      <CheckboxElement mods={mods} styles={inputStyles}>\n        {markIcon}\n      </CheckboxElement>\n    </>\n  );\n\n  const checkboxField = (\n    <CheckboxWrapperElement isHidden={isHidden} mods={mods}>\n      {checkbox}\n      {children && <Text nowrap>{children}</Text>}\n    </CheckboxWrapperElement>\n  );\n\n  if (!groupState) {\n    return wrapWithField(checkboxField, domRef, props);\n  }\n\n  return (\n    <CheckboxWrapperElement\n      styles={styles}\n      isHidden={isHidden}\n      {...hoverProps}\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n    >\n      {checkbox}\n      {label ?? children ? (\n        <Element\n          styles={labelStyles}\n          mods={{\n            ...getValidationMods({ isInvalid, isValid }),\n            disabled: isDisabled,\n          }}\n          {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n        >\n          {label ?? children}\n        </Element>\n      ) : null}\n    </CheckboxWrapperElement>\n  );\n}\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\n\n(_Checkbox as any).cubeInputType = 'Checkbox';\nlet __Checkbox = Object.assign(\n  _Checkbox as typeof _Checkbox & { Group: typeof CheckboxGroup },\n  { Group: CheckboxGroup },\n);\n\n__Checkbox.displayName = 'Checkbox';\n\nexport { __Checkbox as Checkbox };\nexport type { AriaCheckboxProps };\nexport { useCheckbox };\n"],"mappings":"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"}

package/dist/components/fields/Checkbox/CheckboxGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.152.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { FormContext } from "../../form/Form/Form.js";

package/dist/components/fields/Checkbox/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.152.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
 import { createContext } from "react";
 
 //#region src/components/fields/Checkbox/context.ts

package/dist/components/fields/ComboBox/ComboBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.152.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/CommandTextArea/CommandTextArea.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.152.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/CommandTextArea/caretPosition.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.152.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
 //#region src/components/fields/CommandTextArea/caretPosition.ts
 const MIRROR_STYLES = [
 	"boxSizing",

package/dist/components/fields/CommandTextArea/useCaretAnchor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.152.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
 import { getCaretRect } from "./caretPosition.js";
 import { useEffect, useLayoutEffect, useRef } from "react";
 

package/dist/components/fields/DatePicker/DateInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.152.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/DatePicker/DateInputBase.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.152.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";

package/dist/components/fields/DatePicker/DatePicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.152.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/DatePicker/DatePickerButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.152.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CalendarIcon } from "../../../icons/CalendarIcon.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/fields/DatePicker/DatePickerElement.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.152.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";
 

package/dist/components/fields/DatePicker/DatePickerInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.152.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { formatSegments } from "./utils.js";

package/dist/components/fields/DatePicker/DatePickerSegment.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.152.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/DateRangePicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.152.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { Space } from "../../layout/Space.js";

package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.152.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/DatePicker/MonthPicker.d.ts

@@ -0,0 +1,12 @@
+
+import { CubePeriodPickerProps } from "./PeriodPicker.js";
+import * as react from "react";
+import { DateValue } from "react-aria";
+import * as _react_types_shared0 from "@react-types/shared";
+
+//#region src/components/fields/DatePicker/MonthPicker.d.ts
+interface CubeMonthPickerProps<T extends DateValue = DateValue> extends Omit<CubePeriodPickerProps<T>, 'picker'> {}
+declare const _MonthPicker: react.ForwardRefExoticComponent<Omit<CubeMonthPickerProps<DateValue>, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
+//#endregion
+export { CubeMonthPickerProps, _MonthPicker };
+//# sourceMappingURL=MonthPicker.d.ts.map

package/dist/components/fields/DatePicker/MonthPicker.js

@@ -0,0 +1,19 @@
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
+import { _PeriodPicker } from "./PeriodPicker.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/fields/DatePicker/MonthPicker.tsx
+function MonthPicker(props, ref) {
+	return /* @__PURE__ */ jsx(_PeriodPicker, {
+		ref,
+		picker: "month",
+		...props
+	});
+}
+const _MonthPicker = forwardRef(MonthPicker);
+_MonthPicker.displayName = "MonthPicker";
+
+//#endregion
+export { _MonthPicker };
+//# sourceMappingURL=MonthPicker.js.map

package/dist/components/fields/DatePicker/MonthPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthPicker.js","names":["PeriodPicker"],"sources":["../../../../src/components/fields/DatePicker/MonthPicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef } from 'react';\nimport { DateValue } from 'react-aria';\n\nimport { CubePeriodPickerProps, PeriodPicker } from './PeriodPicker';\n\nexport interface CubeMonthPickerProps<T extends DateValue = DateValue>\n  extends Omit<CubePeriodPickerProps<T>, 'picker'> {}\n\nfunction MonthPicker<T extends DateValue>(\n  props: CubeMonthPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  return <PeriodPicker ref={ref} picker=\"month\" {...props} />;\n}\n\nconst _MonthPicker = forwardRef(MonthPicker);\n\n_MonthPicker.displayName = 'MonthPicker';\n\nexport { _MonthPicker as MonthPicker };\n"],"mappings":";;;;;;AASA,SAAS,YACP,OACA,KACA;AACA,QAAO,oBAACA;EAAkB;EAAK,QAAO;EAAQ,GAAI;GAAS;;AAG7D,MAAM,eAAe,WAAW,YAAY;AAE5C,aAAa,cAAc"}

package/dist/components/fields/DatePicker/PeriodPicker.d.ts

@@ -0,0 +1,28 @@
+
+import { FieldBaseProps } from "../../../shared/form.js";
+import "../../../shared/index.js";
+import { PickerType } from "./period.js";
+import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
+import * as react from "react";
+import { AriaDatePickerProps, DateValue } from "react-aria";
+import * as _react_types_shared0 from "@react-types/shared";
+
+//#region src/components/fields/DatePicker/PeriodPicker.d.ts
+interface CubePeriodPickerProps<T extends DateValue = DateValue> extends Omit<AriaDatePickerProps<T>, 'errorMessage' | 'granularity'>, BaseProps, ContainerStyleProps, FieldBaseProps {
+  /** Which period the picker selects. Set by the concrete picker components. */
+  picker?: PickerType;
+  wrapperStyles?: Styles;
+  inputStyles?: Styles;
+  triggerStyles?: Styles;
+  styles?: Styles;
+  size?: 'small' | 'medium' | 'large' | (string & {});
+  shouldFlip?: boolean;
+  /** Placeholder shown when no value is selected. */
+  placeholder?: string;
+  /** Override how the selected value is rendered as text. */
+  formatValue?: (date: DateValue, picker: PickerType) => string;
+}
+declare const _PeriodPicker: react.ForwardRefExoticComponent<Omit<CubePeriodPickerProps<DateValue>, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
+//#endregion
+export { CubePeriodPickerProps, _PeriodPicker };
+//# sourceMappingURL=PeriodPicker.d.ts.map

package/dist/components/fields/DatePicker/PeriodPicker.js

@@ -0,0 +1,131 @@
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
+import { wrapWithField } from "../../form/wrapper.js";
+import { Dialog } from "../../overlays/Dialog/Dialog.js";
+import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
+import { _DateInputBase } from "./DateInputBase.js";
+import { useFocusManagerRef } from "./utils.js";
+import { formatPeriod, snapToPeriod } from "./period.js";
+import { _Calendar } from "../../other/Calendar/Calendar.js";
+import { DatePickerButton } from "./DatePickerButton.js";
+import { PeriodCalendar } from "../../other/Calendar/PeriodCalendar.js";
+import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
+import { forwardRef, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDatePicker, useFocusRing, useLocale } from "react-aria";
+import { useDatePickerState } from "react-stately";
+
+//#region src/components/fields/DatePicker/PeriodPicker.tsx
+const DEFAULT_PLACEHOLDER = {
+	week: "Select week",
+	month: "Select month",
+	quarter: "Select quarter",
+	year: "Select year"
+};
+const PeriodValueElement = tasty({ styles: {
+	preset: "t3",
+	width: "max 100%",
+	whiteSpace: "nowrap",
+	color: {
+		"": "#dark",
+		placeholder: "#dark.30"
+	}
+} });
+function PeriodPicker(props, ref) {
+	props = useFieldProps(props, { defaultValidationTrigger: "onBlur" });
+	let styles = extractStyles(props, CONTAINER_STYLES);
+	let { qa, size, picker = "month", placeholder, formatValue, isDisabled, isInvalid, isValid, autoFocus } = props;
+	let { locale } = useLocale();
+	let targetRef = useRef(null);
+	let state = useDatePickerState({
+		...props,
+		granularity: "day",
+		shouldCloseOnSelect: true
+	});
+	let { isOpen, setOpen } = state;
+	let domRef = useFocusManagerRef(ref);
+	let { isFocused: isFocusedButton, focusProps: focusPropsButton } = useFocusRing({
+		within: false,
+		isTextInput: false,
+		autoFocus
+	});
+	let { groupProps, labelProps, buttonProps, dialogProps, calendarProps } = useDatePicker({
+		...props,
+		granularity: "day"
+	}, state, targetRef);
+	let handleSelect = (date) => {
+		state.setValue(snapToPeriod(date, picker, locale));
+		setOpen(false);
+	};
+	let displayText = state.value ? (formatValue ?? formatPeriod)(state.value, picker, locale) : placeholder ?? DEFAULT_PLACEHOLDER[picker];
+	const panel = picker === "week" ? /* @__PURE__ */ jsx(_Calendar, {
+		...calendarProps,
+		autoFocus: true,
+		pickerMode: "week",
+		isDisabled,
+		onChange: handleSelect
+	}) : /* @__PURE__ */ jsx(PeriodCalendar, {
+		autoFocus: true,
+		picker,
+		value: calendarProps.value,
+		minValue: calendarProps.minValue,
+		maxValue: calendarProps.maxValue,
+		isDateUnavailable: calendarProps.isDateUnavailable,
+		isDisabled,
+		onChange: handleSelect
+	});
+	return wrapWithField(/* @__PURE__ */ jsx(_DateInputBase, {
+		ref: targetRef,
+		qa: qa || "PeriodPicker",
+		inputType: "datepicker",
+		styles: {
+			display: "grid",
+			...styles,
+			...props.wrapperStyles
+		},
+		inputStyles: props.inputStyles,
+		disableFocusRing: isFocusedButton,
+		isDisabled,
+		isInvalid,
+		isValid,
+		size,
+		fieldProps: groupProps,
+		suffix: /* @__PURE__ */ jsxs(DialogTrigger, {
+			hideArrow: true,
+			type: "popover",
+			mobileType: "tray",
+			placement: "bottom right",
+			targetRef,
+			isOpen,
+			shouldFlip: props.shouldFlip,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(DatePickerButton, {
+				size,
+				...mergeProps$1(buttonProps, focusPropsButton),
+				isDisabled,
+				styles: props.triggerStyles
+			}), /* @__PURE__ */ jsx(Dialog, {
+				...dialogProps,
+				width: "max-content",
+				children: panel
+			})]
+		}),
+		children: /* @__PURE__ */ jsx(PeriodValueElement, {
+			...labelProps,
+			mods: { placeholder: !state.value },
+			onClick: () => !isDisabled && setOpen(true),
+			children: displayText
+		})
+	}), domRef, {
+		...props,
+		labelProps: mergeProps$1(props.labelProps, labelProps)
+	});
+}
+const _PeriodPicker = forwardRef(PeriodPicker);
+_PeriodPicker.displayName = "PeriodPicker";
+
+//#endregion
+export { _PeriodPicker };
+//# sourceMappingURL=PeriodPicker.js.map

package/dist/components/fields/DatePicker/PeriodPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeriodPicker.js","names":["Calendar","DateInputBase","mergeProps"],"sources":["../../../../src/components/fields/DatePicker/PeriodPicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  useDatePicker,\n  useFocusRing,\n  useLocale,\n} from 'react-aria';\nimport { useDatePickerState } from 'react-stately';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { PeriodCalendar } from '../../other/Calendar/PeriodCalendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { formatPeriod, PickerType, snapToPeriod } from './period';\nimport { useFocusManagerRef } from './utils';\n\nconst DEFAULT_PLACEHOLDER: Record<PickerType, string> = {\n  week: 'Select week',\n  month: 'Select month',\n  quarter: 'Select quarter',\n  year: 'Select year',\n};\n\nconst PeriodValueElement = tasty({\n  styles: {\n    preset: 't3',\n    width: 'max 100%',\n    whiteSpace: 'nowrap',\n    color: {\n      '': '#dark',\n      placeholder: '#dark.30',\n    },\n  },\n});\n\nexport interface CubePeriodPickerProps<T extends DateValue = DateValue>\n  extends Omit<AriaDatePickerProps<T>, 'errorMessage' | 'granularity'>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps {\n  /** Which period the picker selects. Set by the concrete picker components. */\n  picker?: PickerType;\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  triggerStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  shouldFlip?: boolean;\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string;\n  /** Override how the selected value is rendered as text. */\n  formatValue?: (date: DateValue, picker: PickerType) => string;\n}\n\nfunction PeriodPicker<T extends DateValue>(\n  props: CubePeriodPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    size,\n    picker = 'month',\n    placeholder,\n    formatValue,\n    isDisabled,\n    isInvalid,\n    isValid,\n    autoFocus,\n  } = props;\n\n  let { locale } = useLocale();\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDatePickerState({\n    ...props,\n    granularity: 'day',\n    shouldCloseOnSelect: true,\n  });\n  let { isOpen, setOpen } = state;\n\n  let domRef = useFocusManagerRef(ref);\n\n  let { isFocused: isFocusedButton, focusProps: focusPropsButton } =\n    useFocusRing({\n      within: false,\n      isTextInput: false,\n      autoFocus,\n    });\n\n  let { groupProps, labelProps, buttonProps, dialogProps, calendarProps } =\n    useDatePicker({ ...props, granularity: 'day' }, state, targetRef);\n\n  let handleSelect = (date: DateValue) => {\n    state.setValue(snapToPeriod(date, picker, locale));\n    setOpen(false);\n  };\n\n  let displayText = state.value\n    ? (formatValue ?? formatPeriod)(state.value, picker, locale)\n    : placeholder ?? DEFAULT_PLACEHOLDER[picker];\n\n  const panel =\n    picker === 'week' ? (\n      <Calendar\n        {...calendarProps}\n        autoFocus\n        pickerMode=\"week\"\n        isDisabled={isDisabled}\n        onChange={handleSelect}\n      />\n    ) : (\n      <PeriodCalendar\n        autoFocus\n        picker={picker}\n        value={calendarProps.value}\n        minValue={calendarProps.minValue}\n        maxValue={calendarProps.maxValue}\n        isDateUnavailable={calendarProps.isDateUnavailable}\n        isDisabled={isDisabled}\n        onChange={handleSelect}\n      />\n    );\n\n  const component = (\n    <DateInputBase\n      ref={targetRef}\n      qa={qa || 'PeriodPicker'}\n      inputType=\"datepicker\"\n      styles={{ display: 'grid', ...styles, ...props.wrapperStyles }}\n      inputStyles={props.inputStyles}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      size={size}\n      fieldProps={groupProps}\n      suffix={\n        <DialogTrigger\n          hideArrow\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement=\"bottom right\"\n          targetRef={targetRef}\n          isOpen={isOpen}\n          shouldFlip={props.shouldFlip}\n          onOpenChange={setOpen}\n        >\n          <DatePickerButton\n            size={size}\n            {...mergeProps(buttonProps, focusPropsButton)}\n            isDisabled={isDisabled}\n            styles={props.triggerStyles}\n          />\n          <Dialog {...dialogProps} width=\"max-content\">\n            {panel}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <PeriodValueElement\n        {...labelProps}\n        mods={{ placeholder: !state.value }}\n        onClick={() => !isDisabled && setOpen(true)}\n      >\n        {displayText}\n      </PeriodValueElement>\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _PeriodPicker = forwardRef(PeriodPicker);\n\n_PeriodPicker.displayName = 'PeriodPicker';\n\nexport { _PeriodPicker as PeriodPicker };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,sBAAkD;CACtD,MAAM;CACN,OAAO;CACP,SAAS;CACT,MAAM;CACP;AAED,MAAM,qBAAqB,MAAM,EAC/B,QAAQ;CACN,QAAQ;CACR,OAAO;CACP,YAAY;CACZ,OAAO;EACL,IAAI;EACJ,aAAa;EACd;CACF,EACF,CAAC;AAqBF,SAAS,aACP,OACA,KACA;AACA,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;CAEF,IAAI,SAAS,cAAc,OAAO,iBAAiB;CAEnD,IAAI,EACF,IACA,MACA,SAAS,SACT,aACA,aACA,YACA,WACA,SACA,cACE;CAEJ,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,YAAY,OAAuB,KAAK;CAC5C,IAAI,QAAQ,mBAAmB;EAC7B,GAAG;EACH,aAAa;EACb,qBAAqB;EACtB,CAAC;CACF,IAAI,EAAE,QAAQ,YAAY;CAE1B,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,EAAE,WAAW,iBAAiB,YAAY,qBAC5C,aAAa;EACX,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEJ,IAAI,EAAE,YAAY,YAAY,aAAa,aAAa,kBACtD,cAAc;EAAE,GAAG;EAAO,aAAa;EAAO,EAAE,OAAO,UAAU;CAEnE,IAAI,gBAAgB,SAAoB;AACtC,QAAM,SAAS,aAAa,MAAM,QAAQ,OAAO,CAAC;AAClD,UAAQ,MAAM;;CAGhB,IAAI,cAAc,MAAM,SACnB,eAAe,cAAc,MAAM,OAAO,QAAQ,OAAO,GAC1D,eAAe,oBAAoB;CAEvC,MAAM,QACJ,WAAW,SACT,oBAACA;EACC,GAAI;EACJ;EACA,YAAW;EACC;EACZ,UAAU;GACV,GAEF,oBAAC;EACC;EACQ;EACR,OAAO,cAAc;EACrB,UAAU,cAAc;EACxB,UAAU,cAAc;EACxB,mBAAmB,cAAc;EACrB;EACZ,UAAU;GACV;AAiDN,QAAO,cA7CL,oBAACC;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACV,QAAQ;GAAE,SAAS;GAAQ,GAAG;GAAQ,GAAG,MAAM;GAAe;EAC9D,aAAa,MAAM;EACnB,kBAAkB;EACN;EACD;EACF;EACH;EACN,YAAY;EACZ,QACE,qBAAC;GACC;GACA,MAAK;GACL,YAAW;GACX,WAAU;GACC;GACH;GACR,YAAY,MAAM;GAClB,cAAc;cAEd,oBAAC;IACO;IACN,GAAIC,aAAW,aAAa,iBAAiB;IACjC;IACZ,QAAQ,MAAM;KACd,EACF,oBAAC;IAAO,GAAI;IAAa,OAAM;cAC5B;KACM;IACK;YAGlB,oBAAC;GACC,GAAI;GACJ,MAAM,EAAE,aAAa,CAAC,MAAM,OAAO;GACnC,eAAe,CAAC,cAAc,QAAQ,KAAK;aAE1C;IACkB;GACP,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYA,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;AAGJ,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}

package/dist/components/fields/DatePicker/QuarterPicker.d.ts

@@ -0,0 +1,12 @@
+
+import { CubePeriodPickerProps } from "./PeriodPicker.js";
+import * as react from "react";
+import { DateValue } from "react-aria";
+import * as _react_types_shared0 from "@react-types/shared";
+
+//#region src/components/fields/DatePicker/QuarterPicker.d.ts
+interface CubeQuarterPickerProps<T extends DateValue = DateValue> extends Omit<CubePeriodPickerProps<T>, 'picker'> {}
+declare const _QuarterPicker: react.ForwardRefExoticComponent<Omit<CubeQuarterPickerProps<DateValue>, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
+//#endregion
+export { CubeQuarterPickerProps, _QuarterPicker };
+//# sourceMappingURL=QuarterPicker.d.ts.map

package/dist/components/fields/DatePicker/QuarterPicker.js

@@ -0,0 +1,19 @@
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
+import { _PeriodPicker } from "./PeriodPicker.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/fields/DatePicker/QuarterPicker.tsx
+function QuarterPicker(props, ref) {
+	return /* @__PURE__ */ jsx(_PeriodPicker, {
+		ref,
+		picker: "quarter",
+		...props
+	});
+}
+const _QuarterPicker = forwardRef(QuarterPicker);
+_QuarterPicker.displayName = "QuarterPicker";
+
+//#endregion
+export { _QuarterPicker };
+//# sourceMappingURL=QuarterPicker.js.map

package/dist/components/fields/DatePicker/QuarterPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuarterPicker.js","names":["PeriodPicker"],"sources":["../../../../src/components/fields/DatePicker/QuarterPicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef } from 'react';\nimport { DateValue } from 'react-aria';\n\nimport { CubePeriodPickerProps, PeriodPicker } from './PeriodPicker';\n\nexport interface CubeQuarterPickerProps<T extends DateValue = DateValue>\n  extends Omit<CubePeriodPickerProps<T>, 'picker'> {}\n\nfunction QuarterPicker<T extends DateValue>(\n  props: CubeQuarterPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  return <PeriodPicker ref={ref} picker=\"quarter\" {...props} />;\n}\n\nconst _QuarterPicker = forwardRef(QuarterPicker);\n\n_QuarterPicker.displayName = 'QuarterPicker';\n\nexport { _QuarterPicker as QuarterPicker };\n"],"mappings":";;;;;;AASA,SAAS,cACP,OACA,KACA;AACA,QAAO,oBAACA;EAAkB;EAAK,QAAO;EAAU,GAAI;GAAS;;AAG/D,MAAM,iBAAiB,WAAW,cAAc;AAEhD,eAAe,cAAc"}

package/dist/components/fields/DatePicker/TimeInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.152.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/DatePicker/WeekPicker.d.ts

@@ -0,0 +1,12 @@
+
+import { CubePeriodPickerProps } from "./PeriodPicker.js";
+import * as react from "react";
+import { DateValue } from "react-aria";
+import * as _react_types_shared0 from "@react-types/shared";
+
+//#region src/components/fields/DatePicker/WeekPicker.d.ts
+interface CubeWeekPickerProps<T extends DateValue = DateValue> extends Omit<CubePeriodPickerProps<T>, 'picker'> {}
+declare const _WeekPicker: react.ForwardRefExoticComponent<Omit<CubeWeekPickerProps<DateValue>, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
+//#endregion
+export { CubeWeekPickerProps, _WeekPicker };
+//# sourceMappingURL=WeekPicker.d.ts.map

package/dist/components/fields/DatePicker/WeekPicker.js

@@ -0,0 +1,19 @@
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
+import { _PeriodPicker } from "./PeriodPicker.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/fields/DatePicker/WeekPicker.tsx
+function WeekPicker(props, ref) {
+	return /* @__PURE__ */ jsx(_PeriodPicker, {
+		ref,
+		picker: "week",
+		...props
+	});
+}
+const _WeekPicker = forwardRef(WeekPicker);
+_WeekPicker.displayName = "WeekPicker";
+
+//#endregion
+export { _WeekPicker };
+//# sourceMappingURL=WeekPicker.js.map

package/dist/components/fields/DatePicker/WeekPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WeekPicker.js","names":["PeriodPicker"],"sources":["../../../../src/components/fields/DatePicker/WeekPicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef } from 'react';\nimport { DateValue } from 'react-aria';\n\nimport { CubePeriodPickerProps, PeriodPicker } from './PeriodPicker';\n\nexport interface CubeWeekPickerProps<T extends DateValue = DateValue>\n  extends Omit<CubePeriodPickerProps<T>, 'picker'> {}\n\nfunction WeekPicker<T extends DateValue>(\n  props: CubeWeekPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  return <PeriodPicker ref={ref} picker=\"week\" {...props} />;\n}\n\nconst _WeekPicker = forwardRef(WeekPicker);\n\n_WeekPicker.displayName = 'WeekPicker';\n\nexport { _WeekPicker as WeekPicker };\n"],"mappings":";;;;;;AASA,SAAS,WACP,OACA,KACA;AACA,QAAO,oBAACA;EAAkB;EAAK,QAAO;EAAO,GAAI;GAAS;;AAG5D,MAAM,cAAc,WAAW,WAAW;AAE1C,YAAY,cAAc"}

package/dist/components/fields/DatePicker/YearPicker.d.ts

@@ -0,0 +1,12 @@
+
+import { CubePeriodPickerProps } from "./PeriodPicker.js";
+import * as react from "react";
+import { DateValue } from "react-aria";
+import * as _react_types_shared0 from "@react-types/shared";
+
+//#region src/components/fields/DatePicker/YearPicker.d.ts
+interface CubeYearPickerProps<T extends DateValue = DateValue> extends Omit<CubePeriodPickerProps<T>, 'picker'> {}
+declare const _YearPicker: react.ForwardRefExoticComponent<Omit<CubeYearPickerProps<DateValue>, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
+//#endregion
+export { CubeYearPickerProps, _YearPicker };
+//# sourceMappingURL=YearPicker.d.ts.map

package/dist/components/fields/DatePicker/YearPicker.js

@@ -0,0 +1,19 @@
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
+import { _PeriodPicker } from "./PeriodPicker.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/fields/DatePicker/YearPicker.tsx
+function YearPicker(props, ref) {
+	return /* @__PURE__ */ jsx(_PeriodPicker, {
+		ref,
+		picker: "year",
+		...props
+	});
+}
+const _YearPicker = forwardRef(YearPicker);
+_YearPicker.displayName = "YearPicker";
+
+//#endregion
+export { _YearPicker };
+//# sourceMappingURL=YearPicker.js.map

package/dist/components/fields/DatePicker/YearPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"YearPicker.js","names":["PeriodPicker"],"sources":["../../../../src/components/fields/DatePicker/YearPicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef } from 'react';\nimport { DateValue } from 'react-aria';\n\nimport { CubePeriodPickerProps, PeriodPicker } from './PeriodPicker';\n\nexport interface CubeYearPickerProps<T extends DateValue = DateValue>\n  extends Omit<CubePeriodPickerProps<T>, 'picker'> {}\n\nfunction YearPicker<T extends DateValue>(\n  props: CubeYearPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  return <PeriodPicker ref={ref} picker=\"year\" {...props} />;\n}\n\nconst _YearPicker = forwardRef(YearPicker);\n\n_YearPicker.displayName = 'YearPicker';\n\nexport { _YearPicker as YearPicker };\n"],"mappings":";;;;;;AASA,SAAS,WACP,OACA,KACA;AACA,QAAO,oBAACA;EAAkB;EAAK,QAAO;EAAO,GAAI;GAAS;;AAG5D,MAAM,cAAc,WAAW,WAAW;AAE1C,YAAY,cAAc"}

package/dist/components/fields/DatePicker/index.d.ts

@@ -5,4 +5,10 @@ import { CubeDateInputProps, _DateInput } from "./DateInput.js";
 import { CubeDatePickerProps, _DatePicker } from "./DatePicker.js";
 import { CubeDateRangePickerProps, _DateRangePicker } from "./DateRangePicker.js";
 import { parseAbsoluteDate } from "./parseDate.js";
-import { CubeDateRangeSeparatedPickerProps, _DateRangeSeparatedPicker } from "./DateRangeSeparatedPicker.js";
+import { CubeDateRangeSeparatedPickerProps, _DateRangeSeparatedPicker } from "./DateRangeSeparatedPicker.js";
+import { PickerType, formatPeriod, getQuarter, getWeekNumber, snapToPeriod } from "./period.js";
+import { CubePeriodPickerProps, _PeriodPicker } from "./PeriodPicker.js";
+import { CubeMonthPickerProps, _MonthPicker } from "./MonthPicker.js";
+import { CubeQuarterPickerProps, _QuarterPicker } from "./QuarterPicker.js";
+import { CubeYearPickerProps, _YearPicker } from "./YearPicker.js";
+import { CubeWeekPickerProps, _WeekPicker } from "./WeekPicker.js";

package/dist/components/fields/DatePicker/parseDate.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.152.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
 import { parseAbsolute } from "@internationalized/date";
 
 //#region src/components/fields/DatePicker/parseDate.ts

package/dist/components/fields/DatePicker/period.d.ts

@@ -0,0 +1,35 @@
+
+import { DateValue } from "react-aria";
+import { CalendarDate } from "@internationalized/date";
+
+//#region src/components/fields/DatePicker/period.d.ts
+/**
+ * The period granularity a picker operates on. Unlike React Aria's `granularity`
+ * (which controls the smallest *time* unit shown in a date field), this controls
+ * which calendar panel is shown and which period a selected value is snapped to.
+ */
+type PickerType = 'week' | 'month' | 'quarter' | 'year';
+/** The 1-based quarter (1–4) that a given month (1–12) belongs to. */
+declare function getQuarter(month: number): number;
+/**
+ * Snap a date to the start of the period it belongs to:
+ * - `week`   → the first day of its week (locale-aware)
+ * - `month`  → the 1st of its month
+ * - `quarter`→ the 1st of the first month of its quarter
+ * - `year`   → January 1st
+ */
+declare function snapToPeriod(date: DateValue, picker: PickerType, locale: string): CalendarDate;
+/**
+ * The locale-aware week-of-year number for a date, counted from the first week
+ * of that date's calendar year (matches how the value's year is displayed).
+ */
+declare function getWeekNumber(date: DateValue, locale: string): number;
+/**
+ * Default formatting of a period value into a compact label, e.g.
+ * `2026-08` (month), `2026-Q3` (quarter), `2026` (year), `2026-W33` (week).
+ * Consumers can override this via the picker's `formatValue` prop.
+ */
+declare function formatPeriod(date: DateValue, picker: PickerType, locale: string): string;
+//#endregion
+export { PickerType, formatPeriod, getQuarter, getWeekNumber, snapToPeriod };
+//# sourceMappingURL=period.d.ts.map