authfyio-react 0.3.9

package/dist/ui/index.d.ts

@@ -0,0 +1,14 @@
+export * from './SignIn.js';
+export * from './SignUp.js';
+export * from './UserButton.js';
+export * from './UserProfile.js';
+export * from './UserAvatar.js';
+export * from './OrganizationSwitcher.js';
+export * from './CreateOrganization.js';
+export * from './OrganizationList.js';
+export * from './OrganizationProfile.js';
+export * from './PricingTable.js';
+export * from './CheckoutButton.js';
+export * from './Control.js';
+export * from './UnstyledButtons.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC"}

package/dist/ui/index.js

@@ -0,0 +1,13 @@
+export * from './SignIn.js';
+export * from './SignUp.js';
+export * from './UserButton.js';
+export * from './UserProfile.js';
+export * from './UserAvatar.js';
+export * from './OrganizationSwitcher.js';
+export * from './CreateOrganization.js';
+export * from './OrganizationList.js';
+export * from './OrganizationProfile.js';
+export * from './PricingTable.js';
+export * from './CheckoutButton.js';
+export * from './Control.js';
+export * from './UnstyledButtons.js';

package/dist/ui/styles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Hand-authored CSS for the prebuilt auth components. We inject a single
+ * `<style>` tag on first render so the components look consistent without
+ * assuming Tailwind / any host framework. Variables make it trivial to
+ * override branding from the host — see `<AuthfyioProvider appearance>`.
+ */
+export declare const AF_STYLE_ID = "af-auth-ui-styles";
+export declare const COMPONENT_CSS = "\n.af-card {\n  box-sizing: border-box;\n  width: 100%;\n  max-width: 400px;\n  margin: 0 auto;\n  padding: 32px 32px 28px;\n  background: #ffffff;\n  border: 1px solid rgba(17, 24, 39, 0.08);\n  border-radius: 16px;\n  box-shadow: 0 8px 32px -8px rgba(17, 24, 39, 0.08), 0 2px 6px -1px rgba(17, 24, 39, 0.04);\n  font-family: var(--af-font, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);\n  color: #111827;\n}\n.af-card * { box-sizing: border-box; }\n\n.af-brand {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 18px;\n}\n.af-brand-mark {\n  width: 26px;\n  height: 26px;\n  border-radius: 8px;\n  background: var(--af-primary-grad, linear-gradient(135deg, #4f3df0 0%, #5b5bd6 100%));\n}\n.af-brand-text { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }\n\n.af-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; }\n.af-subtitle { font-size: 13px; color: #6b7280; margin: 0 0 22px; line-height: 1.45; }\n\n.af-label { display: block; font-size: 12px; font-weight: 500; color: #6b7280; margin-bottom: 6px; }\n.af-input {\n  width: 100%;\n  height: 40px;\n  padding: 0 12px;\n  font-size: 14px;\n  background: #ffffff;\n  border: 1px solid rgba(17, 24, 39, 0.14);\n  border-radius: 10px;\n  outline: none;\n  transition: border-color 0.15s, box-shadow 0.15s;\n  color: #111827;\n  font-family: inherit;\n}\n.af-input:focus {\n  border-color: var(--af-primary, #4f3df0);\n  box-shadow: 0 0 0 3px rgba(79, 61, 240, 0.15);\n}\n.af-input::placeholder { color: #9ca3af; }\n\n.af-field + .af-field { margin-top: 14px; }\n\n.af-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  height: 40px;\n  padding: 0 16px;\n  font-size: 13.5px;\n  font-weight: 500;\n  font-family: inherit;\n  border-radius: 10px;\n  border: 1px solid transparent;\n  cursor: pointer;\n  transition: filter 0.12s, background-color 0.12s, border-color 0.12s;\n  text-decoration: none;\n}\n.af-btn:disabled { opacity: 0.55; cursor: not-allowed; }\n.af-btn-primary {\n  width: 100%;\n  background: var(--af-primary, #4f3df0);\n  color: #ffffff;\n  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.1);\n}\n.af-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }\n.af-btn-ghost {\n  background: #ffffff;\n  color: #111827;\n  border-color: rgba(17, 24, 39, 0.12);\n}\n.af-btn-ghost:hover:not(:disabled) { background: rgba(17, 24, 39, 0.03); }\n.af-btn-danger {\n  background: #ffffff;\n  color: #b91c1c;\n  border-color: rgba(185, 28, 28, 0.4);\n}\n.af-btn-danger:hover:not(:disabled) { background: rgba(185, 28, 28, 0.05); }\n\n.af-primary-row { margin-top: 18px; }\n\n.af-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #9ca3af; font-size: 11px; font-weight: 500; }\n.af-divider::before, .af-divider::after { content: ''; flex: 1; height: 1px; background: rgba(17, 24, 39, 0.08); }\n\n.af-social-grid { display: grid; gap: 8px; }\n.af-social-btn {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  justify-content: center;\n  height: 40px;\n  font-size: 13.5px;\n  border: 1px solid rgba(17, 24, 39, 0.12);\n  border-radius: 10px;\n  background: #ffffff;\n  color: #111827;\n  cursor: pointer;\n  text-decoration: none;\n  font-weight: 500;\n  transition: background 0.12s;\n  font-family: inherit;\n}\n.af-social-btn:hover { background: rgba(17, 24, 39, 0.03); }\n.af-social-icon { width: 16px; height: 16px; display: inline-block; }\n\n.af-link { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 13px; color: var(--af-primary, #4f3df0); cursor: pointer; text-decoration: none; }\n.af-link:hover { text-decoration: underline; }\n.af-footer { margin-top: 22px; text-align: center; font-size: 12.5px; color: #6b7280; }\n.af-footer a { color: var(--af-primary, #4f3df0); text-decoration: none; font-weight: 500; }\n.af-footer a:hover { text-decoration: underline; }\n\n.af-legal { margin-top: 18px; text-align: center; font-size: 11.5px; color: #9ca3af; line-height: 1.5; }\n.af-legal a { color: #6b7280; text-decoration: underline; text-underline-offset: 2px; }\n.af-legal a:hover { color: var(--af-primary, #4f3df0); }\n\n.af-powered { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(17,24,39,0.05); text-align: center; font-size: 10.5px; color: #9ca3af; }\n.af-powered a { color: #6b7280; text-decoration: none; font-weight: 500; }\n.af-powered a:hover { text-decoration: underline; }\n\n.af-label-hint { color: #9ca3af; font-weight: 400; }\n\n.af-error {\n  margin-top: 12px;\n  padding: 10px 12px;\n  font-size: 12.5px;\n  background: rgba(225, 29, 72, 0.06);\n  border: 1px solid rgba(225, 29, 72, 0.2);\n  border-radius: 8px;\n  color: #b91c1c;\n  line-height: 1.45;\n}\n.af-notice {\n  margin-top: 12px;\n  padding: 10px 12px;\n  font-size: 12.5px;\n  background: rgba(16, 185, 129, 0.08);\n  border: 1px solid rgba(16, 185, 129, 0.28);\n  border-radius: 8px;\n  color: #047857;\n  line-height: 1.45;\n}\n\n/* UserButton */\n.af-user-btn {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 10px 4px 4px;\n  font-family: inherit;\n  font-size: 12.5px;\n  font-weight: 500;\n  color: #111827;\n  background: #ffffff;\n  border: 1px solid rgba(17, 24, 39, 0.1);\n  border-radius: 999px;\n  cursor: pointer;\n  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);\n}\n.af-user-btn:hover { background: rgba(17, 24, 39, 0.03); }\n.af-avatar {\n  width: 28px; height: 28px;\n  border-radius: 999px;\n  background: rgba(17, 24, 39, 0.06);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10.5px;\n  font-weight: 600;\n  color: #4b5563;\n  overflow: hidden;\n  position: relative;\n}\n.af-avatar img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }\n.af-avatar-sm { width: 22px; height: 22px; font-size: 9px; }\n.af-avatar-lg { width: 56px; height: 56px; font-size: 14px; }\n\n.af-menu {\n  position: absolute;\n  right: 0;\n  top: calc(100% + 6px);\n  min-width: 240px;\n  background: #ffffff;\n  border: 1px solid rgba(17, 24, 39, 0.08);\n  border-radius: 12px;\n  box-shadow: 0 12px 32px -4px rgba(17, 24, 39, 0.14);\n  padding: 6px;\n  z-index: 30;\n}\n.af-menu-head {\n  display: flex; align-items: center; gap: 10px;\n  padding: 10px 10px 12px;\n  border-bottom: 1px solid rgba(17, 24, 39, 0.06);\n  margin-bottom: 4px;\n}\n.af-menu-head-name { font-size: 13px; font-weight: 500; color: #111827; line-height: 1.3; }\n.af-menu-head-email { font-size: 11.5px; color: #6b7280; }\n.af-menu-item {\n  display: block;\n  width: 100%;\n  padding: 8px 10px;\n  font-size: 12.5px;\n  color: #111827;\n  background: transparent;\n  border: 0;\n  border-radius: 7px;\n  text-align: left;\n  cursor: pointer;\n  text-decoration: none;\n  font-family: inherit;\n}\n.af-menu-item:hover { background: rgba(17, 24, 39, 0.04); }\n.af-menu-item-danger { color: #b91c1c; }\n.af-menu-item-danger:hover { background: rgba(225, 29, 72, 0.06); }\n.af-menu-sep { height: 1px; background: rgba(17, 24, 39, 0.06); margin: 4px 6px; }\n\n/* Sign-in tabs */\n.af-tabs { display: inline-flex; gap: 4px; padding: 3px; background: rgba(17,24,39,0.04); border-radius: 10px; margin-bottom: 18px; width: 100%; }\n.af-tab {\n  font-family: inherit;\n  flex: 1;\n  padding: 7px 10px;\n  font-size: 11.5px;\n  font-weight: 500;\n  color: #6b7280;\n  background: transparent;\n  border: 0;\n  border-radius: 7px;\n  cursor: pointer;\n  transition: background 0.12s, color 0.12s;\n}\n.af-tab:hover { color: #111827; }\n.af-tab.is-active { background: #ffffff; color: #111827; box-shadow: 0 1px 2px rgba(17,24,39,0.06); }\n\n/* UserProfile */\n.af-profile { display: grid; grid-template-columns: 200px 1fr; gap: 36px; }\n@media (max-width: 640px) { .af-profile { grid-template-columns: 1fr; } }\n.af-profile-nav { display: flex; flex-direction: column; gap: 2px; }\n.af-profile-nav-item {\n  text-align: left;\n  padding: 8px 10px;\n  border-radius: 8px;\n  font-size: 13px;\n  color: #6b7280;\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n  font-family: inherit;\n}\n.af-profile-nav-item.is-active { background: rgba(17, 24, 39, 0.05); color: #111827; font-weight: 500; }\n.af-profile-panel h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }\n.af-profile-panel p.af-sub { margin: 0 0 18px; font-size: 13px; color: #6b7280; }\n.af-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid rgba(17, 24, 39, 0.06); }\n.af-row:first-child { border-top: 0; padding-top: 0; }\n.af-row-key { font-size: 12.5px; color: #6b7280; }\n.af-row-val { font-size: 13px; color: #111827; }\n.af-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 500; }\n.af-pill-primary { color: #4f3df0; background: rgba(79, 61, 240, 0.1); }\n.af-pill-success { color: #047857; background: rgba(16, 185, 129, 0.1); }\n.af-pill-muted { color: #6b7280; background: rgba(17, 24, 39, 0.05); }\n";
+export declare function ensureStylesInjected(): void;
+//# sourceMappingURL=styles.d.ts.map

package/dist/ui/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,eAAO,MAAM,WAAW,sBAAsB,CAAC;AAE/C,eAAO,MAAM,aAAa,m5RAiRzB,CAAC;AAEF,wBAAgB,oBAAoB,SAOnC"}

package/dist/ui/styles.js

@@ -0,0 +1,291 @@
+/**
+ * Hand-authored CSS for the prebuilt auth components. We inject a single
+ * `<style>` tag on first render so the components look consistent without
+ * assuming Tailwind / any host framework. Variables make it trivial to
+ * override branding from the host — see `<AuthfyioProvider appearance>`.
+ */
+export const AF_STYLE_ID = 'af-auth-ui-styles';
+export const COMPONENT_CSS = `
+.af-card {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 32px 32px 28px;
+  background: #ffffff;
+  border: 1px solid rgba(17, 24, 39, 0.08);
+  border-radius: 16px;
+  box-shadow: 0 8px 32px -8px rgba(17, 24, 39, 0.08), 0 2px 6px -1px rgba(17, 24, 39, 0.04);
+  font-family: var(--af-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+  color: #111827;
+}
+.af-card * { box-sizing: border-box; }
+
+.af-brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 18px;
+}
+.af-brand-mark {
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  background: var(--af-primary-grad, linear-gradient(135deg, #4f3df0 0%, #5b5bd6 100%));
+}
+.af-brand-text { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
+
+.af-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; }
+.af-subtitle { font-size: 13px; color: #6b7280; margin: 0 0 22px; line-height: 1.45; }
+
+.af-label { display: block; font-size: 12px; font-weight: 500; color: #6b7280; margin-bottom: 6px; }
+.af-input {
+  width: 100%;
+  height: 40px;
+  padding: 0 12px;
+  font-size: 14px;
+  background: #ffffff;
+  border: 1px solid rgba(17, 24, 39, 0.14);
+  border-radius: 10px;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  color: #111827;
+  font-family: inherit;
+}
+.af-input:focus {
+  border-color: var(--af-primary, #4f3df0);
+  box-shadow: 0 0 0 3px rgba(79, 61, 240, 0.15);
+}
+.af-input::placeholder { color: #9ca3af; }
+
+.af-field + .af-field { margin-top: 14px; }
+
+.af-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 40px;
+  padding: 0 16px;
+  font-size: 13.5px;
+  font-weight: 500;
+  font-family: inherit;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: filter 0.12s, background-color 0.12s, border-color 0.12s;
+  text-decoration: none;
+}
+.af-btn:disabled { opacity: 0.55; cursor: not-allowed; }
+.af-btn-primary {
+  width: 100%;
+  background: var(--af-primary, #4f3df0);
+  color: #ffffff;
+  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.1);
+}
+.af-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
+.af-btn-ghost {
+  background: #ffffff;
+  color: #111827;
+  border-color: rgba(17, 24, 39, 0.12);
+}
+.af-btn-ghost:hover:not(:disabled) { background: rgba(17, 24, 39, 0.03); }
+.af-btn-danger {
+  background: #ffffff;
+  color: #b91c1c;
+  border-color: rgba(185, 28, 28, 0.4);
+}
+.af-btn-danger:hover:not(:disabled) { background: rgba(185, 28, 28, 0.05); }
+
+.af-primary-row { margin-top: 18px; }
+
+.af-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #9ca3af; font-size: 11px; font-weight: 500; }
+.af-divider::before, .af-divider::after { content: ''; flex: 1; height: 1px; background: rgba(17, 24, 39, 0.08); }
+
+.af-social-grid { display: grid; gap: 8px; }
+.af-social-btn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  justify-content: center;
+  height: 40px;
+  font-size: 13.5px;
+  border: 1px solid rgba(17, 24, 39, 0.12);
+  border-radius: 10px;
+  background: #ffffff;
+  color: #111827;
+  cursor: pointer;
+  text-decoration: none;
+  font-weight: 500;
+  transition: background 0.12s;
+  font-family: inherit;
+}
+.af-social-btn:hover { background: rgba(17, 24, 39, 0.03); }
+.af-social-icon { width: 16px; height: 16px; display: inline-block; }
+
+.af-link { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 13px; color: var(--af-primary, #4f3df0); cursor: pointer; text-decoration: none; }
+.af-link:hover { text-decoration: underline; }
+.af-footer { margin-top: 22px; text-align: center; font-size: 12.5px; color: #6b7280; }
+.af-footer a { color: var(--af-primary, #4f3df0); text-decoration: none; font-weight: 500; }
+.af-footer a:hover { text-decoration: underline; }
+
+.af-legal { margin-top: 18px; text-align: center; font-size: 11.5px; color: #9ca3af; line-height: 1.5; }
+.af-legal a { color: #6b7280; text-decoration: underline; text-underline-offset: 2px; }
+.af-legal a:hover { color: var(--af-primary, #4f3df0); }
+
+.af-powered { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(17,24,39,0.05); text-align: center; font-size: 10.5px; color: #9ca3af; }
+.af-powered a { color: #6b7280; text-decoration: none; font-weight: 500; }
+.af-powered a:hover { text-decoration: underline; }
+
+.af-label-hint { color: #9ca3af; font-weight: 400; }
+
+.af-error {
+  margin-top: 12px;
+  padding: 10px 12px;
+  font-size: 12.5px;
+  background: rgba(225, 29, 72, 0.06);
+  border: 1px solid rgba(225, 29, 72, 0.2);
+  border-radius: 8px;
+  color: #b91c1c;
+  line-height: 1.45;
+}
+.af-notice {
+  margin-top: 12px;
+  padding: 10px 12px;
+  font-size: 12.5px;
+  background: rgba(16, 185, 129, 0.08);
+  border: 1px solid rgba(16, 185, 129, 0.28);
+  border-radius: 8px;
+  color: #047857;
+  line-height: 1.45;
+}
+
+/* UserButton */
+.af-user-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 10px 4px 4px;
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 500;
+  color: #111827;
+  background: #ffffff;
+  border: 1px solid rgba(17, 24, 39, 0.1);
+  border-radius: 999px;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
+}
+.af-user-btn:hover { background: rgba(17, 24, 39, 0.03); }
+.af-avatar {
+  width: 28px; height: 28px;
+  border-radius: 999px;
+  background: rgba(17, 24, 39, 0.06);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10.5px;
+  font-weight: 600;
+  color: #4b5563;
+  overflow: hidden;
+  position: relative;
+}
+.af-avatar img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
+.af-avatar-sm { width: 22px; height: 22px; font-size: 9px; }
+.af-avatar-lg { width: 56px; height: 56px; font-size: 14px; }
+
+.af-menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 6px);
+  min-width: 240px;
+  background: #ffffff;
+  border: 1px solid rgba(17, 24, 39, 0.08);
+  border-radius: 12px;
+  box-shadow: 0 12px 32px -4px rgba(17, 24, 39, 0.14);
+  padding: 6px;
+  z-index: 30;
+}
+.af-menu-head {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 10px 12px;
+  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
+  margin-bottom: 4px;
+}
+.af-menu-head-name { font-size: 13px; font-weight: 500; color: #111827; line-height: 1.3; }
+.af-menu-head-email { font-size: 11.5px; color: #6b7280; }
+.af-menu-item {
+  display: block;
+  width: 100%;
+  padding: 8px 10px;
+  font-size: 12.5px;
+  color: #111827;
+  background: transparent;
+  border: 0;
+  border-radius: 7px;
+  text-align: left;
+  cursor: pointer;
+  text-decoration: none;
+  font-family: inherit;
+}
+.af-menu-item:hover { background: rgba(17, 24, 39, 0.04); }
+.af-menu-item-danger { color: #b91c1c; }
+.af-menu-item-danger:hover { background: rgba(225, 29, 72, 0.06); }
+.af-menu-sep { height: 1px; background: rgba(17, 24, 39, 0.06); margin: 4px 6px; }
+
+/* Sign-in tabs */
+.af-tabs { display: inline-flex; gap: 4px; padding: 3px; background: rgba(17,24,39,0.04); border-radius: 10px; margin-bottom: 18px; width: 100%; }
+.af-tab {
+  font-family: inherit;
+  flex: 1;
+  padding: 7px 10px;
+  font-size: 11.5px;
+  font-weight: 500;
+  color: #6b7280;
+  background: transparent;
+  border: 0;
+  border-radius: 7px;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+}
+.af-tab:hover { color: #111827; }
+.af-tab.is-active { background: #ffffff; color: #111827; box-shadow: 0 1px 2px rgba(17,24,39,0.06); }
+
+/* UserProfile */
+.af-profile { display: grid; grid-template-columns: 200px 1fr; gap: 36px; }
+@media (max-width: 640px) { .af-profile { grid-template-columns: 1fr; } }
+.af-profile-nav { display: flex; flex-direction: column; gap: 2px; }
+.af-profile-nav-item {
+  text-align: left;
+  padding: 8px 10px;
+  border-radius: 8px;
+  font-size: 13px;
+  color: #6b7280;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+}
+.af-profile-nav-item.is-active { background: rgba(17, 24, 39, 0.05); color: #111827; font-weight: 500; }
+.af-profile-panel h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
+.af-profile-panel p.af-sub { margin: 0 0 18px; font-size: 13px; color: #6b7280; }
+.af-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid rgba(17, 24, 39, 0.06); }
+.af-row:first-child { border-top: 0; padding-top: 0; }
+.af-row-key { font-size: 12.5px; color: #6b7280; }
+.af-row-val { font-size: 13px; color: #111827; }
+.af-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 500; }
+.af-pill-primary { color: #4f3df0; background: rgba(79, 61, 240, 0.1); }
+.af-pill-success { color: #047857; background: rgba(16, 185, 129, 0.1); }
+.af-pill-muted { color: #6b7280; background: rgba(17, 24, 39, 0.05); }
+`;
+export function ensureStylesInjected() {
+    if (typeof document === 'undefined')
+        return;
+    if (document.getElementById(AF_STYLE_ID))
+        return;
+    const style = document.createElement('style');
+    style.id = AF_STYLE_ID;
+    style.textContent = COMPONENT_CSS;
+    document.head.appendChild(style);
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "authfyio-react",
+  "version": "0.3.9",
+  "description": "React provider, hooks, and components for Authfyio. Includes <SignedIn>, <SignedOut>, <Protect>, useAuth, useUser, useOrganization, and more.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc -p tsconfig.build.json --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "latest"
+  },
+  "keywords": [
+    "authfyio",
+    "auth",
+    "authentication",
+    "react",
+    "hooks",
+    "provider"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://authfyio.com/docs",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/authfyio/authfyio.git"
+  }
+}