@mastra/playground-ui 68.0.0 → 69.0.0-alpha.0

package/dist/components/DateTimePicker.es.js

@@ -1,151 +1,75 @@
 import { t as cn } from "../utils-DQx8TpNT.js";
+import { t as Button } from "../Button-Bi7aXd_G.js";
+import { Field, FieldError, FieldLabel } from "./Field.es.js";
+import { t as Input } from "../input-Cyit5ZSc.js";
+import { i as PopoverTrigger, n as Popover, r as PopoverContent } from "../popover-BpMi52Tb.js";
 import { controlTriggerOpenStateFor } from "../primitives/control-size.es.js";
 import "../primitives/form-element.es.js";
-import { t as Button } from "../Button-CLXTbAY8.js";
-import { quietTextHover } from "../primitives/typography.es.js";
-import { i as SelectItem, n as SelectContent, o as SelectTrigger, s as SelectValue, t as Select } from "../select-BdIZEdcy.js";
-import { t as Input } from "../input-0l1uzOBZ.js";
-import { Field, FieldError, FieldLabel } from "./Field.es.js";
-import { i as PopoverTrigger, n as Popover, r as PopoverContent } from "../popover-CzHvTPk2.js";
 import * as React$1 from "react";
-import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CalendarIcon, Check, X } from "lucide-react";
+import { CalendarIcon, Check, ChevronLeft, ChevronRight, X } from "lucide-react";
 import { useDebouncedCallback } from "use-debounce";
-import { format, formatDate, isValid } from "date-fns";
-import { DayPicker } from "react-day-picker";
+import { format, isValid, parse } from "date-fns";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
 // src/ds/components/DateTimePicker/date-picker.tsx
-function DatePicker({ className, classNames, showOutsideDays = true, ...props }) {
+/**
+* A month grid for picking a day or a range of days. Ranges read as one continuous band:
+* the ends are solid inverse pills and the days between sit on a quiet fill that runs
+* edge to edge, rounding off where a week starts or ends.
+*/
+function DatePicker({ className, classNames, showOutsideDays = true, components, ...props }) {
+	const defaults = getDefaultClassNames();
 	return /* @__PURE__ */ jsx(DayPicker, {
 		showOutsideDays,
-		className: cn("p-3", className),
+		className: cn("w-fit p-3 [--cell-size:--spacing(8)]", className),
 		classNames: {
-			months: "flex flex-col space-y-4 sm:space-y-0 ",
-			month: "space-y-4 text-caption",
-			caption: "flex justify-between pt-1 items-center pl-2",
-			caption_label: "text-label text-foreground",
-			nav: "flex items-center",
-			nav_button_previous: cn(quietTextHover, "flex size-7 items-center justify-center rounded-md bg-transparent p-0 hover:bg-fill-subtle"),
-			nav_button_next: cn(quietTextHover, "flex size-7 items-center justify-center rounded-md bg-transparent p-0 hover:bg-fill-subtle"),
-			dropdown_month: "w-full border-collapse space-y-1",
-			weeknumber: "flex",
-			day: cn("relative p-0 text-center focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-fill [&:has([aria-selected].day-outside)]:bg-fill-subtle [&:has([aria-selected].day-range-end)]:rounded-r-md", props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md", "size-8 p-0 text-caption hover:bg-fill-subtle aria-selected:opacity-100"),
-			day_range_start: "day-range-start rounded-l-md",
-			day_range_end: "day-range-end rounded-r-md",
-			day_selected: cn("bg-foreground! text-sidebar! hover:bg-foreground/90! focus:bg-foreground/90! focus:text-sidebar!", props.mode !== "range" && "rounded-md"),
-			day_today: "bg-fill text-foreground",
-			day_outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-fill-subtle aria-selected:text-muted-foreground aria-selected:opacity-30",
-			day_disabled: "text-muted-foreground opacity-50",
-			day_range_middle: "aria-selected:bg-fill aria-selected:text-foreground",
-			day_hidden: "invisible",
-			head_cell: "text-meta text-muted-foreground",
+			root: cn("w-fit", defaults.root),
+			months: cn("relative flex flex-col gap-6 sm:flex-row", defaults.months),
+			month: cn("flex w-full flex-col gap-2", defaults.month),
+			nav: cn("pointer-events-none absolute inset-x-0 top-0 flex h-(--cell-size) items-center justify-between", defaults.nav),
+			button_previous: cn(navButton, defaults.button_previous),
+			button_next: cn(navButton, defaults.button_next),
+			month_caption: cn("flex h-(--cell-size) items-center justify-center", defaults.month_caption),
+			caption_label: cn("text-label font-medium text-foreground select-none", defaults.caption_label),
+			month_grid: cn("w-full border-collapse", defaults.month_grid),
+			weekdays: cn("flex", defaults.weekdays),
+			weekday: cn("flex size-(--cell-size) items-center justify-center text-caption text-muted-foreground select-none", defaults.weekday),
+			week: cn("mt-0.5 flex w-full", defaults.week),
+			day: cn("group/day relative size-(--cell-size) p-0 text-center select-none", defaults.day),
+			range_start: cn("bg-linear-to-r from-transparent from-50% to-fill to-50% last:bg-none [&.rdp-range_end]:bg-none [&:has(+.rdp-hidden)]:bg-none", defaults.range_start),
+			range_middle: cn("bg-fill first:rounded-l-full last:rounded-r-full [&:has(+.rdp-hidden)]:rounded-r-full [.rdp-hidden+&]:rounded-l-full", defaults.range_middle),
+			range_end: cn("bg-linear-to-l from-transparent from-50% to-fill to-50% first:bg-none [.rdp-hidden+&]:bg-none", defaults.range_end),
+			today: defaults.today,
+			outside: defaults.outside,
+			disabled: defaults.disabled,
+			hidden: cn("invisible", defaults.hidden),
 			...classNames
 		},
+		components: {
+			Chevron: CalendarChevron,
+			DayButton: CalendarDayButton,
+			...components
+		},
 		...props
 	});
 }
-// src/ds/components/DateTimePicker/time-picker.tsx
-var hourOptions = [
-	"12",
-	"1",
-	"2",
-	"3",
-	"4",
-	"5",
-	"6",
-	"7",
-	"8",
-	"9",
-	"10",
-	"11"
-];
-var minuteOptions = [
-	"00",
-	"15",
-	"30",
-	"45",
-	"59"
-];
-var timePeriodOptions = ["AM", "PM"];
-function TimePicker({ defaultValue, onValueChange, className, label = "Time" }) {
-	const [hour, setHour] = useState("12");
-	const [minute, setMinute] = useState("00");
-	const [timePeriod, setTimePeriod] = useState("AM");
-	useEffect(() => {
-		if (defaultValue) {
-			const match = defaultValue.match(/^(\d{1,2}):(\d{2})(?::\d{2})?\s*(AM|PM|am|pm)?$/);
-			if (match) {
-				const rawHour = match[1];
-				const rawMinute = match[2];
-				if (rawHour === void 0 || rawMinute === void 0) return;
-				let parsedHour = parseInt(rawHour, 10);
-				const parsedMinute = parseInt(rawMinute, 10);
-				const period = match[3]?.toUpperCase();
-				if (parsedHour >= 1 && parsedHour <= 12 && parsedMinute >= 0 && parsedMinute <= 59) {
-					setHour(parsedHour.toString());
-					setMinute(parsedMinute === 0 ? "00" : parsedMinute.toString());
-					setTimePeriod(period || "AM");
-				}
-			}
-		}
-	}, [defaultValue]);
-	const handleHourChange = (val) => {
-		const nextHour = hourOptions[+val];
-		if (nextHour === void 0) return;
-		setHour(nextHour);
-		onValueChange(`${nextHour}:${minute} ${timePeriod}`.trim());
-	};
-	const handleMinuteChange = (val) => {
-		const nextMinute = minuteOptions[+val];
-		if (nextMinute === void 0) return;
-		setMinute(nextMinute);
-		onValueChange(`${hour}:${nextMinute} ${timePeriod}`.trim());
-	};
-	const handleTimePeriodChange = (val) => {
-		const nextPeriod = timePeriodOptions[+val];
-		if (nextPeriod === void 0) return;
-		setTimePeriod(nextPeriod);
-		onValueChange(`${hour}:${minute} ${nextPeriod}`.trim());
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		role: "group",
-		"aria-label": label,
-		className: cn("flex items-center gap-2", className),
-		children: [
-			/* @__PURE__ */ jsx(TimePartSelect, {
-				label: "Hour",
-				options: hourOptions,
-				value: hour,
-				onValueChange: handleHourChange
-			}),
-			":",
-			/* @__PURE__ */ jsx(TimePartSelect, {
-				label: "Minute",
-				options: minuteOptions,
-				value: minute,
-				onValueChange: handleMinuteChange
-			}),
-			/* @__PURE__ */ jsx(TimePartSelect, {
-				label: "AM or PM",
-				options: timePeriodOptions,
-				value: timePeriod,
-				onValueChange: handleTimePeriodChange
-			})
-		]
-	});
+var navButton = cn("pointer-events-auto flex size-(--cell-size) items-center justify-center rounded-full text-muted-foreground", "not-aria-disabled:hover:bg-fill-subtle not-aria-disabled:hover:text-foreground", "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:outline-none", "aria-disabled:opacity-40");
+function CalendarChevron({ orientation, className }) {
+	return /* @__PURE__ */ jsx(orientation === "left" ? ChevronLeft : ChevronRight, { className: cn("size-4", className) });
 }
-function TimePartSelect({ label, options, value, onValueChange }) {
-	return /* @__PURE__ */ jsxs(Select, {
-		value: options.indexOf(value).toString(),
-		onValueChange,
-		children: [/* @__PURE__ */ jsx(SelectTrigger, {
-			size: "sm",
-			"aria-label": label,
-			children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select" })
-		}), /* @__PURE__ */ jsx(SelectContent, { children: options.map((option, idx) => /* @__PURE__ */ jsx(SelectItem, {
-			value: `${idx}`,
-			children: option
-		}, option)) })]
+function CalendarDayButton({ className, day: _day, modifiers, ...props }) {
+	const ref = React$1.useRef(null);
+	React$1.useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+	const isEnd = modifiers.range_start || modifiers.range_end;
+	const isSolid = modifiers.selected && (isEnd || !modifiers.range_middle);
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		"data-today": modifiers.today || void 0,
+		className: cn("relative flex size-(--cell-size) items-center justify-center rounded-full text-body-sm text-foreground", "outline-none focus-visible:ring-2 focus-visible:ring-border-focus", "not-disabled:hover:bg-fill-hover", "data-today:after:absolute data-today:after:bottom-1 data-today:after:size-1 data-today:after:rounded-full data-today:after:bg-current", modifiers.outside && "text-muted-foreground/60", isSolid && "bg-fill-inverse font-medium text-background not-disabled:hover:bg-fill-inverse-hover data-today:after:bg-background", modifiers.disabled && "cursor-not-allowed text-muted-foreground/40", className),
+		...props
 	});
 }
 // src/ds/components/DateTimePicker/date-time-picker.tsx
@@ -180,22 +104,28 @@ var DateTimePicker = ({ value, minValue, maxValue, defaultTimeStrValue, onValueC
 		})]
 	});
 };
+/** `09:00 AM` or `9:00 AM` (the `defaultTimeStrValue` format) or `09:00`, as the time field's `HH:mm`. */
+function toTimeFieldValue(timeStr) {
+	if (!timeStr) return "";
+	for (const pattern of ["HH:mm", "h:mm a"]) {
+		const parsed = parse(timeStr.trim(), pattern, /* @__PURE__ */ new Date());
+		if (isValid(parsed)) return format(parsed, "HH:mm");
+	}
+	return "";
+}
+/** The day at the `HH:mm` time, or the day as it is when there's no time. */
 function getCompoundDate({ date, timeStr = "" }) {
 	if (!isValid(date)) return null;
 	if (timeStr) {
-		const dateStr = format(date, "yyyy-MM-dd");
-		const newDate = /* @__PURE__ */ new Date(`${dateStr} ${timeStr}`);
+		const newDate = parse(timeStr, "HH:mm", date);
 		if (isValid(newDate)) return newDate;
 	}
 	return date;
 }
 var DateTimePickerContent = ({ value, minValue, maxValue, onValueChange, setOpenPopover, placeholder, className, defaultTimeStrValue, ...props }) => {
 	const [localErrorMsg, setLocalErrorMsg] = React$1.useState(null);
-	const [dateInputValue, setDateInputValue] = React$1.useState(value ? format(getCompoundDate({
-		date: value,
-		timeStr: defaultTimeStrValue
-	}) || "", "PP p") : "");
-	const [timeStrValue, setTimeStrValue] = React$1.useState(defaultTimeStrValue || "");
+	const [timeStrValue, setTimeStrValue] = React$1.useState(() => value ? format(value, "HH:mm") : toTimeFieldValue(defaultTimeStrValue) || "00:00");
+	const [dateInputValue, setDateInputValue] = React$1.useState(value ? format(value, "PP p") : "");
 	const [selected, setSelected] = React$1.useState(value ? new Date(value) : void 0);
 	const debouncedDateUpdate = useDebouncedCallback((date) => {
 		if (isValid(date)) {
@@ -228,7 +158,7 @@ var DateTimePickerContent = ({ value, minValue, maxValue, onValueChange, setOpen
 	};
 	const dateInputValueDate = new Date(dateInputValue);
 	const dateInputValueIsValid = isValid(dateInputValueDate);
-	const newValueDefined = dateInputValueIsValid && dateInputValueDate.getTime() !== value?.getTime();
+	const newValueDefined = timeStrValue !== "" && dateInputValueIsValid && dateInputValueDate.getTime() !== value?.getTime();
 	const handleDaySelect = (date) => {
 		setSelected(date);
 		if (date) {
@@ -306,10 +236,13 @@ var DateTimePickerContent = ({ value, minValue, maxValue, onValueChange, setOpen
 				onSelect: handleDaySelect,
 				...props
 			}),
-			/* @__PURE__ */ jsx(TimePicker, {
-				onValueChange: handleTimeStrChange,
-				className: "m-4 mt-0 w-auto",
-				defaultValue: value ? formatDate(new Date(value), "hh:mm a") : defaultTimeStrValue
+			/* @__PURE__ */ jsx(Input, {
+				type: "time",
+				size: "sm",
+				"aria-label": "Time",
+				value: timeStrValue,
+				onChange: (e) => handleTimeStrChange(e.target.value),
+				className: "m-4 mt-0 w-auto [&::-webkit-calendar-picker-indicator]:hidden"
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "m-4 mt-0 grid grid-cols-[1fr_2fr] gap-2",
@@ -327,7 +260,7 @@ var DateTimePickerContent = ({ value, minValue, maxValue, onValueChange, setOpen
 					size: "md",
 					variant: newValueDefined ? "primary" : "default",
 					onClick: () => {
-						dateInputValueIsValid ? handleApply() : handleCancel();
+						newValueDefined ? handleApply() : handleCancel();
 					},
 					children: newValueDefined ? `Apply` : `Cancel`
 				})]
@@ -352,6 +285,6 @@ var DefaultTrigger = React$1.forwardRef(({ value, placeholder, variant = "defaul
 		})
 	});
 });
-export { DatePicker, DateTimePicker, DateTimePickerContent, DefaultTrigger, TimePicker };
+export { DatePicker, DateTimePicker, DateTimePickerContent, DefaultTrigger };
 
 //# sourceMappingURL=DateTimePicker.es.js.map

package/dist/components/DateTimePicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.es.js","names":["React"],"sources":["../../src/ds/components/DateTimePicker/date-picker.tsx","../../src/ds/components/DateTimePicker/time-picker.tsx","../../src/ds/components/DateTimePicker/date-time-picker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DayPicker } from 'react-day-picker';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>;\n\nexport function DatePicker({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn('p-3', className)}\n      classNames={{\n        months: 'flex flex-col space-y-4 sm:space-y-0 ',\n        month: 'space-y-4 text-caption',\n        caption: 'flex justify-between pt-1 items-center pl-2',\n        caption_label: 'text-label text-foreground',\n        nav: 'flex items-center',\n        nav_button_previous: cn(\n          quietTextHover,\n          'flex size-7 items-center justify-center rounded-md bg-transparent p-0 hover:bg-fill-subtle',\n        ),\n        nav_button_next: cn(\n          quietTextHover,\n          'flex size-7 items-center justify-center rounded-md bg-transparent p-0 hover:bg-fill-subtle',\n        ),\n        dropdown_month: 'w-full border-collapse space-y-1',\n        weeknumber: 'flex',\n        day: cn(\n          'relative p-0 text-center focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-fill [&:has([aria-selected].day-outside)]:bg-fill-subtle [&:has([aria-selected].day-range-end)]:rounded-r-md',\n          props.mode === 'range'\n            ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'\n            : '[&:has([aria-selected])]:rounded-md',\n          'size-8 p-0 text-caption hover:bg-fill-subtle aria-selected:opacity-100',\n        ),\n        day_range_start: 'day-range-start rounded-l-md',\n        day_range_end: 'day-range-end rounded-r-md',\n        day_selected: cn(\n          'bg-foreground! text-sidebar! hover:bg-foreground/90! focus:bg-foreground/90! focus:text-sidebar!',\n          props.mode !== 'range' && 'rounded-md',\n        ),\n        day_today: 'bg-fill text-foreground',\n        day_outside:\n          'day-outside text-muted-foreground opacity-50 aria-selected:bg-fill-subtle aria-selected:text-muted-foreground aria-selected:opacity-30',\n        day_disabled: 'text-muted-foreground opacity-50',\n        day_range_middle: 'aria-selected:bg-fill aria-selected:text-foreground',\n        day_hidden: 'invisible',\n        head_cell: 'text-meta text-muted-foreground',\n        ...classNames,\n      }}\n      {...props}\n    />\n  );\n}\n","import { useEffect, useState } from 'react';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ds/components/Select';\nimport { cn } from '@/lib/utils';\n\nexport type TimePickerProps = {\n  defaultValue?: string;\n  onValueChange: (value: string) => void;\n  className?: string;\n  label?: string;\n};\n\nconst hourOptions = ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'];\nconst minuteOptions = ['00', '15', '30', '45', '59'];\nconst timePeriodOptions = ['AM', 'PM'];\n\nexport function TimePicker({ defaultValue, onValueChange, className, label = 'Time' }: TimePickerProps) {\n  const [hour, setHour] = useState<string>('12');\n  const [minute, setMinute] = useState<string>('00');\n  const [timePeriod, setTimePeriod] = useState('AM');\n\n  useEffect(() => {\n    if (defaultValue) {\n      const timeRegex = /^(\\d{1,2}):(\\d{2})(?::\\d{2})?\\s*(AM|PM|am|pm)?$/;\n      const match = defaultValue.match(timeRegex);\n\n      if (match) {\n        const rawHour = match[1];\n        const rawMinute = match[2];\n        if (rawHour === undefined || rawMinute === undefined) return;\n\n        let parsedHour = parseInt(rawHour, 10);\n        const parsedMinute = parseInt(rawMinute, 10);\n        const period = match[3]?.toUpperCase();\n\n        if (parsedHour >= 1 && parsedHour <= 12 && parsedMinute >= 0 && parsedMinute <= 59) {\n          setHour(parsedHour.toString());\n          setMinute(parsedMinute === 0 ? '00' : parsedMinute.toString());\n          setTimePeriod(period || 'AM');\n        }\n      }\n    }\n  }, [defaultValue]);\n\n  const handleHourChange = (val: string) => {\n    const nextHour = hourOptions[+val];\n    if (nextHour === undefined) return;\n    setHour(nextHour);\n    onValueChange(`${nextHour}:${minute} ${timePeriod}`.trim());\n  };\n\n  const handleMinuteChange = (val: string) => {\n    const nextMinute = minuteOptions[+val];\n    if (nextMinute === undefined) return;\n    setMinute(nextMinute);\n    onValueChange(`${hour}:${nextMinute} ${timePeriod}`.trim());\n  };\n\n  const handleTimePeriodChange = (val: string) => {\n    const nextPeriod = timePeriodOptions[+val];\n    if (nextPeriod === undefined) return;\n    setTimePeriod(nextPeriod);\n    onValueChange(`${hour}:${minute} ${nextPeriod}`.trim());\n  };\n\n  return (\n    <div role=\"group\" aria-label={label} className={cn('flex items-center gap-2', className)}>\n      <TimePartSelect label=\"Hour\" options={hourOptions} value={hour} onValueChange={handleHourChange} />\n      :\n      <TimePartSelect label=\"Minute\" options={minuteOptions} value={minute} onValueChange={handleMinuteChange} />\n      <TimePartSelect\n        label=\"AM or PM\"\n        options={timePeriodOptions}\n        value={timePeriod}\n        onValueChange={handleTimePeriodChange}\n      />\n    </div>\n  );\n}\n\ntype TimePartSelectProps = {\n  label: string;\n  options: readonly string[];\n  value: string;\n  onValueChange: (index: string) => void;\n};\n\nfunction TimePartSelect({ label, options, value, onValueChange }: TimePartSelectProps) {\n  return (\n    <Select value={options.indexOf(value).toString()} onValueChange={onValueChange}>\n      <SelectTrigger size=\"sm\" aria-label={label}>\n        <SelectValue placeholder=\"Select\" />\n      </SelectTrigger>\n      <SelectContent>\n        {options.map((option, idx) => (\n          <SelectItem key={option} value={`${idx}`}>\n            {option}\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  );\n}\n","import { format, formatDate, isValid } from 'date-fns';\nimport { CalendarIcon, Check, X } from 'lucide-react';\nimport * as React from 'react';\nimport type { DayPickerSingleProps } from 'react-day-picker';\nimport { useDebouncedCallback } from 'use-debounce';\n\nimport { DatePicker } from './date-picker';\nimport { TimePicker } from './time-picker';\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button';\nimport { Field, FieldError, FieldLabel } from '@/ds/components/Field';\nimport { Input } from '@/ds/components/Input';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { controlTriggerOpenStateFor } from '@/ds/primitives/control-size';\nimport { fieldTriggerStyle } from '@/ds/primitives/form-element';\nimport { cn } from '@/lib/utils';\n\ntype CommonProps = Omit<DayPickerSingleProps, 'mode' | 'selected' | 'onSelect'> & {\n  value: Date | undefined | null;\n  minValue?: Date | null;\n  maxValue?: Date | null;\n  defaultTimeStrValue?: string;\n  onValueChange: (date: Date | undefined) => void;\n};\n\ntype DefaultTriggerLook = Pick<ButtonProps, 'variant' | 'size'>;\n\nexport type DateTimePickerProps =\n  | (CommonProps & DefaultTriggerLook & { children?: never; className?: string; placeholder?: string })\n  | (CommonProps & {\n      children: React.ReactNode;\n      className?: never;\n      placeholder?: string;\n      variant?: never;\n      size?: never;\n    });\n\nexport const DateTimePicker: React.FC<DateTimePickerProps> = ({\n  value,\n  minValue,\n  maxValue,\n  defaultTimeStrValue,\n  onValueChange,\n  children,\n  className,\n  placeholder,\n  variant,\n  size,\n  ...props\n}) => {\n  const [openPopover, setOpenPopover] = React.useState(false);\n\n  return (\n    <Popover open={openPopover} onOpenChange={setOpenPopover}>\n      <PopoverTrigger asChild>\n        {children ? (\n          children\n        ) : (\n          <DefaultTrigger\n            value={value}\n            placeholder={placeholder}\n            variant={variant}\n            size={size}\n            className={className}\n            data-testid=\"datepicker-button\"\n          />\n        )}\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"backdrop-blur-4xl w-auto max-w-66 bg-muted p-0!\"\n        align=\"start\"\n        data-testid=\"datepicker-calendar\"\n      >\n        <DateTimePickerContent\n          value={value}\n          minValue={minValue}\n          maxValue={maxValue}\n          onValueChange={onValueChange}\n          setOpenPopover={setOpenPopover}\n          defaultTimeStrValue={defaultTimeStrValue}\n          {...props}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nfunction getCompoundDate({ date, timeStr = '' }: { date: Date; timeStr?: string }): Date | null {\n  if (!isValid(date)) {\n    return null;\n  }\n\n  if (timeStr) {\n    const dateStr = format(date, 'yyyy-MM-dd');\n    const newDate = new Date(`${dateStr} ${timeStr}`);\n    if (isValid(newDate)) {\n      return newDate;\n    }\n  }\n\n  return date;\n}\n\nexport const DateTimePickerContent = ({\n  value,\n  minValue,\n  maxValue,\n  onValueChange,\n  setOpenPopover,\n  placeholder,\n  className,\n  defaultTimeStrValue,\n  ...props\n}: CommonProps & {\n  setOpenPopover?: (open: boolean) => void;\n  placeholder?: string;\n  className?: string;\n}) => {\n  const [localErrorMsg, setLocalErrorMsg] = React.useState<string | null>(null);\n  const [dateInputValue, setDateInputValue] = React.useState<string>(\n    value ? format(getCompoundDate({ date: value, timeStr: defaultTimeStrValue }) || '', 'PP p') : '',\n  );\n  const [timeStrValue, setTimeStrValue] = React.useState<string>(defaultTimeStrValue || '');\n  const [selected, setSelected] = React.useState<Date | undefined>(value ? new Date(value) : undefined);\n\n  const debouncedDateUpdate = useDebouncedCallback((date: Date) => {\n    if (isValid(date)) {\n      setSelected(date);\n      onValueChange?.(date);\n      setOpenPopover?.(false);\n    }\n  }, 500);\n\n  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = e => {\n    setDateInputValue(e.currentTarget.value);\n    const date = new Date(e.currentTarget.value);\n    debouncedDateUpdate(date);\n  };\n\n  const updateInputValue = (date: Date | string) => {\n    if (isValid(date)) {\n      if (maxValue && date > maxValue) {\n        setLocalErrorMsg(`The selected date should be before ${format(maxValue, 'PP p')}`);\n        setDateInputValue('');\n      } else if (minValue && date < minValue) {\n        setLocalErrorMsg(`The selected date should be after ${format(minValue, 'PP p')}`);\n        setDateInputValue('');\n      } else {\n        setDateInputValue(format(date, 'PP p'));\n        setLocalErrorMsg('');\n      }\n    } else {\n      setDateInputValue('');\n      setLocalErrorMsg('');\n    }\n  };\n\n  const dateInputValueDate = new Date(dateInputValue);\n  const dateInputValueIsValid = isValid(dateInputValueDate);\n  const newValueDefined = dateInputValueIsValid && dateInputValueDate.getTime() !== value?.getTime();\n\n  const handleDaySelect = (date: Date | undefined) => {\n    setSelected(date);\n    if (date) {\n      const newDate = getCompoundDate({ date, timeStr: timeStrValue });\n      updateInputValue(newDate || '');\n    } else {\n      updateInputValue('');\n    }\n  };\n\n  const handleMonthSelect = (date: Date | undefined) => {\n    setSelected(date);\n    if (date) {\n      const newDate = getCompoundDate({ date, timeStr: timeStrValue });\n      updateInputValue(newDate || '');\n    } else {\n      updateInputValue('');\n    }\n  };\n\n  const handleTimeStrChange = (val: string) => {\n    setTimeStrValue(val);\n\n    if (dateInputValueIsValid) {\n      const newDate = getCompoundDate({ date: dateInputValueDate, timeStr: val });\n      updateInputValue(newDate || '');\n    }\n  };\n\n  const handleCancel = () => {\n    setOpenPopover?.(false);\n  };\n\n  const handleApply = () => {\n    if (isValid(dateInputValueDate)) {\n      onValueChange(dateInputValueDate);\n    }\n    setOpenPopover?.(false);\n  };\n\n  const handleClear = () => {\n    onValueChange(undefined);\n    setSelected(undefined);\n    setDateInputValue('');\n    setTimeStrValue('');\n    setOpenPopover?.(false);\n  };\n\n  return (\n    <div\n      aria-label=\"Choose date\"\n      className={cn('relative flex flex-col', className)}\n      onKeyDown={e => {\n        e.stopPropagation();\n        if (e.key === 'Escape') {\n          setOpenPopover?.(false);\n        }\n      }}\n    >\n      <Field invalid={Boolean(localErrorMsg)} className=\"m-4 mb-0 w-auto!\">\n        <FieldLabel className=\"sr-only\">Date</FieldLabel>\n        <Input type=\"text\" value={dateInputValue} onChange={handleInputChange} placeholder={placeholder} />\n        <FieldError>{localErrorMsg}</FieldError>\n      </Field>\n\n      <DatePicker\n        mode=\"single\"\n        month={selected}\n        selected={selected}\n        onMonthChange={handleMonthSelect}\n        onSelect={handleDaySelect}\n        {...props}\n      />\n\n      <TimePicker\n        onValueChange={handleTimeStrChange}\n        className=\"m-4 mt-0 w-auto\"\n        defaultValue={value ? formatDate(new Date(value), 'hh:mm a') : defaultTimeStrValue}\n      />\n\n      <div className=\"m-4 mt-0 grid grid-cols-[1fr_2fr] gap-2\">\n        {newValueDefined && (\n          <Button icon={<X />} tabIndex={0} size=\"md\" onClick={handleClear} type=\"button\">\n            Clear\n          </Button>\n        )}\n        <Button\n          icon={newValueDefined ? <Check /> : <X />}\n          tabIndex={0}\n          type=\"button\"\n          size=\"md\"\n          variant={newValueDefined ? 'primary' : 'default'}\n          onClick={() => {\n            dateInputValueIsValid ? handleApply() : handleCancel();\n          }}\n        >\n          {newValueDefined ? `Apply` : `Cancel`}\n        </Button>\n      </div>\n    </div>\n  );\n};\n\ntype DefaultButtonProps = Pick<ButtonProps, 'variant' | 'size' | 'tooltip' | 'disabled'> & {\n  className?: string;\n  placeholder?: string;\n  value: Date | undefined | null;\n};\n\nexport const DefaultTrigger = React.forwardRef<HTMLButtonElement, DefaultButtonProps>(\n  ({ value, placeholder, variant = 'default', size, className, ...props }, ref) => {\n    return (\n      <Button\n        ref={ref}\n        variant={variant}\n        size={size}\n        className={cn(\n          'justify-start',\n          variant === 'default' && fieldTriggerStyle,\n          controlTriggerOpenStateFor(variant),\n          className,\n        )}\n        icon={<CalendarIcon />}\n        {...props}\n      >\n        {value ? (\n          <span className=\"text-foreground\">{format(value, 'PP p')}</span>\n        ) : (\n          <span className=\"text-muted-foreground\">{placeholder ?? 'Pick a date'}</span>\n        )}\n      </Button>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"DateTimePicker.es.js","names":["React","React"],"sources":["../../src/ds/components/DateTimePicker/date-picker.tsx","../../src/ds/components/DateTimePicker/date-time-picker.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from 'lucide-react';\nimport * as React from 'react';\nimport { DayPicker, getDefaultClassNames } from 'react-day-picker';\nimport type { ChevronProps, DayButton } from 'react-day-picker';\nimport { cn } from '@/lib/utils';\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>;\n\n/**\n * A month grid for picking a day or a range of days. Ranges read as one continuous band:\n * the ends are solid inverse pills and the days between sit on a quiet fill that runs\n * edge to edge, rounding off where a week starts or ends.\n */\nexport function DatePicker({ className, classNames, showOutsideDays = true, components, ...props }: CalendarProps) {\n  const defaults = getDefaultClassNames();\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn('w-fit p-3 [--cell-size:--spacing(8)]', className)}\n      classNames={{\n        root: cn('w-fit', defaults.root),\n        months: cn('relative flex flex-col gap-6 sm:flex-row', defaults.months),\n        month: cn('flex w-full flex-col gap-2', defaults.month),\n        // The nav overlays the caption row, so a two-month grid gets one ‹ on the far\n        // left and one › on the far right, with each month's name centred above it.\n        nav: cn(\n          'pointer-events-none absolute inset-x-0 top-0 flex h-(--cell-size) items-center justify-between',\n          defaults.nav,\n        ),\n        button_previous: cn(navButton, defaults.button_previous),\n        button_next: cn(navButton, defaults.button_next),\n        month_caption: cn('flex h-(--cell-size) items-center justify-center', defaults.month_caption),\n        caption_label: cn('text-label font-medium text-foreground select-none', defaults.caption_label),\n        month_grid: cn('w-full border-collapse', defaults.month_grid),\n        weekdays: cn('flex', defaults.weekdays),\n        weekday: cn(\n          'flex size-(--cell-size) items-center justify-center text-caption text-muted-foreground select-none',\n          defaults.weekday,\n        ),\n        week: cn('mt-0.5 flex w-full', defaults.week),\n        day: cn('group/day relative size-(--cell-size) p-0 text-center select-none', defaults.day),\n        // The band is painted on the cells, behind the day buttons: half a cell behind\n        // each end, a full cell behind the days between, rounded at the week's edges and\n        // where the month ends (next to a hidden spill-over day).\n        range_start: cn(\n          'bg-linear-to-r from-transparent from-50% to-fill to-50% last:bg-none [&.rdp-range_end]:bg-none [&:has(+.rdp-hidden)]:bg-none',\n          defaults.range_start,\n        ),\n        range_middle: cn(\n          'bg-fill first:rounded-l-full last:rounded-r-full [&:has(+.rdp-hidden)]:rounded-r-full [.rdp-hidden+&]:rounded-l-full',\n          defaults.range_middle,\n        ),\n        range_end: cn(\n          'bg-linear-to-l from-transparent from-50% to-fill to-50% first:bg-none [.rdp-hidden+&]:bg-none',\n          defaults.range_end,\n        ),\n        today: defaults.today,\n        outside: defaults.outside,\n        disabled: defaults.disabled,\n        hidden: cn('invisible', defaults.hidden),\n        ...classNames,\n      }}\n      components={{\n        Chevron: CalendarChevron,\n        DayButton: CalendarDayButton,\n        ...components,\n      }}\n      {...props}\n    />\n  );\n}\n\nconst navButton = cn(\n  'pointer-events-auto flex size-(--cell-size) items-center justify-center rounded-full text-muted-foreground',\n  'not-aria-disabled:hover:bg-fill-subtle not-aria-disabled:hover:text-foreground',\n  'focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:outline-none',\n  'aria-disabled:opacity-40',\n);\n\nfunction CalendarChevron({ orientation, className }: ChevronProps) {\n  const Icon = orientation === 'left' ? ChevronLeft : ChevronRight;\n  return <Icon className={cn('size-4', className)} />;\n}\n\nfunction CalendarDayButton({ className, day: _day, modifiers, ...props }: React.ComponentProps<typeof DayButton>) {\n  const ref = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  const isEnd = modifiers.range_start || modifiers.range_end;\n  const isSolid = modifiers.selected && (isEnd || !modifiers.range_middle);\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-today={modifiers.today || undefined}\n      className={cn(\n        'relative flex size-(--cell-size) items-center justify-center rounded-full text-body-sm text-foreground',\n        'outline-none focus-visible:ring-2 focus-visible:ring-border-focus',\n        'not-disabled:hover:bg-fill-hover',\n        // Today: a dot under the number, so it never competes with a selection.\n        'data-today:after:absolute data-today:after:bottom-1 data-today:after:size-1 data-today:after:rounded-full data-today:after:bg-current',\n        modifiers.outside && 'text-muted-foreground/60',\n        isSolid &&\n          'bg-fill-inverse font-medium text-background not-disabled:hover:bg-fill-inverse-hover data-today:after:bg-background',\n        modifiers.disabled && 'cursor-not-allowed text-muted-foreground/40',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n","import { format, isValid, parse } from 'date-fns';\nimport { CalendarIcon, Check, X } from 'lucide-react';\nimport * as React from 'react';\nimport type { DayPickerSingleProps } from 'react-day-picker';\nimport { useDebouncedCallback } from 'use-debounce';\n\nimport { DatePicker } from './date-picker';\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button';\nimport { Field, FieldError, FieldLabel } from '@/ds/components/Field';\nimport { Input } from '@/ds/components/Input';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { controlTriggerOpenStateFor } from '@/ds/primitives/control-size';\nimport { fieldTriggerStyle } from '@/ds/primitives/form-element';\nimport { cn } from '@/lib/utils';\n\ntype CommonProps = Omit<DayPickerSingleProps, 'mode' | 'selected' | 'onSelect'> & {\n  value: Date | undefined | null;\n  minValue?: Date | null;\n  maxValue?: Date | null;\n  defaultTimeStrValue?: string;\n  onValueChange: (date: Date | undefined) => void;\n};\n\ntype DefaultTriggerLook = Pick<ButtonProps, 'variant' | 'size'>;\n\nexport type DateTimePickerProps =\n  | (CommonProps & DefaultTriggerLook & { children?: never; className?: string; placeholder?: string })\n  | (CommonProps & {\n      children: React.ReactNode;\n      className?: never;\n      placeholder?: string;\n      variant?: never;\n      size?: never;\n    });\n\nexport const DateTimePicker: React.FC<DateTimePickerProps> = ({\n  value,\n  minValue,\n  maxValue,\n  defaultTimeStrValue,\n  onValueChange,\n  children,\n  className,\n  placeholder,\n  variant,\n  size,\n  ...props\n}) => {\n  const [openPopover, setOpenPopover] = React.useState(false);\n\n  return (\n    <Popover open={openPopover} onOpenChange={setOpenPopover}>\n      <PopoverTrigger asChild>\n        {children ? (\n          children\n        ) : (\n          <DefaultTrigger\n            value={value}\n            placeholder={placeholder}\n            variant={variant}\n            size={size}\n            className={className}\n            data-testid=\"datepicker-button\"\n          />\n        )}\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"backdrop-blur-4xl w-auto max-w-66 bg-muted p-0!\"\n        align=\"start\"\n        data-testid=\"datepicker-calendar\"\n      >\n        <DateTimePickerContent\n          value={value}\n          minValue={minValue}\n          maxValue={maxValue}\n          onValueChange={onValueChange}\n          setOpenPopover={setOpenPopover}\n          defaultTimeStrValue={defaultTimeStrValue}\n          {...props}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n};\n\n/** `09:00 AM` or `9:00 AM` (the `defaultTimeStrValue` format) or `09:00`, as the time field's `HH:mm`. */\nfunction toTimeFieldValue(timeStr: string | undefined): string {\n  if (!timeStr) return '';\n  for (const pattern of ['HH:mm', 'h:mm a']) {\n    const parsed = parse(timeStr.trim(), pattern, new Date());\n    if (isValid(parsed)) return format(parsed, 'HH:mm');\n  }\n  return '';\n}\n\n/** The day at the `HH:mm` time, or the day as it is when there's no time. */\nfunction getCompoundDate({ date, timeStr = '' }: { date: Date; timeStr?: string }): Date | null {\n  if (!isValid(date)) {\n    return null;\n  }\n\n  if (timeStr) {\n    const newDate = parse(timeStr, 'HH:mm', date);\n    if (isValid(newDate)) {\n      return newDate;\n    }\n  }\n\n  return date;\n}\n\nexport const DateTimePickerContent = ({\n  value,\n  minValue,\n  maxValue,\n  onValueChange,\n  setOpenPopover,\n  placeholder,\n  className,\n  defaultTimeStrValue,\n  ...props\n}: CommonProps & {\n  setOpenPopover?: (open: boolean) => void;\n  placeholder?: string;\n  className?: string;\n}) => {\n  const [localErrorMsg, setLocalErrorMsg] = React.useState<string | null>(null);\n  const [timeStrValue, setTimeStrValue] = React.useState<string>(() =>\n    value ? format(value, 'HH:mm') : toTimeFieldValue(defaultTimeStrValue) || '00:00',\n  );\n  const [dateInputValue, setDateInputValue] = React.useState<string>(value ? format(value, 'PP p') : '');\n  const [selected, setSelected] = React.useState<Date | undefined>(value ? new Date(value) : undefined);\n\n  const debouncedDateUpdate = useDebouncedCallback((date: Date) => {\n    if (isValid(date)) {\n      setSelected(date);\n      onValueChange?.(date);\n      setOpenPopover?.(false);\n    }\n  }, 500);\n\n  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = e => {\n    setDateInputValue(e.currentTarget.value);\n    const date = new Date(e.currentTarget.value);\n    debouncedDateUpdate(date);\n  };\n\n  const updateInputValue = (date: Date | string) => {\n    if (isValid(date)) {\n      if (maxValue && date > maxValue) {\n        setLocalErrorMsg(`The selected date should be before ${format(maxValue, 'PP p')}`);\n        setDateInputValue('');\n      } else if (minValue && date < minValue) {\n        setLocalErrorMsg(`The selected date should be after ${format(minValue, 'PP p')}`);\n        setDateInputValue('');\n      } else {\n        setDateInputValue(format(date, 'PP p'));\n        setLocalErrorMsg('');\n      }\n    } else {\n      setDateInputValue('');\n      setLocalErrorMsg('');\n    }\n  };\n\n  const dateInputValueDate = new Date(dateInputValue);\n  const dateInputValueIsValid = isValid(dateInputValueDate);\n  // A cleared time field leaves the last valid time in the date text, so there's nothing to apply.\n  const timeFilled = timeStrValue !== '';\n  const newValueDefined = timeFilled && dateInputValueIsValid && dateInputValueDate.getTime() !== value?.getTime();\n\n  const handleDaySelect = (date: Date | undefined) => {\n    setSelected(date);\n    if (date) {\n      const newDate = getCompoundDate({ date, timeStr: timeStrValue });\n      updateInputValue(newDate || '');\n    } else {\n      updateInputValue('');\n    }\n  };\n\n  const handleMonthSelect = (date: Date | undefined) => {\n    setSelected(date);\n    if (date) {\n      const newDate = getCompoundDate({ date, timeStr: timeStrValue });\n      updateInputValue(newDate || '');\n    } else {\n      updateInputValue('');\n    }\n  };\n\n  const handleTimeStrChange = (val: string) => {\n    setTimeStrValue(val);\n\n    if (dateInputValueIsValid) {\n      const newDate = getCompoundDate({ date: dateInputValueDate, timeStr: val });\n      updateInputValue(newDate || '');\n    }\n  };\n\n  const handleCancel = () => {\n    setOpenPopover?.(false);\n  };\n\n  const handleApply = () => {\n    if (isValid(dateInputValueDate)) {\n      onValueChange(dateInputValueDate);\n    }\n    setOpenPopover?.(false);\n  };\n\n  const handleClear = () => {\n    onValueChange(undefined);\n    setSelected(undefined);\n    setDateInputValue('');\n    setTimeStrValue('');\n    setOpenPopover?.(false);\n  };\n\n  return (\n    <div\n      aria-label=\"Choose date\"\n      className={cn('relative flex flex-col', className)}\n      onKeyDown={e => {\n        e.stopPropagation();\n        if (e.key === 'Escape') {\n          setOpenPopover?.(false);\n        }\n      }}\n    >\n      <Field invalid={Boolean(localErrorMsg)} className=\"m-4 mb-0 w-auto!\">\n        <FieldLabel className=\"sr-only\">Date</FieldLabel>\n        <Input type=\"text\" value={dateInputValue} onChange={handleInputChange} placeholder={placeholder} />\n        <FieldError>{localErrorMsg}</FieldError>\n      </Field>\n\n      <DatePicker\n        mode=\"single\"\n        month={selected}\n        selected={selected}\n        onMonthChange={handleMonthSelect}\n        onSelect={handleDaySelect}\n        {...props}\n      />\n\n      <Input\n        type=\"time\"\n        size=\"sm\"\n        aria-label=\"Time\"\n        value={timeStrValue}\n        onChange={e => handleTimeStrChange(e.target.value)}\n        className=\"m-4 mt-0 w-auto [&::-webkit-calendar-picker-indicator]:hidden\"\n      />\n\n      <div className=\"m-4 mt-0 grid grid-cols-[1fr_2fr] gap-2\">\n        {newValueDefined && (\n          <Button icon={<X />} tabIndex={0} size=\"md\" onClick={handleClear} type=\"button\">\n            Clear\n          </Button>\n        )}\n        <Button\n          icon={newValueDefined ? <Check /> : <X />}\n          tabIndex={0}\n          type=\"button\"\n          size=\"md\"\n          variant={newValueDefined ? 'primary' : 'default'}\n          onClick={() => {\n            newValueDefined ? handleApply() : handleCancel();\n          }}\n        >\n          {newValueDefined ? `Apply` : `Cancel`}\n        </Button>\n      </div>\n    </div>\n  );\n};\n\ntype DefaultButtonProps = Pick<ButtonProps, 'variant' | 'size' | 'tooltip' | 'disabled'> & {\n  className?: string;\n  placeholder?: string;\n  value: Date | undefined | null;\n};\n\nexport const DefaultTrigger = React.forwardRef<HTMLButtonElement, DefaultButtonProps>(\n  ({ value, placeholder, variant = 'default', size, className, ...props }, ref) => {\n    return (\n      <Button\n        ref={ref}\n        variant={variant}\n        size={size}\n        className={cn(\n          'justify-start',\n          variant === 'default' && fieldTriggerStyle,\n          controlTriggerOpenStateFor(variant),\n          className,\n        )}\n        icon={<CalendarIcon />}\n        {...props}\n      >\n        {value ? (\n          <span className=\"text-foreground\">{format(value, 'PP p')}</span>\n        ) : (\n          <span className=\"text-muted-foreground\">{placeholder ?? 'Pick a date'}</span>\n        )}\n      </Button>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/components/DateTimeRangePicker.cjs.js

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_date_time_range_picker = require("../date-time-range-picker-CWGjoR3j.cjs");
+const require_date_time_range_picker = require("../date-time-range-picker-Bq-8IPtS.cjs");
 exports.DateTimeRangePicker = require_date_time_range_picker.DateTimeRangePicker;

package/dist/components/DateTimeRangePicker.es.js

@@ -1 +1 @@
-export { t as DateTimeRangePicker } from "../date-time-range-picker-CdSiXwB4.js";
+export { t as DateTimeRangePicker } from "../date-time-range-picker-DdNgKD87.js";

package/dist/components/Dialog.cjs.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Dialog = require("../Dialog-BvWF9HE-.cjs");
+const require_Dialog = require("../Dialog-Duy3M1ny.cjs");
 exports.Dialog = require_Dialog.Dialog;
 exports.DialogAction = require_Dialog.DialogAction;
 exports.DialogBody = require_Dialog.DialogBody;

package/dist/components/Dialog.es.js

@@ -1 +1 @@
-export { t as Dialog, p as DialogAction, n as DialogBody, r as DialogCancel, i as DialogClose, a as DialogContent, o as DialogDescription, s as DialogFooter, c as DialogHeader, l as DialogOverlay, u as DialogPortal, d as DialogTitle, f as DialogTrigger } from "../Dialog-DaWtxwd9.js";
+export { t as Dialog, p as DialogAction, n as DialogBody, r as DialogCancel, i as DialogClose, a as DialogContent, o as DialogDescription, s as DialogFooter, c as DialogHeader, l as DialogOverlay, u as DialogPortal, d as DialogTitle, f as DialogTrigger } from "../Dialog-OBPu3rl2.js";

package/dist/components/DiffStat.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_string = require("../string-EyTazW-F.cjs");
 const require_utils = require("../utils-uDc1ofX1.cjs");
-const require_string = require("../string-DdJJdCv2.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ds/components/DiffStat/diff-stat.tsx
 function DiffStat({ additions, deletions, className }) {

package/dist/components/DiffStat.es.js

@@ -1,5 +1,5 @@
+import { i as pluralize } from "../string-CA5M0mj_.js";
 import { t as cn } from "../utils-DQx8TpNT.js";
-import { r as pluralize } from "../string-CNKDIc_4.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/ds/components/DiffStat/diff-stat.tsx
 function DiffStat({ additions, deletions, className }) {

package/dist/components/DisabledFeatureButton.cjs.js

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../utils-uDc1ofX1.cjs");
-const require_tooltip = require("../tooltip-BiRLT3Th.cjs");
+const require_Button = require("../Button-BfICfyxD.cjs");
+const require_tooltip = require("../tooltip-BsExuMO8.cjs");
 const require_primitives_transitions = require("../primitives/transitions.cjs.js");
-const require_Button = require("../Button-DLcMcuUL.cjs");
+const require_utils = require("../utils-uDc1ofX1.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 // src/ds/components/DisabledFeatureButton/disabled-feature-button.tsx

package/dist/components/DisabledFeatureButton.es.js

@@ -1,7 +1,7 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
-import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../tooltip-HzcLyGtV.js";
+import { t as Button } from "../Button-Bi7aXd_G.js";
+import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../tooltip-DJcze2VZ.js";
 import { controlStateColorTransition } from "../primitives/transitions.es.js";
-import { t as Button } from "../Button-CLXTbAY8.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ExternalLink } from "lucide-react";
 // src/ds/components/DisabledFeatureButton/disabled-feature-button.tsx

package/dist/components/DisclosureChevron.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../utils-uDc1ofX1.cjs");
 const require_primitives_transitions = require("../primitives/transitions.cjs.js");
+const require_utils = require("../utils-uDc1ofX1.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 // src/ds/components/DisclosureChevron/disclosure-chevron.tsx

package/dist/components/DisclosureChevron.es.js

@@ -1,5 +1,5 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
 import { transitions } from "../primitives/transitions.es.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import { jsx } from "react/jsx-runtime";
 import { ChevronDown, ChevronRight, ChevronUp } from "lucide-react";
 // src/ds/components/DisclosureChevron/disclosure-chevron.tsx

package/dist/components/Drawer.cjs.js

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require('../Drawer.css');const require_rolldown_runtime = require("../rolldown-runtime-CmQyd0Gu.cjs");
-const require_utils = require("../utils-uDc1ofX1.cjs");
 const require_dist = require("../dist-ClDKPtVq.cjs");
+const require_Button = require("../Button-BfICfyxD.cjs");
 const require_primitives_raised_surface = require("../primitives/raised-surface.cjs.js");
-const require_Button = require("../Button-DLcMcuUL.cjs");
+const require_utils = require("../utils-uDc1ofX1.cjs");
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/Drawer.es.js

@@ -1,7 +1,7 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
 import { t as cva } from "../dist-BhWtUEhi.js";
+import { t as Button } from "../Button-Bi7aXd_G.js";
 import { dialogSurfaceStyle } from "../primitives/raised-surface.es.js";
-import { t as Button } from "../Button-CLXTbAY8.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "lucide-react";

package/dist/components/DropdownMenu.cjs.js

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_dropdown_menu = require("../dropdown-menu-BETTTPBB.cjs");
+const require_dropdown_menu = require("../dropdown-menu-Dx-jCOIv.cjs");
 exports.DropdownMenu = require_dropdown_menu.DropdownMenu;

package/dist/components/DropdownMenu.es.js

@@ -1 +1 @@
-export { t as DropdownMenu } from "../dropdown-menu-B4jY3J9e.js";
+export { t as DropdownMenu } from "../dropdown-menu-DKoWI8kD.js";

package/dist/components/EmptyState.cjs.js

@@ -1,4 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_EmptyState = require("../EmptyState-DxDHlYqD.cjs");
+const require_EmptyState = require("../EmptyState-Dc-sP95H.cjs");
 exports.EmptyState = require_EmptyState.EmptyState;
 exports.EmptyStateIllustration = require_EmptyState.EmptyStateIllustration;

package/dist/components/EmptyState.es.js

@@ -1 +1 @@
-export { n as EmptyState, t as EmptyStateIllustration } from "../EmptyState-P-Gy898T.js";
+export { n as EmptyState, t as EmptyStateIllustration } from "../EmptyState-i88y1x75.js";

package/dist/components/Entity.cjs.js

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../utils-uDc1ofX1.cjs");
-const require_primitives_raised_surface = require("../primitives/raised-surface.cjs.js");
+const require_Txt = require("../Txt-_00wWxTd.cjs");
 const require_icons_Icon = require("../icons/Icon.cjs.js");
+const require_primitives_raised_surface = require("../primitives/raised-surface.cjs.js");
 const require_primitives_text = require("../primitives/text.cjs.js");
-const require_Txt = require("../Txt-BnoSqxKE.cjs");
+const require_utils = require("../utils-uDc1ofX1.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ds/components/Entity/Entity.tsx
 var Entity = ({ children, className, onClick }) => {

package/dist/components/Entity.es.js

@@ -1,8 +1,8 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
-import { raisedSurfaceStyle } from "../primitives/raised-surface.es.js";
+import { t as Txt } from "../Txt-5efBsb2p.js";
 import { Icon } from "../icons/Icon.es.js";
+import { raisedSurfaceStyle } from "../primitives/raised-surface.es.js";
 import { textStyle } from "../primitives/text.es.js";
-import { t as Txt } from "../Txt-BM6TVV_c.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import { jsx } from "react/jsx-runtime";
 // src/ds/components/Entity/Entity.tsx
 var Entity = ({ children, className, onClick }) => {

package/dist/components/EntityHeader.cjs.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_icons_Icon = require("../icons/Icon.cjs.js");
-const require_Txt = require("../Txt-BnoSqxKE.cjs");
 const require_components_Skeleton = require("./Skeleton.cjs.js");
+const require_Txt = require("../Txt-_00wWxTd.cjs");
+const require_icons_Icon = require("../icons/Icon.cjs.js");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ds/components/EntityHeader/entity-header.tsx
 var EntityHeader = ({ icon, title, isLoading, children }) => {

package/dist/components/EntityHeader.es.js

@@ -1,6 +1,6 @@
-import { Icon } from "../icons/Icon.es.js";
-import { t as Txt } from "../Txt-BM6TVV_c.js";
 import { Skeleton } from "./Skeleton.es.js";
+import { t as Txt } from "../Txt-5efBsb2p.js";
+import { Icon } from "../icons/Icon.es.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/ds/components/EntityHeader/entity-header.tsx
 var EntityHeader = ({ icon, title, isLoading, children }) => {

package/dist/components/Entry.cjs.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Txt = require("../Txt-BnoSqxKE.cjs");
+const require_Txt = require("../Txt-_00wWxTd.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ds/components/Entry/entry.tsx
 var Entry = ({ label, children }) => {

package/dist/components/Entry.es.js

@@ -1,4 +1,4 @@
-import { t as Txt } from "../Txt-BM6TVV_c.js";
+import { t as Txt } from "../Txt-5efBsb2p.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/ds/components/Entry/entry.tsx
 var Entry = ({ label, children }) => {

package/dist/components/EnvironmentVariablesEditor.cjs.js

@@ -1,13 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_utils = require("../utils-uDc1ofX1.cjs");
-const require_Button = require("../Button-DLcMcuUL.cjs");
-const require_Txt = require("../Txt-BnoSqxKE.cjs");
+const require_Button = require("../Button-BfICfyxD.cjs");
+const require_Notice = require("../Notice-B_KjMmA6.cjs");
+const require_env_file = require("../env-file-CuxvmI0O.cjs");
+const require_Txt = require("../Txt-_00wWxTd.cjs");
+const require_data_list = require("../data-list-072hHK9L.cjs");
 const require_hooks_use_copy_to_clipboard = require("../hooks/use-copy-to-clipboard.cjs.js");
-const require_Notice = require("../Notice-JZ7SW7q6.cjs");
 const require_components_Field = require("./Field.cjs.js");
-const require_input_group = require("../input-group-DVJLZDBL.cjs");
-const require_data_list = require("../data-list-C4Vmq5HA.cjs");
-const require_env_file = require("../env-file-CuxvmI0O.cjs");
+const require_input_group = require("../input-group-DBCilXjT.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");