@sublimee/auth-ui 0.1.0 → 0.1.1

package/dist/index.d.mts

@@ -1,9 +1,9 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type OAuthProvider = 'google' | 'discord';
-interface OAuthButtonProps {
+interface OAuthButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
     /**
      * The OAuth provider to authenticate with
      */
@@ -26,10 +26,6 @@ interface OAuthButtonProps {
      * Pass `null` for icon-only mode
      */
     children?: ReactNode;
-    /**
-     * Disable the button
-     */
-    disabled?: boolean;
 }
 interface OAuthIconsProps {
     /**
@@ -37,10 +33,6 @@ interface OAuthIconsProps {
      * @default 24
      */
     size?: number;
-    /**
-     * Custom className
-     */
-    className?: string;
 }
 
 /**
@@ -82,15 +74,15 @@ declare const OAuthButton: react.ForwardRefExoticComponent<OAuthButtonProps & re
  * Google Logo Icon
  * Official Google "G" logo for OAuth authentication
  */
-declare function GoogleIcon({ size, className }: OAuthIconsProps): react_jsx_runtime.JSX.Element;
+declare function GoogleIcon({ size }: OAuthIconsProps): react_jsx_runtime.JSX.Element;
 /**
  * Discord Logo Icon
  * Official Discord logo for OAuth authentication
  */
-declare function DiscordIcon({ size, className }: OAuthIconsProps): react_jsx_runtime.JSX.Element;
+declare function DiscordIcon({ size }: OAuthIconsProps): react_jsx_runtime.JSX.Element;
 /**
  * Spinner Icon for loading state
  */
-declare function SpinnerIcon({ size, className }: OAuthIconsProps): react_jsx_runtime.JSX.Element;
+declare function SpinnerIcon({ size }: OAuthIconsProps): react_jsx_runtime.JSX.Element;
 
-export { DiscordIcon, GoogleIcon, OAuthButton, type OAuthButtonProps, type OAuthIconsProps, type OAuthProvider, SpinnerIcon, OAuthButton as default };
+export { DiscordIcon, GoogleIcon, OAuthButton, type OAuthButtonProps, type OAuthIconsProps, type OAuthProvider, SpinnerIcon };

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type OAuthProvider = 'google' | 'discord';
-interface OAuthButtonProps {
+interface OAuthButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
     /**
      * The OAuth provider to authenticate with
      */
@@ -26,10 +26,6 @@ interface OAuthButtonProps {
      * Pass `null` for icon-only mode
      */
     children?: ReactNode;
-    /**
-     * Disable the button
-     */
-    disabled?: boolean;
 }
 interface OAuthIconsProps {
     /**
@@ -37,10 +33,6 @@ interface OAuthIconsProps {
      * @default 24
      */
     size?: number;
-    /**
-     * Custom className
-     */
-    className?: string;
 }
 
 /**
@@ -82,15 +74,15 @@ declare const OAuthButton: react.ForwardRefExoticComponent<OAuthButtonProps & re
  * Google Logo Icon
  * Official Google "G" logo for OAuth authentication
  */
-declare function GoogleIcon({ size, className }: OAuthIconsProps): react_jsx_runtime.JSX.Element;
+declare function GoogleIcon({ size }: OAuthIconsProps): react_jsx_runtime.JSX.Element;
 /**
  * Discord Logo Icon
  * Official Discord logo for OAuth authentication
  */
-declare function DiscordIcon({ size, className }: OAuthIconsProps): react_jsx_runtime.JSX.Element;
+declare function DiscordIcon({ size }: OAuthIconsProps): react_jsx_runtime.JSX.Element;
 /**
  * Spinner Icon for loading state
  */
-declare function SpinnerIcon({ size, className }: OAuthIconsProps): react_jsx_runtime.JSX.Element;
+declare function SpinnerIcon({ size }: OAuthIconsProps): react_jsx_runtime.JSX.Element;
 
-export { DiscordIcon, GoogleIcon, OAuthButton, type OAuthButtonProps, type OAuthIconsProps, type OAuthProvider, SpinnerIcon, OAuthButton as default };
+export { DiscordIcon, GoogleIcon, OAuthButton, type OAuthButtonProps, type OAuthIconsProps, type OAuthProvider, SpinnerIcon };

package/dist/index.js

@@ -23,8 +23,7 @@ __export(index_exports, {
   DiscordIcon: () => DiscordIcon,
   GoogleIcon: () => GoogleIcon,
   OAuthButton: () => OAuthButton,
-  SpinnerIcon: () => SpinnerIcon,
-  default: () => oauth_button_default
+  SpinnerIcon: () => SpinnerIcon
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -34,11 +33,10 @@ var import_button = require("@base-ui/react/button");
 
 // src/icons.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function getSafeSize(size) {
-  const safeSize = size ?? 24;
-  return Math.max(1, safeSize);
+function getSafeSize(size, defaultSize = 24) {
+  return Math.max(1, size ?? defaultSize);
 }
-function GoogleIcon({ size, className }) {
+function GoogleIcon({ size }) {
   const safeSize = getSafeSize(size);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
@@ -48,7 +46,6 @@ function GoogleIcon({ size, className }) {
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className,
       "aria-hidden": "true",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -83,7 +80,7 @@ function GoogleIcon({ size, className }) {
     }
   );
 }
-function DiscordIcon({ size, className }) {
+function DiscordIcon({ size }) {
   const safeSize = getSafeSize(size);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "svg",
@@ -93,7 +90,6 @@ function DiscordIcon({ size, className }) {
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className,
       "aria-hidden": "true",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "path",
@@ -105,18 +101,16 @@ function DiscordIcon({ size, className }) {
     }
   );
 }
-function SpinnerIcon({ size, className }) {
-  const safeSize = size ?? 20;
-  const finalSize = Math.max(1, safeSize);
+function SpinnerIcon({ size }) {
+  const safeSize = getSafeSize(size, 20);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
     {
-      width: finalSize,
-      height: finalSize,
+      width: safeSize,
+      height: safeSize,
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className,
       "aria-hidden": "true",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -164,16 +158,10 @@ var PROVIDER_NAMES = {
   google: "Google",
   discord: "Discord"
 };
-function getProviderIcon(provider) {
-  switch (provider) {
-    case "google":
-      return GoogleIcon;
-    case "discord":
-      return DiscordIcon;
-    default:
-      return () => null;
-  }
-}
+var PROVIDER_ICONS = {
+  google: GoogleIcon,
+  discord: DiscordIcon
+};
 var SENSIBLE_DEFAULTS = ["cursor-pointer"];
 function mergeButtonClasses(userClassName, isDisabled) {
   const userClasses = userClassName?.trim() ?? "";
@@ -200,12 +188,9 @@ var OAuthButton = (0, import_react.forwardRef)(
       ...otherProps
     } = props;
     const isDisabled = disabled || loading;
-    const Icon = getProviderIcon(provider);
+    const Icon = PROVIDER_ICONS[provider];
     const defaultText = `Continuar con ${PROVIDER_NAMES[provider]}`;
-    const mergedClassName = (0, import_react.useMemo)(
-      () => mergeButtonClasses(className, isDisabled),
-      [className, isDisabled]
-    );
+    const mergedClassName = mergeButtonClasses(className, isDisabled);
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_button.Button,
       {
@@ -226,7 +211,6 @@ var OAuthButton = (0, import_react.forwardRef)(
     );
   }
 );
-var oauth_button_default = OAuthButton;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DiscordIcon,

package/dist/index.mjs

@@ -1,14 +1,13 @@
 // src/oauth-button.tsx
-import { forwardRef, useMemo } from "react";
+import { forwardRef } from "react";
 import { Button } from "@base-ui/react/button";
 
 // src/icons.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-function getSafeSize(size) {
-  const safeSize = size ?? 24;
-  return Math.max(1, safeSize);
+function getSafeSize(size, defaultSize = 24) {
+  return Math.max(1, size ?? defaultSize);
 }
-function GoogleIcon({ size, className }) {
+function GoogleIcon({ size }) {
   const safeSize = getSafeSize(size);
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -18,7 +17,6 @@ function GoogleIcon({ size, className }) {
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className,
       "aria-hidden": "true",
       children: [
         /* @__PURE__ */ jsx(
@@ -53,7 +51,7 @@ function GoogleIcon({ size, className }) {
     }
   );
 }
-function DiscordIcon({ size, className }) {
+function DiscordIcon({ size }) {
   const safeSize = getSafeSize(size);
   return /* @__PURE__ */ jsx(
     "svg",
@@ -63,7 +61,6 @@ function DiscordIcon({ size, className }) {
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className,
       "aria-hidden": "true",
       children: /* @__PURE__ */ jsx(
         "path",
@@ -75,18 +72,16 @@ function DiscordIcon({ size, className }) {
     }
   );
 }
-function SpinnerIcon({ size, className }) {
-  const safeSize = size ?? 20;
-  const finalSize = Math.max(1, safeSize);
+function SpinnerIcon({ size }) {
+  const safeSize = getSafeSize(size, 20);
   return /* @__PURE__ */ jsxs(
     "svg",
     {
-      width: finalSize,
-      height: finalSize,
+      width: safeSize,
+      height: safeSize,
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className,
       "aria-hidden": "true",
       children: [
         /* @__PURE__ */ jsx(
@@ -134,16 +129,10 @@ var PROVIDER_NAMES = {
   google: "Google",
   discord: "Discord"
 };
-function getProviderIcon(provider) {
-  switch (provider) {
-    case "google":
-      return GoogleIcon;
-    case "discord":
-      return DiscordIcon;
-    default:
-      return () => null;
-  }
-}
+var PROVIDER_ICONS = {
+  google: GoogleIcon,
+  discord: DiscordIcon
+};
 var SENSIBLE_DEFAULTS = ["cursor-pointer"];
 function mergeButtonClasses(userClassName, isDisabled) {
   const userClasses = userClassName?.trim() ?? "";
@@ -170,12 +159,9 @@ var OAuthButton = forwardRef(
       ...otherProps
     } = props;
     const isDisabled = disabled || loading;
-    const Icon = getProviderIcon(provider);
+    const Icon = PROVIDER_ICONS[provider];
     const defaultText = `Continuar con ${PROVIDER_NAMES[provider]}`;
-    const mergedClassName = useMemo(
-      () => mergeButtonClasses(className, isDisabled),
-      [className, isDisabled]
-    );
+    const mergedClassName = mergeButtonClasses(className, isDisabled);
     return /* @__PURE__ */ jsx2(
       Button,
       {
@@ -196,11 +182,9 @@ var OAuthButton = forwardRef(
     );
   }
 );
-var oauth_button_default = OAuthButton;
 export {
   DiscordIcon,
   GoogleIcon,
   OAuthButton,
-  SpinnerIcon,
-  oauth_button_default as default
+  SpinnerIcon
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sublimee/auth-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Headless authentication UI components for Sublime",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/icons.tsx

@@ -1,21 +1,19 @@
-'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);
 }
 
 /**
  * Google Logo Icon
  * Official Google "G" logo for OAuth authentication
  */
-export function GoogleIcon({ size, className }: OAuthIconsProps) {
+export function GoogleIcon({ size }: OAuthIconsProps) {
   const safeSize = getSafeSize(size);
+
   return (
     <svg
       width={safeSize}
@@ -23,9 +21,9 @@ 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"
     >
+      {/* Colored G paths */}
       <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"
         fill="#4285F4"
@@ -50,7 +48,7 @@ export function GoogleIcon({ size, className }: OAuthIconsProps) {
  * Discord Logo Icon
  * Official Discord logo for OAuth authentication
  */
-export function DiscordIcon({ size, className }: OAuthIconsProps) {
+export function DiscordIcon({ size }: OAuthIconsProps) {
   const safeSize = getSafeSize(size);
   return (
     <svg
@@ -59,7 +57,6 @@ 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"
     >
       <path
@@ -73,18 +70,15 @@ export function DiscordIcon({ size, className }: OAuthIconsProps) {
 /**
  * Spinner Icon for loading state
  */
-export function SpinnerIcon({ size, className }: OAuthIconsProps) {
-  // Spinner defaults to 20px instead of 24px
-  const safeSize = size ?? 20;
-  const finalSize = Math.max(1, safeSize);
+export function SpinnerIcon({ size }: OAuthIconsProps) {
+  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"
     >
       <circle

package/src/index.ts

@@ -20,7 +20,6 @@
 
 // Components
 export { OAuthButton } from './oauth-button';
-export { default } from './oauth-button';
 
 // Icons
 export { GoogleIcon, DiscordIcon, SpinnerIcon } from './icons';

package/src/oauth-button.stories.tsx

@@ -0,0 +1,385 @@
+import type { Story } from "@ladle/react";
+import { useState, useCallback, useRef } from "react";
+import { OAuthButton } from "./oauth-button";
+import type { OAuthProvider } from "./types";
+
+/**
+ * Hook to mimic real button behavior:
+ * - Presses immediately on mousedown (scale down + shadow-inner)
+ * - Stays pressed while holding
+ * - Plays release animation on mouseup (always completes fully)
+ */
+function useRealPress() {
+  const [phase, setPhase] = useState<"idle" | "pressed" | "releasing">("idle");
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const onMouseDown = useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setPhase("pressed");
+  }, []);
+
+  const onMouseUp = useCallback(() => {
+    if (phase !== "pressed") return;
+    setPhase("releasing");
+    timeoutRef.current = setTimeout(() => setPhase("idle"), 200);
+  }, [phase]);
+
+  const onMouseLeave = useCallback(() => {
+    if (phase === "pressed") onMouseUp();
+  }, [phase, onMouseUp]);
+
+  const className =
+    phase === "pressed" ? "scale-[0.96] shadow-inner" :
+    phase === "releasing" ? "animate-button-release" : "";
+
+  return { className, onMouseDown, onMouseUp, onMouseLeave };
+}
+
+/**
+ * OAuthButton stories
+ *
+ * A headless OAuth button with sensible defaults built on base-ui.
+ */
+
+interface OAuthButtonStoryProps {
+  provider: OAuthProvider;
+  disabled: boolean;
+  loading: boolean;
+  label: string;
+}
+
+const baseStyles =
+  "flex items-center justify-center gap-3 px-6 py-3 bg-white text-gray-900 rounded-lg font-medium border border-gray-300 shadow-sm hover:bg-gray-50 hover:border-gray-400 hover:shadow transition-all duration-75 cursor-pointer";
+
+const darkStyles =
+  "dark:bg-gray-900 dark:text-white dark:border-gray-700 dark:hover:bg-gray-800";
+
+export const Default: Story<OAuthButtonStoryProps> = ({
+  provider,
+  disabled,
+  loading,
+  label,
+}) => {
+  const press = useRealPress();
+
+  return (
+    <OAuthButton
+      provider={provider}
+      disabled={disabled}
+      loading={loading}
+      onMouseDown={press.onMouseDown}
+      onMouseUp={press.onMouseUp}
+      onMouseLeave={press.onMouseLeave}
+      className={`${baseStyles} ${darkStyles} ${press.className}`}
+    >
+      {label || undefined}
+    </OAuthButton>
+  );
+};
+
+Default.args = {
+  provider: "google",
+  disabled: false,
+  loading: false,
+  label: "",
+};
+
+Default.argTypes = {
+  provider: {
+    control: { type: "select" },
+    options: ["google", "discord"],
+  },
+  label: {
+    control: { type: "text" },
+  },
+};
+
+export const Disabled: Story = () => (
+  <div className="flex flex-col gap-4">
+    <OAuthButton
+      provider="google"
+      disabled
+      className={`${baseStyles} opacity-60 cursor-not-allowed`}
+    >
+      Google (Disabled)
+    </OAuthButton>
+    <OAuthButton
+      provider="discord"
+      disabled
+      className={`${baseStyles} opacity-60 cursor-not-allowed`}
+    >
+      Discord (Disabled)
+    </OAuthButton>
+  </div>
+);
+
+export const Loading: Story = () => (
+  <div className="flex flex-col gap-4">
+    <OAuthButton provider="google" loading className={baseStyles}>
+      Google (Loading)
+    </OAuthButton>
+    <OAuthButton provider="discord" loading className={baseStyles}>
+      Discord (Loading)
+    </OAuthButton>
+  </div>
+);
+
+export const LongLabel: Story = () => (
+  <div className="flex flex-col gap-4 max-w-md">
+    <OAuthButton provider="google" className={baseStyles}>
+      Sign in with your Google account to continue
+    </OAuthButton>
+    <OAuthButton provider="discord" className={baseStyles}>
+      Connect with Discord for community access and notifications
+    </OAuthButton>
+  </div>
+);
+
+export const IconOnly: Story = () => {
+  const p1 = useRealPress();
+  const p2 = useRealPress();
+
+  return (
+    <div className="flex gap-4">
+      <OAuthButton
+        provider="google"
+        onMouseDown={p1.onMouseDown}
+        onMouseUp={p1.onMouseUp}
+        onMouseLeave={p1.onMouseLeave}
+        className={`p-3 rounded-full bg-white border border-gray-300 shadow-sm hover:bg-gray-50 hover:border-gray-400 hover:shadow transition-all duration-75 cursor-pointer ${p1.className}`}
+        aria-label="Sign in with Google"
+      >
+        {null}
+      </OAuthButton>
+      <OAuthButton
+        provider="discord"
+        onMouseDown={p2.onMouseDown}
+        onMouseUp={p2.onMouseUp}
+        onMouseLeave={p2.onMouseLeave}
+        className={`p-3 rounded-full bg-white border border-gray-300 shadow-sm hover:bg-gray-50 hover:border-gray-400 hover:shadow transition-all duration-75 cursor-pointer ${p2.className}`}
+        aria-label="Sign in with Discord"
+      >
+        {null}
+      </OAuthButton>
+    </div>
+  );
+};
+
+export const CircularIconOnly: Story = () => {
+  const g1 = useRealPress();
+  const d1 = useRealPress();
+  const g2 = useRealPress();
+  const d2 = useRealPress();
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center gap-4">
+        <OAuthButton
+          provider="google"
+          onMouseDown={g1.onMouseDown}
+          onMouseUp={g1.onMouseUp}
+          onMouseLeave={g1.onMouseLeave}
+          className={`size-12 rounded-full bg-white border border-gray-300 shadow-sm hover:bg-gray-50 hover:border-gray-400 hover:shadow transition-all duration-75 cursor-pointer flex items-center justify-center ${g1.className}`}
+          aria-label="Sign in with Google"
+        >
+          {null}
+        </OAuthButton>
+        <OAuthButton
+          provider="discord"
+          onMouseDown={d1.onMouseDown}
+          onMouseUp={d1.onMouseUp}
+          onMouseLeave={d1.onMouseLeave}
+          className={`size-12 rounded-full bg-white border border-gray-300 shadow-sm hover:bg-gray-50 hover:border-gray-400 hover:shadow transition-all duration-75 cursor-pointer flex items-center justify-center ${d1.className}`}
+          aria-label="Sign in with Discord"
+        >
+          {null}
+        </OAuthButton>
+      </div>
+
+      <div className="flex items-center gap-4">
+        <OAuthButton
+          provider="google"
+          onMouseDown={g2.onMouseDown}
+          onMouseUp={g2.onMouseUp}
+          onMouseLeave={g2.onMouseLeave}
+          className={`size-14 rounded-full bg-gray-900 text-white border border-gray-800 shadow-md hover:bg-gray-800 hover:shadow-lg transition-all duration-75 cursor-pointer flex items-center justify-center ${g2.className}`}
+          aria-label="Sign in with Google"
+        >
+          {null}
+        </OAuthButton>
+        <OAuthButton
+          provider="discord"
+          onMouseDown={d2.onMouseDown}
+          onMouseUp={d2.onMouseUp}
+          onMouseLeave={d2.onMouseLeave}
+          className={`size-14 rounded-full bg-indigo-600 text-white border border-indigo-500 shadow-md hover:bg-indigo-500 hover:shadow-lg transition-all duration-75 cursor-pointer flex items-center justify-center ${d2.className}`}
+          aria-label="Sign in with Discord"
+        >
+          {null}
+        </OAuthButton>
+      </div>
+
+      <div className="flex items-center gap-4">
+        <OAuthButton
+          provider="google"
+          loading
+          className="size-12 rounded-full bg-white border border-gray-300 shadow-sm cursor-wait flex items-center justify-center"
+          aria-label="Connecting with Google"
+        >
+          {null}
+        </OAuthButton>
+        <OAuthButton
+          provider="discord"
+          disabled
+          className="size-12 rounded-full bg-gray-100 border border-gray-300 opacity-60 cursor-not-allowed flex items-center justify-center"
+          aria-label="Sign in with Discord"
+        >
+          {null}
+        </OAuthButton>
+      </div>
+    </div>
+  );
+};
+
+export const CustomStyling: Story = () => {
+  const g = useRealPress();
+  const d = useRealPress();
+
+  return (
+    <div className="flex flex-col gap-4">
+      <OAuthButton
+        provider="google"
+        onMouseDown={g.onMouseDown}
+        onMouseUp={g.onMouseUp}
+        onMouseLeave={g.onMouseLeave}
+        className={`flex items-center gap-3 px-8 py-4 bg-red-600 text-white rounded-full font-semibold shadow-lg hover:bg-red-700 hover:shadow-xl transition-all duration-75 cursor-pointer ${g.className}`}
+      >
+        Continue with Google
+      </OAuthButton>
+      <OAuthButton
+        provider="discord"
+        onMouseDown={d.onMouseDown}
+        onMouseUp={d.onMouseUp}
+        onMouseLeave={d.onMouseLeave}
+        className={`flex items-center gap-3 px-8 py-4 bg-indigo-600 text-white rounded-lg font-semibold shadow-lg hover:bg-indigo-700 hover:shadow-xl transition-all duration-75 cursor-pointer ${d.className}`}
+      >
+        Join via Discord
+      </OAuthButton>
+    </div>
+  );
+};
+
+const circularBaseStyles =
+  "size-12 rounded-full bg-white border border-gray-300 shadow-sm hover:bg-gray-50 hover:border-gray-400 hover:shadow transition-all duration-75 cursor-pointer flex items-center justify-center";
+
+const circularDarkStyles =
+  "dark:bg-gray-900 dark:border-gray-700 dark:hover:bg-gray-800";
+
+export const AllStates: Story = () => {
+  const g = useRealPress();
+  const d = useRealPress();
+  const gCirc = useRealPress();
+  const dCirc = useRealPress();
+
+  return (
+    <div className="grid grid-cols-3 gap-6 max-w-3xl">
+      <div className="space-y-2">
+        <p className="text-sm font-medium text-gray-500">Google</p>
+        <OAuthButton
+          provider="google"
+          onMouseDown={g.onMouseDown}
+          onMouseUp={g.onMouseUp}
+          onMouseLeave={g.onMouseLeave}
+          className={`${baseStyles} ${darkStyles} ${g.className}`}
+        >
+          Default
+        </OAuthButton>
+        <OAuthButton provider="google" disabled className={baseStyles}>
+          Disabled
+        </OAuthButton>
+        <OAuthButton provider="google" loading className={baseStyles}>
+          Loading
+        </OAuthButton>
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm font-medium text-gray-500">Discord</p>
+        <OAuthButton
+          provider="discord"
+          onMouseDown={d.onMouseDown}
+          onMouseUp={d.onMouseUp}
+          onMouseLeave={d.onMouseLeave}
+          className={`${baseStyles} ${darkStyles} ${d.className}`}
+        >
+          Default
+        </OAuthButton>
+        <OAuthButton provider="discord" disabled className={baseStyles}>
+          Disabled
+        </OAuthButton>
+        <OAuthButton provider="discord" loading className={baseStyles}>
+          Loading
+        </OAuthButton>
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm font-medium text-gray-500">Circular Icons</p>
+        <div className="flex items-center gap-2">
+          <OAuthButton
+            provider="google"
+            onMouseDown={gCirc.onMouseDown}
+            onMouseUp={gCirc.onMouseUp}
+            onMouseLeave={gCirc.onMouseLeave}
+            className={`${circularBaseStyles} ${circularDarkStyles} ${gCirc.className}`}
+            aria-label="Sign in with Google"
+          >
+            {null}
+          </OAuthButton>
+          <OAuthButton
+            provider="discord"
+            onMouseDown={dCirc.onMouseDown}
+            onMouseUp={dCirc.onMouseUp}
+            onMouseLeave={dCirc.onMouseLeave}
+            className={`${circularBaseStyles} ${circularDarkStyles} ${dCirc.className}`}
+            aria-label="Sign in with Discord"
+          >
+            {null}
+          </OAuthButton>
+        </div>
+        <div className="flex items-center gap-2">
+          <OAuthButton
+            provider="google"
+            disabled
+            className={`${circularBaseStyles} opacity-60 cursor-not-allowed`}
+            aria-label="Sign in with Google"
+          >
+            {null}
+          </OAuthButton>
+          <OAuthButton
+            provider="discord"
+            disabled
+            className={`${circularBaseStyles} opacity-60 cursor-not-allowed`}
+            aria-label="Sign in with Discord"
+          >
+            {null}
+          </OAuthButton>
+        </div>
+        <div className="flex items-center gap-2">
+          <OAuthButton
+            provider="google"
+            loading
+            className={`${circularBaseStyles} cursor-wait`}
+            aria-label="Connecting with Google"
+          >
+            {null}
+          </OAuthButton>
+          <OAuthButton
+            provider="discord"
+            loading
+            className={`${circularBaseStyles} cursor-wait`}
+            aria-label="Connecting with Discord"
+          >
+            {null}
+          </OAuthButton>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/oauth-button.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { forwardRef, useMemo } from 'react';
+import { forwardRef } from 'react';
 import { Button } from '@base-ui/react/button';
 import type { OAuthButtonProps, OAuthProvider } from './types';
 import { GoogleIcon, DiscordIcon, SpinnerIcon } from './icons';
@@ -13,19 +13,10 @@ const PROVIDER_NAMES: Record<OAuthProvider, string> = {
   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;
-  }
-}
+const PROVIDER_ICONS: Record<OAuthProvider, typeof GoogleIcon> = {
+  google: GoogleIcon,
+  discord: DiscordIcon,
+};
 
 /**
  * Sensible defaults that every button should have.
@@ -103,13 +94,9 @@ export const OAuthButton = forwardRef<HTMLButtonElement, OAuthButtonProps>(
     } = props;
 
     const isDisabled = disabled || loading;
-    const Icon = getProviderIcon(provider);
+    const Icon = PROVIDER_ICONS[provider];
     const defaultText = `Continuar con ${PROVIDER_NAMES[provider]}`;
-
-    const mergedClassName = useMemo(
-      () => mergeButtonClasses(className, isDisabled),
-      [className, isDisabled]
-    );
+    const mergedClassName = mergeButtonClasses(className, isDisabled);
 
     return (
       <Button
@@ -136,4 +123,3 @@ export const OAuthButton = forwardRef<HTMLButtonElement, OAuthButtonProps>(
   }
 );
 
-export default OAuthButton;

package/src/types.ts

@@ -1,8 +1,8 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, ButtonHTMLAttributes } from 'react';
 
 export type OAuthProvider = 'google' | 'discord';
 
-export interface OAuthButtonProps {
+export interface OAuthButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
   /**
    * The OAuth provider to authenticate with
    */
@@ -29,11 +29,6 @@ export interface OAuthButtonProps {
    * Pass `null` for icon-only mode
    */
   children?: ReactNode;
-
-  /**
-   * Disable the button
-   */
-  disabled?: boolean;
 }
 
 export interface OAuthIconsProps {
@@ -42,9 +37,4 @@ export interface OAuthIconsProps {
    * @default 24
    */
   size?: number;
-
-  /**
-   * Custom className
-   */
-  className?: string;
 }