@usethrottle/auth 0.1.2 → 0.2.0

package/dist/react/index.js

@@ -1,131 +1,24 @@
-import "../chunk-ZMNCURDE.js";
+"use client";
 import {
-  ThrottleAuthProvider,
-  useAuth,
-  useAuthContext
-} from "../chunk-5GLLPF6L.js";
+  useAddresses,
+  useCustomer,
+  useInvoice,
+  useInvoices,
+  useOrder,
+  useOrders,
+  useSavedCards,
+  useSubscriptions
+} from "../chunk-HGBAIM6B.js";
 import {
   ThrottleAuthError,
+  ThrottleAuthProvider,
   createAccount,
   createThrottleAuth,
   localStorageAdapter,
-  memoryStorage
-} from "../chunk-SOPTBXF3.js";
-
-// src/react/hooks.ts
-import { useCallback, useEffect, useRef, useState } from "react";
-function asError(err) {
-  if (err instanceof ThrottleAuthError) return err;
-  const anyErr = err;
-  return new ThrottleAuthError({
-    code: anyErr?.code ?? "request_failed",
-    message: anyErr?.message ?? String(err),
-    statusCode: anyErr?.statusCode ?? 0
-  });
-}
-function useResource(empty, load, deps) {
-  const { status, emailVerified } = useAuth();
-  const [data, setData] = useState(empty);
-  const [isLoading, setIsLoading] = useState(status === "loading");
-  const [error, setError] = useState(null);
-  const gen = useRef(0);
-  const alive = useRef(true);
-  useEffect(() => {
-    alive.current = true;
-    return () => {
-      alive.current = false;
-      gen.current++;
-    };
-  }, []);
-  const refetch = useCallback(async () => {
-    const mine = ++gen.current;
-    setIsLoading(true);
-    try {
-      const next = await load();
-      if (!alive.current || gen.current !== mine) return;
-      setData(next);
-      setError(null);
-    } catch (err) {
-      if (!alive.current || gen.current !== mine) return;
-      setError(asError(err));
-    } finally {
-      if (alive.current && gen.current === mine) setIsLoading(false);
-    }
-  }, deps);
-  useEffect(() => {
-    if (status !== "authenticated") {
-      gen.current++;
-      setData(empty);
-      setError(null);
-      setIsLoading(status === "loading");
-      return;
-    }
-    void refetch();
-  }, [status, emailVerified, refetch]);
-  return { data, isLoading, error, refetch };
-}
-function useCustomer() {
-  const { account } = useAuth();
-  const res = useResource(null, () => account.getProfile(), [account]);
-  const update = useCallback(async (patch) => {
-    await account.updateProfile(patch);
-    await res.refetch();
-  }, [account, res]);
-  return { ...res, update };
-}
-function useAddresses() {
-  const { account } = useAuth();
-  const res = useResource([], () => account.listAddresses(), [account]);
-  const after = async (p) => {
-    await p;
-    await res.refetch();
-  };
-  return {
-    ...res,
-    create: (input) => after(account.createAddress(input)),
-    update: (id, patch) => after(account.updateAddress(id, patch)),
-    remove: (id) => after(account.deleteAddress(id))
-  };
-}
-function useSavedCards() {
-  const { account } = useAuth();
-  const res = useResource([], () => account.listPaymentMethods(), [account]);
-  const after = async (p) => {
-    await p;
-    await res.refetch();
-  };
-  return {
-    ...res,
-    setDefault: (id) => after(account.setDefaultPaymentMethod(id)),
-    remove: (id) => after(account.deletePaymentMethod(id))
-  };
-}
-function useOrders(page) {
-  const { account } = useAuth();
-  return useResource([], () => account.listOrders(page), [account, page?.cursor, page?.limit]);
-}
-function useInvoices(page) {
-  const { account } = useAuth();
-  return useResource([], () => account.listInvoices(page), [account, page?.cursor, page?.limit]);
-}
-function useSubscriptions(page) {
-  const { account } = useAuth();
-  const res = useResource(
-    [],
-    () => account.listSubscriptions(page),
-    [account, page?.cursor, page?.limit]
-  );
-  const after = async (p) => {
-    await p;
-    await res.refetch();
-  };
-  return {
-    ...res,
-    cancel: (id, opts) => after(account.cancelSubscription(id, opts)),
-    pause: (id) => after(account.pauseSubscription(id)),
-    resume: (id) => after(account.resumeSubscription(id))
-  };
-}
+  memoryStorage,
+  useAuth,
+  useAuthContext
+} from "../chunk-SZ427BQ3.js";
 export {
   ThrottleAuthError,
   ThrottleAuthProvider,
@@ -137,7 +30,9 @@ export {
   useAuth,
   useAuthContext,
   useCustomer,
+  useInvoice,
   useInvoices,
+  useOrder,
   useOrders,
   useSavedCards,
   useSubscriptions

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/hooks.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { ThrottleAuthError } from '../errors';\nimport type { Address, AddressInput, Customer, Invoice, Order, PaymentMethod, ProfilePatch, Subscription } from '../types';\nimport type { Page } from '../account';\nimport { useAuth } from './context';\n\nexport interface Resource<T> {\n  data: T;\n  isLoading: boolean;\n  error: ThrottleAuthError | null;\n  refetch(): Promise<void>;\n}\n\nfunction asError(err: unknown): ThrottleAuthError {\n  if (err instanceof ThrottleAuthError) return err;\n  const anyErr = err as any;\n  return new ThrottleAuthError({\n    code: anyErr?.code ?? 'request_failed',\n    message: anyErr?.message ?? String(err),\n    statusCode: anyErr?.statusCode ?? 0,\n  });\n}\n\n/**\n * One fetch-on-auth-change primitive behind every resource hook. `emailVerified`\n * is a dependency on purpose: verifying lifts the claim cutoff, and lists that\n * were legitimately empty a moment ago are not empty any more.\n */\nfunction useResource<T>(empty: T, load: () => Promise<T>, deps: unknown[]): Resource<T> {\n  const { status, emailVerified } = useAuth();\n  const [data, setData] = useState<T>(empty);\n  const [isLoading, setIsLoading] = useState(status === 'loading');\n  const [error, setError] = useState<ThrottleAuthError | null>(null);\n  const gen = useRef(0);\n  const alive = useRef(true);\n\n  useEffect(() => {\n    // Set on mount, not only cleared on unmount: React StrictMode mounts,\n    // unmounts and remounts in development, and a ref that is only ever set\n    // to false would silently discard every response for the rest of the\n    // component's life.\n    alive.current = true;\n    return () => { alive.current = false; gen.current++; };\n  }, []);\n\n  const refetch = useCallback(async () => {\n    const mine = ++gen.current;\n    setIsLoading(true);\n    try {\n      const next = await load();\n      if (!alive.current || gen.current !== mine) return;\n      setData(next);\n      setError(null);\n    } catch (err) {\n      if (!alive.current || gen.current !== mine) return;\n      setError(asError(err));\n    } finally {\n      if (alive.current && gen.current === mine) setIsLoading(false);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n\n  useEffect(() => {\n    if (status !== 'authenticated') {\n      gen.current++;               // abandon anything in flight\n      setData(empty);\n      setError(null);\n      setIsLoading(status === 'loading');\n      return;\n    }\n    void refetch();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [status, emailVerified, refetch]);\n\n  return { data, isLoading, error, refetch };\n}\n\nexport function useCustomer(): Resource<Customer | null> & { update(patch: ProfilePatch): Promise<void> } {\n  const { account } = useAuth();\n  const res = useResource<Customer | null>(null, () => account.getProfile(), [account]);\n  const update = useCallback(async (patch: ProfilePatch) => {\n    await account.updateProfile(patch);\n    await res.refetch();\n  }, [account, res]);\n  return { ...res, update };\n}\n\nexport function useAddresses(): Resource<Address[]> & {\n  create(input: AddressInput): Promise<void>;\n  update(id: string, patch: Partial<AddressInput>): Promise<void>;\n  remove(id: string): Promise<void>;\n} {\n  const { account } = useAuth();\n  const res = useResource<Address[]>([], () => account.listAddresses(), [account]);\n  const after = async (p: Promise<unknown>) => { await p; await res.refetch(); };\n  return {\n    ...res,\n    create: (input) => after(account.createAddress(input)),\n    update: (id, patch) => after(account.updateAddress(id, patch)),\n    remove: (id) => after(account.deleteAddress(id)),\n  };\n}\n\nexport function useSavedCards(): Resource<PaymentMethod[]> & {\n  setDefault(id: string): Promise<void>;\n  remove(id: string): Promise<void>;\n} {\n  const { account } = useAuth();\n  const res = useResource<PaymentMethod[]>([], () => account.listPaymentMethods(), [account]);\n  const after = async (p: Promise<unknown>) => { await p; await res.refetch(); };\n  return {\n    ...res,\n    setDefault: (id) => after(account.setDefaultPaymentMethod(id)),\n    remove: (id) => after(account.deletePaymentMethod(id)),\n  };\n}\n\nexport function useOrders(page?: Page): Resource<Order[]> {\n  const { account } = useAuth();\n  return useResource<Order[]>([], () => account.listOrders(page), [account, page?.cursor, page?.limit]);\n}\n\nexport function useInvoices(page?: Page): Resource<Invoice[]> {\n  const { account } = useAuth();\n  return useResource<Invoice[]>([], () => account.listInvoices(page), [account, page?.cursor, page?.limit]);\n}\n\nexport function useSubscriptions(page?: Page): Resource<Subscription[]> & {\n  cancel(id: string, opts?: { atPeriodEnd?: boolean }): Promise<void>;\n  pause(id: string): Promise<void>;\n  resume(id: string): Promise<void>;\n} {\n  const { account } = useAuth();\n  const res = useResource<Subscription[]>([], () => account.listSubscriptions(page),\n    [account, page?.cursor, page?.limit]);\n  const after = async (p: Promise<unknown>) => { await p; await res.refetch(); };\n  return {\n    ...res,\n    cancel: (id, opts) => after(account.cancelSubscription(id, opts)),\n    pause: (id) => after(account.pauseSubscription(id)),\n    resume: (id) => after(account.resumeSubscription(id)),\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/styles.css

@@ -0,0 +1,422 @@
+
+.throttle-root {
+  --throttle-color-primary: #18181b;
+  --throttle-color-primary-foreground: #ffffff;
+  --throttle-color-background: #ffffff;
+  --throttle-color-surface: #f8fafc;
+  --throttle-color-foreground: #0e1116;
+  --throttle-color-muted: #eceef2;
+  --throttle-color-muted-foreground: #5b6472;
+  --throttle-color-border: #e2e8f0;
+  --throttle-color-danger: #c2321f;
+  --throttle-color-danger-surface: #fef2f2;
+  --throttle-color-danger-border: #fecaca;
+  --throttle-color-success: #127a4a;
+  --throttle-color-success-surface: #ecfdf5;
+  --throttle-color-success-border: #a7f3d0;
+  --throttle-color-warning: #92400e;
+  --throttle-color-warning-surface: #fffbeb;
+  --throttle-color-warning-border: #fde68a;
+  --throttle-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --throttle-font-size: 16px;
+  --throttle-font-size-xs: 12px;
+  --throttle-font-size-sm: 14px;
+  --throttle-font-size-lg: 20px;
+  --throttle-font-size-xl: 24px;
+  --throttle-line-height: 1.5;
+  --throttle-line-height-tight: 1.25;
+  --throttle-radius: 12px;
+  --throttle-radius-sm: 8px;
+  --throttle-radius-full: 999px;
+  --throttle-border-width: 1px;
+  --throttle-spacing: 8px;
+  --throttle-space-1: 4px;
+  --throttle-space-2: var(--throttle-spacing);
+  --throttle-space-3: 12px;
+  --throttle-space-4: 16px;
+  --throttle-space-5: 24px;
+  --throttle-space-6: 32px;
+  --throttle-control-height: 48px;
+  --throttle-control-padding-x: 16px;
+  --throttle-shadow-card: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
+  --throttle-shadow-popover: 0 10px 24px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06);
+  --throttle-transition: 150ms cubic-bezier(.2,0,.2,1);
+  --throttle-z-modal: 2147483000;
+  --throttle-z-popover: 2147482000;
+  font-family: var(--throttle-font-family);
+  font-size: var(--throttle-font-size);
+  line-height: var(--throttle-line-height);
+  color: var(--throttle-color-foreground);
+  box-sizing: border-box;
+}
+.throttle-root *, .throttle-root *::before, .throttle-root *::after { box-sizing: inherit; }
+
+.throttle-root[data-throttle-theme="dark"] {
+  --throttle-color-primary: #e6edf3;
+  --throttle-color-primary-foreground: #0d1117;
+  --throttle-color-background: #0d1117;
+  --throttle-color-surface: #1c2129;
+  --throttle-color-foreground: #e6edf3;
+  --throttle-color-muted: #21262d;
+  --throttle-color-muted-foreground: #9aa4b2;
+  --throttle-color-border: #30363d;
+  --throttle-color-danger: #ff6b58;
+  --throttle-color-danger-surface: #2a1513;
+  --throttle-color-danger-border: #5c2b25;
+  --throttle-color-success: #45c08a;
+  --throttle-color-success-surface: #0f2419;
+  --throttle-color-success-border: #1f4d36;
+  --throttle-color-warning: #e0a53a;
+  --throttle-color-warning-surface: #2a2113;
+  --throttle-color-warning-border: #5c4a25;
+  --throttle-shadow-card: 0 1px 3px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);
+  --throttle-shadow-popover: 0 10px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);
+}
+@media (prefers-color-scheme: dark) {
+  .throttle-root[data-throttle-theme="auto"] {
+    --throttle-color-primary: #e6edf3;
+    --throttle-color-primary-foreground: #0d1117;
+    --throttle-color-background: #0d1117;
+    --throttle-color-surface: #1c2129;
+    --throttle-color-foreground: #e6edf3;
+    --throttle-color-muted: #21262d;
+    --throttle-color-muted-foreground: #9aa4b2;
+    --throttle-color-border: #30363d;
+    --throttle-color-danger: #ff6b58;
+    --throttle-color-danger-surface: #2a1513;
+    --throttle-color-danger-border: #5c2b25;
+    --throttle-color-success: #45c08a;
+    --throttle-color-success-surface: #0f2419;
+    --throttle-color-success-border: #1f4d36;
+    --throttle-color-warning: #e0a53a;
+    --throttle-color-warning-surface: #2a2113;
+    --throttle-color-warning-border: #5c4a25;
+    --throttle-shadow-card: 0 1px 3px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);
+    --throttle-shadow-popover: 0 10px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);
+  }
+}
+
+.throttle-card {
+  background: var(--throttle-color-background);
+  border: var(--throttle-border-width) solid var(--throttle-color-border);
+  border-radius: var(--throttle-radius);
+  box-shadow: var(--throttle-shadow-card);
+  padding: var(--throttle-space-5);
+  width: 100%;
+  max-width: 400px;
+  margin-inline: auto;
+}
+/* Inside a Modal the dialog already provides the surface — background, radius
+   and elevation. A card that draws its own on top is the "box inside a box":
+   two shadowed rounded rectangles nested, with the card's max-width stranding
+   it in the middle of a much wider dialog. */
+.throttle-card--bare { border: none; box-shadow: none; background: none; max-width: none; }
+.throttle-card__header { margin-bottom: var(--throttle-space-4); }
+.throttle-card__header--branded { text-align: center; }
+.throttle-card__logo { display: flex; justify-content: center; margin-bottom: var(--throttle-space-3); }
+.throttle-card__title { font-size: var(--throttle-font-size-xl); line-height: var(--throttle-line-height-tight); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
+.throttle-card__title--branded { font-size: var(--throttle-font-size-xl); }
+.throttle-card__description { color: var(--throttle-color-muted-foreground); margin: var(--throttle-space-1) 0 0; }
+.throttle-card__body { display: flex; flex-direction: column; gap: var(--throttle-space-3); }
+.throttle-card__footer { margin-top: var(--throttle-space-4); text-align: center; }
+.throttle-card__footer--ruled { border-top: var(--throttle-border-width) solid var(--throttle-color-border); padding-top: var(--throttle-space-4); }
+
+.throttle-field { display: flex; flex-direction: column; gap: var(--throttle-space-1); }
+.throttle-field__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--throttle-space-2); }
+.throttle-field__label { font-weight: 500; }
+.throttle-field__input {
+  font: inherit;
+  font-size: var(--throttle-font-size);
+  color: var(--throttle-color-foreground);
+  background: var(--throttle-color-background);
+  border: var(--throttle-border-width) solid var(--throttle-color-border);
+  border-radius: var(--throttle-radius-sm);
+  /* padding-block stays 0 so min-height alone owns the height, exactly as
+     .throttle-button does. With 12px vertical padding the box computed to
+     50px against the button's 48px — a 2px mismatch, measured in a browser
+     across 19 controls. An input element centres its own text vertically. */
+  padding-block: 0;
+  padding-inline: var(--throttle-control-padding-x);
+  min-height: var(--throttle-control-height);
+  width: 100%;
+  transition: border-color var(--throttle-transition), box-shadow var(--throttle-transition);
+}
+.throttle-field__input:focus-visible {
+  outline: none;
+  border-color: var(--throttle-color-primary);
+  box-shadow: 0 0 0 2px var(--throttle-color-background), 0 0 0 4px var(--throttle-color-primary);
+}
+.throttle-field__input:disabled { background: var(--throttle-color-muted); color: var(--throttle-color-muted-foreground); cursor: not-allowed; }
+.throttle-field__input::placeholder { color: var(--throttle-color-muted-foreground); opacity: 1; }
+.throttle-field__input--grouped { border: none; border-radius: 0; padding-inline: 0; }
+.throttle-field__hint { color: var(--throttle-color-muted-foreground); font-size: var(--throttle-font-size-xs); }
+/* Always mounted, so it reserves its line whether or not there is an error:
+   an error appearing on submit must not push the submit button out from
+   under the buyer's pointer. */
+.throttle-field__error { color: var(--throttle-color-danger); font-size: var(--throttle-font-size-xs); min-height: 1rem; line-height: 1rem; }
+
+.throttle-field-group {
+  display: flex;
+  flex-direction: column;
+  border: var(--throttle-border-width) solid var(--throttle-color-border);
+  border-radius: var(--throttle-radius-sm);
+  overflow: hidden;
+}
+.throttle-field-group__item { padding: var(--throttle-space-3) var(--throttle-control-padding-x); }
+.throttle-field-group__divider { height: var(--throttle-border-width); background: var(--throttle-color-border); }
+.throttle-field-group__forgot { margin-left: auto; }
+
+.throttle-button {
+  font: inherit;
+  font-weight: 500;
+  border-radius: var(--throttle-radius-sm);
+  border: var(--throttle-border-width) solid transparent;
+  padding-inline: var(--throttle-control-padding-x);
+  padding-block: 0;
+  min-height: var(--throttle-control-height);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: opacity var(--throttle-transition), background-color var(--throttle-transition), border-color var(--throttle-transition), filter var(--throttle-transition), box-shadow var(--throttle-transition);
+}
+.throttle-button:disabled { opacity: .55; cursor: not-allowed; }
+.throttle-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--throttle-color-background), 0 0 0 4px var(--throttle-color-primary); }
+.throttle-button--primary { background: var(--throttle-color-primary); color: var(--throttle-color-primary-foreground); width: 100%; }
+.throttle-button--primary:hover:not(:disabled) { filter: brightness(0.92); }
+.throttle-button--secondary { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); border-color: var(--throttle-color-border); }
+.throttle-button--secondary:hover:not(:disabled) { background: var(--throttle-color-muted); }
+.throttle-button--danger { background: transparent; color: var(--throttle-color-danger); border-color: var(--throttle-color-border); }
+.throttle-button--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--throttle-color-danger) 10%, transparent); }
+/* Link-style actions are the rows panel default, and they carry Delete,
+   Remove, Cancel and Sign out. Zero padding with min-height 0 made those
+   roughly 20px tall and ~8px apart — a mis-tap on a phone lands on something
+   irreversible. The target is expanded with vertical padding and pulled back
+   with an equal negative margin, so the hit box clears 44px while the text
+   sits exactly where it did. Collapsing this back to zero padding shrinks the
+   target again. */
+.throttle-button--link { background: none; border: none; color: var(--throttle-color-primary); padding-inline: 0; padding-block: var(--throttle-space-3); margin-block: calc(var(--throttle-space-3) * -1); min-height: 0; text-decoration: underline; width: auto; }
+.throttle-button--link:hover:not(:disabled) { opacity: .8; }
+.throttle-button--linkDanger { background: none; border: none; color: var(--throttle-color-danger); padding-inline: 0; padding-block: var(--throttle-space-3); margin-block: calc(var(--throttle-space-3) * -1); min-height: 0; text-decoration: underline; width: auto; }
+.throttle-button--linkDanger:hover:not(:disabled) { opacity: .8; }
+.throttle-button--xs { font-size: var(--throttle-font-size-xs); }
+
+.throttle-alert { border-radius: var(--throttle-radius-sm); padding: var(--throttle-space-3); font-size: var(--throttle-font-size-sm); }
+.throttle-alert--error { background: var(--throttle-color-danger-surface); border: var(--throttle-border-width) solid var(--throttle-color-danger-border); color: var(--throttle-color-danger); }
+.throttle-alert--success { background: var(--throttle-color-success-surface); border: var(--throttle-border-width) solid var(--throttle-color-success-border); color: var(--throttle-color-success); }
+.throttle-alert--info { background: var(--throttle-color-surface); color: var(--throttle-color-muted-foreground); }
+
+.throttle-spinner {
+  display: inline-block; width: 1em; height: 1em;
+  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
+  animation: throttle-spin 700ms linear infinite;
+}
+@keyframes throttle-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .throttle-spinner { animation-duration: 2.4s; } }
+
+.throttle-skeleton {
+  background: var(--throttle-color-muted);
+  border-radius: var(--throttle-radius-sm);
+  animation: throttle-pulse 1.4s ease-in-out infinite; height: 2.5em; }
+@keyframes throttle-pulse { 50% { opacity: .5; } }
+@media (prefers-reduced-motion: reduce) { .throttle-skeleton { animation: none; } }
+
+.throttle-modal__overlay {
+  position: fixed; inset: 0; z-index: var(--throttle-z-modal);
+  background: rgba(14,17,22,.45);
+  display: flex; align-items: center; justify-content: center;
+  padding: var(--throttle-space-4);
+  overflow-y: auto;
+}
+.throttle-modal__container {
+  background: var(--throttle-color-background);
+  border-radius: var(--throttle-radius);
+  box-shadow: var(--throttle-shadow-popover);
+  max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto;
+  position: relative;
+}
+/* After the base rule on purpose: both are single-class, so equal specificity
+   means source order decides. Declared before it, this silently lost. */
+.throttle-modal__container--compact { max-width: 440px; }
+.throttle-modal__close {
+  position: absolute; top: var(--throttle-space-3); right: var(--throttle-space-3);
+  background: none; border: none; cursor: pointer; font-size: var(--throttle-font-size-lg);
+  color: var(--throttle-color-muted-foreground);
+  transition: color var(--throttle-transition);
+}
+.throttle-modal__close:hover { color: var(--throttle-color-foreground); }
+.throttle-modal__header { padding: var(--throttle-space-4) var(--throttle-space-4) 0; }
+.throttle-modal__title { font-size: var(--throttle-font-size-lg); line-height: var(--throttle-line-height-tight); font-weight: 600; margin: 0; }
+.throttle-modal__body { padding: var(--throttle-space-4); }
+
+.throttle-dropdown__trigger { background: none; border: none; cursor: pointer; padding: 0; border-radius: var(--throttle-radius-full); transition: background-color var(--throttle-transition); }
+.throttle-dropdown__trigger:hover { background: var(--throttle-color-surface); }
+.throttle-dropdown__trigger:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: 2px; }
+.throttle-dropdown__menu {
+  position: absolute; right: 0; top: calc(100% + var(--throttle-space-2));
+  z-index: var(--throttle-z-popover);
+  min-width: 260px;
+  background: var(--throttle-color-background);
+  border: var(--throttle-border-width) solid var(--throttle-color-border);
+  border-radius: var(--throttle-radius);
+  box-shadow: var(--throttle-shadow-popover);
+  padding: var(--throttle-space-1);
+}
+.throttle-dropdown__item {
+  display: flex; align-items: center; gap: var(--throttle-space-2);
+  width: 100%; text-align: left; font: inherit; color: inherit;
+  background: none; border: none; cursor: pointer;
+  padding: var(--throttle-space-3);
+  border-radius: var(--throttle-radius-sm);
+  text-decoration: none;
+  transition: background-color var(--throttle-transition);
+}
+.throttle-dropdown__item:hover { background: var(--throttle-color-surface); }
+.throttle-dropdown__item:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }
+.throttle-dropdown__separator { height: 1px; background: var(--throttle-color-border); margin: var(--throttle-space-1) 0; border: 0; }
+
+.throttle-tabs__list {
+  display: flex; gap: var(--throttle-space-1);
+  border-bottom: var(--throttle-border-width) solid var(--throttle-color-border);
+  overflow-x: auto; scrollbar-width: thin;
+}
+.throttle-tabs__tab {
+  font: inherit; background: none; border: none; cursor: pointer; white-space: nowrap;
+  padding: var(--throttle-space-3);
+  color: var(--throttle-color-muted-foreground);
+  border-bottom: 2px solid transparent;
+  transition: color var(--throttle-transition), border-color var(--throttle-transition);
+}
+.throttle-tabs__tab:hover { color: var(--throttle-color-foreground); }
+.throttle-tabs__tab--active { color: var(--throttle-color-foreground); border-bottom-color: var(--throttle-color-primary); }
+.throttle-tabs__panel { padding-top: var(--throttle-space-4); }
+
+/* Paints its own ground. A UserButton in a navbar should stay transparent, but
+   the dashboard is a large surface of themed text: in dark theme its foreground
+   is near-white, so on a light host page it was rendering white-on-white. */
+.throttle-account-root { container-type: inline-size; background: var(--throttle-color-background); color: var(--throttle-color-foreground); }
+.throttle-account { display: flex; gap: var(--throttle-space-5); align-items: flex-start; }
+.throttle-account__content { flex: 1; min-width: 0; }
+.throttle-tabs__rail { flex: none; width: 220px; display: flex; flex-direction: column; gap: 2px; }
+.throttle-tabs__railitem {
+  font: inherit;
+  font-size: var(--throttle-font-size-sm);
+  display: flex;
+  align-items: center;
+  gap: var(--throttle-space-3);
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  border-radius: var(--throttle-radius-sm);
+  padding: 0 var(--throttle-space-3);
+  min-height: var(--throttle-control-height);
+  color: var(--throttle-color-muted-foreground);
+  cursor: pointer;
+  transition: background var(--throttle-transition), color var(--throttle-transition);
+}
+.throttle-tabs__railitem:hover { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); }
+.throttle-tabs__railitem:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }
+.throttle-tabs__tab:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }
+.throttle-tabs__railitem--active { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); font-weight: 500; }
+.throttle-tabs__railicon { flex: none; opacity: .75; }
+
+/* A CONTAINER query, not a viewport one: these components render inside a
+   merchant's page, so the viewport says nothing about how much room the
+   dashboard actually has — it could sit in a 400px column on a 1920px screen.
+   Below ~560px of container the rail becomes a full-width list above the
+   panel: all seven still visible, each still a 44px target. */
+@container (max-width: 560px) {
+  /* align-items: flex-start is right in row direction and wrong in column —
+     it shrinks the rail to its content width, so width:100% alone cannot make
+     it span. Stretch it explicitly when stacked. */
+  .throttle-account { flex-direction: column; align-items: stretch; gap: var(--throttle-space-4); }
+  .throttle-tabs__rail { width: 100%; }
+}
+
+.throttle-table { width: 100%; border-collapse: collapse; text-align: left; }
+.throttle-table__head { color: var(--throttle-color-muted-foreground); font-weight: 500; font-size: var(--throttle-font-size-sm); }
+.throttle-table__row { border-top: var(--throttle-border-width) solid var(--throttle-color-border); cursor: pointer; transition: background-color var(--throttle-transition); }
+.throttle-table__row:hover { background: var(--throttle-color-surface); }
+.throttle-table__row:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }
+.throttle-table__cell { padding: var(--throttle-space-3) var(--throttle-space-2); height: 56px; box-sizing: border-box; }
+.throttle-table__scroll { overflow-x: auto; }
+
+.throttle-empty { text-align: center; padding: var(--throttle-space-6) var(--throttle-space-4); }
+.throttle-empty__title { font-weight: 600; margin: 0 0 var(--throttle-space-1); }
+.throttle-empty__description { color: var(--throttle-color-muted-foreground); margin: 0; }
+
+.throttle-avatar {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; border-radius: var(--throttle-radius-full);
+  background: var(--throttle-color-primary); color: var(--throttle-color-primary-foreground);
+  font-size: var(--throttle-font-size-xs); font-weight: 600; text-transform: uppercase;
+}
+
+.throttle-badge {
+  display: inline-block; font-size: var(--throttle-font-size-xs); font-weight: 500;
+  padding: 2px var(--throttle-space-2); border-radius: var(--throttle-radius-full);
+  background: var(--throttle-color-muted); color: var(--throttle-color-muted-foreground);
+}
+.throttle-badge--muted { background: none; border: var(--throttle-border-width) solid var(--throttle-color-border); color: var(--throttle-color-muted-foreground); font-weight: 400; padding: 1px calc(var(--throttle-space-2) - 1px); }
+.throttle-badge--success { background: color-mix(in srgb, var(--throttle-color-success) 15%, transparent); color: var(--throttle-color-success); }
+.throttle-badge--warning { background: color-mix(in srgb, var(--throttle-color-warning) 15%, transparent); color: var(--throttle-color-warning); }
+.throttle-badge--danger { background: color-mix(in srgb, var(--throttle-color-danger) 15%, transparent); color: var(--throttle-color-danger); }
+
+.throttle-stack { display: flex; flex-direction: column; gap: var(--throttle-space-3); }
+.throttle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--throttle-space-2); flex-wrap: wrap; }
+.throttle-muted { color: var(--throttle-color-muted-foreground); }
+.throttle-banner {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--throttle-space-2);
+  flex-wrap: wrap;
+  background: color-mix(in srgb, var(--throttle-color-warning) 12%, transparent);
+  color: var(--throttle-color-warning);
+  border-radius: var(--throttle-radius-sm);
+  padding: var(--throttle-space-3);
+  margin-bottom: var(--throttle-space-4);
+}
+.throttle-panel { display: flex; flex-direction: column; gap: var(--throttle-space-4); }
+/* 100dvh, not 100vh: on mobile browsers 100vh includes the space behind the
+   dynamic address/toolbar, so the page would be taller than the visible
+   viewport and the card would sit off-centre until the toolbar collapsed. */
+.throttle-page {
+  min-height: 100dvh;
+  width: 100%;
+  background: var(--throttle-color-surface);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--throttle-space-5);
+  padding: var(--throttle-space-5);
+}
+.throttle-page__logo { display: flex; justify-content: center; }
+.throttle-page__footer { color: var(--throttle-color-muted-foreground); text-align: center; font-size: var(--throttle-font-size-sm); }
+.throttle-listitem {
+  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--throttle-space-2);
+  flex-wrap: wrap;
+  border: var(--throttle-border-width) solid var(--throttle-color-border);
+  border-radius: var(--throttle-radius-sm);
+  padding: var(--throttle-space-3);
+}
+/* 'rows' variant: hairline rules between items instead of each item carrying
+   its own border+radius, so a panel does not read as a card inside a card. */
+.throttle-rows { display: flex; flex-direction: column; }
+.throttle-rowitem {
+  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--throttle-space-2);
+  flex-wrap: wrap;
+  border-top: var(--throttle-border-width) solid var(--throttle-color-border);
+  padding: var(--throttle-space-3) 0;
+}
+.throttle-rowitem:first-child { border-top: none; padding-top: 0; }
+.throttle-actions { display: flex; gap: var(--throttle-space-2); flex-wrap: wrap; }
+.throttle-table__money { display: block; text-align: right; font-variant-numeric: tabular-nums; }
+.throttle-lineitem { display: flex; align-items: center; gap: var(--throttle-space-3); padding: var(--throttle-space-2) 0; }
+.throttle-lineitem__image { width: 48px; height: 48px; object-fit: cover; border-radius: var(--throttle-radius-sm); flex: none; }
+.throttle-totals { display: flex; flex-direction: column; gap: var(--throttle-space-1); }
+
+@media (prefers-reduced-motion: reduce) {
+  .throttle-button, .throttle-field__input, .throttle-dropdown__item, .throttle-dropdown__trigger, .throttle-tabs__tab, .throttle-table__row, .throttle-modal__close {
+    transition: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usethrottle/auth",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Buyer authentication for Throttle storefronts — headless core, React hooks, and drop-in forms.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -10,7 +10,9 @@
   "exports": {
     ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js", "require": "./dist/index.cjs" },
     "./react": { "types": "./dist/react/index.d.ts", "import": "./dist/react/index.js", "require": "./dist/react/index.cjs" },
-    "./forms": { "types": "./dist/react/forms/index.d.ts", "import": "./dist/react/forms/index.js", "require": "./dist/react/forms/index.cjs" }
+    "./forms": { "types": "./dist/react/forms/index.d.ts", "import": "./dist/react/forms/index.js", "require": "./dist/react/forms/index.cjs" },
+    "./components": { "types": "./dist/react/components/index.d.ts", "import": "./dist/react/components/index.js", "require": "./dist/react/components/index.cjs" },
+    "./styles.css": "./dist/styles.css"
   },
   "scripts": {
     "build": "tsup",
@@ -23,6 +25,7 @@
   "devDependencies": {
     "@testing-library/react": "^16.1.0",
     "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
     "@vitejs/plugin-react": "^4.3.4",
     "jsdom": "^25.0.1",
     "react": "^19.1.0",

package/dist/chunk-5GLLPF6L.js

@@ -1,49 +0,0 @@
-import {
-  createAccount,
-  createThrottleAuth
-} from "./chunk-SOPTBXF3.js";
-
-// src/react/context.tsx
-import { createContext, useContext, useEffect, useMemo, useRef, useSyncExternalStore } from "react";
-import { jsx } from "react/jsx-runtime";
-var Ctx = createContext(null);
-function ThrottleAuthProvider(props) {
-  const { auth: injected, publishableKey, baseUrl, storage, onStepUpRequired, children } = props;
-  const value = useMemo(() => {
-    const auth = injected ?? createThrottleAuth({ publishableKey, baseUrl, storage, onStepUpRequired });
-    return { auth, account: createAccount(auth) };
-  }, [injected, publishableKey, baseUrl]);
-  const restored = useRef(null);
-  useEffect(() => {
-    if (restored.current === value.auth) return;
-    restored.current = value.auth;
-    void value.auth.restore();
-  }, [value]);
-  return /* @__PURE__ */ jsx(Ctx.Provider, { value, children });
-}
-function useCtx() {
-  const ctx = useContext(Ctx);
-  if (!ctx) throw new Error("useAuth must be used inside a <ThrottleAuthProvider>");
-  return ctx;
-}
-function useAuthContext() {
-  return useCtx();
-}
-function useAuth() {
-  const { auth, account } = useCtx();
-  const snapshot = useSyncExternalStore(auth.subscribe, auth.getSnapshot, auth.getSnapshot);
-  return {
-    ...snapshot,
-    isLoading: snapshot.status === "loading",
-    isAuthenticated: snapshot.status === "authenticated",
-    auth,
-    account
-  };
-}
-
-export {
-  ThrottleAuthProvider,
-  useAuthContext,
-  useAuth
-};
-//# sourceMappingURL=chunk-5GLLPF6L.js.map