@cube-dev/ui-kit 0.118.0 → 0.119.0

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerInput.js","names":["mergeProps"],"sources":["../../../../src/components/fields/DatePicker/DatePickerInput.tsx"],"sourcesContent":["import { createCalendar } from '@internationalized/date';\nimport { useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  useDateField,\n  useFocusWithin,\n  useLocale,\n} from 'react-aria';\nimport { DateSegment, useDateFieldState } from 'react-stately';\n\nimport { tasty } from '../../../tasty';\nimport { mergeProps } from '../../../utils/react';\n\nimport { DatePickerSegment } from './DatePickerSegment';\nimport { DateFieldBase, Granularity } from './types';\nimport { formatSegments } from './utils';\n\nconst DateInputElement = tasty({\n  role: 'presentation',\n  styles: {\n    display: 'flex',\n    flow: 'row',\n    placeItems: 'center start',\n  },\n});\n\ninterface CubeDatePickerInputProps<T extends DateValue>\n  extends Omit<AriaDatePickerProps<T>, 'errorMessage'>,\n    DateFieldBase<T> {\n  hideValidationIcon?: boolean;\n  maxGranularity?: Granularity;\n  useLocale?: boolean;\n  onFocus?: () => void;\n  onBlur?: () => void;\n}\n\nexport function DatePickerInput<T extends DateValue>(\n  props: CubeDatePickerInputProps<T>,\n) {\n  let { isDisabled, isReadOnly, isRequired, useLocale: useLocaleProp } = props;\n  let ref = useRef(null);\n  let { locale } = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    locale: useLocaleProp ? locale : 'en-US',\n    createCalendar,\n  });\n\n  if (useLocaleProp == null) {\n    state.segments = formatSegments(state.segments);\n  }\n\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: (isFocused) => {\n      if (isFocused) {\n        props.onFocus?.();\n      } else {\n        props.onBlur?.();\n      }\n    },\n  });\n\n  let { fieldProps } = useDateField(props, state, ref);\n\n  return (\n    <DateInputElement ref={ref} {...mergeProps(fieldProps, focusWithinProps)}>\n      {state.segments.map((segment: DateSegment, i: number) => (\n        <DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n        />\n      ))}\n    </DateInputElement>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAkBA,MAAM,mBAAmB,MAAM;CAC7B,MAAM;CACN,QAAQ;EACN,SAAS;EACT,MAAM;EACN,YAAY;EACb;CACF,CAAC;AAYF,SAAgB,gBACd,OACA;CACA,IAAI,EAAE,YAAY,YAAY,YAAY,WAAW,kBAAkB;CACvE,IAAI,MAAM,OAAO,KAAK;CACtB,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,QAAQ,kBAAkB;EAC5B,GAAG;EACH,QAAQ,gBAAgB,SAAS;EACjC;EACD,CAAC;AAEF,KAAI,iBAAiB,KACnB,OAAM,WAAW,eAAe,MAAM,SAAS;CAGjD,MAAM,EAAE,qBAAqB,eAAe,EAC1C,sBAAsB,cAAc;AAClC,MAAI,UACF,OAAM,WAAW;MAEjB,OAAM,UAAU;IAGrB,CAAC;CAEF,IAAI,EAAE,eAAe,aAAa,OAAO,OAAO,IAAI;AAEpD,QACE,oBAAC;EAAsB;EAAK,GAAIA,aAAW,YAAY,iBAAiB;YACrE,MAAM,SAAS,KAAK,SAAsB,MACzC,oBAAC;GAEU;GACF;GACK;GACA;GACA;KALP,EAML,CACF;GACe"}
+{"version":3,"file":"DatePickerInput.js","names":["mergeProps"],"sources":["../../../../src/components/fields/DatePicker/DatePickerInput.tsx"],"sourcesContent":["import { createCalendar } from '@internationalized/date';\nimport { tasty } from '@tenphi/tasty';\nimport { useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  useDateField,\n  useFocusWithin,\n  useLocale,\n} from 'react-aria';\nimport { DateSegment, useDateFieldState } from 'react-stately';\n\nimport { mergeProps } from '../../../utils/react';\n\nimport { DatePickerSegment } from './DatePickerSegment';\nimport { DateFieldBase, Granularity } from './types';\nimport { formatSegments } from './utils';\n\nconst DateInputElement = tasty({\n  role: 'presentation',\n  styles: {\n    display: 'flex',\n    flow: 'row',\n    placeItems: 'center start',\n  },\n});\n\ninterface CubeDatePickerInputProps<T extends DateValue>\n  extends Omit<AriaDatePickerProps<T>, 'errorMessage'>,\n    DateFieldBase<T> {\n  hideValidationIcon?: boolean;\n  maxGranularity?: Granularity;\n  useLocale?: boolean;\n  onFocus?: () => void;\n  onBlur?: () => void;\n}\n\nexport function DatePickerInput<T extends DateValue>(\n  props: CubeDatePickerInputProps<T>,\n) {\n  let { isDisabled, isReadOnly, isRequired, useLocale: useLocaleProp } = props;\n  let ref = useRef(null);\n  let { locale } = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    locale: useLocaleProp ? locale : 'en-US',\n    createCalendar,\n  });\n\n  if (useLocaleProp == null) {\n    state.segments = formatSegments(state.segments);\n  }\n\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: (isFocused) => {\n      if (isFocused) {\n        props.onFocus?.();\n      } else {\n        props.onBlur?.();\n      }\n    },\n  });\n\n  let { fieldProps } = useDateField(props, state, ref);\n\n  return (\n    <DateInputElement ref={ref} {...mergeProps(fieldProps, focusWithinProps)}>\n      {state.segments.map((segment: DateSegment, i: number) => (\n        <DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n        />\n      ))}\n    </DateInputElement>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAkBA,MAAM,mBAAmB,MAAM;CAC7B,MAAM;CACN,QAAQ;EACN,SAAS;EACT,MAAM;EACN,YAAY;EACb;CACF,CAAC;AAYF,SAAgB,gBACd,OACA;CACA,IAAI,EAAE,YAAY,YAAY,YAAY,WAAW,kBAAkB;CACvE,IAAI,MAAM,OAAO,KAAK;CACtB,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,QAAQ,kBAAkB;EAC5B,GAAG;EACH,QAAQ,gBAAgB,SAAS;EACjC;EACD,CAAC;AAEF,KAAI,iBAAiB,KACnB,OAAM,WAAW,eAAe,MAAM,SAAS;CAGjD,MAAM,EAAE,qBAAqB,eAAe,EAC1C,sBAAsB,cAAc;AAClC,MAAI,UACF,OAAM,WAAW;MAEjB,OAAM,UAAU;IAGrB,CAAC;CAEF,IAAI,EAAE,eAAe,aAAa,OAAO,OAAO,IAAI;AAEpD,QACE,oBAAC;EAAsB;EAAK,GAAIA,aAAW,YAAY,iBAAiB;YACrE,MAAM,SAAS,KAAK,SAAsB,MACzC,oBAAC;GAEU;GACF;GACK;GACA;GACA;KALP,EAML,CACF;GACe"}

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

@@ -1,5 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
-import { tasty } from "../../../tasty/tasty.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
+import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useDateSegment } from "react-aria";

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerSegment.js","names":[],"sources":["../../../../src/components/fields/DatePicker/DatePickerSegment.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { DateValue, useDateSegment } from 'react-aria';\nimport { DateFieldState, DateSegment } from 'react-stately';\n\nimport { tasty } from '../../../tasty';\n\nimport { DateFieldBase } from './types';\n\ninterface DatePickerSegmentProps extends DateFieldBase<DateValue> {\n  segment: DateSegment;\n  state: DateFieldState;\n}\n\ninterface LiteralSegmentProps {\n  segment: DateSegment;\n}\n\nconst LiteralSegmentElement = tasty({\n  qa: 'LiteralSegment',\n  as: 'span',\n  'aria-hidden': 'true',\n  styles: {},\n});\n\nconst EditableSegmentElement = tasty({\n  qa: 'EditableSegment',\n  styles: {\n    padding: '0 1bw',\n    fontVariantNumeric: 'tabular-nums lining-nums',\n    textAlign: 'right',\n    font: 'monospace',\n    border: 0,\n    outline: 0,\n    color: {\n      '': 'inherit',\n      ':focus': '#white',\n    },\n    fill: {\n      '': '#clear',\n      ':focus': '#primary',\n    },\n    radius: '.25x',\n\n    Placeholder: {\n      opacity: '#disabled-opacity',\n    },\n  },\n});\n\nexport function DatePickerSegment({\n  segment,\n  state,\n  ...otherProps\n}: DatePickerSegmentProps) {\n  switch (segment.type) {\n    // A separator, e.g. punctuation\n    case 'literal':\n      return <LiteralSegment segment={segment} />;\n\n    // Editable segment\n    default:\n      return (\n        <EditableSegment segment={segment} state={state} {...otherProps} />\n      );\n  }\n}\n\nfunction LiteralSegment({ segment }: LiteralSegmentProps) {\n  return (\n    <LiteralSegmentElement\n      data-type={segment.type === 'literal' ? undefined : segment.type}\n    >\n      {segment.text}\n    </LiteralSegmentElement>\n  );\n}\n\nfunction EditableSegment({ segment, state }: DatePickerSegmentProps) {\n  let ref = useRef(null);\n  let { segmentProps } = useDateSegment(segment, state, ref);\n  return (\n    <EditableSegmentElement\n      {...segmentProps}\n      ref={ref}\n      mods={{\n        placeholder: segment.isPlaceholder,\n        'read-only': !segment.isEditable,\n      }}\n      style={{\n        ...segmentProps.style,\n        minWidth:\n          segment.maxValue != null\n            ? `calc(${String(segment.maxValue).length + 'ch'})`\n            : undefined,\n      }}\n      data-testid={segment.type}\n    >\n      {segment.isPlaceholder ? (\n        <span data-element=\"Placeholder\" aria-hidden=\"true\">\n          {segment.placeholder}\n        </span>\n      ) : (\n        segment.text\n      )}\n    </EditableSegmentElement>\n  );\n}\n"],"mappings":";;;;;;;AAiBA,MAAM,wBAAwB,MAAM;CAClC,IAAI;CACJ,IAAI;CACJ,eAAe;CACf,QAAQ,EAAE;CACX,CAAC;AAEF,MAAM,yBAAyB,MAAM;CACnC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,oBAAoB;EACpB,WAAW;EACX,MAAM;EACN,QAAQ;EACR,SAAS;EACT,OAAO;GACL,IAAI;GACJ,UAAU;GACX;EACD,MAAM;GACJ,IAAI;GACJ,UAAU;GACX;EACD,QAAQ;EAER,aAAa,EACX,SAAS,qBACV;EACF;CACF,CAAC;AAEF,SAAgB,kBAAkB,EAChC,SACA,OACA,GAAG,cACsB;AACzB,SAAQ,QAAQ,MAAhB;EAEE,KAAK,UACH,QAAO,oBAAC,kBAAwB,UAAW;EAG7C,QACE,QACE,oBAAC;GAAyB;GAAgB;GAAO,GAAI;IAAc;;;AAK3E,SAAS,eAAe,EAAE,WAAgC;AACxD,QACE,oBAAC;EACC,aAAW,QAAQ,SAAS,YAAY,SAAY,QAAQ;YAE3D,QAAQ;GACa;;AAI5B,SAAS,gBAAgB,EAAE,SAAS,SAAiC;CACnE,IAAI,MAAM,OAAO,KAAK;CACtB,IAAI,EAAE,iBAAiB,eAAe,SAAS,OAAO,IAAI;AAC1D,QACE,oBAAC;EACC,GAAI;EACC;EACL,MAAM;GACJ,aAAa,QAAQ;GACrB,aAAa,CAAC,QAAQ;GACvB;EACD,OAAO;GACL,GAAG,aAAa;GAChB,UACE,QAAQ,YAAY,OAChB,QAAQ,OAAO,QAAQ,SAAS,CAAC,SAAS,KAAK,KAC/C;GACP;EACD,eAAa,QAAQ;YAEpB,QAAQ,gBACP,oBAAC;GAAK,gBAAa;GAAc,eAAY;aAC1C,QAAQ;IACJ,GAEP,QAAQ;GAEa"}
+{"version":3,"file":"DatePickerSegment.js","names":[],"sources":["../../../../src/components/fields/DatePicker/DatePickerSegment.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { useRef } from 'react';\nimport { DateValue, useDateSegment } from 'react-aria';\nimport { DateFieldState, DateSegment } from 'react-stately';\n\nimport { DateFieldBase } from './types';\n\ninterface DatePickerSegmentProps extends DateFieldBase<DateValue> {\n  segment: DateSegment;\n  state: DateFieldState;\n}\n\ninterface LiteralSegmentProps {\n  segment: DateSegment;\n}\n\nconst LiteralSegmentElement = tasty({\n  qa: 'LiteralSegment',\n  as: 'span',\n  'aria-hidden': 'true',\n  styles: {},\n});\n\nconst EditableSegmentElement = tasty({\n  qa: 'EditableSegment',\n  styles: {\n    padding: '0 1bw',\n    fontVariantNumeric: 'tabular-nums lining-nums',\n    textAlign: 'right',\n    font: 'monospace',\n    border: 0,\n    outline: 0,\n    color: {\n      '': 'inherit',\n      ':focus': '#white',\n    },\n    fill: {\n      '': '#clear',\n      ':focus': '#primary',\n    },\n    radius: '.25x',\n\n    Placeholder: {\n      opacity: '#disabled-opacity',\n    },\n  },\n});\n\nexport function DatePickerSegment({\n  segment,\n  state,\n  ...otherProps\n}: DatePickerSegmentProps) {\n  switch (segment.type) {\n    // A separator, e.g. punctuation\n    case 'literal':\n      return <LiteralSegment segment={segment} />;\n\n    // Editable segment\n    default:\n      return (\n        <EditableSegment segment={segment} state={state} {...otherProps} />\n      );\n  }\n}\n\nfunction LiteralSegment({ segment }: LiteralSegmentProps) {\n  return (\n    <LiteralSegmentElement\n      data-type={segment.type === 'literal' ? undefined : segment.type}\n    >\n      {segment.text}\n    </LiteralSegmentElement>\n  );\n}\n\nfunction EditableSegment({ segment, state }: DatePickerSegmentProps) {\n  let ref = useRef(null);\n  let { segmentProps } = useDateSegment(segment, state, ref);\n  return (\n    <EditableSegmentElement\n      {...segmentProps}\n      ref={ref}\n      mods={{\n        placeholder: segment.isPlaceholder,\n        'read-only': !segment.isEditable,\n      }}\n      style={{\n        ...segmentProps.style,\n        minWidth:\n          segment.maxValue != null\n            ? `calc(${String(segment.maxValue).length + 'ch'})`\n            : undefined,\n      }}\n      data-testid={segment.type}\n    >\n      {segment.isPlaceholder ? (\n        <span data-element=\"Placeholder\" aria-hidden=\"true\">\n          {segment.placeholder}\n        </span>\n      ) : (\n        segment.text\n      )}\n    </EditableSegmentElement>\n  );\n}\n"],"mappings":";;;;;;;AAgBA,MAAM,wBAAwB,MAAM;CAClC,IAAI;CACJ,IAAI;CACJ,eAAe;CACf,QAAQ,EAAE;CACX,CAAC;AAEF,MAAM,yBAAyB,MAAM;CACnC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,oBAAoB;EACpB,WAAW;EACX,MAAM;EACN,QAAQ;EACR,SAAS;EACT,OAAO;GACL,IAAI;GACJ,UAAU;GACX;EACD,MAAM;GACJ,IAAI;GACJ,UAAU;GACX;EACD,QAAQ;EAER,aAAa,EACX,SAAS,qBACV;EACF;CACF,CAAC;AAEF,SAAgB,kBAAkB,EAChC,SACA,OACA,GAAG,cACsB;AACzB,SAAQ,QAAQ,MAAhB;EAEE,KAAK,UACH,QAAO,oBAAC,kBAAwB,UAAW;EAG7C,QACE,QACE,oBAAC;GAAyB;GAAgB;GAAO,GAAI;IAAc;;;AAK3E,SAAS,eAAe,EAAE,WAAgC;AACxD,QACE,oBAAC;EACC,aAAW,QAAQ,SAAS,YAAY,SAAY,QAAQ;YAE3D,QAAQ;GACa;;AAI5B,SAAS,gBAAgB,EAAE,SAAS,SAAiC;CACnE,IAAI,MAAM,OAAO,KAAK;CACtB,IAAI,EAAE,iBAAiB,eAAe,SAAS,OAAO,IAAI;AAC1D,QACE,oBAAC;EACC,GAAI;EACC;EACL,MAAM;GACJ,aAAa,QAAQ;GACrB,aAAa,CAAC,QAAQ;GACvB;EACD,OAAO;GACL,GAAG,aAAa;GAChB,UACE,QAAQ,YAAY,OAChB,QAAQ,OAAO,QAAQ,SAAS,CAAC,SAAS,KAAK,KAC/C;GACP;EACD,eAAa,QAAQ;YAEpB,QAAQ,gBACP,oBAAC;GAAK,gBAAa;GAAc,eAAY;aAC1C,QAAQ;IACJ,GAEP,QAAQ;GAEa"}

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

@@ -1,10 +1,8 @@
 
-import { Styles } from "../../../tasty/styles/types.js";
-import { BaseProps, ContainerStyleProps } from "../../../tasty/types.js";
-import "../../../tasty/index.js";
 import { FieldBaseProps, ValidationState } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { DateFieldBase } from "./types.js";
+import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { AriaDateRangePickerProps, DateValue } from "react-aria";
 import { FocusableRef } from "@react-types/shared";

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

@@ -1,7 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
-import { extractStyles } from "../../../tasty/utils/styles.js";
-import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
-import { tasty } from "../../../tasty/tasty.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";
 import { Space } from "../../layout/Space.js";
@@ -18,6 +15,7 @@ import { DatePickerButton } from "./DatePickerButton.js";
 import { DatePickerInput } from "./DatePickerInput.js";
 import { dateMessages } from "./intl.js";
 import { _RangeCalendar } from "../../other/Calendar/RangeCalendar.js";
+import { CONTAINER_STYLES, extractStyles, tasty } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useDateRangePicker, useFocusRing } from "react-aria";

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.js","names":["DateInputBase","mergeProps","RangeCalendar","TimeInput"],"sources":["../../../../src/components/fields/DatePicker/DateRangePicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  useDateRangePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDateRangePickerState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport { mergeProps } from '../../../utils/react';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { Space } from '../../layout/Space';\nimport { RangeCalendar } from '../../other/Calendar/RangeCalendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerInput } from './DatePickerInput';\nimport { dateMessages } from './intl';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { TimeInput } from './TimeInput';\nimport { DateFieldBase } from './types';\nimport { useFocusManagerRef } from './utils';\n\nconst DateRangeDash = tasty({\n  'aria-hidden': 'true',\n  'data-qa': 'DateRangeDash',\n  children: '–',\n  styles: {\n    padding: '0 .5x',\n  },\n});\n\nexport interface CubeDateRangePickerProps<T extends DateValue = DateValue>\n  extends Omit<AriaDateRangePickerProps<T>, 'errorMessage'>,\n    BaseProps,\n    DateFieldBase<T>,\n    ContainerStyleProps,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  useLocale?: boolean;\n}\n\nfunction DateRangePicker<T extends DateValue>(\n  props: CubeDateRangePickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    size,\n    shouldFlip,\n    placeholderValue,\n    isDisabled,\n    validationState,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDateRangePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime,\n  });\n  let { isOpen, setOpen } = state;\n\n  let { isFocused, focusProps } = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n\n  let { isFocused: isFocusedButton, focusProps: focusPropsButton } =\n    useFocusRing({\n      within: false,\n      isTextInput: false,\n      autoFocus,\n    });\n\n  let domRef = useFocusManagerRef(ref);\n\n  let {\n    groupProps,\n    labelProps,\n    startFieldProps,\n    endFieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n  } = useDateRangePicker(props, state, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue;\n  let timePlaceholder =\n    placeholder && 'hour' in placeholder ? placeholder : undefined;\n  let timeMinValue =\n    props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n  let timeMaxValue =\n    props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;\n  let timeGranularity =\n    state.granularity === 'hour' ||\n    state.granularity === 'minute' ||\n    state.granularity === 'second'\n      ? state.granularity\n      : null;\n  let showTimeField = !!timeGranularity;\n  // let visibleMonths = useVisibleMonths(maxVisibleMonths);\n\n  const component = (\n    <DateInputBase\n      ref={targetRef}\n      qa={qa || 'DateRangePicker'}\n      inputType=\"daterangepicker\"\n      styles={props.wrapperStyles}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      validationState={validationState}\n      size={size}\n      fieldProps={groupProps}\n      {...focusProps}\n      suffix={\n        <DialogTrigger\n          hideArrow\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement=\"bottom right\"\n          targetRef={targetRef}\n          isOpen={isOpen}\n          shouldFlip={shouldFlip}\n          onOpenChange={setOpen}\n        >\n          <DatePickerButton\n            size={size}\n            {...mergeProps(buttonProps, focusPropsButton)}\n            isDisabled={isDisabled}\n          />\n          <Dialog {...dialogProps} width=\"max-content\">\n            <RangeCalendar {...calendarProps} />\n            {showTimeField && (\n              <Space>\n                <TimeInput\n                  padding=\"1x\"\n                  label={dateMessages['startTime']}\n                  value={state.timeRange?.start || null}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={(v) => state.setTime('start', v)}\n                />\n                <TimeInput\n                  padding=\"1x\"\n                  label={dateMessages['endTime']}\n                  value={state.timeRange?.end || null}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={(v) => state.setTime('end', v)}\n                />\n              </Space>\n            )}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <DatePickerInput useLocale={useLocaleProp} {...startFieldProps} />\n      <DateRangeDash />\n      <DatePickerInput useLocale={useLocaleProp} {...endFieldProps} />\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DateRangePicker = forwardRef(DateRangePicker) as typeof DateRangePicker;\n\n(_DateRangePicker as any).displayName = 'DateRangePicker';\n\nexport { _DateRangePicker as DateRangePicker };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAM,gBAAgB,MAAM;CAC1B,eAAe;CACf,WAAW;CACX,UAAU;CACV,QAAQ,EACN,SAAS,SACV;CACF,CAAC;AAkBF,SAAS,gBACP,OACA,KACA;AACA,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;AAEvC,eAAc,OAAO,iBAAiB;CAEnD,IAAI,EACF,IACA,MACA,YACA,kBACA,YACA,iBACA,WAAW,eACX,cACE;CACJ,IAAI,YAAY,OAAuB,KAAK;CAC5C,IAAI,QAAQ,wBAAwB;EAClC,GAAG;EACH,2BAA2B,CAAC,MAAM;EACnC,CAAC;CACF,IAAI,EAAE,QAAQ,YAAY;CAE1B,IAAI,EAAE,WAAW,eAAe,aAAa;EAC3C,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEF,IAAI,EAAE,WAAW,iBAAiB,YAAY,qBAC5C,aAAa;EACX,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEJ,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,EACF,YACA,YACA,iBACA,eACA,aACA,aACA,kBACE,mBAAmB,OAAO,OAAO,UAAU;CAE/C,IAAI,cAAqC;CACzC,IAAI,kBACF,eAAe,UAAU,cAAc,cAAc;CACvD,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,kBACF,MAAM,gBAAgB,UACtB,MAAM,gBAAgB,YACtB,MAAM,gBAAgB,WAClB,MAAM,cACN;CACN,IAAI,gBAAgB,CAAC,CAAC;AAuEtB,QAAO,cAnEL,qBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACV,QAAQ,MAAM;EACd,kBAAkB;EACN;EACK;EACX;EACN,YAAY;EACZ,GAAI;EACJ,QACE,qBAAC;GACC;GACA,MAAK;GACL,YAAW;GACX,WAAU;GACC;GACH;GACI;GACZ,cAAc;cAEd,oBAAC;IACO;IACN,GAAIC,aAAW,aAAa,iBAAiB;IACjC;KACZ,EACF,qBAAC;IAAO,GAAI;IAAa,OAAM;eAC7B,oBAACC,kBAAc,GAAI,gBAAiB,EACnC,iBACC,qBAAC,oBACC,oBAACC;KACC,SAAQ;KACR,OAAO,aAAa;KACpB,OAAO,MAAM,WAAW,SAAS;KACjC,kBAAkB;KAClB,aAAa;KACb,UAAU;KACV,UAAU;KACV,WAAW,MAAM;KACjB,cAAc,MAAM;KACpB,WAAW,MAAM,MAAM,QAAQ,SAAS,EAAE;MAC1C,EACF,oBAACA;KACC,SAAQ;KACR,OAAO,aAAa;KACpB,OAAO,MAAM,WAAW,OAAO;KAC/B,kBAAkB;KAClB,aAAa;KACb,UAAU;KACV,UAAU;KACV,WAAW,MAAM;KACjB,cAAc,MAAM;KACpB,WAAW,MAAM,MAAM,QAAQ,OAAO,EAAE;MACxC,IACI;KAEH;IACK;;GAGlB,oBAAC;IAAgB,WAAW;IAAe,GAAI;KAAmB;GAClE,oBAAC,kBAAgB;GACjB,oBAAC;IAAgB,WAAW;IAAe,GAAI;KAAiB;;GAClD,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYF,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;AAGJ,MAAM,mBAAmB,WAAW,gBAAgB;AAEpD,AAAC,iBAAyB,cAAc"}
+{"version":3,"file":"DateRangePicker.js","names":["DateInputBase","mergeProps","RangeCalendar","TimeInput"],"sources":["../../../../src/components/fields/DatePicker/DateRangePicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  useDateRangePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDateRangePickerState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { Space } from '../../layout/Space';\nimport { RangeCalendar } from '../../other/Calendar/RangeCalendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerInput } from './DatePickerInput';\nimport { dateMessages } from './intl';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { TimeInput } from './TimeInput';\nimport { DateFieldBase } from './types';\nimport { useFocusManagerRef } from './utils';\n\nconst DateRangeDash = tasty({\n  'aria-hidden': 'true',\n  'data-qa': 'DateRangeDash',\n  children: '–',\n  styles: {\n    padding: '0 .5x',\n  },\n});\n\nexport interface CubeDateRangePickerProps<T extends DateValue = DateValue>\n  extends Omit<AriaDateRangePickerProps<T>, 'errorMessage'>,\n    BaseProps,\n    DateFieldBase<T>,\n    ContainerStyleProps,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  useLocale?: boolean;\n}\n\nfunction DateRangePicker<T extends DateValue>(\n  props: CubeDateRangePickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    size,\n    shouldFlip,\n    placeholderValue,\n    isDisabled,\n    validationState,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDateRangePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime,\n  });\n  let { isOpen, setOpen } = state;\n\n  let { isFocused, focusProps } = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n\n  let { isFocused: isFocusedButton, focusProps: focusPropsButton } =\n    useFocusRing({\n      within: false,\n      isTextInput: false,\n      autoFocus,\n    });\n\n  let domRef = useFocusManagerRef(ref);\n\n  let {\n    groupProps,\n    labelProps,\n    startFieldProps,\n    endFieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n  } = useDateRangePicker(props, state, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue;\n  let timePlaceholder =\n    placeholder && 'hour' in placeholder ? placeholder : undefined;\n  let timeMinValue =\n    props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n  let timeMaxValue =\n    props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;\n  let timeGranularity =\n    state.granularity === 'hour' ||\n    state.granularity === 'minute' ||\n    state.granularity === 'second'\n      ? state.granularity\n      : null;\n  let showTimeField = !!timeGranularity;\n  // let visibleMonths = useVisibleMonths(maxVisibleMonths);\n\n  const component = (\n    <DateInputBase\n      ref={targetRef}\n      qa={qa || 'DateRangePicker'}\n      inputType=\"daterangepicker\"\n      styles={props.wrapperStyles}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      validationState={validationState}\n      size={size}\n      fieldProps={groupProps}\n      {...focusProps}\n      suffix={\n        <DialogTrigger\n          hideArrow\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement=\"bottom right\"\n          targetRef={targetRef}\n          isOpen={isOpen}\n          shouldFlip={shouldFlip}\n          onOpenChange={setOpen}\n        >\n          <DatePickerButton\n            size={size}\n            {...mergeProps(buttonProps, focusPropsButton)}\n            isDisabled={isDisabled}\n          />\n          <Dialog {...dialogProps} width=\"max-content\">\n            <RangeCalendar {...calendarProps} />\n            {showTimeField && (\n              <Space>\n                <TimeInput\n                  padding=\"1x\"\n                  label={dateMessages['startTime']}\n                  value={state.timeRange?.start || null}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={(v) => state.setTime('start', v)}\n                />\n                <TimeInput\n                  padding=\"1x\"\n                  label={dateMessages['endTime']}\n                  value={state.timeRange?.end || null}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={(v) => state.setTime('end', v)}\n                />\n              </Space>\n            )}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <DatePickerInput useLocale={useLocaleProp} {...startFieldProps} />\n      <DateRangeDash />\n      <DatePickerInput useLocale={useLocaleProp} {...endFieldProps} />\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DateRangePicker = forwardRef(DateRangePicker) as typeof DateRangePicker;\n\n(_DateRangePicker as any).displayName = 'DateRangePicker';\n\nexport { _DateRangePicker as DateRangePicker };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAM,gBAAgB,MAAM;CAC1B,eAAe;CACf,WAAW;CACX,UAAU;CACV,QAAQ,EACN,SAAS,SACV;CACF,CAAC;AAkBF,SAAS,gBACP,OACA,KACA;AACA,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;AAEvC,eAAc,OAAO,iBAAiB;CAEnD,IAAI,EACF,IACA,MACA,YACA,kBACA,YACA,iBACA,WAAW,eACX,cACE;CACJ,IAAI,YAAY,OAAuB,KAAK;CAC5C,IAAI,QAAQ,wBAAwB;EAClC,GAAG;EACH,2BAA2B,CAAC,MAAM;EACnC,CAAC;CACF,IAAI,EAAE,QAAQ,YAAY;CAE1B,IAAI,EAAE,WAAW,eAAe,aAAa;EAC3C,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEF,IAAI,EAAE,WAAW,iBAAiB,YAAY,qBAC5C,aAAa;EACX,QAAQ;EACR,aAAa;EACb;EACD,CAAC;CAEJ,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,EACF,YACA,YACA,iBACA,eACA,aACA,aACA,kBACE,mBAAmB,OAAO,OAAO,UAAU;CAE/C,IAAI,cAAqC;CACzC,IAAI,kBACF,eAAe,UAAU,cAAc,cAAc;CACvD,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,eACF,MAAM,YAAY,UAAU,MAAM,WAAW,MAAM,WAAW;CAChE,IAAI,kBACF,MAAM,gBAAgB,UACtB,MAAM,gBAAgB,YACtB,MAAM,gBAAgB,WAClB,MAAM,cACN;CACN,IAAI,gBAAgB,CAAC,CAAC;AAuEtB,QAAO,cAnEL,qBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACV,QAAQ,MAAM;EACd,kBAAkB;EACN;EACK;EACX;EACN,YAAY;EACZ,GAAI;EACJ,QACE,qBAAC;GACC;GACA,MAAK;GACL,YAAW;GACX,WAAU;GACC;GACH;GACI;GACZ,cAAc;cAEd,oBAAC;IACO;IACN,GAAIC,aAAW,aAAa,iBAAiB;IACjC;KACZ,EACF,qBAAC;IAAO,GAAI;IAAa,OAAM;eAC7B,oBAACC,kBAAc,GAAI,gBAAiB,EACnC,iBACC,qBAAC,oBACC,oBAACC;KACC,SAAQ;KACR,OAAO,aAAa;KACpB,OAAO,MAAM,WAAW,SAAS;KACjC,kBAAkB;KAClB,aAAa;KACb,UAAU;KACV,UAAU;KACV,WAAW,MAAM;KACjB,cAAc,MAAM;KACpB,WAAW,MAAM,MAAM,QAAQ,SAAS,EAAE;MAC1C,EACF,oBAACA;KACC,SAAQ;KACR,OAAO,aAAa;KACpB,OAAO,MAAM,WAAW,OAAO;KAC/B,kBAAkB;KAClB,aAAa;KACb,UAAU;KACV,UAAU;KACV,WAAW,MAAM;KACjB,cAAc,MAAM;KACpB,WAAW,MAAM,MAAM,QAAQ,OAAO,EAAE;MACxC,IACI;KAEH;IACK;;GAGlB,oBAAC;IAAgB,WAAW;IAAe,GAAI;KAAmB;GAClE,oBAAC,kBAAgB;GACjB,oBAAC;IAAgB,WAAW;IAAe,GAAI;KAAiB;;GAClD,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYF,aAAW,MAAM,YAAY,WAAW;EACrD,CAAC;;AAGJ,MAAM,mBAAmB,WAAW,gBAAgB;AAEpD,AAAC,iBAAyB,cAAc"}

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

@@ -1,10 +1,8 @@
 
-import { Styles } from "../../../tasty/styles/types.js";
-import { BaseProps, ContainerStyleProps } from "../../../tasty/types.js";
-import "../../../tasty/index.js";
 import { FieldBaseProps, ValidationState } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { DateFieldBase } from "./types.js";
+import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
 import { ReactElement } from "react";
 import { AriaDateRangePickerProps, DateValue } from "react-aria";
 import { FocusableRef } from "@react-types/shared";

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

@@ -1,7 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
-import { extractStyles } from "../../../tasty/utils/styles.js";
-import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
-import { tasty } from "../../../tasty/tasty.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";
 import { useFormProps } from "../../form/Form/Form.js";
@@ -18,6 +15,7 @@ import { DatePickerButton } from "./DatePickerButton.js";
 import { DatePickerInput } from "./DatePickerInput.js";
 import { dateMessages } from "./intl.js";
 import { DatePickerElement } from "./DatePickerElement.js";
+import { CONTAINER_STYLES, extractStyles, tasty } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useDatePicker, useDateRangePicker, useFocusRing } from "react-aria";

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangeSeparatedPicker.js","names":["DateInputBase","mergeProps","Calendar","TimeInput"],"sources":["../../../../src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef, ReactElement, useRef } from 'react';\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  useDatePicker,\n  useDateRangePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDatePickerState, useDateRangePickerState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport { mergeProps } from '../../../utils/react';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerElement } from './DatePickerElement';\nimport { DatePickerInput } from './DatePickerInput';\nimport { dateMessages } from './intl';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { TimeInput } from './TimeInput';\nimport { DateFieldBase } from './types';\nimport { useFocusManagerRef } from './utils';\n\nconst DateRangeDash = tasty({\n  'aria-hidden': 'true',\n  'data-qa': 'DateRangeDash',\n  children: '–',\n  styles: {\n    padding: '0 .5x',\n    color: '#dark-03',\n  },\n});\n\nexport interface CubeDateRangeSeparatedPickerProps<\n  T extends DateValue = DateValue,\n> extends Omit<AriaDateRangePickerProps<T>, 'errorMessage'>,\n    BaseProps,\n    ContainerStyleProps,\n    DateFieldBase<T>,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  useLocale?: boolean;\n}\n\nfunction DateRangeSeparatedPicker<T extends DateValue>(\n  props: CubeDateRangeSeparatedPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    size,\n    placeholderValue,\n    isDisabled,\n    validationState,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n\n  let state = useDateRangePickerState({\n    ...props,\n  });\n\n  let startState = useDatePickerState({\n    ...props,\n    onChange: null,\n    value: state.value?.start,\n  });\n\n  let endState = useDatePickerState({\n    ...props,\n    onChange: null,\n    value: state.value?.end,\n  });\n\n  let startFocusRingProps = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n  let startFocusProps = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus,\n  });\n  let endFocusRingProps = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n  let endFocusProps = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus,\n  });\n\n  let domRef = useFocusManagerRef(ref);\n\n  let { groupProps, labelProps, startFieldProps, endFieldProps } =\n    useDateRangePicker(props, state, targetRef);\n\n  let startProps = useDatePicker(props, startState, targetRef);\n  let endProps = useDatePicker(props, endState, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue;\n  let timePlaceholder =\n    placeholder && 'hour' in placeholder ? placeholder : undefined;\n  let timeMinValue =\n    props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n  let timeMaxValue =\n    props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;\n  let timeGranularity =\n    state.granularity === 'hour' ||\n    state.granularity === 'minute' ||\n    state.granularity === 'second'\n      ? state.granularity\n      : null;\n  let showTimeField = !!timeGranularity;\n\n  // let visibleMonths = useVisibleMonths(maxVisibleMonths);\n\n  function onChange(value: DateValue, type: 'start' | 'end') {\n    if (type === 'start') {\n      const newRange = { ...state.value, start: value };\n\n      if (\n        newRange.start &&\n        newRange.end &&\n        newRange.end.compare(newRange.start) < 0\n      ) {\n        newRange.end = newRange.start;\n      }\n\n      state.setValue(newRange);\n      startProps.calendarProps.onChange(value);\n      startState.setOpen(false);\n    } else {\n      const newRange = { ...state.value, end: value };\n\n      if (\n        newRange.start &&\n        newRange.end &&\n        newRange.end.compare(newRange.start) < 0\n      ) {\n        newRange.start = newRange.end;\n      }\n\n      state.setValue(newRange);\n      endProps.calendarProps.onChange(value);\n      endState.setOpen(false);\n    }\n  }\n\n  const component = (\n    <DatePickerElement\n      ref={targetRef}\n      {...groupProps}\n      styles={props.wrapperStyles}\n      qa={qa || 'DateRangeSeparatedPicker'}\n      data-input-type=\"daterangeseparatedpicker\"\n    >\n      <DateInputBase\n        disableFocusRing={startFocusProps.isFocused}\n        isDisabled={isDisabled}\n        validationState={validationState}\n        size={size}\n        {...startFocusRingProps.focusProps}\n        suffix={\n          <DialogTrigger\n            hideArrow\n            type=\"popover\"\n            mobileType=\"tray\"\n            placement=\"bottom right\"\n            targetRef={targetRef}\n            isOpen={startState.isOpen}\n            shouldFlip={props.shouldFlip}\n            onOpenChange={startState.setOpen}\n          >\n            <DatePickerButton\n              size={size}\n              {...mergeProps(\n                startProps.buttonProps,\n                startFocusProps.focusProps,\n              )}\n              isDisabled={isDisabled}\n            />\n            <Dialog {...startProps.dialogProps} width=\"max-content\">\n              <Calendar\n                {...startProps.calendarProps}\n                defaultFocusedValue={\n                  state.value?.start || state.value?.end || undefined\n                }\n                selectedRange={\n                  state.value?.start && state.value?.end\n                    ? state.value\n                    : undefined\n                }\n                onChange={(value: DateValue) => onChange(value, 'start')}\n              />\n              {showTimeField && (\n                <TimeInput\n                  padding=\"1x\"\n                  label={dateMessages['time']}\n                  value={startState.timeValue}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={startState.setTimeValue}\n                />\n              )}\n            </Dialog>\n          </DialogTrigger>\n        }\n      >\n        <DatePickerInput useLocale={useLocaleProp} {...startFieldProps} />\n      </DateInputBase>\n      <DateRangeDash />\n      <DateInputBase\n        disableFocusRing={endFocusProps.isFocused}\n        isDisabled={isDisabled}\n        validationState={validationState}\n        size={size}\n        {...endFocusRingProps.focusProps}\n        suffix={\n          <DialogTrigger\n            hideArrow\n            type=\"popover\"\n            mobileType=\"tray\"\n            placement=\"bottom right\"\n            targetRef={targetRef}\n            isOpen={endState.isOpen}\n            shouldFlip={props.shouldFlip}\n            onOpenChange={endState.setOpen}\n          >\n            <DatePickerButton\n              aria-label=\"Show calendar for the end date\"\n              size={size}\n              {...mergeProps(endFocusProps.focusProps, endProps.buttonProps)}\n              isDisabled={isDisabled}\n            />\n            <Dialog {...endProps.dialogProps} width=\"max-content\">\n              <Calendar\n                {...endProps.calendarProps}\n                defaultFocusedValue={\n                  state.value?.end || state.value?.start || undefined\n                }\n                selectedRange={\n                  state.value?.start && state.value?.end\n                    ? state.value\n                    : undefined\n                }\n                onChange={(value: DateValue) => {\n                  onChange(value, 'end');\n                }}\n              />\n              {showTimeField && (\n                <TimeInput\n                  padding=\"1x\"\n                  label={dateMessages['time']}\n                  value={endState.timeValue}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={endState.setTimeValue}\n                />\n              )}\n            </Dialog>\n          </DialogTrigger>\n        }\n      >\n        <DatePickerInput useLocale={useLocaleProp} {...endFieldProps} />\n      </DateInputBase>\n    </DatePickerElement>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DateRangeSeparatedPicker = forwardRef(DateRangeSeparatedPicker) as <\n  T extends DateValue,\n>(\n  props: CubeDateRangeSeparatedPickerProps<T> & {\n    ref?: FocusableRef<HTMLElement>;\n  },\n) => ReactElement;\n\n(_DateRangeSeparatedPicker as any).displayName = 'DateRangeSeparatedPicker';\n\nexport { _DateRangeSeparatedPicker as DateRangeSeparatedPicker };\n"],"mappings":"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"}
+{"version":3,"file":"DateRangeSeparatedPicker.js","names":["DateInputBase","mergeProps","Calendar","TimeInput"],"sources":["../../../../src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, ReactElement, useRef } from 'react';\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  useDatePicker,\n  useDateRangePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDatePickerState, useDateRangePickerState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerElement } from './DatePickerElement';\nimport { DatePickerInput } from './DatePickerInput';\nimport { dateMessages } from './intl';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { TimeInput } from './TimeInput';\nimport { DateFieldBase } from './types';\nimport { useFocusManagerRef } from './utils';\n\nconst DateRangeDash = tasty({\n  'aria-hidden': 'true',\n  'data-qa': 'DateRangeDash',\n  children: '–',\n  styles: {\n    padding: '0 .5x',\n    color: '#dark-03',\n  },\n});\n\nexport interface CubeDateRangeSeparatedPickerProps<\n  T extends DateValue = DateValue,\n> extends Omit<AriaDateRangePickerProps<T>, 'errorMessage'>,\n    BaseProps,\n    ContainerStyleProps,\n    DateFieldBase<T>,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  useLocale?: boolean;\n}\n\nfunction DateRangeSeparatedPicker<T extends DateValue>(\n  props: CubeDateRangeSeparatedPickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    size,\n    placeholderValue,\n    isDisabled,\n    validationState,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n\n  let state = useDateRangePickerState({\n    ...props,\n  });\n\n  let startState = useDatePickerState({\n    ...props,\n    onChange: null,\n    value: state.value?.start,\n  });\n\n  let endState = useDatePickerState({\n    ...props,\n    onChange: null,\n    value: state.value?.end,\n  });\n\n  let startFocusRingProps = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n  let startFocusProps = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus,\n  });\n  let endFocusRingProps = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n  let endFocusProps = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus,\n  });\n\n  let domRef = useFocusManagerRef(ref);\n\n  let { groupProps, labelProps, startFieldProps, endFieldProps } =\n    useDateRangePicker(props, state, targetRef);\n\n  let startProps = useDatePicker(props, startState, targetRef);\n  let endProps = useDatePicker(props, endState, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue;\n  let timePlaceholder =\n    placeholder && 'hour' in placeholder ? placeholder : undefined;\n  let timeMinValue =\n    props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n  let timeMaxValue =\n    props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;\n  let timeGranularity =\n    state.granularity === 'hour' ||\n    state.granularity === 'minute' ||\n    state.granularity === 'second'\n      ? state.granularity\n      : null;\n  let showTimeField = !!timeGranularity;\n\n  // let visibleMonths = useVisibleMonths(maxVisibleMonths);\n\n  function onChange(value: DateValue, type: 'start' | 'end') {\n    if (type === 'start') {\n      const newRange = { ...state.value, start: value };\n\n      if (\n        newRange.start &&\n        newRange.end &&\n        newRange.end.compare(newRange.start) < 0\n      ) {\n        newRange.end = newRange.start;\n      }\n\n      state.setValue(newRange);\n      startProps.calendarProps.onChange(value);\n      startState.setOpen(false);\n    } else {\n      const newRange = { ...state.value, end: value };\n\n      if (\n        newRange.start &&\n        newRange.end &&\n        newRange.end.compare(newRange.start) < 0\n      ) {\n        newRange.start = newRange.end;\n      }\n\n      state.setValue(newRange);\n      endProps.calendarProps.onChange(value);\n      endState.setOpen(false);\n    }\n  }\n\n  const component = (\n    <DatePickerElement\n      ref={targetRef}\n      {...groupProps}\n      styles={props.wrapperStyles}\n      qa={qa || 'DateRangeSeparatedPicker'}\n      data-input-type=\"daterangeseparatedpicker\"\n    >\n      <DateInputBase\n        disableFocusRing={startFocusProps.isFocused}\n        isDisabled={isDisabled}\n        validationState={validationState}\n        size={size}\n        {...startFocusRingProps.focusProps}\n        suffix={\n          <DialogTrigger\n            hideArrow\n            type=\"popover\"\n            mobileType=\"tray\"\n            placement=\"bottom right\"\n            targetRef={targetRef}\n            isOpen={startState.isOpen}\n            shouldFlip={props.shouldFlip}\n            onOpenChange={startState.setOpen}\n          >\n            <DatePickerButton\n              size={size}\n              {...mergeProps(\n                startProps.buttonProps,\n                startFocusProps.focusProps,\n              )}\n              isDisabled={isDisabled}\n            />\n            <Dialog {...startProps.dialogProps} width=\"max-content\">\n              <Calendar\n                {...startProps.calendarProps}\n                defaultFocusedValue={\n                  state.value?.start || state.value?.end || undefined\n                }\n                selectedRange={\n                  state.value?.start && state.value?.end\n                    ? state.value\n                    : undefined\n                }\n                onChange={(value: DateValue) => onChange(value, 'start')}\n              />\n              {showTimeField && (\n                <TimeInput\n                  padding=\"1x\"\n                  label={dateMessages['time']}\n                  value={startState.timeValue}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={startState.setTimeValue}\n                />\n              )}\n            </Dialog>\n          </DialogTrigger>\n        }\n      >\n        <DatePickerInput useLocale={useLocaleProp} {...startFieldProps} />\n      </DateInputBase>\n      <DateRangeDash />\n      <DateInputBase\n        disableFocusRing={endFocusProps.isFocused}\n        isDisabled={isDisabled}\n        validationState={validationState}\n        size={size}\n        {...endFocusRingProps.focusProps}\n        suffix={\n          <DialogTrigger\n            hideArrow\n            type=\"popover\"\n            mobileType=\"tray\"\n            placement=\"bottom right\"\n            targetRef={targetRef}\n            isOpen={endState.isOpen}\n            shouldFlip={props.shouldFlip}\n            onOpenChange={endState.setOpen}\n          >\n            <DatePickerButton\n              aria-label=\"Show calendar for the end date\"\n              size={size}\n              {...mergeProps(endFocusProps.focusProps, endProps.buttonProps)}\n              isDisabled={isDisabled}\n            />\n            <Dialog {...endProps.dialogProps} width=\"max-content\">\n              <Calendar\n                {...endProps.calendarProps}\n                defaultFocusedValue={\n                  state.value?.end || state.value?.start || undefined\n                }\n                selectedRange={\n                  state.value?.start && state.value?.end\n                    ? state.value\n                    : undefined\n                }\n                onChange={(value: DateValue) => {\n                  onChange(value, 'end');\n                }}\n              />\n              {showTimeField && (\n                <TimeInput\n                  padding=\"1x\"\n                  label={dateMessages['time']}\n                  value={endState.timeValue}\n                  placeholderValue={timePlaceholder}\n                  granularity={timeGranularity}\n                  minValue={timeMinValue}\n                  maxValue={timeMaxValue}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  onChange={endState.setTimeValue}\n                />\n              )}\n            </Dialog>\n          </DialogTrigger>\n        }\n      >\n        <DatePickerInput useLocale={useLocaleProp} {...endFieldProps} />\n      </DateInputBase>\n    </DatePickerElement>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DateRangeSeparatedPicker = forwardRef(DateRangeSeparatedPicker) as <\n  T extends DateValue,\n>(\n  props: CubeDateRangeSeparatedPickerProps<T> & {\n    ref?: FocusableRef<HTMLElement>;\n  },\n) => ReactElement;\n\n(_DateRangeSeparatedPicker as any).displayName = 'DateRangeSeparatedPicker';\n\nexport { _DateRangeSeparatedPicker as DateRangeSeparatedPicker };\n"],"mappings":"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"}

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

@@ -1,10 +1,8 @@
 
-import { Styles } from "../../../tasty/styles/types.js";
-import { BaseProps, ContainerStyleProps } from "../../../tasty/types.js";
-import "../../../tasty/index.js";
 import { FieldBaseProps, ValidationState } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { Granularity } from "./types.js";
+import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
 import * as react from "react";
 import { AriaTimeFieldProps, DateValue, TimeValue } from "react-aria";
 import * as _react_types_shared0 from "@react-types/shared";

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

@@ -1,6 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
-import { extractStyles } from "../../../tasty/utils/styles.js";
-import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";
 import { useFormProps } from "../../form/Form/Form.js";
@@ -10,6 +8,7 @@ import { _DateInputBase } from "./DateInputBase.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { DEFAULT_TIME_PROPS } from "./props.js";
 import { useFocusManagerRef } from "./utils.js";
+import { CONTAINER_STYLES, extractStyles } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useTimeField } from "react-aria";

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

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.js","names":["DateInputBase","mergeProps"],"sources":["../../../../src/components/fields/DatePicker/TimeInput.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaTimeFieldProps,\n  DateValue,\n  TimeValue,\n  useTimeField,\n} from 'react-aria';\nimport { useTimeFieldState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  Styles,\n} from '../../../tasty';\nimport { mergeProps } from '../../../utils/react';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerSegment } from './DatePickerSegment';\nimport { DEFAULT_TIME_PROPS } from './props';\nimport { Granularity } from './types';\nimport { useFocusManagerRef } from './utils';\n\nexport interface CubeTimeInputProps<T extends TimeValue = TimeValue>\n  extends Omit<AriaTimeFieldProps<T>, 'errorMessage'>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  value?: TimeValue;\n  /** The minimum allowed date that a user may select. */\n  minValue?: TimeValue;\n  /** The maximum allowed date that a user may select. */\n  maxValue?: TimeValue;\n  /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */\n  isDateUnavailable?: (date: DateValue) => boolean;\n  /** A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. */\n  placeholderValue?: TimeValue;\n  /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */\n  hourCycle?: 12 | 24;\n  /** Determines the smallest unit that is displayed in the date picker. By default, this is `\"day\"` for dates, and `\"minute\"` for times. */\n  granularity?: Granularity;\n  /**\n   * Whether to hide the time zone abbreviation.\n   * @default false\n   */\n  hideTimeZone?: boolean;\n  onChange?: (value: TimeValue) => void;\n}\n\nfunction TimeInput<T extends TimeValue>(\n  props: CubeTimeInputProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_TIME_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    inputStyles,\n    wrapperStyles,\n    autoFocus,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    validationState,\n    size = 'medium',\n    labelProps: userLabelProps,\n  } = props;\n\n  let domRef = useFocusManagerRef(ref);\n  // let { locale } = useLocale();\n  let state = useTimeFieldState({\n    ...props,\n    locale: 'en-US',\n  });\n\n  let fieldRef = useRef(null);\n  let { labelProps, fieldProps } = useTimeField(props, state, fieldRef);\n\n  const timeInput = (\n    <DateInputBase\n      ref={fieldRef}\n      qa={qa || 'TimeInput'}\n      inputType=\"timeinput\"\n      size={size}\n      fieldProps={fieldProps}\n      isDisabled={isDisabled}\n      autoFocus={autoFocus}\n      inputStyles={inputStyles}\n      styles={wrapperStyles}\n      validationState={validationState}\n    >\n      {state.segments.map((segment, i) => (\n        <DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n        />\n      ))}\n    </DateInputBase>\n  );\n\n  return wrapWithField(timeInput, domRef, {\n    ...props,\n    labelProps: mergeProps(labelProps, userLabelProps),\n  });\n}\n\n/**\n * TimeFields allow users to enter and edit time values using a keyboard.\n * Each part of the time is displayed in an individually editable segment.\n */\nconst _TimeInput = forwardRef(TimeInput);\n\n_TimeInput.displayName = 'TimeInput';\n\nexport { _TimeInput as TimeInput };\n"],"mappings":";;;;;;;;;;;;;;;;;;AA2DA,SAAS,UACP,OACA,KACA;AACA,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;AAEvC,eAAc,OAAO,iBAAiB;CAEnD,IAAI,EACF,IACA,aACA,eACA,WACA,YACA,YACA,YACA,iBACA,OAAO,UACP,YAAY,mBACV;CAEJ,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,QAAQ,kBAAkB;EAC5B,GAAG;EACH,QAAQ;EACT,CAAC;CAEF,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,EAAE,YAAY,eAAe,aAAa,OAAO,OAAO,SAAS;AA4BrE,QAAO,cAzBL,oBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACJ;EACM;EACA;EACD;EACE;EACb,QAAQ;EACS;YAEhB,MAAM,SAAS,KAAK,SAAS,MAC5B,oBAAC;GAEU;GACF;GACK;GACA;GACA;KALP,EAML,CACF;GACY,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYC,aAAW,YAAY,eAAe;EACnD,CAAC;;;;;;AAOJ,MAAM,aAAa,WAAW,UAAU;AAExC,WAAW,cAAc"}
+{"version":3,"file":"TimeInput.js","names":["DateInputBase","mergeProps"],"sources":["../../../../src/components/fields/DatePicker/TimeInput.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  Styles,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaTimeFieldProps,\n  DateValue,\n  TimeValue,\n  useTimeField,\n} from 'react-aria';\nimport { useTimeFieldState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps, ValidationState } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerSegment } from './DatePickerSegment';\nimport { DEFAULT_TIME_PROPS } from './props';\nimport { Granularity } from './types';\nimport { useFocusManagerRef } from './utils';\n\nexport interface CubeTimeInputProps<T extends TimeValue = TimeValue>\n  extends Omit<AriaTimeFieldProps<T>, 'errorMessage'>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  validationState?: ValidationState;\n  value?: TimeValue;\n  /** The minimum allowed date that a user may select. */\n  minValue?: TimeValue;\n  /** The maximum allowed date that a user may select. */\n  maxValue?: TimeValue;\n  /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */\n  isDateUnavailable?: (date: DateValue) => boolean;\n  /** A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. */\n  placeholderValue?: TimeValue;\n  /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */\n  hourCycle?: 12 | 24;\n  /** Determines the smallest unit that is displayed in the date picker. By default, this is `\"day\"` for dates, and `\"minute\"` for times. */\n  granularity?: Granularity;\n  /**\n   * Whether to hide the time zone abbreviation.\n   * @default false\n   */\n  hideTimeZone?: boolean;\n  onChange?: (value: TimeValue) => void;\n}\n\nfunction TimeInput<T extends TimeValue>(\n  props: CubeTimeInputProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_TIME_PROPS, props);\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let {\n    qa,\n    inputStyles,\n    wrapperStyles,\n    autoFocus,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    validationState,\n    size = 'medium',\n    labelProps: userLabelProps,\n  } = props;\n\n  let domRef = useFocusManagerRef(ref);\n  // let { locale } = useLocale();\n  let state = useTimeFieldState({\n    ...props,\n    locale: 'en-US',\n  });\n\n  let fieldRef = useRef(null);\n  let { labelProps, fieldProps } = useTimeField(props, state, fieldRef);\n\n  const timeInput = (\n    <DateInputBase\n      ref={fieldRef}\n      qa={qa || 'TimeInput'}\n      inputType=\"timeinput\"\n      size={size}\n      fieldProps={fieldProps}\n      isDisabled={isDisabled}\n      autoFocus={autoFocus}\n      inputStyles={inputStyles}\n      styles={wrapperStyles}\n      validationState={validationState}\n    >\n      {state.segments.map((segment, i) => (\n        <DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n        />\n      ))}\n    </DateInputBase>\n  );\n\n  return wrapWithField(timeInput, domRef, {\n    ...props,\n    labelProps: mergeProps(labelProps, userLabelProps),\n  });\n}\n\n/**\n * TimeFields allow users to enter and edit time values using a keyboard.\n * Each part of the time is displayed in an individually editable segment.\n */\nconst _TimeInput = forwardRef(TimeInput);\n\n_TimeInput.displayName = 'TimeInput';\n\nexport { _TimeInput as TimeInput };\n"],"mappings":";;;;;;;;;;;;;;;;;AA2DA,SAAS,UACP,OACA,KACA;AACA,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,cAAc,OAAO,EAC3B,0BAA0B,UAC3B,CAAC;AACF,SAAQ,OAAO,OAAO,EAAE,EAAE,oBAAoB,MAAM;AAEvC,eAAc,OAAO,iBAAiB;CAEnD,IAAI,EACF,IACA,aACA,eACA,WACA,YACA,YACA,YACA,iBACA,OAAO,UACP,YAAY,mBACV;CAEJ,IAAI,SAAS,mBAAmB,IAAI;CAEpC,IAAI,QAAQ,kBAAkB;EAC5B,GAAG;EACH,QAAQ;EACT,CAAC;CAEF,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,EAAE,YAAY,eAAe,aAAa,OAAO,OAAO,SAAS;AA4BrE,QAAO,cAzBL,oBAACA;EACC,KAAK;EACL,IAAI,MAAM;EACV,WAAU;EACJ;EACM;EACA;EACD;EACE;EACb,QAAQ;EACS;YAEhB,MAAM,SAAS,KAAK,SAAS,MAC5B,oBAAC;GAEU;GACF;GACK;GACA;GACA;KALP,EAML,CACF;GACY,EAGc,QAAQ;EACtC,GAAG;EACH,YAAYC,aAAW,YAAY,eAAe;EACnD,CAAC;;;;;;AAOJ,MAAM,aAAa,WAAW,UAAU;AAExC,WAAW,cAAc"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
 //#region src/components/fields/DatePicker/intl.ts
 const dateMessages = {
 	time: "Time",

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
 //#region src/components/fields/DatePicker/props.ts
 const DEFAULT_DATE_PROPS = {
 	granularity: "day",

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
 import { useImperativeHandle, useRef } from "react";
 import { createDOMRef } from "@react-spectrum/utils";
 import { createFocusManager } from "@react-aria/focus";

package/dist/components/fields/FileInput/FileInput.d.ts

@@ -1,9 +1,7 @@
 
-import { Styles } from "../../../tasty/styles/types.js";
-import { BaseProps, BlockStyleProps, ContainerStyleProps, PositionStyleProps, Props } from "../../../tasty/types.js";
-import "../../../tasty/index.js";
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
+import { BaseProps, BlockStyleProps, ContainerStyleProps, PositionStyleProps, Props, Styles } from "@tenphi/tasty";
 import * as react from "react";
 import { RefObject } from "react";
 import { AriaTextFieldProps } from "react-aria";

package/dist/components/fields/FileInput/FileInput.js

@@ -1,13 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
-import { extractStyles } from "../../../tasty/utils/styles.js";
-import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
-import { tasty } from "../../../tasty/tasty.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useProviderProps } from "../../../provider.js";
 import { Action } from "../../actions/Action/Action.js";
 import { useFormProps } from "../../form/Form/Form.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
+import { CONTAINER_STYLES, extractStyles, tasty } from "@tenphi/tasty";
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createFocusableRef } from "@react-spectrum/utils";

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

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","names":[],"sources":["../../../../src/components/fields/FileInput/FileInput.tsx"],"sourcesContent":["import { createFocusableRef } from '@react-spectrum/utils';\nimport {\n  forwardRef,\n  RefObject,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps } from '../../../shared';\nimport {\n  BaseProps,\n  BlockStyleProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  PositionStyleProps,\n  Props,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { Action } from '../../actions';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\n\nimport type { AriaTextFieldProps } from 'react-aria';\n\nconst FileInputElement = tasty(Action, {\n  qa: 'FileInputWrapper',\n  styles: {\n    display: 'inline-flex',\n    position: 'relative',\n    preset: 't3',\n    padding: '.5x 1x',\n    gap: '1x',\n    flow: 'row',\n    placeItems: 'center start',\n    fill: {\n      '': '#white',\n      'drag-hover': '#primary.16',\n      ':hover': '#primary.08',\n      disabled: '#dark.04',\n    },\n    border: {\n      '': true,\n      ':focus-within & :focus-visible': '#primary-text',\n    },\n    radius: true,\n    cursor: '$pointer',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n\n    Button: {\n      radius: true,\n      border: {\n        '': '#clear',\n        pressed: '#primary.30',\n      },\n      fill: '#primary.12',\n      color: {\n        '': '#primary',\n        disabled: '#dark.30',\n      },\n      padding: '.5x (1.5x - 1px)',\n      transition: 'theme',\n    },\n\n    Placeholder: {\n      color: '#dark-02',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      width: 'max 100%',\n      overflow: 'hidden',\n    },\n\n    Value: {\n      color: '#dark-02',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      width: 'max 100%',\n      overflow: 'hidden',\n    },\n\n    Input: {\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      radius: '$content-radius',\n      opacity: 0.01,\n      cursor: '$pointer',\n      zIndex: 10,\n    },\n  },\n});\n\nexport interface CubeFileInputProps\n  extends BaseProps,\n    PositionStyleProps,\n    ContainerStyleProps,\n    BlockStyleProps,\n    AriaTextFieldProps,\n    FieldBaseProps {\n  /**\n   * The size of the input\n   * @default default\n   */\n  size?: 'small' | 'default' | 'large' | string;\n  /** The input ref */\n  inputRef?: RefObject<HTMLInputElement>;\n  /** Style map for the input */\n  inputStyles?: Styles;\n  /**\n   * The type of the input\n   * @default file\n   */\n  type?: 'file' | 'text';\n  /** Direct input props */\n  inputProps?: Props;\n  /** The file types that the input should accept */\n  accept?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  placeholder?: string;\n}\n\nfunction extractContents(element, callback) {\n  const files = element?.files;\n\n  if (files && files.length > 0) {\n    const fileReader = new FileReader();\n\n    fileReader.onload = function () {\n      callback(fileReader.result);\n    };\n\n    fileReader.readAsText(files[0]);\n  }\n}\n\nfunction extractFileNameFromValue(value?: string) {\n  return typeof value === 'string'\n    ? (value as string).split('\\\\')?.pop()\n    : undefined;\n}\n\nfunction FileInput(props: CubeFileInputProps, ref) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(\n    { ...props },\n    {\n      defaultValidationTrigger: 'onChange',\n      valuePropsMapper: ({ value, onChange }) => ({\n        onChange,\n        value: props.type === 'file' || !props.type ? value : undefined,\n      }),\n    },\n  );\n\n  let {\n    id,\n    name,\n    qa,\n    value,\n    onChange,\n    placeholder,\n    inputRef,\n    isDisabled,\n    inputStyles,\n    type = 'file',\n    inputProps,\n    accept,\n    form,\n    ...otherProps\n  } = props;\n\n  const [dragHover, setDragHover] = useState(false);\n  const defaultValue = useMemo(\n    () => (type === 'file' ? value : undefined),\n    [type, value],\n  );\n  const defaultFileName = useMemo(\n    () => extractFileNameFromValue(defaultValue),\n    [],\n  );\n  const [fileName, setFileName] = useState<string | undefined>(defaultFileName);\n\n  let domRef = useRef(null);\n\n  inputRef = useCombinedRefs(inputRef);\n\n  const onLocalChange = useCallback(\n    (event: any) => {\n      const value = event.target.value;\n\n      setFileName(extractFileNameFromValue(value));\n\n      if (type === 'file') {\n        onChange?.(value);\n      } else {\n        extractContents(event.target, onChange);\n      }\n    },\n    [onChange],\n  );\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef?.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef?.current;\n    },\n  }));\n\n  const fileInput = (\n    <FileInputElement\n      ref={domRef}\n      styles={inputStyles}\n      isDisabled={isDisabled}\n      mods={{\n        selected: !!value,\n        'drag-hover': dragHover,\n      }}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === 'Space') {\n          inputRef?.current?.click();\n        }\n      }}\n    >\n      <input\n        ref={inputRef}\n        id={id}\n        name={name}\n        accept={accept}\n        data-qa={qa || 'FileInput'}\n        data-input-type=\"fileinput\"\n        data-element=\"Input\"\n        disabled={isDisabled}\n        type=\"file\"\n        multiple={false}\n        tabIndex={-1}\n        onChange={onLocalChange}\n        onDragEnter={() => {\n          setDragHover(true);\n        }}\n        onDragLeave={() => {\n          setDragHover(false);\n        }}\n        onDrop={() => {\n          setDragHover(false);\n        }}\n        {...inputProps}\n      />\n      <div data-element=\"Button\">Choose file</div>\n      <div data-element={fileName ? 'Value' : 'Placeholder'}>\n        {fileName || placeholder || 'No file selected'}\n      </div>\n    </FileInputElement>\n  );\n\n  return wrapWithField(fileInput, domRef, {\n    ...props,\n  });\n}\n\n/**\n * FileInputs are file inputs that allow users to select local files to\n * upload them to the server.\n */\nconst _FileInput = forwardRef(FileInput);\n\n_FileInput.displayName = 'FileInput';\n\nexport { _FileInput as FileInput };\n"],"mappings":"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"}
+{"version":3,"file":"FileInput.js","names":[],"sources":["../../../../src/components/fields/FileInput/FileInput.tsx"],"sourcesContent":["import { createFocusableRef } from '@react-spectrum/utils';\nimport {\n  BaseProps,\n  BlockStyleProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  PositionStyleProps,\n  Props,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  forwardRef,\n  RefObject,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps } from '../../../shared';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { Action } from '../../actions';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\n\nimport type { AriaTextFieldProps } from 'react-aria';\n\nconst FileInputElement = tasty(Action, {\n  qa: 'FileInputWrapper',\n  styles: {\n    display: 'inline-flex',\n    position: 'relative',\n    preset: 't3',\n    padding: '.5x 1x',\n    gap: '1x',\n    flow: 'row',\n    placeItems: 'center start',\n    fill: {\n      '': '#white',\n      'drag-hover': '#primary.16',\n      ':hover': '#primary.08',\n      disabled: '#dark.04',\n    },\n    border: {\n      '': true,\n      ':focus-within & :focus-visible': '#primary-text',\n    },\n    radius: true,\n    cursor: '$pointer',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n\n    Button: {\n      radius: true,\n      border: {\n        '': '#clear',\n        pressed: '#primary.30',\n      },\n      fill: '#primary.12',\n      color: {\n        '': '#primary',\n        disabled: '#dark.30',\n      },\n      padding: '.5x (1.5x - 1px)',\n      transition: 'theme',\n    },\n\n    Placeholder: {\n      color: '#dark-02',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      width: 'max 100%',\n      overflow: 'hidden',\n    },\n\n    Value: {\n      color: '#dark-02',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      width: 'max 100%',\n      overflow: 'hidden',\n    },\n\n    Input: {\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      radius: '$content-radius',\n      opacity: 0.01,\n      cursor: '$pointer',\n      zIndex: 10,\n    },\n  },\n});\n\nexport interface CubeFileInputProps\n  extends BaseProps,\n    PositionStyleProps,\n    ContainerStyleProps,\n    BlockStyleProps,\n    AriaTextFieldProps,\n    FieldBaseProps {\n  /**\n   * The size of the input\n   * @default default\n   */\n  size?: 'small' | 'default' | 'large' | string;\n  /** The input ref */\n  inputRef?: RefObject<HTMLInputElement>;\n  /** Style map for the input */\n  inputStyles?: Styles;\n  /**\n   * The type of the input\n   * @default file\n   */\n  type?: 'file' | 'text';\n  /** Direct input props */\n  inputProps?: Props;\n  /** The file types that the input should accept */\n  accept?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  placeholder?: string;\n}\n\nfunction extractContents(element, callback) {\n  const files = element?.files;\n\n  if (files && files.length > 0) {\n    const fileReader = new FileReader();\n\n    fileReader.onload = function () {\n      callback(fileReader.result);\n    };\n\n    fileReader.readAsText(files[0]);\n  }\n}\n\nfunction extractFileNameFromValue(value?: string) {\n  return typeof value === 'string'\n    ? (value as string).split('\\\\')?.pop()\n    : undefined;\n}\n\nfunction FileInput(props: CubeFileInputProps, ref) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(\n    { ...props },\n    {\n      defaultValidationTrigger: 'onChange',\n      valuePropsMapper: ({ value, onChange }) => ({\n        onChange,\n        value: props.type === 'file' || !props.type ? value : undefined,\n      }),\n    },\n  );\n\n  let {\n    id,\n    name,\n    qa,\n    value,\n    onChange,\n    placeholder,\n    inputRef,\n    isDisabled,\n    inputStyles,\n    type = 'file',\n    inputProps,\n    accept,\n    form,\n    ...otherProps\n  } = props;\n\n  const [dragHover, setDragHover] = useState(false);\n  const defaultValue = useMemo(\n    () => (type === 'file' ? value : undefined),\n    [type, value],\n  );\n  const defaultFileName = useMemo(\n    () => extractFileNameFromValue(defaultValue),\n    [],\n  );\n  const [fileName, setFileName] = useState<string | undefined>(defaultFileName);\n\n  let domRef = useRef(null);\n\n  inputRef = useCombinedRefs(inputRef);\n\n  const onLocalChange = useCallback(\n    (event: any) => {\n      const value = event.target.value;\n\n      setFileName(extractFileNameFromValue(value));\n\n      if (type === 'file') {\n        onChange?.(value);\n      } else {\n        extractContents(event.target, onChange);\n      }\n    },\n    [onChange],\n  );\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef?.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef?.current;\n    },\n  }));\n\n  const fileInput = (\n    <FileInputElement\n      ref={domRef}\n      styles={inputStyles}\n      isDisabled={isDisabled}\n      mods={{\n        selected: !!value,\n        'drag-hover': dragHover,\n      }}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === 'Space') {\n          inputRef?.current?.click();\n        }\n      }}\n    >\n      <input\n        ref={inputRef}\n        id={id}\n        name={name}\n        accept={accept}\n        data-qa={qa || 'FileInput'}\n        data-input-type=\"fileinput\"\n        data-element=\"Input\"\n        disabled={isDisabled}\n        type=\"file\"\n        multiple={false}\n        tabIndex={-1}\n        onChange={onLocalChange}\n        onDragEnter={() => {\n          setDragHover(true);\n        }}\n        onDragLeave={() => {\n          setDragHover(false);\n        }}\n        onDrop={() => {\n          setDragHover(false);\n        }}\n        {...inputProps}\n      />\n      <div data-element=\"Button\">Choose file</div>\n      <div data-element={fileName ? 'Value' : 'Placeholder'}>\n        {fileName || placeholder || 'No file selected'}\n      </div>\n    </FileInputElement>\n  );\n\n  return wrapWithField(fileInput, domRef, {\n    ...props,\n  });\n}\n\n/**\n * FileInputs are file inputs that allow users to select local files to\n * upload them to the server.\n */\nconst _FileInput = forwardRef(FileInput);\n\n_FileInput.displayName = 'FileInput';\n\nexport { _FileInput as FileInput };\n"],"mappings":"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"}

package/dist/components/fields/FilterListBox/FilterListBox.d.ts

@@ -1,10 +1,9 @@
 
-import { Styles } from "../../../tasty/styles/types.js";
-import "../../../tasty/index.js";
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { CubeCollectionItemProps } from "../../CollectionItem.js";
 import { CubeListBoxProps } from "../ListBox/ListBox.js";
+import { Styles } from "@tenphi/tasty";
 import { ForwardedRef, ReactElement, ReactNode, RefObject } from "react";
 import { Item, Section } from "react-stately";
 import { Collection, Key as Key$1, Node } from "@react-types/shared";

package/dist/components/fields/FilterListBox/FilterListBox.js

@@ -1,10 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
-import { extractStyles } from "../../../tasty/utils/styles.js";
-import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES } from "../../../tasty/styles/list.js";
-import { _modAttrs } from "../../../tasty/utils/mod-attrs.js";
-import { tasty } from "../../../tasty/tasty.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
+import { modAttrs } from "../../../utils/react/index.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
 import { useProviderProps } from "../../../provider.js";
@@ -14,6 +11,7 @@ import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
 import { ListBox } from "../ListBox/ListBox.js";
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from "../TextInput/TextInputBase.js";
+import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, extractStyles, tasty } from "@tenphi/tasty";
 import { cloneElement, forwardRef, isValidElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFilter, useKeyboard } from "react-aria";
@@ -417,13 +415,13 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 				handleSearchChange(e.target.value);
 			},
 			...keyboardProps,
-			..._modAttrs(mods)
+			...modAttrs(mods)
 		})]
 	});
 	return wrapWithField(/* @__PURE__ */ jsxs(FilterListBoxWrapperElement, {
 		ref,
 		qa: "FilterListBoxWrapper",
-		..._modAttrs(mods),
+		...modAttrs(mods),
 		styles,
 		...focusProps,
 		children: [