@css-hooks/react 0.6.0

package/cjs/index.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.recommended = exports.createHooks = exports.stringifyValue = void 0;
+const core_1 = require("@css-hooks/core");
+Object.defineProperty(exports, "recommended", { enumerable: true, get: function () { return core_1.recommended; } });
+const unitless_1 = __importDefault(require("@emotion/unitless"));
+/**
+ * @internal
+ *
+ * @remarks
+ * Theoretically this should line up with the behavior of
+ * {@link https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/client/CSSPropertyOperations.js}.
+ */
+function stringifyValue(propertyName, value) {
+    if (typeof value === "string") {
+        return value;
+    }
+    if (typeof value === "number") {
+        return `${value}${!(propertyName in unitless_1.default) ? "px" : ""}`;
+    }
+    return null;
+}
+exports.stringifyValue = stringifyValue;
+/**
+ * Creates the hooks specified in the configuration.
+ *
+ * @param config - The hooks to build
+ *
+ * @returns The CSS required to enable the configured hooks, along with the corresponding `hooks` function for use in components.
+ */
+exports.createHooks = (0, core_1.buildHooksSystem)(stringifyValue);

package/esm/index.js

@@ -0,0 +1,27 @@
+import { buildHooksSystem, recommended } from "@css-hooks/core";
+import unitless from "@emotion/unitless";
+/**
+ * @internal
+ *
+ * @remarks
+ * Theoretically this should line up with the behavior of
+ * {@link https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/client/CSSPropertyOperations.js}.
+ */
+export function stringifyValue(propertyName, value) {
+    if (typeof value === "string") {
+        return value;
+    }
+    if (typeof value === "number") {
+        return `${value}${!(propertyName in unitless) ? "px" : ""}`;
+    }
+    return null;
+}
+/**
+ * Creates the hooks specified in the configuration.
+ *
+ * @param config - The hooks to build
+ *
+ * @returns The CSS required to enable the configured hooks, along with the corresponding `hooks` function for use in components.
+ */
+export const createHooks = buildHooksSystem(stringifyValue);
+export { recommended };

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@css-hooks/react",
+  "description": "CSS Hooks for React",
+  "version": "0.6.0",
+  "author": "Nick Saunders",
+  "dependencies": {
+    "@css-hooks/core": "^0.6.0",
+    "@emotion/unitless": "^0.8.1"
+  },
+  "devDependencies": {
+    "@tsconfig/node-lts": "^18.12.3",
+    "@tsconfig/strictest": "^2.0.1",
+    "@types/jest": "^29.5.3",
+    "@types/react": "^18.2.20",
+    "jest": "^29.6.2",
+    "rimraf": "^5.0.1",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.1.6"
+  },
+  "files": [
+    "cjs",
+    "esm",
+    "types"
+  ],
+  "license": "MIT",
+  "main": "cjs",
+  "module": "esm",
+  "peerDependencies": {
+    "react": ">=16.14.0 <19"
+  },
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/css-hooks/css-hooks.git",
+    "directory": "packages/react"
+  },
+  "scripts": {
+    "clean": "rimraf cjs esm types",
+    "lint": "eslint __tests__ src .*.*js *.*js",
+    "postversion": "npm install @css-hooks/core@^$npm_package_version --force",
+    "prepublishOnly": "tsc -p tsconfig.dist.json --outDir cjs --module commonjs && tsc -p tsconfig.dist.json --outDir esm --module es6 && tsc -p tsconfig.dist.json --declaration --emitDeclarationOnly --outDir types",
+    "test": "jest"
+  },
+  "types": "types"
+}

package/types/index.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from "react";
+import { recommended } from "@css-hooks/core";
+/**
+ * @internal
+ *
+ * @remarks
+ * Theoretically this should line up with the behavior of
+ * {@link https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/client/CSSPropertyOperations.js}.
+ */
+export declare function stringifyValue(propertyName: string, value: unknown): string | null;
+/**
+ * Creates the hooks specified in the configuration.
+ *
+ * @param config - The hooks to build
+ *
+ * @returns The CSS required to enable the configured hooks, along with the corresponding `hooks` function for use in components.
+ */
+export declare const createHooks: <HookProperties extends string | number | symbol>(config: Record<HookProperties, `@container ${string}` | `@media ${string}` | `:${string}` | `${string}&${string}`>) => readonly [string, (properties: import("@css-hooks/core").WithHooks<HookProperties, CSSProperties>) => CSSProperties];
+export { recommended };