@exsto/ds 0.0.1-rc.13 → 0.0.1-rc.14

package/dist/ui/src/components/edyn/date-picker/date-text.js

@@ -0,0 +1,105 @@
+import { dateToDay, dayToDate } from "../date-range-picker/date-range-picker.js";
+//#region ../ui/src/components/edyn/date-picker/date-text.ts
+/**
+* Reading and writing a calendar day as the text a person types.
+*
+* 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
+* different calendar day in another time zone (local midnight serialised as UTC lands on the 4th east of Greenwich). The
+* string is also what `<input type="date">`, JSON and a .NET `DateOnly` use. Strings of that shape sort and compare as
+* days, so min, max and disabled days are compared as plain strings with no Date involved.
+*/
+var SHAPE = {
+	day: "2-digit",
+	month: "2-digit",
+	year: "numeric"
+};
+/** The order a locale writes day, month and year in: en-GB is day, month, year; en-US month, day, year; sv year first. */
+var datePartsOf = (locale) => new Intl.DateTimeFormat(locale, SHAPE).formatToParts(new Date(2e3, 0, 2, 12)).flatMap((part) => part.type === "day" || part.type === "month" || part.type === "year" ? [part.type] : []);
+/** What to type, written the locale's way: `DD/MM/YYYY` for en-GB. */
+var datePatternOf = (locale) => new Intl.DateTimeFormat(locale, SHAPE).formatToParts(new Date(2e3, 0, 2, 12)).map((part) => {
+	if (part.type === "day") return "DD";
+	if (part.type === "month") return "MM";
+	return part.type === "year" ? "YYYY" : part.value;
+}).join("").trim();
+/** A day written the locale's way: `05/03/2026` for en-GB. */
+var formatDay = (day, locale) => {
+	const date = dayToDate(day);
+	return date === void 0 ? "" : new Intl.DateTimeFormat(locale, SHAPE).format(date);
+};
+var isRealDay = (year, month, dayOfMonth) => {
+	if (year < 1e3 || month < 1 || month > 12 || dayOfMonth < 1) return false;
+	const date = new Date(year, month - 1, dayOfMonth, 12);
+	return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === dayOfMonth;
+};
+var toDay = (year, month, dayOfMonth) => dateToDay(new Date(year, month - 1, dayOfMonth, 12)) ?? "";
+/**
+* Reads typed text as a day. The locale's order decides which number is the day; a first number of four digits is always
+* a year (so `2026-03-05` is read the same everywhere); the separator can be anything that is not a digit, and eight
+* digits with none (`05032026`) are split by the order. A year must have four digits: `5/3/26` is refused, not guessed.
+*/
+var parseDateText = (text, locale) => {
+	const trimmed = text.trim();
+	if (trimmed === "") return { kind: "empty" };
+	if (!/^[\d\s./\-,]+$/.test(trimmed)) return {
+		kind: "problem",
+		problem: "format"
+	};
+	const order = datePartsOf(locale);
+	let numbers = trimmed.match(/\d+/g) ?? [];
+	let parts = order;
+	if (numbers.length === 1 && numbers[0]?.length === 8) {
+		const digits = numbers[0];
+		numbers = order[0] === "year" ? [
+			digits.slice(0, 4),
+			digits.slice(4, 6),
+			digits.slice(6)
+		] : [
+			digits.slice(0, 2),
+			digits.slice(2, 4),
+			digits.slice(4)
+		];
+	}
+	if (numbers.length !== 3) return {
+		kind: "problem",
+		problem: "format"
+	};
+	if (numbers[0]?.length === 4) parts = [
+		"year",
+		"month",
+		"day"
+	];
+	const read = {
+		day: "",
+		month: "",
+		year: ""
+	};
+	parts.forEach((part, index) => {
+		read[part] = numbers[index] ?? "";
+	});
+	if (read.year.length !== 4 || read.day.length > 2 || read.month.length > 2) return {
+		kind: "problem",
+		problem: "format"
+	};
+	const [year, month, dayOfMonth] = [
+		Number(read.year),
+		Number(read.month),
+		Number(read.day)
+	];
+	return isRealDay(year, month, dayOfMonth) ? {
+		kind: "day",
+		day: toDay(year, month, dayOfMonth)
+	} : {
+		kind: "problem",
+		problem: "notReal"
+	};
+};
+/** Whether a day is allowed, and if not, which limit it breaks. */
+var dayProblem = (day, { min, max, disabledDates }) => {
+	if (min !== void 0 && day < min) return "beforeMin";
+	if (max !== void 0 && day > max) return "afterMax";
+	return (typeof disabledDates === "function" ? disabledDates(day) : disabledDates?.includes(day) ?? false) ? "unavailable" : void 0;
+};
+//#endregion
+export { datePartsOf, datePatternOf, dayProblem, formatDay, parseDateText };
+
+//# sourceMappingURL=date-text.js.map

package/dist/ui/src/components/edyn/date-picker/date-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-text.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/date-picker/date-text.ts"],"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"],"mappings":"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"}

package/dist/ui/src/components/edyn/date-range-picker/date-range-picker.js

@@ -0,0 +1,59 @@
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../../ui/button/button.js";
+import { Calendar } from "../../ui/calendar/calendar.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover/popover.js";
+import { useIsMobile } from "../../../hooks/use-mobile.js";
+import { firstWeekdayOf } from "../../../lib/first-weekday.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCalendar } from "@tabler/icons-react";
+//#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 { DateRangePicker, dateToDay, dayToDate };
+
+//# sourceMappingURL=date-range-picker.js.map

package/dist/ui/src/components/edyn/date-range-picker/date-range-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/date-range-picker/date-range-picker.tsx"],"sourcesContent":["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":";;;;;;;;;AAcA,IAAa,aAAa,UAAiD,UAAU,KAAA,IAAY,KAAA,oBAAY,IAAI,KAAK,GAAG,MAAM,UAAU;AAEzI,IAAa,aAAa,SACxB,SAAS,KAAA,IAAY,KAAA,IAAY,GAAG,KAAK,YAAY,EAAE,GAAG,OAAO,KAAK,SAAS,IAAI,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG;;AAuBlJ,IAAa,mBAAmB,EAC9B,IACA,OACA,eACA,cAAc,qBACd,SAAS,SACT,UAAU,SACV,cAAc,WACd,WACA,GAAG,YACwB;CAC3B,MAAM,WAAW,YAAY;CAC7B,MAAM,OAAO,UAAU,MAAM,IAAI;CACjC,MAAM,KAAK,UAAU,MAAM,EAAE;CAC7B,MAAM,SAAS,IAAI,KAAK,eAAe,QAAQ;EAAE,KAAK;EAAW,OAAO;EAAS,MAAM;CAAU,CAAC;CAClG,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,QAAQ,SAAS,SAAS,KAAA,CAAS,CAAC,CAAC,KAAK,SAAS,OAAO,OAAO,IAAI,CAAC;CAC9F,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,qBAAC,gBAAD;EACE,QACE,oBAAC,QAAD;GACE,GAAI;GACA;GACJ,cAAY;GACZ,aAAU;GACV,YAAU,KAAK,SAAS,IAAI,KAAK,KAAA;GACjC,SAAQ;GACR,WAAW,GAAG,4CAA4C,KAAK,WAAW,KAAK,yBAAyB,SAAS;EAClH,CAAA;EAVL,UAAA,CAaE,oBAAC,cAAD,EAAc,eAAY,OAAQ,CAAA,GAClC,oBAAC,QAAD;GAAM,WAAU;GAAY,UAAA,KAAK,WAAW,KAAK,YAAY,UAAU,cAAc,KAAK,KAAK,KAAK;EAAQ,CAAA,CAC9F;CAChB,CAAA,GAAA,oBAAC,gBAAD;EAAgB,OAAM;EAAQ,WAAU;EACtC,UAAA,oBAAC,UAAD;GACE,MAAK;GACL,cAAc;GACd,gBAAgB,WAAW,IAAI;GAC/B,cAAc,eAAe,MAAM;GACnC,UAAU;IAAE;IAAM;GAAG;GACrB,WAAW,UAAU,cAAc;IAAE,MAAM,UAAU,OAAO,IAAI;IAAG,IAAI,UAAU,OAAO,EAAE;GAAE,CAAC;EAC9F,CAAA;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}

package/dist/ui/src/components/edyn/initials-avatar/initials-avatar.js

@@ -0,0 +1,86 @@
+import { cn } from "../../../lib/utils.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar/avatar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../ui/src/components/edyn/initials-avatar/initials-avatar.tsx
+/** How many colour pairs the theme defines (--avatar-1-bg, --avatar-1-fg ... in @edyn/theme tokens.css). */
+var AVATAR_TONES = 12;
+/**
+* The palette entry the text gets, from 1: the same text always gets the same one.
+* FNV-1a, because a plain multiply-and-add hash puts two letters on a few entries
+* only (it reduces to 7 x first + second, modulo 12).
+*/
+var avatarTone = (text) => {
+	let hash = 2166136261;
+	for (const character of text) {
+		hash ^= character.codePointAt(0) ?? 0;
+		hash = Math.imul(hash, 16777619);
+	}
+	hash ^= hash >>> 16;
+	hash = Math.imul(hash, 2246822507);
+	hash ^= hash >>> 13;
+	hash = Math.imul(hash, 3266489909);
+	hash ^= hash >>> 16;
+	return (hash >>> 0) % 12 + 1;
+};
+/** Up to two initials, upper-cased: the first letter of the first two words. */
+var initialsOf = (name) => name.split(/\s+/).filter((part) => part !== "").slice(0, 2).map((part) => Array.from(part)[0]?.toUpperCase() ?? "").join("");
+/**
+* The circle and its letters together, so the initials always fit. The font size
+* is inline rather than a class on purpose: 9px and 15px are not on Tailwind's
+* type scale, a custom `text-*` token would be read by tailwind-merge as a colour
+* and could drop the wrong class, and an inline size cannot be fought by the
+* fallback's own `text-sm`.
+*/
+var SIZES = {
+	xs: {
+		box: "size-5",
+		fontSize: 9
+	},
+	sm: {
+		box: "size-6",
+		fontSize: 10
+	},
+	md: {
+		box: "size-8",
+		fontSize: 12
+	},
+	lg: {
+		box: "size-10",
+		fontSize: 15
+	}
+};
+/** 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, "aria-label": ariaLabel, ...props }) => {
+	const initials = initialsOf(name);
+	const tone = avatarTone(initials);
+	const { box, fontSize } = SIZES[size];
+	const style = autoColor ? {
+		fontSize,
+		backgroundColor: `var(--avatar-${tone}-bg)`,
+		color: `var(--avatar-${tone}-fg)`
+	} : { fontSize };
+	const accessibleName = label ?? ariaLabel;
+	const a11y = accessibleName === void 0 ? { "aria-hidden": true } : {
+		role: "img",
+		"aria-label": accessibleName
+	};
+	return /* @__PURE__ */ jsxs(Avatar, {
+		"data-slot": "initials-avatar",
+		...props,
+		"data-tone": autoColor ? tone : void 0,
+		className: cn(box, className),
+		...a11y,
+		children: [photoUrl != null && /* @__PURE__ */ jsx(AvatarImage, {
+			src: photoUrl,
+			alt: ""
+		}), /* @__PURE__ */ jsx(AvatarFallback, {
+			style,
+			className: "leading-none font-semibold tracking-tight",
+			children: initials
+		})]
+	});
+};
+//#endregion
+export { AVATAR_TONES, InitialsAvatar, avatarTone, initialsOf };
+
+//# sourceMappingURL=initials-avatar.js.map

package/dist/ui/src/components/edyn/initials-avatar/initials-avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"initials-avatar.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/initials-avatar/initials-avatar.tsx"],"sourcesContent":["import { Avatar, AvatarFallback, AvatarImage } from '@edyn/ui/components/ui/avatar';\nimport { cn } from '@edyn/ui/lib/utils';\nimport type { ComponentPropsWithoutRef, CSSProperties } from 'react';\n\n/** How many colour pairs the theme defines (--avatar-1-bg, --avatar-1-fg ... in @edyn/theme tokens.css). */\nexport const AVATAR_TONES = 12;\n\n/**\n * The palette entry the text gets, from 1: the same text always gets the same one.\n * FNV-1a, because a plain multiply-and-add hash puts two letters on a few entries\n * only (it reduces to 7 x first + second, modulo 12).\n */\nexport const avatarTone = (text: string): number => {\n  let hash = 2166136261;\n  for (const character of text) {\n    hash ^= character.codePointAt(0) ?? 0;\n    hash = Math.imul(hash, 16777619);\n  }\n  // murmur3's finaliser mixes every bit into the low ones the modulo keeps; without\n  // it AB, CD, EF share an entry.\n  hash ^= hash >>> 16;\n  hash = Math.imul(hash, 0x85ebca6b);\n  hash ^= hash >>> 13;\n  hash = Math.imul(hash, 0xc2b2ae35);\n  hash ^= hash >>> 16;\n  return ((hash >>> 0) % AVATAR_TONES) + 1;\n};\n\n/** Up to two initials, upper-cased: the first letter of the first two words. */\nexport const initialsOf = (name: string): string =>\n  name\n    .split(/\\s+/)\n    .filter((part) => part !== '')\n    .slice(0, 2)\n    .map((part) => Array.from(part)[0]?.toUpperCase() ?? '')\n    .join('');\n\n/**\n * The circle and its letters together, so the initials always fit. The font size\n * is inline rather than a class on purpose: 9px and 15px are not on Tailwind's\n * type scale, a custom `text-*` token would be read by tailwind-merge as a colour\n * and could drop the wrong class, and an inline size cannot be fought by the\n * fallback's own `text-sm`.\n */\nconst SIZES = {\n  xs: { box: 'size-5', fontSize: 9 },\n  sm: { box: 'size-6', fontSize: 10 },\n  md: { box: 'size-8', fontSize: 12 },\n  lg: { box: 'size-10', fontSize: 15 },\n} as const;\n\nexport type TInitialsAvatarSize = keyof typeof SIZES;\n\nexport interface IInitialsAvatarProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children' | 'className' | 'role'> {\n  name: string;\n  photoUrl?: string | null;\n  /** xs 20px, sm 24px in table rows, md 32px in a sidebar, lg 40px in a menu's header. */\n  size?: TInitialsAvatarSize;\n  className?: string;\n  /** Colour the initials from the palette (on by default); off, they take the muted look. */\n  autoColor?: boolean;\n  /**\n   * An accessible name. Left out, the avatar is decoration, which is right beside\n   * the person's name; give one when it stands alone.\n   */\n  label?: string;\n}\n\n/** A person's photo, or their initials on a circle in the palette colour they pick; both themes switch by themselves. */\nexport const InitialsAvatar = ({\n  name,\n  photoUrl,\n  size = 'md',\n  className,\n  autoColor = true,\n  label,\n  'aria-label': ariaLabel,\n  ...props\n}: IInitialsAvatarProps) => {\n  const initials = initialsOf(name);\n  const tone = avatarTone(initials);\n  const { box, fontSize } = SIZES[size];\n  const style: CSSProperties = autoColor\n    ? { fontSize, backgroundColor: `var(--avatar-${tone}-bg)`, color: `var(--avatar-${tone}-fg)` }\n    : { fontSize };\n  const accessibleName = label ?? ariaLabel;\n  const a11y = accessibleName === undefined ? ({ 'aria-hidden': true } as const) : ({ role: 'img', 'aria-label': accessibleName } as const);\n  return (\n    <Avatar data-slot=\"initials-avatar\" {...props} data-tone={autoColor ? tone : undefined} className={cn(box, className)} {...a11y}>\n      {photoUrl != null && <AvatarImage src={photoUrl} alt=\"\" />}\n      <AvatarFallback style={style} className=\"leading-none font-semibold tracking-tight\">\n        {initials}\n      </AvatarFallback>\n    </Avatar>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,eAAe;;;;;;AAO5B,IAAa,cAAc,SAAyB;CAClD,IAAI,OAAO;CACX,KAAK,MAAM,aAAa,MAAM;EAC5B,QAAQ,UAAU,YAAY,CAAC,KAAK;EACpC,OAAO,KAAK,KAAK,MAAM,QAAQ;CACjC;CAGA,QAAQ,SAAS;CACjB,OAAO,KAAK,KAAK,MAAM,UAAU;CACjC,QAAQ,SAAS;CACjB,OAAO,KAAK,KAAK,MAAM,UAAU;CACjC,QAAQ,SAAS;CACjB,QAAS,SAAS,KAAA,KAAqB;AACzC;;AAGA,IAAa,cAAc,SACzB,KACG,MAAM,KAAK,CAAC,CACZ,QAAQ,SAAS,SAAS,EAAE,CAAC,CAC7B,MAAM,GAAG,CAAC,CAAC,CACX,KAAK,SAAS,MAAM,KAAK,IAAI,CAAC,CAAC,EAAE,EAAE,YAAY,KAAK,EAAE,CAAC,CACvD,KAAK,EAAE;;;;;;;;AASZ,IAAM,QAAQ;CACZ,IAAI;EAAE,KAAK;EAAU,UAAU;CAAE;CACjC,IAAI;EAAE,KAAK;EAAU,UAAU;CAAG;CAClC,IAAI;EAAE,KAAK;EAAU,UAAU;CAAG;CAClC,IAAI;EAAE,KAAK;EAAW,UAAU;CAAG;AACrC;;AAoBA,IAAa,kBAAkB,EAC7B,MACA,UACA,OAAO,MACP,WACA,YAAY,MACZ,OACA,cAAc,WACd,GAAG,YACuB;CAC1B,MAAM,WAAW,WAAW,IAAI;CAChC,MAAM,OAAO,WAAW,QAAQ;CAChC,MAAM,EAAE,KAAK,aAAa,MAAM;CAChC,MAAM,QAAuB,YACzB;EAAE;EAAU,iBAAiB,gBAAgB,KAAK;EAAO,OAAO,gBAAgB,KAAK;CAAM,IAC3F,EAAE,SAAS;CACf,MAAM,iBAAiB,SAAS;CAChC,MAAM,OAAO,mBAAmB,KAAA,IAAa,EAAE,eAAe,KAAK,IAAe;EAAE,MAAM;EAAO,cAAc;CAAe;CAC9H,OACE,qBAAC,QAAD;EAAQ,aAAU;EAAkB,GAAI;EAAO,aAAW,YAAY,OAAO,KAAA;EAAW,WAAW,GAAG,KAAK,SAAS;EAAG,GAAI;EAA3H,UAAA,CACG,YAAY,QAAQ,oBAAC,aAAD;GAAa,KAAK;GAAU,KAAI;EAAI,CAAA,GACzD,oBAAC,gBAAD;GAAuB;GAAO,WAAU;GACrC,UAAA;EACa,CAAA,CACV;;AAEZ"}

package/dist/ui/src/components/edyn/multi-select/multi-select.js

@@ -0,0 +1,332 @@
+import { cn } from "../../../lib/utils.js";
+import { ScrollArea } from "../../ui/scroll-area/scroll-area.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip/tooltip.js";
+import { popupItemClass } from "../../../lib/popup-list.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCheck, IconChevronDown, IconSearch } from "@tabler/icons-react";
+import { Combobox } from "@base-ui/react/combobox";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region ../ui/src/components/edyn/multi-select/multi-select.tsx
+var DEFAULT_MULTI_SELECT_LABELS = {
+	noMatches: "No matches.",
+	loading: "Loading…",
+	error: "Could not load the options.",
+	retry: "Try again",
+	loadMore: "Load more",
+	loadingMore: "Loading…",
+	clear: "Clear",
+	selectedCount: (count) => `${count} selected`
+};
+/** Above this many options a list draws only the rows on screen. */
+var VIRTUALIZE_FROM = 100;
+var ITEM_HEIGHT = 32;
+/**
+* The options behind the chosen values, in the order they were chosen. A value with no
+* known option is kept and shown as itself rather than dropped: a selection must never
+* change just because a list did.
+*/
+var resolveChosen = (value, options, selectedOptions = []) => {
+	const known = /* @__PURE__ */ new Map();
+	for (const option of [...selectedOptions, ...options]) known.set(option.value, option);
+	return value.map((entry) => known.get(entry) ?? {
+		value: entry,
+		label: entry
+	});
+};
+/** What the trigger says: the placeholder, the one picked, or a count. */
+var summarize = (chosen, placeholder, labels, summary = "selection") => {
+	if (chosen.length === 0) return placeholder;
+	if (summary === "label") return labels.selectedCount(chosen.length);
+	return chosen.length === 1 ? chosen[0]?.label ?? "" : labels.selectedCount(chosen.length);
+};
+/** Every chosen name, for a tooltip on a trigger whose text is cut. With `label` the names are not shown, so it is the text itself. */
+var fullSelection = (chosen, placeholder, labels, summary = "selection") => summary === "selection" && chosen.length > 0 ? chosen.map((option) => option.label).join(", ") : summarize(chosen, placeholder, labels, summary);
+var POPUP = "flex max-h-(--available-height) w-(--anchor-width) min-w-64 max-w-[max(24rem,var(--anchor-width))] origin-(--transform-origin) flex-col overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-md outline-none duration-100 motion-reduce:animate-none 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";
+var TRIGGER = "flex h-8 w-full min-w-0 cursor-pointer items-center justify-between gap-2 rounded-lg border border-input bg-transparent px-2.5 text-sm text-foreground transition-colors outline-none focus-visible:border-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive data-popup-open:border-ring dark:bg-input/30";
+var Option = ({ option, index, style, measure, highlighted }) => {
+	const [cut, setCut] = useState(false);
+	const measureLabel = useCallback((element) => {
+		if (!element) return;
+		const measureCut = () => setCut(element.scrollWidth > element.clientWidth);
+		measureCut();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measureCut);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ jsxs(Combobox.Item, {
+		value: option,
+		index,
+		ref: measure,
+		"data-index": index,
+		style,
+		"data-slot": "multi-select-item",
+		className: cn(popupItemClass("base-ui"), "group"),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"data-slot": "multi-select-item-indicator",
+				"aria-hidden": "true",
+				className: "flex size-4 shrink-0 items-center justify-center rounded-sm border border-input text-primary-foreground transition-colors group-data-[selected]:border-primary group-data-[selected]:bg-primary",
+				children: /* @__PURE__ */ jsx(IconCheck, {
+					className: "size-3 opacity-0 group-data-[selected]:opacity-100",
+					stroke: 3
+				})
+			}),
+			option.leading,
+			/* @__PURE__ */ jsxs(Tooltip, {
+				open: highlighted && cut,
+				children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					"data-slot": "multi-select-item-label",
+					"data-overflowing": cut ? "" : void 0,
+					render: /* @__PURE__ */ jsx("span", {
+						ref: measureLabel,
+						className: "min-w-0 flex-1 truncate"
+					}),
+					children: option.label
+				}, option.label), /* @__PURE__ */ jsx(TooltipContent, {
+					side: "right",
+					children: option.label
+				})]
+			}),
+			option.count !== void 0 && /* @__PURE__ */ jsx("span", {
+				className: "text-xs text-muted-foreground tabular-nums",
+				children: option.count
+			})
+		]
+	});
+};
+var Options = ({ scroller, scrollTo, busy, highlightedValue }) => {
+	const items = Combobox.useFilteredItems();
+	const virtual = items.length > 100;
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => setMounted(true), []);
+	const virtualizer = useVirtualizer({
+		count: items.length,
+		getScrollElement: () => scroller.current,
+		estimateSize: () => ITEM_HEIGHT,
+		overscan: 12,
+		enabled: virtual && mounted
+	});
+	useEffect(() => {
+		scrollTo.current = virtual ? (index) => virtualizer.scrollToIndex(index, { align: "auto" }) : () => void 0;
+	}, [
+		scrollTo,
+		virtual,
+		virtualizer
+	]);
+	if (!virtual) return /* @__PURE__ */ jsx(Combobox.List, {
+		"aria-busy": busy || void 0,
+		className: "p-1 outline-none",
+		children: items.map((option, index) => /* @__PURE__ */ jsx(Option, {
+			option,
+			index,
+			highlighted: highlightedValue === option.value
+		}, option.value))
+	});
+	return /* @__PURE__ */ jsx(Combobox.List, {
+		"data-virtualized": "",
+		"aria-busy": busy || void 0,
+		className: "relative m-1 outline-none",
+		style: { height: virtualizer.getTotalSize() },
+		children: virtualizer.getVirtualItems().map((row) => {
+			const option = items[row.index];
+			return option === void 0 ? null : /* @__PURE__ */ jsx(Option, {
+				option,
+				index: row.index,
+				highlighted: highlightedValue === option.value,
+				measure: virtualizer.measureElement,
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					right: 0,
+					transform: `translateY(${row.start}px)`
+				}
+			}, option.value);
+		})
+	});
+};
+/**
+* A choice of several from a list: a trigger shaped like a Select that says what is picked
+* (the placeholder, the one picked, or a count), and a popup with a search field and checkbox
+* options, with the shared popup list style, the ScrollArea's bar and fades, and virtualization
+* past VIRTUALIZE_FROM options. Nothing chosen means no filter.
+*
+* For a short fixed list pass `options` and nothing else: the component filters them as the
+* user types. For a list that grows, pass `onSearchChange` and it becomes a window onto a
+* server: the caller fetches the options for the typed text, and says when they are loading,
+* failed, or have another page.
+*/
+var MultiSelect = ({ placeholder, searchPlaceholder, options, value, onValueChange, id, disabled = false, className, onSearchChange, searchDelay = 250, selectedOptions, loading = false, error = false, onRetry, hasMore = false, onLoadMore, loadingMore = false, labels: labelOverrides, summary = "selection", ...rest }) => {
+	const labels = useMemo(() => ({
+		...DEFAULT_MULTI_SELECT_LABELS,
+		...labelOverrides
+	}), [labelOverrides]);
+	const isAsync = onSearchChange !== void 0;
+	const chosen = useMemo(() => resolveChosen(value, options, selectedOptions), [
+		value,
+		options,
+		selectedOptions
+	]);
+	const items = useMemo(() => {
+		const offered = new Set(options.map((option) => option.value));
+		return [...chosen.filter((option) => !offered.has(option.value)), ...options];
+	}, [chosen, options]);
+	const refScroller = useRef(null);
+	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);
+	const refOpen = useRef(false);
+	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.Root, {
+		multiple: true,
+		disabled,
+		items,
+		filter: isAsync ? null : void 0,
+		value: chosen,
+		onValueChange: (next) => onValueChange(next.map((option) => option.value)),
+		onInputValueChange: (text) => {
+			if (onSearchChange === void 0 || !refOpen.current) return;
+			window.clearTimeout(refTimer.current);
+			if (text === refReported.current) return;
+			refTimer.current = window.setTimeout(() => {
+				refReported.current = text;
+				onSearchChange(text);
+			}, searchDelay);
+		},
+		onOpenChange: (open) => {
+			window.clearTimeout(refTimer.current);
+			setPopupOpen(open);
+			if (!open) setHighlightedValue(null);
+			refOpen.current = open;
+			refReported.current = open ? "" : void 0;
+			if (open && onSearchChange !== void 0) onSearchChange("");
+		},
+		itemToStringLabel: (option) => option.label,
+		isItemEqualToValue: (a, b) => a.value === b.value,
+		virtualized: items.length > 100,
+		onItemHighlighted: (item, details) => {
+			setHighlightedValue(item?.value ?? null);
+			if (details.reason === "keyboard" && details.index >= 0) refScrollTo.current(details.index);
+		},
+		children: [/* @__PURE__ */ jsxs(Tooltip, {
+			disabled: popupOpen,
+			onOpenChange: (open, details) => {
+				const element = refTriggerText.current;
+				if (open && !(element && element.scrollWidth > element.clientWidth)) details.cancel();
+			},
+			children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+				"data-slot": "multi-select-trigger",
+				render: /* @__PURE__ */ jsx(Combobox.Trigger, {
+					...rest,
+					id,
+					"data-set": chosen.length > 0 ? "" : void 0,
+					onKeyDown: closeFromTrigger,
+					className: cn(TRIGGER, className)
+				}),
+				children: [/* @__PURE__ */ jsx("span", {
+					ref: refTriggerText,
+					className: cn("min-w-0 flex-1 truncate text-left", chosen.length === 0 && "text-muted-foreground"),
+					children: summarize(chosen, placeholder, labels, summary)
+				}), /* @__PURE__ */ jsx(IconChevronDown, {
+					"aria-hidden": "true",
+					className: "size-4 shrink-0 text-muted-foreground"
+				})]
+			}), /* @__PURE__ */ jsx(TooltipContent, { children: fullSelection(chosen, placeholder, labels, summary) })]
+		}), /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			sideOffset: 4,
+			align: "start",
+			className: "z-50",
+			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+				"data-slot": "multi-select-content",
+				className: POPUP,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex shrink-0 items-center gap-2 border-b border-border px-3",
+						children: [/* @__PURE__ */ jsx(IconSearch, {
+							"aria-hidden": "true",
+							className: "size-4 shrink-0 text-muted-foreground"
+						}), /* @__PURE__ */ jsx(Combobox.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"
+						})]
+					}),
+					/* @__PURE__ */ jsx(Combobox.Status, {
+						"data-slot": "multi-select-status",
+						className: "px-3 py-2 text-sm text-muted-foreground empty:p-0",
+						children: failed ? /* @__PURE__ */ jsxs("span", {
+							className: "flex items-center justify-between gap-2 text-destructive",
+							children: [errorMessage, onRetry !== void 0 && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: onRetry,
+								className: "rounded-md px-2 py-1 font-medium text-foreground hover:bg-foreground/6",
+								children: labels.retry
+							})]
+						}) : loading ? labels.loading : null
+					}),
+					/* @__PURE__ */ jsx(Combobox.Empty, {
+						className: "px-3 py-6 text-center text-sm text-muted-foreground empty:p-0",
+						children: loading || failed ? null : labels.noMatches
+					}),
+					/* @__PURE__ */ jsx(ScrollArea, {
+						type: "always",
+						fade: true,
+						viewportRef: refScroller,
+						className: "max-h-72 min-h-0",
+						children: /* @__PURE__ */ jsx(Options, {
+							scroller: refScroller,
+							scrollTo: refScrollTo,
+							busy: loading,
+							highlightedValue
+						})
+					}),
+					hasMore && onLoadMore !== void 0 && /* @__PURE__ */ jsx("div", {
+						className: "shrink-0 border-t border-border p-1",
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							disabled: loadingMore,
+							onClick: onLoadMore,
+							className: "h-8 w-full rounded-md px-2 text-sm font-medium text-foreground hover:bg-foreground/6 disabled:pointer-events-none disabled:opacity-50",
+							children: loadingMore ? labels.loadingMore : labels.loadMore
+						})
+					}),
+					chosen.length > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "flex shrink-0 items-center justify-between gap-2 border-t border-border py-1 pr-1 pl-3 text-xs text-muted-foreground",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "tabular-nums",
+							children: labels.selectedCount(chosen.length)
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => onValueChange([]),
+							className: "rounded-md px-2 py-1 font-medium text-foreground hover:bg-foreground/6",
+							children: labels.clear
+						})]
+					})
+				]
+			})
+		}) })]
+	});
+};
+//#endregion
+export { DEFAULT_MULTI_SELECT_LABELS, MultiSelect, VIRTUALIZE_FROM, fullSelection, resolveChosen, summarize };
+
+//# sourceMappingURL=multi-select.js.map