@microbit/ui 0.1.0-alpha.3 → 0.1.0-alpha.5

package/src/{chakra-tokens.ts → base-tokens.ts}

@@ -1,12 +1,15 @@
 /**
  * (c) 2026, Micro:bit Educational Foundation and contributors
  *
+ * Token values (c) 2019, Segun Adebayo — Chakra UI's @chakra-ui/theme
+ * defaults, used under the MIT License (see LICENSE.md third-party notices).
+ *
  * SPDX-License-Identifier: MIT
  */
-/* eslint-disable */
-// GENERATED by bin/gen-chakra-tokens.mjs (snapshot of @chakra-ui/theme defaults).
-// Do not edit by hand. Canonical Chakra v2 foundation values in Panda token
-// format so the OSS preset matches Chakra exactly.
+// The base token scales, in Panda token format. Began as a mechanical
+// snapshot of Chakra UI v2's @chakra-ui/theme defaults; hand-maintained.
+// Deliberately absent: `fonts` (foundation-owned, defined in base-preset.ts)
+// and `transition.property` (no Panda token category; inlined at use sites).
 
 export const colors = {
   transparent: {

package/src/hooks/useClipboard.ts

@@ -0,0 +1,27 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * Copy a value to the clipboard with a transient `hasCopied` flag for
+ * "Copied!" feedback. Replaces Chakra's `useClipboard`.
+ */
+export function useClipboard(
+  value: string,
+  timeoutMs = 1500,
+): { onCopy: () => void; hasCopied: boolean } {
+  const [hasCopied, setHasCopied] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const onCopy = useCallback(() => {
+    navigator.clipboard.writeText(value).then(() => {
+      setHasCopied(true);
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setHasCopied(false), timeoutMs);
+    });
+  }, [value, timeoutMs]);
+  useEffect(() => () => clearTimeout(timeoutRef.current), []);
+  return { onCopy, hasCopied };
+}

package/src/hooks/useMediaQuery.ts

@@ -0,0 +1,28 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { useCallback, useSyncExternalStore } from "react";
+
+/**
+ * Tracks a raw CSS media query, replacing Chakra's `useMediaQuery` for
+ * queries that aren't breakpoint-based (custom widths, height-based
+ * queries). For the preset's breakpoint scale prefer `useBreakpointValue`.
+ * Returns false during SSR.
+ */
+export function useMediaQuery(query: string): boolean {
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      const list = window.matchMedia(query);
+      list.addEventListener("change", onChange);
+      return () => list.removeEventListener("change", onChange);
+    },
+    [query],
+  );
+  return useSyncExternalStore(
+    subscribe,
+    () => window.matchMedia(query).matches,
+    () => false,
+  );
+}

package/src/hooks/usePrevious.ts

@@ -0,0 +1,18 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { useEffect, useRef } from "react";
+
+/**
+ * The value from the previous render (undefined on the first render).
+ * Replaces Chakra's `usePrevious`.
+ */
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}

package/src/index.ts

@@ -19,6 +19,7 @@ export * from "./Input";
 export * from "./InputGroup";
 export * from "./LinkBox";
 export * from "./NativeSelect";
+export * from "./NumberField";
 export * from "./ProgressBar";
 export * from "./Slide";
 export * from "./Slider";
@@ -32,6 +33,10 @@ export * from "./Link";
 export * from "./Icon";
 export * from "./CloseButton";
 export * from "./CloseIcon";
+export * from "./Code";
+export * from "./Collapse";
+export * from "./Fade";
+export * from "./Kbd";
 export * from "./Divider";
 export * from "./Drawer";
 export * from "./List";
@@ -43,3 +48,6 @@ export * from "./Tooltip";
 export * from "./Toast";
 export * from "./VisuallyHidden";
 export { useBreakpointValue } from "./hooks/useBreakpointValue";
+export { useClipboard } from "./hooks/useClipboard";
+export { useMediaQuery } from "./hooks/useMediaQuery";
+export { usePrevious } from "./hooks/usePrevious";