@microbit/ui 0.1.0-alpha.3

package/src/hooks/useBreakpointValue.ts

@@ -0,0 +1,63 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { useEffect, useState } from "react";
+import { token } from "styled-system/tokens";
+
+// Min-width breakpoints from the preset's token scale (runtime lookup so the
+// hook tracks any preset override rather than duplicating the values).
+const BREAKPOINTS = {
+  sm: token("breakpoints.sm"),
+  md: token("breakpoints.md"),
+  lg: token("breakpoints.lg"),
+  xl: token("breakpoints.xl"),
+  "2xl": token("breakpoints.2xl"),
+} as const;
+
+type Breakpoint = "base" | keyof typeof BREAKPOINTS;
+
+const ORDER: Breakpoint[] = ["base", "sm", "md", "lg", "xl", "2xl"];
+
+const activeBreakpoint = (): Breakpoint => {
+  let current: Breakpoint = "base";
+  for (const [name, min] of Object.entries(BREAKPOINTS)) {
+    if (window.matchMedia(`(min-width: ${min})`).matches) {
+      current = name as Breakpoint;
+    }
+  }
+  return current;
+};
+
+/**
+ * JS-side responsive value resolver, replacing Chakra's `useBreakpointValue`.
+ * Panda handles responsive *styles* in CSS; this is for responsive *logic*
+ * (choosing a prop value, branching behaviour). Resolves to the value at the
+ * active breakpoint, falling back to the nearest smaller one that is defined.
+ */
+export function useBreakpointValue<T>(
+  values: Partial<Record<Breakpoint, T>>,
+): T | undefined {
+  const [bp, setBp] = useState<Breakpoint>(() =>
+    typeof window === "undefined" ? "base" : activeBreakpoint(),
+  );
+
+  useEffect(() => {
+    const update = () => setBp(activeBreakpoint());
+    update();
+    const lists = Object.values(BREAKPOINTS).map((min) =>
+      window.matchMedia(`(min-width: ${min})`),
+    );
+    lists.forEach((l) => l.addEventListener("change", update));
+    return () => lists.forEach((l) => l.removeEventListener("change", update));
+  }, []);
+
+  for (let i = ORDER.indexOf(bp); i >= 0; i--) {
+    const value = values[ORDER[i]];
+    if (value !== undefined) {
+      return value;
+    }
+  }
+  return undefined;
+}

package/src/index.ts

@@ -0,0 +1,45 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * shared-ui — react-aria-components + Panda CSS primitives replacing Chakra,
+ * designed to be extracted into a library shared across sibling apps. Visuals
+ * match the Chakra theme; behaviour follows react-aria patterns.
+ */
+export * from "./system";
+export * from "./Button";
+export * from "./ButtonGroup";
+export * from "./Card";
+export * from "./Checkbox";
+export * from "./IconButton";
+export * from "./Image";
+export * from "./Input";
+export * from "./InputGroup";
+export * from "./LinkBox";
+export * from "./NativeSelect";
+export * from "./ProgressBar";
+export * from "./Slide";
+export * from "./Slider";
+export * from "./Spinner";
+export * from "./Svg";
+export * from "./Switch";
+export * from "./Text";
+export * from "./TextField";
+export * from "./Heading";
+export * from "./Link";
+export * from "./Icon";
+export * from "./CloseButton";
+export * from "./CloseIcon";
+export * from "./Divider";
+export * from "./Drawer";
+export * from "./List";
+export * from "./Menu";
+export * from "./Modal";
+export * from "./PopoverArrow";
+export * from "./SharedUIProvider";
+export * from "./Tooltip";
+export * from "./Toast";
+export * from "./VisuallyHidden";
+export { useBreakpointValue } from "./hooks/useBreakpointValue";

package/src/messages.ts

@@ -0,0 +1,17 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import en from "../lang/ui.en.json";
+
+/**
+ * Descriptor for one of this package's messages. The English text rides along
+ * as defaultMessage so components render English without any catalog merging;
+ * for other locales apps compile lang/ui.<locale>.json into their per-locale
+ * catalogs (see README "Strings").
+ */
+export const uiMessage = (id: keyof typeof en) => ({
+  id,
+  defaultMessage: en[id].defaultMessage,
+});

package/src/system.ts

@@ -0,0 +1,36 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Stable re-export of the Panda styling primitives and layout patterns, so
+ * shared-ui consumers (and a future extracted library) import from one place
+ * rather than reaching into the generated `styled-system` directly.
+ */
+export { css, cva, sva, cx } from "styled-system/css";
+export { token } from "styled-system/tokens";
+export type { SystemStyleObject } from "styled-system/types";
+export type {
+  BoxProps,
+  FlexProps,
+  StackProps,
+  HstackProps,
+  VstackProps,
+  GridProps,
+} from "styled-system/jsx";
+
+// Layout patterns — the Panda-native equivalents of Chakra's Box/Flex/Stack/etc.
+export {
+  AspectRatio,
+  Box,
+  Flex,
+  Stack,
+  HStack,
+  VStack,
+  Grid,
+  GridItem,
+  Center,
+  Wrap,
+  styled,
+} from "styled-system/jsx";