@roadlittledawn/docs-design-system-react 0.6.0 → 0.6.1

package/README.md

@@ -35,6 +35,10 @@ Full component documentation with live examples, usage guidelines, and API docum
 
 **[View Component Documentation →](https://docs-design-system-storybook.netlify.app/?path=/docs/components-button--docs)**
 
+## Next.js / React Server Components
+
+Interactive components (`Collapser`, `CollapserGroup`, `CodeBlock`, `Tabs`, `Popover`) are pre-marked with `'use client'`, so they work in Next.js App Router without any extra setup. Stateless components (`Button`, `Callout`, `Card`, `CardGrid`, `Heading`, `Link`, `List`, `Typography`) have no directive and are fully usable as Server Components.
+
 ## Dark Mode
 
 The package includes built-in dark mode support. All components use transparent backgrounds (unless background color specified via props) in dark mode so they don't clash with your site's own dark theme.

package/dist/components/CodeBlock.js

@@ -1,3 +1,4 @@
+'use client';
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {

package/dist/components/Collapser.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { useKeyPress } from "../hooks/useKeyPress";

package/dist/components/CollapserGroup.js

@@ -1,3 +1,4 @@
+'use client';
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {

package/dist/components/Popover.js

@@ -1,3 +1,4 @@
+'use client';
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {

package/dist/components/Tabs.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, createContext, useContext } from "react";
 var TabsContext = createContext(null);

package/dist/hooks/useKeyPress.js

@@ -1,3 +1,4 @@
+'use client';
 import { useEffect, useRef, useMemo } from 'react';
 var normalizeKeyCombination = function (keys) {
     var parts = keys.split(/\s*\+\s*/);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadlittledawn/docs-design-system-react",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "license": "MIT",
   "description": "React components for documentation design system",
   "repository": {
@@ -37,9 +37,10 @@
     "postcss-import": "^16.0.0",
     "typescript": "^5.0.0"
   },
+  "sideEffects": false,
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "exports": {
     ".": {