@well-insight/ui 0.1.6 → 0.1.8

package/dist/textarea/style.js

@@ -0,0 +1,3 @@
+import '../theme/styles.css'
+import '../styles/base.css'
+import '../components/Textarea/styles.css'

package/dist/theme/styles.css

@@ -0,0 +1,187 @@
+:root {
+    --wi-color-primary: #2563eb;
+    --wi-color-primary-hover: #1d4ed8;
+    --wi-color-surface: #ffffff;
+    --wi-color-text: #0f172a;
+    --wi-color-text-muted: #64748b;
+    --wi-color-border: #e2e8f0;
+    --wi-color-focus-ring: #2563eb;
+    /* Naive-inspired control sizing (tiny omitted; medium = default) */
+    --wi-control-height-small: 28px;
+    --wi-control-height-medium: 34px;
+    --wi-control-height-large: 40px;
+    --wi-control-font-small: 14px;
+    --wi-control-font-medium: 14px;
+    --wi-control-font-large: 15px;
+    --wi-control-padding-x-small: 10px;
+    --wi-control-padding-x-medium: 12px;
+    --wi-control-padding-x-large: 14px;
+    --wi-button-padding-x-small: 10px;
+    --wi-button-padding-x-medium: 14px;
+    --wi-button-padding-x-large: 18px;
+    --wi-radius-control: 3px;
+    --wi-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--wi-color-primary) 20%, transparent);
+    --wi-focus-shadow-danger: 0 0 0 2px color-mix(in srgb, var(--wi-color-danger) 20%, transparent);
+    --wi-color-success: #159570;
+    --wi-color-info: #2563eb;
+    --wi-color-warning: #d97706;
+    --wi-color-warn: var(--wi-color-warning);
+    --wi-color-help: #9333ea;
+    --wi-color-danger: #dc2626;
+    --wi-color-contrast: #0f172a;
+    --wi-color-contrast-fg: #ffffff;
+    --wi-color-contrast-hover: #1e293b;
+    --wi-color-contrast-active: #020617;
+    --wi-color-on-emphasis: #ffffff;
+    --wi-overlay-scrim: rgb(15 23 42 / 0.55);
+    --wi-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.25);
+    --wi-shadow-md: 0 0.75rem 2rem rgb(15 23 42 / 0.16);
+    --wi-shadow-lg: 0 1rem 3rem rgb(15 23 42 / 0.25);
+    --wi-shadow-sticky: 4px 0 8px color-mix(in srgb, #000 6%, transparent);
+    --wi-shadow-sticky-end: -4px 0 8px color-mix(in srgb, #000 6%, transparent);
+    --wi-terminal-bg: #111827;
+    --wi-terminal-fg: #e5e7eb;
+    --wi-terminal-prompt: #34d399;
+    --wi-terminal-border: color-mix(in srgb, #fff 12%, transparent);
+    /* Typography scale (component text, not control-height fonts) */
+    --wi-font-size-xs: 0.75rem;
+    --wi-font-size-sm: 0.8125rem;
+    --wi-font-size-md: 0.875rem;
+    --wi-font-size-lg: 1.125rem;
+    --wi-opacity-disabled: 0.55;
+    /* Layering: override --wi-z-base via ConfigProvider / createWellInsight */
+    --wi-z-base: 1000;
+    --wi-z-overlay: var(--wi-z-base);
+    --wi-z-overlay-raised: calc(var(--wi-z-base) + 1);
+    --wi-z-dropdown: calc(var(--wi-z-base) + 50);
+    --wi-z-toast: calc(var(--wi-z-base) + 100);
+    --wi-z-popper: 40;
+    --wi-menu-min-width: 10rem;
+    --wi-menu-min-width-lg: 12rem;
+    --wi-control-affix-size: 2rem;
+    --wi-control-affix-gap: 2.35rem;
+    --wi-control-affix-padding: 2.5rem;
+    --wi-space-1: 0.25rem;
+    --wi-space-2: 0.5rem;
+    --wi-space-3: 0.75rem;
+    --wi-space-4: 1rem;
+    --wi-space-6: 1.5rem;
+    --wi-space-8: 2rem;
+    --wi-radius-sm: 0.25rem;
+    --wi-radius-md: 0.5rem;
+    --wi-radius-lg: 0.75rem;
+    --wi-radius-full: 9999px;
+    --wi-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+    --wi-motion-fast: 150ms;
+    --wi-motion-normal: 250ms;
+    --wi-motion-ease: cubic-bezier(0.2, 0, 0, 1);
+    --wi-motion-enter: 180ms;
+    --wi-motion-exit: 130ms;
+    --wi-motion-distance: 0.5rem;
+}
+
+:root[data-wi-motion="reduced"] {
+    --wi-motion-fast: 80ms;
+    --wi-motion-normal: 120ms;
+    --wi-motion-enter: 100ms;
+    --wi-motion-exit: 80ms;
+    --wi-motion-distance: 0;
+}
+
+:root[data-wi-motion="none"] {
+    --wi-motion-fast: 0ms;
+    --wi-motion-normal: 0ms;
+    --wi-motion-enter: 0ms;
+    --wi-motion-exit: 0ms;
+    --wi-motion-distance: 0;
+}
+
+/* Global density: scales spacing + control heights (Vuetify-inspired, WD tokens) */
+:root,
+[data-wi-density="comfortable"] {
+    --wi-density-scale: 1;
+}
+
+[data-wi-density="compact"] {
+    --wi-space-1: 0.2rem;
+    --wi-space-2: 0.4rem;
+    --wi-space-3: 0.6rem;
+    --wi-space-4: 0.85rem;
+    --wi-space-6: 1.25rem;
+    --wi-space-8: 1.7rem;
+    --wi-control-height-small: 24px;
+    --wi-control-height-medium: 28px;
+    --wi-control-height-large: 34px;
+    --wi-control-font-small: 13px;
+    --wi-control-font-medium: 13px;
+    --wi-control-font-large: 14px;
+    --wi-control-padding-x-small: 8px;
+    --wi-control-padding-x-medium: 10px;
+    --wi-control-padding-x-large: 12px;
+    --wi-button-padding-x-small: 8px;
+    --wi-button-padding-x-medium: 12px;
+    --wi-button-padding-x-large: 16px;
+}
+
+[data-wi-density="spacious"] {
+    --wi-space-1: 0.3rem;
+    --wi-space-2: 0.6rem;
+    --wi-space-3: 0.9rem;
+    --wi-space-4: 1.15rem;
+    --wi-space-6: 1.75rem;
+    --wi-space-8: 2.35rem;
+    --wi-control-height-small: 32px;
+    --wi-control-height-medium: 40px;
+    --wi-control-height-large: 46px;
+    --wi-control-font-small: 14px;
+    --wi-control-font-medium: 15px;
+    --wi-control-font-large: 16px;
+    --wi-control-padding-x-small: 12px;
+    --wi-control-padding-x-medium: 14px;
+    --wi-control-padding-x-large: 16px;
+    --wi-button-padding-x-small: 12px;
+    --wi-button-padding-x-medium: 16px;
+    --wi-button-padding-x-large: 20px;
+}
+
+[data-theme="dark"] {
+    --wi-color-primary: #60a5fa;
+    --wi-color-primary-hover: #93c5fd;
+    --wi-color-surface: #0f172a;
+    --wi-color-text: #f8fafc;
+    --wi-color-text-muted: #94a3b8;
+    --wi-color-border: #334155;
+    --wi-color-focus-ring: #93c5fd;
+    --wi-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--wi-color-primary) 28%, transparent);
+    --wi-focus-shadow-danger: 0 0 0 2px color-mix(in srgb, var(--wi-color-danger) 28%, transparent);
+    --wi-color-success: #5eead4;
+    --wi-color-info: #93c5fd;
+    --wi-color-warning: #fbbf24;
+    --wi-color-warn: var(--wi-color-warning);
+    --wi-color-help: #c084fc;
+    --wi-color-danger: #fca5a5;
+    --wi-color-contrast: #f8fafc;
+    --wi-color-contrast-fg: #0f172a;
+    --wi-color-contrast-hover: #e2e8f0;
+    --wi-color-contrast-active: #cbd5e1;
+    --wi-overlay-scrim: rgb(2 6 23 / 0.72);
+    --wi-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.45);
+    --wi-shadow-md: 0 0.75rem 2rem rgb(0 0 0 / 0.45);
+    --wi-shadow-lg: 0 1rem 3rem rgb(0 0 0 / 0.55);
+    --wi-shadow-sticky: 4px 0 8px color-mix(in srgb, #000 35%, transparent);
+    --wi-shadow-sticky-end: -4px 0 8px color-mix(in srgb, #000 35%, transparent);
+    --wi-terminal-bg: #020617;
+    --wi-terminal-fg: #e2e8f0;
+    --wi-terminal-prompt: #5eead4;
+    --wi-terminal-border: color-mix(in srgb, #fff 14%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    :root:not([data-wi-motion="full"]) {
+        --wi-motion-fast: 80ms;
+        --wi-motion-normal: 120ms;
+        --wi-motion-enter: 100ms;
+        --wi-motion-exit: 80ms;
+        --wi-motion-distance: 0;
+    }
+}

package/dist/tiered-menu/index.js

@@ -0,0 +1,150 @@
+import { n as e, t } from "../overlay-oR-5MDuE.js";
+import { c as n } from "../config-DWwce9jA.js";
+import "./style.js";
+import { Fragment as r, Teleport as i, Transition as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, normalizeClass as p, onBeforeUnmount as m, openBlock as h, ref as g, renderList as _, toDisplayString as v, watch as y, withCtx as b } from "vue";
+//#region src/components/TieredMenu/TieredMenu.vue?vue&type=script&setup=true&lang.ts
+var x = ["onMouseenter"], S = {
+	key: 0,
+	class: "wi-tieredmenu__separator",
+	role: "separator"
+}, C = [
+	"disabled",
+	"aria-haspopup",
+	"aria-expanded",
+	"onClick"
+], w = {
+	key: 0,
+	class: "wi-tieredmenu__caret",
+	"aria-hidden": "true"
+}, T = {
+	key: 2,
+	class: "wi-tieredmenu__submenu",
+	role: "menu"
+}, E = {
+	key: 0,
+	class: "wi-tieredmenu__separator",
+	role: "separator"
+}, D = ["disabled", "onClick"], O = ["onMouseenter"], k = {
+	key: 0,
+	class: "wi-tieredmenu__separator",
+	role: "separator"
+}, A = [
+	"disabled",
+	"aria-haspopup",
+	"aria-expanded",
+	"onClick"
+], j = {
+	key: 0,
+	class: "wi-tieredmenu__caret",
+	"aria-hidden": "true"
+}, M = {
+	key: 2,
+	class: "wi-tieredmenu__submenu",
+	role: "menu"
+}, N = {
+	key: 0,
+	class: "wi-tieredmenu__separator",
+	role: "separator"
+}, P = ["disabled", "onClick"], F = /* @__PURE__ */ f({
+	__name: "TieredMenu",
+	props: {
+		model: {},
+		popup: {
+			type: Boolean,
+			default: !1
+		},
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		teleport: {
+			type: Boolean,
+			default: !0
+		},
+		appendTo: {}
+	},
+	emits: ["update:modelValue"],
+	setup(f, { emit: F }) {
+		let I = f, L = F, R = n(), z = g(null), B = g(null), V = o(() => e(I.popup ? I : { teleport: !1 }, R.value.appendTo)), H = o(() => I.popup && t(I, R.value.appendTo));
+		function U(e) {
+			e.disabled || e.separator || e.items?.length || (e.command?.(), B.value = null, I.popup && L("update:modelValue", !1));
+		}
+		function W(e) {
+			e.disabled || e.separator || (e.command?.(), B.value = null, I.popup && L("update:modelValue", !1));
+		}
+		function G(e, t) {
+			if (t.disabled || !t.items?.length) {
+				B.value = null;
+				return;
+			}
+			B.value = e;
+		}
+		function K(e) {
+			z.value && !z.value.contains(e.target) && (B.value = null, I.popup && I.modelValue && L("update:modelValue", !1));
+		}
+		return y(() => !!(!I.popup || I.modelValue), (e) => {
+			e ? document.addEventListener("click", K) : document.removeEventListener("click", K);
+		}, { immediate: !0 }), m(() => document.removeEventListener("click", K)), (e, t) => f.popup ? (h(), s(i, {
+			key: 1,
+			to: V.value.to,
+			disabled: V.value.disabled
+		}, [d(a, { name: "wi-scale-fade" }, {
+			default: b(() => [f.modelValue ? (h(), l("div", {
+				key: 0,
+				ref_key: "root",
+				ref: z,
+				class: p(["wi-tieredmenu wi-tieredmenu--popup", { "wi-tieredmenu--teleported": H.value }]),
+				role: "menu"
+			}, [(h(!0), l(r, null, _(f.model, (e, t) => (h(), l("div", {
+				key: `${e.label ?? "sep"}-${t}`,
+				class: "wi-tieredmenu__row",
+				onMouseenter: (n) => G(t, e)
+			}, [e.separator ? (h(), l("div", k)) : (h(), l("button", {
+				key: 1,
+				type: "button",
+				class: "wi-tieredmenu__item",
+				role: "menuitem",
+				disabled: e.disabled,
+				"aria-haspopup": e.items?.length ? "menu" : void 0,
+				"aria-expanded": e.items?.length ? B.value === t : void 0,
+				onClick: (n) => e.items?.length ? G(t, e) : U(e)
+			}, [u("span", null, v(e.label), 1), e.items?.length ? (h(), l("span", j, "▸")) : c("", !0)], 8, A)), e.items?.length && B.value === t ? (h(), l("div", M, [(h(!0), l(r, null, _(e.items, (e, t) => (h(), l(r, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (h(), l("div", N)) : (h(), l("button", {
+				key: 1,
+				type: "button",
+				class: "wi-tieredmenu__item",
+				role: "menuitem",
+				disabled: e.disabled,
+				onClick: (t) => W(e)
+			}, v(e.label), 9, P))], 64))), 128))])) : c("", !0)], 40, O))), 128))], 2)) : c("", !0)]),
+			_: 1
+		})], 8, ["to", "disabled"])) : (h(), l("div", {
+			key: 0,
+			ref_key: "root",
+			ref: z,
+			class: "wi-tieredmenu",
+			role: "menu"
+		}, [(h(!0), l(r, null, _(f.model, (e, t) => (h(), l("div", {
+			key: `${e.label ?? "sep"}-${t}`,
+			class: "wi-tieredmenu__row",
+			onMouseenter: (n) => G(t, e)
+		}, [e.separator ? (h(), l("div", S)) : (h(), l("button", {
+			key: 1,
+			type: "button",
+			class: "wi-tieredmenu__item",
+			role: "menuitem",
+			disabled: e.disabled,
+			"aria-haspopup": e.items?.length ? "menu" : void 0,
+			"aria-expanded": e.items?.length ? B.value === t : void 0,
+			onClick: (n) => e.items?.length ? G(t, e) : U(e)
+		}, [u("span", null, v(e.label), 1), e.items?.length ? (h(), l("span", w, "▸")) : c("", !0)], 8, C)), e.items?.length && B.value === t ? (h(), l("div", T, [(h(!0), l(r, null, _(e.items, (e, t) => (h(), l(r, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (h(), l("div", E)) : (h(), l("button", {
+			key: 1,
+			type: "button",
+			class: "wi-tieredmenu__item",
+			role: "menuitem",
+			disabled: e.disabled,
+			onClick: (t) => W(e)
+		}, v(e.label), 9, D))], 64))), 128))])) : c("", !0)], 40, x))), 128))], 512));
+	}
+});
+//#endregion
+export { F as WiTieredMenu };