@revolist/ui 4.0.2-rc → 4.0.2

package/formatting/index.js

@@ -2,17 +2,18 @@ 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 { ButtonControl as i, Input as a, Select as o, Summary as s } from "../native-control.js";
+import { i, l as a, n as o, t as s } from "../_chunks/native-control-B_fVA5bL.js";
 import { t as c } from "../_chunks/chevron-down-GbplLa6s.js";
-import { n as l, t as u } from "../_chunks/control-tooltip-ztgmsG7H.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: i, expandLabel: a, collapseLabel: o, open: u = !1, children: d }) {
-	let [f, p] = t(u), m = f ? o : a, 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,
 		onToggle: (e) => p(e.currentTarget.open),
-		children: [/* @__PURE__ */ n(s, {
+		children: [/* @__PURE__ */ n(i, {
 			class: "rv-format-inspector-section__summary",
 			"aria-label": m,
 			"aria-expanded": f,
@@ -21,7 +22,7 @@ function d({ title: e, icon: i, expandLabel: a, collapseLabel: o, open: u = !1,
 				/* @__PURE__ */ n("span", {
 					class: "rv-format-inspector-section__title",
 					children: [/* @__PURE__ */ n(r, {
-						svg: i,
+						svg: a,
 						className: "rv-format-icon"
 					}), e]
 				}),
@@ -39,16 +40,16 @@ function d({ title: e, icon: i, expandLabel: a, collapseLabel: o, 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,29 +57,29 @@ 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: a }) {
-	let o = l(t);
-	return /* @__PURE__ */ n(i, {
+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" : ""}`,
 		"aria-label": t,
 		"aria-pressed": e,
-		onClick: a,
-		...o.triggerProps,
-		children: [/* @__PURE__ */ n(f, { icon: r }), o.tooltip]
+		onClick: i,
+		...a.triggerProps,
+		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", {
@@ -94,24 +95,28 @@ function _({ value: t, fonts: r = g, labels: i, icons: s, onChange: c }) {
 			children: [/* @__PURE__ */ n("span", {
 				class: "rv-field__label",
 				children: i.fontFamily
-			}), /* @__PURE__ */ n(o, {
-				class: "rv-control",
+			}), /* @__PURE__ */ n(a, {
+				className: "rv-select",
 				value: t.fontFamily ?? "",
-				onChange: (e) => c({ fontFamily: e.currentTarget.value || void 0 }),
-				children: [/* @__PURE__ */ n("option", {
+				source: [{
 					value: "",
-					children: i.defaultFont
-				}), r.map((e) => /* @__PURE__ */ n("option", {
+					label: i.defaultFont
+				}, ...r.map((e) => ({
 					value: e,
-					children: e
-				}, e))]
+					label: e
+				}))],
+				config: {
+					ariaLabel: i.fontFamily,
+					topLayer: !0
+				},
+				onChange: (e) => c({ fontFamily: String(e) || void 0 })
 			})]
 		}), /* @__PURE__ */ n("label", {
 			class: "rv-field",
 			children: [/* @__PURE__ */ n("span", {
 				class: "rv-field__label",
 				children: i.fontSize
-			}), /* @__PURE__ */ n(a, {
+			}), /* @__PURE__ */ n(o, {
 				type: "number",
 				class: "rv-control",
 				min: 8,
@@ -125,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,
@@ -154,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: [
@@ -194,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,
@@ -224,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

@@ -5,8 +5,7 @@
   display: grid;
   gap: 10px;
   padding: 14px 16px;
-  border-bottom: 1px solid
-    var(--rv-format-divider, var(--rv-ui-border));
+  border-bottom: 1px solid var(--rv-format-divider, var(--rv-ui-border));
 }
 
 .rv-format-preview__grid {
@@ -33,8 +32,7 @@
 
 .rv-format-preview__corner,
 .rv-format-preview__columnheader {
-  border-bottom: 1px solid
-    var(--rv-format-divider, var(--rv-ui-border));
+  border-bottom: 1px solid var(--rv-format-divider, var(--rv-ui-border));
 }
 
 .rv-format-preview__columnheader,
@@ -49,7 +47,9 @@
   font-weight: var(--rv-ui-font-weight-medium, 500);
 }
 
-.rv-format-preview__row { display: contents; }
+.rv-format-preview__row {
+  display: contents;
+}
 
 .rv-format-preview__row > :last-child {
   border-right: 0;
@@ -73,7 +73,9 @@
 }
 
 /* Percentage-width timelines need their renderer wrapper to fill the flex cell. */
-.rv-format-preview--visual .rv-format-preview__formatted > :first-child:has(.rv-timeline-container) {
+.rv-format-preview--visual
+  .rv-format-preview__formatted
+  > :first-child:has(.rv-timeline-container) {
   width: 100%;
   min-width: 0;
 }
@@ -98,8 +100,7 @@
 }
 
 .rv-format-inspector-section {
-  border-bottom: 1px solid
-    var(--rv-format-divider, var(--rv-ui-border));
+  border-bottom: 1px solid var(--rv-format-divider, var(--rv-ui-border));
 }
 
 .rv-format-inspector-section:last-child {
@@ -149,7 +150,8 @@
 .rv-format-inspector-section__chevron {
   flex: 0 0 auto;
   color: var(--rv-format-muted, var(--rv-ui-text-muted));
-  transition: transform var(--rv-ui-motion-normal, 160ms) var(--rv-ui-motion-ease, ease-out);
+  transition: transform var(--rv-ui-motion-normal, 160ms)
+    var(--rv-ui-motion-ease, ease-out);
 }
 
 .rv-format-inspector-section[open] .rv-format-inspector-section__chevron {
@@ -195,7 +197,8 @@
   color: inherit;
   cursor: pointer;
   transition:
-    background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out),
+    background-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, ease-out),
     color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out);
 }
 
@@ -216,59 +219,13 @@
   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;
   }
 }