@astryx-vue/core 0.1.1 → 0.2.0

package/dist/Code-yb_KOFtJ.js

@@ -0,0 +1,299 @@
+import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
+import { i as syntaxThemeStyle, n as defineSyntaxTheme, r as githubDark, t as SYNTAX_TOKEN_KEYS } from "./syntaxTheme-ClpWALZX.js";
+import { a as resolveLightDark, i as readColorMode, n as themeContextKey, o as syntaxThemeKey } from "./context-O2Vb8cJl.js";
+import { computed, createElementBlock, defineComponent, inject, normalizeClass, normalizeStyle, openBlock, provide, renderSlot } from "vue";
+//#region src/Code/syntaxPresets.ts
+/** One Dark Pro (Binaryify), MIT. */
+const oneDarkPro = defineSyntaxTheme({
+	name: "one-dark-pro",
+	tokens: {
+		keyword: "#c678dd",
+		string: "#98c379",
+		comment: "#5c6370",
+		number: "#d19a66",
+		function: "#61afef",
+		type: "#e5c07b",
+		variable: "#e06c75",
+		operator: "#56b6c2",
+		constant: "#d19a66",
+		tag: "#e06c75",
+		attribute: "#d19a66",
+		property: "#e06c75",
+		punctuation: "#abb2bf",
+		background: "#282c34"
+	}
+});
+/** Dracula (Zeno Rocha), MIT. */
+const dracula = defineSyntaxTheme({
+	name: "dracula",
+	tokens: {
+		keyword: "#ff79c6",
+		string: "#f1fa8c",
+		comment: "#6272a4",
+		number: "#bd93f9",
+		function: "#50fa7b",
+		type: "#8be9fd",
+		variable: "#f8f8f2",
+		operator: "#ff79c6",
+		constant: "#bd93f9",
+		tag: "#ff79c6",
+		attribute: "#50fa7b",
+		property: "#66d9ef",
+		punctuation: "#f8f8f2",
+		background: "#282a36"
+	}
+});
+/** Monokai (Wimer Hazenberg), MIT. */
+const monokai = defineSyntaxTheme({
+	name: "monokai",
+	tokens: {
+		keyword: "#f92672",
+		string: "#e6db74",
+		comment: "#75715e",
+		number: "#ae81ff",
+		function: "#a6e22e",
+		type: "#66d9ef",
+		variable: "#f8f8f2",
+		operator: "#f92672",
+		constant: "#ae81ff",
+		tag: "#f92672",
+		attribute: "#a6e22e",
+		property: "#66d9ef",
+		punctuation: "#f8f8f2",
+		background: "#272822"
+	}
+});
+/** Nord (Sven Greb), MIT. */
+const nord = defineSyntaxTheme({
+	name: "nord",
+	tokens: {
+		keyword: "#81a1c1",
+		string: "#a3be8c",
+		comment: "#616e88",
+		number: "#b48ead",
+		function: "#88c0d0",
+		type: "#8fbcbb",
+		variable: "#d8dee9",
+		operator: "#81a1c1",
+		constant: "#b48ead",
+		tag: "#81a1c1",
+		attribute: "#8fbcbb",
+		property: "#88c0d0",
+		punctuation: "#d8dee9",
+		background: "#2e3440"
+	}
+});
+/** Tokyo Night (enkia), MIT. */
+const tokyoNight = defineSyntaxTheme({
+	name: "tokyo-night",
+	tokens: {
+		keyword: "#9d7cd8",
+		string: "#9ece6a",
+		comment: "#565f89",
+		number: "#ff9e64",
+		function: "#7aa2f7",
+		type: "#2ac3de",
+		variable: "#c0caf5",
+		operator: "#89ddff",
+		constant: "#ff9e64",
+		tag: "#f7768e",
+		attribute: "#bb9af7",
+		property: "#73daca",
+		punctuation: "#9abdf5",
+		background: "#1a1b26"
+	}
+});
+/** Catppuccin Mocha, MIT. */
+const catppuccinMocha = defineSyntaxTheme({
+	name: "catppuccin-mocha",
+	tokens: {
+		keyword: "#cba6f7",
+		string: "#a6e3a1",
+		comment: "#6c7086",
+		number: "#fab387",
+		function: "#89b4fa",
+		type: "#f9e2af",
+		variable: "#cdd6f4",
+		operator: "#89dceb",
+		constant: "#fab387",
+		tag: "#f38ba8",
+		attribute: "#f9e2af",
+		property: "#94e2d5",
+		punctuation: "#bac2de",
+		background: "#1e1e2e"
+	}
+});
+/** GitHub Light (GitHub Primer team), MIT. */
+const githubLight = defineSyntaxTheme({
+	name: "github-light",
+	tokens: {
+		keyword: "#cf222e",
+		string: "#0a3069",
+		comment: "#6e7781",
+		number: "#0550ae",
+		function: "#8250df",
+		type: "#953800",
+		variable: "#24292f",
+		operator: "#cf222e",
+		constant: "#0550ae",
+		tag: "#116329",
+		attribute: "#0550ae",
+		property: "#0550ae",
+		punctuation: "#24292f",
+		background: "#ffffff"
+	}
+});
+/** Solarized Light (Ethan Schoonover), MIT. */
+const solarizedLight = defineSyntaxTheme({
+	name: "solarized-light",
+	tokens: {
+		keyword: "#859900",
+		string: "#2aa198",
+		comment: "#93a1a1",
+		number: "#d33682",
+		function: "#268bd2",
+		type: "#b58900",
+		variable: "#657b83",
+		operator: "#859900",
+		constant: "#cb4b16",
+		tag: "#268bd2",
+		attribute: "#b58900",
+		property: "#268bd2",
+		punctuation: "#586e75",
+		background: "#fdf6e3"
+	}
+});
+/** One Light (GitHub / Atom), MIT. */
+const oneLight = defineSyntaxTheme({
+	name: "one-light",
+	tokens: {
+		keyword: "#a626a4",
+		string: "#50a14f",
+		comment: "#a0a1a7",
+		number: "#986801",
+		function: "#4078f2",
+		type: "#c18401",
+		variable: "#e45649",
+		operator: "#0184bc",
+		constant: "#986801",
+		tag: "#e45649",
+		attribute: "#986801",
+		property: "#e45649",
+		punctuation: "#383a42",
+		background: "#fafafa"
+	}
+});
+/** Catppuccin Latte, MIT. */
+const catppuccinLatte = defineSyntaxTheme({
+	name: "catppuccin-latte",
+	tokens: {
+		keyword: "#8839ef",
+		string: "#40a02b",
+		comment: "#9ca0b0",
+		number: "#fe640b",
+		function: "#1e66f5",
+		type: "#df8e1d",
+		variable: "#4c4f69",
+		operator: "#179299",
+		constant: "#fe640b",
+		tag: "#d20f39",
+		attribute: "#df8e1d",
+		property: "#179299",
+		punctuation: "#6c6f85",
+		background: "#eff1f5"
+	}
+});
+/** Tokyo Night Light (enkia), MIT. */
+const tokyoNightLight = defineSyntaxTheme({
+	name: "tokyo-night-light",
+	tokens: {
+		keyword: "#8c4351",
+		string: "#485e30",
+		comment: "#9699a3",
+		number: "#965027",
+		function: "#34548a",
+		type: "#166775",
+		variable: "#343b58",
+		operator: "#34548a",
+		constant: "#965027",
+		tag: "#8c4351",
+		attribute: "#8f5e15",
+		property: "#33635c",
+		punctuation: "#343b58",
+		background: "#d5d6db"
+	}
+});
+const darkSyntaxPresets = [
+	oneDarkPro,
+	dracula,
+	monokai,
+	nord,
+	tokyoNight,
+	catppuccinMocha,
+	githubDark
+];
+const lightSyntaxPresets = [
+	githubLight,
+	solarizedLight,
+	oneLight,
+	catppuccinLatte,
+	tokyoNightLight
+];
+const allSyntaxPresets = [...darkSyntaxPresets, ...lightSyntaxPresets];
+//#endregion
+//#region src/Code/SyntaxTheme.vue
+const _hoisted_1 = ["data-astryx-syntax-theme"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxSyntaxTheme",
+	inheritAttrs: false,
+	__name: "SyntaxTheme",
+	props: { theme: {} },
+	setup(__props) {
+		const props = __props;
+		const style = computed(() => syntaxThemeStyle(props.theme));
+		provide(syntaxThemeKey, computed(() => props.theme));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["astryx-syntax-theme", _ctx.$attrs.class]),
+				"data-astryx-syntax-theme": __props.theme.name,
+				style: normalizeStyle([style.value, _ctx.$attrs.style])
+			}, [renderSlot(_ctx.$slots, "default")], 14, _hoisted_1);
+		};
+	}
+});
+//#endregion
+//#region src/Code/useSyntaxTheme.ts
+/**
+* Read the nearest SyntaxTheme, or the syntax field of the nearest Theme.
+* Returns null when neither is present.
+*/
+function useSyntaxTheme() {
+	const injected = inject(syntaxThemeKey, null);
+	const theme = inject(themeContextKey, null);
+	const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
+	if (!injected) return null;
+	const mode = computed(() => {
+		const requested = theme?.value.mode;
+		if (requested === "light" || requested === "dark") return requested;
+		return readColorMode(prefersDark.value);
+	});
+	const name = computed(() => injected.value?.name ?? "");
+	const tokens = computed(() => {
+		const theme = injected.value;
+		if (!theme) return null;
+		const resolved = {};
+		for (const key of SYNTAX_TOKEN_KEYS) resolved[key] = resolveLightDark(theme.tokens[key], mode.value);
+		return resolved;
+	});
+	function token(tokenName) {
+		return tokens.value?.[tokenName] ?? "";
+	}
+	return {
+		name,
+		mode,
+		token,
+		tokens
+	};
+}
+//#endregion
+export { catppuccinMocha as a, githubLight as c, nord as d, oneDarkPro as f, tokyoNightLight as g, tokyoNight as h, catppuccinLatte as i, lightSyntaxPresets as l, solarizedLight as m, _sfc_main as n, darkSyntaxPresets as o, oneLight as p, allSyntaxPresets as r, dracula as s, useSyntaxTheme as t, monokai as u };

package/dist/{CodeBlock-BQdooQy2.js → CodeBlock-CxTb6j9_.js}

@@ -1,7 +1,8 @@
 import { t as _sfc_main$3 } from "./VisuallyHidden-C7NN3VEP.js";
 import { t as useClipboard } from "./useClipboard-BDfbEsWd.js";
 import { t as _sfc_main$4 } from "./IconButton-BNQuz9W_.js";
-import { t as _sfc_main$5 } from "./Icon-5MdZQ18k.js";
+import { t as _sfc_main$5 } from "./Icon-Dfr4k6-S.js";
+import { i as syntaxThemeStyle } from "./syntaxTheme-ClpWALZX.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useAttrs, useId, useTemplateRef, watch, withCtx, withModifiers } from "vue";
 import "../styles/code.css";
 //#region src/Code/Code.vue
@@ -976,6 +977,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	props: {
 		code: {},
 		language: { default: "plaintext" },
+		syntaxTheme: {},
 		title: {},
 		hasLanguageLabel: {
 			type: Boolean,
@@ -1125,7 +1127,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				style.minWidth = "min(100%, 400px)";
 				style.maxWidth = "100%";
 			}
-			return [attrs.style, style];
+			return [
+				attrs.style,
+				props.syntaxTheme ? syntaxThemeStyle(props.syntaxTheme) : null,
+				style
+			];
 		});
 		const forwardedAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")));
 		return (_ctx, _cache) => {

package/dist/Collapsible/index.d.ts

@@ -1,2 +1,2 @@
-import { a as CollapsibleSlots, i as CollapsibleProps, n as CollapsibleChevronPosition, r as CollapsibleEmits, t as _default } from "../index-TnaIHsCS.js";
-export { _default as Collapsible, type CollapsibleChevronPosition, type CollapsibleEmits, type CollapsibleProps, type CollapsibleSlots };
+import { a as CollapsibleGroupDensity, c as _default, d as CollapsibleProps, f as CollapsibleSlots, i as CollapsibleGroupSlots, l as CollapsibleChevronPosition, n as CollapsibleGroupEmits, o as CollapsibleGroupType, r as CollapsibleGroupProps, s as CollapsibleGroupValue, t as _default$1, u as CollapsibleEmits } from "../index-DA52oIdw.js";
+export { _default as Collapsible, type CollapsibleChevronPosition, type CollapsibleEmits, _default$1 as CollapsibleGroup, type CollapsibleGroupDensity, type CollapsibleGroupEmits, type CollapsibleGroupProps, type CollapsibleGroupSlots, type CollapsibleGroupType, type CollapsibleGroupValue, type CollapsibleProps, type CollapsibleSlots };

package/dist/Collapsible/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Collapsible-BYg9soTk.js";
-export { _sfc_main as Collapsible };
+import { n as _sfc_main, t as _sfc_main$1 } from "../Collapsible-9MC08X39.js";
+export { _sfc_main as Collapsible, _sfc_main$1 as CollapsibleGroup };

package/dist/Collapsible-9MC08X39.js

@@ -0,0 +1,192 @@
+import { t as _sfc_main$2 } from "./Icon-Dfr4k6-S.js";
+import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeModels, openBlock, provide, renderSlot, shallowRef, toDisplayString, useId, useModel, useTemplateRef, vShow, withCtx, withDirectives } from "vue";
+import "../styles/collapsible.css";
+//#region src/Collapsible/context.ts
+const collapsibleGroupKey = Symbol("collapsibleGroup");
+const collapsibleGroupPresentationKey = Symbol("collapsibleGroupPresentation");
+//#endregion
+//#region src/Collapsible/Collapsible.vue
+const _hoisted_1$1 = ["data-density", "data-dividers"];
+const _hoisted_2 = [
+	"data-chevron-position",
+	"data-open",
+	"data-disabled",
+	"aria-expanded",
+	"aria-disabled",
+	"tabindex"
+];
+const _hoisted_3 = { class: "astryx-collapsible-trigger-label" };
+const _hoisted_4 = ["data-open"];
+const _hoisted_5 = { class: "astryx-collapsible-content-inner" };
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxCollapsible",
+	__name: "Collapsible",
+	props: /*@__PURE__*/ mergeModels({
+		trigger: {},
+		defaultIsOpen: {
+			type: Boolean,
+			default: true
+		},
+		isDisabled: {
+			type: Boolean,
+			default: false
+		},
+		chevronPosition: {},
+		value: {}
+	}, {
+		"isOpen": {
+			type: Boolean,
+			default: void 0
+		},
+		"isOpenModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["openChange"], ["update:isOpen"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const open = useModel(__props, "isOpen");
+		const localIsOpen = shallowRef(props.defaultIsOpen);
+		const group = inject(collapsibleGroupKey, null);
+		const presentation = inject(collapsibleGroupPresentationKey, null);
+		const isGrouped = computed(() => group != null && props.value != null && props.value !== "");
+		const isOpen = computed(() => {
+			if (isGrouped.value && group != null && props.value != null) return group.isOpen(props.value);
+			return open.value ?? localIsOpen.value;
+		});
+		const density = computed(() => presentation?.density.value ?? null);
+		const hasDividers = computed(() => presentation?.hasDividers.value ?? false);
+		const chevronPosition = computed(() => props.chevronPosition ?? presentation?.chevronPosition.value ?? "end");
+		const isChevronAtStart = computed(() => chevronPosition.value === "start");
+		const contentId = `astryx-collapsible-${useId()}`;
+		const root = useTemplateRef("root");
+		__expose({ element: computed(() => root.value ?? null) });
+		function toggle() {
+			if (props.isDisabled) return;
+			if (isGrouped.value && group != null && props.value != null) {
+				group.toggle(props.value);
+				return;
+			}
+			const next = !isOpen.value;
+			localIsOpen.value = next;
+			open.value = next;
+			emit("openChange", next);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				class: "astryx-collapsible",
+				"data-density": density.value || void 0,
+				"data-dividers": hasDividers.value || void 0
+			}, [createElementVNode("button", {
+				type: "button",
+				class: "astryx-collapsible-trigger",
+				"data-chevron-position": chevronPosition.value,
+				"data-open": isOpen.value ? "open" : void 0,
+				"data-disabled": __props.isDisabled ? "disabled" : void 0,
+				"aria-expanded": isOpen.value,
+				"aria-controls": contentId,
+				"aria-disabled": __props.isDisabled || void 0,
+				tabindex: __props.isDisabled ? -1 : void 0,
+				onClick: toggle
+			}, [
+				isChevronAtStart.value ? (openBlock(), createBlock(_sfc_main$2, {
+					key: 0,
+					class: "astryx-collapsible-chevron",
+					color: "secondary",
+					icon: "chevronRight",
+					size: "sm"
+				})) : createCommentVNode("v-if", true),
+				createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "trigger", {}, () => [createTextVNode(toDisplayString(__props.trigger), 1)])]),
+				!isChevronAtStart.value ? (openBlock(), createBlock(_sfc_main$2, {
+					key: 1,
+					class: "astryx-collapsible-chevron",
+					color: "secondary",
+					icon: "chevronDown",
+					size: "sm"
+				})) : createCommentVNode("v-if", true)
+			], 8, _hoisted_2), createVNode(Transition, {
+				name: "astryx-collapsible-reveal",
+				persisted: ""
+			}, {
+				default: withCtx(() => [withDirectives(createElementVNode("div", {
+					id: contentId,
+					class: "astryx-collapsible-content",
+					"data-open": isOpen.value ? "open" : void 0
+				}, [createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "default")])], 8, _hoisted_4), [[vShow, isOpen.value]])]),
+				_: 3
+			})], 8, _hoisted_1$1);
+		};
+	}
+});
+//#endregion
+//#region src/Collapsible/CollapsibleGroup.vue
+const _hoisted_1 = ["data-density"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxCollapsibleGroup",
+	__name: "CollapsibleGroup",
+	props: /*@__PURE__*/ mergeModels({
+		type: { default: "single" },
+		defaultValue: {},
+		value: {},
+		hasDividers: {
+			type: Boolean,
+			default: false
+		},
+		density: {},
+		chevronPosition: { default: "end" }
+	}, {
+		"value": {},
+		"valueModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["change"], ["update:value"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		function initialValue() {
+			if (props.defaultValue != null) return props.defaultValue;
+			return props.type === "multiple" ? [] : "";
+		}
+		const value = useModel(__props, "value");
+		const localValue = shallowRef(initialValue());
+		const current = computed(() => value.value ?? localValue.value);
+		function asList(next) {
+			return Array.isArray(next) ? next : next === "" ? [] : [next];
+		}
+		const openValues = computed(() => asList(current.value));
+		function commit(next) {
+			const emitted = props.type === "single" ? next[0] ?? "" : next;
+			localValue.value = emitted;
+			value.value = emitted;
+			emit("change", emitted);
+		}
+		function isOpen(item) {
+			return openValues.value.includes(item);
+		}
+		function toggle(item) {
+			const open = openValues.value;
+			commit(props.type === "single" ? open.includes(item) ? [] : [item] : open.includes(item) ? open.filter((entry) => entry !== item) : [...open, item]);
+		}
+		const density = computed(() => props.density ?? (props.hasDividers ? "balanced" : null));
+		const hasDividers = computed(() => props.hasDividers);
+		const chevronPosition = computed(() => props.chevronPosition);
+		provide(collapsibleGroupKey, {
+			isOpen,
+			toggle
+		});
+		provide(collapsibleGroupPresentationKey, {
+			chevronPosition,
+			density,
+			hasDividers
+		});
+		return (_ctx, _cache) => {
+			return hasDividers.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "astryx-collapsible-group",
+				"data-density": density.value || void 0
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1)) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1);
+		};
+	}
+});
+//#endregion
+export { _sfc_main$1 as n, _sfc_main as t };

package/dist/CommandPalette/index.d.ts

@@ -0,0 +1,2 @@
+import { a as _default$2, c as CommandPaletteEmits, d as CommandPaletteItemProps, f as CommandPaletteItemSlotProps, h as CommandPaletteSlots, i as _default$3, l as CommandPaletteGroupProps, m as CommandPaletteProps, n as _default$5, o as _default$1, p as CommandPaletteListProps, r as _default$4, s as _default, t as _default$6, u as CommandPaletteInputProps } from "../index-Be1czg3M.js";
+export { _default as CommandPalette, type CommandPaletteEmits, _default$1 as CommandPaletteEmpty, _default$2 as CommandPaletteFooter, _default$3 as CommandPaletteGroup, type CommandPaletteGroupProps, _default$4 as CommandPaletteInput, type CommandPaletteInputProps, _default$5 as CommandPaletteItem, type CommandPaletteItemProps, type CommandPaletteItemSlotProps, _default$6 as CommandPaletteList, type CommandPaletteListProps, type CommandPaletteProps, type CommandPaletteSlots };

package/dist/CommandPalette/index.js

@@ -0,0 +1,2 @@
+import { a as _sfc_main$3, i as _sfc_main$4, n as _sfc_main$6, o as _sfc_main$2, r as _sfc_main$5, s as _sfc_main$1, t as _sfc_main } from "../CommandPalette-BD2iODF5.js";
+export { _sfc_main as CommandPalette, _sfc_main$1 as CommandPaletteEmpty, _sfc_main$2 as CommandPaletteFooter, _sfc_main$3 as CommandPaletteGroup, _sfc_main$4 as CommandPaletteInput, _sfc_main$5 as CommandPaletteItem, _sfc_main$6 as CommandPaletteList };