@revolist/ui 4.0.4-rc → 4.0.6-rc

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-pFMuHf3G.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;
   }
 }