@aortl/admin-react 0.12.1 → 0.13.1

package/dist/index.cjs

@@ -4,12 +4,12 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 let _base_ui_react_button = require("@base-ui/react/button");
 let _base_ui_react_input = require("@base-ui/react/input");
+let _base_ui_react_field = require("@base-ui/react/field");
 let _base_ui_react_checkbox = require("@base-ui/react/checkbox");
 let _base_ui_react_radio = require("@base-ui/react/radio");
 let _base_ui_react_radio_group = require("@base-ui/react/radio-group");
 let _base_ui_react_switch = require("@base-ui/react/switch");
 let _base_ui_react_select = require("@base-ui/react/select");
-let _base_ui_react_field = require("@base-ui/react/field");
 let _base_ui_react_tabs = require("@base-ui/react/tabs");
 let _base_ui_react_tooltip = require("@base-ui/react/tooltip");
 let _base_ui_react_dialog = require("@base-ui/react/dialog");
@@ -65,17 +65,40 @@ var Accordion = Object.assign(AccordionRoot, {
 	Content: AccordionContent
 });
 //#endregion
+//#region src/portal-context.ts
+/**
+* Container that Base UI popups (Select, Tooltip, etc.) should portal into.
+* `<AdminRoot>` publishes its own element here so popups render inside the
+* scoped subtree and match the `@scope (._ao-admin-root)` CSS — without it
+* they portal to `document.body`, outside the scope, and render unstyled. A
+* `<Dialog>` ancestor overrides it with its own `<dialog>` element so popups
+* join the top layer, painting above the backdrop and escaping its
+* `overflow: hidden`. With no provider the context is null and popups fall
+* back to `document.body`.
+*/
+var PortalContainerContext = (0, react.createContext)(null);
+//#endregion
 //#region src/AdminRoot.tsx
-function AdminRoot({ className, theme, systemAccent, style, ...rest }) {
+function AdminRoot({ className, theme, systemAccent, style, ref, ...rest }) {
 	const rootStyle = systemAccent !== void 0 ? {
 		...style,
 		"--color-system-accent": systemAccent
 	} : style;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: cn("admin-root", className),
-		style: rootStyle,
-		...rest,
-		...theme !== void 0 && { "data-theme": theme }
+	const portalRef = (0, react.useRef)(null);
+	const setRef = (0, react.useCallback)((node) => {
+		portalRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PortalContainerContext.Provider, {
+		value: portalRef,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: setRef,
+			className: cn("admin-root", className),
+			style: rootStyle,
+			...rest,
+			...theme !== void 0 && { "data-theme": theme }
+		})
 	});
 }
 //#endregion
@@ -208,9 +231,22 @@ var MOD_ORDER = [
 	"alt",
 	"meta"
 ];
+/**
+* Resolve the modifier `mod` aliases to. Apple platforms use ⌘ (`meta`) as the
+* primary command modifier; everywhere else it's Ctrl. Detected once at module
+* load (SSR-safe — the registry never dispatches server-side) and shared by the
+* parse and display layers so the binding and its `<Kbd>` chip always agree.
+*/
+function detectApplePlatform() {
+	if (typeof navigator === "undefined") return false;
+	const platform = navigator.userAgentData?.platform || navigator.platform || "";
+	return /^(mac|iphone|ipad|ipod)/i.test(platform);
+}
+var IS_APPLE = detectApplePlatform();
+var MOD_TARGET = IS_APPLE ? "meta" : "ctrl";
 function tokenToMod(token) {
 	switch (token) {
-		case "mod":
+		case "mod": return MOD_TARGET;
 		case "ctrl":
 		case "control": return "ctrl";
 		case "shift": return "shift";
@@ -259,7 +295,7 @@ function normalizeEvent(e) {
 	if (key === "control" || key === "shift" || key === "alt" || key === "meta") return null;
 	const mods = /* @__PURE__ */ new Set();
 	if (e.ctrlKey) mods.add("ctrl");
-	if (e.shiftKey) mods.add("shift");
+	if (e.shiftKey && !isShiftedSymbol(key)) mods.add("shift");
 	if (e.altKey) mods.add("alt");
 	if (e.metaKey) mods.add("meta");
 	return canonicalize({
@@ -267,6 +303,10 @@ function normalizeEvent(e) {
 		key
 	});
 }
+/** A single printable symbol (`?`, `+`, `:`, …) — not a letter, digit, or named key. */
+function isShiftedSymbol(key) {
+	return key.length === 1 && !/[a-z0-9]/.test(key);
+}
 var SPECIAL_KEY_LABELS = {
 	escape: "Esc",
 	esc: "Esc",
@@ -282,7 +322,12 @@ var SPECIAL_KEY_LABELS = {
 	backspace: "Backspace",
 	delete: "Del"
 };
-var MOD_LABELS = {
+var MOD_LABELS = IS_APPLE ? {
+	ctrl: "⌃",
+	shift: "⇧",
+	alt: "⌥",
+	meta: "⌘"
+} : {
 	ctrl: "Ctrl",
 	shift: "Shift",
 	alt: "Alt",
@@ -372,6 +417,7 @@ function isEditableTarget(target) {
 	return tag === "INPUT" || tag === "TEXTAREA";
 }
 function dispatch(e) {
+	if (e.repeat) return;
 	const chord = normalizeEvent(e);
 	if (chord === null) return;
 	const bucket = registry.get(chord);
@@ -447,10 +493,17 @@ function useHotkey(keys, handler, options) {
 }
 //#endregion
 //#region src/Button.tsx
-function Button({ variant = "default", size = "md", fullWidth, loading, icon, iconTrailing, hotkey, className, type = "button", disabled, children, onClick, ...rest }) {
-	const { ariaKeyShortcuts, primaryChord } = useHotkey(hotkey, (e) => onClick?.(e), { enabled: !disabled && !loading });
+function Button({ variant = "default", size = "md", fullWidth, loading, icon, iconTrailing, hotkey, className, type = "button", disabled, children, onClick, ref, ...rest }) {
+	const elementRef = (0, react.useRef)(null);
+	const setRef = (0, react.useCallback)((node) => {
+		elementRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const { ariaKeyShortcuts, primaryChord } = useHotkey(hotkey, () => elementRef.current?.click(), { enabled: !disabled && !loading });
 	const iconOnly = children == null && (icon != null || iconTrailing != null);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_button.Button, {
+		ref: setRef,
 		onClick,
 		type,
 		disabled: disabled || loading,
@@ -475,10 +528,14 @@ function Button({ variant = "default", size = "md", fullWidth, loading, icon, ic
 }
 //#endregion
 //#region src/ButtonGroup.tsx
-function ButtonGroup({ orientation = "horizontal", role = "group", className, ...rest }) {
+function ButtonGroup({ orientation = "horizontal", fullWidth = false, role = "group", className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		role,
-		className: cn(["btn-group", orientation === "vertical" && "btn-group-vertical"], className),
+		className: cn([
+			"btn-group",
+			orientation === "vertical" && "btn-group-vertical",
+			fullWidth && "btn-group-full-width"
+		], className),
 		...rest
 	});
 }
@@ -598,6 +655,26 @@ function Indicator({ label, variant = "neutral", size = "sm", icon, placement =
 	});
 }
 //#endregion
+//#region src/Link.tsx
+/**
+* A text link — a plain `<a>` with the design system's link styling: primary
+* color, hover shift, underline, and a focus-visible ring. Pass `external` for
+* the new-tab affordance.
+*/
+function Link({ external, icon, iconTrailing, className, target, rel, children, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+		target: target ?? (external ? "_blank" : void 0),
+		rel: rel ?? (external ? "noopener noreferrer" : void 0),
+		className: cn(["link", external && "link-external"], className),
+		...rest,
+		children: [
+			renderIcon(icon),
+			children,
+			renderIcon(iconTrailing)
+		]
+	});
+}
+//#endregion
 //#region src/Pagination.tsx
 /**
 * Compute the items to render for a given `page` / `total`. Always returns:
@@ -759,12 +836,21 @@ function defaultRender(item, onPageChange, prev, next) {
 }
 //#endregion
 //#region src/Textarea.tsx
-function Textarea({ variant = "bordered", textareaSize = "md", className, ...rest }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+/**
+* Multi-line text input. Rendered through Base UI's `Field.Control` with a
+* `<textarea>` swapped in for the default `<input>`, so inside a `<Field>` it
+* gets the same wiring as `<Input>`: a generated id, label `htmlFor`
+* association, and validity-driven `:user-valid` / `<Field.Error>`. Works
+* standalone too — `Field.Control` falls back to a default context.
+*/
+function Textarea({ variant = "bordered", textareaSize = "md", autoResize, className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_field.Field.Control, {
+		render: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", { ...props }),
 		className: cn([
 			"textarea",
 			variant !== "bordered" && `textarea-${variant}`,
-			textareaSize !== "md" && `textarea-${textareaSize}`
+			textareaSize !== "md" && `textarea-${textareaSize}`,
+			autoResize && "textarea-autosize"
 		], className),
 		...rest
 	});
@@ -861,16 +947,6 @@ function SwitchThumb({ className, ...rest }) {
 }
 var Switch = Object.assign(SwitchRoot, { Thumb: SwitchThumb });
 //#endregion
-//#region src/portal-context.ts
-/**
-* Container that Base UI popups (Select, Tooltip, etc.) should portal into.
-* When a `<Dialog>` ancestor publishes its `<dialog>` element through this
-* context, popups render inside that top-layer dialog so they paint above
-* the backdrop and escape its `overflow: hidden`. Outside a dialog the
-* context is null and popups portal to `document.body` as before.
-*/
-var PortalContainerContext = (0, react.createContext)(null);
-//#endregion
 //#region src/Select.tsx
 function SelectRoot(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Root, { ...props });
@@ -1952,6 +2028,7 @@ exports.Indicator = Indicator;
 exports.Input = Input;
 exports.InputGroup = InputGroup;
 exports.Kbd = Kbd;
+exports.Link = Link;
 exports.Menu = Menu;
 exports.Navbar = Navbar;
 exports.Pagination = Pagination;