@cyclone-ui/nextjs 0.0.2 → 0.0.3

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+![Cyclone UI's logo banner](https://public.storm-cdn.com/cyclone-ui/media/banner-1280x320-dark.gif)
+
+# Changelog for Cyclone UI - Nextjs
+
+## [0.0.2](https://github.com/storm-software/cyclone-ui/releases/tag/nextjs%400.0.2) (10/24/2026)
+
+### Features
+
+- **nextjs:** Added NextJS and Vite build packages, setup skills, and documentation updates ([2759b41c](https://github.com/storm-software/cyclone-ui/commit/2759b41c))
+
+### Updated Dependencies
+
+- Updated **state** to **v0.0.32**
+- Updated **tokens** to **v0.3.20**

package/README.md

@@ -15,6 +15,7 @@ using `@tamagui/next-plugin` and `@tamagui/next-theme`.
 - Turbopack aliases for `react-native` → `react-native-web` and
   `react-native-svg` → `@tamagui/react-native-svg`
 - The Tamagui compiler for Webpack builds through `@tamagui/next-plugin`
+- Builds the Tamagui config from your own design tokens (`tokens` option)
 - Defines `process.env.TAMAGUI_TARGET`, which Cyclone components read to render
   web-only styles
 - Stores the light, dark or system setting and applies it before hydration
@@ -80,6 +81,41 @@ export function ThemeToggle() {
 Change the theme through `useThemeSetting`: `useThemeActions` changes the
 Cyclone state only, so the choice isn't saved.
 
+### Custom design tokens
+
+Pass `tokens` to build the Tamagui config from your own design tokens instead
+of the Cyclone UI defaults. Use a DTCG token object, or token file paths or
+globs relative to the working directory:
+
+```ts
+// next.config.ts
+import { withCycloneUI } from "@cyclone-ui/nextjs";
+
+export default withCycloneUI(
+  { reactStrictMode: true },
+  {
+    tokens: [
+      "tokens/primitives.json",
+      "tokens/light.tokens.json",
+      "tokens/dark.tokens.json"
+    ]
+  }
+);
+```
+
+Files with a theme name (`light.tokens.json`, `dark.tokens.json`, …) become
+the `light` and `dark` themes. The tokens go through the same preprocessor and
+generator as `@cyclone-ui/tokens`, and a `razorwind.config.ts` in the project
+still applies (for example its fonts).
+
+With `tokens`, `withCycloneUI` returns a promise, which Next.js accepts as the
+config export. The config is written to `.cyclone-ui/tamagui.config.ts`
+(add `.cyclone-ui` to `.gitignore`) and replaces `@cyclone-ui/tokens/tamagui`
+everywhere, so `CycloneUIProvider` and the Webpack compiler use it. With
+pnpm, Webpack builds also need `@tamagui/web` and `motion` installed in the
+app, because the Tamagui compiler evaluates the generated config from the
+project root.
+
 ### Provider props
 
 `CycloneUIProvider` accepts the

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("node:module"),t=require("node:path");function n(n={},r={}){return{...n,env:{TAMAGUI_TARGET:`web`,...n.env},turbopack:{...n.turbopack,resolveAlias:{"react-native":`react-native-web`,"react-native-svg":`@tamagui/react-native-svg`,...n.turbopack?.resolveAlias}},webpack:(i,a)=>{let{withTamagui:o}=(0,e.createRequire)((0,t.join)(a.dir,`package.json`))(`@tamagui/next-plugin`);return o({config:`@cyclone-ui/tokens/tamagui`,components:[`@tamagui/core`],appDir:!0,...r})(n).webpack(i,a)}}}exports.withCycloneUI=n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("node:module"),t=require("node:path");const n=(n,r,i)=>({...n,env:{TAMAGUI_TARGET:`web`,...n.env},turbopack:{...n.turbopack,resolveAlias:{"react-native":`react-native-web`,"react-native-svg":`@tamagui/react-native-svg`,...i&&{"@cyclone-ui/tokens/tamagui":`./${(0,t.relative)(process.cwd(),i)}`},...n.turbopack?.resolveAlias}},webpack:(a,o)=>{let{withTamagui:s}=(0,e.createRequire)((0,t.join)(o.dir,`package.json`))(`@tamagui/next-plugin`),c=s({config:i??`@cyclone-ui/tokens/tamagui`,components:[`@tamagui/core`],appDir:!0,...r})(n).webpack(a,o);return i&&(c.resolve.alias[`@cyclone-ui/tokens/tamagui$`]=i),c}});function r(e={},{tokens:t,...r}={}){return t?import(`@cyclone-ui/theme-builder`).then(async({buildTamaguiConfig:e})=>e({tokens:t})).then(t=>n(e,r,t)):n(e,r)}exports.withCycloneUI=r;

package/dist/index.d.cts

@@ -1,9 +1,27 @@
+import { BuildTamaguiConfigOptions } from "@cyclone-ui/theme-builder";
 import { WithTamaguiProps } from "@tamagui/next-plugin";
 import { NextConfig } from "next";
 /**
- * Options forwarded to `@tamagui/next-plugin` when Next.js builds with Webpack.
+ * The design tokens, plus options forwarded to `@tamagui/next-plugin` when
+ * Next.js builds with Webpack.
  */
-type WithCycloneUIOptions = Partial<WithTamaguiProps>;
+type WithCycloneUIOptions = Partial<WithTamaguiProps> & {
+  /**
+   * Design tokens to build the app's Tamagui config from: a DTCG token
+   * object, or token file path(s) or globs relative to the working directory.
+   * Theme-named files (`light.tokens.json`, `dark.tokens.json`, …) become the
+   * `light` / `dark` themes.
+   *
+   * @remarks
+   * The config is generated into `.cyclone-ui/tamagui.config.ts` (add
+   * `.cyclone-ui` to `.gitignore`) when Next.js loads its config, and replaces
+   * `@cyclone-ui/tokens/tamagui` for the compiler and every import in the app,
+   * including `CycloneUIProvider`.
+   *
+   * @defaultValue The Cyclone UI config from `@cyclone-ui/tokens/tamagui`
+   */
+  tokens?: BuildTamaguiConfigOptions["tokens"];
+};
 /**
  * Wrap a Next.js config with the setup Tamagui and Cyclone UI components need.
  *
@@ -14,6 +32,9 @@ type WithCycloneUIOptions = Partial<WithTamaguiProps>;
  *   must be installed, with the Cyclone UI Tamagui config.
  * - Both: defines `process.env.TAMAGUI_TARGET`.
  *
+ * With `tokens`, the Tamagui config is built from them first, so this returns
+ * a promise, which Next.js accepts as the config export.
+ *
  * Turbopack builds don't run the Tamagui compiler. To optimize them, use the
  * Tamagui CLI: `tamagui build --target web ./src -- next build`.
  *
@@ -25,10 +46,22 @@ type WithCycloneUIOptions = Partial<WithTamaguiProps>;
  * export default withCycloneUI({ reactStrictMode: true });
  * ```
  *
+ * @example
+ * ```ts
+ * // next.config.ts — build the Tamagui config from your own tokens
+ * import { withCycloneUI } from "@cyclone-ui/nextjs";
+ *
+ * export default withCycloneUI({}, { tokens: "tokens/**\/*.json" });
+ * ```
+ *
  * @param nextConfig - The Next.js config to extend.
- * @param options - Options forwarded to `@tamagui/next-plugin` (Webpack only).
+ * @param options - The design `tokens`, plus options forwarded to
+ * `@tamagui/next-plugin` (Webpack only).
  * @returns The extended Next.js config.
  */
-declare function withCycloneUI(nextConfig?: NextConfig, options?: WithCycloneUIOptions): NextConfig;
+declare function withCycloneUI(nextConfig?: NextConfig, options?: WithCycloneUIOptions & {
+  tokens?: undefined;
+}): NextConfig;
+declare function withCycloneUI(nextConfig: NextConfig | undefined, options: WithCycloneUIOptions): NextConfig | Promise<NextConfig>;
 export { WithCycloneUIOptions, withCycloneUI };
 //# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../src/index.ts"],"mappings":";;;;;KA0BY,uBAAuB,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;iBA2B3B,cACd,aAAY,YACZ,UAAS,uBACR"}
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/index.ts"],"mappings":";;;;;;;KA4BY,uBAAuB,QAAQ;;;;;;;;;;;;;;;EAezC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkFK,cACd,aAAa,YACb,UAAU;EAAyB;IAClC;iBACa,cACd,YAAY,wBACZ,SAAS,uBACR,aAAa,QAAQ"}

package/dist/index.d.mts

@@ -1,9 +1,27 @@
+import { BuildTamaguiConfigOptions } from "@cyclone-ui/theme-builder";
 import { WithTamaguiProps } from "@tamagui/next-plugin";
 import { NextConfig } from "next";
 /**
- * Options forwarded to `@tamagui/next-plugin` when Next.js builds with Webpack.
+ * The design tokens, plus options forwarded to `@tamagui/next-plugin` when
+ * Next.js builds with Webpack.
  */
-type WithCycloneUIOptions = Partial<WithTamaguiProps>;
+type WithCycloneUIOptions = Partial<WithTamaguiProps> & {
+  /**
+   * Design tokens to build the app's Tamagui config from: a DTCG token
+   * object, or token file path(s) or globs relative to the working directory.
+   * Theme-named files (`light.tokens.json`, `dark.tokens.json`, …) become the
+   * `light` / `dark` themes.
+   *
+   * @remarks
+   * The config is generated into `.cyclone-ui/tamagui.config.ts` (add
+   * `.cyclone-ui` to `.gitignore`) when Next.js loads its config, and replaces
+   * `@cyclone-ui/tokens/tamagui` for the compiler and every import in the app,
+   * including `CycloneUIProvider`.
+   *
+   * @defaultValue The Cyclone UI config from `@cyclone-ui/tokens/tamagui`
+   */
+  tokens?: BuildTamaguiConfigOptions["tokens"];
+};
 /**
  * Wrap a Next.js config with the setup Tamagui and Cyclone UI components need.
  *
@@ -14,6 +32,9 @@ type WithCycloneUIOptions = Partial<WithTamaguiProps>;
  *   must be installed, with the Cyclone UI Tamagui config.
  * - Both: defines `process.env.TAMAGUI_TARGET`.
  *
+ * With `tokens`, the Tamagui config is built from them first, so this returns
+ * a promise, which Next.js accepts as the config export.
+ *
  * Turbopack builds don't run the Tamagui compiler. To optimize them, use the
  * Tamagui CLI: `tamagui build --target web ./src -- next build`.
  *
@@ -25,10 +46,22 @@ type WithCycloneUIOptions = Partial<WithTamaguiProps>;
  * export default withCycloneUI({ reactStrictMode: true });
  * ```
  *
+ * @example
+ * ```ts
+ * // next.config.ts — build the Tamagui config from your own tokens
+ * import { withCycloneUI } from "@cyclone-ui/nextjs";
+ *
+ * export default withCycloneUI({}, { tokens: "tokens/**\/*.json" });
+ * ```
+ *
  * @param nextConfig - The Next.js config to extend.
- * @param options - Options forwarded to `@tamagui/next-plugin` (Webpack only).
+ * @param options - The design `tokens`, plus options forwarded to
+ * `@tamagui/next-plugin` (Webpack only).
  * @returns The extended Next.js config.
  */
-declare function withCycloneUI(nextConfig?: NextConfig, options?: WithCycloneUIOptions): NextConfig;
+declare function withCycloneUI(nextConfig?: NextConfig, options?: WithCycloneUIOptions & {
+  tokens?: undefined;
+}): NextConfig;
+declare function withCycloneUI(nextConfig: NextConfig | undefined, options: WithCycloneUIOptions): NextConfig | Promise<NextConfig>;
 export { WithCycloneUIOptions, withCycloneUI };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -1,2 +1,2 @@
-import{createRequire as e}from"node:module";import{join as t}from"node:path";function n(n={},r={}){return{...n,env:{TAMAGUI_TARGET:`web`,...n.env},turbopack:{...n.turbopack,resolveAlias:{"react-native":`react-native-web`,"react-native-svg":`@tamagui/react-native-svg`,...n.turbopack?.resolveAlias}},webpack:(i,a)=>{let{withTamagui:o}=e(t(a.dir,`package.json`))(`@tamagui/next-plugin`);return o({config:`@cyclone-ui/tokens/tamagui`,components:[`@tamagui/core`],appDir:!0,...r})(n).webpack(i,a)}}}export{n as withCycloneUI};
+import{createRequire as e}from"node:module";import{join as t,relative as n}from"node:path";const r=(r,i,a)=>({...r,env:{TAMAGUI_TARGET:`web`,...r.env},turbopack:{...r.turbopack,resolveAlias:{"react-native":`react-native-web`,"react-native-svg":`@tamagui/react-native-svg`,...a&&{"@cyclone-ui/tokens/tamagui":`./${n(process.cwd(),a)}`},...r.turbopack?.resolveAlias}},webpack:(n,o)=>{let{withTamagui:s}=e(t(o.dir,`package.json`))(`@tamagui/next-plugin`),c=s({config:a??`@cyclone-ui/tokens/tamagui`,components:[`@tamagui/core`],appDir:!0,...i})(r).webpack(n,o);return a&&(c.resolve.alias[`@cyclone-ui/tokens/tamagui$`]=a),c}});function i(e={},{tokens:t,...n}={}){return t?import(`@cyclone-ui/theme-builder`).then(async({buildTamaguiConfig:e})=>e({tokens:t})).then(t=>r(e,n,t)):r(e,n)}export{i as withCycloneUI};
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["withCycloneUI","nextConfig","createRequire","join","context","withTamagui","options","config"],"sources":[],"mappings":""}
+{"version":3,"file":"index.mjs","names":["extend","nextConfig","configPath","relative","createRequire","join","context","result","withTamagui","options","config","withCycloneUI","tokens","buildTamaguiConfig"],"sources":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyclone-ui/nextjs",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "description": "A Next.js config wrapper and root provider that set up Tamagui and Cyclone UI components in Next.js applications.",
   "repository": {
@@ -44,14 +44,17 @@
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.cts",
-  "dependencies": { "@tamagui/next-theme": "3.0.13" },
+  "dependencies": {
+    "@cyclone-ui/theme-builder": "0.0.22",
+    "@tamagui/next-theme": "3.0.13"
+  },
   "peerDependencies": {
-    "@cyclone-ui/state": "0.0.32",
-    "@cyclone-ui/tokens": "0.3.20",
+    "@cyclone-ui/state": "0.0.33",
+    "@cyclone-ui/tokens": "0.3.21",
     "@tamagui/core": "3.0.13",
     "@tamagui/next-plugin": "3.0.13",
     "@tamagui/react-native-svg": "3.0.13",
-    "next": "^16.4.2",
+    "next": "^16.4.3",
     "react": "^19.3.1",
     "react-native": "^0.87.1",
     "react-native-web": "0.19.12"
@@ -62,17 +65,17 @@
     "react-native": { "optional": true }
   },
   "devDependencies": {
-    "@cyclone-ui/state": "0.0.32",
-    "@cyclone-ui/tokens": "0.3.20",
+    "@cyclone-ui/state": "0.0.33",
+    "@cyclone-ui/tokens": "0.3.21",
     "@powerlines/plugin-tsdown": "^0.1.618",
     "@tamagui/core": "3.0.13",
     "@tamagui/next-plugin": "3.0.13",
     "@types/react": "^19.3.0",
-    "next": "^16.4.2",
+    "next": "^16.4.3",
     "powerlines": "^0.47.217",
     "react": "^19.3.1",
     "react-native-web": "0.19.12"
   },
   "publishConfig": { "access": "public" },
-  "gitHead": "74c039b0d98fa29c94456dba63e0ad376259d559"
+  "gitHead": "68d40b14f80f4c14e19d0491cdca0148fadfcf10"
 }