@sublimee/auth-ui 0.1.0 → 0.1.12

package/src/animations.css

@@ -0,0 +1,52 @@
+/**
+ * @sublimee/auth-ui runtime animations
+ *
+ * Optional legacy export.
+ * Most consumers should not need to import this file because auth-ui now
+ * injects its runtime button styles automatically.
+ */
+
+@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) {
+  .animate-sublime-button-press-release {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+
+  .sublime-button__spinner {
+    animation-duration: 1.6s !important;
+  }
+}

package/src/base-button.stories.tsx

@@ -0,0 +1,96 @@
+import type { Story } from '@ladle/react';
+
+import { BaseButton } from './base-button';
+import type { ButtonVariant } from './types';
+
+export default {
+  title: 'A Base Button',
+};
+
+interface BaseButtonStoryProps {
+  children: string;
+  disabled: boolean;
+  isIconOnly: boolean;
+  loading: boolean;
+  variant: ButtonVariant;
+}
+
+export const Default: Story<BaseButtonStoryProps> = ({
+  children,
+  disabled,
+  isIconOnly,
+  loading,
+  variant,
+}) => (
+  <div className="flex flex-wrap items-center gap-4">
+    <BaseButton
+      disabled={disabled}
+      isIconOnly={isIconOnly}
+      loading={loading}
+      variant={variant}
+      aria-label={isIconOnly ? children : undefined}
+    >
+      {isIconOnly ? <span aria-hidden="true">G</span> : children}
+    </BaseButton>
+
+    <BaseButton
+      disabled={disabled}
+      loading={loading}
+      isIconOnly
+      variant="secondary"
+      aria-label="Quick action"
+    >
+      <span aria-hidden="true">+</span>
+    </BaseButton>
+  </div>
+);
+
+Default.args = {
+  children: 'Continue',
+  disabled: false,
+  isIconOnly: false,
+  loading: false,
+  variant: 'secondary',
+};
+
+Default.argTypes = {
+  variant: {
+    control: { type: 'select' },
+    options: ['primary', 'secondary'],
+  },
+  children: {
+    control: { type: 'text' },
+  },
+};
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-4 items-start">
+    <div className="space-y-2">
+      <p className="text-sm font-medium text-[var(--sublime-color-text-muted)]">Primary</p>
+      <BaseButton variant="primary">Continue with email</BaseButton>
+    </div>
+
+    <div className="space-y-2">
+      <p className="text-sm font-medium text-[var(--sublime-color-text-muted)]">Secondary</p>
+      <BaseButton variant="secondary">Continue with email</BaseButton>
+    </div>
+  </div>
+);
+
+export const States: Story = () => (
+  <div className="flex flex-col gap-4 items-start">
+    <BaseButton>Default</BaseButton>
+    <BaseButton disabled>Disabled</BaseButton>
+    <BaseButton loading>Saving changes</BaseButton>
+  </div>
+);
+
+export const DarkMode: Story = () => (
+  <div className="dark bg-[var(--sublime-color-surface-0)] p-8 rounded-lg">
+    <div className="flex flex-col gap-4 items-start">
+      <BaseButton variant="primary">Primary</BaseButton>
+      <BaseButton variant="secondary">Secondary</BaseButton>
+      <BaseButton loading variant="secondary">Loading</BaseButton>
+    </div>
+  </div>
+);

package/src/base-button.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { Button } from '@base-ui/react/button';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+import { ButtonLoadingIndicator } from './button-loading-indicator';
+import { useButtonAnimation } from './use-button-animation';
+import { useAuthUiRuntimeStyles } from './runtime-styles';
+import type {
+  ButtonAnimation,
+  ButtonLoadingAnimation,
+  ButtonVariant,
+} from './types';
+
+interface BaseButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+  animation?: ButtonAnimation;
+  isIconOnly?: boolean;
+  leadingVisual?: ReactNode;
+  loading?: boolean;
+  loadingAnimation?: ButtonLoadingAnimation;
+  onClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];
+  variant?: ButtonVariant;
+}
+
+type EventHandler<Event> = ((event: Event) => void) | undefined;
+
+function mergeClassNames(...classNames: Array<string | undefined>): string {
+  return classNames.filter(Boolean).join(' ');
+}
+
+function composeEventHandlers<Event>(
+  internalHandler: EventHandler<Event>,
+  externalHandler: EventHandler<Event>
+): EventHandler<Event> {
+  if (!internalHandler) {
+    return externalHandler;
+  }
+
+  if (!externalHandler) {
+    return internalHandler;
+  }
+
+  return (event: Event) => {
+    internalHandler(event);
+    externalHandler(event);
+  };
+}
+
+export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
+  function BaseButton(props, forwardedRef) {
+    const {
+      animation = 'press',
+      'aria-busy': ariaBusy,
+      children,
+      className,
+      disabled = false,
+      isIconOnly = false,
+      leadingVisual,
+      loading = false,
+      loadingAnimation = 'spinner',
+      type = 'button',
+      variant = 'secondary',
+      onBlur,
+      onKeyDown,
+      onKeyUp,
+      onMouseDown,
+      onMouseLeave,
+      onMouseUp,
+      onTouchEnd,
+      onTouchStart,
+      ...otherProps
+    } = props;
+
+    useAuthUiRuntimeStyles();
+
+    const { animationClassName, eventHandlers } = useButtonAnimation(
+      disabled || loading ? null : animation
+    );
+
+    const mergedClassName = mergeClassNames(
+      'sublime-button',
+      `sublime-button--${variant}`,
+      animationClassName,
+      className
+    );
+
+    const visualContent = loading
+      ? <ButtonLoadingIndicator animation={loadingAnimation} size={18} />
+      : leadingVisual ?? (isIconOnly ? children : undefined);
+
+    const labelContent = isIconOnly ? null : children;
+
+    return (
+      <Button
+        ref={forwardedRef}
+        type={type}
+        disabled={disabled || loading}
+        className={mergedClassName}
+        data-icon-only={isIconOnly ? 'true' : undefined}
+        data-loading={loading ? 'true' : undefined}
+        aria-busy={loading ? true : ariaBusy}
+        {...otherProps}
+        onBlur={composeEventHandlers(eventHandlers.onBlur, onBlur)}
+        onKeyDown={composeEventHandlers(eventHandlers.onKeyDown, onKeyDown)}
+        onKeyUp={composeEventHandlers(eventHandlers.onKeyUp, onKeyUp)}
+        onMouseDown={composeEventHandlers(eventHandlers.onMouseDown, onMouseDown)}
+        onMouseLeave={composeEventHandlers(eventHandlers.onMouseLeave, onMouseLeave)}
+        onMouseUp={composeEventHandlers(eventHandlers.onMouseUp, onMouseUp)}
+        onTouchEnd={composeEventHandlers(eventHandlers.onTouchEnd, onTouchEnd)}
+        onTouchStart={composeEventHandlers(eventHandlers.onTouchStart, onTouchStart)}
+      >
+        <span className="sublime-button__content">
+          {visualContent ? (
+            <span className="sublime-button__visual">{visualContent}</span>
+          ) : null}
+          {labelContent !== null && labelContent !== undefined ? (
+            <span className="sublime-button__label">{labelContent}</span>
+          ) : null}
+        </span>
+      </Button>
+    );
+  }
+);

package/src/button-loading-indicator.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+import { SpinnerIcon } from './icons';
+import type { ButtonLoadingAnimation } from './types';
+
+interface ButtonLoadingIndicatorProps {
+  animation?: ButtonLoadingAnimation;
+  size?: number;
+}
+
+interface LoadingIndicatorVisualProps {
+  size: number;
+}
+
+function SpinnerLoadingIndicator({ size }: LoadingIndicatorVisualProps) {
+  return <SpinnerIcon size={size} className="sublime-button__spinner" />;
+}
+
+const LOADING_INDICATORS: Record<
+  ButtonLoadingAnimation,
+  (props: LoadingIndicatorVisualProps) => ReactNode
+> = {
+  spinner: SpinnerLoadingIndicator,
+};
+
+export function ButtonLoadingIndicator({
+  animation = 'spinner',
+  size = 18,
+}: ButtonLoadingIndicatorProps) {
+  const LoadingIndicator = LOADING_INDICATORS[animation];
+
+  return <LoadingIndicator size={size} />;
+}

package/src/icons.tsx

@@ -1,13 +1,10 @@
-'use client';
-
 import type { OAuthIconsProps } from './types';
 
 /**
  * Validates and sanitizes icon size (minimum 1px)
  */
-function getSafeSize(size: number | undefined): number {
-  const safeSize = size ?? 24;
-  return Math.max(1, safeSize);
+function getSafeSize(size: number | undefined, defaultSize = 24): number {
+  return Math.max(1, size ?? defaultSize);
 }
 
 /**
@@ -16,6 +13,7 @@ function getSafeSize(size: number | undefined): number {
  */
 export function GoogleIcon({ size, className }: OAuthIconsProps) {
   const safeSize = getSafeSize(size);
+
   return (
     <svg
       width={safeSize}
@@ -23,8 +21,8 @@ export function GoogleIcon({ size, className }: OAuthIconsProps) {
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={className}
       aria-hidden="true"
+      className={className}
     >
       <path
         d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
@@ -52,6 +50,7 @@ export function GoogleIcon({ size, className }: OAuthIconsProps) {
  */
 export function DiscordIcon({ size, className }: OAuthIconsProps) {
   const safeSize = getSafeSize(size);
+
   return (
     <svg
       width={safeSize}
@@ -59,8 +58,8 @@ export function DiscordIcon({ size, className }: OAuthIconsProps) {
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={className}
       aria-hidden="true"
+      className={className}
     >
       <path
         d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
@@ -71,48 +70,36 @@ export function DiscordIcon({ size, className }: OAuthIconsProps) {
 }
 
 /**
- * Spinner Icon for loading state
+ * Spinner Icon for loading state.
+ * Motion is applied through package runtime CSS so the icon stays responsive.
  */
 export function SpinnerIcon({ size, className }: OAuthIconsProps) {
-  // Spinner defaults to 20px instead of 24px
-  const safeSize = size ?? 20;
-  const finalSize = Math.max(1, safeSize);
+  const safeSize = getSafeSize(size, 20);
+
   return (
     <svg
-      width={finalSize}
-      height={finalSize}
+      width={safeSize}
+      height={safeSize}
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={className}
       aria-hidden="true"
+      className={className}
     >
       <circle
         cx="12"
         cy="12"
-        r="10"
+        r="9"
         stroke="currentColor"
-        strokeWidth="4"
-        strokeLinecap="round"
-        strokeDasharray="60"
-        strokeDashoffset="20"
-        opacity="0.25"
+        strokeWidth="3"
+        opacity="0.22"
       />
       <path
-        d="M12 2C6.477 2 2 6.477 2 12"
+        d="M12 3a9 9 0 0 1 9 9"
         stroke="currentColor"
-        strokeWidth="4"
+        strokeWidth="3"
         strokeLinecap="round"
-      >
-        <animateTransform
-          attributeName="transform"
-          type="rotate"
-          from="0 12 12"
-          to="360 12 12"
-          dur="1s"
-          repeatCount="indefinite"
-        />
-      </path>
+      />
     </svg>
   );
-}
+}

package/src/index.ts

@@ -1,33 +1,38 @@
 /**
  * @sublimee/auth-ui
- * Headless authentication UI components for Sublime
+ * Ready-to-use authentication UI components for Sublime.
  *
- * Design Philosophy:
- * -----------------
- * "Headless but sensible"
+ * Philosophy:
+ * -----------
+ * Auth components in this package are meant to be visible, polished,
+ * and useful on first render. They are semantic and adaptable, not
+ * intentionally bare or headless.
  *
- * Our components are built on top of base-ui primitives, which means:
- * - We inherit base-ui's accessibility defaults (focus states, keyboard nav, ARIA)
- * - We ADD sensible UX defaults (cursor-pointer, disabled states)
- * - We DON'T impose visual opinions - you control 100% of styling via className
- * - You get a solid, accessible foundation that looks exactly how you want
+ * Quick Start:
+ * -----------
+ * ```tsx
+ * import '@sublimee/tokens/tokens.css';
+ * import { OAuthButton } from '@sublimee/auth-ui';
  *
- * This approach solves recurring UI issues (like cursor:pointer) once and for all,
- * while preserving the flexibility to style however you need.
+ * <OAuthButton provider="google" />
+ * <OAuthButton provider="discord" variant="primary" loading />
+ * ```
  *
- * Built with base-ui for maximum flexibility and composability.
+ * The package injects its runtime button styles automatically so the
+ * default experience stays zero-setup for consumers.
+ *
+ * @packageDocumentation
  */
 
-// Components
 export { OAuthButton } from './oauth-button';
-export { default } from './oauth-button';
-
-// Icons
-export { GoogleIcon, DiscordIcon, SpinnerIcon } from './icons';
-
-// Types
+export { useButtonAnimation } from './use-button-animation';
+export { GoogleIcon, DiscordIcon } from './icons';
 export type {
   OAuthProvider,
   OAuthButtonProps,
   OAuthIconsProps,
-} from './types';
+  ButtonVariant,
+  ButtonAnimation,
+  ButtonLoadingAnimation,
+  UseButtonAnimationResult,
+} from './types';

package/src/oauth-button.stories.tsx

@@ -0,0 +1,124 @@
+import type { Story } from '@ladle/react';
+
+import { OAuthButton } from './oauth-button';
+import type { OAuthProvider, ButtonVariant } from './types';
+
+export default {
+  title: 'B Auth Button',
+};
+
+/**
+ * OAuthButton stories
+ *
+ * Semantic OAuth buttons with curated motion and built-in loading behavior.
+ * These components adapt to your theme via CSS custom properties.
+ */
+
+interface OAuthButtonStoryProps {
+  provider: OAuthProvider;
+  variant: ButtonVariant;
+  disabled: boolean;
+  loading: boolean;
+  label: string;
+}
+
+export const Default: Story<OAuthButtonStoryProps> = ({
+  provider,
+  variant,
+  disabled,
+  loading,
+  label,
+}) => (
+  <div className="flex flex-wrap items-center gap-4">
+    <OAuthButton
+      provider={provider}
+      variant={variant}
+      disabled={disabled}
+      loading={loading}
+    >
+      {label || undefined}
+    </OAuthButton>
+
+    <OAuthButton
+      provider={provider}
+      variant="secondary"
+      disabled={disabled}
+      loading={loading}
+    >
+      {null}
+    </OAuthButton>
+  </div>
+);
+
+Default.args = {
+  provider: 'google',
+  variant: 'secondary',
+  disabled: false,
+  loading: false,
+  label: '',
+};
+
+Default.argTypes = {
+  provider: {
+    control: { type: 'select' },
+    options: ['google', 'discord'],
+  },
+  variant: {
+    control: { type: 'select' },
+    options: ['primary', 'secondary'],
+  },
+  label: {
+    control: { type: 'text' },
+  },
+};
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-4 items-start">
+    <div className="space-y-2">
+      <p className="text-sm font-medium text-[var(--sublime-color-text-muted)]">Primary</p>
+      <div className="flex flex-wrap items-center gap-4">
+        <OAuthButton provider="google" variant="primary" />
+        <OAuthButton provider="discord" variant="primary" />
+      </div>
+    </div>
+
+    <div className="space-y-2">
+      <p className="text-sm font-medium text-[var(--sublime-color-text-muted)]">Secondary (Default)</p>
+      <div className="flex flex-wrap items-center gap-4">
+        <OAuthButton provider="google" variant="secondary" />
+        <OAuthButton provider="discord" variant="secondary" />
+      </div>
+    </div>
+  </div>
+);
+
+export const States: Story = () => (
+  <div className="flex flex-col gap-4 items-start">
+    <div className="space-y-2">
+      <p className="text-sm font-medium text-[var(--sublime-color-text-muted)]">Default</p>
+      <OAuthButton provider="google" />
+    </div>
+
+    <div className="space-y-2">
+      <p className="text-sm font-medium text-[var(--sublime-color-text-muted)]">Disabled</p>
+      <OAuthButton provider="google" disabled />
+    </div>
+
+    <div className="space-y-2">
+      <p className="text-sm font-medium text-[var(--sublime-color-text-muted)]">Loading</p>
+      <OAuthButton provider="google" loading />
+    </div>
+  </div>
+);
+
+export const DarkMode: Story = () => (
+  <div className="dark bg-[var(--sublime-color-surface-0)] p-8 rounded-lg">
+    <div className="flex flex-col gap-4 items-start">
+      <p className="text-[var(--sublime-color-text-primary)] mb-4">Dark Mode Preview</p>
+
+      <OAuthButton provider="google" variant="primary" />
+      <OAuthButton provider="google" variant="secondary" />
+      <OAuthButton provider="discord" variant="secondary" loading />
+    </div>
+  </div>
+);