npm - @typestyles/next - Versions diffs - 0.0.0-unstable.247bf362710f - Mend

@typestyles/next 0.0.0-unstable.247bf362710f

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,303 @@
+# @typestyles/next
+Next.js integration for typestyles with full support for App Router, Pages Router, and React Server Components.
+## Installation
+```bash
+npm install @typestyles/next typestyles
+# or
+pnpm add @typestyles/next typestyles
+# or
+yarn add @typestyles/next typestyles
+```
+## Requirements
+- Next.js >= 13.0.0
+- React >= 18.0.0
+- typestyles >= 0.1.0
+## Quick Start
+### App Router (Recommended)
+Import `getRegisteredCss` in your root layout to inject styles during SSR:
+```tsx
+// app/layout.tsx
+import { getRegisteredCss } from '@typestyles/next';
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  const css = getRegisteredCss();
+  return (
+    <html lang="en">
+      <head>{css && <style dangerouslySetInnerHTML={{ __html: css }} />}</head>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+### Pages Router
+Wrap your pages with the stylesheet component:
+```tsx
+// pages/_app.tsx
+import { TypestylesStylesheet } from '@typestyles/next';
+import type { AppProps } from 'next/app';
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <TypestylesStylesheet>
+      <Component {...pageProps} />
+    </TypestylesStylesheet>
+  );
+}
+```
+## React Server Components (RSC)
+The package provides multiple approaches for RSC support:
+### Option 1: Layout SSR (Simplest)
+Import `getRegisteredCss` in your root layout - this works in both Server and Client Components:
+```tsx
+// app/layout.tsx
+import { getRegisteredCss } from '@typestyles/next';
+export default function RootLayout({ children }) {
+  const css = getRegisteredCss();
+  return (
+    <html>
+      <head>{css && <style dangerouslySetInnerHTML={{ __html: css }} />}</head>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+### Option 2: Client Component Provider
+For complex cases with dynamic styles, create a client component wrapper:
+```tsx
+// components/TypestylesProvider.tsx
+'use client';
+import { getRegisteredCss } from 'typestyles/server';
+import { useEffect, useState } from 'react';
+export function TypestylesProvider({ children }) {
+  const [css, setCss] = useState('');
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+    setCss(getRegisteredCss());
+  }, []);
+  return (
+    <>
+      {children}
+      {mounted && css && <style id="typestyles" dangerouslySetInnerHTML={{ __html: css }} />}
+    </>
+  );
+}
+```
+Then use it in your layout:
+```tsx
+// app/layout.tsx
+import { TypestylesProvider } from '@/components/TypestylesProvider';
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <TypestylesProvider>{children}</TypestylesProvider>
+      </body>
+    </html>
+  );
+}
+```
+### Option 3: Metadata API
+For static generation, you can collect styles in `generateMetadata`:
+```tsx
+// app/layout.tsx
+import { generateMetadata } from 'next';
+import { getTypestylesMetadata } from '@typestyles/next/server';
+import { Home } from './Home';
+export async function generateMetadata() {
+  const css = await getTypestylesMetadata(<Home />);
+  return {
+    styles: [{ cssText: css, id: 'typestyles' }],
+  };
+}
+```
+## API Reference
+### getRegisteredCss
+Returns all currently registered CSS as a string. This is the simplest way to get styles for SSR.
+```tsx
+import { getRegisteredCss } from '@typestyles/next';
+const css = getRegisteredCss();
+```
+### collectStylesFromComponent
+Collect styles from a React component tree. Useful when you need explicit control over style collection.
+```tsx
+import { collectStylesFromComponent } from '@typestyles/next/server';
+import { YourComponent } from './YourComponent';
+const css = await collectStylesFromComponent(<YourComponent />);
+```
+### getTypestylesMetadata
+Generate CSS for use in Next.js metadata API. Collects styles by rendering the component server-side.
+```tsx
+import { getTypestylesMetadata } from '@typestyles/next/server';
+import { Home } from './Home';
+const css = await getTypestylesMetadata(<Home />);
+```
+### TypestylesStylesheet (Pages Router)
+A React component that renders typestyles CSS. Works with Pages Router.
+```tsx
+import { TypestylesStylesheet } from '@typestyles/next';
+<TypestylesStylesheet>
+  <YourApp />
+</TypestylesStylesheet>;
+```
+## Examples
+### Basic Usage with App Router
+```tsx
+// app/page.tsx
+import { styles } from 'typestyles';
+const button = styles.create('button', {
+  base: {
+    padding: '12px 24px',
+    backgroundColor: '#0066ff',
+    color: 'white',
+    border: 'none',
+    borderRadius: '6px',
+    cursor: 'pointer',
+  },
+});
+export default function Home() {
+  return (
+    <main>
+      <button className={button('base')}>Click me</button>
+    </main>
+  );
+}
+```
+### With Design Tokens
+```tsx
+// app/tokens.ts
+import { tokens } from 'typestyles';
+export const colors = tokens.create('color', {
+  primary: '#0066ff',
+  secondary: '#64748b',
+});
+export const spacing = tokens.create('space', {
+  sm: '8px',
+  md: '16px',
+  lg: '24px',
+});
+// app/page.tsx
+import { styles } from 'typestyles';
+import { colors, spacing } from './tokens';
+const card = styles.create('card', {
+  base: {
+    padding: spacing.md,
+    backgroundColor: colors.primary,
+    borderRadius: '8px',
+  },
+});
+export default function Page() {
+  return <div className={card('base')}>Hello World</div>;
+}
+```
+### With Dark Mode
+```tsx
+// app/layout.tsx
+import { tokens } from 'typestyles';
+import { getRegisteredCss } from '@typestyles/next';
+const darkTheme = tokens.createTheme('dark', {
+  color: {
+    background: '#1a1a1a',
+    text: '#ffffff',
+  },
+});
+export default function RootLayout({ children }) {
+  const css = getRegisteredCss();
+  return (
+    <html className={darkTheme}>
+      <head>{css && <style dangerouslySetInnerHTML={{ __html: css }} />}</head>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+## Troubleshooting
+### Flash of Unstyled Content (FOUC)
+If you see a flash of unstyled content, ensure `getRegisteredCss()` is called in the layout and styles are injected before the body renders.
+### Styles not appearing
+Make sure `typestyles` is installed in your project:
+```bash
+npm install typestyles
+```
+### TypeScript errors
+Ensure you have `"moduleResolution": "bundler"` or `"node"` in your `tsconfig.json`.
+## License
+MIT

package/dist/client.cjs ADDED Viewed

@@ -0,0 +1,72 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+// src/client.tsx
+var client_exports = {};
+__export(client_exports, {
+  TypestylesStylesheet: () => TypestylesStylesheet,
+  createTypestylesLayout: () => createTypestylesLayout,
+  useServerInsertedHTML: () => import_react.useServerInsertedHTML,
+  useTypestyles: () => useTypestyles
+});
+module.exports = __toCommonJS(client_exports);
+var import_react = require("react");
+var import_server = require("typestyles/server");
+var import_jsx_runtime = require("react/jsx-runtime");
+function useTypestyles() {
+  return (0, import_react.useSyncExternalStore)(
+    () => () => {
+    },
+    () => (0, import_server.getRegisteredCss)(),
+    () => ""
+  );
+}
+function TypestylesStylesheet({ children }) {
+  const [css, setCss] = (0, import_react.useState)("");
+  (0, import_react.useServerInsertedHTML)(() => {
+    const registeredCss = (0, import_server.getRegisteredCss)();
+    if (registeredCss) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { id: "typestyles", dangerouslySetInnerHTML: { __html: registeredCss } });
+    }
+    return null;
+  });
+  (0, import_react.useEffect)(() => {
+    setCss((0, import_server.getRegisteredCss)());
+  }, []);
+  if (children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { id: "typestyles-client", dangerouslySetInnerHTML: { __html: css } })
+    ] });
+  }
+  return null;
+}
+function createTypestylesLayout(layout) {
+  return function TypestylesLayout(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TypestylesStylesheet, { children: layout(props) });
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TypestylesStylesheet,
+  createTypestylesLayout,
+  useServerInsertedHTML,
+  useTypestyles
+});

package/dist/client.js ADDED Viewed

@@ -0,0 +1,45 @@
+"use client";
+// src/client.tsx
+import { useState, useEffect, useServerInsertedHTML, useSyncExternalStore } from "react";
+import { getRegisteredCss } from "typestyles/server";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function useTypestyles() {
+  return useSyncExternalStore(
+    () => () => {
+    },
+    () => getRegisteredCss(),
+    () => ""
+  );
+}
+function TypestylesStylesheet({ children }) {
+  const [css, setCss] = useState("");
+  useServerInsertedHTML(() => {
+    const registeredCss = getRegisteredCss();
+    if (registeredCss) {
+      return /* @__PURE__ */ jsx("style", { id: "typestyles", dangerouslySetInnerHTML: { __html: registeredCss } });
+    }
+    return null;
+  });
+  useEffect(() => {
+    setCss(getRegisteredCss());
+  }, []);
+  if (children) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      children,
+      /* @__PURE__ */ jsx("style", { id: "typestyles-client", dangerouslySetInnerHTML: { __html: css } })
+    ] });
+  }
+  return null;
+}
+function createTypestylesLayout(layout) {
+  return function TypestylesLayout(props) {
+    return /* @__PURE__ */ jsx(TypestylesStylesheet, { children: layout(props) });
+  };
+}
+export {
+  TypestylesStylesheet,
+  createTypestylesLayout,
+  useServerInsertedHTML,
+  useTypestyles
+};

package/dist/index.cjs ADDED Viewed

@@ -0,0 +1,100 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  TypestylesStylesheet: () => TypestylesStylesheet,
+  collectStylesFromComponent: () => collectStylesFromComponent,
+  createTypestylesLayout: () => createTypestylesLayout,
+  getRegisteredCss: () => import_server.getRegisteredCss,
+  getTypestylesMetadata: () => getTypestylesMetadata,
+  useServerInsertedHTML: () => import_react.useServerInsertedHTML,
+  useTypestyles: () => useTypestyles
+});
+module.exports = __toCommonJS(index_exports);
+// src/server.ts
+var import_server = require("typestyles/server");
+async function collectStylesFromComponent(component) {
+  const { renderToString } = await import("react-dom/server");
+  const { css } = (0, import_server.collectStyles)(() => renderToString(component));
+  return css;
+}
+async function getTypestylesMetadata(component) {
+  return collectStylesFromComponent(component);
+}
+// src/client.tsx
+var import_react = require("react");
+var import_server2 = require("typestyles/server");
+var import_jsx_runtime = require("react/jsx-runtime");
+function useTypestyles() {
+  return (0, import_react.useSyncExternalStore)(
+    () => () => {
+    },
+    () => (0, import_server2.getRegisteredCss)(),
+    () => ""
+  );
+}
+function TypestylesStylesheet({ children }) {
+  const [css, setCss] = (0, import_react.useState)("");
+  (0, import_react.useServerInsertedHTML)(() => {
+    const registeredCss = (0, import_server2.getRegisteredCss)();
+    if (registeredCss) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { id: "typestyles", dangerouslySetInnerHTML: { __html: registeredCss } });
+    }
+    return null;
+  });
+  (0, import_react.useEffect)(() => {
+    setCss((0, import_server2.getRegisteredCss)());
+  }, []);
+  if (children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { id: "typestyles-client", dangerouslySetInnerHTML: { __html: css } })
+    ] });
+  }
+  return null;
+}
+function createTypestylesLayout(layout) {
+  return function TypestylesLayout(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TypestylesStylesheet, { children: layout(props) });
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TypestylesStylesheet,
+  collectStylesFromComponent,
+  createTypestylesLayout,
+  getRegisteredCss,
+  getTypestylesMetadata,
+  useServerInsertedHTML,
+  useTypestyles
+});

package/dist/index.js ADDED Viewed

@@ -0,0 +1,57 @@
+// src/server.ts
+import { collectStyles, getRegisteredCss } from "typestyles/server";
+async function collectStylesFromComponent(component) {
+  const { renderToString } = await import("react-dom/server");
+  const { css } = collectStyles(() => renderToString(component));
+  return css;
+}
+async function getTypestylesMetadata(component) {
+  return collectStylesFromComponent(component);
+}
+// src/client.tsx
+import { useState, useEffect, useServerInsertedHTML, useSyncExternalStore } from "react";
+import { getRegisteredCss as getRegisteredCss2 } from "typestyles/server";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function useTypestyles() {
+  return useSyncExternalStore(
+    () => () => {
+    },
+    () => getRegisteredCss2(),
+    () => ""
+  );
+}
+function TypestylesStylesheet({ children }) {
+  const [css, setCss] = useState("");
+  useServerInsertedHTML(() => {
+    const registeredCss = getRegisteredCss2();
+    if (registeredCss) {
+      return /* @__PURE__ */ jsx("style", { id: "typestyles", dangerouslySetInnerHTML: { __html: registeredCss } });
+    }
+    return null;
+  });
+  useEffect(() => {
+    setCss(getRegisteredCss2());
+  }, []);
+  if (children) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      children,
+      /* @__PURE__ */ jsx("style", { id: "typestyles-client", dangerouslySetInnerHTML: { __html: css } })
+    ] });
+  }
+  return null;
+}
+function createTypestylesLayout(layout) {
+  return function TypestylesLayout(props) {
+    return /* @__PURE__ */ jsx(TypestylesStylesheet, { children: layout(props) });
+  };
+}
+export {
+  TypestylesStylesheet,
+  collectStylesFromComponent,
+  createTypestylesLayout,
+  getRegisteredCss,
+  getTypestylesMetadata,
+  useServerInsertedHTML,
+  useTypestyles
+};

package/dist/server.cjs ADDED Viewed

@@ -0,0 +1,52 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+// src/server.ts
+var server_exports = {};
+__export(server_exports, {
+  collectStylesFromComponent: () => collectStylesFromComponent,
+  getRegisteredCss: () => import_server.getRegisteredCss,
+  getTypestylesMetadata: () => getTypestylesMetadata
+});
+module.exports = __toCommonJS(server_exports);
+var import_server = require("typestyles/server");
+async function collectStylesFromComponent(component) {
+  const { renderToString } = await import("react-dom/server");
+  const { css } = (0, import_server.collectStyles)(() => renderToString(component));
+  return css;
+}
+async function getTypestylesMetadata(component) {
+  return collectStylesFromComponent(component);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  collectStylesFromComponent,
+  getRegisteredCss,
+  getTypestylesMetadata
+});

package/dist/server.js ADDED Viewed

@@ -0,0 +1,15 @@
+// src/server.ts
+import { collectStyles, getRegisteredCss } from "typestyles/server";
+async function collectStylesFromComponent(component) {
+  const { renderToString } = await import("react-dom/server");
+  const { css } = collectStyles(() => renderToString(component));
+  return css;
+}
+async function getTypestylesMetadata(component) {
+  return collectStylesFromComponent(component);
+}
+export {
+  collectStylesFromComponent,
+  getRegisteredCss,
+  getTypestylesMetadata
+};

package/package.json ADDED Viewed

@@ -0,0 +1,74 @@
+{
+  "name": "@typestyles/next",
+  "version": "0.0.0-unstable.247bf362710f",
+  "description": "Next.js integration for typestyles SSR",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./server": {
+      "types": "./src/server.d.ts",
+      "import": "./dist/server.js",
+      "require": "./dist/server.cjs"
+    },
+    "./client": {
+      "types": "./src/client.d.ts",
+      "import": "./dist/client.js",
+      "require": "./dist/client.cjs",
+      "default": "./dist/client.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "next",
+    "nextjs",
+    "typestyles",
+    "ssr",
+    "react"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dbanksdesign/typestyles",
+    "directory": "packages/next"
+  },
+  "peerDependencies": {
+    "next": ">=13.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "typestyles": ">=0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": false
+    },
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^25.2.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "next": "^14.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0"
+  },
+  "scripts": {
+    "build": "tsup"
+  }
+}

package/src/client.d.ts ADDED Viewed

@@ -0,0 +1,34 @@
+import type * as React from 'react';
+import type { useSyncExternalStore, useServerInsertedHTML } from 'react';
+/**
+ * Subscribe to typestyles CSS changes. Use this in client components
+ * that need to stay up-to-date with dynamically registered styles.
+ */
+export function useTypestyles(): ReturnType<typeof useSyncExternalStore<string>>;
+/**
+ * Collect styles during server rendering for App Router.
+ */
+export { useServerInsertedHTML };
+/**
+ * Props for the TypestylesStylesheet component.
+ */
+export interface TypestylesStylesheetProps {
+  children?: React.ReactNode;
+}
+/**
+ * A React component that renders typestyles CSS.
+ */
+export function TypestylesStylesheet(
+  props: TypestylesStylesheetProps,
+): React.JSX.Element | null;
+/**
+ * Create a Next.js layout export that includes typestyles.
+ */
+export function createTypestylesLayout<P extends { children?: React.ReactNode }>(
+  layout: (props: P) => React.ReactNode,
+): (props: P) => React.JSX.Element;

package/src/client.tsx ADDED Viewed

@@ -0,0 +1,143 @@
+'use client';
+import React, { useState, useEffect, useServerInsertedHTML, useSyncExternalStore } from 'react';
+import { getRegisteredCss } from 'typestyles/server';
+/**
+ * Subscribe to typestyles CSS changes. Use this in client components
+ * that need to stay up-to-date with dynamically registered styles.
+ *
+ * @example
+ * ```tsx
+ * // components/Styles.tsx
+ * 'use client';
+ * import { useTypestyles } from '@typestyles/next/client';
+ *
+ * export function Styles() {
+ *   useTypestyles();
+ *   return null;
+ * }
+ * ```
+ */
+export function useTypestyles() {
+  return useSyncExternalStore(
+    () => () => {},
+    () => getRegisteredCss(),
+    () => '',
+  );
+}
+/**
+ * Collect styles during server rendering for App Router.
+ * Use this in a Client Component wrapper that collects styles from its children.
+ *
+ * @example
+ * ```tsx
+ * // components/TypestylesProvider.tsx
+ * 'use client';
+ *
+ * import { useServerInsertedHTML, getRegisteredCss } from '@typestyles/next/client';
+ *
+ * export function TypestylesProvider({ children }: { children: React.ReactNode }) {
+ *   useServerInsertedHTML(() => {
+ *     return (
+ *       <style
+ *         id="typestyles"
+ *         dangerouslySetInnerHTML={{ __html: getRegisteredCss() }}
+ *       />
+ *     );
+ *   });
+ *   return <>{children}</>;
+ * }
+ * ```
+ */
+export { useServerInsertedHTML };
+/**
+ * Props for the TypestylesStylesheet component.
+ */
+export interface TypestylesStylesheetProps {
+  /**
+   * The children to render (styles will be collected from these).
+   * If not provided, only the existing registered CSS will be included.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * A React component that renders typestyles CSS.
+ *
+ * For App Router: Use this in your root layout to collect and render styles.
+ * Works with both Client Components and React Server Components.
+ *
+ * @example
+ * ```tsx
+ * // app/layout.tsx
+ * import { TypestylesStylesheet } from '@typestyles/next/client';
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html>
+ *       <head>
+ *         <TypestylesStylesheet />
+ *       </head>
+ *       <body>{children}</body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ */
+export function TypestylesStylesheet({ children }: TypestylesStylesheetProps) {
+  const [css, setCss] = useState('');
+  useServerInsertedHTML(() => {
+    const registeredCss = getRegisteredCss();
+    if (registeredCss) {
+      return <style id="typestyles" dangerouslySetInnerHTML={{ __html: registeredCss }} />;
+    }
+    return null;
+  });
+  useEffect(() => {
+    setCss(getRegisteredCss());
+  }, []);
+  if (children) {
+    return (
+      <>
+        {children}
+        <style id="typestyles-client" dangerouslySetInnerHTML={{ __html: css }} />
+      </>
+    );
+  }
+  return null;
+}
+/**
+ * Create a Next.js layout export that includes typestyles.
+ *
+ * @example
+ * ```tsx
+ * // app/layout.tsx
+ * import { createTypestylesLayout } from '@typestyles/next/client';
+ *
+ * export default createTypestylesLayout(function RootLayout({ children }) {
+ *   return (
+ *     <html>
+ *       <head>
+ *         <title>My App</title>
+ *       </head>
+ *       <body>{children}</body>
+ *     </html>
+ *   );
+ * });
+ * ```
+ */
+export function createTypestylesLayout<P extends { children?: React.ReactNode }>(
+  layout: (props: P) => React.ReactNode,
+): (props: P) => React.ReactNode {
+  return function TypestylesLayout(props: P) {
+    return <TypestylesStylesheet>{layout(props)}</TypestylesStylesheet>;
+  };
+}

package/src/index.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+export { getRegisteredCss } from 'typestyles/server';
+export interface TypestylesStylesheetProps {
+  children?: React.ReactNode;
+}
+export function TypestylesStylesheet(props: TypestylesStylesheetProps): React.JSX.Element;
+export function collectStylesFromComponent(component: React.ReactElement): Promise<string>;
+export function createTypestylesLayout<P extends { children?: React.ReactNode }>(
+  layout: (props: P) => React.ReactNode,
+): (props: P) => React.JSX.Element;

package/src/index.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+/**
+ * @typestyles/next - Next.js integration for typestyles
+ *
+ * This package provides two entry points:
+ *
+ * 1. Main entry (this file) - Re-exports everything
+ * 2. `/server` - Server-safe utilities (getRegisteredCss, collectStylesFromComponent, getTypestylesMetadata)
+ * 3. `/client` - Client components (TypestylesStylesheet, useTypestyles, useServerInsertedHTML)
+ *
+ * For App Router, prefer using the client entry for components:
+ *   import { TypestylesStylesheet } from '@typestyles/next/client';
+ *
+ * Or use server utilities for SSR:
+ *   import { getRegisteredCss } from '@typestyles/next/server';
+ */
+// Re-export server-safe utilities
+export { getRegisteredCss, collectStylesFromComponent, getTypestylesMetadata } from './server';
+// Re-export client components and hooks
+export {
+  TypestylesStylesheet,
+  useTypestyles,
+  useServerInsertedHTML,
+  createTypestylesLayout,
+  type TypestylesStylesheetProps,
+} from './client';

package/src/server.ts ADDED Viewed

@@ -0,0 +1,54 @@
+/**
+ * Server-safe utilities for Next.js integration.
+ * These functions can be used in Server Components without adding "use client".
+ */
+import { collectStyles, getRegisteredCss } from 'typestyles/server';
+export { getRegisteredCss };
+/**
+ * Collect styles from a React component and return them as a string.
+ * Useful for server components or when you need more control.
+ *
+ * @example
+ * ```tsx
+ * // app/styles.ts
+ * import { collectStylesFromComponent } from '@typestyles/next/server';
+ * import { YourApp } from './YourApp';
+ *
+ * export async function getStyles() {
+ *   return collectStylesFromComponent(<YourApp />);
+ * }
+ * ```
+ */
+export async function collectStylesFromComponent(component: React.ReactElement): Promise<string> {
+  const { renderToString } = await import('react-dom/server');
+  const { css } = collectStyles(() => renderToString(component));
+  return css;
+}
+/**
+ * Generate CSS for use in Next.js metadata API.
+ * Call this in your layout or page to get CSS for the head.
+ *
+ * Note: This only captures CSS registered during the synchronous render.
+ * For dynamic styles that may be registered client-side, use TypestylesStylesheet.
+ *
+ * @example
+ * ```tsx
+ * // app/layout.tsx
+ * import { generateMetadata } from 'next/metadata';
+ * import { getTypestylesMetadata } from '@typestyles/next/server';
+ * import { Home } from './Home';
+ *
+ * export async function generateMetadata() {
+ *   const css = await getTypestylesMetadata(<Home />);
+ *   return {
+ *     styles: [{ cssText: css }],
+ *   };
+ * }
+ * ```
+ */
+export async function getTypestylesMetadata(component: React.ReactElement): Promise<string> {
+  return collectStylesFromComponent(component);
+}