@exsto/ds 0.0.1-rc.8 → 0.0.1-rc.9

package/dist/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","names":[],"sources":["../../ui/src/components/edyn/date-picker/date-text.ts","../../ui/src/components/edyn/date-picker/date-picker.tsx"],"sourcesContent":["/**\n * Reading and writing a calendar day as the text a person types.\n *\n * A day is the string `yyyy-mm-dd` everywhere here, never a Date: a Date is an instant, and the instant for \"5 March\" is a\n * different calendar day in another time zone (local midnight serialised as UTC lands on the 4th east of Greenwich). The\n * string is also what `<input type=\"date\">`, JSON and a .NET `DateOnly` use. Strings of that shape sort and compare as\n * days, so min, max and disabled days are compared as plain strings with no Date involved.\n */\n\nimport { dateToDay, dayToDate } from '@edyn/ui/components/edyn/date-range-picker';\n\nexport type TDatePart = 'day' | 'month' | 'year';\n\n/** Why a typed text is not a day the picker can use. */\nexport type TDateProblem = 'format' | 'notReal' | 'beforeMin' | 'afterMax' | 'unavailable';\n\nexport type TParsedDay = { kind: 'empty' } | { kind: 'day'; day: string } | { kind: 'problem'; problem: 'format' | 'notReal' };\n\nconst SHAPE = { day: '2-digit', month: '2-digit', year: 'numeric' } as const;\n\n/** The order a locale writes day, month and year in: en-GB is day, month, year; en-US month, day, year; sv year first. */\nexport const datePartsOf = (locale: string): TDatePart[] =>\n  new Intl.DateTimeFormat(locale, SHAPE)\n    .formatToParts(new Date(2000, 0, 2, 12))\n    .flatMap((part) => (part.type === 'day' || part.type === 'month' || part.type === 'year' ? [part.type] : []));\n\n/** What to type, written the locale's way: `DD/MM/YYYY` for en-GB. */\nexport const datePatternOf = (locale: string): string =>\n  new Intl.DateTimeFormat(locale, SHAPE)\n    .formatToParts(new Date(2000, 0, 2, 12))\n    .map((part) => {\n      if (part.type === 'day') {\n        return 'DD';\n      }\n      if (part.type === 'month') {\n        return 'MM';\n      }\n      return part.type === 'year' ? 'YYYY' : part.value;\n    })\n    .join('')\n    .trim();\n\n/** A day written the locale's way: `05/03/2026` for en-GB. */\nexport const formatDay = (day: string, locale: string): string => {\n  const date = dayToDate(day);\n  return date === undefined ? '' : new Intl.DateTimeFormat(locale, SHAPE).format(date);\n};\n\nconst isRealDay = (year: number, month: number, dayOfMonth: number): boolean => {\n  if (year < 1000 || month < 1 || month > 12 || dayOfMonth < 1) {\n    return false;\n  }\n  const date = new Date(year, month - 1, dayOfMonth, 12);\n  return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === dayOfMonth;\n};\n\nconst toDay = (year: number, month: number, dayOfMonth: number): string => dateToDay(new Date(year, month - 1, dayOfMonth, 12)) ?? '';\n\n/**\n * Reads typed text as a day. The locale's order decides which number is the day; a first number of four digits is always\n * a year (so `2026-03-05` is read the same everywhere); the separator can be anything that is not a digit, and eight\n * digits with none (`05032026`) are split by the order. A year must have four digits: `5/3/26` is refused, not guessed.\n */\nexport const parseDateText = (text: string, locale: string): TParsedDay => {\n  const trimmed = text.trim();\n  if (trimmed === '') {\n    return { kind: 'empty' };\n  }\n  if (!/^[\\d\\s./\\-,]+$/.test(trimmed)) {\n    return { kind: 'problem', problem: 'format' };\n  }\n  const order = datePartsOf(locale);\n  let numbers = trimmed.match(/\\d+/g) ?? [];\n  let parts: readonly TDatePart[] = order;\n  if (numbers.length === 1 && numbers[0]?.length === 8) {\n    const digits = numbers[0];\n    const yearFirst = order[0] === 'year';\n    numbers = yearFirst ? [digits.slice(0, 4), digits.slice(4, 6), digits.slice(6)] : [digits.slice(0, 2), digits.slice(2, 4), digits.slice(4)];\n  }\n  if (numbers.length !== 3) {\n    return { kind: 'problem', problem: 'format' };\n  }\n  if (numbers[0]?.length === 4) {\n    parts = ['year', 'month', 'day'];\n  }\n  const read: Record<TDatePart, string> = { day: '', month: '', year: '' };\n  parts.forEach((part, index) => {\n    read[part] = numbers[index] ?? '';\n  });\n  if (read.year.length !== 4 || read.day.length > 2 || read.month.length > 2) {\n    return { kind: 'problem', problem: 'format' };\n  }\n  const [year, month, dayOfMonth] = [Number(read.year), Number(read.month), Number(read.day)];\n  return isRealDay(year, month, dayOfMonth) ? { kind: 'day', day: toDay(year, month, dayOfMonth) } : { kind: 'problem', problem: 'notReal' };\n};\n\nexport type TDisabledDays = readonly string[] | ((day: string) => boolean);\n\nexport interface IDayLimits {\n  min?: string;\n  max?: string;\n  disabledDates?: TDisabledDays;\n}\n\n/** Whether a day is allowed, and if not, which limit it breaks. */\nexport const dayProblem = (day: string, { min, max, disabledDates }: IDayLimits): TDateProblem | undefined => {\n  if (min !== undefined && day < min) {\n    return 'beforeMin';\n  }\n  if (max !== undefined && day > max) {\n    return 'afterMax';\n  }\n  const off = typeof disabledDates === 'function' ? disabledDates(day) : (disabledDates?.includes(day) ?? false);\n  return off ? 'unavailable' : undefined;\n};\n","import { dateToDay, dayToDate } from '@edyn/ui/components/edyn/date-range-picker';\nimport { Button } from '@edyn/ui/components/ui/button';\nimport { Calendar } from '@edyn/ui/components/ui/calendar';\nimport { Input } from '@edyn/ui/components/ui/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '@edyn/ui/components/ui/popover';\nimport { firstWeekdayOf } from '@edyn/ui/lib/first-weekday';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCalendar } from '@tabler/icons-react';\nimport { type ChangeEvent, type FocusEvent, type KeyboardEvent, useEffect, useId, useMemo, useRef, useState } from 'react';\nimport type { Locale } from 'react-day-picker';\nimport { datePatternOf, dayProblem, formatDay, parseDateText, type TDateProblem, type TDisabledDays } from './date-text';\n\n/** Every word the component prints, so a product can translate it. */\nexport interface IDatePickerLabels {\n  /** The calendar button's accessible name. */\n  choose: string;\n  /** Said when the text is not a date; `pattern` is what to type, written the locale's way (`DD/MM/YYYY`). */\n  format: (pattern: string) => string;\n  notReal: string;\n  /** `min` and `max` are written the locale's way. */\n  beforeMin: (min: string) => string;\n  afterMax: (max: string) => string;\n  unavailable: string;\n}\n\nexport const DEFAULT_DATE_PICKER_LABELS: IDatePickerLabels = {\n  choose: 'Choose date',\n  format: (pattern) => `Enter a date as ${pattern}.`,\n  notReal: 'That date does not exist.',\n  beforeMin: (min) => `Choose ${min} or later.`,\n  afterMax: (max) => `Choose ${max} or earlier.`,\n  unavailable: 'That date is not available.',\n};\n\nexport interface IDatePickerProps {\n  /** For a Label's htmlFor; inside a Field the Field's label is already wired. */\n  id?: string;\n  /**\n   * The chosen day as `yyyy-mm-dd`, or `undefined` for none (an empty string counts as none, so a value kept for an\n   * `<input type=\"date\">` drops in). A string and not a Date, on purpose: a Date is an instant, and the instant for\n   * \"5 March\" is another calendar day in another time zone, so a Date serialised for an API drifts a day. The text is\n   * what `<input type=\"date\">`, JSON and a .NET `DateOnly` use, and it compares as a day.\n   */\n  value: string | undefined;\n  /** Called with a valid day, or with `undefined` when the field is emptied or its text is not a usable day. */\n  onValueChange: (value: string | undefined) => void;\n  /** The earliest and latest day that can be chosen, as `yyyy-mm-dd`, both included. */\n  min?: string;\n  max?: string;\n  /** Days that cannot be chosen: a list of `yyyy-mm-dd`, or a function that says so for one (weekends, say). */\n  disabledDates?: TDisabledDays;\n  disabled?: boolean;\n  /** How a day is written and in which order it is typed (BCP 47); en-GB reads 05/03/2026. */\n  locale?: string;\n  /** The calendar's own words (month and weekday names), as a date-fns locale; English by default. The first weekday follows `locale`. */\n  calendarLocale?: Locale;\n  /** What the empty field shows; the pattern for the locale (`DD/MM/YYYY`) by default. */\n  placeholder?: string;\n  /** An accessible name, when there is no visible label to point at. */\n  'aria-label'?: string;\n  /** Marks the field invalid (the kit's destructive border), as a Field's invalid state does. */\n  'aria-invalid'?: boolean | 'true' | 'false';\n  /** The id of the text that explains it. Added to what a Field names already, and to the picker's own error. */\n  'aria-describedby'?: string;\n  labels?: Partial<IDatePickerLabels>;\n  /** Layout only (a width); the look is the kit's. */\n  className?: string;\n}\n\nconst problemText = (\n  problem: TDateProblem,\n  labels: IDatePickerLabels,\n  locale: string,\n  limits: { min?: string; max?: string },\n  pattern: string,\n): string => {\n  switch (problem) {\n    case 'format':\n      return labels.format(pattern);\n    case 'notReal':\n      return labels.notReal;\n    case 'beforeMin':\n      return labels.beforeMin(limits.min === undefined ? '' : formatDay(limits.min, locale));\n    case 'afterMax':\n      return labels.afterMax(limits.max === undefined ? '' : formatDay(limits.max, locale));\n    default:\n      return labels.unavailable;\n  }\n};\n\n/**\n * One calendar day, typed or picked. The field takes the day in the locale's order (05/03/2026 in en-GB) and reads it\n * when it loses focus, saying inline what is wrong with it; the button, or Alt+ArrowDown in the field, opens a calendar.\n */\nexport const DatePicker = ({\n  id,\n  value,\n  onValueChange,\n  min,\n  max,\n  disabledDates,\n  disabled = false,\n  locale = 'en-GB',\n  calendarLocale,\n  placeholder,\n  'aria-label': ariaLabel,\n  'aria-invalid': ariaInvalid,\n  'aria-describedby': ariaDescribedBy,\n  labels: labelOverrides,\n  className,\n}: IDatePickerProps) => {\n  const labels = useMemo(() => ({ ...DEFAULT_DATE_PICKER_LABELS, ...labelOverrides }), [labelOverrides]);\n  const pattern = useMemo(() => datePatternOf(locale), [locale]);\n  const current = value === '' ? undefined : value;\n  const errorId = useId();\n  const refField = useRef<HTMLDivElement | null>(null);\n  const refInput = useRef<HTMLInputElement | null>(null);\n  // The mouse is down inside the picker, so a blur of the field is a click on something in it, not a Tab.\n  const refPointer = useRef(false);\n  // The day the field last agreed on with the page, so a change from outside is told from our own report of it.\n  const refKnown = useRef<string | undefined>(current);\n  const [text, setText] = useState(current === undefined ? '' : formatDay(current, locale));\n  const [problem, setProblem] = useState<TDateProblem | null>(null);\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    if (current !== refKnown.current) {\n      refKnown.current = current;\n      setText(current === undefined ? '' : formatDay(current, locale));\n      setProblem(null);\n    }\n  }, [current, locale]);\n\n  const report = (day: string | undefined) => {\n    refKnown.current = day;\n    onValueChange(day);\n  };\n\n  /** Reads the text: a day is reported and written back in full, anything else is said inline and reported as no day. */\n  const commit = (typed: string) => {\n    const parsed = parseDateText(typed, locale);\n    if (parsed.kind === 'empty') {\n      setProblem(null);\n      if (current !== undefined) {\n        report(undefined);\n      }\n      return;\n    }\n    const found = parsed.kind === 'problem' ? parsed.problem : dayProblem(parsed.day, { min, max, disabledDates });\n    if (found !== undefined) {\n      setProblem(found);\n      if (current !== undefined) {\n        report(undefined);\n      }\n      return;\n    }\n    if (parsed.kind === 'day') {\n      setProblem(null);\n      setText(formatDay(parsed.day, locale));\n      if (parsed.day !== current) {\n        report(parsed.day);\n      }\n    }\n  };\n\n  const pick = (date: Date | undefined) => {\n    const day = dateToDay(date);\n    if (day === undefined) {\n      return;\n    }\n    setProblem(null);\n    setText(formatDay(day, locale));\n    if (day !== current) {\n      report(day);\n    }\n    setOpen(false);\n  };\n\n  /**\n   * Text is read as the person leaves the field. A day (or nothing) is taken at once; a message about text that is not a\n   * day is shown too, unless they are only on the way to the calendar: a press of the mouse on the button, or focus\n   * going into the calendar that Alt+ArrowDown opened, with the text half typed. Leaving the picker for anywhere else\n   * reads whatever is typed.\n   */\n  const handleBlur = (event: FocusEvent<HTMLElement>) => {\n    const next = event.relatedTarget as Element | null;\n    const intoCalendar = next?.closest('[data-slot=\"popover-content\"]') != null;\n    const intoButton = next?.closest('[data-slot=\"date-picker-trigger\"]') != null;\n    const typed = refInput.current?.value ?? '';\n    if (!(intoCalendar || intoButton || (next !== null && refField.current?.contains(next) === true))) {\n      commit(typed);\n      return;\n    }\n    if (event.target !== refInput.current) {\n      return;\n    }\n    const onTheWay = intoCalendar || (intoButton && refPointer.current);\n    const parsed = parseDateText(typed, locale);\n    const usable = parsed.kind === 'empty' || (parsed.kind === 'day' && dayProblem(parsed.day, { min, max, disabledDates }) === undefined);\n    if (usable || !onTheWay) {\n      commit(typed);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'ArrowDown' && event.altKey && !disabled) {\n      event.preventDefault();\n      setOpen(true);\n      return;\n    }\n    // The field has no key handler of Base UI's to close the calendar, so the key would reach the Sheet or Dialog around\n    // it and close that too. While the calendar is open it is this field's key; when it is closed it is the page's.\n    if (event.key === 'Escape' && open) {\n      event.preventDefault();\n      event.stopPropagation();\n      setOpen(false);\n      return;\n    }\n    if (event.key === 'Enter') {\n      const parsed = parseDateText(event.currentTarget.value, locale);\n      if (parsed.kind !== 'empty' && (parsed.kind === 'problem' || dayProblem(parsed.day, { min, max, disabledDates }) !== undefined)) {\n        event.preventDefault();\n      }\n      commit(event.currentTarget.value);\n    }\n  };\n\n  const selected = dayToDate(current);\n  const limits = { min, max };\n  const invalid = problem !== null || ariaInvalid === true || ariaInvalid === 'true';\n  const describedBy = [ariaDescribedBy, problem === null ? undefined : errorId].filter(Boolean).join(' ') || undefined;\n  const isOff = (date: Date): boolean => {\n    const day = dateToDay(date);\n    return day !== undefined && dayProblem(day, { min, max, disabledDates }) !== undefined;\n  };\n  const today = new Date();\n  const start = dayToDate(min);\n  const end = dayToDate(max);\n  const month = selected ?? (start !== undefined && today < start ? start : end !== undefined && today > end ? end : today);\n\n  return (\n    <div data-slot=\"date-picker\" className={cn('flex flex-col gap-1.5', className)}>\n      <div\n        ref={refField}\n        className=\"relative\"\n        onPointerDownCapture={() => {\n          refPointer.current = true;\n        }}\n        onPointerUpCapture={() => {\n          refPointer.current = false;\n        }}\n      >\n        <Input\n          ref={refInput}\n          id={id}\n          type=\"text\"\n          inputMode=\"numeric\"\n          autoComplete=\"off\"\n          data-slot=\"date-picker-input\"\n          value={text}\n          placeholder={placeholder ?? pattern}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          aria-invalid={invalid ? true : undefined}\n          aria-describedby={describedBy}\n          className=\"pr-9\"\n          onChange={(event: ChangeEvent<HTMLInputElement>) => {\n            setText(event.target.value);\n            setProblem(null);\n          }}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                data-slot=\"date-picker-trigger\"\n                aria-label={labels.choose}\n                disabled={disabled}\n                className=\"absolute top-0.5 right-0.5\"\n                onBlur={handleBlur}\n              />\n            }\n          >\n            <IconCalendar aria-hidden=\"true\" />\n          </PopoverTrigger>\n          <PopoverContent anchor={refField} align=\"start\" className=\"w-auto p-0\" finalFocus={refInput} onBlur={handleBlur}>\n            <Calendar\n              mode=\"single\"\n              required\n              autoFocus\n              locale={calendarLocale}\n              weekStartsOn={firstWeekdayOf(locale)}\n              defaultMonth={month}\n              startMonth={start}\n              endMonth={end}\n              selected={selected}\n              disabled={isOff}\n              onSelect={pick}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      {problem !== null && (\n        <p id={errorId} data-slot=\"date-picker-error\" role=\"alert\" className=\"text-sm text-destructive\">\n          {problemText(problem, labels, locale, limits, pattern)}\n        </p>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/ds/src/date-picker.d.ts

@@ -0,0 +1,9 @@
+/**
+ * `@exsto/ds/date-picker` - the DatePicker, on its own entry on purpose.
+ *
+ * It is a field a person types a date into as well as picks one, with the parsing, the locale's order of day, month and
+ * year and the messages that come with that (about 13 KB unminified). Re-exported from `@exsto/ds` it would be one more
+ * thing in the entry every consumer loads and a bundler cannot always tell it unused. Here an app pays for it only on the
+ * pages that import this path.
+ */
+export * from '../../ui/src/components/edyn/date-picker';

package/dist/index.js

@@ -1,11 +1,12 @@
-import { A as ScrollBar, B as cn, C as RICH_TEXT_ATTRIBUTES, D as POPUP_ITEM_INDICATOR_CLASS, E as isAllowedRichTextHref, F as PopoverHeader, I as PopoverTitle, L as PopoverTrigger, M as Popover, N as PopoverContent, O as popupItemClass, P as PopoverDescription, R as Button, S as richTextToNodes, T as RICH_TEXT_LINK_PROTOCOLS, V as cssLength, _ as DropdownMenuTrigger, a as DropdownMenuContent, b as RICH_TEXT_MENTION_CLASS, c as DropdownMenuLabel, d as DropdownMenuRadioItem, f as DropdownMenuSeparator, g as DropdownMenuSubTrigger, h as DropdownMenuSubContent, i as DropdownMenuCheckboxItem, j as useMergedRefs, k as ScrollArea, l as DropdownMenuPortal, m as DropdownMenuSub, n as toggleVariants, o as DropdownMenuGroup, p as DropdownMenuShortcut, r as DropdownMenu, s as DropdownMenuItem, t as Toggle, u as DropdownMenuRadioGroup, v as Input, w as RICH_TEXT_ELEMENTS, x as RichTextContent, y as RICH_TEXT_BODY_CLASS, z as buttonVariants } from "./chunks/toggle-C2c5oDaE.js";
+import { a as PopoverHeader, c as Button, d as cssLength, i as PopoverDescription, l as buttonVariants, n as Popover, o as PopoverTitle, r as PopoverContent, s as PopoverTrigger, t as Input, u as cn } from "./chunks/input-9HRdsve1.js";
+import { a as useIsMobile, n as dateToDay, o as Calendar, r as dayToDate, s as CalendarDayButton, t as DateRangePicker } from "./chunks/date-range-picker-BvCOmQki.js";
+import { A as useMergedRefs, C as RICH_TEXT_ELEMENTS, D as popupItemClass, E as POPUP_ITEM_INDICATOR_CLASS, O as ScrollArea, S as RICH_TEXT_ATTRIBUTES, T as isAllowedRichTextHref, _ as DropdownMenuTrigger, a as DropdownMenuContent, b as RichTextContent, c as DropdownMenuLabel, d as DropdownMenuRadioItem, f as DropdownMenuSeparator, g as DropdownMenuSubTrigger, h as DropdownMenuSubContent, i as DropdownMenuCheckboxItem, k as ScrollBar, l as DropdownMenuPortal, m as DropdownMenuSub, n as toggleVariants, o as DropdownMenuGroup, p as DropdownMenuShortcut, r as DropdownMenu, s as DropdownMenuItem, t as Toggle, u as DropdownMenuRadioGroup, v as RICH_TEXT_BODY_CLASS, w as RICH_TEXT_LINK_PROTOCOLS, x as richTextToNodes, y as RICH_TEXT_MENTION_CLASS } from "./chunks/toggle-B6VBlpwp.js";
 import * as React from "react";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Slider as Slider$1 } from "@base-ui/react/slider";
-import { IconAlertOctagon, IconAlertTriangle, IconArrowDown, IconCalendar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconCircleCheck, IconDots, IconInfoCircle, IconLayoutSidebar, IconLoader, IconMaximize, IconMinus, IconPlayerPauseFilled, IconPlayerPlayFilled, IconSearch, IconSelector, IconVolume, IconVolumeOff, IconX } from "@tabler/icons-react";
-import { DayPicker, getDefaultClassNames } from "react-day-picker";
+import { IconAlertOctagon, IconAlertTriangle, IconArrowDown, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconCircleCheck, IconDots, IconInfoCircle, IconLayoutSidebar, IconLoader, IconMaximize, IconMinus, IconPlayerPauseFilled, IconPlayerPlayFilled, IconSearch, IconSelector, IconVolume, IconVolumeOff, IconX } from "@tabler/icons-react";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
@@ -104,7 +105,7 @@ var useAnimatedValues = (targets, element) => {
 * and where it lands, in tabular figures, so nothing beside it moves while the digits
 * change. Assistive technology reads only the final value.
 */
-var AnimatedNumber = ({ value, format = formatCount, className }) => {
+var AnimatedNumber = ({ value, format = formatCount, className, ...props }) => {
 	const refElement = useRef(null);
 	const [shown = 0] = useAnimatedValues([value], refElement);
 	return /* @__PURE__ */ jsx(NumberText, {
@@ -112,16 +113,18 @@ var AnimatedNumber = ({ value, format = formatCount, className }) => {
 		shown,
 		value,
 		format,
-		className
+		className,
+		...props
 	});
 };
 /** The text of a moving number: what it shows now, held at its widest, with the final value for assistive technology. */
-var NumberText = ({ element, shown, value, format = formatCount, className }) => {
+var NumberText = ({ element, shown, value, format = formatCount, className, ...props }) => {
 	const now = format(shown);
 	const final = format(value);
 	const widest = now.length > final.length ? now : final;
 	return /* @__PURE__ */ jsxs("span", {
 		"data-slot": "animated-number",
+		...props,
 		ref: element,
 		className,
 		children: [/* @__PURE__ */ jsxs("span", {
@@ -327,7 +330,7 @@ var useMediaPlayer = (options = {}) => {
 * time, a seekable timeline, and volume. Four elements in one rounded row, per
 * the design-system anatomy.
 */
-var AudioPlayer = ({ src, muted = false, loop = false, disabled = false, width, className, "aria-label": ariaLabel = "Audio player", onPlay, onPause, onEnded, onTimeUpdate }) => {
+var AudioPlayer = ({ src, muted = false, loop = false, disabled = false, width, className, "aria-label": ariaLabel = "Audio player", style, onPlay, onPause, onEnded, onTimeUpdate, ...props }) => {
 	const { refMedia, playing, currentTime, duration, muted: isMuted, toggle, seek, toggleMute } = useMediaPlayer({
 		onPlay,
 		onPause,
@@ -340,8 +343,12 @@ var AudioPlayer = ({ src, muted = false, loop = false, disabled = false, width,
 		"data-slot": "audio-player",
 		"data-playing": playing || void 0,
 		role: "group",
+		...props,
 		"aria-label": ariaLabel,
-		style: { width: cssLength(width) },
+		style: {
+			width: cssLength(width),
+			...style
+		},
 		className: cn("flex h-12 w-full items-center gap-2 rounded-lg bg-muted px-3 py-1.5", className),
 		children: [
 			/* @__PURE__ */ jsx(Button, {
@@ -394,169 +401,6 @@ var AudioPlayer = ({ src, muted = false, loop = false, disabled = false, width,
 	});
 };
 //#endregion
-//#region ../ui/src/components/ui/calendar/calendar.tsx
-var Calendar = ({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, ...props }) => {
-	const defaultClassNames = getDefaultClassNames();
-	return /* @__PURE__ */ jsx(DayPicker, {
-		showOutsideDays,
-		className: cn("group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
-		captionLayout,
-		locale,
-		formatters: {
-			formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
-			...formatters
-		},
-		classNames: {
-			root: cn("w-fit", defaultClassNames.root),
-			months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
-			month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
-			nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
-			button_previous: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
-			button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
-			month_caption: cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
-			dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
-			dropdown_root: cn("relative rounded-(--cell-radius)", defaultClassNames.dropdown_root),
-			dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
-			caption_label: cn("font-medium select-none", captionLayout === "label" ? "text-sm" : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
-			month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
-			weekdays: cn("flex", defaultClassNames.weekdays),
-			weekday: cn("flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday),
-			week: cn("mt-2 flex w-full", defaultClassNames.week),
-			week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
-			week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
-			day: cn("group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", defaultClassNames.day),
-			range_start: cn("relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted", defaultClassNames.range_start),
-			range_middle: cn("rounded-none", defaultClassNames.range_middle),
-			range_end: cn("relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted", defaultClassNames.range_end),
-			today: cn("rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
-			outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
-			disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
-			hidden: cn("invisible", defaultClassNames.hidden),
-			...classNames
-		},
-		components: {
-			Root: ({ className, rootRef, ...props }) => {
-				return /* @__PURE__ */ jsx("div", {
-					"data-slot": "calendar",
-					ref: rootRef,
-					className: cn(className),
-					...props
-				});
-			},
-			Chevron: ({ className, orientation, ...props }) => {
-				if (orientation === "left") return /* @__PURE__ */ jsx(IconChevronLeft, {
-					className: cn("size-4", className),
-					...props
-				});
-				if (orientation === "right") return /* @__PURE__ */ jsx(IconChevronRight, {
-					className: cn("size-4", className),
-					...props
-				});
-				return /* @__PURE__ */ jsx(IconChevronDown, {
-					className: cn("size-4", className),
-					...props
-				});
-			},
-			DayButton: ({ ...props }) => /* @__PURE__ */ jsx(CalendarDayButton, {
-				locale,
-				...props
-			}),
-			WeekNumber: ({ children, ...props }) => {
-				return /* @__PURE__ */ jsx("td", {
-					...props,
-					children: /* @__PURE__ */ jsx("div", {
-						className: "flex size-(--cell-size) items-center justify-center text-center",
-						children
-					})
-				});
-			},
-			...components
-		},
-		...props
-	});
-};
-var CalendarDayButton = ({ className, day, modifiers, locale, ...props }) => {
-	const defaultClassNames = getDefaultClassNames();
-	const refButton = React.useRef(null);
-	React.useEffect(() => {
-		if (modifiers.focused) refButton.current?.focus();
-	}, [modifiers.focused]);
-	return /* @__PURE__ */ jsx(Button, {
-		ref: refButton,
-		variant: "ghost",
-		size: "icon",
-		"data-day": day.date.toLocaleDateString(locale?.code),
-		"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
-		"data-range-start": modifiers.range_start,
-		"data-range-end": modifiers.range_end,
-		"data-range-middle": modifiers.range_middle,
-		className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
-		...props
-	});
-};
-//#endregion
-//#region ../ui/src/hooks/use-mobile.ts
-var MOBILE_BREAKPOINT = 768;
-var useIsMobile = () => {
-	const [isMobile, setIsMobile] = React.useState(void 0);
-	React.useEffect(() => {
-		const mql = window.matchMedia(`(max-width: 767px)`);
-		const onChange = () => {
-			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-		};
-		mql.addEventListener("change", onChange);
-		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-		return () => mql.removeEventListener("change", onChange);
-	}, []);
-	return !!isMobile;
-};
-//#endregion
-//#region ../ui/src/components/edyn/date-range-picker/date-range-picker.tsx
-var dayToDate = (value) => value === void 0 ? void 0 : /* @__PURE__ */ new Date(`${value}T12:00:00`);
-var dateToDay = (date) => date === void 0 ? void 0 : `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
-/** A range of calendar days, either end optional; two months side by side, one on a phone. */
-var DateRangePicker = ({ id, value, onValueChange, placeholder = "Select date range", locale = "en-GB", summary = "range", "aria-label": ariaLabel, className }) => {
-	const isMobile = useIsMobile();
-	const from = dayToDate(value.from);
-	const to = dayToDate(value.to);
-	const format = new Intl.DateTimeFormat(locale, {
-		day: "2-digit",
-		month: "short",
-		year: "numeric"
-	});
-	const ends = [from, to].filter((date) => date !== void 0).map((date) => format.format(date));
-	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
-		render: /* @__PURE__ */ jsx(Button, {
-			id,
-			"aria-label": ariaLabel,
-			"data-slot": "date-range-picker-trigger",
-			"data-set": ends.length > 0 ? "" : void 0,
-			variant: "outline",
-			className: cn("w-full min-w-0 justify-start font-normal", ends.length === 0 && "text-muted-foreground", className)
-		}),
-		children: [/* @__PURE__ */ jsx(IconCalendar, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
-			className: "truncate",
-			children: ends.length === 0 || summary === "label" ? placeholder : ends.join(" – ")
-		})]
-	}), /* @__PURE__ */ jsx(PopoverContent, {
-		align: "start",
-		className: "w-auto p-0",
-		children: /* @__PURE__ */ jsx(Calendar, {
-			mode: "range",
-			defaultMonth: from,
-			numberOfMonths: isMobile ? 1 : 2,
-			selected: {
-				from,
-				to
-			},
-			onSelect: (range) => onValueChange({
-				from: dateToDay(range?.from),
-				to: dateToDay(range?.to)
-			})
-		})
-	})] });
-};
-//#endregion
 //#region ../ui/src/components/ui/avatar/avatar.tsx
 var Avatar = ({ className, size = "default", ...props }) => {
 	return /* @__PURE__ */ jsx(Avatar$1.Root, {
@@ -651,7 +495,7 @@ var SIZES = {
 	}
 };
 /** A person's photo, or their initials on a circle in the palette colour they pick; both themes switch by themselves. */
-var InitialsAvatar = ({ name, photoUrl, size = "md", className, autoColor = true, label }) => {
+var InitialsAvatar = ({ name, photoUrl, size = "md", className, autoColor = true, label, "aria-label": ariaLabel, ...props }) => {
 	const initials = initialsOf(name);
 	const tone = avatarTone(initials);
 	const { box, fontSize } = SIZES[size];
@@ -660,12 +504,14 @@ var InitialsAvatar = ({ name, photoUrl, size = "md", className, autoColor = true
 		backgroundColor: `var(--avatar-${tone}-bg)`,
 		color: `var(--avatar-${tone}-fg)`
 	} : { fontSize };
-	const a11y = label === void 0 ? { "aria-hidden": true } : {
+	const accessibleName = label ?? ariaLabel;
+	const a11y = accessibleName === void 0 ? { "aria-hidden": true } : {
 		role: "img",
-		"aria-label": label
+		"aria-label": accessibleName
 	};
 	return /* @__PURE__ */ jsxs(Avatar, {
 		"data-slot": "initials-avatar",
+		...props,
 		"data-tone": autoColor ? tone : void 0,
 		className: cn(box, className),
 		...a11y,
@@ -886,6 +732,7 @@ var MultiSelect = ({ placeholder, searchPlaceholder, options, value, onValueChan
 	const refScrollTo = useRef(() => void 0);
 	const refTimer = useRef(void 0);
 	const refTriggerText = useRef(null);
+	const refSearch = useRef(null);
 	const [popupOpen, setPopupOpen] = useState(false);
 	const [highlightedValue, setHighlightedValue] = useState(null);
 	const refReported = useRef(void 0);
@@ -893,6 +740,16 @@ var MultiSelect = ({ placeholder, searchPlaceholder, options, value, onValueChan
 	const errorMessage = typeof error === "string" ? error : labels.error;
 	const failed = error !== false;
 	useEffect(() => () => window.clearTimeout(refTimer.current), []);
+	const closeFromTrigger = (event) => {
+		if (event.key !== "Escape" || !popupOpen || refSearch.current === null) return;
+		event.stopPropagation();
+		event.preventDefault();
+		refSearch.current.dispatchEvent(new KeyboardEvent("keydown", {
+			key: "Escape",
+			bubbles: true,
+			cancelable: true
+		}));
+	};
 	return /* @__PURE__ */ jsxs(Combobox$1.Root, {
 		multiple: true,
 		disabled,
@@ -933,9 +790,10 @@ var MultiSelect = ({ placeholder, searchPlaceholder, options, value, onValueChan
 			children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
 				"data-slot": "multi-select-trigger",
 				render: /* @__PURE__ */ jsx(Combobox$1.Trigger, {
+					...rest,
 					id,
-					"aria-label": rest["aria-label"],
 					"data-set": chosen.length > 0 ? "" : void 0,
+					onKeyDown: closeFromTrigger,
 					className: cn(TRIGGER, className)
 				}),
 				children: [/* @__PURE__ */ jsx("span", {
@@ -961,6 +819,7 @@ var MultiSelect = ({ placeholder, searchPlaceholder, options, value, onValueChan
 							"aria-hidden": "true",
 							className: "size-4 shrink-0 text-muted-foreground"
 						}), /* @__PURE__ */ jsx(Combobox$1.Input, {
+							ref: refSearch,
 							placeholder: searchPlaceholder,
 							"aria-label": searchPlaceholder.replace(/…$/, ""),
 							className: "h-10 w-full min-w-0 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
@@ -1049,7 +908,7 @@ var scaleOf = (line) => {
 * before it has gone carries on from where it is. With reduced motion it is a
 * full-width line that fades.
 */
-var ProgressLine = ({ active, label = "Loading", className, style }) => {
+var ProgressLine = ({ active, label = "Loading", className, style, ...props }) => {
 	const [phase, setPhase] = useState("idle");
 	const [target, setTarget] = useState(RUN_TARGET);
 	const refPhase = useRef("idle");
@@ -1098,6 +957,7 @@ var ProgressLine = ({ active, label = "Loading", className, style }) => {
 		"data-slot": "progress-line",
 		role: "progressbar",
 		"aria-label": label,
+		...props,
 		"aria-hidden": shown && phase !== "fading" ? void 0 : true,
 		"data-phase": phase,
 		className: cn("pointer-events-none h-0.5 overflow-hidden", className),
@@ -1125,7 +985,7 @@ var ProgressLine = ({ active, label = "Loading", className, style }) => {
 * both themes. Video is dark, so the letterbox and controls must stay dark and
 * light-on-dark; this re-scopes existing tokens rather than hardcoding a colour.
 */
-var VideoPlayer = ({ src, poster, title, description, muted = false, loop = false, disabled = false, width, height, ratio = "auto", className, "aria-label": ariaLabel = "Video player", onPlay, onPause, onEnded, onTimeUpdate }) => {
+var VideoPlayer = ({ src, poster, title, description, muted = false, loop = false, disabled = false, width, height, ratio = "auto", className, "aria-label": ariaLabel = "Video player", style, onPlay, onPause, onEnded, onTimeUpdate, ...props }) => {
 	const { refMedia, playing, currentTime, duration, muted: isMuted, toggle, seek, toggleMute } = useMediaPlayer({
 		onPlay,
 		onPause,
@@ -1148,11 +1008,13 @@ var VideoPlayer = ({ src, poster, title, description, muted = false, loop = fals
 	return /* @__PURE__ */ jsxs("div", {
 		ref: refContainer,
 		"data-slot": "video-player",
+		...props,
 		"data-playing": playing || void 0,
 		style: {
 			width: cssLength(width),
 			height: cssLength(height),
-			aspectRatio: height == null && ratio !== "auto" ? ratio : void 0
+			aspectRatio: height == null && ratio !== "auto" ? ratio : void 0,
+			...style
 		},
 		className: cn("dark relative isolate w-full overflow-hidden rounded-lg bg-background", className),
 		children: [/* @__PURE__ */ jsx("video", {
@@ -1237,8 +1099,9 @@ var VideoPlayer = ({ src, poster, title, description, muted = false, loop = fals
 };
 //#endregion
 //#region ../ui/src/components/ui/accordion/accordion.tsx
-var Accordion = ({ value, defaultValue, onValueChange, multiple = false, className, children }) => /* @__PURE__ */ jsx(Accordion$1.Root, {
+var Accordion = ({ value, defaultValue, onValueChange, multiple = false, className, children, ...props }) => /* @__PURE__ */ jsx(Accordion$1.Root, {
 	"data-slot": "accordion",
+	...props,
 	value,
 	defaultValue,
 	onValueChange: (next) => {
@@ -1248,8 +1111,9 @@ var Accordion = ({ value, defaultValue, onValueChange, multiple = false, classNa
 	className: cn("w-full", className),
 	children
 });
-var AccordionItem = ({ value, disabled, className, children }) => /* @__PURE__ */ jsx(Accordion$1.Item, {
+var AccordionItem = ({ value, disabled, className, children, ...props }) => /* @__PURE__ */ jsx(Accordion$1.Item, {
 	"data-slot": "accordion-item",
+	...props,
 	value,
 	disabled,
 	className: cn("border-b border-border", className),
@@ -1274,11 +1138,12 @@ var focusSiblingTrigger = (event) => {
 	else if (event.key === "ArrowUp") nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;
 	triggers[nextIndex]?.focus();
 };
-var AccordionTrigger = ({ className, children }) => /* @__PURE__ */ jsx(Accordion$1.Header, {
+var AccordionTrigger = ({ className, children, ...props }) => /* @__PURE__ */ jsx(Accordion$1.Header, {
 	"data-slot": "accordion-header",
 	className: "flex",
 	children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
 		"data-slot": "accordion-trigger",
+		...props,
 		onKeyDown: focusSiblingTrigger,
 		className: cn("flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline", className),
 		children: [children, /* @__PURE__ */ jsx("svg", {
@@ -1298,9 +1163,10 @@ var AccordionTrigger = ({ className, children }) => /* @__PURE__ */ jsx(Accordio
 		})]
 	})
 });
-var AccordionContent = ({ className, children }) => /* @__PURE__ */ jsx(Accordion$1.Panel, {
+var AccordionContent = ({ className, children, ...props }) => /* @__PURE__ */ jsx(Accordion$1.Panel, {
 	keepMounted: true,
 	"data-slot": "accordion-content",
+	...props,
 	"data-focus": "inset",
 	className: cn("text-sm", className),
 	children: /* @__PURE__ */ jsx("div", {
@@ -1961,6 +1827,7 @@ var ChartContainer = ({ id, className, children, config, initialDimension = INIT
 		children: /* @__PURE__ */ jsxs("div", {
 			ref: refContainer,
 			"data-slot": "chart",
+			id,
 			"data-chart": chartId,
 			className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
 			...props,
@@ -2087,7 +1954,7 @@ var getPayloadConfigFromPayload = (config, payload, key) => {
 var Checkbox = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
 		"data-slot": "checkbox",
-		className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className),
+		className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className),
 		...props,
 		children: /* @__PURE__ */ jsxs(Checkbox$1.Indicator, {
 			"data-slot": "checkbox-indicator",
@@ -3450,7 +3317,7 @@ var getPaginationRange = (page, count, siblingCount = 1) => {
 };
 /** Clamp a page number to the valid [1, count] range (count <= 0 yields 1). */
 var clampPage = (page, count) => Math.min(Math.max(page, 1), Math.max(count, 1));
-var Pagination = ({ page, count, onPageChange, siblingCount = 1, className }) => {
+var Pagination = ({ page, count, onPageChange, siblingCount = 1, className, ...props }) => {
 	const currentPage = clampPage(page, count);
 	const range = getPaginationRange(currentPage, count, siblingCount);
 	let ellipsisCount = 0;
@@ -3462,6 +3329,7 @@ var Pagination = ({ page, count, onPageChange, siblingCount = 1, className }) =>
 	};
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": "pagination",
+		...props,
 		className: cn("mx-auto flex w-full justify-center", className),
 		children: /* @__PURE__ */ jsxs("ul", {
 			className: "flex flex-row items-center gap-1",
@@ -4435,8 +4303,9 @@ var TableCaption = ({ className, ...props }) => {
 };
 //#endregion
 //#region ../ui/src/components/ui/tabs/tabs.tsx
-var Tabs = ({ value, defaultValue, onValueChange, className, orientation = "horizontal", children }) => /* @__PURE__ */ jsx(Tabs$1.Root, {
+var Tabs = ({ value, defaultValue, onValueChange, className, orientation = "horizontal", children, ...props }) => /* @__PURE__ */ jsx(Tabs$1.Root, {
 	"data-slot": "tabs",
+	...props,
 	"data-orientation": orientation,
 	value,
 	defaultValue,
@@ -4454,19 +4323,22 @@ var tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justi
 	} },
 	defaultVariants: { variant: "default" }
 });
-var TabsList = ({ className, variant = "default", children }) => /* @__PURE__ */ jsx(Tabs$1.List, {
+var TabsList = ({ className, variant = "default", children, ...props }) => /* @__PURE__ */ jsx(Tabs$1.List, {
 	"data-slot": "tabs-list",
+	...props,
 	"data-variant": variant,
 	className: cn(tabsListVariants({ variant }), className),
 	children
 });
-var TabsTrigger = ({ value, disabled, className, children }) => /* @__PURE__ */ jsx(Tabs$1.Tab, {
+var TabsTrigger = ({ value, disabled, className, children, ...props }) => /* @__PURE__ */ jsx(Tabs$1.Tab, {
+	...props,
 	value,
 	disabled,
 	className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\"size-\"])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className),
 	children
 });
-var TabsContent = ({ value, keepMounted = false, className, children }) => /* @__PURE__ */ jsx(Tabs$1.Panel, {
+var TabsContent = ({ value, keepMounted = false, className, children, ...props }) => /* @__PURE__ */ jsx(Tabs$1.Panel, {
+	...props,
 	value,
 	keepMounted,
 	className: cn("flex-1 text-sm outline-none", className),