@codeleap/styles 6.0.1 → 6.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/styles",
-  "version": "6.0.1",
+  "version": "6.2.3",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,7 +9,7 @@
     "directory": "packages/styles"
   },
   "devDependencies": {
-    "@codeleap/config": "6.0.1",
+    "@codeleap/config": "6.2.3",
     "ts-node-dev": "^1.1.8"
   },
   "scripts": {

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/styles",
-  "version": "6.0.1",
+  "version": "6.2.3",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {

package/src/lib/calc.ts

@@ -0,0 +1,41 @@
+type Unit = 'px' | 'vh' | 'dvh' | 'vw' | 'dvw' | '%' | 'lvh' | 'svh'
+
+class CalcBuilder {
+  private expression: string
+
+  constructor(initial: number, unit: Unit = 'px') {
+    this.expression = `${initial}${unit}`
+  }
+
+  private wrap(value: string): string {
+    return `(${value})`
+  }
+
+  sub(value: number, unit: Unit = 'px') {
+    const val = `${value}${unit}`
+    this.expression = `${this.wrap(this.expression)} - ${this.wrap(val)}`
+    return this
+  }
+
+  add(value: number, unit: Unit = 'px') {
+    const val = `${value}${unit}`
+    this.expression = `${this.wrap(this.expression)} + ${this.wrap(val)}`
+    return this
+  }
+
+  mult(value: number) {
+    this.expression = `${this.wrap(this.expression)} * ${value}`
+    return this
+  }
+
+  div(value: number) {
+    this.expression = `${this.wrap(this.expression)} / ${value}`
+    return this
+  }
+
+  build() {
+    return `calc(${this.expression})`
+  }
+}
+
+export const calc = (base: number, unit: Unit = 'px') => new CalcBuilder(base, unit)

package/src/lib/index.ts

@@ -1,2 +1,3 @@
 export { createStyles } from './createStyles'
-export { createTheme } from './createTheme'
+export { createTheme } from './createTheme'
+export { calc } from './calc'