### Install @xylex-group/athena-auth-ui

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/packages/heroui/README.md

Install the package using bun. Ensure all peer dependencies are met.

```bash
bun add @xylex-group/athena-auth-ui
```

--------------------------------

### Athena Client Setup with AuthProvider

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/packages/heroui/README.md

Set up the Athena authentication client and plugins, then wrap your application with AuthProvider to enable authentication features. SignInPage is included as an example.

```tsx
import {
  AuthProvider,
  SignInPage,
  createAthenaAuthClient,
  createAthenaAuthPlugins
} from "@xylex-group/athena-auth-ui"

const authClient = createAthenaAuthClient()
const plugins = createAthenaAuthPlugins()

export function AuthScreen() {
  return (
    <AuthProvider authClient={authClient} plugins={plugins}>
      <SignInPage />
    </AuthProvider>
  )
}
```

--------------------------------

### Import Example Export

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/entrypoints/plugins.mdx

Demonstrates how to import the ExampleExport from the plugins module.

```tsx
import { ExampleExport } from "@xylex-group/athena-auth-ui/plugins"
```

--------------------------------

### Run Next.js Development Server

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/examples/next-heroui-example/README.md

Commands to start the Next.js development server using different package managers.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Install @xylex-group/athena

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/athena-README.md

Install the @xylex-group/athena package using npm, pnpm, or yarn.

```bash
npm install @xylex-group/athena
# or
pnpm add @xylex-group/athena
# or
yarn add @xylex-group/athena
```

--------------------------------

### Quick Start: Create Athena Client and Query Data

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/athena-README.md

Initialize the Athena client with your URL and API key, then use the fluent API to select data from a table. Handles potential errors during the query.

```typescript
import { createClient } from "@xylex-group/athena";

const athenaClient = createClient(ATHENA_URL, ATHENA_API_KEY, {
  client: "CLIENT_NAME",
  backend: { type: "athena" },
});

const { data, error } = await athenaClient.from("characters").select(`
    id,
    name,
    from:sender_id(name),
    to:receiver_id(name)
  `);

if (error) {
  console.error("gateway error", error);
} else {
  console.table(data);
}
```

--------------------------------

### Install React Peer Dependency

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/athena-README.md

Install React if you plan to use the React hooks from @xylex-group/athena/react. React version 17 or higher is required.

```bash
npm install react  # React >=17 required for the hook
```

--------------------------------

### Basic React Hooks for Data Fetching and Mutations

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/athena-README.md

Demonstrates the use of `useQuery` to fetch data and `useMutation` to create new data. Includes setup for `AthenaQueryClientProvider` and `createAthenaQueryClient`. Refetches data after a successful mutation.

```tsx
"use client";

import {
  AthenaQueryClientProvider,
  createAthenaQueryClient,
  useAthenaGateway,
  useMutation,
  useQuery,
} from "@xylex-group/athena/react";
import { createClient } from "@xylex-group/athena";

const queryClient = createAthenaQueryClient({
  cache: { mode: "none" }, // default: no persistent data cache, inflight dedupe only
});

const athena = createClient(
  process.env.NEXT_PUBLIC_ATHENA_URL!,
  process.env.NEXT_PUBLIC_ATHENA_API_KEY!,
);

type Product = {
  id: string;
  name: string;
  price: number;
};

type CreateProductInput = {
  name: string;
  price: number;
};

function ProductsInner() {
  const products = useQuery<Product[]>({
    queryKey: ["products"],
    queryFn: () =>
      athena.from("products").select("id,name,price").limit(50),
  });

  const createProduct = useMutation<CreateProductInput, Product>({
    mutationFn: (input) =>
      athena.from("products").insert(input).select("id,name,price").single(),
    onSuccess: () => {
      void products.refetch();
    },
  });

  if (products.isLoading) return <div>Loading...</div>;
  if (products.error) return <div>{products.error.message}</div>;

  return (
    <div>
      <button
        onClick={() => {
          createProduct.mutate({ name: "New product", price: 99 });
        }}
      >
        Add Product
      </button>
      {products.data?.map((product) => (
        <div key={product.id}>
          {product.name} - {product.price}
        </div>
      ))}
    </div>
  );
}

export function Products() {
  return (
    <AthenaQueryClientProvider client={queryClient}>
      <ProductsInner />
    </AthenaQueryClientProvider>
  );
}

```

--------------------------------

### Import ExampleExport

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/entrypoints/root.mdx

Demonstrates how to import the ExampleExport component from the @xylex-group/athena-auth-ui package.

```tsx
import { ExampleExport } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Calling Postgres Functions with Athena RPC

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/athena-README.md

Execute Postgres functions using athena.rpc(). By default, it uses POST /gateway/rpc, but can be configured for GET /rpc/{function_name} with { get: true }.

```typescript
const { data, count } = await athena
  .rpc("list_users", { role: "admin" }, { count: "exact", schema: "public" })
  .eq("active", true)
  .order("created_at", { ascending: false })
  .range(0, 24)
  .select(["id", "email"]);
```

```typescript
const { data: firstUser } = await athena
  .rpc<{ id: number; email: string }>( "list_users", { role: "admin" })
  .single("id,email");
```

```typescript
const { data: readOnlyUser } = await athena
  .rpc<{ id: number; email: string }>
    ("list_users", { role: "admin" }, { get: true, count: "planned", head: true },)
  .eq("id", 1)
  .single("id,email");
```

--------------------------------

### Create Typed Client and Query Model

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/athena-README.md

Initialize a typed client with the defined registry and query data from a specific model, including tenant context.

```typescript
const typed = createTypedClient(registry, ATHENA_URL, ATHENA_API_KEY, {
  tenantKeyMap: {
    organizationId: "X-Organization-Id",
  },
});

await typed
  .withTenantContext({ organizationId: "org_1" })
  .fromModel("primary", "public", "users")
  .select("*");
```

--------------------------------

### Recommended Package Publishing

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/README.md

Publish the HeroUI package after running validation and smoke tests.

```bash
bun run package:publish
# or
bun run publish
```

--------------------------------

### Conventional Commits Format Example

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/AGENTS.md

Use this format for commit messages generated by GitHub Copilot. It includes a type, an optional scope, and a description.

```conventional-commits
feat(auth): add password reset flow
```

```conventional-commits
fix: resolve null pointer in user hook
```

--------------------------------

### Import and Use Email Verification Email Template

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/customization.mdx

Import the `EmailVerificationEmail` component and access its `templateKey`. This snippet also shows how to get the Athena Auth email template catalog.

```tsx
import {
  EmailVerificationEmail,
  getAthenaAuthEmailTemplateCatalog
} from "@xylex-group/athena-auth-ui/email"

EmailVerificationEmail.templateKey
// "verification_email"

getAthenaAuthEmailTemplateCatalog()
```

--------------------------------

### Override UI for Sign-In Component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/customization.mdx

Customize the submit button's appearance and text for the Sign-In component. This example shows how to merge local UI overrides with upstream defaults and provider values.

```tsx
<SignIn
  ui={{
    auth: {
      copy: {
        signIn: {
          submitLabel: "Open app",
        },
      },
      classNames: {
        signIn: {
          submitButton: "bg-emerald-600 text-white",
        },
      },
    },
  }}
/>
```

--------------------------------

### Configuring Client with User and Tenant Context Headers

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/athena-README.md

Shows how to initialize the Athena client with user and tenant context headers for all subsequent requests. These headers are automatically included by the SDK.

```ts
const athena = createClient(
  "https://athena-db.com",
  process.env.ATHENA_API_KEY,
  {
    headers: {
      "X-User-Id": currentUser.id,
      "X-Organization-Id": currentUser.organizationId ?? "",
    },
  },
);

```

--------------------------------

### Quick Package Publish for pnpm Users

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/README.md

Publish the HeroUI package directly using pnpm, bypassing some workspace checks.

```bash
pnpm --filter @xylex-group/athena-auth-ui publish --access public
```

--------------------------------

### Get Athena Auth Email Template

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/customization.mdx

Retrieves an email template configuration from Athena Auth. Use `verification_email` for standard verification emails and `magic_link_email` for magic link emails. You may need to create corresponding rows in Athena Auth's `email_templates` table.

```typescript
const verification = getAthenaAuthEmailTemplate("verification_email")
// create row with template_key = verification.templateKey

const magicLink = getAthenaAuthEmailTemplate("magic_link_email")
// create row with event_type = magicLink.eventType
// optionally also persist template_key = magicLink.templateKey for your own cataloging
```

--------------------------------

### Import Core Plugins from Compat Entrypoint

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/entrypoints/compat-core-plugins.mdx

Import core plugins from the compatibility entrypoint of the Athena Auth UI package. This allows access to upstream core plugin factories.

```tsx
import { someExport } from "@xylex-group/athena-auth-ui/compat/core/plugins"
```

--------------------------------

### Auth Client Core Flows

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/athena-README.md

Demonstrates common authentication flows including sign-in, session management, password resets, and user updates using the auth client.

```typescript
const login = await auth.signIn.email({
  email: "demo@example.com",
  password: "super-secret",
  rememberMe: true,
});

const session = await auth.getSession();
const sessions = await auth.listSessions();

// clear one session
await auth.revokeSession({ token: "session_token_here" });
// or clear all sessions
await auth.revokeSessions();

await auth.signOut();

// additional core flows
await auth.forgetPassword({ email: "demo@example.com", redirectTo: "https://app/reset-password" });
await auth.resetPassword({ newPassword: "new-secret", token: "reset_token" });
await auth.verifyEmail({ token: "verify_token", callbackURL: "https://app/verified" });
await auth.changePassword({ currentPassword: "old-secret", newPassword: "new-secret" });
await auth.updateUser({ name: "Demo User" });
```

--------------------------------

### Pagination Methods

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/athena-README.md

Demonstrates how to paginate query results using either offset/limit or page-based approaches. The offset/limit methods include `.limit()`, `.offset()`, and a shorthand `.range()`. The page-based methods include `.currentPage()` and `.pageSize()`. The `.totalPages()` method can be used as a hint for some backends.

```APIDOC
## Pagination

Two styles of pagination are supported:

1.  **Offset/Limit**: For contiguous windows.
    *   `.limit(n)`: Sets the maximum number of rows to return.
    *   `.offset(n)`: Skips the first `n` rows.
    *   `.range(from, to)`: A shorthand for setting both offset and limit.

    ```ts
    // Example using offset and limit
    const { data } = await athena.from("users").select().limit(25).offset(50);

    // Example using range shorthand
    const { data: firstTwentyFive } = await athena.from("users").select().range(0, 24);
    ```

2.  **Page-based**: Maps to `current_page`, `page_size`, and `total_pages`.
    *   `.currentPage(n)`: Specifies the current page number.
    *   `.pageSize(n)`: Sets the number of items per page.
    *   `.totalPages(n)`: An optional hint for the total number of pages.

    ```ts
    // Example using page-based pagination
    const { data: page2 } = await athena
      .from("orders")
      .select("id, total")
      .currentPage(2)
      .pageSize(25);

    // Example with totalPages hint
    const { data: hinted } = await athena
      .from("orders")
      .select("id, total")
      .currentPage(1)
      .pageSize(25)
      .totalPages(10);
    ```

**Method Mapping:**

| Method             | Backend Field |
|--------------------|---------------|
| `.limit(n)`        | `limit`       |
| `.offset(n)`       | `offset`      |
| `.range(from, to)` | `offset` + `limit` |
| `.currentPage(n)`  | `current_page` |
| `.pageSize(n)`     | `page_size`    |
| `.totalPages(n)`   | `total_pages`  |
```

--------------------------------

### Run Typecheck and Full Checks

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/athena-README.md

Execute compile-time type compatibility checks or a comprehensive suite including linting, type checking, testing, and building.

```bash
pnpm typecheck   # compile-time type compatibility checks
```

```bash
pnpm check:all   # lint + typecheck + test + build
```

--------------------------------

### Common Workspace Commands

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/README.md

Execute common development and build tasks within the monorepo.

```bash
bun run lint
bun run typecheck
bun run build
bun run docs:generate
bun run package:publish
bun run package:publish:check
```

--------------------------------

### Import AuthUiProvider

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/auth-ui-provider.mdx

Import the AuthUiProvider component from the main package. This component is necessary to provide authentication context to other UI elements.

```tsx
import { AuthUiProvider } from "@xylex-group/athena-auth-ui"

```

--------------------------------

### Import ThemeToggleItem

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/theme-toggle-item.mdx

Import the ThemeToggleItem component from the plugins entrypoint.

```tsx
import { ThemeToggleItem } from "@xylex-group/athena-auth-ui/plugins"
```

--------------------------------

### Import SignUp Component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/sign-up.mdx

Import the SignUp component from the @xylex-group/athena-auth-ui package.

```tsx
import { SignUp } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import SwitchAccountSubmenu

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/switch-account-submenu.mdx

Import the SwitchAccountSubmenu component from the athena-auth-ui plugins package. Ensure the multi-session plugin is registered for this component to function correctly.

```tsx
import { SwitchAccountSubmenu } from "@xylex-group/athena-auth-ui/plugins"
```

--------------------------------

### Import useCreateAdminAthenaClient Hook

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-create-admin-athena-client.mdx

Import the hook from the '@xylex-group/athena-auth-ui' package. This hook is also available from '@xylex-group/athena-auth-ui/plugins'.

```tsx
import { useCreateAdminAthenaClient } from "@xylex-group/athena-auth-ui"

```

--------------------------------

### Import buildMethodCandidates

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/functions/build-method-candidates.mdx

Import the buildMethodCandidates function from the '@xylex-group/athena-auth-ui' package. This function is essential for setting up fallback paths for Athena method testing.

```tsx
import { buildMethodCandidates } from "@xylex-group/athena-auth-ui"

```

--------------------------------

### Import useAdminEmailTemplatesQuery

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-admin-email-templates-query.mdx

Import the hook from the '@xylex-group/athena-auth-ui' package. This hook is also available from '@xylex-group/athena-auth-ui/plugins'.

```tsx
import { useAdminEmailTemplatesQuery } from "@xylex-group/athena-auth-ui"

```

--------------------------------

### Import Passkeys Component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/passkeys.mdx

Import the Passkeys component from the @xylex-group/athena-auth-ui/plugins entrypoint.

```tsx
import { Passkeys } from "@xylex-group/athena-auth-ui/plugins"
```

--------------------------------

### Import HeroUI Styles

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/entrypoints/styles.mdx

Import the CSS bundle from the Athena Auth UI package to load HeroUI styles. This should typically be done once at application startup.

```typescript
import "@xylex-group/athena-auth-ui/styles"
```

--------------------------------

### Import apiKeyPlugin

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/functions/api-key-plugin.mdx

Import the apiKeyPlugin from the designated entrypoint. This helper is part of the package's public runtime contract.

```tsx
import { apiKeyPlugin } from "@xylex-group/athena-auth-ui/plugins"
```

--------------------------------

### Import useAdminAuditLogs Hook

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-admin-audit-logs.mdx

Import the useAdminAuditLogs hook from the @xylex-group/athena-auth-ui package.

```tsx
import { useAdminAuditLogs } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import SwitchAccountSubmenuItem

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/switch-account-submenu-item.mdx

Import the SwitchAccountSubmenuItem component from the athena-auth-ui plugins.

```tsx
import { SwitchAccountSubmenuItem } from "@xylex-group/athena-auth-ui/plugins"
```

--------------------------------

### Import WorkspaceSdkLabPanel

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/workspace-sdk-lab-panel.mdx

Import the WorkspaceSdkLabPanel component from the '@xylex-group/athena-auth-ui' package. This component is also available from '@xylex-group/athena-auth-ui/plugins'.

```tsx
import { WorkspaceSdkLabPanel } from "@xylex-group/athena-auth-ui"

```

--------------------------------

### Import Compat React

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/entrypoints/compat-react.mdx

Import necessary exports from the compat React entrypoint. This entrypoint re-exports the entire surface of the @better-auth-ui/react package.

```tsx
import { someExport } from "@xylex-group/athena-auth-ui/compat/react"
```

--------------------------------

### Import AccountSettingsPage Component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/account-settings-page.mdx

Import the AccountSettingsPage component from the '@xylex-group/athena-auth-ui/pages' package. This component is also available from the root package.

```tsx
import { AccountSettingsPage } from "@xylex-group/athena-auth-ui/pages"
```

--------------------------------

### Import from Compat Core

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/entrypoints/compat-core.mdx

Import specific exports from the compat core entrypoint. This allows access to the upstream @better-auth-ui/core package's functionality.

```tsx
import { someExport } from "@xylex-group/athena-auth-ui/compat/core"
```

--------------------------------

### Import Theme Plugin

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/functions/theme-plugin.mdx

Import the themePlugin function from the @xylex-group/athena-auth-ui/plugins package.

```tsx
import { themePlugin } from "@xylex-group/athena-auth-ui/plugins"
```

--------------------------------

### Import HeroUI Styles

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/packages/heroui/README.md

Import necessary styles for HeroUI and the athena-auth-ui package to ensure proper styling and Tailwind CSS scanning.

```css
@import "tailwindcss";
@import "@heroui/styles";
@import "@xylex-group/athena-auth-ui/styles";
```

--------------------------------

### Import Magic Link Plugin

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/functions/magic-link-plugin.mdx

Import the magicLinkPlugin function from the '@xylex-group/athena-auth-ui/plugins' entrypoint. This is the primary way to include the plugin's functionality in your application.

```tsx
import { magicLinkPlugin } from "@xylex-group/athena-auth-ui/plugins"

```

--------------------------------

### Import WorkspaceLogsSettings

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/workspace-logs-settings.mdx

Import the WorkspaceLogsSettings component from the athena-auth-ui library. It is also exported from the plugins entrypoint.

```tsx
import { WorkspaceLogsSettings } from "@xylex-group/athena-auth-ui"

```

--------------------------------

### Create Athena Auth Client

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/athena-README.md

Initialize the auth client for interacting with an Athena Auth server. Supports cookie-based sessions or bearer tokens.

```typescript
import { createAuthClient } from "@xylex-group/athena";

const auth = createAuthClient({
  baseUrl: "http://localhost:3001/api/auth",
  // optional: bearer token if you are not using cookie-based sessions
  bearerToken: process.env.AUTH_BEARER_TOKEN,
});
```

--------------------------------

### Import useAdminEmailFailuresQuery

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-admin-email-failures-query.mdx

Import the hook from the '@xylex-group/athena-auth-ui' package. This hook is also available from '@xylex-group/athena-auth-ui/plugins'.

```tsx
import { useAdminEmailFailuresQuery } from "@xylex-group/athena-auth-ui"

```

--------------------------------

### Import AuthProvider

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/auth-provider.mdx

Import the AuthProvider component from the @xylex-group/athena-auth-ui package to use it in your application.

```tsx
import { AuthProvider } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import SignUpPage Component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/sign-up-page.mdx

Import the SignUpPage component from the @xylex-group/athena-auth-ui/pages package. This component is ready to be mounted into your application.

```tsx
import { SignUpPage } from "@xylex-group/athena-auth-ui/pages"
```

--------------------------------

### Import SwitchAccountSubmenuContent

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/switch-account-submenu-content.mdx

Import the SwitchAccountSubmenuContent component from the athena-auth-ui plugins package.

```tsx
import { SwitchAccountSubmenuContent } from "@xylex-group/athena-auth-ui/plugins"
```

--------------------------------

### Import WorkspaceSecurityPanel

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/workspace-security-panel.mdx

Import the WorkspaceSecurityPanel component from the '@xylex-group/athena-auth-ui' package. This component is also exported from '@xylex-group/athena-auth-ui/plugins'.

```tsx
import { WorkspaceSecurityPanel } from "@xylex-group/athena-auth-ui"

```

--------------------------------

### Import multiSessionPlugin

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/functions/multi-session-plugin.mdx

Import the multiSessionPlugin function from the @xylex-group/athena-auth-ui/plugins package.

```tsx
import { multiSessionPlugin } from "@xylex-group/athena-auth-ui/plugins"
```

--------------------------------

### Import useCreateAdminApiKey Hook

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-create-admin-api-key.mdx

Import the useCreateAdminApiKey hook from the @xylex-group/athena-auth-ui package. This hook is also available from the plugins entrypoint.

```tsx
import { useCreateAdminApiKey } from "@xylex-group/athena-auth-ui"

```

--------------------------------

### Import NewDeviceEmail Component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/new-device-email.mdx

Import the NewDeviceEmail component from the athena-auth-ui email package.

```tsx
import { NewDeviceEmail } from "@xylex-group/athena-auth-ui/email"
```

--------------------------------

### Import SignIn Component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/sign-in.mdx

Import the SignIn component from the @xylex-group/athena-auth-ui package.

```tsx
import { SignIn } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### General Options

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/athena-README.md

Options that can be passed to methods like `.select()` to modify query behavior, such as specifying a schema, requesting a count, or controlling null stripping.

```APIDOC
## Options

Options can be passed as the second argument to methods like `.select()`.

| Option       | Type                                  | Description                                  |
|--------------|---------------------------------------|----------------------------------------------|
| `schema`     | `string`                              | Qualify unqualified table names for table calls. |
| `count`      | `"exact" | "planned" | "estimated"` | Request a row count alongside the data.      |
| `head`       | `boolean`                             | Return response headers only (no rows).      |
| `stripNulls` | `boolean`                             | Strip null values from rows (default `true`). |

```ts
// Example using options with .select()
const { data } = await athena
  .from("orders")
  .select("id", { count: "exact", stripNulls: false });
```
```

--------------------------------

### Import WorkspaceLogsPanel

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/workspace-logs-panel.mdx

Import the WorkspaceLogsPanel component from the athena-auth-ui library. This component is also available from the plugins entrypoint.

```tsx
import { WorkspaceLogsPanel } from "@xylex-group/athena-auth-ui"

```

--------------------------------

### Import Public API Components

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/packages/heroui/README.md

Import necessary components and utilities from the package root. Subpath imports are not supported.

```tsx
import {
  AuthProvider,
  SignInPage,
  SettingsPage,
  createAthenaAuthClient,
  createAthenaAuthPlugins
} from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import SdkMethodLabCard

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/sdk-method-lab-card.mdx

Import the SdkMethodLabCard component from the athena-auth-ui package. This component is also available from the plugins entrypoint.

```tsx
import { SdkMethodLabCard } from "@xylex-group/athena-auth-ui"

```

--------------------------------

### Import Settings Component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/settings.mdx

Import the Settings component from the athena-auth-ui package. This is the primary entrypoint for using the component.

```tsx
import { Settings } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import useAdminEmailTemplates Hook

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-admin-email-templates.mdx

Import the useAdminEmailTemplates hook from the '@xylex-group/athena-auth-ui' package. This hook is also available from '@xylex-group/athena-auth-ui/plugins'.

```tsx
import { useAdminEmailTemplates } from "@xylex-group/athena-auth-ui"

```