@calcifer-design/ui 0.1.0

package/dist/components/NavMenu/NavMenu.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+import { useState } from "react";
+import { minWidth, useMediaQuery } from "../../hooks/useMediaQuery.js";
+import NavMenu_module from "./NavMenu.module.js";
+function defaultRenderLink(item, { children, ...linkProps }) {
+    return /*#__PURE__*/ jsx("a", {
+        href: item.href,
+        ...linkProps,
+        children: children
+    });
+}
+function isCurrent(item, currentPath) {
+    if ('/' === item.href) return '/' === currentPath;
+    return currentPath === item.href || currentPath.startsWith(`${item.href}/`);
+}
+function linkPropsFor(item, currentPath) {
+    return {
+        className: NavMenu_module.link,
+        'aria-current': isCurrent(item, currentPath) ? 'page' : void 0,
+        children: item.label
+    };
+}
+function NavMenu({ items, currentPath, label = 'Primary', renderLink = defaultRenderLink }) {
+    const isWide = useMediaQuery(minWidth('md'));
+    const [open, setOpen] = useState(false);
+    const [previousPath, setPreviousPath] = useState(currentPath);
+    if (currentPath !== previousPath) {
+        setPreviousPath(currentPath);
+        setOpen(false);
+    }
+    if (isWide) return /*#__PURE__*/ jsx("nav", {
+        className: NavMenu_module.root,
+        "aria-label": label,
+        children: /*#__PURE__*/ jsx("ul", {
+            className: NavMenu_module.list,
+            children: items.map((item)=>/*#__PURE__*/ jsx("li", {
+                    children: renderLink(item, linkPropsFor(item, currentPath))
+                }, item.href))
+        })
+    });
+    return /*#__PURE__*/ jsx("nav", {
+        className: NavMenu_module.root,
+        "aria-label": label,
+        children: /*#__PURE__*/ jsxs(Menu.Root, {
+            open: open,
+            onOpenChange: setOpen,
+            modal: false,
+            children: [
+                /*#__PURE__*/ jsx(Menu.Trigger, {
+                    className: NavMenu_module.trigger,
+                    "aria-label": open ? 'Close menu' : 'Open menu',
+                    children: /*#__PURE__*/ jsx("svg", {
+                        className: NavMenu_module.triggerIcon,
+                        viewBox: "0 0 18 18",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        "aria-hidden": "true",
+                        focusable: "false",
+                        children: /*#__PURE__*/ jsx("path", {
+                            d: open ? 'M4 4l10 10M14 4L4 14' : 'M2 5h14M2 9h14M2 13h14'
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsx(Menu.Portal, {
+                    children: /*#__PURE__*/ jsx(Menu.Positioner, {
+                        className: NavMenu_module.positioner,
+                        side: "bottom",
+                        align: "end",
+                        sideOffset: 8,
+                        children: /*#__PURE__*/ jsx(Menu.Popup, {
+                            className: NavMenu_module.popup,
+                            children: items.map((item)=>/*#__PURE__*/ jsx(Menu.Item, {
+                                    className: NavMenu_module.item,
+                                    render: renderLink(item, linkPropsFor(item, currentPath))
+                                }, item.href))
+                        })
+                    })
+                })
+            ]
+        })
+    });
+}
+export { NavMenu };

package/dist/components/NavMenu/NavMenu.module.js

@@ -0,0 +1,12 @@
+import "./NavMenu_module.css";
+const NavMenu_module = {
+    root: "root-wsLiH",
+    list: "list-hzkjq",
+    link: "link-R0jaI",
+    trigger: "trigger-dj75u",
+    triggerIcon: "triggerIcon-gSo04",
+    positioner: "positioner-BPm1p",
+    popup: "popup-hUQFV",
+    item: "item-yXJoa"
+};
+export default NavMenu_module;

package/dist/components/NavMenu/NavMenu_module.css

@@ -0,0 +1,85 @@
+.root-wsLiH {
+  align-items: center;
+  display: flex;
+}
+
+.list-hzkjq {
+  align-items: center;
+  gap: var(--space-5);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.link-R0jaI {
+  min-height: var(--size-touch);
+  border-radius: var(--radius-sm);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+  white-space: nowrap;
+  transition-property: color;
+  transition-duration: var(--motion-duration-1);
+  transition-timing-function: var(--motion-ease);
+  align-items: center;
+  font-weight: 400;
+  text-decoration: none;
+  display: inline-flex;
+}
+
+.link-R0jaI[aria-current="page"] {
+  color: var(--color-text);
+  font-weight: 500;
+}
+
+@media (hover: hover) {
+  .link-R0jaI:hover {
+    color: var(--color-text);
+  }
+}
+
+.trigger-dj75u {
+  width: var(--size-touch);
+  height: var(--size-touch);
+  border-radius: var(--radius-md);
+  color: var(--color-text);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: inline-flex;
+}
+
+.triggerIcon-gSo04 {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.positioner-BPm1p {
+  z-index: 50;
+}
+
+.popup-hUQFV {
+  min-width: 12rem;
+  padding: var(--space-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-raised);
+  box-shadow: var(--elevation-2);
+  flex-direction: column;
+  display: flex;
+}
+
+.item-yXJoa {
+  padding-inline: var(--space-3);
+  border-radius: var(--radius-md);
+  font-size: var(--text-md);
+}
+
+.item-yXJoa[data-highlighted] {
+  background: var(--color-surface-2);
+  color: var(--color-text);
+}
+

package/dist/components/PageHeading/PageHeading.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+export type PageHeadingSize = 'display' | 'page' | 'compact';
+export interface PageHeadingProps {
+    children: ReactNode;
+    eyebrow?: ReactNode;
+    level?: 1 | 2;
+    /**
+     * The mock's three h1 sizes: `display` is the landing hero name, `page` (default) the
+     * Projects/About titles, `compact` the project and Under-the-hood titles. Ignored for
+     * `level={2}`, which always renders the section size.
+     */
+    size?: PageHeadingSize;
+    /** Move focus to the heading when it mounts (used after client-side navigation). */
+    focusOnMount?: boolean;
+}
+export declare function PageHeading({ children, eyebrow, level, size, focusOnMount, }: PageHeadingProps): import("react").JSX.Element;

package/dist/components/PageHeading/PageHeading.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import PageHeading_module from "./PageHeading.module.js";
+function PageHeading({ children, eyebrow, level = 1, size = 'page', focusOnMount = false }) {
+    const headingRef = useRef(null);
+    const Heading = 1 === level ? 'h1' : 'h2';
+    useEffect(()=>{
+        if (focusOnMount) headingRef.current?.focus({
+            preventScroll: false
+        });
+    }, [
+        focusOnMount
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: PageHeading_module.root,
+        children: [
+            eyebrow ? /*#__PURE__*/ jsx("p", {
+                className: PageHeading_module.eyebrow,
+                children: eyebrow
+            }) : null,
+            /*#__PURE__*/ jsx(Heading, {
+                ref: headingRef,
+                tabIndex: -1,
+                className: PageHeading_module.heading,
+                "data-level": level,
+                "data-size": size,
+                children: children
+            })
+        ]
+    });
+}
+export { PageHeading };

package/dist/components/PageHeading/PageHeading.module.js

@@ -0,0 +1,7 @@
+import "./PageHeading_module.css";
+const PageHeading_module = {
+    root: "root-G6df9",
+    eyebrow: "eyebrow-N5iEz",
+    heading: "heading-C4QBU"
+};
+export default PageHeading_module;

package/dist/components/PageHeading/PageHeading_module.css

@@ -0,0 +1,53 @@
+.root-G6df9 {
+  gap: var(--space-2);
+  flex-direction: column;
+  display: flex;
+}
+
+.eyebrow-N5iEz {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+}
+
+.heading-C4QBU {
+  font-size: var(--text-h1);
+  letter-spacing: var(--tracking-h1);
+  font-weight: 600;
+  line-height: var(--leading-display);
+  text-wrap: balance;
+  outline-offset: var(--space-2);
+}
+
+.heading-C4QBU[data-size="display"] {
+  max-width: 12ch;
+  font-size: var(--text-display);
+  letter-spacing: var(--tracking-display);
+  line-height: var(--leading-display);
+}
+
+@media (width >= 112.5rem) {
+  .heading-C4QBU[data-size="display"] {
+    font-size: var(--text-display-wide);
+  }
+}
+
+.heading-C4QBU[data-size="compact"] {
+  font-size: var(--text-h2);
+  letter-spacing: var(--tracking-heading);
+  line-height: var(--leading-tight);
+}
+
+.heading-C4QBU[data-level="2"] {
+  max-width: none;
+  font-size: var(--text-h2-feature);
+  letter-spacing: var(--tracking-heading);
+  line-height: var(--leading-tight);
+}
+
+.heading-C4QBU:focus:not(:focus-visible) {
+  outline: none;
+}
+

package/dist/components/SkipLink/SkipLink.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export interface SkipLinkProps {
+    targetId: string;
+    children?: ReactNode;
+}
+export declare function SkipLink({ targetId, children }: SkipLinkProps): import("react").JSX.Element;

package/dist/components/SkipLink/SkipLink.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import SkipLink_module from "./SkipLink.module.js";
+function SkipLink({ targetId, children = 'Skip to content' }) {
+    return /*#__PURE__*/ jsx("a", {
+        className: SkipLink_module.root,
+        href: `#${targetId}`,
+        onClick: ()=>document.getElementById(targetId)?.focus(),
+        children: children
+    });
+}
+export { SkipLink };

package/dist/components/SkipLink/SkipLink.module.js

@@ -0,0 +1,5 @@
+import "./SkipLink_module.css";
+const SkipLink_module = {
+    root: "root-arteG"
+};
+export default SkipLink_module;

package/dist/components/SkipLink/SkipLink_module.css

@@ -0,0 +1,24 @@
+.root-arteG {
+  min-height: var(--size-touch);
+  top: var(--space-2);
+  left: var(--space-2);
+  z-index: 100;
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-md);
+  background: var(--color-accent);
+  color: var(--color-accent-text);
+  transition-property: transform;
+  transition-duration: var(--motion-duration-1);
+  transition-timing-function: var(--motion-ease);
+  align-items: center;
+  font-weight: 600;
+  text-decoration: none;
+  display: inline-flex;
+  position: absolute;
+  transform: translateY(-200%);
+}
+
+.root-arteG:focus-visible {
+  transform: translateY(0);
+}
+

package/dist/components/StatusDot/StatusDot.d.ts

@@ -0,0 +1,17 @@
+export type RemoteStatus = 'registered' | 'loading' | 'loaded' | 'failed';
+export interface StatusDotProps {
+    status: RemoteStatus;
+    /** The thing whose status this is, e.g. the remote name. */
+    label: string;
+    /**
+     * `mono` (default) sets the label in the monospace face, as in tables and badges; `text`
+     * sets it in the body face and text colour, as in the landing page's fleet list.
+     */
+    labelStyle?: 'mono' | 'text';
+    /**
+     * `false` keeps the label for assistive tech but hides it visually — for a table whose
+     * first column already names the remote.
+     */
+    showLabel?: boolean;
+}
+export declare function StatusDot({ status, label, labelStyle, showLabel, }: StatusDotProps): import("react").JSX.Element;

package/dist/components/StatusDot/StatusDot.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import StatusDot_module from "./StatusDot.module.js";
+function StatusDot({ status, label, labelStyle = 'mono', showLabel = true }) {
+    return /*#__PURE__*/ jsxs("span", {
+        className: StatusDot_module.root,
+        "data-status": status,
+        "data-label-style": labelStyle,
+        "data-testid": "status-dot",
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: StatusDot_module.dot,
+                "aria-hidden": "true"
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: StatusDot_module.label,
+                "data-hidden": showLabel ? void 0 : '',
+                children: label
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: StatusDot_module.status,
+                children: status
+            })
+        ]
+    });
+}
+export { StatusDot };

package/dist/components/StatusDot/StatusDot.module.js

@@ -0,0 +1,9 @@
+import "./StatusDot_module.css";
+const StatusDot_module = {
+    root: "root-tgMEi",
+    dot: "dot-WDZDf",
+    pulse: "pulse-RqPMg",
+    label: "label-m8svl",
+    status: "status-t1WpV"
+};
+export default StatusDot_module;

package/dist/components/StatusDot/StatusDot_module.css

@@ -0,0 +1,73 @@
+.root-tgMEi {
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  font-size: var(--text-sm);
+  display: inline-flex;
+}
+
+.dot-WDZDf {
+  border-radius: var(--radius-full);
+  background: var(--color-neutral);
+  flex: none;
+  width: .5rem;
+  height: .5rem;
+}
+
+.root-tgMEi[data-status="loading"] .dot-WDZDf {
+  background: var(--color-accent);
+  animation: pulse-RqPMg var(--motion-duration-4) var(--motion-ease) infinite alternate;
+}
+
+.root-tgMEi[data-status="loaded"] .dot-WDZDf {
+  background: var(--color-success);
+}
+
+.root-tgMEi[data-status="failed"] .dot-WDZDf {
+  background: var(--color-danger);
+}
+
+.label-m8svl {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  font-family: var(--font-mono);
+  overflow: hidden;
+}
+
+.label-m8svl[data-hidden] {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+.root-tgMEi[data-label-style="text"] .label-m8svl {
+  font-family: var(--font-sans);
+  color: var(--color-text);
+}
+
+.status-t1WpV {
+  white-space: nowrap;
+  color: var(--color-text-muted);
+}
+
+.root-tgMEi[data-label-style="text"] .status-t1WpV {
+  color: var(--color-text-subtle);
+}
+
+@keyframes pulse-RqPMg {
+  from {
+    opacity: .35;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+export interface TabItem {
+    value: string;
+    label: string;
+    content: ReactNode;
+    disabled?: boolean;
+}
+export interface TabsProps {
+    items: TabItem[];
+    /** Accessible name for the tab list. */
+    label: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+export declare function Tabs({ items, label, value, defaultValue, onValueChange }: TabsProps): import("react").JSX.Element;

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+import { useState } from "react";
+import Tabs_module from "./Tabs.module.js";
+function Tabs_Tabs({ items, label, value, defaultValue, onValueChange }) {
+    const [initialValue] = useState(()=>defaultValue ?? items[0]?.value);
+    return /*#__PURE__*/ jsxs(Tabs.Root, {
+        className: Tabs_module.root,
+        value: value,
+        defaultValue: initialValue,
+        onValueChange: (next)=>onValueChange?.(String(next)),
+        children: [
+            /*#__PURE__*/ jsxs(Tabs.List, {
+                className: Tabs_module.list,
+                "aria-label": label,
+                children: [
+                    items.map((item)=>/*#__PURE__*/ jsx(Tabs.Tab, {
+                            className: Tabs_module.tab,
+                            value: item.value,
+                            disabled: item.disabled,
+                            children: item.label
+                        }, item.value)),
+                    /*#__PURE__*/ jsx(Tabs.Indicator, {
+                        className: Tabs_module.indicator
+                    })
+                ]
+            }),
+            items.map((item)=>/*#__PURE__*/ jsx(Tabs.Panel, {
+                    value: item.value,
+                    children: item.content
+                }, item.value))
+        ]
+    });
+}
+export { Tabs_Tabs as Tabs };

package/dist/components/Tabs/Tabs.module.js

@@ -0,0 +1,8 @@
+import "./Tabs_module.css";
+const Tabs_module = {
+    root: "root-Hb4Mh",
+    list: "list-ZEK7A",
+    tab: "tab-FRO0R",
+    indicator: "indicator-a2Roe"
+};
+export default Tabs_module;

package/dist/components/Tabs/Tabs_module.css

@@ -0,0 +1,53 @@
+.root-Hb4Mh {
+  gap: var(--space-4);
+  flex-direction: column;
+  display: flex;
+}
+
+.list-ZEK7A {
+  gap: var(--space-1);
+  padding-block: var(--space-1);
+  border-bottom: 1px solid var(--color-border);
+  scrollbar-width: thin;
+  display: flex;
+  position: relative;
+  overflow-x: auto;
+}
+
+.tab-FRO0R {
+  min-height: var(--size-touch);
+  padding: var(--space-2) var(--space-3);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+  cursor: pointer;
+  transition-property: color;
+  transition-duration: var(--motion-duration-1);
+  transition-timing-function: var(--motion-ease);
+  background: none;
+  border: 0;
+  flex: none;
+  font-weight: 600;
+}
+
+.tab-FRO0R[data-active] {
+  color: var(--color-text);
+}
+
+.tab-FRO0R[data-disabled] {
+  color: var(--color-text-muted);
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+.indicator-a2Roe {
+  bottom: -1px;
+  left: var(--active-tab-left);
+  width: var(--active-tab-width);
+  background: var(--color-accent);
+  height: 2px;
+  transition-property: left, width;
+  transition-duration: var(--motion-duration-2);
+  transition-timing-function: var(--motion-ease);
+  position: absolute;
+}
+

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export interface TagProps {
+    children: ReactNode;
+    tone?: 'neutral' | 'accent';
+}
+export declare function Tag({ children, tone }: TagProps): import("react").JSX.Element;

package/dist/components/Tag/Tag.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import Tag_module from "./Tag.module.js";
+function Tag({ children, tone = 'neutral' }) {
+    return /*#__PURE__*/ jsx("span", {
+        className: Tag_module.root,
+        "data-tone": tone,
+        children: children
+    });
+}
+export { Tag };

package/dist/components/Tag/Tag.module.js

@@ -0,0 +1,5 @@
+import "./Tag_module.css";
+const Tag_module = {
+    root: "root-lzcr8"
+};
+export default Tag_module;

package/dist/components/Tag/Tag_module.css

@@ -0,0 +1,20 @@
+.root-lzcr8 {
+  min-height: 1.5rem;
+  padding: 0 var(--space-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+  line-height: var(--leading-snug);
+  white-space: nowrap;
+  background: var(--color-surface-2);
+  color: var(--color-text-muted);
+  align-items: center;
+  display: inline-flex;
+}
+
+.root-lzcr8[data-tone="accent"] {
+  background: var(--color-accent-soft);
+  border-color: var(--color-border-accent);
+  color: var(--color-text);
+}
+

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,3 @@
+import { type BreakpointName } from '@calcifer-design/tokens';
+export declare function minWidth(name: BreakpointName): string;
+export declare function useMediaQuery(query: string): boolean;

package/dist/hooks/useMediaQuery.js

@@ -0,0 +1,22 @@
+import { useCallback, useSyncExternalStore } from "react";
+import { breakpoint } from "@calcifer-design/tokens";
+function minWidth(name) {
+    return `(min-width: ${breakpoint[name]})`;
+}
+function getServerSnapshot() {
+    return false;
+}
+function useMediaQuery(query) {
+    const subscribe = useCallback((onChange)=>{
+        const mediaQueryList = window.matchMedia(query);
+        mediaQueryList.addEventListener('change', onChange);
+        return ()=>mediaQueryList.removeEventListener('change', onChange);
+    }, [
+        query
+    ]);
+    const getSnapshot = useCallback(()=>window.matchMedia(query).matches, [
+        query
+    ]);
+    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+export { minWidth, useMediaQuery };