stoop 0.0.20 → 0.2.0

package/dist/utils/theme-map.d.ts

@@ -0,0 +1,25 @@
+/**
+ * ThemeMap utilities for property-aware token resolution.
+ * Maps CSS properties to theme scales for deterministic token resolution.
+ */
+import type { ThemeScale } from "../types";
+import { APPROVED_THEME_SCALES, DEFAULT_THEME_MAP } from "../constants";
+export { APPROVED_THEME_SCALES, DEFAULT_THEME_MAP };
+export type { ThemeScale };
+/**
+ * Auto-detects theme scale from CSS property name using pattern matching.
+ * Used as fallback when property is not in DEFAULT_THEME_MAP.
+ *
+ * @param property - CSS property name
+ * @returns Theme scale name or undefined if no pattern matches
+ */
+export declare function autoDetectScale(property: string): ThemeScale | undefined;
+/**
+ * Gets the theme scale for a CSS property.
+ * Checks user themeMap first, then default themeMap, then pattern matching.
+ *
+ * @param property - CSS property name
+ * @param userThemeMap - Optional user-provided themeMap override
+ * @returns Theme scale name or undefined if no mapping found
+ */
+export declare function getScaleForProperty(property: string, userThemeMap?: Record<string, ThemeScale>): ThemeScale | undefined;

package/dist/utils/theme-validation.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Theme validation utilities.
+ * Ensures theme objects only contain approved scales.
+ */
+import type { DefaultTheme } from "../types";
+/**
+ * Validates that a theme object only contains approved scales.
+ *
+ * @param theme - Theme object to validate
+ * @returns Validated theme as DefaultTheme
+ * @throws Error if theme contains invalid scales (in development)
+ */
+export declare function validateTheme(theme: unknown): DefaultTheme;

package/dist/utils/theme.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Theme token resolution utilities.
+ * Converts theme tokens to CSS variables for runtime theme switching.
+ * Uses cached token index for efficient lookups and theme comparison.
+ */
+import type { CSS, Theme, ThemeScale } from "../types";
+/**
+ * Compares two themes for equality by structure and values.
+ * Excludes 'media' property from comparison since it's not a CSS variable scale.
+ *
+ * @param theme1 - First theme to compare
+ * @param theme2 - Second theme to compare
+ * @returns True if themes are equal, false otherwise
+ */
+export declare function themesAreEqual(theme1: Theme | null, theme2: Theme | null): boolean;
+/**
+ * Converts a theme token string to a CSS variable reference.
+ *
+ * @param token - Token string (e.g., "$primary" or "$colors$primary")
+ * @param theme - Optional theme for token resolution
+ * @param property - Optional CSS property name for scale detection
+ * @param themeMap - Optional theme scale mappings
+ * @returns CSS variable reference string
+ */
+export declare function tokenToCSSVar(token: string, theme?: Theme, property?: string, themeMap?: Record<string, ThemeScale>): string;
+/**
+ * Generates CSS custom properties from a theme object.
+ *
+ * @param theme - Theme object to convert to CSS variables
+ * @param prefix - Optional prefix for CSS variable names
+ * @returns CSS string with :root selector and CSS variables
+ */
+export declare function generateCSSVariables(theme: Theme, prefix?: string): string;
+/**
+ * Recursively replaces theme tokens with CSS variable references in a CSS object.
+ *
+ * @param obj - CSS object to process
+ * @param theme - Optional theme for token resolution
+ * @param themeMap - Optional theme scale mappings
+ * @param property - Optional CSS property name for scale detection
+ * @returns CSS object with tokens replaced by CSS variables
+ */
+export declare function replaceThemeTokensWithVars(obj: CSS, theme?: Theme, themeMap?: Record<string, ThemeScale>, property?: string): CSS;

package/dist/utils/type-guards.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Type guard utilities.
+ * Provides runtime type checking for CSS objects, themes, and styled component references.
+ */
+import type { CSS, Theme } from "../types";
+/**
+ * Type guard for CSS objects.
+ *
+ * @param value - Value to check
+ * @returns True if value is a CSS object
+ */
+export declare function isCSSObject(value: unknown): value is CSS;
+/**
+ * Type guard for valid CSS objects (excludes styled component references).
+ *
+ * @param value - Value to check
+ * @returns True if value is a valid CSS object
+ */
+export declare function isValidCSSObject(value: unknown): value is CSS;
+/**
+ * Type guard for theme objects.
+ *
+ * @param value - Value to check
+ * @returns True if value is a theme object
+ */
+export declare function isThemeObject(value: unknown): value is Theme;

package/dist/utils/utilities.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Utility function application.
+ * Applies utility functions (e.g., px, py) to transform shorthand properties into CSS.
+ * Recursively processes nested CSS objects.
+ */
+import type { CSS, UtilityFunction } from "../types";
+/**
+ * Applies utility functions to transform shorthand properties into CSS.
+ *
+ * @param styles - CSS object to process
+ * @param utils - Optional utility functions object
+ * @returns CSS object with utilities applied
+ */
+export declare function applyUtilities(styles: CSS, utils?: Record<string, UtilityFunction>): CSS;

package/package.json

@@ -1,62 +1,89 @@
 {
   "name": "stoop",
-  "description": "A small component library for quickly spinning up a pretty Next.js project.",
-  "version": "0.0.20",
+  "description": "CSS-in-JS library with type inference, theme creation, and variants support.",
+  "version": "0.2.0",
   "author": "Jackson Dolman <mail@dolmios.com>",
-  "license": "MIT",
-  "type": "module",
-  "sideEffects": [
-    "**/*.css",
-    "./dist/index.js"
-  ],
   "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dolmios/stoop.git"
+  },
+  "bugs": {
+    "url": "https://github.com/dolmios/stoop/issues"
+  },
+  "homepage": "https://github.com/dolmios/stoop#readme",
+  "dependencies": {
+    "react-polymorphic-types": "^2.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.17.0",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "bun-types": "^1.2.19",
+    "eslint": "^9.32.0",
+    "eslint-config-dolmios": "^2.0.10",
+    "prettier": "^3.6.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "typescript": "^5.9.2"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.js"
-    },
-    "./styles": "./dist/index.css"
+    }
   },
   "files": [
     "dist"
   ],
   "keywords": [
-    "components",
-    "react",
-    "ui",
+    "css variables",
+    "css-in-ts",
+    "css-in-ts alternative",
+    "css-in-js",
+    "css-in-js alternative",
+    "emotion",
+    "emotion alternative",
+    "lightweight",
+    "minimal",
+    "next.js",
     "nextjs",
+    "performance",
+    "react",
+    "react styling",
+    "stitches",
+    "stitches alternative",
+    "stitches-alternative",
+    "styled-components",
+    "styled-components alternative",
+    "styling",
     "theme",
-    "dark-mode"
+    "theme switching",
+    "type-safe",
+    "typescript",
+    "variants"
   ],
-  "devDependencies": {
-    "@types/node": "^22.13.10",
-    "@types/react": "^19.0.11",
-    "@types/react-dom": "^19.0.4",
-    "bun-types": "^1.2.5",
-    "clsx": "^2.1.0",
-    "eslint": "^9.22.0",
-    "eslint-config-dolmios": "^2.0.6",
-    "prettier": "^3.5.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "typescript": "^5.8.2"
-  },
+  "license": "MIT",
   "peerDependencies": {
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
+  "prettier": "eslint-config-dolmios/configs/prettier",
+  "sideEffects": false,
+  "type": "module",
   "scripts": {
-    "build": "bun run build:clean && bun run build:types && bun run build:js",
+    "build": "bun run build:clean && bun run build:js && bun run build:types && bun run build:copy-declarations",
     "build:clean": "rm -rf dist",
-    "build:js": "bun build ./src/index.ts --outdir ./dist --target browser --minify --jsx=react",
-    "build:types": "tsc --emitDeclarationOnly --declaration --outDir dist --jsx react-jsx src/index.ts src/types/*.d.ts",
-    "preview": "bun run build && bun run preview/server.ts",
-    "lint": "eslint src --fix",
-    "prepare": "bun run build",
-    "prettier": "prettier --write src"
-  },
-  "prettier": "eslint-config-dolmios/configs/prettier"
-}
+    "build:copy-declarations": "mkdir -p dist/types && cp src/types/react-polymorphic-types.d.ts dist/types/react-polymorphic-types.d.ts 2>/dev/null || true",
+    "build:js": "bun build ./src/index.ts --outdir ./dist --target browser --minify --jsx=react --splitting --external react --external react-dom",
+    "build:types": "bunx tsc src/index.ts src/**/*.ts --declaration --emitDeclarationOnly --outDir dist --skipLibCheck --jsx react-jsx --module ESNext --moduleResolution bundler --target ES2022 --lib dom,dom.iterable,esnext --rootDir src",
+    "dev": "bun run build && bun --bun preview/index.html",
+    "format": "prettier --write src preview",
+    "kill": "lsof -ti:3000,420 | xargs kill -9 2>/dev/null || true",
+    "lint": "eslint . --ext .ts,.tsx --fix",
+    "test": "bun test",
+    "test:coverage": "bun test --coverage",
+    "test:watch": "bun test --watch"
+  }
+}

package/dist/components/Button/Button.d.ts

@@ -1,4 +0,0 @@
-import { type ButtonHTMLAttributes, type JSX } from "react";
-type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
-export declare function Button({ className, ...props }: ButtonProps): JSX.Element;
-export {};

package/dist/index.css

@@ -1 +0,0 @@
-:root{--color-text:#000;--color-background:#fff;--color-border:#0000001a;--color-primary:#000;--color-muted:#666;--space-smallest:.25rem;--space-smaller:.5rem;--space-small:.75rem;--space-medium:1rem;--space-large:1.5rem;--space-larger:2rem;--space-largest:10rem;--radius-small:.25rem;--radius-large:.5rem;--radius-round:9999px;--shadow-default:0 0 0 1px #0000001a;--breakpoint-phone:800px;--breakpoint-tablet:1024px;--breakpoint-desktop:1440px}@media (prefers-color-scheme:dark){:root{--color-text:#fff;--color-background:#000;--color-border:#ffffff1a;--color-primary:#fff;--color-muted:#999}}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background-color:var(--color-background);color:var(--color-text);font-size:62.5%}body{margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:1.6rem;line-height:1.5}.button_5RnP0A{background-color:var(--color-primary);color:var(--color-background);padding:var(--space-small)var(--space-medium);border-radius:var(--radius-small);cursor:pointer;border:none;transition:opacity .2s;font-size:1.6rem}.button_5RnP0A:hover{opacity:.9}.button_5RnP0A:active{opacity:.8}