@keboola/design 11.0.0 → 11.2.0

package/dist/DateInput-B3UdzRfW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput-B3UdzRfW.js","names":["CalendarIcon"],"sources":["../src/blocks/DateInput/helpers.ts","../src/blocks/DateInput/DateInput.tsx"],"sourcesContent":["export const formatDate = (date: Date | null | undefined, inputValue: string): string => {\n  if (!date) {\n    return inputValue;\n  }\n  return date.toLocaleDateString();\n};\n\n// Detect locale day/month/year order once, matching toLocaleDateString() output\nconst datePartOrder = new Intl.DateTimeFormat()\n  .formatToParts(new Date(2000, 0, 2))\n  .filter(\n    (p): p is { type: 'day' | 'month' | 'year'; value: string } =>\n      p.type === 'day' || p.type === 'month' || p.type === 'year',\n  )\n  .map((p) => p.type);\n\nexport const parseDate = (value: string): Date | null => {\n  if (!value.trim()) return null;\n\n  // Try locale-aware parsing first (matches toLocaleDateString round-trip)\n  const nums = value.match(/\\d+/g)?.map(Number);\n  if (nums && nums.length >= 3) {\n    const parts = Object.fromEntries(datePartOrder.map((type, i) => [type, nums[i]]));\n    const year = parts.year;\n    const month = parts.month;\n    const day = parts.day;\n\n    if (\n      year != null &&\n      month != null &&\n      day != null &&\n      month >= 1 &&\n      month <= 12 &&\n      day >= 1 &&\n      day <= 31\n    ) {\n      const date = new Date(year, month - 1, day);\n      if (date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day) {\n        return date;\n      }\n    }\n  }\n\n  // Fallback: detect ISO YYYY-MM-DD and construct as local midnight to avoid UTC offset issues\n  const isoMatch = value.match(/^(\\d{4})-(\\d{1,2})-(\\d{1,2})$/);\n  if (isoMatch) {\n    const y = Number(isoMatch[1]);\n    const m = Number(isoMatch[2]) - 1;\n    const d = Number(isoMatch[3]);\n    const date = new Date(y, m, d);\n    if (date.getFullYear() === y && date.getMonth() === m && date.getDate() === d) {\n      return date;\n    }\n    return null;\n  }\n\n  const fallback = new Date(value);\n  return isNaN(fallback.getTime()) ? null : fallback;\n};\n","import { useRef, useState } from 'react';\nimport type {\n  ChangeEventHandler,\n  ComponentProps,\n  ComponentRef,\n  FocusEventHandler,\n  MouseEventHandler,\n} from 'react';\nimport type { Matcher } from 'react-day-picker';\n\nimport { DatePicker } from '../../components/DatePicker';\nimport { InputGroup } from '../../components/InputGroup';\nimport { useControllableState } from '../../hooks/useControllableState';\nimport { Calendar as CalendarIcon, X } from '../../icons';\nimport { createChangeInputEvent, mergeRefs } from '../../utils';\n\nimport { formatDate, parseDate } from './helpers';\n\ntype InputGroupProps = Pick<\n  ComponentProps<typeof InputGroup>,\n  'variant' | 'focusVariant' | 'state' | 'sizing'\n>;\n\ntype InputGroupInputProps = Omit<\n  ComponentProps<typeof InputGroup.Input>,\n  'value' | 'defaultValue' | 'type'\n>;\n\ntype Props = InputGroupProps &\n  InputGroupInputProps & {\n    value?: Date | null;\n    defaultValue?: Date | null;\n    onValueChange?: (value: Date | null) => void;\n    onValueBlur?: (value: Date | null) => void;\n    allowClear?: boolean;\n    disabledDays?: Matcher | Matcher[];\n    endMonth?: Date;\n    startMonth?: Date;\n  };\n\nexport const DateInput = ({\n  ref,\n\n  // group props\n  state,\n  variant,\n  focusVariant,\n  sizing,\n  className,\n\n  // own props\n  value,\n  defaultValue,\n  onValueChange,\n  onValueBlur,\n  onChange,\n  onBlur,\n  onFocus,\n  allowClear = false,\n  disabledDays,\n  endMonth,\n  startMonth,\n\n  // input props\n  disabled,\n  readOnly,\n  placeholder = 'Select a date',\n  ...restInputProps\n}: Props) => {\n  const inputRef = useRef<ComponentRef<'input'>>(null);\n\n  const [inputValue, setInputValue] = useState('');\n  const [hasFocus, setHasFocus] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n  const [month, setMonth] = useState<Date>(new Date());\n\n  // `onValueChange` is fired explicitly per-path below (not through the hook), because commits\n  // happen on blur / picker-select rather than on every keystroke.\n  const [currentValue, setCurrentValue] = useControllableState<Date | null>({\n    prop: value,\n    defaultProp: defaultValue ?? null,\n  });\n\n  const canClear = allowClear && !!currentValue && !disabled && !readOnly;\n  const showPicker = !disabled && !readOnly;\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    const newValue = event.target.value;\n    setInputValue(newValue);\n    onChange?.(event);\n\n    const parsedDate = parseDate(newValue);\n    if (parsedDate !== null || !newValue.trim()) {\n      onValueChange?.(parsedDate);\n    }\n  };\n\n  const handleFocus: FocusEventHandler<HTMLInputElement> = (event) => {\n    const formatted = formatDate(currentValue, '');\n    setInputValue(formatted);\n    setHasFocus(true);\n    onFocus?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    setHasFocus(false);\n    onBlur?.(event);\n\n    // If the field still shows the formatted current value (focused and blurred\n    // without editing), keep it as-is. `formatDate` uses `toLocaleDateString`,\n    // whose output is not reliably parseable by `parseDate` in every locale, so\n    // round-tripping an untouched value could wrongly null it.\n    const text = event.target.value;\n    const parsedDate = text === formatDate(currentValue, '') ? currentValue : parseDate(text);\n    onValueBlur?.(parsedDate);\n\n    setCurrentValue(parsedDate);\n  };\n\n  const handleDatePickerChange = (newValue?: Date) => {\n    const dateValue = newValue ?? null;\n\n    setCurrentValue(dateValue);\n    onValueChange?.(dateValue);\n\n    setHasFocus(false);\n    setIsOpen(false);\n  };\n\n  const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n    if (!inputRef.current) return;\n    inputRef.current.value = '';\n    setInputValue('');\n    setCurrentValue(null);\n    onValueChange?.(null);\n    onChange?.(createChangeInputEvent(inputRef.current));\n  };\n\n  const handleOpenChange = (open: boolean) => {\n    if (open) {\n      setMonth(currentValue ?? new Date());\n    }\n    setIsOpen(open);\n  };\n\n  const displayValue = hasFocus ? inputValue : formatDate(currentValue, '');\n\n  return (\n    <InputGroup\n      state={state}\n      variant={variant}\n      sizing={sizing}\n      focusVariant={focusVariant}\n      className={className}\n    >\n      <InputGroup.Input\n        {...restInputProps}\n        ref={mergeRefs(ref ?? null, inputRef)}\n        type=\"text\"\n        value={displayValue}\n        placeholder={placeholder}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        disabled={disabled}\n        readOnly={readOnly}\n      />\n\n      {(canClear || showPicker) && (\n        <InputGroup.Addon align=\"inline-end\">\n          {canClear && (\n            <InputGroup.Button\n              aria-label=\"Clear date\"\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={handleClear}\n            >\n              <X className=\"tw:size-4\" />\n            </InputGroup.Button>\n          )}\n          {showPicker && (\n            <DatePicker\n              disabled={disabledDays}\n              endMonth={endMonth}\n              mode=\"single\"\n              month={month}\n              onMonthChange={setMonth}\n              onOpenChange={handleOpenChange}\n              onSelect={handleDatePickerChange}\n              open={isOpen}\n              selected={currentValue ?? undefined}\n              startMonth={startMonth}\n            >\n              <InputGroup.Button aria-label=\"Select Date\">\n                <CalendarIcon className=\"tw:size-4\" />\n              </InputGroup.Button>\n            </DatePicker>\n          )}\n        </InputGroup.Addon>\n      )}\n    </InputGroup>\n  );\n};\n"],"mappings":"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"}

package/dist/DatePicker-Dw3DpbUh.js

@@ -0,0 +1,24 @@
+import { Popover } from "./Popover-CzeHjvrB.js";
+import { Calendar } from "./Calendar-cG5NIJ4O.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/DatePicker/DatePicker.tsx
+const DatePicker = ({ align = "end", alignOffset = -18, children, defaultOpen, onOpenChange, open, sideOffset = 12, ...calendarProps }) => /* @__PURE__ */ jsxs(Popover, {
+	defaultOpen,
+	open,
+	onOpenChange,
+	children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+		asChild: true,
+		children
+	}), /* @__PURE__ */ jsx(Popover.Content, {
+		align,
+		alignOffset,
+		className: "tw:w-auto tw:p-0",
+		sideOffset,
+		children: /* @__PURE__ */ jsx(Calendar, { ...calendarProps })
+	})]
+});
+DatePicker.displayName = "DatePicker";
+//#endregion
+export { DatePicker };
+
+//# sourceMappingURL=DatePicker-Dw3DpbUh.js.map

package/dist/DatePicker-Dw3DpbUh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker-Dw3DpbUh.js","names":[],"sources":["../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport type { PopoverContentProps, PopoverProps } from '@radix-ui/react-popover';\n\nimport type { CalendarProps } from '../Calendar';\nimport { Calendar } from '../Calendar';\nimport { Popover } from '../Popover';\n\ntype OwnPopoverProps = PropsWithChildren &\n  Pick<PopoverProps, 'open' | 'onOpenChange' | 'defaultOpen'> &\n  Pick<PopoverContentProps, 'align' | 'alignOffset' | 'sideOffset'>;\n\ntype DatePickerProps = OwnPopoverProps & CalendarProps;\n\nexport const DatePicker = ({\n  align = 'end',\n  alignOffset = -18,\n  children,\n  defaultOpen,\n  onOpenChange,\n  open,\n  sideOffset = 12,\n  ...calendarProps\n}: DatePickerProps) => (\n  <Popover defaultOpen={defaultOpen} open={open} onOpenChange={onOpenChange}>\n    <Popover.Trigger asChild>{children}</Popover.Trigger>\n    <Popover.Content\n      align={align}\n      alignOffset={alignOffset}\n      className=\"tw:w-auto tw:p-0\"\n      sideOffset={sideOffset}\n    >\n      <Calendar {...calendarProps} />\n    </Popover.Content>\n  </Popover>\n);\n\nDatePicker.displayName = 'DatePicker';\n"],"mappings":";;;;AAaA,MAAa,cAAc,EACzB,QAAQ,OACR,cAAc,KACd,UACA,aACA,cACA,MACA,aAAa,IACb,GAAG,oBAEH,qBAAC,SAAD;CAAsB;CAAmB;CAAoB;CAA7D,UAAA,CACE,oBAAC,QAAQ,SAAT;EAAiB,SAAA;EAAS;CAA0B,CAAA,GACpD,oBAAC,QAAQ,SAAT;EACS;EACM;EACb,WAAU;EACE;EAEZ,UAAA,oBAAC,UAAD,EAAU,GAAI,cAAgB,CAAA;CACf,CAAA,CACV;;AAGX,WAAW,cAAc"}

package/dist/DateRangeInput-DTuySEiq.js

@@ -0,0 +1,139 @@
+import { createChangeInputEvent } from "./utils-D0c5VAyF.js";
+import { mergeRefs } from "./internal/utils/mergeRefs.js";
+import { Calendar, X } from "./icons-Cek151jC.js";
+import { InputGroup } from "./InputGroup-CdTq8H7c.js";
+import { useControllableState } from "./useControllableState-M6494mCT.js";
+import { DatePicker } from "./DatePicker-Dw3DpbUh.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/DateRangeInput/helpers.ts
+const formatDateRange = (range, inputValue) => {
+	if (!range) return inputValue;
+	const { from, to } = range;
+	return `${from?.toLocaleDateString()} - ${to?.toLocaleDateString()}`;
+};
+const ISO_DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+/**
+* `new Date('2024-01-15')` is spec'd as UTC midnight, so reading it back with the
+* local getters this component relies on (`getDate`, `toLocaleDateString`) yields
+* the previous day for users west of UTC. Appending a time makes the ISO form
+* parse as local time instead, while keeping `new Date`'s validation — an
+* out-of-range month or day is still `Invalid Date`, whereas building the parts
+* via `new Date(y, m - 1, d)` would silently roll '2024-13-45' over to 2025-02-14.
+*
+* Every other format accepted here ('01/15/2024', 'Jan 15, 2024', '2024/01/15')
+* is already parsed as local time, so only the date-only ISO form is rewritten.
+*/
+const parseLocalDate = (value) => ISO_DATE_ONLY.test(value) ? /* @__PURE__ */ new Date(`${value}T00:00:00`) : new Date(value);
+const parseDateRange = (value) => {
+	const parts = value.split(" - ");
+	if (parts.length !== 2) return null;
+	const [fromPart, toPart] = parts;
+	if (!fromPart || !toPart) return null;
+	const from = parseLocalDate(fromPart.trim());
+	const to = parseLocalDate(toPart.trim());
+	if (isNaN(from.getTime()) || isNaN(to.getTime())) return null;
+	return {
+		from,
+		to
+	};
+};
+//#endregion
+//#region src/blocks/DateRangeInput/DateRangeInput.tsx
+const DateRangeInput = ({ ref, state, variant, focusVariant, sizing, className, value: valueProp, defaultValue, onValueChange, onValueBlur, onChange, onBlur, onFocus, allowClear = false, startMonth, endMonth, disabled, readOnly, placeholder = "Select a date range", ...restInputProps }) => {
+	const inputRef = useRef(null);
+	const [inputValue, setInputValue] = useState("");
+	const [hasFocus, setHasFocus] = useState(false);
+	const [isOpen, setIsOpen] = useState(false);
+	const [month, setMonth] = useState(/* @__PURE__ */ new Date());
+	const [currentValue, setCurrentValue] = useControllableState({
+		prop: valueProp,
+		defaultProp: defaultValue ?? null
+	});
+	const canClear = allowClear && !!currentValue && !disabled && !readOnly;
+	const showPicker = !disabled && !readOnly;
+	const handleChange = (event) => {
+		const newValue = event.target.value;
+		setInputValue(newValue);
+		onChange?.(event);
+		const parsedRange = parseDateRange(newValue);
+		if (parsedRange !== null || !newValue.trim()) onValueChange?.(parsedRange);
+	};
+	const handleFocus = (event) => {
+		setInputValue(formatDateRange(currentValue, ""));
+		setHasFocus(true);
+		onFocus?.(event);
+	};
+	const handleBlur = (event) => {
+		setHasFocus(false);
+		onBlur?.(event);
+		const text = event.target.value;
+		const parsedRange = text === formatDateRange(currentValue, "") ? currentValue : parseDateRange(text);
+		onValueBlur?.(parsedRange);
+		setCurrentValue(parsedRange);
+	};
+	const handleDatePickerChange = (newValue) => {
+		const rangeValue = newValue ?? null;
+		setCurrentValue(rangeValue);
+		onValueChange?.(rangeValue);
+		setHasFocus(false);
+	};
+	const handleClear = () => {
+		if (!inputRef.current) return;
+		inputRef.current.value = "";
+		setInputValue("");
+		setCurrentValue(null);
+		onValueChange?.(null);
+		onChange?.(createChangeInputEvent(inputRef.current));
+	};
+	const handleOpenChange = (open) => {
+		if (open) setMonth(currentValue?.from ?? /* @__PURE__ */ new Date());
+		setIsOpen(open);
+	};
+	const displayValue = hasFocus ? inputValue : formatDateRange(currentValue, "");
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		state,
+		variant,
+		sizing,
+		focusVariant,
+		className,
+		children: [/* @__PURE__ */ jsx(InputGroup.Input, {
+			...restInputProps,
+			ref: mergeRefs(ref ?? null, inputRef),
+			type: "text",
+			value: displayValue,
+			placeholder,
+			onChange: handleChange,
+			onFocus: handleFocus,
+			onBlur: handleBlur,
+			disabled,
+			readOnly
+		}), (canClear || showPicker) && /* @__PURE__ */ jsxs(InputGroup.Addon, {
+			align: "inline-end",
+			children: [canClear && /* @__PURE__ */ jsx(InputGroup.Button, {
+				"aria-label": "Clear date range",
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: handleClear,
+				children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
+			}), showPicker && /* @__PURE__ */ jsx(DatePicker, {
+				endMonth,
+				mode: "range",
+				month,
+				onMonthChange: setMonth,
+				onOpenChange: handleOpenChange,
+				onSelect: handleDatePickerChange,
+				open: isOpen,
+				startMonth,
+				selected: currentValue ?? void 0,
+				children: /* @__PURE__ */ jsx(InputGroup.Button, {
+					"aria-label": "Select date range",
+					children: /* @__PURE__ */ jsx(Calendar, { className: "tw:size-4" })
+				})
+			})]
+		})]
+	});
+};
+//#endregion
+export { DateRangeInput };
+
+//# sourceMappingURL=DateRangeInput-DTuySEiq.js.map

package/dist/DateRangeInput-DTuySEiq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeInput-DTuySEiq.js","names":["CalendarIcon"],"sources":["../src/blocks/DateRangeInput/helpers.ts","../src/blocks/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import type { DateRange } from 'react-day-picker';\n\nexport const formatDateRange = (\n  range: DateRange | null | undefined,\n  inputValue: string,\n): string => {\n  if (!range) {\n    return inputValue;\n  }\n\n  const { from, to } = range;\n  const fromStr = from?.toLocaleDateString();\n  const toStr = to?.toLocaleDateString();\n  return `${fromStr} - ${toStr}`;\n};\n\nconst ISO_DATE_ONLY = /^\\d{4}-\\d{2}-\\d{2}$/;\n\n/**\n * `new Date('2024-01-15')` is spec'd as UTC midnight, so reading it back with the\n * local getters this component relies on (`getDate`, `toLocaleDateString`) yields\n * the previous day for users west of UTC. Appending a time makes the ISO form\n * parse as local time instead, while keeping `new Date`'s validation — an\n * out-of-range month or day is still `Invalid Date`, whereas building the parts\n * via `new Date(y, m - 1, d)` would silently roll '2024-13-45' over to 2025-02-14.\n *\n * Every other format accepted here ('01/15/2024', 'Jan 15, 2024', '2024/01/15')\n * is already parsed as local time, so only the date-only ISO form is rewritten.\n */\nconst parseLocalDate = (value: string): Date =>\n  ISO_DATE_ONLY.test(value) ? new Date(`${value}T00:00:00`) : new Date(value);\n\nexport const parseDateRange = (value: string): DateRange | null => {\n  const parts = value.split(' - ');\n  if (parts.length !== 2) {\n    return null;\n  }\n\n  const [fromPart, toPart] = parts;\n  if (!fromPart || !toPart) {\n    return null;\n  }\n\n  const from = parseLocalDate(fromPart.trim());\n  const to = parseLocalDate(toPart.trim());\n\n  if (isNaN(from.getTime()) || isNaN(to.getTime())) {\n    return null;\n  }\n\n  return { from, to };\n};\n","import { useRef, useState } from 'react';\nimport type { ChangeEventHandler, ComponentProps, ComponentRef, FocusEventHandler } from 'react';\nimport type { DateRange } from 'react-day-picker';\n\nimport { DatePicker } from '../../components/DatePicker';\nimport { InputGroup } from '../../components/InputGroup';\nimport { useControllableState } from '../../hooks/useControllableState';\nimport { Calendar as CalendarIcon, X } from '../../icons';\nimport { createChangeInputEvent, mergeRefs } from '../../utils';\n\nimport { formatDateRange, parseDateRange } from './helpers';\n\ntype InputGroupProps = Pick<\n  ComponentProps<typeof InputGroup>,\n  'variant' | 'focusVariant' | 'state' | 'sizing'\n>;\n\ntype InputGroupInputProps = Omit<\n  ComponentProps<typeof InputGroup.Input>,\n  'value' | 'defaultValue' | 'type'\n>;\n\ntype Props = InputGroupProps &\n  InputGroupInputProps & {\n    value?: DateRange | null;\n    defaultValue?: DateRange | null;\n    onValueChange?: (value: DateRange | null) => void;\n    onValueBlur?: (value: DateRange | null) => void;\n    allowClear?: boolean;\n    startMonth?: Date;\n    endMonth?: Date;\n  };\n\nexport const DateRangeInput = ({\n  ref,\n\n  // group props\n  state,\n  variant,\n  focusVariant,\n  sizing,\n  className,\n\n  // own props\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onValueBlur,\n  onChange,\n  onBlur,\n  onFocus,\n  allowClear = false,\n  startMonth,\n  endMonth,\n\n  // input props\n  disabled,\n  readOnly,\n  placeholder = 'Select a date range',\n  ...restInputProps\n}: Props) => {\n  const inputRef = useRef<ComponentRef<'input'>>(null);\n\n  const [inputValue, setInputValue] = useState('');\n  const [hasFocus, setHasFocus] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n  const [month, setMonth] = useState<Date>(new Date());\n\n  // `onValueChange` is fired explicitly per-path below (not through the hook), because commits\n  // happen on blur / picker-select rather than on every keystroke.\n  const [currentValue, setCurrentValue] = useControllableState<DateRange | null>({\n    prop: valueProp,\n    defaultProp: defaultValue ?? null,\n  });\n\n  const canClear = allowClear && !!currentValue && !disabled && !readOnly;\n  const showPicker = !disabled && !readOnly;\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    const newValue = event.target.value;\n    setInputValue(newValue);\n    onChange?.(event);\n\n    const parsedRange = parseDateRange(newValue);\n    if (parsedRange !== null || !newValue.trim()) {\n      onValueChange?.(parsedRange);\n    }\n  };\n\n  const handleFocus: FocusEventHandler<HTMLInputElement> = (event) => {\n    setInputValue(formatDateRange(currentValue, ''));\n    setHasFocus(true);\n    onFocus?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    setHasFocus(false);\n    onBlur?.(event);\n\n    // If the field still shows the formatted current value (focused and blurred\n    // without editing), keep it as-is. `formatDateRange` uses `toLocaleDateString`,\n    // whose output is not reliably parseable by `new Date(...)` in every locale, so\n    // round-tripping an untouched value through `parseDateRange` could wrongly null it.\n    const text = event.target.value;\n    const parsedRange =\n      text === formatDateRange(currentValue, '') ? currentValue : parseDateRange(text);\n    onValueBlur?.(parsedRange);\n\n    setCurrentValue(parsedRange);\n  };\n\n  const handleDatePickerChange = (newValue: DateRange | undefined) => {\n    const rangeValue = newValue ?? null;\n\n    setCurrentValue(rangeValue);\n    onValueChange?.(rangeValue);\n\n    setHasFocus(false);\n  };\n\n  const handleClear = () => {\n    if (!inputRef.current) return;\n    inputRef.current.value = '';\n    setInputValue('');\n    setCurrentValue(null);\n    onValueChange?.(null);\n    onChange?.(createChangeInputEvent(inputRef.current));\n  };\n\n  const handleOpenChange = (open: boolean) => {\n    if (open) {\n      setMonth(currentValue?.from ?? new Date());\n    }\n    setIsOpen(open);\n  };\n\n  const displayValue = hasFocus ? inputValue : formatDateRange(currentValue, '');\n\n  return (\n    <InputGroup\n      state={state}\n      variant={variant}\n      sizing={sizing}\n      focusVariant={focusVariant}\n      className={className}\n    >\n      <InputGroup.Input\n        {...restInputProps}\n        ref={mergeRefs(ref ?? null, inputRef)}\n        type=\"text\"\n        value={displayValue}\n        placeholder={placeholder}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        disabled={disabled}\n        readOnly={readOnly}\n      />\n\n      {(canClear || showPicker) && (\n        <InputGroup.Addon align=\"inline-end\">\n          {canClear && (\n            <InputGroup.Button\n              aria-label=\"Clear date range\"\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={handleClear}\n            >\n              <X className=\"tw:size-4\" />\n            </InputGroup.Button>\n          )}\n          {showPicker && (\n            <DatePicker\n              endMonth={endMonth}\n              mode=\"range\"\n              month={month}\n              onMonthChange={setMonth}\n              onOpenChange={handleOpenChange}\n              onSelect={handleDatePickerChange}\n              open={isOpen}\n              startMonth={startMonth}\n              selected={currentValue ?? undefined}\n            >\n              <InputGroup.Button aria-label=\"Select date range\">\n                <CalendarIcon className=\"tw:size-4\" />\n              </InputGroup.Button>\n            </DatePicker>\n          )}\n        </InputGroup.Addon>\n      )}\n    </InputGroup>\n  );\n};\n"],"mappings":"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"}

package/dist/DateRangePicker-DCmMHg4s.js

@@ -0,0 +1,159 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { ChevronDown } from "./icons-Cek151jC.js";
+import { Button } from "./Button-6xBX0nNl.js";
+import { Popover } from "./Popover-CzeHjvrB.js";
+import { Calendar } from "./Calendar-cG5NIJ4O.js";
+import { overlayTriggerVariants } from "./styles-DSUP_-9Z.js";
+import { TimePicker, formatTime, pad, parseTime } from "./TimePicker-D9zktB8A.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/DateRangePicker/DateRangePicker.tsx
+const timeOf = (date) => formatTime(date.getHours(), date.getMinutes());
+const isoDate = (date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+const formatRange = (range, format) => {
+	if (!range?.from) return null;
+	return range.to ? `${format(range.from)} → ${format(range.to)}` : format(range.from);
+};
+const withHoursMinutes = (target, hour, minute) => {
+	const next = new Date(target);
+	next.setHours(hour, minute, 0, 0);
+	return next;
+};
+const withTimeOf = (target, source) => withHoursMinutes(target, source.getHours(), source.getMinutes());
+/** Returns `target` at `time` ("HH:mm"); unparseable input leaves it alone. */
+const atTime = (target, time) => {
+	const { hour, minute } = parseTime(time);
+	return hour === null || minute === null ? target : withHoursMinutes(target, hour, minute);
+};
+/** Time-of-day for one end of the range, on the same `TimePicker` the rest of the app uses. */
+const TimeField = ({ label, date, onChange }) => /* @__PURE__ */ jsxs("div", {
+	className: "tw:flex tw:items-center tw:gap-2 tw:text-sm",
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "tw:text-muted-foreground",
+		children: label
+	}), /* @__PURE__ */ jsx(TimePicker, {
+		selected: date ? timeOf(date) : null,
+		onSelect: onChange,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size: "small",
+			disabled: !date,
+			"aria-label": `${label} time`,
+			children: date ? timeOf(date) : "--:--"
+		})
+	})]
+});
+/**
+* Range-mode date picker — `Popover` + `Calendar` in range mode, with an optional preset sidebar,
+* a time-of-day row (`withTime`) and an explicit Apply step (`requireApply`). Use for selecting a
+* `{ from, to }` pair; for a single date use `DatePicker`.
+*/
+const DateRangePicker = ({ align = "start", alignOffset, className, defaultOpen, disabled = false, disabledDays, formatDate, label, onChange, onOpenChange, onPresetSelect, open, placeholder = "Pick a date range", presets, requireApply = false, sideOffset, value, variant, withTime = false }) => {
+	const isArgoDesign = useArgoDesign();
+	const [draft, setDraft] = useState(value);
+	const handleOpenChange = (nextOpen) => {
+		if (nextOpen) setDraft(value);
+		onOpenChange?.(nextOpen);
+	};
+	const current = requireApply ? draft : value;
+	const edit = (range) => {
+		if (requireApply) setDraft(range);
+		else onChange(range);
+	};
+	const handleSelect = (range) => {
+		if (!range?.from) {
+			edit(void 0);
+			return;
+		}
+		edit({
+			from: current?.from ? withTimeOf(range.from, current.from) : range.from,
+			to: range.to && current?.to ? withTimeOf(range.to, current.to) : range.to
+		});
+	};
+	const triggerLabel = label ?? formatRange(value, formatDate ?? ((date) => withTime ? `${isoDate(date)} ${timeOf(date)}` : isoDate(date)));
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		defaultOpen,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsxs(Popover.Trigger, {
+			disabled,
+			className: cn(overlayTriggerVariants({
+				variant: isArgoDesign ? "argo" : variant,
+				sizing: "medium"
+			}), className),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn("tw:truncate", !triggerLabel && "tw:text-muted-foreground"),
+				children: triggerLabel ?? placeholder
+			}), /* @__PURE__ */ jsx(ChevronDown, { className: "tw:size-4 tw:text-muted-foreground" })]
+		}), /* @__PURE__ */ jsxs(Popover.Content, {
+			align,
+			alignOffset,
+			sideOffset,
+			className: "tw:w-auto tw:p-0",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "tw:flex",
+				children: [presets && presets.length > 0 ? /* @__PURE__ */ jsx("div", {
+					className: "tw:flex tw:flex-col tw:gap-1 tw:border-r tw:border-solid tw:border-border tw:p-2",
+					children: presets.map((preset) => /* @__PURE__ */ jsx(Popover.Close, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "invisible",
+							size: "small",
+							className: "tw:justify-start",
+							onClick: () => onPresetSelect ? onPresetSelect(preset) : onChange(preset.range),
+							children: preset.label
+						})
+					}, preset.label))
+				}) : null, /* @__PURE__ */ jsx(Calendar, {
+					mode: "range",
+					selected: current,
+					onSelect: handleSelect,
+					numberOfMonths: 2,
+					defaultMonth: current?.from,
+					disabled: disabledDays
+				})]
+			}), (withTime || requireApply) && /* @__PURE__ */ jsxs("div", {
+				className: "tw:flex tw:items-center tw:gap-3 tw:border-t tw:border-solid tw:border-border tw:p-3",
+				children: [withTime && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TimeField, {
+					label: "From",
+					date: current?.from,
+					onChange: (time) => current?.from && edit({
+						...current,
+						from: atTime(current.from, time)
+					})
+				}), /* @__PURE__ */ jsx(TimeField, {
+					label: "To",
+					date: current?.to,
+					onChange: (time) => current?.to && edit({
+						...current,
+						to: atTime(current.to, time)
+					})
+				})] }), requireApply && /* @__PURE__ */ jsxs("div", {
+					className: "tw:ml-auto tw:flex tw:gap-2",
+					children: [/* @__PURE__ */ jsx(Popover.Close, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "small",
+							children: "Cancel"
+						})
+					}), /* @__PURE__ */ jsx(Popover.Close, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Button, {
+							size: "small",
+							disabled: !draft?.from,
+							onClick: () => onChange(draft),
+							children: "Apply"
+						})
+					})]
+				})]
+			})]
+		})]
+	});
+};
+DateRangePicker.displayName = "DateRangePicker";
+//#endregion
+export { DateRangePicker };
+
+//# sourceMappingURL=DateRangePicker-DCmMHg4s.js.map

package/dist/DateRangePicker-DCmMHg4s.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker-DCmMHg4s.js","names":[],"sources":["../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { DateRange as DayPickerDateRange, Matcher } from 'react-day-picker';\nimport type { PopoverContentProps, PopoverProps } from '@radix-ui/react-popover';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { ChevronDown } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Calendar } from '../Calendar';\nimport { overlayTriggerVariants } from '../OverlayTrigger/styles';\nimport { Popover } from '../Popover';\nimport { useArgoDesign } from '../ThemeProvider/context';\nimport { TimePicker } from '../TimePicker';\nimport { formatTime, pad, parseTime } from '../TimePicker/utils';\n\nexport type DateRange = {\n  from: Date;\n  to?: Date;\n};\n\nexport type DateRangePreset = {\n  label: string;\n  /**\n   * The range the preset stands for. A preset may omit it and carry `value` instead — or neither,\n   * for a clear-the-range preset (\"All time\"): without `onPresetSelect`, picking one calls\n   * `onChange(undefined)`.\n   */\n  range?: DateRange;\n  /**\n   * Echoed back through `onPresetSelect` instead of `range`. For consumers whose stored form of a\n   * range is not two dates: a relative token the server resolves per request, such as `-7 days`.\n   */\n  value?: string;\n};\n\ntype DateRangePickerProps = {\n  value: DateRange | undefined;\n  onChange: (range: DateRange | undefined) => void;\n  /**\n   * Replaces the formatted range on the trigger entirely — the name of the active preset. For a\n   * range in the app's own date style, prefer `formatDate`, which keeps the from → to join here.\n   */\n  label?: ReactNode;\n  /**\n   * Formats one end of the range on the trigger, replacing the built-in ISO format (which is\n   * unambiguous but matches no app in particular, including the `withTime` time-of-day part).\n   * The from → to join stays with the component.\n   */\n  formatDate?: (date: Date) => string;\n  placeholder?: string;\n  presets?: readonly DateRangePreset[];\n  /** Called instead of `onChange` when a preset is picked, with the preset itself. */\n  onPresetSelect?: (preset: DateRangePreset) => void;\n  /** Adds a start/end time-of-day row; the emitted `from` / `to` then carry hours and minutes. */\n  withTime?: boolean;\n  /** Hold edits in a draft and emit only on Apply, so one range costs one `onChange`. */\n  requireApply?: boolean;\n  /** Days that cannot be picked, as a react-day-picker matcher — e.g. `{ after: new Date() }`. */\n  disabledDays?: Matcher | Matcher[];\n  variant?: Exclude<VariantProps<typeof overlayTriggerVariants>['variant'], 'argo'>;\n  disabled?: boolean;\n  className?: string;\n} & Pick<PopoverProps, 'open' | 'onOpenChange' | 'defaultOpen'> &\n  Pick<PopoverContentProps, 'align' | 'alignOffset' | 'sideOffset'>;\n\nconst timeOf = (date: Date) => formatTime(date.getHours(), date.getMinutes());\n\nconst isoDate = (date: Date) =>\n  `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;\n\nconst formatRange = (\n  range: DateRange | undefined,\n  format: (date: Date) => string,\n): string | null => {\n  if (!range?.from) return null;\n  return range.to ? `${format(range.from)} → ${format(range.to)}` : format(range.from);\n};\n\nconst withHoursMinutes = (target: Date, hour: number, minute: number) => {\n  const next = new Date(target);\n  next.setHours(hour, minute, 0, 0);\n  return next;\n};\n\nconst withTimeOf = (target: Date, source: Date) =>\n  withHoursMinutes(target, source.getHours(), source.getMinutes());\n\n/** Returns `target` at `time` (\"HH:mm\"); unparseable input leaves it alone. */\nconst atTime = (target: Date, time: string) => {\n  const { hour, minute } = parseTime(time);\n  return hour === null || minute === null ? target : withHoursMinutes(target, hour, minute);\n};\n\ntype TimeFieldProps = {\n  label: string;\n  date: Date | undefined;\n  onChange: (time: string) => void;\n};\n\n/** Time-of-day for one end of the range, on the same `TimePicker` the rest of the app uses. */\nconst TimeField = ({ label, date, onChange }: TimeFieldProps) => (\n  <div className=\"tw:flex tw:items-center tw:gap-2 tw:text-sm\">\n    <span className=\"tw:text-muted-foreground\">{label}</span>\n    <TimePicker selected={date ? timeOf(date) : null} onSelect={onChange}>\n      <Button variant=\"outline\" size=\"small\" disabled={!date} aria-label={`${label} time`}>\n        {date ? timeOf(date) : '--:--'}\n      </Button>\n    </TimePicker>\n  </div>\n);\n\n/**\n * Range-mode date picker — `Popover` + `Calendar` in range mode, with an optional preset sidebar,\n * a time-of-day row (`withTime`) and an explicit Apply step (`requireApply`). Use for selecting a\n * `{ from, to }` pair; for a single date use `DatePicker`.\n */\nexport const DateRangePicker = ({\n  align = 'start',\n  alignOffset,\n  className,\n  defaultOpen,\n  disabled = false,\n  disabledDays,\n  formatDate,\n  label,\n  onChange,\n  onOpenChange,\n  onPresetSelect,\n  open,\n  placeholder = 'Pick a date range',\n  presets,\n  requireApply = false,\n  sideOffset,\n  value,\n  variant,\n  withTime = false,\n}: DateRangePickerProps) => {\n  const isArgoDesign = useArgoDesign();\n  const [draft, setDraft] = useState<DateRange | undefined>(value);\n\n  const handleOpenChange = (nextOpen: boolean) => {\n    // Reopening restarts from the committed value, so a cancelled edit never leaks into the next visit.\n    if (nextOpen) setDraft(value);\n    onOpenChange?.(nextOpen);\n  };\n\n  const current = requireApply ? draft : value;\n\n  const edit = (range: DateRange | undefined) => {\n    if (requireApply) setDraft(range);\n    else onChange(range);\n  };\n\n  const handleSelect = (range: DayPickerDateRange | undefined) => {\n    if (!range?.from) {\n      edit(undefined);\n      return;\n    }\n\n    // Picking days keeps whatever time-of-day is already set — otherwise every day click would\n    // silently reset the range back to midnight.\n    edit({\n      from: current?.from ? withTimeOf(range.from, current.from) : range.from,\n      to: range.to && current?.to ? withTimeOf(range.to, current.to) : range.to,\n    });\n  };\n\n  const format =\n    formatDate ?? ((date: Date) => (withTime ? `${isoDate(date)} ${timeOf(date)}` : isoDate(date)));\n  const triggerLabel = label ?? formatRange(value, format);\n\n  return (\n    <Popover open={open} defaultOpen={defaultOpen} onOpenChange={handleOpenChange}>\n      <Popover.Trigger\n        disabled={disabled}\n        className={cn(\n          overlayTriggerVariants({ variant: isArgoDesign ? 'argo' : variant, sizing: 'medium' }),\n          className,\n        )}\n      >\n        <span className={cn('tw:truncate', !triggerLabel && 'tw:text-muted-foreground')}>\n          {triggerLabel ?? placeholder}\n        </span>\n        <ChevronDown className=\"tw:size-4 tw:text-muted-foreground\" />\n      </Popover.Trigger>\n      <Popover.Content\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className=\"tw:w-auto tw:p-0\"\n      >\n        <div className=\"tw:flex\">\n          {presets && presets.length > 0 ? (\n            <div className=\"tw:flex tw:flex-col tw:gap-1 tw:border-r tw:border-solid tw:border-border tw:p-2\">\n              {presets.map((preset) => (\n                <Popover.Close asChild key={preset.label}>\n                  <Button\n                    variant=\"invisible\"\n                    size=\"small\"\n                    className=\"tw:justify-start\"\n                    onClick={() =>\n                      onPresetSelect ? onPresetSelect(preset) : onChange(preset.range)\n                    }\n                  >\n                    {preset.label}\n                  </Button>\n                </Popover.Close>\n              ))}\n            </div>\n          ) : null}\n          <Calendar\n            mode=\"range\"\n            selected={current}\n            onSelect={handleSelect}\n            numberOfMonths={2}\n            defaultMonth={current?.from}\n            disabled={disabledDays}\n          />\n        </div>\n        {(withTime || requireApply) && (\n          <div className=\"tw:flex tw:items-center tw:gap-3 tw:border-t tw:border-solid tw:border-border tw:p-3\">\n            {withTime && (\n              <>\n                <TimeField\n                  label=\"From\"\n                  date={current?.from}\n                  onChange={(time) =>\n                    current?.from && edit({ ...current, from: atTime(current.from, time) })\n                  }\n                />\n                <TimeField\n                  label=\"To\"\n                  date={current?.to}\n                  onChange={(time) =>\n                    current?.to && edit({ ...current, to: atTime(current.to, time) })\n                  }\n                />\n              </>\n            )}\n            {requireApply && (\n              <div className=\"tw:ml-auto tw:flex tw:gap-2\">\n                <Popover.Close asChild>\n                  <Button variant=\"outline\" size=\"small\">\n                    Cancel\n                  </Button>\n                </Popover.Close>\n                <Popover.Close asChild>\n                  <Button size=\"small\" disabled={!draft?.from} onClick={() => onChange(draft)}>\n                    Apply\n                  </Button>\n                </Popover.Close>\n              </div>\n            )}\n          </div>\n        )}\n      </Popover.Content>\n    </Popover>\n  );\n};\n\nDateRangePicker.displayName = 'DateRangePicker';\n"],"mappings":"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"}

package/dist/DiagramSkeleton-lwBS2YBa.js

@@ -0,0 +1,11 @@
+import { Skeleton } from "./internal/components/Skeleton/Skeleton.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/blocks/MermaidDiagram/DiagramSkeleton.tsx
+const DiagramSkeleton = () => /* @__PURE__ */ jsx("div", {
+	className: "tw:my-3 tw:overflow-hidden tw:rounded-md tw:border tw:border-border tw:bg-muted tw:p-6",
+	children: /* @__PURE__ */ jsx(Skeleton, { className: "tw:h-40" })
+});
+//#endregion
+export { DiagramSkeleton };
+
+//# sourceMappingURL=DiagramSkeleton-lwBS2YBa.js.map

package/dist/DiagramSkeleton-lwBS2YBa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramSkeleton-lwBS2YBa.js","names":[],"sources":["../src/blocks/MermaidDiagram/DiagramSkeleton.tsx"],"sourcesContent":["import { Skeleton } from '../../components/Skeleton/Skeleton';\n\n// Lives apart from MermaidDiagram so callers can show it while that component's\n// chunk is still loading, without importing beautiful-mermaid to do it.\nexport const DiagramSkeleton = () => (\n  <div className=\"tw:my-3 tw:overflow-hidden tw:rounded-md tw:border tw:border-border tw:bg-muted tw:p-6\">\n    <Skeleton className=\"tw:h-40\" />\n  </div>\n);\n"],"mappings":";;;AAIA,MAAa,wBACX,oBAAC,OAAD;CAAK,WAAU;CACb,UAAA,oBAAC,UAAD,EAAU,WAAU,UAAW,CAAA;AAC5B,CAAA"}