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

package/dist/ui/src/components/edyn/rich-text-editor/toolbar.js

@@ -0,0 +1,235 @@
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../../ui/button/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover/popover.js";
+import { isAllowedRichTextHref } from "../rich-text-content/allow-list.js";
+import { Input } from "../../ui/input/input.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../ui/dropdown-menu/dropdown-menu.js";
+import { toggleVariants } from "../../ui/toggle/toggle.js";
+import { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconBold, IconItalic, IconLink, IconList, IconListNumbers, IconSeparatorHorizontal, IconUnderline, IconVariable } from "@tabler/icons-react";
+import { useEditorState } from "@tiptap/react";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region ../ui/src/components/edyn/rich-text-editor/toolbar.tsx
+var BUTTON_CLASS = cn(toggleVariants({
+	variant: "default",
+	size: "sm"
+}), "size-7 px-0");
+/** A typed address becomes a link: "name@example.test" a mailto, "example.test" an https address. */
+var normalizeHref = (raw) => {
+	const value = raw.trim();
+	if (value === "" || /^[a-z][a-z0-9+.-]*:/i.test(value)) return value;
+	return /^[^\s@/]+@[^\s@/]+\.[^\s@/]+$/.test(value) ? `mailto:${value}` : `https://${value}`;
+};
+var ToolbarButton = ({ label, pressed, disabled, onClick, children }) => /* @__PURE__ */ jsx(Toolbar.Button, {
+	type: "button",
+	"aria-label": label,
+	title: label,
+	"aria-pressed": pressed,
+	"data-pressed": pressed ? "" : void 0,
+	disabled,
+	className: BUTTON_CLASS,
+	onMouseDown: (event) => event.preventDefault(),
+	onClick,
+	children
+});
+var hrefAt = (editor, range) => {
+	const { doc } = editor.state;
+	const marks = range.from < range.to ? doc.nodeAt(range.from)?.marks ?? [] : doc.resolve(range.from).marks();
+	return String(marks.find((mark) => mark.type.name === "link")?.attrs.href ?? "");
+};
+var LinkControl = ({ range, editor, labels, active, disabled, open, onOpenChange }) => {
+	const [address, setAddress] = useState("");
+	const [invalid, setInvalid] = useState(false);
+	useEffect(() => {
+		if (open) {
+			setAddress(range.current ? hrefAt(editor, range.current) : "");
+			setInvalid(false);
+		}
+	}, [
+		editor,
+		open,
+		range
+	]);
+	const apply = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		const href = normalizeHref(address);
+		if (!isAllowedRichTextHref(href)) {
+			setInvalid(true);
+			return;
+		}
+		const saved = range.current ?? {
+			from: editor.state.selection.from,
+			to: editor.state.selection.to
+		};
+		const chain = editor.chain().focus().setTextSelection(saved);
+		if (saved.from === saved.to && !hrefAt(editor, saved)) chain.insertContent({
+			type: "text",
+			text: href,
+			marks: [{
+				type: "link",
+				attrs: { href }
+			}]
+		}).run();
+		else chain.extendMarkRange("link").setLink({ href }).run();
+		onOpenChange(false);
+	};
+	const remove = () => {
+		const saved = range.current ?? {
+			from: editor.state.selection.from,
+			to: editor.state.selection.to
+		};
+		editor.chain().focus().setTextSelection(saved).extendMarkRange("link").unsetLink().run();
+		onOpenChange(false);
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			render: /* @__PURE__ */ jsx(Toolbar.Button, {
+				type: "button",
+				"aria-label": labels.link,
+				title: labels.link,
+				"aria-pressed": active,
+				"data-pressed": active ? "" : void 0,
+				disabled,
+				className: BUTTON_CLASS
+			}),
+			children: /* @__PURE__ */ jsx(IconLink, { "aria-hidden": true })
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			align: "start",
+			className: "w-80",
+			children: /* @__PURE__ */ jsxs("form", {
+				className: "flex flex-col gap-2",
+				onSubmit: apply,
+				children: [
+					/* @__PURE__ */ jsx(Input, {
+						type: "text",
+						inputMode: "url",
+						"aria-label": labels.linkAddress,
+						"aria-invalid": invalid || void 0,
+						value: address,
+						onChange: (event) => {
+							setAddress(event.target.value);
+							setInvalid(false);
+						}
+					}),
+					invalid ? /* @__PURE__ */ jsx("p", {
+						className: "text-xs text-destructive",
+						children: labels.linkInvalid
+					}) : null,
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex justify-end gap-2",
+						children: [active ? /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							onClick: remove,
+							children: labels.linkRemove
+						}) : null, /* @__PURE__ */ jsx(Button, {
+							type: "submit",
+							size: "sm",
+							children: labels.linkApply
+						})]
+					})
+				]
+			})
+		})]
+	});
+};
+var RichTextToolbar = ({ linkRange, editor, labels, fields, disabled, linkOpen, onLinkOpenChange }) => {
+	const state = useEditorState({
+		editor,
+		selector: ({ editor: current }) => ({
+			bold: current.isActive("bold"),
+			italic: current.isActive("italic"),
+			underline: current.isActive("underline"),
+			bullets: current.isActive("bulletList"),
+			numbers: current.isActive("orderedList"),
+			link: current.isActive("link")
+		})
+	});
+	return /* @__PURE__ */ jsxs(Toolbar.Root, {
+		"data-slot": "rich-text-toolbar",
+		"aria-label": labels.toolbar,
+		className: "flex flex-wrap items-center gap-0.5 border-b border-input p-1",
+		children: [
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				label: labels.bold,
+				pressed: state.bold,
+				disabled,
+				onClick: () => editor.chain().focus().toggleBold().run(),
+				children: /* @__PURE__ */ jsx(IconBold, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				label: labels.italic,
+				pressed: state.italic,
+				disabled,
+				onClick: () => editor.chain().focus().toggleItalic().run(),
+				children: /* @__PURE__ */ jsx(IconItalic, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				label: labels.underline,
+				pressed: state.underline,
+				disabled,
+				onClick: () => editor.chain().focus().toggleUnderline().run(),
+				children: /* @__PURE__ */ jsx(IconUnderline, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(Toolbar.Separator, { className: "mx-1 h-4 w-px bg-border" }),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				label: labels.bulletList,
+				pressed: state.bullets,
+				disabled,
+				onClick: () => editor.chain().focus().toggleBulletList().run(),
+				children: /* @__PURE__ */ jsx(IconList, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				label: labels.numberedList,
+				pressed: state.numbers,
+				disabled,
+				onClick: () => editor.chain().focus().toggleOrderedList().run(),
+				children: /* @__PURE__ */ jsx(IconListNumbers, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(LinkControl, {
+				range: linkRange,
+				editor,
+				labels,
+				active: state.link,
+				disabled,
+				open: linkOpen,
+				onOpenChange: onLinkOpenChange
+			}),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				label: labels.horizontalRule,
+				disabled,
+				onClick: () => editor.chain().focus().setHorizontalRule().run(),
+				children: /* @__PURE__ */ jsx(IconSeparatorHorizontal, { "aria-hidden": true })
+			}),
+			fields && fields.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Toolbar.Separator, { className: "mx-1 h-4 w-px bg-border" }), /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+				render: /* @__PURE__ */ jsx(Toolbar.Button, {
+					type: "button",
+					"aria-label": labels.insertField,
+					title: labels.insertField,
+					disabled,
+					className: BUTTON_CLASS
+				}),
+				children: /* @__PURE__ */ jsx(IconVariable, { "aria-hidden": true })
+			}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+				align: "start",
+				className: "w-56",
+				children: fields.map((field) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+					onClick: () => editor.chain().focus().insertContent({
+						type: "text",
+						text: `{{${field.id}}}`
+					}).run(),
+					children: field.label
+				}, field.id))
+			})] })] }) : null
+		]
+	});
+};
+//#endregion
+export { RichTextToolbar, normalizeHref };
+
+//# sourceMappingURL=toolbar.js.map

package/dist/ui/src/components/edyn/rich-text-editor/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/rich-text-editor/toolbar.tsx"],"sourcesContent":["import { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';\nimport { isAllowedRichTextHref } from '@edyn/ui/components/edyn/rich-text-content/allow-list';\nimport { Button } from '@edyn/ui/components/ui/button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@edyn/ui/components/ui/dropdown-menu';\nimport { Input } from '@edyn/ui/components/ui/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '@edyn/ui/components/ui/popover';\nimport { toggleVariants } from '@edyn/ui/components/ui/toggle';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconBold, IconItalic, IconLink, IconList, IconListNumbers, IconSeparatorHorizontal, IconUnderline, IconVariable } from '@tabler/icons-react';\nimport type { Editor } from '@tiptap/core';\nimport { useEditorState } from '@tiptap/react';\nimport { type FormEvent, type ReactNode, type RefObject, useEffect, useState } from 'react';\nimport type { IRichTextField, IRichTextLabels } from './types';\n\nconst BUTTON_CLASS = cn(toggleVariants({ variant: 'default', size: 'sm' }), 'size-7 px-0');\n\n/** A typed address becomes a link: \"name@example.test\" a mailto, \"example.test\" an https address. */\nexport const normalizeHref = (raw: string): string => {\n  const value = raw.trim();\n  if (value === '' || /^[a-z][a-z0-9+.-]*:/i.test(value)) {\n    return value;\n  }\n  return /^[^\\s@/]+@[^\\s@/]+\\.[^\\s@/]+$/.test(value) ? `mailto:${value}` : `https://${value}`;\n};\n\ninterface IToolbarButtonProps {\n  label: string;\n  pressed?: boolean;\n  disabled?: boolean;\n  onClick?: () => void;\n  children: ReactNode;\n}\n\nconst ToolbarButton = ({ label, pressed, disabled, onClick, children }: IToolbarButtonProps) => (\n  <ToolbarPrimitive.Button\n    type=\"button\"\n    aria-label={label}\n    title={label}\n    aria-pressed={pressed}\n    data-pressed={pressed ? '' : undefined}\n    disabled={disabled}\n    className={BUTTON_CLASS}\n    onMouseDown={(event) => event.preventDefault()}\n    onClick={onClick}\n  >\n    {children}\n  </ToolbarPrimitive.Button>\n);\n\n/** Where the writer's selection was when the link box opened: moving focus into the box must not lose it. */\nexport interface ILinkRange {\n  from: number;\n  to: number;\n}\n\nconst hrefAt = (editor: Editor, range: ILinkRange): string => {\n  const { doc } = editor.state;\n  const marks = range.from < range.to ? (doc.nodeAt(range.from)?.marks ?? []) : doc.resolve(range.from).marks();\n  return String(marks.find((mark) => mark.type.name === 'link')?.attrs.href ?? '');\n};\n\ninterface ILinkControlProps {\n  range: RefObject<ILinkRange | null>;\n  editor: Editor;\n  labels: IRichTextLabels;\n  active: boolean;\n  disabled: boolean;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}\n\nconst LinkControl = ({ range, editor, labels, active, disabled, open, onOpenChange }: ILinkControlProps) => {\n  const [address, setAddress] = useState('');\n  const [invalid, setInvalid] = useState(false);\n\n  useEffect(() => {\n    if (open) {\n      setAddress(range.current ? hrefAt(editor, range.current) : '');\n      setInvalid(false);\n    }\n  }, [editor, open, range]);\n\n  const apply = (event: FormEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const href = normalizeHref(address);\n    if (!isAllowedRichTextHref(href)) {\n      setInvalid(true);\n      return;\n    }\n    const saved = range.current ?? { from: editor.state.selection.from, to: editor.state.selection.to };\n    const chain = editor.chain().focus().setTextSelection(saved);\n    if (saved.from === saved.to && !hrefAt(editor, saved)) {\n      chain.insertContent({ type: 'text', text: href, marks: [{ type: 'link', attrs: { href } }] }).run();\n    } else {\n      chain.extendMarkRange('link').setLink({ href }).run();\n    }\n    onOpenChange(false);\n  };\n\n  const remove = () => {\n    const saved = range.current ?? { from: editor.state.selection.from, to: editor.state.selection.to };\n    editor.chain().focus().setTextSelection(saved).extendMarkRange('link').unsetLink().run();\n    onOpenChange(false);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={onOpenChange}>\n      <PopoverTrigger\n        render={\n          <ToolbarPrimitive.Button\n            type=\"button\"\n            aria-label={labels.link}\n            title={labels.link}\n            aria-pressed={active}\n            data-pressed={active ? '' : undefined}\n            disabled={disabled}\n            className={BUTTON_CLASS}\n          />\n        }\n      >\n        <IconLink aria-hidden />\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-80\">\n        <form className=\"flex flex-col gap-2\" onSubmit={apply}>\n          <Input\n            type=\"text\"\n            inputMode=\"url\"\n            aria-label={labels.linkAddress}\n            aria-invalid={invalid || undefined}\n            value={address}\n            onChange={(event) => {\n              setAddress(event.target.value);\n              setInvalid(false);\n            }}\n          />\n          {invalid ? <p className=\"text-xs text-destructive\">{labels.linkInvalid}</p> : null}\n          <div className=\"flex justify-end gap-2\">\n            {active ? (\n              <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={remove}>\n                {labels.linkRemove}\n              </Button>\n            ) : null}\n            <Button type=\"submit\" size=\"sm\">\n              {labels.linkApply}\n            </Button>\n          </div>\n        </form>\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport interface IRichTextToolbarProps {\n  linkRange: RefObject<ILinkRange | null>;\n  editor: Editor;\n  labels: IRichTextLabels;\n  fields: IRichTextField[] | undefined;\n  disabled: boolean;\n  linkOpen: boolean;\n  onLinkOpenChange: (open: boolean) => void;\n}\n\nexport const RichTextToolbar = ({ linkRange, editor, labels, fields, disabled, linkOpen, onLinkOpenChange }: IRichTextToolbarProps) => {\n  const state = useEditorState({\n    editor,\n    selector: ({ editor: current }) => ({\n      bold: current.isActive('bold'),\n      italic: current.isActive('italic'),\n      underline: current.isActive('underline'),\n      bullets: current.isActive('bulletList'),\n      numbers: current.isActive('orderedList'),\n      link: current.isActive('link'),\n    }),\n  });\n\n  return (\n    <ToolbarPrimitive.Root\n      data-slot=\"rich-text-toolbar\"\n      aria-label={labels.toolbar}\n      className=\"flex flex-wrap items-center gap-0.5 border-b border-input p-1\"\n    >\n      <ToolbarButton label={labels.bold} pressed={state.bold} disabled={disabled} onClick={() => editor.chain().focus().toggleBold().run()}>\n        <IconBold aria-hidden />\n      </ToolbarButton>\n      <ToolbarButton label={labels.italic} pressed={state.italic} disabled={disabled} onClick={() => editor.chain().focus().toggleItalic().run()}>\n        <IconItalic aria-hidden />\n      </ToolbarButton>\n      <ToolbarButton\n        label={labels.underline}\n        pressed={state.underline}\n        disabled={disabled}\n        onClick={() => editor.chain().focus().toggleUnderline().run()}\n      >\n        <IconUnderline aria-hidden />\n      </ToolbarButton>\n      <ToolbarPrimitive.Separator className=\"mx-1 h-4 w-px bg-border\" />\n      <ToolbarButton\n        label={labels.bulletList}\n        pressed={state.bullets}\n        disabled={disabled}\n        onClick={() => editor.chain().focus().toggleBulletList().run()}\n      >\n        <IconList aria-hidden />\n      </ToolbarButton>\n      <ToolbarButton\n        label={labels.numberedList}\n        pressed={state.numbers}\n        disabled={disabled}\n        onClick={() => editor.chain().focus().toggleOrderedList().run()}\n      >\n        <IconListNumbers aria-hidden />\n      </ToolbarButton>\n      <LinkControl\n        range={linkRange}\n        editor={editor}\n        labels={labels}\n        active={state.link}\n        disabled={disabled}\n        open={linkOpen}\n        onOpenChange={onLinkOpenChange}\n      />\n      <ToolbarButton label={labels.horizontalRule} disabled={disabled} onClick={() => editor.chain().focus().setHorizontalRule().run()}>\n        <IconSeparatorHorizontal aria-hidden />\n      </ToolbarButton>\n      {fields && fields.length > 0 ? (\n        <>\n          <ToolbarPrimitive.Separator className=\"mx-1 h-4 w-px bg-border\" />\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={\n                <ToolbarPrimitive.Button\n                  type=\"button\"\n                  aria-label={labels.insertField}\n                  title={labels.insertField}\n                  disabled={disabled}\n                  className={BUTTON_CLASS}\n                />\n              }\n            >\n              <IconVariable aria-hidden />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" className=\"w-56\">\n              {fields.map((field) => (\n                <DropdownMenuItem\n                  key={field.id}\n                  onClick={() =>\n                    editor\n                      .chain()\n                      .focus()\n                      .insertContent({ type: 'text', text: `{{${field.id}}}` })\n                      .run()\n                  }\n                >\n                  {field.label}\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </>\n      ) : null}\n    </ToolbarPrimitive.Root>\n  );\n};\n"],"mappings":"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"}

package/dist/ui/src/components/edyn/rich-text-editor/types.js

@@ -0,0 +1,26 @@
+//#region ../ui/src/components/edyn/rich-text-editor/types.ts
+var DEFAULT_RICH_TEXT_LABELS = {
+	toolbar: "Formatting",
+	bold: "Bold",
+	italic: "Italic",
+	underline: "Underline",
+	bulletList: "Bulleted list",
+	numberedList: "Numbered list",
+	link: "Link",
+	horizontalRule: "Horizontal line",
+	insertField: "Insert a field",
+	linkAddress: "Link address",
+	linkApply: "Apply",
+	linkRemove: "Remove link",
+	linkInvalid: "Enter an http, https or mailto address.",
+	mentionList: "Mentions",
+	mentionSearching: "Searching...",
+	mentionEmpty: "No matches",
+	mentionError: "The search failed",
+	mentionLoadingMore: "Loading more...",
+	mentionResults: "{count} results"
+};
+//#endregion
+export { DEFAULT_RICH_TEXT_LABELS };
+
+//# sourceMappingURL=types.js.map

package/dist/ui/src/components/edyn/rich-text-editor/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/rich-text-editor/types.ts"],"sourcesContent":["/** One person (or anything else) the app offers when the writer types @. */\nexport interface IRichTextMentionItem {\n  /** What the HTML carries. By default the value is written as `@${id}`, so an email address works as an id. */\n  id: string;\n  /** What the chip shows while the text is being edited. */\n  label: string;\n  /** A second, muted line in the list (a role, an email address). */\n  secondary?: string;\n}\n\n/** A page of results. Return a plain array instead when there is only ever one page. */\nexport interface IRichTextMentionPage {\n  items: IRichTextMentionItem[];\n  /** True when asking for `page + 1` would return more. The list loads it when it is scrolled to the end. */\n  hasMore?: boolean;\n}\n\nexport interface IRichTextMentionSearchOptions {\n  /** 1-based. */\n  page: number;\n  /** Aborted when the writer types on or closes the list: pass it to `fetch` so a stale search stops. */\n  signal: AbortSignal;\n}\n\nexport type TRichTextMentionSearch = (\n  query: string,\n  options: IRichTextMentionSearchOptions,\n) => Promise<IRichTextMentionItem[] | IRichTextMentionPage>;\n\nexport interface IRichTextMention {\n  /** Asked for the first page when the writer types @ and again for every change of the text after it, debounced. */\n  search: TRichTextMentionSearch;\n  /**\n   * How a mention is written into the HTML. The chip exists only while editing; the HTML carries this text\n   * and no element. Default: `@${item.id}`.\n   */\n  toText?: (item: Pick<IRichTextMentionItem, 'id' | 'label'>) => string;\n  /** Milliseconds to wait after the last keystroke before searching. Default 250. */\n  debounce?: number;\n}\n\n/** A field of a template (a mail merge token). Inserted as the plain text `{{id}}`. */\nexport interface IRichTextField {\n  id: string;\n  label: string;\n}\n\n/** What a ref to the editor can do, for a button outside it (a merge tag, say). */\nexport interface IRichTextEditorHandle {\n  /** Writes plain text at the caret (over the selection), and puts focus back in the editor. */\n  insertText: (text: string) => void;\n  focus: () => void;\n}\n\n/** Every string the editor shows, so an app can translate them. */\nexport interface IRichTextLabels {\n  toolbar: string;\n  bold: string;\n  italic: string;\n  underline: string;\n  bulletList: string;\n  numberedList: string;\n  link: string;\n  horizontalRule: string;\n  insertField: string;\n  linkAddress: string;\n  linkApply: string;\n  linkRemove: string;\n  linkInvalid: string;\n  mentionList: string;\n  mentionSearching: string;\n  mentionEmpty: string;\n  mentionError: string;\n  mentionLoadingMore: string;\n  /** Announced as the list changes. `{count}` is replaced. */\n  mentionResults: string;\n}\n\nexport const DEFAULT_RICH_TEXT_LABELS: IRichTextLabels = {\n  toolbar: 'Formatting',\n  bold: 'Bold',\n  italic: 'Italic',\n  underline: 'Underline',\n  bulletList: 'Bulleted list',\n  numberedList: 'Numbered list',\n  link: 'Link',\n  horizontalRule: 'Horizontal line',\n  insertField: 'Insert a field',\n  linkAddress: 'Link address',\n  linkApply: 'Apply',\n  linkRemove: 'Remove link',\n  linkInvalid: 'Enter an http, https or mailto address.',\n  mentionList: 'Mentions',\n  mentionSearching: 'Searching...',\n  mentionEmpty: 'No matches',\n  mentionError: 'The search failed',\n  mentionLoadingMore: 'Loading more...',\n  mentionResults: '{count} results',\n};\n"],"mappings":";AA8EA,IAAa,2BAA4C;CACvD,SAAS;CACT,MAAM;CACN,QAAQ;CACR,WAAW;CACX,YAAY;CACZ,cAAc;CACd,MAAM;CACN,gBAAgB;CAChB,aAAa;CACb,aAAa;CACb,WAAW;CACX,YAAY;CACZ,aAAa;CACb,aAAa;CACb,kBAAkB;CAClB,cAAc;CACd,cAAc;CACd,oBAAoB;CACpB,gBAAgB;AAClB"}

package/dist/ui/src/components/edyn/video-player/video-player.js

@@ -0,0 +1,132 @@
+import { cn, cssLength } from "../../../lib/utils.js";
+import { Button } from "../../ui/button/button.js";
+import { Slider } from "../../ui/slider/slider.js";
+import { formatMediaTime, useMediaPlayer } from "../../../hooks/use-media-player.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconMaximize, IconPlayerPauseFilled, IconPlayerPlayFilled, IconVolume, IconVolumeOff } from "@tabler/icons-react";
+//#region ../ui/src/components/edyn/video-player/video-player.tsx
+/**
+* Media surface with an overlaid control bar: title and description, elapsed and
+* total time, a seekable scrubber, play/pause, volume, and fullscreen.
+*
+* The root carries the `dark` class so its tokens resolve to the dark palette in
+* both themes. Video is dark, so the letterbox and controls must stay dark and
+* light-on-dark; this re-scopes existing tokens rather than hardcoding a colour.
+*/
+var VideoPlayer = ({ src, poster, title, description, muted = false, loop = false, disabled = false, width, height, ratio = "auto", className, "aria-label": ariaLabel = "Video player", style, onPlay, onPause, onEnded, onTimeUpdate, ...props }) => {
+	const { refMedia, playing, currentTime, duration, muted: isMuted, toggle, seek, toggleMute } = useMediaPlayer({
+		onPlay,
+		onPause,
+		onEnded,
+		onTimeUpdate
+	});
+	const refContainer = React.useRef(null);
+	const PlaybackIcon = playing ? IconPlayerPauseFilled : IconPlayerPlayFilled;
+	const VolumeIcon = isMuted ? IconVolumeOff : IconVolume;
+	const isSizedBox = height != null || ratio !== "auto";
+	const requestFullscreen = () => {
+		const container = refContainer.current;
+		if (!container) return;
+		if (document.fullscreenElement) {
+			document.exitFullscreen().catch(() => void 0);
+			return;
+		}
+		container.requestFullscreen?.().catch(() => void 0);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: refContainer,
+		"data-slot": "video-player",
+		...props,
+		"data-playing": playing || void 0,
+		style: {
+			width: cssLength(width),
+			height: cssLength(height),
+			aspectRatio: height == null && ratio !== "auto" ? ratio : void 0,
+			...style
+		},
+		className: cn("dark relative isolate w-full overflow-hidden rounded-lg bg-background", className),
+		children: [/* @__PURE__ */ jsx("video", {
+			ref: refMedia,
+			src,
+			poster,
+			muted,
+			loop,
+			playsInline: true,
+			preload: "metadata",
+			"aria-label": ariaLabel,
+			className: cn("w-full bg-background", isSizedBox ? "h-full object-contain" : "h-auto")
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-0.5 bg-gradient-to-t from-background via-background/75 to-transparent px-3 pt-12 pb-2 text-foreground",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "pointer-events-auto flex items-end justify-between gap-4",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0",
+						children: [title ? /* @__PURE__ */ jsx("p", {
+							className: "truncate text-sm font-medium text-foreground",
+							children: title
+						}) : null, description ? /* @__PURE__ */ jsx("p", {
+							className: "truncate text-xs text-foreground/70",
+							children: description
+						}) : null]
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "shrink-0 text-xs tabular-nums text-foreground/70",
+						children: [
+							formatMediaTime(currentTime),
+							" / ",
+							formatMediaTime(duration)
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsx(Slider, {
+					className: "pointer-events-auto [&_[data-slot=slider-control]]:py-1.5 [&_[data-slot=slider-thumb]]:size-3 [&_[data-slot=slider-track]]:h-1",
+					value: Math.min(currentTime, duration || 0),
+					min: 0,
+					max: duration || 0,
+					step: 1,
+					disabled: disabled || duration === 0,
+					"aria-label": "Seek",
+					onValueChange: (next) => {
+						seek(next);
+					}
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "pointer-events-auto flex items-center justify-between",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1",
+						children: [/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon",
+							disabled,
+							"aria-label": playing ? "Pause" : "Play",
+							onClick: toggle,
+							children: /* @__PURE__ */ jsx(PlaybackIcon, {})
+						}), /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon",
+							disabled,
+							"aria-label": isMuted ? "Unmute" : "Mute",
+							onClick: toggleMute,
+							children: /* @__PURE__ */ jsx(VolumeIcon, {})
+						})]
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon",
+						disabled,
+						"aria-label": "Fullscreen",
+						onClick: requestFullscreen,
+						children: /* @__PURE__ */ jsx(IconMaximize, {})
+					})]
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { VideoPlayer };
+
+//# sourceMappingURL=video-player.js.map

package/dist/ui/src/components/edyn/video-player/video-player.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-player.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/video-player/video-player.tsx"],"sourcesContent":["import { Button } from '@edyn/ui/components/ui/button';\nimport { Slider } from '@edyn/ui/components/ui/slider';\nimport { formatMediaTime, useMediaPlayer } from '@edyn/ui/hooks/use-media-player';\nimport type { TCssLength } from '@edyn/ui/lib/utils';\nimport { cn, cssLength } from '@edyn/ui/lib/utils';\nimport { IconMaximize, IconPlayerPauseFilled, IconPlayerPlayFilled, IconVolume, IconVolumeOff } from '@tabler/icons-react';\nimport * as React from 'react';\n\nexport interface IVideoPlayerProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'className' | 'title' | 'onPlay' | 'onPause' | 'onEnded' | 'onTimeUpdate'> {\n  /** Video source URL. */\n  src?: string;\n  /** Still frame shown before playback starts. */\n  poster?: string;\n  /** Primary label rendered in the control overlay. */\n  title?: string;\n  /** Secondary label rendered under the title. */\n  description?: string;\n  /** Start muted. Required by browsers for unattended autoplay. */\n  muted?: boolean;\n  /** Loop playback when the video ends. */\n  loop?: boolean;\n  /** Disable every control without hiding the player. */\n  disabled?: boolean;\n  /**\n   * Box width. A number is px, a string is any CSS length (`'100%'`, `'34rem'`).\n   * Omitted, the player fills the width it is given.\n   */\n  width?: TCssLength;\n  /**\n   * Box height. A number is px, a string is any CSS length. Omitted, the height\n   * comes from `ratio`. Setting this letterboxes a source that does not match.\n   */\n  height?: TCssLength;\n  /**\n   * Aspect ratio of the media box, as a CSS `aspect-ratio` value (`'16/9'`).\n   *\n   * Defaults to `auto`, so the height follows the source's own dimensions and a\n   * portrait or 4:3 clip is shown whole rather than letterboxed. Pair `auto`\n   * with a `poster`: a `<video>` reports a 300x150 intrinsic size until metadata\n   * arrives, and the poster's dimensions stand in for it, which is what stops\n   * the box from resizing when the first frame lands.\n   *\n   * Ignored when `height` is set.\n   */\n  ratio?: string;\n  className?: string;\n  'aria-label'?: string;\n  onPlay?: () => void;\n  onPause?: () => void;\n  onEnded?: () => void;\n  onTimeUpdate?: (currentTime: number, duration: number) => void;\n}\n\n/**\n * Media surface with an overlaid control bar: title and description, elapsed and\n * total time, a seekable scrubber, play/pause, volume, and fullscreen.\n *\n * The root carries the `dark` class so its tokens resolve to the dark palette in\n * both themes. Video is dark, so the letterbox and controls must stay dark and\n * light-on-dark; this re-scopes existing tokens rather than hardcoding a colour.\n */\nexport const VideoPlayer = ({\n  src,\n  poster,\n  title,\n  description,\n  muted = false,\n  loop = false,\n  disabled = false,\n  width,\n  height,\n  ratio = 'auto',\n  className,\n  'aria-label': ariaLabel = 'Video player',\n  style,\n  onPlay,\n  onPause,\n  onEnded,\n  onTimeUpdate,\n  ...props\n}: IVideoPlayerProps) => {\n  const {\n    refMedia,\n    playing,\n    currentTime,\n    duration,\n    muted: isMuted,\n    toggle,\n    seek,\n    toggleMute,\n  } = useMediaPlayer<HTMLVideoElement>({ onPlay, onPause, onEnded, onTimeUpdate });\n  const refContainer = React.useRef<HTMLDivElement>(null);\n\n  const PlaybackIcon = playing ? IconPlayerPauseFilled : IconPlayerPlayFilled;\n  const VolumeIcon = isMuted ? IconVolumeOff : IconVolume;\n\n  // An explicit height wins over the ratio, and either one turns the root into\n  // the sized box with the media fitted inside it. Without both, the media is\n  // the only thing in flow and the root takes its height.\n  const isSizedBox = height != null || ratio !== 'auto';\n\n  const requestFullscreen = () => {\n    const container = refContainer.current;\n    if (!container) {\n      return;\n    }\n    if (document.fullscreenElement) {\n      void document.exitFullscreen().catch(() => undefined);\n      return;\n    }\n    void container.requestFullscreen?.().catch(() => undefined);\n  };\n\n  return (\n    <div\n      ref={refContainer}\n      data-slot=\"video-player\"\n      {...props}\n      data-playing={playing || undefined}\n      style={{\n        width: cssLength(width),\n        height: cssLength(height),\n        aspectRatio: height == null && ratio !== 'auto' ? ratio : undefined,\n        ...style,\n      }}\n      className={cn('dark relative isolate w-full overflow-hidden rounded-lg bg-background', className)}\n    >\n      <video\n        ref={refMedia}\n        src={src}\n        poster={poster}\n        muted={muted}\n        loop={loop}\n        playsInline\n        preload=\"metadata\"\n        aria-label={ariaLabel}\n        className={cn('w-full bg-background', isSizedBox ? 'h-full object-contain' : 'h-auto')}\n      />\n\n      {/* The scrim must carry the controls over arbitrarily bright footage, so it ramps to a solid base rather than fading to 90%. */}\n      {/* `text-foreground` is explicit: the `dark` class re-scopes the token VALUES, but `color` itself\n          still inherits from the surrounding page, so without this the controls stay page-dark on video. */}\n      <div className=\"pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-0.5 bg-gradient-to-t from-background via-background/75 to-transparent px-3 pt-12 pb-2 text-foreground\">\n        <div className=\"pointer-events-auto flex items-end justify-between gap-4\">\n          <div className=\"min-w-0\">\n            {title ? <p className=\"truncate text-sm font-medium text-foreground\">{title}</p> : null}\n            {description ? <p className=\"truncate text-xs text-foreground/70\">{description}</p> : null}\n          </div>\n          <span className=\"shrink-0 text-xs tabular-nums text-foreground/70\">\n            {formatMediaTime(currentTime)} / {formatMediaTime(duration)}\n          </span>\n        </div>\n\n        {/* Scope the form-sized Slider down to a scrubber: thinner track, smaller thumb, less vertical padding. */}\n        <Slider\n          className=\"pointer-events-auto [&_[data-slot=slider-control]]:py-1.5 [&_[data-slot=slider-thumb]]:size-3 [&_[data-slot=slider-track]]:h-1\"\n          value={Math.min(currentTime, duration || 0)}\n          min={0}\n          max={duration || 0}\n          step={1}\n          disabled={disabled || duration === 0}\n          aria-label=\"Seek\"\n          onValueChange={(next) => {\n            seek(next);\n          }}\n        />\n\n        <div className=\"pointer-events-auto flex items-center justify-between\">\n          <div className=\"flex items-center gap-1\">\n            <Button type=\"button\" variant=\"ghost\" size=\"icon\" disabled={disabled} aria-label={playing ? 'Pause' : 'Play'} onClick={toggle}>\n              <PlaybackIcon />\n            </Button>\n            <Button type=\"button\" variant=\"ghost\" size=\"icon\" disabled={disabled} aria-label={isMuted ? 'Unmute' : 'Mute'} onClick={toggleMute}>\n              <VolumeIcon />\n            </Button>\n          </div>\n          <Button type=\"button\" variant=\"ghost\" size=\"icon\" disabled={disabled} aria-label=\"Fullscreen\" onClick={requestFullscreen}>\n            <IconMaximize />\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AA8DA,IAAa,eAAe,EAC1B,KACA,QACA,OACA,aACA,QAAQ,OACR,OAAO,OACP,WAAW,OACX,OACA,QACA,QAAQ,QACR,WACA,cAAc,YAAY,gBAC1B,OACA,QACA,SACA,SACA,cACA,GAAG,YACoB;CACvB,MAAM,EACJ,UACA,SACA,aACA,UACA,OAAO,SACP,QACA,MACA,eACE,eAAiC;EAAE;EAAQ;EAAS;EAAS;CAAa,CAAC;CAC/E,MAAM,eAAe,MAAM,OAAuB,IAAI;CAEtD,MAAM,eAAe,UAAU,wBAAwB;CACvD,MAAM,aAAa,UAAU,gBAAgB;CAK7C,MAAM,aAAa,UAAU,QAAQ,UAAU;CAE/C,MAAM,0BAA0B;EAC9B,MAAM,YAAY,aAAa;EAC/B,IAAI,CAAC,WACH;EAEF,IAAI,SAAS,mBAAmB;GAC9B,SAAc,eAAe,CAAC,CAAC,YAAY,KAAA,CAAS;GACpD;EACF;EACA,UAAe,oBAAoB,CAAC,CAAC,YAAY,KAAA,CAAS;CAC5D;CAEA,OACE,qBAAC,OAAD;EACE,KAAK;EACL,aAAU;EACV,GAAI;EACJ,gBAAc,WAAW,KAAA;EACzB,OAAO;GACL,OAAO,UAAU,KAAK;GACtB,QAAQ,UAAU,MAAM;GACxB,aAAa,UAAU,QAAQ,UAAU,SAAS,QAAQ,KAAA;GAC1D,GAAG;EACL;EACA,WAAW,GAAG,yEAAyE,SAAS;EAXlG,UAAA,CAaE,oBAAC,SAAD;GACE,KAAK;GACA;GACG;GACD;GACD;GACN,aAAA;GACA,SAAQ;GACR,cAAY;GACZ,WAAW,GAAG,wBAAwB,aAAa,0BAA0B,QAAQ;EACtF,CAAA,GAKD,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACG,QAAQ,oBAAC,KAAD;OAAG,WAAU;OAAgD,UAAA;MAAS,CAAA,IAAI,MAClF,cAAc,oBAAC,KAAD;OAAG,WAAU;OAAuC,UAAA;MAAe,CAAA,IAAI,IACnF;KACL,CAAA,GAAA,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OACG,gBAAgB,WAAW;OAAE;OAAI,gBAAgB,QAAQ;MACtD;KACH,CAAA,CAAA;;IAGL,oBAAC,QAAD;KACE,WAAU;KACV,OAAO,KAAK,IAAI,aAAa,YAAY,CAAC;KAC1C,KAAK;KACL,KAAK,YAAY;KACjB,MAAM;KACN,UAAU,YAAY,aAAa;KACnC,cAAW;KACX,gBAAgB,SAAS;MACvB,KAAK,IAAI;KACX;IACD,CAAA;IAED,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,oBAAC,QAAD;OAAQ,MAAK;OAAS,SAAQ;OAAQ,MAAK;OAAiB;OAAU,cAAY,UAAU,UAAU;OAAQ,SAAS;OACrH,UAAA,oBAAC,cAAD,CAAe,CAAA;MACT,CAAA,GACR,oBAAC,QAAD;OAAQ,MAAK;OAAS,SAAQ;OAAQ,MAAK;OAAiB;OAAU,cAAY,UAAU,WAAW;OAAQ,SAAS;OACtH,UAAA,oBAAC,YAAD,CAAa,CAAA;MACP,CAAA,CACL;KACL,CAAA,GAAA,oBAAC,QAAD;MAAQ,MAAK;MAAS,SAAQ;MAAQ,MAAK;MAAiB;MAAU,cAAW;MAAa,SAAS;MACrG,UAAA,oBAAC,cAAD,CAAe,CAAA;KACT,CAAA,CACL;;GACF;EACF,CAAA,CAAA;;AAET"}

package/dist/ui/src/components/ui/accordion/accordion.js

@@ -0,0 +1,83 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Accordion } from "@base-ui/react/accordion";
+//#region ../ui/src/components/ui/accordion/accordion.tsx
+var Accordion$1 = ({ value, defaultValue, onValueChange, multiple = false, className, children, ...props }) => /* @__PURE__ */ jsx(Accordion.Root, {
+	"data-slot": "accordion",
+	...props,
+	value,
+	defaultValue,
+	onValueChange: (next) => {
+		onValueChange?.(next);
+	},
+	multiple,
+	className: cn("w-full", className),
+	children
+});
+var AccordionItem = ({ value, disabled, className, children, ...props }) => /* @__PURE__ */ jsx(Accordion.Item, {
+	"data-slot": "accordion-item",
+	...props,
+	value,
+	disabled,
+	className: cn("border-b border-border", className),
+	children
+});
+var focusSiblingTrigger = (event) => {
+	if (![
+		"ArrowDown",
+		"ArrowUp",
+		"Home",
+		"End"
+	].includes(event.key)) return;
+	const root = event.currentTarget.closest("[data-slot=\"accordion\"]");
+	const triggers = Array.from(root?.querySelectorAll("[data-slot=\"accordion-trigger\"]:not(:disabled)") ?? []);
+	const currentIndex = triggers.indexOf(event.currentTarget);
+	if (currentIndex < 0 || triggers.length === 0) return;
+	event.preventDefault();
+	let nextIndex = currentIndex;
+	if (event.key === "Home") nextIndex = 0;
+	else if (event.key === "End") nextIndex = triggers.length - 1;
+	else if (event.key === "ArrowDown") nextIndex = (currentIndex + 1) % triggers.length;
+	else if (event.key === "ArrowUp") nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;
+	triggers[nextIndex]?.focus();
+};
+var AccordionTrigger = ({ className, children, ...props }) => /* @__PURE__ */ jsx(Accordion.Header, {
+	"data-slot": "accordion-header",
+	className: "flex",
+	children: /* @__PURE__ */ jsxs(Accordion.Trigger, {
+		"data-slot": "accordion-trigger",
+		...props,
+		onKeyDown: focusSiblingTrigger,
+		className: cn("flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline", className),
+		children: [children, /* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			width: "24",
+			height: "24",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			className: "size-4 shrink-0 text-muted-foreground",
+			"data-expand-chevron": "flip",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+		})]
+	})
+});
+var AccordionContent = ({ className, children, ...props }) => /* @__PURE__ */ jsx(Accordion.Panel, {
+	keepMounted: true,
+	"data-slot": "accordion-content",
+	...props,
+	"data-focus": "inset",
+	className: cn("text-sm", className),
+	children: /* @__PURE__ */ jsx("div", {
+		className: "pb-4 pt-0",
+		children
+	})
+});
+//#endregion
+export { Accordion$1 as Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+
+//# sourceMappingURL=accordion.js.map

package/dist/ui/src/components/ui/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","names":[],"sources":["../../../../../../../ui/src/components/ui/accordion/accordion.tsx"],"sourcesContent":["import { Accordion as BaseAccordion } from '@base-ui/react/accordion';\nimport { cn } from '@edyn/ui/lib/utils';\nimport type * as React from 'react';\n\nexport interface IAccordionProps\n  extends Omit<BaseAccordion.Root.Props, 'value' | 'defaultValue' | 'onValueChange' | 'multiple' | 'className' | 'children'> {\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n  multiple?: boolean;\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const Accordion = ({ value, defaultValue, onValueChange, multiple = false, className, children, ...props }: IAccordionProps) => (\n  <BaseAccordion.Root\n    data-slot=\"accordion\"\n    {...props}\n    value={value}\n    defaultValue={defaultValue}\n    onValueChange={(next) => {\n      onValueChange?.(next as string[]);\n    }}\n    multiple={multiple}\n    className={cn('w-full', className)}\n  >\n    {children}\n  </BaseAccordion.Root>\n);\n\nexport interface IAccordionItemProps extends Omit<BaseAccordion.Item.Props, 'value' | 'disabled' | 'className' | 'children'> {\n  value: string;\n  disabled?: boolean;\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const AccordionItem = ({ value, disabled, className, children, ...props }: IAccordionItemProps) => (\n  <BaseAccordion.Item data-slot=\"accordion-item\" {...props} value={value} disabled={disabled} className={cn('border-b border-border', className)}>\n    {children}\n  </BaseAccordion.Item>\n);\n\nexport interface IAccordionTriggerProps extends Omit<BaseAccordion.Trigger.Props, 'className' | 'children'> {\n  className?: string;\n  children: React.ReactNode;\n}\n\nconst focusSiblingTrigger = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n  const keys = ['ArrowDown', 'ArrowUp', 'Home', 'End'];\n  if (!keys.includes(event.key)) {\n    return;\n  }\n\n  const root = event.currentTarget.closest('[data-slot=\"accordion\"]');\n  const triggers = Array.from(root?.querySelectorAll<HTMLButtonElement>('[data-slot=\"accordion-trigger\"]:not(:disabled)') ?? []);\n  const currentIndex = triggers.indexOf(event.currentTarget);\n  if (currentIndex < 0 || triggers.length === 0) {\n    return;\n  }\n\n  event.preventDefault();\n  let nextIndex = currentIndex;\n  if (event.key === 'Home') {\n    nextIndex = 0;\n  } else if (event.key === 'End') {\n    nextIndex = triggers.length - 1;\n  } else if (event.key === 'ArrowDown') {\n    nextIndex = (currentIndex + 1) % triggers.length;\n  } else if (event.key === 'ArrowUp') {\n    nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;\n  }\n  triggers[nextIndex]?.focus();\n};\n\nexport const AccordionTrigger = ({ className, children, ...props }: IAccordionTriggerProps) => (\n  <BaseAccordion.Header data-slot=\"accordion-header\" className=\"flex\">\n    <BaseAccordion.Trigger\n      data-slot=\"accordion-trigger\"\n      {...props}\n      onKeyDown={focusSiblingTrigger}\n      className={cn('flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline', className)}\n    >\n      {children}\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"size-4 shrink-0 text-muted-foreground\"\n        data-expand-chevron=\"flip\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </BaseAccordion.Trigger>\n  </BaseAccordion.Header>\n);\n\nexport interface IAccordionContentProps extends Omit<BaseAccordion.Panel.Props, 'className' | 'children'> {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const AccordionContent = ({ className, children, ...props }: IAccordionContentProps) => (\n  <BaseAccordion.Panel\n    keepMounted\n    data-slot=\"accordion-content\"\n    {...props}\n    data-focus=\"inset\"\n    // The height transition between Base UI's measured --accordion-panel-height\n    // and 0 is what it detects and orchestrates; it lives in @edyn/theme/motion.css\n    // so Collapsible and Accordion share one motion.\n    className={cn('text-sm', className)}\n  >\n    <div className=\"pb-4 pt-0\">{children}</div>\n  </BaseAccordion.Panel>\n);\n"],"mappings":";;;;AAcA,IAAa,eAAa,EAAE,OAAO,cAAc,eAAe,WAAW,OAAO,WAAW,UAAU,GAAG,YACxG,oBAAC,UAAc,MAAf;CACE,aAAU;CACV,GAAI;CACG;CACO;CACd,gBAAgB,SAAS;EACvB,gBAAgB,IAAgB;CAClC;CACU;CACV,WAAW,GAAG,UAAU,SAAS;CAEhC;AACiB,CAAA;AAUtB,IAAa,iBAAiB,EAAE,OAAO,UAAU,WAAW,UAAU,GAAG,YACvE,oBAAC,UAAc,MAAf;CAAoB,aAAU;CAAiB,GAAI;CAAc;CAAiB;CAAU,WAAW,GAAG,0BAA0B,SAAS;CAC1I;AACiB,CAAA;AAQtB,IAAM,uBAAuB,UAAwD;CAEnF,IAAI,CAAC;EADS;EAAa;EAAW;EAAQ;CACzC,CAAA,CAAK,SAAS,MAAM,GAAG,GAC1B;CAGF,MAAM,OAAO,MAAM,cAAc,QAAQ,2BAAyB;CAClE,MAAM,WAAW,MAAM,KAAK,MAAM,iBAAoC,kDAAgD,KAAK,CAAC,CAAC;CAC7H,MAAM,eAAe,SAAS,QAAQ,MAAM,aAAa;CACzD,IAAI,eAAe,KAAK,SAAS,WAAW,GAC1C;CAGF,MAAM,eAAe;CACrB,IAAI,YAAY;CAChB,IAAI,MAAM,QAAQ,QAChB,YAAY;MACP,IAAI,MAAM,QAAQ,OACvB,YAAY,SAAS,SAAS;MACzB,IAAI,MAAM,QAAQ,aACvB,aAAa,eAAe,KAAK,SAAS;MACrC,IAAI,MAAM,QAAQ,WACvB,aAAa,eAAe,IAAI,SAAS,UAAU,SAAS;CAE9D,SAAS,UAAU,EAAE,MAAM;AAC7B;AAEA,IAAa,oBAAoB,EAAE,WAAW,UAAU,GAAG,YACzD,oBAAC,UAAc,QAAf;CAAsB,aAAU;CAAmB,WAAU;CAC3D,UAAA,qBAAC,UAAc,SAAf;EACE,aAAU;EACV,GAAI;EACJ,WAAW;EACX,WAAW,GAAG,oGAAoG,SAAS;EAJ7H,UAAA,CAMG,UACD,oBAAC,OAAD;GACE,OAAM;GACN,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,WAAU;GACV,uBAAoB;GACpB,eAAY;GAEZ,UAAA,oBAAC,QAAD,EAAM,GAAE,eAAgB,CAAA;EACrB,CAAA,CACgB;;AACH,CAAA;AAQxB,IAAa,oBAAoB,EAAE,WAAW,UAAU,GAAG,YACzD,oBAAC,UAAc,OAAf;CACE,aAAA;CACA,aAAU;CACV,GAAI;CACJ,cAAW;CAIX,WAAW,GAAG,WAAW,SAAS;CAElC,UAAA,oBAAC,OAAD;EAAK,WAAU;EAAa;CAAc,CAAA;AACvB,CAAA"}

package/dist/ui/src/components/ui/alert/alert.js

@@ -0,0 +1,47 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region ../ui/src/components/ui/alert/alert.tsx
+var alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
+	variants: { variant: {
+		default: "bg-card text-card-foreground",
+		destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive *:[svg]:text-current",
+		success: "bg-card text-success *:data-[slot=alert-description]:text-success *:[svg]:text-current",
+		warning: "bg-card text-warning *:data-[slot=alert-description]:text-warning *:[svg]:text-current",
+		info: "bg-card text-info *:data-[slot=alert-description]:text-info *:[svg]:text-current"
+	} },
+	defaultVariants: { variant: "default" }
+});
+var Alert = ({ className, variant, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert",
+		role: "alert",
+		className: cn(alertVariants({ variant }), className),
+		...props
+	});
+};
+var AlertTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-title",
+		className: cn("font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground", className),
+		...props
+	});
+};
+var AlertDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-description",
+		className: cn("text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className),
+		...props
+	});
+};
+var AlertAction = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-action",
+		className: cn("absolute top-2.5 right-2", className),
+		...props
+	});
+};
+//#endregion
+export { Alert, AlertAction, AlertDescription, AlertTitle };
+
+//# sourceMappingURL=alert.js.map

package/dist/ui/src/components/ui/alert/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","names":[],"sources":["../../../../../../../ui/src/components/ui/alert/alert.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nconst alertVariants = cva(\n  \"group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: 'bg-card text-card-foreground',\n        destructive: 'bg-card text-destructive *:data-[slot=alert-description]:text-destructive *:[svg]:text-current',\n        success: 'bg-card text-success *:data-[slot=alert-description]:text-success *:[svg]:text-current',\n        warning: 'bg-card text-warning *:data-[slot=alert-description]:text-warning *:[svg]:text-current',\n        info: 'bg-card text-info *:data-[slot=alert-description]:text-info *:[svg]:text-current',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nexport const Alert = ({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) => {\n  return <div data-slot=\"alert\" role=\"alert\" className={cn(alertVariants({ variant }), className)} {...props} />;\n};\n\nexport const AlertTitle = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn('font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground', className)}\n      {...props}\n    />\n  );\n};\n\nexport const AlertDescription = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        'text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const AlertAction = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"alert-action\" className={cn('absolute top-2.5 right-2', className)} {...props} />;\n};\n"],"mappings":";;;;AAIA,IAAM,gBAAgB,IACpB,6TACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,aAAa;EACb,SAAS;EACT,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAEA,IAAa,SAAS,EAAE,WAAW,SAAS,GAAG,YAA8E;CAC3H,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAQ,MAAK;EAAQ,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC/G;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyC;CAClF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uHAAuH,SAAS;EAC9I,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAAyC;CACxF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,8JACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,4BAA4B,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzG"}