peasy-css 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Peasy Tools
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,361 @@
+# peasy-css
+
+[![npm](https://img.shields.io/npm/v/peasy-css)](https://www.npmjs.com/package/peasy-css)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.7-blue)](https://www.typescriptlang.org/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![Zero Dependencies](https://img.shields.io/badge/dependencies-0-brightgreen)](https://www.npmjs.com/package/peasy-css)
+
+Pure TypeScript CSS generator — gradients, shadows, flexbox, grid, animations, transforms, filters, glassmorphism, typography, clamp, and more. Zero dependencies, fully typed, ESM-only.
+
+Built from [PeasyCSS](https://peasycss.com), the interactive CSS tools platform with 200+ generators and references.
+
+> **Try the interactive tools at [peasycss.com](https://peasycss.com)** — [Gradient Generator](https://peasycss.com/tools/gradient/), [Box Shadow](https://peasycss.com/tools/box-shadow/), [Flexbox](https://peasycss.com/tools/flexbox/), [Grid](https://peasycss.com/tools/grid/), [Glassmorphism](https://peasycss.com/tools/glassmorphism/)
+
+## Table of Contents
+
+- [Install](#install)
+- [Quick Start](#quick-start)
+- [What You Can Do](#what-you-can-do)
+  - [Gradients](#gradients)
+  - [Box Shadows](#box-shadows)
+  - [Flexbox Layouts](#flexbox-layouts)
+  - [CSS Grid](#css-grid)
+  - [Animations & Keyframes](#animations--keyframes)
+  - [Transforms](#transforms)
+  - [CSS Filters](#css-filters)
+  - [Glassmorphism](#glassmorphism)
+  - [Fluid Typography](#fluid-typography)
+  - [Media Queries](#media-queries)
+- [API Reference](#api-reference)
+- [TypeScript Types](#typescript-types)
+- [Learn More About CSS](#learn-more-about-css)
+- [Also Available for Python](#also-available-for-python)
+- [Peasy Developer Tools](#peasy-developer-tools)
+- [License](#license)
+
+## Install
+
+```bash
+npm install peasy-css
+```
+
+## Quick Start
+
+```typescript
+import {
+  gradient,
+  boxShadow,
+  flexbox,
+  glassmorphism,
+} from "peasy-css";
+
+// Generate a linear gradient
+const bg = gradient(["#ff6b35", "#f7c948", "#2ec4b6"]);
+// → "linear-gradient(to right, #ff6b35, #f7c948, #2ec4b6)"
+
+// Create a box shadow with depth
+const shadow = boxShadow({
+  x: "0px",
+  y: "4px",
+  blur: "12px",
+  color: "rgba(0,0,0,0.15)",
+});
+// → "0px 4px 12px 0px rgba(0,0,0,0.15)"
+
+// Flexbox layout with centering
+const layout = flexbox({ justify: "center", align: "center", gap: "1rem" });
+// → "display: flex;\n  flex-direction: row;\n  ..."
+
+// Frosted glass effect
+const glass = glassmorphism({ blur: "20px" });
+// → "backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: ..."
+```
+
+## What You Can Do
+
+### Gradients
+
+CSS gradients create smooth color transitions — linear (directional), radial (circular), and conic (angular). All three types support repeating patterns and precise color stops.
+
+| Type | CSS Function | Use Case |
+|------|-------------|----------|
+| Linear | `linear-gradient()` | Backgrounds, buttons, headers |
+| Radial | `radial-gradient()` | Spotlight effects, circular highlights |
+| Conic | `conic-gradient()` | Pie charts, color wheels |
+| Repeating | `repeating-*-gradient()` | Striped patterns, progress bars |
+
+```typescript
+import { gradient, gradientCss } from "peasy-css";
+
+// Linear gradient with custom direction
+gradient(["#e66465", "#9198e5"], { direction: "to bottom" });
+// → "linear-gradient(to bottom, #e66465, #9198e5)"
+
+// Radial gradient for spotlight effect
+gradient(["#fff", "#000"], { gradientType: "radial" });
+// → "radial-gradient(circle, #fff, #000)"
+
+// Color stops with precise positions
+gradient([
+  { color: "red", position: "0%" },
+  { color: "yellow", position: "50%" },
+  { color: "green", position: "100%" },
+]);
+
+// Complete CSS rule for a hero section
+gradientCss(".hero", ["#667eea", "#764ba2"]);
+// → ".hero {\n  background: linear-gradient(to right, #667eea, #764ba2);\n}"
+```
+
+Learn more: [Gradient Generator](https://peasycss.com/tools/gradient/) · [CSS Gradients Guide](https://peasycss.com/glossary/gradient/)
+
+### Box Shadows
+
+Box shadows add depth and elevation to elements. Multiple shadows create complex effects like material design elevation or neumorphism.
+
+```typescript
+import { boxShadow, boxShadowCss } from "peasy-css";
+
+// Single shadow with elevation
+boxShadow({ x: "0px", y: "4px", blur: "6px", color: "rgba(0,0,0,0.1)" });
+
+// Inset shadow for pressed/recessed look
+boxShadow({ inset: true, y: "2px", blur: "4px", color: "rgba(0,0,0,0.2)" });
+
+// Layered shadows for realistic depth
+boxShadow(
+  { y: "2px", blur: "4px", color: "rgba(0,0,0,0.1)" },
+  { y: "8px", blur: "16px", color: "rgba(0,0,0,0.1)" },
+);
+```
+
+Learn more: [Box Shadow Generator](https://peasycss.com/tools/box-shadow/) · [CSS Shadows Guide](https://peasycss.com/glossary/box-shadow/)
+
+### Flexbox Layouts
+
+Flexbox distributes space and aligns items in one dimension — row or column.
+
+```typescript
+import { flexbox, flexboxCss } from "peasy-css";
+
+// Centered content
+flexbox({ justify: "center", align: "center" });
+
+// Responsive card layout with wrapping
+flexbox({ wrap: "wrap", gap: "1.5rem", justify: "space-between" });
+
+// Complete navbar rule
+flexboxCss(".navbar", { direction: "row", justify: "space-between", align: "center" });
+```
+
+Learn more: [Flexbox Generator](https://peasycss.com/tools/flexbox/) · [Flexbox Guide](https://peasycss.com/glossary/flexbox/)
+
+### CSS Grid
+
+Two-dimensional layout for rows and columns simultaneously.
+
+```typescript
+import { grid, gridCss } from "peasy-css";
+
+// Default 3-column grid
+grid();
+
+// Responsive auto-fill grid with dense packing
+grid({ columns: "repeat(auto-fill, minmax(250px, 1fr))", autoFlow: "dense" });
+
+// Dashboard layout
+gridCss(".dashboard", { columns: "250px 1fr 1fr", rows: "auto 1fr auto", gap: "2rem" });
+```
+
+Learn more: [Grid Generator](https://peasycss.com/tools/grid/) · [CSS Grid Guide](https://peasycss.com/glossary/grid/)
+
+### Animations & Keyframes
+
+Multi-step CSS animations with shorthand generation and `@keyframes` rules.
+
+```typescript
+import { animation, keyframes, animationCss } from "peasy-css";
+
+// Animation shorthand
+animation("fadeIn", { duration: "0.5s", timing: "ease-in" });
+// → "fadeIn 0.5s ease-in 0s 1 normal none"
+
+// Keyframes definition
+keyframes("fadeIn", [
+  { selector: "from", properties: { opacity: "0", transform: "translateY(-20px)" } },
+  { selector: "to", properties: { opacity: "1", transform: "translateY(0)" } },
+]);
+```
+
+Learn more: [Animation Generator](https://peasycss.com/tools/animation/) · [CSS Animation Guide](https://peasycss.com/glossary/animation/)
+
+### Transforms
+
+Translate, rotate, scale, and skew elements without affecting document flow.
+
+```typescript
+import { transform, transformCss } from "peasy-css";
+
+transform({ rotate: "45deg" });
+// → "rotate(45deg)"
+
+transform({ translateX: "10px", translateY: "20px", rotate: "45deg", scaleX: "1.5" });
+// → "translate(10px, 20px) rotate(45deg) scale(1.5, 1)"
+```
+
+Learn more: [Transform Generator](https://peasycss.com/tools/transform/) · [CSS Transform Guide](https://peasycss.com/glossary/transform/)
+
+### CSS Filters
+
+Graphical effects — blur, brightness, contrast, grayscale — for images and hover states.
+
+```typescript
+import { cssFilter, filterCss } from "peasy-css";
+
+cssFilter({ blur: "5px" });
+// → "blur(5px)"
+
+cssFilter({ blur: "2px", brightness: "120%", grayscale: "50%" });
+// → "blur(2px) brightness(120%) grayscale(50%)"
+```
+
+Learn more: [Filter Generator](https://peasycss.com/tools/filter/) · [CSS Filter Guide](https://peasycss.com/glossary/filter/)
+
+### Glassmorphism
+
+Frosted glass effect with backdrop-filter, semi-transparent backgrounds, and subtle borders.
+
+```typescript
+import { glassmorphism, glassmorphismCss } from "peasy-css";
+
+glassmorphism();
+// → "backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: ..."
+
+glassmorphismCss(".modal", { blur: "15px", background: "rgba(0,0,0,0.3)" });
+```
+
+Learn more: [Glassmorphism Generator](https://peasycss.com/tools/glassmorphism/) · [Glassmorphism Guide](https://peasycss.com/glossary/glassmorphism/)
+
+### Fluid Typography
+
+CSS `clamp()` for smooth scaling between viewport sizes.
+
+```typescript
+import { clamp, clampFontCss } from "peasy-css";
+
+clamp("1rem", "2.5vw", "3rem");
+// → "clamp(1rem, 2.5vw, 3rem)"
+
+clampFontCss("h1", "1.5rem", "4vw", "3rem");
+// → "h1 {\n  font-size: clamp(1.5rem, 4vw, 3rem);\n}"
+```
+
+Learn more: [Clamp Calculator](https://peasycss.com/tools/clamp/) · [CSS Clamp Guide](https://peasycss.com/glossary/clamp/)
+
+### Media Queries
+
+Responsive design with viewport breakpoints.
+
+```typescript
+import { mediaQuery } from "peasy-css";
+
+// Mobile-first (min-width)
+mediaQuery("768px", ".sidebar { display: block; }");
+
+// Desktop-first (max-width)
+mediaQuery("480px", "body { font-size: 14px; }", "max-width");
+```
+
+## API Reference
+
+| Function | Description |
+|----------|-------------|
+| `gradient(colors, options?)` | CSS gradient value |
+| `gradientCss(selector, colors, options?)` | Complete gradient CSS rule |
+| `boxShadow(...shadows)` | box-shadow value |
+| `boxShadowCss(selector, ...shadows)` | Complete box-shadow CSS rule |
+| `textShadow(x?, y?, blur?, color?)` | text-shadow value |
+| `textShadowCss(selector, x?, y?, blur?, color?)` | Complete text-shadow CSS rule |
+| `borderRadius(tl?, tr?, br?, bl?)` | border-radius value |
+| `borderRadiusCss(selector, tl?, tr?, br?, bl?)` | Complete border-radius CSS rule |
+| `flexbox(options?)` | Flexbox properties |
+| `flexboxCss(selector, options?)` | Complete flexbox CSS rule |
+| `grid(template?)` | Grid properties |
+| `gridCss(selector, template?)` | Complete grid CSS rule |
+| `animation(name, options?)` | animation shorthand value |
+| `animationCss(selector, name, options?)` | Complete animation CSS rule |
+| `keyframes(name, frames)` | @keyframes rule |
+| `transform(options?)` | transform value |
+| `transformCss(selector, options?)` | Complete transform CSS rule |
+| `cssFilter(options?)` | filter value |
+| `filterCss(selector, options?)` | Complete filter CSS rule |
+| `transition(property?, options?)` | transition value |
+| `transitionCss(selector, property?, options?)` | Complete transition CSS rule |
+| `mediaQuery(breakpoint, css, type?)` | @media rule |
+| `typography(options?)` | Typography properties |
+| `typographyCss(selector, options?)` | Complete typography CSS rule |
+| `aspectRatio(ratio)` | aspect-ratio value |
+| `aspectRatioCss(selector, ratio)` | Complete aspect-ratio CSS rule |
+| `clamp(min, preferred, max)` | clamp() value |
+| `clampFontCss(selector, min, preferred, max)` | Complete fluid font-size CSS rule |
+| `glassmorphism(options?)` | Glassmorphism properties |
+| `glassmorphismCss(selector, options?)` | Complete glassmorphism CSS rule |
+
+## TypeScript Types
+
+```typescript
+import type {
+  ColorStop,
+  Shadow,
+  GridTemplate,
+  Keyframe,
+  GradientOptions,
+  FlexboxOptions,
+  AnimationOptions,
+  TransformOptions,
+  FilterOptions,
+  TransitionOptions,
+  TypographyOptions,
+  GlassmorphismOptions,
+  GradientDirection,
+  GradientType,
+  FlexDirection,
+  FlexWrap,
+  FlexJustify,
+  FlexAlign,
+  GridAutoFlow,
+  TimingFunction,
+  FontWeight,
+} from "peasy-css";
+```
+
+## Learn More About CSS
+
+- **Tools**: [Gradient Generator](https://peasycss.com/tools/gradient/) · [Box Shadow](https://peasycss.com/tools/box-shadow/) · [Flexbox](https://peasycss.com/tools/flexbox/) · [Grid](https://peasycss.com/tools/grid/)
+- **Effects**: [Glassmorphism](https://peasycss.com/tools/glassmorphism/) · [Animation](https://peasycss.com/tools/animation/) · [Transform](https://peasycss.com/tools/transform/)
+- **Reference**: [CSS Glossary](https://peasycss.com/glossary/) · [All CSS Tools](https://peasycss.com/tools/)
+- **API**: [REST API Docs](https://peasycss.com/developers/) · [OpenAPI Spec](https://peasycss.com/api/openapi.json)
+- **Python**: [PyPI Package](https://pypi.org/project/peasy-css/)
+
+## Also Available for Python
+
+```bash
+pip install peasy-css
+```
+
+The Python package provides the same 15 CSS generators with CLI, MCP server, and REST API client. See [peasy-css on PyPI](https://pypi.org/project/peasy-css/).
+
+## Peasy Developer Tools
+
+| Package | PyPI | npm | Description |
+|---------|------|-----|-------------|
+| peasytext | [PyPI](https://pypi.org/project/peasytext/) | [npm](https://www.npmjs.com/package/peasytext) | Text analysis — readability, sentiment, keywords |
+| peasy-pdf | [PyPI](https://pypi.org/project/peasy-pdf/) | — | PDF processing — extract, merge, split, metadata |
+| peasy-image | [PyPI](https://pypi.org/project/peasy-image/) | — | Image ops — resize, crop, filter, watermark |
+| **peasy-css** | [PyPI](https://pypi.org/project/peasy-css/) | **[npm](https://www.npmjs.com/package/peasy-css)** | **CSS generation — gradients, shadows, flexbox, grid** |
+
+Part of the [Peasy](https://peasytools.com) developer tools ecosystem.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,188 @@
+/**
+ * peasy-css types — TypeScript interfaces for CSS generation.
+ */
+/** A color stop with optional position for gradients. */
+interface ColorStop {
+    color: string;
+    position?: string;
+}
+/** Box/text shadow configuration. */
+interface Shadow {
+    x?: string;
+    y?: string;
+    blur?: string;
+    spread?: string;
+    color?: string;
+    inset?: boolean;
+}
+/** CSS Grid template configuration. */
+interface GridTemplate {
+    columns?: string;
+    rows?: string;
+    gap?: string;
+    autoFlow?: string;
+}
+/** A single keyframe in a CSS animation. */
+interface Keyframe {
+    selector: string;
+    properties: Record<string, string>;
+}
+/** Gradient direction. */
+type GradientDirection = "to right" | "to left" | "to top" | "to bottom" | "to top right" | "to top left" | "to bottom right" | "to bottom left";
+/** Gradient type. */
+type GradientType = "linear" | "radial" | "conic";
+/** Flexbox direction. */
+type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
+/** Flexbox wrap mode. */
+type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
+/** Flexbox justify-content values. */
+type FlexJustify = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
+/** Flexbox align-items values. */
+type FlexAlign = "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+/** Grid auto-flow mode. */
+type GridAutoFlow = "row" | "column" | "dense" | "row dense" | "column dense";
+/** CSS timing function. */
+type TimingFunction = "ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear";
+/** Font weight values. */
+type FontWeight = "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+/** Options for gradient generation. */
+interface GradientOptions {
+    direction?: GradientDirection | string;
+    gradientType?: GradientType;
+    repeating?: boolean;
+}
+/** Options for flexbox generation. */
+interface FlexboxOptions {
+    direction?: FlexDirection;
+    wrap?: FlexWrap;
+    justify?: FlexJustify;
+    align?: FlexAlign;
+    gap?: string;
+}
+/** Options for animation generation. */
+interface AnimationOptions {
+    duration?: string;
+    timing?: TimingFunction;
+    delay?: string;
+    iterationCount?: string | number;
+    direction?: string;
+    fillMode?: string;
+}
+/** Options for transform generation. */
+interface TransformOptions {
+    translateX?: string;
+    translateY?: string;
+    rotate?: string;
+    scaleX?: string;
+    scaleY?: string;
+    skewX?: string;
+    skewY?: string;
+}
+/** Options for CSS filter generation. */
+interface FilterOptions {
+    blur?: string;
+    brightness?: string;
+    contrast?: string;
+    grayscale?: string;
+    saturate?: string;
+    sepia?: string;
+    hueRotate?: string;
+    invert?: string;
+    opacity?: string;
+    dropShadow?: string;
+}
+/** Options for transition generation. */
+interface TransitionOptions {
+    duration?: string;
+    timing?: TimingFunction;
+    delay?: string;
+}
+/** Options for typography generation. */
+interface TypographyOptions {
+    fontFamily?: string;
+    fontSize?: string;
+    fontWeight?: FontWeight;
+    lineHeight?: string;
+    letterSpacing?: string;
+    textTransform?: string;
+    wordSpacing?: string;
+}
+/** Options for glassmorphism generation. */
+interface GlassmorphismOptions {
+    blur?: string;
+    background?: string;
+    borderColor?: string;
+}
+
+/**
+ * peasy-css engine — Pure TypeScript CSS generation.
+ *
+ * 15 CSS generators: gradients, shadows, flexbox, grid, animations,
+ * transforms, filters, transitions, media queries, typography,
+ * border-radius, aspect-ratio, clamp, and glassmorphism.
+ *
+ * Zero dependencies. All functions are pure — no side effects.
+ */
+
+/** Generate a CSS gradient value string. */
+declare function gradient(colors: (string | ColorStop)[], options?: GradientOptions): string;
+/** Generate a complete CSS rule with gradient background. */
+declare function gradientCss(selector: string, colors: (string | ColorStop)[], options?: GradientOptions): string;
+/** Generate a box-shadow CSS value from one or more shadows. */
+declare function boxShadow(...shadows: Shadow[]): string;
+/** Generate a complete CSS rule with box-shadow. */
+declare function boxShadowCss(selector: string, ...shadows: Shadow[]): string;
+/** Generate a text-shadow CSS value. */
+declare function textShadow(x?: string, y?: string, blur?: string, color?: string): string;
+/** Generate a complete CSS rule with text-shadow. */
+declare function textShadowCss(selector: string, x?: string, y?: string, blur?: string, color?: string): string;
+/** Generate a border-radius CSS value. */
+declare function borderRadius(topLeft?: string, topRight?: string, bottomRight?: string, bottomLeft?: string): string;
+/** Generate a complete CSS rule with border-radius. */
+declare function borderRadiusCss(selector: string, topLeft?: string, topRight?: string, bottomRight?: string, bottomLeft?: string): string;
+/** Generate flexbox CSS properties. */
+declare function flexbox(options?: FlexboxOptions): string;
+/** Generate a complete CSS rule with flexbox layout. */
+declare function flexboxCss(selector: string, options?: FlexboxOptions): string;
+/** Generate CSS Grid properties. */
+declare function grid(template?: GridTemplate): string;
+/** Generate a complete CSS rule with grid layout. */
+declare function gridCss(selector: string, template?: GridTemplate): string;
+/** Generate a CSS animation shorthand value. */
+declare function animation(name: string, options?: AnimationOptions): string;
+/** Generate a complete CSS rule with animation. */
+declare function animationCss(selector: string, name: string, options?: AnimationOptions): string;
+/** Generate a @keyframes CSS rule. */
+declare function keyframes(name: string, frames: Keyframe[]): string;
+/** Generate a CSS transform value. */
+declare function transform(options?: TransformOptions): string;
+/** Generate a complete CSS rule with transform. */
+declare function transformCss(selector: string, options?: TransformOptions): string;
+/** Generate a CSS filter value. */
+declare function cssFilter(options?: FilterOptions): string;
+/** Generate a complete CSS rule with filter. */
+declare function filterCss(selector: string, options?: FilterOptions): string;
+/** Generate a CSS transition value. */
+declare function transition(property?: string, options?: TransitionOptions): string;
+/** Generate a complete CSS rule with transition. */
+declare function transitionCss(selector: string, property?: string, options?: TransitionOptions): string;
+/** Wrap CSS in a media query. */
+declare function mediaQuery(breakpoint: string, cssBlock: string, type?: string): string;
+/** Generate typography CSS properties. */
+declare function typography(options?: TypographyOptions): string;
+/** Generate a complete CSS rule with typography. */
+declare function typographyCss(selector: string, options?: TypographyOptions): string;
+/** Return the aspect-ratio CSS value (pass-through validation). */
+declare function aspectRatio(ratio: string): string;
+/** Generate a complete CSS rule with aspect-ratio. */
+declare function aspectRatioCss(selector: string, ratio: string): string;
+/** Generate a CSS clamp() value for fluid sizing. */
+declare function clamp(min: string, preferred: string, max: string): string;
+/** Generate a complete CSS rule with fluid font-size. */
+declare function clampFontCss(selector: string, min: string, preferred: string, max: string): string;
+/** Generate glassmorphism (frosted glass) CSS properties. */
+declare function glassmorphism(options?: GlassmorphismOptions): string;
+/** Generate a complete CSS rule with glassmorphism. */
+declare function glassmorphismCss(selector: string, options?: GlassmorphismOptions): string;
+
+export { type AnimationOptions, type ColorStop, type FilterOptions, type FlexAlign, type FlexDirection, type FlexJustify, type FlexWrap, type FlexboxOptions, type FontWeight, type GlassmorphismOptions, type GradientDirection, type GradientOptions, type GradientType, type GridAutoFlow, type GridTemplate, type Keyframe, type Shadow, type TimingFunction, type TransformOptions, type TransitionOptions, type TypographyOptions, animation, animationCss, aspectRatio, aspectRatioCss, borderRadius, borderRadiusCss, boxShadow, boxShadowCss, clamp, clampFontCss, cssFilter, filterCss, flexbox, flexboxCss, glassmorphism, glassmorphismCss, gradient, gradientCss, grid, gridCss, keyframes, mediaQuery, textShadow, textShadowCss, transform, transformCss, transition, transitionCss, typography, typographyCss };

package/dist/index.js

@@ -0,0 +1,263 @@
+// src/engine.ts
+function rule(selector, body) {
+  return `${selector} {
+  ${body}
+}`;
+}
+function colorStopStr(stop) {
+  if (typeof stop === "string") return stop;
+  return stop.position ? `${stop.color} ${stop.position}` : stop.color;
+}
+function gradient(colors, options = {}) {
+  const {
+    direction = "to right",
+    gradientType = "linear",
+    repeating = false
+  } = options;
+  const stops = colors.map(colorStopStr).join(", ");
+  const prefix = repeating ? "repeating-" : "";
+  if (gradientType === "radial") {
+    return `${prefix}radial-gradient(circle, ${stops})`;
+  }
+  if (gradientType === "conic") {
+    return `${prefix}conic-gradient(${stops})`;
+  }
+  return `${prefix}linear-gradient(${direction}, ${stops})`;
+}
+function gradientCss(selector, colors, options = {}) {
+  return rule(selector, `background: ${gradient(colors, options)};`);
+}
+function boxShadow(...shadows) {
+  return shadows.map((s) => {
+    const x = s.x ?? "0px";
+    const y = s.y ?? "0px";
+    const blur = s.blur ?? "0px";
+    const spread = s.spread ?? "0px";
+    const color = s.color ?? "rgba(0, 0, 0, 0.1)";
+    const parts = s.inset ? ["inset", x, y, blur, spread, color] : [x, y, blur, spread, color];
+    return parts.join(" ");
+  }).join(", ");
+}
+function boxShadowCss(selector, ...shadows) {
+  return rule(selector, `box-shadow: ${boxShadow(...shadows)};`);
+}
+function textShadow(x = "1px", y = "1px", blur = "2px", color = "rgba(0, 0, 0, 0.3)") {
+  return `${x} ${y} ${blur} ${color}`;
+}
+function textShadowCss(selector, x = "1px", y = "1px", blur = "2px", color = "rgba(0, 0, 0, 0.3)") {
+  return rule(selector, `text-shadow: ${textShadow(x, y, blur, color)};`);
+}
+function borderRadius(topLeft = "0px", topRight = "0px", bottomRight = "0px", bottomLeft = "0px") {
+  if (topLeft === topRight && topRight === bottomRight && bottomRight === bottomLeft) {
+    return topLeft;
+  }
+  return `${topLeft} ${topRight} ${bottomRight} ${bottomLeft}`;
+}
+function borderRadiusCss(selector, topLeft = "0px", topRight = "0px", bottomRight = "0px", bottomLeft = "0px") {
+  const value = borderRadius(topLeft, topRight, bottomRight, bottomLeft);
+  return rule(selector, `border-radius: ${value};`);
+}
+function flexbox(options = {}) {
+  const {
+    direction = "row",
+    wrap = "nowrap",
+    justify = "flex-start",
+    align = "stretch",
+    gap = "0px"
+  } = options;
+  const lines = [
+    "display: flex;",
+    `flex-direction: ${direction};`,
+    `flex-wrap: ${wrap};`,
+    `justify-content: ${justify};`,
+    `align-items: ${align};`
+  ];
+  if (gap !== "0px" && gap !== "0") {
+    lines.push(`gap: ${gap};`);
+  }
+  return lines.join("\n  ");
+}
+function flexboxCss(selector, options = {}) {
+  return rule(selector, flexbox(options));
+}
+function grid(template) {
+  const t = template ?? {};
+  const columns = t.columns ?? "1fr 1fr 1fr";
+  const rows = t.rows ?? "auto";
+  const gap = t.gap ?? "1rem";
+  const lines = [
+    "display: grid;",
+    `grid-template-columns: ${columns};`,
+    `grid-template-rows: ${rows};`,
+    `gap: ${gap};`
+  ];
+  if (t.autoFlow) {
+    lines.push(`grid-auto-flow: ${t.autoFlow};`);
+  }
+  return lines.join("\n  ");
+}
+function gridCss(selector, template) {
+  return rule(selector, grid(template));
+}
+function animation(name, options = {}) {
+  const {
+    duration = "1s",
+    timing = "ease",
+    delay = "0s",
+    iterationCount = 1,
+    direction = "normal",
+    fillMode = "none"
+  } = options;
+  return `${name} ${duration} ${timing} ${delay} ${iterationCount} ${direction} ${fillMode}`;
+}
+function animationCss(selector, name, options = {}) {
+  return rule(selector, `animation: ${animation(name, options)};`);
+}
+function keyframes(name, frames) {
+  const body = frames.map((f) => {
+    const props = Object.entries(f.properties).map(([k, v]) => `${k}: ${v};`).join(" ");
+    return `  ${f.selector} { ${props} }`;
+  }).join("\n");
+  return `@keyframes ${name} {
+${body}
+}`;
+}
+function transform(options = {}) {
+  const parts = [];
+  const tx = options.translateX;
+  const ty = options.translateY;
+  if (tx || ty) {
+    parts.push(`translate(${tx ?? "0"}, ${ty ?? "0"})`);
+  }
+  if (options.rotate) {
+    parts.push(`rotate(${options.rotate})`);
+  }
+  const sx = options.scaleX;
+  const sy = options.scaleY;
+  if (sx || sy) {
+    parts.push(`scale(${sx ?? "1"}, ${sy ?? "1"})`);
+  }
+  if (options.skewX || options.skewY) {
+    parts.push(`skew(${options.skewX ?? "0"}, ${options.skewY ?? "0"})`);
+  }
+  return parts.length > 0 ? parts.join(" ") : "none";
+}
+function transformCss(selector, options = {}) {
+  return rule(selector, `transform: ${transform(options)};`);
+}
+function cssFilter(options = {}) {
+  const parts = [];
+  if (options.blur) parts.push(`blur(${options.blur})`);
+  if (options.brightness) parts.push(`brightness(${options.brightness})`);
+  if (options.contrast) parts.push(`contrast(${options.contrast})`);
+  if (options.grayscale) parts.push(`grayscale(${options.grayscale})`);
+  if (options.saturate) parts.push(`saturate(${options.saturate})`);
+  if (options.sepia) parts.push(`sepia(${options.sepia})`);
+  if (options.hueRotate) parts.push(`hue-rotate(${options.hueRotate})`);
+  if (options.invert) parts.push(`invert(${options.invert})`);
+  if (options.opacity) parts.push(`opacity(${options.opacity})`);
+  if (options.dropShadow) parts.push(`drop-shadow(${options.dropShadow})`);
+  return parts.length > 0 ? parts.join(" ") : "none";
+}
+function filterCss(selector, options = {}) {
+  return rule(selector, `filter: ${cssFilter(options)};`);
+}
+function transition(property = "all", options = {}) {
+  const { duration = "0.3s", timing = "ease", delay = "0s" } = options;
+  return `${property} ${duration} ${timing} ${delay}`;
+}
+function transitionCss(selector, property = "all", options = {}) {
+  return rule(
+    selector,
+    `transition: ${transition(property, options)};`
+  );
+}
+function mediaQuery(breakpoint, cssBlock, type = "min-width") {
+  return `@media (${type}: ${breakpoint}) {
+  ${cssBlock}
+}`;
+}
+function typography(options = {}) {
+  const {
+    fontFamily = "system-ui, -apple-system, sans-serif",
+    fontSize = "1rem",
+    fontWeight = "normal",
+    lineHeight = "1.5",
+    letterSpacing,
+    textTransform,
+    wordSpacing
+  } = options;
+  const lines = [
+    `font-family: ${fontFamily};`,
+    `font-size: ${fontSize};`,
+    `font-weight: ${fontWeight};`,
+    `line-height: ${lineHeight};`
+  ];
+  if (letterSpacing) lines.push(`letter-spacing: ${letterSpacing};`);
+  if (textTransform) lines.push(`text-transform: ${textTransform};`);
+  if (wordSpacing) lines.push(`word-spacing: ${wordSpacing};`);
+  return lines.join("\n  ");
+}
+function typographyCss(selector, options = {}) {
+  return rule(selector, typography(options));
+}
+function aspectRatio(ratio) {
+  return ratio;
+}
+function aspectRatioCss(selector, ratio) {
+  return rule(selector, `aspect-ratio: ${ratio};`);
+}
+function clamp(min, preferred, max) {
+  return `clamp(${min}, ${preferred}, ${max})`;
+}
+function clampFontCss(selector, min, preferred, max) {
+  return rule(selector, `font-size: ${clamp(min, preferred, max)};`);
+}
+function glassmorphism(options = {}) {
+  const {
+    blur = "10px",
+    background = "rgba(255, 255, 255, 0.25)",
+    borderColor = "rgba(255, 255, 255, 0.18)"
+  } = options;
+  return [
+    `backdrop-filter: blur(${blur});`,
+    `-webkit-backdrop-filter: blur(${blur});`,
+    `background: ${background};`,
+    `border: 1px solid ${borderColor};`
+  ].join("\n  ");
+}
+function glassmorphismCss(selector, options = {}) {
+  return rule(selector, glassmorphism(options));
+}
+export {
+  animation,
+  animationCss,
+  aspectRatio,
+  aspectRatioCss,
+  borderRadius,
+  borderRadiusCss,
+  boxShadow,
+  boxShadowCss,
+  clamp,
+  clampFontCss,
+  cssFilter,
+  filterCss,
+  flexbox,
+  flexboxCss,
+  glassmorphism,
+  glassmorphismCss,
+  gradient,
+  gradientCss,
+  grid,
+  gridCss,
+  keyframes,
+  mediaQuery,
+  textShadow,
+  textShadowCss,
+  transform,
+  transformCss,
+  transition,
+  transitionCss,
+  typography,
+  typographyCss
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "peasy-css",
+  "version": "0.1.0",
+  "description": "Pure TypeScript CSS generator — gradients, shadows, flexbox, grid, animations, transforms, filters, glassmorphism, typography, clamp, and more. Zero dependencies, fully typed.",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "css",
+    "css-generator",
+    "gradient",
+    "box-shadow",
+    "flexbox",
+    "css-grid",
+    "animation",
+    "keyframes",
+    "transform",
+    "filter",
+    "glassmorphism",
+    "typography",
+    "clamp",
+    "media-query",
+    "border-radius",
+    "transition",
+    "aspect-ratio",
+    "css-in-js",
+    "zero-dependencies"
+  ],
+  "author": "Peasy Tools",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/peasytools/peasy-css-js.git"
+  },
+  "homepage": "https://peasycss.com",
+  "devDependencies": {
+    "tsup": "^8.0",
+    "typescript": "^5.7",
+    "vitest": "^3.0"
+  }
+}