@blueshift-gg/ui-components 0.1.0

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@blueshift-gg/ui-components",
+  "version": "0.1.0",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Blueshift Design System",
+  "author": "Blueshift",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yourusername/blueshift-design-system.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/yourusername/blueshift-design-system#readme",
+  "bugs": {
+    "url": "https://github.com/yourusername/blueshift-design-system/issues"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "design-system",
+    "ui",
+    "blueshift",
+    "tailwind"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "import": "./dist/icons/index.mjs",
+      "require": "./dist/icons/index.js"
+    },
+    "./theme.css": "./src/theme.css",
+    "./fonts/*": "./src/fonts/*",
+    "./package.json": "./package.json",
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.mjs",
+      "require": "./dist/*.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src/theme.css",
+    "src/fonts",
+    "README.md",
+    "LICENSE"
+  ],
+  "devDependencies": {
+    "@types/node": "^22.15.3",
+    "@types/react": "19.1.0",
+    "@types/react-dom": "19.1.1",
+    "eslint": "^9.34.0",
+    "tsup": "^8.3.5",
+    "typescript": "5.9.2"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.1.4",
+    "classnames": "^2.5.1",
+    "motion": "^11.15.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "sonner": "^2.0.7",
+    "tailwindcss": "^4.1.4",
+    "usehooks-ts": "^3.1.1"
+  },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "generate:component": "turbo gen react-component",
+    "check-types": "tsc --noEmit",
+    "build": "tsup",
+    "publish:dry-run": "npm publish --dry-run",
+    "publish:npm": "npm publish --access public"
+  }
+}

package/src/theme.css

@@ -0,0 +1,124 @@
+@theme {
+  --color-brand-primary: rgba(0, 255, 255, 1);
+  --color-brand-secondary: rgba(0, 230, 230, 1);
+  --color-brand-tertiary: rgba(0, 179, 179, 1);
+  --color-shade-primary: rgba(239, 241, 246, 1);
+  --color-shade-secondary: rgba(206, 213, 228, 1);
+  --color-shade-tertiary: rgba(173, 185, 210, 1);
+  --color-shade-mute: rgba(88, 94, 108, 1);
+  --color-background: rgba(11, 14, 20, 1);
+  --color-card-solid: rgba(17, 20, 26, 1);
+  --color-card-foreground: rgba(23, 26, 32, 1);
+  --color-border: rgba(26, 30, 38, 1);
+  --color-badge-secondary: rgba(17, 20, 26, 0.5);
+  --color-accent-1: rgba(0, 255, 255, 1);
+  --color-accent-2: rgba(0, 255, 119, 1);
+  --color-accent-3: rgba(255, 238, 0, 1);
+  --color-accent-4: rgba(255, 0, 111, 1);
+  --color-brand-rust: rgba(255, 153, 51, 1);
+  --color-brand-anchor: rgba(51, 129, 255, 1);
+  --color-brand-assembly: rgba(136, 255, 51, 1);
+  --color-brand-typescript: rgba(255, 241, 51, 1);
+  --color-state-error: rgba(255, 0, 64, 1);
+  --color-state-success: rgba(0, 255, 119, 1);
+  --color-border-light: rgba(35, 38, 46, 1);
+  --background-image-card-border: linear-gradient(
+    180deg,
+    rgba(173, 185, 210, 0.15) 0%,
+    rgba(173, 185, 210, 0.1) 100%
+  );
+  --background-image-primary-button:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
+    linear-gradient(180deg, #00ffff, #00ffff);
+  --background-image-primary-button-border: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.45),
+    rgba(255, 255, 255, 0.35)
+  );
+  --background-image-secondary-button-border: linear-gradient(
+    180deg,
+    rgba(173, 185, 210, 0.08) 0%,
+    rgba(173, 185, 210, 0.02) 100%
+  );
+
+  --font-sans: "Funnel Display", system-ui, sans-serif;
+  --font-sans-article: "Switzer Variable", system-ui, sans-serif;
+  --font-mono: "Montech", system-ui, monospace;
+  --font-mono-code: "CommitMono", system-ui, monospace;
+
+  --ease-anticipate: cubic-bezier(1, -0.4, 0.35, 0.95);
+  --ease-breeze: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  --ease-silk: cubic-bezier(0.52, 0.062, 0.64, 0.21);
+  --ease-swift: cubic-bezier(0.86, 0.04, 0.67, 0.24);
+  --ease-nova: cubic-bezier(0.73, 0.065, 0.82, 0.08);
+  --ease-crisp: cubic-bezier(0.92, 0.06, 0.77, 0.045);
+  --ease-glide: cubic-bezier(0.58, 0.06, 0.95, 0.32);
+
+  --breakpoint-xs: 480px;
+}
+
+body {
+  @apply w-dvw h-auto overflow-x-hidden;
+  background: var(--color-background);
+  color: var(--color-shade-secondary);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  scroll-behavior: smooth;
+  letter-spacing: -0.02em;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@utility gradient-border {
+  position: relative;
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    padding: 1px;
+    border-radius: inherit;
+    -webkit-mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    mask-mode: match-source, match-source;
+    mask-repeat: repeat, repeat;
+    mask-clip: content-box, border-box;
+    mask-origin: content-box, border-box;
+    mask-position:
+      0% 0%,
+      0% 0%;
+    mask-size: auto, auto;
+    pointer-events: none;
+  }
+}
+
+html {
+  scrollbar-color: transparent #171a20;
+  scrollbar-width: thin;
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #171a20;
+}
+
+::-webkit-scrollbar-thumb {
+  box-shadow: none;
+}