@exsto/ds 0.0.1-rc.1 → 0.0.1-rc.10

package/README.md

@@ -1,7 +1,6 @@
 # @exsto/ds
 
-The eDynamix design system: React components, design tokens, and optional web
-components.
+The eDynamix design system: React components and design tokens.
 
 ## Install
 
@@ -30,10 +29,40 @@ That is the whole setup. **You do not need Tailwind.** `styles.css` ships
 precompiled: it carries the design tokens plus every utility the components
 themselves use.
 
-If you *do* use Tailwind, note that `styles.css` does not generate utilities for
-your own markup. Your Tailwind build does that, as it already would; this file
-only guarantees the components look right. The tokens are plain CSS custom
-properties on `:root`, so your own styles can read them.
+### If you use Tailwind
+
+`styles.css` is compiled output, so it only contains the utilities the components
+themselves use. To write `bg-card` or `text-muted-foreground` in your *own*
+markup, import the token layer as well and let your Tailwind build generate the
+whole vocabulary:
+
+```css
+@import "@exsto/ds/styles.css";
+@import "tailwindcss";
+@import "@exsto/ds/theme.css";
+```
+
+**The order matters, and `styles.css` has to come first.** It is a compiled
+Tailwind build, so its utilities land in the same cascade layer as yours, and at
+equal specificity the later rule wins. Import it after your Tailwind entry and
+its unconditional `.hidden` beats your `.md:table-cell`: responsive columns
+vanish, widths collapse. Library CSS before app CSS, as with any CSS dependency.
+
+Nothing else is needed. `theme.css` also points your build at the components'
+shipped code, so your build emits their classes too, each responsive variant
+after its own base. That is what keeps a design system class such as the
+sidebar's `hidden md:block` working when your own markup uses `hidden` as well:
+one build decides the order for both sides. Earlier releases needed a
+`@source` line in the app to get this, and that line can be removed.
+
+`theme.css` is uncompiled on purpose. It carries the tokens, the `.dark` scope,
+the brand layer (Inter, `text-2xs`) and the `@theme` mapping Tailwind needs to
+turn them into utilities. Do not copy that block into your app, or it will drift
+from the design system.
+
+Without it some token utilities still work, because our components happen to use
+them, but the coverage is incidental: roughly half of `bg-*` and nearly every
+`border-*` is absent.
 
 ### Dark mode
 
@@ -46,39 +75,91 @@ query, so a subtree can be dark inside a light page.
 </div>
 ```
 
-## Web components
+## Entry points
 
-React is the default. If you are not on React, the same components ship as
-`<edx-*>` custom elements behind a subpath, so a React consumer never pays for a
-runtime it does not use.
+| Import | What it is |
+|---|---|
+| `@exsto/ds` | React components |
+| `@exsto/ds/date-picker` | The DatePicker (one day, typed or picked), on its own entry so the main one stays inside its size budget |
+| `@exsto/ds/rich-text-editor` | The rich-text editor, on its own entry so its engine loads only where it is used |
+| `@exsto/ds/styles.css` | Precompiled tokens and component styles |
+| `@exsto/ds/theme.css` | Uncompiled tokens, brand layer, and the Tailwind `@theme` mapping |
+
+## Rich text
 
-```ts
-import { registerElements } from '@exsto/ds/elements';
+`RichTextEditor` is a small rich-text field: paragraphs, bold, italic, underline, bulleted and numbered lists, links and a horizontal line, with optional `@mentions` that your app searches. It lives on its own entry because it carries an editor engine (about 138 KB gzipped); an app that never imports it never pays for it.
 
-registerElements();
+```tsx
+import { RichTextContent } from '@exsto/ds';
+import { RichTextEditor } from '@exsto/ds/rich-text-editor';
+
+<RichTextEditor
+  aria-label="Comment"
+  value={html}
+  onChange={setHtml} // "" when there is no text
+  minRows={3}
+  mention={{ search: async (query, { page, signal }) => fetchPeople(query, page, signal) }}
+/>;
+
+<RichTextContent html={savedHtml} />;
 ```
 
-```html
-<edx-button>Save</edx-button>
+The value is HTML. **The editor emits only these elements and attributes**, whatever is typed or pasted (anything else is dropped on paste and on load, keeping its text), so a server allow-list can be exactly this; the same lists are exported as `RICH_TEXT_ELEMENTS`, `RICH_TEXT_ATTRIBUTES` and `RICH_TEXT_LINK_PROTOCOLS`:
+
+| Element | Attributes |
+|---|---|
+| `p`, `br`, `hr`, `strong`, `em`, `u`, `ul`, `ol`, `li` | none (no `class`, no `style`) |
+| `a` | `href`, which must be absolute `http`, `https` or `mailto` |
+
+Strong and em, not b and i; no `target` or `rel` on links (add them when you render, as `RichTextContent` does). The editor is a convenience for the writer, not a security boundary: sanitise on the server as well.
+
+**Mentions.** Typing `@` opens a list under the caret that calls `mention.search(query, { page, signal })` after a pause (250 ms by default), aborting the previous call. Return an array (one page) or `{ items, hasMore }` (the next page is asked for when the list is scrolled to its end). An item is `{ id, label, secondary? }`: the chip shows `label` while editing, and the HTML carries **plain text, `@${id}` followed by a space, and no element** (`mention.toText` changes that). A value loaded back into the editor shows that text as text, not as a chip. `RichTextContent` marks runs that look like `@person@example.test` and `@assignees` as pills.
+
+Also: `ref` gives `insertText(text)` and `focus()` for buttons outside the editor; `fields` adds an "Insert a field" menu that writes `{{id}}`; `maxLength` refuses edits past a number of characters; `onPasteFiles` receives files pasted without any text; `invalid` and `aria-invalid`, `disabled`, `readOnly`, `placeholder`, `labels` (every string) and `toolbar={false}` do what they say. The box is `minRows` lines tall when empty and grows to `maxRows`, then scrolls inside.
+
+## Dates
+
+`DatePicker` is one calendar day in a field: typed in the locale's order (`DD/MM/YYYY` for en-GB, `MM/DD/YYYY` for en-US) or picked from a calendar, read when the field is left, with a message under it when the text is not a day. It is on its own entry. The value is a `yyyy-mm-dd` string, not a `Date`, so no time zone moves it a day.
+
+```tsx
+import { DatePicker } from '@exsto/ds/date-picker';
+
+<DatePicker aria-label="Go-live date" value={day} onValueChange={setDay} min="2026-01-01" locale="en-GB" />;
 ```
 
-`registerElements()` defaults to shadow DOM and carries its own copy of the
-compiled stylesheet, because a shadow root does not inherit the page's styles.
-Pass `{ mode: 'light' }` to render into the light DOM instead, or `{ styles }` to
-supply your own sheet. Calling it more than once is harmless.
+`onValueChange(day, state)` gets `undefined` as the day when the field is emptied or its text is not a usable day. The second argument says which: `{ kind: 'day' }`, `{ kind: 'empty' }`, or `{ kind: 'refused'; text; problem }`, where `text` is what was typed and `problem` the message the picker shows under the field. A caller that ignores the second argument keeps working. A required field uses it to show its own message only when the field is empty, so the person never reads two:
 
-## Entry points
+```tsx
+import { Field, FieldError, FieldLabel } from '@exsto/ds';
+import { DatePicker, type TDatePickerState } from '@exsto/ds/date-picker';
+
+const [day, setDay] = useState<string>();
+const [state, setState] = useState<TDatePickerState>({ kind: 'empty' });
+const missing = state.kind === 'empty'; // 'refused' is already said by the picker itself
+
+<Field invalid={missing}>
+  <FieldLabel>Go-live date</FieldLabel>
+  <DatePicker
+    value={day}
+    onValueChange={(next, nextState) => {
+      setDay(next);
+      setState(nextState);
+    }}
+  />
+  <FieldError match={missing}>Enter the date.</FieldError>
+</Field>;
+```
 
-| Import | What it is |
-|---|---|
-| `@exsto/ds` | React components (the default) |
-| `@exsto/ds/styles.css` | Precompiled tokens and component styles |
-| `@exsto/ds/elements` | `<edx-*>` custom elements and `registerElements()` |
+Refused text is reported each time it changes, also when the field held no day before, and emptying the field afterwards reports `empty`. A parent's `aria-invalid` only draws the invalid border; the picker's own message is added to `aria-describedby` once, after the parent's. `DateRangePicker`, for a range, is in the main entry.
 
 ## Status
 
-`0.0.1-rc.1`. The API is not stable yet; treat minor versions as breaking until
-`0.1.0`.
+Release candidates (`0.0.1-rc.N`). The API is not stable yet; treat minor versions
+as breaking until `0.1.0`.
+
+`0.0.1-rc.5` removed the `@exsto/ds/elements` entry point (the `<edx-*>` web
+components) and with it Angular support. The design system is React only. Stay on
+`0.0.1-rc.4` if you depend on the elements.
 
 ## Licence
 

package/dist/chunks/date-range-picker-CWVcHgy2.js

@@ -0,0 +1,204 @@
+import { c as Button, l as buttonVariants, n as Popover, r as PopoverContent, s as PopoverTrigger, u as cn } from "./input-syWxjY2U.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCalendar, IconChevronDown, IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+//#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/lib/first-weekday.ts
+var SUNDAY_FIRST = /* @__PURE__ */ new Set([
+	"US",
+	"CA",
+	"MX",
+	"BR",
+	"JP",
+	"IL",
+	"IN",
+	"PH",
+	"ZA",
+	"KR",
+	"TW",
+	"HK",
+	"SA"
+]);
+/**
+* The weekday a locale starts its week on, 0 for Sunday to 6 for Saturday, from Intl, so en-GB starts on Monday and en-US on
+* Sunday with no locale data of our own shipped. A browser without week info gets the region's usual start.
+*/
+var firstWeekdayOf = (locale) => {
+	try {
+		const info = new Intl.Locale(locale);
+		const first = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay;
+		if (first !== void 0) return first % 7;
+		return SUNDAY_FIRST.has(info.region ?? "") ? 0 : 1;
+	} catch {
+		return 0;
+	}
+};
+//#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, ...props }) => {
+	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, {
+			...props,
+			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,
+			weekStartsOn: firstWeekdayOf(locale),
+			selected: {
+				from,
+				to
+			},
+			onSelect: (range) => onValueChange({
+				from: dateToDay(range?.from),
+				to: dateToDay(range?.to)
+			})
+		})
+	})] });
+};
+//#endregion
+export { useIsMobile as a, firstWeekdayOf as i, dateToDay as n, Calendar as o, dayToDate as r, CalendarDayButton as s, DateRangePicker as t };
+
+//# sourceMappingURL=date-range-picker-CWVcHgy2.js.map

package/dist/chunks/date-range-picker-CWVcHgy2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker-CWVcHgy2.js","names":[],"sources":["../../../ui/src/components/ui/calendar/calendar.tsx","../../../ui/src/hooks/use-mobile.ts","../../../ui/src/lib/first-weekday.ts","../../../ui/src/components/edyn/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport { IconChevronDown, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';\nimport * as React from 'react';\nimport { type DayButton, DayPicker, getDefaultClassNames, type Locale } from 'react-day-picker';\nimport { Button, buttonVariants } from '../button';\n\nexport const Calendar = ({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = 'label',\n  buttonVariant = 'ghost',\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>['variant'];\n}) => {\n  const defaultClassNames = getDefaultClassNames();\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        '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',\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className,\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: 'short' }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn('w-fit', defaultClassNames.root),\n        months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),\n        month: cn('flex w-full flex-col gap-4', defaultClassNames.month),\n        nav: cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', defaultClassNames.nav),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',\n          defaultClassNames.button_previous,\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',\n          defaultClassNames.button_next,\n        ),\n        month_caption: cn('flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)', defaultClassNames.month_caption),\n        dropdowns: cn('flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium', defaultClassNames.dropdowns),\n        dropdown_root: cn('relative rounded-(--cell-radius)', defaultClassNames.dropdown_root),\n        dropdown: cn('absolute inset-0 bg-popover opacity-0', defaultClassNames.dropdown),\n        caption_label: cn(\n          'font-medium select-none',\n          captionLayout === 'label'\n            ? 'text-sm'\n            : 'flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',\n          defaultClassNames.caption_label,\n        ),\n        month_grid: cn('w-full border-collapse', defaultClassNames.month_grid),\n        weekdays: cn('flex', defaultClassNames.weekdays),\n        weekday: cn('flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none', defaultClassNames.weekday),\n        week: cn('mt-2 flex w-full', defaultClassNames.week),\n        week_number_header: cn('w-(--cell-size) select-none', defaultClassNames.week_number_header),\n        week_number: cn('text-[0.8rem] text-muted-foreground select-none', defaultClassNames.week_number),\n        day: cn(\n          '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)',\n          props.showWeekNumber\n            ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'\n            : '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)',\n          defaultClassNames.day,\n        ),\n        range_start: cn(\n          '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',\n          defaultClassNames.range_start,\n        ),\n        range_middle: cn('rounded-none', defaultClassNames.range_middle),\n        range_end: cn(\n          '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',\n          defaultClassNames.range_end,\n        ),\n        today: cn('rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none', defaultClassNames.today),\n        outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),\n        disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),\n        hidden: cn('invisible', defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return <div data-slot=\"calendar\" ref={rootRef} className={cn(className)} {...props} />;\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === 'left') {\n            return <IconChevronLeft className={cn('size-4', className)} {...props} />;\n          }\n\n          if (orientation === 'right') {\n            return <IconChevronRight className={cn('size-4', className)} {...props} />;\n          }\n\n          return <IconChevronDown className={cn('size-4', className)} {...props} />;\n        },\n        DayButton: ({ ...props }) => <CalendarDayButton locale={locale} {...props} />,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">{children}</div>\n            </td>\n          );\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  );\n};\n\nexport const CalendarDayButton = ({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) => {\n  const defaultClassNames = getDefaultClassNames();\n\n  const refButton = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (modifiers.focused) {\n      refButton.current?.focus();\n    }\n  }, [modifiers.focused]);\n\n  return (\n    <Button\n      ref={refButton}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle}\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        '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',\n        defaultClassNames.day,\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n","import * as React from 'react';\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport const useIsMobile = () => {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener('change', onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener('change', onChange);\n  }, []);\n\n  return !!isMobile;\n};\n","export type TWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n// Regions whose week starts on a Sunday, for a browser that cannot say (Intl week info is not everywhere yet).\nconst SUNDAY_FIRST = new Set(['US', 'CA', 'MX', 'BR', 'JP', 'IL', 'IN', 'PH', 'ZA', 'KR', 'TW', 'HK', 'SA']);\n\n/**\n * The weekday a locale starts its week on, 0 for Sunday to 6 for Saturday, from Intl, so en-GB starts on Monday and en-US on\n * Sunday with no locale data of our own shipped. A browser without week info gets the region's usual start.\n */\nexport const firstWeekdayOf = (locale: string): TWeekday => {\n  try {\n    const info = new Intl.Locale(locale) as Intl.Locale & { getWeekInfo?: () => { firstDay: number }; weekInfo?: { firstDay: number } };\n    const first = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay;\n    if (first !== undefined) {\n      // Intl counts Monday as 1 to Sunday as 7; the calendar counts Sunday as 0.\n      return (first % 7) as TWeekday;\n    }\n    return SUNDAY_FIRST.has(info.region ?? '') ? 0 : 1;\n  } catch {\n    return 0;\n  }\n};\n","import { Button } from '@edyn/ui/components/ui/button';\nimport { Calendar } from '@edyn/ui/components/ui/calendar';\nimport { Popover, PopoverContent, PopoverTrigger } from '@edyn/ui/components/ui/popover';\nimport { useIsMobile } from '@edyn/ui/hooks/use-mobile';\nimport { firstWeekdayOf } from '@edyn/ui/lib/first-weekday';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCalendar } from '@tabler/icons-react';\nimport type { ComponentPropsWithoutRef } from 'react';\n\n/** A range of calendar days as yyyy-mm-dd, either end optional. */\nexport type TDateRange = { from?: string; to?: string };\n\n// A calendar day is read and written at midday local time, so no time zone or daylight\n// saving change can move it onto the day before or after.\nexport const dayToDate = (value: string | undefined): Date | undefined => (value === undefined ? undefined : new Date(`${value}T12:00:00`));\n\nexport const dateToDay = (date: Date | undefined): string | undefined =>\n  date === undefined ? undefined : `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;\n\n/** Anything else a button takes (data-*, aria-*, title) goes to the trigger. */\nexport interface IDateRangePickerProps\n  extends Omit<ComponentPropsWithoutRef<'button'>, 'value' | 'defaultValue' | 'placeholder' | 'id' | 'className' | 'children' | 'onChange' | 'type'> {\n  id?: string;\n  value: TDateRange;\n  onValueChange: (value: TDateRange) => void;\n  placeholder?: string;\n  /**\n   * What the trigger says once a range is set. `range` (default) writes the ends; `label` keeps the label, so a\n   * range the page shows elsewhere (as a removable chip, say) is not repeated here. In both, the trigger carries\n   * `data-set` while either end is set, for a look of its own.\n   */\n  summary?: 'range' | 'label';\n  /** How the ends are written on the trigger, and which weekday the calendar starts on (BCP 47); en-GB reads 05 Mar 2026 and starts on Monday. */\n  locale?: string;\n  /** An accessible name for the trigger, when there is no visible label to point at. */\n  'aria-label'?: string;\n  className?: string;\n}\n\n/** A range of calendar days, either end optional; two months side by side, one on a phone. */\nexport const DateRangePicker = ({\n  id,\n  value,\n  onValueChange,\n  placeholder = 'Select date range',\n  locale = 'en-GB',\n  summary = 'range',\n  'aria-label': ariaLabel,\n  className,\n  ...props\n}: IDateRangePickerProps) => {\n  const isMobile = useIsMobile();\n  const from = dayToDate(value.from);\n  const to = dayToDate(value.to);\n  const format = new Intl.DateTimeFormat(locale, { day: '2-digit', month: 'short', year: 'numeric' });\n  const ends = [from, to].filter((date) => date !== undefined).map((date) => format.format(date));\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={\n          <Button\n            {...props}\n            id={id}\n            aria-label={ariaLabel}\n            data-slot=\"date-range-picker-trigger\"\n            data-set={ends.length > 0 ? '' : undefined}\n            variant=\"outline\"\n            className={cn('w-full min-w-0 justify-start font-normal', ends.length === 0 && 'text-muted-foreground', className)}\n          />\n        }\n      >\n        <IconCalendar aria-hidden=\"true\" />\n        <span className=\"truncate\">{ends.length === 0 || summary === 'label' ? placeholder : ends.join(' – ')}</span>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-auto p-0\">\n        <Calendar\n          mode=\"range\"\n          defaultMonth={from}\n          numberOfMonths={isMobile ? 1 : 2}\n          weekStartsOn={firstWeekdayOf(locale)}\n          selected={{ from, to }}\n          onSelect={(range) => onValueChange({ from: dateToDay(range?.from), to: dateToDay(range?.to) })}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n};\n"],"mappings":"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"}

package/dist/chunks/input-syWxjY2U.js

@@ -0,0 +1,172 @@
+import { isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cva } from "class-variance-authority";
+import { Popover } from "@base-ui/react/popover";
+import { Input } from "@base-ui/react/input";
+//#region ../ui/src/lib/utils.ts
+var cn = (...inputs) => twMerge(clsx(inputs));
+/**
+* Normalise a size prop to a CSS length.
+*
+* Bare numbers become px, which is also what a bare numeric *string* means: an
+* element attribute arrives as a string, so `width="480"` and `width={480}` have
+* to land on the same value. Anything with a unit, a percentage or a keyword
+* passes through untouched.
+*/
+var cssLength = (value) => {
+	if (value == null || value === "") return;
+	if (typeof value === "number") return Number.isFinite(value) ? `${value}px` : void 0;
+	return /^-?\d*\.?\d+$/.test(value.trim()) ? `${value.trim()}px` : value;
+};
+//#endregion
+//#region ../ui/src/components/ui/button/button.tsx
+/**
+* The fill of a disabled Button that has one: muted, whichever way it is disabled (a button's own disabled, Base UI's
+* data-disabled, or aria-disabled on a link), in the dark theme too, where the variants set their own fill. Ghost and link
+* have no fill to begin with and are given none: a grey box would turn a link into a button.
+*/
+var DISABLED_FILL = "disabled:bg-muted data-disabled:bg-muted aria-disabled:bg-muted dark:disabled:bg-muted dark:data-disabled:bg-muted dark:aria-disabled:bg-muted";
+var buttonVariants = cva("group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all motion-reduce:transition-none motion-reduce:transform-none outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:not-aria-disabled:translate-y-px disabled:pointer-events-none disabled:border-transparent disabled:text-foreground/60 disabled:shadow-none disabled:focus-visible:ring-0 dark:disabled:border-transparent data-link-disabled:pointer-events-none data-link-disabled:focus-visible:ring-0 data-disabled:border-transparent data-disabled:text-foreground/60 data-disabled:shadow-none dark:data-disabled:border-transparent aria-disabled:border-transparent aria-disabled:text-foreground/60 aria-disabled:shadow-none dark:aria-disabled:border-transparent aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: `bg-primary text-primary-foreground hover:bg-primary/80 ${DISABLED_FILL}`,
+			outline: `border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 ${DISABLED_FILL}`,
+			secondary: `bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground ${DISABLED_FILL}`,
+			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 aria-disabled:hover:bg-transparent dark:aria-disabled:hover:bg-transparent",
+			destructive: `bg-destructive/10 text-destructive hover:bg-destructive/15 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/15 dark:hover:bg-destructive/20 dark:focus-visible:ring-destructive/40 ${DISABLED_FILL}`,
+			link: "text-primary underline-offset-4 hover:underline aria-disabled:hover:no-underline"
+		},
+		size: {
+			default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			icon: "size-8",
+			"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+			"icon-lg": "size-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+/**
+* Whether this Button is rendering a link rather than a button, so it can keep
+* link semantics. Covers `render={<a href="..." />}` and a routing component
+* that takes an `href` (Next's Link). A component with a different prop for its
+* destination (react-router's `to`) cannot be recognised from here: give those
+* `nativeButton={false} role={undefined}` directly.
+*/
+var rendersALink = (render) => isValidElement(render) && (render.type === "a" || typeof render.props.href === "string");
+/**
+* A link that looks like a button is still a link, and has to be announced as
+* one: it opens in a new tab, it has an address, Enter follows it and Space
+* scrolls the page.
+*
+* Base UI needs telling, in two steps. Rendering an anchor while `nativeButton`
+* is true (its default) warns in development and puts `type="button"` on the
+* anchor; following the warning and passing `nativeButton={false}` then adds
+* `role="button"`, which is what takes the link semantics away. So this does
+* both: non-native, with the role and the tabindex Base UI would add cleared
+* again. An explicit prop from the caller still wins over either.
+*/
+var LINK_PROPS = {
+	nativeButton: false,
+	role: void 0,
+	tabIndex: void 0
+};
+/**
+* A disabled link is not :disabled (only a form control can be), so the markup has to say it: Base UI already marks it
+* `aria-disabled` and `data-disabled` and stops the click, and this takes it out of the tab order, which LINK_PROPS
+* would otherwise leave to the browser. The href is kept on purpose, so a routing component that requires one keeps
+* working; the pointer is kept off the link by `data-link-disabled:pointer-events-none`, which also covers a middle
+* click and the context menu, and the click and Enter are stopped by Base UI. It is a data attribute of its own, not
+* `aria-disabled`, because an aria-disabled button (`focusableWhenDisabled`) is meant to stay hoverable and focusable so it
+* can say why it cannot act; only a native :disabled button and this link are inert.
+*/
+var DISABLED_LINK_PROPS = {
+	...LINK_PROPS,
+	tabIndex: -1,
+	"data-link-disabled": ""
+};
+var Button$1 = ({ className, variant = "default", size = "default", ...props }) => {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "button",
+		...rendersALink(props.render) ? props.disabled ? DISABLED_LINK_PROPS : LINK_PROPS : {},
+		className: cn(buttonVariants({
+			variant,
+			size,
+			className
+		})),
+		...props
+	});
+};
+//#endregion
+//#region ../ui/src/components/ui/popover/popover.tsx
+var Popover$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		"data-slot": "popover",
+		...props
+	});
+};
+var PopoverTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+};
+var PopoverContent = ({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, anchor, ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		align,
+		alignOffset,
+		anchor,
+		side,
+		sideOffset,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsx(Popover.Popup, {
+			"data-slot": "popover-content",
+			className: cn("z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 motion-reduce:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props
+		})
+	}) });
+};
+var PopoverHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-header",
+		className: cn("flex flex-col gap-0.5 text-sm", className),
+		...props
+	});
+};
+var PopoverTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Title, {
+		"data-slot": "popover-title",
+		className: cn("font-medium", className),
+		...props
+	});
+};
+var PopoverDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Description, {
+		"data-slot": "popover-description",
+		className: cn("text-muted-foreground", className),
+		...props
+	});
+};
+//#endregion
+//#region ../ui/src/components/ui/input/input.tsx
+var Input$1 = ({ className, type, ...props }) => {
+	return /* @__PURE__ */ jsx(Input, {
+		type,
+		"data-slot": "input",
+		className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
+		...props
+	});
+};
+//#endregion
+export { PopoverHeader as a, Button$1 as c, cssLength as d, PopoverDescription as i, buttonVariants as l, Popover$1 as n, PopoverTitle as o, PopoverContent as r, PopoverTrigger as s, Input$1 as t, cn as u };
+
+//# sourceMappingURL=input-syWxjY2U.js.map

package/dist/chunks/input-syWxjY2U.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-syWxjY2U.js","names":[],"sources":["../../../ui/src/lib/utils.ts","../../../ui/src/components/ui/button/button.tsx","../../../ui/src/components/ui/popover/popover.tsx","../../../ui/src/components/ui/input/input.tsx"],"sourcesContent":["import type { ClassValue } from 'clsx';\nimport { clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport const cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs));\n\n/** A CSS length as a component prop: a number is px, a string is used verbatim. */\nexport type TCssLength = number | string;\n\n/**\n * Normalise a size prop to a CSS length.\n *\n * Bare numbers become px, which is also what a bare numeric *string* means: an\n * element attribute arrives as a string, so `width=\"480\"` and `width={480}` have\n * to land on the same value. Anything with a unit, a percentage or a keyword\n * passes through untouched.\n */\nexport const cssLength = (value: TCssLength | null | undefined): string | undefined => {\n  if (value == null || value === '') {\n    return undefined;\n  }\n\n  if (typeof value === 'number') {\n    return Number.isFinite(value) ? `${value}px` : undefined;\n  }\n\n  return /^-?\\d*\\.?\\d+$/.test(value.trim()) ? `${value.trim()}px` : value;\n};\n","import { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { isValidElement } from 'react';\n\n/**\n * The fill of a disabled Button that has one: muted, whichever way it is disabled (a button's own disabled, Base UI's\n * data-disabled, or aria-disabled on a link), in the dark theme too, where the variants set their own fill. Ghost and link\n * have no fill to begin with and are given none: a grey box would turn a link into a button.\n */\nconst DISABLED_FILL =\n  'disabled:bg-muted data-disabled:bg-muted aria-disabled:bg-muted dark:disabled:bg-muted dark:data-disabled:bg-muted dark:aria-disabled:bg-muted';\n\nexport const buttonVariants = cva(\n  \"group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all motion-reduce:transition-none motion-reduce:transform-none outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:not-aria-disabled:translate-y-px disabled:pointer-events-none disabled:border-transparent disabled:text-foreground/60 disabled:shadow-none disabled:focus-visible:ring-0 dark:disabled:border-transparent data-link-disabled:pointer-events-none data-link-disabled:focus-visible:ring-0 data-disabled:border-transparent data-disabled:text-foreground/60 data-disabled:shadow-none dark:data-disabled:border-transparent aria-disabled:border-transparent aria-disabled:text-foreground/60 aria-disabled:shadow-none dark:aria-disabled:border-transparent aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: `bg-primary text-primary-foreground hover:bg-primary/80 ${DISABLED_FILL}`,\n        outline: `border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 ${DISABLED_FILL}`,\n        secondary: `bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground ${DISABLED_FILL}`,\n        ghost:\n          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 aria-disabled:hover:bg-transparent dark:aria-disabled:hover:bg-transparent',\n        destructive: `bg-destructive/10 text-destructive hover:bg-destructive/15 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/15 dark:hover:bg-destructive/20 dark:focus-visible:ring-destructive/40 ${DISABLED_FILL}`,\n        link: 'text-primary underline-offset-4 hover:underline aria-disabled:hover:no-underline',\n      },\n      size: {\n        default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n        icon: 'size-8',\n        'icon-xs': \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',\n        'icon-lg': 'size-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\n/**\n * Whether this Button is rendering a link rather than a button, so it can keep\n * link semantics. Covers `render={<a href=\"...\" />}` and a routing component\n * that takes an `href` (Next's Link). A component with a different prop for its\n * destination (react-router's `to`) cannot be recognised from here: give those\n * `nativeButton={false} role={undefined}` directly.\n */\nconst rendersALink = (render: ButtonPrimitive.Props['render']): boolean =>\n  isValidElement(render) && (render.type === 'a' || typeof (render.props as { href?: unknown }).href === 'string');\n\n/**\n * A link that looks like a button is still a link, and has to be announced as\n * one: it opens in a new tab, it has an address, Enter follows it and Space\n * scrolls the page.\n *\n * Base UI needs telling, in two steps. Rendering an anchor while `nativeButton`\n * is true (its default) warns in development and puts `type=\"button\"` on the\n * anchor; following the warning and passing `nativeButton={false}` then adds\n * `role=\"button\"`, which is what takes the link semantics away. So this does\n * both: non-native, with the role and the tabindex Base UI would add cleared\n * again. An explicit prop from the caller still wins over either.\n */\nconst LINK_PROPS = { nativeButton: false, role: undefined, tabIndex: undefined } as const;\n\n/**\n * A disabled link is not :disabled (only a form control can be), so the markup has to say it: Base UI already marks it\n * `aria-disabled` and `data-disabled` and stops the click, and this takes it out of the tab order, which LINK_PROPS\n * would otherwise leave to the browser. The href is kept on purpose, so a routing component that requires one keeps\n * working; the pointer is kept off the link by `data-link-disabled:pointer-events-none`, which also covers a middle\n * click and the context menu, and the click and Enter are stopped by Base UI. It is a data attribute of its own, not\n * `aria-disabled`, because an aria-disabled button (`focusableWhenDisabled`) is meant to stay hoverable and focusable so it\n * can say why it cannot act; only a native :disabled button and this link are inert.\n */\nconst DISABLED_LINK_PROPS = { ...LINK_PROPS, tabIndex: -1, 'data-link-disabled': '' } as const;\n\nexport const Button = ({\n  className,\n  variant = 'default',\n  size = 'default',\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) => {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      {...(rendersALink(props.render) ? (props.disabled ? DISABLED_LINK_PROPS : LINK_PROPS) : {})}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n};\n","import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { cn } from '@edyn/ui/lib/utils';\nimport type * as React from 'react';\n\nexport const Popover = ({ ...props }: PopoverPrimitive.Root.Props) => {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n};\n\nexport const PopoverTrigger = ({ ...props }: PopoverPrimitive.Trigger.Props) => {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n};\n\nexport const PopoverContent = ({\n  className,\n  align = 'center',\n  alignOffset = 0,\n  side = 'bottom',\n  sideOffset = 4,\n  anchor,\n  ...props\n}: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'anchor' | 'side' | 'sideOffset'>) => {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            'z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 motion-reduce:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            className,\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n};\n\nexport const PopoverHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"popover-header\" className={cn('flex flex-col gap-0.5 text-sm', className)} {...props} />;\n};\n\nexport const PopoverTitle = ({ className, ...props }: PopoverPrimitive.Title.Props) => {\n  return <PopoverPrimitive.Title data-slot=\"popover-title\" className={cn('font-medium', className)} {...props} />;\n};\n\nexport const PopoverDescription = ({ className, ...props }: PopoverPrimitive.Description.Props) => {\n  return <PopoverPrimitive.Description data-slot=\"popover-description\" className={cn('text-muted-foreground', className)} {...props} />;\n};\n","import { Input as InputPrimitive } from '@base-ui/react/input';\nimport { cn } from '@edyn/ui/lib/utils';\nimport type * as React from 'react';\n\nexport const Input = ({ className, type, ...props }: React.ComponentProps<'input'>) => {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        'h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n"],"mappings":"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"}