@boyernick/standard-ui-react 0.1.0 → 0.1.1-canary.2

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@boyernick/standard-ui-react",
-  "version": "0.1.0",
+  "version": "0.1.1-canary.2",
   "description": "React components for StandardUI",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
   "files": [
-    "src"
+    "src",
+    "!src/**/*.test.ts"
   ],
   "exports": {
     ".": {
@@ -15,6 +16,10 @@
     },
     "./package.json": "./package.json"
   },
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "node --test --experimental-strip-types \"src/**/*.test.ts\""
+  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
@@ -28,7 +33,8 @@
     "embla-carousel-react": "^8.6.0",
     "react-day-picker": "^10.0.1",
     "recharts": "^3.10.1",
-    "sugar-high": "^2.0.1"
+    "sugar-high": "^2.0.1",
+    "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
     "@types/react": "^19",

package/src/carousel.tsx

@@ -8,7 +8,7 @@ import {
   useCallback,
   useContext,
   useEffect,
-  useState,
+  useSyncExternalStore,
   type ComponentProps,
   type KeyboardEvent,
 } from "react"
@@ -70,14 +70,34 @@ export const Carousel = ({
     },
     plugins,
   )
-  const [canScrollPrev, setCanScrollPrev] = useState(false)
-  const [canScrollNext, setCanScrollNext] = useState(false)
+  // Embla is an external store, so read from it directly rather than mirroring
+  // it into state. Seeding mirrored state meant calling setState synchronously
+  // inside an effect, costing an extra render on mount and on every slide
+  // change. Both snapshots return booleans, so there is no object identity to
+  // keep stable between reads.
+  const subscribe = useCallback(
+    (onStoreChange: () => void) => {
+      if (!api) return () => {}
+      api.on("reInit", onStoreChange)
+      api.on("select", onStoreChange)
+      return () => {
+        api.off("reInit", onStoreChange)
+        api.off("select", onStoreChange)
+      }
+    },
+    [api],
+  )
 
-  const handleSelect = useCallback((instance: CarouselApi) => {
-    if (!instance) return
-    setCanScrollPrev(instance.canScrollPrev())
-    setCanScrollNext(instance.canScrollNext())
-  }, [])
+  const canScrollPrev = useSyncExternalStore(
+    subscribe,
+    () => api?.canScrollPrev() ?? false,
+    () => false,
+  )
+  const canScrollNext = useSyncExternalStore(
+    subscribe,
+    () => api?.canScrollNext() ?? false,
+    () => false,
+  )
 
   const scrollPrev = useCallback(() => {
     api?.scrollPrev()
@@ -107,17 +127,6 @@ export const Carousel = ({
     setApi(api)
   }, [api, setApi])
 
-  useEffect(() => {
-    if (!api) return
-    handleSelect(api)
-    api.on("reInit", handleSelect)
-    api.on("select", handleSelect)
-    return () => {
-      api.off("reInit", handleSelect)
-      api.off("select", handleSelect)
-    }
-  }, [api, handleSelect])
-
   return (
     <CarouselContext.Provider
       value={{

package/src/lib/cn.ts

@@ -1,3 +1,45 @@
 import { clsx, type ClassValue } from "clsx"
+import { extendTailwindMerge } from "tailwind-merge"
 
-export const cn = (...inputs: ClassValue[]) => clsx(inputs)
+/**
+ * StandardUI defines typography composites as custom `@utility` rules
+ * (`text-sm-strong`, `text-md`, …). Tailwind Merge cannot know those are font
+ * sizes, so it files them under text *color* — and then drops them whenever a
+ * real color follows, as in `cn("text-sm-strong", "text-fg-primary")`. Grouping
+ * them with font sizes keeps them conflicting with each other and with
+ * `text-sm`, while leaving colors alone.
+ *
+ * `shadow-hairline` has the same problem in the shadow group. Custom font sizes
+ * (`text-2xs`) and radii (`rounded-2xs`, `rounded-4xl`) already resolve
+ * correctly and need no help.
+ *
+ * Keep this in step with the `@utility` rules in
+ * @boyernick/standard-ui-tokens/css/tokens.css.
+ */
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "2xs-strong",
+            "xs-strong",
+            "sm-strong",
+            "md",
+            "md-strong",
+            "lg-strong",
+          ],
+        },
+      ],
+      shadow: [{ shadow: ["hairline"] }],
+    },
+  },
+})
+
+/**
+ * Combines class names and resolves Tailwind conflicts so the last value wins.
+ * Without the merge step a caller's `className` cannot override a built-in
+ * utility: both classes land in the DOM and the winner is whichever rule sits
+ * later in the stylesheet, which the caller does not control.
+ */
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))

package/src/markdown-editor.tsx

@@ -108,7 +108,7 @@ type Format = {
 }
 
 const formats: Format[] = [
-  { label: "Bold", marker: "**", className: "font-semibold" },
+  { label: "Bold", marker: "**", className: "font-medium" },
   { label: "Italic", marker: "*", className: "italic" },
   { label: "Code", marker: "`", className: "font-mono" },
 ]

package/src/text-animate.tsx

@@ -45,7 +45,6 @@ export const TextAnimate = ({
 
   useEffect(() => {
     let cancelled = false
-    let frame = 0
     let timeoutId: ReturnType<typeof setTimeout> | undefined
 
     const start = () => {
@@ -114,7 +113,6 @@ export const TextAnimate = ({
     return () => {
       cancelled = true
       if (timeoutId) clearTimeout(timeoutId)
-      cancelAnimationFrame(frame)
     }
   }, [chars, delay, effect, replay, speed, text])