typewritingclass-react 0.2.0 → 0.2.1

package/dist/index.cjs

@@ -0,0 +1,36 @@
+"use strict";
+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/index.ts
+var src_exports = {};
+__export(src_exports, {
+  useStyle: () => useStyle
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/useStyle.ts
+var import_react = require("react");
+var import_typewritingclass = require("typewritingclass");
+function useStyle(...args) {
+  return (0, import_react.useMemo)(() => (0, import_typewritingclass.dcx)(...args), args);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStyle
+});

package/{src/useStyle.ts → dist/index.d.cts}

@@ -1,8 +1,4 @@
-'use client'
-
-import { useMemo } from 'react'
-import type { StyleRule, DynamicResult } from 'typewritingclass'
-import { dcx } from 'typewritingclass'
+import { StyleRule, DynamicResult } from 'typewritingclass';
 
 /**
  * React hook that composes style rules into a `className` + `style` object.
@@ -45,6 +41,6 @@ import { dcx } from 'typewritingclass'
  * }
  * ```
  */
-export function useStyle(...args: (StyleRule | string)[]): DynamicResult {
-  return useMemo(() => dcx(...args), args)
-}
+declare function useStyle(...args: (StyleRule | string)[]): DynamicResult;
+
+export { useStyle };

package/dist/index.d.ts

@@ -0,0 +1,46 @@
+import { StyleRule, DynamicResult } from 'typewritingclass';
+
+/**
+ * React hook that composes style rules into a `className` + `style` object.
+ *
+ * Wraps {@link dcx} in `useMemo` for stable references across re-renders.
+ * The returned {@link DynamicResult} object can be spread directly onto JSX
+ * elements, providing both the generated class name and any inline CSS custom
+ * property bindings needed by `dynamic()` values.
+ *
+ * The memo dependency array is the `args` array itself, so the result is
+ * recalculated only when the input rules or class name strings change.
+ *
+ * @param args - One or more {@link StyleRule} objects or string class names
+ *   to compose together.
+ * @returns A {@link DynamicResult} with `className` and `style` properties,
+ *   suitable for spreading onto a JSX element.
+ *
+ * @example
+ * ```tsx
+ * import { useStyle } from 'typewritingclass-react'
+ * import { p, bg, dynamic } from 'typewritingclass'
+ *
+ * function Card({ color }: { color: string }) {
+ *   const props = useStyle(p(6), bg(dynamic(color)))
+ *   return <div {...props}>Content</div>
+ *   // Renders: <div class="_a1b _c2d" style="--twc-d0: #ff0000">Content</div>
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Mixing style rules with plain class names
+ * import { useStyle } from 'typewritingclass-react'
+ * import { p, rounded } from 'typewritingclass'
+ *
+ * function Badge() {
+ *   const props = useStyle(p(2), rounded('full'), 'custom-badge')
+ *   return <span {...props}>New</span>
+ *   // Renders: <span class="_x1y _z2w custom-badge" style={{}}>New</span>
+ * }
+ * ```
+ */
+declare function useStyle(...args: (StyleRule | string)[]): DynamicResult;
+
+export { useStyle };

package/dist/index.js

@@ -0,0 +1,9 @@
+// src/useStyle.ts
+import { useMemo } from "react";
+import { dcx } from "typewritingclass";
+function useStyle(...args) {
+  return useMemo(() => dcx(...args), args);
+}
+export {
+  useStyle
+};

package/dist/server.cjs

@@ -0,0 +1,39 @@
+"use strict";
+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/server.ts
+var server_exports = {};
+__export(server_exports, {
+  getStyleSheet: () => getStyleSheet,
+  getStyleTag: () => getStyleTag
+});
+module.exports = __toCommonJS(server_exports);
+var import_typewritingclass = require("typewritingclass");
+function getStyleSheet() {
+  return (0, import_typewritingclass.generateCSS)();
+}
+function getStyleTag() {
+  const css = (0, import_typewritingclass.generateCSS)();
+  return `<style data-twc>${css}</style>`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getStyleSheet,
+  getStyleTag
+});

package/{src/server.ts → dist/server.d.cts}

@@ -1,5 +1,3 @@
-import { generateCSS } from 'typewritingclass'
-
 /**
  * Returns the current generated CSS as a raw stylesheet string.
  *
@@ -22,10 +20,7 @@ import { generateCSS } from 'typewritingclass'
  * // "._a1b2c { padding: 1rem; }\n\n._d3e4f { margin: 0; }"
  * ```
  */
-export function getStyleSheet(): string {
-  return generateCSS()
-}
-
+declare function getStyleSheet(): string;
 /**
  * Returns the current generated CSS wrapped in a `<style>` tag string,
  * ready to be injected into an HTML document during SSR.
@@ -56,7 +51,6 @@ export function getStyleSheet(): string {
  * )
  * ```
  */
-export function getStyleTag(): string {
-  const css = generateCSS()
-  return `<style data-twc>${css}</style>`
-}
+declare function getStyleTag(): string;
+
+export { getStyleSheet, getStyleTag };

package/dist/server.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Returns the current generated CSS as a raw stylesheet string.
+ *
+ * This reads from the runtime style registry, collecting all rules that
+ * have been registered so far and rendering them into a single CSS string.
+ * Useful for SSR scenarios where you need the raw CSS to inject into a
+ * `<style>` tag or write to a file.
+ *
+ * This function is safe to call from React Server Components since it
+ * does not use any client-side APIs (hooks, DOM, etc.).
+ *
+ * @returns The full CSS string for all registered style rules, or an
+ *   empty string if no rules have been registered yet.
+ *
+ * @example
+ * ```ts
+ * import { getStyleSheet } from 'typewritingclass-react/server'
+ *
+ * const css = getStyleSheet()
+ * // "._a1b2c { padding: 1rem; }\n\n._d3e4f { margin: 0; }"
+ * ```
+ */
+declare function getStyleSheet(): string;
+/**
+ * Returns the current generated CSS wrapped in a `<style>` tag string,
+ * ready to be injected into an HTML document during SSR.
+ *
+ * The style tag includes a `data-twc` attribute for easy identification
+ * and potential hydration on the client side.
+ *
+ * This function is safe to call from React Server Components since it
+ * does not use any client-side APIs (hooks, DOM, etc.).
+ *
+ * @returns An HTML `<style>` tag string containing all registered CSS
+ *   rules, or an empty `<style>` tag if no rules have been registered.
+ *
+ * @example
+ * ```tsx
+ * import { getStyleTag } from 'typewritingclass-react/server'
+ *
+ * // In a server component or SSR render function:
+ * const styleTag = getStyleTag()
+ * // '<style data-twc>._a1b2c { padding: 1rem; }</style>'
+ *
+ * // Inject into the document head
+ * return (
+ *   <html>
+ *     <head dangerouslySetInnerHTML={{ __html: styleTag }} />
+ *     <body>{children}</body>
+ *   </html>
+ * )
+ * ```
+ */
+declare function getStyleTag(): string;
+
+export { getStyleSheet, getStyleTag };

package/dist/server.js

@@ -0,0 +1,13 @@
+// src/server.ts
+import { generateCSS } from "typewritingclass";
+function getStyleSheet() {
+  return generateCSS();
+}
+function getStyleTag() {
+  const css = generateCSS();
+  return `<style data-twc>${css}</style>`;
+}
+export {
+  getStyleSheet,
+  getStyleTag
+};

package/package.json

@@ -1,32 +1,53 @@
 {
   "name": "typewritingclass-react",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/corysimmons/typewritingclass",
+    "directory": "packages/typewritingclass-react"
+  },
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "default": "./src/index.ts"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./server": {
-      "types": "./src/server.ts",
-      "default": "./src/server.ts"
+      "import": {
+        "types": "./dist/server.d.ts",
+        "default": "./dist/server.js"
+      },
+      "require": {
+        "types": "./dist/server.d.cts",
+        "default": "./dist/server.cjs"
+      }
     }
   },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
-    "src"
+    "dist"
   ],
   "peerDependencies": {
     "react": "^18 || ^19",
-    "typewritingclass": "0.2.0"
+    "typewritingclass": "0.2.3"
   },
   "devDependencies": {
     "react": "^19.0.0",
     "@types/react": "^19.0.0",
     "vitest": "^3.0.4",
     "typescript": "^5.7.3",
-    "typewritingclass": "0.2.0"
+    "typewritingclass": "0.2.3"
   },
   "scripts": {
+    "build": "tsup",
     "test": "vitest run",
     "test:watch": "vitest"
   }

package/src/index.ts

@@ -1 +0,0 @@
-export { useStyle } from './useStyle.ts'