@better-auth-ui/heroui 1.6.2 → 1.6.4

package/src/lib/auth/auth-plugin.ts

@@ -0,0 +1,67 @@
+import type { AdditionalField as AdditionalFieldConfig } from "@better-auth-ui/core"
+import type {
+  AccountCardProps,
+  AuthPlugin as AuthPluginPrimitive,
+  AuthPluginComponents as BaseAuthPluginComponents,
+  SecurityCardProps,
+  UserMenuItemProps
+} from "@better-auth-ui/react"
+import type { CardProps } from "@heroui/react"
+import type { ComponentType, ReactNode } from "react"
+
+import type { SocialLayout } from "../../components/auth/provider-buttons"
+
+/** Props for the heroui `<AdditionalField>` component and `field.render` callbacks. */
+export type AdditionalFieldProps = {
+  name: string
+  field: AdditionalFieldConfig
+  isPending?: boolean
+  variant?: CardProps["variant"]
+}
+
+// Lives here (rather than next to `<AdditionalField>`) so the augmentation
+// is picked up by consumers who only import from `/plugins`.
+declare module "@better-auth-ui/core" {
+  interface AuthPluginRegister {
+    heroui: AuthPlugin
+  }
+
+  interface AdditionalFieldRegister {
+    label: ReactNode
+    renderProps: AdditionalFieldProps
+    renderResult: ReactNode
+  }
+}
+
+/** Heroui slot component shapes — inherits from the framework-agnostic defaults and narrows slots that receive a heroui variant from the host. */
+export type AuthPluginComponents = Omit<
+  BaseAuthPluginComponents,
+  "securityCards" | "accountCards"
+> & {
+  /** Rendered as cards inside security settings */
+  securityCards?: ComponentType<
+    SecurityCardProps & { variant?: CardProps["variant"] }
+  >[]
+  /** Rendered as cards inside account settings */
+  accountCards?: ComponentType<
+    AccountCardProps & { variant?: CardProps["variant"] }
+  >[]
+  /** Rendered as items inside the `UserButton` dropdown (e.g. account switcher). */
+  userMenuItems?: ComponentType<UserMenuItemProps>[]
+}
+
+/** Props the heroui `<Auth>` router spreads onto plugin-contributed auth views. */
+export type AuthViewProps = Omit<CardProps, "children"> & {
+  socialLayout?: SocialLayout
+  socialPosition?: "top" | "bottom"
+}
+
+/** Props the heroui `<Settings>` router spreads onto plugin-contributed settings views. */
+export type SettingsViewProps = Omit<CardProps, "children">
+
+/** Heroui plugin type. Plugin authors import this from `@better-auth-ui/heroui`. */
+export type AuthPlugin = AuthPluginPrimitive<
+  AuthPluginComponents,
+  AuthViewProps,
+  SettingsViewProps
+>

package/src/lib/auth/delete-user-plugin.ts

@@ -0,0 +1,15 @@
+import { createAuthPlugin } from "@better-auth-ui/core"
+import {
+  deleteUserPlugin as coreDeleteUserPlugin,
+  type DeleteUserPluginOptions
+} from "@better-auth-ui/core/plugins"
+
+import { DangerZone } from "../../components/auth/delete-user/danger-zone"
+
+export const deleteUserPlugin = createAuthPlugin(
+  coreDeleteUserPlugin.id,
+  (options: DeleteUserPluginOptions = {}) => ({
+    ...coreDeleteUserPlugin(options),
+    securityCards: [DangerZone]
+  })
+)

package/src/lib/auth/magic-link-plugin.ts

@@ -0,0 +1,26 @@
+import { createAuthPlugin } from "@better-auth-ui/core"
+import {
+  magicLinkPlugin as coreMagicLinkPlugin,
+  type MagicLinkPluginOptions
+} from "@better-auth-ui/core/plugins"
+
+import { MagicLink } from "../../components/auth/magic-link/magic-link"
+import { MagicLinkButton } from "../../components/auth/magic-link/magic-link-button"
+
+export const magicLinkPlugin = createAuthPlugin(
+  coreMagicLinkPlugin.id,
+  (options: MagicLinkPluginOptions = {}) => ({
+    ...coreMagicLinkPlugin(options),
+    authButtons: [MagicLinkButton],
+    views: {
+      auth: { magicLink: MagicLink }
+    },
+    // Conditional, not an override: when `emailAndPassword.enabled === false`
+    // the `<Auth>` router renders this at `/auth/sign-in` instead of the
+    // disabled password form. With password auth on, the built-in `SignIn`
+    // still wins.
+    fallbackViews: {
+      auth: { signIn: MagicLink }
+    }
+  })
+)

package/src/lib/auth/multi-session-plugin.ts

@@ -0,0 +1,17 @@
+import { createAuthPlugin } from "@better-auth-ui/core"
+import {
+  multiSessionPlugin as coreMultiSessionPlugin,
+  type MultiSessionPluginOptions
+} from "@better-auth-ui/core/plugins"
+
+import { ManageAccounts } from "../../components/auth/multi-session/manage-accounts"
+import { SwitchAccountSubmenu } from "../../components/auth/multi-session/switch-account-submenu"
+
+export const multiSessionPlugin = createAuthPlugin(
+  coreMultiSessionPlugin.id,
+  (options: MultiSessionPluginOptions = {}) => ({
+    ...coreMultiSessionPlugin(options),
+    accountCards: [ManageAccounts],
+    userMenuItems: [SwitchAccountSubmenu]
+  })
+)

package/src/lib/auth/passkey-plugin.ts

@@ -0,0 +1,17 @@
+import { createAuthPlugin } from "@better-auth-ui/core"
+import {
+  passkeyPlugin as corePasskeyPlugin,
+  type PasskeyPluginOptions
+} from "@better-auth-ui/core/plugins"
+
+import { PasskeyButton } from "../../components/auth/passkey/passkey-button"
+import { Passkeys } from "../../components/auth/passkey/passkeys"
+
+export const passkeyPlugin = createAuthPlugin(
+  corePasskeyPlugin.id,
+  (options: PasskeyPluginOptions = {}) => ({
+    ...corePasskeyPlugin(options),
+    authButtons: [PasskeyButton],
+    securityCards: [Passkeys]
+  })
+)

package/src/lib/auth/theme-plugin.ts

@@ -0,0 +1,86 @@
+import { createAuthPlugin } from "@better-auth-ui/core"
+import {
+  themePlugin as coreThemePlugin,
+  type ThemeLocalization
+} from "@better-auth-ui/core/plugins"
+
+import { Appearance } from "../../components/auth/theme/appearance"
+import { ThemeToggleItem } from "../../components/auth/theme/theme-toggle-item"
+
+/**
+ * Hook shape compatible with `next-themes`' `useTheme` and similar APIs. The
+ * hook is invoked inside the plugin factory so consumers can register the
+ * plugin in the same component as their `<ThemeProvider>` without an extra
+ * inner component.
+ */
+export type UseThemeHook = () => {
+  theme?: string
+  setTheme: (theme: string) => void
+  themes?: string[]
+}
+
+type CommonThemeOptions = {
+  /**
+   * Override the plugin's default localization strings.
+   * @remarks `ThemeLocalization`
+   */
+  localization?: Partial<ThemeLocalization>
+  /**
+   * Available theme options.
+   * @default ["system", "light", "dark"]
+   */
+  themes?: string[]
+}
+
+export type ThemePluginOptions = CommonThemeOptions &
+  (
+    | {
+        /**
+         * A theme hook (e.g. next-themes' `useTheme`) called inside the
+         * plugin's slot components on every render. The hook owns the live
+         * theme value, so `theme`/`setTheme` are not accepted in this form.
+         */
+        useTheme: UseThemeHook
+        theme?: never
+        setTheme?: never
+      }
+    | {
+        /**
+         * Current theme value. Required when not using a hook so slot
+         * components can highlight the active option. Pass it from a
+         * stateful source (e.g. `useState`, Context) so updates flow
+         * through `<AuthProvider>` and re-render slot components.
+         */
+        theme: string
+        /** Setter that updates the value `theme` is read from. */
+        setTheme: (theme: string) => void
+        useTheme?: never
+      }
+  )
+
+export const themePlugin = createAuthPlugin(
+  coreThemePlugin.id,
+  ({ useTheme, ...rest }: ThemePluginOptions) => {
+    // No-op `setTheme` baseline keeps core's required option satisfied on the
+    // hook branch (where the consumer doesn't pass a setter); on the static
+    // branch the spread overrides it with the consumer's real setter.
+    const base = coreThemePlugin({ setTheme: () => {}, ...rest })
+    return {
+      ...base,
+      // Slot components always call `plugin.useTheme()` — invoking the hook
+      // inside their render keeps it in scope of any `<ThemeProvider>` the
+      // consumer mounts. On the static branch the factory re-runs on every
+      // parent render, so the synthesized closure stays in sync with the
+      // consumer's `theme` state.
+      useTheme:
+        useTheme ??
+        (() => ({
+          theme: base.theme,
+          setTheme: base.setTheme,
+          themes: base.themes
+        })),
+      userMenuItems: [ThemeToggleItem],
+      accountCards: [Appearance]
+    }
+  }
+)

package/src/lib/auth/username-plugin.tsx

@@ -0,0 +1,30 @@
+import { createAuthPlugin } from "@better-auth-ui/core"
+import {
+  usernamePlugin as coreUsernamePlugin,
+  type UsernamePluginOptions
+} from "@better-auth-ui/core/plugins"
+
+import { SignInUsername } from "../../components/auth/username/sign-in-username"
+import { UsernameField } from "../../components/auth/username/username-field"
+
+export const usernamePlugin = createAuthPlugin(
+  coreUsernamePlugin.id,
+  (options: UsernamePluginOptions = {}) => {
+    const core = coreUsernamePlugin(options)
+
+    return {
+      ...core,
+      additionalFields: core.additionalFields?.map((field) =>
+        field.name === "username"
+          ? {
+              ...field,
+              render: UsernameField
+            }
+          : field
+      ),
+      views: {
+        auth: { signIn: SignInUsername }
+      }
+    }
+  }
+)

package/src/plugins.ts

@@ -0,0 +1,23 @@
+"use client"
+
+export * from "./components/auth/delete-user/danger-zone"
+export * from "./components/auth/delete-user/delete-user"
+// Plugin-contributed components that may be used standalone
+export * from "./components/auth/magic-link/magic-link"
+export * from "./components/auth/multi-session/manage-account"
+export * from "./components/auth/multi-session/manage-accounts"
+export * from "./components/auth/multi-session/switch-account-submenu"
+export * from "./components/auth/multi-session/switch-account-submenu-content"
+export * from "./components/auth/multi-session/switch-account-submenu-item"
+export * from "./components/auth/passkey/passkeys"
+export * from "./components/auth/theme/appearance"
+export * from "./components/auth/theme/theme-toggle-item"
+export * from "./components/auth/username/sign-in-username"
+export * from "./components/auth/username/username-field"
+export * from "./lib/auth/auth-plugin"
+export * from "./lib/auth/delete-user-plugin"
+export * from "./lib/auth/magic-link-plugin"
+export * from "./lib/auth/multi-session-plugin"
+export * from "./lib/auth/passkey-plugin"
+export * from "./lib/auth/theme-plugin"
+export * from "./lib/auth/username-plugin"

package/dist/components/auth/magic-link-button.d.ts

@@ -1,13 +0,0 @@
-import { AuthView } from '@better-auth-ui/core';
-export type MagicLinkButtonProps = {
-    isPending: boolean;
-    view?: AuthView;
-};
-/**
- * Renders a full-width tertiary link-style button that navigates to either the magic-link or sign-in route.
- *
- * @param isPending - If true, applies disabled styling and prevents interaction
- * @param view - Current auth view; when `"magicLink"`, the button targets the sign-in/password variant
- * @returns The rendered Link element with the appropriate href, icon, and label
- */
-export declare function MagicLinkButton({ isPending, view }: MagicLinkButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/magic-link-button.js

@@ -1,16 +0,0 @@
-import { useAuth as e } from "@better-auth-ui/react";
-import { Link as t, cn as n } from "@heroui/react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Envelope as a, Lock as o } from "@gravity-ui/icons";
-import { buttonVariants as s } from "@heroui/styles";
-//#region src/components/auth/magic-link-button.tsx
-function c({ isPending: c, view: l }) {
-	let { basePaths: u, viewPaths: d, localization: f } = e(), p = l === "magicLink";
-	return /* @__PURE__ */ i(t, {
-		href: `${u.auth}/${p ? d.auth.signIn : d.auth.magicLink}`,
-		className: n(s({ variant: "tertiary" }), "w-full gap-2", c && "status-disabled pointer-events-none"),
-		children: [r(p ? o : a, {}), f.auth.continueWith.replace("{{provider}}", p ? f.auth.password : f.auth.magicLink)]
-	});
-}
-//#endregion
-export { c as MagicLinkButton };

package/dist/components/auth/magic-link.d.ts

@@ -1,17 +0,0 @@
-import { CardProps } from '@heroui/react';
-import { SocialLayout } from './provider-buttons';
-export type MagicLinkProps = {
-    className?: string;
-    socialLayout?: SocialLayout;
-    socialPosition?: "top" | "bottom";
-    variant?: CardProps["variant"];
-};
-/**
- * Render a card-based sign-in form that sends an email magic link and optionally shows social provider buttons.
- *
- * @param className - Additional CSS class names applied to the card container
- * @param socialLayout - Layout style for social provider buttons
- * @param socialPosition - Position of social provider buttons; `"top"` or `"bottom"`. Defaults to `"bottom"`.
- * @returns The magic-link sign-in UI as a JSX element
- */
-export declare function MagicLink({ className, socialLayout, socialPosition, variant, ...props }: MagicLinkProps & CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/magic-link.js

@@ -1,111 +0,0 @@
-import { FieldSeparator as e } from "./field-separator.js";
-import { MagicLinkButton as t } from "./magic-link-button.js";
-import { PasskeyButton as n } from "./passkey-button.js";
-import { ProviderButtons as r } from "./provider-buttons.js";
-import { useAuth as i, useSignInMagicLink as a, useSignInSocial as o } from "@better-auth-ui/react";
-import { Button as s, Card as c, Description as l, FieldError as u, Form as d, Input as f, Label as p, Link as m, Spinner as h, TextField as g, cn as _, toast as v } from "@heroui/react";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
-import { useState as S } from "react";
-//#region src/components/auth/magic-link.tsx
-function C({ className: C, socialLayout: w, socialPosition: T = "bottom", variant: E, ...D }) {
-	let { basePaths: O, baseURL: k, localization: A, passkey: j, redirectTo: M, socialProviders: N, viewPaths: P } = i(), [F, I] = S(""), { mutate: L, isPending: R } = a({
-		onError: (e) => v.danger(e.error?.message || e.message),
-		onSuccess: () => {
-			I(""), v.success(A.auth.magicLinkSent);
-		}
-	}), [z, B] = S(!1), { mutate: V, isPending: H } = o({
-		onError: (e) => v.danger(e.error?.message || e.message),
-		onSuccess: () => {
-			B(!0), setTimeout(() => {
-				B(!1);
-			}, 5e3);
-		}
-	}), U = R || H || z, W = (e) => {
-		e.preventDefault(), L({
-			email: F,
-			callbackURL: `${k}${M}`
-		});
-	}, G = !!N?.length;
-	return /* @__PURE__ */ x(c, {
-		className: _("w-full max-w-sm p-4 md:p-6", C),
-		variant: E,
-		...D,
-		children: [
-			/* @__PURE__ */ b(c.Header, { children: /* @__PURE__ */ b(c.Title, {
-				className: "text-xl font-semibold mb-1",
-				children: A.auth.signIn
-			}) }),
-			/* @__PURE__ */ x(c.Content, {
-				className: "gap-4",
-				children: [
-					T === "top" && /* @__PURE__ */ x(y, { children: [!!N?.length && /* @__PURE__ */ b(r, {
-						socialLayout: w,
-						signInSocial: V,
-						isPending: U
-					}), G && /* @__PURE__ */ b(e, { children: A.auth.or })] }),
-					/* @__PURE__ */ x(d, {
-						onSubmit: W,
-						className: "flex flex-col gap-4",
-						children: [/* @__PURE__ */ x(g, {
-							name: "email",
-							type: "email",
-							autoComplete: "email",
-							isDisabled: U,
-							value: F,
-							onChange: I,
-							children: [
-								/* @__PURE__ */ b(p, { children: A.auth.email }),
-								/* @__PURE__ */ b(f, {
-									placeholder: A.auth.emailPlaceholder,
-									required: !0,
-									variant: E === "transparent" ? "primary" : "secondary"
-								}),
-								/* @__PURE__ */ b(u, {})
-							]
-						}), /* @__PURE__ */ x("div", {
-							className: "flex flex-col gap-3",
-							children: [
-								/* @__PURE__ */ x(s, {
-									type: "submit",
-									className: "w-full",
-									isPending: U,
-									children: [U && /* @__PURE__ */ b(h, {
-										color: "current",
-										size: "sm"
-									}), A.auth.sendMagicLink]
-								}),
-								/* @__PURE__ */ b(t, {
-									view: "magicLink",
-									isPending: U
-								}),
-								j && /* @__PURE__ */ b(n, { isPending: U })
-							]
-						})]
-					}),
-					T === "bottom" && /* @__PURE__ */ x(y, { children: [G && /* @__PURE__ */ b(e, { children: A.auth.or }), !!N?.length && /* @__PURE__ */ b(r, {
-						socialLayout: w,
-						signInSocial: V,
-						isPending: U
-					})] })
-				]
-			}),
-			/* @__PURE__ */ b(c.Footer, {
-				className: "flex-col",
-				children: /* @__PURE__ */ x(l, {
-					className: "text-sm",
-					children: [
-						A.auth.needToCreateAnAccount,
-						" ",
-						/* @__PURE__ */ b(m, {
-							href: `${O.auth}/${P.auth.signUp}`,
-							className: "text-accent decoration-accent no-underline hover:underline",
-							children: A.auth.signUp
-						})
-					]
-				})
-			})
-		]
-	});
-}
-//#endregion
-export { C as MagicLink };

package/dist/components/auth/passkey-button.d.ts

@@ -1,4 +0,0 @@
-export type PasskeyButtonProps = {
-    isPending: boolean;
-};
-export declare function PasskeyButton({ isPending }: PasskeyButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/passkey-button.js

@@ -1,24 +0,0 @@
-import { useAuth as e, useSignInPasskey as t } from "@better-auth-ui/react";
-import { Button as n, Spinner as r, toast as i } from "@heroui/react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Fingerprint as s } from "@gravity-ui/icons";
-//#region src/components/auth/passkey-button.tsx
-function c({ isPending: c }) {
-	let { localization: l, redirectTo: u, navigate: d } = e(), { mutate: f, isPending: p } = t({
-		onError: (e) => i.danger(e.error?.message || e.message),
-		onSuccess: () => d({ to: u })
-	});
-	return /* @__PURE__ */ o(n, {
-		className: "w-full",
-		variant: "tertiary",
-		isDisabled: c || p,
-		isPending: p,
-		onPress: () => f(),
-		children: [p ? /* @__PURE__ */ a(r, {
-			color: "current",
-			size: "sm"
-		}) : /* @__PURE__ */ a(s, {}), l.auth.continueWith.replace("{{provider}}", l.auth.passkey)]
-	});
-}
-//#endregion
-export { c as PasskeyButton };

package/dist/components/email/magic-link-email.d.ts

@@ -1,3 +0,0 @@
-import { MagicLinkEmailProps } from '@better-auth-ui/react';
-export type { MagicLinkEmailProps } from '@better-auth-ui/react';
-export declare function MagicLinkEmail({ colors, classNames, ...props }: MagicLinkEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/email/new-device-email.d.ts

@@ -1,3 +0,0 @@
-import { NewDeviceEmailProps } from '@better-auth-ui/react';
-export type { NewDeviceEmailProps } from '@better-auth-ui/react';
-export declare function NewDeviceEmail({ colors, classNames, ...props }: NewDeviceEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/email/otp-email.d.ts

@@ -1,3 +0,0 @@
-import { OtpEmailProps } from '@better-auth-ui/react';
-export type { OtpEmailProps } from '@better-auth-ui/react';
-export declare function OtpEmail({ colors, classNames, ...props }: OtpEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/settings/account/account-settings.js

@@ -1,23 +0,0 @@
-import { Appearance as e } from "./appearance.js";
-import { ChangeEmail as t } from "./change-email.js";
-import { ManageAccounts as n } from "./manage-accounts.js";
-import { UserProfile as r } from "./user-profile.js";
-import { useAuth as i } from "@better-auth-ui/react";
-import { cn as a } from "@heroui/react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-//#region src/components/settings/account/account-settings.tsx
-function c({ className: c, variant: l, ...u }) {
-	let { multiSession: d, emailAndPassword: f, magicLink: p, appearance: { setTheme: m } } = i();
-	return /* @__PURE__ */ s("div", {
-		className: a("flex w-full flex-col gap-4 md:gap-6", c),
-		...u,
-		children: [
-			/* @__PURE__ */ o(r, { variant: l }),
-			(f?.enabled || p) && /* @__PURE__ */ o(t, { variant: l }),
-			m && /* @__PURE__ */ o(e, { variant: l }),
-			d && /* @__PURE__ */ o(n, { variant: l })
-		]
-	});
-}
-//#endregion
-export { c as AccountSettings };

package/dist/components/settings/account/appearance.js

@@ -1,71 +0,0 @@
-import { ThemePreviewDark as e, ThemePreviewLight as t, ThemePreviewSystem as n, useAuth as r, useSession as i } from "@better-auth-ui/react";
-import { Card as a, Label as o, Radio as s, RadioGroup as c, cn as l } from "@heroui/react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Display as f, Moon as p, Sun as m } from "@gravity-ui/icons";
-//#region src/components/settings/account/appearance.tsx
-function h({ className: h, variant: g, ..._ }) {
-	let { localization: v, appearance: { theme: y, setTheme: b, themes: x } } = r(), { data: S } = i();
-	return !b || !x?.length ? null : /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("h2", {
-		className: l("text-sm font-semibold mb-3"),
-		children: v.settings.appearance
-	}), /* @__PURE__ */ u(a, {
-		className: l("p-4 gap-4", h),
-		variant: g,
-		..._,
-		children: /* @__PURE__ */ d(a.Content, { children: [/* @__PURE__ */ u(o, { children: v.settings.theme }), /* @__PURE__ */ u(c, {
-			variant: g === "transparent" ? "secondary" : "primary",
-			value: S ? y : "",
-			onChange: b,
-			isDisabled: !S || !y,
-			children: /* @__PURE__ */ d("div", {
-				className: "grid gap-3 grid-cols-2 sm:grid-cols-3",
-				children: [
-					x.includes("system") && /* @__PURE__ */ u(s, {
-						value: "system",
-						className: l("mt-0 px-4 pb-4 pt-3 rounded-xl", "border border-transparent data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10", g === "transparent" ? "bg-surface" : "bg-surface-secondary"),
-						children: /* @__PURE__ */ d(s.Content, {
-							className: "gap-2",
-							children: [/* @__PURE__ */ d("div", {
-								className: "flex gap-2 justify-between",
-								children: [/* @__PURE__ */ d(o, {
-									className: "flex gap-2 items-center",
-									children: [/* @__PURE__ */ u(f, { className: "text-muted" }), v.settings.system]
-								}), /* @__PURE__ */ u(s.Control, { children: /* @__PURE__ */ u(s.Indicator, {}) })]
-							}), /* @__PURE__ */ u(n, { className: "w-full" })]
-						})
-					}),
-					x.includes("light") && /* @__PURE__ */ u(s, {
-						value: "light",
-						className: l("mt-0 px-4 pb-4 pt-3 rounded-xl", "border border-transparent data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10", g === "transparent" ? "bg-surface" : "bg-surface-secondary"),
-						children: /* @__PURE__ */ d(s.Content, {
-							className: "gap-2",
-							children: [/* @__PURE__ */ d("div", {
-								className: "flex gap-2 justify-between",
-								children: [/* @__PURE__ */ d(o, {
-									className: "flex gap-2 items-center",
-									children: [/* @__PURE__ */ u(m, { className: "text-muted" }), v.settings.light]
-								}), /* @__PURE__ */ u(s.Control, { children: /* @__PURE__ */ u(s.Indicator, {}) })]
-							}), /* @__PURE__ */ u(t, { className: "w-full" })]
-						})
-					}),
-					x.includes("dark") && /* @__PURE__ */ u(s, {
-						value: "dark",
-						className: l("mt-0 px-4 pb-4 pt-3 rounded-xl", "border border-transparent data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10", g === "transparent" ? "bg-surface" : "bg-surface-secondary"),
-						children: /* @__PURE__ */ d(s.Content, {
-							className: "gap-2",
-							children: [/* @__PURE__ */ d("div", {
-								className: "flex gap-2 justify-between",
-								children: [/* @__PURE__ */ d(o, {
-									className: "flex gap-2 items-center",
-									children: [/* @__PURE__ */ u(p, { className: "text-muted" }), v.settings.dark]
-								}), /* @__PURE__ */ u(s.Control, { children: /* @__PURE__ */ u(s.Indicator, {}) })]
-							}), /* @__PURE__ */ u(e, { className: "w-full" })]
-						})
-					})
-				]
-			})
-		})] })
-	})] });
-}
-//#endregion
-export { h as Appearance };