@cognite/aura 0.3.5 → 1.46105.0

package/dist/components/ui/core/date-time-pickers/shared/date-time-input/date-time-input.d.ts

@@ -1,19 +1,20 @@
-import { FC } from 'react';
-import { Dayjs } from 'dayjs';
+import type { FC } from "react";
+import type { Dayjs } from "dayjs";
 export declare const DEFAULT_ARIA_LABEL = "Date picker";
-export type DateTimeInputVariant = 'date' | 'time' | 'datetime';
-export type RangePart = 'start' | 'end';
+export type DateTimeInputVariant = "date" | "time" | "datetime";
+export type RangePart = "start" | "end";
 export interface DateTimeInputProps {
-    value: [Dayjs | null, Dayjs | null] | Dayjs | null;
-    format: string;
-    placeholder?: string;
-    onClick?: () => void;
-    isOpen: boolean;
-    className?: string;
-    ariaLabel?: string;
-    variant?: DateTimeInputVariant;
-    activeRangePart?: RangePart;
-    onRangePartClick?: (part: RangePart) => void;
-    popoverId?: string;
+	value: [Dayjs | null, Dayjs | null] | Dayjs | null;
+	format: string;
+	placeholder?: string;
+	onClick?: () => void;
+	isOpen: boolean;
+	className?: string;
+	ariaLabel?: string;
+	variant?: DateTimeInputVariant;
+	activeRangePart?: RangePart;
+	onRangePartClick?: (part: RangePart) => void;
+	popoverId?: string;
+	disabled?: boolean;
 }
 export declare const DateTimeInput: FC<DateTimeInputProps>;

package/dist/components/ui/core/date-time-pickers/shared/date-time-input/date-time-input.js

@@ -1,65 +1,88 @@
-import { cn as e } from "../../../../../../lib/utils.js";
-import { Input as t } from "../../../input/input.js";
-import { RangeInputDisplay as n } from "./range-input-display.js";
-import { IconCalendar as r, IconCalendarClock as i, IconClock as a } from "@tabler/icons-react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-//#region libs/aura/src/components/ui/core/date-time-pickers/shared/date-time-input/date-time-input.tsx
-var c = "Date picker", l = () => void 0, u = {
-	date: /* @__PURE__ */ o(r, {
-		"aria-label": "date-icon",
-		className: "size-4"
-	}),
-	time: /* @__PURE__ */ o(a, {
-		"aria-label": "time-icon",
-		className: "size-4"
-	}),
-	datetime: /* @__PURE__ */ o(i, {
-		"aria-label": "datetime-icon",
-		className: "size-4"
-	})
-}, d = (t, n) => e("absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none", "flex items-center justify-center", "transition-colors duration-150", n || t ? "text-foreground" : "text-muted-foreground", "group-hover:text-foreground"), f = ({ value: r, format: i, placeholder: a, onClick: f, isOpen: p, className: m, ariaLabel: h = c, variant: g = "date", activeRangePart: _, onRangePartClick: v, popoverId: y }) => {
-	if (Array.isArray(r)) {
-		let t = r[0] !== null || r[1] !== null;
-		return /* @__PURE__ */ s("div", {
-			"data-slot": "date-time-input",
-			className: e("relative flex items-center cursor-pointer w-full group", m),
-			role: "combobox",
-			"aria-label": h,
-			"aria-expanded": p,
-			"aria-controls": y,
-			onClick: f,
-			children: [/* @__PURE__ */ o(n, {
-				startDate: r[0],
-				endDate: r[1],
-				format: i,
-				activeRangePart: _,
-				onRangePartClick: v,
-				isOpen: p
-			}), /* @__PURE__ */ o("div", {
-				className: d(p, t),
-				children: u[g]
-			})]
-		});
-	}
-	let b = r?.format(i) ?? "", x = b.length > 0, S = a ?? i;
-	return /* @__PURE__ */ s("div", {
-		"data-slot": "date-time-input",
-		className: e("relative flex items-center cursor-pointer w-full group", m),
-		onClick: f,
-		children: [/* @__PURE__ */ o(t, {
-			value: b,
-			placeholder: S,
-			onChange: l,
-			"aria-label": h,
-			"aria-expanded": p,
-			"aria-controls": y,
-			role: "combobox",
-			className: e("border-transparent bg-muted-background cursor-pointer caret-transparent pr-9", x ? "text-foreground" : "text-muted-foreground", "hover:border-border-emphasized", p && "!bg-background !text-foreground !border-border")
-		}), /* @__PURE__ */ o("div", {
-			className: d(p, x),
-			children: u[g]
-		})]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconCalendar, IconCalendarClock, IconClock } from "@tabler/icons-react";
+import { cn } from "../../../../../../lib/utils.js";
+import { Input } from "../../../input/input.js";
+import { RangeInputDisplay } from "./range-input-display.js";
+export const DEFAULT_ARIA_LABEL = 'Date picker';
+const noop = ()=>undefined;
+const VARIANT_ICONS = {
+    date: /*#__PURE__*/ _jsx(IconCalendar, {
+        "aria-label": "date-icon",
+        className: "size-4"
+    }),
+    time: /*#__PURE__*/ _jsx(IconClock, {
+        "aria-label": "time-icon",
+        className: "size-4"
+    }),
+    datetime: /*#__PURE__*/ _jsx(IconCalendarClock, {
+        "aria-label": "datetime-icon",
+        className: "size-4"
+    })
 };
-//#endregion
-export { c as DEFAULT_ARIA_LABEL, f as DateTimeInput };
+const iconOverlay = (isOpen, isFilled, disabled)=>{
+    let colorClass = 'text-muted-foreground';
+    if (disabled) {
+        colorClass = 'text-base-foreground-disabled';
+    } else if (isFilled || isOpen) {
+        colorClass = 'text-base-foreground';
+    }
+    return cn('absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none', 'flex items-center justify-center', 'transition-colors duration-150', colorClass, !disabled && 'group-hover:text-base-foreground');
+};
+export const DateTimeInput = ({ value, format, placeholder, onClick, isOpen, className, ariaLabel = DEFAULT_ARIA_LABEL, variant = 'date', activeRangePart, onRangePartClick, popoverId, disabled })=>{
+    const isRangeValue = Array.isArray(value);
+    if (isRangeValue) {
+        const isRangeFilled = value[0] !== null || value[1] !== null;
+        return /*#__PURE__*/ _jsxs("div", {
+            "data-slot": "date-time-input",
+            className: cn('relative flex items-center w-full group', disabled ? 'cursor-not-allowed' : 'cursor-pointer', className),
+            role: "combobox",
+            "aria-label": ariaLabel,
+            "aria-expanded": isOpen,
+            "aria-controls": popoverId,
+            "aria-disabled": disabled || undefined,
+            onClick: disabled ? undefined : onClick,
+            children: [
+                /*#__PURE__*/ _jsx(RangeInputDisplay, {
+                    startDate: value[0],
+                    endDate: value[1],
+                    format: format,
+                    activeRangePart: activeRangePart,
+                    onRangePartClick: onRangePartClick,
+                    isOpen: isOpen,
+                    disabled: disabled
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: iconOverlay(isOpen, isRangeFilled, disabled),
+                    children: VARIANT_ICONS[variant]
+                })
+            ]
+        });
+    }
+    const displayValue = value?.format(format) ?? '';
+    const isFilled = displayValue.length > 0;
+    const placeholderText = placeholder ?? format;
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-slot": "date-time-input",
+        className: cn('relative flex items-center w-full group', disabled ? 'cursor-not-allowed' : 'cursor-pointer', className),
+        onClick: disabled ? undefined : onClick,
+        children: [
+            /*#__PURE__*/ _jsx(Input, {
+                value: displayValue,
+                placeholder: placeholderText,
+                onChange: noop,
+                disabled: disabled,
+                "aria-label": ariaLabel,
+                "aria-expanded": isOpen,
+                "aria-controls": popoverId,
+                role: "combobox",
+                className: cn('border-transparent bg-medium-background caret-transparent pr-9', disabled ? 'cursor-not-allowed' : 'cursor-pointer', !disabled && (isFilled ? 'text-base-foreground' : 'text-muted-foreground'), !disabled && 'hover:border-emphasized', !disabled && isOpen && '!bg-base-background !text-base-foreground !border-default')
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: iconOverlay(isOpen, isFilled, disabled),
+                children: VARIANT_ICONS[variant]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=date-time-input.js.map

package/dist/components/ui/core/date-time-pickers/shared/date-time-input/date-time-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/ui/core/date-time-pickers/shared/date-time-input/date-time-input.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\n\nimport {\n  IconCalendar,\n  IconCalendarClock,\n  IconClock,\n} from '@tabler/icons-react';\nimport type { Dayjs } from 'dayjs';\n\nimport { cn } from '../../../../../../lib/utils';\nimport { Input } from '../../../input/input';\n\nimport { RangeInputDisplay } from './range-input-display';\n\nexport const DEFAULT_ARIA_LABEL = 'Date picker';\n\nconst noop = () => undefined;\n\nexport type DateTimeInputVariant = 'date' | 'time' | 'datetime';\nexport type RangePart = 'start' | 'end';\n\nconst VARIANT_ICONS: Record<DateTimeInputVariant, ReactNode> = {\n  date: <IconCalendar aria-label=\"date-icon\" className=\"size-4\" />,\n  time: <IconClock aria-label=\"time-icon\" className=\"size-4\" />,\n  datetime: <IconCalendarClock aria-label=\"datetime-icon\" className=\"size-4\" />,\n};\n\nconst iconOverlay = (\n  isOpen: boolean,\n  isFilled: boolean,\n  disabled?: boolean\n) => {\n  let colorClass = 'text-muted-foreground';\n  if (disabled) {\n    colorClass = 'text-base-foreground-disabled';\n  } else if (isFilled || isOpen) {\n    colorClass = 'text-base-foreground';\n  }\n\n  return cn(\n    'absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none',\n    'flex items-center justify-center',\n    'transition-colors duration-150',\n    colorClass,\n    !disabled && 'group-hover:text-base-foreground'\n  );\n};\n\nexport interface DateTimeInputProps {\n  value: [Dayjs | null, Dayjs | null] | Dayjs | null;\n  format: string;\n  placeholder?: string;\n  onClick?: () => void;\n  isOpen: boolean;\n  className?: string;\n  ariaLabel?: string;\n  variant?: DateTimeInputVariant;\n  activeRangePart?: RangePart;\n  onRangePartClick?: (part: RangePart) => void;\n  popoverId?: string;\n  disabled?: boolean;\n}\n\nexport const DateTimeInput: FC<DateTimeInputProps> = ({\n  value,\n  format,\n  placeholder,\n  onClick,\n  isOpen,\n  className,\n  ariaLabel = DEFAULT_ARIA_LABEL,\n  variant = 'date',\n  activeRangePart,\n  onRangePartClick,\n  popoverId,\n  disabled,\n}) => {\n  const isRangeValue = Array.isArray(value);\n\n  if (isRangeValue) {\n    const isRangeFilled = value[0] !== null || value[1] !== null;\n    return (\n      <div\n        data-slot=\"date-time-input\"\n        className={cn(\n          'relative flex items-center w-full group',\n          disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n          className\n        )}\n        role=\"combobox\"\n        aria-label={ariaLabel}\n        aria-expanded={isOpen}\n        aria-controls={popoverId}\n        aria-disabled={disabled || undefined}\n        onClick={disabled ? undefined : onClick}\n      >\n        <RangeInputDisplay\n          startDate={value[0]}\n          endDate={value[1]}\n          format={format}\n          activeRangePart={activeRangePart}\n          onRangePartClick={onRangePartClick}\n          isOpen={isOpen}\n          disabled={disabled}\n        />\n        <div className={iconOverlay(isOpen, isRangeFilled, disabled)}>\n          {VARIANT_ICONS[variant]}\n        </div>\n      </div>\n    );\n  }\n\n  const displayValue = value?.format(format) ?? '';\n  const isFilled = displayValue.length > 0;\n  const placeholderText = placeholder ?? format;\n\n  return (\n    <div\n      data-slot=\"date-time-input\"\n      className={cn(\n        'relative flex items-center w-full group',\n        disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n        className\n      )}\n      onClick={disabled ? undefined : onClick}\n    >\n      <Input\n        value={displayValue}\n        placeholder={placeholderText}\n        onChange={noop}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-expanded={isOpen}\n        aria-controls={popoverId}\n        role=\"combobox\"\n        className={cn(\n          'border-transparent bg-medium-background caret-transparent pr-9',\n          disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n          !disabled &&\n            (isFilled ? 'text-base-foreground' : 'text-muted-foreground'),\n          !disabled && 'hover:border-emphasized',\n          !disabled &&\n            isOpen &&\n            '!bg-base-background !text-base-foreground !border-default'\n        )}\n      />\n      <div className={iconOverlay(isOpen, isFilled, disabled)}>\n        {VARIANT_ICONS[variant]}\n      </div>\n    </div>\n  );\n};\n"],"names":["IconCalendar","IconCalendarClock","IconClock","cn","Input","RangeInputDisplay","DEFAULT_ARIA_LABEL","noop","undefined","VARIANT_ICONS","date","aria-label","className","time","datetime","iconOverlay","isOpen","isFilled","disabled","colorClass","DateTimeInput","value","format","placeholder","onClick","ariaLabel","variant","activeRangePart","onRangePartClick","popoverId","isRangeValue","Array","isArray","isRangeFilled","div","data-slot","role","aria-expanded","aria-controls","aria-disabled","startDate","endDate","displayValue","length","placeholderText","onChange"],"mappings":";AAEA,SACEA,YAAY,EACZC,iBAAiB,EACjBC,SAAS,QACJ,sBAAsB;AAG7B,SAASC,EAAE,QAAQ,iCAA8B;AACjD,SAASC,KAAK,QAAQ,0BAAuB;AAE7C,SAASC,iBAAiB,QAAQ,2BAAwB;AAE1D,OAAO,MAAMC,qBAAqB,cAAc;AAEhD,MAAMC,OAAO,IAAMC;AAKnB,MAAMC,gBAAyD;IAC7DC,oBAAM,KAACV;QAAaW,cAAW;QAAYC,WAAU;;IACrDC,oBAAM,KAACX;QAAUS,cAAW;QAAYC,WAAU;;IAClDE,wBAAU,KAACb;QAAkBU,cAAW;QAAgBC,WAAU;;AACpE;AAEA,MAAMG,cAAc,CAClBC,QACAC,UACAC;IAEA,IAAIC,aAAa;IACjB,IAAID,UAAU;QACZC,aAAa;IACf,OAAO,IAAIF,YAAYD,QAAQ;QAC7BG,aAAa;IACf;IAEA,OAAOhB,GACL,iEACA,oCACA,kCACAgB,YACA,CAACD,YAAY;AAEjB;AAiBA,OAAO,MAAME,gBAAwC,CAAC,EACpDC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,OAAO,EACPR,MAAM,EACNJ,SAAS,EACTa,YAAYnB,kBAAkB,EAC9BoB,UAAU,MAAM,EAChBC,eAAe,EACfC,gBAAgB,EAChBC,SAAS,EACTX,QAAQ,EACT;IACC,MAAMY,eAAeC,MAAMC,OAAO,CAACX;IAEnC,IAAIS,cAAc;QAChB,MAAMG,gBAAgBZ,KAAK,CAAC,EAAE,KAAK,QAAQA,KAAK,CAAC,EAAE,KAAK;QACxD,qBACE,MAACa;YACCC,aAAU;YACVvB,WAAWT,GACT,2CACAe,WAAW,uBAAuB,kBAClCN;YAEFwB,MAAK;YACLzB,cAAYc;YACZY,iBAAerB;YACfsB,iBAAeT;YACfU,iBAAerB,YAAYV;YAC3BgB,SAASN,WAAWV,YAAYgB;;8BAEhC,KAACnB;oBACCmC,WAAWnB,KAAK,CAAC,EAAE;oBACnBoB,SAASpB,KAAK,CAAC,EAAE;oBACjBC,QAAQA;oBACRK,iBAAiBA;oBACjBC,kBAAkBA;oBAClBZ,QAAQA;oBACRE,UAAUA;;8BAEZ,KAACgB;oBAAItB,WAAWG,YAAYC,QAAQiB,eAAef;8BAChDT,aAAa,CAACiB,QAAQ;;;;IAI/B;IAEA,MAAMgB,eAAerB,OAAOC,OAAOA,WAAW;IAC9C,MAAML,WAAWyB,aAAaC,MAAM,GAAG;IACvC,MAAMC,kBAAkBrB,eAAeD;IAEvC,qBACE,MAACY;QACCC,aAAU;QACVvB,WAAWT,GACT,2CACAe,WAAW,uBAAuB,kBAClCN;QAEFY,SAASN,WAAWV,YAAYgB;;0BAEhC,KAACpB;gBACCiB,OAAOqB;gBACPnB,aAAaqB;gBACbC,UAAUtC;gBACVW,UAAUA;gBACVP,cAAYc;gBACZY,iBAAerB;gBACfsB,iBAAeT;gBACfO,MAAK;gBACLxB,WAAWT,GACT,kEACAe,WAAW,uBAAuB,kBAClC,CAACA,YACED,CAAAA,WAAW,yBAAyB,uBAAsB,GAC7D,CAACC,YAAY,2BACb,CAACA,YACCF,UACA;;0BAGN,KAACkB;gBAAItB,WAAWG,YAAYC,QAAQC,UAAUC;0BAC3CT,aAAa,CAACiB,QAAQ;;;;AAI/B,EAAE"}

package/dist/components/ui/core/date-time-pickers/shared/date-time-input/range-input-display.d.ts

@@ -1,12 +1,13 @@
-import { FC } from 'react';
-import { Dayjs } from 'dayjs';
-import { RangePart } from './date-time-input';
+import type { FC } from "react";
+import type { Dayjs } from "dayjs";
+import type { RangePart } from "./date-time-input";
 export interface RangeInputDisplayProps {
-    startDate: Dayjs | null;
-    endDate: Dayjs | null;
-    format: string;
-    activeRangePart?: RangePart;
-    onRangePartClick?: (part: RangePart) => void;
-    isOpen?: boolean;
+	startDate: Dayjs | null;
+	endDate: Dayjs | null;
+	format: string;
+	activeRangePart?: RangePart;
+	onRangePartClick?: (part: RangePart) => void;
+	isOpen?: boolean;
+	disabled?: boolean;
 }
 export declare const RangeInputDisplay: FC<RangeInputDisplayProps>;

package/dist/components/ui/core/date-time-pickers/shared/date-time-input/range-input-display.js

@@ -1,39 +1,90 @@
-import { cn as e } from "../../../../../../lib/utils.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-//#region libs/aura/src/components/ui/core/date-time-pickers/shared/date-time-input/range-input-display.tsx
-var r = "px-1 py-0.5 rounded-sm transition-colors duration-150", i = "text-muted-foreground group-hover:text-foreground transition-colors duration-150", a = ({ startDate: a, endDate: o, format: s, activeRangePart: c, onRangePartClick: l, isOpen: u }) => {
-	let d = a !== null || o !== null, f = (e) => (t) => {
-		l && (t.stopPropagation(), l(e));
-	};
-	return /* @__PURE__ */ n("div", {
-		className: e("flex items-center w-full py-1 px-3 pr-9 border rounded-lg", "text-sm leading-5 h-9 box-border whitespace-nowrap overflow-hidden", "transition-[background,border-color,color,box-shadow] duration-150", u ? "bg-background text-foreground border-border shadow-focus-ring" : [
-			"bg-muted-background border-transparent",
-			"hover:bg-accent-background hover:text-foreground hover:border-border-emphasized",
-			d ? "text-foreground" : "text-muted-foreground"
-		]),
-		children: [
-			/* @__PURE__ */ t("span", {
-				className: e(r, l ? "cursor-pointer" : "cursor-default", c === "start" ? "bg-active-muted-background" : l && "hover:bg-active-muted-background-hover"),
-				onClick: f("start"),
-				children: a ? a.format(s) : /* @__PURE__ */ t("span", {
-					className: i,
-					children: s
-				})
-			}),
-			/* @__PURE__ */ t("span", {
-				className: e("select-none transition-colors duration-150", d ? "text-foreground" : "text-muted-foreground group-hover:text-foreground"),
-				children: " – "
-			}),
-			/* @__PURE__ */ t("span", {
-				className: e(r, l ? "cursor-pointer" : "cursor-default", c === "end" ? "bg-active-muted-background" : l && "hover:bg-active-muted-background-hover"),
-				onClick: f("end"),
-				children: o ? o.format(s) : /* @__PURE__ */ t("span", {
-					className: i,
-					children: s
-				})
-			})
-		]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../../../lib/utils.js";
+const SEGMENT_BASE = 'px-1 py-0.5 rounded-sm transition-colors duration-150';
+const PLACEHOLDER_TEXT = 'text-muted-foreground group-hover:text-base-foreground transition-colors duration-150';
+const DisabledRangeInputDisplay = ({ startDate, endDate, format })=>{
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('flex items-center w-full py-1 px-3 pr-9 border rounded-lg', 'text-sm leading-5 h-9 box-border whitespace-nowrap overflow-hidden', 'transition-[background,border-color,color,box-shadow] duration-150', 'bg-transparent border-disabled text-base-foreground-disabled cursor-not-allowed'),
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: cn(SEGMENT_BASE, 'cursor-not-allowed'),
+                children: startDate ? startDate.format(format) : /*#__PURE__*/ _jsx("span", {
+                    className: "text-base-foreground-disabled",
+                    children: format
+                })
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: "select-none transition-colors duration-150 text-base-foreground-disabled",
+                children: ' – '
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: cn(SEGMENT_BASE, 'cursor-not-allowed'),
+                children: endDate ? endDate.format(format) : /*#__PURE__*/ _jsx("span", {
+                    className: "text-base-foreground-disabled",
+                    children: format
+                })
+            })
+        ]
+    });
 };
-//#endregion
-export { a as RangeInputDisplay };
+export const RangeInputDisplay = ({ startDate, endDate, format, activeRangePart, onRangePartClick, isOpen, disabled })=>{
+    if (disabled) {
+        return /*#__PURE__*/ _jsx(DisabledRangeInputDisplay, {
+            startDate: startDate,
+            endDate: endDate,
+            format: format
+        });
+    }
+    const isFilled = startDate !== null || endDate !== null;
+    const handlePartClick = (part)=>(e)=>{
+            if (!onRangePartClick) return;
+            e.stopPropagation();
+            onRangePartClick(part);
+        };
+    let containerStateClass = 'bg-medium-background border-transparent hover:border-emphasized';
+    if (isOpen) {
+        containerStateClass = 'bg-base-background text-base-foreground border-default shadow-focus-ring';
+    } else if (isFilled) {
+        containerStateClass = cn(containerStateClass, 'text-base-foreground');
+    } else {
+        containerStateClass = cn(containerStateClass, 'text-muted-foreground');
+    }
+    const segmentCursorClass = onRangePartClick ? 'cursor-pointer' : 'cursor-default';
+    const separatorColorClass = isFilled ? 'text-base-foreground' : 'text-muted-foreground group-hover:text-base-foreground';
+    const segmentPartClass = (part)=>{
+        if (activeRangePart === part) {
+            return 'bg-active-muted-background';
+        }
+        if (onRangePartClick) {
+            return 'hover:bg-active-muted-background-hover';
+        }
+        return undefined;
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('flex items-center w-full py-1 px-3 pr-9 border rounded-lg', 'text-sm leading-5 h-9 box-border whitespace-nowrap overflow-hidden', 'transition-[background,border-color,color,box-shadow] duration-150', containerStateClass),
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: cn(SEGMENT_BASE, segmentCursorClass, segmentPartClass('start')),
+                onClick: handlePartClick('start'),
+                children: startDate ? startDate.format(format) : /*#__PURE__*/ _jsx("span", {
+                    className: PLACEHOLDER_TEXT,
+                    children: format
+                })
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: cn('select-none transition-colors duration-150', separatorColorClass),
+                children: ' – '
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: cn(SEGMENT_BASE, segmentCursorClass, segmentPartClass('end')),
+                onClick: handlePartClick('end'),
+                children: endDate ? endDate.format(format) : /*#__PURE__*/ _jsx("span", {
+                    className: PLACEHOLDER_TEXT,
+                    children: format
+                })
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=range-input-display.js.map

package/dist/components/ui/core/date-time-pickers/shared/date-time-input/range-input-display.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/ui/core/date-time-pickers/shared/date-time-input/range-input-display.tsx"],"sourcesContent":["import type { FC, MouseEvent } from 'react';\n\nimport type { Dayjs } from 'dayjs';\n\nimport { cn } from '../../../../../../lib/utils';\n\nimport type { RangePart } from './date-time-input';\n\nconst SEGMENT_BASE = 'px-1 py-0.5 rounded-sm transition-colors duration-150';\nconst PLACEHOLDER_TEXT =\n  'text-muted-foreground group-hover:text-base-foreground transition-colors duration-150';\n\nexport interface RangeInputDisplayProps {\n  startDate: Dayjs | null;\n  endDate: Dayjs | null;\n  format: string;\n  activeRangePart?: RangePart;\n  onRangePartClick?: (part: RangePart) => void;\n  isOpen?: boolean;\n  disabled?: boolean;\n}\n\ntype DisabledRangeInputDisplayProps = Pick<\n  RangeInputDisplayProps,\n  'startDate' | 'endDate' | 'format'\n>;\n\nconst DisabledRangeInputDisplay: FC<DisabledRangeInputDisplayProps> = ({\n  startDate,\n  endDate,\n  format,\n}) => {\n  return (\n    <div\n      className={cn(\n        'flex items-center w-full py-1 px-3 pr-9 border rounded-lg',\n        'text-sm leading-5 h-9 box-border whitespace-nowrap overflow-hidden',\n        'transition-[background,border-color,color,box-shadow] duration-150',\n        'bg-transparent border-disabled text-base-foreground-disabled cursor-not-allowed'\n      )}\n    >\n      <span className={cn(SEGMENT_BASE, 'cursor-not-allowed')}>\n        {startDate ? (\n          startDate.format(format)\n        ) : (\n          <span className=\"text-base-foreground-disabled\">{format}</span>\n        )}\n      </span>\n      <span className=\"select-none transition-colors duration-150 text-base-foreground-disabled\">\n        {' – '}\n      </span>\n      <span className={cn(SEGMENT_BASE, 'cursor-not-allowed')}>\n        {endDate ? (\n          endDate.format(format)\n        ) : (\n          <span className=\"text-base-foreground-disabled\">{format}</span>\n        )}\n      </span>\n    </div>\n  );\n};\n\nexport const RangeInputDisplay: FC<RangeInputDisplayProps> = ({\n  startDate,\n  endDate,\n  format,\n  activeRangePart,\n  onRangePartClick,\n  isOpen,\n  disabled,\n}) => {\n  if (disabled) {\n    return (\n      <DisabledRangeInputDisplay\n        startDate={startDate}\n        endDate={endDate}\n        format={format}\n      />\n    );\n  }\n\n  const isFilled = startDate !== null || endDate !== null;\n\n  const handlePartClick = (part: RangePart) => (e: MouseEvent) => {\n    if (!onRangePartClick) return;\n    e.stopPropagation();\n    onRangePartClick(part);\n  };\n\n  let containerStateClass =\n    'bg-medium-background border-transparent hover:border-emphasized';\n  if (isOpen) {\n    containerStateClass =\n      'bg-base-background text-base-foreground border-default shadow-focus-ring';\n  } else if (isFilled) {\n    containerStateClass = cn(containerStateClass, 'text-base-foreground');\n  } else {\n    containerStateClass = cn(containerStateClass, 'text-muted-foreground');\n  }\n\n  const segmentCursorClass = onRangePartClick\n    ? 'cursor-pointer'\n    : 'cursor-default';\n\n  const separatorColorClass = isFilled\n    ? 'text-base-foreground'\n    : 'text-muted-foreground group-hover:text-base-foreground';\n\n  const segmentPartClass = (part: RangePart) => {\n    if (activeRangePart === part) {\n      return 'bg-active-muted-background';\n    }\n    if (onRangePartClick) {\n      return 'hover:bg-active-muted-background-hover';\n    }\n    return undefined;\n  };\n\n  return (\n    <div\n      className={cn(\n        'flex items-center w-full py-1 px-3 pr-9 border rounded-lg',\n        'text-sm leading-5 h-9 box-border whitespace-nowrap overflow-hidden',\n        'transition-[background,border-color,color,box-shadow] duration-150',\n        containerStateClass\n      )}\n    >\n      <span\n        className={cn(\n          SEGMENT_BASE,\n          segmentCursorClass,\n          segmentPartClass('start')\n        )}\n        onClick={handlePartClick('start')}\n      >\n        {startDate ? (\n          startDate.format(format)\n        ) : (\n          <span className={PLACEHOLDER_TEXT}>{format}</span>\n        )}\n      </span>\n      <span\n        className={cn(\n          'select-none transition-colors duration-150',\n          separatorColorClass\n        )}\n      >\n        {' – '}\n      </span>\n      <span\n        className={cn(\n          SEGMENT_BASE,\n          segmentCursorClass,\n          segmentPartClass('end')\n        )}\n        onClick={handlePartClick('end')}\n      >\n        {endDate ? (\n          endDate.format(format)\n        ) : (\n          <span className={PLACEHOLDER_TEXT}>{format}</span>\n        )}\n      </span>\n    </div>\n  );\n};\n"],"names":["cn","SEGMENT_BASE","PLACEHOLDER_TEXT","DisabledRangeInputDisplay","startDate","endDate","format","div","className","span","RangeInputDisplay","activeRangePart","onRangePartClick","isOpen","disabled","isFilled","handlePartClick","part","e","stopPropagation","containerStateClass","segmentCursorClass","separatorColorClass","segmentPartClass","undefined","onClick"],"mappings":";AAIA,SAASA,EAAE,QAAQ,iCAA8B;AAIjD,MAAMC,eAAe;AACrB,MAAMC,mBACJ;AAiBF,MAAMC,4BAAgE,CAAC,EACrEC,SAAS,EACTC,OAAO,EACPC,MAAM,EACP;IACC,qBACE,MAACC;QACCC,WAAWR,GACT,6DACA,sEACA,sEACA;;0BAGF,KAACS;gBAAKD,WAAWR,GAAGC,cAAc;0BAC/BG,YACCA,UAAUE,MAAM,CAACA,wBAEjB,KAACG;oBAAKD,WAAU;8BAAiCF;;;0BAGrD,KAACG;gBAAKD,WAAU;0BACb;;0BAEH,KAACC;gBAAKD,WAAWR,GAAGC,cAAc;0BAC/BI,UACCA,QAAQC,MAAM,CAACA,wBAEf,KAACG;oBAAKD,WAAU;8BAAiCF;;;;;AAK3D;AAEA,OAAO,MAAMI,oBAAgD,CAAC,EAC5DN,SAAS,EACTC,OAAO,EACPC,MAAM,EACNK,eAAe,EACfC,gBAAgB,EAChBC,MAAM,EACNC,QAAQ,EACT;IACC,IAAIA,UAAU;QACZ,qBACE,KAACX;YACCC,WAAWA;YACXC,SAASA;YACTC,QAAQA;;IAGd;IAEA,MAAMS,WAAWX,cAAc,QAAQC,YAAY;IAEnD,MAAMW,kBAAkB,CAACC,OAAoB,CAACC;YAC5C,IAAI,CAACN,kBAAkB;YACvBM,EAAEC,eAAe;YACjBP,iBAAiBK;QACnB;IAEA,IAAIG,sBACF;IACF,IAAIP,QAAQ;QACVO,sBACE;IACJ,OAAO,IAAIL,UAAU;QACnBK,sBAAsBpB,GAAGoB,qBAAqB;IAChD,OAAO;QACLA,sBAAsBpB,GAAGoB,qBAAqB;IAChD;IAEA,MAAMC,qBAAqBT,mBACvB,mBACA;IAEJ,MAAMU,sBAAsBP,WACxB,yBACA;IAEJ,MAAMQ,mBAAmB,CAACN;QACxB,IAAIN,oBAAoBM,MAAM;YAC5B,OAAO;QACT;QACA,IAAIL,kBAAkB;YACpB,OAAO;QACT;QACA,OAAOY;IACT;IAEA,qBACE,MAACjB;QACCC,WAAWR,GACT,6DACA,sEACA,sEACAoB;;0BAGF,KAACX;gBACCD,WAAWR,GACTC,cACAoB,oBACAE,iBAAiB;gBAEnBE,SAAST,gBAAgB;0BAExBZ,YACCA,UAAUE,MAAM,CAACA,wBAEjB,KAACG;oBAAKD,WAAWN;8BAAmBI;;;0BAGxC,KAACG;gBACCD,WAAWR,GACT,8CACAsB;0BAGD;;0BAEH,KAACb;gBACCD,WAAWR,GACTC,cACAoB,oBACAE,iBAAiB;gBAEnBE,SAAST,gBAAgB;0BAExBX,UACCA,QAAQC,MAAM,CAACA,wBAEf,KAACG;oBAAKD,WAAWN;8BAAmBI;;;;;AAK9C,EAAE"}

package/dist/components/ui/core/date-time-pickers/shared/hooks/use-popover-state.d.ts

@@ -1,10 +1,10 @@
 export interface UsePopoverStateOptions {
-    onBackspace?: () => void;
+	onBackspace?: () => void;
 }
 export interface UsePopoverStateReturn {
-    isOpen: boolean;
-    setIsOpen: (isOpen: boolean) => void;
-    popoverRef: React.RefObject<HTMLDivElement>;
-    inputRef: React.RefObject<HTMLDivElement>;
+	isOpen: boolean;
+	setIsOpen: (isOpen: boolean) => void;
+	popoverRef: React.RefObject<HTMLDivElement>;
+	inputRef: React.RefObject<HTMLDivElement>;
 }
 export declare const usePopoverState: (options?: UsePopoverStateOptions) => UsePopoverStateReturn;

package/dist/components/ui/core/date-time-pickers/shared/hooks/use-popover-state.js

@@ -1,24 +1,35 @@
-import { useEffect as e, useRef as t, useState as n } from "react";
-//#region libs/aura/src/components/ui/core/date-time-pickers/shared/hooks/use-popover-state.ts
-var r = (r = {}) => {
-	let { onBackspace: i } = r, [a, o] = n(!1), s = t(null), c = t(null);
-	return e(() => {
-		if (!a) return;
-		let e = (e) => {
-			if (e.key === "Backspace" && i) {
-				let { target: t } = e;
-				t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement || t instanceof HTMLElement && t.isContentEditable || (e.preventDefault(), i());
-			}
-		};
-		return document.addEventListener("keydown", e), () => {
-			document.removeEventListener("keydown", e);
-		};
-	}, [a, i]), {
-		isOpen: a,
-		setIsOpen: o,
-		popoverRef: s,
-		inputRef: c
-	};
+import { useEffect, useRef, useState } from "react";
+export const usePopoverState = (options = {})=>{
+    const { onBackspace } = options;
+    const [isOpen, setIsOpen] = useState(false);
+    const popoverRef = useRef(null);
+    const inputRef = useRef(null);
+    useEffect(()=>{
+        if (!isOpen) return;
+        const handleKeyDown = (event)=>{
+            if (event.key === 'Backspace' && onBackspace) {
+                const { target } = event;
+                const isInput = target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
+                if (!isInput) {
+                    event.preventDefault();
+                    onBackspace();
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>{
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [
+        isOpen,
+        onBackspace
+    ]);
+    return {
+        isOpen,
+        setIsOpen,
+        popoverRef,
+        inputRef
+    };
 };
-//#endregion
-export { r as usePopoverState };
+
+//# sourceMappingURL=use-popover-state.js.map

package/dist/components/ui/core/date-time-pickers/shared/hooks/use-popover-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/ui/core/date-time-pickers/shared/hooks/use-popover-state.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport interface UsePopoverStateOptions {\n  onBackspace?: () => void;\n}\n\nexport interface UsePopoverStateReturn {\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n  popoverRef: React.RefObject<HTMLDivElement>;\n  inputRef: React.RefObject<HTMLDivElement>;\n}\n\nexport const usePopoverState = (\n  options: UsePopoverStateOptions = {}\n): UsePopoverStateReturn => {\n  const { onBackspace } = options;\n  const [isOpen, setIsOpen] = useState(false);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Backspace' && onBackspace) {\n        const { target } = event;\n        const isInput =\n          target instanceof HTMLInputElement ||\n          target instanceof HTMLTextAreaElement ||\n          (target instanceof HTMLElement && target.isContentEditable);\n        if (!isInput) {\n          event.preventDefault();\n          onBackspace();\n        }\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [isOpen, onBackspace]);\n\n  return {\n    isOpen,\n    setIsOpen,\n    popoverRef,\n    inputRef,\n  };\n};\n"],"names":["useEffect","useRef","useState","usePopoverState","options","onBackspace","isOpen","setIsOpen","popoverRef","inputRef","handleKeyDown","event","key","target","isInput","HTMLInputElement","HTMLTextAreaElement","HTMLElement","isContentEditable","preventDefault","document","addEventListener","removeEventListener"],"mappings":"AAAA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAapD,OAAO,MAAMC,kBAAkB,CAC7BC,UAAkC,CAAC,CAAC;IAEpC,MAAM,EAAEC,WAAW,EAAE,GAAGD;IACxB,MAAM,CAACE,QAAQC,UAAU,GAAGL,SAAS;IACrC,MAAMM,aAAaP,OAAuB;IAC1C,MAAMQ,WAAWR,OAAuB;IAExCD,UAAU;QACR,IAAI,CAACM,QAAQ;QAEb,MAAMI,gBAAgB,CAACC;YACrB,IAAIA,MAAMC,GAAG,KAAK,eAAeP,aAAa;gBAC5C,MAAM,EAAEQ,MAAM,EAAE,GAAGF;gBACnB,MAAMG,UACJD,kBAAkBE,oBAClBF,kBAAkBG,uBACjBH,kBAAkBI,eAAeJ,OAAOK,iBAAiB;gBAC5D,IAAI,CAACJ,SAAS;oBACZH,MAAMQ,cAAc;oBACpBd;gBACF;YACF;QACF;QAEAe,SAASC,gBAAgB,CAAC,WAAWX;QAErC,OAAO;YACLU,SAASE,mBAAmB,CAAC,WAAWZ;QAC1C;IACF,GAAG;QAACJ;QAAQD;KAAY;IAExB,OAAO;QACLC;QACAC;QACAC;QACAC;IACF;AACF,EAAE"}

package/dist/components/ui/core/date-time-pickers/shared/hooks/use-range-date-state.d.ts

@@ -1,29 +1,29 @@
-import { Dayjs } from 'dayjs';
-import { RangeSelectionStep } from './use-range-step-manager';
+import type { Dayjs } from "dayjs";
+import type { RangeSelectionStep } from "./use-range-step-manager";
 export interface DateStateSnapshot {
-    tempStart: Dayjs | null;
-    tempEnd: Dayjs | null;
+	tempStart: Dayjs | null;
+	tempEnd: Dayjs | null;
 }
 export interface UseRangeDateStateOptions {
-    value: [Dayjs | null, Dayjs | null];
-    defaultDate: Dayjs;
-    /** Transforms a clicked date before storing; pass time-of-day defaults for datetime variants. */
-    mapDate?: (date: Dayjs, role: 'start' | 'end') => Dayjs;
-    /** Called when the end date is selected; used for auto-apply in date-only variants. */
-    onEndDateSelected?: (start: Dayjs | null, end: Dayjs) => void;
+	value: [Dayjs | null, Dayjs | null];
+	defaultDate: Dayjs;
+	/** Transforms a clicked date before storing; pass time-of-day defaults for datetime variants. */
+	mapDate?: (date: Dayjs, role: "start" | "end") => Dayjs;
+	/** Called when the end date is selected; used for auto-apply in date-only variants. */
+	onEndDateSelected?: (start: Dayjs | null, end: Dayjs) => void;
 }
 export interface UseRangeDateStateReturn {
-    tempStart: Dayjs | null;
-    tempEnd: Dayjs | null;
-    displayedMonth: Dayjs;
-    hoverDate: Dayjs | null;
-    /** Synchronous ref — use inside callbacks to avoid stale closures. */
-    stateRef: React.MutableRefObject<DateStateSnapshot>;
-    handleDateClick: (date: Dayjs, step: RangeSelectionStep) => void;
-    handleDateHover: (date: Dayjs | null) => void;
-    handleMonthChange: (month: Dayjs) => void;
-    /** Returns the new [start, end] tuple, or null if the segment was already empty (signals caller to move focus to start). */
-    clearActiveSegment: (step: RangeSelectionStep) => [Dayjs | null, Dayjs | null] | null;
-    resetDates: (value: [Dayjs | null, Dayjs | null]) => void;
+	tempStart: Dayjs | null;
+	tempEnd: Dayjs | null;
+	displayedMonth: Dayjs;
+	hoverDate: Dayjs | null;
+	/** Synchronous ref — use inside callbacks to avoid stale closures. */
+	stateRef: React.MutableRefObject<DateStateSnapshot>;
+	handleDateClick: (date: Dayjs, step: RangeSelectionStep) => void;
+	handleDateHover: (date: Dayjs | null) => void;
+	handleMonthChange: (month: Dayjs) => void;
+	/** Returns the new [start, end] tuple, or null if the segment was already empty (signals caller to move focus to start). */
+	clearActiveSegment: (step: RangeSelectionStep) => [Dayjs | null, Dayjs | null] | null;
+	resetDates: (value: [Dayjs | null, Dayjs | null]) => void;
 }
-export declare const useRangeDateState: ({ value, defaultDate, mapDate, onEndDateSelected, }: UseRangeDateStateOptions) => UseRangeDateStateReturn;
+export declare const useRangeDateState: ({ value, defaultDate, mapDate, onEndDateSelected }: UseRangeDateStateOptions) => UseRangeDateStateReturn;