@coderabbitai/carrot-ui 0.1.19

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@coderabbitai/carrot-ui",
+  "version": "0.1.19",
+  "description": "CodeRabbit design system. React components built on Base UI, styled with Tailwind CSS v4.",
+  "keywords": [
+    "coderabbit",
+    "design-system",
+    "react",
+    "tailwindcss",
+    "ui"
+  ],
+  "homepage": "https://github.com/coderabbitai/carrot-ui",
+  "bugs": {
+    "url": "https://github.com/coderabbitai/carrot-ui/issues"
+  },
+  "license": "UNLICENSED",
+  "author": {
+    "name": "CodeRabbit",
+    "email": "support@coderabbit.ai",
+    "url": "https://coderabbit.ai"
+  },
+  "repository": "github:coderabbitai/carrot-ui",
+  "files": [
+    "dist",
+    "src/styles.css",
+    "src/theme.css",
+    "src/scales.css"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./css": "./src/styles.css",
+    "./theme": "./src/theme.css",
+    "./scales": "./src/scales.css"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.3.0",
+    "@heroicons/react": "^2.2.0",
+    "@tanstack/react-table": "^8.21.3",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "shiki": "^4.0.2",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@mdx-js/rollup": "^3.1.1",
+    "@tailwindcss/vite": "4.1.15",
+    "@tanstack/react-router": "^1.168.18",
+    "@types/mdast": "^4.0.4",
+    "@types/mdx": "^2.0.13",
+    "@types/node": "^22.15.32",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "6.0.0",
+    "mdast-util-to-string": "^4.0.0",
+    "oxfmt": "^0.49.0",
+    "oxlint": "^1.64.0",
+    "tailwindcss": "^4.1.15",
+    "typescript": "5.8.3",
+    "unist-util-visit": "^5.1.0",
+    "vite": "8.0.7",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0"
+  },
+  "scripts": {
+    "build": "vite build --config vite.config.lib.ts",
+    "build:playground": "vite build",
+    "dev": "vite",
+    "format": "oxfmt --config .oxfmtrc.json .",
+    "format:check": "oxfmt --config .oxfmtrc.json --check .",
+    "lint": "oxlint --config .oxlintrc.json . && pnpm run format:check",
+    "lint:fix": "oxlint --config .oxlintrc.json --fix . --quiet && pnpm run format",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/scales.css

@@ -0,0 +1,198 @@
+/*
+ * ═══════════════════════════════════════════════════════════════
+ * Color Scales
+ *
+ * All custom 12-step scales using Radix-style 1-12 numbering.
+ * Each scale provides light and dark mode values.
+ *
+ * Radix semantic step conventions:
+ *   1-2:   Backgrounds
+ *   3-5:   Component backgrounds (default, hover, active)
+ *   6-8:   Borders (subtle, default, strong)
+ *   9-10:  Solid fills (default, hover)
+ *   11:    Low-contrast text
+ *   12:    High-contrast text
+ *
+ * The taupe scale is custom OKLCH and inverts between modes.
+ * Red, amber, and green are based on Radix Colors.
+ * CR Orange is the CodeRabbit brand palette.
+ *
+ * All scales are prefixed with `cui-` to avoid collisions
+ * when imported alongside other design systems.
+ *
+ * Scales use --color-cui-* namespace so Tailwind v4
+ * auto-generates utilities (bg-cui-taupe-6, text-cui-red-12,
+ * etc.). Prefer semantic tokens (bg-cui-base-1, text-cui-primary)
+ * in components.
+ * ═══════════════════════════════════════════════════════════════
+ */
+
+/* ── Taupe ──
+ * Custom neutral in OKLCH (hue 55, chroma 0.005).
+ * Inverts between modes. Steps cluster tighter near backgrounds.
+ */
+:root {
+	--color-cui-taupe-1: oklch(0.994 0.005 55);
+	--color-cui-taupe-2: oklch(0.982 0.005 55);
+	--color-cui-taupe-3: oklch(0.956 0.005 55);
+	--color-cui-taupe-4: oklch(0.931 0.005 55);
+	--color-cui-taupe-5: oklch(0.91 0.005 55);
+	--color-cui-taupe-6: oklch(0.885 0.005 55);
+	--color-cui-taupe-7: oklch(0.851 0.005 55);
+	--color-cui-taupe-8: oklch(0.791 0.005 55);
+	--color-cui-taupe-9: oklch(0.641 0.005 55);
+	--color-cui-taupe-10: oklch(0.605 0.005 55);
+	--color-cui-taupe-11: oklch(0.498 0.005 55);
+	--color-cui-taupe-12: oklch(0.243 0.005 55);
+}
+
+[data-theme="dark"] {
+	--color-cui-taupe-1: oklch(0.177 0.005 55);
+	--color-cui-taupe-2: oklch(0.213 0.005 55);
+	--color-cui-taupe-3: oklch(0.252 0.005 55);
+	--color-cui-taupe-4: oklch(0.284 0.005 55);
+	--color-cui-taupe-5: oklch(0.312 0.005 55);
+	--color-cui-taupe-6: oklch(0.348 0.005 55);
+	--color-cui-taupe-7: oklch(0.401 0.005 55);
+	--color-cui-taupe-8: oklch(0.489 0.005 55);
+	--color-cui-taupe-9: oklch(0.534 0.005 55);
+	--color-cui-taupe-10: oklch(0.582 0.005 55);
+	--color-cui-taupe-11: oklch(0.767 0.005 55);
+	--color-cui-taupe-12: oklch(0.949 0.005 55);
+}
+
+/* ── CodeRabbit Orange ──
+ * Custom brand palette. Inverts between modes following
+ * the same pattern as Radix scales.
+ */
+:root {
+	--color-cui-cr-orange-1: #fefcfb;
+	--color-cui-cr-orange-2: #fff7ed;
+	--color-cui-cr-orange-3: #ffead5;
+	--color-cui-cr-orange-4: #ffdcc3;
+	--color-cui-cr-orange-5: #ffc4a0;
+	--color-cui-cr-orange-6: #ffab7a;
+	--color-cui-cr-orange-7: #f48e5a;
+	--color-cui-cr-orange-8: #e57340;
+	--color-cui-cr-orange-9: #ff570a;
+	--color-cui-cr-orange-10: #ef4f00;
+	--color-cui-cr-orange-11: #cc4e00;
+	--color-cui-cr-orange-12: #582d1d;
+}
+
+[data-theme="dark"] {
+	--color-cui-cr-orange-1: #17120e;
+	--color-cui-cr-orange-2: #1e150f;
+	--color-cui-cr-orange-3: #331e0b;
+	--color-cui-cr-orange-4: #462100;
+	--color-cui-cr-orange-5: #562800;
+	--color-cui-cr-orange-6: #66350c;
+	--color-cui-cr-orange-7: #7e451d;
+	--color-cui-cr-orange-8: #a35829;
+	--color-cui-cr-orange-9: #ff570a;
+	--color-cui-cr-orange-10: #ff801f;
+	--color-cui-cr-orange-11: #ffa057;
+	--color-cui-cr-orange-12: #ffe0c2;
+}
+
+/* ── Red ──
+ * Based on Radix Colors tomato scale.
+ * Used for danger and error states.
+ */
+:root {
+	--color-cui-red-1: #fffcfc;
+	--color-cui-red-2: #fff8f7;
+	--color-cui-red-3: #feebe7;
+	--color-cui-red-4: #ffdcd3;
+	--color-cui-red-5: #ffcdc2;
+	--color-cui-red-6: #fdbdaf;
+	--color-cui-red-7: #f5a898;
+	--color-cui-red-8: #ec8e7b;
+	--color-cui-red-9: #e54d2e;
+	--color-cui-red-10: #dd4425;
+	--color-cui-red-11: #d13415;
+	--color-cui-red-12: #5c271f;
+}
+
+[data-theme="dark"] {
+	--color-cui-red-1: #181111;
+	--color-cui-red-2: #1f1513;
+	--color-cui-red-3: #391714;
+	--color-cui-red-4: #4e1511;
+	--color-cui-red-5: #5e1c16;
+	--color-cui-red-6: #6e2920;
+	--color-cui-red-7: #853a2d;
+	--color-cui-red-8: #ac4d39;
+	--color-cui-red-9: #e54d2e;
+	--color-cui-red-10: #ec6142;
+	--color-cui-red-11: #ff977d;
+	--color-cui-red-12: #fbd3cb;
+}
+
+/* ── Amber ──
+ * Based on Radix Colors amber scale.
+ * Used for warning and caution states.
+ */
+:root {
+	--color-cui-amber-1: #fefdfb;
+	--color-cui-amber-2: #fefbe9;
+	--color-cui-amber-3: #fff7c2;
+	--color-cui-amber-4: #ffee9c;
+	--color-cui-amber-5: #fbe577;
+	--color-cui-amber-6: #f3d673;
+	--color-cui-amber-7: #e9c162;
+	--color-cui-amber-8: #e2a336;
+	--color-cui-amber-9: #ffc53d;
+	--color-cui-amber-10: #ffba18;
+	--color-cui-amber-11: #ab6400;
+	--color-cui-amber-12: #4f3422;
+}
+
+[data-theme="dark"] {
+	--color-cui-amber-1: #16120c;
+	--color-cui-amber-2: #1d180f;
+	--color-cui-amber-3: #302008;
+	--color-cui-amber-4: #3f2700;
+	--color-cui-amber-5: #4d3000;
+	--color-cui-amber-6: #5c3d05;
+	--color-cui-amber-7: #714f19;
+	--color-cui-amber-8: #8f6424;
+	--color-cui-amber-9: #ffc53d;
+	--color-cui-amber-10: #ffd60a;
+	--color-cui-amber-11: #ffca16;
+	--color-cui-amber-12: #ffe7b3;
+}
+
+/* ── Green ──
+ * Based on Radix Colors green scale.
+ * Used for success and positive states.
+ */
+:root {
+	--color-cui-green-1: #fbfefc;
+	--color-cui-green-2: #f4fbf6;
+	--color-cui-green-3: #e6f6eb;
+	--color-cui-green-4: #d6f1df;
+	--color-cui-green-5: #c4e8d1;
+	--color-cui-green-6: #adddc0;
+	--color-cui-green-7: #8eceaa;
+	--color-cui-green-8: #5bb98b;
+	--color-cui-green-9: #30a46c;
+	--color-cui-green-10: #2b9a66;
+	--color-cui-green-11: #218358;
+	--color-cui-green-12: #193b2d;
+}
+
+[data-theme="dark"] {
+	--color-cui-green-1: #0e1512;
+	--color-cui-green-2: #121b17;
+	--color-cui-green-3: #132d21;
+	--color-cui-green-4: #113b29;
+	--color-cui-green-5: #174933;
+	--color-cui-green-6: #20573e;
+	--color-cui-green-7: #28684a;
+	--color-cui-green-8: #2f7c57;
+	--color-cui-green-9: #30a46c;
+	--color-cui-green-10: #33b074;
+	--color-cui-green-11: #3dd68c;
+	--color-cui-green-12: #b1f1cb;
+}

package/src/styles.css

@@ -0,0 +1,13 @@
+@import "./theme.css";
+@import "./scales.css";
+
+@source "../dist/index.js";
+
+* {
+	--tw-ring-offset-color: var(--background-color-cui-base-1);
+}
+
+::selection {
+	background-color: var(--background-color-cui-inverse);
+	color: var(--text-color-cui-inverse);
+}