@-reddacted-/react-ui 0.3.0 → 0.3.1

package/dist/components/NavBar.d.ts

@@ -1,20 +1,17 @@
-import type { ElementType, ReactNode } from "react";
-export type NavLink = {
-    label: string;
-    to: string;
-};
+import type { CSSProperties, ReactNode } from "react";
 type NavBarProps = {
-    brand: string;
-    links?: NavLink[];
-    /** Rendered on the right of the links: sign out, theme select, whatever the page adds. */
-    actions?: ReactNode;
     /**
-     * Link component to render with. Defaults to a plain anchor so the bar works
-     * without a router; pass a router Link to keep client-side navigation.
+     * Anything: logo, router links, buttons, selects. Direct `a` / `button` children get
+     * a default look; mark the current one with `aria-current="page"` (react-router's
+     * NavLink does it for you) or `aria-pressed="true"` to render it pressed.
      */
-    linkAs?: ElementType;
-    homeTo?: string;
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
 };
-export declare function NavBar({ brand, links, actions, linkAs, homeTo }: NavBarProps): import("react").JSX.Element;
+export declare function NavBar({ children, className, style }: NavBarProps): import("react").JSX.Element;
+export declare namespace NavBar {
+    var Spacer: () => import("react").JSX.Element;
+}
 export {};
 //# sourceMappingURL=NavBar.d.ts.map

package/dist/components/NavBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavBar.d.ts","sourceRoot":"","sources":["../../src/components/NavBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAElE,MAAM,MAAM,OAAO,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAA;AAEnD,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,OAAO,EAAE,CAAA;IACjB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,KAAU,EAAE,OAAO,EAAE,MAAM,EAAE,MAAY,EAAE,EAAE,WAAW,+BAmBvF"}
+{"version":3,"file":"NavBar.d.ts","sourceRoot":"","sources":["../../src/components/NavBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,KAAK,WAAW,GAAG;IACjB;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,WAAW,+BAOjE;yBAPe,MAAM"}

package/dist/components/NavBar.js

@@ -1,31 +1,51 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function NavBar({ brand, links = [], actions, linkAs, homeTo = "/" }) {
-    const Link = linkAs ?? "a";
-    const linkProps = (to) => (linkAs ? { to } : { href: to });
-    return (_jsxs("nav", { style: navStyle, children: [_jsx(Link, { ...linkProps(homeTo), style: brandStyle, children: brand }), _jsxs("div", { style: rightStyle, children: [links.map(link => (_jsx(Link, { ...linkProps(link.to), style: linkStyle, children: link.label }, link.to))), actions] })] }));
-}
-const navStyle = {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: "0 1.5rem",
-    height: "56px",
-    borderBottom: "1px solid var(--color-border)",
-    backgroundColor: "var(--color-surface)",
-};
-const brandStyle = {
-    fontWeight: 600,
-    fontSize: "1rem",
-    color: "var(--color-text)",
-    textDecoration: "none",
-};
-const rightStyle = {
-    display: "flex",
-    alignItems: "center",
-    gap: "1.25rem",
-};
-const linkStyle = {
-    color: "var(--color-text-muted)",
-    textDecoration: "none",
-    fontSize: "0.875rem",
-};
+export function NavBar({ children, className, style }) {
+    return (_jsxs("nav", { className: className ? `rui-navbar ${className}` : "rui-navbar", style: style, children: [_jsx("style", { children: navBarCss }), children] }));
+}
+/** Takes the free space, pushing the following children to the right. */
+function Spacer() {
+    return _jsx("span", { className: "rui-navbar-spacer", "aria-hidden": "true" });
+}
+NavBar.Spacer = Spacer;
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+const navBarCss = `
+:where(.rui-navbar) {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 1.5rem;
+  height: 56px;
+  border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-surface);
+}
+:where(.rui-navbar-spacer) {
+  flex: 1;
+}
+:where(.rui-navbar img) {
+  display: block;
+  max-height: 32px;
+}
+:where(.rui-navbar) > :where(a, button) {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  border: none;
+  border-radius: 6px;
+  background-color: transparent;
+  color: var(--color-text-muted);
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+}
+:where(.rui-navbar) > :where(a, button):hover {
+  color: var(--color-text);
+}
+:where(.rui-navbar) > :where([aria-current="page"], [aria-pressed="true"]) {
+  background-color: var(--color-border);
+  color: var(--color-text);
+}
+`;

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { default as ColorPicker } from "./components/ColorPicker.js";
 export { default as ConfirmDeleteButton } from "./components/ConfirmDeleteButton.js";
 export { ColorField } from "./components/ColorField.js";
 export { Button, type ButtonVariant } from "./components/Button.js";
-export { NavBar, type NavLink } from "./components/NavBar.js";
+export { NavBar } from "./components/NavBar.js";
 export { PageMessage, LoadingMessage, ErrorMessage } from "./components/PageStatus.js";
 export { ThemeProvider, useTheme } from "./theme/ThemeProvider.js";
 export { ThemeSelect } from "./theme/ThemeSelect.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAC/E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,qCAAqC,CAAA;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,KAAK,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAEtF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC/F,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC1F,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAE9F,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AACjF,OAAO,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAChD,OAAO,EAAE,sBAAsB,EAAE,KAAK,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAC9F,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,eAAe,EACf,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,wBAAwB,EAC7B,KAAK,aAAa,EAClB,KAAK,gBAAgB,GACtB,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAG9C,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACpH,YAAY,EAAE,WAAW,EAAE,WAAW,IAAI,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAC/E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,qCAAqC,CAAA;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAEtF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC/F,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC1F,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAE9F,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AACjF,OAAO,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAChD,OAAO,EAAE,sBAAsB,EAAE,KAAK,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAC9F,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,eAAe,EACf,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,wBAAwB,EAC7B,KAAK,aAAa,EAClB,KAAK,gBAAgB,GACtB,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAG9C,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACpH,YAAY,EAAE,WAAW,EAAE,WAAW,IAAI,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@-reddacted-/react-ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Theming system, Modal, Button, ColorPicker, NavBar and error popups (imperative, REST or GraphQL fetch) for React",
   "type": "module",
   "main": "dist/index.js",