@sublimee/auth-ui 0.1.1 → 0.1.13

package/dist/index.js

@@ -23,12 +23,15 @@ __export(index_exports, {
   DiscordIcon: () => DiscordIcon,
   GoogleIcon: () => GoogleIcon,
   OAuthButton: () => OAuthButton,
-  SpinnerIcon: () => SpinnerIcon
+  useButtonAnimation: () => useButtonAnimation
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/oauth-button.tsx
-var import_react = require("react");
+var import_react4 = require("react");
+
+// src/base-button.tsx
+var import_react3 = require("react");
 var import_button = require("@base-ui/react/button");
 
 // src/icons.tsx
@@ -36,7 +39,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function getSafeSize(size, defaultSize = 24) {
   return Math.max(1, size ?? defaultSize);
 }
-function GoogleIcon({ size }) {
+function GoogleIcon({ size, className }) {
   const safeSize = getSafeSize(size);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
@@ -47,6 +50,7 @@ function GoogleIcon({ size }) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
+      className,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "path",
@@ -80,7 +84,7 @@ function GoogleIcon({ size }) {
     }
   );
 }
-function DiscordIcon({ size }) {
+function DiscordIcon({ size, className }) {
   const safeSize = getSafeSize(size);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "svg",
@@ -91,6 +95,7 @@ function DiscordIcon({ size }) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
+      className,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "path",
         {
@@ -101,7 +106,7 @@ function DiscordIcon({ size }) {
     }
   );
 }
-function SpinnerIcon({ size }) {
+function SpinnerIcon({ size, className }) {
   const safeSize = getSafeSize(size, 20);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
@@ -112,39 +117,26 @@ function SpinnerIcon({ size }) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
+      className,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "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"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "path",
           {
-            d: "M12 2C6.477 2 2 6.477 2 12",
+            d: "M12 3a9 9 0 0 1 9 9",
             stroke: "currentColor",
-            strokeWidth: "4",
-            strokeLinecap: "round",
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "animateTransform",
-              {
-                attributeName: "transform",
-                type: "rotate",
-                from: "0 12 12",
-                to: "360 12 12",
-                dur: "1s",
-                repeatCount: "indefinite"
-              }
-            )
+            strokeWidth: "3",
+            strokeLinecap: "round"
           }
         )
       ]
@@ -152,8 +144,408 @@ function SpinnerIcon({ size }) {
   );
 }
 
-// src/oauth-button.tsx
+// src/button-loading-indicator.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function SpinnerLoadingIndicator({ size }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SpinnerIcon, { size, className: "sublime-button__spinner" });
+}
+var LOADING_INDICATORS = {
+  spinner: SpinnerLoadingIndicator
+};
+function ButtonLoadingIndicator({
+  animation = "spinner",
+  size = 18
+}) {
+  const LoadingIndicator = LOADING_INDICATORS[animation];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoadingIndicator, { size });
+}
+
+// src/use-button-animation.ts
+var import_react = require("react");
+var PRESS_RELEASE_DURATION = 180;
+function useButtonAnimation(animation = "press") {
+  const [phase, setPhase] = (0, import_react.useState)("idle");
+  const timeoutRef = (0, import_react.useRef)(null);
+  const clearExistingTimeout = (0, import_react.useCallback)(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      clearExistingTimeout();
+    };
+  }, [clearExistingTimeout]);
+  const handlePressStart = (0, import_react.useCallback)(() => {
+    if (!animation) {
+      return;
+    }
+    clearExistingTimeout();
+    setPhase("pressed");
+  }, [animation, clearExistingTimeout]);
+  const handlePressEnd = (0, import_react.useCallback)(() => {
+    if (!animation || phase !== "pressed") {
+      return;
+    }
+    setPhase("releasing");
+    timeoutRef.current = setTimeout(() => {
+      setPhase("idle");
+    }, PRESS_RELEASE_DURATION);
+  }, [animation, phase]);
+  const handleBlur = (0, import_react.useCallback)(() => {
+    clearExistingTimeout();
+    setPhase("idle");
+  }, [clearExistingTimeout]);
+  const handleKeyDown = (0, import_react.useCallback)(
+    (event) => {
+      if (event.repeat) {
+        return;
+      }
+      if (event.key === " " || event.key === "Enter") {
+        handlePressStart();
+      }
+    },
+    [handlePressStart]
+  );
+  const handleKeyUp = (0, import_react.useCallback)(
+    (event) => {
+      if (event.key === " " || event.key === "Enter") {
+        handlePressEnd();
+      }
+    },
+    [handlePressEnd]
+  );
+  const getAnimationClass = () => {
+    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
+    }
+  };
+}
+
+// src/runtime-styles.ts
+var import_react2 = require("react");
+var AUTH_UI_RUNTIME_STYLE_ID = "sublime-auth-ui-runtime-styles";
+var 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;
+  }
+}
+`;
+function useAuthUiRuntimeStyles() {
+  (0, import_react2.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);
+  }, []);
+}
+
+// src/base-button.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function mergeClassNames(...classNames) {
+  return classNames.filter(Boolean).join(" ");
+}
+function composeEventHandlers(internalHandler, externalHandler) {
+  if (!internalHandler) {
+    return externalHandler;
+  }
+  if (!externalHandler) {
+    return internalHandler;
+  }
+  return (event) => {
+    internalHandler(event);
+    externalHandler(event);
+  };
+}
+var BaseButton = (0, import_react3.forwardRef)(
+  function BaseButton2(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 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonLoadingIndicator, { animation: loadingAnimation, size: 18 }) : leadingVisual ?? (isIconOnly ? children : void 0);
+    const labelContent = isIconOnly ? null : children;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_button.Button,
+      {
+        ref: forwardedRef,
+        type,
+        disabled: disabled || loading,
+        className: mergedClassName,
+        "data-icon-only": isIconOnly ? "true" : void 0,
+        "data-loading": loading ? "true" : void 0,
+        "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),
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "sublime-button__content", children: [
+          visualContent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sublime-button__visual", children: visualContent }) : null,
+          labelContent !== null && labelContent !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sublime-button__label", children: labelContent }) : null
+        ] })
+      }
+    );
+  }
+);
+
+// src/oauth-button.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var PROVIDER_NAMES = {
   google: "Google",
   discord: "Discord"
@@ -162,51 +554,46 @@ var PROVIDER_ICONS = {
   google: GoogleIcon,
   discord: DiscordIcon
 };
-var SENSIBLE_DEFAULTS = ["cursor-pointer"];
-function mergeButtonClasses(userClassName, isDisabled) {
-  const userClasses = userClassName?.trim() ?? "";
-  const neededDefaults = SENSIBLE_DEFAULTS.filter(
-    (defaultClass) => !userClasses.includes(defaultClass)
-  );
-  if (isDisabled && !userClasses.includes("cursor-not-allowed")) {
-    neededDefaults.push("cursor-not-allowed");
-  }
-  if (neededDefaults.length === 0) {
-    return userClasses;
-  }
-  return `${neededDefaults.join(" ")} ${userClasses}`.trim();
+function mergeClassNames2(...classNames) {
+  return classNames.filter(Boolean).join(" ");
 }
-var OAuthButton = (0, import_react.forwardRef)(
+var OAuthButton = (0, import_react4.forwardRef)(
   function OAuthButton2(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 isIconOnly = children === null;
     const Icon = PROVIDER_ICONS[provider];
     const defaultText = `Continuar con ${PROVIDER_NAMES[provider]}`;
-    const mergedClassName = mergeButtonClasses(className, isDisabled);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_button.Button,
+    const buttonLabel = loading ? children ?? "Conectando..." : children ?? defaultText;
+    const resolvedAriaLabel = ariaLabel ?? (isIconOnly ? defaultText : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      BaseButton,
       {
         ref: forwardedRef,
         onClick,
-        disabled: isDisabled,
-        "aria-busy": loading,
-        className: mergedClassName,
+        disabled,
+        animation,
+        variant,
+        loading,
+        loadingAnimation,
+        isIconOnly,
+        leadingVisual: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: 20 }),
+        className: mergeClassNames2("sublime-auth-button", className),
+        "data-provider": provider,
+        "aria-label": resolvedAriaLabel,
         ...otherProps,
-        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SpinnerIcon, {}),
-          children !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: children ?? "Conectando..." })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, {}),
-          children !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: children ?? defaultText })
-        ] })
+        children: buttonLabel
       }
     );
   }
@@ -216,5 +603,5 @@ var OAuthButton = (0, import_react.forwardRef)(
   DiscordIcon,
   GoogleIcon,
   OAuthButton,
-  SpinnerIcon
+  useButtonAnimation
 });