@leancodepl/styled-tools 8.4.0 → 8.5.1

package/README.md

@@ -1,7 +1,58 @@
-# styled-tools
+# @leancodepl/styled-tools
 
-This library was generated with [Nx](https://nx.dev).
+TypeScript utilities for styled-components with type-safe theme access.
 
-## Running unit tests
+## Installation
 
-Run `nx test styled-tools` to execute the unit tests via [Jest](https://jestjs.io).
+```bash
+npm install @leancodepl/styled-tools
+# or
+yarn add @leancodepl/styled-tools
+```
+
+## API
+
+### `mkTheme()`
+
+Creates type-safe theme utilities for styled-components with full TypeScript support.
+
+**Returns:** Object containing `theme` proxy and `useTheme` hook
+
+## Usage Examples
+
+### Basic Setup
+
+```typescript
+// theme.ts
+import { mkTheme } from '@leancodepl/styled-tools';
+import styled from 'styled-components';
+
+interface AppTheme {
+  colors: { primary: string; secondary: string };
+  spacing: { small: string; large: string };
+}
+
+export const { theme, useTheme } = mkTheme<AppTheme>();
+
+const Button = styled.button`
+  color: ${theme.colors.primary};
+  padding: ${theme.spacing.small};
+`;
+```
+
+### React Hook Usage
+
+```typescript
+import React from 'react';
+import { useTheme } from './theme';
+
+function ThemedComponent() {
+  const theme = useTheme();
+
+  return (
+    <div style={{ backgroundColor: theme.colors.primary }}>
+      <h1>Themed Component</h1>
+    </div>
+  );
+}
+```

package/index.cjs.js

@@ -23,7 +23,26 @@ function guard(value) {
     return typeof value === "object";
 }
 
-function mkTheme() {
+/**
+ * Creates type-safe theme utilities for styled-components with full TypeScript support.
+ * 
+ * @template TTheme - The theme object type extending Value
+ * @returns Object containing theme proxy and useTheme hook
+ * @example
+ * ```typescript
+ * interface AppTheme {
+ *   colors: { primary: string; secondary: string };
+ *   spacing: { small: string; large: string };
+ * }
+ * 
+ * const { theme, useTheme } = mkTheme<AppTheme>();
+ * 
+ * const Button = styled.button`
+ *   color: ${theme.colors.primary};
+ *   padding: ${theme.spacing.small};
+ * `;
+ * ```
+ */ function mkTheme() {
     return {
         theme: mkProxy(function(ctx) {
             return ctx.theme;

package/index.esm.js

@@ -21,7 +21,26 @@ function guard(value) {
     return typeof value === "object";
 }
 
-function mkTheme() {
+/**
+ * Creates type-safe theme utilities for styled-components with full TypeScript support.
+ * 
+ * @template TTheme - The theme object type extending Value
+ * @returns Object containing theme proxy and useTheme hook
+ * @example
+ * ```typescript
+ * interface AppTheme {
+ *   colors: { primary: string; secondary: string };
+ *   spacing: { small: string; large: string };
+ * }
+ * 
+ * const { theme, useTheme } = mkTheme<AppTheme>();
+ * 
+ * const Button = styled.button`
+ *   color: ${theme.colors.primary};
+ *   padding: ${theme.spacing.small};
+ * `;
+ * ```
+ */ function mkTheme() {
     return {
         theme: mkProxy(function(ctx) {
             return ctx.theme;

package/package.json

@@ -1,19 +1,50 @@
 {
   "name": "@leancodepl/styled-tools",
-  "version": "8.4.0",
+  "version": "8.5.1",
   "peerDependencies": {
     "styled-components": ">=6.0.0"
   },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/leancodepl/js_corelibrary.git",
+    "directory": "packages/styled-tools"
+  },
+  "homepage": "https://github.com/leancodepl/js_corelibrary",
+  "bugs": {
+    "url": "https://github.com/leancodepl/js_corelibrary/issues"
+  },
+  "description": "Utilities for styled-components",
+  "keywords": [
+    "styled-components",
+    "theme",
+    "css-in-js",
+    "react",
+    "typescript",
+    "javascript",
+    "leancode"
+  ],
+  "author": {
+    "name": "LeanCode",
+    "url": "https://leancode.co"
+  },
+  "sideEffects": false,
   "exports": {
     "./package.json": "./package.json",
     ".": {
       "module": "./index.esm.js",
-      "types": "./index.esm.d.ts",
+      "types": "./index.d.ts",
       "import": "./index.cjs.mjs",
       "default": "./index.cjs.js"
     }
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",
-  "types": "./index.esm.d.ts"
+  "types": "./index.d.ts"
 }

package/src/lib/mkTheme.d.ts

@@ -1,5 +1,25 @@
 import { type ExecutionContext, type RuleSet } from "styled-components";
 import { Value } from "./mkProxy";
+/**
+ * Creates type-safe theme utilities for styled-components with full TypeScript support.
+ *
+ * @template TTheme - The theme object type extending Value
+ * @returns Object containing theme proxy and useTheme hook
+ * @example
+ * ```typescript
+ * interface AppTheme {
+ *   colors: { primary: string; secondary: string };
+ *   spacing: { small: string; large: string };
+ * }
+ *
+ * const { theme, useTheme } = mkTheme<AppTheme>();
+ *
+ * const Button = styled.button`
+ *   color: ${theme.colors.primary};
+ *   padding: ${theme.spacing.small};
+ * `;
+ * ```
+ */
 export declare function mkTheme<TTheme extends Value>(): {
     theme: TransformDeep<TTheme>;
     useTheme: () => TTheme;

package/index.esm.d.ts

@@ -1 +0,0 @@
-export * from "./src/index";