@seamless-auth/vue 0.0.0-stage → 0.2.0

package/dist/seamless-auth.css

@@ -0,0 +1,260 @@
+/*
+ * Styles for the bundled Seamless Auth screens of the Angular and Vue bindings
+ * (and those that follow). One file, so the screens look the same in every
+ * framework. Theme them with the same --seamless-* custom properties the React
+ * screens read, or override the .sa-* classes. Every rule is scoped under
+ * .sa-auth.
+ */
+
+.sa-auth {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--seamless-text, white);
+  font-family: inherit;
+}
+
+.sa-auth *,
+.sa-auth *::before,
+.sa-auth *::after {
+  box-sizing: border-box;
+}
+
+.sa-auth .sa-card {
+  background-color: var(--seamless-surface, #1f2937);
+  padding: 2rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px var(--seamless-shadow, rgba(0, 0, 0, 0.1));
+  width: 100%;
+  max-width: 28rem;
+}
+
+.sa-auth .sa-heading {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin: 0 0 1.5rem;
+  text-align: center;
+  color: var(--seamless-text, white);
+}
+
+.sa-auth .sa-subtitle,
+.sa-auth .sa-description {
+  color: var(--seamless-text-muted, #d1d5db);
+  text-align: center;
+  margin: 0 0 1rem;
+}
+
+.sa-auth .sa-input-group {
+  margin-bottom: 1rem;
+}
+
+.sa-auth .sa-label {
+  display: block;
+  color: var(--seamless-text-muted, #d1d5db);
+}
+
+.sa-auth .sa-input {
+  width: 100%;
+  padding: 0.5rem;
+  color: inherit;
+  background-color: var(--seamless-surface-raised, #4b5563);
+  border: 1px solid var(--seamless-border, #d1d5db);
+  border-radius: 0.375rem;
+  margin-top: 0.25rem;
+}
+
+.sa-auth .sa-input:focus,
+.sa-auth .sa-otp-input:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--seamless-accent, #3b82f6);
+}
+
+.sa-auth .sa-helper-text {
+  font-size: 0.75rem;
+  color: var(--seamless-text-muted, #9ca3af);
+  margin-top: 0.5rem;
+}
+
+.sa-auth .sa-error {
+  color: var(--seamless-danger, #f87171);
+  font-size: 0.875rem;
+}
+
+.sa-auth .sa-success {
+  color: var(--seamless-success, #68d391);
+  font-size: 0.875rem;
+}
+
+.sa-auth .sa-button {
+  width: 100%;
+  border: none;
+  background-color: var(--seamless-accent, #2563eb);
+  color: var(--seamless-accent-contrast, white);
+  padding: 0.5rem;
+  border-radius: 0.375rem;
+  transition:
+    background-color 0.3s,
+    opacity 0.3s;
+  cursor: pointer;
+  margin-top: 1rem;
+  font: inherit;
+}
+
+.sa-auth .sa-button:hover:not(:disabled) {
+  background-color: var(--seamless-accent-hover, #1d4ed8);
+}
+
+.sa-auth .sa-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.sa-auth .sa-secondary {
+  width: 100%;
+  margin-top: 0.75rem;
+  padding: 0.5rem;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--seamless-text, white);
+  border: 1px solid var(--seamless-border, #d1d5db);
+  cursor: pointer;
+  font: inherit;
+}
+
+.sa-auth .sa-submit-hint {
+  font-size: 0.75rem;
+  color: var(--seamless-text-muted, #9ca3af);
+  margin-top: 0.5rem;
+  text-align: center;
+}
+
+.sa-auth .sa-link {
+  margin-top: 1rem;
+  width: 100%;
+  font-size: 0.875rem;
+  color: var(--seamless-accent-soft, #60a5fa);
+  text-align: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.sa-auth .sa-link:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.sa-auth .sa-fallback {
+  margin-top: 18px;
+  padding: 18px;
+  border-radius: 12px;
+  background: var(--seamless-surface-raised, rgba(255, 255, 255, 0.04));
+  border: 1px solid var(--seamless-border, rgba(255, 255, 255, 0.08));
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.sa-auth .sa-fallback-header {
+  font-weight: 600;
+}
+
+.sa-auth .sa-fallback-description {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--seamless-text-muted, #9ca3af);
+}
+
+.sa-auth .sa-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 1rem;
+}
+
+.sa-auth .sa-action {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  width: 100%;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: var(--seamless-surface, rgba(255, 255, 255, 0.02));
+  border: 1px solid var(--seamless-border, rgba(255, 255, 255, 0.12));
+  color: var(--seamless-text, white);
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+}
+
+.sa-auth .sa-action:hover {
+  border-color: var(--seamless-accent, #3b82f6);
+}
+
+.sa-auth .sa-action-title {
+  font-weight: 600;
+}
+
+.sa-auth .sa-action-subtext {
+  font-size: 0.8rem;
+  color: var(--seamless-text-muted, #9ca3af);
+}
+
+.sa-auth .sa-otp {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+  margin: 0.75rem 0;
+}
+
+.sa-auth .sa-otp-input {
+  width: 2.75rem;
+  height: 3rem;
+  text-align: center;
+  font-size: 1.25rem;
+  color: inherit;
+  background-color: var(--seamless-surface-raised, #4b5563);
+  border: 1px solid var(--seamless-border, #d1d5db);
+  border-radius: 0.375rem;
+}
+
+.sa-auth .sa-timer {
+  font-size: 0.75rem;
+  color: var(--seamless-warning, #facc15);
+}
+
+.sa-auth .sa-identifier {
+  margin: 0.75rem auto;
+  padding: 0.25rem 0.75rem;
+  width: fit-content;
+  border-radius: 999px;
+  background: var(--seamless-surface-raised, #4b5563);
+}
+
+.sa-auth .sa-center {
+  text-align: center;
+}
+
+.sa-auth .sa-spinner {
+  width: 2rem;
+  height: 2rem;
+  margin: 1rem auto;
+  border: 3px solid var(--seamless-border, rgba(255, 255, 255, 0.2));
+  border-top-color: var(--seamless-accent, #3b82f6);
+  border-radius: 50%;
+  animation: sa-spin 0.9s linear infinite;
+}
+
+@keyframes sa-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sa-auth .sa-spinner {
+    animation: none;
+  }
+}

package/package.json

@@ -1,6 +1,71 @@
 {
   "name": "@seamless-auth/vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Vue bindings for Seamless Auth: a plugin and composable for session state, route guards, and optional sign-in screens.",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./router": {
+      "types": "./dist/router/index.d.ts",
+      "import": "./dist/router.js"
+    },
+    "./seamless-auth.css": "./dist/seamless-auth.css"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=22",
+    "npm": ">=9.0.0 <13.0.0"
+  },
+  "scripts": {
+    "build": "node ../../scripts/clean-dist.mjs && rollup -c && tsc-alias -p tsconfig.build.json && node ../../scripts/check-vue-dist.mjs",
+    "typecheck": "tsc --noEmit -p tsconfig.dev.json",
+    "check-npm-build": "npm pack --dry-run"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fells-code/seamless-auth-react.git",
+    "directory": "packages/vue"
+  },
+  "author": "Fells Code, LLC",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/fells-code/seamless-auth-react/issues"
+  },
+  "homepage": "https://github.com/fells-code/seamless-auth-react/tree/main/packages/vue#readme",
+  "keywords": [
+    "vue",
+    "authentication",
+    "passkeys",
+    "webauthn",
+    "seamless-auth"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/",
+    "provenance": true
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "vue-router": "^4.4.0 || ^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vue-router": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@seamless-auth/client": "^0.6.0"
+  },
+  "sideEffects": [
+    "*.css"
+  ]
+}