@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/primitives/context-menu/menu/Menu.styles.js

@@ -0,0 +1,21 @@
+import { css } from "../../../../r-html/dist/template/css.js";
+//#region src/components/primitives/context-menu/menu/Menu.styles.ts
+var menu = css`
+  display: flex;
+  align-items: center;
+  width: 100%;
+`;
+var icon = css`
+  display: flex;
+  align-items: center;
+  min-width: 14px;
+  margin-inline-end: 8px;
+`;
+var right = css`
+  display: flex;
+  align-items: center;
+  margin-inline-start: auto;
+  padding-inline-start: 24px;
+`;
+//#endregion
+export { icon, menu, right };

package/dist/components/primitives/context-menu/submenu-chevron/SubmenuChevron.js

@@ -0,0 +1,10 @@
+import { html } from "../../../../r-html/dist/render/index.js";
+import { useI18n } from "../../../localeContext.js";
+import Icon from "../../icon/Icon.js";
+//#region src/components/primitives/context-menu/submenu-chevron/SubmenuChevron.tsx
+var SubmenuChevron = (props, ctx) => {
+	const i18n = useI18n(ctx);
+	return () => html`<${Icon} .name="chevron-right" .size=${14} .rotate=${i18n.value.dir === "rtl" ? 180 : 0} />`;
+};
+//#endregion
+export { SubmenuChevron as default };

package/dist/components/primitives/dialog/Dialog.js

@@ -0,0 +1,75 @@
+import { isComposing } from "../../../utils/keyboard-shortcut/index.js";
+import { onMounted, onUnmounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { nextTick } from "../../../r-html/dist/observable/scheduler.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { onStop } from "../../../utils/domEvent.js";
+import { focusEvent } from "../../../utils/internalEvents.js";
+import { content, root } from "./Dialog.styles.js";
+//#region src/components/primitives/dialog/Dialog.tsx
+var AUTOFOCUS_ATTRIBUTE = "data-autofocus";
+var FOCUSABLE = [
+	"button:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[href]",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(",");
+var Dialog = (props, ctx) => {
+	const content$1 = createRef();
+	let pressedOnDim = false;
+	const isOnDim = (event) => {
+		const target = event.target;
+		return Boolean(target) && !content$1.value?.contains(target);
+	};
+	const handleMousedown = (event) => {
+		event.stopPropagation();
+		pressedOnDim = isOnDim(event);
+	};
+	const handleOutsideClick = (event) => {
+		const closes = pressedOnDim && isOnDim(event);
+		pressedOnDim = false;
+		if (closes) props.onClose();
+	};
+	const keepTabInside = (event) => {
+		const $content = content$1.value;
+		const controls = $content.querySelectorAll(FOCUSABLE);
+		const first = controls[0] ?? $content;
+		const last = controls[controls.length - 1] ?? $content;
+		const { activeElement } = $content.getRootNode();
+		if (!(event.shiftKey ? activeElement === first || activeElement === $content : activeElement === last)) return;
+		event.preventDefault();
+		(event.shiftKey ? last : first).focus();
+	};
+	const handleKeydown = (event) => {
+		if (event.key === "Escape" && !isComposing(event)) {
+			event.preventDefault();
+			event.stopPropagation();
+			props.onClose();
+			return;
+		}
+		if (event.key === "Tab") {
+			keepTabInside(event);
+			return;
+		}
+		if (event.code === "Space") event.stopPropagation();
+	};
+	onMounted(() => {
+		const $content = content$1.value;
+		($content?.querySelector(`[data-autofocus]`) ?? $content)?.focus();
+	});
+	onUnmounted(() => {
+		const host = ctx.host;
+		nextTick(() => {
+			host.dispatchEvent(focusEvent());
+		});
+	});
+	return () => html`<div class=${root} @click=${handleOutsideClick} @contextmenu=${onStop} @mousedown=${handleMousedown} @touchstart=${onStop} @wheel=${onStop} @keydown=${handleKeydown}><div ${ref(content$1)} class=${[
+		"dialog",
+		"scrollbar",
+		content
+	]} style=${{ "max-width": `${props.maxWidth}px` }} role="dialog" aria-modal="true" aria-label=${props.label} tabindex="-1">${props.children}</div></div>`;
+};
+//#endregion
+export { AUTOFOCUS_ATTRIBUTE, Dialog as default };

package/dist/components/primitives/dialog/Dialog.styles.js

@@ -0,0 +1,35 @@
+import { css } from "../../../r-html/dist/template/css.js";
+import { floatingShadow } from "../../../styles/elevation.styles.js";
+//#region src/components/primitives/dialog/Dialog.styles.ts
+var root = css`
+  position: absolute;
+  inset: 0;
+  z-index: 2147483646;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+`;
+var content = css`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: 100%;
+  position: relative;
+  z-index: 1;
+  background-color: var(--context-menu-background);
+  border: 1px solid var(--context-menu-border);
+  border-radius: 6px;
+  ${floatingShadow};
+  overflow: auto;
+  outline: none;
+`;
+//#endregion
+export { content, root };

package/dist/components/primitives/edit-input/EditInput.js

@@ -0,0 +1,68 @@
+import { onBeforeMount, onMounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { watch } from "../../../r-html/dist/observable/index.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { restAttrs } from "../../../utils/attribute.js";
+import { focusEvent } from "../../../utils/internalEvents.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { lastCursorFocus } from "../../../utils/focus.js";
+import { cursor, ellipsis, root, userSelect } from "./EditInput.styles.js";
+//#region src/components/primitives/edit-input/EditInput.tsx
+var EditInput = (props, ctx) => {
+	const input = createRef();
+	const { addUnsubscribe } = useUnmounted();
+	const className = () => {
+		const notEdit = !props.edit;
+		return {
+			placeholder: notEdit && !props.value.trim(),
+			focus: notEdit && props.focus,
+			edit: props.edit
+		};
+	};
+	const handleBlur = (event) => {
+		props.onBlur?.(event);
+		ctx.host.dispatchEvent(focusEvent());
+	};
+	onBeforeMount(() => {
+		addUnsubscribe(watch(props).subscribe((propName) => {
+			const $input = input.value;
+			if (propName !== "edit" || !props.edit || !$input) return;
+			lastCursorFocus($input);
+		}), watch(props).subscribe((propName) => {
+			if (propName !== "edit") return;
+			if (!props.edit) ctx.host.dispatchEvent(focusEvent());
+		}));
+	});
+	onMounted(() => {
+		const $input = input.value;
+		if (!props.autofocus || !$input) return;
+		lastCursorFocus($input);
+	});
+	return () => {
+		const isFocus = props.focus || props.edit;
+		return props.edit ? html`<input ${ref(input)} class=${[
+			"edit-input",
+			root,
+			className(),
+			props.class
+		]} style=${{
+			width: `${props.width}px`,
+			"min-width": `${props.width}px`
+		}} ...${restAttrs({
+			title: props.title,
+			placeholder: props.placeholder
+		})} type="text" spellcheck="false" ?data-focus-border-bottom=${isFocus} .value=${props.value ?? ""} @input=${props.onInput} @blur=${handleBlur} @keydown=${props.onKeydown} />` : html`<div class=${[
+			"edit-input",
+			root,
+			cursor,
+			userSelect,
+			className(),
+			props.class
+		]} style=${{
+			width: `${props.width}px`,
+			"min-width": `${props.width}px`
+		}} ...${restAttrs({ title: props.title })} ?data-focus-border-bottom=${isFocus}><span class=${ellipsis}>${props.value.trim() ? props.value : props.placeholder}</span></div>`;
+	};
+};
+//#endregion
+export { EditInput as default };

package/dist/components/primitives/edit-input/EditInput.styles.js

@@ -0,0 +1,40 @@
+import { css } from "../../../r-html/dist/template/css.js";
+import { typography } from "../../../styles/typography.styles.js";
+//#region src/components/primitives/edit-input/EditInput.styles.ts
+var root = css`
+  display: inline-flex;
+  height: 20px;
+  box-sizing: border-box;
+  align-items: center;
+  vertical-align: middle;
+  color: var(--active);
+  background-color: transparent;
+  border-bottom: solid transparent 1.5px;
+  ${typography.paragraph};
+  line-height: normal;
+
+  &.placeholder {
+    color: var(--placeholder);
+  }
+
+  &.focus {
+    border-bottom: solid var(--focus) 1.5px;
+  }
+
+  &.edit {
+    border-bottom: solid var(--input-active) 1.5px;
+  }
+`;
+var cursor = css`
+  cursor: default;
+`;
+var userSelect = css`
+  user-select: none;
+`;
+var ellipsis = css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+//#endregion
+export { cursor, ellipsis, root, userSelect };

package/dist/components/primitives/highlighted-text/HighlightedText.js

@@ -0,0 +1,14 @@
+import { html } from "../../../r-html/dist/render/index.js";
+import { findAll } from "../../../utils/highlightWords.js";
+import { highlighted } from "./HighlightedText.styles.js";
+//#region src/components/primitives/highlighted-text/HighlightedText.tsx
+var HighlightedText = (props, ctx) => {
+	return () => {
+		return findAll(props).map(({ end, highlight, start }) => {
+			const text = props.textToHighlight.substring(start, end);
+			return highlight ? html`<span class=${highlighted}>${text}</span>` : text;
+		});
+	};
+};
+//#endregion
+export { HighlightedText as default };

package/dist/components/primitives/highlighted-text/HighlightedText.styles.js

@@ -0,0 +1,7 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/primitives/highlighted-text/HighlightedText.styles.ts
+var highlighted = css`
+  color: var(--active);
+`;
+//#endregion
+export { highlighted };

package/dist/components/primitives/icon/Icon.js

@@ -0,0 +1,38 @@
+import { html, svg } from "../../../r-html/dist/render/index.js";
+import { restAttrs } from "../../../utils/attribute.js";
+import { icon, wrap } from "./Icon.styles.js";
+import { ICON_VIEW_BOX, getIcon } from "./icons.js";
+//#region src/components/primitives/icon/Icon.tsx
+var DEFAULT_SIZE = 18;
+var FILL = "none";
+var STROKE = "currentColor";
+var text = (value) => value === void 0 ? void 0 : String(value);
+var paint = (value, inherited) => value === void 0 ? inherited : String(value);
+var shape = ([tag, attrs]) => {
+	const fill = paint(attrs.fill, FILL);
+	const stroke = paint(attrs.stroke, STROKE);
+	switch (tag) {
+		case "path": return svg`<path d=${text(attrs.d)} fill=${fill} stroke=${stroke}></path>`;
+		case "circle": return svg`<circle cx=${attrs.cx} cy=${attrs.cy} r=${attrs.r} fill=${fill} stroke=${stroke}></circle>`;
+		case "rect": return svg`<rect x=${attrs.x} y=${attrs.y} width=${attrs.width} height=${attrs.height} rx=${attrs.rx ?? attrs.ry} ry=${attrs.ry ?? attrs.rx} fill=${fill} stroke=${stroke}></rect>`;
+		case "line": return svg`<line x1=${attrs.x1} y1=${attrs.y1} x2=${attrs.x2} y2=${attrs.y2} fill=${fill} stroke=${stroke}></line>`;
+		case "ellipse": return svg`<ellipse cx=${attrs.cx} cy=${attrs.cy} rx=${attrs.rx} ry=${attrs.ry} fill=${fill} stroke=${stroke}></ellipse>`;
+		default: return svg``;
+	}
+};
+var Icon = (props, ctx) => () => {
+	const name = props.name ?? "";
+	const size = props.size ?? DEFAULT_SIZE;
+	const icon$1 = getIcon(name);
+	if (!icon$1) return svg``;
+	return html`<div class=${[
+		"icon",
+		wrap,
+		props.class
+	]} style=${{ transform: `rotate(${props.rotate ?? 0}deg)` }} ...${restAttrs({ title: props.title })} @click=${props.onClick} @mouseenter=${props.onMouseenter} @mouseleave=${props.onMouseleave}><svg class=${props.useTransition ? icon : null} style=${{
+		width: `${size}px`,
+		height: `${size}px`
+	}} viewBox=${ICON_VIEW_BOX} fill=${FILL} stroke=${STROKE} stroke-width=${2} stroke-linecap="round" stroke-linejoin="round">${icon$1.node.map(shape)}</svg></div>`;
+};
+//#endregion
+export { Icon as default };

package/dist/components/primitives/icon/Icon.styles.js

@@ -0,0 +1,12 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/primitives/icon/Icon.styles.ts
+var wrap = css`
+  display: inline-flex;
+  height: 100%;
+  align-items: center;
+`;
+var icon = css`
+  transition: color 0.15s;
+`;
+//#endregion
+export { icon, wrap };

package/dist/components/primitives/icon/icons.js

@@ -0,0 +1,156 @@
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Atom, BookType, Braces, Brackets, CaseSensitive, CaseUpper, Check, ChevronDown, ChevronRight, ChevronsDownUp, Code, Contrast, Copy, Database, Download, Ellipsis, ExternalLink, Eye, FileDiff, FileImage, FileInput, FileOutput, Folder, FolderOpen, Fullscreen, FunnelX, GripVertical, Group, Hand, KeyRound, Keyboard, Languages, Link, List, ListPlus, ListTree, ListX, LoaderCircle, Lock, LockOpen, Logs, Maximize, MessageSquare, Minimize, Minus, Monitor, MoonStar, MousePointer2, Network, Palette, PanelRight, PanelRightClose, PanelRightOpen, Pencil, Pipette, Plus, Redo2, RefreshCw, Regex, Replace, ReplaceAll, RotateCcwClock, Search, Settings, Share2, Spline, StickyNote, Sun, Table2, TableProperties, TriangleAlert, Undo2, Ungroup, Upload, WandSparkles, Waypoints, WholeWord, Workflow, X } from "lucide";
+//#region src/components/primitives/icon/icons.ts
+var ICON_VIEW_BOX = "0 0 24 24";
+var LUCIDE_ICON = {
+	"arrow-down": ArrowDown,
+	"arrow-left": ArrowLeft,
+	"arrow-right": ArrowRight,
+	"arrow-up": ArrowUp,
+	atom: Atom,
+	"book-type": BookType,
+	braces: Braces,
+	brackets: Brackets,
+	"case-sensitive": CaseSensitive,
+	"case-upper": CaseUpper,
+	check: Check,
+	"chevron-down": ChevronDown,
+	"chevron-right": ChevronRight,
+	"chevrons-down-up": ChevronsDownUp,
+	code: Code,
+	contrast: Contrast,
+	copy: Copy,
+	database: Database,
+	download: Download,
+	ellipsis: Ellipsis,
+	"external-link": ExternalLink,
+	eye: Eye,
+	"file-diff": FileDiff,
+	"file-image": FileImage,
+	"file-input": FileInput,
+	"file-output": FileOutput,
+	folder: Folder,
+	"folder-open": FolderOpen,
+	fullscreen: Fullscreen,
+	"funnel-x": FunnelX,
+	"grip-vertical": GripVertical,
+	group: Group,
+	hand: Hand,
+	keyboard: Keyboard,
+	"key-round": KeyRound,
+	languages: Languages,
+	link: Link,
+	list: List,
+	"list-plus": ListPlus,
+	"list-tree": ListTree,
+	"list-x": ListX,
+	"loader-circle": LoaderCircle,
+	lock: Lock,
+	"lock-open": LockOpen,
+	logs: Logs,
+	maximize: Maximize,
+	"message-square": MessageSquare,
+	minimize: Minimize,
+	minus: Minus,
+	monitor: Monitor,
+	"moon-star": MoonStar,
+	"mouse-pointer-2": MousePointer2,
+	network: Network,
+	palette: Palette,
+	"panel-right": PanelRight,
+	"panel-right-close": PanelRightClose,
+	"panel-right-open": PanelRightOpen,
+	pencil: Pencil,
+	pipette: Pipette,
+	plus: Plus,
+	"redo-2": Redo2,
+	"refresh-cw": RefreshCw,
+	regex: Regex,
+	replace: Replace,
+	"replace-all": ReplaceAll,
+	"rotate-ccw-clock": RotateCcwClock,
+	search: Search,
+	settings: Settings,
+	"share-2": Share2,
+	spline: Spline,
+	"sticky-note": StickyNote,
+	sun: Sun,
+	"table-2": Table2,
+	"table-properties": TableProperties,
+	"triangle-alert": TriangleAlert,
+	"undo-2": Undo2,
+	ungroup: Ungroup,
+	upload: Upload,
+	"wand-sparkles": WandSparkles,
+	waypoints: Waypoints,
+	"whole-word": WholeWord,
+	workflow: Workflow,
+	x: X
+};
+var NOTATION_ICON = {
+	ZeroOneN: [
+		["circle", {
+			cx: "7",
+			cy: "12",
+			r: "5"
+		}],
+		["path", { d: "M12 12h10" }],
+		["path", { d: "M15 6v12" }],
+		["path", { d: "M16 12l6-6" }],
+		["path", { d: "M16 12l6 6" }]
+	],
+	ZeroOne: [
+		["path", { d: "M2 12h3" }],
+		["circle", {
+			cx: "10",
+			cy: "12",
+			r: "5"
+		}],
+		["path", { d: "M15 12h7" }],
+		["path", { d: "M20 6v12" }]
+	],
+	ZeroN: [
+		["path", { d: "M2 12h3" }],
+		["circle", {
+			cx: "10",
+			cy: "12",
+			r: "5"
+		}],
+		["path", { d: "M15 12h7" }],
+		["path", { d: "M15 12l7-6" }],
+		["path", { d: "M15 12l7 6" }]
+	],
+	OneOnly: [
+		["path", { d: "M2 12h20" }],
+		["path", { d: "M14 6v12" }],
+		["path", { d: "M19 6v12" }]
+	],
+	OneN: [
+		["path", { d: "M2 12h20" }],
+		["path", { d: "M14 6v12" }],
+		["path", { d: "M15 12l7-6" }],
+		["path", { d: "M15 12l7 6" }]
+	],
+	One: [["path", { d: "M2 12h20" }], ["path", { d: "M14 6v12" }]],
+	N: [
+		["path", { d: "M2 12h20" }],
+		["path", { d: "M15 12l7-6" }],
+		["path", { d: "M15 12l7 6" }]
+	]
+};
+var iconMap = {};
+setIconMap();
+function setIconMap() {
+	for (const name of Object.keys(LUCIDE_ICON)) iconMap[name] = {
+		name,
+		node: LUCIDE_ICON[name]
+	};
+	for (const name of Object.keys(NOTATION_ICON)) iconMap[name] = {
+		name,
+		node: NOTATION_ICON[name]
+	};
+}
+function getIcon(name) {
+	return iconMap[name];
+}
+//#endregion
+export { ICON_VIEW_BOX, NOTATION_ICON, getIcon, iconMap };

package/dist/components/primitives/kbd/Kbd.js

@@ -0,0 +1,12 @@
+import { shortcutToTuple } from "../../../utils/keyboard-shortcut/index.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { kbd, mini, root } from "./Kbd.styles.js";
+//#region src/components/primitives/kbd/Kbd.tsx
+var Kbd = (props, ctx) => {
+	return () => {
+		const shortcuts = shortcutToTuple(props.shortcut).map(([mods, key]) => [...mods, key].join(" + "));
+		return html`<div class=${["kbd", root]} .dir="ltr">${shortcuts.map((shortcut) => html`<div class=${props.mini ? mini : kbd}>${shortcut}</div>`)}</div>`;
+	};
+};
+//#endregion
+export { Kbd as default };

package/dist/components/primitives/kbd/Kbd.styles.js

@@ -0,0 +1,44 @@
+import { css } from "../../../r-html/dist/template/css.js";
+import { typography } from "../../../styles/typography.styles.js";
+//#region src/components/primitives/kbd/Kbd.styles.ts
+var root = css`
+  display: flex;
+  width: fit-content;
+`;
+var kbd = css`
+  display: inline-flex;
+  align-items: center;
+
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  padding-bottom: 0.05em;
+  margin-right: 4px;
+  ${typography.paragraph};
+
+  white-space: nowrap;
+  color: var(--foreground);
+  border: 1px solid var(--foreground);
+  border-radius: 3px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+`;
+var mini = css`
+  padding-left: 0.25em;
+  padding-right: 0.25em;
+  padding-bottom: 0.05em;
+  margin-right: 2px;
+  font-size: 10px;
+
+  white-space: nowrap;
+  color: var(--placeholder);
+  border: 1px solid var(--placeholder);
+  border-radius: 3px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+`;
+//#endregion
+export { kbd, mini, root };

package/dist/components/primitives/sash/Sash.js

@@ -0,0 +1,46 @@
+import { html } from "../../../r-html/dist/render/index.js";
+import { sash } from "./Sash.styles.js";
+import { drag$ } from "../../../utils/globalEventObservable.js";
+//#region src/components/primitives/sash/Sash.tsx
+var SashType = {
+	vertical: "vertical",
+	horizontal: "horizontal",
+	edge: "edge"
+};
+var Sash = (props, ctx) => {
+	const centerTop = () => {
+		const top = props.top ?? 0;
+		return top === 0 && props.type === SashType.vertical ? top : top - 5 / 2;
+	};
+	const centerLeft = () => {
+		const left = props.left ?? 0;
+		return left === 0 && props.type === SashType.horizontal ? left : left - 5 / 2;
+	};
+	const handleMousedown = (event) => {
+		props.onMousedown?.(event);
+		drag$.subscribe((dragMove) => {
+			dragMove.event.type === "mousemove" && dragMove.event.preventDefault();
+			props.onMove?.(dragMove);
+		});
+	};
+	return () => {
+		const vertical = props.type === SashType.vertical;
+		const horizontal = props.type === SashType.horizontal;
+		const edge = props.type === SashType.edge;
+		return html`<div class=${[
+			"sash",
+			sash,
+			{
+				vertical,
+				horizontal,
+				edge
+			}
+		]} style=${{
+			top: `${centerTop()}px`,
+			left: `${centerLeft()}px`,
+			cursor: edge ? props.cursor : ""
+		}} @mousedown=${handleMousedown} @dblclick=${(event) => props.onDblclick?.(event)}></div>`;
+	};
+};
+//#endregion
+export { SashType, Sash as default };

package/dist/components/primitives/sash/Sash.styles.js

@@ -0,0 +1,23 @@
+import { css } from "../../../r-html/dist/template/css.js";
+var sash = css`
+  position: absolute;
+
+  &.vertical {
+    width: ${5}px;
+    height: 100%;
+    cursor: ew-resize;
+  }
+
+  &.horizontal {
+    width: 100%;
+    height: ${5}px;
+    cursor: ns-resize;
+  }
+
+  &.edge {
+    width: ${5}px;
+    height: ${5}px;
+  }
+`;
+//#endregion
+export { sash };

package/dist/components/primitives/select/Select.js

@@ -0,0 +1,6 @@
+import { html } from "../../../r-html/dist/render/index.js";
+import Icon from "../icon/Icon.js";
+import { chevron, root } from "./Select.styles.js";
+var Select = (props) => () => html`<div class=${[root, props.class]} ?data-dimmed=${props.dimmed}>${props.children}<span class=${chevron} aria-hidden="true"><${Icon} .name="chevron-down" .size=${14} /></span></div>`;
+//#endregion
+export { Select as default };

package/dist/components/primitives/select/Select.styles.js

@@ -0,0 +1,59 @@
+import { css } from "../../../r-html/dist/template/css.js";
+import { typography } from "../../../styles/typography.styles.js";
+//#region src/components/primitives/select/Select.styles.ts
+var chevron = css`
+  grid-area: 1 / 1;
+  justify-self: end;
+  display: flex;
+  margin-inline-end: 7px;
+  pointer-events: none;
+`;
+var root = css`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  color: var(--active);
+
+  &[data-dimmed] {
+    color: var(--placeholder);
+  }
+
+  & > select {
+    grid-area: 1 / 1;
+    width: 100%;
+    min-width: 0;
+    height: 28px;
+    margin: 0;
+    padding-block: 0;
+    padding-inline: 8px 26px;
+    appearance: none;
+    border: 1px solid var(--context-menu-border);
+    border-radius: 4px;
+    color: inherit;
+    background-color: var(--context-menu-background);
+    text-overflow: ellipsis;
+    ${typography.paragraph};
+  }
+
+  & > select:focus-visible {
+    outline: 2px solid var(--input-active);
+    outline-offset: 1px;
+  }
+
+  & > select:disabled,
+  & > select:disabled + ${chevron} {
+    color: var(--placeholder);
+  }
+
+  @media (forced-colors: active) {
+    & > ${chevron} {
+      color: FieldText;
+    }
+
+    & > select:disabled + ${chevron} {
+      color: GrayText;
+    }
+  }
+`;
+//#endregion
+export { chevron, root };