@stll/folio-react 0.4.0 → 0.5.0

package/dist/folio-ui-CA59webC.js

@@ -1,490 +0,0 @@
-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 folio-root",
-		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({ children, ...props }) {
-	return /* @__PURE__ */ jsx(Dialog.Portal, {
-		...props,
-		children: /* @__PURE__ */ jsx("div", {
-			className: "folio-root",
-			style: { display: "contents" },
-			children
-		})
-	});
-}
-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 folio-root",
-		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 folio-root",
-		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 folio-root",
-		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 };