cuenti-dna 0.1.0-beta.1

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "cuenti-dna",
+  "version": "0.1.0-beta.1",
+  "private": false,
+  "description": "Cuenti design system components for React",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "scripts",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "pnpm run build:lib && pnpm run build:styles",
+    "dev": "pnpm run storybook",
+    "build:lib": "tsup src/lib/index.ts --format esm,cjs --dts --sourcemap --clean --external react --external react-dom",
+    "build:styles": "postcss src/styles/globals.css -o dist/styles.css",
+    "postinstall": "node scripts/postinstall.cjs",
+    "prepack": "pnpm run build",
+    "lint": "biome lint",
+    "format": "biome format --write",
+    "check": "biome check --write",
+    "lint:fix": "biome lint --write",
+    "check:unsafe": "biome check --write --unsafe",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepublishOnly": "pnpm run lint",
+    "publish:beta": "npm publish --access public --tag beta"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0 <20",
+    "react-dom": ">=18.2.0 <20"
+  },
+  "dependencies": {
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "lucide-react": "0.576.0",
+    "tailwind-merge": "3.5.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.4.5",
+    "@chromatic-com/storybook": "5.1.1",
+    "@rsbuild/core": "1.7.3",
+    "@rsbuild/plugin-react": "1.4.5",
+    "@storybook/addon-a11y": "10.2.14",
+    "@storybook/addon-docs": "10.2.14",
+    "@storybook/react": "10.2.14",
+    "@tailwindcss/postcss": "4.2.1",
+    "postcss-cli": "11.0.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "storybook": "10.2.14",
+    "storybook-react-rsbuild": "3.3.0",
+    "tailwindcss": "4.2.1",
+    "tsup": "8.5.1",
+    "typescript": "5.9.3"
+  }
+}

package/scripts/postinstall.cjs

@@ -0,0 +1,569 @@
+#!/usr/bin/env node
+
+const fs = require('node:fs')
+const path = require('node:path')
+const readline = require('node:readline')
+
+const MANAGED_BLOCK_START = '/* cuenti-dna:variables:start */'
+const MANAGED_BLOCK_END = '/* cuenti-dna:variables:end */'
+const STYLE_IMPORT = "@import 'cuenti-dna/styles.css';"
+
+const FONT_IMPORTS = [
+  '@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");',
+  '@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");'
+]
+
+const ROOT_VARIABLES_BLOCK = `:root {
+  --background: oklch(0.9672 0 0);
+  --foreground: oklch(0.2178 0 0);
+  --neutral-50: #ffffff;
+  --neutral-100: #fcfcfc;
+  --neutral-200: #f4f4f4;
+  --neutral-300: #ececec;
+  --neutral-400: #e8e8e8;
+  --neutral-500: #dadada;
+  --neutral-600: #cdcdcd;
+  --neutral-700: #797979;
+  --neutral-800: #515151;
+  --neutral-900: #1a1a1a;
+  --neutral-1000: #141414;
+  --neutral-1100: #000000;
+  --primary-50: #cedcf5;
+  --primary-100: #9eb8eb;
+  --primary-200: #6d95e1;
+  --primary-300: #3c72d7;
+  --primary-400: #2556b4;
+  --primary-500: #1b3f83;
+  --primary-600: #17356d;
+  --primary-700: #122a57;
+  --primary-800: #0d2042;
+  --primary-900: #09152c;
+  --primary: var(--primary-500);
+  --primary-foreground: var(--neutral-100);
+  --secondary-25: #e8f0ff;
+  --secondary-50: #cdd6ec;
+  --secondary-100: #9bacd9;
+  --secondary-200: #6983c5;
+  --secondary-300: #405ea8;
+  --secondary-400: #2d4276;
+  --secondary-500: #1a2644;
+  --secondary-600: #162039;
+  --secondary-700: #11192d;
+  --secondary-800: #0d1322;
+  --secondary-900: #090d17;
+  --secondary: var(--secondary-500);
+  --secondary-foreground: var(--neutral-100);
+  --accent-50: #fff6d5;
+  --accent-100: #ffecaa;
+  --accent-200: #ffe380;
+  --accent-300: #ffd955;
+  --accent-400: #ffd02b;
+  --accent-500: #ffc600;
+  --accent-600: #d5a500;
+  --accent-700: #aa8400;
+  --accent-800: #806300;
+  --accent-900: #554200;
+  --accent: var(--accent-500);
+  --accent-foreground: var(--secondary);
+  --destructive-25: #fff3f3;
+  --destructive-50: #fbdcdc;
+  --destructive-100: #f7b9b9;
+  --destructive-200: #f39696;
+  --destructive-300: #ee7373;
+  --destructive-400: #ea5050;
+  --destructive-500: #e62d2d;
+  --destructive-600: #cd1818;
+  --destructive-700: #a41414;
+  --destructive-800: #7b0f0f;
+  --destructive-900: #520a0a;
+  --destructive: var(--destructive-500);
+  --destructive-foreground: var(--neutral-100);
+  --success-25: #ebffed;
+  --success-50: #dbf5de;
+  --success-100: #b8ebbd;
+  --success-200: #94e19d;
+  --success-300: #71d77c;
+  --success-400: #4dcd5b;
+  --success-500: #34b942;
+  --success-600: #2b9a37;
+  --success-700: #237b2c;
+  --success-800: #1a5d21;
+  --success-900: #113e16;
+  --success: var(--success-500);
+  --success-foreground: var(--neutral-100);
+  --warning-25: #fffaf2;
+  --warning-50: #fdefd9;
+  --warning-100: #fbdeb2;
+  --warning-200: #face8c;
+  --warning-300: #f8be66;
+  --warning-400: #f6ad3f;
+  --warning-500: #f49d19;
+  --warning-600: #d6850a;
+  --warning-700: #ab6a08;
+  --warning-800: #805006;
+  --warning-900: #563504;
+  --warning: var(--warning-500);
+  --warning-foreground: var(--neutral-100);
+  --info-25: #f3f6fd;
+  --info-50: #dae5f8;
+  --info-100: #b4cbf1;
+  --info-200: #8fb1ea;
+  --info-300: #6a96e4;
+  --info-400: #447cdd;
+  --info-500: #2664cf;
+  --info-600: #2053ac;
+  --info-700: #19438a;
+  --info-800: #133267;
+  --info-900: #0d2145;
+  --info: var(--info-500);
+  --info-foreground: var(--neutral-100);
+  --alt2-25: #f6f3fa;
+  --alt2-50: #e3daf0;
+  --alt2-100: #c7b4e1;
+  --alt2-200: #ac8fd2;
+  --alt2-300: #9069c3;
+  --alt2-400: #7547b1;
+  --alt2-500: #5c388c;
+  --alt2-600: #4d2f75;
+  --alt2-700: #3d255d;
+  --alt2-800: #2e1c46;
+  --alt2-900: #1f1132;
+  --alt2: var(--alt2-500);
+  --alt2-foreground: var(--neutral-100);
+  --font-paragraph: "Quicksand", ui-sans-serif, sans-serif, system-ui;
+  --font-title: "Rubik", ui-sans-serif, sans-serif, system-ui;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --tracking-normal: 0em;
+}`
+
+const THEME_INLINE_BLOCK = `@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-neutral-50: var(--neutral-50);
+  --color-neutral-100: var(--neutral-100);
+  --color-neutral-200: var(--neutral-200);
+  --color-neutral-300: var(--neutral-300);
+  --color-neutral-400: var(--neutral-400);
+  --color-neutral-500: var(--neutral-500);
+  --color-neutral-600: var(--neutral-600);
+  --color-neutral-700: var(--neutral-700);
+  --color-neutral-800: var(--neutral-800);
+  --color-neutral-900: var(--neutral-900);
+  --color-neutral-1000: var(--neutral-1000);
+  --color-neutral-1100: var(--neutral-1100);
+  --color-primary-50: var(--primary-50);
+  --color-primary-100: var(--primary-100);
+  --color-primary-200: var(--primary-200);
+  --color-primary-300: var(--primary-300);
+  --color-primary-400: var(--primary-400);
+  --color-primary-500: var(--primary-500);
+  --color-primary-600: var(--primary-600);
+  --color-primary-700: var(--primary-700);
+  --color-primary-800: var(--primary-800);
+  --color-primary-900: var(--primary-900);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary-25: var(--secondary-25);
+  --color-secondary-50: var(--secondary-50);
+  --color-secondary-100: var(--secondary-100);
+  --color-secondary-200: var(--secondary-200);
+  --color-secondary-300: var(--secondary-300);
+  --color-secondary-400: var(--secondary-400);
+  --color-secondary-500: var(--secondary-500);
+  --color-secondary-600: var(--secondary-600);
+  --color-secondary-700: var(--secondary-700);
+  --color-secondary-800: var(--secondary-800);
+  --color-secondary-900: var(--secondary-900);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-accent-50: var(--accent-50);
+  --color-accent-100: var(--accent-100);
+  --color-accent-200: var(--accent-200);
+  --color-accent-300: var(--accent-300);
+  --color-accent-400: var(--accent-400);
+  --color-accent-500: var(--accent-500);
+  --color-accent-600: var(--accent-600);
+  --color-accent-700: var(--accent-700);
+  --color-accent-800: var(--accent-800);
+  --color-accent-900: var(--accent-900);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive-25: var(--destructive-25);
+  --color-destructive-50: var(--destructive-50);
+  --color-destructive-100: var(--destructive-100);
+  --color-destructive-200: var(--destructive-200);
+  --color-destructive-300: var(--destructive-300);
+  --color-destructive-400: var(--destructive-400);
+  --color-destructive-500: var(--destructive-500);
+  --color-destructive-600: var(--destructive-600);
+  --color-destructive-700: var(--destructive-700);
+  --color-destructive-800: var(--destructive-800);
+  --color-destructive-900: var(--destructive-900);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success-25: var(--success-25);
+  --color-success-50: var(--success-50);
+  --color-success-100: var(--success-100);
+  --color-success-200: var(--success-200);
+  --color-success-300: var(--success-300);
+  --color-success-400: var(--success-400);
+  --color-success-500: var(--success-500);
+  --color-success-600: var(--success-600);
+  --color-success-700: var(--success-700);
+  --color-success-800: var(--success-800);
+  --color-success-900: var(--success-900);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning-25: var(--warning-25);
+  --color-warning-50: var(--warning-50);
+  --color-warning-100: var(--warning-100);
+  --color-warning-200: var(--warning-200);
+  --color-warning-300: var(--warning-300);
+  --color-warning-400: var(--warning-400);
+  --color-warning-500: var(--warning-500);
+  --color-warning-600: var(--warning-600);
+  --color-warning-700: var(--warning-700);
+  --color-warning-800: var(--warning-800);
+  --color-warning-900: var(--warning-900);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info-25: var(--info-25);
+  --color-info-50: var(--info-50);
+  --color-info-100: var(--info-100);
+  --color-info-200: var(--info-200);
+  --color-info-300: var(--info-300);
+  --color-info-400: var(--info-400);
+  --color-info-500: var(--info-500);
+  --color-info-600: var(--info-600);
+  --color-info-700: var(--info-700);
+  --color-info-800: var(--info-800);
+  --color-info-900: var(--info-900);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-alt2-25: var(--alt2-25);
+  --color-alt2-50: var(--alt2-50);
+  --color-alt2-100: var(--alt2-100);
+  --color-alt2-200: var(--alt2-200);
+  --color-alt2-300: var(--alt2-300);
+  --color-alt2-400: var(--alt2-400);
+  --color-alt2-500: var(--alt2-500);
+  --color-alt2-600: var(--alt2-600);
+  --color-alt2-700: var(--alt2-700);
+  --color-alt2-800: var(--alt2-800);
+  --color-alt2-900: var(--alt2-900);
+  --color-alt2: var(--alt2);
+  --color-alt2-foreground: var(--alt2-foreground);
+  --color-muted: var(--neutral-400);
+  --color-muted-foreground: var(--neutral-700);
+  --color-card: var(--neutral-50);
+  --color-card-foreground: var(--foreground);
+  --color-ring: var(--primary);
+  --color-border: var(--neutral-600);
+  --radius: 1rem;
+  --radius-xs: calc(var(--radius) - 6px);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) + 4px);
+  --radius-xl: calc(var(--radius) + 6px);
+  --font-title: var(--font-title);
+  --font-paragraph: var(--font-paragraph);
+  --font-mono: var(--font-mono);
+  --breakpoint-xs: 400px;
+  --shadow-xs: 0px 1.5px 3px 0px rgb(68 124 221 / 20%);
+  --shadow-sm: 0px 6px 12px 0px rgb(68 124 221 / 20%);
+  --shadow-md: 0px 9px 21px 0px rgb(68 124 221 / 20%);
+  --shadow-lg: 0px 12px 36px -6px rgb(68 124 221 / 20%);
+  --shadow-xl: 0px 24px 72px -12px rgb(68 124 221 / 20%);
+}`
+
+const CSS_CANDIDATES = [
+  'src/styles/globals.css',
+  'src/globals.css',
+  'app/globals.css',
+  'styles/globals.css',
+  'src/index.css',
+  'src/styles.css',
+  'src/app.css'
+]
+
+const DEFAULT_CSS_FILE = 'src/styles/globals.css'
+
+const log = (message) => {
+  // biome-ignore lint/suspicious/noConsole: lifecycle scripts should print setup information.
+  console.log(`[cuenti-dna] ${message}`)
+}
+
+const toPosixPath = (value) => value.replace(/\\/g, '/')
+
+const fileExists = (filePath) => {
+  try {
+    return fs.statSync(filePath).isFile()
+  } catch {
+    return false
+  }
+}
+
+const readTextFile = (filePath) => fs.readFileSync(filePath, 'utf8')
+
+const writeTextFile = (filePath, content) => {
+  fs.mkdirSync(path.dirname(filePath), { recursive: true })
+  fs.writeFileSync(filePath, content, 'utf8')
+}
+
+const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+
+const detectEol = (content) => (content.includes('\r\n') ? '\r\n' : '\n')
+
+const parseVariableNames = (content) => {
+  const names = new Set()
+  const matcher = /--([a-z0-9-_]+)\s*:/gi
+
+  let match = matcher.exec(content)
+
+  while (match) {
+    names.add(match[1])
+    match = matcher.exec(content)
+  }
+
+  return names
+}
+
+const removeManagedBlock = (content) => {
+  const pattern = new RegExp(
+    `${escapeRegExp(MANAGED_BLOCK_START)}[\\s\\S]*?${escapeRegExp(MANAGED_BLOCK_END)}\\s*`,
+    'g'
+  )
+
+  return content.replace(pattern, '')
+}
+
+const removeLegacyImports = (content) => {
+  const importPattern =
+    /^[ \t]*@import\s+['"]cuenti-dna\/styles\.css['"];\s*\r?\n?/gim
+
+  let next = content.replace(importPattern, '')
+
+  for (const importLine of FONT_IMPORTS) {
+    const exactLinePattern = new RegExp(
+      `^[ \\t]*${escapeRegExp(importLine)}\\s*\\r?\\n?`,
+      'gim'
+    )
+
+    next = next.replace(exactLinePattern, '')
+  }
+
+  return next
+}
+
+const removeVariableDeclarations = (content, variableNames) => {
+  let next = content
+
+  for (const variableName of variableNames) {
+    const declarationPattern = new RegExp(
+      `^[ \\t]*--${escapeRegExp(variableName)}\\s*:[^;]*;\\s*\\r?\\n?`,
+      'gim'
+    )
+
+    next = next.replace(declarationPattern, '')
+  }
+
+  return next
+}
+
+const extractCharsetHeader = (content) => {
+  const charsetMatch = content.match(/^\s*@charset\s+[^;]+;\s*/i)
+
+  if (!charsetMatch) {
+    return {
+      charset: '',
+      rest: content
+    }
+  }
+
+  return {
+    charset: charsetMatch[0].trim(),
+    rest: content.slice(charsetMatch[0].length)
+  }
+}
+
+const buildManagedBlock = (eol) => {
+  const rootBlock = ROOT_VARIABLES_BLOCK.trim().replace(/\n/g, eol)
+  const themeInlineBlock = THEME_INLINE_BLOCK.trim().replace(/\n/g, eol)
+
+  return [
+    MANAGED_BLOCK_START,
+    STYLE_IMPORT,
+    ...FONT_IMPORTS,
+    '',
+    rootBlock,
+    '',
+    themeInlineBlock,
+    MANAGED_BLOCK_END
+  ].join(eol)
+}
+
+const askForOverwrite = (conflicts) =>
+  new Promise((resolve) => {
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout
+    })
+
+    rl.question(
+      `[cuenti-dna] Found ${conflicts.length} CSS variable collisions. Overwrite existing variables with Cuenti defaults? (y/N): `,
+      (answer) => {
+        rl.close()
+
+        const normalized = answer.trim().toLowerCase()
+        resolve(normalized === 'y' || normalized === 'yes')
+      }
+    )
+  })
+
+const parseOverwriteFlag = (value) => {
+  const normalized = String(value).trim().toLowerCase()
+
+  if (['1', 'true', 'yes', 'y'].includes(normalized)) {
+    return true
+  }
+
+  if (['0', 'false', 'no', 'n'].includes(normalized)) {
+    return false
+  }
+
+  return null
+}
+
+const resolveOverwriteDecision = async (conflicts) => {
+  if (conflicts.length === 0) {
+    return false
+  }
+
+  if (process.env.CUENTI_DNA_OVERWRITE_VARS) {
+    const parsed = parseOverwriteFlag(process.env.CUENTI_DNA_OVERWRITE_VARS)
+
+    if (parsed !== null) {
+      return parsed
+    }
+  }
+
+  const isInteractive =
+    Boolean(process.stdin.isTTY) &&
+    Boolean(process.stdout.isTTY) &&
+    !process.env.CI
+
+  if (!isInteractive) {
+    log(
+      'Detected CSS variable collisions. Keeping consumer variables. Set CUENTI_DNA_OVERWRITE_VARS=true to force overwrite in non-interactive installs.'
+    )
+    return false
+  }
+
+  return askForOverwrite(conflicts)
+}
+
+const resolveTargetCssFile = (projectRoot) => {
+  for (const relativeFile of CSS_CANDIDATES) {
+    const absolutePath = path.join(projectRoot, relativeFile)
+
+    if (fileExists(absolutePath)) {
+      return {
+        absolutePath,
+        relativeFile,
+        existed: true
+      }
+    }
+  }
+
+  return {
+    absolutePath: path.join(projectRoot, DEFAULT_CSS_FILE),
+    relativeFile: DEFAULT_CSS_FILE,
+    existed: false
+  }
+}
+
+const prependVariablesAndFonts = async (projectRoot) => {
+  const target = resolveTargetCssFile(projectRoot)
+  const current = target.existed ? readTextFile(target.absolutePath) : ''
+  const eol = detectEol(current)
+
+  const withoutManagedBlock = removeManagedBlock(current)
+  const cleanedContent = removeLegacyImports(withoutManagedBlock)
+  const cuentiVariables = parseVariableNames(
+    `${ROOT_VARIABLES_BLOCK}\n${THEME_INLINE_BLOCK}`
+  )
+  const existingVariables = parseVariableNames(cleanedContent)
+  const conflicts = [...existingVariables].filter((name) =>
+    cuentiVariables.has(name)
+  )
+
+  const shouldOverwrite = await resolveOverwriteDecision(conflicts)
+
+  const preservedContent = shouldOverwrite
+    ? removeVariableDeclarations(cleanedContent, conflicts)
+    : cleanedContent
+
+  const { charset, rest } = extractCharsetHeader(preservedContent)
+  const normalizedRest = rest.trimStart()
+  const managedBlock = buildManagedBlock(eol)
+
+  const chunks = []
+
+  if (charset) {
+    chunks.push(charset)
+  }
+
+  chunks.push(managedBlock)
+
+  if (normalizedRest.trim().length > 0) {
+    chunks.push(normalizedRest)
+  }
+
+  const nextContent = `${chunks.join(`${eol}${eol}`)}${eol}`
+  writeTextFile(target.absolutePath, nextContent)
+
+  if (conflicts.length === 0) {
+    log(
+      `Injected fonts and variables into ${toPosixPath(target.relativeFile)}.`
+    )
+  } else if (shouldOverwrite) {
+    log(
+      `Injected fonts and variables into ${toPosixPath(target.relativeFile)} and overwrote ${conflicts.length} colliding variables.`
+    )
+  } else {
+    log(
+      `Injected fonts and variables into ${toPosixPath(target.relativeFile)} and preserved ${conflicts.length} consumer variables.`
+    )
+  }
+
+  if (!target.existed) {
+    log(
+      `Created ${toPosixPath(target.relativeFile)}. Ensure your app entry imports this CSS file.`
+    )
+  }
+}
+
+const main = async () => {
+  const projectRoot = process.env.INIT_CWD
+    ? path.resolve(process.env.INIT_CWD)
+    : null
+
+  if (!projectRoot) {
+    log('Skipped auto setup because INIT_CWD is not available.')
+    return
+  }
+
+  if (path.resolve(process.cwd()) === projectRoot) {
+    log('Skipped auto setup in the package workspace.')
+    return
+  }
+
+  try {
+    await prependVariablesAndFonts(projectRoot)
+  } catch (error) {
+    const details = error instanceof Error ? error.message : String(error)
+    log(`Auto setup failed: ${details}`)
+  }
+}
+
+void main()