@usequota/nextjs 0.1.0

package/dist/styles.css

@@ -0,0 +1,439 @@
+/**
+ * @usequota/nextjs - Base component styles
+ *
+ * Uses CSS custom properties for easy theming.
+ * Override these variables in your app to customize the look.
+ */
+
+/* Theme variables with sensible defaults */
+:root {
+  /* Primary palette - warm coral accent for a distinctive feel */
+  --quota-primary: #e85d4c;
+  --quota-primary-hover: #d14a3a;
+  --quota-primary-active: #bc3f30;
+
+  /* Neutral palette - warm grays for a softer appearance */
+  --quota-background: #faf9f7;
+  --quota-surface: #ffffff;
+  --quota-surface-elevated: #ffffff;
+  --quota-border: #e8e4df;
+  --quota-border-hover: #d4cfc8;
+
+  /* Text colors */
+  --quota-text: #2d2a26;
+  --quota-text-secondary: #6b6560;
+  --quota-text-muted: #9c9690;
+  --quota-text-on-primary: #ffffff;
+
+  /* State colors */
+  --quota-success: #3d9970;
+  --quota-warning: #e5a040;
+  --quota-error: #dc4a4a;
+
+  /* Shadows - subtle and warm */
+  --quota-shadow-sm: 0 1px 2px rgba(45, 42, 38, 0.05);
+  --quota-shadow-md: 0 4px 12px rgba(45, 42, 38, 0.08);
+  --quota-shadow-lg: 0 8px 24px rgba(45, 42, 38, 0.12);
+
+  /* Typography */
+  --quota-font-family:
+    "DM Sans", "Outfit", system-ui, -apple-system, sans-serif;
+  --quota-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
+
+  /* Spacing and sizing */
+  --quota-radius-sm: 6px;
+  --quota-radius-md: 10px;
+  --quota-radius-lg: 14px;
+  --quota-radius-full: 9999px;
+
+  /* Transitions */
+  --quota-transition-fast: 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
+  --quota-transition-normal: 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
+  --quota-transition-slow: 320ms cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+/* Dark mode variables */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --quota-primary: #f07563;
+    --quota-primary-hover: #ff8a7a;
+    --quota-primary-active: #e85d4c;
+
+    --quota-background: #1a1816;
+    --quota-surface: #242120;
+    --quota-surface-elevated: #2e2a28;
+    --quota-border: #3d3836;
+    --quota-border-hover: #524b48;
+
+    --quota-text: #f5f3f0;
+    --quota-text-secondary: #b8b3ad;
+    --quota-text-muted: #7a7570;
+    --quota-text-on-primary: #1a1816;
+
+    --quota-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+    --quota-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
+    --quota-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
+  }
+}
+
+/* Base button styles */
+.quota-button {
+  font-family: var(--quota-font-family);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  padding: 10px 18px;
+  border-radius: var(--quota-radius-md);
+  border: 1px solid transparent;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    background-color var(--quota-transition-fast),
+    border-color var(--quota-transition-fast),
+    box-shadow var(--quota-transition-fast),
+    transform var(--quota-transition-fast);
+  position: relative;
+  overflow: hidden;
+}
+
+.quota-button:focus-visible {
+  outline: 2px solid var(--quota-primary);
+  outline-offset: 2px;
+}
+
+.quota-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Primary button variant */
+.quota-button--primary {
+  background-color: var(--quota-primary);
+  color: var(--quota-text-on-primary);
+  border-color: var(--quota-primary);
+  box-shadow: var(--quota-shadow-sm);
+}
+
+.quota-button--primary:hover:not(:disabled) {
+  background-color: var(--quota-primary-hover);
+  border-color: var(--quota-primary-hover);
+  box-shadow: var(--quota-shadow-md);
+  transform: translateY(-1px);
+}
+
+.quota-button--primary:active:not(:disabled) {
+  background-color: var(--quota-primary-active);
+  border-color: var(--quota-primary-active);
+  box-shadow: var(--quota-shadow-sm);
+  transform: translateY(0);
+}
+
+/* Secondary button variant */
+.quota-button--secondary {
+  background-color: var(--quota-surface);
+  color: var(--quota-text);
+  border-color: var(--quota-border);
+  box-shadow: var(--quota-shadow-sm);
+}
+
+.quota-button--secondary:hover:not(:disabled) {
+  background-color: var(--quota-surface-elevated);
+  border-color: var(--quota-border-hover);
+  box-shadow: var(--quota-shadow-md);
+  transform: translateY(-1px);
+}
+
+.quota-button--secondary:active:not(:disabled) {
+  background-color: var(--quota-surface);
+  border-color: var(--quota-border);
+  box-shadow: var(--quota-shadow-sm);
+  transform: translateY(0);
+}
+
+/* Ghost button variant */
+.quota-button--ghost {
+  background-color: transparent;
+  color: var(--quota-text);
+  border-color: transparent;
+}
+
+.quota-button--ghost:hover:not(:disabled) {
+  background-color: var(--quota-border);
+}
+
+.quota-button--ghost:active:not(:disabled) {
+  background-color: var(--quota-border-hover);
+}
+
+/* Loading spinner animation */
+@keyframes quota-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.quota-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: quota-spin 0.8s linear infinite;
+}
+
+/* Balance display */
+.quota-balance {
+  font-family: var(--quota-font-family);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background-color: var(--quota-surface);
+  border: 1px solid var(--quota-border);
+  border-radius: var(--quota-radius-md);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--quota-text);
+  box-shadow: var(--quota-shadow-sm);
+}
+
+.quota-balance__icon {
+  width: 16px;
+  height: 16px;
+  color: var(--quota-primary);
+  flex-shrink: 0;
+}
+
+.quota-balance__value {
+  font-variant-numeric: tabular-nums;
+  font-family: var(--quota-font-mono);
+  font-size: 13px;
+  letter-spacing: -0.02em;
+}
+
+.quota-balance--loading .quota-balance__value {
+  color: var(--quota-text-muted);
+}
+
+.quota-balance__error {
+  color: var(--quota-error);
+  font-size: 12px;
+}
+
+/* User menu dropdown */
+.quota-user-menu {
+  position: relative;
+  display: inline-block;
+  font-family: var(--quota-font-family);
+}
+
+.quota-user-menu__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 12px;
+  background-color: var(--quota-surface);
+  border: 1px solid var(--quota-border);
+  border-radius: var(--quota-radius-full);
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--quota-text);
+  transition:
+    border-color var(--quota-transition-fast),
+    box-shadow var(--quota-transition-fast);
+  box-shadow: var(--quota-shadow-sm);
+}
+
+.quota-user-menu__trigger:hover {
+  border-color: var(--quota-border-hover);
+  box-shadow: var(--quota-shadow-md);
+}
+
+.quota-user-menu__trigger:focus-visible {
+  outline: 2px solid var(--quota-primary);
+  outline-offset: 2px;
+}
+
+.quota-user-menu__avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--quota-primary) 0%, #b44d3f 100%);
+  color: var(--quota-text-on-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+.quota-user-menu__email {
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.quota-user-menu__chevron {
+  width: 16px;
+  height: 16px;
+  color: var(--quota-text-muted);
+  transition: transform var(--quota-transition-fast);
+  flex-shrink: 0;
+}
+
+.quota-user-menu__trigger[aria-expanded="true"] .quota-user-menu__chevron {
+  transform: rotate(180deg);
+}
+
+.quota-user-menu__dropdown {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 220px;
+  background-color: var(--quota-surface);
+  border: 1px solid var(--quota-border);
+  border-radius: var(--quota-radius-lg);
+  box-shadow: var(--quota-shadow-lg);
+  padding: 6px;
+  z-index: 1000;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-8px) scale(0.96);
+  transform-origin: top right;
+  transition:
+    opacity var(--quota-transition-normal),
+    visibility var(--quota-transition-normal),
+    transform var(--quota-transition-normal);
+}
+
+.quota-user-menu__dropdown--open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0) scale(1);
+}
+
+.quota-user-menu__section {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--quota-border);
+}
+
+.quota-user-menu__section:last-child {
+  border-bottom: none;
+}
+
+.quota-user-menu__label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--quota-text-muted);
+  margin-bottom: 4px;
+}
+
+.quota-user-menu__balance-value {
+  font-family: var(--quota-font-mono);
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--quota-text);
+  letter-spacing: -0.02em;
+}
+
+.quota-user-menu__balance-dollars {
+  font-size: 12px;
+  color: var(--quota-text-secondary);
+  margin-top: 2px;
+}
+
+.quota-user-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 12px;
+  margin: 2px 0;
+  background: none;
+  border: none;
+  border-radius: var(--quota-radius-sm);
+  font-family: var(--quota-font-family);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--quota-text);
+  cursor: pointer;
+  text-align: left;
+  transition: background-color var(--quota-transition-fast);
+}
+
+.quota-user-menu__item:hover {
+  background-color: var(--quota-border);
+}
+
+.quota-user-menu__item:focus-visible {
+  outline: 2px solid var(--quota-primary);
+  outline-offset: -2px;
+}
+
+.quota-user-menu__item--danger {
+  color: var(--quota-error);
+}
+
+.quota-user-menu__item--danger:hover {
+  background-color: rgba(220, 74, 74, 0.1);
+}
+
+.quota-user-menu__item-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+/* Pulse animation for loading states */
+@keyframes quota-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.quota-loading-pulse {
+  animation: quota-pulse 1.5s ease-in-out infinite;
+}
+
+/* Screen reader only utility */
+.quota-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Respect reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@usequota/nextjs",
+  "version": "0.1.0",
+  "description": "Next.js SDK for Quota — AI credit billing middleware, hooks, and components",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/craigdossantos/quota",
+    "directory": "packages/quota-nextjs"
+  },
+  "homepage": "https://usequota.app/docs/nextjs-sdk",
+  "keywords": [
+    "quota",
+    "ai",
+    "billing",
+    "credits",
+    "nextjs",
+    "react",
+    "middleware",
+    "oauth"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.mjs",
+      "require": "./dist/server.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts src/server.ts --format cjs,esm --dts && cp src/components/styles.css dist/styles.css",
+    "test": "vitest",
+    "test:run": "vitest run"
+  },
+  "peerDependencies": {
+    "next": ">=13.0.0",
+    "react": ">=18.0.0"
+  },
+  "dependencies": {
+    "@usequota/types": "^0.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^18.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "jsdom": "^25.0.0",
+    "next": "^14.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.7.0",
+    "vitest": "^2.1.8"
+  }
+}