@cube-dev/ui-kit 0.113.1 → 0.115.0

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

@@ -0,0 +1,46 @@
+
+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 * as react from "react";
+import { AriaTimeFieldProps, DateValue, TimeValue } from "react-aria";
+import * as _react_types_shared0 from "@react-types/shared";
+
+//#region src/components/fields/DatePicker/TimeInput.d.ts
+interface CubeTimeInputProps<T extends TimeValue = TimeValue> extends Omit<AriaTimeFieldProps<T>, 'errorMessage'>, BaseProps, ContainerStyleProps, FieldBaseProps {
+  wrapperStyles?: Styles;
+  inputStyles?: Styles;
+  styles?: Styles;
+  size?: 'small' | 'medium' | 'large' | (string & {});
+  validationState?: ValidationState;
+  value?: TimeValue;
+  /** The minimum allowed date that a user may select. */
+  minValue?: TimeValue;
+  /** The maximum allowed date that a user may select. */
+  maxValue?: TimeValue;
+  /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
+  isDateUnavailable?: (date: DateValue) => boolean;
+  /** A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. */
+  placeholderValue?: TimeValue;
+  /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */
+  hourCycle?: 12 | 24;
+  /** Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times. */
+  granularity?: Granularity;
+  /**
+   * Whether to hide the time zone abbreviation.
+   * @default false
+   */
+  hideTimeZone?: boolean;
+  onChange?: (value: TimeValue) => void;
+}
+/**
+ * TimeFields allow users to enter and edit time values using a keyboard.
+ * Each part of the time is displayed in an individually editable segment.
+ */
+declare const _TimeInput: react.ForwardRefExoticComponent<Omit<CubeTimeInputProps<TimeValue>, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
+//#endregion
+export { CubeTimeInputProps, _TimeInput };
+//# sourceMappingURL=TimeInput.d.ts.map

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

@@ -0,0 +1,65 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useProviderProps } from "../../../provider.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 { _DateInputBase } from "./DateInputBase.js";
+import { DatePickerSegment } from "./DatePickerSegment.js";
+import { DEFAULT_TIME_PROPS } from "./props.js";
+import { useFocusManagerRef } from "./utils.js";
+import { forwardRef, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useTimeField } from "react-aria";
+import { useTimeFieldState } from "react-stately";
+
+//#region src/components/fields/DatePicker/TimeInput.tsx
+function TimeInput(props, ref) {
+	props = useProviderProps(props);
+	props = useFormProps(props);
+	props = useFieldProps(props, { defaultValidationTrigger: "onBlur" });
+	props = Object.assign({}, DEFAULT_TIME_PROPS, props);
+	extractStyles(props, CONTAINER_STYLES);
+	let { qa, inputStyles, wrapperStyles, autoFocus, isDisabled, isReadOnly, isRequired, validationState, size = "medium", labelProps: userLabelProps } = props;
+	let domRef = useFocusManagerRef(ref);
+	let state = useTimeFieldState({
+		...props,
+		locale: "en-US"
+	});
+	let fieldRef = useRef(null);
+	let { labelProps, fieldProps } = useTimeField(props, state, fieldRef);
+	return wrapWithField(/* @__PURE__ */ jsx(_DateInputBase, {
+		ref: fieldRef,
+		qa: qa || "TimeInput",
+		inputType: "timeinput",
+		size,
+		fieldProps,
+		isDisabled,
+		autoFocus,
+		inputStyles,
+		styles: wrapperStyles,
+		validationState,
+		children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DatePickerSegment, {
+			segment,
+			state,
+			isDisabled,
+			isReadOnly,
+			isRequired
+		}, i))
+	}), domRef, {
+		...props,
+		labelProps: mergeProps$1(labelProps, userLabelProps)
+	});
+}
+/**
+* TimeFields allow users to enter and edit time values using a keyboard.
+* Each part of the time is displayed in an individually editable segment.
+*/
+const _TimeInput = forwardRef(TimeInput);
+_TimeInput.displayName = "TimeInput";
+
+//#endregion
+export { _TimeInput };
+//# sourceMappingURL=TimeInput.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,8 @@
+
+import { DateFieldBase, Granularity } from "./types.js";
+import { CubeTimeInputProps, _TimeInput } from "./TimeInput.js";
+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";

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

@@ -0,0 +1,11 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+//#region src/components/fields/DatePicker/intl.ts
+const dateMessages = {
+	time: "Time",
+	startTime: "Start time",
+	endTime: "End time"
+};
+
+//#endregion
+export { dateMessages };
+//# sourceMappingURL=intl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"intl.js","names":[],"sources":["../../../../src/components/fields/DatePicker/intl.ts"],"sourcesContent":["export const dateMessages = {\n  time: 'Time',\n  startTime: 'Start time',\n  endTime: 'End time',\n};\n"],"mappings":";;AAAA,MAAa,eAAe;CAC1B,MAAM;CACN,WAAW;CACX,SAAS;CACV"}

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

@@ -0,0 +1,8 @@
+
+import * as _internationalized_date0 from "@internationalized/date";
+
+//#region src/components/fields/DatePicker/parseDate.d.ts
+declare function parseAbsoluteDate(val: string | Date | undefined | null): _internationalized_date0.ZonedDateTime | undefined;
+//#endregion
+export { parseAbsoluteDate };
+//# sourceMappingURL=parseDate.d.ts.map

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

@@ -0,0 +1,21 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { parseAbsolute } from "@internationalized/date";
+
+//#region src/components/fields/DatePicker/parseDate.ts
+function parseAbsoluteDate(val) {
+	if (!val || typeof val === "string" && val.trim() === "") return;
+	if (val instanceof Date) return parseAbsolute(val.toISOString(), "UTC");
+	try {
+		parseAbsolute(val, "UTC");
+	} catch (e) {
+		if (!Number.isNaN(Date.parse(val))) return parseAbsolute(new Date(val).toISOString(), "UTC");
+		else {
+			console.error("Invalid date format", val);
+			return;
+		}
+	}
+}
+
+//#endregion
+export { parseAbsoluteDate };
+//# sourceMappingURL=parseDate.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"parseDate.js","names":[],"sources":["../../../../src/components/fields/DatePicker/parseDate.ts"],"sourcesContent":["import { parseAbsolute } from '@internationalized/date';\n\nexport function parseAbsoluteDate(val: string | Date | undefined | null) {\n  if (!val || (typeof val === 'string' && val.trim() === '')) {\n    return undefined;\n  }\n\n  if (val instanceof Date) {\n    return parseAbsolute(val.toISOString(), 'UTC');\n  }\n\n  try {\n    parseAbsolute(val, 'UTC');\n  } catch (e) {\n    if (!Number.isNaN(Date.parse(val))) {\n      return parseAbsolute(new Date(val).toISOString(), 'UTC');\n    } else {\n      console.error('Invalid date format', val);\n      return undefined;\n    }\n  }\n}\n"],"mappings":";;;;AAEA,SAAgB,kBAAkB,KAAuC;AACvE,KAAI,CAAC,OAAQ,OAAO,QAAQ,YAAY,IAAI,MAAM,KAAK,GACrD;AAGF,KAAI,eAAe,KACjB,QAAO,cAAc,IAAI,aAAa,EAAE,MAAM;AAGhD,KAAI;AACF,gBAAc,KAAK,MAAM;UAClB,GAAG;AACV,MAAI,CAAC,OAAO,MAAM,KAAK,MAAM,IAAI,CAAC,CAChC,QAAO,cAAc,IAAI,KAAK,IAAI,CAAC,aAAa,EAAE,MAAM;OACnD;AACL,WAAQ,MAAM,uBAAuB,IAAI;AACzC"}

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

@@ -0,0 +1,17 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+//#region src/components/fields/DatePicker/props.ts
+const DEFAULT_DATE_PROPS = {
+	granularity: "day",
+	hideTimeZone: true,
+	hourCycle: 24,
+	shouldForceLeadingZeros: true
+};
+const DEFAULT_TIME_PROPS = {
+	hideTimeZone: true,
+	hourCycle: 24,
+	shouldForceLeadingZeros: true
+};
+
+//#endregion
+export { DEFAULT_DATE_PROPS, DEFAULT_TIME_PROPS };
+//# sourceMappingURL=props.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"props.js","names":[],"sources":["../../../../src/components/fields/DatePicker/props.ts"],"sourcesContent":["import { AriaDatePickerProps, DateValue } from 'react-aria';\n\nexport const DEFAULT_DATE_PROPS: Partial<AriaDatePickerProps<DateValue>> = {\n  granularity: 'day',\n  hideTimeZone: true,\n  hourCycle: 24,\n  shouldForceLeadingZeros: true,\n};\n\nexport const DEFAULT_TIME_PROPS: Partial<AriaDatePickerProps<DateValue>> = {\n  hideTimeZone: true,\n  hourCycle: 24,\n  shouldForceLeadingZeros: true,\n};\n"],"mappings":";;AAEA,MAAa,qBAA8D;CACzE,aAAa;CACb,cAAc;CACd,WAAW;CACX,yBAAyB;CAC1B;AAED,MAAa,qBAA8D;CACzE,cAAc;CACd,WAAW;CACX,yBAAyB;CAC1B"}

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

@@ -0,0 +1,35 @@
+
+import { DateValue } from "react-aria";
+
+//#region src/components/fields/DatePicker/types.d.ts
+type Granularity = 'day' | 'hour' | 'minute' | 'second';
+interface DateFieldBase<T extends DateValue> {
+  /** The minimum allowed date that a user may select. */
+  minValue?: DateValue;
+  /** The maximum allowed date that a user may select. */
+  maxValue?: DateValue;
+  /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
+  isDateUnavailable?: (date: DateValue) => boolean;
+  /** A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. */
+  placeholderValue?: T;
+  /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */
+  hourCycle?: 12 | 24;
+  /** Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times. */
+  granularity?: Granularity;
+  /**
+   * Whether to hide the time zone abbreviation.
+   * @default false
+   */
+  hideTimeZone?: boolean;
+  /**
+   * Whether to always show leading zeros in the month, day, and hour fields.
+   * By default, this is determined by the user's locale.
+   */
+  shouldForceLeadingZeros?: boolean;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isRequired?: boolean;
+}
+//#endregion
+export { DateFieldBase, Granularity };
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1,45 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { useImperativeHandle, useRef } from "react";
+import { createDOMRef } from "@react-spectrum/utils";
+import { createFocusManager } from "@react-aria/focus";
+
+//#region src/components/fields/DatePicker/utils.ts
+function useFocusManagerRef(ref) {
+	let domRef = useRef(null);
+	useImperativeHandle(ref, () => ({
+		...createDOMRef(domRef),
+		focus() {
+			createFocusManager(domRef).focusFirst({ tabbable: true });
+		}
+	}));
+	return domRef;
+}
+function formatSegments(segments) {
+	segments = JSON.parse(JSON.stringify(segments));
+	segments.forEach((segment) => {
+		if (segment.type === "literal") {
+			if (segment.text === "/") segment.text = "-";
+			if (segment.text === ", ") segment.text = " ";
+		}
+	});
+	const year = segments.find((s) => s.type === "year");
+	if (year) {
+		segments.splice(segments.indexOf(year), 1);
+		segments.unshift(year);
+	}
+	const month = segments.find((s) => s.type === "month");
+	if (month) {
+		segments.splice(segments.indexOf(month), 1);
+		segments.splice(2, 0, month);
+	}
+	const day = segments.find((s) => s.type === "day");
+	if (day) {
+		segments.splice(segments.indexOf(day), 1);
+		segments.splice(4, 0, day);
+	}
+	return segments;
+}
+
+//#endregion
+export { formatSegments, useFocusManagerRef };
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/components/fields/DatePicker/utils.ts"],"sourcesContent":["import { createFocusManager } from '@react-aria/focus';\nimport { createDOMRef } from '@react-spectrum/utils';\nimport { FocusableRef } from '@react-types/shared';\nimport { useImperativeHandle, useRef } from 'react';\nimport { DateSegment } from 'react-stately';\n\n// export function useFormatHelpText(\n//   props: Pick<SpectrumDatePickerBase, 'description' | 'showFormatHelpText'>,\n// ) {\n//   let formatter = useDateFormatter({ dateStyle: 'short' });\n//   let displayNames = useDisplayNames();\n//   return useMemo(() => {\n//     if (props.description) {\n//       return props.description;\n//     }\n//\n//     if (props.showFormatHelpText) {\n//       return formatter\n//         .formatToParts(new Date())\n//         .map((s) => {\n//           if (s.type === 'literal') {\n//             return s.value;\n//           }\n//\n//           return displayNames.of(s.type);\n//         })\n//         .join(' ');\n//     }\n//\n//     return '';\n//   }, [props.description, props.showFormatHelpText, formatter, displayNames]);\n// }\n\n// export function useVisibleMonths(maxVisibleMonths: number) {\n//   let [visibleMonths, setVisibleMonths] = useState(getVisibleMonths('large'));\n//   useLayoutEffect(() => {\n//     let onResize = () => setVisibleMonths(getVisibleMonths('large'));\n//     onResize();\n//\n//     window.addEventListener('resize', onResize);\n//     return () => {\n//       window.removeEventListener('resize', onResize);\n//     };\n//   }, []);\n//\n//   return Math.max(1, Math.min(visibleMonths, maxVisibleMonths, 3));\n// }\n\n// function getVisibleMonths(scale) {\n//   if (typeof window === 'undefined') {\n//     return 1;\n//   }\n//   let monthWidth = scale === 'large' ? 336 : 280;\n//   let gap = scale === 'large' ? 30 : 24;\n//   let popoverPadding = scale === 'large' ? 32 : 48;\n//   return Math.floor(\n//     (window.innerWidth - popoverPadding * 2) / (monthWidth + gap),\n//   );\n// }\n\nexport function useFocusManagerRef(ref: FocusableRef<HTMLElement>) {\n  let domRef = useRef(null);\n  useImperativeHandle(ref, () => ({\n    // @ts-ignore\n    ...createDOMRef(domRef),\n    focus() {\n      // @ts-ignore\n      createFocusManager(domRef).focusFirst({ tabbable: true });\n    },\n  }));\n  return domRef;\n}\n\nexport function formatSegments(segments: DateSegment[]) {\n  segments = JSON.parse(JSON.stringify(segments));\n\n  segments.forEach((segment) => {\n    if (segment.type === 'literal') {\n      if (segment.text === '/') {\n        segment.text = '-';\n      }\n\n      if (segment.text === ', ') {\n        segment.text = ' ';\n      }\n    }\n  });\n\n  const year = segments.find((s) => s.type === 'year');\n\n  if (year) {\n    segments.splice(segments.indexOf(year), 1);\n    segments.unshift(year);\n  }\n\n  const month = segments.find((s) => s.type === 'month');\n\n  if (month) {\n    segments.splice(segments.indexOf(month), 1);\n    segments.splice(2, 0, month);\n  }\n\n  const day = segments.find((s) => s.type === 'day');\n\n  if (day) {\n    segments.splice(segments.indexOf(day), 1);\n    segments.splice(4, 0, day);\n  }\n\n  return segments;\n}\n"],"mappings":";;;;;;AA4DA,SAAgB,mBAAmB,KAAgC;CACjE,IAAI,SAAS,OAAO,KAAK;AACzB,qBAAoB,YAAY;EAE9B,GAAG,aAAa,OAAO;EACvB,QAAQ;AAEN,sBAAmB,OAAO,CAAC,WAAW,EAAE,UAAU,MAAM,CAAC;;EAE5D,EAAE;AACH,QAAO;;AAGT,SAAgB,eAAe,UAAyB;AACtD,YAAW,KAAK,MAAM,KAAK,UAAU,SAAS,CAAC;AAE/C,UAAS,SAAS,YAAY;AAC5B,MAAI,QAAQ,SAAS,WAAW;AAC9B,OAAI,QAAQ,SAAS,IACnB,SAAQ,OAAO;AAGjB,OAAI,QAAQ,SAAS,KACnB,SAAQ,OAAO;;GAGnB;CAEF,MAAM,OAAO,SAAS,MAAM,MAAM,EAAE,SAAS,OAAO;AAEpD,KAAI,MAAM;AACR,WAAS,OAAO,SAAS,QAAQ,KAAK,EAAE,EAAE;AAC1C,WAAS,QAAQ,KAAK;;CAGxB,MAAM,QAAQ,SAAS,MAAM,MAAM,EAAE,SAAS,QAAQ;AAEtD,KAAI,OAAO;AACT,WAAS,OAAO,SAAS,QAAQ,MAAM,EAAE,EAAE;AAC3C,WAAS,OAAO,GAAG,GAAG,MAAM;;CAG9B,MAAM,MAAM,SAAS,MAAM,MAAM,EAAE,SAAS,MAAM;AAElD,KAAI,KAAK;AACP,WAAS,OAAO,SAAS,QAAQ,IAAI,EAAE,EAAE;AACzC,WAAS,OAAO,GAAG,GAAG,IAAI;;AAG5B,QAAO"}

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

@@ -0,0 +1,42 @@
+
+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 * as react from "react";
+import { RefObject } from "react";
+import { AriaTextFieldProps } from "react-aria";
+
+//#region src/components/fields/FileInput/FileInput.d.ts
+interface CubeFileInputProps extends BaseProps, PositionStyleProps, ContainerStyleProps, BlockStyleProps, AriaTextFieldProps, FieldBaseProps {
+  /**
+   * The size of the input
+   * @default default
+   */
+  size?: 'small' | 'default' | 'large' | string;
+  /** The input ref */
+  inputRef?: RefObject<HTMLInputElement>;
+  /** Style map for the input */
+  inputStyles?: Styles;
+  /**
+   * The type of the input
+   * @default file
+   */
+  type?: 'file' | 'text';
+  /** Direct input props */
+  inputProps?: Props;
+  /** The file types that the input should accept */
+  accept?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+}
+/**
+ * FileInputs are file inputs that allow users to select local files to
+ * upload them to the server.
+ */
+declare const _FileInput: react.ForwardRefExoticComponent<CubeFileInputProps & react.RefAttributes<unknown>>;
+//#endregion
+export { CubeFileInputProps, _FileInput };
+//# sourceMappingURL=FileInput.d.ts.map

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

@@ -0,0 +1,182 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.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";
+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 { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createFocusableRef } from "@react-spectrum/utils";
+
+//#region src/components/fields/FileInput/FileInput.tsx
+const FileInputElement = tasty(Action, {
+	qa: "FileInputWrapper",
+	styles: {
+		display: "inline-flex",
+		position: "relative",
+		preset: "t3",
+		padding: ".5x 1x",
+		gap: "1x",
+		flow: "row",
+		placeItems: "center start",
+		fill: {
+			"": "#white",
+			"drag-hover": "#primary.16",
+			":hover": "#primary.08",
+			disabled: "#dark.04"
+		},
+		border: {
+			"": true,
+			":focus-within & :focus-visible": "#primary-text"
+		},
+		radius: true,
+		cursor: "$pointer",
+		overflow: "hidden",
+		whiteSpace: "nowrap",
+		Button: {
+			radius: true,
+			border: {
+				"": "#clear",
+				pressed: "#primary.30"
+			},
+			fill: "#primary.12",
+			color: {
+				"": "#primary",
+				disabled: "#dark.30"
+			},
+			padding: ".5x (1.5x - 1px)",
+			transition: "theme"
+		},
+		Placeholder: {
+			color: "#dark-02",
+			whiteSpace: "nowrap",
+			textOverflow: "ellipsis",
+			width: "max 100%",
+			overflow: "hidden"
+		},
+		Value: {
+			color: "#dark-02",
+			whiteSpace: "nowrap",
+			textOverflow: "ellipsis",
+			width: "max 100%",
+			overflow: "hidden"
+		},
+		Input: {
+			position: "absolute",
+			top: 0,
+			right: 0,
+			bottom: 0,
+			left: 0,
+			radius: "$content-radius",
+			opacity: .01,
+			cursor: "$pointer",
+			zIndex: 10
+		}
+	}
+});
+function extractContents(element, callback) {
+	const files = element?.files;
+	if (files && files.length > 0) {
+		const fileReader = new FileReader();
+		fileReader.onload = function() {
+			callback(fileReader.result);
+		};
+		fileReader.readAsText(files[0]);
+	}
+}
+function extractFileNameFromValue(value) {
+	return typeof value === "string" ? value.split("\\")?.pop() : void 0;
+}
+function FileInput(props, ref) {
+	props = useProviderProps(props);
+	props = useFormProps(props);
+	props = useFieldProps({ ...props }, {
+		defaultValidationTrigger: "onChange",
+		valuePropsMapper: ({ value, onChange }) => ({
+			onChange,
+			value: props.type === "file" || !props.type ? value : void 0
+		})
+	});
+	let { id, name, qa, value, onChange, placeholder, inputRef, isDisabled, inputStyles, type = "file", inputProps, accept, form, ...otherProps } = props;
+	const [dragHover, setDragHover] = useState(false);
+	const defaultValue = useMemo(() => type === "file" ? value : void 0, [type, value]);
+	const [fileName, setFileName] = useState(useMemo(() => extractFileNameFromValue(defaultValue), []));
+	let domRef = useRef(null);
+	inputRef = useCombinedRefs(inputRef);
+	const onLocalChange = useCallback((event) => {
+		const value = event.target.value;
+		setFileName(extractFileNameFromValue(value));
+		if (type === "file") onChange?.(value);
+		else extractContents(event.target, onChange);
+	}, [onChange]);
+	extractStyles(otherProps, CONTAINER_STYLES);
+	useImperativeHandle(ref, () => ({
+		...createFocusableRef(domRef, inputRef),
+		select() {
+			if (inputRef?.current) inputRef.current.select();
+		},
+		getInputElement() {
+			return inputRef?.current;
+		}
+	}));
+	return wrapWithField(/* @__PURE__ */ jsxs(FileInputElement, {
+		ref: domRef,
+		styles: inputStyles,
+		isDisabled,
+		mods: {
+			selected: !!value,
+			"drag-hover": dragHover
+		},
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === "Space") inputRef?.current?.click();
+		},
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				id,
+				name,
+				accept,
+				"data-qa": qa || "FileInput",
+				"data-input-type": "fileinput",
+				"data-element": "Input",
+				disabled: isDisabled,
+				type: "file",
+				multiple: false,
+				tabIndex: -1,
+				onChange: onLocalChange,
+				onDragEnter: () => {
+					setDragHover(true);
+				},
+				onDragLeave: () => {
+					setDragHover(false);
+				},
+				onDrop: () => {
+					setDragHover(false);
+				},
+				...inputProps
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-element": "Button",
+				children: "Choose file"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-element": fileName ? "Value" : "Placeholder",
+				children: fileName || placeholder || "No file selected"
+			})
+		]
+	}), domRef, { ...props });
+}
+/**
+* FileInputs are file inputs that allow users to select local files to
+* upload them to the server.
+*/
+const _FileInput = forwardRef(FileInput);
+_FileInput.displayName = "FileInput";
+
+//#endregion
+export { _FileInput };
+//# sourceMappingURL=FileInput.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,87 @@
+
+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 { ForwardedRef, ReactElement, ReactNode, RefObject } from "react";
+import { Item, Section } from "react-stately";
+import { Collection, Key as Key$1, Node } from "@react-types/shared";
+
+//#region src/components/fields/FilterListBox/FilterListBox.d.ts
+type FilterFn = (textValue: string, inputValue: string) => boolean;
+interface CubeFilterListBoxProps<T> extends Omit<CubeListBoxProps<T>, 'filter'>, FieldBaseProps {
+  /** Placeholder text for the search input */
+  searchPlaceholder?: string;
+  /** Whether the search input should have autofocus */
+  autoFocus?: boolean;
+  /**
+   * Custom filter function for determining if an option should be included in search results.
+   * Pass `false` to disable internal filtering completely (useful for external filtering).
+   */
+  filter?: FilterFn | false;
+  /** Custom label to display when no results are found after filtering */
+  emptyLabel?: ReactNode;
+  /** Custom styles for the search input */
+  searchInputStyles?: Styles;
+  /** Whether the FilterListBox is in loading state (shows loading icon in search input) */
+  isLoading?: boolean;
+  /** Ref for accessing the search input element */
+  searchInputRef?: RefObject<HTMLInputElement | null>;
+  /** Whether to allow entering custom values that are not present in the predefined options */
+  allowsCustomValue?: boolean;
+  /** Additional modifiers for styling the FilterListBox */
+  mods?: Record<string, boolean>;
+  /** Custom styles for the list box */
+  listBoxStyles?: Styles;
+  /**
+   * Callback fired when the user presses Escape key while the search input is empty.
+   * Can be used by parent components (e.g. FilterPicker) to close an enclosing Dialog.
+   */
+  onEscape?: () => void;
+  /**
+   * Whether to show checkboxes for multiple selection mode.
+   * This adds a checkbox icon to the left of each option.
+   */
+  isCheckable?: boolean;
+  /**
+   * Callback fired when an option is clicked but not on the checkbox area.
+   * Used by FilterPicker to close the popover on non-checkbox clicks.
+   */
+  onOptionClick?: (key: Key$1) => void;
+  /**
+   * Props to apply to existing custom values (values that are already selected but not in the predefined options).
+   */
+  customValueProps?: Partial<CubeCollectionItemProps<T>>;
+  /**
+   * Props to apply to new custom values (values typed in the search input that are about to be added).
+   * These are merged with customValueProps for new custom values.
+   */
+  newCustomValueProps?: Partial<CubeCollectionItemProps<T>>;
+  /**
+   * Controlled search value. When provided, the search input becomes controlled.
+   * Use with `onSearchChange` to manage the search state externally.
+   */
+  searchValue?: string;
+  /**
+   * Callback fired when the search input value changes.
+   * Use with `searchValue` for controlled search input.
+   */
+  onSearchChange?: (value: string) => void;
+  /**
+   * Pre-built collection to use instead of creating a new one.
+   * Used internally by FilterPicker to avoid duplicate collection creation.
+   * @internal
+   */
+  _internalCollection?: Collection<Node<any>>;
+}
+declare const FilterListBox: (<T>(props: CubeFilterListBoxProps<T> & {
+  ref?: ForwardedRef<HTMLDivElement>;
+}) => ReactElement) & {
+  Item: typeof Item;
+  Section: typeof Section;
+};
+//#endregion
+export { CubeFilterListBoxProps, FilterListBox };
+//# sourceMappingURL=FilterListBox.d.ts.map