@blinkdotnew/ui 0.1.0

package/package.json

@@ -0,0 +1,115 @@
+{
+  "name": "@blinkdotnew/ui",
+  "version": "0.1.0",
+  "description": "Blink UI SDK — production-quality React component library for SaaS apps",
+  "keywords": [
+    "blink",
+    "ui",
+    "react",
+    "components",
+    "design-system",
+    "shadcn",
+    "tailwind"
+  ],
+  "homepage": "https://blink.new",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/blink-new/blink-sdk.git",
+    "directory": "packages/ui"
+  },
+  "author": "Blink Team",
+  "license": "MIT",
+  "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"
+    },
+    "./styles": "./dist/styles.css",
+    "./themes/*": "./src/themes/*.css"
+  },
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.mjs",
+    "dist/**/*.d.ts",
+    "dist/**/*.d.mts",
+    "src/themes/*.css",
+    "dist/styles.css"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "deploy-storybook": "storybook build && wrangler deploy",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.0",
+    "@radix-ui/react-context-menu": "^2.2.0",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.0",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.0",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.0",
+    "@tanstack/react-table": "^8.21.3",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.400.0",
+    "react-hook-form": "^7.71.2",
+    "recharts": "^3.8.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^2.3.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@radix-ui/react-label": "^2.1.8",
+    "@storybook/addon-a11y": "^8.0.0",
+    "@storybook/addon-docs": "^8.0.0",
+    "@storybook/addon-themes": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-vite": "^8.0.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "autoprefixer": "^10.4.27",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "storybook": "^8.0.0",
+    "tailwindcss": "3",
+    "tailwindcss-animate": "^1.0.7",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwindcss": ">=3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/themes/base.css

@@ -0,0 +1,14 @@
+/* Blink UI — shared base resets (applied by every theme) */
+*,
+*::before,
+*::after {
+  border-color: hsl(var(--border, 0 0% 89.8%));
+}
+
+body {
+  background-color: hsl(var(--background, 0 0% 100%));
+  color: hsl(var(--foreground, 0 0% 3.9%));
+  font-family: var(--font-sans, system-ui, sans-serif);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/src/themes/glass.css

@@ -0,0 +1,62 @@
+/* Blink UI — Glass theme (frosted glass, translucent cards, Apple Vision/macOS-style) */
+
+
+:root,
+.theme-glass {
+  --background: 210 40% 96%;
+  --foreground: 222 47% 11%;
+  --card: 0 0% 100%;
+  --card-foreground: 222 47% 11%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222 47% 11%;
+  --primary: 221 83% 53%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 210 40% 92%;
+  --secondary-foreground: 222 47% 11%;
+  --muted: 210 40% 93%;
+  --muted-foreground: 215 16% 47%;
+  --accent: 210 40% 92%;
+  --accent-foreground: 221 83% 53%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 214 32% 91%;
+  --input: 214 32% 91%;
+  --ring: 221 83% 53%;
+  --radius: 0.75rem;
+  --glass-blur: blur(12px);
+  --glass-bg: rgba(255, 255, 255, 0.7);
+  --glass-border: rgba(255, 255, 255, 0.5);
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: 'SF Mono', 'Fira Code', monospace;
+}
+
+.theme-glass .glass {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--glass-border);
+}
+
+.theme-glass.dark {
+  --background: 222 47% 8%;
+  --foreground: 213 31% 91%;
+  --card: 222 47% 11%;
+  --card-foreground: 213 31% 91%;
+  --popover: 222 47% 11%;
+  --popover-foreground: 213 31% 91%;
+  --primary: 217 91% 60%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 222 47% 15%;
+  --secondary-foreground: 213 31% 91%;
+  --muted: 222 47% 15%;
+  --muted-foreground: 215 20% 65%;
+  --accent: 222 47% 15%;
+  --accent-foreground: 217 91% 60%;
+  --destructive: 0 62% 30%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 222 47% 18%;
+  --input: 222 47% 18%;
+  --ring: 217 91% 60%;
+  --glass-bg: rgba(15, 20, 40, 0.7);
+  --glass-border: rgba(255, 255, 255, 0.08);
+}

package/src/themes/linear.css

@@ -0,0 +1,50 @@
+/* Blink UI — Linear theme (clean monochrome, sharp edges, Linear/Vercel-style) */
+
+
+:root,
+.theme-linear {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 3.9%;
+  --primary: 0 0% 9%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 9%;
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+  --ring: 0 0% 3.9%;
+  --radius: 0.375rem;
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+}
+
+.theme-linear.dark {
+  --background: 0 0% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: 0 0% 6%;
+  --card-foreground: 0 0% 98%;
+  --popover: 0 0% 6%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 0 0% 9%;
+  --secondary: 0 0% 14.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.9%;
+  --accent: 0 0% 14.9%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 14.9%;
+  --input: 0 0% 14.9%;
+  --ring: 0 0% 83.1%;
+}

package/src/themes/midnight.css

@@ -0,0 +1,56 @@
+/* Blink UI — Midnight theme (dark premium, neon accents, Raycast/Arc-style) */
+
+
+:root,
+.theme-midnight {
+  --background: 240 10% 4%;
+  --foreground: 0 0% 95%;
+  --card: 240 10% 6%;
+  --card-foreground: 0 0% 95%;
+  --popover: 240 10% 6%;
+  --popover-foreground: 0 0% 95%;
+  --primary: 263 90% 68%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 240 10% 10%;
+  --secondary-foreground: 0 0% 95%;
+  --muted: 240 10% 10%;
+  --muted-foreground: 240 5% 55%;
+  --accent: 263 90% 68%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 240 10% 13%;
+  --input: 240 10% 13%;
+  --ring: 263 90% 68%;
+  --radius: 0.5rem;
+  --neon: 263 90% 68%;
+  --neon-glow: 0 0 20px hsl(263 90% 68% / 0.4);
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+}
+
+.theme-midnight {
+  /* Force dark by default */
+  color-scheme: dark;
+}
+
+.theme-midnight.light {
+  --background: 240 10% 96%;
+  --foreground: 240 10% 4%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 4%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 4%;
+  --primary: 263 70% 50%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 240 10% 92%;
+  --secondary-foreground: 240 10% 4%;
+  --muted: 240 10% 92%;
+  --muted-foreground: 240 5% 45%;
+  --accent: 240 10% 92%;
+  --accent-foreground: 263 70% 50%;
+  --border: 240 10% 85%;
+  --input: 240 10% 85%;
+  --ring: 263 70% 50%;
+  --neon-glow: none;
+}

package/src/themes/minimal.css

@@ -0,0 +1,50 @@
+/* Blink UI — Minimal theme (light, airy, generous whitespace, Notion/Cal.com-style) */
+
+
+:root,
+.theme-minimal {
+  --background: 0 0% 99%;
+  --foreground: 20 14% 4%;
+  --card: 0 0% 100%;
+  --card-foreground: 20 14% 4%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 20 14% 4%;
+  --primary: 24 80% 52%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 30 20% 96%;
+  --secondary-foreground: 20 14% 4%;
+  --muted: 30 20% 95%;
+  --muted-foreground: 25 10% 45%;
+  --accent: 30 20% 95%;
+  --accent-foreground: 24 80% 52%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 30 14% 90%;
+  --input: 30 14% 90%;
+  --ring: 24 80% 52%;
+  --radius: 0.625rem;
+  --font-sans: 'Geist', 'Inter', system-ui, sans-serif;
+  --font-mono: 'Geist Mono', 'Fira Code', monospace;
+}
+
+.theme-minimal.dark {
+  --background: 20 14% 4%;
+  --foreground: 30 20% 95%;
+  --card: 20 14% 7%;
+  --card-foreground: 30 20% 95%;
+  --popover: 20 14% 7%;
+  --popover-foreground: 30 20% 95%;
+  --primary: 24 80% 58%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 20 14% 12%;
+  --secondary-foreground: 30 20% 95%;
+  --muted: 20 14% 12%;
+  --muted-foreground: 25 10% 55%;
+  --accent: 20 14% 12%;
+  --accent-foreground: 24 80% 58%;
+  --destructive: 0 62% 30%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 20 14% 15%;
+  --input: 20 14% 15%;
+  --ring: 24 80% 58%;
+}