@typestyles/react 0.2.0

package/dist/jsx-runtime.js

@@ -0,0 +1,36 @@
+import { TypeStylesContext, resolveCssPropClass } from './chunk-4BYX2HZ7.js';
+import { useContext } from 'react';
+import { Fragment as Fragment$1, jsx as jsx$1, jsxs as jsxs$1 } from 'react/jsx-runtime';
+
+function processCssProp(props, styles) {
+  if (props.css == null) {
+    return props;
+  }
+  const { css, className, ...rest } = props;
+  const nextProps = {
+    ...rest,
+    className: resolveCssPropClass(styles.hashClass, css, className)
+  };
+  return nextProps;
+}
+function wrapJsx(factory, type, props, key) {
+  const styles = useContext(TypeStylesContext);
+  if (props.css != null && styles == null) {
+    throw new Error(
+      "[@typestyles/react] The `css` prop requires a `TypeStylesProvider` with a `styles` instance. Wrap your app in `<TypeStylesProvider styles={styles}>`, or use the Babel plugin for zero-runtime css props."
+    );
+  }
+  const nextProps = styles ? processCssProp(props, styles) : props;
+  return factory(type, nextProps, key);
+}
+var Fragment = Fragment$1;
+function jsx(type, props, key) {
+  return wrapJsx(jsx$1, type, props, key);
+}
+function jsxs(type, props, key) {
+  return wrapJsx(jsxs$1, type, props, key);
+}
+
+export { Fragment, jsx, jsxs };
+//# sourceMappingURL=jsx-runtime.js.map
+//# sourceMappingURL=jsx-runtime.js.map

package/dist/jsx-runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/jsx-runtime.ts"],"names":["ReactFragment","reactJsx","reactJsxs"],"mappings":";;;;AAMA,SAAS,cAAA,CACP,OACA,MAAA,EACG;AACH,EAAA,IAAI,KAAA,CAAM,OAAO,IAAA,EAAM;AACrB,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,MAAM,EAAE,GAAA,EAAK,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACpC,EAAA,MAAM,SAAA,GAAY;AAAA,IAChB,GAAG,IAAA;AAAA,IACH,SAAA,EAAW,mBAAA,CAAoB,MAAA,CAAO,SAAA,EAAW,KAAK,SAAS;AAAA,GACjE;AAEA,EAAA,OAAO,SAAA;AACT;AAEA,SAAS,OAAA,CACP,OAAA,EACA,IAAA,EACA,KAAA,EACA,GAAA,EACoB;AACpB,EAAA,MAAM,MAAA,GAAS,WAAW,iBAAiB,CAAA;AAE3C,EAAA,IAAI,KAAA,CAAM,GAAA,IAAO,IAAA,IAAQ,MAAA,IAAU,IAAA,EAAM;AACvC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KAEF;AAAA,EACF;AAEA,EAAA,MAAM,SAAA,GAAY,MAAA,GAAS,cAAA,CAAe,KAAA,EAAO,MAAM,CAAA,GAAK,KAAA;AAC5D,EAAA,OAAO,OAAA,CAAQ,IAAA,EAAM,SAAA,EAAW,GAAG,CAAA;AACrC;AAEO,IAAM,QAAA,GAAWA;AAEjB,SAAS,GAAA,CACd,IAAA,EACA,KAAA,EACA,GAAA,EACoB;AACpB,EAAA,OAAO,OAAA,CAAQC,KAAA,EAAU,IAAA,EAAM,KAAA,EAAO,GAAG,CAAA;AAC3C;AAEO,SAAS,IAAA,CACd,IAAA,EACA,KAAA,EACA,GAAA,EACoB;AACpB,EAAA,OAAO,OAAA,CAAQC,MAAA,EAAW,IAAA,EAAM,KAAA,EAAO,GAAG,CAAA;AAC5C","file":"jsx-runtime.js","sourcesContent":["import { useContext, type ElementType, type ReactNode } from 'react';\nimport { jsx as reactJsx, jsxs as reactJsxs, Fragment as ReactFragment } from 'react/jsx-runtime';\nimport { resolveCssPropClass } from './css-prop';\nimport { TypeStylesContext } from './context';\nimport type { WithCssProp } from './types';\n\nfunction processCssProp<P extends Record<string, unknown>>(\n  props: WithCssProp<P>,\n  styles: NonNullable<React.ContextType<typeof TypeStylesContext>>,\n): P {\n  if (props.css == null) {\n    return props as P;\n  }\n\n  const { css, className, ...rest } = props;\n  const nextProps = {\n    ...rest,\n    className: resolveCssPropClass(styles.hashClass, css, className),\n  } as unknown as P;\n\n  return nextProps;\n}\n\nfunction wrapJsx<P extends Record<string, unknown>>(\n  factory: typeof reactJsx,\n  type: ElementType,\n  props: WithCssProp<P>,\n  key?: React.Key,\n): React.ReactElement {\n  const styles = useContext(TypeStylesContext);\n\n  if (props.css != null && styles == null) {\n    throw new Error(\n      '[@typestyles/react] The `css` prop requires a `TypeStylesProvider` with a `styles` instance. ' +\n        'Wrap your app in `<TypeStylesProvider styles={styles}>`, or use the Babel plugin for zero-runtime css props.',\n    );\n  }\n\n  const nextProps = styles ? processCssProp(props, styles) : (props as P);\n  return factory(type, nextProps, key);\n}\n\nexport const Fragment = ReactFragment;\n\nexport function jsx<P extends Record<string, unknown>>(\n  type: ElementType,\n  props: WithCssProp<P>,\n  key?: React.Key,\n): React.ReactElement {\n  return wrapJsx(reactJsx, type, props, key);\n}\n\nexport function jsxs<P extends Record<string, unknown>>(\n  type: ElementType,\n  props: WithCssProp<P>,\n  key?: React.Key,\n): React.ReactElement {\n  return wrapJsx(reactJsxs, type, props, key);\n}\n\nexport type { ReactNode };\n"]}

package/dist/types-_vEO6H8X.d.cts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'typestyles';
+
+type CssPropValue = CSSProperties | false | null | undefined;
+type WithCssProp<P> = P & {
+    css?: CssPropValue;
+    className?: string;
+};
+
+export type { CssPropValue as C, WithCssProp as W };

package/dist/types-_vEO6H8X.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'typestyles';
+
+type CssPropValue = CSSProperties | false | null | undefined;
+type WithCssProp<P> = P & {
+    css?: CssPropValue;
+    className?: string;
+};
+
+export type { CssPropValue as C, WithCssProp as W };

package/package.json

@@ -0,0 +1,112 @@
+{
+  "name": "@typestyles/react",
+  "version": "0.2.0",
+  "description": "React integration for typestyles — styled API and css prop",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./jsx-runtime": {
+      "import": {
+        "types": "./dist/jsx-runtime.d.ts",
+        "default": "./dist/jsx-runtime.js"
+      },
+      "require": {
+        "types": "./dist/jsx-runtime.d.cts",
+        "default": "./dist/jsx-runtime.cjs"
+      }
+    },
+    "./jsx-dev-runtime": {
+      "import": {
+        "types": "./dist/jsx-dev-runtime.d.ts",
+        "default": "./dist/jsx-dev-runtime.js"
+      },
+      "require": {
+        "types": "./dist/jsx-dev-runtime.d.cts",
+        "default": "./dist/jsx-dev-runtime.cjs"
+      }
+    },
+    "./babel": {
+      "import": {
+        "types": "./dist/babel-plugin.d.ts",
+        "default": "./dist/babel-plugin.js"
+      },
+      "require": {
+        "types": "./dist/babel-plugin.d.cts",
+        "default": "./dist/babel-plugin.cjs"
+      }
+    },
+    "./css-prop-runtime": {
+      "import": {
+        "types": "./dist/css-prop-runtime.d.ts",
+        "default": "./dist/css-prop-runtime.js"
+      },
+      "require": {
+        "types": "./dist/css-prop-runtime.d.cts",
+        "default": "./dist/css-prop-runtime.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "react",
+    "typestyles",
+    "css-in-js",
+    "styled",
+    "css-prop"
+  ],
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/type-styles/typestyles",
+    "directory": "packages/react"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "typestyles": ">=0.4.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@babel/helper-plugin-utils": "^7.27.1",
+    "@babel/types": "^7.29.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/babel__core": "^7.20.5",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "eslint": "^9.39.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0",
+    "vitest": "^3.0.0",
+    "typestyles": "0.7.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit"
+  }
+}