@sublimee/auth-ui 0.1.0 → 0.1.12

package/src/oauth-button.tsx

@@ -1,139 +1,80 @@
 'use client';
 
-import { forwardRef, useMemo } from 'react';
-import { Button } from '@base-ui/react/button';
+import { forwardRef } from 'react';
+
+import { BaseButton } from './base-button';
+import { DiscordIcon, GoogleIcon } from './icons';
 import type { OAuthButtonProps, OAuthProvider } from './types';
-import { GoogleIcon, DiscordIcon, SpinnerIcon } from './icons';
 
-/**
- * Maps OAuth providers to their display names
- */
 const PROVIDER_NAMES: Record<OAuthProvider, string> = {
   google: 'Google',
   discord: 'Discord',
 };
 
-/**
- * Returns the appropriate icon component for the provider
- */
-function getProviderIcon(provider: OAuthProvider) {
-  switch (provider) {
-    case 'google':
-      return GoogleIcon;
-    case 'discord':
-      return DiscordIcon;
-    default:
-      return () => null;
-  }
-}
-
-/**
- * Sensible defaults that every button should have.
- * These are UX fundamentals that don't affect visual design.
- */
-const SENSIBLE_DEFAULTS: readonly string[] = ['cursor-pointer'];
-
-/**
- * Merges sensible default classes with user-provided classes.
- * Prevents duplicate cursor classes if user already specified them.
- */
-function mergeButtonClasses(userClassName: string | undefined, isDisabled: boolean): string {
-  const userClasses = userClassName?.trim() ?? '';
-
-  // Filter out defaults that user already specified to avoid duplicates
-  const neededDefaults = SENSIBLE_DEFAULTS.filter(
-    defaultClass => !userClasses.includes(defaultClass)
-  );
-
-  // Add disabled cursor class if needed and not already present
-  if (isDisabled && !userClasses.includes('cursor-not-allowed')) {
-    neededDefaults.push('cursor-not-allowed');
-  }
-
-  if (neededDefaults.length === 0) {
-    return userClasses;
-  }
+const PROVIDER_ICONS: Record<OAuthProvider, typeof GoogleIcon> = {
+  google: GoogleIcon,
+  discord: DiscordIcon,
+};
 
-  return `${neededDefaults.join(' ')} ${userClasses}`.trim();
+function mergeClassNames(...classNames: Array<string | undefined>): string {
+  return classNames.filter(Boolean).join(' ');
 }
 
 /**
  * OAuthButton component
  *
- * A headless OAuth button built on top of base-ui's Button primitive.
- * Includes sensible defaults (cursor-pointer) while remaining fully
- * customizable via className.
- *
- * Design Philosophy:
- * - We add sensible UX defaults (cursor-pointer, proper disabled states)
- * - We don't impose visual opinions - you control all styling via className
- * - The result is a solid, accessible foundation that looks exactly how you want
+ * Built on top of the shared Sublime button foundation so it inherits
+ * runtime styling, semantic variants, curated press motion, and loading
+ * behavior by default.
  *
  * @example
  * ```tsx
- * // Basic usage - cursor-pointer is automatic
- * <OAuthButton
- *   provider="google"
- *   onClick={signInWithGoogle}
- *   className="flex items-center gap-3 px-6 py-3 bg-white text-gray-900 rounded-lg font-medium"
- * />
- *
- * // Icon only - pass {null} as children
- * <OAuthButton
- *   provider="google"
- *   className="p-3 rounded-full hover:bg-white/10"
- * >
- *   {null}
- * </OAuthButton>
- *
- * // Loading state - cursor-not-allowed is automatic
- * <OAuthButton provider="google" loading className="opacity-50" />
+ * <OAuthButton provider="google" />
+ * <OAuthButton provider="discord" variant="primary" loading />
  * ```
  */
 export const OAuthButton = forwardRef<HTMLButtonElement, OAuthButtonProps>(
   function OAuthButton(props, forwardedRef) {
     const {
+      'aria-label': ariaLabel,
       provider,
       onClick,
       loading = false,
+      loadingAnimation = 'spinner',
+      disabled = false,
+      variant = 'secondary',
+      animation = 'press',
       className,
       children,
-      disabled = false,
       ...otherProps
     } = props;
 
-    const isDisabled = disabled || loading;
-    const Icon = getProviderIcon(provider);
+    const isIconOnly = children === null;
+    const Icon = PROVIDER_ICONS[provider];
     const defaultText = `Continuar con ${PROVIDER_NAMES[provider]}`;
-
-    const mergedClassName = useMemo(
-      () => mergeButtonClasses(className, isDisabled),
-      [className, isDisabled]
-    );
+    const buttonLabel = loading
+      ? children ?? 'Conectando...'
+      : children ?? defaultText;
+    const resolvedAriaLabel = ariaLabel ?? (isIconOnly ? defaultText : undefined);
 
     return (
-      <Button
+      <BaseButton
         ref={forwardedRef}
         onClick={onClick}
-        disabled={isDisabled}
-        aria-busy={loading}
-        className={mergedClassName}
+        disabled={disabled}
+        animation={animation}
+        variant={variant}
+        loading={loading}
+        loadingAnimation={loadingAnimation}
+        isIconOnly={isIconOnly}
+        leadingVisual={<Icon size={20} />}
+        className={mergeClassNames('sublime-auth-button', className)}
+        data-provider={provider}
+        aria-label={resolvedAriaLabel}
         {...otherProps}
       >
-        {loading ? (
-          <>
-            <SpinnerIcon />
-            {children !== null && <span>{children ?? 'Conectando...'}</span>}
-          </>
-        ) : (
-          <>
-            <Icon />
-            {children !== null && <span>{children ?? defaultText}</span>}
-          </>
-        )}
-      </Button>
+        {buttonLabel}
+      </BaseButton>
     );
   }
-);
-
-export default OAuthButton;
+);

package/src/runtime-styles.ts

@@ -0,0 +1,225 @@
+'use client';
+
+import { useInsertionEffect } from 'react';
+
+const AUTH_UI_RUNTIME_STYLE_ID = 'sublime-auth-ui-runtime-styles';
+
+const AUTH_UI_RUNTIME_STYLES = `
+.sublime-button {
+  --sublime-button-gap: var(--sublime-space-3, 0.75rem);
+  --sublime-button-padding-x: var(--sublime-space-button-x, 1rem);
+  --sublime-button-padding-y: var(--sublime-space-button-y, 0.75rem);
+  --sublime-button-height: var(--sublime-size-button-height-md, 2.75rem);
+  --sublime-button-radius: var(--sublime-radius-button, 0.875rem);
+  --sublime-button-font-family: var(--sublime-font-family-sans, ui-sans-serif, system-ui, sans-serif);
+  --sublime-button-font-size: var(--sublime-font-size-sm, 0.875rem);
+  --sublime-button-font-weight: var(--sublime-font-weight-medium, 500);
+  --sublime-button-line-height: var(--sublime-line-height-tight, 1.15);
+  --sublime-button-visual-size: 1.25rem;
+  --sublime-button-transition: var(--sublime-transition-button, background-color 160ms cubic-bezier(0.4, 0, 0.2, 1), border-color 160ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 160ms cubic-bezier(0.4, 0, 0.2, 1), color 160ms cubic-bezier(0.4, 0, 0.2, 1), transform 160ms cubic-bezier(0.4, 0, 0.2, 1));
+  --sublime-button-bg: var(--sublime-color-surface-1, #ffffff);
+  --sublime-button-bg-hover: var(--sublime-color-surface-1-hover, #f8fafc);
+  --sublime-button-bg-active: var(--sublime-color-surface-1-active, #eef2f7);
+  --sublime-button-color: var(--sublime-color-text-primary, #111827);
+  --sublime-button-color-hover: var(--sublime-color-text-primary, #111827);
+  --sublime-button-border: var(--sublime-color-border-primary, #d1d5db);
+  --sublime-button-border-hover: var(--sublime-color-border-primary-hover, #9ca3af);
+  --sublime-button-border-active: var(--sublime-color-border-primary-active, #6b7280);
+  --sublime-button-shadow: var(--sublime-shadow-button, 0 1px 2px rgb(15 23 42 / 0.08));
+  --sublime-button-shadow-hover: var(--sublime-shadow-button-hover, 0 8px 20px rgb(15 23 42 / 0.12));
+  --sublime-button-shadow-active: var(--sublime-shadow-button-active, inset 0 1px 2px rgb(15 23 42 / 0.14));
+  --sublime-button-focus-ring: var(--sublime-color-focus-ring, var(--sublime-color-interactive-accent, #2563eb));
+  --sublime-button-focus-ring-offset: var(--sublime-color-focus-ring-offset, var(--sublime-color-surface-0, #ffffff));
+  position: relative;
+  display: inline-flex;
+  min-height: var(--sublime-button-height);
+  align-items: center;
+  justify-content: center;
+  gap: var(--sublime-button-gap);
+  padding: var(--sublime-button-padding-y) var(--sublime-button-padding-x);
+  border: 1px solid var(--sublime-button-border);
+  border-radius: var(--sublime-button-radius);
+  background: var(--sublime-button-bg);
+  color: var(--sublime-button-color);
+  box-shadow: var(--sublime-button-shadow);
+  font-family: var(--sublime-button-font-family);
+  font-size: var(--sublime-button-font-size);
+  font-weight: var(--sublime-button-font-weight);
+  line-height: var(--sublime-button-line-height);
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  isolation: isolate;
+  overflow: hidden;
+  appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: var(--sublime-button-transition);
+}
+
+.sublime-button:hover:not(:disabled) {
+  background: var(--sublime-button-bg-hover);
+  color: var(--sublime-button-color-hover);
+  border-color: var(--sublime-button-border-hover);
+  box-shadow: var(--sublime-button-shadow-hover);
+}
+
+.sublime-button:active:not(:disabled) {
+  background: var(--sublime-button-bg-active);
+  border-color: var(--sublime-button-border-active);
+  box-shadow: var(--sublime-button-shadow-active);
+}
+
+.sublime-button:focus {
+  outline: none;
+}
+
+.sublime-button:focus-visible {
+  box-shadow:
+    0 0 0 2px var(--sublime-button-focus-ring-offset),
+    0 0 0 4px var(--sublime-button-focus-ring),
+    var(--sublime-button-shadow-hover);
+}
+
+.sublime-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  box-shadow: none;
+}
+
+.sublime-button[data-loading='true'] {
+  cursor: progress;
+}
+
+.sublime-button[data-loading='true']:disabled {
+  opacity: 0.78;
+}
+
+.sublime-button[data-icon-only='true'] {
+  min-width: var(--sublime-button-height);
+  padding-inline: calc(var(--sublime-button-padding-y) + 0.125rem);
+}
+
+.sublime-button__content {
+  display: inline-flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: inherit;
+}
+
+.sublime-button__visual,
+.sublime-button__label {
+  display: inline-flex;
+  align-items: center;
+}
+
+.sublime-button__visual {
+  flex-shrink: 0;
+  justify-content: center;
+  min-width: var(--sublime-button-visual-size);
+}
+
+.sublime-button__visual svg {
+  display: block;
+}
+
+.sublime-button__label {
+  min-width: 0;
+}
+
+.sublime-button--primary {
+  --sublime-button-bg: var(--sublime-color-interactive-primary, #111827);
+  --sublime-button-bg-hover: var(--sublime-color-interactive-primary-hover, #1f2937);
+  --sublime-button-bg-active: var(--sublime-color-interactive-primary-active, #0f172a);
+  --sublime-button-color: var(--sublime-color-interactive-primary-text, #f9fafb);
+  --sublime-button-color-hover: var(--sublime-color-interactive-primary-text, #f9fafb);
+  --sublime-button-border: var(--sublime-color-interactive-primary, #111827);
+  --sublime-button-border-hover: var(--sublime-color-interactive-primary-hover, #1f2937);
+  --sublime-button-border-active: var(--sublime-color-interactive-primary-active, #0f172a);
+}
+
+.sublime-button--secondary {
+  --sublime-button-bg: var(--sublime-color-surface-1, #ffffff);
+  --sublime-button-bg-hover: var(--sublime-color-surface-1-hover, #f8fafc);
+  --sublime-button-bg-active: var(--sublime-color-surface-1-active, #eef2f7);
+  --sublime-button-color: var(--sublime-color-text-primary, #111827);
+  --sublime-button-color-hover: var(--sublime-color-text-primary, #111827);
+  --sublime-button-border: var(--sublime-color-border-primary, #d1d5db);
+  --sublime-button-border-hover: var(--sublime-color-border-primary-hover, #9ca3af);
+  --sublime-button-border-active: var(--sublime-color-border-primary-active, #6b7280);
+}
+
+.sublime-auth-button[data-provider='discord'] .sublime-button__visual {
+  color: #5865f2;
+}
+
+.sublime-auth-button[data-loading='true'] .sublime-button__visual {
+  color: currentColor;
+}
+
+@keyframes sublime-button-press-release {
+  0% {
+    transform: translateY(1px) scale(0.985);
+    box-shadow: var(--sublime-button-shadow-active);
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    box-shadow: var(--sublime-button-shadow);
+  }
+}
+
+@keyframes sublime-button-spinner {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.sublime-button-pressed {
+  transform: translateY(1px) scale(0.985);
+  box-shadow: var(--sublime-button-shadow-active);
+}
+
+.animate-sublime-button-press-release {
+  animation: sublime-button-press-release 180ms var(--sublime-ease-out, cubic-bezier(0, 0, 0.2, 1));
+}
+
+.sublime-button__spinner {
+  animation: sublime-button-spinner 720ms linear infinite;
+  transform-origin: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sublime-button,
+  .animate-sublime-button-press-release {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .sublime-button__spinner {
+    animation-duration: 1.6s !important;
+  }
+}
+`;
+
+export function useAuthUiRuntimeStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    if (document.getElementById(AUTH_UI_RUNTIME_STYLE_ID)) {
+      return;
+    }
+
+    const styleElement = document.createElement('style');
+    styleElement.id = AUTH_UI_RUNTIME_STYLE_ID;
+    styleElement.textContent = AUTH_UI_RUNTIME_STYLES;
+    document.head.prepend(styleElement);
+  }, []);
+}

package/src/types.ts

@@ -1,50 +1,96 @@
-import type { ReactNode } from 'react';
+import type {
+  ButtonHTMLAttributes,
+  MouseEventHandler,
+  ReactNode,
+} from 'react';
 
 export type OAuthProvider = 'google' | 'discord';
 
-export interface OAuthButtonProps {
+export type ButtonVariant = 'primary' | 'secondary';
+
+export type ButtonAnimation = 'press';
+
+export type ButtonLoadingAnimation = 'spinner';
+
+export interface OAuthButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
   /**
-   * The OAuth provider to authenticate with
+   * The OAuth provider to authenticate with.
    */
   provider: OAuthProvider;
 
   /**
-   * Click handler - typically calls supabase.auth.signInWithOAuth
+   * Click handler - typically calls supabase.auth.signInWithOAuth.
    */
-  onClick?: () => void;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
 
   /**
-   * Loading state - shows spinner when true
+   * Loading state - shows the configured loading animation and disables interaction.
    */
   loading?: boolean;
 
   /**
-   * Custom className - use Tailwind for styling
-   * @example "flex items-center gap-2 px-4 py-2 bg-white text-gray-900 rounded-lg"
+   * Loading animation shown while `loading` is true.
+   * @default 'spinner'
    */
-  className?: string;
+  loadingAnimation?: ButtonLoadingAnimation;
 
   /**
-   * Button children - defaults to provider name
-   * Pass `null` for icon-only mode
+   * Visual variant of the button.
+   * - primary: High emphasis, filled background
+   * - secondary: Medium emphasis, bordered (default)
+   * @default 'secondary'
    */
-  children?: ReactNode;
+  variant?: ButtonVariant;
 
   /**
-   * Disable the button
+   * Interaction motion applied on press.
+   * @default 'press'
    */
-  disabled?: boolean;
+  animation?: ButtonAnimation;
+
+  /**
+   * Custom className appended after the built-in runtime classes.
+   */
+  className?: string;
+
+  /**
+   * Button children - defaults to provider name in Spanish.
+   * Pass `null` for icon-only mode.
+   */
+  children?: ReactNode;
 }
 
 export interface OAuthIconsProps {
   /**
-   * Icon size in pixels (min: 1)
+   * Icon size in pixels (min: 1).
    * @default 24
    */
   size?: number;
 
   /**
-   * Custom className
+   * Optional className for icon-specific styling.
    */
   className?: string;
 }
+
+export interface UseButtonAnimationResult {
+  /**
+   * CSS classes to apply for the current animation state.
+   */
+  animationClassName: string;
+
+  /**
+   * Event handlers to attach to the button.
+   */
+  eventHandlers: Pick<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    | 'onBlur'
+    | 'onKeyDown'
+    | 'onKeyUp'
+    | 'onMouseDown'
+    | 'onMouseLeave'
+    | 'onMouseUp'
+    | 'onTouchEnd'
+    | 'onTouchStart'
+  >;
+}

package/src/use-button-animation.ts

@@ -0,0 +1,114 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { KeyboardEvent } from 'react';
+
+import type { ButtonAnimation, UseButtonAnimationResult } from './types';
+
+type AnimationPhase = 'idle' | 'pressed' | 'releasing';
+
+const PRESS_RELEASE_DURATION = 180;
+
+/**
+ * Hook to provide the curated button press animation.
+ *
+ * Handles mouse, touch, and keyboard interaction so motion feedback stays
+ * consistent across the different ways users can activate a button.
+ */
+export function useButtonAnimation(
+  animation: ButtonAnimation | null = 'press'
+): UseButtonAnimationResult {
+  const [phase, setPhase] = useState<AnimationPhase>('idle');
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearExistingTimeout = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      clearExistingTimeout();
+    };
+  }, [clearExistingTimeout]);
+
+  const handlePressStart = useCallback(() => {
+    if (!animation) {
+      return;
+    }
+
+    clearExistingTimeout();
+    setPhase('pressed');
+  }, [animation, clearExistingTimeout]);
+
+  const handlePressEnd = useCallback(() => {
+    if (!animation || phase !== 'pressed') {
+      return;
+    }
+
+    setPhase('releasing');
+
+    timeoutRef.current = setTimeout(() => {
+      setPhase('idle');
+    }, PRESS_RELEASE_DURATION);
+  }, [animation, phase]);
+
+  const handleBlur = useCallback(() => {
+    clearExistingTimeout();
+    setPhase('idle');
+  }, [clearExistingTimeout]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLButtonElement>) => {
+      if (event.repeat) {
+        return;
+      }
+
+      if (event.key === ' ' || event.key === 'Enter') {
+        handlePressStart();
+      }
+    },
+    [handlePressStart]
+  );
+
+  const handleKeyUp = useCallback(
+    (event: KeyboardEvent<HTMLButtonElement>) => {
+      if (event.key === ' ' || event.key === 'Enter') {
+        handlePressEnd();
+      }
+    },
+    [handlePressEnd]
+  );
+
+  const getAnimationClass = (): string => {
+    if (!animation) {
+      return '';
+    }
+
+    if (phase === 'pressed') {
+      return 'sublime-button-pressed';
+    }
+
+    if (phase === 'releasing') {
+      return 'animate-sublime-button-press-release';
+    }
+
+    return '';
+  };
+
+  return {
+    animationClassName: getAnimationClass(),
+    eventHandlers: {
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      onMouseDown: handlePressStart,
+      onMouseLeave: handlePressEnd,
+      onMouseUp: handlePressEnd,
+      onTouchEnd: handlePressEnd,
+      onTouchStart: handlePressStart,
+    },
+  };
+}