jvdm-ui 1.0.5

package/dist/tokens.css

@@ -0,0 +1,129 @@
+@theme {
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+
+  --text-2xs: 11px;
+  --text-2xs--line-height: 1.45;
+  --text-xs: 12px;
+  --text-xs--line-height: 1.45;
+  --text-sm: 13px;
+  --text-sm--line-height: 1.5;
+  --text-base: 15px;
+  --text-base--line-height: 1.55;
+  --text-lg: 18px;
+  --text-lg--line-height: 1.45;
+  --text-xl: 23px;
+  --text-xl--line-height: 1.3;
+  --text-2xl: 29px;
+  --text-2xl--line-height: 1.2;
+  --text-display: 58px;
+  --text-display--line-height: 0.98;
+
+  --spacing: 0.25rem;
+
+  --tracking-caps: 0.06em;
+  --tracking-code: 0.4em;
+  --tracking-tight: -0.015em;
+  --tracking-display: -0.025em;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+
+  --radius-xs: 3px;
+  --radius-sm: 5px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 20px;
+
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-over: cubic-bezier(0.34, 1.42, 0.64, 1);
+
+  --duration-instant: 90ms;
+  --duration-fast: 160ms;
+  --duration-base: 240ms;
+  --duration-slow: 420ms;
+
+  --color-app: light-dark(oklch(0.965 0.012 78), oklch(0.18 0.015 78));
+  --color-rail: light-dark(oklch(0.945 0.014 78), oklch(0.15 0.018 78));
+  --color-panel: light-dark(oklch(0.95 0.01 78), oklch(0.17 0.016 78));
+  --color-surface: light-dark(oklch(0.99 0.008 78), oklch(0.23 0.015 78));
+  --color-field: light-dark(oklch(0.98 0.008 78), oklch(0.215 0.015 78));
+  --color-raised: light-dark(oklch(0.93 0.012 78), oklch(0.3 0.02 78));
+
+  --color-line: light-dark(oklch(0.89 0.015 78), oklch(0.275 0.018 78));
+  --color-line-strong: light-dark(oklch(0.82 0.018 78), oklch(0.35 0.02 78));
+
+  --color-ink: light-dark(oklch(0.23 0.02 78), oklch(0.95 0.01 78));
+  --color-ink-soft: light-dark(oklch(0.36 0.018 78), oklch(0.82 0.016 78));
+  --color-ink-muted: light-dark(oklch(0.51 0.014 78), oklch(0.65 0.012 78));
+  --color-ink-dim: light-dark(oklch(0.56 0.012 78), oklch(0.57 0.012 78));
+
+  --color-accent: light-dark(oklch(0.25 0.025 78), oklch(0.94 0.015 78));
+  --color-accent-ink: light-dark(oklch(0.33 0.022 78), oklch(0.87 0.018 78));
+  --color-accent-soft: light-dark(oklch(0.92 0.025 78), oklch(0.29 0.02 78));
+  --color-on-accent: light-dark(oklch(0.99 0.008 78), oklch(0.16 0.018 78));
+
+  --color-ok: light-dark(oklch(0.5 0.13 155), oklch(0.78 0.12 155));
+  --color-ok-soft: light-dark(oklch(0.94 0.04 155), oklch(0.29 0.05 155));
+  --color-warn: light-dark(oklch(0.58 0.14 62), oklch(0.78 0.14 62));
+  --color-warn-soft: light-dark(oklch(0.94 0.05 62), oklch(0.31 0.06 62));
+  --color-danger: light-dark(oklch(0.51 0.21 22), oklch(0.7 0.18 22));
+  --color-danger-soft: light-dark(oklch(0.94 0.05 22), oklch(0.29 0.07 22));
+  --color-info: light-dark(oklch(0.5 0.14 250), oklch(0.72 0.11 245));
+  --color-info-soft: light-dark(oklch(0.94 0.035 250), oklch(0.29 0.055 245));
+
+  --shadow-raised:
+    0 1px 1px light-dark(oklch(0.23 0.02 78 / 0.05), oklch(0 0 0 / 0.36)),
+    0 2px 4px -1px light-dark(oklch(0.23 0.02 78 / 0.06), oklch(0 0 0 / 0.4));
+  --shadow-popover:
+    0 2px 4px -2px light-dark(oklch(0.23 0.02 78 / 0.06), oklch(0 0 0 / 0.4)),
+    0 10px 24px -6px light-dark(oklch(0.23 0.02 78 / 0.12), oklch(0 0 0 / 0.52));
+  --shadow-modal:
+    0 4px 10px -4px light-dark(oklch(0.23 0.02 78 / 0.08), oklch(0 0 0 / 0.44)),
+    0 28px 64px -16px light-dark(oklch(0.23 0.02 78 / 0.18), oklch(0 0 0 / 0.64));
+}
+
+:root {
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color-scheme: light;
+  }
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+@keyframes attention {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+  50% {
+    box-shadow: 0 0 0 4px var(--attention-ring, var(--color-danger-soft));
+  }
+}
+
+.attention {
+  animation: attention 2.4s var(--ease-in-out) infinite;
+}
+
+.attention-warn {
+  --attention-ring: var(--color-warn-soft);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .attention {
+    animation: none;
+    box-shadow: 0 0 0 2px var(--attention-ring, var(--color-danger-soft));
+  }
+}

package/package.json

@@ -0,0 +1,114 @@
+{
+  "name": "jvdm-ui",
+  "version": "1.0.5",
+  "description": "Design system em React 19 + Tailwind v4: tokens em oklch, tema claro/escuro e componentes em quatro camadas.",
+  "license": "MIT",
+  "author": "João Vitor Duarte Mariucio",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "bin"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./client/*": {
+      "types": "./dist/client/*.d.ts",
+      "import": "./dist/client/*.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "import": "./dist/tokens/index.js"
+    },
+    "./atoms": {
+      "types": "./dist/atoms/index.d.ts",
+      "import": "./dist/atoms/index.js"
+    },
+    "./molecules": {
+      "types": "./dist/molecules/index.d.ts",
+      "import": "./dist/molecules/index.js"
+    },
+    "./organisms": {
+      "types": "./dist/organisms/index.d.ts",
+      "import": "./dist/organisms/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.js"
+    },
+    "./presets/gavel.css": "./dist/presets/gavel.css"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsup && node scripts/build-presets.mjs && cp src/tokens/tokens.css dist/tokens.css",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "npm run build && vitest run && node --test tests/theme.test.mjs",
+    "test:coverage": "npm run build && vitest run --coverage && node --test tests/theme.test.mjs",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm run typecheck && npm run lint && npm run format:check && npm run build",
+    "site:dev": "vite --config site/vite.config.ts",
+    "site:build": "vite build --config site/vite.config.ts",
+    "typecheck:site": "tsc --noEmit -p site/tsconfig.json"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^26.6.2",
+    "@types/react": "^19",
+    "@types/react-dom": "^19.3.0",
+    "@types/react-test-renderer": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "@vitest/coverage-v8": "^5.0.2",
+    "eslint": "^10.11.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.5",
+    "eslint-plugin-boundaries": "^7.2.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "globals": "^17.12.0",
+    "prettier": "^3.9.9",
+    "prettier-plugin-tailwindcss": "^0.8.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "react-test-renderer": "^19.3.0",
+    "tailwindcss": "^4.3.3",
+    "tsup": "^8.5.0",
+    "typescript": "^5",
+    "typescript-eslint": "^8.70.1",
+    "vite": "^8.3.1",
+    "vitest": "^5.0.1"
+  },
+  "bin": {
+    "jvdm-ui": "./bin/jvdm-ui.mjs"
+  },
+  "keywords": [
+    "design-system",
+    "react",
+    "tailwindcss",
+    "ui",
+    "components",
+    "theming",
+    "design-tokens",
+    "oklch"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/joaoduartemariucio/jvdm-ui.git"
+  },
+  "homepage": "https://joaoduartemariucio.github.io/jvdm-ui",
+  "bugs": {
+    "url": "https://github.com/joaoduartemariucio/jvdm-ui/issues"
+  }
+}