@sublimee/auth-ui 0.1.1 → 0.1.12

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,40 +1,96 @@
-import type { ReactNode, ButtonHTMLAttributes } from 'react';
+import type {
+  ButtonHTMLAttributes,
+  MouseEventHandler,
+  ReactNode,
+} from 'react';
 
 export type OAuthProvider = 'google' | 'discord';
 
+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'
+   */
+  loadingAnimation?: ButtonLoadingAnimation;
+
+  /**
+   * Visual variant of the button.
+   * - primary: High emphasis, filled background
+   * - secondary: Medium emphasis, bordered (default)
+   * @default 'secondary'
+   */
+  variant?: ButtonVariant;
+
+  /**
+   * Interaction motion applied on press.
+   * @default 'press'
+   */
+  animation?: ButtonAnimation;
+
+  /**
+   * Custom className appended after the built-in runtime classes.
    */
   className?: string;
 
   /**
-   * Button children - defaults to provider name
-   * Pass `null` for icon-only mode
+   * 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;
+
+  /**
+   * 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,
+    },
+  };
+}