@blakesteve/roster 4.1.0 → 4.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Blake Ball
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -143,6 +143,27 @@ the script and the toggle disagree, which shows up as a flash on every reload.
 bar paints *itself* with. Pair them with `themeMode="auto"` and the nav follows
 whatever `ThemeToggle` sets.
 
+### Components that render links
+
+`Breadcrumbs` renders a plain `<a>` by default, which is right for a static
+page and wrong inside a router — every hop becomes a full page load. Pass your
+router's link component instead:
+
+```tsx
+import NextLink from "next/link";
+
+<Breadcrumbs linkComponent={NextLink} items={items} />;
+```
+
+In an app with React Server Components, do that from a client component.
+`linkComponent` is a function, and functions do not cross the RSC boundary —
+passing it from a server component fails the render with *Functions cannot be
+passed directly to Client Components*. A small `"use client"` wrapper binds it
+once, and the pages that use the wrapper stay server-rendered.
+
+`Eyebrow` takes the other approach: `as` accepts any element and the props
+follow it, so `<Eyebrow as="a" href="/work">` works, as does `as={NextLink}`.
+
 ## Quick start
 
 ```tsx
@@ -179,7 +200,7 @@ function App() {
 | `Card` | Bordered surface container |
 | `Checkbox` | Accessible checkbox with label support |
 | `Disclosure` | Show/hide toggle using HeadlessUI |
-| `Eyebrow` | Small tracked-out uppercase label above a heading or beside a rule |
+| `Eyebrow` | Small tracked-out uppercase label above a heading or beside a rule; polymorphic via `as` |
 | `InlineCode` | Inline `<code>` for identifiers in running prose |
 | `Input` | Text input with label, error state, and icon slots |
 | `LabeledDivider` | Horizontal rule carrying a label, with an optional trailing count |
@@ -195,7 +216,7 @@ function App() {
 | `Spinner` | Loading indicator |
 | `Switch` | Toggle switch |
 | `Textarea` | Multi-line text input |
-| `ThemeToggle` | Flips class-based dark mode on the document root and remembers the choice |
+| `ThemeToggle` | Flips class-based dark mode on the document root and remembers the choice; labels and icons are configurable |
 | `Tooltip` | Radix-powered tooltip: hover/focus on desktop, tap-to-toggle on mobile |
 
 ### Molecules
@@ -204,7 +225,7 @@ function App() {
 |---|---|
 | `Accordion` | Collapsible content sections (single or multi-expand) |
 | `Alert` | Inline notice strip with optional title and dismiss |
-| `Breadcrumbs` | Navigation trail |
+| `Breadcrumbs` | Navigation trail; pass `linkComponent` to keep navigation client-side |
 | `CallToAction` | Prominent hero-style CTA block |
 | `DescriptionList` | Label and value pairs as a real `<dl>`: inline, stacked, or split |
 | `EmptyState` | Zero-data placeholder with icon and action slot |
@@ -251,6 +272,19 @@ argument instead of two. A columns array is heterogeneous, so v9 types each
 entry's value as `unknown` and recovers the real type per column through
 `createColumnHelper`.
 
+### Server components
+
+The main entry carries a `"use client"` directive, because nearly everything in
+it is interactive. That is correct for components and wrong for a plain
+function, so `cn` ships from its own entry with no directive:
+
+```tsx
+import { cn } from "@blakesteve/roster/utils";
+```
+
+Importing `cn` from the package root still works on the client. In a React
+Server Component it typechecks and then throws at render — use `/utils` there.
+
 ### Hooks
 
 | Hook | Description |