@drmhse/authos-vue 0.1.4 → 0.2.0

package/README.md

@@ -46,10 +46,10 @@ import { SignIn, SignedIn, SignedOut, UserButton } from '@drmhse/authos-vue';
 ```
 
 That's it. You now have:
-- ✅ Email/password authentication with MFA support
-- ✅ Automatic session management
-- ✅ User dropdown with logout
-- ✅ Conditional rendering based on auth state
+- Email/password authentication with MFA support
+- Automatic session management
+- User dropdown with logout
+- Conditional rendering based on auth state
 
 ## Usage Modes
 
@@ -167,6 +167,22 @@ Registration form for new users.
 <SignUp @success="console.log('Check your email!')" @error="console.error" />
 ```
 
+### MagicLinkSignIn
+
+Sign-in component for Magic Links (passwordless).
+
+```vue
+<MagicLinkSignIn @success="console.log('Magic link sent!')" />
+```
+
+### PasskeySignIn
+
+Sign-in component for Passkeys (WebAuthn).
+
+```vue
+<PasskeySignIn @success="console.log('Authenticated!')" />
+```
+
 ### SignedIn / SignedOut
 
 Conditional rendering based on authentication state. Inspired by Clerk's API.

package/dist/index.d.mts

@@ -40,6 +40,53 @@ interface AuthOSContext {
  * }));
  * ```
  */
+/**
+ * Appearance variables for customizing the visual theme.
+ * All properties are optional and use CSS color/size values.
+ */
+interface AppearanceVariables {
+    /** Primary brand color (e.g., '#6366f1') */
+    colorPrimary?: string;
+    /** Primary color on hover */
+    colorPrimaryHover?: string;
+    /** Text color on primary background */
+    colorPrimaryForeground?: string;
+    /** Error/danger color */
+    colorDanger?: string;
+    /** Success color */
+    colorSuccess?: string;
+    /** Warning color */
+    colorWarning?: string;
+    /** Main background color */
+    colorBackground?: string;
+    /** Surface/card background color */
+    colorSurface?: string;
+    /** Main text color */
+    colorForeground?: string;
+    /** Muted/secondary text color */
+    colorMuted?: string;
+    /** Border color */
+    colorBorder?: string;
+    /** Input background color */
+    colorInput?: string;
+    /** Input border color */
+    colorInputBorder?: string;
+    /** Focus ring color */
+    colorRing?: string;
+    /** Font family */
+    fontFamily?: string;
+    /** Base font size */
+    fontSize?: string;
+    /** Border radius */
+    borderRadius?: string;
+}
+/**
+ * Appearance configuration for customizing component styling.
+ */
+interface AppearanceOptions {
+    /** CSS variable overrides */
+    variables?: AppearanceVariables;
+}
 interface AuthOSPluginOptions {
     /**
      * Base URL of the AuthOS API service.
@@ -92,6 +139,20 @@ interface AuthOSPluginOptions {
      * @example '/onboarding'
      */
     afterSignUpUrl?: string;
+    /**
+     * Appearance customization options.
+     * Use to override default theme colors, fonts, and styling.
+     * @example
+     * ```ts
+     * appearance: {
+     *   variables: {
+     *     colorPrimary: '#0066cc',
+     *     borderRadius: '0.25rem',
+     *   }
+     * }
+     * ```
+     */
+    appearance?: AppearanceOptions;
 }
 declare const AUTH_OS_INJECTION_KEY: unique symbol;
 /**
@@ -340,6 +401,16 @@ declare const SignUp: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<(error: Error) => void>;
         default: undefined;
     };
+    /** Organization slug for tenant context */
+    orgSlug: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Service slug for tenant attribution (used with orgSlug) */
+    serviceSlug: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }> | vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -353,12 +424,24 @@ declare const SignUp: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<(error: Error) => void>;
         default: undefined;
     };
+    /** Organization slug for tenant context */
+    orgSlug: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Service slug for tenant attribution (used with orgSlug) */
+    serviceSlug: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>> & Readonly<{
     onSuccess?: ((...args: any[]) => any) | undefined;
     onError?: ((...args: any[]) => any) | undefined;
 }>, {
     onSuccess: () => void;
     onError: (error: Error) => void;
+    orgSlug: string;
+    serviceSlug: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 interface OrganizationSwitcherSlotProps {
@@ -492,9 +575,9 @@ declare const OAuthButton: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
-}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}> | vue.VNode<vue.RendererNode, vue.RendererElement, {
+}> | VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>[], {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "redirect"[], "redirect", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     provider: {
@@ -638,4 +721,4 @@ declare const PasskeySignIn: vue.DefineComponent<vue.ExtractPropTypes<{
     showPasswordSignIn: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { AUTH_OS_INJECTION_KEY, type AuthOSContext, type AuthOSPluginOptions, AuthOSProvider, type AuthOSState, MagicLinkSignIn, OAuthButton, type OAuthButtonSlotProps, OrganizationSwitcher, type OrganizationSwitcherSlotProps, PasskeySignIn, Protect, SignIn, type SignInSlotProps, SignUp, type SignUpSlotProps, SignedIn, SignedOut, type SupportedOAuthProvider, UserButton, type UserButtonSlotProps, createAuthOS, useAllPermissions, useAnyPermission, useAuthOS, useOrganization, usePermission, useUser };
+export { AUTH_OS_INJECTION_KEY, type AppearanceOptions, type AppearanceVariables, type AuthOSContext, type AuthOSPluginOptions, AuthOSProvider, type AuthOSState, MagicLinkSignIn, OAuthButton, type OAuthButtonSlotProps, OrganizationSwitcher, type OrganizationSwitcherSlotProps, PasskeySignIn, Protect, SignIn, type SignInSlotProps, SignUp, type SignUpSlotProps, SignedIn, SignedOut, type SupportedOAuthProvider, UserButton, type UserButtonSlotProps, createAuthOS, useAllPermissions, useAnyPermission, useAuthOS, useOrganization, usePermission, useUser };

package/dist/index.d.ts

@@ -40,6 +40,53 @@ interface AuthOSContext {
  * }));
  * ```
  */
+/**
+ * Appearance variables for customizing the visual theme.
+ * All properties are optional and use CSS color/size values.
+ */
+interface AppearanceVariables {
+    /** Primary brand color (e.g., '#6366f1') */
+    colorPrimary?: string;
+    /** Primary color on hover */
+    colorPrimaryHover?: string;
+    /** Text color on primary background */
+    colorPrimaryForeground?: string;
+    /** Error/danger color */
+    colorDanger?: string;
+    /** Success color */
+    colorSuccess?: string;
+    /** Warning color */
+    colorWarning?: string;
+    /** Main background color */
+    colorBackground?: string;
+    /** Surface/card background color */
+    colorSurface?: string;
+    /** Main text color */
+    colorForeground?: string;
+    /** Muted/secondary text color */
+    colorMuted?: string;
+    /** Border color */
+    colorBorder?: string;
+    /** Input background color */
+    colorInput?: string;
+    /** Input border color */
+    colorInputBorder?: string;
+    /** Focus ring color */
+    colorRing?: string;
+    /** Font family */
+    fontFamily?: string;
+    /** Base font size */
+    fontSize?: string;
+    /** Border radius */
+    borderRadius?: string;
+}
+/**
+ * Appearance configuration for customizing component styling.
+ */
+interface AppearanceOptions {
+    /** CSS variable overrides */
+    variables?: AppearanceVariables;
+}
 interface AuthOSPluginOptions {
     /**
      * Base URL of the AuthOS API service.
@@ -92,6 +139,20 @@ interface AuthOSPluginOptions {
      * @example '/onboarding'
      */
     afterSignUpUrl?: string;
+    /**
+     * Appearance customization options.
+     * Use to override default theme colors, fonts, and styling.
+     * @example
+     * ```ts
+     * appearance: {
+     *   variables: {
+     *     colorPrimary: '#0066cc',
+     *     borderRadius: '0.25rem',
+     *   }
+     * }
+     * ```
+     */
+    appearance?: AppearanceOptions;
 }
 declare const AUTH_OS_INJECTION_KEY: unique symbol;
 /**
@@ -340,6 +401,16 @@ declare const SignUp: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<(error: Error) => void>;
         default: undefined;
     };
+    /** Organization slug for tenant context */
+    orgSlug: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Service slug for tenant attribution (used with orgSlug) */
+    serviceSlug: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }> | vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -353,12 +424,24 @@ declare const SignUp: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<(error: Error) => void>;
         default: undefined;
     };
+    /** Organization slug for tenant context */
+    orgSlug: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Service slug for tenant attribution (used with orgSlug) */
+    serviceSlug: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>> & Readonly<{
     onSuccess?: ((...args: any[]) => any) | undefined;
     onError?: ((...args: any[]) => any) | undefined;
 }>, {
     onSuccess: () => void;
     onError: (error: Error) => void;
+    orgSlug: string;
+    serviceSlug: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 interface OrganizationSwitcherSlotProps {
@@ -492,9 +575,9 @@ declare const OAuthButton: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
-}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}> | vue.VNode<vue.RendererNode, vue.RendererElement, {
+}> | VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>[], {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "redirect"[], "redirect", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     provider: {
@@ -638,4 +721,4 @@ declare const PasskeySignIn: vue.DefineComponent<vue.ExtractPropTypes<{
     showPasswordSignIn: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { AUTH_OS_INJECTION_KEY, type AuthOSContext, type AuthOSPluginOptions, AuthOSProvider, type AuthOSState, MagicLinkSignIn, OAuthButton, type OAuthButtonSlotProps, OrganizationSwitcher, type OrganizationSwitcherSlotProps, PasskeySignIn, Protect, SignIn, type SignInSlotProps, SignUp, type SignUpSlotProps, SignedIn, SignedOut, type SupportedOAuthProvider, UserButton, type UserButtonSlotProps, createAuthOS, useAllPermissions, useAnyPermission, useAuthOS, useOrganization, usePermission, useUser };
+export { AUTH_OS_INJECTION_KEY, type AppearanceOptions, type AppearanceVariables, type AuthOSContext, type AuthOSPluginOptions, AuthOSProvider, type AuthOSState, MagicLinkSignIn, OAuthButton, type OAuthButtonSlotProps, OrganizationSwitcher, type OrganizationSwitcherSlotProps, PasskeySignIn, Protect, SignIn, type SignInSlotProps, SignUp, type SignUpSlotProps, SignedIn, SignedOut, type SupportedOAuthProvider, UserButton, type UserButtonSlotProps, createAuthOS, useAllPermissions, useAnyPermission, useAuthOS, useOrganization, usePermission, useUser };