bsmnt 0.2.8 → 0.2.10

package/src/templates/next-default/lib/styles/scripts/generate-tailwind.ts

@@ -1,162 +0,0 @@
-import type { Config } from "../config"
-import { formatObject } from "./utils"
-
-export function generateTailwind({
-  breakpoints,
-  colors,
-  customSizes,
-  easings,
-  fonts,
-  palettes,
-  themes,
-  typography,
-}: Pick<
-  Config,
-  | "breakpoints"
-  | "colors"
-  | "customSizes"
-  | "easings"
-  | "fonts"
-  | "palettes"
-  | "themes"
-  | "typography"
->) {
-  // Theme
-  const themeEntries = Object.entries(themes)
-  const firstTheme = themeEntries[0]?.[1] ?? {}
-  const theme = `/** Custom theme **/
-@theme {
-	--breakpoint-*: initial;
-	${formatObject(breakpoints, ([name, value]) => `--breakpoint-${name}: ${value}px;`)}
-
-  --color-*: initial;
-	${formatObject(firstTheme, ([key, value]) => `--color-${key}: ${value};`)}
-  ${formatObject(colors, ([key, value]) => `--color-${key}: ${value};`)}
-
-  ${Object.entries(palettes)
-    .filter(([, scaleValues]) => Object.keys(scaleValues).length > 1)
-    .map(
-      ([paletteName, paletteValues]) =>
-        `/* ${paletteName} */\n\t` +
-        Object.entries(paletteValues)
-          .map(([shade, value]) => `--color-${paletteName}-${shade}: ${value};`)
-          .join("\n\t")
-    )
-    .join("\n\n\t")}
-
-	--spacing: 0.25rem;
-	--spacing-0: 0;
-	--spacing-safe: var(--safe);
-	--spacing-gap: var(--gap);
-  ${formatObject(customSizes, ([key]) => `--spacing-${key}: var(--${key});`)}
-
-  --font-*: initial;
-  ${formatObject(fonts, ([name, variableName]) => `--font-${name}: var(${variableName});`)}
-
-  --ease-*: initial;
-  ${formatObject(easings, ([name, value]) => `--ease-${name}: ${value};`)}
-}`
-
-  // Theme overwrites
-  const themeOverwrites = `
-/** Custom theme overwrites **/
-${formatObject(
-  themes,
-  ([name, value]) => `[data-theme=${name}] {
-  ${formatObject(value, ([key, value]) => `--color-${key}: ${value};`)}
-}`,
-  "\n"
-)}
-  `
-
-  // Utilities
-  const utilities = `
-/** Custom static utilities **/
-${Object.entries(typography)
-  .map(
-    ([name, value]) => `@utility ${name} {
-  ${Object.entries(value)
-    .filter((entry) => entry?.[0] && entry?.[1])
-    .filter((entry) => entry !== undefined)
-    .map(([key, value]) => {
-      if (key === "font-size") {
-        if (typeof value === "number") {
-          return `font-size: ${value}px;`
-        }
-
-        if (
-          typeof value === "object" &&
-          "mobile" in value &&
-          "desktop" in value
-        ) {
-          return [
-            `font-size: ${(value?.mobile as number) ?? 0}px;`,
-            `@variant desktop { font-size: ${(value?.desktop as number) ?? 0}px; }`,
-          ].join("\n\t")
-        }
-
-        return `font-size: ${value as unknown as number}px;`
-      }
-
-      if (typeof value === "object") {
-        return [
-          `${key}: ${value.mobile};`,
-          `@variant desktop { ${key}: ${value.desktop}; }`,
-        ].join("\n\t")
-      }
-
-      return `${key}: ${value};`
-    })
-    .join("\n\t")}
-}`
-  )
-  .join("\n\n")}
-
-@utility desktop-only {
-  @media (--mobile) {
-    display: none !important;
-  }
-}
-
-@utility mobile-only {
-  @media (--desktop) {
-    display: none !important;
-  }
-}
-
-@utility b-grid {
-	display: grid;
-	grid-template-columns: repeat(var(--columns), 1fr);
-	column-gap: var(--gap);
-}
-
-@utility b-layout-block {
-	margin-inline: auto;
-  width: calc(100% - 2 * var(--safe));
-}
-
-@utility b-layout-block-inner {
-	padding-inline: var(--safe);
-	width: 100%;
-}
-
-@utility b-layout-grid {
-	@apply b-layout-block b-grid;
-}
-
-@utility b-layout-grid-inner {
-	@apply b-layout-block-inner b-grid;
-}`
-
-  // Variants
-  const variants = `
-/** Custom variants **/
-${Object.keys(themes)
-  .map(
-    (name) =>
-      `@custom-variant ${name} (&:where([data-theme=${name}], [data-theme=${name}] *));`
-  )
-  .join("\n")}`
-
-  return [theme, themeOverwrites, utilities, variants].join("\n")
-}

package/src/templates/next-default/lib/styles/scripts/postcss-functions.mjs

@@ -1,168 +0,0 @@
-// THIS FILE HAS TO STAY .mjs AS ITS CONSUMED BY POSTCSS
-import { breakpoints } from "../layout.mjs"
-
-/**
- * Resolves a context size to a pixel value.
- * @param {string | number} context - Context identifier or pixel value
- * @returns {number} Pixel value
- */
-function resolveContext(context) {
-  if (typeof context === "number") {
-    return context
-  }
-  const numContext = Number.parseFloat(context)
-  if (!Number.isNaN(numContext)) {
-    return numContext
-  }
-  return breakpoints[context] ?? breakpoints.desktop
-}
-
-/**
- * Validates and parses a pixel value.
- * @param {string} value - Pixel value to parse
- * @returns {number} Parsed pixel value
- */
-function parsePixels(value) {
-  const numValue = Number.parseFloat(value)
-  if (Number.isNaN(numValue)) {
-    throw new Error(`Invalid pixel value: ${value}`)
-  }
-  return numValue
-}
-
-/**
- * Rounds a number to a maximum of 4 decimal places, removing trailing zeros.
- * @param {number} value - Number to round
- * @returns {string} Rounded number as string without trailing zeros
- */
-function roundToMaxDecimals(value) {
-  // Round to 4 decimal places
-  const rounded = Math.round(value * 10000) / 10000
-  // Convert to string and remove trailing zeros only after decimal point
-  return rounded
-    .toString()
-    .replace(/\.0+$/, "")
-    .replace(/(\.\d*?)0+$/, "$1")
-}
-
-export const functions = {
-  /**
-   * Converts a pixel value to viewport width units (vw).
-   * Optionally applies a minimum value using CSS max().
-   *
-   * Supports flexible parameter patterns:
-   * - `tovw(target)` - Uses default desktop context
-   * - `tovw(target, min)` - Sets minimum value (numeric)
-   * - `tovw(target, context)` - Sets context (string identifier)
-   * - `tovw(target, min, context)` - Sets both min and context
-   *
-   * @param {string} target - Target pixel value to convert
-   * @param {string} [minOrContext] - Minimum pixel value OR context identifier
-   * @param {string} [context] - Context size identifier (if min was provided)
-   * @returns {string} CSS string with vw units
-   *
-   * @example
-   * tovw(100) // "6.94vw"
-   * tovw(100, 50) // "max(50px, 6.94vw)"
-   * tovw(16, 'mobile') // "4.27vw" (no need for undefined!)
-   * tovw(100, 50, 'mobile') // "max(50px, 6.94vw)" with mobile context
-   */
-  tovw: (target, minOrContext, context) => {
-    const numTarget = parsePixels(target)
-    if (numTarget === 0) {
-      return "0"
-    }
-
-    let min
-    let resolvedContext = "desktop"
-
-    if (minOrContext !== undefined && minOrContext !== "") {
-      // Fast check: is it a known breakpoint key?
-      if (minOrContext in breakpoints) {
-        // Second param is context
-        resolvedContext = minOrContext
-        if (context !== undefined && context !== "") {
-          resolvedContext = context
-        }
-      } else {
-        // Second param is min value (numeric)
-        min = parsePixels(minOrContext)
-        if (context !== undefined && context !== "") {
-          resolvedContext = context
-        }
-      }
-    } else if (context !== undefined && context !== "") {
-      // Only context provided as third param (legacy support)
-      resolvedContext = context
-    }
-
-    const contextSize = resolveContext(resolvedContext)
-    const vwValue = (numTarget / contextSize) * 100
-
-    if (min !== undefined) {
-      return `max(${min}px, ${roundToMaxDecimals(vwValue)}vw)`
-    }
-
-    return `${roundToMaxDecimals(vwValue)}vw`
-  },
-
-  /**
-   * Converts a pixel value to rem units.
-   *
-   * @param {string} target - Target pixel value to convert
-   * @param {string} [context='16'] - Base font size in pixels
-   * @returns {string} CSS string with rem units
-   *
-   * @example
-   * torem(24) // "1.5rem"
-   * torem(18, 14) // "1.29rem"
-   */
-  torem: (target, context = "16") => {
-    const numTarget = parsePixels(target)
-    if (numTarget === 0) {
-      return "0"
-    }
-
-    const numContext = parsePixels(context)
-    return `${roundToMaxDecimals(numTarget / numContext)}rem`
-  },
-
-  /**
-   * Converts a pixel value to em units.
-   *
-   * @param {string} target - Target pixel value to convert
-   * @param {string} context - Context size in pixels (required)
-   * @returns {string} CSS string with em units
-   *
-   * @example
-   * toem(24, 16) // "1.5em"
-   * toem(18, 14) // "1.29em"
-   */
-  toem: (target, context) => {
-    const numTarget = parsePixels(target)
-    if (numTarget === 0) {
-      return "0"
-    }
-
-    if (!context) {
-      throw new Error("toem requires a context parameter")
-    }
-
-    const numContext = parsePixels(context)
-    return `${roundToMaxDecimals(numTarget / numContext)}em`
-  },
-
-  /**
-   * Calculates column width based on number of columns.
-   *
-   * @param {string} columns - Number of columns
-   * @returns {string} CSS calc expression
-   */
-  columns: (columns) => {
-    const numColumns = Number.parseFloat(columns)
-    if (Number.isNaN(numColumns)) {
-      throw new Error(`Invalid column value: ${columns}`)
-    }
-    return `calc((${numColumns} * var(--column-width)) + ((${numColumns} - 1) * var(--gap)))`
-  },
-}

package/src/templates/next-default/lib/styles/scripts/setup-styles.ts

@@ -1,24 +0,0 @@
-import * as config from "../config"
-import { generateRoot } from "./generate-root"
-import { generateTailwind } from "./generate-tailwind"
-
-const tailwind = generateTailwind(config)
-const root = generateRoot(config)
-
-const banner = `/*
- * THIS FILE IS GENERATED BY setup-styles.ts
- * DO NOT EDIT IT DIRECTLY.
- */`
-
-const tailwindcss = [banner, tailwind]
-const rootcss = [banner, root]
-
-await Bun.write("./lib/styles/css/tailwind.css", tailwindcss.join("\n\n"))
-await Bun.write("./lib/styles/css/root.css", rootcss.join("\n\n"))
-
-console.log(
-  Bun.color("green", "ansi"),
-  "✓",
-  Bun.color("black", "ansi"),
-  "Style config generated successfully"
-)

package/src/templates/next-default/lib/styles/scripts/utils.ts

@@ -1,20 +0,0 @@
-export function scalingCalc(value: number) {
-  return `calc(((${value} * 100) / var(--device-width)) * 1vw)`
-}
-
-/**
- * Format an object into a string of CSS variables
- * @param obj - The object to format
- * @param mapper - A function that maps the object's entries to a string
- * @param joiner - The string to join the mapped entries with
- * @returns A string of CSS variables
- */
-export function formatObject<Obj extends Record<string, unknown>>(
-  obj: Obj,
-  mapper: (args: [key: keyof Obj, value: Obj[keyof Obj]]) => string,
-  joiner = "\n\t"
-) {
-  return Object.entries(obj)
-    .map(([key, value]) => mapper([key as keyof Obj, value as Obj[keyof Obj]]))
-    .join(joiner)
-}

package/src/templates/next-default/lib/styles/typography.ts

@@ -1,36 +0,0 @@
-import type { CSSProperties } from "react"
-
-const fonts = {
-  mono: "--geist-mono", // this should be the variable name defined in fonts.ts
-} as const
-
-const typography: TypeStyles = {
-  "test-mono": {
-    "font-family": `var(${fonts.mono})`,
-    "font-style": "normal",
-    "font-weight": 400,
-    "line-height": "90%",
-    "letter-spacing": "0em",
-    "font-size": { mobile: 20, desktop: 24 },
-  },
-} as const
-
-export { fonts, typography }
-
-// UTIL TYPES
-type TypeStyles = Record<
-  string,
-  {
-    "font-family": string
-    "font-style": CSSProperties["fontStyle"]
-    "font-weight": CSSProperties["fontWeight"]
-    "line-height":
-      | `${number}%`
-      | { mobile: `${number}%`; desktop: `${number}%` }
-    "letter-spacing":
-      | `${number}em`
-      | { mobile: `${number}em`; desktop: `${number}em` }
-    "font-feature-settings"?: string
-    "font-size": number | { mobile: number; desktop: number }
-  }
->

package/src/templates/next-default/lib/utils/css.d.ts

@@ -1,21 +0,0 @@
-// CSS module type declarations (ambient - no imports allowed)
-
-declare module "*.module.css" {
-  const classes: { [key: string]: string }
-  export default classes
-}
-
-declare module "*.module.scss" {
-  const classes: { [key: string]: string }
-  export default classes
-}
-
-declare module "*.module.sass" {
-  const classes: { [key: string]: string }
-  export default classes
-}
-
-// Regular CSS imports
-declare module "*.css"
-declare module "*.scss"
-declare module "*.sass"

package/src/templates/next-default/lib/utils/math.test.ts

@@ -1,221 +0,0 @@
-/**
- * Unit tests for math utilities
- *
- * Run with: bun test lib/utils/math.test.ts
- */
-
-import { describe, expect, it } from "bun:test"
-import {
-  clamp,
-  degToRad,
-  distance,
-  lerp,
-  mapRange,
-  modulo,
-  normalize,
-  radToDeg,
-  roundTo,
-  truncate,
-} from "./math"
-
-describe("clamp", () => {
-  it("should return input when within bounds", () => {
-    expect(clamp(0, 50, 100)).toBe(50)
-    expect(clamp(-10, 0, 10)).toBe(0)
-  })
-
-  it("should return min when input is below min", () => {
-    expect(clamp(0, -5, 100)).toBe(0)
-    expect(clamp(10, 5, 20)).toBe(10)
-  })
-
-  it("should return max when input is above max", () => {
-    expect(clamp(0, 150, 100)).toBe(100)
-    expect(clamp(10, 25, 20)).toBe(20)
-  })
-
-  it("should handle edge cases", () => {
-    expect(clamp(0, 0, 100)).toBe(0)
-    expect(clamp(0, 100, 100)).toBe(100)
-  })
-})
-
-describe("lerp", () => {
-  it("should return start when amount is 0", () => {
-    expect(lerp(0, 100, 0)).toBe(0)
-    expect(lerp(-50, 50, 0)).toBe(-50)
-  })
-
-  it("should return end when amount is 1", () => {
-    expect(lerp(0, 100, 1)).toBe(100)
-    expect(lerp(-50, 50, 1)).toBe(50)
-  })
-
-  it("should return midpoint when amount is 0.5", () => {
-    expect(lerp(0, 100, 0.5)).toBe(50)
-    expect(lerp(-100, 100, 0.5)).toBe(0)
-  })
-
-  it("should handle intermediate values", () => {
-    expect(lerp(0, 100, 0.25)).toBe(25)
-    expect(lerp(0, 100, 0.75)).toBe(75)
-  })
-
-  it("should extrapolate beyond 0-1 range", () => {
-    expect(lerp(0, 100, 1.5)).toBe(150)
-    expect(lerp(0, 100, -0.5)).toBe(-50)
-  })
-})
-
-describe("mapRange", () => {
-  it("should map value from one range to another", () => {
-    expect(mapRange(0, 100, 50, 0, 1)).toBe(0.5)
-    expect(mapRange(0, 1000, 500, 0, 1)).toBe(0.5)
-  })
-
-  it("should handle inverted output ranges", () => {
-    expect(mapRange(0, 100, 50, 1, 0)).toBe(0.5)
-    expect(mapRange(0, 100, 0, 1, 0)).toBe(1)
-    expect(mapRange(0, 100, 100, 1, 0)).toBe(0)
-  })
-
-  it("should not clamp by default", () => {
-    expect(mapRange(0, 100, 150, 0, 1)).toBe(1.5)
-    expect(mapRange(0, 100, -50, 0, 1)).toBe(-0.5)
-  })
-
-  it("should clamp when shouldClamp is true", () => {
-    expect(mapRange(0, 100, 150, 0, 1, true)).toBe(1)
-    expect(mapRange(0, 100, -50, 0, 1, true)).toBe(0)
-  })
-
-  it("should clamp inverted ranges correctly", () => {
-    expect(mapRange(0, 100, 150, 1, 0, true)).toBe(0)
-    expect(mapRange(0, 100, -50, 1, 0, true)).toBe(1)
-  })
-})
-
-describe("truncate", () => {
-  it("should truncate to specified decimal places", () => {
-    expect(truncate(1.23456789, 2)).toBe(1.23)
-    expect(truncate(1.23456789, 3)).toBe(1.235)
-    expect(truncate(1.23456789, 4)).toBe(1.2346)
-  })
-
-  it("should handle 0 decimal places", () => {
-    expect(truncate(1.23456789, 0)).toBe(1)
-    expect(truncate(3.9, 0)).toBe(4)
-  })
-
-  it("should handle already truncated numbers", () => {
-    expect(truncate(3.14, 2)).toBe(3.14)
-    expect(truncate(5, 2)).toBe(5)
-  })
-})
-
-describe("modulo", () => {
-  it("should work like JavaScript % for positive numbers", () => {
-    expect(modulo(5, 3)).toBe(2)
-    expect(modulo(10, 4)).toBe(2)
-  })
-
-  it("should handle negative dividends correctly (true modulo)", () => {
-    expect(modulo(-1, 3)).toBe(2)
-    expect(modulo(-5, 3)).toBe(1)
-    expect(modulo(-10, 4)).toBe(2)
-  })
-
-  it("should return input when divisor is 0", () => {
-    expect(modulo(5, 0)).toBe(5)
-    expect(modulo(-5, 0)).toBe(-5)
-  })
-
-  it("should return NaN for negative divisors", () => {
-    expect(modulo(5, -3)).toBeNaN()
-  })
-
-  it("should wrap array indices correctly", () => {
-    const length = 5
-    expect(modulo(-1, length)).toBe(4)
-    expect(modulo(5, length)).toBe(0)
-    expect(modulo(7, length)).toBe(2)
-  })
-})
-
-describe("roundTo", () => {
-  it("should round to the nearest multiple", () => {
-    expect(roundTo(23, 10)).toBe(20)
-    expect(roundTo(27, 10)).toBe(30)
-    expect(roundTo(25, 10)).toBe(30)
-  })
-
-  it("should handle decimal multiples", () => {
-    expect(roundTo(0.23, 0.1)).toBeCloseTo(0.2, 10)
-    expect(roundTo(0.27, 0.1)).toBeCloseTo(0.3, 10)
-  })
-
-  it("should handle exact multiples", () => {
-    expect(roundTo(20, 10)).toBe(20)
-    expect(roundTo(0.5, 0.5)).toBe(0.5)
-  })
-})
-
-describe("degToRad", () => {
-  it("should convert degrees to radians", () => {
-    expect(degToRad(0)).toBe(0)
-    expect(degToRad(180)).toBeCloseTo(Math.PI, 10)
-    expect(degToRad(90)).toBeCloseTo(Math.PI / 2, 10)
-    expect(degToRad(360)).toBeCloseTo(Math.PI * 2, 10)
-  })
-
-  it("should handle negative degrees", () => {
-    expect(degToRad(-90)).toBeCloseTo(-Math.PI / 2, 10)
-  })
-})
-
-describe("radToDeg", () => {
-  it("should convert radians to degrees", () => {
-    expect(radToDeg(0)).toBe(0)
-    expect(radToDeg(Math.PI)).toBeCloseTo(180, 10)
-    expect(radToDeg(Math.PI / 2)).toBeCloseTo(90, 10)
-    expect(radToDeg(Math.PI * 2)).toBeCloseTo(360, 10)
-  })
-
-  it("should handle negative radians", () => {
-    expect(radToDeg(-Math.PI / 2)).toBeCloseTo(-90, 10)
-  })
-})
-
-describe("distance", () => {
-  it("should calculate distance between two points", () => {
-    expect(distance(0, 0, 3, 4)).toBe(5)
-    expect(distance(0, 0, 0, 0)).toBe(0)
-  })
-
-  it("should handle negative coordinates", () => {
-    expect(distance(-3, -4, 0, 0)).toBe(5)
-    expect(distance(-1, -1, 1, 1)).toBeCloseTo(Math.sqrt(8), 10)
-  })
-
-  it("should be symmetric", () => {
-    expect(distance(0, 0, 3, 4)).toBe(distance(3, 4, 0, 0))
-  })
-})
-
-describe("normalize", () => {
-  it("should normalize value to 0-1 range", () => {
-    expect(normalize(0, 100, 50)).toBe(0.5)
-    expect(normalize(0, 100, 0)).toBe(0)
-    expect(normalize(0, 100, 100)).toBe(1)
-  })
-
-  it("should handle non-zero min values", () => {
-    expect(normalize(50, 100, 75)).toBe(0.5)
-    expect(normalize(-100, 100, 0)).toBe(0.5)
-  })
-
-  it("should extrapolate outside range", () => {
-    expect(normalize(0, 100, 150)).toBe(1.5)
-    expect(normalize(0, 100, -50)).toBe(-0.5)
-  })
-})