@stll/folio-react 0.0.1-placeholder.0 → 0.1.0

package/dist/folio-ui-o_rftArH.js

@@ -0,0 +1,483 @@
+import { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { Popover } from "@base-ui/react/popover";
+import { Dialog } from "@base-ui/react/dialog";
+import { Input } from "@base-ui/react/input";
+import { Menu } from "@base-ui/react/menu";
+import { Select } from "@base-ui/react/select";
+//#region src/lib/utils.ts
+/** Merge class names, filtering out falsy values. */
+function cn(...inputs) {
+	return inputs.filter(Boolean).join(" ");
+}
+//#endregion
+//#region src/ui/defaults/button.tsx
+/**
+* Built-in, dependency-free Button used when a consumer does not inject one.
+*
+* Renders a native, accessible `<button>` honoring the `FolioButtonProps`
+* subset. The minimal default styling lives in `editor.css`
+* (`.folio-default-button*` classes, keyed off folio's `--doc-*` variables with
+* safe fallbacks) rather than inline styles, so a caller's `className` can
+* override the defaults through the normal cascade. Consumers that want
+* polished chrome inject their own design-system Button via `DocxEditor`'s
+* `components` prop.
+*/
+function DefaultButton({ variant = "default", size = "sm", className, children, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cn("folio-default-button", `folio-default-button--${variant}`, `folio-default-button--${size}`, className),
+		...props,
+		children
+	});
+}
+//#endregion
+//#region src/ui/defaults/checkbox.tsx
+/**
+* Built-in, dependency-light Checkbox used when a consumer does not inject one.
+* Wraps `@base-ui/react`'s accessible Checkbox primitive with a minimal check
+* indicator; consumers inject their own design-system Checkbox for full polish.
+*/
+function DefaultCheckbox({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		className: cn("folio-default-checkbox", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			className: "folio-default-checkbox-indicator",
+			children: /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				fill: "none",
+				height: "14",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "3",
+				viewBox: "0 0 24 24",
+				width: "14",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ jsx("path", { d: "M5.252 12.7 10.2 18.63 18.748 5.37" })
+			})
+		})
+	});
+}
+//#endregion
+//#region src/ui/defaults/color-picker.tsx
+/**
+* Built-in, dependency-light ColorPicker used when a consumer does not inject
+* one. Wraps `@base-ui/react`'s Popover primitive (focus management,
+* portalling, collision-aware positioning) and renders the `presets` as a row
+* of swatch buttons plus a native `<input type="color">` for a custom color.
+* `onSelect` emits a preset value or a 6-char uppercase hex (no `#`), matching
+* the design-system ColorPicker contract. Consumers inject a polished picker
+* via `DocxEditor`'s `components` prop.
+*/
+const swatchColor = (preset) => preset.color ?? `#${preset.value}`;
+const normalizeHex = (hex) => hex.replace(/^#/u, "").toUpperCase();
+const EMPTY_PRESETS = [];
+function DefaultColorPicker({ value, onSelect, onClear, presets = EMPTY_PRESETS, columns = 8, children }) {
+	return /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+		nativeButton: false,
+		render: /* @__PURE__ */ jsx("div", { className: "folio-default-color-picker-trigger" }),
+		children
+	}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		align: "start",
+		className: "folio-default-popover-positioner",
+		side: "bottom",
+		sideOffset: 4,
+		children: /* @__PURE__ */ jsxs(Popover.Popup, {
+			className: "folio-default-color-picker-popup",
+			children: [
+				onClear && /* @__PURE__ */ jsx(Popover.Close, {
+					className: "folio-default-color-picker-clear",
+					onClick: onClear,
+					children: "No color"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "folio-default-color-picker-swatches",
+					style: { gridTemplateColumns: `repeat(${columns}, 1fr)` },
+					children: presets.map((preset) => /* @__PURE__ */ jsx(Popover.Close, {
+						"aria-label": preset.label,
+						className: cn("folio-default-color-picker-swatch", value === preset.value && "folio-default-color-picker-swatch--selected"),
+						onClick: () => onSelect?.(preset.value),
+						style: { backgroundColor: swatchColor(preset) },
+						title: preset.label
+					}, preset.value))
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "folio-default-color-picker-custom",
+					children: ["Custom", /* @__PURE__ */ jsx("input", {
+						"aria-label": "Custom color",
+						onChange: (event) => onSelect?.(normalizeHex(event.target.value)),
+						type: "color",
+						value: value ? `#${normalizeHex(value)}` : "#000000"
+					})]
+				})
+			]
+		})
+	}) })] });
+}
+//#endregion
+//#region src/ui/defaults/date-picker-popover.tsx
+/**
+* Built-in, dependency-light DatePickerPopover used when a consumer does not
+* inject one. Renders a native `<input type="date">` whose value is an ISO
+* `yyyy-mm-dd` string; `onChange` emits that string (or `null` when cleared),
+* matching the design-system picker contract. Consumers inject a polished
+* calendar via `DocxEditor`'s `components` prop.
+*/
+const toISODate = (value) => {
+	if (value === null) return "";
+	if (value instanceof Date) return `${value.getFullYear().toString().padStart(4, "0")}-${(value.getMonth() + 1).toString().padStart(2, "0")}-${value.getDate().toString().padStart(2, "0")}`;
+	return value.length >= 10 ? value.slice(0, 10) : value;
+};
+function DefaultDatePickerPopover({ value, onChange, defaultOpen = false }) {
+	return /* @__PURE__ */ jsx("input", {
+		autoFocus: defaultOpen,
+		className: "folio-default-date-input",
+		onChange: (event) => onChange(event.target.value || null),
+		type: "date",
+		value: toISODate(value)
+	});
+}
+//#endregion
+//#region src/ui/defaults/dialog.tsx
+/**
+* Built-in, dependency-light Dialog parts used when a consumer does not inject
+* its own. Each part wraps the matching `@base-ui/react` primitive — the same
+* accessible primitive the app design system wraps — with minimal styling.
+* Folio's chrome positions the popup itself via `className`, so the default
+* popup is a bare portalled surface (no viewport grid); consumers inject a
+* polished Dialog through `DocxEditor`'s `components` prop.
+*/
+function DefaultDialogRoot(props) {
+	return /* @__PURE__ */ jsx(Dialog.Root, { ...props });
+}
+function DefaultDialogPortal(props) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, { ...props });
+}
+function DefaultDialogBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		className: cn("folio-default-dialog-backdrop", className),
+		...props
+	});
+}
+function DefaultDialogPopup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Popup, {
+		className: cn("folio-default-dialog-popup", className),
+		...props
+	});
+}
+function DefaultDialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		className: cn("folio-default-dialog-title", className),
+		...props
+	});
+}
+function DefaultDialogClose({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		className: cn("folio-default-dialog-close", className),
+		...props
+	});
+}
+const DefaultDialog = {
+	Root: DefaultDialogRoot,
+	Portal: DefaultDialogPortal,
+	Backdrop: DefaultDialogBackdrop,
+	Popup: DefaultDialogPopup,
+	Title: DefaultDialogTitle,
+	Close: DefaultDialogClose
+};
+//#endregion
+//#region src/ui/defaults/input.tsx
+/**
+* Built-in, dependency-light Input used when a consumer does not inject one.
+*
+* Wraps `@base-ui/react`'s Input primitive, honoring the `nativeInput` escape
+* hatch (render a plain `<input>` when the caller needs uncontrolled native
+* behavior) and folio's `size` shorthand. Styling is intentionally minimal;
+* consumers inject their own design-system Input for full polish.
+*/
+function DefaultInput({ className, size = "default", nativeInput = false, ...props }) {
+	const inputClassName = cn("folio-default-input", className);
+	const numericSize = typeof size === "number" ? size : void 0;
+	if (nativeInput) return /* @__PURE__ */ jsx("input", {
+		className: inputClassName,
+		"data-size": typeof size === "string" ? size : void 0,
+		size: numericSize,
+		...props
+	});
+	return /* @__PURE__ */ jsx(Input, {
+		className: inputClassName,
+		"data-size": typeof size === "string" ? size : void 0,
+		size: numericSize,
+		...props
+	});
+}
+//#endregion
+//#region src/ui/defaults/menu.tsx
+/**
+* Built-in, dependency-light Menu parts used when a consumer does not inject
+* its own. Each part wraps the matching `@base-ui/react` primitive (real
+* keyboard navigation, portalling, collision-aware positioning) with minimal
+* styling. Consumers inject a polished Menu via `DocxEditor`'s `components`
+* prop.
+*/
+function DefaultMenuRoot(props) {
+	return /* @__PURE__ */ jsx(Menu.Root, { ...props });
+}
+function DefaultMenuTrigger({ nativeButton = true, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		nativeButton,
+		...props
+	});
+}
+function DefaultMenuPopup({ className, children, align = "center", side = "bottom", sideOffset = 4, alignOffset, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		align,
+		alignOffset,
+		className: "folio-default-menu-positioner",
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			className: cn("folio-default-menu-popup", className),
+			...props,
+			children
+		})
+	}) });
+}
+function DefaultMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		className: cn("folio-default-menu-item", className),
+		...props
+	});
+}
+function DefaultMenuCheckboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		className: cn("folio-default-menu-checkbox-item", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
+			className: "folio-default-menu-checkbox-indicator",
+			children: /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				fill: "none",
+				height: "14",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "3",
+				viewBox: "0 0 24 24",
+				width: "14",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ jsx("path", { d: "M5.252 12.7 10.2 18.63 18.748 5.37" })
+			})
+		}), /* @__PURE__ */ jsx("span", { children })]
+	});
+}
+function DefaultMenuGroup(props) {
+	return /* @__PURE__ */ jsx(Menu.Group, { ...props });
+}
+function DefaultMenuGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		className: cn("folio-default-menu-group-label", className),
+		...props
+	});
+}
+function DefaultMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		className: cn("folio-default-menu-separator", className),
+		...props
+	});
+}
+const DefaultMenu = {
+	Root: DefaultMenuRoot,
+	Trigger: DefaultMenuTrigger,
+	Popup: DefaultMenuPopup,
+	Item: DefaultMenuItem,
+	CheckboxItem: DefaultMenuCheckboxItem,
+	Group: DefaultMenuGroup,
+	GroupLabel: DefaultMenuGroupLabel,
+	Separator: DefaultMenuSeparator
+};
+//#endregion
+//#region src/ui/defaults/outline-rail.tsx
+/**
+* Built-in, dependency-light OutlineRail used when a consumer does not inject
+* one. Renders the outline as a plain semantic `<nav>` list of clickable
+* entries indented by level; clicking an entry calls `onJump` with the resolved
+* scroll container. Consumers inject the polished tick-rail + hover panel via
+* `DocxEditor`'s `components` prop.
+*/
+function DefaultOutlineRail({ items, scrollContainerRef, onJump, activeId, topOffset = 0, panelWidth = 300, ariaLabel = "Outline" }) {
+	if (items.length < 2) return null;
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": ariaLabel,
+		className: "folio-default-outline-rail",
+		style: {
+			top: topOffset,
+			width: panelWidth
+		},
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "folio-default-outline-list",
+			children: items.map((item) => {
+				const isActive = item.id === activeId;
+				return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+					"aria-current": isActive ? "true" : void 0,
+					className: cn("folio-default-outline-item", isActive && "folio-default-outline-item--active"),
+					onClick: () => {
+						const container = scrollContainerRef.current;
+						if (container) onJump(item.id, container);
+					},
+					style: { paddingInlineStart: `${item.level * 12 + 8}px` },
+					title: item.label,
+					type: "button",
+					children: item.label
+				}) }, item.id);
+			})
+		})
+	});
+}
+//#endregion
+//#region src/ui/defaults/popover.tsx
+/**
+* Built-in, dependency-light Popover parts used when a consumer does not inject
+* its own. Each part wraps the matching `@base-ui/react` primitive (real focus
+* management, portalling, and collision-aware positioning) with minimal
+* styling. Consumers inject a polished Popover via `DocxEditor`'s `components`
+* prop.
+*/
+function DefaultPopoverRoot(props) {
+	return /* @__PURE__ */ jsx(Popover.Root, { ...props });
+}
+function DefaultPopoverTrigger(props) {
+	return /* @__PURE__ */ jsx(Popover.Trigger, { ...props });
+}
+function DefaultPopoverPopup({ className, children, side = "bottom", align = "center", sideOffset = 4, alignOffset = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		align,
+		alignOffset,
+		className: "folio-default-popover-positioner",
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(Popover.Popup, {
+			className: cn("folio-default-popover-popup", className),
+			...props,
+			children
+		})
+	}) });
+}
+function DefaultPopoverClose(props) {
+	return /* @__PURE__ */ jsx(Popover.Close, { ...props });
+}
+const DefaultPopover = {
+	Root: DefaultPopoverRoot,
+	Trigger: DefaultPopoverTrigger,
+	Popup: DefaultPopoverPopup,
+	Close: DefaultPopoverClose
+};
+//#endregion
+//#region src/ui/defaults/select.tsx
+/**
+* Built-in, dependency-light Select parts used when a consumer does not inject
+* its own. Each part wraps the matching `@base-ui/react` primitive (real
+* listbox semantics, keyboard navigation, portalled positioning) with minimal
+* styling. The default popup omits the scroll arrows and item-aligned
+* positioning of a fully styled design-system Select; consumers inject their
+* own Select via `DocxEditor`'s `components` prop for that polish.
+*/
+function DefaultSelectRoot(props) {
+	return /* @__PURE__ */ jsx(Select.Root, { ...props });
+}
+function DefaultSelectTrigger({ className, children, size, ...props }) {
+	return /* @__PURE__ */ jsxs(Select.Trigger, {
+		className: cn("folio-default-select-trigger", className),
+		"data-size": size,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Select.Icon, {
+			className: "folio-default-select-icon",
+			children: /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				fill: "none",
+				height: "16",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2",
+				viewBox: "0 0 24 24",
+				width: "16",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" })
+			})
+		})]
+	});
+}
+function DefaultSelectValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Value, {
+		className: cn("folio-default-select-value", className),
+		...props
+	});
+}
+function DefaultSelectPopup({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
+		align: "start",
+		className: "folio-default-select-positioner",
+		side: "bottom",
+		sideOffset: 4,
+		children: /* @__PURE__ */ jsx(Select.Popup, {
+			className: cn("folio-default-select-popup", className),
+			...props,
+			children: /* @__PURE__ */ jsx(Select.List, { children })
+		})
+	}) });
+}
+function DefaultSelectItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Item, {
+		className: cn("folio-default-select-item", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Select.ItemText, { children })
+	});
+}
+//#endregion
+//#region src/ui/folio-ui.tsx
+const DEFAULT_COMPONENTS = {
+	Button: DefaultButton,
+	Dialog: DefaultDialog,
+	Select: {
+		Root: DefaultSelectRoot,
+		Trigger: DefaultSelectTrigger,
+		Value: DefaultSelectValue,
+		Popup: DefaultSelectPopup,
+		Item: DefaultSelectItem
+	},
+	Menu: DefaultMenu,
+	Popover: DefaultPopover,
+	Input: DefaultInput,
+	Checkbox: DefaultCheckbox,
+	ColorPicker: DefaultColorPicker,
+	DatePickerPopover: DefaultDatePickerPopover,
+	OutlineRail: DefaultOutlineRail
+};
+const FolioUIContext = createContext(DEFAULT_COMPONENTS);
+/**
+* Merge a consumer's partial overrides over the built-in defaults: every key is
+* present (defaults fill the gaps), and each provided override wins. Pure, so
+* the resolution contract is unit-tested independently of React.
+*/
+function resolveFolioComponents(components) {
+	return components ? {
+		...DEFAULT_COMPONENTS,
+		...components
+	} : DEFAULT_COMPONENTS;
+}
+function FolioUIProvider({ components, children }) {
+	const value = resolveFolioComponents(components);
+	return /* @__PURE__ */ jsx(FolioUIContext.Provider, {
+		value,
+		children
+	});
+}
+function useFolioUI() {
+	return useContext(FolioUIContext);
+}
+//#endregion
+export { cn as i, FolioUIProvider as n, useFolioUI as r, DEFAULT_COMPONENTS as t };