@bitbaum/sitekit 0.4.2 → 0.5.0

package/README.md

@@ -160,3 +160,9 @@ semantic navigation groups. Existing flat `links` remain supported. Consumers
 can configure `--sk-header-height`, `--sk-mobile-header-height`,
 `--sk-display-weight`, `--sk-display-leading`, `--sk-display-tracking` and
 `--sk-footer-gap` through their theme adapter, without replacing shared markup.
+
+## Mobile tab bar
+
+`SiteTabBar` renders a fixed bottom navigation for small screens (hidden from
+48rem up, where the masthead nav takes over). Pass 3–5 `{ path, label, icon }`
+items and the current path; it renders its own spacer so content is not hidden.

package/dist/react/SiteTabBar.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The mobile bottom tab bar: three to five destinations within thumb reach.
+ *
+ * A server component like SiteNav (the injected Link is a function). It is
+ * hidden from the desktop breakpoint up by styles.css (`--sk-tabbar-hide`,
+ * default 48rem) so the masthead nav stays the one desktop navigation.
+ * Consumers add `padding-bottom: var(--sk-tabbar-height)` to their page body
+ * on small screens, or use the `.sk-tabbar-spacer` the component renders.
+ */
+import type { ReactNode } from 'react';
+import { type LinkLike } from './link.js';
+export interface SiteTabItem {
+    path: string;
+    label: string;
+    /** Decorative glyph or SVG; hidden from assistive tech. */
+    icon: ReactNode;
+}
+interface Props {
+    items: SiteTabItem[];
+    currentPath: string;
+    Link?: LinkLike;
+    label?: string;
+}
+export declare function SiteTabBar({ items, currentPath, Link, label }: Props): import("react").JSX.Element | null;
+export {};

package/dist/react/SiteTabBar.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { href } from '../model.js';
+import { DefaultLink } from './link.js';
+const isCurrent = (path, current) => {
+    const a = href(path);
+    const b = href(current);
+    return a === '/' ? b === '/' : b === a || b.startsWith(a + '/');
+};
+export function SiteTabBar({ items, currentPath, Link = DefaultLink, label = 'Main' }) {
+    if (items.length === 0)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sk-tabbar-spacer", "aria-hidden": "true" }), _jsx("nav", { className: "sk-tabbar", "aria-label": label, children: items.slice(0, 5).map((item) => {
+                    const current = isCurrent(item.path, currentPath);
+                    return (_jsxs(Link, { href: href(item.path), "aria-current": current ? 'page' : undefined, className: "sk-tab", children: [_jsx("span", { className: "sk-tab-icon", "aria-hidden": "true", children: item.icon }), _jsx("span", { className: "sk-tab-label", children: item.label })] }, item.path));
+                }) })] }));
+}

package/dist/react/index.d.ts

@@ -9,6 +9,7 @@
 export { SiteSections } from './SiteSections.js';
 export { SiteMasthead, SiteFooter } from './SiteChrome.js';
 export { SiteNav } from './SiteNav.js';
+export { SiteTabBar, type SiteTabItem } from './SiteTabBar.js';
 export { NavAutoScroll } from './NavAutoScroll.js';
 export { DefaultLink, type LinkLike, type LinkProps } from './link.js';
 export { SectionHeading, Blurb, SectionBody } from './sections/Primitives.js';

package/dist/react/index.js

@@ -9,6 +9,7 @@
 export { SiteSections } from './SiteSections.js';
 export { SiteMasthead, SiteFooter } from './SiteChrome.js';
 export { SiteNav } from './SiteNav.js';
+export { SiteTabBar } from './SiteTabBar.js';
 export { NavAutoScroll } from './NavAutoScroll.js';
 export { DefaultLink } from './link.js';
 export { SectionHeading, Blurb, SectionBody } from './sections/Primitives.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitbaum/sitekit",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "A website as data: a closed union of section shapes validated at runtime, one set of React renderers, and per-field provenance so a generated site can prove it fabricated nothing.",
   "license": "MIT",
   "author": "Mao Nakamoto",

package/styles.css

@@ -306,3 +306,57 @@
     gap: 1.5rem;
   }
 }
+/* Mobile bottom tab bar (SiteTabBar). Hidden from --sk-tabbar-breakpoint up. */
+.sk-tabbar {
+  position: fixed;
+  inset: auto 0 0 0;
+  z-index: 45;
+  display: flex;
+  justify-content: space-around;
+  gap: 2px;
+  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
+  background: var(--sk-bg, Canvas);
+  border-top: 1px solid var(--sk-line, #d6d6d6);
+  font-family: var(--sk-font, system-ui, sans-serif);
+}
+.sk-tab {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 2px;
+  border-radius: 10px;
+  color: var(--sk-muted, #555);
+  font-size: 11px;
+  font-weight: 600;
+  text-decoration: none;
+}
+.sk-tab-icon {
+  font-size: 20px;
+  line-height: 1;
+}
+.sk-tab-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+.sk-tab[aria-current='page'] {
+  color: var(--sk-fg, CanvasText);
+  background: var(--sk-tab-active, color-mix(in srgb, currentColor 8%, transparent));
+}
+.sk-tab:focus-visible {
+  outline: 2px solid var(--sk-focus, Highlight);
+  outline-offset: 2px;
+}
+.sk-tabbar-spacer {
+  height: var(--sk-tabbar-height, 68px);
+}
+@media (min-width: 48rem) {
+  .sk-tabbar,
+  .sk-tabbar-spacer {
+    display: none;
+  }
+}