@revolist/ui 4.0.4-rc → 4.0.5-rc

package/form-controls/presentation.js

@@ -1,9 +1,9 @@
 import { i as e, o as t, u as n } from "../_chunks/preact.module-BBM36DnO.js";
 import { i as r, s as i } from "../_chunks/hooks.module-CG3gN83z.js";
 import { t as a } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
-import { t as o } from "../_chunks/field-context-D57PnBbH.js";
-import { nativeControlTag as s } from "../control-presentation.js";
-import { createControlId as c } from "../core/control-id.js";
+import { createControlId as o } from "../core/control-id.js";
+import { t as s } from "../_chunks/field-context-D57PnBbH.js";
+import { nativeControlTag as c } from "../control-presentation.js";
 //#region src/form-controls/presentation.tsx
 function l({ children: e, removeLabel: t, onRemove: n, className: r = "", removeClassName: i = "", role: o }) {
 	return /* @__PURE__ */ a("span", {
@@ -34,9 +34,9 @@ function u({ label: e, children: t, hint: n, hintId: r, labelId: i = r ? `${r}-l
 		}) : null
 	];
 }
-function d({ label: e, children: t, hint: n, hintId: s, labelId: l, controlId: d, className: f = "", class: p, ...m }) {
-	let [h] = r(() => c("rv-field")), g = i(o), _ = s ?? `rv-field-hint-${h}`, v = l ?? `${_}-label`;
-	return /* @__PURE__ */ a(o.Provider, {
+function d({ label: e, children: t, hint: n, hintId: c, labelId: l, controlId: d, className: f = "", class: p, ...m }) {
+	let [h] = r(() => o("rv-field")), g = i(s), _ = c ?? `rv-field-hint-${h}`, v = l ?? `${_}-label`;
+	return /* @__PURE__ */ a(s.Provider, {
 		value: {
 			disabled: g.disabled,
 			labelId: v,
@@ -64,21 +64,21 @@ function f(r, i, a) {
 	if (Array.isArray(r)) return r.map((e) => f(e, i, a));
 	if (!n(r)) return r;
 	if (r.type === e) return t(r, { children: f(r.props.children, i, a) });
-	let o = s(r.type);
+	let o = c(r.type);
 	if (!o) return r;
-	let c = r;
+	let s = r;
 	if ([
 		"input",
 		"select",
 		"textarea"
 	].includes(o)) {
-		let e = new Set(`${c.props["aria-describedby"] ?? ""} ${i}`.trim().split(/\s+/));
-		return t(c, {
+		let e = new Set(`${s.props["aria-describedby"] ?? ""} ${i}`.trim().split(/\s+/));
+		return t(s, {
 			"aria-describedby": [...e].join(" "),
-			"aria-labelledby": c.props["aria-labelledby"] ?? (c.props["aria-label"] ? void 0 : a)
+			"aria-labelledby": s.props["aria-labelledby"] ?? (s.props["aria-label"] ? void 0 : a)
 		});
 	}
-	return t(c, { children: f(c.props.children, i, a) });
+	return t(s, { children: f(s.props.children, i, a) });
 }
 function p({ children: e, icon: t, iconClassName: n = "", iconPosition: r = "before", className: i = "", class: o, ...s }) {
 	let c = t == null ? null : /* @__PURE__ */ a("span", {

package/formatting/control-tooltip.d.ts

@@ -1,27 +1,2 @@
-import { h, TargetedEvent } from '../_vendor/preact/src/index';
-export declare function useControlTooltip(text: string, floating?: boolean, presentation?: {
-    className?: string;
-    placement?: 'above';
-}): {
-    readonly id: string;
-    readonly hide: () => void;
-    readonly triggerProps: {
-        readonly 'aria-describedby': string;
-        readonly onFocus: (event: TargetedEvent<HTMLElement>) => void;
-        readonly onBlur: () => void;
-        readonly onMouseEnter: (event: TargetedEvent<HTMLElement>) => void;
-        readonly onMouseLeave: () => void;
-        readonly onPointerDown: (event: TargetedEvent<HTMLElement>) => void;
-        readonly onPointerCancel: () => void;
-        readonly onKeyDown: (event: KeyboardEvent) => void;
-    };
-    readonly tooltip: h.JSX.Element;
-};
-export declare function ControlTooltip({ id, text, visible, anchor, className, placement, }: {
-    readonly id: string;
-    readonly text: string;
-    readonly visible: boolean;
-    readonly anchor?: HTMLElement | null;
-    readonly className?: string;
-    readonly placement?: 'above';
-}): h.JSX.Element;
+/** Compatibility exports; all tooltip behavior is owned by the UI core. */
+export { useTooltip, useControlTooltip, ControlTooltip } from '../core/tooltip';

package/formatting/index.js

@@ -2,12 +2,13 @@ import { i as e } from "../_chunks/preact.module-BBM36DnO.js";
 import { i as t } from "../_chunks/hooks.module-CG3gN83z.js";
 import { t as n } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
 import { SvgIcon as r } from "../icons/icon.js";
-import { i, l as a, n as o, t as s } from "../_chunks/native-control-C_yok8_-.js";
+import { i, l as a, n as o, t as s } from "../_chunks/native-control-DO0d1kgx.js";
 import { t as c } from "../_chunks/chevron-down-GbplLa6s.js";
-import { n as l, t as u } from "../_chunks/control-tooltip-uscKfAnV.js";
+import { n as l, r as u, t as d } from "../_chunks/tooltip-D4xkio5G.js";
+import { t as f } from "../_chunks/tooltip-text-BXsUEmBH.js";
 //#region src/formatting/inspector-section.tsx
-function d({ title: e, icon: a, expandLabel: o, collapseLabel: s, open: u = !1, children: d }) {
-	let [f, p] = t(u), m = f ? s : o, h = l(m);
+function p({ title: e, icon: a, expandLabel: o, collapseLabel: s, open: u = !1, children: d }) {
+	let [f, p] = t(u), m = f ? s : o, h = l(m, !0);
 	return /* @__PURE__ */ n("details", {
 		class: "rv-format-inspector-section",
 		open: f,
@@ -39,16 +40,16 @@ function d({ title: e, icon: a, expandLabel: o, collapseLabel: s, open: u = !1,
 }
 //#endregion
 //#region src/formatting/icon-controls.tsx
-var f = ({ icon: e }) => /* @__PURE__ */ n(r, {
+var m = ({ icon: e }) => /* @__PURE__ */ n(r, {
 	svg: e,
 	className: "rv-format-icon"
 });
-function p({ value: e, options: t, ariaLabel: r, onChange: i }) {
+function h({ value: e, options: t, ariaLabel: r, onChange: i }) {
 	return /* @__PURE__ */ n("div", {
 		class: "rv-format-segmented",
 		role: "group",
 		"aria-label": r,
-		children: t.map((t) => /* @__PURE__ */ n(h, {
+		children: t.map((t) => /* @__PURE__ */ n(_, {
 			selected: t.value === e,
 			label: t.label,
 			icon: t.icon,
@@ -56,16 +57,16 @@ function p({ value: e, options: t, ariaLabel: r, onChange: i }) {
 		}, t.value))
 	});
 }
-function m({ value: e, label: t, icon: r, onChange: i }) {
-	return /* @__PURE__ */ n(h, {
+function g({ value: e, label: t, icon: r, onChange: i }) {
+	return /* @__PURE__ */ n(_, {
 		selected: e,
 		label: t,
 		icon: r,
 		onClick: () => i(!e)
 	});
 }
-function h({ selected: e, label: t, icon: r, onClick: i }) {
-	let a = l(t);
+function _({ selected: e, label: t, icon: r, onClick: i }) {
+	let a = l(t, !0);
 	return /* @__PURE__ */ n(s, {
 		type: "button",
 		class: `rv-format-segmented__button${e ? " rv-format-segmented__button--selected" : ""}`,
@@ -73,12 +74,12 @@ function h({ selected: e, label: t, icon: r, onClick: i }) {
 		"aria-pressed": e,
 		onClick: i,
 		...a.triggerProps,
-		children: [/* @__PURE__ */ n(f, { icon: r }), a.tooltip]
+		children: [/* @__PURE__ */ n(m, { icon: r }), a.tooltip]
 	});
 }
 //#endregion
 //#region src/formatting/typography-controls.tsx
-var g = [
+var v = [
 	"Inter",
 	"Arial",
 	"Helvetica",
@@ -86,7 +87,7 @@ var g = [
 	"Times New Roman",
 	"Courier New"
 ];
-function _({ value: t, fonts: r = g, labels: i, icons: s, onChange: c }) {
+function y({ value: t, fonts: r = v, labels: i, icons: s, onChange: c }) {
 	return /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ n("div", {
 		class: "rv-form-grid",
 		children: [/* @__PURE__ */ n("label", {
@@ -129,25 +130,25 @@ function _({ value: t, fonts: r = g, labels: i, icons: s, onChange: c }) {
 		role: "group",
 		"aria-label": i.typographySection,
 		children: [
-			/* @__PURE__ */ n(m, {
+			/* @__PURE__ */ n(g, {
 				value: t.bold ?? !1,
 				label: i.bold,
 				icon: s.bold,
 				onChange: (e) => c({ bold: e })
 			}),
-			/* @__PURE__ */ n(m, {
+			/* @__PURE__ */ n(g, {
 				value: t.italic ?? !1,
 				label: i.italic,
 				icon: s.italic,
 				onChange: (e) => c({ italic: e })
 			}),
-			/* @__PURE__ */ n(m, {
+			/* @__PURE__ */ n(g, {
 				value: t.underline ?? !1,
 				label: i.underline,
 				icon: s.underline,
 				onChange: (e) => c({ underline: e })
 			}),
-			/* @__PURE__ */ n(m, {
+			/* @__PURE__ */ n(g, {
 				value: t.strike ?? !1,
 				label: i.strike,
 				icon: s.strike,
@@ -158,7 +159,7 @@ function _({ value: t, fonts: r = g, labels: i, icons: s, onChange: c }) {
 }
 //#endregion
 //#region src/formatting/comparison-preview.tsx
-function v({ originalValue: e, formatted: t, formattedStyle: r, visual: i = !1, formattedClassName: a = "", labels: o }) {
+function b({ originalValue: e, formatted: t, formattedStyle: r, visual: i = !1, formattedClassName: a = "", labels: o }) {
 	return /* @__PURE__ */ n("section", {
 		class: `rv-format-preview${i ? " rv-format-preview--visual" : ""}`,
 		children: [
@@ -198,7 +199,7 @@ function v({ originalValue: e, formatted: t, formattedStyle: r, visual: i = !1,
 							role: "rowheader",
 							children: "1"
 						}),
-						/* @__PURE__ */ n("span", {
+						/* @__PURE__ */ n(f, {
 							class: "rv-format-preview__gridcell",
 							role: "cell",
 							title: e,
@@ -228,4 +229,4 @@ function v({ originalValue: e, formatted: t, formattedStyle: r, visual: i = !1,
 	});
 }
 //#endregion
-export { v as ComparisonPreview, u as ControlTooltip, p as IconChoiceGroup, m as IconToggleButton, d as InspectorSection, _ as TypographyControls, l as useControlTooltip };
+export { b as ComparisonPreview, d as ControlTooltip, h as IconChoiceGroup, g as IconToggleButton, p as InspectorSection, y as TypographyControls, l as useControlTooltip, u as useTooltip };

package/formatting/styles.scss

@@ -216,59 +216,14 @@
   box-shadow: none;
 }
 
-.rv-format-control-tooltip {
-  position: absolute;
-  z-index: 4;
-  top: calc(100% + 7px);
-  left: 50%;
-  width: max-content;
-  max-width: 220px;
-  padding: 5px 8px;
-  border: 1px solid var(--rv-format-divider, var(--rv-ui-border));
-  border-radius: 6px;
-  background: var(--rv-dialog-color, var(--rv-ui-text));
-  color: var(--rv-dialog-bg, var(--rv-ui-surface));
-  box-shadow: 0 6px 16px var(--rv-ui-shadow);
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1.3;
-  opacity: 0;
-  pointer-events: none;
-  transform: translate(-50%, -2px);
-  transition:
-    opacity var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out),
-    transform var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out);
-}
-
-.rv-format-inspector-section__summary > .rv-format-control-tooltip {
-  right: 0;
-  left: auto;
-  transform: translateY(-2px);
-}
-
-.rv-format-control-tooltip[data-visible='true'] {
-  opacity: 1;
-  transform: translate(-50%, 0);
-}
-
-.rv-format-inspector-section__summary
-  > .rv-format-control-tooltip[data-visible='true'] {
-  transform: translateY(0);
-}
-
 @media (forced-colors: active) {
   .rv-format-segmented__button--selected {
     outline: 2px solid Highlight;
   }
-  .rv-format-control-tooltip {
-    border: 1px solid CanvasText;
-    background: Canvas;
-    color: CanvasText;
-  }
+
 }
 @media (prefers-reduced-motion: reduce) {
-  .rv-format-inspector-section__chevron,
-  .rv-format-control-tooltip {
+  .rv-format-inspector-section__chevron {
     transition: none;
   }
 }