@revolist/ui 4.0.1-rc → 4.0.1

package/formatting/index.js

@@ -1,83 +1,85 @@
-import { SvgIcon as e } from "../icons/icon.js";
-import { ButtonControl as t, Input as n, Select as r, Summary as i } from "../native-control.js";
-import { t as a } from "../_chunks/chevron-down-GbplLa6s.js";
-import { n as o, t as s } from "../_chunks/control-tooltip-BCNzQCXE.js";
-import { useState as c } from "preact/hooks";
-import { Fragment as l, jsx as u, jsxs as d } from "preact/jsx-runtime";
+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-B9MNibfa.js";
+import { t as c } from "../_chunks/chevron-down-GbplLa6s.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 f({ title: t, icon: n, expandLabel: r, collapseLabel: s, open: l = !1, children: f }) {
-	let [p, m] = c(l), h = p ? s : r, g = o(h);
-	return /* @__PURE__ */ d("details", {
+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: p,
-		onToggle: (e) => m(e.currentTarget.open),
-		children: [/* @__PURE__ */ d(i, {
+		open: f,
+		onToggle: (e) => p(e.currentTarget.open),
+		children: [/* @__PURE__ */ n(i, {
 			class: "rv-format-inspector-section__summary",
-			"aria-label": h,
-			"aria-expanded": p,
-			...g.triggerProps,
+			"aria-label": m,
+			"aria-expanded": f,
+			...h.triggerProps,
 			children: [
-				/* @__PURE__ */ d("span", {
+				/* @__PURE__ */ n("span", {
 					class: "rv-format-inspector-section__title",
-					children: [/* @__PURE__ */ u(e, {
-						svg: n,
+					children: [/* @__PURE__ */ n(r, {
+						svg: a,
 						className: "rv-format-icon"
-					}), t]
+					}), e]
 				}),
-				/* @__PURE__ */ u(e, {
-					svg: a,
+				/* @__PURE__ */ n(r, {
+					svg: c,
 					className: "rv-format-icon rv-format-inspector-section__chevron"
 				}),
-				g.tooltip
+				h.tooltip
 			]
-		}), /* @__PURE__ */ u("div", {
+		}), /* @__PURE__ */ n("div", {
 			class: "rv-format-inspector-section__content",
-			children: f
+			children: d
 		})]
 	});
 }
 //#endregion
 //#region src/formatting/icon-controls.tsx
-var p = ({ icon: t }) => /* @__PURE__ */ u(e, {
-	svg: t,
+var m = ({ icon: e }) => /* @__PURE__ */ n(r, {
+	svg: e,
 	className: "rv-format-icon"
 });
-function m({ value: e, options: t, ariaLabel: n, onChange: r }) {
-	return /* @__PURE__ */ u("div", {
+function h({ value: e, options: t, ariaLabel: r, onChange: i }) {
+	return /* @__PURE__ */ n("div", {
 		class: "rv-format-segmented",
 		role: "group",
-		"aria-label": n,
-		children: t.map((t) => /* @__PURE__ */ u(g, {
+		"aria-label": r,
+		children: t.map((t) => /* @__PURE__ */ n(_, {
 			selected: t.value === e,
 			label: t.label,
 			icon: t.icon,
-			onClick: () => r(t.value)
+			onClick: () => i(t.value)
 		}, t.value))
 	});
 }
-function h({ value: e, label: t, icon: n, onChange: r }) {
-	return /* @__PURE__ */ u(g, {
+function g({ value: e, label: t, icon: r, onChange: i }) {
+	return /* @__PURE__ */ n(_, {
 		selected: e,
 		label: t,
-		icon: n,
-		onClick: () => r(!e)
+		icon: r,
+		onClick: () => i(!e)
 	});
 }
-function g({ selected: e, label: n, icon: r, onClick: i }) {
-	let a = o(n);
-	return /* @__PURE__ */ d(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" : ""}`,
-		"aria-label": n,
+		"aria-label": t,
 		"aria-pressed": e,
 		onClick: i,
 		...a.triggerProps,
-		children: [/* @__PURE__ */ u(p, { icon: r }), a.tooltip]
+		children: [/* @__PURE__ */ n(m, { icon: r }), a.tooltip]
 	});
 }
 //#endregion
 //#region src/formatting/typography-controls.tsx
-var _ = [
+var v = [
 	"Inter",
 	"Arial",
 	"Helvetica",
@@ -85,128 +87,132 @@ var _ = [
 	"Times New Roman",
 	"Courier New"
 ];
-function v({ value: e, fonts: t = _, labels: i, icons: a, onChange: o }) {
-	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ d("div", {
+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__ */ d("label", {
+		children: [/* @__PURE__ */ n("label", {
 			class: "rv-field",
-			children: [/* @__PURE__ */ u("span", {
+			children: [/* @__PURE__ */ n("span", {
 				class: "rv-field__label",
 				children: i.fontFamily
-			}), /* @__PURE__ */ d(r, {
-				class: "rv-control",
-				value: e.fontFamily ?? "",
-				onChange: (e) => o({ fontFamily: e.currentTarget.value || void 0 }),
-				children: [/* @__PURE__ */ u("option", {
+			}), /* @__PURE__ */ n(a, {
+				className: "rv-select",
+				value: t.fontFamily ?? "",
+				source: [{
 					value: "",
-					children: i.defaultFont
-				}), t.map((e) => /* @__PURE__ */ u("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__ */ d("label", {
+		}), /* @__PURE__ */ n("label", {
 			class: "rv-field",
-			children: [/* @__PURE__ */ u("span", {
+			children: [/* @__PURE__ */ n("span", {
 				class: "rv-field__label",
 				children: i.fontSize
-			}), /* @__PURE__ */ u(n, {
+			}), /* @__PURE__ */ n(o, {
 				type: "number",
 				class: "rv-control",
 				min: 8,
 				max: 72,
-				value: e.fontSize ?? "",
-				onInput: (e) => o({ fontSize: Number.isFinite(e.currentTarget.valueAsNumber) ? e.currentTarget.valueAsNumber : void 0 })
+				value: t.fontSize ?? "",
+				onInput: (e) => c({ fontSize: Number.isFinite(e.currentTarget.valueAsNumber) ? e.currentTarget.valueAsNumber : void 0 })
 			})]
 		})]
-	}), /* @__PURE__ */ d("div", {
+	}), /* @__PURE__ */ n("div", {
 		class: "rv-format-segmented rv-format-typography-toolbar",
 		role: "group",
 		"aria-label": i.typographySection,
 		children: [
-			/* @__PURE__ */ u(h, {
-				value: e.bold ?? !1,
+			/* @__PURE__ */ n(g, {
+				value: t.bold ?? !1,
 				label: i.bold,
-				icon: a.bold,
-				onChange: (e) => o({ bold: e })
+				icon: s.bold,
+				onChange: (e) => c({ bold: e })
 			}),
-			/* @__PURE__ */ u(h, {
-				value: e.italic ?? !1,
+			/* @__PURE__ */ n(g, {
+				value: t.italic ?? !1,
 				label: i.italic,
-				icon: a.italic,
-				onChange: (e) => o({ italic: e })
+				icon: s.italic,
+				onChange: (e) => c({ italic: e })
 			}),
-			/* @__PURE__ */ u(h, {
-				value: e.underline ?? !1,
+			/* @__PURE__ */ n(g, {
+				value: t.underline ?? !1,
 				label: i.underline,
-				icon: a.underline,
-				onChange: (e) => o({ underline: e })
+				icon: s.underline,
+				onChange: (e) => c({ underline: e })
 			}),
-			/* @__PURE__ */ u(h, {
-				value: e.strike ?? !1,
+			/* @__PURE__ */ n(g, {
+				value: t.strike ?? !1,
 				label: i.strike,
-				icon: a.strike,
-				onChange: (e) => o({ strike: e })
+				icon: s.strike,
+				onChange: (e) => c({ strike: e })
 			})
 		]
 	})] });
 }
 //#endregion
 //#region src/formatting/comparison-preview.tsx
-function y({ originalValue: e, formatted: t, formattedStyle: n, visual: r = !1, formattedClassName: i = "", labels: a }) {
-	return /* @__PURE__ */ d("section", {
-		class: `rv-format-preview${r ? " rv-format-preview--visual" : ""}`,
+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: [
-			/* @__PURE__ */ u("h3", {
+			/* @__PURE__ */ n("h3", {
 				class: "rv-format-pane-title",
-				children: a.title
+				children: o.title
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ n("div", {
 				class: "rv-format-preview__grid",
 				role: "table",
-				"aria-label": a.title,
-				children: [/* @__PURE__ */ d("div", {
+				"aria-label": o.title,
+				children: [/* @__PURE__ */ n("div", {
 					class: "rv-format-preview__row",
 					role: "row",
 					children: [
-						/* @__PURE__ */ u("span", {
+						/* @__PURE__ */ n("span", {
 							class: "rv-format-preview__corner",
 							role: "cell"
 						}),
-						/* @__PURE__ */ u("span", {
+						/* @__PURE__ */ n("span", {
 							class: "rv-format-preview__columnheader",
 							role: "columnheader",
-							children: a.original
+							children: o.original
 						}),
-						/* @__PURE__ */ u("span", {
+						/* @__PURE__ */ n("span", {
 							class: "rv-format-preview__columnheader",
 							role: "columnheader",
-							children: a.formatted
+							children: o.formatted
 						})
 					]
-				}), /* @__PURE__ */ d("div", {
+				}), /* @__PURE__ */ n("div", {
 					class: "rv-format-preview__row",
 					role: "row",
 					children: [
-						/* @__PURE__ */ u("span", {
+						/* @__PURE__ */ n("span", {
 							class: "rv-format-preview__rowheader",
 							role: "rowheader",
 							children: "1"
 						}),
-						/* @__PURE__ */ u("span", {
+						/* @__PURE__ */ n(f, {
 							class: "rv-format-preview__gridcell",
 							role: "cell",
 							title: e,
-							children: /* @__PURE__ */ u("span", {
+							children: /* @__PURE__ */ n("span", {
 								class: "rv-format-preview__original-value",
 								children: e
 							})
 						}),
-						/* @__PURE__ */ u("span", {
-							class: `rv-format-preview__gridcell rv-format-preview__formatted ${i}`,
+						/* @__PURE__ */ n("span", {
+							class: `rv-format-preview__gridcell rv-format-preview__formatted ${a}`,
 							role: "cell",
-							style: n,
-							children: /* @__PURE__ */ u("span", {
+							style: r,
+							children: /* @__PURE__ */ n("span", {
 								role: "status",
 								"aria-live": "polite",
 								children: t
@@ -215,12 +221,12 @@ function y({ originalValue: e, formatted: t, formattedStyle: n, visual: r = !1,
 					]
 				})]
 			}),
-			/* @__PURE__ */ u("p", {
+			/* @__PURE__ */ n("p", {
 				class: "rv-format-preview__hint",
-				children: a.hint
+				children: o.hint
 			})
 		]
 	});
 }
 //#endregion
-export { y as ComparisonPreview, s as ControlTooltip, m as IconChoiceGroup, h as IconToggleButton, f as InspectorSection, v as TypographyControls, o 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/inspector-section.d.ts

@@ -1,4 +1,4 @@
-import { h, ComponentChildren } from 'preact';
+import { h, ComponentChildren } from '../_vendor/preact/src/index';
 export declare function InspectorSection({ title, icon, expandLabel, collapseLabel, open, children, }: {
     readonly title: string;
     readonly icon: string;

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

package/formatting/typography-controls.d.ts

@@ -1,4 +1,4 @@
-import { h } from 'preact';
+import { h } from '../_vendor/preact/src/index';
 export interface TypographyValue {
     readonly fontFamily?: string;
     readonly fontSize?: number;

package/framework-mount.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType, VNode } from 'preact';
+import { ComponentType, VNode } from './_vendor/preact/src/index';
 export interface UiContentTarget<T> {
     id: number;
     element: HTMLElement;